:root {
  --navy: #031228;
  --blue: #007BFD;
  --slate: #5A6B85;
  --mist: #F2F6FC;
  --ink: #0B0F1A;
  --line: #E4E9F1;
  --green: #16A34A;
  --amber: #B8860B;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(3,18,40,0.06);
  --shadow-md: 0 12px 28px rgba(3,18,40,0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

.app-shell { display: flex; min-height: 100vh; }

/* ===== Login screen ===== */
.login-screen {
  min-height: 100vh; background: var(--navy); display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: hidden;
}
.login-screen::before {
  content: ""; position: absolute; top: -100px; right: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0,123,253,0.28) 0%, rgba(0,123,253,0) 70%); pointer-events: none;
}
.login-card { background: #fff; border-radius: 16px; padding: 36px 32px; width: 100%; max-width: 360px; position: relative; z-index: 1; box-shadow: 0 30px 70px rgba(0,0,0,0.3); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.login-brand .brand-name { color: var(--navy) !important; }
.login-card h1 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--navy); margin-bottom: 20px; }
.login-error { color: #B42318; font-size: 12.5px; margin-top: 10px; min-height: 16px; }
.forgot-link { display: block; width: 100%; text-align: center; font-size: 12.5px; color: var(--slate); margin-top: 14px; padding: 6px; }
.forgot-link:hover { color: var(--blue); }
/* A real, single entry point: one login screen, the visitor picks
   their own role first, a segmented toggle, not two separate buried
   links scattered around the marketing site. */
.login-role-toggle { display: flex; background: var(--mist); border-radius: 10px; padding: 4px; margin-bottom: 22px; gap: 4px; }
.login-role-btn { flex: 1; border: none; background: none; padding: 9px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--slate); cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; }
.login-role-btn.active { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(3,18,40,0.12); }
.login-role-btn:hover:not(.active) { color: var(--navy); }

/* ===== Logout button in sidebar ===== */
.logout-btn { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #7a94c9; flex-shrink: 0; }
.logout-btn svg { width: 15px; height: 15px; }
.logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ===== Sidebar, dark navy, brand-consistent ===== */
.sidebar {
  width: 232px; flex-shrink: 0; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: 26px 18px; position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
.sidebar::before {
  content: ""; position: absolute; top: -80px; left: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,123,253,0.28) 0%, rgba(0,123,253,0) 70%); pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 34px; position: relative; z-index: 1; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 3px; }
.brand-mark svg { width: 15px; height: 15px; }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.1px; }
.brand-name span { color: #5b9dff; }

/* A real, load-bearing fix, not a patch: the sidebar now carries 13
   nav items, and that number only grows as the product grows. A
   single scrolling blob for the whole sidebar meant the currency
   picker and the account chip at the bottom could be pushed off
   screen entirely on a shorter viewport, with no visible scrollbar
   hinting they still exist. Only the nav list itself scrolls now,
   the brand at top and the footer at bottom are always visible,
   exactly the layout a genuinely polished product uses. */
.nav-links { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -8px; padding: 0 8px; }
.nav-links::-webkit-scrollbar { width: 5px; }
.nav-links::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.nav-links::-webkit-scrollbar-track { background: transparent; }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 9px;
  color: #a7b6d1; font-size: 14px; font-weight: 500; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: rgba(0,123,253,0.22); color: #fff; }

.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); position: relative; z-index: 1; flex-shrink: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: #fff; flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 11.5px; color: #7a94c9; }

/* ===== Main panel ===== */
.main-panel { flex: 1; padding: 40px 48px; max-width: 1240px; background: #fff; position: relative; }

.notif-bell { position: absolute; top: 8px; right: 48px; width: 32px; height: 32px; border-radius: 9px; background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--navy); z-index: 10; }
.notif-bell svg { width: 16px; height: 16px; }
.notif-bell:hover { background: var(--line); }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #D92D20; border: 2px solid #fff; }
.notif-panel { display: none; position: absolute; top: 46px; right: 48px; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); z-index: 20; padding: 8px; }
.notif-panel.open { display: block; }
.notif-panel-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; color: var(--navy); padding: 8px 10px; }
.notif-item { display: flex; gap: 10px; padding: 10px; border-radius: 8px; }
.notif-item:hover { background: var(--mist); }
.notif-dot-sm { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 5px; }
.notif-text { font-size: 12.5px; line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--slate); margin-top: 2px; }

