:root{
  --text:#0f1f35;
  --muted:#4e6280;
  --border:#d6e1ef;
  --surface:rgba(255,255,255,.95);
  --surface-solid:#ffffff;
  --brand:#0b3f8a;
  --accent:#145dff;
  --accent-hover:#0f4fd8;
  --accent-rgb:20,93,255;
  --accent-border:rgba(20,93,255,.46);
  --accent-glow:rgba(20,93,255,.22);
  --accent-glow-strong:rgba(20,93,255,.38);
  --accent-soft:rgba(20,93,255,.14);
  --ok:#15803d;
  --warn:#b45309;
  --bad:#b42318;
  --shadow:0 10px 40px rgba(11,40,90,.16);
  --radius:18px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.45;
  background:#081d44;
  font-size:18px;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.app-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.app-bg__image{
  position:absolute; inset:0 42% 0 0;
  background:url("https://images.unsplash.com/photo-1519003722824-cd6e866edaf3?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat;
  filter:saturate(.9) contrast(1.05);
  opacity:.42;
}
.app-bg__image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,29,68,.82) 0%,rgba(8,29,68,.2) 100%);
}
.app-bg__gradient{
  position:absolute; inset:0 0 0 38%;
  background:linear-gradient(145deg,#e8f0ff 0%,#d5e6ff 35%,#c7dcff 70%,#e9f3ff 100%);
}
@media (max-width:900px){
  .app-bg__image{inset:0 0 55% 0;opacity:.34}
  .app-bg__gradient{inset:45% 0 0 0}
}
.portal-shell{
  position:relative; z-index:1;
  max-width:920px; margin:0 auto;
  padding:28px 18px 56px;
  min-height:100vh;
}
.page-header{
  margin-bottom:18px; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:82px;
}
.page-header h1{
  margin:0 0 6px;
  font-size:2.35rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.header-greeting{
  flex:0 0 auto;
  max-width:46%;
  text-align:left;
  color:#fff;
}
.header-greeting span{
  display:block;
  font-size:2.25rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.tagline{
  margin:0;
  font-size:1.05rem;
  opacity:.93;
  max-width:46rem;
}
.card{
  background:var(--surface);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:18px 20px 16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.68);
}

.dashboard-card-loading{
  position:relative;
  color:var(--muted) !important;
}

.dashboard-card-loading::after{
  content:"";
  position:absolute;
  inset:2px 0;
  border-radius:6px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  background-size:200% 100%;
  animation:dashboardSkeleton 1.2s linear infinite;
  pointer-events:none;
}

@keyframes dashboardSkeleton{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-head h2{margin:0;font-size:1.3rem;font-weight:760}
.demo-mode-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:-6px 0 16px;
  padding:12px 16px;
  border:1px solid rgba(20,184,166,.55);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(15,118,110,.22),rgba(15,23,42,.72));
  color:#e8fbff;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.demo-mode-banner strong{
  color:#5eead4;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.82rem;
}
.demo-mode-banner span{
  color:#d7e5f6;
  font-size:.95rem;
}
.ico{
  width:28px;height:28px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0;
}
.ico svg{width:16px;height:16px}
.inline-icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.14em;
}
.row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.row{grid-template-columns:1fr}}
@media (max-width:900px){
  .training-achievement-row{
    flex-basis:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-left:0;
  }
}
@media (max-width:560px){
  .website-checkout-grid{
    grid-template-columns:1fr;
  }

  .website-checkout-actions .btn-primary,
  .website-checkout-actions .btn-outline{
    width:100%;
    justify-content:center;
  }

  .billing-plan-change-row{
    grid-template-columns:1fr;
  }

  .training-achievement-row{
    grid-template-columns:1fr;
  }

  .training-achievement-card{
    padding:9px;
  }
}
label{display:block;font-size:.9rem;font-weight:650;color:var(--muted);margin-top:10px}
input,select{
  width:100%;padding:12px;margin-top:6px;font:inherit;
  border-radius:16px;border:1px solid var(--border);background:var(--surface-solid);
}
input:focus,select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:
    0 0 0 3px var(--accent-glow),
    0 0 24px var(--accent-glow);
}
select option:disabled{
  color:#94a3b8;
}
button{font:inherit;cursor:pointer;border-radius:16px;border:none;font-weight:650}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn-row>button{flex:1 1 220px;margin-top:0;padding:14px 16px}
.btn-primary{
  background:linear-gradient(180deg,#2a6bff 0%,#145dff 100%);
  color:#fff;
  box-shadow:
    0 4px 14px var(--accent-glow-strong),
    0 0 28px var(--accent-glow);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#1f63ff 0%,#0f4fd8 100%);
}

button:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
.btn-plain:disabled{
  opacity:.58;
  cursor:not-allowed;
  filter:grayscale(.35);
  box-shadow:none !important;
}

.btn-primary:disabled:hover{
  background:linear-gradient(180deg,#2a6bff 0%,#145dff 100%);
}
.btn-outline{
  background:#fff;color:#0b3f8a;
  border:2px solid rgba(11,63,138,.35);
}
.btn-outline:hover{background:#f3f7ff}
.btn-plain{
  width:auto;padding:10px 14px;margin-top:8px;
  background:var(--brand);color:#fff;
}
.btn-plain:hover{filter:brightness(1.05)}
.btn-logout{
  padding:8px 14px;
  background:#fff;border:1px solid var(--border);
  color:var(--text);font-weight:600;
}
.user-topbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
.user-chip{display:flex;align-items:center;gap:12px;min-width:0}

.mobile-top-menu{
  display:none;
  position:relative;
}

.mobile-app-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mobile-app-brand{
  color:#eafffb;
  font-size:.98rem;
  font-weight:950;
  letter-spacing:.01em;
  white-space:nowrap;
}

.mobile-menu-toggle{
  min-height:44px;
  padding:10px 14px;
  border:1px solid rgba(45,212,191,.45);
  border-radius:12px;
  background:linear-gradient(135deg,#0f172a,#123a4a);
  color:#eafffb;
  font-weight:900;
  box-shadow:0 12px 26px rgba(2,6,23,.24);
}

.mobile-menu-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:80;
  width:100%;
  max-height:min(68dvh, 620px);
  padding:8px;
  border:1px solid rgba(45,212,191,.34);
  border-radius:14px;
  background:linear-gradient(180deg,#0b1228,#101a35);
  box-shadow:0 22px 54px rgba(2,6,23,.46);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-menu-dropdown button,
.mobile-menu-section-toggle{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#eaf2ff;
  font-weight:850;
  text-align:left;
}

.mobile-menu-dropdown button:hover,
.mobile-menu-dropdown button:focus-visible,
.mobile-menu-section-toggle:hover,
.mobile-menu-section-toggle:focus-visible{
  background:rgba(45,212,191,.14);
  color:#5eead4;
}

.mobile-menu-section{
  margin:6px 0;
  padding:6px;
  border:1px solid rgba(45,212,191,.18);
  border-radius:12px;
  background:rgba(15,23,42,.48);
}

.mobile-menu-section-toggle{
  justify-content:space-between;
  background:rgba(45,212,191,.08) !important;
  color:#dffcf7 !important;
}

.mobile-menu-section-toggle::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

.mobile-menu-section-toggle[aria-expanded="true"]::after{
  transform:rotate(225deg);
}

.mobile-menu-section-items{
  display:grid;
  gap:2px;
  padding-top:6px;
}

.mobile-menu-section-items[hidden]{
  display:none !important;
}

.mobile-menu-section-items button{
  padding-left:18px;
  color:#cde7ff;
}

.mobile-upload-picker[hidden]{
  display:none !important;
}

.mobile-upload-picker{
  position:fixed;
  inset:0;
  z-index:120;
}

.mobile-upload-picker__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.46);
}

.mobile-upload-picker__sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-height:min(82dvh, 680px);
  display:flex;
  flex-direction:column;
  border-radius:18px 18px 0 0;
  border:1px solid var(--border);
  background:var(--surface-solid);
  box-shadow:0 -18px 54px rgba(2,6,23,.28);
  overflow:hidden;
}

.mobile-upload-picker__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-bottom:1px solid var(--border);
}

.mobile-upload-picker__bar h3{
  margin:0;
  font-size:1.05rem !important;
}

.mobile-upload-picker__bar .btn-outline{
  width:auto;
  min-height:40px;
  padding:8px 12px !important;
}

.mobile-upload-picker__options{
  display:grid;
  gap:6px;
  padding:10px 12px 18px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-upload-picker__option{
  width:100%;
  min-height:44px;
  padding:11px 12px !important;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}

.mobile-upload-picker__option.selected{
  border-color:var(--brand);
  background:#eff6ff;
  color:#0b3f8a;
}

@media (max-width:767px){
  .mobile-menu-dropdown{
    position:fixed;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-height:min(82dvh, 680px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px;
    border-radius:18px 18px 0 0;
    box-shadow:0 -18px 54px rgba(2,6,23,.46);
  }

  .mobile-menu-dropdown:not([hidden]){
    display:grid;
    gap:4px;
  }

  .mobile-menu-section{
    grid-column:1 / -1;
  }

  .dashboard-action-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }

  .dashboard-action-buttons{
    width:100%;
    justify-content:flex-start;
  }

  .dashboard-action-buttons .btn-outline,
  .dashboard-action-buttons .btn-plain{
    flex:1 1 150px;
    min-width:0;
    white-space:normal;
  }
}

@media (max-width:430px){
  .mobile-menu-dropdown{
    grid-template-columns:1fr;
  }
}

.demo-mode-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px 16px;
  border:1px solid rgba(45,212,191,.38);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(20,184,166,.18),rgba(15,23,42,.92));
  color:#dffcf7;
  box-shadow:0 14px 32px rgba(0,0,0,.18),0 0 24px rgba(20,184,166,.16);
}

.demo-mode-banner strong{
  color:#5eead4;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.demo-mode-banner span{
  color:#c7d2fe;
  font-size:.95rem;
  text-align:right;
}

@media (max-width:760px){
  .demo-mode-banner{
    display:block;
  }

  .demo-mode-banner span{
    display:block;
    margin-top:4px;
    text-align:left;
  }
}

.training-achievement-row{
  flex:1 1 560px;
  display:grid;
  grid-template-columns:repeat(4,minmax(132px,1fr));
  gap:10px;
  min-width:min(100%,560px);
  max-width:860px;
  margin-left:auto;
}

.training-achievement-row[hidden]{
  display:none;
}

.training-achievement-card{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.training-achievement-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#eef4ff;
  color:var(--brand);
}

.training-achievement-icon svg{
  width:27px;
  height:27px;
}

.training-achievement-copy{
  min-width:0;
  display:grid;
  gap:1px;
}

.training-achievement-copy span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.15;
}

.training-achievement-copy strong{
  color:var(--text);
  font-size:1.25rem;
  line-height:1.05;
}

.training-achievement-copy small{
  color:var(--muted);
  font-weight:500;
  font-size:.76rem;
  line-height:1.15;
}

.training-achievement-card--green .training-achievement-icon{
  background:#dcfce7;
  color:#15803d;
}

.training-achievement-card--blue .training-achievement-icon{
  background:#dbeafe;
  color:#2563eb;
}

.training-achievement-card--purple .training-achievement-icon{
  background:#f3e8ff;
  color:#9333ea;
}

.training-achievement-card--gold .training-achievement-icon{
  background:#fef3c7;
  color:#d97706;
}

.avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(145deg,var(--accent-soft),#e8f0ff);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:grid;place-items:center;color:var(--brand);font-weight:800;flex-shrink:0;
}
#userInfo{font-weight:700;font-size:1.05rem;word-break:break-all}
.role-pill{margin-top:2px;font-size:.95rem;font-weight:700;color:var(--accent)}
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
}
.kpi{
  background:linear-gradient(180deg,#fbfdff 0%,#f3f7ff 100%);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 10px 10px;
  text-align:center;
}

.kpi-button{
  width:100%;
  font:inherit;
  color:var(--text);
  cursor:pointer;
}

.kpi-button:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(15,23,42,.14);
}

.kpi-button:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:3px;
}

.kpi-drilldown{
  position:relative;
}

.kpi-drilldown::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  opacity:.45;
}

.kpi-subtext{
  margin-top:4px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
}
.kpi .kpi-ico{
  width:36px;height:36px;margin:0 auto 8px;border-radius:10px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);color:var(--brand);
}
.kpi .value{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi .value.kpi-value-text{
  font-size:1.25rem;
  line-height:1.15;
}
.kpi .label{
  font-size:.9rem;font-weight:700;color:var(--muted);
  margin-top:4px;text-transform:uppercase;letter-spacing:.04em;
}
.kpi-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:5px 11px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:850;
  line-height:1.1;
  white-space:nowrap;
  text-align:center;
  background:#eef4ff;color:var(--accent);
  border:1px solid rgba(20,93,255,.25);
}
.kpi-badge.warn{background:#fff7e6;color:var(--warn);border-color:rgba(180,83,9,.25)}
.kpi-badge.bad{background:#fef2f2;color:var(--bad);border-color:rgba(180,35,24,.22)}
.kpi-badge.ok{background:#ecfdf3;color:var(--ok);border-color:rgba(22,101,52,.22)}
.toolbar-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:0 0 12px;
}
.toolbar-row label{
  margin:0;
  font-weight:800;
  color:var(--muted);
}
.toolbar-row select{
  width:auto;
  min-width:220px;
}
.bulk-action-row{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0;
}
.bulk-select-all{
  align-items:center;
  display:flex;
  gap:8px;
  margin:0;
}
.vehicle-select-checkbox{
  cursor:pointer;
  height:18px;
  width:18px;
}
.driver-table{
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;
}
.driver-row,.driver-row--head{
  display:grid;
  grid-template-columns:40px 1.2fr 1fr 1.4fr 1fr 28px;
  gap:8px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:1rem;
}
.driver-phone,.driver-company{color:var(--muted)}
.driver-row:last-child{border-bottom:none}
.driver-row--head{
  background:#f6f9ff;font-size:.82rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;
}
.driver-row:hover{background:#fafdff}
.driver-mini-ico{
  width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:800;font-size:.78rem;
}
.driver-name{font-weight:750}
.driver-email{color:var(--muted);word-break:break-all}
.chev{text-align:center;color:var(--muted);font-size:1.2rem;font-weight:300}
.qa-test-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 18px;
}
.qa-status-list{
  display:grid;
  gap:8px;
}
.qa-status-row{
  display:grid;
  grid-template-columns:minmax(140px, 1fr) minmax(160px, 1.4fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}
.qa-status-detail{
  color:var(--muted);
}
.qa-workflow-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin:8px 0 14px;
}
.qa-id-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.qa-id-grid div{
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  background:#f8fbff;
}
.qa-id-grid span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  word-break:break-all;
}
.qa-manual-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:8px;
}
.qa-check-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  background:#fff;
}
.portal-user-table{
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;
}

.upload-status{
  margin:10px 0 0;
  font-weight:700;
}

.bulk-intake-panel{
  display:grid;
  gap:12px;
}

.bulk-intake-actions,
.bulk-review-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.bulk-review-list{
  display:grid;
  gap:12px;
  margin-top:10px;
}

.bulk-review-card{
  display:grid;
  gap:12px;
  max-height:720px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
  overflow:hidden;
  transform:translateY(0);
  transition:
    opacity .28s ease,
    max-height .34s ease,
    margin .34s ease,
    padding .34s ease,
    border-width .34s ease,
    transform .28s ease;
}

.bulk-review-card--approved{
  border-color:rgba(16,185,129,.45);
  background:rgba(16,185,129,.06);
}

.bulk-review-card--rejected{
  opacity:.72;
}

.bulk-review-card--removing{
  max-height:0;
  margin:0;
  padding-top:0;
  padding-bottom:0;
  border-width:0;
  opacity:0;
  transform:translateY(-6px);
}

.bulk-review-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.bulk-review-head strong,
.bulk-review-head span{
  display:block;
  overflow-wrap:anywhere;
}

.bulk-review-head span{
  margin-top:3px;
  color:var(--muted);
  font-size:.88rem;
}

.bulk-review-warning{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border:1px solid rgba(180,83,9,.25);
  border-radius:8px;
  background:rgba(251,191,36,.10);
  color:var(--warn);
  font-size:.88rem;
  font-weight:800;
}

.bulk-ai-suggestion{
  display:grid;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(14,165,233,.28);
  border-radius:8px;
  background:rgba(14,165,233,.08);
  color:var(--text);
  font-size:.88rem;
}

.bulk-ai-suggestion--muted{
  border-color:rgba(148,163,184,.25);
  background:rgba(148,163,184,.08);
  color:var(--muted);
}

.bulk-ai-suggestion__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.bulk-ai-suggestion__head span,
.bulk-ai-suggestion__dates span,
.bulk-ai-suggestion__evidence span{
  overflow-wrap:anywhere;
}

.bulk-ai-suggestion__dates,
.bulk-ai-suggestion__evidence{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  color:var(--muted);
}

.bulk-ai-suggestion__dates span,
.bulk-ai-suggestion__evidence span{
  padding:4px 7px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:6px;
  background:rgba(15,23,42,.18);
}

.bulk-review-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.bulk-review-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  color:var(--muted);
  font-size:.86rem;
}

.bulk-review-meta span{
  overflow-wrap:anywhere;
}

.bulk-page-drop-overlay{
  position:fixed;
  inset:0;
  z-index:10020;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,6,23,.72);
  pointer-events:none;
}

.bulk-page-drop-overlay[hidden]{
  display:none;
}

.bulk-page-drop-overlay div{
  width:min(520px,100%);
  min-height:180px;
  display:grid;
  place-items:center;
  border:2px dashed rgba(125,211,252,.82);
  border-radius:8px;
  background:rgba(15,23,42,.92);
  color:#e0f2fe;
  font-size:1.35rem;
  font-weight:900;
  text-align:center;
}

@media (max-width: 900px){
  .bulk-review-grid,
  .bulk-review-meta{
    grid-template-columns:1fr;
  }

  .bulk-review-head{
    display:grid;
  }
}

.upload-accordion{
  padding:0;
  overflow:hidden;
}

.upload-accordion--dragover{
  border-color:rgba(20,184,166,.7);
  box-shadow:0 0 0 3px rgba(20,184,166,.16);
}

.upload-accordion--dragover .upload-accordion-summary{
  background:rgba(20,184,166,.08);
}

.upload-accordion--prefill-highlight{
  border-color:rgba(56,189,248,.9);
  box-shadow:0 0 0 3px rgba(56,189,248,.24), 0 14px 34px rgba(8,47,73,.24);
}

.upload-accordion--prefill-highlight .upload-accordion-summary{
  background:rgba(56,189,248,.1);
}

.upload-accordion-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  cursor:pointer;
  list-style:none;
}

.upload-accordion-summary::-webkit-details-marker{
  display:none;
}

.upload-accordion-summary .card-head{
  margin:0;
}

.upload-accordion-summary .ico:not([data-icon]){
  font-size:0;
}

.upload-accordion-body{
  padding:0 18px 18px;
}

.upload-accordion-chevron{
  color:var(--muted);
  font-size:1.2rem;
  font-weight:900;
  transition:transform .16s ease;
}

.upload-accordion[open] .upload-accordion-chevron{
  transform:rotate(180deg);
}

.privacy-security-summary{
  border:1px solid rgba(20,184,166,.22);
  background:#f0fdfa;
  color:#115e59;
}

.trust-note{
  margin:10px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
  opacity:.72;
}

.trust-note--compact{
  display:inline-block;
  margin:8px 0 0;
  padding:0;
  font-size:.76rem;
}

.trust-note::before{
  content:"";
  display:inline-block;
  width:.78em;
  height:.78em;
  margin-right:6px;
  border:1.8px solid currentColor;
  border-radius:2px;
  vertical-align:-.08em;
  opacity:.8;
}

.privacy-security-summary{
  margin-top:16px;
  padding:14px;
  border-radius:12px;
  text-align:left;
}

.privacy-security-summary h3,
.privacy-security-card h2{
  margin:0 0 8px;
}

.privacy-security-summary p,
.privacy-security-card p{
  margin:8px 0 0;
  color:inherit;
  line-height:1.5;
}

.privacy-security-card{
  max-width:860px;
  margin:0 auto;
}

.privacy-security-links{
  justify-content:flex-start;
}

.portal-trust-strip{
  flex-basis:100%;
  text-align:center;
  color:#115e59;
  font-weight:700;
}

.company-quick-actions{
  margin-top:16px;
}

.company-quick-actions .card-head{
  align-items:flex-start;
}

.quick-action-panel{
  margin-top:10px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  background:rgba(15,23,42,.32);
  overflow:hidden;
}

.quick-action-panel summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:12px 14px;
  color:var(--text);
  cursor:pointer;
  font-weight:850;
  list-style:none;
}

.quick-action-panel summary::-webkit-details-marker{
  display:none;
}

.quick-action-panel summary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .16s ease;
}

.quick-action-panel[open] summary::after{
  transform:rotate(225deg);
}

.quick-action-body{
  display:grid;
  gap:10px;
  padding:0 14px 14px;
}

.advanced-tool-panel{
  margin-top:18px;
  border-style:dashed;
  background:rgba(15,23,42,.18);
}

.advanced-tool-panel summary{
  min-height:42px;
  color:var(--muted);
  font-size:.95rem;
}

.advanced-tool-panel[open] summary{
  color:var(--text);
}

.portal-footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  color:var(--muted);
  font-size:12px;
  opacity:.68;
}

.portal-footer-links a{
  color:inherit;
  text-decoration:none;
}

.portal-footer-links a:hover{
  color:var(--accent);
  text-decoration:underline;
}

.portal-footer-links--app{
  margin:28px 0 10px;
  width:100%;
}

.crop-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.72);
  z-index:120;
}

.crop-modal.open{
  display:flex;
}

.crop-modal__panel{
  width:min(460px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.crop-modal__body{
  padding:18px;
}

.profile-crop-preview{
  width:220px;
  height:220px;
  margin:0 auto 18px;
  border-radius:50%;
  border:2px solid var(--border);
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0f172a;
  overflow:hidden;
}

.crop-modal input[type="range"]{
  padding:0;
}
.portal-user-row{
  display:grid;
  grid-template-columns:40px minmax(220px,1.2fr) minmax(130px,.65fr) minmax(180px,.9fr) minmax(190px,.9fr) minmax(150px,.75fr) minmax(95px,.45fr) 24px;
  gap:8px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:1rem;
  cursor:pointer;
}
.portal-user-row:last-child{border-bottom:none}
.portal-user-row--head{
  background:#f6f9ff;font-size:.82rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;
  cursor:default;
}
.portal-user-row:hover{background:#fafdff}
.portal-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  color:var(--text);
  font-weight:750;
}
.portal-toggle input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--accent);
}
.portal-user-preview{
  display:none;
  margin:14px 0 16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(56,189,248,.08);
}
.portal-user-preview:not(:empty){
  display:block;
}
.portal-user-preview__title{
  margin-bottom:8px;
  font-size:.82rem;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.portal-user-preview p{
  margin:4px 0;
}
.portal-user-preview__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.portal-user-preview__chips span{
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  font-size:.82rem;
  font-weight:800;
}
.muted{color:var(--muted);font-size:.95rem;line-height:1.45}
.item{padding:12px 0;border-bottom:1px solid var(--border);font-size:1rem}
.item:last-child{border-bottom:none}
.dashboard-action-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.dashboard-action-row > div:first-child{
  min-width:0;
}
.dashboard-action-row strong{
  overflow-wrap:anywhere;
}
.dashboard-action-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.dashboard-action-buttons .btn-outline,
.dashboard-action-buttons .btn-plain{
  margin-top:0;
}
.dashboard-template-btn{
  padding:10px 14px;
}

.driver-onboarding-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.driver-onboarding-hero h2,
.driver-onboarding-form-head h3,
.driver-onboarding-list-head h3,
.driver-onboarding-wizard-head h3{
  margin:0 0 6px;
}

.driver-onboarding-hero-actions,
.driver-onboarding-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.driver-onboarding-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:16px;
  margin-top:16px;
}

.driver-onboarding-sidebar{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-self:start;
}

