/* ═══════════════════════════════════════════════════════════════════════
   ALVA Design System
   Tokens from alva-design-system-20260519 (canonical: www.alvaauto.com).
   Consume the semantic names below, not raw ramp values.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* semantic */
  --bg:#FFFFFF;              /* page/base white */
  --surface:#F2F2F3;         /* athensGray — recessed areas behind cards */
  --text:#1F2120;            /* neutral.100 */
  --text-muted:#6B6C6C;      /* neutral.80 */
  --border:#E0E0E0;          /* neutral.25 */
  --accent:#33FFC9;          /* electricGreen.50 — rules, focus, active only */
  --success:#02CF99;         /* electricGreen.70 */
  --danger:#E92727;          /* red.50 */
  --warn:#FFD748;            /* yellow.50 */
  --info:#1890FF;            /* blue.60 */
  --link:#607DFF;            /* linkPrimary */

  /* Primary actions are near-black, not green. #33FFC9 is an accent: it is
     far too bright to carry white text, so it marks edges and states. */
  --btn-bg:#1F2120;          /* buttonPrimaryBg */
  --btn-bg-hover:#363636;    /* neutral.150 */
  --btn-fg:#FFFFFF;          /* buttonPrimaryFg */

  /* tints, drawn from the ramps — always paired with dark text */
  --accent-tint:#EBFFFA;     /* electricGreen.10 */
  --danger-tint:#FBDADA;     /* red.10 */
  --danger-ink:#950F0F;      /* red.80 */
  --warn-tint:#FFF7DA;       /* yellow.150 */
  --warn-ink:#79641D;        /* yellow.90 */
  --info-tint:#EBF4FB;       /* blue.10 */
  /* blue.100, not blue.80: on the blue.10 tint, blue.80 measures 4.10:1 and
     fails WCAG AA for the 11px badge text. This one measures 7.01:1. */
  --info-ink:#1734E8;        /* blue.100 */
  --alt-tint:#DCEDF9;        /* blueSecondary.10 */
  --alt-ink:#1F6898;         /* blueSecondary.80 */
  --neutral-tint:#EEEEEE;    /* neutral.20 */
  --neutral-ink:#505151;     /* neutral.90 */
  --neutral-mid:#9E9F9F;     /* neutral.65 */

  --white:#FFFFFF;           /* retained: existing rules reference it */

  /* radius tokens cap at 4px — ALVA reads angular, not rounded */
  --radius:4px;              /* radius.md */
  --radius-sm:2px;           /* radius.sm */

  /* ALVA leans on 1px borders rather than elevation; shadows stay subtle
     and are reserved for things that genuinely float. */
  --shadow:none;
  --shadow-lg:0 8px 24px rgba(31,33,32,.16);

  /* type scale */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px;
  --fs-lg:20px; --fs-xl:24px; --fs-2xl:32px;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* MADE Outer Sans is a licensed brand face and is not bundled — without the
   files installed this falls through to Inter/Space Grotesk/system-ui. Drop
   the woff2 into web/static/fonts and add @font-face to get the real thing;
   the CSP forbids loading it from a CDN. */
body{
  font-family:"MADE Outer Sans",Inter,"Space Grotesk",system-ui,sans-serif;
  font-weight:300;line-height:1.5;
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important;}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;}
a{color:var(--link);}

/* ── NAV ── */
/* The 4px accent underline is the design system's signature edge treatment. */
.topnav{background:var(--bg);border-bottom:4px solid var(--accent);padding:0 24px;display:flex;align-items:center;gap:12px;height:60px;position:sticky;top:0;z-index:200;}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-base);color:var(--text);text-decoration:none;letter-spacing:-.02em;}
.logo span{color:var(--text-muted);font-weight:300;font-size:13px;letter-spacing:0;}
.badge-internal{background:var(--warn-tint);color:var(--warn-ink);padding:3px 8px;border-radius:var(--radius);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;}
.spacer{flex:1;}
.env-tag{font-size:var(--fs-xs);color:var(--text-muted);background:var(--surface);padding:4px 10px;border-radius:var(--radius);border:1px solid var(--border);}

