/*
 * Hooger HR — strict Persian RTL UI/UX layer v3.3.0
 * Presentation only. No route, form action, permission, database or business logic changes.
 */

:root{
  --ux-page:#f4f7fb;
  --ux-surface:#ffffff;
  --ux-surface-soft:#f8fafc;
  --ux-ink:#101c36;
  --ux-ink-2:#273754;
  --ux-muted:#607089;
  --ux-muted-2:#7b879b;
  --ux-line:#dbe3ee;
  --ux-line-strong:#c8d3e1;
  --ux-primary:#1f5fd3;
  --ux-primary-hover:#184fab;
  --ux-primary-soft:#edf4ff;
  --ux-danger:#c82d3e;
  --ux-danger-soft:#fff1f3;
  --ux-success:#188455;
  --ux-success-soft:#ecfaf3;
  --ux-warning:#a86108;
  --ux-warning-soft:#fff7e8;
  --ux-radius-xs:8px;
  --ux-radius-sm:11px;
  --ux-radius-md:15px;
  --ux-radius-lg:20px;
  --ux-shadow-card:0 8px 24px rgba(16,28,54,.055);
  --ux-shadow-float:0 18px 50px rgba(16,28,54,.14);
  --ux-sidebar:260px;
  --ux-topbar:76px;
  --ux-mobile-nav:74px;
  --ux-focus:0 0 0 4px rgba(31,95,211,.17);
  --ux-font:"IRANSansX","Vazirmatn",Tahoma,Arial,sans-serif;
}