.driver-onboarding-tab{
  width:100%;
  min-height:42px;
  padding:9px 12px !important;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
  color:var(--text);
  text-align:left;
}

.driver-onboarding-tab.active,
.driver-onboarding-tab:hover{
  border-color:rgba(20,184,166,.55);
  background:#ecfeff;
  color:#0f766e;
}

.driver-onboarding-subtab{
  width:calc(100% - 16px);
  min-height:36px;
  margin-left:16px;
  font-size:.9rem !important;
}

.driver-onboarding-main{
  min-width:0;
  display:grid;
  gap:16px;
}

.driver-onboarding-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.driver-onboarding-dashboard-card{
  min-height:108px;
  padding:14px !important;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
  color:var(--text);
  text-align:left;
}

.driver-onboarding-dashboard-card span,
.driver-onboarding-dashboard-card strong,
.driver-onboarding-dashboard-card small{
  display:block;
}

.driver-onboarding-dashboard-card span{
  color:var(--muted);
}

.driver-onboarding-dashboard-card strong{
  margin:6px 0;
  font-size:2rem;
  line-height:1;
}

.driver-onboarding-dashboard-card small{
  color:var(--muted);
  font-weight:650;
}

.driver-onboarding-choice-grid,
.driver-onboarding-template-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.driver-onboarding-choice,
.driver-onboarding-template-card,
.driver-onboarding-packet-card,
.driver-onboarding-repeat-card,
.driver-onboarding-readonly{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
}

.driver-onboarding-choice{
  min-height:132px;
  padding:14px !important;
  color:var(--text);
  text-align:left;
}

.driver-onboarding-choice--primary{
  border-color:rgba(20,184,166,.7);
  background:#ecfeff;
  box-shadow:0 12px 28px rgba(20,184,166,.16);
}

.driver-onboarding-choice strong,
.driver-onboarding-choice span,
.driver-onboarding-template-card strong,
.driver-onboarding-template-card span{
  display:block;
}

.driver-onboarding-choice span{
  margin-top:8px;
  color:var(--muted);
  font-weight:600;
}

.driver-onboarding-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.driver-onboarding-form-grid label{
  margin-top:0;
}

.driver-onboarding-form-grid textarea{
  width:100%;
  min-height:104px;
  padding:12px;
  margin-top:6px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-solid);
  font:inherit;
}

.driver-onboarding-form-head,
.driver-onboarding-list-head,
.driver-onboarding-wizard-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.driver-onboarding-packet-list{
  display:grid;
  gap:12px;
}

.driver-onboarding-packet-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:14px;
}

.driver-onboarding-packet-main{
  min-width:0;
  display:grid;
  gap:5px;
}

.driver-onboarding-packet-main strong{
  overflow-wrap:anywhere;
}

.driver-onboarding-mode-pill{
  justify-self:start;
  padding:4px 8px;
  border:1px solid rgba(20,184,166,.38);
  border-radius:999px;
  background:#ecfeff;
  color:#0f766e;
  font-size:.82rem;
  font-weight:850;
}

.driver-onboarding-packet-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

.driver-onboarding-link-copy{
  grid-column:1 / -1;
  font-size:.85rem !important;
}

.driver-onboarding-progress{
  display:block;
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}

.driver-onboarding-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#14b8a6,#2563eb);
}

.driver-onboarding-template-card,
.driver-onboarding-readonly{
  padding:12px;
}

.driver-onboarding-readonly{
  display:grid;
  gap:5px;
}

.driver-onboarding-stepper{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-bottom:16px;
}

.driver-onboarding-standalone-card{
  width:min(1120px,100%);
  margin:0 auto;
}

.driver-onboarding-standalone-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}

.driver-onboarding-standalone-head img{
  width:84px;
  height:auto;
}

.driver-onboarding-standalone-head h1{
  margin:0 0 4px;
}

.driver-onboarding-flow-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.driver-onboarding-flow-strip span{
  padding:7px 10px;
  border:1px solid rgba(20,184,166,.30);
  border-radius:999px;
  background:#ecfeff;
  color:#0f766e;
  font-size:.82rem;
  font-weight:800;
}

.driver-onboarding-upload-list{
  display:grid;
  gap:10px;
}

.driver-onboarding-upload-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
}

.driver-onboarding-upload-card strong,
.driver-onboarding-upload-card span,
.driver-onboarding-upload-card small{
  display:block;
}

.driver-onboarding-upload-card small{
  margin-top:5px;
  color:var(--muted);
}

.driver-onboarding-file-btn{
  position:relative;
  overflow:hidden;
  text-align:center;
}

.driver-onboarding-file-btn input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.driver-onboarding-post-complete{
  display:grid;
  gap:8px;
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(20,184,166,.32);
  border-radius:10px;
  background:#ecfeff;
}

.driver-onboarding-mode-banner{
  display:grid;
  gap:4px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid rgba(20,184,166,.45);
  border-radius:10px;
  background:#ecfeff;
  color:#0f766e;
}

.driver-onboarding-mode-banner.manual{
  border-color:rgba(245,158,11,.5);
  background:#fffbeb;
  color:#92400e;
}

.driver-onboarding-mode-banner span{
  font-weight:650;
}

.driver-onboarding-packet-header{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.driver-onboarding-packet-header div{
  min-width:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
}

.driver-onboarding-packet-header span,
.driver-onboarding-packet-header strong{
  display:block;
}

.driver-onboarding-packet-header span{
  color:var(--muted);
  font-size:.82rem;
}

.driver-onboarding-packet-header strong{
  overflow-wrap:anywhere;
  margin-top:3px;
}

.driver-onboarding-stepper button{
  min-height:52px;
  padding:8px !important;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
  color:var(--text);
  text-align:left;
  font-size:.82rem !important;
}

.driver-onboarding-stepper button.active{
  border-color:rgba(20,184,166,.65);
  background:#ecfeff;
  color:#0f766e;
}

.driver-onboarding-stepper span{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:6px;
  border-radius:999px;
  background:#0f766e;
  color:#fff;
  font-weight:900;
}

.driver-onboarding-step-form{
  display:grid;
  gap:14px;
}

.driver-onboarding-wizard-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  align-items:start;
  gap:16px;
}

.driver-onboarding-profile-preview{
  position:sticky;
  top:14px;
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
}

.driver-onboarding-profile-preview h4{
  margin:0 0 4px;
}

.driver-onboarding-preview-row,
.driver-onboarding-preview-section{
  display:grid;
  gap:3px;
  padding:8px 0;
  border-top:1px solid var(--border);
}

.driver-onboarding-preview-row span,
.driver-onboarding-preview-section span{
  color:var(--muted);
  font-size:.88rem;
}

.driver-onboarding-preview-row strong,
.driver-onboarding-preview-section strong{
  overflow-wrap:anywhere;
}

.driver-onboarding-repeater{
  display:grid;
  gap:12px;
}

.driver-onboarding-repeat-card{
  padding:12px;
}

.driver-onboarding-repeat-card strong{
  display:block;
  margin-bottom:10px;
}

@media (max-width:900px){
  .driver-onboarding-layout,
  .driver-onboarding-form-grid,
  .driver-onboarding-packet-card,
  .driver-onboarding-wizard-layout{
    grid-template-columns:1fr;
  }

  .driver-onboarding-choice-grid,
  .driver-onboarding-template-grid,
  .driver-onboarding-dashboard-grid,
  .driver-onboarding-packet-header,
  .driver-onboarding-upload-card{
    grid-template-columns:1fr;
  }

  .driver-onboarding-stepper{
    grid-template-columns:1fr 1fr;
  }

  .driver-onboarding-standalone-head{
    display:grid;
    grid-template-columns:1fr;
  }

  .driver-onboarding-file-btn{
    width:100%;
  }

  .driver-onboarding-packet-actions,
  .driver-onboarding-hero,
  .driver-onboarding-wizard-head{
    align-items:stretch;
  }

  .driver-onboarding-hero,
  .driver-onboarding-wizard-head{
    flex-direction:column;
  }

  .driver-onboarding-profile-preview{
    position:static;
  }
}

.driver-score-list{
  display:grid;
  gap:12px;
}

.driver-score-card{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-solid);
  overflow:hidden;
}

.driver-score-card summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  cursor:pointer;
  list-style:none;
}

.driver-score-card__header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
}

.driver-score-card summary::-webkit-details-marker{
  display:none;
}

.driver-score-card__main{
  display:grid;
  gap:3px;
  min-width:0;
}

.driver-score-card__main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.driver-score-meta{
  color:var(--muted);
  font-size:.84rem;
  font-weight:800;
}

.driver-score-card__score{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.driver-score-card__score b{
  font-size:1.25rem;
}

.driver-score-status{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:.78rem;
  font-weight:900;
}

.driver-score-status.ok{
  color:var(--ok);
  background:#ecfdf3;
  border-color:rgba(22,101,52,.22);
}

.driver-score-status.warn{
  color:var(--warn);
  background:#fff7e6;
  border-color:rgba(180,83,9,.25);
}

.driver-score-status.bad{
  color:var(--bad);
  background:#fef2f2;
  border-color:rgba(180,35,24,.22);
}

.driver-score-progress{
  height:8px;
  margin:0 14px 12px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}

.driver-score-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--ok);
}

.driver-score-progress span.warn{
  background:var(--warn);
}

.driver-score-progress span.bad{
  background:var(--bad);
}

.driver-score-details{
  display:grid;
  gap:10px;
  padding:0 14px 14px;
}

.driver-score-issue-group{
  display:grid;
  gap:6px;
}

.driver-score-issue-group ul{
  margin:0;
  padding-left:18px;
}

.driver-score-issue-group li{
  margin:4px 0;
}

.driver-score-issue-group small{
  display:block;
  color:var(--muted);
  font-weight:700;
}

.vehicle-score-open{
  justify-self:start;
  margin-top:2px;
}

.driver-profile-score-card{
  display:grid;
  gap:10px;
  margin-bottom:14px;
  padding:14px;
  border:1px solid var(--accent-border);
  border-radius:10px;
  background:var(--accent-soft);
}

.driver-profile-score-card__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

.driver-profile-score-card__head > div:first-child{
  display:grid;
  gap:3px;
}

.driver-profile-score-card .driver-score-progress{
  margin:0;
}

.driver-profile-score-card__action{
  justify-self:start;
}
#portal{display:none}
details.random-history{margin-top:14px}
details.random-history summary{cursor:pointer;font-weight:750;color:var(--brand);padding:6px 0}
.random-tracker{
  margin:4px 0 18px;
  padding:14px;
  border:1px solid var(--accent-border);
  border-radius:10px;
  background:var(--surface-solid);
  color:var(--text);
  box-shadow:
    inset 0 0 0 1px var(--accent-glow),
    0 14px 34px var(--accent-glow);
}
.random-tracker__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.random-tracker__header h3{
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
}
.random-tracker__status{
  flex-shrink:0;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
}
.random-tracker__status--behind{
  color:#7c2d12;
  background:#ffedd5;
}
.random-tracker__status--slightly-behind{
  color:#78350f;
  background:#fef3c7;
}
.random-tracker__status--attention{
  color:#78350f;
  background:#fef3c7;
}
.random-tracker__status--window-open{
  color:#1e3a8a;
  background:#dbeafe;
}
.random-tracker__status--on-pace,
.random-tracker__status--complete{
  color:#14532d;
  background:#dcfce7;
}
.random-tracker__status--urgent{
  color:#7f1d1d;
  background:#fee2e2;
}
.random-tracker__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.random-tracker__metric{
  min-width:0;
  padding:10px;
  border:1px solid rgba(214,225,239,.88);
  border-radius:8px;
  background:var(--surface-solid);
}
.random-tracker__metric span{
  display:block;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.25;
}
.random-tracker__metric strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:1.25rem;
}
.random-tracker__metric small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.25;
}
.random-tracker__remaining,
.random-tracker__action{
  margin-top:8px;
  color:var(--text);
  line-height:1.5;
}
.random-tracker__override{
  margin-top:12px;
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
}
.random-tracker__override label{
  display:grid;
  gap:5px;
  min-width:220px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:850;
}
.random-tracker__override select{
  margin:0;
}
@media (max-width:720px){
  .random-tracker__header{
    display:block;
  }
  .random-tracker__status{
    display:inline-block;
    margin-top:10px;
  }
  .random-tracker__grid{
    grid-template-columns:1fr;
  }
}
#randomPreview h3{margin:16px 0 8px;font-size:1.15rem;font-weight:800;color:var(--text)}
#randomPreview h4{
  margin:14px 0 6px;font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)
}
/* SOLID ROYAL BLUE OVERRIDE (no gradients) */
body{
  background:#110269 !important;   /* solid royal blue */
}

.app-bg{
  background:#110269 !important;
}

.app-bg__image,
.app-bg__gradient{
  display:none !important;
}

/* keep cards clean on top of solid blue */
.card{
  background:rgba(255,255,255,0.96) !important;
  border:1px solid rgba(255,255,255,0.75) !important;
}

/* make hero text clear on solid blue */
.page-header{
  color:#ffffff !important;
  text-shadow:none !important;
}

.tagline{
  color:#DDE9FF !important;
}
/* LARGE TEXT MODE */
html { font-size: 20px !important; }

body {
  font-size: 1rem !important;
}

h1 { font-size: 2.4rem !important; }
h2 { font-size: 1.45rem !important; }
h3 { font-size: 1.2rem !important; }
h4 { font-size: 1.05rem !important; }

.page-header h1,
.header-greeting span { font-size: 2.6rem !important; }
.tagline { font-size: 1.1rem !important; }

.card-head h2 { font-size: 1.35rem !important; }

input, select, button {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

button {
  padding: 12px 16px !important;
}

.btn-row > button,
.btn-primary,
.btn-outline,
.btn-plain {
  font-size: 1.02rem !important;
}

#userInfo { font-size: 1.05rem !important; }
.role-pill { font-size: 0.95rem !important; }

.kpi .value { font-size: 2.15rem !important; }
.kpi .label { font-size: 0.9rem !important; }
.kpi-badge { font-size: 0.9rem !important; }

.driver-row,
.driver-row--head,
.item,
.muted,
label,
p,
a {
  font-size: 0.98rem !important;
}

.driver-name { font-size: 1.02rem !important; font-weight: 700 !important; }
.driver-email { font-size: 0.95rem !important; }

#randomPreview h3 { font-size: 1.25rem !important; }
#randomPreview h4 { font-size: 1rem !important; }

/* Mobile-first fixes */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 16px !important; /* reset from 20px on phones */
}

.portal-shell {
  max-width: 100%;
  padding: 14px 12px 28px;
  min-height: 100dvh; /* better than 100vh on mobile */
}

.card {
  padding: 14px 12px;
  border-radius: 20px;
}

input, select, button {
  min-height: 44px; /* tap target */
  font-size: 16px !important; /* prevents iOS zoom on focus */
}

input,
select,
textarea{
  max-width:100%;
  min-width:0;
}

input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
}

.btn-row {
  flex-direction: column;
}

.btn-row > button {
  flex: 1 1 auto;
  width: 100%;
}

/* Tablets / small laptops */
@media (min-width: 768px) {
  body { font-size: 17px !important; }
  .portal-shell { padding: 20px 16px 40px; }
}