/* ===== Upload modal ===== */
.upload-overlay { display: none; position: fixed; inset: 0; background: rgba(3,18,40,0.55); z-index: 100; align-items: center; justify-content: center; }
.upload-overlay.open { display: flex; }
.upload-modal { background: #fff; border-radius: 16px; padding: 32px; width: 100%; max-width: 380px; text-align: center; }
.upload-spinner { width: 32px; height: 32px; border: 3px solid var(--mist); border-top-color: var(--blue); border-radius: 50%; margin: 0 auto 16px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#uploadResult, #uploadErrorBox { text-align: left; }
.upload-stat-line { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.upload-stat-line:first-child { border-top: none; }

/* ===== Case notes ===== */
.note-item { padding: 10px 0; border-top: 1px solid var(--line); }
.note-item:first-child { border-top: none; }
.note-author { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.note-time { font-size: 11px; color: var(--slate); margin-left: 6px; font-weight: 400; }
.note-text { font-size: 13px; color: var(--ink); margin-top: 3px; line-height: 1.5; }
.view { display: none; }
.view.active { display: block; }

.view-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.view-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--navy); letter-spacing: -0.6px; }
.view-sub { font-size: 14px; color: var(--slate); margin-top: 6px; }

.btn-primary {
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.btn-primary:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary.full-width { width: 100%; margin-bottom: 8px; }
.btn-ghost {
  background: #fff; color: var(--navy); border: 1px solid var(--line); padding: 11px 17px; border-radius: 10px;
  font-size: 13px; font-weight: 600; transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost.full-width { width: 100%; margin-bottom: 8px; }

/* ===== Toolbar / filters ===== */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; }
.search-box { position: relative; flex: 1; min-width: 240px; max-width: 360px; }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--slate); }
.search-box input {
  width: 100%; padding: 10px 14px 10px 40px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; background: var(--mist); transition: border-color .15s ease, background .15s ease;
}
.search-box input:focus { outline: none; border-color: var(--blue); background: #fff; }
.filter-chips { display: flex; gap: 6px; background: var(--mist); padding: 4px; border-radius: 12px; }
.chip { padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--slate); transition: all .15s ease; }
.chip.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

/* ===== Case list ===== */
.case-list { display: flex; flex-direction: column; gap: 8px; }
.case-row {
  display: grid; grid-template-columns: 1.7fr 1.2fr 1.2fr 1fr 0.9fr 16px;
  gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.case-row:hover { box-shadow: var(--shadow-md); border-color: transparent; transform: translateY(-1px); }

.case-id { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--navy); font-weight: 600; }
.case-reason { font-size: 12.5px; color: var(--slate); margin-top: 3px; }
.case-vehicle { font-size: 14px; font-weight: 600; color: var(--ink); }
.case-depot { font-size: 12px; color: var(--slate); margin-top: 2px; }
.case-time { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--slate); }

.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-new { background: #E8F2FF; color: var(--blue); }
.status-new::before { background: var(--blue); }
.status-investigating { background: #F4F5F7; color: var(--amber); }
.status-investigating::before { background: var(--amber); }
.status-confirmed { background: #F4F5F7; color: var(--green); }
.status-confirmed::before { background: var(--green); }
.status-closed { background: var(--mist); color: var(--slate); }
.status-closed::before { background: var(--slate); }

.evidence-dots { display: flex; gap: 5px; }
.evidence-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.evidence-dot.on { background: var(--blue); }
.row-arrow { color: var(--line); transition: color .15s ease, transform .15s ease; }
.case-row:hover .row-arrow { color: var(--blue); transform: translateX(2px); }

/* ===== Case detail ===== */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--slate); font-weight: 500; margin-bottom: 20px; }
.back-link:hover { color: var(--blue); }
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.detail-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--slate); letter-spacing: .4px; margin-bottom: 6px; }
.detail-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 27px; font-weight: 700; color: var(--navy); letter-spacing: -0.4px; }
.detail-status-badge { padding: 7px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

/* The timeline panel reuses the site's dark "evidence card" component directly */
.evidence-card {
  background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.evidence-card::after {
  content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,123,253,0.22) 0%, rgba(0,123,253,0) 70%); pointer-events: none;
}
.evidence-card .panel-title { color: #fff; position: relative; z-index: 1; }
.ev-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 1; }
.ev-row:last-of-type { border-bottom: none; }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(0,123,253,0.25); }
.ev-label { font-size: 13.5px; color: #dbe4f3; flex: 1; }
.ev-time { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #7a94c9; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(3,18,40,0.03); }
.panel-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.panel-title::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--accent-color, var(--blue)); display: inline-block; flex-shrink: 0; }

/* Daily Briefing, a real "generation next" redesign: a ranked,
   scannable feed with its own per-item icon and a real control over
   how many items to see, not a fixed 3, a large fleet may genuinely
   need its top 20, 50 or 100 things surfaced, not just three. */
