:root{--navy:#10233f;--blue:#1f5f99;--bg:#f3f6fa;--card:#fff;--text:#182232;--muted:#667085;--border:#e1e7ef;--green:#16794b;--yellow:#a96500;--orange:#b54708;--red:#b42318}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--blue);text-decoration:none}.layout{display:grid;grid-template-columns:235px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#587392 #10233f}.brand{font-weight:800;font-size:18px;line-height:1.25;margin:2px 8px 28px}.brand small{display:block;color:#a9bad0;font-weight:500;font-size:11px;margin-top:6px}.nav a{display:block;color:#dce6f2;padding:11px 12px;border-radius:8px;margin:3px 0}.nav a:hover{background:#1a3559;color:white}.sidebar .userbox{position:static;margin:22px 4px 4px;font-size:12px;color:#b9c7d8;border-top:1px solid #294667;padding-top:14px}.main{padding:28px;max-width:1600px;width:100%}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topbar h1{margin:0;font-size:25px}.muted{color:var(--muted)}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(5,minmax(150px,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:0 2px 6px rgba(16,35,63,.04)}.kpi .num{font-size:30px;font-weight:800;margin-top:8px}.kpi .label{color:var(--muted);font-size:13px}.section{margin-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.btn{border:0;border-radius:8px;padding:9px 13px;background:var(--blue);color:#fff;cursor:pointer;font-weight:600;display:inline-block}.btn.secondary{background:#e9eef5;color:#24364b}.btn.danger{background:#b42318}.btn.warning{background:#b54708}.btn.small{padding:6px 9px;font-size:12px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:10px 11px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;vertical-align:top}th{background:#f8fafc;color:#475467;font-weight:700;position:sticky;top:0}.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:10px;background:#fff}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#edf2f7;color:#344054}.badge.valid{background:#e6f4ec;color:var(--green)}.badge.upcoming{background:#fff4d6;color:var(--yellow)}.badge.urgent{background:#ffead5;color:var(--orange)}.badge.critical,.badge.expired{background:#fee4e2;color:var(--red)}.badge.neutral{background:#f2f4f7;color:#667085}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}.toolbar input,.toolbar select{width:auto;min-width:180px}.formgrid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px}.field label{display:block;font-size:12px;font-weight:700;color:#475467;margin:0 0 5px}.field input,.field select,.field textarea,.toolbar input,.toolbar select{width:100%;padding:9px 10px;border:1px solid #cfd8e4;border-radius:7px;background:#fff;font:inherit}.field textarea{min-height:86px}.span2{grid-column:span 2}.span3{grid-column:span 3}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.profile-title{display:flex;justify-content:space-between;gap:15px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.fact{padding:11px;border:1px solid var(--border);border-radius:9px;background:#fbfcfe}.fact small{display:block;color:var(--muted);margin-bottom:4px}.fact strong{font-size:14px}.flash{padding:11px 13px;border-radius:8px;margin-bottom:16px}.flash.success{background:#e8f5ee;color:#16643e}.flash.warning{background:#fff0dd;color:#8a4b00}.flash.danger{background:#fee4e2;color:#9a231b}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#10233f,#1f5f99)}.login-card{width:390px;background:#fff;border-radius:14px;padding:30px;box-shadow:0 22px 50px rgba(0,0,0,.22)}.login-card h1{font-size:21px;margin:0 0 6px}.login-card .field{margin-top:15px}.rtl{direction:rtl;text-align:right}.two-col{grid-template-columns:1fr 1fr}.bar{height:8px;background:#edf1f5;border-radius:4px;overflow:hidden}.bar span{display:block;height:100%;background:#1f5f99}.notice{font-size:12px;background:#fff8e8;border:1px solid #f2d59a;padding:10px;border-radius:8px;color:#7a5200}@media(max-width:1000px){.layout{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar .userbox{position:static;margin-top:20px}.nav{display:flex;flex-wrap:wrap}.main{padding:18px}.kpis{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.formgrid,.facts{grid-template-columns:1fr}.span2,.span3{grid-column:span 1}}
.brand-block{margin:0 4px 20px}.brand-logo{display:block;width:100%;max-width:190px;height:94px;object-fit:contain;background:#fff;border-radius:10px;padding:7px;margin:0 auto 8px}.brand-block .brand{margin:0 8px 18px;text-align:center}.login-logo{display:block;width:220px;max-width:100%;height:115px;object-fit:contain;margin:0 auto 14px}.filter-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}.filter-title{font-weight:800;margin-bottom:12px}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:12px}.filter-actions{margin-top:12px}.result-summary{font-size:12px;color:var(--muted);margin:8px 0}.form-section-title{font-size:14px;font-weight:800;color:var(--navy);padding:12px 0 8px;margin-top:8px;border-bottom:1px solid var(--border);margin-bottom:12px}
@media(max-width:1200px){.filter-grid{grid-template-columns:repeat(2,minmax(170px,1fr))}}@media(max-width:700px){.filter-grid{grid-template-columns:1fr}.brand-logo{max-width:170px}}

.user-edit-grid{display:grid;grid-template-columns:1fr 1.2fr 1.2fr auto;gap:7px;align-items:end;min-width:620px}.user-edit-grid .field label{font-size:10px}.user-edit-grid .field input,.user-edit-grid .field select{padding:7px 8px;font-size:12px}@media(max-width:1000px){.user-edit-grid{grid-template-columns:1fr;min-width:260px}}
.version{font-size:10px;background:#254b78;color:#dbe8f6;padding:2px 5px;border-radius:5px;vertical-align:middle}.side-search{display:flex;gap:5px;margin:0 4px 14px}.side-search input{min-width:0;width:100%;padding:8px 9px;border:1px solid #38506f;border-radius:7px;background:#0c1d35;color:#fff}.side-search input::placeholder{color:#9eb1c8}.side-search button{border:0;background:#274e7c;color:#fff;border-radius:7px;width:34px;cursor:pointer}.nav-sep{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7f96b3;margin:16px 12px 5px}.kpi-link{display:block;color:var(--text);transition:.12s ease}.kpi-link:hover{transform:translateY(-1px);border-color:#b9cadc;box-shadow:0 4px 12px rgba(16,35,63,.08)}.kpis7{grid-template-columns:repeat(7,minmax(120px,1fr))}.compact{gap:5px}.row-archived{opacity:.65;background:#fafafa}.renew{position:relative}.renew>summary{list-style:none}.renew>summary::-webkit-details-marker{display:none}.renew-box{position:absolute;z-index:20;right:0;top:36px;width:300px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 12px 35px rgba(16,35,63,.18)}.renew-box .field{margin-bottom:8px}.search-row{display:flex;gap:8px;align-items:end}.search-row input{flex:1;padding:9px 10px;border:1px solid #cfd8e4;border-radius:7px}.search-result{padding:9px 0;border-bottom:1px solid var(--border)}.search-result:last-child{border-bottom:0}.search-result span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.master-layout{display:grid;grid-template-columns:250px 1fr;gap:18px}.master-menu a{display:block;padding:9px 10px;border-radius:7px;color:var(--text)}.master-menu a.active{background:#e9f1fa;color:var(--blue);font-weight:700}.inline-edit{display:flex;gap:6px}.inline-edit input{width:100%;padding:7px 8px;border:1px solid #cfd8e4;border-radius:7px}.readonly-box{padding:9px 10px;border:1px solid #d9e1ea;border-radius:7px;background:#f8fafc;min-height:40px}.readonly-box .muted{font-size:10px}.profile-note{font-size:11px;color:var(--muted)}
@media(max-width:1300px){.kpis7{grid-template-columns:repeat(4,1fr)}}@media(max-width:900px){.master-layout{grid-template-columns:1fr}.kpis7{grid-template-columns:repeat(2,1fr)}}
.grid2{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(480px,1.65fr);gap:18px}.permission-group h3{font-size:13px;margin:0 0 9px;color:var(--navy)}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px}.permission-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);padding:10px;border-radius:8px;background:#fbfcfe;cursor:pointer}.permission-item input{margin-top:3px}.permission-item span{display:block}.permission-item strong{display:block;font-size:12px}.permission-item small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.empty-state{padding:38px 16px;text-align:center;color:var(--muted)}.empty-state h3{color:var(--text)}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}.permission-grid{grid-template-columns:1fr}}

.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.three-col{grid-template-columns:1fr}}
.lang-row{display:flex;justify-content:center;margin:-8px 4px 12px}.login-lang{display:flex;justify-content:flex-end;margin-bottom:4px}.rtl-ui .layout{direction:rtl}.rtl-ui .sidebar{direction:rtl}.rtl-ui .main{direction:rtl}.rtl-ui th,.rtl-ui td{text-align:right}.rtl-ui .field label{text-align:right}.rtl-ui .sidebar .userbox{left:16px;right:16px}.rtl-ui .renew-box{right:auto;left:0}.rtl-ui .topbar,.rtl-ui .section-title{direction:rtl}.stock-low{background:#fff6ed}.stock-zero{background:#fff0f0}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.warehouse-summary{grid-template-columns:repeat(4,minmax(150px,1fr))}.mini-form{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;align-items:end}.mini-form .span2{grid-column:span 2}.status-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.due-box{padding:10px;border:1px solid var(--border);border-radius:8px;background:#fbfcfe}.due-box.expired{border-color:#f5b7b1;background:#fff2f0}.due-box.urgent{border-color:#ffd29b;background:#fff8ec}@media(max-width:900px){.warehouse-summary,.mini-form{grid-template-columns:1fr}.mini-form .span2{grid-column:span 1}}

.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#10233f}.sidebar::-webkit-scrollbar-thumb{background:#587392;border-radius:8px}.training-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px}.training-step{border:1px solid var(--border);border-radius:10px;padding:15px;background:#fff}.training-step h3{margin:0 0 8px}.attachment-gallery{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:10px}.attachment-card{border:1px solid var(--border);border-radius:9px;padding:12px;background:#fbfcfe}.rental-due{background:#fff6ed}.rental-paid{background:#effaf4}@media(max-width:900px){.training-grid,.attachment-gallery{grid-template-columns:1fr}}

/* Phase 2.2.1 - approval inbox on CEO / Projects Manager dashboard */
.approval-card{border:1px solid rgba(202,138,4,.35);box-shadow:0 8px 22px rgba(0,0,0,.04)}
.approval-card .section-title{align-items:center}

/* Phase 2.3 - connected controls */
.global-toolbar{display:flex;justify-content:flex-start;margin:-10px 0 12px}.rtl-ui .global-toolbar{justify-content:flex-start}.sortable-head{cursor:pointer;user-select:none}.sortable-head:hover{background:#eef4fb}.sortable-head::after{content:" ⇅";font-size:10px;color:#98a2b3}.transfer-options{margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:8px;background:#f8fafc}.transfer-options label{display:block;margin:5px 0;font-size:12px}.override-box{padding:10px;border:1px solid #f0c36a;border-radius:8px;background:#fff8e8}.print-page{background:#fff}.print-sheet{max-width:900px;margin:20px auto;background:#fff;padding:26px;border:1px solid #ddd}.print-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #10233f;padding-bottom:12px}.print-logo{width:170px;height:80px;object-fit:contain}.signature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:55px}.signature-box{border-top:1px solid #555;padding-top:8px;text-align:center}@media print{.no-print,.sidebar,.global-toolbar{display:none!important}.layout{display:block}.main{padding:0;max-width:none}.print-sheet{border:0;margin:0;max-width:none;padding:10mm}.print-page{background:#fff}}

/* Phase 2.3.2.3 - clean responsive navigation.
   Desktop/tablet (>768px): original v2.3 sidebar.
   Mobile (<=768px): same sidebar becomes an off-canvas menu. */
.mobile-menu-toggle{display:none;align-items:center;gap:8px;position:fixed;top:10px;left:10px;z-index:1202;border:0;border-radius:9px;padding:10px 14px;background:var(--navy);color:#fff;font:inherit;font-weight:800;box-shadow:0 5px 16px rgba(16,35,63,.22);cursor:pointer}
.mobile-menu-toggle .menu-icon{font-size:18px;line-height:1}
.mobile-menu-backdrop{display:none;position:fixed;inset:0;z-index:1199;background:rgba(10,22,38,.48)}
.menu-open{overflow:hidden}
.rtl-ui .mobile-menu-toggle{left:auto;right:10px}

/* Force original v2.3 desktop navigation even though the legacy stylesheet has a <=1000px layout rule. */
@media(min-width:769px){
  .layout{display:grid!important;grid-template-columns:235px 1fr!important;min-height:100vh!important}
  .sidebar{display:block!important;background:var(--navy)!important;color:#fff!important;padding:22px 16px!important;position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:auto!important;height:100vh!important;overflow-y:auto!important;z-index:auto!important;transform:none!important;box-shadow:none!important}
  .sidebar .nav{display:block!important}
  .sidebar .nav a{display:block!important;padding:11px 12px!important}
  .main{padding:28px!important}
  .mobile-menu-toggle,.mobile-menu-backdrop{display:none!important}
}

@media(max-width:768px){
  .layout{display:block!important;min-height:100vh!important}
  .mobile-menu-toggle{display:flex!important}
  .mobile-menu-backdrop.active{display:block!important}
  .sidebar{display:block!important;position:fixed!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;width:min(86vw,340px)!important;height:100vh!important;z-index:1201!important;background:var(--navy)!important;padding:68px 16px 20px!important;overflow-y:auto!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;box-shadow:10px 0 28px rgba(0,0,0,.20)!important}
  .sidebar.mobile-open{transform:translateX(0)!important}
  .rtl-ui .sidebar{left:auto!important;right:0!important;transform:translateX(105%)!important;box-shadow:-10px 0 28px rgba(0,0,0,.20)!important}
  .rtl-ui .sidebar.mobile-open{transform:translateX(0)!important}
  .sidebar .nav{display:block!important}
  .sidebar .nav a{display:block!important;padding:12px!important;margin:3px 0!important}
  .sidebar .userbox{position:static!important;margin-top:20px!important}
  .main{padding:70px 12px 18px!important}
  .topbar{gap:10px;align-items:flex-start;flex-wrap:wrap}
  .topbar h1{font-size:22px}
}