/* Driver details drawer */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:rgba(2,10,30,.35);
  display:none;
}
.drawer.open{display:block}
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(460px,100%);
  background:#fff; border-left:1px solid var(--border);
  box-shadow:-8px 0 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.drawer__head h3{
  margin:0; min-width:0; flex:1 1 220px; overflow-wrap:anywhere; line-height:1.2;
}
.drawer__head > div{
  flex:0 0 auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end;
}
.drawer__body{padding:14px 16px; overflow:auto}
.detail-row{padding:10px 0; border-bottom:1px solid var(--border)}
.detail-label{
  font-size:.82rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.detail-value{font-weight:650; margin-top:4px}
.drawer-tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.drawer-tab{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  padding:9px 12px;
}
.drawer-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.safety-history-header{
  align-items:flex-start;
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-bottom:12px;
}
.safety-event-form{
  border:1px solid var(--border);
  border-radius:8px;
  display:grid;
  gap:10px;
  margin-bottom:16px;
  padding:12px;
}
.form-grid.two{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.safety-timeline{
  display:grid;
  gap:12px;
}
.safety-timeline-item{
  display:grid;
  gap:8px;
}
.safety-timeline-date{
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
}
.safety-timeline-card{
  border:1px solid var(--border);
  border-radius:8px;
  display:grid;
  gap:8px;
  padding:12px;
}
.safety-timeline-topline,
.safety-timeline-actions{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
}
.safety-timeline-notes{
  background:#f8fafc;
  border-radius:8px;
  color:var(--text);
  font-size:.92rem;
  padding:8px;
}
.empty-state{
  border:1px dashed var(--border);
  border-radius:8px;
  color:var(--muted);
  padding:14px;
}
.bulk-import-actions{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bulk-import-group{
  border-top:1px solid var(--border);
  display:grid;
  gap:10px;
  padding-top:14px;
}
.bulk-import-group h3{
  font-size:1rem;
  margin:0;
}
.bulk-import-summary{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.bulk-import-table-wrap{
  border:1px solid var(--border);
  border-radius:8px;
  margin:10px 0;
  max-height:340px;
  overflow:auto;
}
.bulk-import-table{
  border-collapse:collapse;
  min-width:860px;
  width:100%;
}
.bulk-import-table th,
.bulk-import-table td{
  border-bottom:1px solid var(--border);
  font-size:.84rem;
  padding:8px;
  text-align:left;
  vertical-align:top;
}
.bulk-import-table th{
  background:#f8fafc;
  color:var(--muted);
  font-size:.78rem;
  text-transform:uppercase;
}
.bulk-import-table tr.is-invalid td{
  background:#fff7ed;
}
.missing-doc-debug{
  color:var(--muted);
  display:grid;
  gap:3px;
  min-width:240px;
}
.missing-doc-debug strong{
  color:var(--text);
}
.company-compliance-name-field.is-hidden{display:none}

.company-compliance-documents{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.company-compliance-document-row{
  align-items:center;
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
}

.company-compliance-add-files{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.company-compliance-item-accordion{
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  display:block;
  margin-top:10px;
  padding:8px;
}

.company-compliance-item-accordion > summary{
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

.company-compliance-item-accordion > summary::-webkit-details-marker{
  display:none;
}

.company-compliance-item-accordion > summary::before{
  color:#5eead4;
  content:"v";
  display:inline-block;
  margin-right:8px;
  transform:rotate(-90deg);
  transition:transform .16s ease;
}

.company-compliance-item-accordion[open] > summary::before{
  transform:rotate(0);
}

.company-compliance-item-accordion.company-compliance-documents,
.company-compliance-item-accordion.company-compliance-add-files{
  display:block;
}

.company-compliance-item-accordion.company-compliance-documents[open],
.company-compliance-item-accordion.company-compliance-add-files[open]{
  display:grid;
  gap:8px;
}

.danger-outline{
  border-color:#fca5a5;
  color:#b42318;
}

.danger-zone{
  margin-top:18px;
  border:1px dashed rgba(180,35,24,.45);
  border-radius:8px;
  padding:10px 12px;
}

.danger-zone summary{
  cursor:pointer;
  color:#b42318;
  font-weight:850;
}

.danger-zone .btn-small{
  margin-top:8px;
}

.warning-text{
  color:#b42318;
  font-weight:800;
}

.offline-wallet-panel{
  display:grid;
  gap:12px;
  margin-top:8px;
}

.offline-wallet-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}

.offline-wallet-summary > div{
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  background:var(--surface-solid);
}

.offline-wallet-summary span{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
}

.offline-wallet-summary strong{
  display:block;
  margin-top:4px;
  color:var(--text);
}

.offline-wallet-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.offline-wallet-list{
  display:grid;
  gap:8px;
}

.offline-wallet-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  color:var(--text);
  background:var(--surface-solid);
  text-align:left;
  cursor:pointer;
}

.offline-wallet-row small{
  display:block;
  color:var(--muted);
  margin-top:2px;
}

.driver-row{cursor:pointer}

.drawer-section-title{
  margin:18px 0 10px;
  color:var(--text);
  font-size:1rem;
  font-weight:850;
}

.vehicle-drawer-documents{
  margin-top:14px;
}

.vehicle-drawer-document,
.vehicle-coverage-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--border);
}

.vehicle-drawer-document strong,
.vehicle-drawer-document small,
.vehicle-coverage-row strong,
.vehicle-coverage-row small{
  display:block;
}

.vehicle-drawer-document small,
.vehicle-coverage-row small{
  margin-top:4px;
  color:var(--muted);
}

.vehicle-drawer-document__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.company-dates-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.company-date-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--border);
}

.company-date-row strong,
.company-date-row small{
  display:block;
}

.company-date-row small{
  margin-top:4px;
  color:var(--muted);
}

.company-date-row__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.company-key-dates{
  display:grid;
  gap:10px;
  margin:12px 0;
}

.company-key-date-field{
  display:grid;
  gap:6px;
}

.company-key-date-field span{
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.company-drawer-accordion{
  margin-top:16px;
  padding:12px 0;
  border-top:1px solid var(--border);
}

.company-drawer-accordion summary{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  cursor:pointer;
  font-weight:850;
  list-style:none;
}

.company-drawer-accordion summary::-webkit-details-marker{
  display:none;
}

.company-drawer-accordion summary::before{
  content:"\25B8";
  color:var(--brand);
  font-size:.9rem;
  transition:transform .18s ease;
}

.company-drawer-accordion[open] summary::before{
  transform:rotate(90deg);
}

.company-drawer-accordion:not([open]) > :not(summary){
  display:none;
}

.company-drawer-accordion[open]{
  padding-bottom:4px;
}

.company-audit-export-section .audit-export-actions{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.company-audit-export-section .audit-export-help{
  margin:0 0 8px;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
}

.portal-access-box{
  border:1px solid rgba(56,189,248,.22);
  background:rgba(15,23,42,.42);
  border-radius:8px;
  padding:12px;
  margin:14px 0;
}

.portal-access-box .drawer-section-title{
  margin-bottom:6px;
}

.driver-portal-status-grid{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.driver-portal-status-grid > div{
  display:grid;
  grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);
  gap:8px;
  align-items:center;
  border-top:1px solid rgba(148,163,184,.15);
  padding-top:8px;
}

.driver-portal-status-grid span{
  color:var(--muted);
  font-size:.86rem;
}

.driver-portal-status-grid strong{
  min-width:0;
  overflow-wrap:anywhere;
}

.driver-portal-actions{
  margin-top:12px;
}

.driver-portal-access-card{
  border-top:1px solid rgba(148,163,184,.18);
  margin-top:18px;
  padding-top:18px;
}

.driver-portal-table{
  display:grid;
  gap:0;
  margin-top:12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:8px;
  overflow:hidden;
}

.driver-portal-row{
  display:grid;
  grid-template-columns:minmax(130px,1.1fr) minmax(150px,1.1fr) minmax(110px,.85fr) minmax(110px,.8fr) minmax(120px,.9fr) minmax(120px,.9fr) minmax(180px,1.4fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid rgba(148,163,184,.14);
}

.driver-portal-row:first-child{
  border-top:0;
}

.driver-portal-row--head{
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:uppercase;
  background:rgba(15,23,42,.58);
}

.driver-portal-row small{
  display:block;
  color:var(--muted);
  margin-top:2px;
}

.driver-portal-table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

@media (max-width: 1100px){
  .driver-portal-table{
    border:0;
    gap:10px;
    overflow:visible;
  }

  .driver-portal-row,
  .driver-portal-row--head{
    grid-template-columns:1fr;
    border:1px solid rgba(148,163,184,.18);
    border-radius:8px;
    background:rgba(15,23,42,.35);
  }

  .driver-portal-row--head{
    display:none;
  }
}

.btn-small{
  padding:7px 10px;
  font-size:.82rem;
}

.filter-row{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  margin:8px 0 14px;
}

.workflow-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.workflow-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.workflow-row small{
  display:block;
  margin-top:2px;
  color:var(--muted);
}

.workflow-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.card-head--compact{
  margin-bottom:8px;
}

.badge-button{
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.badge-button:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

/* Phones */
@media (max-width: 640px) {
  .page-header h1 {
    font-size: 1.7rem !important;
    line-height: 1.15;
  }

  .header-greeting span{
    font-size:1.7rem !important;
    line-height:1.15;
  }

  .page-header{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .header-greeting{
    max-width:none;
    padding-bottom:0;
    text-align:left;
  }

  .vehicle-drawer-document,
  .company-date-row,
  .vehicle-coverage-row{
    flex-direction:column;
  }

  .vehicle-drawer-document__actions,
  .company-date-row__actions{
    align-items:flex-start;
  }

  .tagline {
    font-size: 0.95rem !important;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .kpi .value {
    font-size: 1.5rem !important;
  }

  /* Make driver table readable on narrow screens */
  .driver-row--head {
    display: none;
  }

  .driver-row {
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "icon name"
      "icon email"
      "icon phone"
      "icon company";
    gap: 4px 8px;
    padding: 10px 10px;
  }

  .driver-mini-ico { grid-area: icon; width: 28px; height: 28px; }
  .driver-name { grid-area: name; }
  .driver-email { grid-area: email; font-size: 0.9rem !important; }
  .driver-phone { grid-area: phone; font-size: 0.9rem !important; }
  .driver-company { grid-area: company; font-size: 0.9rem !important; }
  .driver-phone,
  .driver-company,
  .driver-email{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .chev { display: none; }

  .portal-user-row--head {
    display: none;
  }

  .portal-user-row {
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "icon email"
      "icon role"
      "icon company"
      "icon assigned"
      "icon lastlogin"
      "icon status";
    gap: 4px 8px;
    padding: 10px;
  }

  .portal-user-row .driver-mini-ico {
    grid-area: icon;
  }

  .portal-user-row > div:nth-child(2) {
    grid-area: email;
    word-break: break-word;
  }

  .portal-user-row > div:nth-child(3) {
    grid-area: role;
  }

  .portal-user-row > div:nth-child(4) {
    grid-area: company;
  }

  .portal-user-row > div:nth-child(5) {
    grid-area: assigned;
  }

  .portal-user-row > div:nth-child(6) {
    grid-area: lastlogin;
  }

  .portal-user-row > div:nth-child(7) {
    grid-area: status;
  }

  .portal-user-row > div:nth-child(8) {
    display: none;
  }

  .row {
    grid-template-columns: 1fr !important;
  }

  .user-topbar {
    align-items: flex-start;
  }

  .btn-logout {
    width: 100%;
  }
}

.app-layout{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.sidebar{
  width:260px;
  background:#0b1020;
  border-radius:20px;
  padding:20px;
  height:calc(100vh - 40px);
  position:sticky;
  top:20px;
  display:flex;
  flex-direction:column;
}

.logo-card{
  position:relative;
  display:block;
  padding:12px;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(0,229,216,.12),rgba(8,15,35,.6)),
    linear-gradient(145deg,rgba(16,31,68,.58),rgba(7,16,38,.38));
  border:1px solid rgba(0,229,216,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 26px rgba(0,229,216,.08),
    0 0 24px rgba(0,229,216,.12),
    0 14px 32px rgba(0,5,16,.22);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
}

.logo-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),transparent 34%),
    radial-gradient(circle at 50% 112%,rgba(0,174,239,.16),transparent 58%);
}

.logo-card img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
  filter:drop-shadow(0 8px 18px rgba(0,5,16,.24));
  transform:none;
}

.sidebar-logo{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:100%;
  margin:0 0 10px;
  min-height:0;
  padding:10px 14px;
  border-radius:18px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sidebar-logo:hover,
.sidebar-logo:focus-visible{
  border-color:rgba(0,229,216,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 30px rgba(0,229,216,.12),
    0 0 30px rgba(0,229,216,.16),
    0 18px 38px rgba(0,5,16,.3);
  transform:translateY(-1px);
  outline:none;
}

.sidebar-logo img{
  aspect-ratio:763 / 372;
  width:min(166px,100%);
  max-height:80px;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  overflow-y:auto;
  padding-right:2px;
}

.nav-section{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-section + .nav-section{
  margin-top:2px;
}

.nav-section-title{
  margin:0 0 1px;
  padding:0 6px;
  color:#8ea4c9;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}

.nav-section-toggle{
  width:100%;
  border:0;
  background:#151c31;
  border:1px solid rgba(148,163,184,.16);
  border-radius:10px;
  color:#fff;
  min-height:34px;
  padding:6px 10px !important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
}

.nav-section-toggle:hover,
.nav-section-toggle:focus-visible{
  color:#d7f8ff;
  outline:none;
}

.nav-section-chevron::before{
  content:"\25B8";
  font-size:.78rem;
}

.nav-section-toggle[aria-expanded="true"] .nav-section-chevron::before{
  content:"\25BE";
}

.nav-section-items{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-section-items[hidden]{
  display:none;
}

.nav-btn{
  flex:0 0 auto;
  width:100%;
  min-height:34px;
  background:#151c31;
  color:white;
  text-decoration:none;
  border:1px solid rgba(148,163,184,.16);
  padding:6px 10px !important;
  border-radius:10px;
  text-align:left;
  margin-bottom:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  font-size:.9rem !important;
  font-weight:650;
  line-height:1.2;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.sidebar-logo{order:0}
.sidebar .nav-btn[onclick*="dashboardPage"]{order:10}
.sidebar .nav-btn[onclick*="documentsPage"]{order:20}
.sidebar .nav-btn[onclick*="driversPage"]{order:30}
.sidebar .nav-btn[onclick*="driverOnboardingPage"]{order:35}
.sidebar .nav-btn[onclick*="vehiclesPage"]{order:40}
.sidebar .nav-btn[onclick*="companyCompliancePage"]{order:50}
.sidebar .nav-btn[onclick*="filingCabinetPage"]{order:60}
#policiesAcknowledgementsNavBtn{order:70}
.sidebar .nav-btn[onclick*="trainingCenterPage"]{order:80}
.sidebar .nav-btn[onclick*="companiesPage"]{order:90}
#portalUsersNavBtn{order:100}
#myCompanyInfoNavBtn{order:110}
#adminToolsToggle{order:120}
.sidebar .nav-btn.admin-only{order:125}
.sidebar .nav-btn[onclick*="settingsPage"]{order:130}

.nav-group{
  display:contents;
}

.nav-group-toggle{
  display:none;
}

.nav-group-toggle:hover{
  background:transparent;
  color:#dbeafe;
}

.nav-group-chevron{
  flex:0 0 auto;
  width:12px;
  color:currentColor;
  font-size:0;
  line-height:1;
}

.nav-group-chevron::before{
  content:"▼";
  font-size:.72rem;
}

.nav-group.is-collapsed .nav-group-chevron::before{
  content:"▶";
}

.nav-group-items{
  display:contents;
}

.nav-group.is-collapsed .nav-group-items{
  display:contents;
}

.nav-group .nav-group-chevron::before{
  content:"\25BE";
}

.nav-group.is-collapsed .nav-group-chevron::before{
  content:"\25B8";
}

.nav-btn:hover{
  background:#24304f;
  transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--accent-glow),0 10px 24px rgba(0,0,0,.18);
}

.ifta-proof-wrap{
  position:relative;
  display:inline-block;
  margin-top:4px;
}

.ifta-proof-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  cursor:pointer;
  border:1px solid #f59e0b;
  border-radius:999px;
  background:#fffbeb;
  color:#78350f;
  font-size:.9rem;
  font-weight:850;
  line-height:1.2;
  text-align:left;
  white-space:normal;
  box-shadow:0 8px 18px rgba(245,158,11,.14);
}

.ifta-proof-trigger:hover{
  background:#fef3c7;
  color:#451a03;
}

.ifta-proof-popover{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:40;
  width:min(360px, calc(100vw - 48px));
  padding:14px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:8px;
  background:#0f172a;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  color:#e5eefc;
}

.ifta-proof-popover.open{
  display:block;
}

.ifta-proof-popover ul{
  margin:8px 0 12px 18px;
  padding:0;
  color:#cbd5e1;
}

.ifta-proof-popover input[type="file"]{
  width:100%;
  margin:8px 0 10px;
}

.ifta-proof-files{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
}

.ifta-proof-file{
  width:100%;
  text-align:left;
}

.company-compliance-section{
  margin:16px 0;
  padding:16px;
  border:1px solid rgba(37,99,235,.24);
  border-radius:10px;
  background:rgba(15,23,42,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.company-compliance-section .section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.company-compliance-section h3{
  margin:0 0 4px;
  font-size:1.05rem;
}

.compliance-task-feed{
  display:grid;
  gap:8px;
}

.compliance-task{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:58px;
  padding:12px 14px;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:rgba(15,23,42,.48);
  cursor:pointer;
}

.compliance-task:hover{
  border-color:rgba(20,184,166,.5);
  background:rgba(15,23,42,.68);
}

.compliance-task small{
  display:block;
  margin-top:3px;
  color:var(--muted);
}

.vehicle-alert-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.vehicle-alert-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:56px;
  padding:12px 14px;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:rgba(15,23,42,.46);
  cursor:pointer;
}

.vehicle-alert-row:hover{
  border-color:rgba(20,184,166,.5);
  background:rgba(15,23,42,.66);
}

.vehicle-alert-row small{
  display:block;
  margin-top:3px;
  color:var(--muted);
}

.vehicle-alert-empty{
  margin-top:10px;
  padding:12px 14px;
  color:var(--muted);
  border:1px solid rgba(148,163,184,.18);
  border-radius:8px;
  background:rgba(15,23,42,.28);
}

.compliance-workspace-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:12px;
}

.compliance-workspace-card{
  display:flex;
  min-height:188px;
  height:100%;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:16px;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(15,23,42,.78),rgba(30,41,59,.54));
  cursor:pointer;
}

.compliance-workspace-card:hover,
.compliance-workspace-card.selected{
  border-color:rgba(20,184,166,.58);
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}

.workspace-card-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:#5eead4;
  border:1px solid rgba(20,184,166,.35);
  border-radius:8px;
  background:rgba(20,184,166,.12);
}

.workspace-card-icon .inline-icon{
  width:18px;
  height:18px;
}

.compliance-workspace-card strong{
  font-size:1.02rem;
}

.compliance-workspace-card span{
  color:var(--muted);
  font-size:.88rem;
}

.compliance-workspace-card em{
  margin-top:auto;
  color:#e2e8f0;
  font-style:normal;
  font-weight:800;
}

.workspace-health{
  font-weight:800;
}

.workspace-health.ok{color:#22c55e !important}
.workspace-health.warn{color:#f59e0b !important}
.workspace-health.bad{color:#f87171 !important}

.workspace-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}

.workspace-tabs span{
  padding:7px 10px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:999px;
  color:#cbd5e1;
  background:rgba(15,23,42,.5);
  font-size:.82rem;
  font-weight:800;
}

.company-compliance-cabinet-empty{
  text-align:center;
}

.ifta-cabinet-grid{
  display:grid;
  gap:14px;
}

.ifta-cabinet-panel{
  padding:14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  background:rgba(15,23,42,.42);
}

.ifta-cabinet-panel h4{
  margin:0 0 6px;
  font-size:1rem;
}

.ifta-company-selector{
  display:grid;
  gap:6px;
  margin:0 0 14px;
  max-width:360px;
}

.ifta-company-selector span{
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
}

.ifta-company-selector strong{
  color:var(--text);
}

.ifta-collapsible-panel summary,
.ifta-history-folder summary{
  color:#5eead4;
  cursor:pointer;
  font-weight:850;
}

.ifta-collapsible-panel summary{
  font-size:1rem;
}

.ifta-collapsible-panel:not([open]) > :not(summary),
.ifta-history-folder:not([open]) > :not(summary){
  display:none;
}

.ifta-collapsible-panel summary + .muted{
  margin-top:8px;
}

.ifta-cabinet-panel--wide{
  min-height:180px;
}

.ifta-workflow{
  display:grid;
  gap:14px;
}

.ifta-workflow-section{
  padding:14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  background:rgba(15,23,42,.42);
}

.ifta-workflow-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.ifta-workflow-section h4,
.ifta-workflow-accordion > summary{
  margin:0;
  color:var(--text);
  font-size:1rem;
  font-weight:850;
}

.ifta-workflow-accordion > summary{
  cursor:pointer;
  list-style:none;
}

.ifta-workflow-accordion > summary::-webkit-details-marker,
.ifta-quarter-row > summary::-webkit-details-marker{
  display:none;
}

.ifta-workflow-accordion > summary::before{
  content:"v";
  color:#5eead4;
  display:inline-block;
  margin-right:8px;
  transition:transform .16s ease;
}

.ifta-workflow-accordion:not([open]) > summary::before{
  transform:rotate(-90deg);
}

.ifta-current-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.ifta-current-summary div,
.ifta-audit-record-grid > div,
.ifta-quarter-doc-grid > div{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:8px;
  background:rgba(15,23,42,.44);
}

.ifta-current-summary span{
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
}

.ifta-current-summary strong{
  color:var(--text);
}

.ifta-current-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.ifta-proof-wrap--inline{
  display:inline-flex;
}

.ifta-quarter-row{
  margin-top:10px;
  border-top:1px solid rgba(148,163,184,.16);
  padding-top:10px;
}

.ifta-quarter-row > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  color:#5eead4;
  font-weight:850;
}

.ifta-quarter-row > summary em{
  color:var(--muted);
  font-style:normal;
  font-size:.82rem;
}

.ifta-quarter-doc-grid,
.ifta-audit-record-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.ifta-simple-doc-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ifta-simple-doc-button{
  max-width:100%;
  overflow-wrap:anywhere;
}

.ifta-audit-request-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.ifta-audit-request-card{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;
  background:rgba(15,23,42,.52);
}

.ifta-history-folder{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.22);
}

.company-compliance-item--focus{
  border-color:rgba(20,184,166,.56);
  border-radius:10px;
  padding:16px;
  background:rgba(20,184,166,.08);
}

.company-compliance-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid var(--border);
}

.company-compliance-item:last-child{
  border-bottom:0;
}

.company-compliance-item__body{
  min-width:0;
}

.company-compliance-item__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  flex-shrink:0;
}

.company-compliance-item--filed{
  margin:6px 0 14px;
  padding:16px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:12px;
  background:rgba(15,23,42,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 32px rgba(0,0,0,.26);
  opacity:.72;
  filter:saturate(.72);
}

.company-compliance-item--filed strong,
.company-compliance-item--filed .muted{
  color:#9aa8bd !important;
}

.company-compliance-item--filed .ifta-proof-trigger{
  background:rgba(15,23,42,.74);
  border-color:rgba(148,163,184,.34);
  color:#cbd5e1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.company-compliance-item--filed .kpi-badge.ok{
  background:#dcfce7;
  color:#166534;
  border-color:#86efac;
}

@media (max-width:1100px){
  .compliance-workspace-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .compliance-workspace-grid{
    grid-template-columns:1fr;
  }

  .compliance-task{
    align-items:flex-start;
    flex-direction:column;
  }

  .vehicle-alert-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .ifta-audit-request-grid{
    grid-template-columns:1fr;
  }

  .company-compliance-item{
    flex-direction:column;
  }

  .company-compliance-item__actions{
    align-items:flex-start;
    width:100%;
  }
}

.nav-btn.active{
  background:#2563eb;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    0 0 0 1px var(--accent-border),
    0 0 28px var(--accent-glow-strong);
}

.nav-count{
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:#f97316;
  color:#fff;
  display:none !important;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  font-weight:850;
}

.nav-upload-btn{
  background:#151c31;
  color:#fff;
}

.nav-upload-btn:hover{
  background:#24304f;
}

.resolve-missing-btn,
body[data-theme] .resolve-missing-btn{
  background:linear-gradient(135deg,#dc2626,#ef4444) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(220,38,38,.24);
}

.resolve-missing-btn:hover,
body[data-theme] .resolve-missing-btn:hover{
  background:linear-gradient(135deg,#b91c1c,#dc2626) !important;
}

.top-health-score{
  flex:1 1 auto;
  min-width:360px;
  max-width:none;
  width:auto;
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(180px,1fr);
  grid-template-areas:"headline track";
  align-items:center;
  align-content:center;
  gap:16px;
  padding:12px 16px !important;
  border:1px solid rgba(0,229,216,.25);
  border-radius:20px;
  background:
    radial-gradient(circle at top left,rgba(16,185,129,.16),transparent 46%),
    linear-gradient(135deg,rgba(9,29,58,.82),rgba(7,16,38,.72)),
    rgba(8,15,35,.64);
  color:#eaf2ff;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 28px rgba(16,185,129,.08),
    0 0 26px rgba(16,185,129,.1),
    0 14px 34px rgba(0,5,16,.18);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}

.top-health-score:hover{
  border-color:rgba(16,185,129,.42);
  background:
    radial-gradient(circle at top left,rgba(16,185,129,.2),transparent 46%),
    linear-gradient(135deg,rgba(10,37,71,.88),rgba(9,20,48,.78)),
    rgba(13,24,54,.76);
}

.compliance-status__label{
  display:none;
  color:#b9c9e6;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

.compliance-status__headline{
  grid-area:headline;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  color:#eaf2ff;
  line-height:1.1;
  white-space:nowrap;
}

.compliance-status__headline strong{
  color:#fff;
  font-size:1.55rem;
  font-weight:950;
}

.compliance-status__headline span{
  color:#a7f3d0;
  font-size:.98rem;
  font-weight:950;
  text-transform:uppercase;
}

.sidebar-health__track{
  grid-area:track;
  display:block;
  width:100%;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.sidebar-health__fill{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#22c55e,#10b981,#14b8a6);
  box-shadow:0 0 16px rgba(16,185,129,.38);
  transition:width .32s ease, background .18s ease, box-shadow .18s ease;
}

.sidebar-health__fill.ok{
  background:linear-gradient(90deg,#22c55e,#10b981,#14b8a6);
  box-shadow:0 0 16px rgba(16,185,129,.42);
}

.sidebar-health__fill.warn{
  background:linear-gradient(90deg,#facc15,#f59e0b);
  box-shadow:0 0 14px rgba(245,158,11,.32);
}

.sidebar-health__fill.bad{
  background:linear-gradient(90deg,#ef4444,#f43f5e);
  box-shadow:0 0 14px rgba(239,68,68,.34);
}

.sidebar-health__fill.neutral{
  background:linear-gradient(90deg,#94a3b8,#64748b);
  box-shadow:0 0 14px rgba(148,163,184,.24);
}

.compliance-status__details{
  display:none;
  flex-wrap:wrap;
  gap:6px 14px;
  color:#b8c7df;
  font-size:.78rem;
  font-weight:850;
  line-height:1.25;
}

.compliance-status__details span{
  min-width:0;
}

.compliance-status-banner.is-warn{
  border-color:rgba(245,158,11,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 26px rgba(245,158,11,.08),
    0 0 24px rgba(245,158,11,.09),
    0 14px 34px rgba(0,5,16,.18);
}

.compliance-status-banner.is-warn .compliance-status__headline span{
  color:#fde68a;
}

.compliance-status-banner.is-bad{
  border-color:rgba(239,68,68,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 26px rgba(239,68,68,.08),
    0 0 24px rgba(239,68,68,.09),
    0 14px 34px rgba(0,5,16,.18);
}

.compliance-status-banner.is-bad .compliance-status__headline span{
  color:#fecaca;
}

.main-content{
  flex:1;
  min-width:0;
}

@media (min-width:901px){
  .page-header{
    margin-left:280px;
  }

  .sidebar{
    position:fixed;
    top:20px;
    bottom:20px;
    left:16px;
    height:auto;
    max-height:none;
    overflow-y:visible;
    z-index:50;
  }

  .main-content{
    margin-left:280px;
    width:calc(100% - 280px);
  }
}

@media (max-width:900px){
  .portal-footer-links--app{
    width:100%;
  }

  .page-header{
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction:column;
    min-height:0;
  }

  .top-health-score{
    min-width:0;
    width:100%;
  }

  .header-greeting{
    max-width:none;
    width:100%;
    text-align:left;
  }

  .header-greeting span{
    font-size:2rem;
    white-space:normal;
  }
}

@media (max-width:560px){
  .top-health-score{
    grid-template-columns:1fr;
    grid-template-areas:
      "headline"
      "track";
    gap:8px;
    min-width:0;
    max-width:none;
    width:100%;
  }

  .compliance-status__headline{
    justify-content:space-between;
    white-space:normal;
  }
}

.page{
  display:none;
}

.active-page{
  display:block;
}

@media (max-width:900px){

  .app-layout{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
    height:auto;
    position:relative;
  }

}

.folder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

.folder-card{
  background:#fff;
  border:1px solid rgba(20,93,255,.24);
  border-radius:14px;
  padding:16px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.folder-card:hover{
  background:#f6f9ff;
  border-color:rgba(20,93,255,.38);
  box-shadow:0 16px 32px rgba(15,23,42,.12);
  transform:translateY(-1px);
}

.folder-title{
  font-weight:800;
  margin-bottom:6px;
}

.folder-meta{
  color:var(--muted);
  font-size:.9rem;
}

.training-hero-card{
  border-color:rgba(20,93,255,.22);
}

.training-overview-grid,
.training-download-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}

.safety-library-card{
  margin-top:14px;
  border-color:rgba(148,163,184,.34);
  background:rgba(248,250,252,.72);
  box-shadow:none;
}

.safety-library-summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  cursor:pointer;
  color:var(--text);
  font-weight:900;
}

.safety-library-summary span{
  display:grid;
  gap:2px;
}

.safety-library-summary strong{
  font-size:1rem;
}

.safety-library-summary small{
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
}

.safety-library-card[open] .safety-library-summary{
  margin-bottom:12px;
}

.safety-library-card .training-download-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}

.safety-library-card .training-download-card{
  padding:10px;
  border-color:rgba(148,163,184,.28);
  background:rgba(241,245,249,.62);
  box-shadow:none;
}

.safety-library-card .training-download-card span{
  color:var(--muted);
  font-size:.86rem;
  line-height:1.35;
}

.training-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
}

.training-overview-card,
.training-module-card,
.training-download-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-solid);
}

.training-overview-card span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.training-overview-card strong{
  display:block;
  margin-top:4px;
  color:var(--brand);
  font-size:1.9rem;
  line-height:1.05;
}

.training-module-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:220px;
}

.training-module-card--supervisor{
  border-color:rgba(20,93,255,.38);
}

.training-module-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.training-module-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#eef4ff;
  color:var(--brand);
  font-weight:900;
  font-size:.88rem;
}

.training-module-card h3{
  margin:0;
  font-size:1.22rem;
  line-height:1.2;
}

.training-module-card p,
.training-download-card span{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.48;
}

.training-module-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}

.training-module-meta .kpi-badge{
  margin-top:0;
  background:#eef4ff;
  color:#0b3f8a;
  border-color:rgba(20,93,255,.25);
  max-width:100%;
}

.training-module-meta .kpi-badge.ok{
  background:#ecfdf3;
  color:#166534;
  border-color:rgba(22,101,52,.24);
}

.training-module-meta .kpi-badge.warn{
  background:#fff7e6;
  color:#92400e;
  border-color:rgba(180,83,9,.28);
}

.training-module-meta .kpi-badge.bad{
  background:#fef2f2;
  color:#991b1b;
  border-color:rgba(180,35,24,.25);
}

.training-rule-badge{
  flex-basis:100%;
  display:block;
  width:100%;
  max-width:100%;
  line-height:1.28;
  white-space:normal;
  overflow-wrap:anywhere;
  border-radius:14px !important;
  padding:9px 12px !important;
  font-size:.86rem !important;
}

.training-progress{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}

.training-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ok),#22c55e);
}

.training-actions{
  margin-top:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.training-actions button{
  width:100%;
}

.training-resource-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 12px;
  text-decoration:none;
  text-align:center;
  font-weight:850;
}

.training-matrix{
  width:100%;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.training-matrix table{
  width:100%;
  border-collapse:collapse;
  min-width:780px;
}

.training-matrix th,
.training-matrix td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}

.training-matrix th{
  background:#f6f9ff;
  color:#334155;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.training-matrix td{
  color:var(--text);
  font-weight:800;
}

.training-matrix tr:last-child td{
  border-bottom:0;
}

.training-completion-list,
.training-record-list,
.training-record-summary{
  display:grid;
  gap:10px;
}

.training-completion-row{
  display:grid;
  grid-template-columns:minmax(180px,1.4fr) minmax(120px,.8fr) auto auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.training-completion-row span:not(.kpi-badge){
  color:var(--muted);
  font-weight:800;
}

.training-records-accordion summary{
  cursor:pointer;
  color:var(--text);
  font-size:1.15rem;
  font-weight:900;
}

.training-records-accordion[open] summary{
  margin-bottom:12px;
}

.training-record-summary{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-bottom:12px;
}

.training-record-summary > div{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.training-record-summary span{
  color:var(--muted);
  font-weight:800;
}

@media (max-width:768px){
  #trainingPage,
  .training-page,
  .training-section,
  .training-records,
  .training-records-grid,
  .training-modules-grid,
  .training-card-grid,
  .training-overview-grid,
  .training-download-grid,
  .training-completion-list,
  .training-record-list,
  .training-record-summary,
  .training-policy-grid{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  .training-card,
  .training-record-card,
  .module-card,
  .completion-card,
  .certificate-card,
  .quiz-card,
  .acknowledgement-card,
  .training-overview-card,
  .training-module-card,
  .training-download-card,
  .training-completion-row,
  .training-record-summary > div{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .training-completion-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  .training-records-accordion,
  .training-records-accordion summary,
  .training-actions,
  .training-actions button,
  .training-resource-link{
    width:100%;
    max-width:100%;
  }

  .training-matrix,
  .driver-training-table{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .training-matrix table,
  .driver-training-table table{
    min-width:0;
    width:100%;
  }

  .training-matrix thead,
  .driver-training-table thead{
    display:none;
  }

  .training-matrix tr,
  .driver-training-table tr{
    display:grid;
    gap:6px;
    padding:10px 0;
    border-bottom:1px solid var(--border);
  }

  .training-matrix td,
  .driver-training-table td{
    display:block;
    width:100%;
    padding:4px 0;
    border-bottom:0;
    overflow-wrap:anywhere;
  }

  .portal-footer-links,
  .portal-footer-links--app{
    flex-wrap:wrap;
    white-space:normal;
    text-align:center;
  }
}

.training-download-card{
  display:grid;
  gap:8px;
}

.training-download-card strong{
  color:var(--text);
  font-size:.96rem;
  line-height:1.25;
}

.training-poster-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:0;
}

.training-poster-actions .training-resource-link{
  min-height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 9px;
  border:1px solid rgba(148,163,184,.42);
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font-size:.82rem;
  font-weight:900;
  line-height:1.2;
  text-decoration:none;
}

.training-poster-actions .training-resource-link:hover{
  border-color:rgba(20,93,255,.38);
  color:var(--brand);
  background:rgba(20,93,255,.05);
}

.training-resource-link:disabled{
  opacity:.72;
  cursor:not-allowed;
  filter:grayscale(.25);
}

.training-policy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.policy-source-choice{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

.policy-workflow{
  display:grid;
  gap:16px;
}

.policy-workflow-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.policy-workflow-steps div{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
  color:var(--muted);
  font-weight:800;
}

.policy-workflow-steps span{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(20,93,255,.12);
  color:var(--accent);
  font-size:.85rem;
}

.policy-workflow-section{
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.policy-workflow-accordion > summary{
  color:var(--text);
  cursor:pointer;
  font-size:1rem;
  font-weight:850;
  list-style:none;
}

.policy-workflow-accordion > summary::-webkit-details-marker{
  display:none;
}

.policy-workflow-accordion > summary::before{
  color:#5eead4;
  content:"v";
  display:inline-block;
  margin-right:8px;
  transform:rotate(-90deg);
  transition:transform .16s ease;
}

.policy-workflow-accordion[open] > summary::before{
  transform:rotate(0);
}

.policy-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.policy-section-head h3{
  margin:0 0 4px;
}

.policy-library-views{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.policy-library-views span{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(20,93,255,.06);
  color:var(--muted);
  font-weight:850;
}

.policy-source-choice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.policy-source-card{
  display:grid;
  gap:6px;
  width:100%;
  min-height:132px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.policy-source-card span{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.4;
}

.policy-source-card.selected{
  border-color:rgba(20,93,255,.50);
  box-shadow:0 0 0 2px rgba(20,93,255,.12);
}

.policy-source-card__action{
  align-self:end;
  color:var(--accent) !important;
  font-weight:900;
}

.policy-template-acknowledgement{
  display:grid;
  gap:6px;
  padding:10px 12px;
  border:1px solid rgba(245,158,11,.40);
  border-radius:8px;
  background:rgba(245,158,11,.10);
  color:var(--text);
  line-height:1.35;
  font-size:.86rem;
}

.policy-template-acknowledgement p{
  margin:0;
}

.policy-template-acknowledgement label{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.policy-template-acknowledgement input{
  width:auto;
  margin-top:3px;
}

.policy-active-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px;
}

.policy-active-card{
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.policy-active-card > div:first-child{
  display:grid;
  gap:5px;
}

.policy-empty-state{
  padding:14px;
  border:1px dashed var(--border);
  border-radius:8px;
  color:var(--muted);
  font-weight:800;
}

.policy-detail-panel{
  margin-top:2px;
}

.policy-ack-table{
  display:grid;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}

.policy-ack-row{
  display:grid;
  grid-template-columns:1.15fr 1.35fr .8fr 1fr 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid var(--border);
}

.policy-ack-row:first-child{
  border-top:0;
}

.policy-ack-row--head{
  background:rgba(15,23,42,.04);
  color:var(--muted);
  font-size:.8rem;
  font-weight:900;
  text-transform:uppercase;
}

.policy-record-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:10px;
  align-items:stretch;
}

.policy-record-summary > div{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.policy-record-summary span{
  color:var(--muted);
  font-size:.84rem;
  font-weight:800;
}

.policy-record-summary strong{
  color:var(--text);
  font-size:1.4rem;
}

@media (max-width: 900px){
  .policy-workflow-steps,
  .policy-source-choice,
  .policy-library-views,
  .policy-record-summary{
    grid-template-columns:1fr;
  }

  .policy-ack-row,
  .policy-ack-row--head{
    grid-template-columns:1fr;
  }

  .policy-ack-row--head{
    display:none;
  }
}

@media (max-width: 760px){
  #policiesAcknowledgementsPage,
  #policiesAcknowledgementsPage *{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #policiesAcknowledgementsPage .policy-workflow,
  #policiesAcknowledgementsPage .policy-workflow-section,
  #policiesAcknowledgementsPage .training-policy-summary,
  #policiesAcknowledgementsPage .policy-active-grid{
    width:100%;
    grid-template-columns:1fr !important;
  }

  #policiesAcknowledgementsPage .policy-active-card,
  #policiesAcknowledgementsPage .policy-source-card{
    width:100%;
    overflow-wrap:anywhere;
  }

  #policiesAcknowledgementsPage .btn-row{
    flex-direction:column;
    align-items:stretch;
  }

  #policiesAcknowledgementsPage .btn-row > button,
  #policiesAcknowledgementsPage .btn-row > a{
    width:100%;
  }

  .portal-footer-links,
  .portal-footer-links--app{
    flex-wrap:wrap;
    white-space:normal;
    text-align:center;
  }
}

.training-policy-panel,
.training-policy-review-card{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.training-policy-panel h3{
  margin:0;
  font-size:1rem;
}

.training-policy-panel label{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:900;
}

.training-policy-panel .policy-template-acknowledgement label{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.training-policy-panel .policy-template-acknowledgement input{
  width:auto;
  margin-top:3px;
}

.training-policy-summary{
  display:grid;
  gap:8px;
  color:var(--muted);
  line-height:1.4;
}

.training-policy-summary strong,
.training-policy-review-card strong{
  color:var(--text);
  font-size:1rem;
}

.training-policy-review-card span{
  color:var(--muted);
  font-weight:800;
}

.training-slide{
  display:grid;
  gap:14px;
}

.training-slide h3{
  margin:0;
  font-size:1.35rem;
}

.training-slide-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.training-tile{
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.training-tile strong{
  display:block;
  margin-bottom:4px;
}

.training-warning{
  padding:12px;
  border:1px solid rgba(37,99,235,.20);
  border-radius:8px;
  background:#f8fbff;
  color:#334155;
  font-weight:600;
  line-height:1.45;
}

.training-do-dont{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}

.training-do-dont ul,
.training-slide ul{
  margin:6px 0 0 18px;
  padding:0;
}

.training-quiz-option,
.training-ack-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
}

.training-quiz-option input,
.training-ack-option input{
  flex:0 0 20px;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  margin:2px 0 0;
  accent-color:var(--brand);
}

.training-quiz-option input[type="radio"]{
  appearance:auto;
  -webkit-appearance:radio;
}

.training-ack-option input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
}

.training-quiz-option input:disabled,
.training-ack-option input:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.training-quiz-option span,
.training-ack-option span{
  min-width:0;
}

.training-slide-footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  margin-top:8px;
}

body[data-mode="dark"] .training-overview-card,
body[data-mode="dark"] .training-module-card,
body[data-mode="dark"] .training-completion-row,
body[data-mode="dark"] .training-record-summary > div,
body[data-mode="dark"] .training-download-card,
body[data-mode="dark"] .training-tile,
body[data-mode="dark"] .training-policy-panel,
body[data-mode="dark"] .training-policy-review-card,
body[data-mode="dark"] .policy-workflow-section,
body[data-mode="dark"] .policy-workflow-steps div,
body[data-mode="dark"] .policy-source-card,
body[data-mode="dark"] .policy-library-views span,
body[data-mode="dark"] .policy-active-card,
body[data-mode="dark"] .policy-empty-state,
body[data-mode="dark"] .policy-record-summary > div,
body[data-mode="dark"] .policy-ack-table,
body[data-mode="dark"] .driver-score-card,
body[data-mode="dark"] .driver-profile-score-card,
body[data-mode="dark"] .training-quiz-option,
body[data-mode="dark"] .training-ack-option,
body[data-mode="dark"] .training-matrix{
  background:#101a35;
  border-color:rgba(148,163,184,.34);
}

body[data-mode="dark"] .policy-ack-row{
  border-color:rgba(148,163,184,.24);
}

body[data-mode="dark"] .policy-ack-row--head{
  background:rgba(148,163,184,.08);
}

body[data-mode="dark"] .policy-template-acknowledgement{
  background:rgba(120,53,15,.30);
  border-color:rgba(251,191,36,.34);
}

body[data-mode="dark"] .training-module-card{
  background:#16223d;
  border-color:rgba(125,211,252,.22);
  box-shadow:0 12px 26px rgba(0,0,0,.20);
}

body[data-mode="dark"] .training-module-card--supervisor{
  border-color:rgba(45,212,191,.42);
}

body[data-mode="dark"] .training-module-card h3{
  color:#f8fafc;
}

body[data-mode="dark"] .training-module-card p,
body[data-mode="dark"] .training-download-card span{
  color:#e2e8f0;
}

body[data-mode="dark"] .training-download-card strong{
  color:#f8fafc;
}

body[data-mode="dark"] .training-download-card{
  background:#14203d;
  border-color:rgba(125,211,252,.36);
}

body[data-mode="dark"] .training-poster-actions .training-resource-link:disabled{
  background:#263653;
  border-color:rgba(148,163,184,.44);
  color:#cbd5e1;
}

body[data-mode="dark"] .safety-library-card,
body.portal-screen:not([data-mode="light"]) .safety-library-card{
  background:rgba(15,23,42,.38);
  border-color:rgba(148,163,184,.22);
}

body[data-mode="dark"] .safety-library-card .training-download-card,
body.portal-screen:not([data-mode="light"]) .safety-library-card .training-download-card{
  background:rgba(15,23,42,.34);
  border-color:rgba(148,163,184,.20);
}

body[data-mode="dark"] .safety-library-card .training-download-card span,
body.portal-screen:not([data-mode="light"]) .safety-library-card .training-download-card span{
  color:#94a3b8;
}

body[data-mode="dark"] .training-poster-actions .training-resource-link:not(:disabled),
body.portal-screen:not([data-mode="light"]) .training-poster-actions .training-resource-link:not(:disabled){
  background:transparent;
  border-color:rgba(148,163,184,.30);
  color:#cbd5e1;
  box-shadow:none;
}

body[data-mode="dark"] .training-poster-actions .training-resource-link:not(:disabled):hover,
body.portal-screen:not([data-mode="light"]) .training-poster-actions .training-resource-link:not(:disabled):hover{
  background:rgba(148,163,184,.08);
  border-color:rgba(125,211,252,.34);
  color:#e0f2fe;
  box-shadow:none;
}

body[data-mode="dark"] .training-module-icon{
  background:#eaf2ff;
  color:#0f4fd8;
  border:1px solid rgba(255,255,255,.75);
}

body[data-mode="dark"] .training-module-meta .kpi-badge{
  background:#eaf2ff;
  color:#0b3f8a;
  border-color:rgba(219,234,254,.92);
}

body[data-mode="dark"] .training-module-meta .kpi-badge.ok{
  background:#dcfce7;
  color:#14532d;
  border-color:#86efac;
}

body[data-mode="dark"] .training-module-meta .kpi-badge.warn{
  background:#fef3c7;
  color:#78350f;
  border-color:#fbbf24;
}

body[data-mode="dark"] .training-matrix .kpi-badge.warn{
  background:#fff1c2;
  color:#5f3400;
  border-color:#fde68a;
  box-shadow:0 0 0 1px rgba(253,230,138,.35);
  min-width:86px;
  padding-inline:12px;
}

body[data-mode="dark"] .training-matrix .kpi-badge.ok{
  background:#bbf7d0;
  color:#064e3b;
  border-color:#86efac;
  min-width:92px;
  padding-inline:12px;
}

body[data-mode="dark"] .training-matrix .kpi-badge{
  background:#e8f1ff;
  color:#07387c;
  border-color:#bfdbfe;
  font-weight:900;
  min-height:30px;
}

body[data-mode="dark"] .training-module-meta .kpi-badge.bad{
  background:#fee2e2;
  color:#7f1d1d;
  border-color:#fca5a5;
}

body[data-mode="dark"] .training-progress{
  background:#334155;
}

body[data-mode="dark"] .training-matrix th{
  background:#1d2b52;
  color:#f8fafc;
}

body[data-mode="dark"] .training-matrix td{
  color:#f1f5f9;
}

body[data-mode="dark"] .training-matrix tr{
  border-color:rgba(148,163,184,.24);
}

.pricing-calculator-card h3{
  margin:18px 0 10px;
  font-size:1rem;
  color:var(--text);
}

.pricing-plan-note{
  margin:6px 0 12px;
}

.driver-limit-notice{
  border:1px solid #f5c2c7;
  border-radius:8px;
  background:#fff5f5;
  color:#842029;
  padding:12px;
  margin-bottom:12px;
}

.driver-limit-notice strong{
  display:block;
  margin-bottom:4px;
}

.driver-limit-notice p{
  margin:4px 0;
}

.driver-limit-notice .btn-row{
  margin-top:10px;
}

body[data-mode="dark"] .driver-limit-notice,
body.portal-screen:not([data-mode="light"]) .driver-limit-notice{
  border-color:rgba(248,113,113,.45);
  background:rgba(127,29,29,.28);
  color:#fecaca;
}

.billing-checkout-buttons,
.billing-summary-grid{
  display:grid;
  gap:10px;
}

.billing-checkout-buttons{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:10px 0 12px;
}

.billing-checkout-lead{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.billing-settings-panel{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.billing-summary-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:10px 0 12px;
}

.billing-summary-item{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
  padding:12px;
  display:grid;
  gap:4px;
}

.billing-summary-item span{
  color:var(--muted);
  font-weight:800;
  font-size:.78rem;
  text-transform:uppercase;
}

.billing-summary-item strong{
  color:var(--text);
}

.billing-attention,
.billing-note{
  margin:10px 0 12px;
  padding:12px 14px;
  border-radius:8px;
  font-weight:800;
  line-height:1.45;
}

.billing-attention{
  border:1px solid rgba(245,158,11,.45);
  background:rgba(245,158,11,.12);
  color:#92400e;
}

.billing-attention--soft{
  border-color:rgba(59,130,246,.38);
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
}

.billing-note{
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.10);
  color:#166534;
}

.billing-plan-change-panel{
  display:grid;
  gap:8px;
  margin:12px 0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.billing-plan-change-panel label{
  margin:0;
}

.billing-plan-change-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}

.billing-plan-change-row select{
  margin:0;
}

.billing-plan-change-panel small{
  color:var(--muted);
  font-weight:700;
}

body[data-mode="dark"] .billing-attention,
body.portal-screen:not([data-mode="light"]) .billing-attention{
  color:#fde68a;
}

body[data-mode="dark"] .billing-attention--soft,
body.portal-screen:not([data-mode="light"]) .billing-attention--soft{
  color:#bfdbfe;
}

body[data-mode="dark"] .billing-note,
body.portal-screen:not([data-mode="light"]) .billing-note{
  color:#bbf7d0;
}

.billing-onboarding-placeholder{
  display:grid;
  gap:10px;
  max-width:760px;
}

.billing-success-banner{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid #bbf7d0;
  border-radius:8px;
  background:#f0fdf4;
  color:#14532d;
}

.billing-onboarding-steps{
  display:grid;
  gap:10px;
  padding-left:24px;
}

.billing-onboarding-steps li{
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.billing-onboarding-steps span{
  display:block;
  margin-top:3px;
  color:var(--muted);
}

.billing-help a{
  color:var(--brand);
  font-weight:850;
}

.pricing-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:16px;
  align-items:start;
}

.pricing-panel,
.pricing-summary-panel{
  min-width:0;
}

.pricing-input-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.pricing-module-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.pricing-toggle,
.pricing-radio{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-solid);
  color:var(--text);
  cursor:pointer;
}

.pricing-toggle input,
.pricing-radio input{
  width:auto;
  margin:3px 0 0;
  flex:0 0 auto;
}

.pricing-toggle span{
  display:grid;
  gap:2px;
  min-width:0;
}

.pricing-toggle strong,
.pricing-toggle small{
  overflow-wrap:anywhere;
}

.pricing-toggle small{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.25;
}

.pricing-options{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--surface-solid) 88%, var(--accent) 12%);
}

.pricing-radio{
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}

.pricing-radio span{
  margin-left:auto;
  font-weight:800;
  color:var(--brand);
}

.pricing-summary-panel{
  position:sticky;
  top:18px;
  display:grid;
  gap:12px;
}

.pricing-total-card{
  display:grid;
  gap:3px;
  padding:16px;
  border:1px solid rgba(20,93,255,.24);
  border-radius:12px;
  background:linear-gradient(180deg,var(--surface-solid) 0%,color-mix(in srgb, var(--surface-solid) 88%, var(--accent) 12%) 100%);
}

.pricing-total-card span{
  color:var(--muted);
  font-weight:800;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.pricing-total-card strong{
  font-size:2rem;
  line-height:1.1;
  color:var(--brand);
}

.pricing-breakdown{
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-solid);
}

.pricing-breakdown h3{
  margin:2px 0 10px;
}

.pricing-breakdown h3:not(:first-child){
  margin-top:16px;
}

.pricing-line{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}

.pricing-line:last-child{
  border-bottom:0;
}

.pricing-line div{
  display:grid;
  gap:3px;
  min-width:0;
}

.pricing-line span{
  color:var(--muted);
  font-size:.88rem;
  overflow-wrap:anywhere;
}

.pricing-line b{
  flex:0 0 auto;
  color:var(--text);
}

.pricing-warnings{
  display:grid;
  gap:8px;
}

.pricing-note{
  padding:10px 12px;
  border:1px solid rgba(180,83,9,.24);
  border-radius:10px;
  background:#fff7e6;
  color:#7c3f08;
  font-size:.9rem;
  font-weight:650;
}

body[data-mode="dark"] .pricing-toggle,
body[data-mode="dark"] .pricing-radio,
body[data-mode="dark"] .pricing-options,
body[data-mode="dark"] .pricing-total-card,
body[data-mode="dark"] .pricing-breakdown{
  background:#101a35;
  border-color:rgba(148,163,184,.34);
  color:var(--text);
}

body[data-mode="dark"] .pricing-total-card{
  background:linear-gradient(180deg,#101a35 0%,#132044 100%);
  border-color:var(--accent-border);
}

body[data-mode="dark"] .pricing-total-card strong{
  color:var(--accent);
}

body[data-mode="dark"] .pricing-toggle small,
body[data-mode="dark"] .pricing-line span{
  color:#a9b7d0;
}

body[data-mode="dark"] .pricing-line{
  border-color:rgba(148,163,184,.22);
}

body[data-mode="dark"] .pricing-note{
  background:rgba(180,83,9,.18);
  border-color:rgba(251,191,36,.34);
  color:#fde68a;
}

.pricing-actions .btn-primary,
.pricing-actions .btn-outline{
  min-height:46px;
}

@media (max-width:980px){
  .pricing-layout{
    grid-template-columns:1fr;
  }

  .pricing-summary-panel{
    position:static;
  }

  .billing-checkout-buttons,
  .billing-summary-grid{
    grid-template-columns:1fr;
  }

  .billing-checkout-lead{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .training-completion-row{
    grid-template-columns:1fr;
    align-items:flex-start;
  }

  .ifta-current-summary,
  .ifta-quarter-doc-grid,
  .ifta-audit-record-grid{
    grid-template-columns:1fr;
  }

  .ifta-quarter-row > summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .pricing-input-grid,
  .pricing-module-grid{
    grid-template-columns:1fr;
  }

  .pricing-total-card strong{
    font-size:1.55rem;
  }
}

.document-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.document-tab{
  flex:1 1 240px;
  min-height:48px;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:#10203a;
  font-weight:800;
  cursor:pointer;
}

.document-tab.active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.driver-documents-card{
  margin-top:16px;
}

.uploaded-doc-list{
  display:grid;
  gap:10px;
}

.uploaded-doc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.uploaded-doc-main{
  display:grid;
  gap:4px;
  min-width:0;
}

.uploaded-doc-main strong,
.uploaded-doc-main span{
  overflow-wrap:anywhere;
}

.uploaded-doc-open{
  flex:0 0 auto;
  white-space:nowrap;
}

.upload-dropzone{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:92px;
  margin:8px 0 12px;
  padding:14px;
  border:2px dashed rgba(148,163,184,.70);
  border-radius:8px;
  background:rgba(148,163,184,.08);
  color:var(--text);
  cursor:pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible{
  border-color:var(--accent);
  background:rgba(20,93,255,.08);
  box-shadow:0 0 0 3px rgba(20,93,255,.12);
  outline:0;
}

.upload-dropzone--dragover{
  border-color:var(--accent);
  background:rgba(20,93,255,.14);
  box-shadow:0 0 0 4px rgba(20,93,255,.14);
  transform:translateY(-1px);
}

.upload-dropzone--ready{
  border-color:rgba(16,185,129,.70);
  background:rgba(16,185,129,.10);
}

.upload-dropzone__icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:8px;
  background:rgba(20,93,255,.12);
  color:var(--accent);
}

.upload-dropzone--ready .upload-dropzone__icon{
  background:rgba(16,185,129,.14);
  color:var(--ok);
}

.upload-dropzone__copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.upload-dropzone__title{
  color:var(--text);
  font-weight:900;
  overflow-wrap:anywhere;
}

.upload-dropzone__detail{
  color:var(--muted);
  font-size:.92rem;
  overflow-wrap:anywhere;
}

.upload-dropzone__browse{
  flex:0 0 auto;
  border:1px solid var(--accent-border);
  border-radius:8px;
  background:var(--surface-solid);
  color:var(--accent);
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}

.upload-dropzone__browse:hover{
  background:rgba(20,93,255,.08);
}

.upload-dropzone__input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

body[data-mode="dark"] .upload-dropzone{
  background:rgba(148,163,184,.08);
  border-color:rgba(148,163,184,.46);
}

body[data-mode="dark"] .upload-dropzone:hover,
body[data-mode="dark"] .upload-dropzone:focus-visible,
body[data-mode="dark"] .upload-dropzone--dragover{
  background:rgba(168,85,247,.12);
  border-color:rgba(168,85,247,.78);
}

body[data-mode="dark"] .upload-dropzone--ready{
  background:rgba(16,185,129,.12);
  border-color:rgba(45,212,191,.70);
}

@media (max-width: 680px){
  .upload-dropzone{
    grid-template-columns:auto minmax(0,1fr);
  }

  .upload-dropzone__browse{
    grid-column:1 / -1;
    width:100%;
  }
}

/* Audit Ready Badge */
.audit-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:9px 14px;
  border-radius:999px;
  font-weight:850;
  border:1px solid rgba(20,93,255,.25);
  background:#eef4ff;
  color:var(--accent);
}

.audit-badge.ok{
  background:#ecfdf3;
  color:var(--ok);
  border-color:rgba(22,101,52,.22);
}

.audit-badge.warn{
  background:#fbbf24;
  color:#3b2200;
  border-color:#b45309;
}

.audit-badge.bad{
  background:#fef2f2;
  color:var(--bad);
  border-color:rgba(180,35,24,.22);
}

.dashboard-setup-list{
  display:grid;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.dashboard-setup-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(148,163,184,.10);
}

.dashboard-setup-list span{
  min-width:0;
  overflow-wrap:anywhere;
}

.dashboard-setup-list strong{
  flex:0 0 auto;
  font-size:.8rem;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dashboard-setup-list li.complete strong{
  color:var(--ok);
}

.kpi .value,
.audit-badge {
  transition:
    width 0.45s ease,
    background-color 0.25s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.kpi:hover {
  transform: translateY(-2px);
}

.audit-badge.ok {
  animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}



.attention-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-top: 10px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #431407;
}

.attention-item strong {
  color: #7c2d12;
  font-weight: 850;
}

.attention-item span {
  color: #7c2d12;
  font-weight: 700;
}

.attention-item.bad {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

.attention-item.bad strong,
.attention-item.bad span {
  color: #7f1d1d;
}

.attention-item.warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #713f12;
}

.attention-item.warn strong,
.attention-item.warn span {
  color: #713f12;
}

.resolve-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg,#dc2626,#ef4444);
  color: white;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:0 8px 18px rgba(220,38,38,.24);
}

.resolve-btn:hover {
  background:linear-gradient(135deg,#b91c1c,#dc2626);
}

.badge-shelf{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
}

.status-badge{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#f8fbff;
}

.status-badge strong{
  display:block;
  margin-bottom:5px;
}

.status-badge span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.35;
}

.status-badge.ok{
  background:#ecfdf3;
  border-color:rgba(22,101,52,.22);
}

.status-badge.warn{
  background:#fff7e6;
  border-color:rgba(180,83,9,.25);
}

.status-badge.bad{
  background:#fef2f2;
  border-color:rgba(180,35,24,.22);
}

.recent-win{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}

.recent-win:last-child{
  border-bottom:none;
}

.recent-upload-time{
  display:inline-block;
  margin-left:10px;
  color:var(--ok);
  font-size:.92rem;
  font-weight:750;
  white-space:nowrap;
}

/* Extra mobile polish for drivers and motor carriers using phones */
.main-content,
.card,
.driver-table,
.portal-user-table,
.folder-card,
.document-tab,
.kpi{
  min-width:0;
}

button,
.nav-btn,
.folder-card,
.document-tab{
  touch-action:manipulation;
}

input[type="file"]{
  min-height:56px;
  padding:10px;
  border:1px dashed var(--border);
  background:#fff;
}

input[type="file"]::file-selector-button{
  min-height:40px;
  margin-right:10px;
  padding:8px 12px;
  border:1px solid rgba(11,63,138,.28);
  border-radius:10px;
  background:#eef4ff;
  color:var(--brand);
  font:inherit;
  font-weight:800;
}

@media (max-width:760px){
  .portal-shell{
    padding:8px;
    overflow-x:hidden;
  }

  .app-layout{
    gap:10px;
  }

  .sidebar{
    position:sticky;
    top:0;
    z-index:50;
    padding:12px;
    border-radius:0 0 24px 24px;
    max-height:calc(100dvh - 16px);
    overflow:auto;
  }

  .sidebar-logo{
    margin:0 0 8px;
    min-height:0;
    padding:10px;
    border-radius:18px;
  }

  .sidebar-logo img{
    width:min(158px,100%);
    max-height:76px;
  }

  .card,
  .folder-card,
  .kpi,
  .driver-table,
  .portal-user-table,
  .drawer__panel,
  .training-overview-card,
  .training-module-card,
  .training-download-card,
  .safety-library-card,
  .settings-theme-card,
  .pricing-panel,
  .pricing-summary-panel,
  .pricing-total-card,
  .operations-trust-card,
  .operations-trust-summary-card,
  .operations-trust-panel,
  .onboarding-card,
  .getting-started-panel{
    border-radius:20px;
  }

  .nav-btn,
  .btn-primary,
  .btn-outline,
  .btn-plain,
  .btn-logout,
  input,
  select,
  textarea,
  .document-tab{
    border-radius:18px;
  }

  .sidebar .nav-btn{
    border-radius:10px;
  }

  .nav-btn{
    min-height:42px;
    margin-bottom:6px;
    padding:8px 14px !important;
    overflow-wrap:anywhere;
  }

  .sidebar .nav-btn{
    min-height:34px;
    margin-bottom:0;
    padding:6px 10px !important;
  }

  .card{
    margin-bottom:10px;
  }

  .health-top,
  .attention-item,
  .recent-win{
    align-items:flex-start;
    flex-direction:column;
  }

  .resolve-btn,
  .attention-item button,
  .btn-plain,
  .btn-outline,
  .btn-primary{
    width:100%;
    min-height:48px;
  }

  .dashboard-action-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .driver-score-card summary{
    grid-template-columns:1fr;
  }

  .driver-score-card__score{
    justify-content:space-between;
    width:100%;
  }

  .driver-profile-score-card__head{
    grid-template-columns:1fr;
  }

  .driver-profile-score-card__action{
    width:100%;
  }

  .document-tabs{
    gap:8px;
  }

  .document-tab{
    flex-basis:100%;
    min-height:52px;
  }

  .uploaded-doc-row{
    align-items:stretch;
    flex-direction:column;
  }

  .uploaded-doc-open{
    width:100%;
  }

  .safety-library-card{
    margin-top:8px;
  }

  .safety-library-card .training-download-grid{
    grid-template-columns:1fr;
  }

  .safety-library-card .training-download-card{
    padding:10px;
  }

  .training-poster-actions .training-resource-link{
    flex:0 0 auto;
    min-height:28px;
  }

  input[type="file"]::file-selector-button{
    width:100%;
    margin:0 0 8px;
  }

  .drawer__panel{
    width:100%;
    max-width:none;
  }

  .drawer__head{
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
  }

  #fileCabinetDrawer .drawer__head{
    background:#071225;
    border-bottom:1px solid rgba(45,212,191,.28);
    box-shadow:0 10px 28px rgba(2,8,23,.28);
  }

  #fileCabinetDrawer .drawer__head h3,
  #fileCabinetDrawer #fileCabinetDrawerTitle{
    color:#fff;
    opacity:1;
    font-weight:800;
    text-shadow:none;
  }

  #fileCabinetDrawer .drawer__head .btn-outline,
  #fileCabinetDrawer .drawer__head .btn-logout{
    background:#081329;
    border-color:rgba(45,212,191,.55);
    color:#dffcff;
    box-shadow:0 0 18px rgba(45,212,191,.10);
  }

  #fileCabinetDrawer .drawer__head .btn-outline:hover,
  #fileCabinetDrawer .drawer__head .btn-logout:hover{
    background:#0b1d38;
    border-color:rgba(45,212,191,.82);
    color:#fff;
  }

  .drawer__head > div{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
    gap:8px !important;
  }

  .drawer__head button{
    width:100%;
  }

  .drawer__body{
    padding:12px;
  }
}

@media (max-width:420px){
  .kpi-grid{
    grid-template-columns:1fr;
  }

  .kpi{
    text-align:left;
  }

  .kpi .kpi-ico{
    margin:0 0 8px;
  }
}

/* Personalization */
body[data-theme="command"]{
  --brand:#2563eb;
  --accent:#38bdf8;
  --accent-hover:#0ea5e9;
  --accent-soft:rgba(56,189,248,.16);
  --ok:#22c55e;
  --warn:#facc15;
  --bad:#fb7185;
}

body[data-theme="fleet"]{
  --brand:#0f766e;
  --accent:#14b8a6;
  --accent-hover:#0d9488;
  --accent-soft:rgba(20,184,166,.16);
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#dc2626;
}

body[data-theme="warm"]{
  --brand:#3056d3;
  --accent:#fb7185;
  --accent-hover:#f43f5e;
  --accent-soft:rgba(251,113,133,.15);
  --ok:#2dd4bf;
  --warn:#f97316;
  --bad:#e11d48;
}

body[data-mode="dark"]{
  --text:#eaf2ff;
  --muted:#a9b7d0;
  --border:rgba(148,163,184,.28);
  --surface:rgba(9,15,34,.94);
  --surface-solid:#101a35;
  background:#050b1e !important;
}

body[data-mode="dark"] .app-bg{
  background:linear-gradient(135deg,#050b1e 0%,#121053 48%,#053443 100%) !important;
}

body[data-mode="dark"] .random-tracker{
  background:#0f1a33;
  border-color:rgba(148,163,184,.38);
}

body[data-mode="dark"] .random-tracker__metric{
  background:#101d3a;
  border-color:rgba(148,163,184,.34);
}

body[data-mode="dark"] .random-tracker__status--behind{
  color:#fde68a;
  background:rgba(180,83,9,.34);
}

body[data-mode="dark"] .random-tracker__status--slightly-behind{
  color:#fde68a;
  background:rgba(202,138,4,.32);
}

body[data-mode="dark"] .random-tracker__status--attention{
  color:#fde68a;
  background:rgba(202,138,4,.32);
}

body[data-mode="dark"] .random-tracker__status--window-open{
  color:#bfdbfe;
  background:rgba(37,99,235,.34);
}

body[data-mode="dark"] .random-tracker__status--on-pace,
body[data-mode="dark"] .random-tracker__status--complete{
  color:#bbf7d0;
  background:rgba(21,128,61,.34);
}

body[data-mode="dark"] .random-tracker__status--urgent{
  color:#fecaca;
  background:rgba(180,35,24,.38);
}

body[data-mode="light"] .app-bg{
  background:linear-gradient(135deg,#eff6ff 0%,#eef2ff 48%,#ecfeff 100%) !important;
}

body[data-mode="light"]{
  --text:#0f1f35;
  --muted:#4e6280;
  --border:#cbdaf0;
  --surface:rgba(255,255,255,.96);
  --surface-solid:#ffffff;
  background:#eff6ff !important;
}

body[data-mode="light"] .page-header{
  color:#0f1f35 !important;
}

body[data-mode="light"] .header-greeting{
  color:#0f1f35 !important;
}

body[data-mode="light"] .header-greeting span{
  -webkit-text-stroke:1px rgba(255,255,255,.82);
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 2px 10px rgba(15,31,53,.22);
}

body[data-mode="dark"] .card,
body[data-mode="dark"] .driver-table,
body[data-mode="dark"] .portal-user-table,
body[data-mode="dark"] .drawer__panel{
  background:rgba(9,15,34,.94) !important;
  border-color:var(--accent-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(255,255,255,.02),
    0 20px 50px rgba(0,0,0,.28),
    0 0 34px var(--accent-glow);
}

body[data-mode="dark"] .user-topbar{
  background:rgba(15,23,42,.88) !important;
  border-color:var(--accent-border) !important;
}

body[data-mode="dark"] .training-achievement-card{
  background:
    radial-gradient(circle at top left,rgba(45,212,191,.12),transparent 48%),
    linear-gradient(180deg,rgba(20,31,58,.96) 0%,rgba(13,22,43,.96) 100%);
  border-color:rgba(125,211,252,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.22);
}

body[data-mode="dark"] .training-achievement-copy span,
body[data-mode="dark"] .training-achievement-copy small{
  color:#c6d4ea;
}

body[data-mode="dark"] .training-achievement-copy strong{
  color:#f8fafc;
}

body[data-mode="dark"] .training-achievement-card--green .training-achievement-icon{
  background:rgba(34,197,94,.18);
  color:#86efac;
}

body[data-mode="dark"] .training-achievement-card--blue .training-achievement-icon{
  background:rgba(59,130,246,.18);
  color:#93c5fd;
}

body[data-mode="dark"] .training-achievement-card--purple .training-achievement-icon{
  background:rgba(168,85,247,.18);
  color:#d8b4fe;
}

body[data-mode="dark"] .training-achievement-card--gold .training-achievement-icon{
  background:rgba(245,158,11,.20);
  color:#fcd34d;
}

body[data-mode="dark"] input,
body[data-mode="dark"] select,
body[data-mode="dark"] textarea,
body[data-mode="dark"] .driver-row,
body[data-mode="dark"] .portal-user-preview,
body[data-mode="dark"] .folder-card,
body[data-mode="dark"] .uploaded-doc-row,
body[data-mode="dark"] .kpi,
body[data-mode="dark"] .status-badge,
body[data-mode="dark"] .drawer-tab,
body[data-mode="dark"] .safety-event-form,
body[data-mode="dark"] .safety-timeline-card,
body[data-mode="dark"] .safety-timeline-notes,
body[data-mode="dark"] .empty-state,
body[data-mode="dark"] .bulk-import-table-wrap,
body[data-mode="dark"] .bulk-import-table th,
body[data-mode="dark"] .settings-theme-card{
  background:#101a35;
  border-color:rgba(148,163,184,.28);
  color:var(--text);
}

body[data-mode="dark"] .bulk-import-table td{
  border-color:rgba(148,163,184,.24);
}

body[data-mode="dark"] .bulk-import-table tr.is-invalid td{
  background:rgba(251,146,60,.12);
}

body[data-mode="dark"] .portal-user-preview__chips span{
  background:#101a35;
  border-color:rgba(148,163,184,.28);
  color:var(--text);
}

body[data-mode="dark"] .driver-row--head,
body[data-mode="dark"] .portal-user-row--head{
  background:#16213f;
}

body[data-mode="dark"] .detail-row,
body[data-mode="dark"] .item{
  border-color:rgba(148,163,184,.24);
}

body[data-mode="dark"] .btn-outline,
body[data-mode="dark"] .btn-logout,
body[data-mode="dark"] .document-tab:not(.active){
  background:#101a35;
  border-color:var(--accent-border);
  color:#dff6ff;
}

body[data-mode="dark"] .sidebar{
  background:#050914;
  border:1px solid rgba(148,163,184,.18);
}

body[data-mode="dark"] .nav-btn{
  background:#111a31;
  border:1px solid rgba(255,255,255,.04);
}

body[data-mode="dark"] .nav-btn:hover{
  background:#18264a;
  border-color:var(--accent-border);
}

body[data-theme] .nav-btn.active,
body[data-theme] .document-tab.active,
body[data-theme] .btn-primary,
body[data-theme] .btn-plain{
  background:linear-gradient(135deg,var(--brand),var(--accent)) !important;
  color:#fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 1px var(--accent-border),
    0 12px 28px var(--accent-glow-strong);
}

body[data-theme] .btn-outline{
  color:var(--accent);
  border-color:var(--accent-border);
}

body[data-theme] .btn-outline:hover{
  background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent-border),0 10px 24px var(--accent-glow);
}

.btn-plain.resolve-missing-btn,
body[data-theme] .btn-plain.resolve-missing-btn{
  background:linear-gradient(135deg,#dc2626,#ef4444) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(220,38,38,.24);
}

.btn-plain.resolve-missing-btn:hover,
body[data-theme] .btn-plain.resolve-missing-btn:hover{
  background:linear-gradient(135deg,#b91c1c,#dc2626) !important;
}

body[data-theme] .kpi{
  border-top:4px solid var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--accent-glow),
    0 12px 26px var(--accent-glow);
}

body[data-theme] .kpi:nth-child(1){
  border-top-color:var(--ok);
}

body[data-theme] .kpi:nth-child(2){
  border-top-color:var(--accent);
}

body[data-theme] .kpi:nth-child(4){
  border-top-color:var(--warn);
}

body[data-theme] .kpi:nth-child(5){
  border-top-color:var(--bad);
}

.kpi.kpi-tone-red,
body[data-theme] .kpi.kpi-tone-red{
  background:linear-gradient(180deg,#fee2e2 0%,#fff1f2 100%) !important;
  border-color:rgba(248,113,113,.68) !important;
  border-top:4px solid #ef4444 !important;
  box-shadow:
    inset 0 0 0 1px rgba(248,113,113,.20),
    0 14px 30px rgba(239,68,68,.15);
}

.kpi.kpi-tone-orange,
body[data-theme] .kpi.kpi-tone-orange{
  background:linear-gradient(180deg,#ffedd5 0%,#fff7ed 100%) !important;
  border-color:rgba(251,146,60,.68) !important;
  border-top:4px solid #f97316 !important;
  box-shadow:
    inset 0 0 0 1px rgba(251,146,60,.18),
    0 14px 30px rgba(249,115,22,.13);
}

.kpi.kpi-tone-yellow,
body[data-theme] .kpi.kpi-tone-yellow{
  background:linear-gradient(180deg,#fef3c7 0%,#fefce8 100%) !important;
  border-color:rgba(234,179,8,.62) !important;
  border-top:4px solid #eab308 !important;
  box-shadow:
    inset 0 0 0 1px rgba(234,179,8,.18),
    0 14px 30px rgba(234,179,8,.11);
}

.kpi.kpi-tone-green,
body[data-theme] .kpi.kpi-tone-green{
  background:linear-gradient(180deg,#dcfce7 0%,#ecfdf5 100%) !important;
  border-color:rgba(34,197,94,.58) !important;
  border-top:4px solid #22c55e !important;
  box-shadow:
    inset 0 0 0 1px rgba(34,197,94,.16),
    0 14px 30px rgba(34,197,94,.10);
}

.kpi.kpi-tone-blue,
body[data-theme] .kpi.kpi-tone-blue{
  background:linear-gradient(180deg,#dbeafe 0%,#eff6ff 100%) !important;
  border-color:rgba(59,130,246,.58) !important;
  border-top:4px solid #38bdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,.16),
    0 14px 30px rgba(59,130,246,.10);
}

.kpi.kpi-tone-neutral,
body[data-theme] .kpi.kpi-tone-neutral{
  background:linear-gradient(180deg,#f1f5f9 0%,#f8fafc 100%) !important;
  border-color:rgba(148,163,184,.62) !important;
  border-top:4px solid #94a3b8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,.18),
    0 14px 30px rgba(100,116,139,.10);
}

.kpi.kpi-tone-red .value{color:#991b1b}
.kpi.kpi-tone-orange .value{color:#9a3412}
.kpi.kpi-tone-yellow .value{color:#854d0e}
.kpi.kpi-tone-green .value{color:#166534}
.kpi.kpi-tone-blue .value{color:#075985}
.kpi.kpi-tone-neutral .value{color:#475569}

.kpi.kpi-tone-red .label{color:#7f1d1d}
.kpi.kpi-tone-orange .label{color:#7c2d12}
.kpi.kpi-tone-yellow .label{color:#713f12}
.kpi.kpi-tone-green .label{color:#14532d}
.kpi.kpi-tone-blue .label{color:#0c4a6e}
.kpi.kpi-tone-neutral .label{color:#475569}

.kpi.kpi-tone-red .kpi-ico,
.kpi.kpi-tone-orange .kpi-ico,
.kpi.kpi-tone-yellow .kpi-ico,
.kpi.kpi-tone-green .kpi-ico,
.kpi.kpi-tone-blue .kpi-ico,
.kpi.kpi-tone-neutral .kpi-ico{
  background:rgba(255,255,255,.92);
}

.kpi.kpi-tone-red .kpi-ico{
  color:#dc2626;
  border-color:rgba(248,113,113,.62);
}

.kpi.kpi-tone-orange .kpi-ico{
  color:#ea580c;
  border-color:rgba(251,146,60,.62);
}

.kpi.kpi-tone-yellow .kpi-ico{
  color:#ca8a04;
  border-color:rgba(234,179,8,.58);
}

.kpi.kpi-tone-green .kpi-ico{
  color:#16a34a;
  border-color:rgba(34,197,94,.55);
}

.kpi.kpi-tone-blue .kpi-ico{
  color:#0284c7;
  border-color:rgba(59,130,246,.55);
}

.kpi.kpi-tone-neutral .kpi-ico{
  color:#64748b;
  border-color:rgba(148,163,184,.58);
}

.kpi .value.kpi-value-status{
  font-size:clamp(1.35rem, 2.1vw, 2rem);
  line-height:1.05;
  overflow-wrap:anywhere;
}

body[data-mode="dark"] .kpi.kpi-tone-red{
  background:
    radial-gradient(circle at top right,rgba(248,113,113,.24),transparent 42%),
    linear-gradient(180deg,rgba(127,29,29,.72) 0%,rgba(69,10,10,.34) 100%) !important;
  border-color:rgba(248,113,113,.58) !important;
  border-top-color:#ef4444 !important;
  box-shadow:
    inset 0 0 0 1px rgba(248,113,113,.15),
    0 16px 34px rgba(239,68,68,.16);
}

body[data-mode="dark"] .kpi.kpi-tone-orange{
  background:
    radial-gradient(circle at top right,rgba(251,146,60,.22),transparent 42%),
    linear-gradient(180deg,rgba(124,45,18,.70) 0%,rgba(67,20,7,.34) 100%) !important;
  border-color:rgba(251,146,60,.58) !important;
  border-top-color:#f97316 !important;
  box-shadow:
    inset 0 0 0 1px rgba(251,146,60,.14),
    0 16px 34px rgba(249,115,22,.13);
}

body[data-mode="dark"] .kpi.kpi-tone-yellow{
  background:
    radial-gradient(circle at top right,rgba(250,204,21,.20),transparent 42%),
    linear-gradient(180deg,rgba(113,63,18,.70) 0%,rgba(66,32,6,.34) 100%) !important;
  border-color:rgba(250,204,21,.54) !important;
  border-top-color:#eab308 !important;
  box-shadow:
    inset 0 0 0 1px rgba(250,204,21,.12),
    0 16px 34px rgba(234,179,8,.12);
}

body[data-mode="dark"] .kpi.kpi-tone-green{
  background:
    radial-gradient(circle at top right,rgba(34,197,94,.22),transparent 42%),
    linear-gradient(180deg,rgba(20,83,45,.68) 0%,rgba(5,46,22,.32) 100%) !important;
  border-color:rgba(74,222,128,.48) !important;
  border-top-color:#22c55e !important;
  box-shadow:
    inset 0 0 0 1px rgba(74,222,128,.12),
    0 16px 34px rgba(34,197,94,.10);
}

body[data-mode="dark"] .kpi.kpi-tone-blue{
  background:
    radial-gradient(circle at top right,rgba(56,189,248,.24),transparent 42%),
    linear-gradient(180deg,rgba(14,116,144,.58) 0%,rgba(30,64,175,.32) 100%) !important;
  border-color:rgba(56,189,248,.56) !important;
  border-top-color:#38bdf8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,.14),
    0 16px 34px rgba(56,189,248,.10);
}

body[data-mode="dark"] .kpi.kpi-tone-neutral{
  background:
    radial-gradient(circle at top right,rgba(148,163,184,.18),transparent 42%),
    linear-gradient(180deg,rgba(51,65,85,.64) 0%,rgba(15,23,42,.36) 100%) !important;
  border-color:rgba(148,163,184,.50) !important;
  border-top-color:#94a3b8 !important;
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,.12),
    0 16px 34px rgba(100,116,139,.12);
}

body[data-mode="dark"] .kpi.kpi-tone-red .value,
body[data-mode="dark"] .kpi.kpi-tone-orange .value,
body[data-mode="dark"] .kpi.kpi-tone-yellow .value,
body[data-mode="dark"] .kpi.kpi-tone-green .value,
body[data-mode="dark"] .kpi.kpi-tone-blue .value,
body[data-mode="dark"] .kpi.kpi-tone-neutral .value{
  color:#f8fafc;
}

body[data-mode="dark"] .kpi.kpi-tone-red .label{color:#fecaca}
body[data-mode="dark"] .kpi.kpi-tone-orange .label{color:#fed7aa}
body[data-mode="dark"] .kpi.kpi-tone-yellow .label{color:#fef3c7}
body[data-mode="dark"] .kpi.kpi-tone-green .label{color:#bbf7d0}
body[data-mode="dark"] .kpi.kpi-tone-blue .label{color:#bae6fd}
body[data-mode="dark"] .kpi.kpi-tone-neutral .label{color:#cbd5e1}

.avatar--photo{
  overflow:hidden;
  padding:0;
}

.avatar--photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.settings-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:22px;
}

.settings-layout h3{
  margin:18px 0 8px;
}

.settings-layout h3:first-child{
  margin-top:0;
}

.company-audit-subsection{
  padding:10px 0 14px;
  border-top:1px solid rgba(148,163,184,.22);
}

.company-audit-subsection:first-of-type{
  border-top:0;
  padding-top:0;
}

.company-audit-subsection h3{
  margin:0 0 8px;
  color:#dbeafe;
  font-size:.98rem;
}

.settings-theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.settings-theme-card{
  min-height:150px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  display:grid;
  align-content:start;
  gap:9px;
  text-align:left;
}

.settings-theme-card.active{
  outline:3px solid var(--accent-soft);
  border-color:var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-border),
    0 0 28px var(--accent-glow);
}

.settings-theme-card span:last-child{
  color:var(--muted);
  font-size:.88rem;
}

.settings-theme-swatch{
  width:100%;
  height:42px;
  border-radius:10px;
}

.settings-theme-card--command .settings-theme-swatch{
  background:linear-gradient(135deg,#2563eb,#38bdf8 55%,#22c55e);
}

.settings-theme-card--fleet .settings-theme-swatch{
  background:linear-gradient(135deg,#0f766e,#14b8a6 55%,#f59e0b);
}

.settings-theme-card--warm .settings-theme-swatch{
  background:linear-gradient(135deg,#3056d3,#fb7185 55%,#2dd4bf);
}

.settings-segments{
  display:inline-flex;
  gap:6px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,.12);
}

.settings-segment{
  min-width:110px;
  padding:9px 14px !important;
  background:transparent;
  color:var(--text);
}

.settings-segment.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 22px var(--accent-glow-strong);
}

.settings-accent-control{
  display:grid;
  grid-template-columns:36px minmax(180px,360px) auto;
  gap:12px;
  align-items:center;
  max-width:560px;
}

.settings-accent-swatch{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.82);
  box-shadow:
    0 0 0 1px var(--border),
    0 0 0 4px var(--accent-soft),
    0 10px 28px var(--accent-glow-strong);
}

.settings-accent-range{
  width:100%;
  height:18px;
  padding:0 !important;
  border:0 !important;
  border-radius:999px;
  appearance:none;
  background:linear-gradient(90deg,#ef4444,#f59e0b,#eab308,#22c55e,#14b8a6,#38bdf8,#6366f1,#a855f7,#ec4899,#ef4444) !important;
}

.settings-accent-range::-webkit-slider-thumb{
  appearance:none;
  width:30px;
  height:30px;
  border-radius:50%;
  border:3px solid #fff;
  background:var(--accent);
  box-shadow:
    0 4px 14px rgba(0,0,0,.28),
    0 0 24px var(--accent-glow-strong);
  cursor:pointer;
}

.settings-accent-range::-moz-range-thumb{
  width:30px;
  height:30px;
  border-radius:50%;
  border:3px solid #fff;
  background:var(--accent);
  box-shadow:
    0 4px 14px rgba(0,0,0,.28),
    0 0 24px var(--accent-glow-strong);
  cursor:pointer;
}

.settings-accent-value{
  color:var(--muted);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.04em;
}

.settings-photo-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.settings-avatar-preview{
  width:72px;
  height:72px;
}

.notification-preferences-section{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.notification-preferences-grid{
  display:grid;
  gap:14px;
}

.notification-preference-block{
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(148,163,184,.08);
}

.notification-preference-block h4{
  margin:0 0 8px;
  font-size:1rem;
}

.settings-check-grid{
  display:grid;
  gap:9px;
}

.settings-check-row{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:800;
}

.settings-check-row input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

.settings-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

.settings-preview{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:rgba(148,163,184,.1);
}

.settings-preview-shell{
  min-height:280px;
  display:grid;
  grid-template-columns:80px 1fr;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg,#050b1e,#111354 55%,#06323f);
}

body[data-mode="light"] .settings-preview-shell{
  background:linear-gradient(135deg,#dbeafe,#eef2ff 55%,#ccfbf1);
}

.settings-preview-sidebar{
  border-radius:12px;
  background:#050914;
  padding:10px;
  display:grid;
  align-content:start;
  gap:9px;
}

.settings-preview-sidebar span,
.settings-preview-top,
.settings-preview-kpis span,
.settings-preview-card{
  border-radius:8px;
  background:rgba(255,255,255,.92);
}

.settings-preview-sidebar span{
  height:18px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
}

.settings-preview-main{
  display:grid;
  gap:10px;
}

.settings-preview-top{
  height:42px;
}

.settings-preview-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.settings-preview-kpis span{
  height:64px;
  border-top:4px solid var(--accent);
}

.settings-preview-kpis span:first-child{
  border-top-color:var(--ok);
}

.settings-preview-kpis span:last-child{
  border-top-color:var(--warn);
}

.settings-preview-card{
  min-height:92px;
}

@media (max-width:760px){
  .settings-layout{
    grid-template-columns:1fr;
  }

  .settings-segments{
    width:100%;
  }

  .settings-segment{
    flex:1;
  }

  .settings-accent-control{
    grid-template-columns:36px 1fr;
  }

  .settings-accent-value{
    grid-column:2;
  }

  .settings-photo-row{
    align-items:stretch;
    flex-direction:column;
  }
}

/* Login page */
body.login-screen{
  min-height:100vh;
  background:#08112a !important;
}

body.login-screen .app-bg{
  display:block;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 34%),
    linear-gradient(145deg,#0d1540 0%,#08112a 48%,#062f3c 100%) !important;
}

body.login-screen .portal-shell{
  max-width:640px;
  min-height:100dvh;
  padding:32px 18px;
  display:grid;
  place-items:center;
}

body.login-screen .page-header,
body.login-screen #portal{
  display:none !important;
}

body.checkout-link-screen #loginBox,
body.checkout-link-screen #portal,
body.checkout-link-screen .page-header,
body.checkout-link-screen .auth-loading-shell,
body.driver-onboarding-standalone-screen #loginBox,
body.driver-onboarding-standalone-screen #portal,
body.driver-onboarding-standalone-screen .page-header,
body.driver-onboarding-standalone-screen .auth-loading-shell{
  display:none !important;
}

body.checkout-link-screen #checkoutLinkCustomerBox{
  display:block;
}

body.driver-onboarding-standalone-screen #driverOnboardingStandaloneBox{
  display:block;
}

body.checkout-link-screen .portal-shell,
body.driver-onboarding-standalone-screen .portal-shell{
  display:block;
  max-width:1220px;
  min-height:100dvh;
  width:100%;
  padding:32px 24px;
}

body.portal-booting .page-header,
body.portal-booting #portal{
  display:none !important;
}

body.portal-screen #loginBox,
body.portal-booting #loginBox{
  display:none !important;
}

.auth-loading-shell{
  align-items:center;
  color:#eaf2ff;
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
  min-height:100dvh;
  text-align:center;
}

.auth-loading-shell img{
  background:rgba(8,17,42,.7);
  border:1px solid rgba(45,212,191,.22);
  border-radius:18px;
  box-shadow:0 18px 54px rgba(2,6,23,.35);
  max-height:92px;
  padding:18px;
  width:min(260px,70vw);
}

.auth-loading-shell strong{
  color:#cbd5e1;
  font-size:1rem;
}

body.login-screen .auth-loading-shell,
body.portal-screen:not(.portal-booting) .auth-loading-shell{
  display:none !important;
}

#loginBox.login-card{
  width:min(100%,520px);
  margin:0 auto;
  padding:30px;
  color:#eaf2ff;
  background:rgba(9,18,45,.86) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px;
  box-shadow:0 24px 55px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}

.website-checkout-card{
  width:min(100%,980px);
  margin:0 auto;
  padding:30px;
  color:#eaf2ff;
  background:rgba(9,18,45,.86) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px;
  box-shadow:0 24px 55px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
}

.checkout-link-customer-card{
  width:min(100%,1100px);
  padding:34px;
}

.checkout-link-customer-card .card-head{
  align-items:flex-start;
  gap:14px;
  margin-bottom:22px;
}

.checkout-link-customer-card .card-head .muted{
  max-width:760px;
  font-size:1rem;
  line-height:1.5;
}

.website-checkout-card[hidden]{
  display:none !important;
}

.website-checkout-card .ico{
  background:rgba(56,189,248,.16);
  color:#38bdf8;
}

.website-checkout-card h2{
  margin:0 0 8px;
  color:#fff;
  font-size:1.9rem !important;
  line-height:1.05;
  font-weight:900;
}

.website-checkout-card .muted,
.website-checkout-card label{
  color:#b9c6dd;
}

.website-checkout-form{
  display:grid;
  gap:16px;
}

.checkout-link-customer-form{
  gap:18px;
}

.website-checkout-price-card{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:14px;
  padding:16px;
  border:1px solid rgba(56,189,248,.34);
  border-radius:10px;
  background:rgba(56,189,248,.12);
}

.checkout-link-customer-summary-card{
  grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);
  padding:18px;
}

.website-checkout-price-card div{
  min-width:0;
}

.website-checkout-price-card span,
.website-checkout-price-card strong,
.website-checkout-price-card small{
  display:block;
}

.website-checkout-price-card span{
  color:#bae6fd;
  font-size:.76rem;
  font-weight:900;
  text-transform:uppercase;
}

.website-checkout-price-card strong{
  margin-top:2px;
  color:#fff;
  font-size:1.42rem;
  line-height:1.1;
  overflow-wrap:anywhere;
}

.website-checkout-price-card small{
  margin-top:5px;
  color:#d9e5f7;
  line-height:1.35;
}

.website-checkout-main{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:16px;
  align-items:start;
}

.checkout-link-customer-layout{
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  gap:20px;
}

.website-checkout-panel{
  display:grid;
  gap:12px;
  min-width:0;
}

.checkout-link-customer-left,
.checkout-link-customer-right{
  align-content:start;
  gap:14px;
}

.checkout-link-customer-section{
  min-width:0;
  padding:16px;
  border:1px solid rgba(160,180,215,.36);
  border-radius:10px;
  background:rgba(255,255,255,.065);
}

.checkout-link-customer-section h3{
  margin:0 0 12px;
  color:#fff;
  font-size:1.02rem;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.website-checkout-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}

.checkout-link-customer-info-grid{
  gap:12px;
}

.checkout-link-review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.checkout-link-review-field{
  min-width:0;
  padding:12px;
  border:1px solid rgba(160,180,215,.34);
  border-radius:10px;
  background:rgba(15,23,42,.34);
}

.checkout-link-review-field span,
.checkout-link-review-field strong{
  display:block;
  min-width:0;
}

.checkout-link-review-field span{
  color:#b9c6dd;
  font-size:.75rem;
  font-weight:900;
  text-transform:uppercase;
}

.checkout-link-review-field strong{
  margin-top:5px;
  color:#fff;
  font-size:.94rem;
  overflow-wrap:anywhere;
}

.website-checkout-service-summary{
  padding:12px;
  border:1px solid rgba(160,180,215,.38);
  border-radius:8px;
  background:rgba(255,255,255,.07);
}

.website-checkout-service-summary h3{
  margin:0 0 8px;
  color:#fff;
  font-size:1rem;
}

.website-checkout-service-summary ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}

.website-checkout-service-summary li{
  position:relative;
  padding-left:16px;
  color:#d9e5f7;
  font-weight:750;
  line-height:1.35;
}

.website-checkout-service-summary li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#38bdf8;
}

.website-checkout-service-summary p{
  margin:0;
  color:#d9e5f7;
  line-height:1.45;
  font-weight:750;
}

.website-checkout-card input,
.website-checkout-card select{
  padding:14px 16px;
  color:#eef5ff;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(160,180,215,.45) !important;
  border-radius:12px;
}

.website-checkout-card select option{
  color:#0f1f35;
}

.website-checkout-card input:focus,
.website-checkout-card select:focus{
  border-color:#38bdf8 !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.22);
}

.website-checkout-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:4px;
}

.website-checkout-message{
  display:none;
  padding:12px 14px;
  border:1px solid rgba(160,180,215,.45);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#eaf2ff;
}

.website-checkout-message strong,
.website-checkout-message span{
  display:block;
}

.website-checkout-message .btn-outline{
  display:inline-flex;
  width:max-content;
  margin-top:8px;
}

.website-checkout-message--info,
.website-checkout-message--success,
.website-checkout-message--error{
  display:block;
}

.website-checkout-message--info{
  border-color:rgba(56,189,248,.45);
  background:rgba(56,189,248,.12);
  color:#dff7ff;
}

.website-checkout-message--success{
  border-color:rgba(74,222,128,.42);
  background:rgba(34,197,94,.13);
  color:#dcfce7;
}

.website-checkout-message--error{
  border-color:rgba(248,113,113,.5);
  background:rgba(127,29,29,.28);
  color:#fee2e2;
}

.checkout-link-admin-form{
  display:grid;
  gap:14px;
}

.checkout-link-help{
  padding:10px 12px;
  border:1px solid rgba(20,184,166,.28);
  border-radius:8px;
  background:rgba(20,184,166,.08);
  color:var(--text);
  font-weight:700;
  line-height:1.35;
}

.checkout-link-agreement-display{
  padding:12px;
  border:1px solid rgba(20,184,166,.32);
  border-radius:8px;
  background:rgba(20,184,166,.08);
  color:var(--text);
}

.checkout-link-agreement-display strong,
.checkout-link-agreement-display span{
  display:block;
}

.checkout-link-agreement-display strong{
  color:var(--text);
  font-weight:900;
}

.checkout-link-agreement-display span{
  margin-top:4px;
  color:var(--muted);
  font-weight:800;
}

.checkout-link-agreement-display ul{
  margin:6px 0 0 18px;
  padding:0;
}

.checkout-link-agreement-display li{
  margin:3px 0;
  font-weight:750;
}

.checkout-link-output-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}

.checkout-links-list{
  display:grid;
  gap:10px;
}

.checkout-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(360px,.8fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-solid);
}

.checkout-link-row strong,
.checkout-link-row span,
.checkout-link-row small{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}

.checkout-link-row span,
.checkout-link-row small{
  color:var(--muted);
}

.checkout-link-status{
  padding:6px 9px;
  border-radius:999px;
  background:#e2e8f0;
  color:#0f172a;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}

.checkout-link-status--completed{
  background:#dcfce7;
  color:#166534;
}

.checkout-link-status--viewed,
.checkout-link-status--sent{
  background:#dbeafe;
  color:#1d4ed8;
}

.checkout-link-status--cancelled,
.checkout-link-status--expired{
  background:#fee2e2;
  color:#991b1b;
}

.checkout-link-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.checkout-link-actions .btn-danger{
  border:1px solid rgba(220,38,38,.45);
  border-radius:8px;
  background:#fee2e2;
  color:#991b1b;
  font-weight:900;
  min-height:36px;
  padding:8px 12px;
}

.checkout-link-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.checkout-link-summary div{
  padding:12px;
  border:1px solid rgba(160,180,215,.45);
  border-radius:8px;
  background:rgba(255,255,255,.08);
}

.checkout-link-summary span,
.checkout-link-summary strong{
  display:block;
}

.checkout-link-summary span{
  color:#b9c6dd;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}

.checkout-link-summary strong{
  color:#fff;
  overflow-wrap:anywhere;
}

.checkout-link-agreements{
  display:grid;
  gap:10px;
}

.checkout-link-agreement-package{
  padding:12px;
  border:1px solid rgba(20,184,166,.32);
  border-radius:8px;
  background:rgba(20,184,166,.10);
  color:#e6fffb;
}

.checkout-link-agreement-package h3{
  margin:0 0 8px;
  color:#fff;
  font-size:1rem;
}

.checkout-link-agreement-package ul{
  margin:0 0 10px 18px;
  padding:0;
}

.checkout-link-agreement-package li{
  margin:4px 0;
  font-weight:800;
}

.checkout-link-agreement-package p{
  margin:0;
  color:#d9e5f7;
  line-height:1.45;
}

.checkout-link-agreements details{
  border:1px solid rgba(160,180,215,.45);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  padding:0;
  overflow:hidden;
}

.checkout-link-agreements summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 12px;
  align-items:center;
  min-height:54px;
  padding:12px 14px;
  cursor:pointer;
  color:#fff;
  font-weight:900;
  list-style:none;
}

.checkout-link-agreements summary::-webkit-details-marker{
  display:none;
}

.checkout-link-agreement-title{
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.35;
}

.checkout-link-agreement-version{
  grid-column:1;
  color:#b9c6dd;
  font-size:.84rem;
  font-weight:800;
}

.checkout-link-agreement-toggle{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:end;
  white-space:nowrap;
  color:#67e8f9;
  font-size:.82rem;
  font-weight:900;
}

.checkout-link-agreement-toggle::before{
  content:attr(data-view-label);
}

.checkout-link-agreements details[open] .checkout-link-agreement-toggle::before{
  content:attr(data-hide-label);
}

.checkout-link-agreements p{
  margin:0;
  padding:0 14px 14px;
  color:#d9e5f7;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.checkout-link-consent-list{
  display:grid;
  gap:12px;
}

.checkout-link-consent{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid rgba(160,180,215,.45);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#eaf2ff;
  font-weight:850;
  line-height:1.45;
}

.checkout-link-consent input{
  width:22px;
  height:22px;
  min-width:22px;
  margin:1px 0 0;
  padding:0;
  background:#0f172a !important;
  accent-color:#14b8a6;
}

.checkout-link-consent span{
  min-width:0;
  overflow-wrap:anywhere;
}

.checkout-link-customer-actions{
  margin-top:2px;
}

.checkout-link-customer-actions .btn-primary{
  width:100%;
  justify-content:center;
}

.checkout-link-customer-actions .btn-primary:disabled{
  cursor:not-allowed;
  opacity:.55;
  filter:saturate(.55);
}

@media (max-width:980px){
  body.checkout-link-screen .portal-shell{
    max-width:820px;
    padding:24px 16px;
  }

  .website-checkout-card{
    width:min(100%,760px);
  }

  .checkout-link-customer-card{
    width:min(100%,760px);
    padding:24px;
  }

  .website-checkout-price-card,
  .website-checkout-main,
  .checkout-link-customer-layout{
    grid-template-columns:1fr;
  }

  .checkout-link-output-grid,
  .checkout-link-row,
  .checkout-link-summary{
    grid-template-columns:1fr;
  }

  .checkout-link-actions{
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  body.checkout-link-screen .portal-shell{
    padding:16px 10px;
  }

  .checkout-link-customer-card{
    padding:18px;
    border-radius:14px;
  }

  .checkout-link-customer-card .card-head{
    margin-bottom:16px;
  }

  .checkout-link-customer-summary-card,
  .checkout-link-customer-section{
    padding:14px;
  }

  .checkout-link-customer-info-grid{
    grid-template-columns:1fr;
  }

  .checkout-link-review-grid{
    grid-template-columns:1fr;
  }

  .checkout-link-agreements summary{
    grid-template-columns:1fr;
  }

  .checkout-link-agreement-toggle,
  .checkout-link-agreement-version{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }
}

.login-logo{
  display:block;
  width:min(390px, 88vw);
  margin:-8px auto 18px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-logo:hover{
  border-color:rgba(0,229,216,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 30px rgba(0,229,216,.12),
    0 0 30px rgba(0,229,216,.16),
    0 18px 38px rgba(0,5,16,.3);
  transform:translateY(-1px);
}

.login-logo img{
  max-height:220px;
}

.login-card-form[hidden]{
  display:none !important;
}

.login-card-head{
  align-items:flex-start;
  margin-bottom:0;
}

#loginBox .ico{
  background:rgba(56,189,248,.16);
  color:#38bdf8;
}

#loginBox h2{
  margin:0 0 8px;
  color:#fff;
  font-size:1.9rem !important;
  line-height:1.05;
  font-weight:900;
}

.login-copy{
  margin:0;
  color:#b9c6dd;
  font-size:.98rem !important;
}

.login-fields{
  display:grid;
  gap:12px;
  margin-top:22px;
}

#loginBox input{
  margin-top:0;
  padding:14px 16px;
  color:#eef5ff;
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(160,180,215,.45) !important;
  border-radius:12px;
}

#loginBox input::placeholder{
  color:rgba(226,236,255,.64);
}

#loginBox input:focus{
  border-color:#38bdf8 !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.22);
}

.password-field{
  position:relative;
}

.password-field input{
  width:100%;
  padding-right:52px !important;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:10px;
  display:grid;
  width:36px;
  height:36px;
  min-height:0;
  padding:0;
  place-items:center;
  color:#7dd3fc;
  background:transparent;
  border:0;
  border-radius:10px;
  box-shadow:none;
  transform:translateY(-50%);
}

.password-toggle:hover{
  color:#e0f2fe;
  background:rgba(255,255,255,.08);
}

.password-toggle:focus-visible{
  outline:2px solid #38bdf8;
  outline-offset:2px;
}

.password-toggle svg{
  width:20px;
  height:20px;
}

.password-toggle__eye-off,
.password-toggle.is-visible .password-toggle__eye{
  display:none;
}

.password-toggle.is-visible .password-toggle__eye-off{
  display:block;
}

.login-actions{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.demo-login-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.demo-login-card{
  display:flex;
  min-height:86px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  padding:14px;
  text-align:left;
  color:#eaf2ff !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(185,220,255,.28) !important;
  border-radius:12px;
  box-shadow:none !important;
}

.demo-login-card:hover{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(125,211,252,.55) !important;
}

.demo-login-card span{
  color:#fff;
  font-size:.95rem;
  font-weight:900;
}

.demo-login-card small{
  color:#b9c6dd;
  font-size:.78rem;
  font-weight:700;
  line-height:1.25;
}

#loginBtn,
#saveNewPasswordBtn{
  width:100%;
  min-height:52px;
  border-radius:12px;
  font-weight:900;
  background:linear-gradient(135deg,#1677ff,#2fb8ed);
  box-shadow:0 16px 32px rgba(22,119,255,.32);
}

.forgot-password-btn{
  width:100%;
  min-height:46px;
  background:transparent !important;
  color:#b9dcff !important;
  border:1px solid rgba(185,220,255,.24) !important;
  border-radius:12px;
  box-shadow:none !important;
  font-weight:800;
}

.forgot-password-btn:hover{
  background:rgba(255,255,255,.06) !important;
}

.login-message{
  min-height:22px;
  margin:12px 0 0;
  color:#9fe7d0;
  font-size:.88rem !important;
}

.login-message--error{
  color:#fecaca;
}

.login-privacy-footer{
  display:flex;
  gap:14px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(185,220,255,.22);
  color:#dbeafe;
  text-align:left;
}

.login-privacy-lock{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#8fc7ff;
}

.login-privacy-lock svg{
  width:24px;
  height:24px;
}

.login-privacy-footer strong{
  display:block;
  color:#f8fbff;
  font-size:.92rem;
  line-height:1.35;
}

.login-privacy-footer p{
  margin:5px 0 0;
  color:#aebbd2;
  font-size:.82rem !important;
  line-height:1.45;
}

.login-privacy-details{
  margin-top:10px;
}

.login-privacy-details summary{
  width:max-content;
  color:#38bdf8;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}

.login-privacy-details summary::-webkit-details-marker{
  display:none;
}

.login-privacy-details summary::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.login-privacy-details[open] summary::after{
  transform:translateY(2px) rotate(225deg);
}

.login-privacy-details div{
  max-width:420px;
  margin-top:10px;
}

.login-footer-links{
  margin-top:26px;
}

@media (max-width:560px){
  body.login-screen .portal-shell{
    padding:18px;
  }

  #loginBox.login-card{
    padding:22px;
  }

  .login-logo{
    width:min(350px, 92vw);
    margin-bottom:22px;
  }

  #loginBox h2{
    font-size:1.55rem !important;
  }

  .demo-login-grid{
    grid-template-columns:1fr;
  }

  .login-privacy-footer{
    margin-top:22px;
    padding-top:20px;
  }
}

body[data-mode="dark"] .pricing-calculator-card .pricing-toggle,
body[data-mode="dark"] .pricing-calculator-card .pricing-radio,
body[data-mode="dark"] .pricing-calculator-card .pricing-options,
body[data-mode="dark"] .pricing-calculator-card .pricing-total-card,
body[data-mode="dark"] .pricing-calculator-card .pricing-breakdown,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-toggle,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-radio,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-options,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-total-card,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-breakdown{
  background:#101a35 !important;
  border-color:rgba(148,163,184,.34) !important;
  color:#eaf2ff !important;
}

body[data-mode="dark"] .pricing-calculator-card .pricing-total-card,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-total-card{
  background:linear-gradient(180deg,#101a35 0%,#132044 100%) !important;
  border-color:var(--accent-border) !important;
}

body[data-mode="dark"] .pricing-calculator-card .pricing-total-card strong,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-total-card strong{
  color:var(--accent) !important;
}

body[data-mode="dark"] .pricing-calculator-card .pricing-toggle strong,
body[data-mode="dark"] .pricing-calculator-card .pricing-radio,
body[data-mode="dark"] .pricing-calculator-card .pricing-breakdown h3,
body[data-mode="dark"] .pricing-calculator-card .pricing-line strong,
body[data-mode="dark"] .pricing-calculator-card .pricing-line b,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-toggle strong,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-radio,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-breakdown h3,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-line strong,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-line b{
  color:#eaf2ff !important;
}

body[data-mode="dark"] .pricing-calculator-card .pricing-toggle small,
body[data-mode="dark"] .pricing-calculator-card .pricing-line span,
body[data-mode="dark"] .pricing-calculator-card .pricing-breakdown .muted,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-toggle small,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-line span,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-breakdown .muted{
  color:#a9b7d0 !important;
}

body[data-mode="dark"] .pricing-calculator-card .pricing-line,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-line{
  border-color:rgba(148,163,184,.22) !important;
}

body[data-mode="dark"] .pricing-calculator-card .pricing-note,
body.portal-screen:not([data-mode="light"]) .pricing-calculator-card .pricing-note{
  background:rgba(180,83,9,.18) !important;
  border-color:rgba(251,191,36,.34) !important;
  color:#fde68a !important;
}







.reminder-preview-card {
  display: grid;
  gap: 16px;
}

.reminder-status-card {
  display: grid;
  gap: 14px;
}

.reminder-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.reminder-status-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 8px;
  background: rgba(15, 23, 42, .38);
}

.reminder-status-grid span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.reminder-status-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: .94rem;
  overflow-wrap: anywhere;
}

.reminder-preview-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.reminder-preview-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.reminder-preview-meta div {
  min-height: 76px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px;
}

.reminder-preview-meta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.reminder-preview-meta strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.reminder-email-preview-frame {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.email-center-recipients {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  overflow-wrap: anywhere;
}

.email-center-message {
  min-height: 260px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.notification-template-card {
  display: grid;
  gap: 16px;
}

.notification-template-layout {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.notification-template-list {
  display: grid;
  gap: 12px;
}

.notification-template-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.notification-template-section h3 {
  margin: 0;
  color: var(--text);
  font-size: .88rem;
}

.notification-template-buttons {
  display: grid;
  gap: 7px;
}

.notification-template-button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(15, 23, 42, .38);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.notification-template-button.selected {
  border-color: rgba(20, 184, 166, .72);
  background: rgba(20, 184, 166, .14);
}

.notification-template-button span {
  font-weight: 850;
}

.notification-template-button small {
  color: var(--muted);
}

.notification-template-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.notification-template-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.notification-template-editor-head h3 {
  margin: 0;
}

@media (max-width: 900px) {
  .notification-template-layout {
    grid-template-columns: 1fr;
  }
}

.email-center-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.email-log-health {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.email-log-health span,
.email-log-row small {
  color: var(--muted);
  font-size: 12px;
}

.email-log-health span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.email-log-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.email-log-row {
  display: grid;
  grid-template-columns: 150px 180px minmax(200px, 1.2fr) 160px 160px 150px 90px;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 12px;
  cursor: pointer;
}

.notification-audit-row {
  grid-template-columns: 150px 180px minmax(220px, 1fr) 190px 190px 105px minmax(190px, 1fr) 110px 135px;
  min-width: 1480px;
}

.notification-audit-row:not(button) {
  cursor: default;
}

.notification-audit-actions {
  display: flex;
  gap: 8px;
}

.notification-audit-actions .btn-outline,
.notification-audit-actions .btn-primary {
  min-height: 34px;
  padding: 8px 10px;
  white-space: nowrap;
}

.email-log-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.email-log-row--head {
  cursor: default;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .email-center-filters,
  .email-log-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .notification-audit-actions {
    flex-wrap: wrap;
  }
}

.portal-toast-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
}

.portal-toast {
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: #071325;
  color: #ecfeff;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  font-weight: 800;
  transition: opacity .2s ease, transform .2s ease;
}

.portal-toast.ok {
  border-color: rgba(16, 185, 129, 0.65);
}

.portal-toast.bad {
  border-color: rgba(248, 113, 113, 0.75);
}

.portal-toast.warn {
  border-color: rgba(251, 191, 36, 0.75);
}

.portal-toast.is-hiding {
  opacity: 0;
  transform: translateY(8px);
}

.onboarding-checklist-container {
  margin: 18px 0 20px;
}

.onboarding-card,
.getting-started-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 16px;
}

.onboarding-card {
  display: grid;
  gap: 14px;
}

.onboarding-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-card__head h3,
.getting-started-panel h3,
.onboarding-tour-box h3 {
  margin: 0;
  color: var(--text);
}

.onboarding-card__head p,
.getting-started-panel p,
.onboarding-tour-box p {
  margin: 4px 0 0;
  color: var(--muted);
}

.onboarding-progress {
  flex: 0 0 auto;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--brand);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.onboarding-checklist {
  display: grid;
  gap: 8px;
}

.onboarding-checklist__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-solid);
  padding: 10px;
}

.onboarding-checklist__item.is-done {
  border-color: rgba(21, 128, 61, 0.34);
  background: rgba(21, 128, 61, 0.06);
}

.onboarding-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  color: #ffffff;
  background: #e2e8f0;
}

.onboarding-checklist__item.is-done .onboarding-check {
  border-color: var(--ok);
  background: var(--ok);
}

.onboarding-checklist__item.is-done .onboarding-check::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.onboarding-item-action {
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.onboarding-actions,
.getting-started-actions,
.onboarding-tour-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.getting-started-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.getting-started-panel {
  display: grid;
  gap: 8px;
  align-content: start;
}

.getting-started-panel a {
  color: var(--accent);
  font-weight: 800;
}

.getting-started-video {
  background: rgba(15, 31, 53, 0.04);
}

.onboarding-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: end center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.42);
  overflow-y: auto;
}

.onboarding-tour-overlay[hidden] {
  display: none;
}

.onboarding-tour-box {
  position: relative;
  z-index: 10002;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-solid);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  padding: 18px;
}

.onboarding-tour-step {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.onboarding-tour-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.onboarding-tour-highlight {
  position: relative;
  z-index: 10001;
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: 8px;
  background: var(--surface-solid);
}

.compliance-export-disclaimer {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(180, 83, 9, 0.35);
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.1);
  padding: 14px;
  margin: 12px 0;
}

.compliance-export-disclaimer h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
}

.compliance-export-disclaimer p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.compliance-export-disclaimer--compact {
  padding: 12px;
}

.audit-export-actions,
.audit-export-page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0;
}

.audit-export-page-actions {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 14px;
}

@media (max-width: 760px) {
  .onboarding-card__head,
  .onboarding-checklist__item {
    grid-template-columns: 1fr;
  }

  .onboarding-card__head {
    display: grid;
  }

  .onboarding-checklist__item {
    align-items: start;
  }

  .onboarding-check {
    grid-row: 1;
  }

  .onboarding-item-action {
    width: 100%;
  }

  .getting-started-layout {
    grid-template-columns: 1fr;
  }

  .onboarding-tour-overlay {
    place-items: end center;
    padding: 12px;
  }

  .onboarding-tour-box {
    max-height: calc(100vh - 24px);
  }
}

.operations-trust-card {
  display: grid;
  gap: 18px;
}

.operations-trust-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.operations-trust-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.operations-trust-summary-card,
.operations-trust-panel {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 14px;
}

.operations-trust-summary-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.operations-trust-summary-card strong,
.operations-trust-panel h3,
.operations-trust-panel h4 {
  color: var(--text);
}

.operations-trust-summary-card span:last-child {
  color: var(--muted);
}

.operations-trust-grid {
  display: grid;
  gap: 14px;
}

.operations-trust-panel {
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.operations-developer-tools {
  margin-top: 14px;
}

.operations-developer-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

.operations-developer-tools .company-compliance-status-debug {
  margin-top: 12px;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-title-row h3,
.panel-title-row h4 {
  margin: 0;
}

.operations-trust-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.operations-trust-row:first-child {
  border-top: 0;
}

.operations-trust-row strong,
.operations-trust-row span,
.operations-trust-row small {
  display: block;
}

.operations-trust-row span {
  margin-top: 3px;
  color: var(--muted);
}

.operations-trust-row small {
  margin-top: 5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.operations-trust-empty {
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.operations-trust-empty span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.operations-trust-note {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.operations-trust-subsection {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.operations-trust-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.operations-trust-table-row {
  display: grid;
  grid-template-columns: 190px 160px 190px 190px 220px minmax(240px, 1fr);
  gap: 10px;
  min-width: 1180px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.operations-trust-table-row:last-child {
  border-bottom: 0;
}

.operations-trust-table-head {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
}

.operations-trust-table-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .reminder-preview-controls,
  .reminder-preview-meta,
  .reminder-status-grid,
  .operations-trust-summary {
    grid-template-columns: 1fr;
  }

  .operations-trust-row,
  .panel-title-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.portal-access-card {
  display: grid;
  gap: 16px;
}

.portal-access-toolbar,
.portal-access-actions,
.portal-access-drawer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.portal-invite-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 12px;
}

.portal-invite-panel h3 {
  margin: 0;
}

.portal-invite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.portal-access-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.portal-reconcile-actions {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.portal-match-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .28);
  border-radius: 12px;
  background: rgba(13, 148, 136, .08);
}

.portal-match-panel--empty {
  color: var(--muted);
}

.portal-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 10px;
  background: rgba(15, 23, 42, .36);
}

.portal-access-section-label {
  margin-top: 8px;
  color: #5eead4;
  font-weight: 900;
}

.portal-access-list-head,
.portal-access-summary {
  display: grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.35fr) minmax(0,.8fr) minmax(92px,.7fr) minmax(0,.9fr) auto;
  gap: 12px;
  align-items: center;
}

.portal-access-list-head {
  padding: 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-access-user {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.08),transparent 48%),
    rgba(255,255,255,.04);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.12);
}

.portal-access-user[open] {
  border-color: rgba(56,189,248,.34);
}

.portal-access-summary {
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.portal-access-summary::-webkit-details-marker {
  display: none;
}

.portal-access-user[open] .portal-access-summary {
  border-bottom: 1px solid var(--line);
}

.portal-access-cell {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.portal-access-cell > span:last-child,
.portal-access-person strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-access-label {
  display: none;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-access-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  color: #fff;
  background: rgba(20,93,255,.18);
  font-weight: 900;
  white-space: nowrap;
}

.portal-access-user[open] .portal-access-manage {
  background: rgba(56,189,248,.22);
}

.portal-access-details {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.portal-access-detail-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}

.portal-access-detail-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 14px;
  background: rgba(15,23,42,.2);
}

.portal-access-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-access-detail-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.portal-access-drawer-actions {
  justify-content: flex-start;
}

.portal-access-drawer-actions .btn-small,
.portal-access-role-select {
  min-height: 40px;
  width: auto;
  max-width: 100%;
}

.portal-access-role-select {
  min-width: 160px;
  margin-top: 0;
}

.portal-access-empty {
  padding: 14px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 18px;
}

@media (max-width: 900px) {
  .portal-invite-grid {
    grid-template-columns: 1fr;
  }

  .portal-access-list-head {
    display: none;
  }

  .portal-access-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .portal-match-row {
    grid-template-columns: 1fr;
  }

  .portal-access-label {
    display: block;
  }

  .portal-access-manage {
    width: 100%;
  }

  .portal-access-detail-grid {
    grid-template-columns: 1fr;
  }

  .portal-access-drawer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-access-drawer-actions .btn-small,
  .portal-access-role-select {
    width: 100%;
  }
}

/* Responsive app shell and page-wide polish */
@media (min-width: 768px) and (max-width: 1023px) {
  body.portal-screen {
    font-size: 16px !important;
  }

  .portal-shell {
    max-width: none;
    padding: 16px 14px 34px;
  }

  .app-layout {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 12px;
    width: auto;
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 12px 8px;
    border-radius: 16px;
    overflow: auto;
  }

  .main-content {
    width: auto;
    margin-left: 0;
  }

  .page-header {
    margin-left: 0;
  }

  .sidebar-logo {
    padding: 6px;
  }

  .sidebar-logo img {
    width: 76px;
    max-height: 44px;
  }

  .nav-section-title {
    padding: 0 5px;
    font-size: .58rem;
    letter-spacing: .07em;
  }

  .nav-btn {
    min-height: 44px;
    padding: 7px 8px !important;
    font-size: .72rem !important;
    line-height: 1.15;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .top-health-score,
  .compliance-status-banner {
    width: 100%;
  }

  .kpi-grid,
  .compliance-workspace-grid,
  .training-overview-grid,
  .training-download-grid,
  .training-card-grid,
  .policy-workflow-steps,
  .policy-source-choice,
  .policy-library-views,
  .policy-active-grid,
  .settings-theme-grid,
  .getting-started-layout,
  .operations-trust-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-layout,
  .form-grid.two,
  .ifta-current-summary,
  .ifta-quarter-doc-grid,
  .ifta-audit-record-grid,
  .bulk-review-grid,
  .email-center-filters,
  .portal-invite-grid,
  .portal-access-detail-grid {
    grid-template-columns: 1fr;
  }

  .driver-table,
  .portal-user-table,
  .training-matrix,
  .policy-ack-table,
  .operations-trust-table,
  .bulk-import-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  body.portal-screen {
    font-size: 16px !important;
  }

  .portal-shell {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    padding: 10px 10px 84px;
    overflow-x: hidden;
  }

  body.login-screen .portal-shell {
    padding: 18px 12px;
  }

  .app-layout {
    display: block;
  }

  .main-content {
    width: 100%;
    margin-left: 0;
  }

  .page-header {
    margin-left: 0;
    gap: 10px;
    margin-bottom: 12px;
  }

  .page-header h1,
  .header-greeting span {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
    line-height: 1.1;
  }

  .tagline {
    font-size: .98rem;
  }

  .user-topbar,
  .card-head,
  .toolbar-row,
  .bulk-action-row,
  .bulk-intake-actions,
  .bulk-review-actions,
  .ifta-workflow-section__head,
  .policy-section-head,
  .panel-title-row,
  .operations-trust-actions,
  .portal-access-toolbar,
  .portal-access-actions,
  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .card,
  .ifta-workflow-section,
  .ifta-cabinet-panel,
  .policy-workflow-section,
  .operations-trust-panel,
  .operations-trust-summary-card,
  .portal-invite-panel,
  .settings-preview {
    padding: 14px;
    border-radius: 12px;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    width: 100%;
    height: auto;
    max-height: 74px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(45, 212, 191, .28);
    border-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -16px 40px rgba(2, 6, 23, .46);
  }

  .sidebar-logo,
  .nav-section-title,
  .nav-section-items[hidden],
  .sidebar-health-card {
    display: none !important;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: row;
    gap: 7px;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    padding: 0;
  }

  .nav-section,
  .nav-section-items,
  .nav-group,
  .nav-group-items {
    display: contents;
  }

  .nav-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 84px;
    min-height: 54px;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    justify-content: center;
    text-align: center;
    font-size: .76rem !important;
    line-height: 1.12;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .nav-section-toggle {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
    min-height: 54px;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: #151c31;
    border: 1px solid rgba(148, 163, 184, .16);
    color: #fff;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: .72rem !important;
    line-height: 1.12;
    white-space: normal;
  }

  .nav-btn.active {
    transform: none;
  }

  .portal-shell {
    padding: 10px 10px 18px;
  }

  .sidebar {
    display: none !important;
  }

  .user-topbar {
    position: relative;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 12px;
  }

  .user-chip {
    flex: 1 1 min(210px, 100%);
  }

  .mobile-top-menu {
    display: block;
    position: sticky;
    top: 8px;
    z-index: 90;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(45, 212, 191, .34);
    border-radius: 14px;
    background: linear-gradient(135deg, #08112a, #0f2738);
    box-shadow: 0 14px 34px rgba(2, 6, 23, .34);
  }

  .user-topbar > #logoutBtn {
    display: none !important;
  }

  input,
  select,
  textarea,
  button,
  .btn-primary,
  .btn-outline,
  .btn-plain,
  .btn-logout,
  .resolve-btn,
  .document-tab,
  .folder-card,
  .training-resource-link,
  .portal-access-manage {
    min-height: 44px;
  }

  .btn-row,
  .document-tabs,
  .ifta-current-actions,
  .company-compliance-add-files,
  .company-compliance-document-row,
  .training-actions,
  .training-slide-footer,
  .audit-export-actions,
  .audit-export-page-actions,
  .onboarding-actions,
  .getting-started-actions,
  .onboarding-tour-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .btn-row > button,
  .btn-primary,
  .btn-outline,
  .btn-plain,
  .btn-logout,
  .resolve-btn,
  .attention-item button,
  .uploaded-doc-open,
  .company-compliance-item__actions button,
  .ifta-current-actions button,
  .training-actions button,
  .training-resource-link,
  .portal-access-manage,
  .onboarding-item-action,
  .audit-export-actions button,
  .audit-export-page-actions button {
    width: 100%;
    justify-content: center;
  }

  .kpi-grid,
  .compliance-workspace-grid,
  .folder-grid,
  .row,
  .form-grid.two,
  .training-overview-grid,
  .training-download-grid,
  .training-card-grid,
  .training-policy-grid,
  .training-slide-grid,
  .training-do-dont,
  .policy-workflow-steps,
  .policy-source-choice,
  .policy-library-views,
  .policy-active-grid,
  .policy-record-summary,
  .settings-layout,
  .settings-theme-grid,
  .settings-preview-shell,
  .settings-preview-kpis,
  .ifta-current-summary,
  .ifta-quarter-doc-grid,
  .ifta-audit-record-grid,
  .ifta-audit-request-grid,
  .bulk-review-grid,
  .bulk-review-meta,
  .email-center-filters,
  .portal-invite-grid,
  .portal-access-detail-grid,
  .getting-started-layout,
  .operations-trust-summary,
  .qa-status-row,
  .qa-workflow-grid,
  .qa-id-grid,
  .qa-manual-list {
    grid-template-columns: 1fr !important;
  }

  .compliance-workspace-card,
  .folder-card,
  .document-tab,
  .training-overview-card,
  .training-module-card,
  .training-download-card,
  .policy-source-card,
  .policy-active-card,
  .settings-theme-card,
  .getting-started-panel {
    width: 100%;
  }

  .driver-table,
  .portal-user-table,
  .driver-portal-table,
  .training-matrix,
  .policy-ack-table,
  .operations-trust-table,
  .email-log-table,
  .bulk-import-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .driver-row,
  .driver-row--head,
  .portal-user-row,
  .portal-user-row--head,
  .driver-portal-table-row,
  .driver-portal-table-head,
  .policy-ack-row,
  .email-log-row,
  .operations-trust-table-row {
    min-width: 720px;
  }

  .training-matrix table,
  .bulk-import-table {
    min-width: 760px;
  }

  .drawer {
    z-index: 1200;
  }

  .drawer__panel,
  .crop-modal__panel,
  .onboarding-tour-box {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .drawer-tabs {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .drawer-tab {
    flex: 0 0 auto;
  }

  .upload-dropzone,
  .bulk-page-drop-overlay div {
    min-height: 132px;
    padding: 16px 12px;
  }

  .bulk-review-head,
  .company-compliance-item,
  .uploaded-doc-row,
  .training-completion-row,
  .training-record-summary,
  .operations-trust-row,
  .onboarding-card__head,
  .onboarding-checklist__item,
  .portal-access-summary {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: stretch;
  }

  .company-compliance-item__actions {
    width: 100%;
    align-items: stretch;
  }

  .top-health-score {
    width: 100%;
    min-width: 0;
  }

  .portal-toast-stack {
    right: 10px;
    left: 10px;
    bottom: 86px;
    max-width: none;
  }

  body.login-screen .login-card {
    width: min(100%, 440px);
    padding: 18px;
  }
}

.agreements-card {
  border-color: rgba(20, 184, 166, .32);
}

.agreement-admin-form {
  display: grid;
  gap: 14px;
}

.agreement-custom-pdf-fields {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .28);
  border-radius: 8px;
  background: rgba(13, 148, 136, .08);
}

.agreement-flow-step {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 8px;
  background: rgba(5, 13, 30, .26);
}

.agreement-flow-step h3 {
  margin: 0;
  font-size: 1.05rem;
}

.agreement-step-kicker {
  color: #5eead4;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agreement-recipients-list {
  display: grid;
  gap: 12px;
}

.agreement-recipient-row {
  display: grid;
  grid-template-columns: 92px repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 8px;
  background: rgba(15, 23, 42, .44);
}

.agreement-recipient-title {
  align-self: center;
  color: #5eead4;
  font-weight: 900;
}

.agreement-recipient-driver-label {
  grid-column: span 2;
}

.agreement-recipient-driver-label[hidden] {
  display: none !important;
}

.agreement-remove-recipient-btn {
  grid-column: span 2;
  justify-self: stretch;
  min-height: 42px;
  min-width: 190px;
  white-space: nowrap;
}

.agreement-add-recipient-btn {
  justify-self: start;
}

.agreement-placement-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.agreement-field-panel {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
  max-height: 680px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .28);
  border-radius: 8px;
  background: rgba(2, 6, 23, .38);
}

.agreement-field-panel-head {
  display: grid;
  gap: 4px;
}

.agreement-field-panel-head strong {
  color: #5eead4;
}

.agreement-field-panel-head span {
  color: var(--muted);
  font-size: .88rem;
}

.agreement-field-placement-controls {
  display: grid;
  gap: 10px;
}

.agreement-signer-quick-fields {
  display: grid;
  gap: 8px;
}

.agreement-quick-field-btn {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(20, 184, 166, .48);
  border-radius: 8px;
  background: rgba(20, 184, 166, .12);
  color: #5eead4;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.agreement-quick-field-btn:hover {
  border-color: rgba(94, 234, 212, .78);
  background: rgba(20, 184, 166, .2);
}

.agreement-placement-workspace {
  display: grid;
  gap: 12px;
  max-height: 680px;
  overflow: auto;
  padding: 12px;
  border: 1px dashed rgba(20, 184, 166, .35);
  border-radius: 8px;
  background: rgba(2, 6, 23, .34);
}

.agreement-pdf-preview-pages {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.agreement-pdf-placement-page {
  position: relative;
  max-width: 100%;
  line-height: 0;
  box-shadow: 0 18px 48px rgba(2, 6, 23, .28);
}

.agreement-pdf-placement-page canvas {
  max-width: 100%;
  height: auto;
  background: #fff;
}

.agreement-sign-here-box {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 2px solid #0f766e;
  border-radius: 6px;
  background: rgba(20, 184, 166, .18);
  color: #082f2c;
  font-weight: 900;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.agreement-sign-here-box.is-selected {
  outline: 3px solid rgba(20, 184, 166, .42);
  outline-offset: 3px;
}

.agreement-sign-here-box.is-dragging,
.agreement-sign-here-box.is-resizing {
  background: rgba(20, 184, 166, .28);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .24);
}

.agreement-sign-here-box.is-locked {
  cursor: default;
  border-style: dashed;
}

.agreement-sign-here-box span {
  pointer-events: none;
}

.agreement-sign-here-box small {
  pointer-events: none;
  font-size: .68rem;
  line-height: 1;
  color: #115e59;
}

.agreement-sign-resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  border: 2px solid #042f2e;
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(4, 47, 46, .9) 46% 56%, transparent 57%),
    #5eead4;
  box-shadow: 0 4px 12px rgba(2, 6, 23, .28);
  cursor: nwse-resize;
  touch-action: none;
}

.agreement-signature-fields-list {
  display: grid;
  gap: 10px;
}

.agreement-signature-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 8px;
  background: rgba(15, 23, 42, .42);
}

.agreement-signature-field-row.is-selected {
  border-color: rgba(20, 184, 166, .72);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, .16);
}

.agreement-signature-field-row strong {
  color: #5eead4;
  align-self: center;
}

.agreement-required-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

.agreement-required-toggle input {
  width: 18px;
  height: 18px;
}

.agreement-field-nudges {
  display: grid;
  grid-template-columns: repeat(4, minmax(42px, 1fr));
  gap: 6px;
}

.agreement-field-nudges .btn-outline {
  min-height: 36px;
  padding: 7px 8px;
}

.agreement-sign-here-customer {
  display: grid;
  place-items: center;
  min-height: 58px;
  margin: 10px 0;
  border: 2px solid #14b8a6;
  border-radius: 8px;
  background: rgba(20, 184, 166, .12);
  color: #99f6e4;
  font-weight: 900;
}

.agreement-assigned-fields {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 8px;
  background: rgba(13, 148, 136, .08);
}

.agreement-assigned-fields strong {
  color: #5eead4;
}

.agreement-assigned-fields span {
  color: var(--muted);
}

.service-agreements-card summary {
  cursor: pointer;
  list-style: none;
}

.service-agreements-card summary span {
  display: grid;
  gap: 4px;
}

.service-agreement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.upgrade-packet-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 184, 166, .22);
}

.compact-head {
  margin-bottom: 0;
}

.compact-head h3,
.upgrade-packet-dashboard h3 {
  margin: 0;
  font-size: 1.05rem;
}

.upgrade-packet-agreements {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 8px;
  background: rgba(13, 148, 136, .08);
}

.upgrade-packet-signers {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 8px;
  background: rgba(5, 13, 30, .34);
}

.upgrade-packet-agreements legend {
  padding: 0 6px;
  color: #5eead4;
  font-weight: 900;
}

.upgrade-packet-signers legend {
  padding: 0 6px;
  color: #5eead4;
  font-weight: 900;
}

.upgrade-packet-signers-list {
  display: grid;
  gap: 10px;
}

.upgrade-packet-signer-row {
  display: grid;
  grid-template-columns: 82px repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(15, 23, 42, .44);
}

.upgrade-packet-signer-number {
  align-self: center;
  color: #5eead4;
  font-weight: 900;
}

.upgrade-packet-agreements label {
  display: flex;
  gap: 10px;
  align-items: center;
}

.upgrade-packet-agreements input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.upgrade-packet-dashboard {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.agreement-custom-pdf-fields[hidden] {
  display: none !important;
}

.agreement-wide-field {
  display: grid;
  gap: 6px;
}

.agreement-wide-field textarea,
.agreement-wide-field input {
  width: 100%;
}

.agreement-dashboard-list {
  display: grid;
  gap: 10px;
}

.agreement-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(150px, .75fr) minmax(140px, .7fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .28);
  border-radius: 8px;
  background: rgba(5, 13, 30, .42);
}

.agreement-row .agreement-timeline {
  grid-column: 1 / -1;
}

.agreement-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.agreement-row span,
.agreement-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.agreement-row-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.agreement-row-actions button {
  padding: 8px 10px;
}

.agreement-status-badge {
  border: 1px solid transparent;
}

.agreement-status-badge.agreement-status--signed {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .16);
  color: #86efac;
}

.agreement-status-badge.agreement-status--neutral {
  border-color: rgba(148, 163, 184, .35);
  background: rgba(148, 163, 184, .14);
  color: #cbd5e1;
}

.agreement-status-badge.agreement-status--pending {
  border-color: rgba(250, 204, 21, .35);
  background: rgba(250, 204, 21, .12);
  color: #fde68a;
}

.agreement-timeline {
  border-top: 1px solid rgba(148, 163, 184, .18);
  padding-top: 8px;
}

.agreement-timeline summary {
  cursor: pointer;
  color: #5eead4;
  font-weight: 800;
}

.agreement-timeline-item {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.agreement-timeline-item span {
  font-weight: 800;
  text-transform: capitalize;
}

.agreement-timeline-item small,
.agreement-timeline-empty {
  color: var(--muted);
}

.agreement-compliance-details {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .18);
}

.agreement-compliance-details > summary {
  cursor: pointer;
  color: #5eead4;
  font-weight: 900;
}

.agreement-compliance-details section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, .2);
  border-radius: 8px;
  background: rgba(2, 6, 23, .26);
}

.agreement-compliance-details h4 {
  margin: 0;
  color: #e5edf8;
  font-size: .86rem;
  letter-spacing: .02em;
}

.agreement-compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.agreement-compliance-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: rgba(15, 23, 42, .42);
}

.agreement-compliance-grid span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.agreement-compliance-grid strong {
  color: #e5edf8;
  font-size: .9rem;
}

.agreement-audit-event-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.agreement-audit-event {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(20, 184, 166, .18);
  border-radius: 8px;
  background: rgba(15, 23, 42, .34);
}

.agreement-audit-event strong {
  color: #e5edf8;
  font-size: .88rem;
}

.agreement-audit-event span {
  color: #99f6e4;
  font-size: .82rem;
  font-weight: 800;
}

.agreement-audit-event small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.agreement-document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agreement-admin-note {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .2);
  border-radius: 8px;
  background: rgba(13, 148, 136, .08);
}

.upgrade-packet-detail {
  display: grid;
  gap: 8px;
}

.upgrade-packet-signer-dashboard {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.upgrade-packet-signer-status {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 8px;
  background: rgba(2, 6, 23, .34);
}

.upgrade-packet-signer-status > div:first-child {
  display: grid;
  gap: 3px;
}

.upgrade-packet-signer-status small {
  color: var(--muted);
}

.upgrade-packet-detail span,
.upgrade-packet-included {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 8px;
  background: rgba(15, 23, 42, .45);
}

.upgrade-packet-included {
  margin: 12px 0;
}

.upgrade-packet-included ul {
  margin: 0;
  padding-left: 20px;
}

.upgrade-signing-agreements {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.upgrade-signing-section {
  border: 1px solid rgba(20, 184, 166, .25);
  border-radius: 8px;
  background: rgba(5, 13, 30, .36);
  overflow: hidden;
}

.upgrade-signing-section summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #e5edf8;
  font-weight: 900;
  background: rgba(13, 148, 136, .14);
}

.upgrade-signing-section .agreement-document-preview {
  margin: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.upgrade-signing-section .agreement-check {
  margin: 10px;
}

.agreement-signing-card {
  width: min(960px, calc(100vw - 28px));
  margin: 22px auto;
  padding-bottom: 18px;
}

body.agreement-sign-screen .login-card,
body.agreement-sign-screen #portal,
body.agreement-sign-screen .page-header {
  display: none !important;
}

.agreement-signing-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.agreement-signing-header img,
.agreement-confirmation img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(20, 184, 166, .38);
  background: rgba(5, 13, 30, .7);
}

.agreement-signing-header h1,
.agreement-confirmation h1 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  letter-spacing: 0;
}

.agreement-simple-signing-header {
  display: grid;
  gap: 4px;
  justify-items: start;
  margin-bottom: 12px;
}

.agreement-simple-signing-header img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 4px;
  border: 1px solid rgba(20, 184, 166, .38);
  border-radius: 12px;
  background: rgba(5, 13, 30, .72);
}

.agreement-simple-signing-header h1 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2rem);
  letter-spacing: 0;
}

.agreement-simple-signing-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.agreement-signing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.agreement-signing-summary span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .25);
  border-radius: 8px;
  background: rgba(15, 23, 42, .55);
  overflow-wrap: anywhere;
}

.agreement-signing-summary--compact {
  grid-template-columns: 1fr;
  gap: 8px;
}

.agreement-signing-summary--compact span {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  padding: 9px 10px;
}

.agreement-document-quickview,
.agreement-document-collapse,
.agreement-legal-collapse {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .25);
  border-radius: 8px;
  background: rgba(13, 148, 136, .08);
}