@media screen{
  html{font-size:16px!important;scroll-padding-block-start:calc(var(--ux-topbar) + 18px)}
  html,body{background:var(--ux-page)!important;color:var(--ux-ink)!important}
  body{font-family:var(--ux-font)!important;font-size:16px!important;line-height:1.85!important;letter-spacing:0!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
  body,button,input,select,textarea{font-family:var(--ux-font)!important}
  :where(p,li,dd,dt,td,th,label,small,strong,span,a,button){letter-spacing:0!important}
  :where(h1,h2,h3,h4,p){overflow-wrap:break-word}
  :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:0!important;box-shadow:var(--ux-focus)!important;border-color:#6d9ff0!important}
  ::selection{background:#dbeafe;color:#102453}
  ::placeholder{color:#8a98ab!important;opacity:1!important}

  /* Shell and page rhythm */
  .ds-sidebar{inline-size:var(--ux-sidebar)!important;background:#071f4b!important;border-inline-start:1px solid rgba(255,255,255,.08)!important;box-shadow:-10px 0 34px rgba(8,28,67,.08)!important}
  .ds-main{margin-inline-end:var(--ux-sidebar)!important;margin-inline-start:0!important;min-inline-size:0!important}
  .ds-topbar{block-size:var(--ux-topbar)!important;min-block-size:var(--ux-topbar)!important;padding-inline:24px!important;gap:16px!important;background:rgba(255,255,255,.97)!important;border-block-end:1px solid var(--ux-line)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .ds-container,.container{max-inline-size:1540px!important;padding:28px clamp(20px,2.2vw,34px) 64px!important;margin-inline:auto!important}
  .page-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;margin-block-end:24px!important}
  .page-head>div:first-child{min-inline-size:0!important}
  .page-head h1{font-size:clamp(1.65rem,1.45rem + .55vw,2.15rem)!important;line-height:1.45!important;font-weight:850!important;color:#0d1b35!important;margin:0!important}
  .page-head p{font-size:.98rem!important;line-height:1.9!important;color:var(--ux-muted)!important;margin-block-start:5px!important;max-inline-size:76ch!important}
  .eyebrow,.page-eyebrow{font-size:.78rem!important;line-height:1.6!important;font-weight:800!important;color:#b4233e!important;margin-block-end:5px!important;gap:7px!important}
  .footer-note{font-size:.78rem!important;color:#8490a3!important;padding-block:22px!important;gap:8px!important}

  /* Sidebar */
  .ds-brand{block-size:88px!important;min-block-size:88px!important;padding:10px 18px!important;border-block-end:1px solid rgba(255,255,255,.1)!important;justify-content:center!important}
  .ds-brand-logo{inline-size:66px!important;block-size:66px!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important}
  .ds-sidebar-scroll{padding:14px 11px 18px!important;scrollbar-width:thin!important;scrollbar-color:rgba(255,255,255,.22) transparent!important}
  .ds-sidebar .nav-section-title{font-size:.73rem!important;line-height:1.6!important;font-weight:750!important;color:rgba(226,232,240,.55)!important;padding:15px 13px 7px!important}
  .ds-nav{gap:5px!important}
  .ds-nav a{position:relative!important;min-block-size:50px!important;padding:10px 13px!important;border-radius:12px!important;gap:11px!important;color:#d7e0ef!important;font-size:.94rem!important;line-height:1.55!important;font-weight:700!important;text-align:start!important;transition:background-color .16s ease,color .16s ease,transform .16s ease!important}
  .ds-nav a:hover{background:rgba(255,255,255,.075)!important;color:#fff!important;transform:translateX(-1px)}
  .ds-nav a.active{background:linear-gradient(90deg,rgba(43,98,188,.72),rgba(31,74,143,.78))!important;color:#fff!important;box-shadow:inset -3px 0 0 #ef3c56!important}
  .ds-nav a.active::after{display:none!important}
  .ds-nav .nav-icon{inline-size:23px!important;block-size:23px!important;color:inherit!important}
  .ds-nav .nav-count{min-inline-size:23px!important;block-size:23px!important;padding-inline:7px!important;font-size:.72rem!important;background:#e62f49!important;color:#fff!important}
  .ds-sidebar-footer{padding:11px!important;border-block-start:1px solid rgba(255,255,255,.1)!important;gap:6px!important}
  .ds-sidebar-footer a,.ds-sidebar-footer button{min-block-size:48px!important;border-radius:11px!important;padding-inline:13px!important;color:#d7e0ef!important;font-size:.9rem!important;gap:10px!important}
  .ds-sidebar-footer a:hover,.ds-sidebar-footer button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
  .ds-sidebar-logout{color:#ffb5c0!important}

  /* Top bar */
  .ds-page-title{min-inline-size:0!important;flex:1 1 auto!important;text-align:center!important}
  .ds-page-title strong{display:block!important;font-size:1.17rem!important;line-height:1.45!important;font-weight:850!important;color:#101d37!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .ds-top-actions{margin-inline-start:auto!important;margin-inline-end:0!important;gap:9px!important;min-inline-size:0!important}
  .ds-date-chip{min-block-size:44px!important;padding-inline:13px!important;border:1px solid var(--ux-line)!important;border-radius:11px!important;background:#fff!important;color:#475772!important;font-size:.84rem!important;box-shadow:0 2px 5px rgba(16,28,54,.02)!important}
  .message-shortcut,.menu-toggle,.icon-button{inline-size:44px!important;min-inline-size:44px!important;block-size:44px!important;border:1px solid var(--ux-line)!important;border-radius:11px!important;background:#fff!important;color:#485a75!important}
  .message-shortcut:hover,.menu-toggle:hover,.icon-button:hover{background:var(--ux-primary-soft)!important;border-color:#b9cff4!important;color:var(--ux-primary)!important}
  .message-shortcut b{min-inline-size:21px!important;block-size:21px!important;font-size:.68rem!important;inset-block-start:-6px!important;inset-inline-end:auto!important;inset-inline-start:-6px!important}
  .ds-profile{grid-template-columns:40px minmax(120px,1fr) 18px!important;min-block-size:50px!important;min-inline-size:220px!important;padding:5px 8px!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;background:#fff!important;gap:9px!important;text-align:start!important}
  .ds-profile:hover{border-color:#b8c8dd!important;background:#fbfdff!important}
  .ds-profile-avatar{inline-size:40px!important;block-size:40px!important;font-size:.9rem!important}
  .ds-profile strong{font-size:.9rem!important;line-height:1.55!important;color:#18243c!important}
  .ds-profile small{font-size:.75rem!important;line-height:1.55!important;color:var(--ux-muted)!important}
  .ds-profile-menu{min-inline-size:250px!important;padding:8px!important;border:1px solid var(--ux-line)!important;border-radius:15px!important;box-shadow:var(--ux-shadow-float)!important}
  .ds-profile-menu-head{padding:11px!important;border-block-end:1px solid var(--ux-line)!important;margin-block-end:5px!important}
  .ds-profile-menu-item{min-block-size:46px!important;border-radius:10px!important;padding-inline:11px!important;font-size:.9rem!important}

  /* Cards and content hierarchy */
  .card{background:var(--ux-surface)!important;border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-md)!important;box-shadow:var(--ux-shadow-card)!important;padding:22px!important}
  .card:hover{border-color:#cfd9e7!important}
  .card.compact{padding:16px!important}
  .card-head,.section-title-row{align-items:flex-start!important;gap:16px!important;margin-block-end:18px!important}
  .card-head>div,.section-title-row>div{min-inline-size:0!important}
  .card h2,.card-head h2,.section-title h2,.health-card-head h2{font-size:1.22rem!important;line-height:1.55!important;font-weight:850!important;color:#13203a!important;margin:0!important}
  .card h3,.v293-info-section h3{font-size:1.03rem!important;line-height:1.65!important;font-weight:820!important;color:#1c2b47!important}
  .card-subtitle,.section-title p,.health-card-head p{font-size:.89rem!important;line-height:1.85!important;color:var(--ux-muted)!important;margin-block-start:4px!important}
  .section-gap{margin-block-start:22px!important}
  .grid{gap:20px!important}
  .stats{gap:15px!important;margin-block-end:20px!important}
  .stat-card{min-block-size:116px!important;padding:17px!important;border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-md)!important;box-shadow:var(--ux-shadow-card)!important;gap:13px!important}
  .stat-card strong{font-size:1.55rem!important;line-height:1.35!important;color:#101d37!important}
  .stat-card span,.stat-card small{font-size:.83rem!important;line-height:1.65!important;color:var(--ux-muted)!important}
  .stat-icon{inline-size:48px!important;block-size:48px!important;border-radius:14px!important}
  .quick-action{min-block-size:84px!important;padding:15px!important;border:1px solid var(--ux-line)!important;border-radius:13px!important;gap:11px!important;font-size:.92rem!important;font-weight:750!important}

  /* Buttons, chips, feedback */
  .btn{min-block-size:44px!important;padding:9px 15px!important;border-radius:10px!important;font-size:.91rem!important;line-height:1.45!important;font-weight:800!important;gap:8px!important;white-space:nowrap!important}
  .btn.small{min-block-size:38px!important;padding:7px 11px!important;font-size:.82rem!important}
  .btn.primary{background:var(--ux-primary)!important;border-color:var(--ux-primary)!important;color:#fff!important;box-shadow:0 5px 14px rgba(31,95,211,.16)!important}
  .btn.primary:hover{background:var(--ux-primary-hover)!important;border-color:var(--ux-primary-hover)!important}
  .btn.ghost{background:#fff!important;border-color:var(--ux-line-strong)!important;color:#33445f!important}
  .btn.ghost:hover{background:#f7faff!important;border-color:#abc0df!important;color:#173866!important}
  .btn.danger{background:#fff!important;border-color:#ffc7ce!important;color:var(--ux-danger)!important}
  .badge{min-block-size:28px!important;padding:4px 10px!important;font-size:.76rem!important;line-height:1.4!important;font-weight:800!important;border-radius:999px!important}
  .flash{min-block-size:50px!important;padding:11px 14px!important;border-radius:12px!important;font-size:.9rem!important;line-height:1.75!important;gap:9px!important}
  .flash-close{inline-size:38px!important;block-size:38px!important;margin-inline-start:auto!important}
  .preview-note,.message-security-note,.security-panel,.health-note{font-size:.9rem!important;line-height:1.85!important;border-radius:13px!important}

  /* Forms */
  .form-grid{gap:19px 20px!important}
  .form-grid label,.filters label,.login-form label,.filter-field{font-size:.9rem!important;line-height:1.6!important;font-weight:780!important;color:#263650!important;gap:7px!important;text-align:start!important}
  .form-grid label small,.filters label small,.file-field small,.filter-field small{font-size:.79rem!important;line-height:1.8!important;font-weight:450!important;color:var(--ux-muted)!important}
  .form-section{min-block-size:52px!important;margin-block:10px 2px!important;padding:12px 14px!important;border:1px solid #e1e8f2!important;border-radius:12px!important;background:linear-gradient(90deg,#f7f9fd,#fbfcfe)!important;color:#172b51!important;font-size:1rem!important;line-height:1.55!important;font-weight:850!important;gap:9px!important}
  input,select,textarea{font-size:.94rem!important;line-height:1.65!important;color:#15233d!important;border:1px solid var(--ux-line-strong)!important;border-radius:10px!important;background:#fff!important}
  input,select{block-size:50px!important;min-block-size:50px!important;padding-inline:14px!important}
  textarea{min-block-size:124px!important;padding:13px 14px!important;line-height:1.9!important}
  input:hover,select:hover,textarea:hover{border-color:#aebfd5!important}
  input:focus,select:focus,textarea:focus{border-color:#6495e7!important;box-shadow:var(--ux-focus)!important}
  select{padding-inline-end:44px!important;background-position:left 14px center!important}
  .input-with-icon>svg,.client-search>svg{inset-inline-start:14px!important;inset-inline-end:auto!important;color:#728299!important}
  .input-with-icon input,.client-search input{padding-inline-start:43px!important;padding-inline-end:14px!important}
  .password-wrap input{padding-inline-end:50px!important;padding-inline-start:14px!important}
  .password-toggle{inset-inline-end:5px!important;inset-inline-start:auto!important;inset-block-start:5px!important;inline-size:40px!important;block-size:40px!important}
  .money-field{min-inline-size:0!important}
  .money-field input{padding-inline-end:58px!important}
  .money-field>span{font-size:.76rem!important;color:#66758b!important;inset-inline-end:12px!important}
  .filters,.v280-toolbar,.accounting-report-filters{gap:13px!important;padding:16px!important;border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-md)!important;background:#fff!important;box-shadow:var(--ux-shadow-card)!important}
  .filters .grow{min-inline-size:240px!important}
  .form-actions{margin-block-start:7px!important;padding-block-start:17px!important;border-block-start:1px solid var(--ux-line)!important;gap:10px!important}
  .check-card,.radio-card,.permission-option,.switch-row{min-block-size:76px!important;padding:12px!important;border:1px solid var(--ux-line)!important;border-radius:12px!important;background:#fff!important;gap:10px!important}
  .check-card:hover{border-color:#aec2df!important;background:#fbfdff!important}
  .check-card input[type="checkbox"],.check-card input[type="radio"]{inline-size:20px!important;min-inline-size:20px!important;block-size:20px!important;margin-block-start:2px!important}
  .check-card strong{font-size:.86rem!important;line-height:1.65!important;color:#1b2b47!important}
  .check-card small{font-size:.76rem!important;line-height:1.7!important;color:var(--ux-muted)!important}
  .permission-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important}
  .permission-switches{gap:11px!important}
  .user-management-grid{grid-template-columns:minmax(0,1fr) 290px!important;gap:20px!important}
  .role-guide{position:sticky!important;inset-block-start:calc(var(--ux-topbar) + 20px)!important}
  .role-line{min-block-size:48px!important;font-size:.84rem!important;line-height:1.65!important}

  /* Tables and list density */
  .table-wrap{border:1px solid var(--ux-line)!important;border-radius:13px!important;background:#fff!important;overflow:auto!important;scrollbar-width:thin!important;scrollbar-color:#c7d2e1 transparent!important}
  .table{min-inline-size:760px!important;font-size:.87rem!important}
  .table th{padding:12px 14px!important;background:#f6f8fb!important;color:#586981!important;font-size:.78rem!important;line-height:1.55!important;font-weight:800!important;border-block-end:1px solid var(--ux-line)!important}
  .table td{padding:13px 14px!important;font-size:.87rem!important;line-height:1.75!important;color:#24344f!important;border-block-end:1px solid #edf1f6!important}
  .table td strong{font-size:.89rem!important;line-height:1.65!important;color:#182945!important}
  .table td small,.employee-card small,.document-item small{font-size:.76rem!important;line-height:1.7!important;color:var(--ux-muted)!important}
  .table tbody tr:hover td{background:#f8fbff!important}
  .actions-cell{min-inline-size:110px!important}
  .row-actions{gap:7px!important}
  .pagination{padding-block-start:18px!important;gap:7px!important}
  .pagination a,.pagination span,.pagination button{min-inline-size:42px!important;block-size:42px!important;border-radius:10px!important;font-size:.84rem!important}
  .subnav{gap:5px!important;margin-block-end:22px!important;scrollbar-width:none!important}
  .subnav a{min-block-size:46px!important;padding-inline:14px!important;font-size:.88rem!important}
  .document-item,.notification-item,.message-mini{min-block-size:64px!important;padding:12px!important;border-color:var(--ux-line)!important;border-radius:12px!important}
  .empty{min-block-size:190px!important;padding:30px 22px!important;font-size:.94rem!important;line-height:1.9!important;color:var(--ux-muted)!important}
  .empty-icon{inline-size:54px!important;block-size:54px!important;border-radius:15px!important}

  /* Dashboard */
  .v280-kpis{gap:14px!important}
  .v280-kpi{min-block-size:150px!important;padding:18px!important;border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius-md)!important;box-shadow:var(--ux-shadow-card)!important}
  .v280-kpi-label{font-size:.84rem!important;line-height:1.6!important;font-weight:750!important;color:#445570!important}
  .v280-kpi strong{font-size:1.75rem!important;line-height:1.3!important;color:#101e38!important}
  .v280-kpi>small,.v280-kpi small{font-size:.79rem!important;line-height:1.7!important;color:var(--ux-muted)!important}
  .v280-kpi-icon{inline-size:48px!important;block-size:48px!important;border-radius:14px!important}
  .v280-dashboard-grid,.v280-bottom-grid{gap:18px!important}
  .v280-chart-card,.v280-process-card,.v280-follow-card{padding:20px!important}
  .v280-chart-card h2,.v280-process-card h2,.v280-follow-card h2{font-size:1.17rem!important}
  .v280-chart-labels{font-size:.77rem!important;color:#63738a!important}
  .v280-process-step strong,.v280-follow-row strong,.v280-activity-item strong,.v280-slip-item strong{font-size:.88rem!important;line-height:1.65!important}
  .v280-process-step small,.v280-follow-row small,.v280-activity-item small,.v280-slip-item small,.v280-alert-item small{font-size:.77rem!important;line-height:1.75!important}
  .v280-quick{min-block-size:92px!important;font-size:.87rem!important;line-height:1.65!important}

  /* Work and payroll */
  .v280-work-kpis{gap:13px!important}
  .v280-work-kpi{min-block-size:118px!important;padding:16px!important;border-radius:14px!important}
  .v280-work-kpi strong{font-size:1.45rem!important}
  .v280-work-kpi small{font-size:.8rem!important;line-height:1.7!important}
  .v280-alert-strip{gap:9px!important;padding:13px!important;border-radius:14px!important}
  .v280-alert-title{font-size:.9rem!important;line-height:1.65!important}
  .v280-alert-item{min-block-size:64px!important;padding:10px 12px!important}
  .v280-alert-item strong{font-size:.83rem!important;line-height:1.6!important}
  .v280-work-table .table td,.v280-work-table .table th{white-space:nowrap!important}
  .simple-flow-step{min-block-size:66px!important;padding:11px 12px!important}
  .simple-flow-step strong{font-size:.88rem!important}.simple-flow-step small{font-size:.78rem!important}
  .period-title strong{font-size:1rem!important;line-height:1.65!important}
  .period-title small,.payroll-timeline time{font-size:.78rem!important}
  .accounting-stats .stat-card{min-block-size:126px!important}
  .accounting-stats .stat-card strong{font-size:1rem!important}
  .money-number{font-variant-numeric:tabular-nums!important}
  .money-unit{font-size:.76rem!important;color:#6b7a90!important}

  /* Messages */
  .v293-message-layout{grid-template-columns:minmax(240px,286px) minmax(480px,1fr) minmax(250px,310px)!important;gap:12px!important;min-block-size:calc(100dvh - var(--ux-topbar) - 56px)!important;max-block-size:calc(100dvh - var(--ux-topbar) - 56px)!important}
  .v293-message-list-panel,.v293-thread-panel,.v293-info-panel{border:1px solid var(--ux-line)!important;border-radius:15px!important;background:#fff!important;box-shadow:var(--ux-shadow-card)!important;overflow:hidden!important}
  .v293-panel-head{min-block-size:76px!important;padding:15px!important;border-block-end:1px solid var(--ux-line)!important}
  .v293-panel-head h2{font-size:1.15rem!important;line-height:1.55!important}.v293-panel-head small{font-size:.78rem!important;line-height:1.65!important}
  .v293-message-search{padding:12px!important}
  .v293-search-control input{block-size:46px!important;font-size:.88rem!important}
  .v293-message-tabs{min-block-size:44px!important;padding-inline:10px!important}
  .v293-message-tabs a{min-block-size:42px!important;padding-inline:10px!important;font-size:.8rem!important}
  .v293-conversation-row{min-block-size:105px!important;padding:13px!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:9px!important}
  .v293-avatar,.v293-subject-avatar,.v293-bubble-avatar{font-size:.82rem!important}
  .v293-conversation-copy strong{font-size:.9rem!important;line-height:1.6!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .v293-conversation-copy small,.v293-conversation-copy p,.v293-conversation-row>time{font-size:.75rem!important;line-height:1.65!important}
  .v293-thread-toolbar{min-block-size:62px!important;padding:9px 12px!important;border-block-end:1px solid var(--ux-line)!important;gap:8px!important}
  .v293-thread-subject{min-block-size:98px!important;padding:16px 18px!important;border-block-end:1px solid var(--ux-line)!important}
  .v293-thread-subject h1{font-size:1.3rem!important;line-height:1.6!important;color:#14233f!important}
  .v293-thread-subject p{font-size:.82rem!important;line-height:1.75!important}
  .v293-thread-scroll{padding:20px!important;background:#f6f8fc!important}
  .v293-message-bubble{max-inline-size:100%!important;margin-block-end:18px!important;gap:8px!important}
  .v293-bubble-card{max-inline-size:min(78%,720px)!important;padding:13px 15px!important;border-radius:15px!important;box-shadow:0 4px 14px rgba(16,28,54,.045)!important}
  .v293-bubble-head strong{font-size:.88rem!important}.v293-bubble-head time{font-size:.74rem!important}
  .v293-bubble-body{font-size:.94rem!important;line-height:2!important;color:#1e2c45!important}
  .v293-attachment{min-block-size:58px!important;padding:9px!important;border-radius:11px!important}
  .v293-attachment strong{font-size:.82rem!important}.v293-attachment small{font-size:.72rem!important}
  .v293-composer{min-block-size:78px!important;padding:11px 12px!important;grid-template-columns:minmax(0,1fr) 46px auto!important;gap:8px!important;border-block-start:1px solid var(--ux-line)!important;background:#fff!important}
  .v293-composer-field textarea{min-block-size:50px!important;max-block-size:140px!important;padding:10px 13px!important;font-size:.92rem!important;line-height:1.75!important}
  .v293-attach-button{inline-size:46px!important;block-size:46px!important;border-radius:11px!important}
  .v293-send-button{min-block-size:46px!important;min-inline-size:92px!important}
  .v293-info-section{padding:16px!important}
  .v293-info-row{min-block-size:48px!important;font-size:.84rem!important;line-height:1.65!important}
  .v293-participant{min-block-size:58px!important}
  .v293-index-row{min-block-size:96px!important;padding:14px!important}
  .v293-index-copy strong{font-size:.92rem!important;line-height:1.65!important}.v293-index-copy p,.v293-index-copy small,.v293-index-meta{font-size:.78rem!important;line-height:1.75!important}

  /* Health, updates, settings */
  .health-check-item{min-block-size:72px!important;padding:12px!important;border-radius:12px!important}
  .health-item-copy strong{font-size:.9rem!important;line-height:1.65!important}.health-item-copy small{font-size:.78rem!important;line-height:1.75!important}
  .health-facts>div,.update-process>div,.readiness-list>div{min-block-size:50px!important;font-size:.85rem!important;line-height:1.7!important}
  .update-file-picker{min-block-size:106px!important}
  .settings-layout{gap:20px!important}

  /* Authentication and installer */
  .auth-body,.install-body{font-size:16px!important;min-block-size:100dvh!important;padding:clamp(16px,3vw,34px)!important;background:radial-gradient(circle at 50% 0,#fff 0,#f4f7fb 43%,#eef3fa 100%)!important}
  .auth-shell{inline-size:min(100%,510px)!important;margin-inline:auto!important}
  .auth-card{padding:32px!important;border:1px solid var(--ux-line)!important;border-radius:22px!important;box-shadow:0 24px 70px rgba(16,28,54,.11)!important;background:#fff!important}
  .auth-brand{gap:12px!important;margin-block-end:26px!important}
  .auth-brand img{inline-size:58px!important;block-size:58px!important;object-fit:contain!important;border-radius:0!important}
  .auth-brand-copy strong{font-size:1.2rem!important;line-height:1.45!important}.auth-brand-copy span{font-size:.82rem!important;line-height:1.7!important}
  .auth-heading{margin-block-end:22px!important}
  .auth-heading>span{font-size:.77rem!important;line-height:1.5!important;padding:4px 10px!important}
  .auth-heading h1{font-size:1.75rem!important;line-height:1.5!important;margin-block:10px 5px!important}
  .auth-heading p{font-size:.91rem!important;line-height:1.85!important}
  .auth-form{gap:17px!important}
  .auth-field-label{font-size:.9rem!important;line-height:1.6!important;margin-block-end:6px!important}
  .auth-input-wrap{position:relative!important;display:block!important}
  .auth-input-wrap>svg{position:absolute!important;inset-inline-start:15px!important;inset-inline-end:auto!important;inset-block-start:50%!important;transform:translateY(-50%)!important;z-index:2!important;color:#71819a!important;pointer-events:none!important}
  .auth-input-wrap input{block-size:54px!important;padding-inline-start:45px!important;padding-inline-end:14px!important;font-size:.96rem!important}
  .auth-input-wrap.password-wrap input{padding-inline-end:52px!important}
  .auth-input-wrap .password-toggle{inset-inline-end:6px!important;inset-inline-start:auto!important;inset-block-start:7px!important}
  .auth-submit{min-block-size:52px!important;font-size:.96rem!important;margin-block-start:2px!important}
  .auth-feature-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-block-start:17px!important}
  .auth-feature{min-block-size:48px!important;padding:8px!important;font-size:.8rem!important;border-radius:10px!important}
  .auth-support{font-size:.8rem!important;line-height:1.85!important;margin-block-start:15px!important}
  .auth-footer{font-size:.75rem!important;line-height:1.7!important;margin-block-start:14px!important}
  .install-shell-v2{inline-size:min(100%,900px)!important}
  .install-top{min-block-size:80px!important}
  .install-brand strong{font-size:1.22rem!important}.install-brand span{font-size:.82rem!important}
  .install-version,.install-eyebrow,.step-badge{font-size:.77rem!important}
  .install-card{padding:30px!important;border:1px solid var(--ux-line)!important;border-radius:22px!important;box-shadow:0 22px 60px rgba(16,28,54,.1)!important}
  .install-header h1{font-size:1.7rem!important;line-height:1.5!important}.install-header p{font-size:.92rem!important;line-height:1.9!important}
  .install-step{min-block-size:58px!important;padding:11px 13px!important}.install-step span{font-size:.86rem!important}
  .requirement{min-block-size:76px!important;padding:13px!important;border-radius:12px!important}
  .requirement-copy strong{font-size:.9rem!important;line-height:1.65!important}.requirement-copy small{font-size:.76rem!important;line-height:1.7!important}
  .install-footer{font-size:.76rem!important}

  /* Dialogs and floating layers */
  dialog,.notification-dialog,.modal,.drawer{max-inline-size:min(94vw,680px)!important;max-block-size:min(88dvh,820px)!important;border-radius:18px!important;border:1px solid var(--ux-line)!important;box-shadow:var(--ux-shadow-float)!important}
  .notification-dialog{inline-size:min(92vw,480px)!important}
  .notification-modal-item{min-block-size:72px!important;padding:12px!important}
  .notification-modal-item strong{font-size:.88rem!important}.notification-modal-item small,.notification-modal-item time{font-size:.76rem!important;line-height:1.7!important}
}

@media screen and (max-width:1279px){
  :root{--ux-sidebar:238px}
  .ds-container,.container{padding-inline:22px!important}
  .ds-nav a{font-size:.87rem!important;padding-inline:11px!important}
  .ds-profile{min-inline-size:190px!important;grid-template-columns:38px minmax(100px,1fr) 16px!important}
  .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v293-message-layout{grid-template-columns:minmax(230px,270px) minmax(420px,1fr)!important}
  .v293-info-panel{position:fixed!important;inset-block:var(--ux-topbar) 0!important;inset-inline-start:0!important;inline-size:min(360px,88vw)!important;z-index:80!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;border-radius:0!important;box-shadow:var(--ux-shadow-float)!important}
  .message-info-open .v293-info-panel{transform:translateX(0)!important}
}

@media screen and (max-width:1023px){
  :root{--ux-topbar:68px}
  .ds-sidebar{inline-size:min(320px,86vw)!important;transform:translateX(105%)!important;transition:transform .2s ease!important;z-index:100!important}
  body.sidebar-open .ds-sidebar{transform:translateX(0)!important}
  .ds-main{margin-inline:0!important}
  .ds-topbar{grid-template-columns:44px minmax(0,1fr) auto!important;block-size:var(--ux-topbar)!important;min-block-size:var(--ux-topbar)!important;padding-inline:14px!important}
  .menu-toggle{display:grid!important}
  .ds-page-title{text-align:start!important}
  .ds-page-title strong{font-size:1.03rem!important;text-align:start!important}
  .ds-date-chip{display:none!important}
  .ds-profile-wrap{display:none!important}
  .ds-container,.container{padding:20px 16px 96px!important}
  .page-head h1{font-size:1.65rem!important}
  .page-head p{font-size:.91rem!important}
  .user-management-grid,.settings-layout,.two-col{grid-template-columns:1fr!important}
  .role-guide{position:static!important;order:2!important}
  .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v280-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .v280-dashboard-grid,.v280-bottom-grid{grid-template-columns:1fr 1fr!important}
  .v280-chart-card{grid-column:1/-1!important}
  .v293-message-layout{grid-template-columns:minmax(240px,300px) minmax(0,1fr)!important;max-block-size:calc(100dvh - var(--ux-topbar) - 34px)!important}
  .v293-message-list-panel{grid-column:1!important}.v293-thread-panel{grid-column:2!important}
}

@media screen and (max-width:767px){
  :root{--ux-mobile-nav:76px}
  body{font-size:15.5px!important;padding-block-end:calc(var(--ux-mobile-nav) + env(safe-area-inset-bottom))!important}
  .ds-topbar{padding-inline:10px!important;gap:8px!important}
  .ds-page-title strong{font-size:1rem!important;line-height:1.5!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
  .ds-top-actions{gap:6px!important}
  .message-shortcut,.menu-toggle{inline-size:44px!important;min-inline-size:44px!important;block-size:44px!important}
  .ds-container,.container{padding:16px 10px calc(var(--ux-mobile-nav) + 28px + env(safe-area-inset-bottom))!important}
  .footer-note{display:none!important}
  .page-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin-block-end:18px!important}
  .page-head h1{font-size:1.45rem!important;line-height:1.5!important}
  .page-head p{font-size:.88rem!important;line-height:1.85!important}
  .page-head>.actions,.page-head>.btn{inline-size:100%!important}
  .page-head>.actions .btn,.page-head>.btn{flex:1 1 auto!important;justify-content:center!important}
  .card{padding:16px!important;border-radius:14px!important}
  .card.compact{padding:13px!important}
  .card h2,.card-head h2,.section-title h2,.health-card-head h2{font-size:1.08rem!important}
  .card h3{font-size:.98rem!important}
  .card-subtitle{font-size:.82rem!important}
  .card-head{gap:10px!important;margin-block-end:14px!important}
  .stats,.v280-kpis,.v280-work-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card,.v280-kpi{min-block-size:138px!important;padding:14px!important}
  .v280-kpi strong{font-size:1.55rem!important}.v280-kpi-label{font-size:.8rem!important}.v280-kpi>small{font-size:.76rem!important}
  .v280-dashboard-grid,.v280-bottom-grid{grid-template-columns:1fr!important;gap:14px!important}
  .v280-chart-card,.v280-process-card,.v280-follow-card{padding:16px!important}
  .v280-chart{min-block-size:270px!important}
  .v280-chart-labels{font-size:.72rem!important;gap:4px!important}
  .quick-actions,.v280-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid{grid-template-columns:1fr!important;gap:16px!important}
  .form-grid>.full,.form-section{grid-column:1!important}
  .form-section{min-block-size:48px!important;padding:11px 12px!important;font-size:.94rem!important}
  .form-grid label,.filters label,.login-form label{font-size:.88rem!important}
  input,select{block-size:52px!important;min-block-size:52px!important;font-size:16px!important}
  textarea{font-size:16px!important;min-block-size:132px!important}
  .filters,.v280-toolbar,.accounting-report-filters{display:grid!important;grid-template-columns:1fr!important;padding:13px!important;gap:11px!important}
  .filters>*{inline-size:100%!important;min-inline-size:0!important}
  .filters .btn,.v280-toolbar .btn{inline-size:100%!important;justify-content:center!important}
  .form-actions{position:relative!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
  .form-actions .btn{inline-size:100%!important;justify-content:center!important}
  .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .permission-switches{grid-template-columns:1fr!important;gap:8px!important}
  .check-card{min-block-size:92px!important;padding:10px!important;align-items:flex-start!important}
  .check-card strong{font-size:.8rem!important}.check-card small{font-size:.71rem!important}
  .role-guide{order:2!important}
  .table-wrap{border:0!important;background:transparent!important;overflow:visible!important}
  .responsive-table{min-inline-size:0!important;display:block!important}
  .responsive-table thead{display:none!important}
  .responsive-table tbody{display:grid!important;gap:10px!important}
  .responsive-table tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px 12px!important;padding:14px!important;border:1px solid var(--ux-line)!important;border-radius:13px!important;background:#fff!important;box-shadow:0 4px 14px rgba(16,28,54,.035)!important}
  .responsive-table td{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;padding:0!important;border:0!important;font-size:.84rem!important;line-height:1.7!important;min-inline-size:0!important;white-space:normal!important}
  .responsive-table td::before{content:attr(data-label);font-size:.7rem!important;line-height:1.5!important;font-weight:700!important;color:#74839a!important}
  .responsive-table td:first-child,.responsive-table td.actions-cell{grid-column:1/-1!important}
  .responsive-table .row-actions{inline-size:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .responsive-table .row-actions .btn{inline-size:100%!important;min-block-size:44px!important;justify-content:center!important}
  .mobile-card,.responsive-card{padding:14px!important;border-radius:13px!important;font-size:.86rem!important;line-height:1.75!important}
  .pagination a,.pagination span,.pagination button{min-inline-size:44px!important;block-size:44px!important}
  .mobile-bottom-nav{position:fixed!important;inset-inline:0!important;inset-block-end:0!important;block-size:calc(var(--ux-mobile-nav) + env(safe-area-inset-bottom))!important;padding:6px 4px env(safe-area-inset-bottom)!important;background:rgba(255,255,255,.98)!important;border-block-start:1px solid var(--ux-line)!important;box-shadow:0 -8px 30px rgba(16,28,54,.1)!important;z-index:90!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;backdrop-filter:blur(14px)!important}
  .mobile-bottom-nav a{position:relative!important;min-inline-size:0!important;min-block-size:62px!important;border-radius:11px!important;font-size:.72rem!important;line-height:1.35!important;font-weight:700!important;color:#607089!important;gap:3px!important;padding:5px 2px!important}
  .mobile-bottom-nav a svg{inline-size:21px!important;block-size:21px!important}
  .mobile-bottom-nav a.active{background:#edf4ff!important;color:var(--ux-primary)!important}
  .mobile-bottom-nav b{inset-block-start:1px!important;inset-inline-start:50%!important;margin-inline-start:7px!important;min-inline-size:20px!important;block-size:20px!important;font-size:.66rem!important}
  .v280-alert-strip{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .v280-alert-title{grid-column:1/-1!important}
  .v280-alert-item{min-block-size:76px!important}
  .accounting-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .accounting-stats .stat-card{min-block-size:135px!important}
  .v293-message-layout{display:block!important;block-size:calc(100dvh - var(--ux-topbar) - var(--ux-mobile-nav) - env(safe-area-inset-bottom))!important;min-block-size:520px!important;max-block-size:none!important;margin:0!important}
  .page-message-view .ds-container{padding:8px 7px 0!important}
  .page-message-view{padding-block-end:calc(var(--ux-mobile-nav) + env(safe-area-inset-bottom))!important}
  .v293-thread-panel{block-size:100%!important;display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;border-radius:13px!important}
  .v293-thread-toolbar{min-block-size:62px!important;padding:8px!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important}
  .v293-thread-toolbar::-webkit-scrollbar{display:none!important}
  .v293-toolbar-start,.v293-toolbar-end{flex-wrap:nowrap!important;flex:0 0 auto!important}
  .v293-thread-toolbar .btn,.v293-mobile-pane-button{min-block-size:44px!important;min-inline-size:44px!important;padding-inline:10px!important;font-size:.8rem!important}
  .v293-thread-subject{min-block-size:94px!important;padding:12px!important;grid-template-columns:40px minmax(0,1fr)!important}
  .v293-thread-subject h1{font-size:1.12rem!important;line-height:1.7!important}
  .v293-thread-subject p{font-size:.76rem!important}
  .v293-thread-scroll{padding:13px 9px calc(14px + env(safe-area-inset-bottom))!important}
  .v293-message-bubble{gap:6px!important;margin-block-end:14px!important}
  .v293-bubble-card{max-inline-size:calc(100% - 38px)!important;padding:11px 12px!important}
  .v293-bubble-body{font-size:.92rem!important;line-height:1.95!important}
  .v293-composer{min-block-size:70px!important;grid-template-columns:minmax(0,1fr) 44px 48px!important;grid-template-areas:"field attach send" "summary summary summary"!important;padding:8px!important;gap:7px!important}
  .v293-composer-field{grid-area:field!important}.v293-attach-button{grid-area:attach!important}.v293-send-button{grid-area:send!important;inline-size:48px!important;min-inline-size:48px!important;padding:0!important}.v293-file-summary{grid-area:summary!important}
  .v293-composer-field textarea{min-block-size:48px!important;max-block-size:108px!important;font-size:16px!important}
  .v293-send-button span{display:none!important}
  .v293-message-list-panel,.v293-info-panel{position:fixed!important;inset-block:var(--ux-topbar) calc(var(--ux-mobile-nav) + env(safe-area-inset-bottom))!important;inline-size:min(340px,92vw)!important;z-index:100!important;border-radius:0!important;box-shadow:var(--ux-shadow-float)!important}
  .v293-message-list-panel{inset-inline-end:0!important;inset-inline-start:auto!important;transform:translateX(105%)!important}
  .v293-info-panel{inset-inline-start:0!important;inset-inline-end:auto!important;transform:translateX(-105%)!important}
  .message-list-open .v293-message-list-panel,.message-info-open .v293-info-panel{transform:translateX(0)!important}
  .v293-index-row{grid-template-columns:42px minmax(0,1fr)!important;min-block-size:104px!important;padding:13px!important}
  .v293-index-meta{grid-column:2!important;justify-self:start!important}
  .health-check-grid{grid-template-columns:1fr!important}
  .auth-body,.install-body{padding:12px!important}
  .auth-shell{inline-size:100%!important;max-inline-size:470px!important}
  .auth-card{padding:22px 18px!important;border-radius:18px!important}
  .auth-brand{margin-block-end:20px!important}.auth-brand img{inline-size:54px!important;block-size:54px!important}
  .auth-heading h1{font-size:1.5rem!important}.auth-heading p{font-size:.88rem!important}
  .auth-feature-row{gap:6px!important}.auth-feature{font-size:.72rem!important;padding:7px 4px!important}
  .install-card{padding:20px 15px!important;border-radius:18px!important}
  .install-header{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .step-badge{justify-self:start!important}
  .install-steps{grid-template-columns:1fr!important;gap:8px!important}
  .requirements{grid-template-columns:1fr!important}
  .install-actions{display:grid!important;grid-template-columns:1fr!important}
  .install-actions .btn{inline-size:100%!important;min-inline-size:0!important}
}

@media screen and (max-width:420px){
  .ds-container,.container{padding-inline:8px!important}
  .ds-topbar{padding-inline:7px!important}
  .ds-page-title strong{font-size:.95rem!important}
  .page-head h1{font-size:1.35rem!important}
  .card{padding:14px!important}
  .stats,.v280-kpis,.v280-work-kpis{gap:8px!important}
  .stat-card,.v280-kpi{min-block-size:132px!important;padding:12px!important}
  .v280-kpi strong{font-size:1.42rem!important}
  .permission-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .check-card{padding:9px!important;min-block-size:96px!important}
  .check-card strong{font-size:.77rem!important}.check-card small{font-size:.68rem!important}
  .responsive-table tr{padding:12px!important;gap:8px 10px!important}
  .mobile-bottom-nav a{font-size:.69rem!important}
}

@media screen and (min-width:1600px){
  html{font-size:16.5px!important}
  .ds-container,.container{max-inline-size:1640px!important;padding-inline:38px!important}
  .v293-message-layout{grid-template-columns:300px minmax(600px,1fr) 320px!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (forced-colors:active){
  .card,.btn,input,select,textarea,.table-wrap,.ds-profile,.message-shortcut,.menu-toggle{forced-color-adjust:auto;border:1px solid CanvasText!important}
  .btn.primary,.mobile-bottom-nav a.active,.ds-nav a.active{background:Highlight!important;color:HighlightText!important}
}

/* ========================================================================== 
   v3.3.0 strict pass 2 — computed-style readability and density correction
   This block intentionally has higher specificity than the legacy layer.
   ========================================================================== */
html body{
  font-size:16px!important;
  line-height:1.85!important;
  color:#17233b!important;
}

/* Keep primary app copy genuinely readable in computed styles. */
html body :where(.page-head p,.card-subtitle,.section-title p,.health-card-head p,
  .empty,.empty-state,.error-state,.help-text,.field-help,.preview-note,
  .message-security-note,.health-note,.security-note,.readiness-list,
  .update-process,.notification-item,.document-item,.mobile-card,.responsive-card){
  font-size:14px!important;
  line-height:1.85!important;
}
html body :where(.card h2,.card-head h2,.section-title h2,.health-card-head h2){
  font-size:20px!important;
  line-height:1.55!important;
}
html body :where(.card h3,.v293-info-section h3){
  font-size:16px!important;
  line-height:1.7!important;
}
html body :where(small,.muted,.meta,.field-help,.help-text){
  line-height:1.75!important;
}

/* Form controls: defeat old :not() selector specificity. */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body select,
html body textarea{
  font-family:var(--ux-font)!important;
  font-size:15px!important;
  line-height:1.7!important;
  color:#14213a!important;
}
html body textarea{line-height:1.9!important}
html body :where(.form-grid label,.filters label,.login-form label,.filter-field,.field-label,.control-label){
  font-size:14px!important;
  line-height:1.7!important;
}
html body :where(.form-grid label small,.filters label small,.file-field small,.filter-field small){
  font-size:13px!important;
  line-height:1.75!important;
}

/* Buttons and navigation should never look like caption text. */
html body .btn{font-size:14px!important;line-height:1.55!important}
html body .btn.small{font-size:13px!important}
html body .ds-nav a{font-size:15px!important}
html body .ds-sidebar-footer a,
html body .ds-sidebar-footer button{font-size:14px!important}
html body .ds-profile strong{font-size:14px!important}
html body .ds-profile small{font-size:12.5px!important}
html body .ds-profile-menu-item{font-size:14px!important}

/* Data presentation. */
html body .table th{font-size:13px!important;line-height:1.7!important}
html body .table td{font-size:14px!important;line-height:1.8!important}
html body .table td strong{font-size:14px!important}
html body :where(.table td small,.employee-card small,.document-item small){font-size:13px!important}
html body .badge{font-size:12.5px!important;line-height:1.5!important}
html body .money-unit{font-size:13px!important}
html body .pagination :where(a,span,button){font-size:13px!important}

/* Dashboard and operational cards. */
html body .v280-kpi-label{font-size:14px!important;line-height:1.7!important}
html body .v280-kpi>small,
html body .v280-kpi small{font-size:13px!important;line-height:1.75!important}
html body :where(.v280-process-step strong,.v280-follow-row strong,.v280-activity-item strong,
  .v280-slip-item strong,.v280-alert-item strong){font-size:14px!important;line-height:1.7!important}
html body :where(.v280-process-step small,.v280-follow-row small,.v280-activity-item small,
  .v280-slip-item small,.v280-alert-item small){font-size:13px!important;line-height:1.75!important}
html body .v280-chart-labels{font-size:12.5px!important}
html body .v280-quick{font-size:14px!important}
html body .simple-flow-step strong{font-size:14px!important}
html body .simple-flow-step small{font-size:13px!important}
html body .period-title strong{font-size:16px!important}
html body .period-title small,
html body .payroll-timeline time{font-size:13px!important}
html body .accounting-stats .stat-card :where(span,small){font-size:13px!important}
html body .accounting-stats .stat-card .money-number{font-size:16px!important}

/* User/permission page: favor comprehension over excessive density. */
html body .role-summary strong,
html body .permission-card strong,
html body .check-card strong{font-size:14px!important;line-height:1.7!important}
html body .check-card small{font-size:13px!important;line-height:1.75!important}
html body .role-line{font-size:13.5px!important;line-height:1.75!important}
html body .role-guide{font-size:14px!important;line-height:1.85!important}

/* Messaging computed typography and clean spacing. */
html body .v293-panel-head h2{font-size:18px!important}
html body .v293-panel-head small{font-size:13px!important}
html body .v293-search-control input{font-size:14px!important}
html body .v293-message-tabs a{font-size:13px!important}
html body .v293-conversation-copy strong{font-size:14px!important}
html body :where(.v293-conversation-copy small,.v293-conversation-copy p,.v293-conversation-row>time){font-size:12.5px!important}
html body .v293-thread-subject p{font-size:13px!important}
html body .v293-bubble-head strong{font-size:14px!important}
html body .v293-bubble-head time{font-size:12.5px!important}
html body .v293-bubble-body{font-size:15px!important;line-height:2!important}
html body .v293-attachment strong{font-size:13px!important}
html body .v293-attachment small{font-size:12.5px!important}
html body .v293-composer-field textarea{font-size:15px!important}
html body .v293-info-row{font-size:13.5px!important}
html body .v293-index-copy strong{font-size:14px!important}
html body :where(.v293-index-copy p,.v293-index-copy small,.v293-index-meta){font-size:12.5px!important}

/* Health, installer, and authentication. */
html body .health-item-copy strong{font-size:14px!important}
html body .health-item-copy small{font-size:13px!important}
html body .health-facts :where(span,strong){font-size:13.5px!important}
html body :where(.install-brand span,.install-version,.install-eyebrow,.step-badge,.install-footer){font-size:13px!important}
html body .install-step span{font-size:14px!important}
html body .requirement-copy small{font-size:13px!important;line-height:1.75!important}
html body .auth-brand-copy span{font-size:13px!important}
html body :where(.auth-eyebrow,.auth-feature,.auth-support,.auth-footer){font-size:13px!important}

@media screen and (max-width:767px){
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html body select,
  html body textarea{font-size:16px!important}
  html body .page-head h1{font-size:23px!important;line-height:1.55!important}
  html body .page-head p{font-size:14px!important}
  html body .card h2,
  html body .card-head h2,
  html body .section-title h2,
  html body .health-card-head h2{font-size:18px!important}
  html body .card h3{font-size:15px!important}
  html body .mobile-bottom-nav a{font-size:12px!important;line-height:1.35!important}
  html body .mobile-bottom-nav b{font-size:10.5px!important}
  html body .responsive-table td{font-size:14px!important;line-height:1.8!important}
  html body .responsive-table td::before{font-size:12px!important;line-height:1.6!important}
  html body .mobile-card,
  html body .responsive-card{font-size:14px!important;line-height:1.85!important}
  html body .permission-grid,
  html body .user-permission-grid{grid-template-columns:1fr!important;gap:9px!important}
  html body .check-card{min-block-size:76px!important;padding:12px!important}
  html body .v293-thread-toolbar .btn,
  html body .v293-mobile-pane-button{font-size:13px!important}
  html body .v293-thread-subject p{font-size:13px!important}
  html body .v293-bubble-body{font-size:15px!important}
  html body .v293-composer-field textarea{font-size:16px!important}
  html body .auth-input-wrap input{font-size:16px!important}
}

@media screen and (min-width:768px) and (max-width:1100px){
  html body .permission-grid,
  html body .user-permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .table th{font-size:12.5px!important}
  html body .table td{font-size:13.5px!important}
}

/* Strict pass 3 — remaining legacy captions found by computed-style audit. */
html body .csv-help strong{font-size:14px!important;line-height:1.7!important}
html body .audit-actors span{font-size:13px!important;line-height:1.7!important}
html body .role-line strong{font-size:14px!important;line-height:1.7!important}
html body .money-display .money-unit{font-size:13px!important}
html body :where(.v280-avatar,.avatar,.v293-avatar){font-size:12.5px!important}
@media screen and (max-width:767px){
  html body main small,
  html body .ds-main small{font-size:13px!important;line-height:1.75!important}
  html body .money-display .money-number{font-size:14px!important}
  html body .money-display .money-unit{font-size:13px!important}
  html body .message-shortcut b{font-size:11px!important}
}

/* Strict pass 4 — correct logical axis for a right-side RTL sidebar. */
@media screen and (min-width:901px){
  html[dir="rtl"] body .ds-sidebar{
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    border-inline-start:0!important;
    border-inline-end:1px solid rgba(255,255,255,.08)!important;
  }
  html[dir="rtl"] body .ds-main{
    margin-inline-start:var(--ux-sidebar)!important;
    margin-inline-end:0!important;
  }
  html[dir="rtl"] body.sidebar-collapsed .ds-main{
    margin-inline-start:var(--ui-sidebar-collapsed,76px)!important;
    margin-inline-end:0!important;
  }
}
@media screen and (max-width:900px){
  html[dir="rtl"] body .ds-main,
  html[dir="rtl"] body.sidebar-collapsed .ds-main{margin-inline:0!important}
}

/* Strict pass 5 — deterministic message composer and desktop hit areas. */
@media screen and (min-width:901px){
  html body .v293-composer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 46px auto!important;
    grid-template-areas:"field attach send" "summary summary summary"!important;
    align-items:end!important;
    gap:8px!important;
    padding:12px!important;
  }
  html body .v293-composer-field{grid-area:field!important;grid-column:auto!important;min-inline-size:0!important}
  html body .v293-attach-button{grid-area:attach!important;grid-column:auto!important;inline-size:46px!important;block-size:46px!important}
  html body .v293-send-button{grid-area:send!important;grid-column:auto!important;min-block-size:46px!important}
  html body .v293-file-summary{grid-area:summary!important;grid-column:auto!important;position:static!important;text-align:start!important}
  html body .btn.small{min-block-size:40px!important}
}

/* Strict pass 6 — tablet-safe data tables.
   At compact desktop/tablet widths the legacy 780px table was clipped by the
   persistent RTL sidebar. Responsive tables become semantic cards while all
   cells and row actions remain available. */
@media screen and (min-width:768px) and (max-width:1365px){
  html body .table-wrap:has(.responsive-table){
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
    box-shadow:none!important;
  }
  html body .responsive-table{
    display:block!important;
    min-inline-size:0!important;
    inline-size:100%!important;
  }
  html body .responsive-table thead{display:none!important}
  html body .responsive-table tbody{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  html body .responsive-table tr{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 14px!important;
    min-inline-size:0!important;
    padding:15px!important;
    border:1px solid var(--ux-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(16,28,54,.04)!important;
  }
  html body .responsive-table td{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    min-inline-size:0!important;
    block-size:auto!important;
    min-block-size:0!important;
    padding:0!important;
    border:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:start!important;
    font-size:14px!important;
    line-height:1.8!important;
  }
  html body .responsive-table td::before{
    content:attr(data-label)!important;
    display:block!important;
    margin-block-end:3px!important;
    color:#718096!important;
    font-size:12px!important;
    font-weight:750!important;
    line-height:1.55!important;
    text-align:start!important;
  }
  html body .responsive-table td:first-child,
  html body .responsive-table td.actions-cell{
    grid-column:1/-1!important;
  }
  html body .responsive-table td.actions-cell{
    padding-block-start:10px!important;
    border-block-start:1px dashed var(--ux-line)!important;
  }
  html body .responsive-table td.actions-cell::before{display:none!important}
  html body .responsive-table .employee-card,
  html body .responsive-table .employee-cell{min-inline-size:0!important}
  html body .responsive-table .row-actions{
    inline-size:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  html body .responsive-table .row-actions .btn,
  html body .responsive-table .row-actions form,
  html body .responsive-table .row-actions form .btn{
    min-block-size:42px!important;
  }
}
@media screen and (min-width:768px) and (max-width:900px){
  html body .responsive-table tbody{grid-template-columns:1fr!important}
}

/* ========================================================================== */
/* Hooger HR v3.3.1 — precision pass: single-line controls + exact RTL icons  */
/* Presentation only. Business logic, routes, permissions and forms unchanged. */
/* ========================================================================== */

@media screen {
  /* Every interactive label remains one line. Groups may wrap between controls. */
  :where(
    .btn,
    button,
    [role="button"],
    [role="tab"],
    .badge,
    .chip,
    .pill,
    .tag,
    .pagination a,
    .pagination button,
    .ds-nav a,
    .ds-sidebar-footer a,
    .ds-sidebar-footer button,
    .ds-profile-menu-item,
    .v293-message-tabs a,
    .v293-mobile-pane-button,
    .custom-file-button,
    .install-step span,
    .step-badge,
    .install-version,
    summary > .btn,
    .advanced-fields > summary
  ) {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    line-height: 1.45 !important;
  }

  /* Stable RTL icon/text pair. Icon always starts from the right. */
  :where(
    .btn,
    .ds-nav a,
    .ds-sidebar-footer a,
    .ds-sidebar-footer button,
    .ds-profile-menu-item,
    .v293-message-tabs a,
    .v293-mobile-pane-button,
    .custom-file-button,
    .advanced-fields > summary
  ) {
    direction: rtl !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: start !important;
  }
  :where(
    .btn,
    .ds-nav a,
    .ds-sidebar-footer a,
    .ds-sidebar-footer button,
    .ds-profile-menu-item,
    .v293-message-tabs a,
    .v293-mobile-pane-button,
    .custom-file-button,
    .advanced-fields > summary
  ) > :where(svg,.ui-icon,.material-icon) {
    order: -10 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  /* Buttons expand by content, never collapse to an icon-sized box. */
  .btn {
    inline-size: auto !important;
    min-inline-size: max-content !important;
    max-inline-size: 100% !important;
    min-block-size: 44px !important;
    padding-inline: 16px !important;
    font-size: 14.5px !important;
    font-weight: 750 !important;
  }
  .btn.small {
    inline-size: auto !important;
    min-inline-size: max-content !important;
    min-block-size: 40px !important;
    padding-inline: 12px !important;
    font-size: 13.5px !important;
  }
  .btn.full,.btn.wide {inline-size: 100% !important;min-inline-size: 0 !important}
  .btn > span {min-inline-size: 0 !important;white-space: nowrap !important}

  /* Action containers wrap controls, not the text inside controls. */
  :where(.actions,.page-actions,.form-actions,.compose-actions,.workflow-actions,.batch-command-actions,.v293-panel-actions,.v293-toolbar-start,.v293-toolbar-end,.install-actions,.success-actions,.not-found-actions,.notification-modal-foot) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-inline-size: 0 !important;
  }
  :where(.actions,.page-actions,.form-actions,.compose-actions,.workflow-actions,.batch-command-actions,.v293-panel-actions,.v293-toolbar-start,.v293-toolbar-end,.install-actions,.success-actions,.not-found-actions,.notification-modal-foot) > :where(form,a,button) {
    flex: 0 0 auto !important;
    min-inline-size: 0 !important;
  }

  /* Row actions become a deterministic grid; every key remains one line. */
  .row-actions {
    inline-size: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(92px,1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-inline-size: 0 !important;
  }
  .row-actions > :where(a,button,form),
  .row-actions > form > .btn {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
  }
  .row-actions > form {display: contents !important}
  .row-actions .btn {justify-content: center !important}

  /* Tabs never split. At tight widths they scroll as a single-line strip. */
  :where(.v293-message-tabs,.tabs,.tab-list,.segmented-control) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    overscroll-behavior-inline: contain !important;
  }
  :where(.v293-message-tabs,.tabs,.tab-list,.segmented-control) > :where(a,button,[role="tab"]) {
    flex: 0 0 auto !important;
    inline-size: auto !important;
    min-inline-size: max-content !important;
    padding-inline: 13px !important;
    font-size: 13.5px !important;
  }
  .v293-index-tabs > a {min-inline-size: 92px !important;justify-content:center !important}
  .v293-message-tabs b {flex:0 0 auto !important}

  /* Short titles stay intact; long descriptive copy remains allowed to wrap. */
  :where(.page-head h1,.card-head h2,.section-title h2,.health-card-head h2,.v293-panel-head h2,.v293-info-section h3,.form-section,.period-title strong) {
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }
  :where(.ui-single-line-title,.card-head h2:only-child,.form-section,.period-title strong) {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }

  /* Filters: use actual grid tracks instead of squeezing fields and buttons. */
  :where(.filters,.v293-message-filter,.v280-letter-filter,.accounting-report-filters,.v280-toolbar) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr)) !important;
    align-items: end !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  :where(.filters,.v293-message-filter,.v280-letter-filter,.accounting-report-filters,.v280-toolbar) > :where(label,.v293-filter-field) {
    min-inline-size: 0 !important;
    inline-size: 100% !important;
  }
  :where(.filters,.v293-message-filter,.v280-letter-filter,.accounting-report-filters,.v280-toolbar) > .btn {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
  .v293-filter-search,.v280-toolbar .grow {grid-column: span 2 !important}
  .accounting-report-filters .form-actions,.v280-toolbar-actions {
    grid-column: 1 / -1 !important;
    inline-size: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important;
    gap: 9px !important;
  }
  .accounting-report-filters .form-actions .btn,.v280-toolbar-actions .btn {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
  }

  /* Money: no broken digits or detached unit. Parent layouts reserve real width. */
  .money-display {
    direction: rtl !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    inline-size: max-content !important;
    min-inline-size: max-content !important;
    max-inline-size: 100% !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }
  .money-display :where(.money-number,.money-unit) {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  .money-number {font-size: inherit !important;line-height: 1.45 !important}
  .money-unit {font-size: .82em !important;line-height: 1.45 !important}
  :where(.stat-card,.reconciliation-row,.kpi-line,.payment-panel-head,.payment-receipt) > :where(div,strong) {min-inline-size:0 !important}

  /* Financial KPI cards need enough horizontal room for full Persian amounts. */
  .accounting-stats {
    grid-template-columns: repeat(4,minmax(210px,1fr)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-block-end: 4px !important;
    scrollbar-width: thin !important;
  }
  .accounting-stats .stat-card {
    min-inline-size: 210px !important;
    min-block-size: 128px !important;
  }
  .accounting-stats .stat-card > div {min-inline-size:0 !important;overflow:visible !important}
  .accounting-stats .stat-card .money-display {font-size:14px !important}

  /* Message screen typography and icon positions. */
  .v293-message-layout {direction: rtl !important}
  .v293-panel-head,.v293-thread-toolbar,.v293-thread-subject,.v293-conversation-row,.v293-index-row,.v293-info-row,.v293-participant,.v293-attachment {direction:rtl !important;text-align:start !important}
  .v293-toolbar-start,.v293-toolbar-end {min-inline-size:0 !important}
  .v293-thread-toolbar .btn,.v293-mobile-pane-button {min-inline-size:max-content !important}
  .v293-index-meta > :where(svg,.ui-icon) {flex:0 0 auto !important;margin:0 !important}
  .v293-info-row > :where(strong,.badge,b) {min-inline-size:0 !important;text-align:end !important}

  /* Navigation labels never break. */
  .ds-nav a > span:not(.nav-icon) {white-space:nowrap !important;min-inline-size:0 !important}
  .ds-nav a {overflow:hidden !important}
  .ds-nav a > span:not(.nav-icon) {overflow:hidden !important;text-overflow:ellipsis !important}
  .mobile-bottom-nav a {white-space:nowrap !important;min-inline-size:0 !important}
  .mobile-bottom-nav a > span {white-space:nowrap !important}

  /* Badges and short metadata are atomic. */
  .badge {display:inline-flex !important;align-items:center !important;justify-content:center !important;min-block-size:28px !important;padding-inline:9px !important;font-size:12.5px !important}

  /* Prevent 4px page overflow found in the strict render audit. */
  html,body,.app-shell,.ds-shell,.ds-main,.ds-container {max-inline-size:100% !important}
  body {overflow-x:hidden !important}
  .ds-container {inline-size:100% !important;box-sizing:border-box !important}
}

@media screen and (max-width:1365px) {
  .accounting-stats {grid-template-columns:repeat(2,minmax(0,1fr)) !important;overflow:visible !important}
  .accounting-stats .stat-card {min-inline-size:0 !important}
  :where(.v293-message-filter,.v280-letter-filter,.accounting-report-filters,.v280-toolbar) {grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .v293-filter-search,.v280-toolbar .grow {grid-column:1 / -1 !important}
}

@media screen and (max-width:767px) {
  /* Mobile action groups stack cleanly. No control text is compressed. */
  :where(.page-actions,.form-actions,.compose-actions,.workflow-actions,.batch-command-actions,.install-actions,.success-actions,.not-found-actions,.notification-modal-foot) {
    display:grid !important;
    grid-template-columns:1fr !important;
    inline-size:100% !important;
  }
  :where(.page-actions,.form-actions,.compose-actions,.workflow-actions,.batch-command-actions,.install-actions,.success-actions,.not-found-actions,.notification-modal-foot) > :where(a,button,form),
  :where(.page-actions,.form-actions,.compose-actions,.workflow-actions,.batch-command-actions,.install-actions,.success-actions,.not-found-actions,.notification-modal-foot) > form > .btn {
    inline-size:100% !important;
    min-inline-size:0 !important;
  }

  .page-head {display:grid !important;grid-template-columns:1fr !important;gap:14px !important}
  .page-head > :where(.actions,.page-actions,.btn) {inline-size:100% !important}
  .page-head > .btn {min-inline-size:0 !important}

  :where(.filters,.v293-message-filter,.v280-letter-filter,.accounting-report-filters,.v280-toolbar) {
    grid-template-columns:1fr !important;
  }
  :where(.filters,.v293-message-filter,.v280-letter-filter,.accounting-report-filters,.v280-toolbar) > * {
    grid-column:1 !important;
  }

  /* Login feature chips remain readable and never overflow. */
  .auth-feature-row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .auth-feature-row > .auth-feature:last-child:nth-child(odd) {grid-column:1 / -1 !important}
  .auth-feature {inline-size:100% !important;min-inline-size:0 !important;justify-content:center !important;font-size:13px !important}

  /* Financial cards use one full-width row per amount on phone screens. */
  .accounting-stats {
    grid-template-columns:1fr !important;
    overflow:visible !important;
  }
  .accounting-stats .stat-card {
    min-inline-size:0 !important;
    min-block-size:112px !important;
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) !important;
    align-items:center !important;
  }
  .accounting-stats .stat-card .money-display {
    inline-size:max-content !important;
    max-inline-size:100% !important;
    font-size:15px !important;
  }

  .payment-panel-head,.payment-receipt {
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:10px 12px !important;
  }
  .payment-panel-head > strong,.payment-receipt > strong {
    grid-column:1 / -1 !important;
    justify-self:start !important;
    inline-size:max-content !important;
    max-inline-size:100% !important;
  }

  .reconciliation-row,.kpi-line,.health-facts > div,.v293-info-row {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:center !important;
  }
  .reconciliation-row > strong,.kpi-line > strong {min-inline-size:max-content !important}

  /* Four message tabs become a horizontal strip instead of broken labels. */
  .v293-index-tabs {padding-inline:0 !important}
  .v293-index-tabs > a {min-inline-size:94px !important;font-size:13px !important}

  .row-actions {grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .row-actions > :only-child {grid-column:1 / -1 !important}
  .row-actions .btn {font-size:13px !important;padding-inline:8px !important}

  .mobile-bottom-nav a {font-size:11.5px !important;gap:4px !important}
}

@media screen and (max-width:420px) {
  .row-actions {grid-template-columns:1fr !important}
  .auth-feature-row {grid-template-columns:1fr !important}
  .auth-feature-row > .auth-feature {grid-column:1 !important}
  .btn {font-size:14px !important;padding-inline:12px !important}
  .btn.small {font-size:13px !important;padding-inline:10px !important}
  .page-head h1 {font-size:22px !important}
  .card-head h2,.section-title h2,.health-card-head h2 {font-size:17px !important}
}

/* v3.3.1 precision correction — override high-specificity legacy declarations. */
@media screen {
  html body .ui-single-line-title {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.5 !important;
  }
  html body .money-display,
  html body .money-display .money-number,
  html body .money-display .money-unit {
    overflow: visible !important;
    text-overflow: clip !important;
    max-inline-size: none !important;
    -webkit-line-clamp: unset !important;
  }
}
@media screen and (max-width:767px) {
  html body .page-head h1.ui-single-line-title {font-size:18.5px !important}
  html body :where(.card-head h2,.section-title h2,.health-card-head h2).ui-single-line-title {font-size:16.5px !important}
  html body .v293-index-tabs {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
    gap:5px !important;
  }
  html body .v293-index-tabs > a {
    inline-size:100% !important;
    min-inline-size:0 !important;
    justify-content:center !important;
  }
  html body .v293-message-list-panel .v293-message-tabs:not(.v293-index-tabs) {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    overflow:visible !important;
  }
  html body .v293-message-list-panel .v293-message-tabs:not(.v293-index-tabs) > a {
    min-inline-size:0 !important;
    inline-size:100% !important;
    justify-content:center !important;
    padding-inline:6px !important;
  }
}

/* v3.3.1 final visual corrections. */
@media screen {
  html body :where(button,a):has(> svg.ui-icon):not(.icon-button):not(.menu-toggle):not(.message-shortcut):not(.ds-profile):not(.v293-pane-close) {
    direction:rtl !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }
  html body :where(button,a):has(> svg.ui-icon):not(.icon-button):not(.menu-toggle):not(.message-shortcut):not(.ds-profile):not(.v293-pane-close) > svg.ui-icon {
    order:-10 !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  html body .v293-message-tabs {
    block-size:auto !important;
    min-block-size:48px !important;
    max-block-size:none !important;
    padding-block:5px !important;
    overflow-y:visible !important;
  }
}
@media screen and (max-width:767px) {
  html body .v293-index-tabs {
    min-block-size:96px !important;
    grid-auto-rows:minmax(44px,auto) !important;
    align-content:start !important;
    padding-block:4px 8px !important;
  }
}

/* ========================================================================== */
/* v3.3.3 — Font loading, action alignment, compact controls and conversations */
/* ========================================================================== */
@font-face{
  font-family:"IRANSansX";
  src:local("IRANSansX Regular"),local("IRANSansX-Regular"),local("IRANSansX"),url("../fonts/IRANSansX/IRANSansX-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IRANSansX";
  src:local("IRANSansX Medium"),local("IRANSansX-Medium"),url("../fonts/IRANSansX/IRANSansX-Medium.woff2") format("woff2");
  font-weight:500 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IRANSansX";
  src:local("IRANSansX Bold"),local("IRANSansX-Bold"),url("../fonts/IRANSansX/IRANSansX-Bold.woff2") format("woff2");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}

@media screen{
  :root{
    --font:"IRANSansX","Vazirmatn",Tahoma,Arial,sans-serif!important;
    --ux-font:"IRANSansX","Vazirmatn",Tahoma,Arial,sans-serif!important;
  }
  html,body,button,input,select,textarea{font-family:var(--ux-font)!important;font-synthesis:none!important}

  /* Search controls: icon is always at the RTL start edge, never over copy. */
  html body .payroll-period-search{position:relative!important;display:block!important;max-inline-size:520px!important;margin-block:4px 18px!important}
  html body .payroll-period-search>svg{
    position:absolute!important;
    inset-inline-start:15px!important;
    inset-inline-end:auto!important;
    right:15px!important;
    left:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    pointer-events:none!important;
  }
  html body .payroll-period-search input{
    padding-inline-start:46px!important;
    padding-inline-end:14px!important;
    padding-right:46px!important;
    padding-left:14px!important;
    text-align:start!important;
  }

  /* Explicit left-aligned primary submit groups on Persian desktop layouts. */
  html body .form-actions.actions-left{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    inline-size:100%!important;
    grid-template-columns:none!important;
  }
  html body .form-actions.actions-left>.btn,
  html body .form-actions.actions-left>button{
    inline-size:auto!important;
    min-inline-size:max-content!important;
    flex:0 0 auto!important;
  }

  /* Row actions: deterministic, single-line and content-sized. */
  html body .payroll-output-actions,
  html body .employee-row-actions,
  html body .backup-version-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    inline-size:max-content!important;
    max-inline-size:none!important;
    gap:7px!important;
    white-space:nowrap!important;
  }
  html body .payroll-output-actions>:where(a,button,form),
  html body .employee-row-actions>:where(a,button,form),
  html body .backup-version-actions>:where(a,button,form){
    display:block!important;
    inline-size:auto!important;
    min-inline-size:max-content!important;
    flex:0 0 auto!important;
  }
  html body .payroll-output-actions form,
  html body .employee-row-actions form,
  html body .backup-version-actions form{display:block!important}
  html body .payroll-output-actions .btn,
  html body .employee-row-actions .btn,
  html body .backup-version-actions .btn{
    inline-size:auto!important;
    min-inline-size:max-content!important;
    white-space:nowrap!important;
    padding-inline:11px!important;
    font-size:13px!important;
  }
  html body .clean-payroll-table .actions-cell{min-inline-size:330px!important}
  html body .responsive-table .employee-row-actions{min-inline-size:190px!important}
  html body .backup-version-actions{min-inline-size:165px!important}

  /* Report filter keys stay next to each other and consume only content width. */
  html body .accounting-report-filters .report-filter-actions{
    grid-column:auto!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:center!important;
    justify-self:end!important;
    inline-size:max-content!important;
    gap:7px!important;
  }
  html body .accounting-report-filters .report-filter-actions .btn{
    inline-size:auto!important;
    min-inline-size:max-content!important;
    min-block-size:44px!important;
    padding-inline:12px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  /* Conversation list is user-centric: one stable row per counterpart. */
  html body .v293-index-row,
  html body .v293-conversation-row{min-block-size:92px!important}
  html body .v293-index-copy small,
  html body .v293-conversation-copy small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body .v293-index-copy p,
  html body .v293-conversation-copy p{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:1!important;overflow:hidden!important}

  /* Details button is functional wherever the information pane is a drawer. */
  html body .v293-mobile-pane-button[data-message-info-toggle]{display:none!important}
}

@media screen and (max-width:1279px){
  html body .v293-mobile-pane-button[data-message-info-toggle]{display:inline-flex!important}
  html body .v293-info-panel{visibility:hidden!important;pointer-events:none!important}
  html body.message-info-open .v293-info-panel{visibility:visible!important;pointer-events:auto!important;transform:translateX(0)!important}
}

@media screen and (max-width:767px){
  html body .form-actions.actions-left{
    display:flex!important;
    justify-content:flex-end!important;
  }
  html body .form-actions.actions-left>.btn,
  html body .form-actions.actions-left>button{inline-size:auto!important;max-inline-size:100%!important}

  html body .payroll-output-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    inline-size:100%!important;
    gap:5px!important;
  }
  html body .employee-row-actions,
  html body .backup-version-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    inline-size:100%!important;
    gap:6px!important;
  }
  html body .payroll-output-actions>:where(a,button,form),
  html body .employee-row-actions>:where(a,button,form),
  html body .backup-version-actions>:where(a,button,form),
  html body .payroll-output-actions .btn,
  html body .employee-row-actions .btn,
  html body .backup-version-actions .btn{
    inline-size:100%!important;
    min-inline-size:0!important;
  }
  html body .payroll-output-actions .btn{padding-inline:5px!important;font-size:11.5px!important;gap:4px!important}
  html body .employee-row-actions .btn,
  html body .backup-version-actions .btn{font-size:12.5px!important;padding-inline:7px!important}
  html body .payroll-output-actions .btn svg{inline-size:13px!important;block-size:13px!important}

  html body .accounting-report-filters .report-filter-actions{
    grid-column:1!important;
    justify-self:stretch!important;
    inline-size:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body .accounting-report-filters .report-filter-actions .btn{
    inline-size:100%!important;
    min-inline-size:0!important;
    font-size:12.5px!important;
    padding-inline:7px!important;
  }
}

/* ========================================================================== 
   v3.3.3 — Dashboard KPI summary: coherent, actionable and scan-friendly
   ========================================================================== */
@media screen{
  html body .v333-dashboard-summary{
    margin-block:2px 20px!important;
    padding:16px!important;
    border:1px solid #dfe6f0!important;
    border-radius:18px!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%)!important;
    box-shadow:0 10px 30px rgba(15,35,75,.045)!important;
  }
  html body .v333-kpi-section-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    margin-block-end:14px!important;
    padding-inline:2px!important;
    direction:rtl!important;
  }
  html body .v333-kpi-section-head>div{min-inline-size:0!important;text-align:start!important}
  html body .v333-kpi-section-head h2{
    margin:0!important;
    color:#14213d!important;
    font-size:18px!important;
    font-weight:800!important;
    line-height:1.5!important;
    letter-spacing:0!important;
  }
  html body .v333-kpi-section-head p{
    margin:2px 0 0!important;
    color:#748198!important;
    font-size:12.5px!important;
    line-height:1.7!important;
  }
  html body .v333-period-pill{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-block-size:38px!important;
    padding-inline:12px!important;
    border:1px solid #d9e3f2!important;
    border-radius:11px!important;
    background:#f7f9fd!important;
    color:#42526e!important;
    font-size:12.5px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  html body .v333-period-pill svg{flex:0 0 auto!important;color:#2f6fdb!important}

  html body .v280-kpis.v333-kpi-strip{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:11px!important;
    margin:0!important;
    direction:rtl!important;
  }
  html body .v333-kpi-card{
    --kpi-accent:#2563eb;
    --kpi-soft:#eff6ff;
    position:relative!important;
    min-inline-size:0!important;
    min-block-size:146px!important;
    padding:14px!important;
    border:1px solid #dfe6f0!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:none!important;
    display:grid!important;
    grid-template-rows:auto minmax(44px,1fr) auto!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow:hidden!important;
    text-align:start!important;
    text-decoration:none!important;
    color:inherit!important;
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
  }
  html body .v333-kpi-card::before{
    content:""!important;
    position:absolute!important;
    inset-block-start:0!important;
    inset-inline:12px!important;
    block-size:3px!important;
    border-radius:0 0 5px 5px!important;
    background:var(--kpi-accent)!important;
    opacity:.9!important;
  }
  html body .v333-kpi-card.orange{--kpi-accent:#f97316;--kpi-soft:#fff4e8}
  html body .v333-kpi-card.green{--kpi-accent:#16a064;--kpi-soft:#ecfdf3}
  html body .v333-kpi-card.purple{--kpi-accent:#7c4dde;--kpi-soft:#f4efff}
  html body .v333-kpi-card.red{--kpi-accent:#e43e55;--kpi-soft:#fff0f2}
  html body .v333-kpi-card:hover{
    border-color:color-mix(in srgb,var(--kpi-accent) 34%,#dfe6f0)!important;
    box-shadow:0 10px 24px rgba(15,35,75,.08)!important;
    transform:translateY(-2px)!important;
  }
  html body .v333-kpi-card:focus-visible{
    outline:3px solid color-mix(in srgb,var(--kpi-accent) 25%,transparent)!important;
    outline-offset:2px!important;
    border-color:var(--kpi-accent)!important;
  }
  html body .v333-kpi-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    min-inline-size:0!important;
    direction:rtl!important;
  }
  html body .v333-kpi-card .v333-kpi-icon{
    inline-size:38px!important;
    block-size:38px!important;
    min-inline-size:38px!important;
    margin:0!important;
    border-radius:11px!important;
    background:var(--kpi-soft)!important;
    color:var(--kpi-accent)!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
  }
  html body .v333-kpi-card .v333-kpi-icon svg{inline-size:20px!important;block-size:20px!important}
  html body .v333-kpi-card .v280-kpi-label{
    inline-size:auto!important;
    min-inline-size:0!important;
    min-block-size:0!important;
    margin:0!important;
    color:#34425b!important;
    font-size:13px!important;
    font-weight:750!important;
    line-height:1.55!important;
    text-align:start!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .v333-kpi-card .v333-kpi-value{
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
    color:#111f3a!important;
    font-size:30px!important;
    font-weight:850!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    text-align:start!important;
  }
  html body .v333-kpi-card .v333-money-value{
    inline-size:100%!important;
    min-block-size:44px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:baseline!important;
    justify-content:flex-start!important;
    gap:6px!important;
    direction:rtl!important;
    overflow:visible!important;
  }
  html body .v333-kpi-card .v333-money-value .money-number{
    font-size:clamp(18px,1.45vw,27px)!important;
    line-height:1.25!important;
    color:#111f3a!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  html body .v333-kpi-card .v333-money-value .money-unit{
    font-size:11.5px!important;
    line-height:1.4!important;
    color:#718096!important;
    font-weight:650!important;
    white-space:nowrap!important;
  }
  html body .v333-kpi-foot{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    min-inline-size:0!important;
    padding-block-start:9px!important;
    border-block-start:1px solid #eef1f6!important;
    color:#758198!important;
    direction:rtl!important;
  }
  html body .v333-kpi-foot small{
    min-inline-size:0!important;
    margin:0!important;
    padding:0!important;
    color:#758198!important;
    font-size:11.5px!important;
    font-weight:500!important;
    line-height:1.55!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:start!important;
  }
  html body .v333-kpi-foot svg{
    flex:0 0 auto!important;
    color:var(--kpi-accent)!important;
    transition:transform .18s ease!important;
  }
  html body .v333-kpi-card:hover .v333-kpi-foot svg{transform:translateX(-2px)!important}
}

@media screen and (max-width:1399px){
  html body .v280-kpis.v333-kpi-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .v333-kpi-card{min-block-size:138px!important}
  html body .v333-kpi-card .v333-money-value .money-number{font-size:25px!important}
}

@media screen and (max-width:767px){
  html body .v333-dashboard-summary{
    margin-inline:0!important;
    margin-block-end:14px!important;
    padding:12px!important;
    border-radius:15px!important;
  }
  html body .v333-kpi-section-head{align-items:flex-start!important;gap:10px!important;margin-block-end:11px!important}
  html body .v333-kpi-section-head h2{font-size:16px!important}
  html body .v333-kpi-section-head p{font-size:11.5px!important}
  html body .v333-period-pill{min-block-size:34px!important;padding-inline:9px!important;font-size:11.5px!important}
  html body .v280-kpis.v333-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body .v333-kpi-card{min-block-size:132px!important;padding:11px!important;gap:8px!important}
  html body .v333-kpi-card .v333-kpi-icon{inline-size:34px!important;block-size:34px!important;min-inline-size:34px!important;border-radius:10px!important}
  html body .v333-kpi-card .v333-kpi-icon svg{inline-size:18px!important;block-size:18px!important}
  html body .v333-kpi-card .v280-kpi-label{font-size:11.5px!important}
  html body .v333-kpi-card .v333-kpi-value{font-size:25px!important}
  html body .v333-kpi-card .v333-money-value .money-number{font-size:clamp(15px,4.2vw,20px)!important}
  html body .v333-kpi-card .v333-money-value .money-unit{font-size:10px!important}
  html body .v333-kpi-foot{padding-block-start:7px!important}
  html body .v333-kpi-foot small{font-size:10.5px!important}
}

@media screen and (max-width:420px){
  html body .v333-kpi-section-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
  html body .v333-kpi-section-head p{display:none!important}
  html body .v333-period-pill{max-inline-size:128px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body .v333-kpi-card{min-block-size:126px!important;padding:10px!important}
  html body .v333-kpi-card .v280-kpi-label{font-size:11px!important}
  html body .v333-kpi-card .v333-kpi-value{font-size:23px!important}
  html body .v333-kpi-foot small{font-size:10px!important}
}

@media (prefers-reduced-motion:reduce){
  html body .v333-kpi-card,html body .v333-kpi-foot svg{transition:none!important}
  html body .v333-kpi-card:hover{transform:none!important}
}

@media screen and (max-width:420px){
  html body .v333-kpi-card{min-block-size:146px!important}
  html body .v333-kpi-head{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-areas:"icon spacer" "label label"!important;
    row-gap:6px!important;
    column-gap:0!important;
    align-items:center!important;
  }
  html body .v333-kpi-head .v333-kpi-icon{grid-area:icon!important}
  html body .v333-kpi-head .v280-kpi-label{
    grid-area:label!important;
    inline-size:100%!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
  }
  html body .v333-kpi-foot{gap:3px!important}
  html body .v333-kpi-foot small{
    inline-size:100%!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:9.2px!important;
  }
  html body .v333-kpi-foot svg{display:none!important}
}

/* ========================================================================== */
/* v3.3.4 — mobile blockers, stable search fields, login and navigation state */
/* ========================================================================== */
@media screen {
  /* Prevent the persisted desktop sidebar state flashing open during refresh. */
  html:not(.sidebar-state-ready) .ds-sidebar,
  html:not(.sidebar-state-ready) .ds-main{transition:none!important}
  html.sidebar-collapsed-preload body .ds-sidebar{inline-size:var(--ui-sidebar-collapsed,76px)!important}
  html.sidebar-collapsed-preload body .ds-main{margin-inline-start:var(--ui-sidebar-collapsed,76px)!important;margin-inline-end:0!important}
  html.sidebar-collapsed-preload body .ds-nav a{justify-content:center!important;padding-inline:0!important}
  html.sidebar-collapsed-preload body .ds-nav a>span:not(.nav-icon),
  html.sidebar-collapsed-preload body .nav-section-title,
  html.sidebar-collapsed-preload body .ds-sidebar-footer span,
  html.sidebar-collapsed-preload body .nav-count{display:none!important}
  html.sidebar-collapsed-preload body .ds-sidebar-footer a,
  html.sidebar-collapsed-preload body .ds-sidebar-footer button{justify-content:center!important;padding-inline:0!important}

  /* One stable layout for every search field: icon is a real flex item. */
  html body :where(.input-with-icon,.v293-search-control,.filter-search-control,.payroll-period-search){
    position:relative!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    direction:rtl!important;
    min-inline-size:0!important;
    inline-size:100%!important;
    min-block-size:48px!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid var(--ux-line-strong,#c8d3e1)!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  html body :where(.input-with-icon,.v293-search-control,.filter-search-control,.payroll-period-search)>:where(svg,.filter-search-icon){
    position:static!important;
    inset:auto!important;
    order:-10!important;
    flex:0 0 42px!important;
    inline-size:42px!important;
    block-size:100%!important;
    min-block-size:46px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    color:#718096!important;
    pointer-events:none!important;
    z-index:auto!important;
  }
  html body :where(.input-with-icon,.v293-search-control,.filter-search-control,.payroll-period-search)>input{
    position:static!important;
    order:0!important;
    flex:1 1 auto!important;
    inline-size:auto!important;
    min-inline-size:0!important;
    block-size:46px!important;
    min-block-size:46px!important;
    margin:0!important;
    padding:0 4px 0 12px!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:start!important;
  }
  html body :where(.input-with-icon,.v293-search-control,.filter-search-control,.payroll-period-search):focus-within{
    border-color:#6d9ff0!important;
    box-shadow:var(--ux-focus)!important;
  }
  html body .payroll-period-search{max-inline-size:520px!important;margin-block:4px 18px!important}

  /* Desktop tables and action controls: icon/copy never overlap. */
  html body :where(.table,.responsive-table) .btn,
  html body :where(.row-actions,.page-actions,.form-actions,.batch-command-actions,.workflow-actions) .btn{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    line-height:1.35!important;
  }
  html body :where(.table,.responsive-table,.row-actions,.page-actions,.form-actions,.batch-command-actions,.workflow-actions) .btn>svg{
    position:static!important;
    order:-10!important;
    flex:0 0 auto!important;
    margin:0!important;
    transform:none!important;
  }

  /* Payment and other explicitly end-aligned primary actions sit on the left. */
  html[dir="rtl"] body :where(.actions-left,.payment-submit-actions){
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    inline-size:100%!important;
  }
  html body .payment-submit-actions .btn{inline-size:auto!important;min-inline-size:max-content!important}

  /* Device privacy: one coherent RTL row per statement. */
  html body .device-privacy-list{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-block-start:14px!important}
  html body .device-privacy-item{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    min-inline-size:0!important;
    min-block-size:54px!important;
    padding:8px 10px!important;
    border:1px solid #e2e8f0!important;
    border-radius:11px!important;
    background:#f8fafc!important;
    direction:rtl!important;
    text-align:start!important;
  }
  html body .device-privacy-icon{grid-column:1!important;display:grid!important;place-items:center!important;inline-size:36px!important;block-size:36px!important;border-radius:10px!important;background:#edf4ff!important;color:#2563eb!important}
  html body .device-privacy-copy{grid-column:2!important;min-inline-size:0!important;font-size:14px!important;line-height:1.8!important;color:#34425b!important;text-align:start!important}

  /* Update safeguards: icon and copy are always one visual unit. */
  html body .update-process{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
  html body .update-process-item{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    direction:rtl!important;
    gap:9px!important;
    min-inline-size:0!important;
    min-block-size:52px!important;
    padding:9px 10px!important;
    border:1px solid #e2e8f0!important;
    border-radius:11px!important;
    background:#f8fafc!important;
    text-align:start!important;
  }
  html body .update-process-icon{display:grid!important;place-items:center!important;flex:0 0 32px!important;inline-size:32px!important;block-size:32px!important;border-radius:9px!important;background:#edf4ff!important;color:#2563eb!important}
  html body .update-process-copy{min-inline-size:0!important;font-size:13px!important;font-weight:700!important;line-height:1.65!important;text-align:start!important}

  /* Login: no absolute-positioned icons; grid columns reserve real space. */
  html body.auth-body{min-block-size:100dvh!important;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))!important;place-items:center!important;overflow-x:hidden!important}
  html body.auth-body .auth-shell{inline-size:min(100%,460px)!important;max-inline-size:460px!important;margin:auto!important}
  html body.auth-body .auth-card{inline-size:100%!important;padding:30px!important;border-radius:20px!important;overflow:visible!important}
  html body.auth-body .auth-input-wrap{
    position:relative!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
    direction:rtl!important;
    min-inline-size:0!important;
    min-block-size:54px!important;
    padding:0!important;
    border:1px solid var(--ux-line-strong,#c8d3e1)!important;
    border-radius:11px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  html body.auth-body .auth-input-wrap.password-wrap{grid-template-columns:44px minmax(0,1fr) 44px!important}
  html body.auth-body .auth-input-wrap>svg{position:static!important;inset:auto!important;grid-column:1!important;justify-self:center!important;align-self:center!important;margin:0!important;transform:none!important;color:#718096!important;pointer-events:none!important}
  html body.auth-body .auth-input-wrap>input{
    position:static!important;
    grid-column:2!important;
    inline-size:100%!important;
    min-inline-size:0!important;
    block-size:52px!important;
    min-block-size:52px!important;
    padding:0 4px 0 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:start!important;
  }
  html body.auth-body .auth-input-wrap>.password-toggle{
    position:static!important;
    inset:auto!important;
    grid-column:3!important;
    inline-size:44px!important;
    min-inline-size:44px!important;
    block-size:52px!important;
    min-block-size:52px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-inline-start:1px solid #e5eaf1!important;
    border-radius:0!important;
    background:#f8fafc!important;
    transform:none!important;
  }
  html body.auth-body .auth-input-wrap:focus-within{border-color:#6d9ff0!important;box-shadow:var(--ux-focus)!important}
  html body.auth-body .auth-device-features{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  html body.auth-body .auth-feature{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;direction:rtl!important;gap:7px!important;min-inline-size:0!important;min-block-size:46px!important;padding:8px!important;white-space:nowrap!important}
  html body.auth-body .auth-feature>svg{position:static!important;flex:0 0 auto!important;margin:0!important}
  html body.auth-body .auth-feature>span{min-inline-size:0!important;white-space:nowrap!important;text-align:start!important}
}

@media screen and (max-width:1023px){
  /* The overlay must sit below the menu. No blur may hide the drawer. */
  html body .ds-sidebar{z-index:1200!important;visibility:visible!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html body .ds-sidebar.open,
  html body.menu-open .ds-sidebar,
  html body.sidebar-open .ds-sidebar{transform:translateX(0)!important;visibility:visible!important;opacity:1!important}
  html body .mobile-overlay{z-index:1150!important;background:rgba(7,22,51,.48)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html body.menu-open{overflow:hidden!important}
  html body .ds-collapse{display:none!important}
}

@media screen and (max-width:767px){
  /* Mobile is not a shrunken desktop: action groups reflow by purpose. */
  html body .page-head{gap:10px!important}
  html body :where(.btn,button[role="button"]){max-inline-size:100%!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important}
  html body :where(.row-actions,.page-actions,.card-head>.actions,.batch-command-actions,.workflow-actions){
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;
    inline-size:100%!important;
    gap:8px!important;
    direction:rtl!important;
  }
  html body :where(.row-actions,.page-actions,.card-head>.actions,.batch-command-actions,.workflow-actions)>:where(a,button,form),
  html body :where(.row-actions,.page-actions,.card-head>.actions,.batch-command-actions,.workflow-actions) .btn{
    inline-size:100%!important;
    min-inline-size:0!important;
  }
  html body .form-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;inline-size:100%!important}
  html body .form-actions .btn{inline-size:auto!important;min-inline-size:max-content!important;min-block-size:46px!important;padding-inline:14px!important}
  html body .compose-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  html body .compose-actions .btn{inline-size:100%!important}

  /* Messages filters: search full width, selects side by side, action full width. */
  html body .v334-message-filter{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    padding:12px!important;
    align-items:end!important;
  }
  html body .v334-message-filter .v293-filter-search{grid-column:1/-1!important}
  html body .v334-message-filter .v293-filter-field{min-inline-size:0!important;inline-size:100%!important}
  html body .v334-message-filter .select-shell,
  html body .v334-message-filter select{inline-size:100%!important;min-inline-size:0!important}
  html body .v334-message-filter .v334-filter-submit{grid-column:1/-1!important;inline-size:100%!important;min-block-size:46px!important}
  html body .v293-index-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;min-block-size:0!important;padding:6px!important}
  html body .v293-index-tabs>a{inline-size:100%!important;min-inline-size:0!important;min-block-size:44px!important;padding-inline:7px!important;white-space:nowrap!important;justify-content:center!important}

  /* Message drawers and details are visible, interactive and above the overlay. */
  html body .v293-message-list-panel,
  html body .v293-info-panel{z-index:1210!important;background:#fff!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;transition:transform .2s ease,opacity .16s ease!important}
  html body.message-list-open .v293-message-list-panel,
  html body.message-info-open .v293-info-panel{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translateX(0)!important}
  html body .v293-message-overlay{position:fixed!important;inset:0!important;z-index:1200!important;background:rgba(7,22,51,.46)!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html body .v293-mobile-pane-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;white-space:nowrap!important}

  /* Update safeguards and device privacy become clean mobile lists. */
  html body .update-process{grid-template-columns:1fr!important}
  html body .update-process-item{min-block-size:56px!important}
  html body .device-privacy-item{grid-template-columns:40px minmax(0,1fr)!important;align-items:start!important}
  html body .device-privacy-copy{font-size:13.5px!important;line-height:1.85!important}

  /* Login mobile: one calm column with stable controls and readable features. */
  html body.auth-body{padding:12px!important;place-items:start center!important}
  html body.auth-body .auth-shell{max-inline-size:430px!important;padding-block:8px!important}
  html body.auth-body .auth-card{padding:20px 16px!important;border-radius:17px!important}
  html body.auth-body .auth-brand{margin-block-end:16px!important}
  html body.auth-body .auth-heading{margin-block-end:16px!important}
  html body.auth-body .auth-heading h1{font-size:1.45rem!important;line-height:1.55!important}
  html body.auth-body .auth-heading p{font-size:.86rem!important;line-height:1.8!important}
  html body.auth-body .auth-device-features{grid-template-columns:1fr!important;gap:7px!important}
  html body.auth-body .auth-feature{justify-content:flex-start!important;padding-inline:12px!important;font-size:13px!important}
  html body.auth-body .auth-support{font-size:12.5px!important;line-height:1.8!important;text-align:center!important}
}

@media screen and (max-width:390px){
  html body .v334-message-filter{grid-template-columns:1fr!important}
  html body .v334-message-filter .v293-filter-search,
  html body .v334-message-filter .v334-filter-submit{grid-column:1!important}
  html body :where(.row-actions,.page-actions,.card-head>.actions,.batch-command-actions,.workflow-actions){grid-template-columns:1fr!important}
  html body .form-actions .btn{inline-size:100%!important;min-inline-size:0!important}
}

/* ========================================================================
   v3.3.5 — accounting summary single-row + mobile sidebar collapse removal
   ======================================================================== */
@media screen and (min-width:1200px){
  html body .accounting-stats.report-stats{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  html body .accounting-stats.report-stats .stat-card{
    min-inline-size:0!important;
    min-block-size:118px!important;
    padding:13px!important;
  }
}

@media screen and (min-width:768px) and (max-width:1199px){
  html body .accounting-stats.report-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media screen and (max-width:1023px){
  html body .ds-sidebar .ds-collapse,
  html body .ds-collapse[data-sidebar-collapse]{
    display:none!important;
    visibility:hidden!important;
    position:absolute!important;
    inset:auto!important;
    inline-size:0!important;
    block-size:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
}

@media screen and (max-width:767px){
  html body .accounting-stats.report-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    overflow:visible!important;
  }
  html body .accounting-stats.report-stats .stat-card{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    min-block-size:74px!important;
    padding:10px 12px!important;
    overflow:hidden!important;
  }
  html body .accounting-stats.report-stats .stat-icon{
    grid-column:1!important;
    grid-row:1!important;
    inline-size:42px!important;
    block-size:42px!important;
    min-inline-size:42px!important;
    margin:0!important;
  }
  html body .accounting-stats.report-stats .stat-card>div{
    grid-column:2!important;
    min-inline-size:0!important;
    display:grid!important;
    grid-template-columns:minmax(105px,1fr) auto minmax(58px,auto)!important;
    align-items:center!important;
    gap:8px!important;
    direction:rtl!important;
  }
  html body .accounting-stats.report-stats .stat-card>div>span{
    grid-column:1!important;
    grid-row:1!important;
    min-inline-size:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:13px!important;
    font-weight:800!important;
    text-align:start!important;
  }
  html body .accounting-stats.report-stats .stat-card>div>strong{
    grid-column:2!important;
    grid-row:1!important;
    min-inline-size:max-content!important;
    white-space:nowrap!important;
    font-size:14px!important;
    line-height:1.35!important;
    text-align:end!important;
  }
  html body .accounting-stats.report-stats .stat-card>div>small{
    grid-column:3!important;
    grid-row:1!important;
    min-inline-size:0!important;
    max-inline-size:110px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:11px!important;
    line-height:1.35!important;
    text-align:end!important;
  }
  html body .accounting-stats.report-stats .money-display,
  html body .accounting-stats.report-stats .money-number,
  html body .accounting-stats.report-stats .money-unit{
    white-space:nowrap!important;
    display:inline-flex!important;
    align-items:baseline!important;
    gap:4px!important;
  }
}

@media screen and (max-width:430px){
  html body .accounting-stats.report-stats .stat-card>div{
    grid-template-columns:minmax(90px,1fr) auto minmax(42px,70px)!important;
    gap:6px!important;
  }
  html body .accounting-stats.report-stats .stat-card>div>span{font-size:12.5px!important}
  html body .accounting-stats.report-stats .stat-card>div>strong{font-size:13px!important}
  html body .accounting-stats.report-stats .stat-card>div>small{font-size:10px!important;max-inline-size:70px!important}
}