/* ── USER MENU ── */
.user-menu-wrap{position:relative;}
.user-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;font-size:13px;color:var(--text);transition:border-color .15s;font-family:inherit;}
.user-btn:hover{border-color:var(--text);}
/* A circle here is a shape, not a radius token. */
.user-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text);flex-shrink:0;background:var(--accent);}
.user-info{text-align:left;}
.user-info .uname{font-weight:500;font-size:13px;line-height:1.2;}
.user-info .urole{font-size:11px;color:var(--text-muted);}
.user-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:220px;z-index:300;display:none;overflow:hidden;}
.user-menu-wrap.open .user-dropdown{display:block;}
.ud-header{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.ud-header .udname{font-weight:700;font-size:var(--fs-sm);}
.ud-header .udemail{font-size:12px;color:var(--text-muted);margin-top:2px;word-break:break-all;}
.ud-header .udrole{display:inline-flex;align-items:center;margin-top:6px;}
.ud-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;cursor:pointer;color:var(--text);transition:background .15s;border:none;background:none;width:100%;text-align:left;font-family:inherit;}
.ud-item:hover{background:var(--surface);}
.ud-item.danger{color:var(--danger);}
.ud-divider{height:1px;background:var(--border);}

/* ── LOGIN ── */
/* Dark ground with a single electric-green edge: ALVA's core contrast. */
.login-screen{position:fixed;inset:0;background:linear-gradient(160deg,#1F2120 0%,#171717 55%,#0D0D0D 100%);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
.login-card{background:var(--bg);border-radius:var(--radius);border-top:4px solid var(--accent);padding:40px 36px;width:100%;max-width:420px;box-shadow:0 24px 64px rgba(0,0,0,.45);}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.login-logo .ico{width:44px;height:44px;background:var(--accent-tint);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:22px;}
.login-logo .ltext{font-size:var(--fs-lg);font-weight:700;color:var(--text);letter-spacing:-.02em;}
.login-logo .lsub{font-size:var(--fs-xs);color:var(--text-muted);}
.login-title{font-size:18px;font-weight:700;margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--text-muted);margin-bottom:24px;}
.login-field{margin-bottom:16px;}
.login-field label{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;}
.login-field input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-sm);outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;font-weight:300;}
.login-field input:focus{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-tint);}
.login-err{background:var(--danger-tint);color:var(--danger-ink);border:1px solid var(--danger);border-radius:var(--radius);padding:8px 12px;font-size:13px;margin-bottom:14px;}
.login-btn{width:100%;padding:12px;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:var(--radius);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background .15s;font-family:inherit;}
.login-btn:hover{background:var(--btn-bg-hover);}
.login-btn:disabled{opacity:.5;cursor:default;}
.login-btn.ms{display:flex;align-items:center;justify-content:center;gap:10px;}
.login-note{margin-top:20px;background:var(--accent-tint);border:1px solid var(--success);border-radius:var(--radius);padding:12px 14px;font-size:var(--fs-xs);color:var(--text);line-height:1.5;}
.env-pill{display:inline-block;margin-top:14px;font-size:11px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);padding:3px 10px;border-radius:var(--radius);}

/* ── LAYOUT ── */
.main{max-width:1300px;margin:0 auto;padding:24px 24px 60px;}
.page-header{margin-bottom:20px;}
/* The accent rule on headings mirrors the design system's own h2 treatment. */
.page-header h1{font-size:var(--fs-xl);font-weight:700;border-left:4px solid var(--accent);padding-left:12px;}
.page-header p{color:var(--text-muted);margin-top:6px;font-size:13px;padding-left:16px;}

