:root{
  --maroon:#6F1D2E; --maroon-2:#8A2E43; --maroon-soft:#F5E8EC;
  --gold:#9B670F; --gold-soft:#F8F0DB;
  --olive:#526B4B; --olive-soft:#EAF0E8;
  --ink:#1F2937; --muted:#697386; --paper:#F7F4EF; --white:#FFFFFF;
  --line:#E4DED5; --shadow:0 12px 32px rgba(42,31,20,.08); --radius:18px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;min-height:100%;font-family:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif;background:var(--paper);color:var(--ink)}
a{text-decoration:none;color:inherit} button,input,select{font:inherit}.mobile-only{display:none}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#201A1C;color:#F9F3EF;padding:22px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;padding:10px 10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-mark{width:46px;height:46px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;display:grid;place-items:center}.brand-mark img{width:30px;height:30px}.brand strong{display:block;font-size:15px}.brand span{display:block;font-size:10px;color:#C6BCBF;margin-top:2px}.nav-stack{display:grid;gap:8px;margin-top:22px}.nav-item{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:12px;color:#D8CFD1;transition:.18s}.nav-item span:first-child{width:20px;text-align:center}.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(-2px)}.nav-item.disabled{opacity:.42;cursor:not-allowed}.nav-item small{font-size:9px;color:#C6BCBF;margin-inline-start:6px}.sidebar-footer{position:absolute;bottom:20px;font-size:11px;color:#BFB4B7;display:flex;align-items:center;gap:8px;padding:0 10px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.online{background:#6EBF7A}
.main{min-width:0}.topbar{height:74px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.breadcrumbs{font-size:13px;color:var(--muted)}.breadcrumbs span{padding:0 8px;color:#ABA19A}.top-actions{display:flex;align-items:center;gap:14px}.user-chip{display:flex;align-items:center;gap:10px}.user-chip small{display:block;color:var(--muted);font-size:10px}.avatar{width:38px;height:38px;border-radius:12px;background:var(--maroon-soft);color:var(--maroon);display:grid;place-items:center;font-weight:800}.page-wrap{padding:30px;max-width:1600px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}.page-head h1{margin:4px 0;font-size:32px;letter-spacing:-.5px}.page-head p{margin:0;color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:1.7px;color:var(--maroon);font-size:10px;font-weight:800}.count-chip,.status-pill,.tag,.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:800;background:#EEE8E2;color:#665F59}.status-pill.success,.badge.success{background:var(--olive-soft);color:var(--olive)}.status-pill.warning{background:var(--gold-soft);color:var(--gold)}
.hero{background:linear-gradient(135deg,#FFF8F1,#F4E7EA);border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);margin-bottom:24px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(155,103,15,.08);left:-60px;top:-80px}.hero h1{font-size:32px;margin:3px 0 4px}.hero p{margin:0;color:var(--muted)}.hero-badge{background:#fff;border:1px solid var(--line);padding:10px 13px;border-radius:999px;font-size:11px;position:relative;z-index:1}.screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.screen-card{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 26px rgba(43,30,20,.06);transition:.18s;min-height:130px}.screen-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.screen-card h3{margin:0 0 4px;font-size:19px}.screen-card p{margin:0;color:var(--muted);font-size:12px}.screen-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:20px;font-weight:800}.accent-maroon .screen-icon{background:var(--maroon-soft);color:var(--maroon)}.accent-olive .screen-icon{background:var(--olive-soft);color:var(--olive)}.accent-gold .screen-icon{background:var(--gold-soft);color:var(--gold)}.accent-blue .screen-icon{background:#E8EEF7;color:#355F96}.accent-slate .screen-icon{background:#ECEEF2;color:#4B5563}.disabled-card{opacity:.55;cursor:not-allowed;background:#F1EEEA}.info-banner{display:flex;justify-content:space-between;align-items:center;margin-top:20px;border:1px dashed #CDB8A3;border-radius:18px;padding:18px 20px;background:#FBF6EE}.info-banner strong{display:block}.info-banner p{margin:4px 0 0;color:var(--muted);font-size:12px}
.btn{border:0;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:800;font-size:12px;transition:.18s;display:inline-flex;align-items:center;gap:8px;justify-content:center}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--maroon);color:#fff}.btn-primary:hover{background:var(--maroon-2)}.btn-gold{background:var(--gold);color:#fff}.btn-danger{background:#A23A45;color:#fff}.btn-ghost{background:#F1ECE7;color:#4E4742}.btn-sm{padding:7px 10px;font-size:10px}.btn-lg{padding:13px 17px;font-size:13px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 26px rgba(43,30,20,.05);margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.panel-head h3{margin:0;font-size:16px}.content-grid{display:grid;gap:18px}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .full{grid-column:1/-1}label{font-size:11px;color:#635B55;font-weight:700}input,select{width:100%;margin-top:6px;background:#FBFAF8;border:1px solid #DCD5CD;border-radius:11px;padding:10px 12px;color:var(--ink);outline:none}input:focus,select:focus{border-color:#B37D88;box-shadow:0 0 0 3px rgba(111,29,46,.08)}.table-search{max-width:230px;background:#FBFAF8}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}.table-wrap th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#847A72;background:#F9F6F2;padding:12px;border-bottom:1px solid var(--line);text-align:right}.table-wrap td{padding:12px;border-bottom:1px solid #F0EBE6;font-size:12px;vertical-align:middle}.table-wrap tr:last-child td{border-bottom:0}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#756B64}.inline-edit{display:grid;grid-template-columns:minmax(140px,1fr) 120px auto;gap:7px;align-items:center;margin-top:8px}.check{display:inline-flex;align-items:center;justify-content:center}.check input{display:none}.check span{width:30px;height:30px;border:1px solid #CFC7BF;border-radius:10px;background:#FBFAF8;display:inline-block;position:relative}.check input:checked + span{background:var(--olive);border-color:var(--olive)}.check input:checked + span:after{content:"✓";position:absolute;color:#fff;font-weight:900;left:8px;top:2px}.panel-actions{display:flex;align-items:center;justify-content:space-between;padding-top:15px}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.result-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 26px rgba(43,30,20,.05)}.result-card-top{display:flex;justify-content:space-between;align-items:center}.result-card h3{margin:5px 0 0;font-size:20px}.donut{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--maroon) calc(var(--value, 0)*1%),#EFE9E4 0);position:relative}.donut:after{content:"";width:54px;height:54px;border-radius:50%;background:#fff;position:absolute}.donut span{position:relative;z-index:1;font-weight:900;font-size:12px}.metric-list{margin-top:18px;display:grid;gap:9px}.metric-list div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #F0EBE6;font-size:11px}.metric-list div:last-child{border-bottom:0}.filter-bar{margin-bottom:18px}.filter-form{display:flex;gap:10px;align-items:center}.filter-form select{width:auto;min-width:180px}.empty-state{padding:50px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:18px}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}.kpi small{color:var(--muted);display:block;font-size:9px}.kpi strong{font-size:24px}.mini-list{display:grid;gap:8px}.mini-list div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #F0EBE6;font-size:11px}.permission-pills{display:flex;flex-wrap:wrap;gap:8px}.tag{background:#F0EBE6;color:#5A514A}
.flash-stack{display:grid;gap:8px;margin-bottom:16px}.flash{padding:11px 14px;border-radius:12px;font-size:11px;font-weight:700}.flash.success{background:#E9F4EA;color:#3F6A44}.flash.error{background:#F9E8EA;color:#8E2F3C}.flash.warning{background:#FFF2D8;color:#8B6514}.muted{color:var(--muted)}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#201A1C}.login-art{position:relative;overflow:hidden;padding:70px;display:flex;align-items:flex-end;background:linear-gradient(145deg,#2D2024,#6F1D2E);color:#fff}.halo{position:absolute;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(230,190,105,.30),rgba(230,190,105,0) 67%);top:-130px;left:-110px}.sheep-card{position:absolute;left:12%;top:23%;width:240px;height:190px;border-radius:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:105px;transform:rotate(-4deg)}.art-copy{max-width:510px;position:relative;z-index:1}.art-copy h1{font-size:54px;line-height:1.1;margin:10px 0}.art-copy p{font-size:15px;line-height:1.8;color:#EADADD}.login-panel{background:#FBF8F4;padding:70px;display:flex;flex-direction:column;justify-content:center}.login-logo img{width:56px;height:56px;margin-bottom:26px}.login-panel h2{font-size:35px;margin:7px 0}.login-panel .muted{margin-top:0}.stack-form{display:grid;gap:16px;max-width:430px;margin-top:24px}.stack-form label{font-size:11px}.password-wrap{position:relative}.password-wrap input{padding-left:46px}.password-eye{position:absolute;left:8px;top:12px;width:30px;height:30px;border:0;border-radius:8px;background:#EEE8E2;color:#675E57;cursor:pointer}.login-note{margin-top:18px;font-size:10px;color:var(--muted);max-width:430px}.login-flash{max-width:430px;margin-top:15px}
@media(max-width:1100px){.app-shell{grid-template-columns:220px 1fr}.screen-grid,.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.login-page{grid-template-columns:1fr}.login-art{min-height:360px;padding:38px}.login-panel{padding:38px}.sheep-card{left:auto;right:12%;top:13%;width:180px;height:140px;font-size:75px}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;right:0;left:auto;top:0;width:260px;transform:translateX(110%);transition:.2s;z-index:50}.sidebar.open{transform:translateX(0)}.mobile-only{display:inline-grid}.topbar{padding:0 16px}.page-wrap{padding:20px 14px}.screen-grid,.result-grid,.two-col,.form-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top-actions .user-chip{display:none}.breadcrumbs{font-size:11px}.page-head h1{font-size:27px}.filter-form{flex-wrap:wrap}}
:root{--maroon:#6F1D2E;--maroon2:#541522;--gold:#9B670F;--olive:#526B4B;--paper:#F7F4EF;--paper2:#FFFDFC;--ink:#1F2937;--muted:#697386;--line:#E4DED5;--good:#2F6B48;--bad:#A13B3B;--shadow:0 14px 34px rgba(36,24,17,.10)}*{box-sizing:border-box}body{margin:0;font-family:Cairo,Tajawal,"Segoe UI",Tahoma,sans-serif;background:radial-gradient(circle at top,#fffaf4 0,var(--paper) 55%,#eee7dc 100%);color:var(--ink);min-height:100vh}a{color:inherit;text-decoration:none}.topbar{height:76px;background:linear-gradient(90deg,var(--maroon2),var(--maroon));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;position:sticky;top:0;z-index:20;box-shadow:0 6px 22px rgba(111,29,46,.18)}.brand{display:flex;gap:12px;align-items:center}.brand img,.login-logo{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.12))}.brand strong{display:block;font-size:19px}.brand span{display:block;color:#f4d7dd;font-size:12px;margin-top:2px}.userchip{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.10);padding:8px 12px;border-radius:14px}.userchip span{opacity:.75;font-size:12px}.userchip a{background:#fff;color:var(--maroon);padding:6px 10px;border-radius:8px;font-weight:700}.shell{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 76px)}.sidebar{padding:18px;background:#fbf8f2;border-left:1px solid var(--line);position:sticky;top:76px;height:calc(100vh - 76px)}.nav{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;margin-bottom:7px;color:#4b5563;font-weight:700}.nav:hover{background:#f0e8dc;color:var(--maroon)}.content{padding:24px;max-width:1500px;width:100%;margin:auto}.hero{background:linear-gradient(135deg,#fff,#f3eadf);border:1px solid var(--line);border-radius:24px;padding:24px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);margin-bottom:20px}.hero img{width:120px;height:120px;object-fit:contain}.hero h1,.page-head h1{margin:6px 0 8px;color:var(--maroon);font-size:30px}.hero p,.page-head p,.muted{color:var(--muted);margin:0}.eyebrow{font-size:12px;color:var(--gold);font-weight:800;letter-spacing:.04em}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:20px}.two{grid-template-columns:1fr 1fr}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card,.panel,.action-card{background:var(--paper2);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px rgba(51,36,28,.07)}.card{padding:17px}.card span{display:block;color:var(--muted);font-size:13px}.card b{display:block;font-size:28px;color:var(--maroon);margin-top:6px}.panel{padding:20px;margin:0 0 18px}.section-head,.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.page-head{padding:6px 0 10px}.action-card{padding:18px;display:flex;flex-direction:column;gap:7px;transition:.2s}.action-card:hover{transform:translateY(-2px);border-color:#d7c7b3;box-shadow:var(--shadow)}.action-card .icon{font-size:28px}.action-card small{color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}th{background:#fbf6ef;color:#594b42;font-size:13px}tr:hover td{background:#fffcf8}.badge,.pill,.mini{display:inline-block;padding:5px 9px;border-radius:999px;background:#efe7dd;color:#5a4c41;font-size:11px;font-weight:800}.badge.good{background:#e4f1e8;color:var(--good)}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:10px 14px;border-radius:10px;font-weight:800;background:#ece7e1;color:var(--ink)}.btn:hover{filter:brightness(.98)}.btn.primary{background:var(--maroon);color:#fff}.btn.danger{background:#f4dfdf;color:#852d2d}.btn.small{padding:7px 10px;font-size:12px}.btn.wide{width:100%}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.formgrid .full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-weight:800;color:#4c443e;font-size:13px}input,select,textarea{width:100%;font:inherit;background:#fff;border:1px solid #d8d1c8;border-radius:10px;padding:10px 12px;color:var(--ink)}textarea{min-height:100px;resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid rgba(155,103,15,.13);border-color:var(--gold)}.flash{padding:12px 14px;border-radius:12px;margin-bottom:12px;font-weight:700}.flash.ok{background:#e4f1e8;color:#225b39}.flash.error{background:#f8e4e4;color:#8a2d2d}.flash.info{background:#e6eef8;color:#315a82}.notice{border-right:4px solid var(--gold);background:#fffaf1}.inline{display:flex;gap:7px;align-items:center}.error-page{text-align:center;padding:70px 20px}.error-code{font-size:68px;font-weight:900;color:var(--maroon)}.loginbg{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at top,#fffdf8,#efe7dc 60%,#e7ded0)}.login-card{width:min(430px,92vw);background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 22px 60px rgba(43,28,20,.16)}.login-card{text-align:right}.login-logo{display:block;width:110px;height:110px;margin:0 auto 10px}.login-card h1{text-align:center;color:var(--maroon);margin:8px 0 3px}.login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:24px}.password-wrap{position:relative}.password-wrap input{padding-left:48px}.eye{position:absolute;left:8px;top:7px;height:36px;width:36px;border:0;background:transparent;color:#6b7280;cursor:pointer}.otp-demo{background:#f8f1e3;padding:10px 12px;border-radius:10px;margin:12px 0;color:#6c4a1f}.otp-demo b{font-size:20px;letter-spacing:3px}.pill{background:#f0e6db}.mini{background:#f3eee7;margin:2px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.shell{grid-template-columns:210px 1fr}}
@media (max-width:760px){.topbar{height:auto;padding:10px 12px}.brand img{width:44px;height:44px}.brand strong{font-size:16px}.brand span{font-size:10px}.shell{display:block}.sidebar{position:static;height:auto;border-left:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px}.nav{margin:0;padding:9px 8px;justify-content:center;font-size:12px}.nav span{display:none}.content{padding:14px}.hero{flex-direction:column-reverse;text-align:center}.hero img{width:85px;height:85px}.hero h1,.page-head h1{font-size:24px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cards,.two,.formgrid{grid-template-columns:1fr}.table-wrap{margin:0 -8px;padding:0 8px}.userchip span{display:none}}
/* MERGED UI LAYER */
.hero-side{display:flex;align-items:center;gap:14px;position:relative;z-index:2}.hero-logo{width:78px;height:78px;object-fit:contain}.section-title{display:flex;justify-content:space-between;align-items:end;margin:6px 0 14px}.section-title h2{margin:2px 0 0;color:var(--maroon)}.screen-grid{margin-bottom:18px}.hero{min-height:150px}.hero .hero-badge{white-space:nowrap}.nav-stack{overflow:auto}.sidebar .brand-mark img{width:42px;height:42px;object-fit:contain}.top-actions{gap:10px}.hero-logo{filter:drop-shadow(0 5px 10px rgba(0,0,0,.10))}
@media(max-width:820px){.hero-side{display:none}.hero h1{font-size:26px}.screen-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== V1.1 visual refresh: contrast, logo, navigation and dark mode ===== */
:root{
  --navy:#20354D;
  --sidebar:#FFFFFF;
  --sidebar-ink:#20354D;
  --sidebar-muted:#64748B;
  --topbar:#6F1D2E;
  --accent-red:#9B2034;
  --blue-soft:#EAF1F8;
  --green-soft:#EAF4EC;
}
body{background:#FAF8F5;transition:background .25s,color .25s}
.app-shell{grid-template-columns:285px minmax(0,1fr)}
.sidebar{background:var(--sidebar);color:var(--sidebar-ink);border-left:1px solid #E7E1DB;padding:18px 16px;box-shadow:-8px 0 28px rgba(31,41,55,.035);z-index:20}
.brand{justify-content:flex-start;gap:13px;padding:7px 8px 20px;border-bottom:1px solid #EEE9E3}
.brand-copy{flex:1;min-width:0;text-align:right}
.brand-copy strong{display:block;font-size:16px;color:#7B182C;line-height:1.45}
.brand-copy span{display:block;font-size:11px;color:#526277;line-height:1.6;margin-top:2px}
.brand-mark{width:58px;height:58px;flex:0 0 58px;background:#FFF;border:0;border-radius:16px;display:grid;place-items:center}
.brand-mark img{width:54px;height:54px;object-fit:contain}
.nav-stack{gap:5px;margin-top:18px}
.nav-item{position:relative;display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:13px;color:#33465C;font-weight:700;font-size:13px;transition:background .18s,color .18s,transform .18s}
.nav-item .nav-icon{width:25px;height:25px;display:grid;place-items:center;font-size:17px;color:#7C2034;flex:0 0 25px}
.nav-item:hover{background:#F5EEF0;color:#721A2C;transform:none}
.nav-item.active{background:#F5E8EC;color:#7B182C;box-shadow:inset 0 0 0 1px #F0D9DF}
.nav-item.active:before{content:"";position:absolute;right:0;top:8px;bottom:8px;width:4px;border-radius:4px;background:#8D1D32}
.nav-item.active .nav-icon{color:#8D1D32}
.sidebar-footer{position:absolute;bottom:18px;color:#718096;font-size:11px;padding:0 10px}

.main{background:#FAF8F5}
.topbar{height:74px;background:var(--topbar);color:#FFF;border-bottom:0;padding:0 30px;box-shadow:0 4px 18px rgba(67,16,29,.14)}
.top-brand-line{font-size:12px;color:#F6DDE3;font-weight:700}.top-brand-line span{padding:0 7px;color:#D89CAA}
.top-actions{gap:16px}.user-chip b{color:#FFF;font-size:13px}.user-chip small{color:#E7C9D0}.avatar{background:#FFF;color:#6F1D2E;border-radius:12px}
.btn-logout{background:#FFF;color:#6F1D2E}.btn-logout:hover{background:#F8EEF0}
.theme-toggle{border:0;background:transparent;color:#FFF;display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 0;font-weight:700;font-size:11px}
.theme-moon{font-size:16px}.theme-sun{font-size:17px;opacity:.85}.theme-switch{width:49px;height:25px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2);padding:3px;display:flex;align-items:center;justify-content:flex-start;direction:ltr}
.theme-switch span{width:18px;height:18px;background:#FFF;border-radius:50%;display:block;box-shadow:0 1px 5px rgba(0,0,0,.18);transition:transform .22s}
body.dark-mode .theme-switch span{transform:translateX(23px)}
.page-wrap{max-width:1600px;padding:30px}
.page-head h1,.hero h1{color:#741A2C}.page-head p,.hero p{color:#66758A}
.hero{background:linear-gradient(135deg,#FFFDFB,#F8EEF0);border-color:#E8DDE0}
.screen-card,.panel,.result-card,.kpi{background:#FFF;border-color:#E6E0DA}
.screen-card h3,.panel-head h3,.panel h2{color:#20354D}
.screen-card p,.muted{color:#66758A}
.screen-card .screen-icon{box-shadow:inset 0 0 0 1px rgba(31,53,77,.04)}
.kpi strong{color:#7B182C}
input,select{background:#FFF;border-color:#D5DCE4;color:#20354D}
input:focus,select:focus{border-color:#9B6A76;box-shadow:0 0 0 3px rgba(111,29,46,.10)}
.table-wrap th{background:#F5F7F9;color:#526277}.table-wrap td{color:#33465C}
.info-banner{background:#FBF7F0}

/* Dark mode */
body.dark-mode{background:#111820;color:#E8EDF3}
body.dark-mode .main{background:#111820}
body.dark-mode .sidebar{background:#18222D;border-color:#263442;box-shadow:none}
body.dark-mode .brand{border-color:#2A3745}.brand-copy strong{color:#D98A9A}.brand-copy span{color:#AAB7C5}
body.dark-mode .nav-item{color:#C8D3DF}.nav-item .nav-icon{color:#D17B8B}.nav-item:hover{background:#24313E;color:#FFF}.nav-item.active{background:#432530;color:#FFF;box-shadow:inset 0 0 0 1px #643744}.nav-item.active:before{background:#D7788C}
body.dark-mode .sidebar-footer{color:#9BA9B8}
body.dark-mode .topbar{background:#4F1525}
body.dark-mode .page-head h1,body.dark-mode .hero h1{color:#F0C6CE}body.dark-mode .page-head p,body.dark-mode .hero p,body.dark-mode .muted{color:#AAB7C5}
body.dark-mode .hero{background:linear-gradient(135deg,#202A35,#2B2027);border-color:#354250}
body.dark-mode .screen-card,body.dark-mode .panel,body.dark-mode .result-card,body.dark-mode .kpi{background:#19242F;border-color:#2D3A48;box-shadow:0 8px 26px rgba(0,0,0,.16)}
body.dark-mode .screen-card h3,body.dark-mode .panel-head h3,body.dark-mode .panel h2{color:#E8EDF3}
body.dark-mode .screen-card p{color:#AAB7C5}
body.dark-mode input,body.dark-mode select{background:#121A22;border-color:#354352;color:#E8EDF3}
body.dark-mode .table-wrap th{background:#202C38;color:#AAB7C5}body.dark-mode .table-wrap td{color:#D6DEE7;border-color:#293643}
body.dark-mode .info-banner{background:#201F1B;border-color:#4B4438}
body.dark-mode .btn-ghost{background:#273441;color:#E8EDF3}
body.dark-mode .flash.success{background:#1D3525;color:#A9D5B1}body.dark-mode .flash.error{background:#3A2027;color:#F0AEB8}body.dark-mode .flash.warning{background:#3A301B;color:#E7CC83}
body.dark-mode .avatar{background:#F4E7EA;color:#6F1D2E}

@media(max-width:1050px){.app-shell{grid-template-columns:245px 1fr}.theme-label{display:none}.topbar{padding:0 20px}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;right:0;top:0;width:285px;transform:translateX(110%);transition:transform .22s;height:100vh}.sidebar.open{transform:translateX(0)}.page-wrap{padding:20px}.topbar{height:68px}.top-actions{gap:9px}.user-chip>div:last-child{display:none}.mobile-only{display:inline-flex!important}}
/* Permission matrix / role editor */
.matrix-toolbar{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#FBF9F6}.matrix-toolbar label{max-width:360px;flex:1}.matrix-actions{display:flex;gap:8px;flex-wrap:wrap}.permission-matrix table td,.permission-matrix table th{text-align:right;vertical-align:middle}.check-cell{display:grid;place-items:center;cursor:pointer}.check-cell input{width:20px;height:20px;accent-color:var(--maroon)}.matrix-toolbar select{min-width:220px}.section-head h2{margin:2px 0}.full{grid-column:1/-1}
body.dark-mode .matrix-toolbar{background:#18222D;border-color:#2D3A48}body.dark-mode .matrix-toolbar label{color:#D6DEE7}

/* V1.3 dark mode contrast hardening */
body.dark-mode .page-wrap{color:#E8EDF3}
body.dark-mode .page-head h1,body.dark-mode .section-head h2,body.dark-mode .panel h2,body.dark-mode .panel h3{color:#F4F7FA}
body.dark-mode .page-head p,body.dark-mode .muted,body.dark-mode label{color:#B8C5D3}
body.dark-mode .panel,.dark-mode .screen-card,.dark-mode .result-card,.dark-mode .kpi{background:#18232E;border-color:#344352;color:#E8EDF3}
body.dark-mode .panel::before{opacity:.35}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#0F1821!important;color:#F1F5F9!important;border-color:#435364!important}
body.dark-mode select option{background:#101923;color:#F1F5F9}
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{color:#8292A3}
body.dark-mode .table-wrap{border-color:#344352}
body.dark-mode .table-wrap th{background:#253240;color:#DCE5EE;border-color:#344352}
body.dark-mode .table-wrap td{background:#18232E;color:#E5ECF3;border-color:#2F3D4B}
body.dark-mode .badge{background:#2B3947;color:#EAF1F7;border-color:#435364}
body.dark-mode .badge.good{background:#193B2A;color:#B9E5C5}
body.dark-mode .pill{background:#2B3947;color:#E8EDF3}
body.dark-mode .btn{border-color:#435364;color:#F1F5F9;background:#263442}
body.dark-mode .btn.primary{background:#A52A43;color:#fff;border-color:#B83A53}
body.dark-mode .btn.danger{background:#4A252D;color:#FFC2CB;border-color:#713642}
body.dark-mode .btn:hover{filter:brightness(1.12)}
body.dark-mode .info-banner,body.dark-mode .notice{background:#25251F;color:#E8E1C9;border-color:#6B6042}
body.dark-mode .flash.ok{background:#183625;color:#BCE4C5;border-color:#2E6541}
body.dark-mode .flash.error{background:#40212A;color:#FFC0C8;border-color:#703946}
body.dark-mode .flash.info{background:#1D3042;color:#C5DDF3;border-color:#355A79}
body.dark-mode .hero{background:linear-gradient(135deg,#1A2632,#30202A)!important;border-color:#3A4857}
body.dark-mode .hero-badge{background:#3B2930;color:#F3C4CD}
body.dark-mode .top-brand-line{color:#FFF}
body.dark-mode .btn-logout{background:#F4E8EC;color:#651728}

/* ===== V1.6 final visual + responsive polish ===== */
:root{
  --primary:#0F766E;
  --primary-dark:#0B4F4A;
  --primary-soft:#E6F4F2;
  --primary-border:#B9DDD8;
  --focus:#14B8A6;
  --gold:#B7791F;
}
.topbar{background:linear-gradient(90deg,var(--primary-dark),var(--primary))!important;box-shadow:0 4px 18px rgba(15,118,110,.18)}
.nav-item .nav-icon{color:var(--primary)!important}
.nav-item:hover{background:var(--primary-soft)!important;color:var(--primary-dark)!important}
.nav-item.active{background:#DDF1EE!important;color:var(--primary-dark)!important;box-shadow:inset 0 0 0 1px #C5E5E1!important}
.nav-item.active:before{background:var(--primary)!important}
.nav-item.active .nav-icon{color:var(--primary-dark)!important}
.page-head h1,.hero h1,.section-title h2{color:var(--primary-dark)!important}
.btn.primary{background:var(--primary)!important;border-color:var(--primary)!important}
.btn.primary:hover{background:#0B625C!important}
.kpi strong,.card b{color:var(--primary-dark)!important}
input:focus,select:focus,textarea:focus{border-color:var(--focus)!important;box-shadow:0 0 0 3px rgba(20,184,166,.14)!important}
.badge.good{background:#E4F4EA;color:#17623E}
.tag,.pill{background:#E6F4F2;color:#0B5E58}

/* Keep every navigation item reachable at 100% browser zoom. */
.sidebar{display:flex;flex-direction:column;min-height:calc(100vh - 76px);overflow:hidden}
.nav-stack{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-left:2px;padding-right:2px;scrollbar-width:thin}
.sidebar-footer{position:static;margin-top:auto;padding:14px 10px 2px;flex:0 0 auto;background:inherit}

/* Long matrices and forms should never force the whole page wider than the viewport. */
.content,.page-wrap{min-width:0;overflow-x:hidden}
.table-wrap{max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.permission-matrix{max-height:62vh;overflow:auto}
.permission-matrix table{min-width:760px}
.screen-matrix{max-height:62vh;overflow:auto}
.matrix-toolbar{position:sticky;top:0;z-index:4}
.formgrid{min-width:0}
.formgrid label{min-width:0}
input,select,textarea{min-width:0;max-width:100%}

/* The role/service selectors remain usable at normal 100% zoom. */
.matrix-toolbar select,.matrix-toolbar label select{width:100%;min-width:0}
.matrix-toolbar label{min-width:240px}

/* Dark mode uses teal as the structural accent while the red logo remains the identity mark. */
body.dark-mode{background:#0C1419;color:#E8F1F2}
body.dark-mode .main{background:#0C1419}
body.dark-mode .topbar{background:linear-gradient(90deg,#073B38,#0B5F59)!important}
body.dark-mode .nav-item .nav-icon{color:#2DD4BF!important}
body.dark-mode .nav-item:hover{background:#16312F!important;color:#F2FFFE!important}
body.dark-mode .nav-item.active{background:#123F3C!important;color:#E8FFFC!important;box-shadow:inset 0 0 0 1px #1D6861!important}
body.dark-mode .nav-item.active:before{background:#2DD4BF!important}
body.dark-mode .nav-item.active .nav-icon{color:#5EEAD4!important}
body.dark-mode .page-head h1,body.dark-mode .hero h1,body.dark-mode .section-title h2{color:#B9F2EB!important}
body.dark-mode .btn.primary{background:#0F766E!important;border-color:#159F94!important;color:#F5FFFE!important}
body.dark-mode .btn.primary:hover{background:#159F94!important}
body.dark-mode .kpi strong,body.dark-mode .card b{color:#5EEAD4!important}
body.dark-mode .badge.good{background:#15392D;color:#9FE5BE}
body.dark-mode .tag,body.dark-mode .pill{background:#143A37;color:#A9F0E8}
body.dark-mode .hero{background:linear-gradient(135deg,#16252B,#172C2B)!important;border-color:#29484A}
body.dark-mode .panel,body.dark-mode .screen-card,body.dark-mode .result-card,body.dark-mode .kpi{background:#152129;border-color:#2A4148}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#0B151B!important;border-color:#35525A!important;color:#F2FAFA!important}
body.dark-mode select option{background:#0B151B;color:#F2FAFA}
body.dark-mode .table-wrap th{background:#1B3036;color:#D9F1EF;border-color:#2D474E}
body.dark-mode .table-wrap td{background:#152129;color:#E3F0F0;border-color:#294149}
body.dark-mode .matrix-toolbar{background:#142326;border-color:#2B4B4D}
body.dark-mode .matrix-toolbar label{color:#D7ECEA}
body.dark-mode .permission-matrix{scrollbar-color:#3C6865 #142326}

@media(max-width:1050px){
  .app-shell{grid-template-columns:235px minmax(0,1fr)}
  .page-wrap{padding:22px}
  .matrix-toolbar{align-items:stretch;flex-direction:column}
  .matrix-toolbar label{max-width:none;width:100%;min-width:0}
  .matrix-actions{width:100%}
}
@media(max-width:820px){
  .sidebar{min-height:100vh}
  .nav-stack{padding-bottom:8px}
  .page-wrap{padding:16px}
  .formgrid{grid-template-columns:1fr}
  .matrix-actions .btn{flex:1;min-width:120px}
}