:root {
    --bg: #eef1f8;
    --surface: #ffffff;
    --surface-2: #f8fafd;
    --border: #e6eaf2;
    --border-strong: #d6dcea;
    --text: #0f1729;
    --muted: #6b7790;
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-grad: linear-gradient(135deg, #2f6bff 0%, #4f46e5 100%);
    --available: #16a34a;
    --charging: #2563eb;
    --faulted: #dc2626;
    --unknown: #d97706;
    --shadow: 0 1px 2px rgba(20, 30, 55, .05), 0 12px 32px rgba(20, 30, 55, .08);
    --shadow-lg: 0 18px 50px rgba(20, 30, 55, .16);
    --ring: 0 0 0 4px rgba(37, 99, 235, .15);
    --radius: 18px;
    --radius-sm: 11px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background:
        radial-gradient(1150px 520px at 82% -160px, rgba(79, 70, 229, .12), transparent 62%),
        radial-gradient(950px 460px at -8% -110px, rgba(37, 99, 235, .11), transparent 58%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}
/* thin brand accent line along the very top */
body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30;
    background: var(--brand-grad);
}

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.6rem;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(20, 30, 55, .04), 0 8px 24px -18px rgba(20, 30, 55, .35);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .85rem; }
.brand-mark {
    width: 44px; height: 44px;
    border-radius: 13px; object-fit: cover; display: block;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .42);
}
.brand h1 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.sub { color: var(--muted); font-size: .8rem; font-weight: 500; }

.topbar-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.freshness { font-size: .8rem; color: var(--muted); font-weight: 600; }

