/* ots.css — "Vidinė Duomenų Bazė" identity overlay for OpenTAKServer-UI v1.7.5 (Mantine 9).
   Loaded from index.html AFTER the bundle CSS. Dark-only: asphalt / olive / maroon / gold.
   Tokens mirror ~/filebrowser-ui/src/index.css [data-theme="dark"]. No build step. */

:root, :root[data-mantine-color-scheme="dark"], :root[data-mantine-color-scheme="light"] {
  /* ---- identity tokens ---- */
  --ots-ground:#121211; --ots-panel:#1a1a19; --ots-subtle:#1e1e1c; --ots-hover:#242422;
  --ots-line:#2b2b29; --ots-line-strong:#3a3a37;
  --ots-ink:#e8e8e5; --ots-muted:#a0a09c; --ots-faint:#6a6a67;
  --ots-accent:#67802e; --ots-accent-hover:#5a7028; --ots-accent-soft:#2f3a17; --ots-accent-soft-hover:#3a4a1c;
  --ots-accent-text:#c5d68f; --ots-success:#8aa544;
  --ots-danger:#d67e93; --ots-danger-strong:#9c2140; --ots-danger-soft:#3a1620;
  --ots-gold:#fac80b; --ots-gold-soft:#322a0b;
  --ots-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ots-radius:8px; --ots-radius-lg:12px;

  /* ---- Mantine core tokens ---- */
  --mantine-color-scheme:dark;
  --mantine-color-body:var(--ots-ground);
  --mantine-color-text:var(--ots-ink);
  --mantine-color-bright:#ffffff;
  --mantine-color-default:var(--ots-panel);
  --mantine-color-default-hover:var(--ots-hover);
  --mantine-color-default-border:var(--ots-line);
  --mantine-color-default-color:var(--ots-ink);
  --mantine-color-dimmed:var(--ots-muted);
  --mantine-color-placeholder:#8a8a86;
  --mantine-color-anchor:var(--ots-success);
  --mantine-color-error:var(--ots-danger);
  --mantine-primary-color-filled:var(--ots-accent);
  --mantine-primary-color-filled-hover:var(--ots-accent-hover);
  --mantine-primary-color-light:var(--ots-accent-soft);
  --mantine-primary-color-light-hover:var(--ots-accent-soft-hover);
  --mantine-primary-color-light-color:var(--ots-accent-text);
  --mantine-primary-color-outline:var(--ots-accent);
  --mantine-primary-color-outline-hover:var(--ots-accent-soft);
  --mantine-primary-color-contrast:#ffffff;
  --mantine-primary-color-0:#f2f5e6; --mantine-primary-color-1:#e6ecd6; --mantine-primary-color-2:#c5d68f;
  --mantine-primary-color-3:#a9bf62; --mantine-primary-color-4:#8aa544; --mantine-primary-color-5:#769236;
  --mantine-primary-color-6:#67802e; --mantine-primary-color-7:#5a7028; --mantine-primary-color-8:#4a5c21; --mantine-primary-color-9:#2f3a17;
  /* the app's primaryColor is "blue" and charts/buttons reference blue-* directly → olive */
  --mantine-color-blue-0:#f2f5e6; --mantine-color-blue-1:#e6ecd6; --mantine-color-blue-2:#c5d68f; --mantine-color-blue-3:#a9bf62;
  --mantine-color-blue-4:#8aa544; --mantine-color-blue-5:#769236; --mantine-color-blue-6:#67802e; --mantine-color-blue-7:#5a7028;
  --mantine-color-blue-8:#4a5c21; --mantine-color-blue-9:#2f3a17;
  --mantine-color-blue-filled:var(--ots-accent); --mantine-color-blue-filled-hover:var(--ots-accent-hover);
  --mantine-color-blue-light:var(--ots-accent-soft); --mantine-color-blue-light-hover:var(--ots-accent-soft-hover);
  --mantine-color-blue-light-color:var(--ots-accent-text); --mantine-color-blue-outline:var(--ots-accent); --mantine-color-blue-outline-hover:var(--ots-accent-soft);
  --mantine-color-blue-text:var(--ots-accent-text);
  /* success = olive */
  --mantine-color-green-6:#8aa544; --mantine-color-green-7:#769236; --mantine-color-green-8:#67802e; --mantine-color-green-9:#8aa544;
  --mantine-color-green-filled:var(--ots-accent); --mantine-color-green-filled-hover:var(--ots-accent-hover);
  --mantine-color-green-light:var(--ots-accent-soft); --mantine-color-green-light-hover:var(--ots-accent-soft-hover);
  --mantine-color-green-light-color:var(--ots-accent-text); --mantine-color-green-outline:var(--ots-success); --mantine-color-green-text:var(--ots-success);
  --mantine-color-teal-filled:var(--ots-accent); --mantine-color-teal-light:var(--ots-accent-soft); --mantine-color-teal-light-color:var(--ots-accent-text);
  /* chart series need hue separation, not three greens */
  --mantine-color-teal-6:#c5d68f; --mantine-color-teal-7:#a9bf62;
  --mantine-color-indigo-6:#d67e93; --mantine-color-indigo-7:#b8657a;
  /* danger = maroon (the one safety signal) */
  --mantine-color-red-5:#d67e93; --mantine-color-red-6:#9c2140; --mantine-color-red-7:#86192f; --mantine-color-red-8:#6f1527; --mantine-color-red-9:#3a1620;
  --mantine-color-red-filled:var(--ots-danger-strong); --mantine-color-red-filled-hover:#86192f;
  --mantine-color-red-light:var(--ots-danger-soft); --mantine-color-red-light-hover:#4a1c28;
  --mantine-color-red-light-color:var(--ots-danger); --mantine-color-red-outline:var(--ots-danger); --mantine-color-red-text:var(--ots-danger);
  /* warnings stay neutral grey */
  --mantine-color-yellow-filled:var(--ots-line-strong); --mantine-color-yellow-light:var(--ots-hover); --mantine-color-yellow-light-color:var(--ots-muted);
  --mantine-color-orange-filled:var(--ots-line-strong); --mantine-color-orange-light:var(--ots-hover); --mantine-color-orange-light-color:var(--ots-muted);
  /* dark scale → asphalt panels (Mantine components use these in dark mode) */
  --mantine-color-dark-0:#e8e8e5; --mantine-color-dark-1:#c9c9c5; --mantine-color-dark-2:#a0a09c; --mantine-color-dark-3:#6a6a67;
  --mantine-color-dark-4:#2b2b29; --mantine-color-dark-5:#242422; --mantine-color-dark-6:#1a1a19; --mantine-color-dark-7:#1a1a19;
  --mantine-color-dark-8:#161615; --mantine-color-dark-9:#121211;
  --mantine-color-dark-filled:#242422; --mantine-color-dark-filled-hover:#2b2b29; --mantine-color-dark-light:#1e1e1c; --mantine-color-dark-light-color:#a0a09c;
  /* light-only greys the app hardcodes (gray.1 main bg, gray-3 borders) */
  --mantine-color-gray-0:#1e1e1c; --mantine-color-gray-1:#121211; --mantine-color-gray-2:#242422; --mantine-color-gray-3:#2b2b29;
  --mantine-color-gray-4:#3a3a37; --mantine-color-gray-5:#6a6a67; --mantine-color-gray-6:#a0a09c; --mantine-color-gray-7:#c9c9c5;
  --mantine-color-gray-8:#e8e8e5; --mantine-color-gray-9:#ffffff;
  --mantine-color-gray-filled:#3a3a37; --mantine-color-gray-light:#242422; --mantine-color-gray-light-color:#c9c9c5;
  /* type, radius, shadows */
  --mantine-font-family:var(--ots-font);
  --mantine-font-family-headings:var(--ots-font);
  --mantine-heading-font-weight:600;
  --mantine-radius-default:var(--ots-radius);
  --mantine-radius-xs:4px; --mantine-radius-sm:6px; --mantine-radius-md:8px; --mantine-radius-lg:12px; --mantine-radius-xl:16px;
  --mantine-shadow-xs:0 1px 2px rgba(0,0,0,.35); --mantine-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --mantine-shadow-md:0 2px 8px rgba(0,0,0,.35); --mantine-shadow-lg:0 8px 24px rgba(0,0,0,.45); --mantine-shadow-xl:0 12px 32px rgba(0,0,0,.5);
  /* mantine-datatable */
  --mantine-datatable-background-color-dark:var(--ots-panel); --mantine-datatable-background-color:var(--ots-panel);
  --mantine-datatable-border-color-dark:var(--ots-line); --mantine-datatable-border-color:var(--ots-line);
  --mantine-datatable-row-border-color-dark:var(--ots-line); --mantine-datatable-row-border-color:var(--ots-line);
  --mantine-datatable-row-background-color-dark:var(--ots-panel); --mantine-datatable-row-background-color:var(--ots-panel);
  --mantine-datatable-row-color-dark:var(--ots-ink); --mantine-datatable-row-color:var(--ots-ink);
  --mantine-datatable-color-dark:var(--ots-ink); --mantine-datatable-color:var(--ots-ink);
  --mantine-datatable-striped-color-dark:var(--ots-subtle); --mantine-datatable-striped-color:var(--ots-subtle);
  --mantine-datatable-highlight-on-hover-color-dark:var(--ots-hover); --mantine-datatable-highlight-on-hover-color:var(--ots-hover);
  --mantine-datatable-pagination-active-background-color-dark:var(--ots-accent); --mantine-datatable-pagination-active-background-color:var(--ots-accent);
  --mantine-datatable-pagination-active-text-color-dark:#fff; --mantine-datatable-pagination-active-text-color:#fff;
  --mantine-datatable-selection-color:var(--ots-accent-soft);
  color-scheme:dark;
}