.briefing-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px 20px 14px; margin-bottom:22px; margin-right:56px;
  box-shadow:0 2px 10px rgba(3,18,40,0.05);
}
.briefing-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.briefing-title{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); }
.briefing-title-icon{
  width:24px; height:24px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg, var(--blue), #4A9EFF); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.briefing-limit{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--slate); }
.briefing-limit select{
  border:1px solid var(--line); border-radius:7px; padding:4px 8px; font-size:12px;
  color:var(--ink); background:var(--mist); cursor:pointer; font-family:inherit;
}
.briefing-list{ display:flex; flex-direction:column; }
.briefing-item{
  display:flex; align-items:center; gap:12px; padding:9px 6px;
  border-top:1px solid var(--line); border-radius:8px; transition:background .12s ease;
}
.briefing-item[role="button"]{ cursor:pointer; }
.briefing-item[role="button"]:hover{ background:var(--mist); }
.briefing-item[role="button"]:hover .briefing-item-arrow{ opacity:1; transform:translateX(0); }
.briefing-rank{
  width:18px; height:18px; border-radius:50%; background:var(--mist); color:var(--slate);
  font-size:10.5px; font-weight:700; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.briefing-item-icon{ width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.briefing-item-text{ font-size:13px; color:var(--ink); line-height:1.45; flex:1; }
.briefing-item-arrow{ color:var(--blue); font-weight:700; opacity:0; transform:translateX(-4px); transition:all .15s ease; flex-shrink:0; }
.briefing-more{
  width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--line);
  color:var(--blue); font-size:12.5px; font-weight:600; padding:10px 6px 4px; cursor:pointer; font-family:inherit;
}
.briefing-more:hover{ text-decoration:underline; }
.panel-note { font-size: 12.5px; color: var(--slate); margin-top: 12px; line-height: 1.55; }

.map-placeholder, .video-placeholder, .driver-photo-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--mist); border-radius: 10px; padding: 38px 20px; text-align: center;
}
.map-placeholder svg, .video-placeholder svg, .driver-photo-panel svg { width: 28px; height: 28px; color: var(--slate); }
.map-placeholder span, .video-placeholder span, .driver-photo-panel span { font-size: 12.5px; color: var(--slate); max-width: 280px; }

.confidence-gauge { position: relative; width: 120px; height: 120px; margin: 4px auto 14px; }
.confidence-gauge svg { width: 100%; height: 100%; }
.confidence-gauge-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy); }
.confidence-label { font-size: 13px; font-weight: 700; color: var(--navy); text-align: center; }

.platform-row { display: flex; gap: 14px; }
.platform-card { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 20px 16px; text-align: center; transition: box-shadow .15s ease; }
.platform-card:hover { box-shadow: var(--shadow-sm); }
.platform-card-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; color: var(--navy); }
.platform-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.3px; margin-bottom: 12px; }
.platform-card-status { font-size: 12px; margin-bottom: 14px; color: var(--slate); }

.activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.activity-row:first-child { border-top: none; }
.activity-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--mist); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--navy); flex-shrink: 0; }
.activity-text { font-size: 13px; color: var(--ink); }
.activity-time { font-size: 11.5px; color: var(--slate); margin-top: 2px; }
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
/* A real visual upgrade, not just a color swap: a thin brand-blue
   accent line, a genuinely subtle shadow (barely visible at rest,
   the point is depth, not decoration), and a small lift on hover,
   the same restrained, "data product" language used by Stripe and
   Linear's own dashboards, not a flat bordered box. */
.stat-card {
  flex: 1; min-width: 180px; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 18px;
  background: #fff; box-shadow: 0 1px 2px rgba(3,18,40,0.04), 0 1px 1px rgba(3,18,40,0.03);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, #5b9dff 100%);
  opacity: 0; transition: opacity .18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(3,18,40,0.08), 0 2px 6px rgba(3,18,40,0.05); }
