/* Phase 23 — Clarity Pro
   Inspired by the user's reference ERP: light shell, compact typography, restrained semantic colour,
   predictable cards/tables and a family of specialist dashboards. Everything is scoped to the theme. */
.theme-pick-clarity-pro .theme-pick-swatch i:nth-child(1){background:#ffffff;border:1px solid #dfe4ea}
.theme-pick-clarity-pro .theme-pick-swatch i:nth-child(2){background:#172033}
.theme-pick-clarity-pro .theme-pick-swatch i:nth-child(3){background:#0f8f73}
body[data-theme="clarity-pro"]{
 --primary:#0f8f73;--primary2:#19a27f;--primary-dark:#0a715c;--ink:#172033;--muted:#6f7887;--muted2:#96a0ad;
 --line:#e4e8ed;--bg:#f7f8fa;--surface:#fff;--soft:#f8fafb;--radius:10px;--shadow:0 1px 2px rgba(20,32,51,.025);
 --sidebar-bg:#fff;--sidebar-text:#344054;--sidebar-text-dim:#8a95a4;--sidebar-hover-bg:#f4f7f7;--sidebar-active-bg:#172033;
 --sidebar-active-text:#fff;--sidebar-active-icon-bg:rgba(255,255,255,.10);--sidebar-border:#e5e8ec;--sidebar-section-bg:transparent;--sidebar-search-bg:#f8f9fb;--sidebar-border-right:1px solid #e4e8ed;--sidebar-footer-bg:#fff;
 background:#f7f8fa;color:#172033;font-size:13px;
}
body[data-theme="clarity-pro"] .topbar{height:60px;padding:0 16px;background:#fff;border-bottom:1px solid #e5e8ec;box-shadow:none}
body[data-theme="clarity-pro"] .brand .logo{width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid #dfe4e9;color:#0f8f73;box-shadow:none}
body[data-theme="clarity-pro"] .brand h1{font-size:13px;font-weight:750;letter-spacing:-.01em}
body[data-theme="clarity-pro"] .brand small{display:none}
body[data-theme="clarity-pro"] .top-actions .btn.primary{background:#172033;border-color:#172033;color:#fff}
body[data-theme="clarity-pro"] .top-actions .btn.primary:hover{background:#223249;border-color:#223249}
body[data-theme="clarity-pro"] .search-global{background:#f8f9fb;border-color:#e5e8ed;border-radius:8px}
body[data-theme="clarity-pro"] .layout{grid-template-columns:242px minmax(0,1fr);min-height:calc(100vh - 60px)}
body[data-theme="clarity-pro"] .sidebar{top:60px;height:calc(100vh - 60px);padding:11px 10px 15px;background:#fff;border-right:1px solid #e4e8ed;color:#344054;box-shadow:none}
body[data-theme="clarity-pro"] .sidebar-collapse-control{height:30px;width:32px;margin:0 0 7px auto;border:1px solid #e5e8ed;background:#fff;color:#667085;border-radius:7px}
body[data-theme="clarity-pro"] .sidebar-collapse-control:hover{background:#f5f7f8;color:#172033}
body[data-theme="clarity-pro"] .sidebar-search{min-height:36px;background:#f8f9fb;border:1px solid #e5e8ed;border-radius:8px;margin:0 1px 11px;color:#667085}
body[data-theme="clarity-pro"] .sidebar-search input{min-height:34px;color:#344054;font-size:11.5px}
body[data-theme="clarity-pro"] .sidebar-search input::placeholder{color:#98a2b3}
body[data-theme="clarity-pro"] .nav-section{border:0;margin:0 0 8px;padding:0;background:transparent}
body[data-theme="clarity-pro"] .nav-title{padding:8px 8px 5px;color:#8792a2;font-size:9.5px;font-weight:750;text-transform:none;letter-spacing:.02em}
body[data-theme="clarity-pro"] .nav-title:before{display:none}
body[data-theme="clarity-pro"] .nav-btn{min-height:35px;padding:5px 8px;border-radius:7px;margin:1px 0;color:#344054;font-size:11.5px;font-weight:560;border:0;background:transparent}
body[data-theme="clarity-pro"] .nav-btn:hover{background:#f5f7f8;color:#172033;transform:none}
body[data-theme="clarity-pro"] .nav-btn.active{background:#172033;color:#fff;box-shadow:none;font-weight:650}
body[data-theme="clarity-pro"] .nav-icon{width:24px;height:24px;background:transparent;color:#617080;border-radius:6px}
body[data-theme="clarity-pro"] .nav-btn.active .nav-icon{background:transparent;color:#fff}
body[data-theme="clarity-pro"] .nav-subitem{margin-left:28px!important;width:calc(100% - 28px)!important;min-height:29px!important;padding:3px 8px!important;color:#667085!important;font-size:10.8px!important;border-left:1px solid #e3e7eb;border-radius:0 7px 7px 0!important}
body[data-theme="clarity-pro"] .nav-subitem.active{background:#eef8f5!important;color:#08765f!important;font-weight:700!important;border-left-color:#0f8f73!important}
body[data-theme="clarity-pro"] .nav-subitem .nav-icon{display:none!important}
body[data-theme="clarity-pro"] .nav-parent-toggle{color:#98a2b3!important}
body[data-theme="clarity-pro"] .nav-parent-toggle:hover{background:#eef2f4!important;color:#172033!important}
body[data-theme="clarity-pro"] .nav-badge{background:#eef8f5;color:#08765f;border:0}
body[data-theme="clarity-pro"] .sidebar-footer{background:#fff!important;border-top:1px solid #e9edf1!important;color:#667085!important;padding:12px 7px 0!important}
body[data-theme="clarity-pro"] .sidebar-footer b{color:#344054!important}
body[data-theme="clarity-pro"] .main{padding:14px 16px 58px;background:#f7f8fa}
body[data-theme="clarity-pro"] .notice-strip{border-radius:8px;box-shadow:none}
body[data-theme="clarity-pro"] .page-head{padding:0 0 13px;margin:0;background:transparent;border:0;box-shadow:none}
body[data-theme="clarity-pro"] .page-title{font-size:19px;font-weight:760;letter-spacing:-.025em}
body[data-theme="clarity-pro"] .page-title:after{display:none}
body[data-theme="clarity-pro"] .page-desc{font-size:11.5px;color:#7b8694}
body[data-theme="clarity-pro"] .breadcrumbs{font-size:10px;color:#8993a1!important;font-weight:600!important}
body[data-theme="clarity-pro"] .card,body[data-theme="clarity-pro"] .stat{border:1px solid #e4e8ed;border-radius:9px;box-shadow:none;background:#fff}
body[data-theme="clarity-pro"] .card:hover,body[data-theme="clarity-pro"] .stat:hover{box-shadow:none;transform:none}
body[data-theme="clarity-pro"] .card-title{font-size:13px;font-weight:720}
body[data-theme="clarity-pro"] .card-sub{font-size:10.5px}
body[data-theme="clarity-pro"] .btn{min-height:34px;border-radius:7px;font-size:11px;font-weight:650;box-shadow:none}
body[data-theme="clarity-pro"] .btn.primary{background:#172033;border-color:#172033;color:#fff}
body[data-theme="clarity-pro"] .btn.primary:hover{background:#24354c;border-color:#24354c}
body[data-theme="clarity-pro"] input,body[data-theme="clarity-pro"] select,body[data-theme="clarity-pro"] textarea{border-radius:7px;border-color:#dfe4e9;background:#fff;box-shadow:none}
body[data-theme="clarity-pro"] input:focus,body[data-theme="clarity-pro"] select:focus,body[data-theme="clarity-pro"] textarea:focus{border-color:#6ab9a7;box-shadow:0 0 0 3px rgba(15,143,115,.09)}
body[data-theme="clarity-pro"] table thead th{background:#f8f9fb;color:#606b7a;font-size:10.5px;border-color:#e7ebef}
body[data-theme="clarity-pro"] table tbody td{font-size:11.5px;border-color:#eef1f4}
body[data-theme="clarity-pro"] table tbody tr:nth-child(even){background:#fcfcfd}
body[data-theme="clarity-pro"] table tbody tr:hover{background:#f7faf9}
body[data-theme="clarity-pro"] .section-index{display:none!important}
body[data-theme="clarity-pro"] .assist{opacity:.78}

/* Dashboard submenu mirrors the reference template: one Dashboard parent, specialist children. */
body[data-theme="clarity-pro"] .nav-overview .dashboard-child{display:flex}
body:not([data-theme="clarity-pro"]) .nav-overview .dashboard-child{display:none!important}

/* Clarity Dashboard family */
body[data-theme="clarity-pro"].page-dashboard .main{padding-top:10px}
.cd-shell{max-width:1600px;margin:0 auto}.cd-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10px}.cd-breadcrumb{font-size:10px;color:#8d97a4;margin-bottom:5px}.cd-page-head h2{font-size:20px;line-height:1.15;margin:0;color:#172033;letter-spacing:-.025em}.cd-page-head p{font-size:11.5px;color:#7d8795;margin:6px 0 0;max-width:780px}.cd-head-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.cd-date-chip,.cd-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e6eb;background:#fff;border-radius:7px;padding:7px 9px;color:#667085;font-size:10.5px;font-weight:650}.cd-dashboard-switcher{display:flex;gap:4px;overflow-x:auto;padding:4px;margin-bottom:10px;background:#fff;border:1px solid #e5e9ed;border-radius:9px}.cd-dashboard-switcher a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 9px;border-radius:6px;color:#667085;font-size:10.8px;font-weight:600}.cd-dashboard-switcher a:hover{background:#f6f8f9;color:#172033}.cd-dashboard-switcher a.active{background:#eef8f5;color:#08765f;font-weight:750}.cd-welcome{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 16px;margin-bottom:10px;background:#fff;border:1px solid #e4e8ed;border-radius:9px}.cd-welcome.compact{padding:13px 15px}.cd-welcome span{font-size:9px;letter-spacing:.08em;color:#0f8f73;font-weight:800}.cd-welcome h3{margin:4px 0 3px;font-size:17px;letter-spacing:-.02em}.cd-welcome p{margin:0;font-size:11px;color:#7d8794}.cd-welcome-badge{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:7px;background:#172033;color:#fff;font-size:10px;font-weight:700}
.cd-kpi-grid{display:grid;gap:9px;margin-bottom:9px}.cd-kpi-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cd-kpi-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cd-kpi{display:block;min-width:0;padding:12px 13px;background:#fff;border:1px solid #e4e8ed;border-radius:9px;color:#172033;transition:border-color .15s ease,box-shadow .15s ease}.cd-kpi:hover{border-color:#d8dee5;box-shadow:0 3px 12px rgba(20,32,51,.045)}.cd-kpi-top{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#778291;font-size:10.5px}.cd-kpi-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#edf7f4;color:#0f8f73}.cd-kpi>b{display:block;margin-top:6px;font-size:20px;line-height:1;font-weight:780;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.cd-kpi small{display:block;margin-top:7px;color:#8a94a1;font-size:9.8px}.cd-tone-green .cd-kpi-icon{background:#eaf7f1;color:#15805e}.cd-tone-orange .cd-kpi-icon,.cd-tone-amber .cd-kpi-icon{background:#fff3e7;color:#d56c18}.cd-tone-rose .cd-kpi-icon{background:#fff0f3;color:#c84e70}.cd-tone-violet .cd-kpi-icon,.cd-tone-indigo .cd-kpi-icon{background:#f2eefb;color:#7150a1}.cd-tone-blue .cd-kpi-icon{background:#edf5fb;color:#3479b2}.cd-tone-navy .cd-kpi-icon{background:#edf0f4;color:#263a50}
.cd-grid{display:grid;gap:9px;margin-bottom:9px}.cd-grid-main{grid-template-columns:1fr 1fr 1fr}.cd-grid-2{grid-template-columns:1fr 1fr}.cd-grid-finance-top{grid-template-columns:2fr 1fr}.cd-span-2{grid-column:span 2}.cd-card{background:#fff;border:1px solid #e4e8ed;border-radius:9px;min-width:0;overflow:hidden}.cd-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:12px 13px 8px}.cd-card-head h3{font-size:12.5px;margin:0;color:#172033;font-weight:740}.cd-card-head p{font-size:9.8px;margin:3px 0 0;color:#8a94a1}.cd-card-head>a{font-size:9.8px;color:#5f6d7d;border:1px solid #e4e8ed;border-radius:6px;padding:5px 7px}.cd-card-head>a:hover{background:#f7f9fa;color:#172033}.cd-chart{height:250px;padding:4px 12px 12px}.cd-chart-lg{height:275px}.cd-chart-sm{height:155px;padding-top:10px}.cd-big-number{display:flex;height:250px;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}.cd-big-number span{color:#87919f;font-size:10px}.cd-big-number b{margin:8px 0 6px;font-size:30px;letter-spacing:-.035em}.cd-big-number small{color:#8a94a1;font-size:10px;max-width:240px}.cd-mini-list{padding:3px 13px 12px}.cd-mini-list a,.cd-list-table>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eef1f4;color:#344054}.cd-mini-list a:last-child,.cd-list-table>div:last-child{border-bottom:0}.cd-mini-list span{display:flex;align-items:center;gap:7px;font-size:10.5px}.cd-mini-list b,.cd-list-table b{font-size:11px;font-variant-numeric:tabular-nums}.cd-dot{width:7px;height:7px;border-radius:99px;background:#0f8f73}.cd-dot.orange{background:#e7832f}.cd-dot.green{background:#169c78}.cd-dot.blue{background:#3a82c4}.cd-dot.violet{background:#7657a2}.cd-list-table{padding:3px 13px 10px}.cd-list-table>div>span{min-width:0}.cd-list-table>div>span b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.cd-list-table small{display:block;margin-top:3px;color:#8a94a1;font-size:9.5px}.cd-list-table.compact>div{padding:8px 0}.cd-feed{padding:2px 13px 12px}.cd-feed>div{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #eef1f4}.cd-feed>div:last-child{border-bottom:0}.cd-feed>div>svg{margin-top:2px;color:#718091}.cd-feed span{min-width:0}.cd-feed b{display:block;font-size:10.5px;color:#344054}.cd-feed small{display:block;margin-top:3px;color:#8b95a2;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-summary-boxes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 13px}.cd-summary-boxes.tall{height:250px;align-content:center}.cd-summary-boxes>div{padding:13px;border:1px solid #e7ebef;border-radius:8px;background:#fafbfc}.cd-summary-boxes span{display:block;color:#8893a0;font-size:9.5px}.cd-summary-boxes b{display:block;margin-top:7px;font-size:16px}.cd-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 13px 13px}.cd-module-card{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:11px;border:1px solid #e6eaee;border-radius:8px;color:#344054;background:#fff}.cd-module-card>svg:first-child{width:32px;height:32px;padding:8px;border-radius:7px;background:#edf7f4;color:#0f8f73}.cd-module-card span b{display:block;font-size:10.8px}.cd-module-card span small{display:block;margin-top:2px;color:#9099a5;font-size:9px}.cd-module-card>svg:last-child{color:#a2aab4}.cd-module-card:hover{border-color:#d3dadf;background:#fbfcfc}.cd-module-violet>svg:first-child{background:#f2eef8;color:#795d91}.cd-module-blue>svg:first-child{background:#edf4fa;color:#407ba9}.cd-module-green>svg:first-child{background:#edf8f3;color:#347e61}.cd-module-indigo>svg:first-child{background:#f0f0f8;color:#626b98}.cd-module-rose>svg:first-child{background:#faf0f4;color:#986177}.cd-module-amber>svg:first-child{background:#faf4e9;color:#9d742e}.cd-table-wrap{overflow:auto;padding:0 12px 12px}.cd-table{width:100%;border-collapse:collapse}.cd-table th{padding:8px 9px;background:#f8f9fb;border-bottom:1px solid #e8ebef;color:#667085;font-size:9.5px;text-align:left;white-space:nowrap}.cd-table td{padding:9px;border-bottom:1px solid #eef1f4;color:#586576;font-size:10.3px;white-space:nowrap}.cd-table .num{text-align:right;font-variant-numeric:tabular-nums}.cd-status{display:inline-flex;padding:3px 6px;border-radius:5px;background:#f1f3f5;color:#667085;font-size:8.8px;font-weight:700}.cd-status.good{background:#eaf7f1;color:#197452}.cd-status.warn{background:#fff2e8;color:#b85b20}.cd-attendance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:4px 13px}.cd-attendance-grid>div{border:1px solid #e7ebef;border-radius:8px;padding:10px;background:#fafbfc}.cd-attendance-grid span{font-size:9px;color:#8a94a1}.cd-attendance-grid b{display:block;margin-top:5px;font-size:16px}.cd-attendance-grid small{font-size:8.8px;color:#98a1ac}.cd-empty{padding:20px;text-align:center;color:#98a1ad;font-size:10.5px}
@media(max-width:1240px){.cd-kpi-5{grid-template-columns:repeat(3,1fr)}.cd-module-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){body[data-theme="clarity-pro"] .layout{grid-template-columns:220px minmax(0,1fr)}.cd-grid-main,.cd-grid-finance-top{grid-template-columns:1fr 1fr}.cd-span-2{grid-column:span 1}.cd-kpi-4{grid-template-columns:repeat(2,1fr)}.cd-module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){body[data-theme="clarity-pro"] .layout{grid-template-columns:1fr}body[data-theme="clarity-pro"] .sidebar{top:60px;height:calc(100vh - 60px);width:250px;left:-270px}.cd-page-head{align-items:flex-start;flex-direction:column}.cd-grid-main,.cd-grid-finance-top,.cd-grid-2{grid-template-columns:1fr}.cd-kpi-5{grid-template-columns:repeat(2,1fr)}.cd-module-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){body[data-theme="clarity-pro"] .main{padding:10px 9px 64px}.cd-kpi-4,.cd-kpi-5{grid-template-columns:1fr 1fr}.cd-module-grid{grid-template-columns:1fr}.cd-welcome{align-items:flex-start;flex-direction:column}.cd-dashboard-switcher{margin-inline:-1px}.cd-chart{height:220px}.cd-attendance-grid{grid-template-columns:1fr 1fr}.cd-head-actions{width:100%}.cd-head-actions .btn,.cd-head-actions .cd-date-chip{flex:1;justify-content:center}.cd-kpi>b{font-size:17px}}


/* Phase 24 — Reference Vivid fidelity pass
   Palette and component treatment derived from the user-provided reference ERP.
   Keeps ERP Pro+ workflows/data intact while matching the reference visual language more closely. */
body[data-theme="clarity-pro"]{
  --cp-primary:#0f766e;--cp-primary-hover:#0b5f59;--cp-success:#059669;--cp-orange:#e65100;
  --cp-pink:#cc25b0;--cp-purple:#6a1b9a;--cp-info:#0ea5e9;--cp-danger:#b91c1c;--cp-warning:#d97706;
  --cp-dark:#1e293b;--cp-title:#2f3a4b;--cp-default:#67707d;--cp-muted:#9096a1;
  --cp-border:#e8e9ec;--cp-light:#f8f9fa;--cp-white:#fff;
  font-family:Geist,Inter,"Segoe UI",Roboto,Arial,sans-serif!important;color:var(--cp-default);background:var(--cp-light);
}
body[data-theme="clarity-pro"] .topbar{background:#fff;border-bottom:1px solid var(--cp-border);height:60px}
body[data-theme="clarity-pro"] .brand .logo{color:var(--cp-primary);border-color:var(--cp-border)}
body[data-theme="clarity-pro"] .sidebar{background:#fff;border-right:1px solid var(--cp-border);color:var(--cp-default)}
body[data-theme="clarity-pro"] .nav-title{color:#9aa0aa;font-size:10px;text-transform:uppercase;letter-spacing:.055em;font-weight:700}
body[data-theme="clarity-pro"] .nav-btn{color:#4b5563;font-weight:540;border-radius:6px}
body[data-theme="clarity-pro"] .nav-btn:hover{background:#f3f4f6;color:var(--cp-title)}
body[data-theme="clarity-pro"] .nav-btn.active{background:var(--cp-primary);color:#fff}
body[data-theme="clarity-pro"] .nav-subitem.active{background:#edf7f6!important;color:var(--cp-primary)!important;border-left-color:var(--cp-primary)!important}
body[data-theme="clarity-pro"] .nav-badge{background:#e7f5f2;color:var(--cp-primary)}
body[data-theme="clarity-pro"] .main{background:var(--cp-light)}
body[data-theme="clarity-pro"] .page-title,body[data-theme="clarity-pro"] .card-title{color:var(--cp-title)}
body[data-theme="clarity-pro"] .page-desc,body[data-theme="clarity-pro"] .card-sub{color:var(--cp-default)}
body[data-theme="clarity-pro"] .card,body[data-theme="clarity-pro"] .stat{border-color:var(--cp-border);border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.025)}
body[data-theme="clarity-pro"] .btn{border-radius:6px;border-color:#d9dde3;background:#fff;color:#374151;font-weight:600}
body[data-theme="clarity-pro"] .btn:hover{background:var(--cp-primary);border-color:var(--cp-primary);color:#fff}
body[data-theme="clarity-pro"] .btn.primary,body[data-theme="clarity-pro"] .top-actions .btn.primary{background:var(--cp-primary);border-color:var(--cp-primary);color:#fff}
body[data-theme="clarity-pro"] .btn.primary:hover,body[data-theme="clarity-pro"] .top-actions .btn.primary:hover{background:var(--cp-primary-hover);border-color:var(--cp-primary-hover)}
body[data-theme="clarity-pro"] .btn.danger,body[data-theme="clarity-pro"] .btn.red{background:var(--cp-danger);border-color:var(--cp-danger);color:#fff}
body[data-theme="clarity-pro"] input:focus,body[data-theme="clarity-pro"] select:focus,body[data-theme="clarity-pro"] textarea:focus{border-color:var(--cp-primary);box-shadow:0 0 0 3px rgba(15,118,110,.10)}
body[data-theme="clarity-pro"] table thead th{background:#f8f9fa;color:#5f6672;border-color:var(--cp-border)}
body[data-theme="clarity-pro"] table tbody td{border-color:#eff0f2}
body[data-theme="clarity-pro"] table tbody tr:hover{background:#f7fbfa}

/* Dashboard fidelity */
body[data-theme="clarity-pro"].page-dashboard .main{background:#f7f8fa}
.cd-shell{color:var(--cp-default)}
.cd-page-head h2,.cd-card-head h3,.cd-kpi>b,.cd-list-table b,.cd-mini-list b{color:var(--cp-title)}
.cd-breadcrumb,.cd-page-head p,.cd-card-head p,.cd-kpi-top,.cd-kpi small{color:var(--cp-default)}
.cd-date-chip,.cd-chip{border-color:var(--cp-border);background:#fff;color:var(--cp-default);border-radius:6px}
.cd-dashboard-switcher{border-color:var(--cp-border);border-radius:8px;background:#fff;padding:5px}
.cd-dashboard-switcher a{border-radius:6px;color:#5e6672}
.cd-dashboard-switcher a:hover{background:#f3f4f6;color:var(--cp-title)}
.cd-dashboard-switcher a.active{background:var(--cp-primary);color:#fff}
.cd-welcome{border-color:var(--cp-border);border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.025)}
.cd-welcome span{color:var(--cp-primary)}
.cd-welcome-badge{background:var(--cp-primary);color:#fff;border-radius:6px}
.cd-card{border-color:var(--cp-border);border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.025)}
.cd-card-head>a{border-color:var(--cp-border);color:#374151;border-radius:6px;background:#fff}
.cd-card-head>a:hover{background:var(--cp-primary);border-color:var(--cp-primary);color:#fff}

/* Reference-style KPI cards: clean white surface + bold solid color icon + soft colored rail. */
.cd-kpi{position:relative;overflow:hidden;border-color:var(--cp-border);border-radius:8px;background:#fff;padding:14px 14px 13px;box-shadow:0 1px 2px rgba(15,23,42,.025);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.cd-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone,var(--cp-primary))}
.cd-kpi:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--tone,var(--cp-primary)) 0 38%,transparent 38% 100%);opacity:.62}
.cd-kpi:hover{border-color:#d8dbe0;box-shadow:0 5px 14px rgba(15,23,42,.055);transform:translateY(-1px)}
.cd-kpi-top{font-size:11px}.cd-kpi>b{font-size:22px;margin-top:8px}.cd-kpi small{font-size:10px;margin-top:8px}
.cd-kpi-icon{width:36px;height:36px;border-radius:7px;background:var(--tone,var(--cp-primary))!important;color:#fff!important;box-shadow:none}
.cd-tone-teal{--tone:#0f766e}.cd-tone-green{--tone:#059669}.cd-tone-orange,.cd-tone-amber{--tone:#e65100}.cd-tone-rose{--tone:#cc25b0}.cd-tone-violet,.cd-tone-indigo{--tone:#6a1b9a}.cd-tone-blue{--tone:#0ea5e9}.cd-tone-navy{--tone:#1e293b}

/* Colorful reference-like compact summary boxes */
.cd-summary-boxes>div,.cd-attendance-grid>div{border-color:var(--cp-border);background:#fff;position:relative;overflow:hidden}
.cd-summary-boxes>div:nth-child(4n+1),.cd-attendance-grid>div:nth-child(4n+1){background:#eef8f6;border-color:#d7ebe7}
.cd-summary-boxes>div:nth-child(4n+2),.cd-attendance-grid>div:nth-child(4n+2){background:#eef8fd;border-color:#d9edf7}
.cd-summary-boxes>div:nth-child(4n+3),.cd-attendance-grid>div:nth-child(4n+3){background:#fbf1fb;border-color:#efdcef}
.cd-summary-boxes>div:nth-child(4n+4),.cd-attendance-grid>div:nth-child(4n+4){background:#fff4ed;border-color:#f6dfd1}
.cd-module-card{border-color:var(--cp-border);border-radius:8px;background:#fff}
.cd-module-card:hover{border-color:#cfd3d9;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.045)}
.cd-module-card>svg:first-child{background:#e6f3f1;color:var(--cp-primary)}
.cd-module-violet>svg:first-child{background:#f3eaf5;color:var(--cp-purple)}
.cd-module-blue>svg:first-child{background:#e9f7fd;color:var(--cp-info)}
.cd-module-green>svg:first-child{background:#e7f6ef;color:var(--cp-success)}
.cd-module-indigo>svg:first-child{background:#f2ebf5;color:var(--cp-purple)}
.cd-module-rose>svg:first-child{background:#faeefa;color:var(--cp-pink)}
.cd-module-amber>svg:first-child{background:#fff0e6;color:var(--cp-orange)}
.cd-dot{background:var(--cp-primary)}.cd-dot.green{background:var(--cp-success)}.cd-dot.orange{background:var(--cp-orange)}.cd-dot.blue{background:var(--cp-info)}.cd-dot.violet{background:var(--cp-purple)}
.cd-status.good{background:#e5f6ef;color:var(--cp-success)}.cd-status.warn{background:#fff0e6;color:var(--cp-orange)}
.cd-table th{background:#f8f9fa;border-color:var(--cp-border);color:#5e6672}.cd-table td{border-color:#eff0f2;color:var(--cp-default)}
.cd-preview-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:6px;background:#fff4e6;color:#a84d00;border:1px solid #f5dbc7;font-size:10px;font-weight:700}
.cd-preview-badge svg{color:#e65100}
.cd-preview-note{display:flex;align-items:flex-start;gap:9px;background:#fff9f2;border:1px solid #f4e1cd;color:#7c4c23;border-radius:7px;padding:9px 11px;margin:0 0 10px;font-size:10.5px}

/* Reference chart canvas should feel airy and colorful, not heavy. */
.cd-chart{padding:5px 14px 14px}.cd-chart canvas{filter:saturate(1.08)}

@media(max-width:560px){.cd-kpi>b{font-size:19px}.cd-kpi{padding:12px}.cd-kpi-icon{width:32px;height:32px}}

/* Phase 25 — Reference Operational UI + 10% readability pass
   The reference template reads closer to a 14px base rhythm. Phase 24 was too compact,
   so Clarity Pro now scales typography/controls up while preserving dense ERP data capacity. */
body[data-theme="clarity-pro"]{font-size:14.3px;line-height:1.48}
body[data-theme="clarity-pro"] .brand h1{font-size:14.3px}
body[data-theme="clarity-pro"] .sidebar-search input{font-size:12.7px}
body[data-theme="clarity-pro"] .nav-title{font-size:10.8px;padding-top:9px;padding-bottom:6px}
body[data-theme="clarity-pro"] .nav-btn{font-size:12.7px;min-height:39px;padding:6px 9px}
body[data-theme="clarity-pro"] .nav-subitem{font-size:11.9px!important;min-height:32px!important;padding:4px 9px!important}
body[data-theme="clarity-pro"] .page-title{font-size:21px}
body[data-theme="clarity-pro"] .page-desc{font-size:12.7px;line-height:1.55}
body[data-theme="clarity-pro"] .breadcrumbs{font-size:11px}
body[data-theme="clarity-pro"] .card-title{font-size:14.3px}
body[data-theme="clarity-pro"] .card-sub{font-size:11.6px;line-height:1.45}
body[data-theme="clarity-pro"] .btn{min-height:37px;font-size:12.1px;padding-inline:12px}
body[data-theme="clarity-pro"] .btn.small{min-height:32px;font-size:11.4px;padding:6px 9px}
body[data-theme="clarity-pro"] input,body[data-theme="clarity-pro"] select,body[data-theme="clarity-pro"] textarea{font-size:13.3px;min-height:44px}
body[data-theme="clarity-pro"] .form-group label{font-size:11.7px!important}
body[data-theme="clarity-pro"] .field-help,body[data-theme="clarity-pro"] .section-help{font-size:11.5px;line-height:1.5}
body[data-theme="clarity-pro"] .section-title{font-size:14px}
body[data-theme="clarity-pro"] table thead th{font-size:11.6px;padding:12px 14px}
body[data-theme="clarity-pro"] table tbody td{font-size:12.7px;padding:13px 14px}
body[data-theme="clarity-pro"] .badge{font-size:10.8px}
body[data-theme="clarity-pro"] .stat .label{font-size:11.2px}
body[data-theme="clarity-pro"] .stat .value{font-size:clamp(24px,1vw + 18px,30px)}
body[data-theme="clarity-pro"] .stat .note{font-size:11.3px}

/* Dashboard typography — same +10% readability pass. */
body[data-theme="clarity-pro"] .cd-breadcrumb{font-size:11px}
body[data-theme="clarity-pro"] .cd-page-head h2{font-size:22px}
body[data-theme="clarity-pro"] .cd-page-head p{font-size:12.7px}
body[data-theme="clarity-pro"] .cd-date-chip,body[data-theme="clarity-pro"] .cd-chip{font-size:11.6px}
body[data-theme="clarity-pro"] .cd-dashboard-switcher a{font-size:11.9px;padding:8px 11px}
body[data-theme="clarity-pro"] .cd-welcome span{font-size:10px}
body[data-theme="clarity-pro"] .cd-welcome h3{font-size:19px}
body[data-theme="clarity-pro"] .cd-welcome p{font-size:12.2px}
body[data-theme="clarity-pro"] .cd-welcome-badge{font-size:11px}
body[data-theme="clarity-pro"] .cd-kpi-top{font-size:11.7px}
body[data-theme="clarity-pro"] .cd-kpi>b{font-size:24px}
body[data-theme="clarity-pro"] .cd-kpi small{font-size:11px}
body[data-theme="clarity-pro"] .cd-preview-badge{font-size:11px}
body[data-theme="clarity-pro"] .cd-preview-note{font-size:11.6px}

/* Reference operational-page language. These pages now share the same visual grammar as the
   specialist dashboards: clear page header, colourful summary cards, quiet filter bar, crisp data grid. */
body[data-theme="clarity-pro"].page-products,
body[data-theme="clarity-pro"].page-stock,
body[data-theme="clarity-pro"].page-procurement,
body[data-theme="clarity-pro"].page-production{--op-accent:var(--cp-primary);--op-soft:#eef8f6}
body[data-theme="clarity-pro"].page-procurement{--op-accent:#e65100;--op-soft:#fff4ed}
body[data-theme="clarity-pro"].page-production{--op-accent:#6a1b9a;--op-soft:#f7eff9}
body[data-theme="clarity-pro"].page-stock{--op-accent:#0ea5e9;--op-soft:#eef8fd}
body[data-theme="clarity-pro"].page-products .page-head,
body[data-theme="clarity-pro"].page-stock .page-head,
body[data-theme="clarity-pro"].page-procurement .page-head,
body[data-theme="clarity-pro"].page-production .page-head{margin-bottom:16px;align-items:flex-end}
body[data-theme="clarity-pro"].page-products .page-head>div:first-child,
body[data-theme="clarity-pro"].page-stock .page-head>div:first-child,
body[data-theme="clarity-pro"].page-procurement .page-head>div:first-child,
body[data-theme="clarity-pro"].page-production .page-head>div:first-child{position:relative;padding-left:13px}
body[data-theme="clarity-pro"].page-products .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-stock .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-procurement .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-production .page-head>div:first-child:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:9px;background:var(--op-accent)}

/* Reference-like colourful summary cards. */
body[data-theme="clarity-pro"] .stats{gap:12px;margin-bottom:16px}
body[data-theme="clarity-pro"] .stat{min-height:122px;padding:16px 17px;border-radius:8px;overflow:hidden;position:relative}
body[data-theme="clarity-pro"] .stat:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--stat-tone,#0f766e)}
body[data-theme="clarity-pro"] .stat-c1{--stat-tone:#0ea5e9;background:linear-gradient(135deg,#fff 34%,#eef8fd)}
body[data-theme="clarity-pro"] .stat-c2{--stat-tone:#059669;background:linear-gradient(135deg,#fff 34%,#edf9f3)}
body[data-theme="clarity-pro"] .stat-c3{--stat-tone:#6a1b9a;background:linear-gradient(135deg,#fff 34%,#f8f0fa)}
body[data-theme="clarity-pro"] .stat-c4{--stat-tone:#e65100;background:linear-gradient(135deg,#fff 34%,#fff4ed)}
body[data-theme="clarity-pro"] .stat-c1 .stat-icon{background:#0ea5e9;color:#fff}
body[data-theme="clarity-pro"] .stat-c2 .stat-icon{background:#059669;color:#fff}
body[data-theme="clarity-pro"] .stat-c3 .stat-icon{background:#6a1b9a;color:#fff}
body[data-theme="clarity-pro"] .stat-c4 .stat-icon{background:#e65100;color:#fff}
body[data-theme="clarity-pro"] .stat-icon{width:38px;height:38px;border-radius:7px;box-shadow:none}

/* Operational data cards and filter rows mirror the reference table cards. */
body[data-theme="clarity-pro"] .module-card{border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.025);overflow:hidden}
body[data-theme="clarity-pro"] .module-card>.card-head{padding:15px 16px;border-bottom:1px solid var(--cp-border)}
body[data-theme="clarity-pro"] .module-card>.toolbar{padding:11px 16px;background:#fafafa;border-bottom:1px solid var(--cp-border);gap:8px}
body[data-theme="clarity-pro"] .module-card>.toolbar input,
body[data-theme="clarity-pro"] .module-card>.toolbar select{min-height:38px;background:#fff}
body[data-theme="clarity-pro"] .module-card>.table-wrap{border:0;border-radius:0}
body[data-theme="clarity-pro"] .module-card table thead th{background:#f8f9fa;color:#505864;font-weight:700;text-transform:none;letter-spacing:0}
body[data-theme="clarity-pro"] .module-card table tbody tr:nth-child(even){background:#fdfdfd}
body[data-theme="clarity-pro"] .module-card table tbody tr:hover{background:#f4fbfa}
body[data-theme="clarity-pro"] .module-card .approval-actions{gap:6px;flex-wrap:nowrap}
body[data-theme="clarity-pro"] .module-card .approval-actions .btn.small{white-space:nowrap}
body[data-theme="clarity-pro"] .module-card .correction-btn{background:#f5ecf7;border-color:#ead9ee;color:#6a1b9a}
body[data-theme="clarity-pro"] .module-card .correction-btn:hover{background:#6a1b9a;border-color:#6a1b9a;color:#fff}
body[data-theme="clarity-pro"] .btn.warning{background:#fff2e9;border-color:#f5d6c3;color:#b44b00}
body[data-theme="clarity-pro"] .btn.warning:hover{background:#e65100;border-color:#e65100;color:#fff}
body[data-theme="clarity-pro"] .pagination{padding:12px 16px;border-top:1px solid var(--cp-border);background:#fafafa}

/* Product form: reference-style type cards and section hierarchy. */
body[data-theme="clarity-pro"].page-product_form .card{border-radius:8px}
body[data-theme="clarity-pro"].page-product_form .type-pick-grid{gap:12px}
body[data-theme="clarity-pro"].page-product_form .type-pick{border:1px solid var(--cp-border);border-radius:8px;background:#fff;padding:15px;transition:.15s ease}
body[data-theme="clarity-pro"].page-product_form .type-pick:nth-child(1){background:#eef8f6;border-color:#d7ebe7}
body[data-theme="clarity-pro"].page-product_form .type-pick:nth-child(2){background:#eef8fd;border-color:#d9edf7}
body[data-theme="clarity-pro"].page-product_form .type-pick:nth-child(3){background:#f8f0fa;border-color:#ead9ee}
body[data-theme="clarity-pro"].page-product_form .type-pick:hover{border-color:var(--cp-primary);box-shadow:0 4px 12px rgba(15,23,42,.05);transform:none}
body[data-theme="clarity-pro"].page-product_form .section-box{border-radius:8px!important;border-left:3px solid var(--cp-primary)!important;background:#fbfcfc}

/* Stock Control Center: make equation and warehouse cards easier to scan. */
body[data-theme="clarity-pro"].page-stock .inventory-equation,
body[data-theme="clarity-pro"].page-stock .stock-correction-banner{border-radius:8px!important}
body[data-theme="clarity-pro"].page-stock .card-head{min-height:58px}

/* Procurement has many cards; visually index procurement/request/matching layers without loud backgrounds. */
body[data-theme="clarity-pro"].page-procurement .module-card:nth-of-type(4n+1)>.card-head{box-shadow:inset 3px 0 #0f766e}
body[data-theme="clarity-pro"].page-procurement .module-card:nth-of-type(4n+2)>.card-head{box-shadow:inset 3px 0 #0ea5e9}
body[data-theme="clarity-pro"].page-procurement .module-card:nth-of-type(4n+3)>.card-head{box-shadow:inset 3px 0 #6a1b9a}
body[data-theme="clarity-pro"].page-procurement .module-card:nth-of-type(4n)>.card-head{box-shadow:inset 3px 0 #e65100}

/* Embedded Manufacturing V2 adopts the same scale and reference palette. */
body[data-theme="clarity-pro"] .mfg-shell{color:var(--cp-default)}
body[data-theme="clarity-pro"] .mfg-top{border-color:var(--cp-border)!important;background:#fff!important;border-radius:8px!important}
body[data-theme="clarity-pro"] .mfg-top h1,body[data-theme="clarity-pro"] .mfg-top h2{color:var(--cp-title)!important;font-size:23px!important}
body[data-theme="clarity-pro"] .mfg-card{border-radius:8px!important;border-color:var(--cp-border)!important;box-shadow:0 1px 2px rgba(15,23,42,.025)!important}
body[data-theme="clarity-pro"] .mfg-card .form-group label{font-size:12.2px!important}
body[data-theme="clarity-pro"] .mfg-card input,body[data-theme="clarity-pro"] .mfg-card select,body[data-theme="clarity-pro"] .mfg-card textarea{font-size:14px!important}
body[data-theme="clarity-pro"] .mfg-tabs{border-radius:8px!important;background:#f8f9fa!important;border-color:var(--cp-border)!important}
body[data-theme="clarity-pro"] .mfg-tabs a{font-size:12.4px!important;border-radius:6px!important}
body[data-theme="clarity-pro"] .mfg-tabs a.active{background:var(--cp-primary)!important;color:#fff!important;box-shadow:none!important}
body[data-theme="clarity-pro"] .mfg-status{font-size:12px!important}
body[data-theme="clarity-pro"] .mfg-subcard,body[data-theme="clarity-pro"] .mfg-material-row,body[data-theme="clarity-pro"] .mfg-op{border-radius:8px!important;border-color:var(--cp-border)!important;background:#fafafa!important}
body[data-theme="clarity-pro"] .mfg-bar span{background:linear-gradient(90deg,#0f766e,#059669)!important}

@media(max-width:760px){
 body[data-theme="clarity-pro"]{font-size:14px}
 body[data-theme="clarity-pro"] .nav-btn{font-size:13px}
 body[data-theme="clarity-pro"] .page-title{font-size:20px}
 body[data-theme="clarity-pro"] table tbody td{font-size:12.8px}
 body[data-theme="clarity-pro"] .module-card .approval-actions{flex-wrap:wrap}
}

/* Phase 25 finishing details — theme picker and semantic badge fidelity. */
.theme-pick-clarity-pro .theme-pick-swatch i:nth-child(1){background:#0f766e;border:0}
.theme-pick-clarity-pro .theme-pick-swatch i:nth-child(2){background:#0ea5e9;border:0}
.theme-pick-clarity-pro .theme-pick-swatch i:nth-child(3){background:#e65100;border:0}
body[data-theme="clarity-pro"] .badge.success{background:#e7f6ef;color:#059669}
body[data-theme="clarity-pro"] .badge.info{background:#eaf7fd;color:#087fb4}
body[data-theme="clarity-pro"] .badge.warning{background:#fff0e6;color:#c04c00}
body[data-theme="clarity-pro"] .badge.danger{background:#fdecee;color:#b91c1c}
body[data-theme="clarity-pro"] .badge.purple{background:#f5ecf7;color:#6a1b9a}
body[data-theme="clarity-pro"] .badge.gold{background:#fff6df;color:#9a6500}


/* Phase 27 — Reference Fidelity + Stable Navigation
   The reference ERP is the visual source of truth: white cards, #0f766e primary,
   small radii, light borders, restrained shadows, colorful icon tiles and stable spacing. */
html{overflow-y:scroll}
@supports (scrollbar-gutter:stable){html{overflow-y:auto;scrollbar-gutter:stable}}
body[data-theme="clarity-pro"]{
  --cp-primary:#0f766e;--cp-primary-hover:#0b5f59;--cp-success:#10a06f;--cp-orange:#f05a00;
  --cp-info:#12a8e0;--cp-purple:#7419a8;--cp-pink:#d321b3;--cp-danger:#c43131;
  --cp-title:#172033;--cp-default:#5f6977;--cp-muted:#9299a4;--cp-border:#e4e7eb;--cp-light:#f6f7f9;
  --cp-card-shadow:0 1px 2px rgba(15,23,42,.025);
  background:var(--cp-light);
}
body[data-theme="clarity-pro"] .layout{grid-template-columns:242px minmax(0,1fr);align-items:start}
body[data-theme="clarity-pro"] .main{
  min-width:0;min-height:calc(100vh - 60px);padding:18px 18px 58px;background:var(--cp-light);
  transform-origin:50% 0;
}
body[data-theme="clarity-pro"] .page-head,
body[data-theme="clarity-pro"] .cd-page-head{min-height:70px;box-sizing:border-box}
body[data-theme="clarity-pro"] .page-head{margin-bottom:14px}
body[data-theme="clarity-pro"] .head-actions{align-self:flex-start}
body[data-theme="clarity-pro"] .card,
body[data-theme="clarity-pro"] .stat,
body[data-theme="clarity-pro"] .cd-card,
body[data-theme="clarity-pro"] .module-card{
  border:1px solid var(--cp-border);border-radius:7px;background:#fff;box-shadow:var(--cp-card-shadow);
}
body[data-theme="clarity-pro"] .card:hover,
body[data-theme="clarity-pro"] .stat:hover,
body[data-theme="clarity-pro"] .cd-card:hover,
body[data-theme="clarity-pro"] .module-card:hover{transform:none}
body[data-theme="clarity-pro"] .btn{border-radius:6px}
body[data-theme="clarity-pro"] .btn.primary{background:var(--cp-primary);border-color:var(--cp-primary)}
body[data-theme="clarity-pro"] .btn.primary:hover{background:var(--cp-primary-hover);border-color:var(--cp-primary-hover)}
body[data-theme="clarity-pro"] table{font-variant-numeric:tabular-nums}
body[data-theme="clarity-pro"] table thead th{background:#fafafa;color:#4f5865;font-weight:650}
body[data-theme="clarity-pro"] table tbody tr:hover{background:#f7fbfa}

/* Dashboard switcher belongs to the sidebar on desktop, like the reference template. */
body[data-theme="clarity-pro"] .cd-dashboard-switcher{display:none}
@media(max-width:880px){body[data-theme="clarity-pro"] .cd-dashboard-switcher{display:flex}}

/* Dashboard spacing / typography tuned against the supplied reference screenshots. */
body[data-theme="clarity-pro"].page-dashboard .main{padding-top:14px}
body[data-theme="clarity-pro"] .cd-shell{max-width:1680px}
body[data-theme="clarity-pro"] .cd-page-head{align-items:center;margin-bottom:14px}
body[data-theme="clarity-pro"] .cd-page-head h2{font-size:21px;font-weight:700;letter-spacing:-.018em}
body[data-theme="clarity-pro"] .cd-page-head p{font-size:12.5px;margin-top:5px}
body[data-theme="clarity-pro"] .cd-breadcrumb{font-size:11px}
body[data-theme="clarity-pro"] .cd-date-chip,
body[data-theme="clarity-pro"] .cd-chip{font-size:11.5px;padding:7px 10px}
body[data-theme="clarity-pro"] .cd-grid{gap:12px;margin-bottom:12px}
body[data-theme="clarity-pro"] .cd-kpi-grid{gap:10px;margin-bottom:12px}
body[data-theme="clarity-pro"] .cd-card-head{padding:14px 14px 9px}
body[data-theme="clarity-pro"] .cd-card-head h3{font-size:14px;font-weight:700}
body[data-theme="clarity-pro"] .cd-card-head p{font-size:10.8px}
body[data-theme="clarity-pro"] .cd-card-head>a{font-size:10.8px;padding:5px 9px;border-radius:6px}
body[data-theme="clarity-pro"] .cd-chart{height:258px;padding:8px 14px 14px}
body[data-theme="clarity-pro"] .cd-chart-ref{height:275px}
body[data-theme="clarity-pro"] .cd-chart-hero{height:300px}
body[data-theme="clarity-pro"] .cd-chart-wide{height:285px}

/* KPI cards: reference uses plain white surfaces and a right-side solid icon, not rails. */
body[data-theme="clarity-pro"] .cd-kpi{
  min-height:104px;padding:14px 14px 13px;border-radius:7px;border:1px solid var(--cp-border);
  box-shadow:var(--cp-card-shadow);background:#fff;transition:border-color .15s ease,box-shadow .15s ease;
}
body[data-theme="clarity-pro"] .cd-kpi:before,
body[data-theme="clarity-pro"] .cd-kpi:after{display:none!important}
body[data-theme="clarity-pro"] .cd-kpi:hover{transform:none;border-color:#d8dce1;box-shadow:0 3px 9px rgba(15,23,42,.04)}
body[data-theme="clarity-pro"] .cd-kpi-top{font-size:11.5px;color:#707987}
body[data-theme="clarity-pro"] .cd-kpi-icon{width:36px;height:36px;border-radius:6px}
body[data-theme="clarity-pro"] .cd-kpi>b{font-size:23px;line-height:1.08;margin-top:7px}
body[data-theme="clarity-pro"] .cd-kpi small{font-size:10.7px;margin-top:6px}

/* Specialist-dashboard layouts modeled on the supplied Dreams ERP screenshots. */
.cd-sales-hero{grid-template-columns:minmax(0,2.1fr) minmax(290px,.9fr)}
.cd-inventory-hero{grid-template-columns:minmax(190px,.62fr) minmax(0,1.08fr) minmax(0,1.34fr);align-items:stretch}
.cd-grid-3-equal{grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-finance-insights{grid-template-columns:minmax(220px,.85fr) minmax(0,1.65fr) minmax(220px,.85fr)}
.cd-ref-wide{margin-bottom:12px}
.cd-ref-mid{align-items:stretch}
.cd-metric-stack{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-width:0}
.cd-spark-card{min-height:132px;padding:13px 14px 8px;overflow:hidden}
.cd-spark-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cd-spark-top span{display:block;color:#7d8692;font-size:11px}
.cd-spark-top b{display:block;color:var(--cp-title);font-size:22px;line-height:1.08;margin-top:3px}
.cd-spark-top small{display:block;color:#8b939f;font-size:10px;margin-top:4px}
.cd-spark{height:58px;margin-top:2px}
.cd-solid-green{background:#059669!important;color:#fff!important}
.cd-solid-orange{background:#f05a00!important;color:#fff!important}
.cd-sales-overview{padding:7px 16px 16px}
.cd-sales-overview>div:first-child span{display:block;font-size:11px;color:#7b8490}
.cd-sales-overview>div:first-child b{display:block;margin-top:5px;color:var(--cp-title);font-size:28px;letter-spacing:-.025em}
.cd-sales-overview>div:first-child small{display:block;margin-top:3px;color:#7e8793;font-size:10.5px}
.cd-overview-progress{height:8px;border-radius:99px;background:#e8eeec;margin:17px 0 12px;overflow:hidden}
.cd-overview-progress i{display:block;height:100%;border-radius:inherit;background:#0f8f73}
.cd-overview-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-overview-pair span{padding:10px;border:1px solid #e6e8eb;border-radius:6px;background:#fafafa}
.cd-overview-pair small{display:block;color:#858d98;font-size:9.8px}
.cd-overview-pair b{display:block;color:#293341;font-size:13px;margin-top:3px}
.cd-spark-kpis .cd-kpi{padding-bottom:14px}

/* Reference list/table density. */
body[data-theme="clarity-pro"] .cd-list-table{padding:3px 14px 12px}
body[data-theme="clarity-pro"] .cd-list-table>div{padding:10px 0}
body[data-theme="clarity-pro"] .cd-list-table>div>span b{font-size:11.5px}
body[data-theme="clarity-pro"] .cd-list-table small{font-size:10px}
body[data-theme="clarity-pro"] .cd-table-wrap{padding:0 12px 12px}
body[data-theme="clarity-pro"] .cd-table th{padding:10px 9px;font-size:10.3px;font-weight:650}
body[data-theme="clarity-pro"] .cd-table td{padding:11px 9px;font-size:11px}

/* Stable workspace and embedded-module geometry. */
body[data-theme="clarity-pro"] .workspace-page-head{min-height:72px;margin-bottom:12px}
body[data-theme="clarity-pro"] .workspace-frame-shell{
  height:calc(100vh - 178px);min-height:620px;border-radius:8px;border-color:var(--cp-border);box-shadow:none;background:#fff;
}
body[data-theme="clarity-pro"] .workspace-frame{background:#f7f8fa}

/* Smooth navigation. No large slide/scale that could make a business app feel slow. */
@keyframes cpPageIn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
body[data-theme="clarity-pro"].cp-page-enter .main{animation:cpPageIn .18s ease-out both}
body[data-theme="clarity-pro"].cp-page-leaving .main{opacity:.25;transform:translateY(-3px);transition:opacity .09s ease,transform .09s ease}
body[data-theme="clarity-pro"] .main{transition:opacity .09s ease,transform .09s ease}

/* Browser compatibility: visual enhancement may degrade, layout/interactions must not. */
@supports not (backdrop-filter:blur(1px)){
  .topbar,.admin-topbar{background:#fff!important}
}
@supports not (scrollbar-gutter:stable){
  html{overflow-y:scroll}
}
@media(max-width:1180px){
  .cd-inventory-hero{grid-template-columns:1fr 1fr}.cd-metric-stack{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .cd-sales-hero,.cd-finance-insights{grid-template-columns:1fr 1fr}.cd-sales-hero .cd-span-2,.cd-finance-insights .cd-span-2{grid-column:1/-1}
  .cd-grid-3-equal{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body[data-theme="clarity-pro"] .page-head,body[data-theme="clarity-pro"] .cd-page-head{min-height:0}
  .cd-inventory-hero,.cd-sales-hero,.cd-grid-3-equal,.cd-finance-insights{grid-template-columns:1fr}
  .cd-metric-stack{grid-template-columns:1fr}
  body[data-theme="clarity-pro"] .workspace-frame-shell{height:calc(100vh - 198px);min-height:520px}
}

/* Respect OS accessibility preferences and remove transition delays entirely. */
@media(prefers-reduced-motion:reduce){
  body[data-theme="clarity-pro"].cp-page-enter .main{animation:none}
  body[data-theme="clarity-pro"].cp-page-leaving .main,
  body[data-theme="clarity-pro"] .main{transition:none!important;transform:none!important}
  body[data-theme="clarity-pro"] *,body[data-theme="clarity-pro"] *:before,body[data-theme="clarity-pro"] *:after{scroll-behavior:auto!important}
}


/* Phase 27 — standalone/integrated operational modules use the same reference component language. */
body[data-theme="clarity-pro"] .ast-wrap,
body[data-theme="clarity-pro"] .plan-wrap,
body[data-theme="clarity-pro"] .qm-wrap,
body[data-theme="clarity-pro"] .xec-shell,
body[data-theme="clarity-pro"] .app-shell>.content{
  max-width:1660px!important;margin:0 auto!important;padding:18px!important;color:var(--cp-default);
}
body[data-theme="clarity-pro"] .ast-top,
body[data-theme="clarity-pro"] .plan-top,
body[data-theme="clarity-pro"] .qm-top,
body[data-theme="clarity-pro"] .xec-top{
  background:#fff!important;border:1px solid var(--cp-border)!important;border-radius:7px!important;box-shadow:var(--cp-card-shadow)!important;
  padding:14px 15px!important;margin-bottom:12px!important;
}
body[data-theme="clarity-pro"] .ast-card,
body[data-theme="clarity-pro"] .plan-card,
body[data-theme="clarity-pro"] .qm-card,
body[data-theme="clarity-pro"] .xec-card{
  background:#fff!important;border:1px solid var(--cp-border)!important;border-radius:7px!important;box-shadow:var(--cp-card-shadow)!important;
}
body[data-theme="clarity-pro"] .ast-tabs,
body[data-theme="clarity-pro"] .plan-tabs,
body[data-theme="clarity-pro"] .qm-tabs,
body[data-theme="clarity-pro"] .acct-tabs{
  gap:5px!important;background:#fff!important;border:1px solid var(--cp-border)!important;border-radius:7px!important;padding:5px!important;
}
body[data-theme="clarity-pro"] .ast-tabs a,
body[data-theme="clarity-pro"] .plan-tabs a,
body[data-theme="clarity-pro"] .qm-tabs a,
body[data-theme="clarity-pro"] .acct-tabs a{
  border:0!important;border-radius:5px!important;padding:8px 10px!important;color:#5f6977!important;background:transparent!important;
}
body[data-theme="clarity-pro"] .ast-tabs a.active,
body[data-theme="clarity-pro"] .plan-tabs a.active,
body[data-theme="clarity-pro"] .qm-tabs a.active,
body[data-theme="clarity-pro"] .acct-tabs a.active{
  background:var(--cp-primary)!important;color:#fff!important;
}
body[data-theme="clarity-pro"] .ast-table,
body[data-theme="clarity-pro"] .plan-table,
body[data-theme="clarity-pro"] .qm-table{
  border-collapse:collapse!important;width:100%!important;
}
body[data-theme="clarity-pro"] .ast-table th,
body[data-theme="clarity-pro"] .plan-table th,
body[data-theme="clarity-pro"] .qm-table th{
  background:#fafafa!important;color:#505965!important;border-color:#e8eaed!important;font-size:11.5px!important;
}
body[data-theme="clarity-pro"] .ast-table td,
body[data-theme="clarity-pro"] .plan-table td,
body[data-theme="clarity-pro"] .qm-table td{
  border-color:#eff0f2!important;font-size:12.5px!important;
}
body[data-theme="clarity-pro"] .ast-pill,
body[data-theme="clarity-pro"] .qm-pill,
body[data-theme="clarity-pro"] .type-pill,
body[data-theme="clarity-pro"] .xec-badge{border-radius:5px!important}
body[data-theme="clarity-pro"] .xec-kpis{gap:10px!important}
body[data-theme="clarity-pro"] .xec-kpi{
  border:1px solid var(--cp-border)!important;border-radius:7px!important;background:#fff!important;box-shadow:var(--cp-card-shadow)!important;
}
body[data-theme="clarity-pro"] .xec-kpi-icon{border-radius:6px!important}
body[data-theme="clarity-pro"] .xec-chart{min-height:260px!important}
body[data-theme="clarity-pro"] .ast-wrap,
body[data-theme="clarity-pro"] .plan-wrap,
body[data-theme="clarity-pro"] .qm-wrap,
body[data-theme="clarity-pro"] .xec-shell,
body[data-theme="clarity-pro"] .app-shell>.content{animation:cpPageIn .18s ease-out both}

/* Main module families not covered by Phase 25 get matching accents/hierarchy. */
body[data-theme="clarity-pro"].page-sales{--op-accent:#059669;--op-soft:#edf9f3}
body[data-theme="clarity-pro"].page-accounts{--op-accent:#6a1b9a;--op-soft:#f7eff9}
body[data-theme="clarity-pro"].page-hr,
body[data-theme="clarity-pro"].page-payroll{--op-accent:#cc25b0;--op-soft:#fbf1fb}
body[data-theme="clarity-pro"].page-suppliers{--op-accent:#0ea5e9;--op-soft:#eef8fd}
body[data-theme="clarity-pro"].page-warehouses{--op-accent:#0f766e;--op-soft:#eef8f6}
body[data-theme="clarity-pro"].page-equipment{--op-accent:#e65100;--op-soft:#fff4ed}
body[data-theme="clarity-pro"].page-sales .page-head>div:first-child,
body[data-theme="clarity-pro"].page-accounts .page-head>div:first-child,
body[data-theme="clarity-pro"].page-hr .page-head>div:first-child,
body[data-theme="clarity-pro"].page-payroll .page-head>div:first-child,
body[data-theme="clarity-pro"].page-suppliers .page-head>div:first-child,
body[data-theme="clarity-pro"].page-warehouses .page-head>div:first-child,
body[data-theme="clarity-pro"].page-equipment .page-head>div:first-child{
  position:relative;padding-left:13px
}
body[data-theme="clarity-pro"].page-sales .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-accounts .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-hr .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-payroll .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-suppliers .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-warehouses .page-head>div:first-child:before,
body[data-theme="clarity-pro"].page-equipment .page-head>div:first-child:before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:5px;background:var(--op-accent)
}

/* Prevent hover motion from moving surrounding pixels on dense operational screens. */
body[data-theme="clarity-pro"] .type-pick:hover,
body[data-theme="clarity-pro"] .module-card:hover,
body[data-theme="clarity-pro"] .stat:hover,
body[data-theme="clarity-pro"] .btn:hover{transform:none!important}

@media(max-width:880px){
  body[data-theme="clarity-pro"] .ast-wrap,
  body[data-theme="clarity-pro"] .plan-wrap,
  body[data-theme="clarity-pro"] .qm-wrap,
  body[data-theme="clarity-pro"] .xec-shell,
  body[data-theme="clarity-pro"] .app-shell>.content{padding:12px!important}
}

/* Phase 27 fidelity correction — Dreams ERP keeps primary navigation dark while actions stay teal. */
body[data-theme="clarity-pro"] .nav-btn.active:not(.nav-subitem){background:#172033!important;color:#fff!important}
body[data-theme="clarity-pro"] .nav-btn.active:not(.nav-subitem) .nav-icon{color:#fff!important}
body[data-theme="clarity-pro"] .nav-subitem.active{background:#edf7f6!important;color:#0f766e!important;border-left-color:#0f766e!important}

/* Compatibility classes applied by JS when :has()/color-mix are unavailable or inconsistent. */
.stats.stats-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.stats-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.type-pick.is-checked{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,118,110,.14)}
.theme-pick.is-active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,118,110,.14)}

/* Progressive cross-document navigation animation where the browser supports it. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:cp-vt-out .09s ease both}
::view-transition-new(root){animation:cp-vt-in .17s ease-out both}
@keyframes cp-vt-out{to{opacity:.25;transform:translateY(-2px)}}
@keyframes cp-vt-in{from{opacity:.22;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* HRM dashboard structure follows the supplied reference: workforce hero + four compact metrics. */
.cd-hr-hero{grid-template-columns:minmax(300px,.95fr) minmax(0,2.05fr);align-items:stretch}
.cd-hr-workforce{min-height:156px}.cd-hr-workforce .cd-card-head{align-items:flex-start}.cd-hr-workforce-body{padding:1px 15px 15px}.cd-hr-workforce-body>b{display:block;font-size:32px;line-height:1;color:var(--cp-title);letter-spacing:-.035em}.cd-hr-workforce-body>span{display:inline-flex;align-items:center;gap:5px;margin-top:11px;font-size:10.5px;color:#0f766e;background:#edf7f6;border-radius:5px;padding:5px 7px}
.cd-hr-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.cd-hr-mini{padding:13px;min-height:156px;text-decoration:none;color:inherit;position:relative;overflow:hidden}.cd-hr-mini>span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#687281}.cd-hr-mini>b{display:block;font-size:20px;color:var(--cp-title);margin-top:13px;letter-spacing:-.025em}.cd-hr-mini>small{display:block;font-size:9.7px;color:#9097a2;margin-top:5px}.cd-hr-mini:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px}.cd-hr-green:after{background:#059669}.cd-hr-orange:after{background:#e65100}.cd-hr-blue:after{background:#0ea5e9}.cd-hr-purple:after{background:#6a1b9a}
.cd-run-payroll{background:linear-gradient(145deg,#103d3a,#0f766e)!important;border-color:#0f766e!important;color:#fff!important}.cd-run-payroll .cd-card-head h3,.cd-run-payroll .cd-card-head p{color:#fff!important}.cd-run-payroll .cd-card-head p{opacity:.72}.cd-run-payroll .cd-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}.cd-payroll-action{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;padding:16px}.cd-payroll-action span{font-size:10.5px;opacity:.72}.cd-payroll-action b{display:block;font-size:30px;margin:7px 0;color:#fff}.cd-payroll-action small{display:block;max-width:360px;font-size:10.5px;line-height:1.6;opacity:.76}.cd-run-payroll .btn.primary{align-self:flex-start;background:#fff!important;border-color:#fff!important;color:#0f766e!important;margin-top:18px}.cd-inline-chart-head{border-top:1px solid #eef0f2;margin-top:5px;padding-top:12px!important}.cd-payroll-summary .cd-payroll-kpi{padding:6px 15px 13px}.cd-payroll-kpi>b{display:block;font-size:28px;color:var(--cp-title)}.cd-payroll-kpi>span{display:block;color:#89919c;font-size:10px;margin-top:4px}
@media(max-width:1180px){.cd-hr-hero{grid-template-columns:1fr}.cd-hr-mini-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cd-hr-mini-grid{grid-template-columns:1fr 1fr}.cd-hr-mini{min-height:126px}}

/* Phase 28 — Reference micro-polish, contrast safety, softer charts and async work queues. */
body[data-theme="clarity-pro"]{
  --cp-primary:#0f766e;--cp-primary-hover:#0c6760;--cp-success:#059669;--cp-warning:#d97706;
  --cp-danger:#b91c1c;--cp-info:#0ea5e9;--cp-orange:#e65100;--cp-purple:#6a1b9a;--cp-pink:#cc25b0;
  --cp-dark:#1e293b;--cp-title:#2f3a4b;--cp-default:#67707d;--cp-muted:#9096a1;--cp-border:#e7e9ec;--cp-light:#f8f9fa;
  background:var(--cp-light);color:var(--cp-default);
}
body[data-theme="clarity-pro"] .main{padding:20px 20px 64px;background:var(--cp-light)}
body[data-theme="clarity-pro"] .page-title,body[data-theme="clarity-pro"] .cd-page-head h2{color:var(--cp-title)}
body[data-theme="clarity-pro"] .page-desc,body[data-theme="clarity-pro"] .card-sub,body[data-theme="clarity-pro"] .cell-sub{color:var(--cp-default)}
body[data-theme="clarity-pro"] .card,body[data-theme="clarity-pro"] .stat,body[data-theme="clarity-pro"] .cd-card,body[data-theme="clarity-pro"] .module-card{border-color:var(--cp-border);border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.035)}
body[data-theme="clarity-pro"] .card-head,body[data-theme="clarity-pro"] .cd-card-head{min-height:54px}
body[data-theme="clarity-pro"] .card-title,body[data-theme="clarity-pro"] .cd-card-head h3{color:var(--cp-title);font-weight:700}
body[data-theme="clarity-pro"] .btn{border-radius:6px;min-height:36px;font-size:12.5px}
body[data-theme="clarity-pro"] .btn.small{min-height:31px;font-size:11.5px;padding:5px 9px}
body[data-theme="clarity-pro"] .btn.primary{background:var(--cp-primary)!important;border-color:var(--cp-primary)!important;color:#fff!important}
body[data-theme="clarity-pro"] .btn.primary:hover{background:var(--cp-primary-hover)!important;border-color:var(--cp-primary-hover)!important;color:#fff!important}
body[data-theme="clarity-pro"] .btn.danger{background:#fff!important;border-color:#efc8c8!important;color:var(--cp-danger)!important}
body[data-theme="clarity-pro"] .btn.danger:hover{background:var(--cp-danger)!important;border-color:var(--cp-danger)!important;color:#fff!important}
body[data-theme="clarity-pro"] .btn.warning{background:#fff7ed!important;border-color:#f4d5b7!important;color:#b85b20!important}
body[data-theme="clarity-pro"] .btn.warning:hover{background:var(--cp-orange)!important;border-color:var(--cp-orange)!important;color:#fff!important}
body[data-theme="clarity-pro"] .badge,body[data-theme="clarity-pro"] .cd-status{border:0;font-weight:650}
body[data-theme="clarity-pro"] .badge.success,body[data-theme="clarity-pro"] .cd-status.good{background:#e9f7f1!important;color:#047857!important}
body[data-theme="clarity-pro"] .badge.warning,body[data-theme="clarity-pro"] .cd-status.warn{background:#fff1e7!important;color:#b45309!important}
body[data-theme="clarity-pro"] .badge.danger{background:#fdecec!important;color:#a31717!important}
body[data-theme="clarity-pro"] .badge.info{background:#eaf7fd!important;color:#087fb4!important}
body[data-theme="clarity-pro"] .badge.purple{background:#f4ecf7!important;color:#6a1b9a!important}

/* Reference dashboard proportions — larger, cleaner cards with no decorative rails. */
body[data-theme="clarity-pro"] .cd-shell{max-width:1700px}
body[data-theme="clarity-pro"] .cd-kpi-grid,body[data-theme="clarity-pro"] .cd-grid{gap:14px;margin-bottom:14px}
body[data-theme="clarity-pro"] .cd-kpi{min-height:116px;padding:16px 16px 14px;border-radius:8px;border:1px solid var(--cp-border);box-shadow:0 1px 4px rgba(0,0,0,.03);transition:border-color .15s ease,box-shadow .15s ease}
body[data-theme="clarity-pro"] .cd-kpi:before,body[data-theme="clarity-pro"] .cd-kpi:after{display:none!important}
body[data-theme="clarity-pro"] .cd-kpi:hover{transform:none;box-shadow:0 3px 10px rgba(30,41,59,.06);border-color:#d9dde2}
body[data-theme="clarity-pro"] .cd-kpi-top{font-size:12px;color:#67707d}
body[data-theme="clarity-pro"] .cd-kpi>b{font-size:25px;color:#2f3a4b;margin-top:10px}
body[data-theme="clarity-pro"] .cd-kpi small{font-size:11px;color:#7b838f}
body[data-theme="clarity-pro"] .cd-kpi-icon{width:38px;height:38px;border-radius:8px;background:var(--tone,var(--cp-primary))!important;color:#fff!important}
body[data-theme="clarity-pro"] .cd-kpi-icon svg,body[data-theme="clarity-pro"] .cd-solid-green svg,body[data-theme="clarity-pro"] .cd-solid-orange svg{color:#fff!important;stroke:#fff!important}
body[data-theme="clarity-pro"] .cd-card-head{padding:15px 16px 10px}
body[data-theme="clarity-pro"] .cd-card-head h3{font-size:14px;color:#2f3a4b}
body[data-theme="clarity-pro"] .cd-card-head p{font-size:11px;color:#7b838f;margin-top:4px}
body[data-theme="clarity-pro"] .cd-card-head>a{font-size:11px;padding:6px 9px;border-color:#e5e7eb;color:#545d6c}
body[data-theme="clarity-pro"] .cd-chart{height:278px;padding:8px 16px 16px}
body[data-theme="clarity-pro"] .cd-chart-ref{height:292px}
body[data-theme="clarity-pro"] .cd-chart-hero{height:318px}
body[data-theme="clarity-pro"] .cd-chart-wide{height:304px}
body[data-theme="clarity-pro"] .cd-chart-sm{height:175px}
body[data-theme="clarity-pro"] .cd-chart canvas{filter:none}
body[data-theme="clarity-pro"] .cd-list-table{padding:4px 16px 13px}
body[data-theme="clarity-pro"] .cd-list-table>div{padding:11px 0}
body[data-theme="clarity-pro"] .cd-list-table b{font-size:12px;color:#414b5b}
body[data-theme="clarity-pro"] .cd-list-table small{font-size:10.5px;color:#7b838f}
body[data-theme="clarity-pro"] .cd-table-wrap{padding:0 16px 15px}
body[data-theme="clarity-pro"] .cd-table th{padding:10px 11px;font-size:10.5px;background:#f8f9fa;color:#67707d}
body[data-theme="clarity-pro"] .cd-table td{padding:11px;font-size:11.5px;color:#545d6c}
body[data-theme="clarity-pro"] .cd-summary-boxes>div,body[data-theme="clarity-pro"] .cd-attendance-grid>div,body[data-theme="clarity-pro"] .cd-overview-pair span{border-radius:7px}

/* Keep colored surfaces readable even after browser/theme inheritance. */
body[data-theme="clarity-pro"] .cd-run-payroll,body[data-theme="clarity-pro"] .cd-welcome-badge{color:#fff!important}
body[data-theme="clarity-pro"] .cd-run-payroll h3,body[data-theme="clarity-pro"] .cd-run-payroll p,body[data-theme="clarity-pro"] .cd-run-payroll span,body[data-theme="clarity-pro"] .cd-run-payroll small,body[data-theme="clarity-pro"] .cd-run-payroll b{color:#fff!important}
body[data-theme="clarity-pro"] .cd-module-card svg,body[data-theme="clarity-pro"] .cd-kpi-icon svg{opacity:1!important}

/* Doughnut charts keep standard card overflow; Chart.js legend stays inside the canvas, so no :has() dependency is needed. */
/* Async decision feedback. */
.erp-toast-stack{position:fixed;right:22px;top:76px;z-index:99999;display:grid;gap:9px;width:min(380px,calc(100vw - 28px));pointer-events:none}
.erp-toast{pointer-events:auto;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:11px 12px;background:#fff;border:1px solid #e6e9ed;border-radius:8px;box-shadow:0 10px 28px rgba(30,41,59,.13);color:#545d6c}
.erp-toast-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;background:#e9f7f1;color:#059669}
.erp-toast.error .erp-toast-icon{background:#fdecec;color:#b91c1c}.erp-toast.warning .erp-toast-icon{background:#fff1e7;color:#d97706}
.erp-toast b{display:block;font-size:12px;color:#2f3a4b}.erp-toast div>span{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:#67707d}
.erp-toast button{border:0;background:transparent;color:#9096a1;font-size:20px;line-height:1;cursor:pointer;padding:0}
.async-busy{opacity:.82}.async-busy button{cursor:wait}

/* Demo Preview identity chips: visual only; no database records are created. */
.cd-demo-avatar{display:inline-grid!important;place-items:center;width:27px;height:27px;min-width:27px;border-radius:7px;margin-right:8px;background:#d7e5e3;color:#0f766e;font-size:9.5px;font-weight:800;vertical-align:middle}
.cd-demo-avatar.tone-1{background:#fce7dc;color:#e65100}.cd-demo-avatar.tone-2{background:#e4f4fb;color:#0ea5e9}.cd-demo-avatar.tone-3{background:#efe5f2;color:#6a1b9a}.cd-demo-avatar.tone-4{background:#e5f4ec;color:#059669}.cd-demo-avatar.tone-5{background:#f8e4f4;color:#cc25b0}

@media(max-width:880px){body[data-theme="clarity-pro"] .main{padding:14px 12px 56px}.erp-toast-stack{right:14px;top:68px}.cd-kpi-grid.cd-kpi-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){body[data-theme="clarity-pro"] .cd-kpi{min-height:104px;padding:13px}.cd-kpi-grid.cd-kpi-4,.cd-kpi-grid.cd-kpi-5{grid-template-columns:1fr 1fr}.erp-toast{grid-template-columns:30px minmax(0,1fr) 20px}.erp-toast-icon{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.erp-toast,.approval-card,tbody tr,.activity-item{animation:none!important;transition:none!important}}