html, body { background:var(--ots-ground) !important; color:var(--ots-ink); }
body { font-family:var(--ots-font); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
::selection { background:var(--ots-accent-soft); }
:focus-visible { outline:2px solid var(--ots-accent); outline-offset:2px; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--ots-faint); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-track { background:transparent; }

/* ---- App shell ---- */
.mantine-AppShell-root { --app-shell-navbar-width:272px !important; }
.mantine-AppShell-header {
  background:var(--ots-panel) !important; border-bottom:1px solid var(--ots-line) !important; padding-left:8px;
}
.mantine-AppShell-header .mantine-Group-root[style*="width"] { width:auto !important; }
.mantine-AppShell-header .mantine-Burger-root { --burger-color:var(--ots-muted) !important; }
.mantine-AppShell-header .mantine-Burger-root:hover { --burger-color:var(--ots-ink) !important; }
.mantine-AppShell-navbar {
  background:var(--ots-panel) !important; border-right:1px solid var(--ots-line) !important; padding:8px 8px 0 8px !important;
}
main.mantine-AppShell-main { background:var(--ots-ground) !important; }

/* ---- Brand block (injected by ots.js) ---- */
img.mantine-Image-root[src*="ots-logo"] { display:none !important; }
.ots-brand { display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--ots-ink); }
.ots-brand img { width:34px; height:34px; border-radius:8px; flex:none; display:block; }
.ots-brand .ots-brand-name { font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; }
.ots-brand .ots-brand-sub { font-size:11px; color:var(--ots-muted); line-height:1.15; }
.ots-brand--lg { flex-direction:column; gap:14px; text-align:center; margin:8px 0 22px; }
.ots-brand--lg img { width:72px; height:72px; border-radius:14px; }
.ots-brand--lg .ots-brand-name { font-size:22px; }
.ots-brand--lg .ots-brand-sub { font-size:13px; }