/* ── GLOBAL SCOPE BAR ── */
.scope-bar{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;flex-wrap:wrap;}
.scope-bar label{font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.scope-note{font-size:var(--fs-xs);color:var(--text-muted);}
.scope-note .counting{color:var(--text);font-weight:500;}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;gap:16px;}
.stat-icon{width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.stat-icon.loc{background:var(--info-tint);}
.stat-icon.mac{background:var(--accent-tint);}
.stat-icon.con{background:var(--alt-tint);}
.stat-info .num{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.stat-info .lbl{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}
.stat-info .sub{font-size:11px;color:var(--text-muted);margin-top:3px;}

/* ── TABS ── */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tab-btn{padding:10px 22px;font-size:var(--fs-sm);font-weight:300;color:var(--text-muted);background:none;border:none;border-bottom:4px solid transparent;margin-bottom:-1px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .15s,border-color .15s;font-family:inherit;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--text);border-bottom-color:var(--accent);font-weight:500;}
.tab-count{background:var(--surface);color:var(--text-muted);padding:1px 7px;border-radius:var(--radius-sm);font-size:11px;border:1px solid var(--border);}
.tab-btn.active .tab-count{background:var(--accent-tint);color:var(--text);border-color:var(--success);}
.tab-panel{display:none;}.tab-panel.active{display:block;}

/* ── TOOLBAR ── */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.search-wrap{position:relative;flex:1;min-width:200px;max-width:360px;}
.search-wrap input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;font-weight:300;}
.search-wrap input:focus{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-tint);}
.search-wrap .ico-s{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.filter-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text);outline:none;cursor:pointer;font-family:inherit;font-weight:300;}
.filter-select:focus{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-tint);}
.btn{padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;font-family:inherit;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);}
.btn-primary:hover:not(:disabled){background:var(--btn-bg-hover);}
.btn-secondary{background:var(--bg);color:var(--text);border-color:var(--border);}
.btn-secondary:hover:not(:disabled){border-color:var(--text);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover:not(:disabled){background:var(--danger-ink);}
/* Ghost is where the accent earns its keep: an outline, never a fill. */
.btn-ghost{background:transparent;color:var(--text);border-color:var(--success);padding:5px 10px;font-size:var(--fs-xs);}
.btn-ghost:hover:not(:disabled){background:var(--accent-tint);}
.btn-sm{padding:5px 10px;font-size:var(--fs-xs);}
.ml-auto{margin-left:auto;}

/* ── TABLE ── */
.table-wrap{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
table{width:100%;border-collapse:collapse;}
thead{background:var(--surface);}
th{padding:11px 14px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface);}
.cell-trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;display:block;}
.sn-tag{font-family:ui-monospace,Consolas,monospace;font-size:11px;background:var(--surface);padding:2px 6px;border-radius:var(--radius-sm);}
.id-tag{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--text-muted);}
.actions-cell{white-space:nowrap;display:flex;gap:6px;}

/* ── BADGES ──
   Every tint pairs with dark or deep ink rather than white. The bright end of
   the ALVA ramps cannot carry white text at an accessible contrast, and the
   status dot does the colour-signalling job instead. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;}
.badge-green{background:var(--accent-tint);color:var(--text);}
.badge-red{background:var(--danger-tint);color:var(--danger-ink);}
.badge-yellow{background:var(--warn-tint);color:var(--warn-ink);}
.badge-blue{background:var(--info-tint);color:var(--info-ink);}
.badge-gray{background:var(--neutral-tint);color:var(--neutral-ink);}
/* No purple exists in the ALVA palette — machine types use blueSecondary. */
.badge-purple{background:var(--alt-tint);color:var(--alt-ink);}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-green{background:var(--success);}
.dot-yellow{background:var(--warn);}
.dot-gray{background:var(--neutral-mid);}
.dot-red{background:var(--danger);}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg);border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;}
.pagination .info{font-size:var(--fs-xs);color:var(--text-muted);}
.pg-btns{display:flex;gap:4px;}
.pg-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-xs);background:var(--bg);cursor:pointer;color:var(--text);font-family:inherit;}
.pg-btn:hover:not(:disabled):not(.active){border-color:var(--text);}
.pg-btn:disabled{opacity:.4;cursor:default;}
.pg-btn.active{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);font-weight:500;}