/* agent self-monitoring pill */
.agent-health { font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.agent-health:empty { display: none; }
.agent-health.ok { background: #e7f6ec; color: #15803d; }
.agent-health.warn { background: #fdf2e3; color: #b45309; }
.agent-health.down { background: #fdeaea; color: #dc2626; }
.source-badge {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: .2rem .5rem; border-radius: 999px;
    background: #eef2ff; color: var(--brand);
}
.source-badge.csv { background: #fef3c7; color: #b45309; }

.auto-toggle { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.auto-toggle input { accent-color: var(--brand); }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit; font-size: .82rem; font-weight: 600;
    padding: .5rem .85rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: #f7f9fc; border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .30); }
.btn-primary:hover { filter: brightness(1.06); border-color: transparent; }
.btn-ghost { background: transparent; box-shadow: none; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.btn-wall { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .30); }
.btn-wall:hover { filter: brightness(1.06); color: #fff; }
/* compact icon-only button (e.g. logout) */
.icon-btn { padding: .5rem .58rem; line-height: 0; color: var(--muted); }
.icon-btn svg { display: block; }
.icon-btn:hover { color: var(--faulted); border-color: var(--border-strong); background: #fdf3f3; }

/* ---------- Cards ---------- */
main { padding: 1.5rem; max-width: 1500px; margin: 0 auto; }
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.card {
    font-family: inherit; text-align: left; cursor: pointer; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.2rem 1.35rem;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: .35rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--muted);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card.active { border-color: var(--brand); box-shadow: var(--shadow), var(--ring); }
.card-label { font-size: .76rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.card-value { font-size: 2.3rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.card.available::before { background: linear-gradient(90deg, #16a34a, #4ade80); }
.card.available .card-value { color: var(--available); }
.card.available:hover { box-shadow: 0 16px 36px rgba(22, 163, 74, .20); }
.card.charging::before { background: linear-gradient(90deg, #2563eb, #6366f1); }
.card.charging .card-value { color: var(--charging); }
.card.charging:hover { box-shadow: 0 16px 36px rgba(37, 99, 235, .22); }
.card.faulted::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.card.faulted .card-value { color: var(--faulted); }
.card.faulted:hover { box-shadow: 0 16px 36px rgba(220, 38, 38, .20); }
.card.unknown::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.card.unknown .card-value { color: var(--unknown); }
.card.unknown:hover { box-shadow: 0 16px 36px rgba(217, 119, 6, .20); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
#search, #lt-search, #failed-search {
    flex: 1; max-width: 460px; min-width: 200px; font-family: inherit; font-size: .9rem;
    -webkit-appearance: none; appearance: none;
    padding: .72rem 1rem .72rem 2.55rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 12px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7790' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: .9rem center;
    box-shadow: var(--shadow);
    transition: border-color .15s, box-shadow .15s;
}
#search::placeholder, #lt-search::placeholder, #failed-search::placeholder { color: var(--muted); }
#search:focus, #lt-search:focus, #failed-search:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
#search::-webkit-search-cancel-button, #lt-search::-webkit-search-cancel-button, #failed-search::-webkit-search-cancel-button { cursor: pointer; }
.result-count { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ---------- Table ---------- */
.table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); font-weight: 700;
    padding: .95rem 1.1rem; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fb 100%); position: sticky; top: 0;
}
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--brand); }
th.sorted-asc::after { content: " ▲"; font-size: .7em; }
th.sorted-desc::after { content: " ▼"; font-size: .7em; }
tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid #f1f3f8; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f3f8ff; }
tbody tr.muted-row { opacity: .45; }

/* Sl No (row-number) column — narrow, muted, not sortable */
.slno { width: 1%; white-space: nowrap; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
td.slno { font-size: .82rem; font-weight: 600; }

.cpid { font-weight: 700; font-variant-numeric: tabular-nums; }
.loc { color: var(--muted); max-width: 320px; }
.heartbeat { white-space: nowrap; font-variant-numeric: tabular-nums; }
.heartbeat small { display: block; color: var(--muted); font-size: .72rem; }
.empty { text-align: center; color: var(--muted); padding: 2.5rem !important; }

/* Status pill */
.pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .76rem; font-weight: 700; padding: .28rem .65rem; border-radius: 999px;
    white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.available { color: var(--available); background: #e7f6ec; }
.pill.charging { color: var(--charging); background: #e7effe; }
.pill.faulted { color: var(--faulted); background: #fdeaea; }
.pill.unknown { color: var(--unknown); background: #fdf2e3; }
.fault-reason { display: block; margin-top: 3px; font-size: .72rem; font-weight: 600; color: var(--faulted); }
.faulted-since { display: block; margin-top: 2px; font-size: .68rem; font-weight: 500; color: var(--muted); }

.mute-btn {
    font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    padding: .25rem .55rem; border-radius: 8px;
}
.mute-btn:hover { border-color: var(--faulted); color: var(--faulted); }
.mute-btn.muted { color: var(--available); border-color: var(--available); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.6rem; width: 440px; max-width: 94vw; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.modal-head h2 { font-size: 1.1rem; }
.close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); line-height: 1; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field input { font-family: inherit; font-size: .9rem; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 11px; transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.modal-actions { display: flex; gap: .7rem; margin-top: .5rem; }
.modal-actions .btn { flex: 1; }
.modal-note { margin-top: .8rem; font-size: .8rem; color: var(--muted); min-height: 1em; }

/* ---------- Toast ---------- */
.toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    background: #1a2233; color: #fff; padding: .7rem 1.2rem; border-radius: 10px;
    font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); z-index: 60;
}
.toast[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .loc { max-width: 180px; } }

/* ============ Mobile (≤640px): tables become stacked cards ============ */
@media (max-width: 640px) {
    main { padding: 1rem .9rem 5rem; }
    .topbar { padding: .7rem 1rem; }
    .brand-mark { width: 38px; height: 38px; font-size: 1.2rem; }
    .brand h1 { font-size: .98rem; }
    .topbar-actions { width: 100%; gap: .4rem; }
    .topbar-actions .btn { padding: .45rem .65rem; font-size: .78rem; }
    .freshness, .agent-health { font-size: .72rem; }

    .tabs { position: static; padding: 0 .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { padding: .8rem .85rem; font-size: .9rem; white-space: nowrap; }

    .cards { grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1rem; }
    .card { padding: .8rem .9rem; }
    .card-value { font-size: 1.65rem; }
    .alert-strip { gap: .65rem; }
    .alert-card { flex: 1; padding: .6rem .8rem; }

    .toolbar { flex-wrap: wrap; gap: .6rem; }
    .view-toggle { width: 100%; }
    .vt-btn { flex: 1; text-align: center; }
    #search, #lt-search { max-width: none; width: 100%; }
    .result-count { width: 100%; }

    /* tables -> stacked cards */
    .table-wrap { background: transparent; border: none; box-shadow: none; overflow: visible; }
    table, tbody, tr, td { display: block; width: 100%; }
    thead { display: none; }
    tbody tr {
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); margin-bottom: .7rem; padding: .3rem .25rem; transition: none;
    }
    tbody tr:hover { background: var(--surface); }
    tbody tr.muted-row { opacity: .55; }
    tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: .5rem .9rem; border: none; text-align: right;
    }
    tbody td::before {
        content: attr(data-label); flex: 0 0 auto; text-align: left;
        font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    }
    td.hide-sm { display: flex !important; }
    tbody td:empty { display: none; }
    .loc { max-width: none; }
    .heartbeat small { display: inline; }

    /* report controls + filter bar stack cleanly */
    .rc-row { flex-direction: column; align-items: stretch; }
    .rc-field { width: 100%; }
    .rc-actions { flex-direction: row; }
    .range-presets { width: 100%; }
    .filterbar { gap: .6rem .8rem; }
}

/* ---------- Tabs ---------- */
.tabs {
    display: flex; gap: .15rem; padding: 0 1.6rem;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 62px; z-index: 15;
}
.tab {
    position: relative;
    font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    padding: .95rem 1.2rem; border: none; background: none; color: var(--muted);
    margin-bottom: -1px; border-radius: 9px 9px 0 0;
    transition: color .15s, background .15s;
}
.tab:hover { color: var(--text); background: rgba(37, 99, 235, .06); }
.tab.active { color: var(--brand); font-weight: 700; }
.tab.active::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--brand-grad);
}

/* ---------- View toggle ---------- */
.view-toggle { display: inline-flex; background: #e9edf6; border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.vt-btn {
    font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    border: none; background: none; color: var(--muted); padding: .45rem .9rem; border-radius: 9px;
    transition: background .15s, color .15s, box-shadow .15s;
}
.vt-btn:hover { color: var(--text); }
.vt-btn span { opacity: .65; font-weight: 700; }
.vt-btn.active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(20,30,55,.06), 0 4px 10px rgba(20,30,55,.08); }
.vt-btn.active span { opacity: .8; }

/* connector id / sub cells */
.mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.sub-muted { color: var(--muted); font-size: .82rem; }

/* ---------- Report controls ---------- */
.report-controls {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.2rem; margin-bottom: 1.2rem;
}
.rc-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.rc-row + .rc-row { margin-top: 1rem; }
.rc-field { display: flex; flex-direction: column; gap: .35rem; }
.rc-field > label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rc-field input, .rc-field select {
    font-family: inherit; font-size: .88rem; padding: .6rem .8rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.rc-field input:focus, .rc-field select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.rc-actions { flex-direction: row; gap: .5rem; }
.range-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.rp-btn {
    font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    padding: .45rem .75rem; border-radius: 999px;
}
.rp-btn:hover { background: #f7f9fc; }
.rp-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.rc-note { margin-top: .8rem; font-size: .82rem; color: var(--muted); min-height: 1em; }

.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Uptime bar (in report table) ---------- */
.uptime-cell { min-width: 160px; }
.uptime-bar { height: 8px; border-radius: 5px; background: #eef1f7; overflow: hidden; display: flex; }
.uptime-bar > span { height: 100%; }
.uptime-bar .seg-up { background: var(--available); }
.uptime-bar .seg-busy { background: var(--charging); }
.uptime-bar .seg-down { background: var(--faulted); }
.uptime-bar .seg-unknown { background: var(--unknown); }
.uptime-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Idle (no-transaction) badges ---------- */
.idle-badge {
    display: inline-block; font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 6px; margin-left: .45rem; white-space: nowrap;
}
.idle-warn  { background: #fdf2e3; color: #b45309; }  /* >24h */
.idle-warn2 { background: #fde4cf; color: #c2410c; }  /* >48h */
.idle-crit  { background: #fdeaea; color: #dc2626; }  /* >72h */
.idle-never { background: #eceff3; color: #475569; }  /* never */

/* Status Time badge — colour escalates with how long a unit has been down */
.st { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem;
      border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-ok { background: #e7f6ec; color: #15803d; }   /* active -> 0 */
.st-na { background: #eceff3; color: #475569; }   /* no timestamp */
.st-1  { background: #eef6ff; color: #1d4ed8; }   /* < 1h */
.st-2  { background: #fdf2e3; color: #b45309; }   /* 1–6h */
.st-3  { background: #fde4cf; color: #c2410c; }   /* 6–24h */
.st-4  { background: #fdeaea; color: #dc2626; }   /* > 24h */

/* Charging-issue detail modal */
.fi-sec { margin-top: 1rem; }
.fi-sec:first-child { margin-top: 0; }
.fi-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem; }
.fi-row { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; border-bottom: 1px solid #f1f3f8; font-size: .9rem; }
.fi-row:last-child { border-bottom: none; }
.fi-k { color: var(--muted); white-space: nowrap; }
.fi-v { text-align: right; word-break: break-word; }

/* Charging-issue type tags */
.itag { display: inline-block; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; white-space: nowrap; }
.it-repeat { background: #fdeaea; color: #dc2626; }   /* repeated tries — red */
.it-conn   { background: #fde4cf; color: #c2410c; }   /* connector down — orange */
.it-stuck  { background: #fdf2e3; color: #b45309; }   /* stuck session — amber */
.it-fault  { background: #f3e8ff; color: #7c3aed; }   /* hardware fault — purple */

/* ---------- Alert KPI strip (Live tab) ---------- */
.alert-strip { display: flex; gap: 1rem; margin: -0.6rem 0 1.4rem; flex-wrap: wrap; }
.alert-card {
    display: flex; align-items: center; gap: .9rem;
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted);
    border-radius: 12px; padding: .7rem 1.1rem; box-shadow: var(--shadow);
}
.alert-card.warn { border-left-color: var(--unknown); }
.alert-card.crit { border-left-color: var(--faulted); }
.ac-label { font-size: .76rem; color: var(--muted); font-weight: 600; line-height: 1.2; }
.ac-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.alert-card.warn .ac-value { color: var(--unknown); }
.alert-card.crit .ac-value { color: var(--faulted); }

/* ---------- Last Transaction note ---------- */
.lt-note {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: .85rem 1.1rem; margin-bottom: 1.1rem; font-size: .85rem; color: var(--muted);
    box-shadow: var(--shadow); line-height: 1.45;
}
.lt-note b { color: var(--text); }

/* ---------- Filter bar ---------- */
.filterbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: .6rem .9rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.filterbar:empty { display: none; }
.fb-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fb-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fb-chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 500; cursor: pointer; }
.fb-chk input { accent-color: var(--brand); }
.filterbar select {
    font-family: inherit; font-size: .82rem; font-weight: 500; padding: .42rem .65rem;
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.filterbar select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.fb-clear { font-family: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--brand); }
.fb-clear:hover { text-decoration: underline; }
.fb-sep { width: 1px; align-self: stretch; background: var(--border); }

/* ---------- Floating download button ---------- */
.export-fab {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
    font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
    padding: .85rem 1.3rem; border-radius: 999px; border: none;
    background: var(--brand-grad); color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .4);
    transition: transform .1s, filter .15s, box-shadow .15s;
}
.export-fab:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(37, 99, 235, .5); }
.export-fab:active { transform: translateY(1px); }
.export-fab[hidden] { display: none; }
@media (max-width: 620px) { .export-fab { right: 1rem; bottom: 1rem; padding: .7rem 1rem; font-size: .82rem; } }

/* ================= Ticket Portal integration ================= */

/* 🎫 open-ticket badge (Live tab, next to the charger name) */
.ticket-badge {
    display: inline-block; font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 6px; margin-left: .45rem; white-space: nowrap;
    background: #eef2ff; color: var(--brand); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .16);
    font-variant-numeric: tabular-nums; cursor: default;
    transition: background .15s;
}
.ticket-badge:hover { background: #e3eafd; }

/* "Needs ticket" recommendation panel (amber, collapsible) */
.ticket-panel {
    background: #fff8ec; border: 1px solid #f1dcae; border-left: 4px solid var(--unknown);
    border-radius: 12px; margin: -0.4rem 0 1.4rem; box-shadow: var(--shadow); overflow: hidden;
}
.tp-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-family: inherit; font-size: .88rem; font-weight: 600; color: #92400e;
    background: none; border: none; cursor: pointer; padding: .75rem 1.1rem; text-align: left;
    transition: background .15s;
}
.tp-head:hover { background: #fdf1d8; }
.tp-title b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-hint { display: inline-block; margin-left: .55rem; font-size: .74rem; font-weight: 500; color: #b45309; opacity: .85; }
.tp-caret { color: #b45309; font-size: .85rem; transition: transform .18s ease; display: inline-block; flex: 0 0 auto; }
.tp-body { border-top: 1px solid #f1dcae; max-height: 320px; overflow-y: auto; }
.tp-body[hidden] { display: none; }
.tp-row {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .55rem 1.1rem; border-bottom: 1px solid #f7ead0; font-size: .84rem;
    transition: background .12s;
}
.tp-row:last-child { border-bottom: none; }
.tp-row:hover { background: #fdf4e0; }
.tp-id { font-weight: 700; min-width: 88px; }
.tp-loc { color: var(--muted); flex: 1 1 170px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-stuck { font-weight: 700; color: #b45309; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-err { color: var(--faulted); font-size: .78rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-raise {
    font-family: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    border: 1px solid #ecc57f; border-radius: 8px; background: var(--surface); color: #b45309;
    padding: .35rem .7rem; margin-left: auto;
    transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.tp-raise:hover { background: var(--unknown); border-color: var(--unknown); color: #fff; }
.tp-raise:active { transform: translateY(1px); }

/* Toggle switch (admin automation settings) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider {
    position: absolute; inset: 0; border-radius: 999px; cursor: pointer;
    background: #d5dbe7; transition: background .18s;
}
.switch .slider::before {
    content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 30, 55, .3);
    transition: transform .18s;
}
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { box-shadow: var(--ring); }
.switch.sm { width: 34px; height: 19px; }
.switch.sm .slider::before { width: 13px; height: 13px; }
.switch.sm input:checked + .slider::before { transform: translateX(15px); }

/* Automation & Integration section (account modal) */
.auto-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .85rem .9rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; cursor: pointer; }
.sw-label b { font-size: .88rem; }
.sw-label small { display: block; color: var(--muted); font-size: .74rem; margin-top: .12rem; line-height: 1.35; }
.auto-buckets { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .25rem; }
.ab-row { display: flex; align-items: center; gap: .55rem; padding: .42rem 0; font-size: .84rem; flex-wrap: wrap; }
.ab-name { font-weight: 600; min-width: 86px; }
.ab-name.ab-wide { min-width: 0; }
.ab-after, .ab-unit { color: var(--muted); font-size: .78rem; }
.ab-min {
    width: 76px; font-family: inherit; font-size: .84rem; padding: .4rem .5rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.ab-email {
    flex: 1; min-width: 150px; font-family: inherit; font-size: .84rem; padding: .4rem .55rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.ab-min:focus, .ab-email:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* Activity log viewer (account modal) */
.al-toolbar { margin-left: auto; display: inline-flex; gap: .4rem; align-items: center; }
.al-filter {
    font-family: inherit; font-size: .74rem; font-weight: 600; padding: .28rem .45rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.al-wrap { border: 1px solid var(--border); border-radius: 12px; max-height: 280px; overflow: auto; background: var(--surface); }
.al-table { width: 100%; min-width: 430px; border-collapse: collapse; font-size: .78rem; }
.al-table th {
    position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    padding: .5rem .6rem; border-bottom: 1px solid var(--border);
}
.al-table td { padding: .45rem .6rem; border-bottom: 1px solid #f1f3f8; vertical-align: top; }
.al-table tr:last-child td { border-bottom: none; }
.al-time { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.al-email { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-details { color: var(--muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-app-chip { display: inline-block; font-size: .66rem; font-weight: 700; padding: .08rem .4rem; border-radius: 6px; background: #eef2f7; color: #56657a; }
.al-app-chip.mon { background: #e7effe; color: var(--brand); }
.al-app-chip.tkt { background: #f3e8ff; color: #7c3aed; }
/* keep the activity table a real table on mobile (the global stacked-card rules would break it) */
@media (max-width: 640px) {
    .al-table { display: table; }
    .al-table thead { display: table-header-group; }
    .al-table tbody { display: table-row-group; }
    .al-table tr { display: table-row; background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 0; }
    .al-table td { display: table-cell; text-align: left; }
    .al-table td::before { content: none; }
}

/* Per-user tab-access editor (admin users list) */
.perm-editor {
    flex: 1 1 100%; display: flex; align-items: center; gap: .6rem .8rem; flex-wrap: wrap;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: .45rem .65rem; margin-top: .25rem;
}
.perm-editor[hidden] { display: none; }
.pe-title { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pe-chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pe-chk input { accent-color: var(--brand); }
.pe-save { margin-left: auto; }