.agreement-document-quickview {
  grid-template-columns: 1fr;
  align-items: center;
}

.agreement-document-quickview .btn-outline {
  width: 100%;
  min-height: 52px;
  justify-content: center;
}

.agreement-document-quickview strong,
.agreement-document-collapse summary,
.agreement-legal-collapse summary {
  color: #5eead4;
  font-weight: 900;
}

.agreement-document-collapse summary,
.agreement-legal-collapse summary {
  cursor: pointer;
}

.agreement-legal-collapse p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.agreement-legal-note {
  display: grid;
  gap: 5px;
  margin: 4px 0;
  color: var(--muted);
}

.agreement-legal-note strong {
  color: #5eead4;
}

.agreement-legal-note p {
  margin: 0;
  line-height: 1.35;
}

.agreement-document-preview {
  max-height: min(52dvh, 520px);
  overflow: auto;
  white-space: pre-wrap;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(2, 6, 23, .5);
  color: #e5edf8;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}

.agreement-document-preview--summary {
  max-height: 180px;
}

.agreement-pdf-preview {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.agreement-pdf-preview iframe {
  width: 100%;
  height: min(62dvh, 680px);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: #fff;
}

.agreement-mobile-actions {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.agreement-signature-form {
  display: grid;
  gap: 10px;
  padding-bottom: 6px;
}

.agreement-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .25);
  border-radius: 8px;
  background: rgba(13, 148, 136, .08);
}

.agreement-check input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.agreement-check--auto-apply {
  background: rgba(20, 184, 166, .14);
}

.agreement-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agreement-confirmation {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 10px 0;
}

.agreement-signature-input {
  min-height: 56px;
  font-size: 1.12rem;
  font-weight: 800;
}

.agreement-sign-submit-bar {
  position: sticky;
  bottom: 10px;
  z-index: 20;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, .35);
  border-radius: 10px;
  background: rgba(2, 6, 23, .92);
  box-shadow: 0 -10px 28px rgba(2, 6, 23, .28);
  backdrop-filter: blur(12px);
}

