
/* SADAF V31.1 — unified enterprise design system */
:root{
 --s31-bg:#f4f7f6; --s31-surface:#ffffff; --s31-ink:#16231f; --s31-muted:#71817c;
 --s31-line:#dfe8e4; --s31-brand:#176b59; --s31-brand2:#2b8a75; --s31-soft:#eaf5f1;
 --s31-danger:#b42318; --s31-critical:#c2410c; --s31-warning:#a16207; --s31-valid:#16734e;
 --s31-radius:18px; --s31-shadow:0 8px 28px rgba(15,45,37,.055);
}
html,body.cb-v10{background:var(--s31-bg)!important;color:var(--s31-ink)!important}
body.cb-v10{font-family:Inter,"Noto Sans Arabic",system-ui,sans-serif!important;line-height:1.5}
.cb-v10 *{box-sizing:border-box}
.cb-v10 .cb-shell{background:var(--s31-bg)!important}
.cb-v10 #cb-sidebar{width:252px!important;background:#0b211b!important}
.cb-v10 .cb-brandbar{height:76px!important;padding:0 18px!important}
.cb-v10 .cb-brand-logo img{height:46px!important;width:auto!important;max-width:185px!important}
.cb-v10 .cb-dashboard-logo-icon{background:#e8f4f0!important;color:#145847!important}
.cb-v10 .cb-dashboard-logo-icon img{width:22px!important;height:22px!important;object-fit:contain!important}
.cb-v10 .cb-nav-link{min-height:42px!important;border:1px solid transparent!important}
.cb-v10 .cb-nav-link,.cb-v10 .cb-nav-link *{transition:all .16s ease}
.cb-v10 .cb-nav-active{background:linear-gradient(90deg,#1a4037,#17372f)!important;border-color:#31584e!important}
[dir=rtl] .cb-v10 .cb-nav-active{background:linear-gradient(-90deg,#1a4037,#17372f)!important}
.cb-v10 .cb-shell>header{height:68px!important;background:rgba(255,255,255,.96)!important}
.cb-v10 .cb-shell>header>div{height:68px!important;padding-inline:28px!important}
.cb-v10 main.wrap{max-width:1560px!important;margin-inline:auto!important;padding:26px 30px 56px!important}
.cb-v10 .page-head{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:16px!important;margin:0 0 18px!important;min-height:42px!important}
.cb-v10 .page-head h1{font-size:26px!important;font-weight:850!important;letter-spacing:-.035em!important}
.cb-v10 .page-head .muted{font-size:10px!important}
.cb-v10 .card,.cb-v10 .form,.cb-v10 .table-wrap,.cb-v10 .panel{
 background:var(--s31-surface)!important;border:1px solid var(--s31-line)!important;
 border-radius:var(--s31-radius)!important;box-shadow:var(--s31-shadow)!important;
}
.cb-v10 .card{padding:20px!important}
.cb-v10 .card:hover{transform:none!important}
.cb-v10 .card h2,.cb-v10 .form h2,.cb-v10 .table-wrap h2,.cb-v10 .panel h2{
 color:var(--s31-ink)!important;font-size:16px!important;font-weight:850!important;letter-spacing:-.02em!important
}
.cb-v10 .muted{color:var(--s31-muted)!important}
.cb-v10 .btn{
 min-height:40px!important;padding:9px 13px!important;border-radius:11px!important;
 font-size:11px!important;font-weight:800!important;letter-spacing:-.01em!important;
 border:1px solid #d8e3df!important;box-shadow:none!important
}
.cb-v10 .btn.dark{background:#163f35!important;border-color:#163f35!important;color:#fff!important}
.cb-v10 .btn.gray{background:#fff!important;color:#29443c!important}
.cb-v10 .btn:hover{transform:translateY(-1px)!important}
.cb-v10 .actions{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important}
.cb-v10 .form{padding:20px!important}
.cb-v10 .form-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:15px!important}
.cb-v10 .field{min-width:0!important}
.cb-v10 .field label,.cb-v10 .form>label,.cb-v10 .card>form>label{
 display:block!important;margin:0 0 7px!important;color:#40524d!important;
 font-size:10px!important;font-weight:800!important
}
.cb-v10 input,.cb-v10 select,.cb-v10 textarea{
 width:100%!important;min-width:0!important;min-height:42px!important;padding:9px 11px!important;
 border:1px solid #d7e2de!important;border-radius:11px!important;background:#fff!important;
 color:#1d302a!important;font-size:12px!important;outline:none!important;box-shadow:none!important
}
.cb-v10 textarea{min-height:92px!important;resize:vertical!important}
.cb-v10 input:focus,.cb-v10 select:focus,.cb-v10 textarea:focus{
 border-color:#72a99a!important;box-shadow:0 0 0 3px rgba(43,138,117,.10)!important
}
.cb-v10 .table-wrap{overflow-x:auto!important}
.cb-v10 table.table,.cb-v10 table.vr-table{width:100%!important;border-collapse:separate!important;border-spacing:0!important}
.cb-v10 .table th,.cb-v10 .vr-table th{
 background:#f7faf9!important;color:#62736e!important;font-size:9px!important;font-weight:850!important;
 letter-spacing:.07em!important;text-transform:uppercase!important;white-space:nowrap!important
}
.cb-v10 .table td,.cb-v10 .table th,.cb-v10 .vr-table td,.cb-v10 .vr-table th{
 padding:13px 12px!important;border-bottom:1px solid #edf2f0!important;vertical-align:middle!important
}
.cb-v10 .table tbody tr:hover,.cb-v10 .vr-table tbody tr:hover{background:#fbfdfc!important}
.cb-v10 .badge{font-size:9px!important;border-radius:999px!important;padding:5px 9px!important;font-weight:850!important}
.cb-v10 .flash{border-radius:12px!important;margin-bottom:16px!important;padding:11px 14px!important;font-size:11px!important}
.cb-v10 footer{max-width:1560px!important;margin:auto!important;padding:0 30px 24px!important;color:#84918d!important;font-size:9px!important}
.s31-page-hero{
 display:flex;align-items:center;justify-content:space-between;gap:24px;
 padding:25px 26px;margin-bottom:16px;background:linear-gradient(135deg,#173f35,#205d4e);
 border-radius:22px;color:#fff;box-shadow:0 12px 34px rgba(16,65,53,.14)
}
.s31-page-hero h1{margin:4px 0 4px;font-size:27px;font-weight:850;letter-spacing:-.04em}
.s31-page-hero p{margin:0;max-width:760px;color:#c9ddd7;font-size:11px}
.s31-eyebrow{font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;color:#8fc4b5}
.s31-hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.s31-hero-actions .btn.gray{background:rgba(255,255,255,.96)!important}
.s31-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.s31-kpi-card{min-height:112px;padding:17px;border:1px solid var(--s31-line);border-radius:16px;background:#fff;box-shadow:var(--s31-shadow);display:flex;flex-direction:column;justify-content:space-between}
.s31-kpi-card span{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#71817c}
.s31-kpi-card b{font-size:28px;line-height:1;font-weight:850;color:#1b2b26}
.s31-kpi-card small{font-size:9px;color:#899792}
.s31-kpi-danger{border-top:3px solid #d15a50}.s31-kpi-danger b{color:var(--s31-danger)}
.s31-kpi-critical{border-top:3px solid #e18442}.s31-kpi-critical b{color:var(--s31-critical)}
.s31-kpi-warning{border-top:3px solid #d6aa3d}.s31-kpi-warning b{color:var(--s31-warning)}
.s31-kpi-valid{border-top:3px solid #55a985}.s31-kpi-valid b{color:var(--s31-valid)}
.s31-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.s31-card-head h2{margin:0;font-size:16px;font-weight:850}.s31-card-head p{margin:3px 0 0;font-size:10px}
.s31-sync-badge,.s31-source-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#edf7f3;color:#21634f;font-size:9px;font-weight:850}
.s31-table-scroll{width:100%;overflow-x:auto;border:1px solid #e4ece9;border-radius:14px}
.s31-compliance-table{width:100%;min-width:900px;border-collapse:collapse}
.s31-compliance-table th{background:#f7faf9;padding:12px 13px;text-align:start;color:#667772;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.s31-compliance-table td{padding:13px;border-top:1px solid #edf2f0;font-size:11px;color:#263b34;vertical-align:middle}
.s31-compliance-table tr:hover td{background:#fcfefd}
.s31-vehicle{display:flex;flex-direction:column;gap:2px}.s31-vehicle strong{font-size:12px}.s31-vehicle span,.s31-gps-value span{font-size:9px;color:#84938e}
.s31-status-pill{display:inline-flex;margin-top:5px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}
.s31-status-pill.valid{background:#eaf7f0;color:#16734e}.s31-status-pill.warning{background:#fff7df;color:#9a6900}
.s31-status-pill.critical{background:#fff0e6;color:#b34d0b}.s31-status-pill.expired{background:#ffebe9;color:#b42318}
.s31-status-pill.today{background:#ffebe9;color:#b42318}.s31-status-pill.missing{background:#f1f4f3;color:#7a8884}
.s31-gps-value{display:flex;flex-direction:column;gap:2px}.s31-empty{text-align:center;padding:28px!important}
.s31-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#687872;font-size:9px;font-weight:750}
.s31-legend span{display:inline-flex;align-items:center;gap:5px}.s31-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.s31-dot.valid{background:#3e9a72}.s31-dot.warning{background:#d5a52e}.s31-dot.critical{background:#dc7734}.s31-dot.expired{background:#c95148}
.s31-info-strip{display:flex;align-items:center;gap:13px;margin-top:16px!important;padding:15px 18px!important}
.s31-info-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#eaf5f1;color:#1d6a57}
.s31-info-strip b{font-size:11px}.s31-info-strip p{margin:2px 0 0;font-size:9px}.s31-info-strip code{padding:2px 5px;border-radius:5px;background:#eef3f1;font-size:9px}
.s31-records-card{margin-top:16px!important}.s31-form-card{margin-bottom:16px!important}
.s31-compliance-card{margin-bottom:0!important}
.s31-page-hero+.s31-kpi-grid{margin-top:0}.s31-dashboard-five{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.cb-v10 .vr-page .vr-hero{border-radius:22px!important;background:linear-gradient(135deg,#173f35,#205d4e)!important}
.cb-v10 .vr-page .vr-stat{border-radius:16px!important}
.cb-v10 .vr-page .vr-table-card{overflow:hidden!important}
@media(max-width:1200px){
 .s31-dashboard-five{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .s31-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cb-v10 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
 .cb-v10 #cb-sidebar{width:min(88vw,300px)!important}
 .cb-v10 main.wrap{padding:20px 18px 42px!important}
 .cb-v10 .page-head{align-items:flex-start!important;flex-direction:column!important}
 .s31-page-hero{align-items:flex-start;flex-direction:column;padding:21px}
 .s31-hero-actions{width:100%}.s31-hero-actions .btn{flex:1}
 .s31-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .s31-dashboard-five{grid-template-columns:1fr 1fr!important}
 .cb-v10 .cb-shell>header,.cb-v10 .cb-shell>header>div{height:60px!important}
 .cb-v10 .cb-shell>header>div{padding-inline:13px!important}
 .cb-v10 main.wrap{padding:15px 12px 34px!important}
 .cb-v10 .page-head h1{font-size:22px!important}
 .cb-v10 .page-head .muted{display:none!important}
 .cb-v10 .card,.cb-v10 .form{padding:15px!important;border-radius:15px!important}
 .cb-v10 .form-grid{grid-template-columns:1fr!important;gap:12px!important}
 .cb-v10 .actions .btn{flex:1;min-width:120px}
 .cb-v10 footer{padding:0 12px 18px}
 .s31-page-hero{border-radius:16px;padding:18px;margin-bottom:12px}.s31-page-hero h1{font-size:23px}
 .s31-kpi-grid{grid-template-columns:1fr 1fr;gap:9px}.s31-kpi-card{min-height:96px;padding:13px}.s31-kpi-card b{font-size:23px}
 .s31-card-head{align-items:flex-start;flex-direction:column;gap:9px}
 .s31-hero-actions .btn{flex:1;min-width:0}
}
@media print{
 .cb-v10 #cb-sidebar,.cb-v10 .cb-shell>header,.s31-hero-actions,.actions{display:none!important}
 .cb-v10 main.wrap{padding:0!important;max-width:none!important}
 .s31-page-hero{box-shadow:none;color:#000;background:#fff;border:1px solid #ddd}
 .s31-page-hero p,.s31-eyebrow{color:#555}
}

.cb-v10.cb-login-page{background:radial-gradient(circle at 15% 10%,#dceee8 0,#f4f7f6 34%,#eef3f1 100%)!important}
.cb-v10 .cb-login-card{border:1px solid #dbe7e3!important;border-radius:24px!important;box-shadow:0 24px 70px rgba(18,60,49,.12)!important;background:rgba(255,255,255,.96)!important}
.cb-v10 .cb-login-brand{display:flex!important;align-items:center!important;gap:13px!important;margin-bottom:25px!important}
.cb-v10 .cb-login-icon{width:52px!important;height:52px!important;display:grid!important;place-items:center!important;border-radius:15px!important;background:#eaf5f1!important;border:1px solid #d2e7e0!important}
.cb-v10 .cb-login-icon img{width:36px!important;height:36px!important}
.cb-v10 .cb-login-name{font-size:21px!important;font-weight:900!important;letter-spacing:.12em!important;color:#173f35!important}
.cb-v10 .cb-login-sub{font-size:9px!important;color:#7b8a85!important;margin-top:2px!important}
.cb-v10 .cb-login-card h1{font-size:26px!important;letter-spacing:-.035em!important;color:#182b25!important}

/* V32.1 — compact vehicle selector: no long vehicle list */
.s31-profile-launcher{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #e1ebe7;border-radius:15px;background:linear-gradient(180deg,#fbfdfc,#f6faf8)}
.s31-launcher-copy{display:flex;align-items:center;gap:12px;min-width:0}.s31-launcher-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:#e8f3ef;color:#215b4d;border:1px solid #d5e7e1}.s31-launcher-copy strong{display:block;font-size:12px;font-weight:900;color:#1b3029}.s31-launcher-copy span{display:block;margin-top:3px;color:#7b8a85;font-size:9px;line-height:1.5}.s31-launcher-meta{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#71817b}.s31-launcher-meta i{color:#2d6b5b}.s31-launcher-meta b{font-size:14px;color:#1d3e35}.s31-launcher-meta span{font-size:8px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
@media(max-width:620px){.s31-profile-launcher{align-items:flex-start;flex-direction:column}.s31-launcher-meta{padding-left:54px}}

/* V32 — Vehicle Documents: compact profiles + full vehicle overlay */
.s31-record-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:12px;border:1px solid #e4ece9;background:#f8fbfa;border-radius:14px;margin-bottom:14px}
.s31-profile-select{display:flex;flex-direction:column;gap:6px;min-width:min(520px,100%);font-size:9px;font-weight:850;color:#53655f;text-transform:uppercase;letter-spacing:.06em}
.s31-profile-select select{min-height:42px!important;background:#fff!important}
.s31-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.s31-profile-card{border:1px solid #e1ebe7;border-radius:16px;padding:15px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.s31-profile-card:hover,.s31-profile-card.is-selected{border-color:#9fc8ba;box-shadow:0 10px 28px rgba(15,45,37,.08);transform:translateY(-1px)}
.s31-profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.s31-profile-top .s31-status-pill{margin:0}
.s31-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0}.s31-mini-stats>div{padding:9px;border:1px solid #edf2f0;border-radius:10px;background:#fafcfb;min-width:0}.s31-mini-stats small{display:block;color:#82908c;font-size:8px;margin-bottom:3px}.s31-mini-stats b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s31-mini-stats b.valid{color:#16734e}.s31-mini-stats b.warning{color:#9a6900}.s31-mini-stats b.critical{color:#b34d0b}.s31-mini-stats b.expired{color:#b42318}.s31-profile-actions{display:flex;gap:8px}.s31-profile-actions .btn{flex:1}
.s31-profile-overlay{max-width:1180px;margin:0 auto}.s31-overlay-hero{display:flex;justify-content:space-between;gap:18px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#173f35,#205d4e);color:#fff}.s31-overlay-hero h3{margin:3px 0;font-size:25px;font-weight:900;letter-spacing:-.04em}.s31-overlay-hero p{margin:0;color:#cce0da;font-size:11px}.s31-overlay-hero .s31-eyebrow{color:#8fc4b5}.s31-overlay-hero-badges{display:flex;align-items:flex-start}.s31-overlay-hero .s31-status-pill{background:rgba(255,255,255,.13);color:#fff;margin:0;border:1px solid rgba(255,255,255,.18)}
.s31-overlay-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.s31-overlay-kpis>div{padding:13px;border:1px solid #e2ebe8;border-radius:13px;background:#fff}.s31-overlay-kpis small{display:block;color:#7b8a85;font-size:8px;text-transform:uppercase;letter-spacing:.06em;font-weight:850}.s31-overlay-kpis b{display:block;margin-top:4px;font-size:14px}.s31-overlay-section{margin-top:12px;padding:16px;border:1px solid #e1ebe7;border-radius:15px;background:#fff}.s31-overlay-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.s31-overlay-section-head h4{margin:0;font-size:13px;font-weight:900}.s31-overlay-section-head span{font-size:8px;color:#84938e;text-transform:uppercase;letter-spacing:.06em;font-weight:850}.s31-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.s31-detail-grid>div{padding:9px;border-radius:10px;background:#f7faf9;border:1px solid #edf2f0;min-width:0}.s31-detail-grid small{display:block;font-size:8px;color:#84938e;margin-bottom:3px}.s31-detail-grid b{display:block;font-size:10px;word-break:break-word}.s31-compliance-boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.s31-compliance-box{padding:13px;border-radius:12px;border:1px solid #e5ece9;background:#fafcfb}.s31-compliance-box.expired{background:#fff7f6;border-color:#f2cfcc}.s31-compliance-box.critical{background:#fff8f2;border-color:#f3d5bf}.s31-compliance-box.warning{background:#fffaf0;border-color:#f1dfaa}.s31-compliance-box.valid{background:#f2fbf6;border-color:#cfe8da}.s31-compliance-box small{display:block;color:#7b8a85;font-size:8px}.s31-compliance-box strong{display:block;margin:4px 0 3px;font-size:12px}.s31-compliance-box .s31-status-pill{margin:0}.s31-overlay-list{display:flex;flex-direction:column;gap:7px}.s31-overlay-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;border:1px solid #edf2f0;border-radius:11px;background:#fafcfb}.s31-overlay-row>div:last-child{text-align:end}.s31-overlay-row b{display:block;font-size:10px}.s31-overlay-row small{display:block;color:#84938e;font-size:8px;margin-top:2px}.s31-overlay-row strong{font-size:10px}.s31-overlay-empty{padding:14px;border:1px dashed #dfe8e4;border-radius:10px;text-align:center;color:#8b9995;font-size:9px}.s31-overlay-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.s31-overlay-two-col>div{border:1px solid #edf2f0;border-radius:11px;padding:11px;background:#fafcfb}.s31-overlay-two-col h5{margin:0 0 7px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#64756f}.s31-history-row{padding:7px 0;border-top:1px solid #edf2f0}.s31-history-row:first-child{border-top:0}.s31-history-row b{display:block;font-size:9px}.s31-history-row small{display:block;font-size:8px;color:#84938e;margin-top:2px;line-height:1.45}
@media(max-width:900px){.s31-profile-grid{grid-template-columns:1fr}.s31-record-toolbar{align-items:stretch;flex-direction:column}.s31-profile-select{min-width:0}.s31-overlay-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.s31-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.s31-mini-stats{grid-template-columns:1fr 1fr}.s31-profile-actions{flex-direction:column}.s31-overlay-hero{padding:15px;flex-direction:column}.s31-overlay-hero h3{font-size:21px}.s31-compliance-boxes,.s31-overlay-two-col{grid-template-columns:1fr}.s31-detail-grid{grid-template-columns:1fr}.s31-overlay-section{padding:12px}.s31-overlay-row{align-items:flex-start;flex-direction:column}.s31-overlay-row>div:last-child{text-align:start}}
.s31-gps-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:10px}.s31-gps-summary>div{padding:9px;border:1px solid #edf2f0;border-radius:10px;background:#f7faf9;min-width:0}.s31-gps-summary small{display:block;font-size:8px;color:#84938e;margin-bottom:3px}.s31-gps-summary b{display:block;font-size:9px;word-break:break-word}
@media(max-width:900px){.s31-gps-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.s31-gps-summary{grid-template-columns:1fr 1fr}}

/* V32.2 — redesigned connected vehicle profile launcher */
.s31-profile-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid #edf2f0;margin-bottom:14px}
.s31-profile-heading{display:flex;align-items:center;gap:13px;min-width:0}
.s31-profile-heading-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:14px;background:#eaf5f1;color:#176b59;border:1px solid #d6e9e2;font-size:18px}
.s31-profile-heading h2{margin:2px 0 3px!important;font-size:17px!important;letter-spacing:-.025em}
.s31-profile-heading p{margin:0;max-width:780px;font-size:10px;color:#7b8a85;line-height:1.55}
.s31-profile-count{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;padding:8px 12px;border:1px solid #e0ebe7;border-radius:13px;background:#f8fbfa}
.s31-profile-count b{font-size:18px;line-height:1;color:#176b59}.s31-profile-count span{margin-top:4px;font-size:8px;color:#7c8b86;text-transform:uppercase;letter-spacing:.08em;font-weight:850}
.s31-profile-picker-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;padding:12px;border:1px solid #e2ebe8;border-radius:14px;background:linear-gradient(180deg,#fafcfb,#f6faf8)}
.s31-profile-select{min-width:0}.s31-profile-select span{display:block;margin-bottom:6px;font-size:8px;color:#5c6e68;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.s31-profile-select-wrap{position:relative}.s31-profile-select-wrap>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);z-index:2;color:#8a9994;font-size:10px;pointer-events:none}
.s31-profile-select-wrap select{padding-left:34px!important;min-height:44px!important;border-radius:11px!important}
.s31-profile-open-btn{min-width:190px;min-height:44px!important;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.s31-profile-open-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.s31-selected-vehicle{margin-top:12px;border:1px solid #e1ebe7;border-radius:15px;overflow:hidden;background:#fff}
.s31-selected-empty{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(90deg,#fbfdfc,#f7faf9)}
.s31-selected-empty-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px;background:#eef4f2;color:#7c8e88;font-size:15px}
.s31-selected-empty strong{display:block;font-size:11px;color:#30433d}.s31-selected-empty span{display:block;margin-top:3px;font-size:9px;color:#84928e}
.s31-selected-main{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid #edf2f0;background:linear-gradient(90deg,#f8fbfa,#fff)}
.s31-selected-car-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px;background:#e8f3ef;color:#1b6b59;border:1px solid #d5e7e1}
.s31-selected-title{min-width:0;flex:1}.s31-selected-title small{display:block;font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:#899792;font-weight:850}.s31-selected-title strong{display:block;margin-top:2px;font-size:14px;color:#18342c;line-height:1.1}.s31-selected-title span{display:block;margin-top:3px;font-size:9px;color:#7c8b86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s31-selected-main>.s31-status-pill{margin:0}
.s31-selected-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.s31-selected-stats>div{padding:10px 13px;border-right:1px solid #edf2f0}.s31-selected-stats>div:last-child{border-right:0}
.s31-selected-stats small{display:block;font-size:7px;color:#87948f;text-transform:uppercase;letter-spacing:.06em;font-weight:850}.s31-selected-stats b{display:block;margin-top:4px;font-size:10px;color:#263d35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s31-selected-stats b.valid{color:#16734e}.s31-selected-stats b.warning{color:#9a6900}.s31-selected-stats b.critical{color:#b34d0b}.s31-selected-stats b.expired{color:#b42318}.s31-selected-stats b.missing{color:#7a8884}
@media(max-width:760px){.s31-profile-header{align-items:flex-start}.s31-profile-picker-row{grid-template-columns:1fr}.s31-profile-open-btn{width:100%}.s31-selected-stats{grid-template-columns:1fr 1fr}.s31-selected-stats>div:nth-child(2){border-right:0}.s31-selected-stats>div:nth-child(-n+2){border-bottom:1px solid #edf2f0}.s31-selected-main{align-items:flex-start}.s31-selected-main>.s31-status-pill{margin-left:auto}}
@media(max-width:520px){.s31-profile-header{gap:10px}.s31-profile-heading-icon{width:40px;height:40px;flex-basis:40px}.s31-profile-heading h2{font-size:15px!important}.s31-profile-heading p{font-size:9px}.s31-profile-count{min-width:58px;padding:7px 8px}.s31-profile-count b{font-size:16px}.s31-selected-main{flex-wrap:wrap}.s31-selected-main>.s31-status-pill{margin-left:51px}.s31-selected-title{min-width:calc(100% - 51px)}}


/* V32.7 — Unified enterprise visual system */
:root{--saf-ink:#10231d;--saf-muted:#70807a;--saf-line:#e4ece9;--saf-soft:#f6faf8;--saf-accent:#176b59;--saf-accent-2:#0f5749;--saf-shadow:0 14px 38px rgba(16,35,29,.07)}
.s31-page-hero{position:relative;overflow:hidden;border:1px solid var(--saf-line)!important;border-radius:22px!important;background:linear-gradient(135deg,#ffffff 0%,#f2f8f5 58%,#eaf5f0 100%)!important;box-shadow:var(--saf-shadow);padding:24px!important;margin-bottom:16px!important}
.s31-page-hero:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-90px;top:-100px;background:rgba(23,107,89,.08);pointer-events:none}
.s31-page-hero h1{position:relative;z-index:1;font-size:27px!important;letter-spacing:-.04em!important;color:var(--saf-ink)!important}
.s31-page-hero p{position:relative;z-index:1;color:var(--saf-muted)!important;max-width:700px;line-height:1.65!important}
.s31-eyebrow{color:var(--saf-accent)!important;font-weight:900!important;letter-spacing:.14em!important}
.s31-hero-actions{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.s31-hero-actions .btn{border-radius:12px!important;min-height:40px;box-shadow:0 5px 14px rgba(16,35,29,.06)}
.s31-kpi-grid{gap:12px!important}
.s31-kpi-card{border:1px solid var(--saf-line)!important;border-radius:16px!important;background:linear-gradient(180deg,#fff,#f9fcfb)!important;box-shadow:0 8px 24px rgba(16,35,29,.045)!important;padding:16px!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.s31-kpi-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,35,29,.08)!important;border-color:#d3e4de!important}
.s31-kpi-card span{font-weight:800!important;color:#60716b!important}
.s31-kpi-card b{font-size:25px!important;color:var(--saf-ink)!important}
.s31-compliance-card{border:1px solid var(--saf-line)!important;border-radius:20px!important;box-shadow:var(--saf-shadow)!important;overflow:hidden;background:#fff!important}
.s31-card-head{padding:18px 20px!important;background:linear-gradient(180deg,#fff,#f8fbfa);border-bottom:1px solid var(--saf-line)!important}
.s31-card-head h2{font-size:16px!important;color:var(--saf-ink)!important}
.s31-compliance-table th{background:#f4f8f6!important;color:#62736d!important;padding:14px!important}
.s31-compliance-table td{padding:14px!important;border-top:1px solid #edf2f0!important}
.s31-compliance-table tbody tr{transition:background .15s ease}
.s31-compliance-table tbody tr:hover td{background:#f8fbfa!important}
.s31-status-pill{border-radius:999px!important;padding:5px 9px!important;font-weight:850!important}
.s31-info-strip{display:flex!important;align-items:center!important;gap:13px!important;border:1px solid #d8e9e3!important;border-radius:16px!important;background:linear-gradient(90deg,#f0f9f5,#fbfdfc)!important;box-shadow:0 8px 24px rgba(16,35,29,.04)!important;padding:14px 16px!important}
.s31-info-icon{width:40px!important;height:40px!important;border-radius:12px!important;background:#e1f2eb!important;color:var(--saf-accent)!important;display:grid!important;place-items:center!important;flex:0 0 40px}
.s31-info-strip b{color:var(--saf-ink)!important;font-size:11px!important}
.s31-info-strip p{margin:3px 0 0!important;font-size:9px!important;line-height:1.55!important}
.s32-gps-hero{border:1px solid var(--saf-line)!important;border-radius:22px!important;box-shadow:var(--saf-shadow)!important;background:linear-gradient(135deg,#102c25,#1b5d4e 70%,#257563)!important;position:relative;overflow:hidden}
.s32-gps-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-130px;background:rgba(255,255,255,.08)}
.s32-gps-kpi{border:1px solid var(--saf-line)!important;border-radius:15px!important;box-shadow:0 8px 22px rgba(16,35,29,.05)!important;background:#fff!important}
.s32-sync-strip{border:1px solid #d8e9e3!important;border-radius:16px!important;background:#f4faf7!important;box-shadow:0 7px 20px rgba(16,35,29,.04)!important}
.s32-sync-pill{border-radius:999px!important;font-weight:900!important}
.s32-table-card{border:1px solid var(--saf-line)!important;border-radius:20px!important;box-shadow:var(--saf-shadow)!important;overflow:hidden}
.s32-table-card h2{font-size:16px!important;color:var(--saf-ink)!important}
.s32-table-card .table th{background:#f4f8f6!important;color:#62736d!important}
.s32-table-card .table tr:hover td{background:#f8fbfa!important}
@media(max-width:760px){.s31-page-hero{padding:18px!important;border-radius:18px!important}.s31-page-hero h1{font-size:22px!important}.s31-hero-actions{width:100%}.s31-hero-actions .btn{flex:1;min-width:140px}.s31-card-head{padding:14px!important}.s31-info-strip{align-items:flex-start!important}}
.s31-gps-countdown-card{display:flex;align-items:center;gap:16px}.s31-gps-countdown-main{min-width:0;flex:1}.s31-gps-countdown{margin:7px 0 3px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.s31-gps-countdown strong{font-size:20px;letter-spacing:.01em}.s31-gps-countdown span,.s31-gps-last{color:#64748b;font-size:12px}.s31-gps-last{display:block}.s32-countdown{margin-top:8px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.s32-countdown b{font-size:17px;letter-spacing:.04em}.s32-countdown span,.s32-sync-strip em{font-size:11px;color:#64748b;font-style:normal}.s32-sync-strip{align-items:center}
@media(max-width:640px){.s31-gps-countdown-card{align-items:flex-start;flex-direction:column}.s31-gps-countdown-card .s31-sync-pill{width:100%;text-align:center}.s31-gps-countdown strong{font-size:17px}.s32-countdown-strip{align-items:flex-start;flex-direction:column}.s32-countdown-strip .s32-sync-pill{width:100%;text-align:center}}
