
/* SADAF V28 — Signature Enterprise UI
   Visual layer only. Keeps existing application logic intact. */
:root{
 --v27-bg:#f5f7f8; --v27-surface:#fff; --v27-surface2:#f8fafb;
 --v27-text:#16201e; --v27-muted:#71807b; --v27-line:#e3e9e7;
 --v27-brand:#1f6b5b; --v27-brand2:#2d8170; --v27-soft:#e9f3f0;
 --v27-danger:#b42318; --v27-warn:#9a5b00;
 --v27-radius:16px; --v27-shadow:0 5px 22px rgba(17,39,34,.045);
 --v27-sidebar:248px;
}
html{background:var(--v27-bg)}
body.cb-v10{background:var(--v27-bg)!important;color:var(--v27-text)!important;font-family:Inter,"Noto Sans Arabic",system-ui,sans-serif!important}
body.cb-v10:before{display:none!important}

/* app frame */
.cb-v10 #cb-sidebar{
 width:var(--v27-sidebar)!important;background:#0d211c!important;
 border-inline-end:1px solid rgba(255,255,255,.07)!important;
 box-shadow:8px 0 28px rgba(8,28,23,.07)!important;
}
.cb-v10 #cb-sidebar>div:first-child{height:72px!important;padding:0 18px!important}
.cb-v10 #cb-sidebar>div:first-child>div:first-child{
 width:40px!important;height:40px!important;border-radius:12px!important;
 background:#d9ebe6!important;color:#195246!important;
}
.cb-v10 #cb-sidebar .cb-sidebar-nav{padding:14px 11px!important}
.cb-v10 .cb-nav-section{
 margin:18px 9px 6px!important;color:#70847f!important;
 font-size:8px!important;letter-spacing:.14em!important;
}
.cb-v10 .cb-nav-link{
 min-height:40px!important;padding:7px 9px!important;margin:2px 0!important;
 border-radius:10px!important;gap:9px!important;color:#afbfbb!important;
 font-size:11px!important;font-weight:750!important;
}
.cb-v10 .cb-nav-link:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:none!important}
.cb-v10 .cb-nav-active{
 background:#1c3b34!important;border-color:#31574f!important;color:#fff!important;
 box-shadow:inset 3px 0 0 #73a99b!important;
}
[dir=rtl] .cb-v10 .cb-nav-active{box-shadow:inset -3px 0 0 #73a99b!important}
.cb-v10 .cb-nav-icon{width:29px!important;height:29px!important;border-radius:8px!important}
.cb-v10 .cb-nav-active .cb-nav-icon{background:#2a554b!important;color:#d9ebe6!important}
.cb-v10 .cb-nav-count{min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:99px!important;background:#d76a5d!important}

/* topbar */
.cb-v10 .cb-shell{padding-inline-start:var(--v27-sidebar)!important;background:var(--v27-bg)!important}
.cb-v10 .cb-shell>header{
 height:64px!important;background:rgba(255,255,255,.94)!important;
 border-bottom:1px solid var(--v27-line)!important;box-shadow:none!important;
}
.cb-v10 .cb-shell>header>div{height:64px!important;padding-inline:28px!important}
.cb-v10 .cb-profile-top,.cb-v10 .cb-shell>header a.relative{
 height:38px!important;border-radius:10px!important;border-color:var(--v27-line)!important;
 box-shadow:none!important;
}
.cb-v10 #install-app{height:38px!important;border-radius:10px!important;background:#173f36!important}

/* content */
.cb-v10 main.wrap{
 max-width:1480px!important;padding:26px 30px 52px!important;
}
.cb-v10 .page-head{margin:0 0 18px!important;min-height:36px!important}
.cb-v10 .page-head h1,.cb-v10 .cb-page-title{
 color:var(--v27-text)!important;font-weight:850!important;letter-spacing:-.035em!important;
}
.cb-v10 .page-head h1{font-size:25px!important}
.cb-v10 .cb-page-title{font-size:27px!important}
.cb-v10 .cb-page-title:after{width:24px!important;height:3px!important;background:var(--v27-brand)!important;margin-top:8px!important}

/* surfaces */
.cb-v10 .card,.cb-v10 .form,.cb-v10 .table-wrap,.cb-v10 .panel{
 background:var(--v27-surface)!important;border:1px solid var(--v27-line)!important;
 border-radius:var(--v27-radius)!important;box-shadow:var(--v27-shadow)!important;
 backdrop-filter:none!important;
}
.cb-v10 .card{padding:18px!important}
.cb-v10 .card:hover{transform:none!important;box-shadow:0 9px 28px rgba(17,39,34,.065)!important;border-color:#d5e1dd!important}
.cb-v10 .card h2,.cb-v10 .form h2,.cb-v10 .table-wrap h2,.cb-v10 .panel h2{
 font-size:16px!important;font-weight:850!important;margin-bottom:12px!important
}
.cb-v10 .muted{color:var(--v27-muted)!important}
.cb-v10 .stat-title{font-size:9px!important;color:#82908c!important;letter-spacing:.09em!important}
.cb-v10 .num,.cb-v10 .kpi{font-size:29px!important;color:#1b2d28!important}

/* KPI — quieter and more useful */
.cb-v10 .cb-auto-grid{gap:12px!important}
.cb-v10 .cb-auto-grid>.card{min-height:106px!important}
.cb-v10 .cb-auto-grid>.card:before{display:none!important}

/* forms */
.cb-v10 .form-grid{gap:14px!important}
.cb-v10 .field label,.cb-v10 .form>label,.cb-v10 .card>form>label{
 color:#40524d!important;font-size:10.5px!important;font-weight:800!important;margin-bottom:6px!important
}
.cb-v10 .field input,.cb-v10 .field select,.cb-v10 .field textarea,
.cb-v10 .form input,.cb-v10 .form select,.cb-v10 .form textarea,
.cb-v10 .card>form input,.cb-v10 .card>form select,.cb-v10 .card>form textarea{
 min-height:42px!important;border-radius:10px!important;border-color:#dce5e2!important;
 background:#fbfcfc!important;padding:9px 11px!important;font-size:13px!important;
}
.cb-v10 textarea{min-height:96px!important}
.cb-v10 .field input:focus,.cb-v10 .field select:focus,.cb-v10 .field textarea:focus,
.cb-v10 .form input:focus,.cb-v10 .form select:focus,.cb-v10 .form textarea:focus,
.cb-v10 .card>form input:focus,.cb-v10 .card>form select:focus,.cb-v10 .card>form textarea:focus{
 border-color:#76a99e!important;box-shadow:0 0 0 3px rgba(31,107,91,.09)!important;background:#fff!important
}

/* buttons */
.cb-v10 .btn{
 min-height:38px!important;padding:8px 13px!important;border-radius:9px!important;
 font-size:11px!important;font-weight:800!important;box-shadow:none!important
}
.cb-v10 .btn:not(.gray):not(.red){background:var(--v27-brand)!important}
.cb-v10 .btn.dark{background:#173f36!important}
.cb-v10 .btn.gray{background:#f6f8f7!important;border-color:#dce5e2!important;color:#40524d!important}
.cb-v10 .btn.red{background:#fff5f4!important;border-color:#efcbc7!important;color:var(--v27-danger)!important}
.cb-v10 .actions{gap:7px!important}

/* tables — clear hierarchy */
.cb-v10 .table-wrap{overflow:auto!important;padding:0!important}
.cb-v10 .table-wrap>h2{padding:17px 18px 0!important}
.cb-v10 .table{min-width:700px!important}
.cb-v10 .table th{
 padding:10px 12px!important;background:#f7f9f8!important;color:#71807b!important;
 font-size:8.5px!important;letter-spacing:.075em!important;border-bottom:1px solid var(--v27-line)!important
}
.cb-v10 .table td{padding:12px!important;border-bottom:1px solid #edf1ef!important;font-size:12px!important}
.cb-v10 .table tbody tr:hover{background:#f8fbfa!important}

/* status */
.cb-v10 .badge{padding:4px 9px!important;font-size:9px!important;border-radius:999px!important}
.cb-v10 .flash,.cb-v10 .alert,.cb-v10 .gps-status{border-radius:11px!important}

/* common page controls/search areas */
.cb-v10 input[type="search"]{border-radius:10px!important}
.cb-v10 .panel{padding:18px!important}

/* modal */
.cb-v10 .modal{background:rgba(7,20,17,.62)!important;backdrop-filter:blur(7px)!important}
.cb-v10 .modal-box{border-radius:18px!important;padding:20px!important;box-shadow:0 24px 80px rgba(0,0,0,.2)!important}

/* map remains a distinct workspace */
.cb-v10 .gps-map{border-radius:14px!important;border-color:#dbe5e1!important}
.cb-v10 .maplibregl-ctrl-group{border-radius:10px!important;overflow:hidden;box-shadow:0 3px 14px rgba(10,30,25,.12)!important}
.cb-v10 .maplibregl-ctrl button{width:34px!important;height:34px!important}

/* Hide redundant shell page heading where purpose-built page header exists */
.cb-v10 main.wrap:has(.cb-content)>.page-head,
.cb-v10 main.wrap:has(.route-page)>.page-head,
.cb-v10 main.wrap:has(.profile-page)>.page-head,
.cb-v10 main.wrap:has(.authority-page)>.page-head,
.cb-v10 main.wrap:has(.inspection-studio)>.page-head,
.cb-v10 main.wrap:has(.gps-dashboard)>.page-head{display:none!important}

/* mobile */
@media(max-width:1023px){
 .cb-v10 .cb-shell{padding-inline-start:0!important}
 .cb-v10 #cb-sidebar{width:min(290px,86vw)!important}
 .cb-v10 main.wrap{padding:20px 18px 42px!important}
 .cb-v10 .cb-shell>header>div{padding-inline:18px!important}
}
@media(max-width:620px){
 .cb-v10 main.wrap{padding:18px 13px 38px!important}
 .cb-v10 .page-head{align-items:flex-start!important}
 .cb-v10 .page-head h1{font-size:23px!important}
 .cb-v10 .card,.cb-v10 .form,.cb-v10 .table-wrap,.cb-v10 .panel{border-radius:14px!important;padding:14px!important}
 .cb-v10 .table-wrap{padding:0!important}
 .cb-v10 .table-wrap>h2{padding:14px 14px 0!important}
 .cb-v10 .btn{min-height:40px!important}
 .cb-v10 .actions .btn{flex:1}
}

/* V28.1 finishing layer — unify every legacy page with the new workspace language. */
.cb-v10 .page-head{border-bottom:1px solid var(--v27-line);padding-bottom:14px}
.cb-v10 .page-head .muted{font-size:10px!important}
.cb-v10 .wrap>.flash,.cb-v10 .wrap>.alert{margin-bottom:14px!important}
.cb-v10 .grid{--tw-ring-offset-shadow:none}
.cb-v10 .table-wrap .table tr:last-child td{border-bottom:0!important}
.cb-v10 .table-wrap::-webkit-scrollbar,.cb-v10 .cb-sidebar-nav::-webkit-scrollbar{height:8px;width:8px}
.cb-v10 .table-wrap::-webkit-scrollbar-thumb,.cb-v10 .cb-sidebar-nav::-webkit-scrollbar-thumb{background:#cbd8d4;border-radius:999px}
.cb-v10 .cb-login-card{
 background:#fff!important;border:1px solid #dfe8e4!important;border-radius:20px!important;
 box-shadow:0 20px 70px rgba(17,39,34,.09)!important;
}
.cb-v10 .cb-login-icon{background:#d9ebe6!important;color:#195246!important;border-radius:13px!important}
.cb-v10 .cb-login-sub{color:#71807b!important}
.cb-v10 .cb-login-card h1{color:#16201e!important;letter-spacing:-.03em}
.cb-v10 .cb-login-card .btn.dark{background:#173f36!important}
.cb-v10 .cb-login-card input:focus{border-color:#76a99e!important;box-shadow:0 0 0 3px rgba(31,107,91,.09)!important}
@media(max-width:620px){
 .cb-v10 .page-head{padding-bottom:11px}
 .cb-v10 .cb-login-card{border-radius:16px!important;box-shadow:0 14px 45px rgba(17,39,34,.08)!important}
}

/* V28 FINAL SIGNATURE — controlled printing + authority overlay */
.cb-global-print{display:inline-flex!important;align-items:center;gap:7px;height:38px;padding:0 11px;border:1px solid #dce6e2;background:#fff;color:#29463e;border-radius:10px;font-size:10px;font-weight:800;cursor:pointer;transition:.18s ease}
.cb-global-print:hover{background:#edf5f2;border-color:#bdd5cd;color:#145446}
.authority-editor-launch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;padding:14px 16px;border:1px solid #dfe8e4;border-radius:13px;background:#f8faf9}
.authority-editor-launch b{display:block;font-size:12px;color:#20352f}.authority-editor-launch small{display:block;margin-top:4px;color:#7b8a85;font-size:9px}
.authority-overlay{position:fixed;inset:0;z-index:300;display:none}.authority-overlay.is-open{display:block}
.authority-overlay-backdrop{position:absolute;inset:0;background:rgba(8,24,20,.72);backdrop-filter:blur(9px)}
.authority-overlay-panel{position:absolute;inset:3vh 4vw;display:flex;flex-direction:column;overflow:hidden;background:#f6f8f7;border:1px solid rgba(255,255,255,.4);border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.28)}
.authority-overlay-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:17px 20px;background:#fff;border-bottom:1px solid #dfe8e4}
.authority-overlay-head h3{margin:3px 0 0;font-size:19px;color:#172a25;letter-spacing:-.02em}
.authority-overlay-close{width:36px;height:36px;border:1px solid #dfe8e4;background:#fff;border-radius:10px;color:#62736d;cursor:pointer}
.authority-overlay-panel .authority-form{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:auto;padding:18px 20px 0!important;flex:1}
.authority-overlay-panel .authority-save{position:sticky;bottom:0;margin:18px -20px 0!important;padding:12px 20px!important;background:rgba(255,255,255,.98);border-top:1px solid #dfe8e4;z-index:3}
body.authority-lock{overflow:hidden!important}

/* login sizing */
.cb-login-page{min-height:100dvh!important}.cb-login-shell{min-height:100dvh!important;height:auto!important}
.cb-login-visual{min-width:0!important}.cb-login-panel{min-width:0!important;min-height:100dvh!important;overflow:auto}
.cb-login-card{width:min(100%,460px)!important;box-sizing:border-box!important}
.cb-login-form,.cb-login-form .field,.cb-input-wrap,.cb-input-wrap input{min-width:0!important;width:100%!important;box-sizing:border-box!important}
.cb-login-heading h1{font-size:clamp(26px,4vw,34px)!important}
@media(max-width:900px){.cb-login-panel{display:flex!important;align-items:center!important;justify-content:center!important;padding:22px!important}.cb-login-card{width:min(100%,440px)!important}}
@media(max-width:700px){.authority-editor-launch{align-items:flex-start;flex-direction:column}.authority-editor-launch .btn{width:100%;justify-content:center}.authority-overlay-panel{inset:0;border-radius:0}.authority-overlay-panel .authority-form{padding:14px 13px 0!important}.authority-overlay-panel .authority-save{margin:14px -13px 0!important;padding:11px 13px!important}.authority-overlay-panel .authority-save .btn{width:100%;justify-content:center}}
@media(max-width:520px){.cb-login-panel{padding:14px!important;align-items:flex-start!important}.cb-login-card{width:100%!important;margin-top:12px!important;padding:22px!important}.cb-login-heading h1{font-size:27px!important}.cb-login-footer{align-items:flex-start!important;flex-direction:column!important}.cb-global-print span{display:none}.cb-global-print{width:38px;justify-content:center;padding:0}}

/* print mode */
@media print{
 @page{margin:12mm}html,body{background:#fff!important}body.cb-v10{font-size:10pt!important;color:#111!important}
 body.cb-v10 #cb-sidebar,body.cb-v10 #cb-sidebar-backdrop,body.cb-v10 header,body.cb-v10 footer,body.cb-v10 .cb-global-print,body.cb-v10 #install-app,body.cb-v10 .no-print,body.cb-v10 .authority-overlay,body.cb-v10 .modal{display:none!important}
 body.cb-v10 .cb-shell{padding:0!important}body.cb-v10 main.wrap{padding:0!important;max-width:none!important}
 body.cb-v10 main.wrap>.page-head{display:block!important;border-bottom:2px solid #222!important;margin-bottom:14px!important}
 body.cb-v10 .card,body.cb-v10 .form,body.cb-v10 .table-wrap,body.cb-v10 .panel{box-shadow:none!important;border:1px solid #bbb!important;border-radius:4px!important;break-inside:avoid}
 body.cb-v10 table{width:100%!important;border-collapse:collapse!important}body.cb-v10 th,body.cb-v10 td{border:1px solid #ccc!important;padding:6px!important}
}

/* SADAF supplied logo */
.cb-v10 #cb-sidebar .cb-brand-mark{width:157px!important;height:38px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 1 auto!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
.cb-v10 #cb-sidebar .cb-brand-mark img{display:block!important;width:157px!important;height:38px!important;max-width:none!important;object-fit:contain!important;object-position:left center!important}
.cb-v10 #cb-sidebar .cb-brand-mark + div{min-width:0!important;flex:0 0 auto!important}
@media (max-width:420px){.cb-v10 #cb-sidebar .cb-brand-mark{width:135px!important}.cb-v10 #cb-sidebar .cb-brand-mark img{width:135px!important;height:auto!important}}

/* V29.1 Dashboard identity icon */
.cb-dashboard-logo-icon{display:grid!important;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden;flex:0 0 32px}
.cb-dashboard-logo-icon img{display:block;width:22px!important;height:22px!important;max-width:none!important;object-fit:contain}
.cb-dashboard-link.cb-nav-active .cb-dashboard-logo-icon{background:rgba(255,255,255,.14)}

/* SADAF V31 — Global responsive design system */
:root{--s31-bg:#f4f7f6;--s31-surface:#fff;--s31-line:#dfe8e4;--s31-text:#172824;--s31-muted:#70817b;--s31-brand:#237462;--s31-brand2:#2f8b78;--s31-danger:#b33b32;--s31-warn:#a96b00;--s31-shadow:0 8px 28px rgba(20,54,46,.055)}
.cb-v10{overflow-x:hidden!important}
.cb-v10 .cb-shell{min-width:0!important}
.cb-v10 main.wrap{width:100%!important;box-sizing:border-box!important}
.cb-v10 .card,.cb-v10 .form,.cb-v10 .panel,.cb-v10 .table-wrap{max-width:100%!important;box-sizing:border-box!important}
.cb-v10 .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cb-v10 .btn{white-space:nowrap!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cb-v10 .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.cb-v10 .field{min-width:0!important}
.cb-v10 .field input,.cb-v10 .field select,.cb-v10 .field textarea{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.cb-v10 .table-wrap{width:100%!important}
.cb-v10 .table{width:100%!important}
.cb-v10 .table td,.cb-v10 .table th{vertical-align:middle!important}
.cb-v10 .page-head{gap:10px!important}
.cb-v10 .page-head h1{overflow-wrap:anywhere!important}
/* dashboard identity mark */
.cb-v10 .cb-dashboard-logo-icon{width:30px!important;height:30px!important;border-radius:9px!important;background:transparent!important;box-shadow:0 5px 14px rgba(20,70,58,.18)!important;padding:0!important}
.cb-v10 .cb-dashboard-logo-icon img{width:30px!important;height:30px!important}
.cb-v10 .cb-dashboard-link.cb-nav-active .cb-dashboard-logo-icon{background:transparent!important;box-shadow:0 6px 16px rgba(20,70,58,.25)!important}
/* expiry state language */
.s31-expiry{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}
.s31-expiry.ok{background:#e7f4ef;color:#17634f}.s31-expiry.warn{background:#fff3d7;color:#8b5a00}.s31-expiry.bad{background:#fde8e6;color:#a5322a}.s31-expiry.neutral{background:#eef2f1;color:#60716c}
.s31-doc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.s31-doc-card{border:1px solid var(--s31-line);border-radius:16px;background:#fff;padding:15px;min-width:0;box-shadow:var(--s31-shadow)}
.s31-doc-card .label{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--s31-muted)}
.s31-doc-card .value{font-size:18px;font-weight:900;color:var(--s31-text);margin-top:6px}
.s31-doc-card .sub{font-size:10px;color:var(--s31-muted);margin-top:4px}
.s31-sync{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--s31-line);background:#f8fbfa;border-radius:10px;font-size:9px;font-weight:800;color:#49615a}
.s31-sync-dot{width:7px;height:7px;border-radius:50%;background:#2f8b78;box-shadow:0 0 0 4px rgba(47,139,120,.10)}
@media(max-width:1180px){.cb-v10 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.s31-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cb-v10 main.wrap{padding:16px 12px 34px!important}.cb-v10 .form-grid{grid-template-columns:1fr!important}.cb-v10 .actions{width:100%}.cb-v10 .actions .btn{min-width:0;flex:1 1 150px}.cb-v10 .page-head{flex-direction:column!important;align-items:flex-start!important}.cb-v10 .table{min-width:680px!important}.s31-doc-grid{grid-template-columns:1fr 1fr;gap:9px}.s31-doc-card{padding:12px}.s31-doc-card .value{font-size:16px}}
@media(max-width:440px){.s31-doc-grid{grid-template-columns:1fr}.cb-v10 .actions .btn{flex-basis:100%;width:100%}.cb-v10 .card,.cb-v10 .form,.cb-v10 .panel{padding:12px!important}}
