/* ─────────────────────────────────────────────────────────────
   GeoRadar Asset Tracker — Design System
   ───────────────────────────────────────────────────────────── */

/* ── CSS Variables ── */
:root {
  --primary:       #4338CA;
  --primary-dark:  #3730A3;
  --secondary:     #F59E0B;
  --success:       #059669;
  --danger:        #DC2626;
  --warning:       #F59E0B;
  --info:          #0891B2;
  --bg:            #F9F8F6;
  --surface:       #FFFFFF;
  --border:        #E5E2DC;
  --text:          #1E1E1E;
  --text-muted:    #78716C;
  --navbar-h:      56px;          /* single merged top bar (entry 076) */
  --radius:        10px;
  --shadow:        0 1px 8px rgba(0,0,0,0.06);
  --shadow-hover:  0 8px 24px rgba(67,56,202,0.14);
  --transition:    all 0.22s ease;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Type scale (entry 070) — consolidated font-size tokens. ──
     Every font-size in the dashboard references one of these eleven
     steps; the previous 38-value rem sprawl was collapsed into this
     scale. The html root stays 15px (13px at ≤600px), so these rem
     values still scale responsively. NOTE: map_view.html does not load
     main.css and keeps its own copy of this block — keep the two in
     sync. */
  --fs-2xs:        0.66rem;   /* was 0.62 / 0.65 / 0.66 / 0.68 */
  --fs-xs:         0.73rem;   /* was 0.70 / 0.72 / 0.73 / 0.74 / 0.75 */
  --fs-sm:         0.78rem;   /* was 0.76 / 0.77 / 0.78 */
  --fs-md:         0.85rem;   /* was 0.80 / 0.82 / 0.83 / 0.84 / 0.85 / 0.86 */
  --fs-base:       0.92rem;   /* was 0.87 / 0.88 / 0.90 / 0.92 / 0.95 */
  --fs-lg:         1.05rem;   /* was 1.0 / 1.05 */
  --fs-xl:         1.2rem;    /* was 1.1 / 1.15 / 1.2 */
  --fs-2xl:        1.45rem;   /* was 1.4 / 1.45 */
  --fs-3xl:        1.6rem;    /* was 1.5 / 1.55 / 1.6 */
  --fs-display:    1.9rem;    /* was 1.9 / 2.0 */
  --fs-hero:       3rem;      /* was 2.8 / 3.0 / 4.0 */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text);
       min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* ── Scrollbar ── */
/* ── macOS-style scrollbars (entry 219): proper thickness, a draggable rounded
   thumb, and an arrow button at each end. WebKit/Blink (Safari, Chrome, Edge);
   Firefox uses scrollbar-width/color (no per-button styling in that engine).
   Decorative horizontal chrome scrollers (nav pills, filter pills, card rows)
   keep their own scrollbar-hide — the bars are for content scrolling. ── */