/* ---- Navigation ---- */
nav .mantine-NavLink-root {
  color:var(--ots-muted) !important; border-radius:var(--ots-radius) !important; padding:9px 12px !important;
  font-size:15px !important; font-weight:500 !important; transition:background-color .12s ease, color .12s ease !important;
  margin:1px 0;
}
nav .mantine-NavLink-root .tabler-icon, nav .mantine-NavLink-root svg { color:var(--ots-faint) !important; width:20px !important; height:20px !important; margin-right:2px; }
nav .mantine-NavLink-root:hover { background:var(--ots-hover) !important; color:var(--ots-ink) !important; }
nav .mantine-NavLink-root:hover .tabler-icon, nav .mantine-NavLink-root:hover svg { color:var(--ots-muted) !important; }
nav .mantine-NavLink-root[data-active] { background:var(--ots-accent-soft) !important; color:var(--ots-ink) !important; }
nav .mantine-NavLink-root[data-active] .tabler-icon, nav .mantine-NavLink-root[data-active] svg { color:var(--ots-accent-text) !important; }
nav .mantine-NavLink-children { padding-left:22px !important; border-left:1px solid var(--ots-line); margin-left:20px; }
nav .mantine-NavLink-children .mantine-NavLink-root { font-size:14px !important; padding:7px 10px !important; }
nav .mantine-NavLink-label { font-size:inherit !important; }
nav [class*="_footer_"] { border-top:1px solid var(--ots-line) !important; padding-top:8px !important; margin-top:8px !important; }
nav [class*="_header_"] { border-bottom:1px solid var(--ots-line) !important; }
nav .ots-hidden { display:none !important; }
/* language switch (injected) */
.ots-lang { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; color:var(--ots-muted); font-size:14px; }
.ots-lang .ots-seg { display:inline-flex; border:1px solid var(--ots-line); border-radius:8px; overflow:hidden; background:var(--ots-ground); }
.ots-lang .ots-seg button { appearance:none; border:0; background:transparent; color:var(--ots-muted); font:inherit; font-size:13px; font-weight:600; padding:4px 10px; cursor:pointer; }
.ots-lang .ots-seg button[aria-pressed="true"] { background:var(--ots-accent); color:#fff; }

/* ---- Surfaces ---- */
.mantine-Paper-root { background:var(--ots-panel) !important; border:1px solid var(--ots-line) !important; box-shadow:none !important; border-radius:var(--ots-radius-lg) !important; }
.mantine-Card-root { background:var(--ots-panel) !important; border-color:var(--ots-line) !important; }
.mantine-Divider-root { --divider-color:var(--ots-line) !important; border-color:var(--ots-line) !important; }
.mantine-Title-root { font-family:var(--ots-font) !important; font-weight:600 !important; letter-spacing:-.01em; color:var(--ots-ink); }
.mantine-Modal-content, .mantine-Modal-header, .mantine-Drawer-content, .mantine-Drawer-header, .mantine-Popover-dropdown, .mantine-Menu-dropdown, .mantine-Combobox-dropdown, .mantine-Select-dropdown {
  background:var(--ots-panel) !important; border-color:var(--ots-line) !important; color:var(--ots-ink);
}
.mantine-Modal-overlay, .mantine-Drawer-overlay { background:rgba(0,0,0,.6) !important; }
.mantine-Menu-item:hover, .mantine-Combobox-option:hover, .mantine-Combobox-option[data-combobox-selected] { background:var(--ots-hover) !important; }
.mantine-Notification-root { background:var(--ots-panel) !important; border:1px solid var(--ots-line) !important; }
.mantine-Tooltip-tooltip { background:var(--ots-hover) !important; color:var(--ots-ink) !important; border:1px solid var(--ots-line); }
.mantine-LoadingOverlay-overlay { background:rgba(18,18,17,.6) !important; }

/* ---- Controls ---- */
.mantine-Button-root { border-radius:var(--ots-radius) !important; font-weight:600 !important; font-family:var(--ots-font) !important; }
.mantine-Button-root[data-variant="default"], .mantine-ActionIcon-root[data-variant="default"] {
  background:var(--ots-panel) !important; border-color:var(--ots-line) !important; color:var(--ots-ink) !important;
}
.mantine-Button-root[data-variant="default"]:hover, .mantine-ActionIcon-root[data-variant="default"]:hover { background:var(--ots-hover) !important; }
.mantine-Input-input, .mantine-PinInput-input {
  background:var(--ots-ground) !important; border:1px solid var(--ots-line) !important; color:var(--ots-ink) !important; border-radius:var(--ots-radius) !important;
}
.mantine-Input-input:focus, .mantine-Input-input:focus-within, .mantine-PinInput-input:focus { border-color:var(--ots-accent) !important; box-shadow:0 0 0 2px var(--ots-accent-soft) !important; }
.mantine-Input-input::placeholder { color:#8a8a86 !important; opacity:1 !important; }   /* Firefox applies its own placeholder opacity */
.mantine-InputWrapper-label, .mantine-Checkbox-label, .mantine-Switch-label, .mantine-Radio-label { color:var(--ots-ink) !important; font-weight:500; }
.mantine-InputWrapper-required { color:var(--ots-danger) !important; }
.mantine-Checkbox-input { background:var(--ots-ground) !important; border-color:var(--ots-line-strong) !important; }
.mantine-Checkbox-input:checked { background:var(--ots-accent) !important; border-color:var(--ots-accent) !important; }
.mantine-Switch-track { background:var(--ots-line-strong) !important; border-color:var(--ots-line-strong) !important; }
.mantine-Switch-input:checked + .mantine-Switch-track { background:var(--ots-accent) !important; border-color:var(--ots-accent) !important; }
.mantine-Badge-root[data-variant="light"] { background:var(--ots-accent-soft) !important; color:var(--ots-accent-text) !important; border:1px solid transparent; font-weight:600; letter-spacing:.02em; }
.mantine-Anchor-root { color:var(--ots-success) !important; }
.mantine-Tabs-tab[data-active] { border-color:var(--ots-accent) !important; color:var(--ots-ink) !important; }
.mantine-Pagination-control[data-active] { background:var(--ots-accent) !important; border-color:var(--ots-accent) !important; }
.mantine-SegmentedControl-root { background:var(--ots-ground) !important; }
.mantine-SegmentedControl-indicator { background:var(--ots-hover) !important; box-shadow:none !important; }

/* ---- Tables (mantine-datatable + Table) ---- */
.mantine-Table-table, .mantine-Table-root { --table-border-color:var(--ots-line) !important; --table-hover-color:var(--ots-hover) !important; --table-striped-color:var(--ots-subtle) !important; }
.mantine-Table-th { color:var(--ots-muted) !important; font-weight:600 !important; font-size:13px !important; text-transform:none; }
.mantine-Table-td { color:var(--ots-ink); }
main a:not([class]), .mantine-Table-td a { color:var(--ots-accent-text) !important; }   /* plain anchors: no browser default purple */
[class*="mantine-datatable"] { background:var(--ots-panel) !important; }
.mantine-Table-thead { background:var(--ots-subtle) !important; }

/* ---- Leaflet map: dark chrome, natural tiles ---- */
.leaflet-container { background:var(--ots-ground) !important; font-family:var(--ots-font) !important; border-radius:var(--ots-radius-lg); }
.leaflet-bar { border:1px solid var(--ots-line) !important; box-shadow:0 2px 8px rgba(0,0,0,.4) !important; border-radius:8px !important; overflow:hidden; }
.leaflet-bar a, .leaflet-control-layers { background-color:var(--ots-panel) !important; color:var(--ots-ink) !important; border-bottom-color:var(--ots-line) !important; }
.leaflet-control-layers-toggle, .leaflet-control-zoom-fullscreen { background-color:var(--ots-panel) !important; filter:invert(1) hue-rotate(180deg); }   /* dark icon images → light */
.leaflet-control-layers-expanded { background-color:var(--ots-panel) !important; color:var(--ots-ink) !important; }
.leaflet-bar a:hover { background:var(--ots-hover) !important; }
.leaflet-control-attribution, .leaflet-control-scale-line { background:rgba(26,26,25,.85) !important; color:var(--ots-muted) !important; border-color:var(--ots-line) !important; }
.leaflet-control-attribution a { color:var(--ots-accent-text) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--ots-panel) !important; color:var(--ots-ink) !important; border:1px solid var(--ots-line); box-shadow:0 8px 24px rgba(0,0,0,.5) !important; }

/* ---- Embedded map window (iframe on the dashboard): chrome hidden ---- */
html.ots-embed .mantine-AppShell-header, html.ots-embed .mantine-AppShell-navbar { display:none !important; }
html.ots-embed main.mantine-AppShell-main { padding:0 !important; min-height:100vh !important; --app-shell-navbar-offset:0px !important; --app-shell-header-offset:0px !important; }
html.ots-embed .leaflet-container { border-radius:0 !important; height:100vh !important; }
html.ots-embed main .mantine-Paper-root { padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; }
html.ots-embed body { overflow:hidden; }
html.ots-embed .mantine-Notifications-root { display:none !important; }

/* ---- Dashboard: original server sections made compact ---- */
.ots main .mantine-ScrollArea-content > .mantine-Center-root .mantine-Title-root[class] { font-size:17px !important; color:var(--ots-muted); margin-bottom:12px !important; }
.ots main .mantine-Paper-root[style*="padding"] { padding:18px 20px !important; }
.ots main .mantine-Paper-root .mantine-Title-root { font-size:14px !important; color:var(--ots-muted) !important; font-weight:600 !important; }
.ots main .mantine-Paper-root .mantine-Text-root { font-size:13px !important; }
.ots main .mantine-Paper-root .mantine-Text-root[style*="green"] { color:var(--ots-ink) !important; font-weight:500 !important; }
.ots main .mantine-DonutChart-root { transform:scale(.72); transform-origin:center; margin:-22px 0; }   /* scale, don't resize: Recharts arcs are computed from the size prop */
.ots main .mantine-Paper-root .mantine-Flex-root { gap:4px; }

/* ---- Operational dashboard (injected by ots.js) ---- */
.ots-ops { padding:4px 4px 8px; margin-bottom:8px; font-family:var(--ots-font); color:var(--ots-ink); }
.ots-ops * { box-sizing:border-box; }
.ots-ops-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:2px 0 14px; }
.ots-ops-title { font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0; }
.ots-ops-stamp { font-size:12px; color:var(--ots-muted); }
.ots-ops-stamp b { color:var(--ots-ink); font-weight:500; }
.ots-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:12px; }
.ots-tile { display:block; background:var(--ots-panel); border:1px solid var(--ots-line); border-radius:var(--ots-radius-lg); padding:14px 16px 12px; text-decoration:none; color:inherit; min-width:0; transition:background-color .12s ease; }
.ots-tile:hover { background:var(--ots-hover); }
.ots-tile-label { font-size:12px; font-weight:600; color:var(--ots-muted); letter-spacing:.01em; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.ots-tile-value { font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.ots-tile-value small { font-size:14px; font-weight:500; color:var(--ots-muted); margin-left:4px; }
.ots-tile-sub { font-size:12px; color:var(--ots-muted); margin-top:8px; min-height:14px; }
.ots-tile--alert .ots-tile-value { color:var(--ots-danger); }
.ots-tile--ok .ots-tile-value { color:var(--ots-success); }
.ots-grid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr); gap:12px; align-items:stretch; }
@media (max-width: 1100px) { .ots-grid { grid-template-columns:1fr; } }
.ots-panel { background:var(--ots-panel); border:1px solid var(--ots-line); border-radius:var(--ots-radius-lg); min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.ots-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--ots-line); font-size:13px; font-weight:600; color:var(--ots-muted); }
.ots-panel-head a { color:var(--ots-accent-text); text-decoration:none; font-weight:500; font-size:12px; }
.ots-panel-head a:hover { text-decoration:underline; }
.ots-map { position:relative; }
.ots-map.ots-map--on { min-height:440px; }
.ots-map-frame { position:relative; flex:1; min-height:0; }
.ots-map--on .ots-map-frame { min-height:400px; }
.ots-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--ots-ground); }
.ots-map-ph { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px; }
.ots-map-ph p { margin:0; font-size:13px; color:var(--ots-muted); }
.ots-btn { min-height:44px; padding:0 16px; border-radius:var(--ots-radius); border:1px solid var(--ots-accent-soft);
  background:var(--ots-accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.ots-btn:hover { background:var(--ots-accent-hover); }
.ots-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ots-list { list-style:none; margin:0; padding:4px 0; max-height:300px; overflow:auto; }
.ots-list li { display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:13px; border-bottom:1px solid var(--ots-line); }
.ots-list li:last-child { border-bottom:0; }
.ots-list .ots-callsign { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ots-list .ots-meta { color:var(--ots-muted); font-size:12px; margin-left:auto; white-space:nowrap; }
.ots-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--ots-faint); box-shadow:0 0 0 2px var(--ots-panel); }
.ots-dot--on { background:var(--ots-success); }
.ots-dot--off { background:var(--ots-faint); }
.ots-dot--alert { background:var(--ots-danger); }
.ots-team { width:10px; height:10px; border-radius:3px; flex:none; border:1px solid rgba(255,255,255,.15); }
.ots-empty { padding:16px 14px; font-size:13px; color:var(--ots-muted); }
.ots-pills { display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px; }
.ots-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px; border:1px solid var(--ots-line); background:var(--ots-ground); font-size:12px; font-weight:600; color:var(--ots-muted); }
.ots-pill.on { color:var(--ots-ink); border-color:var(--ots-accent-soft); }
.ots-pill.off { color:var(--ots-danger); border-color:var(--ots-danger-soft); }