/* ── STATES ── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted);}
.empty-state .eico{font-size:36px;margin-bottom:12px;}
.loading-state{text-align:center;padding:48px 24px;color:var(--text-muted);font-size:13px;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--success);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}
.error-banner{background:var(--danger-tint);border:1px solid var(--danger);color:var(--danger-ink);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:13px;display:flex;gap:10px;align-items:flex-start;}
.error-banner button{margin-left:auto;background:none;border:none;color:var(--danger-ink);cursor:pointer;font-size:16px;line-height:1;}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:2000;}
.toast{background:var(--text);color:#fff;padding:11px 16px;border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow-lg);max-width:380px;animation:slide-in .2s ease-out;border-left:4px solid var(--accent);}
.toast.ok{border-left-color:var(--success);}
.toast.err{border-left-color:var(--danger);}
@keyframes slide-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(31,33,32,.55);z-index:1000;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;}
.overlay.open{display:flex;}
.modal{background:var(--bg);border-radius:var(--radius);width:100%;max-width:720px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);margin:auto;border-top:4px solid var(--accent);}
.modal-header{padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-header h2{font-size:var(--fs-base);font-weight:700;letter-spacing:-.02em;}
.modal-header .sub{font-size:11px;color:var(--text-muted);margin-top:2px;font-family:ui-monospace,Consolas,monospace;}
.modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted);padding:4px;line-height:1;}
.modal-body{padding:20px 24px;overflow-y:auto;flex:1;max-height:72vh;}
.modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;align-items:center;}
.modal-footer .err{margin-right:auto;color:var(--danger);font-size:12px;}
.del-modal .modal{max-width:440px;border-top-color:var(--danger);}
.del-icon{width:52px;height:52px;border-radius:50%;background:var(--danger-tint);color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px;}
.del-body{text-align:center;padding:24px;}
.del-body h3{font-size:16px;font-weight:700;margin-bottom:8px;}
.del-body p{color:var(--text-muted);font-size:13px;line-height:1.5;}
.del-footer{display:flex;justify-content:center;gap:10px;padding:0 24px 24px;}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
.form-grid .full{grid-column:1/-1;}
.form-group{display:flex;flex-direction:column;gap:5px;}
label.flabel{font-size:var(--fs-xs);font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
label.flabel .req{color:var(--danger);margin-left:2px;}
label.flabel .hint{font-weight:300;font-style:italic;margin-left:6px;font-size:11px;color:var(--neutral-mid);text-transform:none;letter-spacing:0;}
.form-group input,.form-group select,.form-group textarea{padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text);background:var(--bg);outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;font-weight:300;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-tint);}
.form-group textarea{resize:vertical;min-height:64px;}
.form-group input:disabled{background:var(--surface);color:var(--text-muted);}
.fsec{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 2px;padding:0 0 6px 10px;border-left:3px solid var(--accent);border-bottom:1px solid var(--border);grid-column:1/-1;}
.field-note{font-size:11px;color:var(--text-muted);}
.field-note.err{color:var(--danger);}

/* ── TOGGLE ── */
.toggle-row{display:flex;align-items:center;gap:10px;}
/* Pill geometry here is the control's shape, not a radius token. */
.toggle{width:40px;height:22px;border-radius:11px;background:var(--neutral-mid);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;padding:0;}
.toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px rgba(31,33,32,.3);}
.toggle.on{background:var(--success);}
.toggle.on::after{left:21px;}

/* ── CHIP CHECKBOXES ── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:13px;transition:border-color .15s,background .15s;user-select:none;}
.chip:hover{border-color:var(--text);}
.chip.checked{border-color:var(--success);background:var(--accent-tint);color:var(--text);font-weight:500;}
.chip input{display:none;}

/* ── OPERATIONAL HOURS ── */
.ops-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.ops-preset-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-xs);background:var(--bg);cursor:pointer;color:var(--text-muted);transition:border-color .15s,background .15s,color .15s;font-family:inherit;}
.ops-preset-btn:hover{border-color:var(--success);color:var(--text);background:var(--accent-tint);}
.ops-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:13px;}
.ops-table th{padding:7px 10px;background:var(--surface);font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--border);}
.ops-table td{padding:6px 10px;border-bottom:1px solid var(--border);}
.ops-table tbody tr:last-child td{border-bottom:none;}
.ops-table tr.ops-closed td{opacity:.45;}
.ops-time{width:100px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-xs);background:var(--bg);font-family:inherit;}
.ops-time:focus{border-color:var(--text);outline:none;}
.ops-table input[type=checkbox]{cursor:pointer;width:15px;height:15px;accent-color:var(--danger);}

/* ── GMAPS ROW ── */
.gmaps-row{display:flex;gap:8px;align-items:center;}
.gmaps-row input{flex:1;}

/* ── MAP ── */
.map-section{margin-top:24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.map-header{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.map-header h2{font-size:15px;font-weight:700;border-left:4px solid var(--accent);padding-left:10px;}
.map-header p{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;padding-left:14px;}
.map-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
#map-canvas{height:460px;width:100%;background:var(--surface);}
#map-canvas .placeholder{display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--text-muted);font-size:13px;text-align:center;padding:24px;}
.map-legend{display:flex;align-items:center;gap:16px;padding:9px 16px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted);flex-wrap:wrap;}
.map-legend .lg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid rgba(31,33,32,.2);}
.lg-active{background:var(--success);}
.lg-draft{background:var(--neutral-mid);}
.lg-maint{background:var(--warn);}
.lg-other{background:var(--danger);}
/* ── ADMIN VIEWS (User Management, Access History) ── */
.admin-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.admin-head h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;
  border-left:4px solid var(--accent);padding-left:12px;}
.admin-count{font-size:var(--fs-xs);color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:3px 10px;}
/* Explains what the view is for, before the table dumps rows at you. */
.schema-note{background:var(--info-tint);border:1px solid var(--border);
  border-left:4px solid var(--info);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:16px;font-size:var(--fs-xs);line-height:1.55;color:var(--text);}

/* ── Small helpers ──
   The CSP is `style-src 'self'`, which blocks style="" attributes outright —
   a blocked style is silently NOT applied, so anything that used to live
   inline belongs here instead. Do not reintroduce inline styles. */