.agreement-sign-submit-bar .btn-primary,
.agreement-confirmation .btn-primary {
  min-height: 54px;
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}

body.agreement-pdf-open {
  overflow: hidden;
}

.agreement-pdf-overlay[hidden] {
  display: none !important;
}

.agreement-pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #020617;
}

.agreement-pdf-overlay-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid rgba(20, 184, 166, .35);
  background: rgba(15, 23, 42, .98);
}

.agreement-pdf-overlay-bar strong {
  overflow: hidden;
  color: #e5edf8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agreement-pdf-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 900px) {
  .agreement-row,
  .agreement-recipient-row,
  .agreement-placement-layout,
  .agreement-field-placement-controls,
  .agreement-signature-field-row,
  .agreement-signing-summary,
  .agreement-compliance-grid,
  .agreement-signature-grid {
    grid-template-columns: 1fr;
  }

  .agreement-recipient-driver-label {
    grid-column: auto;
  }

  .agreement-field-panel {
    position: static;
    max-height: none;
  }

  .agreement-row-actions {
    justify-content: stretch;
  }

  .agreement-row-actions button {
    flex: 1 1 140px;
  }

  .service-agreement-actions {
    display: grid;
  }

  .upgrade-packet-signer-row,
  .upgrade-packet-signer-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.agreement-sign-screen {
    font-size: 16px;
  }

  .agreement-signing-card {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: 10px 10px 150px;
  }

  .agreement-signing-header {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .agreement-signing-header img,
  .agreement-simple-signing-header img,
  .agreement-confirmation img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .agreement-signing-header h1,
  .agreement-confirmation h1 {
    font-size: 1.45rem;
  }

  .agreement-signing-summary {
    gap: 6px;
    margin: 4px 0 8px;
  }

  .agreement-signing-summary--compact span {
    grid-template-columns: 78px minmax(0, 1fr);
    padding: 8px 9px;
  }

  .agreement-document-quickview,
  .agreement-document-collapse,
  .agreement-legal-collapse,
  .agreement-check {
    padding: 9px;
    margin: 8px 0;
  }

  .agreement-document-preview {
    max-height: 36dvh;
    padding: 10px;
    font-size: .9rem;
    line-height: 1.45;
  }

  .upgrade-signing-section .agreement-document-preview {
    max-height: 38dvh;
  }

  .agreement-pdf-preview iframe {
    height: 54dvh;
    min-height: 360px;
  }

  .agreement-sign-here-customer--compact {
    min-height: 42px;
    margin: 8px 0;
  }

  .agreement-mobile-actions .btn-outline {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .agreement-signature-form input {
    min-height: 50px;
    font-size: 16px;
  }

  .agreement-signature-form {
    gap: 8px;
    padding-bottom: 130px;
  }

  .agreement-legal-note {
    margin-bottom: 120px;
  }

  .agreement-check span {
    line-height: 1.32;
  }

  .agreement-sign-submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .agreement-pdf-overlay-bar {
    grid-template-columns: 1fr;
  }

  .agreement-pdf-overlay-bar .btn-outline {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  body.portal-screen {
    font-size: 15px !important;
  }

  .portal-shell {
    padding-inline: 8px;
  }

  .card,
  .ifta-workflow-section,
  .policy-workflow-section,
  .operations-trust-panel,
  .portal-invite-panel {
    padding: 12px;
  }

  .nav-btn {
    min-width: 76px;
    font-size: .7rem !important;
  }

  .kpi .value {
    font-size: 1.7rem;
  }

  .workspace-tabs span,
  .kpi-badge {
    width: 100%;
  }

  .settings-accent-control {
    grid-template-columns: 1fr;
  }

  .settings-accent-swatch,
  .settings-accent-value {
    grid-column: auto;
  }

  .portal-footer-links--app {
    font-size: .76rem;
  }
}

.admin-dashboard-selectors{
  display:grid;
  grid-template-columns:minmax(180px, 260px) minmax(180px, 260px);
  gap:10px;
  margin:10px 0 8px;
  max-width:540px;
}

.admin-dashboard-select-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
  color:#d7f8ff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.admin-dashboard-select-field select{
  min-height:36px;
  width:100%;
  padding:7px 34px 7px 10px;
  border:1px solid rgba(20,184,166,.56);
  border-radius:8px;
  background:#0f172a;
  color:#ecfeff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(34,197,94,.14);
  font-size:.9rem;
  font-weight:750;
}

.admin-dashboard-select-field select:focus{
  border-color:rgba(34,197,94,.78);
  box-shadow:
    0 0 0 3px rgba(20,184,166,.18),
    0 0 20px rgba(34,197,94,.12);
}

.admin-dashboard-context{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  color:#b7c7dd;
  font-size:.84rem;
  line-height:1.35;
}

.admin-dashboard-context strong{
  color:#ecfeff;
  font-weight:850;
}

.fleet-reporting-card,
.fleet-reporting-panel{
  display:grid;
  gap:16px;
}

.fleet-reporting-toolbar{
  display:grid;
  grid-template-columns:minmax(180px,1.1fr) minmax(150px,.9fr) minmax(170px,1fr) minmax(140px,.8fr) minmax(140px,.8fr) auto;
  gap:12px;
  align-items:end;
}

.fleet-reporting-toolbar label{
  display:grid;
  gap:6px;
  margin:0;
  color:var(--muted);
  font-weight:850;
}

.fleet-reporting-toolbar select,
.fleet-reporting-toolbar input[type="date"]{
  min-height:42px;
}

.fleet-reporting-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-top:16px;
}

.fleet-reporting-kpis,
.fleet-reporting-summary,
.fleet-reporting-source-grid,
.fleet-reporting-export-grid,
.fleet-transaction-schema{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
}

.fleet-reporting-kpis div,
.fleet-reporting-summary div,
.fleet-reporting-source-grid div,
.fleet-reporting-export-grid div,
.fleet-transaction-schema div{
  min-width:0;
  padding:12px;
  border:1px solid rgba(20,184,166,.24);
  border-radius:8px;
  background:rgba(15,23,42,.36);
}

.fleet-reporting-kpis span,
.fleet-reporting-summary span,
.fleet-reporting-source-grid span,
.fleet-reporting-export-grid span,
.fleet-transaction-schema span{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.35;
}

.fleet-reporting-kpis strong,
.fleet-reporting-summary strong,
.fleet-reporting-source-grid strong,
.fleet-reporting-export-grid strong,
.fleet-transaction-schema strong{
  display:block;
  color:var(--text);
  font-weight:900;
  overflow-wrap:anywhere;
}

.fleet-reporting-jurisdictions{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.fleet-reporting-jurisdictions div,
.fleet-reporting-vehicle-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.04);
}