/* ---- Login page ---- */
html.ots-login body { background:var(--ots-ground) !important; }
html.ots-login #root > div, html.ots-login #root > div > div { background:var(--ots-ground) !important; }
html.ots-login header { background:var(--ots-panel) !important; border-bottom:1px solid var(--ots-line) !important; }
html.ots-login header .mantine-ActionIcon-root { display:none !important; }   /* light/dark toggle — theme is fixed */
html.ots-login .mantine-Container-root { padding-top:28px; }
html.ots-login .mantine-Container-root .mantine-Center-root > img { display:none !important; }
html.ots-login .mantine-Paper-root { padding:28px !important; }
html.ots-login .mantine-Button-root { border-radius:var(--ots-radius) !important; }

/* Motion: respect reduced motion */
@media (prefers-reduced-motion: reduce) { .ots *, .ots *::before, .ots *::after { animation:none !important; transition:none !important; } }

/* ============================================================================
   1.1.0 — audit fixes: failure states, touch layout, dark-theme gaps, de-branding
   ========================================================================== */

/* ---- stale and failed states (a zero under a fresh clock reads as "all quiet") ---- */
.ots-tile--stale .ots-tile-value { color:var(--ots-faint); }
.ots-tile--stale .ots-tile-sub { color:var(--ots-danger); }
.ots-ops-stamp.ots-stale { color:var(--ots-danger); }
.ots-ops-stamp.ots-stale b { color:var(--ots-danger); }
.ots-stamp-tail { color:inherit; }
.ots-session { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 12px;
  padding:11px 14px; border-radius:var(--ots-radius-lg);
  background:var(--ots-danger-soft); border:1px solid var(--ots-danger-strong); font-size:14px; }
