/*
 * Global theme on top of Bootstrap 5.3.
 *
 * Bootstrap stays the framework: its grid, utilities and components are used
 * as they are, and this file re-themes them through Bootstrap's own CSS
 * variables for both colour modes (data-bs-theme="light" | "dark" on <html>).
 * On top of that come the instrument tokens the data pages use (--st-*), the
 * app shell (top bar, bottom tab bar) and a few type utilities.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root,
[data-bs-theme="light"] {
    --app-bg: #f4f4f1;
    --app-surface: #ffffff;
    --app-surface-2: #eef0f1;
    --app-field: #ffffff;
    --app-line: rgba(20, 20, 19, 0.12);
    --app-rule: rgba(20, 20, 19, 0.08);
    --app-ink: #18181a;
    --app-ink-soft: #5b5c62;
    --app-ink-faint: #85868c;
    --app-accent: #1668e3;
    --app-accent-rgb: 22, 104, 227;
    --app-accent-hover: #1256bd;
    --app-on-accent: #ffffff;
    --app-warn: #b93f0b;
    --app-ok: #0f766e;
    --app-danger: #be123c;
    --app-shadow-color: rgba(20, 20, 19, 0.06);
    --app-shadow: 0 1px 2px rgba(20, 20, 19, 0.05), 0 6px 20px rgba(20, 20, 19, 0.04);

    /* Instrument series, validated for colour-vision deficiency per mode. */
    --st-s1: #1668e3;
    --st-s2: #c2410c;
    --st-s3: #0d9488;
    --st-s4: #7c3aed;
    --st-s5: #be123c;
    --st-d1: #e8effc;
    --st-d2: #c2d6f7;
    --st-d3: #8fb4ee;
    --st-d4: #5a8ee0;
    --st-d5: #2c63c4;
    --st-d6: #123a85;
    --st-tip-bg: #1d1d1f;
    --st-tip-ink: #ffffff;
    --st-tip-line: rgba(255, 255, 255, 0.16);
    --st-plot: color-mix(in srgb, var(--app-ink) 3%, transparent);
}

[data-bs-theme="dark"] {
    --app-bg: #101113;
    --app-surface: #18191c;
    --app-surface-2: #222328;
    --app-field: #1d1e22;
    --app-line: rgba(255, 255, 255, 0.12);
    --app-rule: rgba(255, 255, 255, 0.08);
    --app-ink: #f2f2f3;
    --app-ink-soft: #a6a7ad;
    --app-ink-faint: #75767c;
    --app-accent: #5b95f2;
    --app-accent-rgb: 91, 149, 242;
    --app-accent-hover: #7eabf5;
    --app-on-accent: #0b1220;
    --app-warn: #e8813f;
    --app-ok: #2bb3a0;
    --app-danger: #f0587c;
    --app-shadow-color: rgba(0, 0, 0, 0.4);
    --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --st-s1: #3e86f5;
    --st-s2: #de6b2a;
    --st-s3: #0fa894;
    --st-s4: #9b79f5;
    --st-s5: #eb4d74;
    --st-d1: #16304f;
    --st-d2: #1e4a7a;
    --st-d3: #2a67a6;
    --st-d4: #3d86ce;
    --st-d5: #6ba6e6;
    --st-d6: #a6cbf3;
    --st-tip-bg: #303034;
    --st-tip-ink: #f5f5f7;
    --st-tip-line: rgba(255, 255, 255, 0.22);
    --st-plot: color-mix(in srgb, var(--app-ink) 5%, transparent);
}

:root {
    --app-radius-sm: 10px;
    --app-radius-md: 12px;
    --app-radius-lg: 16px;
    --app-transition: 0.15s ease;
    --app-blur: 16px;
    --app-topbar-h: 60px;
    --app-tabbar-h: 64px;

    --st-display: 'Saira Condensed', 'Helvetica Neue', sans-serif;
    --st-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --st-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --st-ink: var(--app-ink);
    --st-ink-soft: var(--app-ink-soft);
    --st-ink-faint: color-mix(in srgb, var(--app-ink-soft) 55%, transparent);
    --st-rule: color-mix(in srgb, var(--app-ink-soft) 22%, transparent);
    --st-grid: color-mix(in srgb, var(--app-ink-soft) 14%, transparent);
}

/* ── Bootstrap, re-themed ────────────────────────────────────────────── */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--st-body);
    --bs-body-color: var(--app-ink);
    --bs-body-bg: var(--app-bg);
    --bs-emphasis-color: var(--app-ink);
    --bs-heading-color: var(--app-ink);
    --bs-secondary-color: var(--app-ink-soft);
    --bs-tertiary-color: var(--app-ink-faint);
    --bs-secondary-bg: var(--app-surface-2);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line);
    --bs-border-color-translucent: var(--app-line);
    --bs-border-radius: var(--app-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--app-radius-lg);
    --bs-border-radius-xl: 20px;
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: var(--app-accent-rgb);
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: var(--app-accent-rgb);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-decoration: none;
    --bs-focus-ring-color: rgba(var(--app-accent-rgb), 0.35);
    --bs-danger: var(--app-danger);
    --bs-warning: var(--app-warn);
    --bs-success: var(--app-ok);
}