.stat-card:hover::before { opacity: 1; }
.stat-card.highlight {
  background: linear-gradient(155deg, #0a2551 0%, var(--navy) 55%, #051530 100%);
  border-color: var(--navy);
  box-shadow: 0 1px 2px rgba(3,18,40,0.12), 0 4px 14px rgba(0,60,140,0.18);
}
.stat-card.highlight::before { background: linear-gradient(90deg, #5b9dff 0%, #8fc0ff 100%); opacity: .9; }
.stat-card.highlight .stat-value, .stat-card.highlight .stat-label { color: #fff; }
.stat-card.highlight .stat-label { color: rgba(255,255,255,0.68); }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--slate); margin-top: 7px; line-height: 1.4; }

.bar-chart { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { width: 140px; font-size: 12.5px; color: var(--ink); flex-shrink: 0; }
.bar-track { flex: 1; height: 10px; background: var(--mist); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--blue); border-radius: 6px; }
.bar-count { width: 30px; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--slate); }
.ss-field { margin-bottom: 8px; }
.ss-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.ss-field input { width: 130px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.ss-field input:focus { outline: none; border-color: var(--blue); }

@media (max-width: 900px) {
  .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 12px 18px; z-index: 50; }
  .sidebar::before { display: none; }
  .brand { display: none; }
  .nav-links { flex-direction: row; flex: 1; justify-content: space-around; }
  .nav-link { flex-direction: column; gap: 4px; font-size: 11px; padding: 9px 16px; }
  /* The bottom bar scrolls sideways so every view stays reachable, and the
     currency picker and log-out button come along at its end instead of
     disappearing on phones. */
  .sidebar { overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 8px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .nav-links { flex: none; justify-content: flex-start; overflow: visible; }
  .nav-link { flex-shrink: 0; padding: 8px 12px; }
  .sidebar-footer { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0 0 0 10px; border-top: none; border-left: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
  .sidebar-footer > div:first-child { padding: 0 !important; }
  .sidebar-footer label { display: none !important; }
  .sidebar-footer select { width: auto !important; }
  .user-info { display: none; }
  /* Data tables built for reports keep every column on phones; only the
     case list hides columns. */
  .case-row.data-row { grid-template-areas: none !important; grid-template-columns: 1fr 1fr !important; }
  .case-row.data-row > div { display: block !important; grid-area: auto !important; min-width: 0; }
  .case-row.data-row > div:first-child { grid-column: 1 / -1; }
  .main-panel { padding: 26px 20px 100px; max-width: 100%; }
  .view-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .filter-chips { overflow-x: auto; width: 100%; }
  .search-box { max-width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }

  .case-row { grid-template-columns: 1fr auto; grid-template-areas: "main status" "meta status"; row-gap: 10px; padding: 18px; }
  .case-row > div:nth-child(1) { grid-area: main; min-width: 0; }
  .case-row > div:nth-child(2) { grid-area: meta; min-width: 0; }
  .case-row > div:nth-child(3) { display: none; }
  .case-row > div:nth-child(4) { grid-area: status; }
  .case-row > div:nth-child(5) { display: none; }
  .case-row > div:nth-child(6) { display: none; }

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

/* Text fields may shrink below their placeholder width, so long button labels in other languages never push the page sideways. */
input, select, textarea { min-width: 0; max-width: 100%; }

/* =====================================================================
   Design pass: one consistent interaction language across the app and
   the partner portal.
   ===================================================================== */

/* --- Sidebar: every item, Platform Health included, fits on a laptop
   screen without scrolling; the footer is compact. */
.sidebar { padding: 18px 14px 14px; }
.brand { padding: 0 6px 18px; }
.nav-links { gap: 1px; }
.nav-link { padding: 6px 12px; font-size: 13.5px; gap: 10px; border-radius: 8px; }
.nav-link svg { width: 16px; height: 16px; }
.sidebar-footer { padding-top: 10px; }
.sidebar-footer select { height: 30px; padding: 3px 8px; font-size: 12.5px; border-radius: 7px; }
.sidebar-footer label, .sidebar-footer .currency-label { font-size: 10.5px; margin-bottom: 3px; }
.user-chip { padding: 4px 6px; }

/* --- View header actions: title left, actions grouped right. */
.view-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.view-header { gap: 16px; }

/* --- One export button everywhere: same shape, same download icon. */
.btn-export { display: inline-flex; align-items: center; gap: 7px; }
.btn-export::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Stat cards: every card is a real control. The dark card is the
   selected one, clicking another card selects it and explains it. */
.stat-card { cursor: pointer; text-align: left; font: inherit; }
.stat-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.stat-card:not(.highlight):hover { border-color: #C9D8F2; }
.stat-explain {
  margin: -8px 0 22px; padding: 14px 18px 14px 16px; border-radius: 12px; background: var(--mist);
  border: 1px solid var(--line); border-left: 3px solid var(--blue); font-size: 13px; line-height: 1.55; color: var(--ink);
  animation: statExplainIn .18s ease;
}
.stat-explain b { color: var(--navy); }
.stat-explain .stat-explain-link { color: var(--blue); font-weight: 600; cursor: pointer; margin-left: 6px; white-space: nowrap; }
@keyframes statExplainIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.panel-pulse { animation: panelPulse 1.1s ease; }
@keyframes panelPulse { 0% { box-shadow: 0 0 0 0 rgba(0,123,253,0.35); } 100% { box-shadow: 0 0 0 14px rgba(0,123,253,0); } }

/* --- Today's priorities: focus cards under the page title. */
.focus-strip { margin: 0 0 22px; }
.focus-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.focus-title { display: flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); }
.focus-title .focus-bolt { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #0a2551, var(--navy)); color: #7FB4FF; display: flex; align-items: center; justify-content: center; }
.focus-count { font-size: 11.5px; font-weight: 700; color: var(--blue); background: #EAF2FF; padding: 2px 8px; border-radius: 20px; }
.focus-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--mist); margin-left: auto; }
.focus-seg button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--slate); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.focus-seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(3,18,40,0.1); }
.focus-toggle { border: 0; background: transparent; color: var(--slate); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 6px; }
.focus-toggle:hover { color: var(--navy); }
.focus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.focus-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); text-align: left; font: inherit; color: inherit; cursor: default;
  box-shadow: 0 1px 2px rgba(3,18,40,0.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.focus-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--focus-color, var(--slate)); }