.fleet-reporting-jurisdictions span,
.fleet-reporting-vehicle-row span{
  display:block;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}

.fleet-reporting-vehicle-list,
.fleet-reporting-warning-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.fleet-reporting-vehicle-row{
  grid-template-columns:minmax(220px,1fr) minmax(240px,.75fr) auto;
}

.fleet-reporting-status{
  padding:6px 9px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}

.fleet-reporting-status.included{
  background:#dcfce7;
  color:#166534;
}

.fleet-reporting-status.excluded{
  background:#fee2e2;
  color:#991b1b;
}

.fleet-reporting-status.pending{
  background:#fef3c7;
  color:#92400e;
}

.fleet-reporting-subtitle{
  margin:16px 0 8px;
  color:var(--text);
  font-size:1rem;
  letter-spacing:0;
}

.fleet-setup-flow{
  display:grid;
  gap:14px;
}

.fleet-setup-section{
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid rgba(20,184,166,.24);
  border-radius:8px;
  background:rgba(15,23,42,.32);
}

.fleet-setup-section h3{
  margin:0;
  color:var(--text);
  font-size:1.04rem;
  letter-spacing:0;
}

.fleet-setup-section p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.4;
}

.fleet-setup-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}

.fleet-simple-option{
  display:grid;
  gap:4px;
  min-width:0;
  min-height:72px;
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-align:left;
}