body {
    background: var(--app-bg);
    color: var(--app-ink);
    font-family: var(--st-body);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--st-display); font-weight: 700; letter-spacing: -0.01em; }

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--app-radius-sm);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-sm { min-height: 34px; --bs-btn-padding-x: 0.75rem; }
.btn-lg { min-height: 52px; }

.btn-primary {
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
}

/* The neutral button of the app: a quiet outline on the surface. */
.btn-outline-secondary {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--app-line);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface-2);
    --bs-btn-hover-border-color: var(--app-ink-faint);
    --bs-btn-active-color: var(--app-ink);
    --bs-btn-active-bg: var(--app-surface-2);
    --bs-btn-active-border-color: var(--app-ink-faint);
}

.btn-outline-danger {
    --bs-btn-color: var(--app-danger);
    --bs-btn-border-color: var(--app-line);
    --bs-btn-hover-bg: var(--app-danger);
    --bs-btn-hover-border-color: var(--app-danger);
    --bs-btn-hover-color: #ffffff;
}

.btn-icon { width: 44px; padding: 0; }
.btn-sm.btn-icon { width: 34px; }

.form-control,
.form-select {
    min-height: 44px;
    background-color: var(--app-field);
    border-color: var(--app-line);
    color: var(--app-ink);
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--app-field);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-label,
.control-label {
    font-family: var(--st-data);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-ink-soft);
    margin-bottom: 6px;
}

.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.invalid-feedback, .help-block-error { color: var(--app-danger); }
.has-error .form-control, .is-invalid { border-color: var(--app-danger) !important; }

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-line);
    --bs-card-border-radius: var(--app-radius-lg);
    --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--app-shadow);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-ink);
    --bs-table-border-color: var(--app-rule);
    --bs-table-hover-bg: var(--app-surface-2);
    --bs-table-hover-color: var(--app-ink);
    --bs-table-striped-bg: var(--app-surface-2);
}

.table > thead th {
    font-family: var(--st-data);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-ink-soft);
    white-space: nowrap;
}

.table > thead th a { color: inherit; }
.table-num { font-family: var(--st-data); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.pagination {
    --bs-pagination-color: var(--app-ink);
    --bs-pagination-bg: var(--app-surface);
    --bs-pagination-border-color: var(--app-line);
    --bs-pagination-hover-color: var(--app-ink);
    --bs-pagination-hover-bg: var(--app-surface-2);
    --bs-pagination-hover-border-color: var(--app-line);
    --bs-pagination-active-color: var(--app-on-accent);
    --bs-pagination-active-bg: var(--app-accent);
    --bs-pagination-active-border-color: var(--app-accent);
    --bs-pagination-disabled-color: var(--app-ink-faint);
    --bs-pagination-disabled-bg: var(--app-surface);
    --bs-pagination-disabled-border-color: var(--app-line);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    flex-wrap: wrap;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--app-line);
    --bs-nav-tabs-link-active-color: var(--app-ink);
    --bs-nav-tabs-link-active-bg: var(--app-surface);
    --bs-nav-tabs-link-active-border-color: var(--app-line) var(--app-line) var(--app-surface);
    --bs-nav-link-color: var(--app-ink-soft);
    --bs-nav-link-hover-color: var(--app-ink);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-tabs .nav-link { white-space: nowrap; font-weight: 500; }

.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface);
    --bs-dropdown-border-color: var(--app-line);
    --bs-dropdown-link-color: var(--app-ink);
    --bs-dropdown-link-hover-color: var(--app-ink);
    --bs-dropdown-link-hover-bg: var(--app-surface-2);
    --bs-dropdown-link-active-bg: var(--app-accent);
    --bs-dropdown-border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow);
}

.offcanvas {
    --bs-offcanvas-bg: var(--app-surface);
    --bs-offcanvas-color: var(--app-ink);
    --bs-offcanvas-border-color: var(--app-line);
}

.offcanvas-bottom {
    height: auto;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
}

.alert { border-radius: var(--app-radius-md); }
.badge { font-family: var(--st-data); font-weight: 500; letter-spacing: 0.04em; }
.list-group {
    --bs-list-group-bg: var(--app-surface);
    --bs-list-group-color: var(--app-ink);
    --bs-list-group-border-color: var(--app-rule);
    --bs-list-group-action-hover-bg: var(--app-surface-2);
    --bs-list-group-action-color: var(--app-ink);
}

/* ── Type utilities ──────────────────────────────────────────────────── */