.u-sm{font-size:12px;}
.u-xs{font-size:10px;}
.u-muted{color:var(--text-muted);}
.u-danger{color:var(--danger);}
.u-dim{opacity:.6;}
.u-center{text-align:center;}
.u-top{vertical-align:top;}
.u-bold{font-weight:600;}
.u-medium{font-weight:500;}
.u-empty{color:var(--text-muted);font-style:italic;font-size:12px;}
.u-caret{font-size:10px;color:var(--text-muted);margin-left:2px;}
.u-stack{display:flex;flex-direction:column;gap:12px;}
.filter-w{width:150px;}
.pg-gap{padding:4px 6px;color:var(--text-muted);}
.col-actions{width:150px;}
.col-actions-wide{width:180px;}
.col-day{font-weight:500;width:90px;}
.col-closed{width:70px;}
.join-scroll{overflow-x:auto;}
.join-table{min-width:1180px;}
.join-name{min-width:170px;}

/* ── CesaMap: our own slippy map (web/static/js/map.js) ── */
.cmap{position:relative;overflow:hidden;background:var(--surface);cursor:grab;touch-action:none;user-select:none;}
.cmap.cmap-dragging{cursor:grabbing;}
.cmap-tiles,.cmap-overlay{position:absolute;inset:0;}
.cmap-overlay{pointer-events:none;}
.cmap-tile{position:absolute;top:0;left:0;width:256px;height:256px;
  /* Hairline gaps appear between tiles at fractional offsets without this. */
  outline:1px solid transparent;pointer-events:none;}

/* Markers and clusters sit in a pointer-events:none overlay, so re-enable
   them individually — that keeps map dragging working everywhere else. */
.cmap-marker,.cmap-cluster{position:absolute;top:0;left:0;pointer-events:auto;
  margin:0;padding:0;border:none;font:inherit;cursor:pointer;}
/* Fixed size, so a negative margin centres it on the projected point. */
.cmap-marker{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.cmap-marker:hover{filter:brightness(1.15);}
.cmap-active{background:var(--success);}
.cmap-draft{background:var(--neutral-mid);}
.cmap-maintenance{background:var(--warn);}
.cmap-decommissioned,.cmap-other{background:var(--danger);}

/* Cluster bubbles, tinted by the worst status inside: amber = something in
   maintenance, grey = all draft, green = otherwise. */
/* Size is dynamic, so a fixed negative margin will not do. The `translate`
   property composes with the `transform` JS sets, shifting by half the
   element's own size to land the bubble on the projected point. */
/* Cluster bubbles carry dark ink: the ALVA greens and yellows are too bright
   to sit under white text. */
.cmap-cluster{display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-weight:700;font-size:13px;color:var(--text);border:2px solid #fff;
  box-shadow:0 2px 6px rgba(31,33,32,.3);translate:-50% -50%;}
.cmap-cluster-active{background:var(--success);}
.cmap-cluster-maint{background:var(--warn);}
.cmap-cluster-draft{background:#CFCFCF;} /* neutral.60 */

.cmap-zoom{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:2px;z-index:5;}
.cmap-zoom button{width:30px;height:30px;border:1px solid var(--border);background:var(--bg);
  color:var(--text);font-size:17px;line-height:1;cursor:pointer;border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(31,33,32,.2);font-family:inherit;}
.cmap-zoom button:hover{background:var(--accent-tint);border-color:var(--success);}

.cmap-attr{position:absolute;right:0;bottom:0;z-index:5;background:rgba(255,255,255,.85);
  font-size:11px;padding:2px 6px;border-top-left-radius:var(--radius-sm);color:var(--text-muted);}
.cmap-attr a{color:var(--link);}

.cmap-popup{position:absolute;z-index:6;min-width:190px;max-width:260px;background:var(--bg);
  border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:10px 26px 10px 12px;font-size:13px;line-height:1.45;pointer-events:auto;}
.cmap-popup strong{display:block;margin-bottom:3px;}
.cmap-popup .muted{display:block;color:var(--text-muted);font-size:12px;}
.cmap-popup-x{position:absolute;top:4px;right:6px;border:none;background:none;cursor:pointer;
  font-size:16px;line-height:1;color:var(--text-muted);padding:2px;}
.cmap-popup-x:hover{color:var(--text);}

/* ── JOIN TABLE ── */
.join-summary{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;}

@media (max-width:820px){
  .stats-row{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .main{padding:16px 12px 48px;}
}