.fleet-simple-option strong,
.fleet-simple-option span{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}

.fleet-simple-option strong{
  font-weight:900;
}

.fleet-simple-option span{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}

.fleet-simple-option.primary{
  border-color:rgba(34,197,94,.56);
  background:rgba(20,83,45,.32);
}

.fleet-simple-option.coming-soon{
  opacity:.72;
}

.fleet-simple-option.button-like{
  cursor:pointer;
}

.fleet-simple-option.button-like:hover{
  border-color:rgba(20,184,166,.62);
  transform:translateY(-1px);
}

.fleet-simple-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.fleet-simple-summary span{
  padding:8px 10px;
  border:1px solid rgba(20,184,166,.22);
  border-radius:8px;
  background:rgba(15,23,42,.4);
  color:var(--muted);
  font-size:.86rem;
}

.fleet-simple-summary strong{
  color:var(--text);
}

.fleet-advanced-integrations{
  margin-top:14px;
  padding:12px;
  border:1px dashed rgba(148,163,184,.34);
  border-radius:8px;
  background:rgba(15,23,42,.28);
}

.fleet-advanced-integrations > summary{
  cursor:pointer;
  color:var(--text);
  font-weight:900;
}

.fleet-vehicle-report-select{
  display:grid;
  gap:5px;
  margin:0;
  color:var(--muted);
  font-size:.78rem;
  font-weight:850;
}