.t-display { font-family: var(--st-display); font-weight: 700; letter-spacing: -0.01em; line-height: 0.95; }
.t-label {
    font-family: var(--st-data);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-ink-soft);
}
.t-mono { font-family: var(--st-data); font-variant-numeric: tabular-nums; }
.t-num { font-family: var(--st-display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-unit { font-family: var(--st-data); font-size: 0.42em; font-weight: 400; letter-spacing: 0.06em; color: var(--app-ink-soft); margin-left: 5px; }
.text-soft { color: var(--app-ink-soft) !important; }
.text-ok { color: var(--app-ok) !important; }
.text-warn { color: var(--app-warn) !important; }
.text-danger { color: var(--app-danger) !important; }
/* A flex child that may shrink below its content, so long names wrap instead of pushing the row wide. */
.min-w-0 { min-width: 0; }

/* Tracker state: úton / parkol / online / offline. */
.status-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--st-data);
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--app-ink-soft);
}
.status-pill--moving { color: var(--app-accent); }
.status-pill--active, .status-pill--parked { color: var(--app-ok); }
.status-pill--idle { color: var(--app-warn); }

.instrument {
    font-family: var(--st-body);
    color: var(--app-ink);
}

/* ── Page header, used by every page ─────────────────────────────────── */

.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 14px 24px;
    /* A field wider than a phone must not make the page slide sideways. */
    overflow-x: clip;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.page-title { font-size: 34px; margin: 4px 0 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pane-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--app-rule);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    overflow: hidden;
}

.pane-rail > div { background: var(--app-surface); padding: 12px 14px; min-width: 0; }
.pane-rail dt { margin: 0 0 6px; }
.pane-rail dd { margin: 0; font-size: 28px; line-height: 0.95; }

@media (min-width: 768px) {
    .page { padding: 28px 32px 40px; }
    .page-title { font-size: 44px; }
    .pane-rail-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pane-rail > div { padding: 16px 20px; }
    .pane-rail dd { font-size: 34px; }
}

/* ── App shell: top bar and, on phones, a bottom tab bar ─────────────── */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--app-topbar-h);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 14px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-line);
}

.app-brand {
    font-family: var(--st-display);
    font-size: 23px;
    font-weight: 700;
    color: var(--app-ink);
    white-space: nowrap;
}

.app-brand:hover { color: var(--app-ink); text-decoration: none; }

.app-nav { display: none; gap: 2px; flex-grow: 1; }

.app-nav a {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--app-ink-soft);
    white-space: nowrap;
}

.app-nav a:hover { color: var(--app-ink); background: var(--app-surface-2); text-decoration: none; }
.app-nav a.active { color: var(--app-ink); background: var(--app-surface-2); font-weight: 600; }

.app-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.app-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--app-accent);
    color: var(--app-on-accent);
    font-family: var(--st-display);
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-user { display: inline-flex; align-items: center; gap: 8px; color: var(--app-ink-soft); background: none; border: 0; min-height: 44px; }
.app-user-name { display: none; }

.app-main { padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 8px); }

.app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    height: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
    padding: 4px 6px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--app-surface);
    border-top: 1px solid var(--app-line);
}

.app-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    font-size: 11px;
    color: var(--app-ink-soft);
    background: none;
    border: 0;
    white-space: nowrap;
}

.app-tab i { font-size: 19px; }
.app-tab:hover { color: var(--app-ink); text-decoration: none; }
.app-tab.active { color: var(--app-accent); font-weight: 600; }

.app-more .list-group-item { display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 16px; }
.app-more .list-group-item i { width: 20px; text-align: center; color: var(--app-ink-soft); }

.app-flash { max-width: 1280px; margin: 12px auto 0; padding: 0 14px; }

@media (min-width: 768px) {
    .app-topbar { padding: 0 24px; }
    .app-flash { padding: 0 32px; }
}

@media (min-width: 992px) {
    .app-nav { display: flex; }
    .app-tabbar { display: none; }
    .app-main { padding-bottom: 0; }
    .app-user-name { display: inline; }
}

/* Guest pages (belépés, regisztráció): one narrow card under the brand mark. */
.login-page { max-width: 440px; padding-top: 48px; }
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent);
    color: var(--app-on-accent);
    font-size: 24px;
}
@media (min-width: 768px) { .login-page { padding-top: 96px; } }

/* Guest pages have no navigation at all. */
.app-guest .app-main { padding-bottom: 0; }

/* ── Maps in dark mode: darken the light OSM tiles instead of a second tile set ── */

[data-bs-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.85) saturate(0.6);
}

[data-bs-theme="dark"] .leaflet-container { background: #1b1c20; }

.leaflet-container { font-family: var(--st-body); }

.leaflet-control-zoom a,
.leaflet-bar a {
    background: var(--app-surface) !important;
    color: var(--app-ink) !important;
    border-color: var(--app-line) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--app-surface);
    color: var(--app-ink);
}

.leaflet-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--app-surface) 80%, transparent);
    color: var(--app-ink-soft);
}

/* ── Toasts from ui.js ───────────────────────────────────────────────── */

.app-toasts { position: fixed; right: 16px; bottom: calc(var(--app-tabbar-h) + 16px); z-index: 1090; }
@media (min-width: 992px) { .app-toasts { bottom: 16px; } }