.ots-session a { color:var(--ots-ink); font-weight:600; text-decoration:underline; }
.ots-more { justify-content:flex-end; }
.ots-more a { color:var(--ots-accent-text); text-decoration:none; font-size:12px; font-weight:600; }
.ots-more a:hover { text-decoration:underline; }

/* one toast for the failures the app swallows in ~60 malformed catch blocks */
.ots-toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 14px);
  z-index:10000; max-width:min(92vw, 460px); padding:12px 16px; border-radius:var(--ots-radius-lg);
  background:var(--ots-panel); border:1px solid var(--ots-danger-strong); color:var(--ots-ink);
  font-size:14px; box-shadow:0 10px 30px rgb(0 0 0 / .55);
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.ots-toast.on { opacity:1; transform:translate(-50%, 0); }

/* screen-reader-only: status and team exist only as hover titles upstream */
.ots-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap; }

/* ---- touch and small screens ---- */
/* devices and alerts before the map once the grid collapses */
@media (max-width: 1100px) {
  .ots-grid > .ots-side { order:0; }
  .ots-grid > .ots-map { order:1; }
}
@media (max-width: 640px) {
  .ots-tiles { gap:8px; }
  .ots-tile { padding:10px 12px 9px; }
  .ots-tile-value { font-size:22px; }
  .ots-tile-sub { font-size:11px; margin-top:5px; min-height:0; }
}
/* the stock Server Status / Server Details rows are nowrap flex from 576px up and
   demand ~864px inside 464px on a tablet */
