:root{
 --navy:#0b2f5b;--navy2:#0b527d;--blue:#0b6ff4;--blue2:#2b82f6;--green:#159957;
 --orange:#f2a30b;--red:#e6484f;--purple:#7b4de3;--teal:#0fa7a7;--ink:#10264a;
 --muted:#687b95;--line:#d9e5ef;--bg:#f3f8fc;--card:#fff;--soft:#eef5fb;
 --shadow:0 10px 28px rgba(17,54,91,.08);--radius:12px
}
*{box-sizing:border-box}html{font-size:15px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:245px 1fr}.sidebar{background:linear-gradient(180deg,#073c68,#064b75 62%,#0c6459);color:#fff;position:fixed;inset:0 auto 0 0;width:245px;display:flex;flex-direction:column;z-index:40}
.brand{display:flex;gap:10px;align-items:center;padding:18px 17px;border-bottom:1px solid #ffffff24}.brand img{width:56px;height:52px;object-fit:contain}.brand strong{display:block;font-size:14px}.brand small{display:block;font-size:11px;line-height:1.45;opacity:.9;margin-top:2px}
.nav{padding:14px 8px;display:grid;gap:4px;overflow:auto}.nav a{display:flex;align-items:center;gap:11px;text-decoration:none;padding:11px 12px;border-radius:8px;font-size:13px}.nav a:hover{background:#ffffff12}.nav a.active{background:var(--blue);box-shadow:0 8px 18px #002e6140}.nav .ico{width:24px;text-align:center;font-weight:800;font-size:17px}.nav .section{margin-top:8px;padding-top:10px;border-top:1px solid #ffffff25}
.sidebar-foot{margin-top:auto;padding:18px;background:#0b6a5933;border-top:1px solid #ffffff20}.sidebar-foot b{display:block;font-size:13px}.sidebar-foot span{font-size:11px;opacity:.8}
.main{grid-column:2;min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;position:sticky;top:0;z-index:30}.menu-btn{display:none}.title-wrap{min-width:300px}.title-wrap h1{font-size:20px;margin:0}.title-wrap small{color:var(--muted)}.top-search{margin-left:auto;max-width:360px;width:34%;position:relative}.top-search input{width:100%;height:39px;padding:0 12px 0 34px;border:1px solid var(--line);border-radius:8px;background:#f7fafc}.top-search .s{position:absolute;left:12px;top:10px;color:#7f91aa}
.top-user{margin-left:18px;display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#0e65ad;color:#fff;font-weight:700}.top-user strong{display:block;font-size:13px}.top-user small{display:block;font-size:11px;color:var(--muted)}
.content{padding:24px 26px 40px}.page-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}.page-head .block-icon{width:54px;height:54px}.page-head h2{margin:0;font-size:25px}.page-head p{margin:3px 0 0;color:var(--muted);font-size:13px}.page-head .spacer{margin-left:auto}.crumb{color:#6c819c;font-size:12px;margin-bottom:10px}
.block-icon{display:inline-grid;place-items:center;border-radius:9px;color:#fff;font-size:22px;font-weight:800;box-shadow:0 8px 16px #1539601a}.blue{background:linear-gradient(135deg,#0d6efd,#1b83ff)}.green{background:linear-gradient(135deg,#12a05b,#39b86e)}.orange{background:linear-gradient(135deg,#f09e07,#ffb42a)}.red{background:linear-gradient(135deg,#e5484e,#f26869)}.purple{background:linear-gradient(135deg,#7042dc,#8b62eb)}.teal{background:linear-gradient(135deg,#089d9f,#1bb9b6)}.slate{background:linear-gradient(135deg,#4f6688,#6f85a3)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:12px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 15px;display:flex;align-items:center;gap:11px;min-height:76px}.kpi .block-icon{width:42px;height:42px;font-size:18px;box-shadow:none}.kpi b{font-size:21px;display:block;line-height:1.05}.kpi span{font-size:11px;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 9px #16446d09}.card-head{padding:15px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.card-head h3{margin:0;font-size:16px}.card-head small{color:var(--muted)}.card-body{padding:17px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:15px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.admin-link{border:1px solid var(--line);border-radius:10px;padding:15px;text-decoration:none;display:flex;gap:12px;align-items:center;background:#fff}.admin-link:hover{border-color:#a9c9e7;box-shadow:var(--shadow)}.admin-link .block-icon{width:42px;height:42px;font-size:18px;flex:0 0 auto}.admin-link strong{display:block;font-size:13px}.admin-link small{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:3px}
.toolbar{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);padding:12px;border-radius:10px;margin-bottom:14px}.toolbar .grow{flex:1}.toolbar input,.toolbar select{height:38px}.table-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:12px}.table th{background:#f2f7fb;color:#425873;text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}.table td{padding:10px;border-bottom:1px solid #e8eff5;vertical-align:middle}.table tr:hover td{background:#fbfdff}.table a.link{color:#0b6ff4;font-weight:700;text-decoration:none}.muted{color:var(--muted)}.nowrap{white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 8px;font-size:11px;font-weight:700}.badge.green{background:#e4f6eb;color:#197141}.badge.orange{background:#fff2d6;color:#a26900}.badge.red{background:#ffe6e6;color:#a8262d}.badge.blue{background:#e6f1ff;color:#0c5fbe}.badge.purple{background:#eee7ff;color:#6338c5}.badge.slate{background:#edf1f6;color:#53657e}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}.btn{border:1px solid #bfd1e1;background:#fff;color:#1b4169;border-radius:7px;min-height:38px;padding:9px 14px;font-weight:700;font-size:12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:hover{filter:brightness(.98)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.success{background:#149a56;border-color:#149a56;color:#fff}.btn.danger{background:#fff;border-color:#ef7579;color:#c82333}.btn.warning{background:#fff;border-color:#efae35;color:#a96800}.btn.full{width:100%}.btn.sm{min-height:31px;padding:6px 9px;font-size:11px}
label{display:block;font-size:12px;font-weight:700;color:#3c5270;margin:0 0 6px}.required:after{content:" *";color:#e1454a}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.form-grid .full{grid-column:1/-1}input,select,textarea{font:inherit;color:var(--ink);border:1px solid #cbdbea;border-radius:7px;background:#fff;width:100%;padding:9px 10px}input,select{height:40px}textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid #0b6ff41c;border-color:#7db2ef}.form-note{font-size:11px;color:var(--muted);margin-top:4px}.form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:16px;border-top:1px solid var(--line);margin-top:18px}
.section-title{display:flex;gap:10px;align-items:center;margin-bottom:14px}.section-title .block-icon{width:40px;height:40px;font-size:17px}.section-title h3{margin:0;font-size:16px}.section-title p{margin:3px 0 0;color:var(--muted);font-size:11px}
.alert{padding:11px 13px;border-radius:8px;border:1px solid;font-size:12px;margin-bottom:14px}.alert.success{background:#e9f8ef;border-color:#bfe7ce;color:#176b3e}.alert.danger{background:#fff0f1;border-color:#f0c4c7;color:#9c2730}.alert.info{background:#eaf5ff;border-color:#c4e1fb;color:#275e8c}.alert.warning{background:#fff6e6;border-color:#f4ddb1;color:#8e620d}
.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.7fr);gap:15px}.asset-hero{display:grid;grid-template-columns:160px 1fr auto;gap:18px;align-items:start}.asset-photo{height:140px;border-radius:10px;background:linear-gradient(135deg,#dfe8f1,#f7fafc);display:grid;place-items:center;font-size:54px;color:#70839b}.asset-title h2{margin:0;font-size:25px}.asset-title p{margin:4px 0;color:var(--muted)}.asset-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.fact{display:flex;gap:8px}.fact .block-icon{width:34px;height:34px;font-size:15px;box-shadow:none}.fact small{display:block;color:var(--muted);font-size:10px}.fact b{font-size:12px}.qr{width:112px;border:1px solid var(--line);border-radius:9px;padding:10px;text-align:center;background:#fff}.qr-box{height:78px;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/14px 14px}.tabs{display:flex;overflow:auto;border-bottom:1px solid var(--line);background:#fff}.tabs a{padding:12px 16px;text-decoration:none;color:#536980;border-bottom:3px solid transparent;white-space:nowrap;font-size:12px}.tabs a.active{color:#0b6ff4;border-color:#0b6ff4;font-weight:700}
.timeline{display:grid;gap:14px}.event{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start}.event .circle{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eaf3fb;color:#0b6ff4;font-size:12px}.event b{font-size:12px}.event p{margin:3px 0;color:var(--muted);font-size:11px}.event time{font-size:10px;color:var(--muted)}
.approval-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:13px;display:flex;justify-content:flex-end;gap:10px}
.notification{position:relative}.notif-count{position:absolute;right:-6px;top:-5px;background:#e8454b;color:#fff;border-radius:20px;font-size:9px;padding:2px 6px}
.pagination{display:flex;gap:5px;justify-content:flex-end;padding:12px}.pagination a{border:1px solid var(--line);padding:6px 9px;border-radius:6px;text-decoration:none;font-size:11px}.pagination a.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.footer{padding:20px 27px;color:#70839a;font-size:10px;display:flex;justify-content:space-between;border-top:1px solid var(--line);background:#fff}
.stat-list{display:grid;gap:7px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #edf1f5;font-size:12px}.empty{padding:40px;text-align:center;color:var(--muted)}
.filebox{border:1px dashed #a9c6df;border-radius:9px;padding:20px;text-align:center;color:#627b95;background:#fafdff}
.desktop-only{}
/* Login */
.login-body{background:#eef5fb}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-brand{background:linear-gradient(160deg,#073c68,#07517f 58%,#0b6658);color:#fff;padding:70px;display:flex;flex-direction:column;justify-content:center}.login-brand img{width:120px;height:110px;object-fit:contain}.login-brand h1{font-size:27px;max-width:520px;margin:22px 0 8px}.login-brand h2{font-size:20px;margin:0 0 16px;font-weight:500}.login-brand p{font-size:14px;opacity:.9}.login-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.login-points span{background:#ffffff14;border:1px solid #ffffff20;padding:8px 10px;border-radius:7px;font-size:11px}.login-panel{display:grid;place-items:center;padding:30px}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;box-shadow:var(--shadow)}.login-mini-brand{display:none}.login-card h2{font-size:26px;margin:0 0 4px}.login-card>p{margin:0 0 24px;color:var(--muted)}.login-card label{margin-top:14px}.password-row{display:grid;grid-template-columns:1fr auto}.password-row input{border-radius:7px 0 0 7px}.password-row button{border:1px solid #cbdbea;border-left:0;background:#f5f8fb;border-radius:0 7px 7px 0}.login-card .btn{margin-top:22px}.login-foot{text-align:center;color:#8999aa;font-size:10px;margin-top:22px}
@media(max-width:1150px){.kpis{grid-template-columns:repeat(3,1fr)}.admin-grid{grid-template-columns:1fr 1fr}.asset-facts{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}}
@media(max-width:800px){
 .app{grid-template-columns:1fr}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.main{grid-column:1}.menu-btn{display:inline-flex;margin-right:10px}.topbar{padding:0 14px;height:62px}.title-wrap{min-width:0}.title-wrap h1{font-size:16px}.title-wrap small{display:none}.top-search{display:none}.top-user strong,.top-user small{display:none}.content{padding:16px 13px 30px}.page-head{align-items:flex-start}.page-head .block-icon{width:44px;height:44px}.page-head h2{font-size:21px}.page-head .spacer{display:none}.kpis{grid-template-columns:1fr 1fr}.grid-2,.grid-3,.admin-grid,.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.toolbar{flex-wrap:wrap}.toolbar>*{flex:1 1 145px}.asset-hero{grid-template-columns:90px 1fr}.asset-photo{height:90px}.qr{display:none}.asset-facts{grid-template-columns:1fr}.approval-actions{position:static;flex-direction:column}.approval-actions .btn{width:100%}.footer{display:block;text-align:center}.footer span{display:block;margin:4px}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-panel{padding:18px}.login-mini-brand{display:flex;gap:10px;align-items:center;margin-bottom:24px}.login-mini-brand img{width:55px}.login-mini-brand strong,.login-mini-brand small{display:block}.login-mini-brand small{color:var(--muted);font-size:10px}}
@media(max-width:480px){html{font-size:14px}.kpis{grid-template-columns:1fr}.page-head{gap:9px}.card-body{padding:14px}.table{font-size:11px}.desktop-only{display:none}.btn{padding:8px 10px}.top-user{margin-left:auto}}

/* v1.0.1 multi-role user administration */
.role-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}.role-check{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#f9fbfd;cursor:pointer}.role-check input{width:auto;height:auto;margin:3px 0 0}.role-check span{display:grid;gap:2px}.role-check small{color:var(--muted);font-weight:400;line-height:1.25}.role-check:has(input:checked){border-color:#76aefc;background:#eef6ff}.top-user small{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.role-checks{grid-template-columns:1fr}}

/* ======================================================================
   v1.0.2 UI/UX refinement — responsive, balanced, coat-of-arms branding
   ====================================================================== */
:root{
 --navy:#063b66;--navy2:#07517d;--blue:#1375e8;--blue2:#3288ed;
 --green:#128554;--orange:#e59a16;--red:#d94851;--purple:#7251cf;--teal:#14979a;
 --gold:#d2a22c;--ink:#11284a;--muted:#657b95;--line:#d7e3ee;--bg:#f4f8fb;
 --card:#fff;--soft:#edf4f9;--radius:12px;--shadow:0 8px 22px rgba(24,58,91,.07);
 --focus:0 0 0 3px rgba(19,117,232,.14)
}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#f2f7fb 0,#f7fafc 210px,#f4f8fb 100%);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
.ui-icon{width:1.2em;height:1.2em;display:block;flex:0 0 auto}

/* Coat-of-arms-led shell */
.sidebar{width:252px;background:linear-gradient(180deg,#063960 0%,#064b76 61%,#0b644d 100%);box-shadow:5px 0 22px rgba(9,45,77,.08)}
.app{grid-template-columns:252px minmax(0,1fr)}
.brand{min-height:96px;padding:15px 16px;gap:12px;border-bottom:1px solid rgba(255,255,255,.14);position:relative}
.brand:after{content:"";position:absolute;bottom:-1px;left:17px;width:54px;height:2px;background:var(--gold);border-radius:2px}
.brand img{width:61px;height:61px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.14))}
.brand strong{font-size:14px;line-height:1.25;letter-spacing:.01em}
.brand small{font-size:10.5px;line-height:1.45;color:#e7f0f7;opacity:1}
.nav{padding:13px 9px;gap:3px}
.nav a{min-height:43px;padding:10px 12px;border-radius:9px;color:#edf5fb;font-size:12.5px;transition:background .16s ease,transform .16s ease}
.nav a:hover{background:rgba(255,255,255,.09)}
.nav a.active{background:linear-gradient(135deg,#0c70e4,#187ff0);box-shadow:0 7px 17px rgba(0,44,92,.27)}
.nav .ico{width:24px;height:24px;display:grid;place-items:center;font-size:18px;color:#fff}
.nav .ico .ui-icon{width:19px;height:19px}
.sidebar-foot{padding:17px 18px;background:rgba(0,0,0,.07);border-top:1px solid rgba(255,255,255,.12)}
.sidebar-foot b{font-size:12.5px;line-height:1.4}.sidebar-foot span{display:block;margin-top:4px;font-size:10px;line-height:1.35;color:#d9e9ed;opacity:1}

/* Header */
.topbar{height:68px;padding:0 24px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(24,60,91,.04)}
.topbar-crest{display:none;width:36px;height:36px;object-fit:contain;margin-right:10px}
.title-wrap h1{font-size:18px;line-height:1.15;letter-spacing:-.01em}
.title-wrap small{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.02em;color:#637994}
.top-search{max-width:330px;width:30%}.top-search input{height:40px;border-radius:9px;background:#f4f8fb;border-color:#d9e5ef;padding-left:36px}
.notification-btn{width:39px;padding:0;border-radius:9px;color:#1c5585;background:#f8fbfd}.notification-btn .ui-icon{width:17px;height:17px}
.top-user{gap:9px;margin-left:12px}.avatar{width:37px;height:37px;background:linear-gradient(135deg,#0c65ae,#0a4f8e);box-shadow:0 4px 10px rgba(9,77,128,.18)}
.top-user strong{font-size:12.5px}.top-user small{font-size:10px;max-width:210px}.top-user>a.btn{min-height:34px;padding:7px 10px}

/* Main content rhythm */
.content{max-width:1700px;margin:0 auto;padding:22px 25px 38px}
.crumb{margin-bottom:9px;color:#71859d;font-size:11px}
.page-head{min-height:62px;margin-bottom:16px;gap:13px;align-items:center}
.page-head .block-icon{width:50px;height:50px;border-radius:11px;font-size:22px;box-shadow:0 7px 16px rgba(20,62,99,.12)}
.page-head .block-icon .ui-icon{width:24px;height:24px}
.page-head-copy{min-width:0}.page-head h2{font-size:23px;line-height:1.15;letter-spacing:-.02em}.page-head p{font-size:12.5px;line-height:1.4;max-width:760px}
.page-head .spacer{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* Color blocks use brand-compatible tones */
.block-icon.blue,.blue.block-icon{background:linear-gradient(135deg,#116fe0,#2a88ef)}
.block-icon.green,.green.block-icon{background:linear-gradient(135deg,#117b4d,#24a368)}
.block-icon.orange,.orange.block-icon{background:linear-gradient(135deg,#d98a0d,#f0aa25)}
.block-icon.red,.red.block-icon{background:linear-gradient(135deg,#ca3f49,#e6575f)}
.block-icon.purple,.purple.block-icon{background:linear-gradient(135deg,#6844c4,#805ee0)}
.block-icon.teal,.teal.block-icon{background:linear-gradient(135deg,#0f858a,#19a7a7)}
.block-icon.slate,.slate.block-icon{background:linear-gradient(135deg,#536a86,#70849c)}

/* Cards, grids and KPI proportions */
.card,.table-card,.kpi,.admin-link,.toolbar{border-color:var(--line);box-shadow:0 2px 8px rgba(19,58,89,.035)}
.card{border-radius:12px;overflow:hidden}.card-head{min-height:50px;padding:13px 16px;background:linear-gradient(180deg,#fff,#fcfdfe)}.card-head h3{font-size:15px}.card-body{padding:16px}
.grid-2,.grid-3,.admin-grid{align-items:stretch}.grid-2>* ,.grid-3>* ,.admin-grid>*{min-width:0}
.grid-2{gap:14px}.grid-3{gap:14px}.admin-grid{gap:11px}
.kpis{gap:10px;margin-bottom:15px}.kpi{min-height:78px;padding:13px 14px;border-radius:11px}.kpi .block-icon{width:43px;height:43px;border-radius:10px}.kpi .block-icon .ui-icon{width:20px;height:20px}.kpi b{font-size:20px}.kpi span{font-size:10.5px;line-height:1.25}
.admin-link{min-height:88px;padding:13px 14px;transition:border-color .16s,transform .16s,box-shadow .16s}.admin-link:hover{transform:translateY(-1px);border-color:#a8c9e7;box-shadow:0 8px 18px rgba(19,70,110,.07)}.admin-link .block-icon{width:43px;height:43px;border-radius:10px}.admin-link .block-icon .ui-icon{width:20px;height:20px}.admin-link strong{font-size:12.5px}.admin-link small{font-size:10.5px;line-height:1.35}

/* Forms */
.form-grid{gap:13px 16px}.form-grid>*{min-width:0}
label{font-size:11.5px;color:#334e70;margin-bottom:5px}
input,select,textarea{border-color:#cbdbea;border-radius:8px;background:#fff;transition:border-color .13s,box-shadow .13s}
input,select{height:41px;padding:8px 10px}textarea{min-height:88px;padding:10px}
input:hover,select:hover,textarea:hover{border-color:#b8ccdd}
input:focus,select:focus,textarea:focus{outline:none;border-color:#68a5eb;box-shadow:var(--focus)}
.form-note{font-size:10.5px;line-height:1.35}.form-actions{gap:8px;margin-top:16px;padding-top:14px}
.filebox{padding:18px;border-radius:10px;background:#f9fcfe}

/* Buttons: consistent size and hierarchy */
.btn{min-height:39px;padding:8px 13px;border-radius:8px;border-color:#bdcfdf;font-size:11.5px;line-height:1.1;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;white-space:nowrap}
.btn .ui-icon{width:16px;height:16px}.btn:hover{filter:none;transform:translateY(-1px);box-shadow:0 5px 12px rgba(18,58,91,.08)}
.btn.primary{background:linear-gradient(135deg,#116fe0,#177ceb);border-color:#116fe0}.btn.success{background:linear-gradient(135deg,#117c4c,#1b985b);border-color:#117c4c}.btn.danger{background:#fff5f5;border-color:#e78d92;color:#b62f39}.btn.warning{background:#fff9ec;border-color:#e7b45b;color:#96620c}.btn.sm{min-height:32px;padding:6px 9px;font-size:10.5px}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Tables */
.table-card{border-radius:11px}.table-wrap{scrollbar-width:thin;scrollbar-color:#bdccda transparent}.table{font-size:11.5px}.table th{height:39px;padding:9px 10px;background:#eef4f8;color:#3d5672;font-size:10.5px;letter-spacing:.01em}.table td{padding:9px 10px;line-height:1.35}.table tbody tr:last-child td{border-bottom:0}.table tr:hover td{background:#f8fbfd}
.toolbar{min-height:62px;padding:10px 11px;border-radius:11px;gap:8px}.toolbar input,.toolbar select{height:39px}.toolbar .grow{min-width:210px}
.badge{padding:4px 8px;font-size:10px;border-radius:999px}.badge.green{background:#e4f5eb;color:#12663e}.badge.orange{background:#fff0d3;color:#946000}.badge.red{background:#fde5e7;color:#a82b34}.badge.blue{background:#e4efff;color:#145caa}.badge.purple{background:#eee8fb;color:#5c3fb0}.badge.slate{background:#ebf0f5;color:#52677c}

/* Asset profile and workflow pages */
.asset-hero{grid-template-columns:150px minmax(0,1fr) 105px;gap:17px}.asset-photo{height:132px;border-radius:11px}.asset-title h2{font-size:23px}.asset-facts{gap:9px;margin-top:14px}.fact{align-items:center}.fact .block-icon{width:35px;height:35px;border-radius:9px}.fact .block-icon .ui-icon{width:17px;height:17px}.fact small{font-size:9.5px}.fact b{font-size:11.5px}.qr{width:105px}
.tabs{border-radius:10px 10px 0 0}.tabs a{padding:11px 14px;font-size:11.5px}.approval-actions{gap:8px;padding:12px 15px;box-shadow:0 -7px 18px rgba(20,52,84,.05)}
.event{grid-template-columns:30px minmax(0,1fr) auto}.section-title{margin-bottom:12px}.section-title .block-icon{width:38px;height:38px}.section-title .block-icon .ui-icon{width:18px;height:18px}.section-title h3{font-size:15px}.section-title p{font-size:10.5px}

/* Footer */
.footer{padding:17px 2px 0;margin-top:24px;border-top:1px solid var(--line);background:transparent;color:#72849a;font-size:9.5px}

/* Login has the same institutional visual language */
.login-body{background:#eff5f9}.login-brand{background:linear-gradient(155deg,#05375f,#07507c 57%,#0a644d);padding:58px 7vw}.login-brand img{width:132px;height:118px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.16))}.login-brand h1{font-size:26px;line-height:1.25}.login-brand h2{font-size:19px}.login-brand p{max-width:520px;line-height:1.55}.login-points span{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.09)}.login-card{border-radius:14px;padding:30px;box-shadow:0 18px 44px rgba(17,58,91,.09)}.login-card h2{font-size:24px}.login-card .btn{min-height:43px}

/* Medium desktop/laptop refinement */
@media(max-width:1320px){
 .sidebar{width:232px}.app{grid-template-columns:232px minmax(0,1fr)}.brand{padding-left:13px}.brand img{width:54px;height:54px}.brand strong{font-size:13px}.content{padding-left:21px;padding-right:21px}.kpis{grid-template-columns:repeat(3,minmax(150px,1fr))}.top-search{width:28%}.admin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
 .sidebar{width:218px}.app{grid-template-columns:218px minmax(0,1fr)}.brand small{font-size:9.5px}.nav a{padding-left:10px;padding-right:10px}.content{padding-left:18px;padding-right:18px}.admin-grid{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}.top-search{display:none}.asset-facts{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}
}

/* Tablet and mobile: preserve full transaction capability */
@media(max-width:860px){
 .app{display:block}.sidebar{width:min(285px,86vw);transform:translateX(-105%);transition:transform .2s ease;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:12px 0 28px rgba(0,32,60,.23)}.main{display:block}.topbar{height:62px;padding:0 12px}.menu-btn{display:inline-flex;width:38px;padding:0}.topbar-crest{display:block}.title-wrap{min-width:0}.title-wrap h1{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-wrap small{display:none}.top-user{margin-left:auto}.top-user strong,.top-user small,.top-user>a.btn{display:none}.content{padding:15px 12px 27px}.page-head{align-items:flex-start;flex-wrap:wrap;min-height:0}.page-head .block-icon{width:44px;height:44px}.page-head .block-icon .ui-icon{width:21px;height:21px}.page-head h2{font-size:20px}.page-head p{font-size:11.5px}.page-head .spacer{width:100%;margin-left:57px;justify-content:flex-start}.kpis{grid-template-columns:1fr 1fr}.grid-2,.grid-3,.admin-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.toolbar{flex-wrap:wrap}.toolbar>*{flex:1 1 150px}.toolbar .grow{flex-basis:100%}.asset-hero{grid-template-columns:92px minmax(0,1fr)}.asset-photo{height:92px}.qr{display:none}.asset-facts{grid-template-columns:1fr}.approval-actions{position:static;display:grid;grid-template-columns:1fr;gap:7px}.approval-actions .btn{width:100%}.footer{display:block;text-align:center}.footer span{display:block;margin:4px}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-panel{padding:16px}.login-mini-brand{display:flex;gap:11px;align-items:center;margin-bottom:22px}.login-mini-brand img{width:58px;height:52px;object-fit:contain}.login-mini-brand strong,.login-mini-brand small{display:block}.login-mini-brand strong{font-size:12.5px}.login-mini-brand small{font-size:10px;color:var(--muted)}
}
@media(max-width:560px){
 html{font-size:14px}.content{padding:13px 10px 24px}.topbar-crest{width:32px;height:32px;margin-right:7px}.page-head{gap:9px}.page-head .spacer{margin-left:0}.page-actions .btn{flex:1 1 calc(50% - 5px)}.kpis{grid-template-columns:1fr}.kpi{min-height:70px}.card-body{padding:13px}.card-head{padding:12px 13px}.btn{min-height:40px}.form-actions{display:grid;grid-template-columns:1fr}.form-actions .btn{width:100%}.table{font-size:10.5px;min-width:720px}.desktop-only{display:none}.top-user{margin-left:7px}.notification-btn{width:36px}.asset-hero{grid-template-columns:1fr}.asset-photo{width:100%;height:150px}.asset-title h2{font-size:21px}.tabs a{padding:10px 12px}.admin-link{min-height:82px}.role-checks{grid-template-columns:1fr}
}

/* ==========================================================
   v1.0.3 brand + user administration refinement
   Palette derived from the official Puntland State of Somalia coat of arms.
   ========================================================== */
:root{
 --navy:#0b2f5b;--navy2:#0a5879;--blue:#2f93cf;--blue2:#4ca7dc;--green:#148b31;
 --orange:#d3a02c;--gold:#d3a02c;--red:#c94b53;--purple:#2d7fa8;--teal:#147a71;--ink:#0b3154;
 --muted:#637990;--line:#d6e3e9;--bg:#f4f8fb;--soft:#edf5f8;
}
body{background:var(--bg)}
.sidebar{background:linear-gradient(180deg,#0b2f5b 0%,#075579 62%,#117047 100%)}
.brand{overflow:hidden;min-height:91px;padding:15px 14px;gap:11px}
.brand img{display:block!important;width:58px!important;height:56px!important;max-width:58px!important;max-height:56px!important;min-width:58px!important;object-fit:contain!important;flex:0 0 58px!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
.brand strong{font-size:13.5px;line-height:1.2}.brand small{font-size:10px;line-height:1.35}
.nav a.active{background:linear-gradient(90deg,#2c8fc9,#2f93cf);box-shadow:inset 3px 0 0 var(--gold),0 7px 17px rgba(0,38,70,.20)}
.nav a:hover{background:rgba(255,255,255,.10)}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.20)}
.topbar{border-bottom-color:#d3e0e7}
.topbar-crest{display:none!important;width:36px!important;height:34px!important;max-width:36px!important;max-height:34px!important;object-fit:contain!important;flex:0 0 36px!important}
.btn.primary{background:linear-gradient(135deg,#267fba,#2f93cf);border-color:#267fba;color:#fff}
.btn.success{background:linear-gradient(135deg,#117a2c,#148b31);border-color:#117a2c;color:#fff}
.btn.warning{background:#fff9e9;border-color:#d9b45b;color:#8d6512}
.block-icon.blue,.blue.block-icon{background:linear-gradient(135deg,#287fb8,#3b9cd3)}
.block-icon.green,.green.block-icon{background:linear-gradient(135deg,#117c2d,#1a9738)}
.block-icon.orange,.orange.block-icon{background:linear-gradient(135deg,#c18b1a,#dda93a)}
.block-icon.purple,.purple.block-icon{background:linear-gradient(135deg,#236c95,#3b90b8)}
.block-icon.teal,.teal.block-icon{background:linear-gradient(135deg,#116c65,#1c8d80)}
.tabs a.active{color:#237faf;border-color:#2f93cf}.table a.link{color:#237faf}
input:focus,select:focus,textarea:focus{border-color:#66a9cf;box-shadow:0 0 0 3px rgba(47,147,207,.13)}
.badge.blue{background:#e5f2fa;color:#1f6e9c}.badge.green{background:#e5f4e8;color:#17652a}.badge.orange{background:#fbf1d8;color:#8d6413}

/* Lock every logo surface to an explicit box so user-supplied artwork cannot overflow. */
.login-brand img{width:132px!important;height:116px!important;max-width:132px!important;max-height:116px!important;object-fit:contain!important}
.login-mini-brand img{width:58px!important;height:52px!important;max-width:58px!important;max-height:52px!important;object-fit:contain!important}
.logo-preview-box img{display:block;max-width:100%;max-height:210px;width:auto;height:auto;object-fit:contain}

/* Compact, organized user/role administration. */
.user-admin-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(410px,.78fr);gap:14px;align-items:start}
.user-edit-card{position:sticky;top:86px}
.user-fields{grid-template-columns:1fr 1fr}.user-fields .full{grid-column:1/-1}
.role-picker-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:15px 0 7px;padding-top:13px;border-top:1px solid var(--line)}
.role-picker-head label{font-size:12px}.role-picker-head small{display:block;color:var(--muted);font-size:9.8px;font-weight:400;margin-top:2px}.role-picker-head>span{font-size:9.5px;color:var(--muted);white-space:nowrap}
.role-checks,.role-checks-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:0}
.role-check{display:grid!important;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start!important;min-height:54px;padding:8px 9px!important;border:1px solid var(--line);border-radius:9px;background:#fbfdfe;cursor:pointer;overflow:hidden}
.role-check.role-admin{grid-column:1/-1;background:#eef7fc;border-color:#a9d0e5}
.role-check input[type="checkbox"],.role-check .role-box{appearance:auto!important;-webkit-appearance:checkbox!important;width:17px!important;height:17px!important;min-width:17px!important;max-width:17px!important;min-height:17px!important;max-height:17px!important;padding:0!important;margin:2px 0 0!important;border:initial!important;border-radius:3px!important;box-shadow:none!important;display:block!important}
.role-check span{display:block!important;min-width:0}.role-check b{display:block;font-size:10.8px;line-height:1.25;color:#173a5b}.role-check small{display:block;margin-top:2px;color:var(--muted);font-size:9px;line-height:1.27;font-weight:400;overflow-wrap:anywhere}
.role-check:has(input:checked){background:#eaf6ed;border-color:#77b98a;box-shadow:inset 3px 0 0 var(--green)}
.role-check.role-admin:has(input:checked){background:#e8f4fb;border-color:#7cb8d7;box-shadow:inset 3px 0 0 var(--blue)}
.role-help{margin-top:8px;padding:8px 10px;border-radius:8px;background:#f7fafc;border:1px solid #e0e9ef;color:#60778c;font-size:9.5px;line-height:1.35}
.role-tags{display:flex;flex-wrap:wrap;gap:4px}.role-tag{display:inline-flex;align-items:center;background:#e8f3f9;color:#1f668d;border:1px solid #d1e6f1;border-radius:999px;padding:3px 7px;font-size:9.5px;font-weight:700;line-height:1.2}

/* Dedicated Logo & Branding page. */
.branding-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:14px;align-items:start}
.logo-branding-preview{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center}
.logo-preview-box{height:205px;border:1px dashed #b9cfdb;border-radius:12px;background:linear-gradient(135deg,#f9fcfd,#eef6f8);display:grid;place-items:center;padding:18px;overflow:hidden}
.logo-branding-preview h3{margin:0 0 5px;font-size:18px}.logo-branding-preview p{font-size:11px;line-height:1.45;max-width:520px}
.brand-name-preview{margin-top:15px;padding:12px 14px;border-left:4px solid var(--gold);background:#f7fafc;border-radius:0 9px 9px 0}.brand-name-preview strong,.brand-name-preview span{display:block}.brand-name-preview strong{font-size:14px}.brand-name-preview span{font-size:10.5px;color:var(--muted);margin-top:3px}
.logo-upload-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.palette-swatch{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:9px;background:#fbfdfe}.palette-swatch i{width:35px;height:35px;border-radius:8px;display:block;flex:0 0 35px}.palette-swatch span,.palette-swatch b,.palette-swatch small{display:block}.palette-swatch b{font-size:10.5px}.palette-swatch small{font-size:9px;color:var(--muted);margin-top:2px}

@media(max-width:1280px){.user-admin-grid{grid-template-columns:minmax(0,1.3fr) minmax(390px,.8fr)}.branding-layout{grid-template-columns:1fr}.user-edit-card{position:static}}
@media(max-width:980px){.user-admin-grid{grid-template-columns:1fr}.user-edit-card{position:static}.logo-branding-preview{grid-template-columns:160px minmax(0,1fr)}.logo-preview-box{height:160px}.role-checks,.role-checks-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.topbar-crest{display:block!important}.brand img{width:56px!important;height:54px!important;max-width:56px!important;max-height:54px!important}.branding-layout{grid-template-columns:1fr}}
@media(max-width:560px){.role-checks,.role-checks-compact{grid-template-columns:1fr}.role-check.role-admin{grid-column:auto}.user-fields{grid-template-columns:1fr}.user-fields .full{grid-column:auto}.logo-branding-preview{grid-template-columns:1fr;text-align:center}.logo-preview-box{height:150px}.brand-name-preview{text-align:left}.palette-grid{grid-template-columns:1fr}}

/* v1.0.4 updater reliability */
.btn:disabled{opacity:.52;cursor:not-allowed;filter:none}.text-success{color:var(--green)}.text-danger{color:var(--red)}
.mini-panel{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#f9fcfe;font-size:11.5px;display:flex;gap:8px;align-items:center;min-height:42px}.mini-panel b{color:var(--green)}


/* ==========================================================
   v1.0.5 brand spacing and presentation cleanup
   ========================================================== */
.app{grid-template-columns:260px minmax(0,1fr)}
.sidebar{width:260px}
.brand{min-height:102px;padding:16px 15px;gap:12px;align-items:flex-start}
.brand>div{min-width:0;padding-top:2px}
.brand img{width:66px!important;height:60px!important;max-width:66px!important;max-height:60px!important;min-width:66px!important;flex:0 0 66px!important;object-fit:contain!important;background:#fff!important;border-radius:9px!important;padding:4px!important;box-shadow:0 4px 12px rgba(0,0,0,.16)!important;filter:none!important}
.brand strong{font-size:14px;line-height:1.23;margin:0 0 5px;letter-spacing:.01em}
.brand small{font-size:10.2px;line-height:1.42;margin:0;opacity:.94}
.sidebar-foot{padding:16px 15px}
.login-brand img{background:#fff!important;padding:9px!important;border-radius:14px!important;box-shadow:0 10px 26px rgba(0,0,0,.16)!important;filter:none!important}
.login-mini-brand img,.topbar-crest{background:#fff!important;padding:3px!important;border-radius:7px!important;box-shadow:0 2px 7px rgba(14,45,72,.10)!important}
.logo-preview-box{background:#fff!important;border-style:solid!important}
.logo-preview-box img{background:#fff!important;border-radius:8px;padding:4px}
@media(max-width:1320px) and (min-width:1081px){.sidebar{width:244px}.app{grid-template-columns:244px minmax(0,1fr)}.brand{padding-left:13px;padding-right:12px}.brand img{width:60px!important;height:56px!important;max-width:60px!important;max-height:56px!important;min-width:60px!important;flex-basis:60px!important}.brand strong{font-size:13.3px}.brand small{font-size:9.7px}}
@media(max-width:1080px) and (min-width:861px){.sidebar{width:224px}.app{grid-template-columns:224px minmax(0,1fr)}.brand{padding:14px 11px;gap:9px}.brand img{width:52px!important;height:50px!important;max-width:52px!important;max-height:50px!important;min-width:52px!important;flex-basis:52px!important}.brand strong{font-size:12.5px}.brand small{font-size:9px}}
@media(max-width:860px){.sidebar{width:min(285px,86vw)}.brand{min-height:96px;padding:15px 13px}.brand img{width:62px!important;height:58px!important;max-width:62px!important;max-height:58px!important;min-width:62px!important;flex-basis:62px!important}}

/* ==========================================================
   v1.0.6 logo containment + update-cache reliability
   ========================================================== */
.brand-logo-frame{width:66px!important;height:60px!important;max-width:66px!important;max-height:60px!important;overflow:hidden!important;flex:0 0 66px!important;display:grid!important;place-items:center!important;background:#fff!important;border-radius:9px!important;padding:4px!important;box-shadow:0 4px 12px rgba(0,0,0,.16)!important}
.brand-logo-frame>img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-width:0!important;object-fit:contain!important;margin:0!important;padding:0!important;border-radius:5px!important;box-shadow:none!important;filter:none!important}
/* The official crest is deliberately not duplicated in the desktop topbar. */
.topbar-crest{display:none!important;max-width:36px!important;max-height:34px!important;overflow:hidden!important}
@media(max-width:1080px) and (min-width:861px){.brand-logo-frame{width:52px!important;height:50px!important;max-width:52px!important;max-height:50px!important;flex-basis:52px!important}}
@media(max-width:860px){.brand-logo-frame{width:62px!important;height:58px!important;max-width:62px!important;max-height:58px!important;flex-basis:62px!important}}

/* ==========================================================
   v1.0.7 final interface audit — rhythm, symmetry, responsiveness
   ========================================================== */
:root{
 --page-gap:14px;--content-gutter:clamp(14px,2vw,28px);--control-h:40px;
}
body{overflow-x:hidden}
.main{min-width:0}
.content{width:100%;max-width:1760px;padding:22px var(--content-gutter) 36px}
.content>*{min-width:0}
.section-gap{margin-top:var(--page-gap)!important}.compact-gap{margin-top:10px!important}
.flush-title{margin-top:0!important}.card-head-actions,.card-head-meta{margin-left:auto}
.card-head-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.card-head-meta{white-space:nowrap}
.grid-2,.grid-3,.admin-grid,.split{align-items:start}
.grid-2>.card,.grid-3>.card,.admin-grid>.card,.split>.card{width:100%;min-width:0}
.card,.table-card,.toolbar{width:100%}
.card-head{justify-content:flex-start}.card-head>h3{min-width:0}
.card-body>:first-child{margin-top:0}.card-body>:last-child{margin-bottom:0}
.stat-row>span:first-child{min-width:0;padding-right:12px}.stat-row>b,.stat-row>small{flex:0 0 auto;text-align:right}
.money-input{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px}
.asset-barcode{display:block;width:100%;height:75px;object-fit:contain}
.verification-summary{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.summary-title{margin:3px 0}.summary-status{margin-left:auto}
.inline-action-form{display:flex;gap:6px;align-items:center;min-width:260px}.inline-action-form input{height:32px;min-width:150px}.inline-action-form .btn{flex:0 0 auto}
.table-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap}.inline-form{margin:0}
.approval-select{width:128px;min-width:128px}.test-email-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;max-width:620px;align-items:center}
.no-border{border-top:0!important}.no-margin{margin-top:0!important;padding-top:0!important}
.form-grid+.form-note{margin-top:8px}
.form-grid .field-actions{display:flex;align-items:end;gap:8px}.form-grid .field-actions>.btn:first-child{flex:1}
.form-note.block{display:block;margin-top:9px}
.form-grid.compact-form{margin-top:12px}

/* Page header remains balanced with long titles and multiple actions. */
.page-head{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:13px;align-items:center}
.page-head .spacer{margin-left:0}.page-head-copy{overflow:hidden}.page-head h2,.page-head p{overflow-wrap:anywhere}
.page-actions{max-width:640px}

/* Header sizing: preserve the title, search and account controls without collisions. */
.topbar{gap:12px}.title-wrap{min-width:210px;max-width:410px;flex:0 1 410px}.top-search{margin-left:auto;flex:1 1 260px;width:auto;min-width:190px;max-width:360px}
.top-user{flex:0 0 auto;min-width:0}.top-user>div:nth-child(2){min-width:0;max-width:235px}.top-user strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-user small{max-width:235px}

/* Toolbars and filters use the available width evenly. */
.toolbar{align-items:center}.toolbar>select{max-width:220px}.toolbar>.btn{flex:0 0 auto}.toolbar>.muted{line-height:1.35}

/* Long tables stay usable on laptops and scroll predictably on small screens. */
.table-wrap{width:100%;overflow:auto;overscroll-behavior-x:contain}.table th{position:sticky;top:0;z-index:1}.table td{max-width:360px;overflow-wrap:anywhere}.table td .badge{white-space:nowrap}

/* Modal forms used by maintenance and incident pages. */
dialog{border:0;border-radius:13px;padding:0;box-shadow:0 24px 70px rgba(7,44,73,.24);color:var(--ink);width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 30px);overflow:auto}
dialog::backdrop{background:rgba(5,36,61,.42);backdrop-filter:blur(2px)}.dialog-form{padding:18px}.dialog-form h3{margin:0 0 14px}.dialog-form label:not(:first-of-type){margin-top:10px}

/* Approval detail summary and action strip. */
.approval-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center}.approval-summary .summary-cell{min-width:0}.approval-summary .summary-cell.end{text-align:right}.approval-summary small{display:block}.approval-summary h3,.approval-summary b{display:block;margin:4px 0 0;overflow-wrap:anywhere}.approval-divider{border:0;border-top:1px solid var(--line);margin:15px 0}.approval-actions input[name="comment"]{flex:1 1 280px;max-width:420px}

/* Report cards and administration cards align as a deliberate grid. */
.admin-grid{grid-auto-rows:1fr}.admin-link{height:100%}.admin-link>div{min-width:0}.admin-link strong,.admin-link small{overflow-wrap:anywhere}
.management-summary h2{margin:5px 0 0;font-size:22px}.management-summary>div{padding:3px 0}
.master-grid .card{height:100%}.master-grid .card-body{display:flex;flex-direction:column}.master-grid form{margin-top:auto;padding-top:14px}

/* Backup/update pages: make readiness and protection blocks compact and even. */
.mini-panel{height:100%;line-height:1.3}.update-readiness .stat-row{min-height:40px}.update-history td:nth-child(5){min-width:260px}
.filebox input[type="file"]{height:auto;padding:8px;background:#fff}.filebox p{margin:8px 0 0;font-size:10.5px;line-height:1.4}

/* Empty states should not create oversized blank regions. */
.empty{padding:28px 18px}.stat-list .empty{padding:22px 10px}

/* Desktop/laptop breakpoints */
@media(max-width:1360px){
 .top-user>div:nth-child(2){max-width:180px}.top-user small{max-width:180px}.top-search{max-width:300px}.page-actions{max-width:520px}
 .user-admin-grid{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr)}
}
@media(max-width:1160px){
 .title-wrap{flex-basis:300px}.title-wrap h1{font-size:17px}.top-search{max-width:250px}.top-user>a.btn{display:none}
 .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.asset-hero{grid-template-columns:125px minmax(0,1fr) 100px}.asset-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .approval-summary{grid-template-columns:1fr 1fr}.approval-summary .summary-cell.end{text-align:left}
}
@media(max-width:980px){
 .top-search{display:none}.title-wrap{max-width:none;flex:1 1 auto}.top-user>div:nth-child(2){max-width:150px}.top-user small{max-width:150px}
 .split,.grid-2,.user-admin-grid,.branding-layout{grid-template-columns:1fr}.user-edit-card{position:static}.master-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
 .page-head{grid-template-columns:44px minmax(0,1fr)}
 .page-head .spacer{display:flex!important;grid-column:1/-1;width:100%;margin:0!important;justify-content:flex-start}.page-actions .btn{flex:0 1 auto}
 .top-user>div:nth-child(2){display:none}.top-user{margin-left:auto}.notification-btn{margin-left:auto}
 .toolbar>select{max-width:none}.verification-summary{align-items:flex-start}.summary-status{margin-left:0;width:100%}
 .approval-summary{grid-template-columns:1fr 1fr}.table-actions{justify-content:flex-start}
 .master-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
 .topbar{gap:8px}.title-wrap h1{font-size:14px}.notification-btn{width:35px;min-height:35px}.avatar{width:34px;height:34px;font-size:11px}
 .page-head{grid-template-columns:40px minmax(0,1fr);gap:10px}.page-head .block-icon{width:40px;height:40px}.page-head h2{font-size:19px}.page-head p{font-size:11px}
 .page-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:7px}.page-actions .btn{width:100%;white-space:normal;text-align:center}.page-actions .btn:only-child{grid-column:1/-1}
 .kpis{grid-template-columns:1fr}.toolbar{display:grid;grid-template-columns:1fr 1fr}.toolbar>*{min-width:0;max-width:none!important;width:100%}.toolbar>.grow,.toolbar>input.grow,.toolbar>.muted{grid-column:1/-1}.toolbar>.muted{text-align:left}
 .table{min-width:680px}.form-grid{gap:12px}.money-input{grid-template-columns:82px minmax(0,1fr)}
 .approval-summary{grid-template-columns:1fr}.approval-summary .summary-cell.end{text-align:left}.approval-actions{padding:10px 0;background:transparent;border-top:0;box-shadow:none}.approval-actions input[name="comment"]{width:100%;max-width:none}
 .test-email-form{grid-template-columns:1fr}.test-email-form .btn{width:100%}.inline-action-form{min-width:240px}.role-checks,.role-checks-compact{grid-template-columns:1fr}
 .footer{padding-top:14px;margin-top:20px}
}
.detail-line{display:block}.label-gap{margin-top:10px}.role-label{margin:0}.approval-return-note{margin:0;flex:1}.admin-overview-grid{margin-bottom:14px}

/* Puntland OAG v1.0.1 refinements */
:root{--navy:#0b2f5b;--brand-blue:#2e97d4;--brand-green:#138a50;--brand-gold:#d6a02b}
.select-col{width:38px;text-align:center}.select-col input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand-blue)}
.brand-name-preview span{color:#4f6378}.brand-logo-frame,.logo-preview-box{background:#fff!important}
@media(max-width:760px){.select-col{width:32px}.table-card .card-head{gap:10px;align-items:center;flex-wrap:wrap}}