/* Find'n'Secure Next Gen -- prototype design system (Cycle 27).
   Restrained, professional fleet-management look. Not final branding. */

:root {
  --fns-navy: #12233b;
  --fns-navy-dark: #0b1626;
  --fns-blue: #2f6fed;
  --fns-blue-dark: #1e50c4;
  --fns-bg: #f4f6f9;
  --fns-card: #ffffff;
  --fns-border: #e1e6ee;
  --fns-text: #1c2733;
  --fns-text-muted: #64748b;
  --fns-green: #16a34a;
  --fns-amber: #d97706;
  --fns-red: #dc2626;
  --fns-radius: 8px;
  --fns-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --fns-sidebar-w: 232px;
  --fns-topbar-h: 56px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fns-bg);
  color: var(--fns-text);
  font-size: 14px;
}

a { color: var(--fns-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------- status banner -------- */
.status-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--fns-radius);
  font-size: 12.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
/* Cycle 54: the full cycle-by-cycle engineering note is progressively
   disclosed, not deleted -- see statusbanner's own doc comment
   (partials.html.tmpl). */
.status-detail { flex-basis: 100%; margin-top: 2px; }
.status-detail summary { cursor: pointer; opacity: 0.75; font-size: 11.5px; }
.status-detail summary:hover { opacity: 1; }
.status-detail summary::marker { font-size: 10px; }
.status-confirmed { background: #eafaf1; border-color: #bdeccd; color: #0f6b34; }
.status-prototype { background: #eef3ff; border-color: #c9d9ff; color: #1e4bb8; }
.status-waiting { background: #fff7e6; border-color: #ffe4a8; color: #92620a; }
.status-blocked { background: #fdeeee; border-color: #f6c8c8; color: #a12727; }
.status-badge {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

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

.sidebar {
  width: var(--fns-sidebar-w);
  background: var(--fns-navy);
  color: #cfd8e6;
  flex-shrink: 0;
  padding: 0 0 20px 0;
  display: flex;
  flex-direction: column;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.sidebar-brand .mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--fns-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
/* Cycle 54: <summary> has its own default list-item marker/styling --
   normalized here so .sidebar-brand looks identical whether it's a plain
   div (unused now, kept for any stray reference) or this <summary>. At
   desktop width the nav is always expanded regardless of the <details>
   element's own open/closed state (no toggle indicator, not clickable as
   a toggle); only below the existing 860px breakpoint does it become a
   real, closed-by-default collapsible menu -- see that breakpoint below. */
.sidebar-toggle summary { list-style: none; cursor: default; }
.sidebar-toggle summary::-webkit-details-marker { display: none; }
.sidebar-toggle summary::marker { content: ''; }
.sidebar-nav { display: block; }
.nav-section { margin-top: 18px; }
.nav-section h4 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c8aa3;
  margin: 0 18px 6px 18px;
  font-weight: 700;
}
.nav-section a {
  display: block;
  padding: 8px 18px;
  color: #cfd8e6;
  font-size: 13.5px;
}
.nav-section a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.nav-section a.active {
  background: rgba(47, 111, 237, 0.22);
  color: #fff;
  border-right: 3px solid var(--fns-blue);
  font-weight: 600;
}

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* -------- prototype preview strip (R1: never implies impersonation) -------- */
.preview-strip {
  background: #3a2f0b;
  color: #ffe9a8;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 20px;
  font-size: 11.5px;
  flex-wrap: wrap;
}
.preview-strip-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.preview-strip-form { display: flex; align-items: center; gap: 6px; }
.preview-strip-form select {
  padding: 3px 8px; border-radius: 5px; border: 1px solid #6b5a1f; background: #2a2205; color: #ffe9a8; font-size: 11.5px;
}
.preview-strip-note { color: #d8c88a; flex: 1; min-width: 220px; }

.topbar {
  height: var(--fns-topbar-h);
  background: var(--fns-card);
  border-bottom: 1px solid var(--fns-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.topbar .role-switch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fns-text-muted); }
.topbar select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--fns-border);
  background: #fff;
  font-size: 12.5px;
}
.topbar .title { font-weight: 700; font-size: 15px; }
.topbar .top-actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fns-bg); color: var(--fns-text-muted);
  font-size: 14px;
}

.content { padding: 22px 26px 40px 26px; flex: 1; }

.page-header { margin-bottom: 8px; }
.page-header h1 { font-size: 20px; margin: 0 0 4px 0; }
.page-header p.subtitle { margin: 0; color: var(--fns-text-muted); font-size: 13px; }

/* -------- cards / grid -------- */
.card {
  background: var(--fns-card);
  border: 1px solid var(--fns-border);
  border-radius: var(--fns-radius);
  box-shadow: var(--fns-shadow);
  padding: 18px;
  /* Cycle 54: an interactive walkthrough found a wide data table (Audit
     Trail, Users, Alerts, Vehicles -- several columns plus free-text
     content) forcing the ENTIRE page to scroll horizontally, shifting
     the sidebar nav out of view along with it. overflow-x:auto here
     confines that scrolling to the card itself, which has no visible
     effect on any card that doesn't actually overflow (the vast
     majority), so this is safe to apply broadly rather than touching
     every template that renders a data-table. */
  overflow-x: auto;
}
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 980px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

.stat-card .stat-value { font-size: 26px; font-weight: 800; margin: 4px 0; }
.stat-card .stat-label { color: var(--fns-text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .stat-sub { font-size: 12px; color: var(--fns-text-muted); }
.stat-card-link { display: block; color: var(--fns-text); cursor: pointer; transition: box-shadow 0.12s, transform 0.12s; }
.stat-card-link:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(16,24,40,0.14); transform: translateY(-1px); border-color: var(--fns-blue); }
.stat-card-link .stat-cta { font-size: 11px; color: var(--fns-blue); font-weight: 700; margin-top: 6px; }

/* -------- buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--fns-border);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fns-text);
}
.btn:hover { background: var(--fns-bg); text-decoration: none; }
.btn-primary { background: var(--fns-blue); border-color: var(--fns-blue-dark); color: #fff; }
.btn-primary:hover { background: var(--fns-blue-dark); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* -------- tables -------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fns-text-muted);
  border-bottom: 1px solid var(--fns-border);
  padding: 10px 12px;
}
table.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--fns-border);
}
table.data-table tr:hover td { background: #fafbfd; }
table.data-table tr:last-child td { border-bottom: none; }

/* -------- badges / status dots -------- */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-moving { background: var(--fns-green); }
.dot-idle { background: var(--fns-amber); }
.dot-offline { background: #94a3b8; }
.badge { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge-critical { background: #fdeeee; color: var(--fns-red); }
.badge-warning { background: #fff7e6; color: var(--fns-amber); }
.badge-info { background: #eef3ff; color: var(--fns-blue-dark); }

/* -------- forms -------- */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.form-field input, .form-field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--fns-border);
  border-radius: 6px;
  font-size: 13.5px;
}

/* -------- login screen -------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--fns-navy) 0%, var(--fns-navy-dark) 100%);
}
.login-card { width: 360px; background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.login-card .mark {
  width: 44px; height: 44px; border-radius: 10px; background: var(--fns-blue);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 14px;
}

/* -------- map -------- */
#map-canvas { width: 100%; height: 560px; border-radius: var(--fns-radius); border: 1px solid var(--fns-border); }
.map-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--fns-text-muted); margin-top: 8px; }
.map-mock-banner {
  background: #fff7e6; border: 1px solid #ffe4a8; color: #92620a;
  padding: 8px 14px; border-radius: 6px; font-size: 12px; margin-bottom: 10px;
}

/* -------- live map split layout (R3/R4): compact list left, big map right -------- */
.map-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .map-split { grid-template-columns: 1fr; }
}
.map-list-panel {
  background: var(--fns-card);
  border: 1px solid var(--fns-border);
  border-radius: var(--fns-radius);
  box-shadow: var(--fns-shadow);
  display: flex;
  flex-direction: column;
  max-height: 78vh;
}
.map-list-panel .panel-search { padding: 10px; border-bottom: 1px solid var(--fns-border); }
.map-list-panel .panel-search input { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--fns-border); font-size: 13px; }
.status-chip-row { display: flex; gap: 6px; padding: 0 10px 10px 10px; flex-wrap: wrap; }
.status-chip {
  font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--fns-border);
  background: #fff; cursor: pointer; color: var(--fns-text-muted); font-weight: 600;
}
.status-chip.active { background: var(--fns-blue); color: #fff; border-color: var(--fns-blue-dark); }
.map-vehicle-list { overflow-y: auto; flex: 1; }
.map-vehicle-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fns-border);
  cursor: pointer; font-size: 12.5px;
}
.map-vehicle-row:hover, .map-vehicle-row.selected { background: #eef3ff; }
.map-vehicle-row .plate { font-weight: 700; }
.map-vehicle-row .meta { color: var(--fns-text-muted); font-size: 11px; }
.map-panel-wrap { position: relative; }
#map-canvas.map-canvas-large { height: 78vh; min-height: 460px; }

/* -------- playback controls (R17) -------- */
.playback-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.playback-controls .btn { padding: 8px 12px; }
.speed-group { display: flex; gap: 4px; margin-left: 10px; }
.speed-btn {
  font-size: 12px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--fns-border);
  background: #fff; cursor: pointer; color: var(--fns-text-muted); font-weight: 700;
}
.speed-btn.active { background: var(--fns-navy); color: #fff; border-color: var(--fns-navy); }
.playback-progress { font-size: 12px; color: var(--fns-text-muted); margin-top: 8px; }

/* -------- credits hierarchy tree (R7-R10) -------- */
.credit-tree { font-size: 13px; }
.credit-node {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--fns-border); border-radius: 6px; margin-bottom: 6px; background: #fff;
}
.credit-node .credit-balance { font-weight: 800; }
.credit-node.level-partner { margin-left: 0; }
.credit-node.level-reseller { margin-left: 26px; border-left: 3px solid var(--fns-blue); }
.credit-node.level-company { margin-left: 52px; border-left: 3px solid var(--fns-green); }

/* -------- shared-vehicle badge (R15) -------- */
.shared-badge {
  display: inline-block; background: #f3e8ff; color: #6b21a8; border: 1px solid #e2c8f7;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}

/* -------- footer -------- */
.proto-footer {
  text-align: center; padding: 18px; color: var(--fns-text-muted); font-size: 11.5px;
  border-top: 1px solid var(--fns-border);
}

/* -------- screen index (landing page) -------- */
.index-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px; }
.index-header { text-align: center; margin-bottom: 30px; }
.index-header h1 { margin: 0 0 8px 0; font-size: 26px; }
.index-header p { color: var(--fns-text-muted); max-width: 640px; margin: 0 auto; }
.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .screen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .screen-grid { grid-template-columns: 1fr; } }
.screen-tile {
  background: var(--fns-card); border: 1px solid var(--fns-border); border-radius: var(--fns-radius);
  padding: 16px; box-shadow: var(--fns-shadow); display: block; color: var(--fns-text);
}
.screen-tile:hover { border-color: var(--fns-blue); text-decoration: none; }
.screen-tile .num { color: var(--fns-text-muted); font-size: 11px; font-weight: 700; }
.screen-tile h3 { margin: 4px 0 6px 0; font-size: 15px; }
.screen-tile p { margin: 0 0 10px 0; font-size: 12.5px; color: var(--fns-text-muted); min-height: 32px; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; }
  .content { padding: 16px; }
  /* Cycle 54: below this width the sidebar becomes a real, closed-by-
     default collapsible menu (tap the brand to expand) instead of a
     full-height block a user must scroll past to reach any page
     content -- see the .sidebar-toggle rules above. */
  .sidebar-toggle summary { cursor: pointer; display: flex; align-items: center; }
  .sidebar-toggle summary::after {
    content: '▾ Menu'; margin-left: auto; opacity: 0.7; font-size: 12px; font-weight: 500;
  }
  .sidebar-toggle[open] summary::after { content: '▴ Close'; }
  .sidebar-nav { display: none; padding-bottom: 8px; }
  .sidebar-toggle[open] .sidebar-nav { display: block; }
}