.focus-card[data-case-id] { cursor: pointer; }
.focus-card[data-case-id]:hover { transform: translateY(-2px); border-color: #C9D8F2; box-shadow: 0 8px 18px rgba(3,18,40,0.08); }
.focus-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.focus-card-top { display: flex; align-items: center; gap: 8px; }
.focus-card-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.focus-card-prio { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.focus-card-text { font-size: 13px; line-height: 1.45; color: var(--ink); flex: 1; }
.focus-card-cta { font-size: 12px; font-weight: 600; color: var(--blue); }
.focus-more { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--blue); background: none; border: 0; cursor: pointer; padding: 0; }

/* --- Network Intelligence: pattern cards with a time axis. */
.ni-pattern { border: 1px solid var(--line); border-radius: 16px; background: #fff; margin-bottom: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(3,18,40,0.04); }
.ni-pattern-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 16px; flex-wrap: wrap; }
.ni-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8A6D0B; background: #F4F5F7; padding: 4px 10px; border-radius: 20px; }
.ni-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C9A227; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.ni-entity { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 21px; color: var(--navy); margin-top: 10px; }
.ni-entity.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: .04em; }
.ni-desc { font-size: 13px; color: var(--slate); margin-top: 4px; max-width: 62ch; line-height: 1.5; }
.ni-metrics { display: flex; gap: 22px; }
.ni-metric b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--navy); font-variant-numeric: tabular-nums; }
.ni-metric span { font-size: 11.5px; color: var(--slate); font-weight: 600; }
.ni-axis { position: relative; margin: 4px 22px 0; height: 64px; }
.ni-axis-line { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: linear-gradient(90deg, #C9A2272E, #C9A227, #C9A2272E); border-radius: 2px; }
.ni-dot { position: absolute; top: 24px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 3px solid #C9A227; }
.ni-dot-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.ni-dot-date { position: absolute; top: 44px; transform: translateX(-50%); font-size: 10.5px; color: var(--slate); white-space: nowrap; }
.ni-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 12px 22px 18px; }
.ni-case { padding: 10px 12px; border-radius: 10px; background: var(--mist); font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.ni-case b { display: block; font-size: 12px; color: var(--navy); margin-bottom: 2px; }
.ni-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; background: linear-gradient(90deg, #F8F7F2, #fff); border-top: 1px solid #E7E1CC; flex-wrap: wrap; }
.ni-action-text { font-size: 13px; color: var(--navy); }
.ni-action-text span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A6D0B; margin-bottom: 2px; }
.ni-empty { padding: 28px; text-align: center; color: var(--slate); font-size: 13.5px; border: 1px dashed var(--line); border-radius: 14px; margin-bottom: 18px; }

/* --- Renewal Report: a document worth handing to an insurer. */
.rr-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 28px 30px; color: #fff; margin-bottom: 20px;
  background: radial-gradient(700px 300px at 90% -20%, rgba(0,123,253,0.35), transparent 60%), linear-gradient(160deg, #0a2551 0%, var(--navy) 60%, #051530 100%); }
.rr-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rr-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7FB4FF; }
.rr-headline { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; margin-top: 6px; max-width: 30ch; line-height: 1.25; }
.rr-period { font-size: 12px; font-weight: 600; color: #B8C4D9; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); padding: 6px 12px; border-radius: 20px; white-space: nowrap; }
.rr-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 24px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.1); }
.rr-figure { background: rgba(3,18,40,0.55); padding: 16px 18px; cursor: pointer; text-align: left; border: 0; color: inherit; font: inherit; transition: background .15s ease; }
.rr-figure:hover, .rr-figure[aria-pressed="true"] { background: rgba(0,123,253,0.22); }
.rr-figure:focus-visible { outline: 2px solid #7FB4FF; outline-offset: -2px; }
.rr-figure b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-variant-numeric: tabular-nums; }
.rr-figure span { font-size: 12px; color: #B8C4D9; }
.rr-explain { margin-top: 14px; font-size: 13px; color: #DCE6F7; line-height: 1.55; min-height: 20px; }
.rr-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.rr-trend-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 14px; }
.rr-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rr-trend-pair { display: flex; align-items: flex-end; gap: 2px; height: 96px; width: 100%; justify-content: center; }
.rr-bar { width: 42%; border-radius: 3px 3px 0 0; }
.rr-bar.prev { background: #D6DEEA; } .rr-bar.cur { background: linear-gradient(180deg, #4DA3FF, var(--blue)); }
.rr-trend-col span { font-size: 10px; color: var(--slate); }
.rr-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--slate); margin-top: 10px; }
.rr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.rr-trend-callout { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--green); margin-top: 6px; }
.rr-points { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.rr-points li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.rr-points li::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; background: #F4F5F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.rr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 900px) { .rr-grid { grid-template-columns: 1fr; } .rr-figures { grid-template-columns: 1fr; } }
.focus-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sidebar-footer select {
  background-color: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.14);
  -webkit-appearance: none; appearance: none; padding-right: 26px; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b6d1' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}
.sidebar-footer select:hover { border-color: rgba(255,255,255,0.28); }
.sidebar-footer select:focus { outline: none; border-color: #5b9dff; }
.sidebar-footer select option { color: #031228; }

/* ===== One authentic status palette: neutral chip, coloured dot, dark text.
   Critical = deep red, attention = dark gold (not orange), fine = deep green. */
:root { --st-critical: #B42318; --st-attention: #8A6D0B; --st-attention-dot: #C9A227; --st-ok: #0E7A4E; --st-ok-dot: #16A34A; --st-chip: #F4F5F7; --st-chip-border: #E4E7EC; }
.status-badge { background: var(--st-chip) !important; border: 1px solid var(--st-chip-border); }
/* Partner portal: fewer items, so they get room to breathe. */
.pp-app-shell .nav-links { gap: 4px; }
.pp-app-shell .nav-link { padding: 11px 14px; font-size: 14px; gap: 12px; border-radius: 9px; line-height: 1.3; }
.pp-app-shell .nav-link svg { width: 17px; height: 17px; }
.pp-app-shell .brand { padding-bottom: 30px; }
.status-investigating { color: var(--st-attention) !important; } .status-investigating::before { background: var(--st-attention-dot) !important; }
.status-confirmed { color: var(--st-ok) !important; } .status-confirmed::before { background: var(--st-ok-dot) !important; }

/* Upload: one dropzone everywhere, never the browser's own "Choose file". */
.dropzone { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px dashed #C9D3E3; border-radius: 12px; background: #FAFBFD; cursor: pointer; transition: border-color .15s ease, background .15s ease; flex-wrap: wrap; }
.dropzone:hover, .dropzone.is-over { border-color: var(--blue); background: #F3F8FF; }
.dropzone:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }
.dropzone-text { font-size: 13.5px; color: var(--slate); }
.dropzone-text b { color: var(--navy); font-weight: 600; }
.dropzone-file { font-size: 12.5px; font-weight: 600; color: var(--st-ok); }
.dropzone-cols { margin-left: auto; font-size: 11.5px; color: var(--slate); }
.dropzone-cols code, .panel code { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--navy); }

/* Map link: a place, not a raw hyperlink. */
.place-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--navy); text-decoration: none; padding: 3px 8px 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: #fff; transition: border-color .15s ease, color .15s ease; }
.place-link svg { width: 13px; height: 13px; color: var(--blue); flex-shrink: 0; }
.place-link:hover { border-color: var(--blue); color: var(--blue); }
.place-link-ext { font-family: Inter, sans-serif; font-size: 11px; color: var(--slate); }
/* Needs attention: a filter chip and a mark on the case itself. */
.chip-attention { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); }
.chip-attention svg { color: var(--st-attention-dot); }
.chip-attention.has-urgent svg { color: var(--st-critical); }
.chip-count { font-size: 11px; font-weight: 700; min-width: 18px; padding: 1px 6px; border-radius: 10px; background: var(--navy); color: #fff; text-align: center; }
.chip-attention.active .chip-count { background: var(--blue); }
.prio-flag { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px 2px 6px; border-radius: 6px; background: var(--st-chip); border: 1px solid var(--st-chip-border); vertical-align: 1px; }
.prio-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.prio-urgent { color: var(--st-critical); } .prio-urgent::before { background: var(--st-critical); }
.prio-high { color: var(--st-attention); } .prio-high::before { background: var(--st-attention-dot); }
.prio-medium { color: var(--blue); } .prio-medium::before { background: var(--blue); }
.prio-low { color: var(--slate); } .prio-low::before { background: var(--slate); }
.prio-why { font-size: 12px; color: var(--navy); margin-top: 4px; line-height: 1.4; max-width: 46ch; }
.attn-other { font-size: 12.5px; color: var(--slate); padding: 10px 14px; margin-bottom: 10px; border-radius: 10px; background: var(--st-chip); border: 1px solid var(--st-chip-border); }
.attn-other span { font-weight: 700; color: var(--navy); }

/* ===== Settings: section menu + grouped cards ===== */
.settings-layout { display: grid; grid-template-columns: 190px 1fr; gap: 36px; align-items: start; }
.settings-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-link { padding: 8px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--slate); text-decoration: none; transition: background .15s ease, color .15s ease; }
.settings-nav-link:hover { background: var(--mist); color: var(--navy); }
.settings-nav-link.active { background: #EAF2FF; color: var(--blue); font-weight: 600; }
.settings-group { margin-bottom: 30px; scroll-margin-top: 20px; }
.settings-group-title { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; }
.settings-main .panel { padding: 20px 22px; margin-bottom: 12px; border-radius: 14px; }
.settings-main .panel-title { font-size: 15px; margin-bottom: 4px; }
.settings-main .panel-title::before { display: none; }
.settings-main .panel-note { font-size: 12.5px; line-height: 1.55; }
.settings-main input[type="text"], .settings-main input[type="email"], .settings-main input[type="password"], .settings-main input[type="url"], .settings-main input[type="number"], .settings-main select {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--navy); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; max-width: 100%;
}
.settings-main select { -webkit-appearance: none; appearance: none; padding-right: 30px; min-width: 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.settings-main input:focus, .settings-main select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,123,253,0.14); }
.settings-main input[readonly] { background: var(--mist); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.settings-main .ss-field input { width: 120px; }
.settings-main #accountEmail, .settings-main #accountPassword { width: 320px; }
/* Switch instead of a bare checkbox */
input.switch { -webkit-appearance: none; appearance: none; width: 38px; height: 22px; border-radius: 22px; background: #D0D5DD; position: relative; cursor: pointer; transition: background .2s ease; flex-shrink: 0; margin: 0; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(3,18,40,0.25); transition: transform .2s ease; }
input.switch:checked { background: var(--blue); }
input.switch:checked::after { transform: translateX(16px); }
input.switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; overflow-x: auto; } }

/* ===== Reports, tooltips, value deltas ===== */
.stat-sub { font-size: 11.5px; color: var(--st-ok); font-weight: 600; margin-top: 4px; }
.stat-card.highlight .stat-sub { color: #9FE0BC; }
.rep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rep-meta { font-size: 12px; color: var(--slate); }
.rep-bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; margin-top: 16px; }
.rep-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; cursor: default; }
.rep-bar { width: 70%; max-width: 36px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #4DA3FF, var(--blue)); transition: filter .15s ease; }
.rep-bar-col:hover .rep-bar { filter: brightness(0.85); }
.rep-bar-val { font-size: 11px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.rep-bar-col span { font-size: 10.5px; color: var(--slate); white-space: nowrap; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rep-grid .panel { margin: 0 0 20px; }
.rep-stack { display: flex; height: 14px; border-radius: 8px; overflow: hidden; gap: 2px; margin: 14px 0 16px; }
.rep-stack > div { min-width: 4px; }
.rep-legend { display: flex; flex-direction: column; gap: 8px; }
.rep-legend > div { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.rep-legend i { width: 10px; height: 10px; border-radius: 3px; }
.rep-legend b { font-variant-numeric: tabular-nums; color: var(--navy); }
.rep-legend em, .rep-share { font-style: normal; font-size: 11.5px; color: var(--slate); text-align: right; }
.chart-tip { position: absolute; display: none; z-index: 1000; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 12px; line-height: 1.4; box-shadow: 0 6px 18px rgba(3,18,40,0.25); }
[data-tip] { cursor: default; }
.rr-trend-col:hover .rr-bar { filter: brightness(0.88); }
.ni-dot { cursor: help; transition: transform .15s ease; } .ni-dot:hover { transform: scale(1.25); }
.stat-delta { font-size: 11.5px; font-weight: 600; margin-top: 6px; color: var(--slate); }
.stat-delta[data-dir="up"] { color: var(--st-ok); } .stat-delta[data-dir="down"] { color: var(--st-critical); }
.stat-card.highlight .stat-delta[data-dir="up"] { color: #9FE0BC; } .stat-card.highlight .stat-delta[data-dir="down"] { color: #F4B3AC; }
.vr-change { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--slate); }
.vr-change[data-dir="up"] { color: var(--st-ok); } .vr-change[data-dir="down"] { color: var(--st-critical); }
@media (max-width: 900px) { .rep-grid { grid-template-columns: 1fr; } }
#depotBarChart .bar-count { white-space: nowrap; min-width: 70px; text-align: right; }
#depotBarChart .rep-share { margin-left: 4px; }
@media (max-width: 700px) {
  .rep-bars { gap: 3px; height: 140px; }
  .rep-bar-col { min-width: 0; }
  .rep-bar-col span { font-size: 9px; }
  .rep-bar-col:nth-child(even) span { visibility: hidden; }
  .rep-bar-val { font-size: 9.5px; }
  .rep-bar { width: 80%; }
  .rep-legend > div { grid-template-columns: 12px 1fr auto 36px; }
}

/* ===== Settings, sharper: one card per group, rows inside it ===== */
.settings-group .panel { border-radius: 0; margin: 0; border-bottom-width: 0; box-shadow: none; padding: 22px 26px;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 40px; row-gap: 10px; grid-auto-flow: row dense; align-items: start; }
.settings-group .panel:first-of-type { border-radius: 14px 14px 0 0; }
.settings-group .panel:last-of-type { border-radius: 0 0 14px 14px; border-bottom-width: 1px; }
.settings-group .panel:first-of-type:last-of-type { border-radius: 14px; }
.settings-group .panel > * { grid-column: 2; min-width: 0; }
.settings-group .panel > .panel-title, .settings-group .panel > .panel-title + .panel-note { grid-column: 1; }
.settings-group .panel > .panel-title { font-size: 14.5px; font-weight: 600; margin: 0; }
.settings-group .panel > .panel-title + .panel-note { margin: 0; font-size: 12.5px; color: var(--slate); }
.settings-group .panel > .panel-note:not(.panel-title + .panel-note) { margin: 0; font-size: 12px; }
.settings-group .panel.settings-wide { grid-template-columns: 1fr; }
.settings-group .panel.settings-wide > * { grid-column: 1; }
.settings-group-title { display: flex; align-items: center; gap: 12px; font-size: 11.5px; margin-bottom: 10px; }
.settings-group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.settings-group .ss-field label { font-size: 12px; color: var(--slate); font-weight: 600; }
.settings-group label:has(input.switch) { display: flex !important; align-items: center; gap: 10px; font-size: 13.5px; color: var(--navy); }
.settings-nav { padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.settings-nav-link { font-size: 13px; }
/* platform cards: compact rows */
.settings-group .platform-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 10px; }
.settings-group .platform-card > :first-child { font-size: 15px; min-width: 90px; }
.settings-group .platform-card-status { flex: 1; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.settings-group .platform-card-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #98A2B3; }
.settings-group .platform-card-status.connected::before { background: var(--st-ok-dot); }
.settings-group .platform-card .btn-ghost, .settings-group .platform-card button { padding: 6px 14px; font-size: 12.5px; }

/* ===== Insights, sharper ===== */
.insights-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 6px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); overflow-x: auto; }
.insights-nav a { white-space: nowrap; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--slate); text-decoration: none; }
.insights-nav a:hover { background: var(--mist); color: var(--navy); }
.insights-nav a.active { background: #EAF2FF; color: var(--blue); font-weight: 600; }
#view-insights .panel { padding: 24px 26px; border-radius: 16px; scroll-margin-top: 70px; }
#view-insights .panel > .panel-title { font-size: 16px; }
#view-insights .panel > .panel-note { max-width: 78ch; }
#view-insights .stat-row { gap: 12px; margin: 16px 0 14px !important; }
#view-insights .stat-card { padding: 14px 16px 12px; min-width: 150px; }
#view-insights .stat-card .stat-value { font-size: 22px; }
#view-insights .stat-card .stat-label { font-size: 11px; margin-top: 4px; }
/* lists as one clean table, not a stack of boxes */
#view-insights [id$="List"] { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#view-insights [id$="List"]:empty { display: none; }
#view-insights [id$="List"] .case-row { border: 0; border-radius: 0; margin: 0; box-shadow: none; padding: 13px 16px; border-top: 1px solid var(--line); transform: none; }
#view-insights [id$="List"] .case-row:first-child { border-top: 0; }
#view-insights [id$="List"] .case-row:hover { background: #FAFBFD; }
#view-insights [id$="List"] > .panel-note { padding: 14px 16px; margin: 0; }
#view-insights .dropzone { margin-top: 14px; }
.settings-group .platform-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.settings-group .panel > * { grid-column: auto; }
.settings-group .panel:not(.settings-wide) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 40px; row-gap: 0; }
.settings-label .panel-title { font-size: 14.5px; font-weight: 600; margin: 0; }
.settings-label .panel-note { margin: 4px 0 0 !important; font-size: 12.5px; color: var(--slate); line-height: 1.55; }
.settings-control { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.settings-control > .panel-note { margin: 0; font-size: 12px; }
.settings-control .ss-field { margin: 0; }
.settings-group .panel.settings-wide { display: block; }
.settings-group .panel.settings-wide > .panel-title { margin-bottom: 4px; }
.settings-group .panel.settings-wide > .panel-note { margin: 0 0 12px; }
.settings-group .panel.settings-wide button.btn-ghost, .settings-group .panel.settings-wide button.btn-primary { width: auto; display: inline-flex; margin: 10px 8px 0 0; }
.settings-group .panel.settings-wide > div[style*="display:flex"] button { margin-top: 0; }
.settings-group .panel.settings-wide .platform-card button { margin: 0 0 0 auto !important; }
@media (max-width: 760px) {
  .settings-group .panel:not(.settings-wide) { grid-template-columns: 1fr; row-gap: 12px; }
  .settings-main #accountEmail, .settings-main #accountPassword, .settings-main select, .settings-main input[type="url"], .settings-main input[type="text"] { width: 100% !important; min-width: 0; }
  .settings-control, .settings-control > * { max-width: 100%; }
  .settings-group .panel { padding: 18px 16px; }
}