/* 4cary workspace: consistent navigation, readable records, responsive metrics. */
#app-screen{font-family:Tajawal,"Segoe UI",Tahoma,sans-serif;background:#f3f6f9;--primary:#087f77;--primary-dark:#06675f;--primary-light:#e9f6f2;--primary-ring:#087f7726}
#app-screen .topbar{display:grid;grid-template-columns:auto 1fr;gap:18px 24px;padding:18px 28px 0;background:#16354a;box-shadow:0 4px 14px #122b3e14}
#app-screen .brand{font-size:17px;letter-spacing:0}
#app-screen .user-box{justify-content:flex-end;gap:9px;flex-wrap:wrap;font-size:13px;white-space:normal}
#app-screen .main-nav{grid-column:1/-1;grid-row:2;border-top:1px solid #ffffff1c;padding:10px 0;gap:5px;flex-wrap:wrap}
#app-screen .main-nav>button,#app-screen .nav-group-btn{padding:11px 15px;font-size:14px;color:#c9dbe6;border-radius:9px}
#app-screen .main-nav>button.active,#app-screen .nav-group-btn.active{background:#d4f3e9;color:#115e59;box-shadow:none}
#app-screen .nav-dropdown{background:#17394f;border-color:#38566b}
#app-screen .content{max-width:1440px;padding:30px}
#app-screen .page-header{margin-bottom:24px;gap:16px}
#app-screen .page-header h2{font-size:26px;line-height:1.5;color:#17384d}
#app-screen .cards-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#app-screen .kpi-card{min-width:0;border:1px solid #dfe7ed;border-top:3px solid var(--primary);border-radius:14px;padding:20px 18px;box-shadow:0 5px 16px #17384d05}
#app-screen .kpi-card.success{border-top-color:#16a34a}#app-screen .kpi-card.danger{border-top-color:#dc2626}#app-screen .kpi-card.warning{border-top-color:#d97706}
#app-screen .kpi-card .label{font-size:13px;line-height:1.7;min-height:44px;color:#687d8e}
#app-screen .kpi-card .value{font-size:29px;font-variant-numeric:tabular-nums;color:#18394f;overflow-wrap:anywhere}
#app-screen .detail-card{border:1px solid #e0e8ee;border-radius:16px;box-shadow:none;padding:22px}
#app-screen .detail-card h3{font-size:18px;color:#1c3b50;margin:0 0 18px}
#app-screen .shortcuts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#app-screen .shortcut-btn{flex-direction:row;justify-content:flex-start;padding:16px;gap:14px;box-shadow:none;background:#f7fafb;border-color:#e2eaee;font-size:14px}
#app-screen .shortcut-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#e8f3ef;font-size:23px;flex-shrink:0}
#app-screen .table-wrap{border-color:#e2e9ef;box-shadow:none;border-radius:12px}
#app-screen table{font-size:14px}
#app-screen thead th{background:#eef4f7;color:#4f697d;font-size:13px;padding:14px 16px}
#app-screen tbody td{padding:15px 16px}
#app-screen .empty-row td{color:#728698;padding:36px 20px;white-space:normal}
#app-screen .toolbar input,#app-screen .toolbar select{min-height:42px;font-family:inherit;font-size:14px}
#app-screen .btn{min-height:40px;font-size:14px}
#app-screen .btn-primary{box-shadow:none}
#modal-root .modal-box{font-family:Tajawal,"Segoe UI",Tahoma,sans-serif;border:1px solid #dce6eb;border-radius:18px;max-height:calc(100dvh - 32px)}
#modal-root .modal-head{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #e4ebf0}
#modal-root .modal-head h3{font-size:21px;color:#17394f}
#modal-root .modal-box label{font-size:14px;color:#486477}
#modal-root .modal-box input,#modal-root .modal-box select,#modal-root .modal-box textarea{font-size:16px}
@media(min-width:801px){#app-screen .nav-toggle-btn{display:none}}
@media(max-width:1100px){#app-screen .topbar{grid-template-columns:1fr;padding:16px 20px 0;gap:12px}#app-screen .user-box{justify-content:flex-start}#app-screen .main-nav{grid-row:3}#app-screen .cards-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){#app-screen .nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center}#app-screen .topbar{display:flex;padding:14px 16px;gap:14px;position:relative}#app-screen .brand{font-size:15px;white-space:normal;flex:1}#app-screen .main-nav{display:none;position:absolute;top:100%;inset-inline:0;background:#17394f;margin:0;padding:10px;border:0;max-height:70dvh}#app-screen .main-nav.open{display:flex}#app-screen .user-box{width:100%;gap:8px;justify-content:flex-start}#app-screen .nav-dropdown{position:static}#app-screen .content{padding:20px 16px}#app-screen .cards-row{grid-template-columns:repeat(2,minmax(0,1fr))}#app-screen .kpi-card:last-child:nth-child(odd){grid-column:1/-1}#app-screen .shortcuts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app-screen .toolbar{width:100%}#app-screen .toolbar input,#app-screen .toolbar select{max-width:100%;min-width:0;font-size:16px}#app-screen .page-header h2{font-size:23px}#app-screen .detail-card{padding:16px}}
@media(max-width:440px){#app-screen .shortcut-btn{font-size:12px;padding:12px;gap:8px}#app-screen .shortcut-icon{width:30px;height:30px;font-size:19px}#app-screen .kpi-card{padding:16px 12px}#app-screen .kpi-card .value{font-size:26px}#app-screen .user-box .org-badge{width:100%}}
@media(prefers-reduced-motion:reduce){#app-screen *,#modal-root *{animation:none!important;transition:none!important}}