@media (max-width: 1200px) {
  .ots main .mantine-ScrollArea-content > .mantine-Center-root > .mantine-Flex-root {
    flex-wrap:wrap !important; justify-content:center !important; gap:12px !important;
  }
  .ots main .mantine-ScrollArea-content > .mantine-Center-root > .mantine-Flex-root > .mantine-Paper-root {
    margin:0 !important;
  }
}
/* ScrollArea hides its scrollbar until hover, which never happens on touch */
.ots main .mantine-ScrollArea-scrollbar { opacity:1 !important; }

/* ---- dark-theme gaps ---- */
/* 2FA manual-entry key: upstream paints bg="white" + c="black" inline, which the
   overlay's dark Paper turned into black on near-black */
.ots .mantine-Paper-root[style*="white"] { background:var(--ots-subtle) !important; }
.ots .mantine-Paper-root .mantine-Text-root[style*="black"] {
  color:var(--ots-ink) !important; font-size:16px !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing:.06em; word-break:break-all; user-select:all;
}
/* tabler icons take the colour keyword straight onto the SVG stroke, bypassing tokens.
   red here is always a benign "false", so it maps to muted; maroon stays for real alarms. */
svg.tabler-icon[stroke="green"], svg.tabler-icon[fill="green"] { stroke:var(--ots-success) !important; }
svg.tabler-icon[fill="green"] { fill:var(--ots-success) !important; }
svg.tabler-icon[stroke="red"], svg.tabler-icon[fill="red"] { stroke:var(--ots-muted) !important; }
svg.tabler-icon[fill="red"] { fill:var(--ots-muted) !important; }