.fleet-vehicle-report-select select{
  min-height:38px;
}

.fleet-provider-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin-top:12px;
}

.fleet-integration-group{
  display:grid;
  gap:10px;
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(20,184,166,.22);
  border-radius:8px;
  background:rgba(15,23,42,.2);
}

.fleet-integration-group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 14px;
}

.fleet-integration-group-head strong{
  color:var(--text);
  font-size:1rem;
  font-weight:900;
}

.fleet-integration-group-head span{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}

.fleet-provider-card{
  display:grid;
  gap:12px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:8px;
  background:rgba(15,23,42,.46);
}

.fleet-provider-card.connected{
  border-color:rgba(45,212,191,.42);
}

.fleet-provider-card.synced{
  border-color:rgba(34,197,94,.55);
  background:linear-gradient(180deg,rgba(20,83,45,.3),rgba(15,23,42,.48));
}

.fleet-provider-card.future{
  opacity:.82;
}

.fleet-provider-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.fleet-provider-heading strong{
  color:var(--text);
  font-size:1.05rem;
  font-weight:900;
}

.fleet-provider-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}

.fleet-provider-steps{
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.35;
}

.fleet-provider-credentials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.fleet-provider-credentials input,
.fleet-provider-credentials select{
  min-width:0;
  min-height:38px;
}

.fleet-provider-secure-note{
  padding:8px 10px;
  border:1px dashed rgba(20,184,166,.36);
  border-radius:8px;
  color:#b7c7dd;
  font-size:.78rem;
  line-height:1.35;
}

.fleet-provider-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.fleet-provider-actions button{
  min-height:38px;
  padding:8px 10px;
  white-space:normal;
}

.fleet-transaction-schema{
  margin-top:12px;
}

.fleet-motive-status-panel{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(34,197,94,.36);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(20,83,45,.22),rgba(15,23,42,.44));
}

.fleet-motive-status-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.fleet-motive-status-head div{
  display:grid;
  gap:4px;
  min-width:0;
}

.fleet-motive-status-head strong{
  color:var(--text);
  font-size:1.08rem;
  font-weight:900;
}

.fleet-motive-status-head span,
.fleet-motive-detail-row span{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}

.fleet-motive-sync-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:8px;
}

.fleet-motive-sync-grid div{
  min-width:0;
  padding:10px;
  border:1px solid rgba(20,184,166,.22);
  border-radius:8px;
  background:rgba(15,23,42,.38);
}

.fleet-motive-sync-grid span,
.fleet-motive-sync-grid strong{
  display:block;
}

.fleet-motive-sync-grid span{
  color:var(--muted);
  font-size:.76rem;
  font-weight:850;
}

.fleet-motive-sync-grid strong{
  margin-top:3px;
  color:var(--text);
  font-size:1.25rem;
  font-weight:900;
}

.fleet-motive-detail-row{
  display:grid;
  gap:5px;
  padding:10px;
  border:1px dashed rgba(148,163,184,.3);
  border-radius:8px;
  background:rgba(15,23,42,.28);
}

.fleet-motive-detail-row strong{
  color:var(--text);
  overflow-wrap:anywhere;
}

.fleet-motive-error{
  color:#fecaca !important;
}

.fleet-reporting-transaction-table{
  display:grid;
  gap:8px;
}

.fleet-reporting-transaction-table div{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(120px,.7fr) auto auto auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.04);
}

.fleet-reporting-transaction-table span{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}

.fleet-reporting-warning-list li{
  padding:10px 12px;
  border:1px solid rgba(245,158,11,.36);
  border-radius:8px;
  background:rgba(245,158,11,.12);
  color:#fde68a;
  font-weight:800;
}

@media (max-width:760px){
  .admin-dashboard-selectors{
    grid-template-columns:1fr;
    max-width:none;
  }

  .admin-dashboard-select-field select{
    min-height:38px;
  }

  .fleet-reporting-toolbar,
  .fleet-reporting-layout,
  .fleet-reporting-vehicle-row,
  .fleet-reporting-jurisdictions div,
  .fleet-motive-status-head,
  .fleet-provider-credentials,
  .fleet-provider-actions,
  .fleet-reporting-transaction-table div{
    grid-template-columns:1fr;
  }
}