html { scrollbar-color: #b8bcc4 #f4f4f5; scrollbar-width: auto; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #f4f4f5; }
::-webkit-scrollbar-corner { background: #f4f4f5; }
::-webkit-scrollbar-thumb { background: #b8bcc4; border-radius: 8px; border: 3px solid #f4f4f5; min-height: 34px; min-width: 34px; }
::-webkit-scrollbar-thumb:hover { background: #9aa0a8; }
::-webkit-scrollbar-thumb:active { background: #80868e; }
::-webkit-scrollbar-button { background: #f4f4f5; background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-button:hover { background-color: #e7e7ea; }
::-webkit-scrollbar-button:vertical { height: 14px; }
::-webkit-scrollbar-button:horizontal { width: 14px; }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><path d='M7 4.5l3.5 5.5h-7z' fill='%23808790'/></svg>"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><path d='M7 9.5l-3.5-5.5h7z' fill='%23808790'/></svg>"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><path d='M4.5 7l5.5-3.5v7z' fill='%23808790'/></svg>"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><path d='M9.5 7l-5.5 3.5v-7z' fill='%23808790'/></svg>"); }
/* touch pointers: keep a visible bar but drop the tiny arrow buttons */
@media (pointer: coarse) { ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar { width: 10px; height: 10px; } }

/* ─────────────────────────────────────────────────────────────
   Navbar
   ───────────────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--navbar-h);
  background: #FFFFFF;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-bottom: 1px solid var(--border);
}
/* Horizontal nav merged into the navbar (entry 076). It takes the middle
   zone and scrolls horizontally if the links do not fit, so the brand stays
   pinned left and the user actions pinned right. */
.navbar-nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.navbar-nav::-webkit-scrollbar { display: none; }
.navbar-brand {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: var(--fs-xl); font-weight: 700; color: var(--primary);
  flex-shrink: 0; white-space: nowrap;
}
.navbar-brand .brand-icon { font-size: var(--fs-2xl); }
.navbar-right {
  display: flex; align-items: center; gap: 1rem;
  flex-shrink: 0;
}
.role-badge {
  background: rgba(67,56,202,0.08);
  color: var(--primary); font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(67,56,202,0.15);
}
.btn-logout {
  color: var(--text-muted); border: 1.5px solid var(--border);
  background: transparent; border-radius: 6px;
  padding: 5px 13px; font-size: var(--fs-md); cursor: pointer;
  transition: var(--transition);
}
.btn-logout:hover { background: var(--bg); color: var(--text); }

/* ─────────────────────────────────────────────────────────────
   Nav links (live in the navbar since entry 076)
   ───────────────────────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; color: var(--text-muted); font-size: var(--fs-md);
  font-weight: 500; cursor: pointer; transition: var(--transition);
  border-radius: 10px; white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
}
.nav-item:hover { background: rgba(67,56,202,0.06); color: var(--primary);
                  text-decoration: none; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item .nav-icon { font-size: var(--fs-base); }

/* ─────────────────────────────────────────────────────────────
   Main Content
   ───────────────────────────────────────────────────────────── */
.main-content {
  margin-left: 0;
  margin-top: var(--navbar-h);   /* single merged navbar (entry 076) */
  padding: 1.5rem 2rem;
  flex: 1;
}
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  /* wrap the action-button cluster below the title on narrow widths instead
     of letting it overlap the title/subtitle (entry 071 overlap fix) */
  flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.page-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); }
.page-subtitle { font-size: var(--fs-md); color: var(--text-muted); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────
   Flash Messages
   ───────────────────────────────────────────────────────────── */
.flash-container { margin-bottom: 1rem; }
.flash { display: flex; align-items: center; justify-content: space-between;
         padding: 0.75rem 1.1rem; border-radius: var(--radius);
         font-size: var(--fs-base); font-weight: 500; margin-bottom: 0.5rem;
         animation: fadeIn 0.3s ease; }
.flash-danger  { background: #fce8ea; color: #7b1b22; border: 1px solid #f5c6cb; }
.flash-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.flash-info    { background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; }
.flash-warning { background: #fff8e1; color: #6d4c00; border: 1px solid #ffe082; }
.flash-close   { cursor: pointer; font-size: var(--fs-xl); opacity: 0.6; background: none;
                 border: none; color: inherit; line-height: 1; }
.flash-close:hover { opacity: 1; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.card-header {
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: var(--fs-lg); font-weight: 600; }
.card-body { padding: 1.3rem; }

/* ── Stat Cards ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 1.1rem; margin-bottom: 1.5rem; }
.stat-card {
  border-radius: var(--radius); padding: 1.2rem 1.4rem; color: #fff;
  display: flex; flex-direction: column; gap: 0.3rem;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 100px; height: 100px; background: rgba(255,255,255,0.1);
  border-radius: 50%;
}
.stat-card .stat-icon { font-size: var(--fs-display); opacity: 0.85; margin-bottom: 0.3rem; }
.stat-card .stat-value { font-size: var(--fs-display); font-weight: 800; line-height: 1; }
.stat-card .stat-label { font-size: var(--fs-md); opacity: 0.85; font-weight: 500; }
.stat-card .stat-sub   { font-size: var(--fs-sm); opacity: 0.75; }
.stat-blue   { background: linear-gradient(135deg, #4338CA, #3730A3); }
.stat-green  { background: linear-gradient(135deg, #059669, #047857); }
.stat-yellow { background: linear-gradient(135deg, #D97706, #B45309); }
.stat-red    { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.stat-teal   { background: linear-gradient(135deg, #0891B2, #0E7490); }

/* ─────────────────────────────────────────────────────────────
   Tracker Cards (Dashboard Grid)
   ───────────────────────────────────────────────────────────── */
.tracker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
}
.tracker-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: pointer;
  transition: var(--transition); border: 1.5px solid transparent;
  display: flex; flex-direction: column;
}
.tracker-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}
.tracker-card-header {
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.tracker-card-header .tracker-name { font-weight: 700; font-size: var(--fs-base); }
.tracker-card-actions { display: flex; gap: 0.4rem; }
.tracker-card-body { padding: 1rem 1.1rem; flex: 1; }
.tracker-info-row { display: flex; gap: 0.5rem; margin-bottom: 0.4rem;
                    font-size: var(--fs-md); color: var(--text-muted); }
.tracker-info-row .info-label { font-weight: 600; color: var(--text); min-width: 55px; }
.tracker-card-footer {
  padding: 0.75rem 1.1rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-md); color: var(--text-muted);
}
.tracker-card-footer .distance { font-weight: 600; color: var(--primary); }

/* ─────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-success  { background: #D1FAE5; color: #065F46; }
.badge-danger   { background: #FEE2E2; color: #991B1B; }
.badge-warning  { background: #FEF3C7; color: #92400E; }
.badge-info     { background: #CFFAFE; color: #155E75; }
.badge-secondary{ background: #F3F1ED; color: #57534E; }
.badge-primary  { background: #E0E7FF; color: #3730A3; }

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 7px; border: none;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  transition: var(--transition); line-height: 1.4;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-success  { background: var(--success); color: #fff; }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-warning  { background: var(--warning); color: #111; }
.btn-info     { background: var(--info);    color: #fff; }
.btn-secondary{ background: #6c757d;        color: #fff; }
.btn-outline  { background: transparent; border: 1.5px solid var(--primary);
                color: var(--primary); }
.btn-sm { padding: 4px 10px; font-size: var(--fs-sm); }
.btn-xs { padding: 2px 7px;  font-size: var(--fs-xs); border-radius: 5px; }
.btn-icon { padding: 5px 8px; background: transparent; border: 1px solid var(--border);
            border-radius: 6px; color: var(--text-muted); cursor: pointer;
            transition: var(--transition); }
.btn-icon:hover { background: var(--bg); color: var(--text); }

/* ─────────────────────────────────────────────────────────────
   Forms
   ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: var(--fs-md); font-weight: 600;
              color: var(--text); margin-bottom: 5px; }
.form-control {
  width: 100%; padding: 8px 12px; font-size: var(--fs-base);
  border: 1.5px solid var(--border); border-radius: 7px;
  background: #fff; color: var(--text); transition: var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--primary);
                      box-shadow: 0 0 0 3px rgba(0,102,204,0.12); }
.form-control::placeholder { color: #adb5bd; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; }
select.form-control { cursor: pointer; }

/* ─────────────────────────────────────────────────────────────
   Modal
   ───────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: 100%; max-width: 600px; max-height: 90vh;
  overflow-y: auto; animation: modalIn 0.25s ease;
}
.modal-lg { max-width: 780px; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(-20px); }
  to   { opacity: 1; transform: none; }
}
.modal-header {
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; }
.modal-close { background: none; border: none; font-size: var(--fs-2xl);
               color: var(--text-muted); cursor: pointer; line-height: 1;
               transition: var(--transition); }
.modal-close:hover { color: var(--danger); }
.modal-body   { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border);
                display: flex; gap: 0.75rem; justify-content: flex-end;
                background: #F9F8F6; }

/* ─────────────────────────────────────────────────────────────
   Map
   ───────────────────────────────────────────────────────────── */
.map-container { border-radius: var(--radius); overflow: hidden; position: relative;
                 box-shadow: var(--shadow); border: 1.5px solid var(--border); }
#main-map    { width: 100%; height: 420px; }
#detail-map  { width: 100%; height: 380px; }

/* entry 208: detail-map custom controls (pan pad, reset ⌖, pop-out ⛶). */
.map-pan-pad { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px);
    background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.12); overflow: hidden; }
.map-pan-pad a { display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #1d1d1f; text-decoration: none; }
@media (hover: hover) { .map-pan-pad a:hover { background: #f0f0f0; } }
.map-pan-pad a:active { background: #e5e5e5; }
.map-pan-pad .pan-up { grid-column: 2; grid-row: 1; }
.map-pan-pad .pan-left { grid-column: 1; grid-row: 2; }
.map-pan-pad .pan-right { grid-column: 3; grid-row: 2; }
.map-pan-pad .pan-down { grid-column: 2; grid-row: 3; }
/* entry 216: compass control */
.map-compass-ctl a { width: 30px; height: 30px; line-height: 30px; display: flex; align-items: center; justify-content: center; background: #fff; }
.compass-rose { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease; will-change: transform; }
.map-reset-ctl a, .map-popout-ctl a { width: 30px; height: 30px; line-height: 30px;
    text-align: center; font-size: 16px; font-weight: 700; color: #1d1d1f; background: #fff; }
.map-container:fullscreen { width: 100%; height: 100%; border-radius: 0; border: none; }
.map-container:fullscreen #detail-map { height: 100%; }
/* entry 210: trail direction arrowheads */
.trail-arrow { background: none; border: none; pointer-events: none; }
.trail-arrow div { font-size: 14px; line-height: 16px; text-align: center; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
/* entry 211: trail time scrubber (detail map — absolute within the container) */
.map-container .trail-scrubber { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 650;
    display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 12px;
    background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    width: min(460px, calc(100% - 24px)); box-shadow: 0 4px 18px rgba(0,0,0,0.16); }
.trail-scrubber[hidden] { display: none; }
.ts-btn { width: 38px; height: 38px; min-width: 38px; border: none; border-radius: 9px; background: #fff;
    color: #1d1d1f; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ts-close { background: transparent; font-size: 14px; color: #6e6e73; }
.ts-range { flex: 1; min-width: 50px; height: 4px; accent-color: #8E44FF; cursor: pointer; }
.ts-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 110px; }
.ts-time { font-size: 12px; font-weight: 600; color: #1d1d1f; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #6e6e73; }
.ts-ramp { display: inline-block; width: 50px; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, hsl(210,78%,46%), hsl(270,78%,46%), hsl(330,78%,46%)); }
@media (pointer: coarse) { .ts-btn { width: 44px; height: 44px; min-width: 44px; } .ts-range { height: 44px; } }
@media (max-width: 600px) { .map-container .trail-scrubber { width: calc(100% - 16px); bottom: 8px; }
    /* lift the bottom-right map controls + attribution clear of the scrubber */
    .map-container.scrubbing .leaflet-bottom.leaflet-right { bottom: 64px; } }
.map-container:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; border: none; }
.map-container:-webkit-full-screen #detail-map { height: 100%; }
@media (pointer: coarse) {
    .map-pan-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
    .map-reset-ctl a, .map-popout-ctl a, .map-compass-ctl a { width: 44px; height: 44px; line-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────
   Tables
   ───────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius); }
table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-md);
  background: var(--surface);
}
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: #F5F3EF; font-weight: 700; color: var(--text);
     font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAF8; }

/* ─────────────────────────────────────────────────────────────
   Tabs
   ───────────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.2rem; gap: 0; }
.tab-btn {
  padding: 0.6rem 1.3rem; border: none; background: none; cursor: pointer;
  font-size: var(--fs-base); font-weight: 600; color: var(--text-muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  transition: var(--transition);
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-btn:hover  { color: var(--primary); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ─────────────────────────────────────────────────────────────
   Pagination
   ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 1.2rem;
}
.page-btn {
  padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--surface); cursor: pointer; font-size: var(--fs-md);
  font-weight: 600; transition: var(--transition); color: var(--text);
}
.page-btn:hover, .page-btn.active { background: var(--primary); color: #fff;
                                    border-color: var(--primary); }
.page-btn:disabled { opacity: 0.45; cursor: default; }
.page-info { font-size: var(--fs-md); color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────
   Violation Banner
   ───────────────────────────────────────────────────────────── */
.violation-banner {
  /* sit below the single fixed navbar (entry 076; topbar merged in) with a
     small gap */
  position: fixed; top: calc(var(--navbar-h) + 12px); right: 18px; z-index: 1500;
  background: var(--danger); color: #fff; padding: 12px 20px;
  border-radius: var(--radius); box-shadow: 0 4px 20px rgba(220,53,69,0.4);
  font-weight: 700; font-size: var(--fs-base); display: flex; align-items: center; gap: 0.6rem;
  animation: pulse-danger 1.2s infinite;
}
.violation-banner.hidden { display: none; }
@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 4px 20px rgba(220,53,69,0.4); }
  50%       { box-shadow: 0 4px 30px rgba(220,53,69,0.7); }
}

/* ─────────────────────────────────────────────────────────────
   Detail Page Layout
   ───────────────────────────────────────────────────────────── */
.detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.detail-stat-row { display: grid; grid-template-columns: repeat(3, 1fr);
                   gap: 1rem; margin-bottom: 1.2rem; }
/* TEST_DATA (removable, entry 191) — simulated trackers add a 4th stat box
   (Total Acreage), so the top row becomes four columns on desktop. The
   responsive breakpoints below still target `.detail-stat-row` and appear
   later in the source, so they override this to 2/1 columns on smaller
   screens automatically. Real trackers never get this class → row unchanged. */
.detail-stat-row--4 { grid-template-columns: repeat(4, 1fr); }
.detail-stat {
  background: var(--surface); border-radius: var(--radius); padding: 1rem 1.2rem;
  box-shadow: var(--shadow); text-align: center;
}
.detail-stat .ds-label { font-size: var(--fs-xs); color: var(--text-muted);
                         font-weight: 600; text-transform: uppercase;
                         letter-spacing: 0.05em; margin-bottom: 4px; }
.detail-stat .ds-value { font-size: var(--fs-xl); font-weight: 800; color: var(--primary); }

/* ─────────────────────────────────────────────────────────────
   History List
   ───────────────────────────────────────────────────────────── */
.history-list { max-height: 300px; overflow-y: auto; }
.history-item {
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border);
  font-size: var(--fs-md); display: flex; justify-content: space-between; align-items: center;
}
.history-item:last-child { border-bottom: none; }
.history-item .loc { color: var(--primary); font-weight: 600; }
.history-item .time { color: var(--text-muted); font-size: var(--fs-sm); }
.history-item .delta { color: var(--success); font-size: var(--fs-sm); }

/* ─────────────────────────────────────────────────────────────
   Audit Timeline
   ───────────────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 0.6rem; top: 0; bottom: 0;
                    width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 1.2rem; }
.timeline-dot {
  position: absolute; left: -1.72rem; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2.5px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary);
}
.timeline-dot.dot-danger  { background: var(--danger);  box-shadow: 0 0 0 2px var(--danger); }
.timeline-dot.dot-success { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.timeline-dot.dot-warning { background: var(--warning); box-shadow: 0 0 0 2px var(--warning); }
.timeline-dot.dot-info    { background: var(--info);    box-shadow: 0 0 0 2px var(--info); }
.timeline-content { background: var(--surface); border-radius: var(--radius);
                    padding: 0.75rem 1rem; box-shadow: var(--shadow);
                    border: 1px solid var(--border); }
.timeline-action { font-weight: 700; font-size: var(--fs-base); margin-bottom: 3px; }
.timeline-meta { font-size: var(--fs-sm); color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────
   Login Page
   ───────────────────────────────────────────────────────────── */
.login-page { min-height: 100vh; background: var(--bg);
              display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--surface); border-radius: 16px; padding: 2.5rem 2.2rem;
              width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo .logo-icon { font-size: var(--fs-hero); }
.login-logo h1 { font-size: var(--fs-2xl); font-weight: 800; color: var(--primary); margin-top: 8px; }
.login-logo p  { font-size: var(--fs-md); color: var(--text-muted); }
.login-footer  { text-align: center; margin-top: 1.2rem; font-size: var(--fs-sm);
                 color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────
   Geofence Panel
   ───────────────────────────────────────────────────────────── */
.geofence-panel { background: #F5F3EF; border: 1.5px solid var(--border);
                  border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; }
.geofence-panel h4 { font-size: var(--fs-base); margin-bottom: 0.8rem; color: var(--primary-dark); }

/* ─────────────────────────────────────────────────────────────
   Admin Cleanup Panel
   ───────────────────────────────────────────────────────────── */
.admin-panel { border: 2px solid var(--danger); border-radius: var(--radius);
               padding: 1.3rem; margin-top: 2rem; }
.admin-panel-title { color: var(--danger); font-weight: 700; font-size: var(--fs-base);
                     margin-bottom: 0.8rem; }

/* ─────────────────────────────────────────────────────────────
   Grievance Cards
   ───────────────────────────────────────────────────────────── */
.grievance-row { background: var(--surface); border-radius: 8px; padding: 0.9rem 1.1rem;
                 margin-bottom: 0.75rem; box-shadow: 0 1px 6px rgba(0,0,0,0.07);
                 border-left: 4px solid var(--warning); }
.grievance-row.escalated { border-left-color: var(--danger); }
.grievance-row.resolved  { border-left-color: var(--success); opacity: 0.8; }
.grievance-row .gr-header { display: flex; align-items: center; justify-content: space-between;
                             margin-bottom: 0.4rem; }
.grievance-row .gr-type { font-weight: 700; font-size: var(--fs-base); }
.grievance-row .gr-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.grievance-row .gr-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

/* ─────────────────────────────────────────────────────────────
   Reports Page
   ───────────────────────────────────────────────────────────── */
.report-selector { margin-bottom: 1.4rem; display: flex; align-items: center; gap: 1rem; }
.report-selector label { font-weight: 600; font-size: var(--fs-base); }
.report-selector select { max-width: 260px; }

.report-section { display: none; }
.report-section.active { display: block; }

.report-header { display: flex; align-items: center; justify-content: space-between;
                 margin-bottom: 0.9rem; }
.report-title { font-size: var(--fs-lg); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   Loader
   ───────────────────────────────────────────────────────────── */
.loader { display: inline-block; width: 18px; height: 18px;
          border: 3px solid rgba(67,56,202,0.15);
          border-radius: 50%; border-top-color: var(--primary);
          animation: spin 0.7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row { text-align: center; color: var(--text-muted); padding: 2rem;
               font-size: var(--fs-base); }

/* ─────────────────────────────────────────────────────────────
   Utilities
   ───────────────────────────────────────────────────────────── */
.text-muted   { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-center  { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.w-100 { width: 100%; }
.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .main-content { padding: 1rem; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-stat-row { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :root { font-size: 13px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .tracker-grid { grid-template-columns: 1fr; }
  .detail-stat-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE / TOUCH LAYER (entry 087)
   All additions live inside max-width or pointer/hover feature queries, so
   desktop rendering is unchanged. Breakpoints:
     (pointer: coarse)  -> every touch device: 44px targets, 16px inputs, :active
     (hover: hover/none)-> gate mouse-only hover lifts
     <=1024px  tablet / iPad portrait softening
     <=900px   NAVBAR collapses to hamburger (structural)
     <=600px   bottom-sheet modals, grids stack, fixed widths release
     <=480px   tightest single-column phone tier
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. NAVBAR COLLAPSE WRAPPER + HAMBURGER (desktop defaults) ── */
.navbar-collapse {
  display: flex; align-items: center; gap: 1rem;
  flex: 1 1 auto; min-width: 0;
}
.navbar-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; margin-left: auto;
  background: transparent; border: 1.5px solid var(--border);
  border-radius: 8px; cursor: pointer; padding: 0 12px;
}
.navbar-toggle .hamburger-bar {
  display: block; height: 2px; width: 22px; background: var(--text);
  border-radius: 2px; transition: transform .22s ease, opacity .22s ease;
}
.navbar-toggle.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.open .hamburger-bar:nth-child(2) { opacity: 0; }
.navbar-toggle.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 2. TABLET / iPad PORTRAIT (<=1024px) ── */
@media (max-width: 1024px) {
  .bento-cell { border-radius: 14px; }
  .util-chart-cell canvas { max-width: 140px; max-height: 140px; }
}

/* ── 3. NAV COLLAPSE (<=900px): hamburger drives a full-width drop panel ── */
@media (max-width: 900px) {
  .navbar { gap: 0.6rem; }
  .navbar-toggle { display: flex; }

  .navbar-collapse {
    position: fixed; top: var(--navbar-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    max-height: calc(100vh - var(--navbar-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    transform: translateY(-8px); opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 999;
  }
  .navbar-collapse.open {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }

  .navbar-nav {
    flex-direction: column; align-items: stretch;
    overflow: visible; gap: 2px; width: 100%;
  }
  .nav-item {
    width: 100%; min-height: 48px;
    padding: 12px 14px; border-radius: 8px;
    font-size: var(--fs-base);
  }

  .navbar-right {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.75rem; width: 100%;
    margin-top: 0.5rem; padding: 0.75rem 0.5rem 0.25rem;
    border-top: 1px solid var(--border);
  }
  .navbar-right form { margin-left: auto; }
  .btn-logout { min-height: 44px; padding: 8px 16px; }
}

/* ── 4. COARSE POINTER (every touch device, any width) ── */
@media (pointer: coarse) {
  .form-control,
  select.form-control,
  textarea.form-control,
  input[type="text"], input[type="number"], input[type="password"],
  input[type="email"], input[type="date"], input[type="search"],
  select, textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea.form-control { min-height: 88px; }

  .btn        { min-height: 44px; }
  .btn-sm     { min-height: 44px; padding: 8px 14px; }
  .btn-xs     { min-height: 40px; padding: 6px 12px; }
  .btn-icon   { min-width: 44px; min-height: 44px; padding: 10px;
                display: inline-flex; align-items: center; justify-content: center; }
  .btn-logout { min-height: 44px; }
  .page-btn   { min-width: 44px; min-height: 44px; }
  .tab-btn    { min-height: 44px; padding-left: 1rem; padding-right: 1rem; }
  .modal-close,
  .flash-close { min-width: 44px; min-height: 44px;
                 display: inline-flex; align-items: center; justify-content: center; }

  .nav-item:active     { background: rgba(67,56,202,0.10); }
  .btn:active          { transform: scale(0.98); opacity: 0.9; }
  .btn-icon:active     { background: var(--bg); }
  .tab-btn:active      { color: var(--primary); }
  .page-btn:active     { background: rgba(67,56,202,0.10); }
  .tracker-card:active { border-color: var(--primary); transform: scale(0.99); }
  table tbody tr:active td { background: rgba(67,56,202,0.08); }

  #detail-map .leaflet-control-zoom a {
    width: 44px; height: 44px; line-height: 44px; font-size: 22px;
  }
}

/* ── 5. HOVER GATING — kill phantom hover on touch, keep lift on mouse ── */
@media (hover: hover) {
  .tracker-card:hover { transform: translateY(-4px);
                        box-shadow: var(--shadow-hover);
                        border-color: var(--primary); }
}
@media (hover: none) {
  .tracker-card:hover { transform: none; box-shadow: var(--shadow);
                        border-color: transparent; }
}

/* ── 6. REUSABLE RESPONSIVE-TABLE PATTERN (<=768px) ── */
@media (max-width: 768px) {
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
      linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0)) left center / 8px 100% no-repeat,
      linear-gradient(to left,  rgba(0,0,0,0.10), rgba(0,0,0,0)) right center / 8px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .table-wrapper table { min-width: 640px; }
  th, td { white-space: nowrap; }

  .card-body .form-group { flex: 1 1 100% !important; min-width: 0 !important; }
  #audit-from, #audit-to,
  #cleanup-date, #cleanup-type { width: 100% !important; flex: 1 1 100% !important; }
}

/* ── 7. LARGE PHONE (<=600px): bottom-sheets, stacking, release fixed widths ── */
@media (max-width: 600px) {
  .main-content { padding: 1rem; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header > div[style*="display:flex"] { width: 100%; }
  .page-header > div[style*="display:flex"] .btn { flex: 1 1 0; justify-content: center; }

  .modal-overlay.active { align-items: flex-end; }
  .modal, .modal-lg {
    max-width: none; width: 100%; max-height: 95vh;
    border-radius: 16px 16px 0 0;
  }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }

  .report-selector { flex-direction: column; align-items: stretch; }
  .report-selector select { max-width: none; width: 100%; }

  #main-map   { height: 300px; }
  #detail-map { height: 60vh; max-height: 380px; }

  .violation-banner { left: 12px; right: 12px; width: auto;
                      justify-content: center; text-align: center; }

  .detail-stat-row { grid-template-columns: 1fr 1fr; }

  .gr-actions { flex-wrap: wrap; }
  .gr-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 8. SMALL PHONE (<=480px): tightest single-column tier ── */
@media (max-width: 480px) {
  .main-content { padding: 0.85rem; }
  .navbar { padding: 0 0.9rem; }
  .navbar-brand { font-size: var(--fs-lg); }
  .stat-grid { grid-template-columns: 1fr; }
  .login-card { margin: 0 14px; }
  .col-hide-sm { display: none; }
}

/* ── Print dual-zone layer (Phase D, entry 094) ──
   On screen, times stay operator-local (Phase C). On PRINT, the report/archival
   record carries India Standard Time and UTC. `.print-only` elements are hidden
   on screen and revealed in print; `.print-tz-legend` is a print-only banner. */
.print-only { display: none; }
.print-tz-legend { display: none; }
@media print {
  .print-only { display: inline; }
  .print-tz-legend {
    display: block; margin: 0 0 12px; padding: 8px 10px;
    border: 1px solid #999; border-radius: 6px;
    font-size: 11px; line-height: 1.4; color: #000;
  }
}

/* ── entry 128: macOS-Dock-style 288-slot utilisation ribbon ───────────── */
.util-day-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }
.util-ribbon {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 78px;
  min-width: 576px;
  padding-top: 30px;          /* headroom for the swell + floating peak label */
  border-radius: 6px;
  outline: none;
}
.util-ribbon:focus-visible { box-shadow: 0 0 0 2px var(--primary, #4338CA); }
.util-slot {
  flex: 1 1 0;
  min-width: 2px;
  height: 26px;
  align-self: flex-end;
  background: var(--util-idle, #E7E5E4);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  transition: transform 90ms ease-out;
}
.util-slot.active   { background: var(--primary, #4338CA); }
.util-slot.hour     { box-shadow: inset 1px 0 0 rgba(120,113,108,0.40); }
.util-slot.quarter  { box-shadow: inset 2px 0 0 rgba(120,113,108,0.65); }
.util-slot.kbd-focus { outline: 2px solid var(--primary, #4338CA); outline-offset: 0; z-index: 4; }
.util-slot.pinned::after {
  content: ''; position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%); margin-bottom: 2px;
  width: 0; height: 0; border: 4px solid transparent;
  border-bottom-color: var(--accent, #F59E0B);
}
.util-peak-label {
  position: absolute; bottom: 0; left: 0;
  transform: translateX(-50%);
  background: var(--text, #1E1E1E); color: #fff;
  font-size: var(--fs-2xs, 0.66rem); font-weight: 700; line-height: 1.1;
  padding: 3px 7px; border-radius: 7px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 110ms ease; z-index: 6;
}
.util-peak-label.show { opacity: 1; }
.util-peak-label::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--text, #1E1E1E);
}
.util-axis {
  display: flex; justify-content: space-between;
  font-size: var(--fs-2xs, 0.66rem); color: var(--text-muted, #78716C);
  min-width: 576px; margin-top: 4px;
}
.util-caption {
  font-size: var(--fs-sm, 0.78rem); color: var(--text, #1E1E1E);
  font-weight: 600; margin-top: 6px; min-height: 1.25em;
}
.util-caption .util-cap-status { font-weight: 800; }
.util-caption .util-cap-active { color: var(--primary, #4338CA); }
.util-caption .util-cap-idle   { color: var(--text-muted, #78716C); }
.util-caption .util-cap-pin    { color: #B45309; margin-left: 8px; font-weight: 700; }

/* Touch: bigger ribbon for comfortable tapping; magnification is driven by
   tap (not hover) so there is no hover-only affordance. */
@media (pointer: coarse) {
  .util-ribbon { height: 88px; padding-top: 34px; }
  .util-slot   { height: 30px; }
  .util-caption { font-size: var(--fs-md, 0.85rem); }
}
/* Respect reduced motion: no swell, no transition — focus ring + caption only. */
@media (prefers-reduced-motion: reduce) {
  .util-slot, .util-peak-label { transition: none; }
}

/* ── entry 129: tracker-detail — uniform 2-column cards, full-width
   utilisation row, and 2-column key/value fields ─────────────────────────── */
/* Entry 155: `.card-columns` is now a CSS GRID, not a CSS multi-column block.
   Multi-column (`column-count`) repeatedly overlapped cards whose height is
   computed after layout — the Leaflet map and the utilisation canvases settle
   their size asynchronously, so the column flow placed the next card on top of
   them (entries 129/130 only mitigated it). A 2-track grid places each card in
   its own cell, so they can never overlap. `min-width: 0` lets a wide map/canvas
   shrink to its column instead of overflowing; `align-items: stretch` (entry 214)
   makes every column in a row span the height of the tallest card in that row.
   The utilisation card sits BETWEEN two such blocks as a plain full-width row. */
.detail-cards { display: block; }
.card-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: stretch; margin-bottom: 1.2rem; }
.card-columns > .card { margin-bottom: 0 !important; min-width: 0; }
/* entry 214: a lone grid child spans the full width instead of leaving an empty
   second column (mirrors the web_dashboard entry-213 rule). */
.card-columns > *:only-child { grid-column: 1 / -1; }
.util-fullrow { width: 100%; margin-bottom: 1.2rem; min-width: 0; }

/* entry 205 — Tracker Details: the Geofence card beside a stacked Device Status
   + Geofence Alerts; align-items:stretch makes both columns equal height, and the
   Geofence Alerts card flex-grows so the stack's height matches the Geofence card. */
.gf-block { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: stretch; }
.gf-block > .card, .gf-block > .gf-stack { min-width: 0; margin-bottom: 0; }
.gf-stack { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.gf-stack > .card { margin-bottom: 0; }
.gf-stack > .gf-alerts { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.gf-stack > .gf-alerts > .card-body { flex: 1 1 auto; min-height: 0; display: flex; }
.gf-stack > .gf-alerts #alerts-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Two-column key/value field grid inside a card; section sub-headers span both
   columns so each group's rows flow two-up beneath its heading. */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
/* Section sub-heading — one shared style so every Tracker Details subsection
   heading aligns (same weight, size, colour and left edge). Entry 203. */
.field-sec {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 6px;
}
.field-sec:first-child { margin-top: 0; }
.field-grid .field-sec { grid-column: 1 / -1; }
.field-grid .tracker-info-row { min-width: 0; }

@media (max-width: 900px) {
  .card-columns, .gf-block { grid-template-columns: 1fr; }   /* single column on narrow screens */
  .gf-stack > .gf-alerts #alerts-list { flex: none; max-height: 250px; }  /* bound the alerts list when stacked on narrow */
  .field-grid { grid-template-columns: 1fr; }     /* fields stack on phones */
}