/* ---- navigation: de-brand and quiet controls ---- */
nav .mantine-NavLink-root:has(.tabler-icon-brand-discord),
nav .mantine-NavLink-root:has(.tabler-icon-brand-github),
nav .mantine-NavLink-root[href="/link_account"] { display:none !important; }
.ots-lang--quiet { color:var(--ots-faint); }
.ots-lang--quiet .ots-seg button[aria-pressed="true"] { background:var(--ots-hover); color:var(--ots-ink); }
.ots-sound .ots-seg button[aria-pressed="true"] { background:var(--ots-accent); color:#fff; }

/* ---- map page: the basemap choice ---- */
.ots-basemap { margin-top:8px !important; }
.ots-basemap button {
  min-height:30px; padding:0 10px; border-radius:6px; cursor:pointer;
  border:1px solid var(--ots-line); background:var(--ots-panel); color:var(--ots-ink);
  font:inherit; font-size:12px; font-weight:600; box-shadow:0 2px 8px rgb(0 0 0 / .4);
}
.ots-basemap button:hover { background:var(--ots-hover); }
.ots-basemap button:focus-visible { outline:2px solid var(--ots-ink); outline-offset:-2px; }

/* ---- 1.2.0: destructive actions, the confirm sheet, the mobile drawer ---- */
.mantine-Button-root.ots-btn-danger,
button.ots-btn-danger {
  background:var(--ots-danger-strong) !important; color:#fff !important;
  border-color:var(--ots-danger-strong) !important;
}
.mantine-Button-root.ots-btn-danger:hover,
button.ots-btn-danger:hover { background:#86192f !important; }
.mantine-Button-root.ots-btn-quiet,
button.ots-btn-quiet {
  background:var(--ots-panel) !important; border:1px solid var(--ots-line) !important;
  color:var(--ots-ink) !important;
}
.mantine-Button-root.ots-btn-quiet:hover,
button.ots-btn-quiet:hover { background:var(--ots-hover) !important; }
[data-ots-danger] .mantine-Modal-body .mantine-Button-root { min-height:44px; padding-inline:20px; }
.ots-irreversible { margin:0 0 12px; font-size:13px; color:var(--ots-danger); }

.ots-confirm { position:fixed; inset:0; z-index:10001; display:grid; place-items:center;
  padding:20px; background:rgb(0 0 0 / .6); }
.ots-confirm-card { width:min(420px, 100%); background:var(--ots-panel);
  border:1px solid var(--ots-danger-strong); border-radius:var(--ots-radius-lg);
  padding:20px; box-shadow:0 20px 50px rgb(0 0 0 / .6); }
.ots-confirm-card h2 { margin:0 0 8px; font-size:17px; font-weight:600; }
.ots-confirm-card p { margin:0 0 10px; font-size:14.5px; color:var(--ots-ink); }
.ots-confirm-row { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.ots-confirm-row button { min-height:44px; padding:0 18px; border-radius:var(--ots-radius);
  font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent; }
.ots-confirm-row button:focus-visible { outline:2px solid var(--ots-ink); outline-offset:2px; }

/* The 272px navbar is the overlay's own choice and must not apply to the phone drawer:
   Mantine's mobile behaviour is 100% width, and 272-of-375 leaves a partial panel. */
@media (max-width: 47.99em) {
  .mantine-AppShell-root { --app-shell-navbar-width:100% !important; }
}