/*
 * newpaineldarkmode.css
 *
 * Dark-mode design layer for the SafeForest dashboard. Loaded last on
 * every theme-wired template (after theme.css), and toggled on/off by
 * darkmode-toggle.js via link.disabled. When this file is enabled, it
 * sobrepõe theme.css and every page-specific stylesheet — that means
 * this single file controls the dark palette for every screen.
 *
 * Goals (re-written for v2):
 *   • Professional, enterprise-grade look (cinematic depth, soft glow,
 *     glass-morphism on overlays, layered shadows, subtle gradients).
 *   • Cohesive palette — slate/navy backgrounds, off-white text, blue
 *     accent (#2f81f7) used sparingly for focus/selection/highlights.
 *   • Consistent spacing & radii via reusable design tokens.
 *   • Smooth transitions on every interactive surface; respect for
 *     prefers-reduced-motion is inherited from theme.css.
 *   • All sizes in vw / em / % so the theme scales cleanly from FHD to
 *     4K. The only `px` are the universal idioms (1px hairlines, the
 *     9999px pill-radius sentinel) and tagged with comments.
 *   • Bug-fix sweep: the previous file had a malformed --smart-surface
 *     value and a few duplicated rule blocks; both cleaned up.
 *
 * To roll back: run scripts/revert_theme.ps1 (or .sh), which now also
 * restores this file from templates/.theme-backup/newpaineldarkmode.css.bak.
 */

/* ─── Design tokens ───────────────────────────────────────────────────
 * Two layers:
 *   • --dm-* tokens are owned by this file and used by the rules below.
 *   • --sf-* tokens are the theme.css contract — overriding them here
 *     means every page that uses them (login, masks, future cards…)
 *     flips to dark automatically when this stylesheet is enabled.
 * --------------------------------------------------------------------*/
:root {
    /* Core palette — cinematic slate gradient */
    --dm-bg:           #0f172a;   /* deepest base — page background bottom */
    --dm-bg-2:         #1a2332;   /* mid-level surfaces / sidebar */
    --dm-bg-3:         #222e3c;   /* cards / cells / dropdowns */
    --dm-surface:      #1a2332;   /* alias kept for back-compat with old rules */
    --dm-card:         #161b22;   /* deepest card / inset wells */
    --dm-border:       rgba(148, 163, 184, 0.18);
    --dm-border-strong:rgba(148, 163, 184, 0.32);
    --dm-fg:           #e6edf3;
    --dm-fg-muted:     #a3aab4;
    --dm-fg-subtle:    #768292;
    --dm-muted:        #8b949e;   /* alias kept for back-compat */
    --dm-accent:       #2f81f7;
    --dm-accent-strong:#1d6fe2;
    --dm-accent-soft:  rgba(47, 129, 247, 0.20);
    --dm-success:      #22c55e;
    --dm-warn:         #f59e0b;
    --dm-danger:       #ef4444;

    /* Layered shadows — em-based so they ride along with the page's
     * vw font-size. */
    --dm-shadow-xs: 0 0.07em 0.18em rgba(0, 0, 0, 0.35);
    --dm-shadow-sm: 0 0.12em 0.30em rgba(0, 0, 0, 0.40),
                    0 0.07em 0.15em rgba(0, 0, 0, 0.30);
    --dm-shadow-md: 0 0.45em 1.10em rgba(0, 0, 0, 0.45),
                    0 0.18em 0.40em rgba(0, 0, 0, 0.30);
    --dm-shadow-lg: 0 1.10em 2.40em rgba(0, 0, 0, 0.55),
                    0 0.40em 0.80em rgba(0, 0, 0, 0.35);
    --dm-shadow-glow: 0 0 0 0.18vw var(--dm-accent-soft),
                      0 0 1.5vw rgba(47, 129, 247, 0.18);
    /* Subtle inner highlight on raised surfaces */
    --dm-rim: inset 0 0.07em 0 rgba(255, 255, 255, 0.05);

    /* Radii (from theme scale) */
    --dm-radius-sm:   0.4em;
    --dm-radius-md:   0.65em;
    --dm-radius-lg:   0.9em;
    --dm-radius-pill: 9999px;     /* universal sentinel — must stay px */

    /* Override theme.css tokens so every consumer of --sf-* flips. */
    --sf-fg:           #e6edf3;
    --sf-fg-muted:     #a3aab4;
    --sf-fg-subtle:    #768292;
    --sf-bg:           #0f172a;
    --sf-surface:      #1a2332;
    --sf-surface-2:    #222e3c;
    --sf-border:       rgba(148, 163, 184, 0.18);
    --sf-border-strong:rgba(148, 163, 184, 0.32);
    --sf-accent:       #2f81f7;
    --sf-accent-strong:#1d6fe2;
    --sf-accent-soft:  rgba(47, 129, 247, 0.20);

    /* maskspolygon dark palette (same contract as before) */
    --mp-bg:                 #222e3c;
    --mp-fg:                 #e6edf3;
    --mp-muted:              #8b949e;
    --mp-card:               #161b22;
    --mp-accent:             #2f81f7;
    --mp-toolbar-bg:         #1a2332;
    --mp-toolbar-fg:         #e6edf3;
    --mp-input-bg:           #111827;
    --mp-input-fg:           #e6edf3;
    --mp-input-border:       rgba(148, 163, 184, 0.22);
    --mp-button-hover-bg:    #0f172a;
    --mp-canvas-vertex-fill: #ffffff;
    --mp-canvas-hint-fg:     rgba(255, 255, 255, 0.7);
    --mp-canvas-label-fg:    rgba(255, 255, 255, 0.85);

    /* Smart-UI custom-property overrides (the framework reads these). */
    --smart-background:                   #1a2332;
    --smart-background-color:             #e6edf3;
    --smart-surface:                      #222e3c;
    --smart-surface-color:                #e6edf3;
    --smart-border:                       rgba(148, 163, 184, 0.22);
    --smart-ui-state-hover:               rgba(47, 129, 247, 0.12);
    --smart-ui-state-color-hover:         #ffffff;
    --smart-ui-state-focus:               rgba(47, 129, 247, 0.18);
    --smart-ui-state-color-focus:         #ffffff;
    --smart-disabled:                     #2d3748;
    --smart-disabled-color:               #8b949e;
    --smart-scroll-bar-background:        transparent;
    --smart-scroll-bar-track-background:  transparent;
    --smart-scroll-bar-thumb-background:  rgba(148, 163, 184, 0.45);
    --smart-scroll-bar-button-background: transparent;
    --smart-scroll-bar-button-color:      rgba(148, 163, 184, 0.6);
    --smart-alternation-index0-background:#1a2332;
    --smart-alternation-index0-color:     #e6edf3;
}

/* ─── Page surface ───────────────────────────────────────────────────
 * Subtle three-stop gradient + faint accent glow gives every dashboard
 * page enterprise depth without distracting from data. */
body {
    color: var(--dm-fg) !important;
    background-color: var(--dm-bg) !important;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(47, 129, 247, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #0f172a 0%, #1a2332 60%, #222e3c 100%) !important;
    background-attachment: fixed !important;
}

/* Keep paragraph-like text legible */
p, li, dd, dt, blockquote { color: inherit; }

/* ─── Section / container surfaces ───────────────────────────────── */
.contain,
.x-contain {
    background-color: transparent !important;
    color: var(--dm-fg) !important;
}

/* IMPORTANT: these wrappers host <iframe>, <video> and <img> elements.
 * We override colors only — adding border-radius / backdrop-filter / an
 * explicit border-width on these containers makes the dashboard iframes
 * collapse or render at the wrong height in WebKit/Blink. Keep cosmetics
 * to the inner cards instead. */
.contain1,
.contain2,
.contain3,
.containgalp3 {
    background-color: transparent !important;
    border-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ─── Weather widget (3rd-party, white-bg) ──────────────────────────
 * The IPMA / forecast widget at #weatheren / #weathergr is a 3rd-party
 * script that injects its own DOM with a hardcoded white background
 * (see newpainel.html lines 948-958). We can't restyle the inner
 * elements — they aren't ours — so apply a CSS filter that flips the
 * widget's brightness with hue-rotate to keep the colored icons
 * (sun, cloud, rain) approximately on-tone. Light mode is unaffected
 * because newpaineldarkmode.css is disabled when the toggle is off. */
#weatheren,
#weathergr {
    filter: invert(0.92) hue-rotate(180deg) !important;
    border-radius: 0.4em;
    overflow: hidden;
}

/* ─── Date / time inputs: lighter icon + dark calendar dropdown ──────
 * Two related fixes for the same widget family
 * (<input type="date|datetime-local|time|month|week">):
 *
 * 1. The calendar / clock icon inside the input is dark by default.
 *    Invert it so it reads as a light glyph on dark surfaces.
 *
 * 2. The popup dropdown (the actual calendar grid that drops out of
 *    the input on click) is rendered by the browser as a *native*
 *    widget. Plain CSS can't style its inner cells/header/etc., but the
 *    `color-scheme: dark` property tells Chromium / Edge / Safari to
 *    render the native popup in its dark theme — including the dark
 *    calendar grid background. We set it on html/body in dark mode so
 *    every native control (date picker, time picker, scrollbars, file
 *    pickers, native dropdowns, etc.) flips together.
 *
 * Light mode is unaffected because the dark stylesheet is disabled
 * when the toggle is off.                                              */
html,
body,
select,
input,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    color-scheme: dark;
}

/* Native <select> open dropdown options — Chromium 110+ honors
 * background-color/color on <option>. Apply to every select on the
 * page; the second block re-skins each option's text/bg to the dark
 * surface so the dropdown popup is dark instead of white.            */
select {
    color-scheme: dark;
    background-color: var(--dm-surface);
    color: var(--dm-fg);
}
select option,
select optgroup,
select option:not(:checked) {
    background-color: var(--dm-surface) !important;
    background: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
}
select option:hover,
select option:focus,
select option:checked {
    background-color: rgba(47, 129, 247, 0.30) !important;
    background: rgba(47, 129, 247, 0.30) !important;
    color: #ffffff !important;
}
/* Detect-from-Image: the visible Cameras dropdown is now a custom
 * #cams-dropdown built from <button>+<ul>. The hidden <select> stays
 * in the DOM (it carries the value the rest of the JS reads) but is
 * itself never rendered, so we only need to dark-skin the custom UI. */
#tablee #cams-dropdown .cd-trigger {
    color: var(--dm-fg) !important;
    border-color: var(--dm-accent) !important;
    background: rgba(15, 23, 42, 0.55) !important;
    box-shadow: 0 0.07vw 0.22vw rgba(0, 0, 0, 0.45) !important;
}
#tablee #cams-dropdown .cd-trigger:hover,
#tablee #cams-dropdown.open .cd-trigger {
    background: var(--dm-accent) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
#tablee #cams-dropdown .cd-list {
    background: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.55) !important;
}
#tablee #cams-dropdown .cd-list li {
    color: var(--dm-fg) !important;
}
#tablee #cams-dropdown .cd-list li:hover,
#tablee #cams-dropdown .cd-list li.active {
    background-color: rgba(47, 129, 247, 0.18) !important;
    color: #ffffff !important;
}

/* Picker icon polish: with color-scheme: dark already in place above,
 * Chromium paints the calendar/clock indicator in its dark-theme white
 * variant. So we DON'T invert it (that would flip it back to dark) —
 * just give it a hover-opacity affordance and a pointer cursor.       */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 180ms ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ─── detectfromimage iframe — drop-zone image + form controls ──────
 * The page (templates/detectfromimage.html) shows a placeholder JPG
 * with "Drop one image…" text on a light-gray background. Inverting
 * the image gives unnatural colors, so in dark mode we hide the JPG
 * entirely and CSS-render a true dark drop-zone (using the dashboard's
 * --dm-bg surface and the same "Drop one image…" text) on top of the
 * existing #cam1 container. Modern :has() limits the override to when
 * the placeholder is being shown — once the user drops a real image,
 * the JS swaps #image1.src off "dropimage.jpg", :has() no longer
 * matches, and the live image paints with its natural colors.        */
#image1[src*="dropimage"] {
    opacity: 0 !important;          /* invisible but still receives drag events */
}
#cam1:has(#image1[src*="dropimage"]) {
    background-color: var(--dm-bg) !important;
    background-image:
        radial-gradient(circle at 50% 50%, var(--dm-surface) 0%, var(--dm-bg) 70%) !important;
}
#cam1:has(#image1[src*="dropimage"])::before {
    content: "";
    position: absolute;
    inset: 1.5vw;
    border: 0.15vw dashed rgba(148, 163, 184, 0.25);
    border-radius: 0.9em;
    pointer-events: none;
    z-index: 198;
}
#cam1:has(#image1[src*="dropimage"])::after {
    content: "Drop one image here to start detection…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dm-fg);
    font-size: 1.4vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 200;
    text-shadow: 0 0.07vw 0.15vw rgba(0, 0, 0, 0.45);
}

/* The Camera select + Confidence label/input on the same page already
 * use the smart-button look (transparent + accent border). In dark mode
 * we bump the accent + fill so they read clearly on the dark surface. */
#tablee #alert_id,
#tablee #confianca,
#tablee label[for="confianca"] {
    background: rgba(15, 23, 42, 0.55) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0.07vw 0.22vw rgba(0, 0, 0, 0.45) !important;
}
#tablee #alert_id:hover,
#tablee #confianca:hover,
#tablee #alert_id:focus,
#tablee #confianca:focus {
    background: var(--dm-accent) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
#tablee #alert_id option {
    background: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
}

/* ─── Dynamic <iframe> elements (admin / videos / history / camera /
 * masks / detectfromimage / panoramaview / etc.) ──────────────────────
 * originalpainel.js creates these iframes on demand and hard-codes
 * style="background-color: white; box-shadow: 2px 5px 8px lightgray;"
 * on the <iframe> tag itself, which produces a white flash on every
 * "Open Settings / Admin / Videos / Tours …" click before the loaded
 * document's own dark stylesheet takes over.
 *
 * Override the inline white with the dark page surface so the iframe
 * frame paints dark from the first pixel. The wrapper's `iframe-loading`
 * class also gets the same dark fill so the loading overlay matches.   */
iframe,
.iframe-loading,
#adminiframe iframe,
#settingsiframe iframe,
#rondaiframe iframe,
#masksiframe iframe,
#processingmasksiframe iframe,
#historyiframe iframe,
#videosiframe iframe,
#n5shieldiframe iframe,
#cammatrixiframe iframe,
#newalertxiframe iframe,
#camiframe iframe,
#panoramaviewiframe iframe,
#detectfromimageiframe iframe,
#filterframesiframe iframe {
    background-color: var(--dm-bg) !important;
    box-shadow: var(--dm-shadow-sm) !important;
}
.iframe-loading { background-color: var(--dm-bg) !important; }

.content1,
.content2,
.content3,
.contentgalp1,
.contentgalp2 {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow-sm) !important;
}

/* ─── Navbar ───
 * IMPORTANT: do NOT add backdrop-filter / will-change / transform here.
 * The navbar hosts the absolute-positioned dropdowns
 * (#notificationspopup1, #messagespopup1, #contactpopup, #sendmessagepopup,
 * #userdetail). Any of those properties creates a new stacking context,
 * trapping the dropdowns' z-index behind the video stream below.       */
.navbar,
#navbar {
    background: linear-gradient(180deg, #1a2332 0%, #16202d 100%) !important;
    background-image:
        linear-gradient(180deg, rgba(47, 129, 247, 0.06) 0%, transparent 100%),
        linear-gradient(180deg, #1a2332 0%, #16202d 100%) !important;
    color: var(--dm-fg) !important;
    border-bottom: 1px solid var(--dm-border) !important;          /* hairline ok */
    box-shadow: var(--dm-shadow-sm) !important;
}

/* ─── Sidebar ───
 * Same reason as the navbar — keep this free of stacking-context
 * triggers (backdrop-filter / transform / will-change) so any nested
 * popups can escape via z-index.                                       */
#sidebar,
.sidebar {
    background: linear-gradient(180deg, #1a2332 0%, #0f172a 100%) !important;
    color: var(--dm-fg) !important;
    border-right: 1px solid var(--dm-border) !important;            /* hairline ok */
    box-shadow: 0.4vw 0 1.2vw rgba(0, 0, 0, 0.45) !important;
}

/* ─── Dashboard cards ─── */
.dashboard-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-sm), var(--dm-rim) !important;
    transition: box-shadow 220ms ease, transform 180ms ease;
}
.dashboard-card:hover {
    box-shadow: var(--dm-shadow-md), var(--dm-rim) !important;
    transform: translateY(-0.07em);
}

/* ─── Bootstrap .card family ──────────────────────────────────────
 * novoTour.html / tours.html / mascaras.html / mascarasprocessamento.html
 * (and other templates) wrap their content in Bootstrap .card / .card-body
 * / .card-rounded panels which default to white. Force them to the dark
 * surface so their interior — inputs, labels, buttons, the scanning-area
 * grid — sits on the project's dark palette in dark mode.
 * ────────────────────────────────────────────────────────────────────*/
.card,
.card-body,
.card-rounded {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
.card-footer {
    background-color: var(--dm-card) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
/* Labels/text inside cards should pick up readable foreground */
.card label,
.card-body label,
.card .form-inline label,
.card-rounded label { color: var(--dm-fg) !important; }

.card-header {
    background: linear-gradient(180deg, #1f2a3a 0%, #161b22 100%) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-fg) !important;
}
.card-title { color: var(--dm-fg) !important; font-weight: 600; letter-spacing: -0.01em; }

/* Camera container — kept dark/black for video legibility */
.camera-container { background-color: var(--dm-bg) !important; }

/* ─── Cards / Modals (Bootstrap) ─── */
.modal-content {
    background-color: rgba(26, 35, 50, 0.96) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-lg) !important;
    box-shadow: var(--dm-shadow-lg), var(--dm-rim) !important;
    backdrop-filter: blur(0.6vw);
    -webkit-backdrop-filter: blur(0.6vw);
}
.modal-header,
.modal-footer {
    background: linear-gradient(180deg, #1f2a3a 0%, #161b22 100%) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-fg) !important;
}
.modal-body  { background-color: transparent !important; color: var(--dm-fg) !important; }
.modal-backdrop.show { opacity: 0.65 !important; }

/* Bootstrap utility flips */
.bg-white,
.bg-white2 { background-color: var(--dm-surface) !important; }

/* ──────────────────────────────────────────────────────────────────
 * Admin pages — tab strip + tab content + smart-table chrome
 * ------------------------------------------------------------------
 * admin_cams.html / admin_users.html / admin_iots.html /
 * admin_detect.html / admin_perm.html / admin_config.html /
 * admin_settings.html / newadmin.html each use the admin_common.css
 * `.tab` / `.tablinks` / `.tabcontent` widgets, which paint a
 * #f1f1f1 / #ccc / #fff palette by default. Re-skin them so the
 * empty space above and below the tables matches the dark surface
 * instead of leaking through as white. Light mode is unaffected
 * because newpaineldarkmode.css is disabled when the toggle is off.
 * ──────────────────────────────────────────────────────────────────*/
.tab {
    background-color: var(--dm-bg-2) !important;
    border-color: var(--dm-border) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}
.tab button,
.tab .tablinks {
    background-color: transparent !important;
    color: var(--dm-fg-muted) !important;
    border: 0 !important;
}
.tab button:hover,
.tab .tablinks:hover {
    background-color: rgba(47, 129, 247, 0.10) !important;
    color: var(--dm-fg) !important;
}
.tab button.active,
.tab .tablinks.active {
    background-color: var(--dm-card) !important;
    color: var(--dm-fg) !important;
    box-shadow: inset 0 -0.18vw 0 var(--dm-accent) !important;
}
.tabcontent {
    background-color: var(--dm-bg) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
.tabcontent h1,
.tabcontent h2,
.tabcontent h3 {
    color: var(--dm-fg) !important;
}

/* The smart-table component renders a wrapper, header strip and pager
 * row, all of which default to white surfaces. Make them dark too.   */
smart-table,
smart-table .smart-element,
smart-table .smart-table-container {
    background-color: var(--dm-bg) !important;
    color: var(--dm-fg) !important;
}

/* Search box and "displaying N of N records" footer area inside the
 * admin tab content — they sit on the gradient body, ensure dark.    */
.tabcontent input[type="search"],
.tabcontent input[type="text"] {
    background-color: rgba(15, 23, 42, 0.55) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
}

/* The container-fluid row admin pages wrap everything in often has
 * an inherited white background; let the dark page surface show. */
.tabcontent .container,
.tabcontent .container-fluid,
.tabcontent .row {
    background-color: transparent !important;
}

/* admin_config.html "Manage External Entities" table (#entities-table)
 * is a plain <table> with inline `background: white` and inline border
 * styling. Override here so the row strip and cells flip to the dark
 * surface, and keep the existing #2e86de header band readable. */
#entities-table {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-fg) !important;
}
#entities-table thead tr {
    background-color: var(--dm-accent-strong, #1d6fe2) !important;
    color: #ffffff !important;
}
#entities-table tbody tr {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
#entities-table tbody tr:nth-child(even) {
    background-color: rgba(47, 129, 247, 0.06) !important;
}
#entities-table tbody tr:hover {
    background-color: rgba(47, 129, 247, 0.12) !important;
}
#entities-table th,
#entities-table td {
    background-color: inherit !important;
    color: inherit !important;
    border-color: var(--dm-border) !important;
}

/* ─── Smart-UI table & components ─── */
smart-table,
smart-table .smart-element,
smart-table .smart-table-container,
smart-table .smart-table-header,
smart-table .smart-table-footer,
smart-table thead,
smart-table tbody,
smart-table tfoot,
smart-table tr,
smart-table td,
smart-table th {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
smart-table .smart-table-header-cell,
smart-table .smart-column-header {
    background: linear-gradient(180deg, #1f2a3a 0%, #161b22 100%) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}
smart-table .smart-table-row:nth-child(even) { background-color: rgba(47, 129, 247, 0.04) !important; }
smart-table .smart-table-row:hover,
smart-table tr:hover td {
    background-color: rgba(47, 129, 247, 0.10) !important;
    color: var(--dm-fg) !important;
}
smart-pager,
.smart-pager,
smart-table .smart-pager {
    background-color: var(--dm-card) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}

/* ─── Plain HTML tables ─── */
th {
    background: linear-gradient(180deg, #1f2a3a 0%, #161b22 100%) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    font-weight: 600;
}

/* ─── Grid.js tables ───
 * Grid.js renders a wrapper, header strip, body, footer, pagination
 * and summary/pages controls. By default they all sit on white. Force
 * every layer to the dark surface so the admin pages don't flash a
 * white band around or below the table. */
.gridjs,
.gridjs-container,
.gridjs-wrapper,
.gridjs-head,
.gridjs-search,
.gridjs-footer,
.gridjs-pagination,
.gridjs-summary,
.gridjs-pages,
.gridjs-table,
.gridjs-tbody,
.gridjs-thead {
    background-color: var(--dm-bg) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
.gridjs-th,
.gridjs-td,
td.gridjs-td {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
td.gridjs-td {
    box-shadow: -1px 0 var(--dm-border) inset !important;            /* hairline */
}
.gridjs-tr:hover .gridjs-td,
.gridjs-tr-selected .gridjs-td {
    background-color: rgba(47, 129, 247, 0.10) !important;
}
.gridjs-pagination .gridjs-pages button,
.gridjs-pagination button {
    background-color: var(--dm-bg-3) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
.gridjs-pagination .gridjs-pages button:hover,
.gridjs-pagination button:hover {
    background-color: rgba(47, 129, 247, 0.10) !important;
}
.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination button:disabled {
    background-color: var(--dm-card) !important;
    color: var(--dm-fg-subtle) !important;
    opacity: 0.6;
}
.gridjs-search-input,
input.gridjs-input {
    background-color: rgba(15, 23, 42, 0.55) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-sm) !important;
}
.gridjs-search-input::placeholder,
input.gridjs-input::placeholder { color: var(--dm-fg-subtle) !important; }

/* ─── Forms ─── */
input,
select,
textarea,
.form-control {
    background-color: rgba(15, 23, 42, 0.55) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-sm) !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
input::placeholder,
textarea::placeholder { color: var(--dm-fg-subtle) !important; }
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background-color: rgba(15, 23, 42, 0.75) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 0.2vw var(--dm-accent-soft) !important;
    outline: none !important;
}
label { color: var(--dm-fg) !important; }

/* ─── Buttons ─── */
/* IMPORTANT: only override background-color, NOT the `background:`
 * shorthand. Many buttons in the dashboard (e.g. .number1 / .bgbtn /
 * .btnstyle / various inline-styled <button>s) use background-image:
 * url(...) to paint their icon. The shorthand resets background-image,
 * which made those icons disappear into the dark gradient.            */
button,
.btnstyle2,
.button-71,
.buttonstreamonoff,
.buttonlearn,
.buttonclean,
.buttongeoprecision {
    background-color: var(--dm-bg-3) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    border-radius: var(--dm-radius-sm) !important;
    transition: transform 140ms ease, box-shadow 220ms ease, background-color 140ms ease;
}
button:hover,
.btnstyle2:hover,
.button-71:hover,
.buttonstreamonoff:hover,
.buttonlearn:hover,
.buttonclean:hover,
.buttongeoprecision:hover {
    background-color: rgba(47, 129, 247, 0.10) !important;
    transform: translateY(-0.07em);
    box-shadow: var(--dm-shadow-sm) !important;
}

/* Auto-tour & calibration arrow buttons (.btnupat / .btndownat /
 * .btnleftat / .btnrightat). Like the PTZ buttons in the camera popup,
 * these are click-area overlays on top of an SVG (autotourcontrols.svg
 * and controlosautotour1.svg) that paints the actual arrow glyphs.
 * The generic `button` rule above would solid-fill them and hide the
 * SVG underneath, so we force them transparent and switch hover to a
 * thin accent ring only — no background fill, no lift. */
.btnupat,
.btndownat,
.btnleftat,
.btnrightat,
#remoteat button,
#remotecalibra button {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 140ms ease !important;
}
.btnupat:hover,
.btndownat:hover,
.btnleftat:hover,
.btnrightat:hover,
#remoteat button:hover,
#remotecalibra button:hover {
    background-color: transparent !important;
    border: 0.12vw solid rgba(47, 129, 247, 0.85) !important;
    box-shadow: none !important;
    transform: none !important;
}
button:focus,
.btnstyle2:focus,
.button-71:focus,
.buttonstreamonoff:focus,
.buttonlearn:focus,
.buttonclean:focus,
.buttongeoprecision:focus {
    outline: none;
    box-shadow: 0 0 0 0.2vw var(--dm-accent-soft), var(--dm-rim) !important;
    border-color: var(--dm-accent) !important;
}
button:disabled,
.btnstyle2:disabled,
.button-71:disabled,
.buttonstreamonoff:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ─── Smart-button polish ─── */
smart-button,
.smart-button {
    background-color: rgba(34, 46, 60, 0.85) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    border-radius: var(--dm-radius-sm) !important;
    transition: transform 140ms ease, box-shadow 220ms ease, background-color 140ms ease;
}
smart-button:hover,
.smart-button:hover {
    background-color: rgba(47, 129, 247, 0.12) !important;
    box-shadow: var(--dm-shadow-sm) !important;
    transform: translateY(-0.07em);
}

/* ─── Floating / draggable widgets ─── */
#mydiv {
    background-color: var(--dm-surface) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    color: var(--dm-fg) !important;
    box-shadow: var(--dm-shadow-md), var(--dm-rim) !important;
}
#mydivheader {
    background: linear-gradient(180deg, var(--dm-accent) 0%, var(--dm-accent-strong) 100%) !important;
    color: #ffffff !important;
    border-radius: var(--dm-radius-md) var(--dm-radius-md) 0 0;
}

/* ─── Fullscreen map / iframe panels ───
 * These wrap the dashboard iframes (#settingsiframe, #adminiframe, …)
 * so we override colors only. An explicit border-width or border-radius
 * here clips the iframe content; backdrop-filter collapses it entirely. */
.mapfullscreen,
.mapfullscreencam {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow-sm) !important;
}

/* ─── Loading screen ─── */
#loading-screen {
    background-color: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(0.6vw);
    -webkit-backdrop-filter: blur(0.6vw);
}

/* ─── Leaflet popups ─── */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: rgba(26, 35, 50, 0.96) !important;
    color: var(--dm-fg) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-md) !important;
    backdrop-filter: blur(0.4vw);
    -webkit-backdrop-filter: blur(0.4vw);
}
.leaflet-popup-content-wrapper { padding: 0.6vw 0.9vw; }
.leaflet-tooltip,
.leaflet-tooltip.my-labels {
    background-color: rgba(15, 23, 42, 0.92) !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
    border-radius: var(--dm-radius-sm) !important;
}

/* ─── Menu / user dropdowns ─── */
.menu {
    background-color: rgba(26, 35, 50, 0.95) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    color: var(--dm-fg) !important;
    box-shadow: var(--dm-shadow-md), var(--dm-rim) !important;
    backdrop-filter: blur(0.6vw);
    -webkit-backdrop-filter: blur(0.6vw);
}

/* ─── Navbar popovers — bell / message / phone / send-message
 * Each is a Bootstrap .dropdown-menu populated with a header band, an
 * inner .list-group panel, and a footer link. The list-group has an
 * inline `background-color: #F5F7FB` we have to override directly.   */
#notificationspopup1,
#messagespopup1,
#contactpopup,
#sendmessagepopup {
    background-color: rgba(26, 35, 50, 0.96) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-lg) !important;
    backdrop-filter: blur(0.4vw);
    -webkit-backdrop-filter: blur(0.4vw);
}
#notificationspopup1 .dropdown-menu-header,
#messagespopup1 .dropdown-menu-header,
#contactpopup .dropdown-menu-header,
#sendmessagepopup .dropdown-menu-header {
    background-color: var(--dm-card) !important;
    color: var(--dm-fg) !important;
    border-bottom: 0.07vw solid var(--dm-border) !important;
}
#notificationspopup1 .dropdown-menu-footer,
#messagespopup1 .dropdown-menu-footer,
#contactpopup .dropdown-menu-footer,
#sendmessagepopup .dropdown-menu-footer {
    background-color: var(--dm-card) !important;
    color: var(--dm-fg) !important;
    border-top: 0.07vw solid var(--dm-border) !important;
}
#notificationspopup1 .list-group,
#messagespopup1 .list-group,
#contactpopup .list-group,
#sendmessagepopup .list-group {
    background-color: transparent !important;
    color: var(--dm-fg) !important;
}
#notificationspopup1 .list-group-item,
#messagespopup1 .list-group-item,
#contactpopup .list-group-item,
#sendmessagepopup .list-group-item {
    background-color: transparent !important;
    color: var(--dm-fg) !important;
    border-color: var(--dm-border) !important;
}
#notificationspopup1 .text-muted,
#messagespopup1 .text-muted,
#contactpopup .text-muted,
#sendmessagepopup .text-muted,
#notificationspopup1 .text-dark,
#messagespopup1 .text-dark,
#contactpopup .text-dark,
#sendmessagepopup .text-dark { color: var(--dm-fg) !important; }
#notificationspopup1 label,
#messagespopup1 label,
#contactpopup label,
#sendmessagepopup label { color: var(--dm-fg) !important; }
#notificationspopup1 a,
#messagespopup1 a,
#contactpopup a,
#sendmessagepopup a { color: var(--dm-accent) !important; }

/* ─── Sidebar icons (left vertical bar) ─────────────────────────────
 * Same hover/active language as the burger menu items: accent-blue
 * tint covering the full-width pill (icon + label), with a stronger
 * fill + accent ring for the .active state. The width / padding /
 * radius come from newpainel.html's inline rules (kept light-mode-
 * compatible); this block only swaps the colors when dark mode is on. */
.sidebar-icon:hover {
    background-color: rgba(47, 129, 247, 0.18) !important;
}
.sidebar-icon:hover span,
.sidebar-icon:focus span {
    color: #ffffff !important;
}
.sidebar-icon.active {
    background-color: rgba(47, 129, 247, 0.30) !important;
    box-shadow: inset 0 0 0 0.07vw rgba(47, 129, 247, 0.60) !important;
}
.sidebar-icon.active span,
.sidebar-icon.active i {
    color: #ffffff !important;
}

/* ─── Burger menu items (#menudetail) ───────────────────────────────
 * The menu items have inline onmouseover/onmouseout handlers in the
 * HTML that set this.style.background='white' / 'transparent' on hover.
 * That white pill looks wrong in dark mode. CSS !important wins over
 * JS-set inline styles (when the inline style itself has no
 * !important), so we override here instead of editing the 9 inline
 * handlers. */
#menudetail {
    background: var(--dm-surface) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-md) !important;
    color: var(--dm-fg) !important;
}
#menudetail .flex {
    /* Force transparent regardless of the inline style="background:white"
     * the JS handler may have just applied. */
    background: transparent !important;
    color: var(--dm-fg) !important;
    border-radius: var(--dm-radius-sm);
    transition: background-color 140ms ease;
}
#menudetail .flex:hover,
#menudetail .flex:focus {
    background: rgba(47, 129, 247, 0.18) !important;
    color: #ffffff !important;
}
#menudetail .flex span {
    color: var(--dm-fg) !important;
}
#menudetail .flex:hover span,
#menudetail .flex:focus span {
    color: #ffffff !important;
}

/* ─── "Select Recipient" sub-popup (#popup inside #email_Modal) ─────
 * The Send-To-Email mini-popup nested inside the alert event modal
 * is a bare <div id="popup"> with `background-color: white` declared
 * in newpainel.html. Override the inline page CSS so it matches the
 * dark surface, plus paint its label/heading/inputs to match. */
#popup {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-lg) !important;
}
#popup h1, #popup h2, #popup h3, #popup h4, #popup label {
    color: var(--dm-fg) !important;
}
#popup input,
#popup select,
#popup textarea {
    background-color: rgba(15, 23, 42, 0.55) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-sm) !important;
}
#popup input::placeholder,
#popup textarea::placeholder { color: var(--dm-fg-subtle) !important; }
#popup option {
    background-color: var(--dm-surface) !important;
    color: var(--dm-fg) !important;
}

/* ─── Cams dropdown (newpainel.html "Cams" navmenu) ──────────────────
 * Custom .dropdown-options panel that lists camera names. The page CSS
 * paints it `background-color: #fff` and the inline <ol> adds another
 * `background-color: #F5F7FB`. Override both so the panel matches the
 * dashboard's dark surface in dark mode.                              */
.dropdown-options {
    background-color: var(--dm-surface) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-md) !important;
}
.dropdown-options ol {
    background-color: transparent !important;
    color: var(--dm-fg) !important;
}
.dropdown-options li {
    color: var(--dm-fg) !important;
}
.dropdown-options li:hover {
    background-color: rgba(47, 129, 247, 0.12) !important;
    color: #ffffff !important;
    border-radius: var(--dm-radius-sm);
}

/* ─── Generic Bootstrap dropdown menus ───────────────────────────────
 * Covers any <ul|div class="dropdown-menu …"> that isn't otherwise
 * styled — e.g. the Admin dropdown (<ul aria-labelledby="utilizador">
 * with Profile / Settings / Sign Out) and the Language dropdown
 * (#idiomflags with English / Portuguese / Greek). They render white
 * by Bootstrap default; flip to the dark surface when dark mode is on.
 * ──────────────────────────────────────────────────────────────────*/
.dropdown-menu {
    background-color: rgba(26, 35, 50, 0.96) !important;
    color: var(--dm-fg) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    box-shadow: var(--dm-shadow-md) !important;
    backdrop-filter: blur(0.4vw);
    -webkit-backdrop-filter: blur(0.4vw);
}
.dropdown-menu .dropdown-item {
    color: var(--dm-fg) !important;
    background-color: transparent !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(47, 129, 247, 0.12) !important;
    color: #ffffff !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--dm-accent) !important;
    color: #ffffff !important;
}
.dropdown-menu .dropdown-divider {
    border-top-color: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
}
.dropdown-menu .dropdown-header { color: var(--dm-fg-muted) !important; }
.user {
    background-color: var(--dm-card) !important;
    border: 0.07vw solid var(--dm-border) !important;
    border-radius: var(--dm-radius-md) !important;
    color: var(--dm-fg) !important;
    box-shadow: var(--dm-shadow-sm), var(--dm-rim) !important;
}

/* ─── Inline text styling ─── */
span { color: var(--dm-fg) !important; }
.iconstext { color: var(--dm-fg-muted) !important; }
.clock,
.clock span,
.calibra,
.calibra span { color: var(--dm-fg-muted) !important; }

/* ─── Selection highlight ─── */
::selection { background: var(--dm-accent-soft); color: #ffffff; }

/* ─── Scrollbars (dark, minimal) ─────────────────────────────────────
 * Both axes (vertical + horizontal) get an explicit dark track and a
 * dark thumb. Applies in:
 *   • Firefox via scrollbar-color (universal selector + html/body)
 *   • WebKit/Chromium via ::-webkit-scrollbar pseudos (universal +
 *     html/body), so any container with overflow:auto/scroll inside
 *     iframes that load this stylesheet also picks up the dark style.
 * Light mode is untouched — newpaineldarkmode.css is disabled by
 * darkmode-toggle.js when the toggle is off.
 * ──────────────────────────────────────────────────────────────────*/
html,
body,
* {
    scrollbar-width: thin !important;
    scrollbar-color: #2d3748 #161b22 !important;
}
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0.6vw !important;
    height: 0.6vw !important;
}
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background-color: #161b22 !important;
}
*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background-color: #161b22 !important;
}
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: #2d3748 !important;
    border-radius: var(--dm-radius-pill);
    border: 0.15em solid #161b22;
    background-clip: padding-box;
    transition: background-color 200ms ease;
}
*::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background-color: #3a4a63 !important;
}
*::-webkit-scrollbar-button,
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    background-color: #161b22 !important;
    height: 0;
    width: 0;
    display: none;
}

/* ─── Panorama rulers — dark variant ────────────────────────────────
 * Filter pipeline left out intentionally; we swap the source image for
 * the pre-rendered _dark variants and blend with the surface tone. */
img[src*="reguaangulosazimuth12"],
img[src*="reguaanguloselevation11"] {
    background-color: var(--dm-card) !important;
    filter: none !important;
    display: block;
}

#pandiv,
#panorama,
#panorama thead,
#panorama tbody,
#reguahorizontal,
#reguavertical,
#reguahorizontal th,
#reguavertical td,
#panorama .rotate,
#reguahorizontal img {
    background-color: var(--dm-card) !important;
}

#reguahorizontal img { filter: none !important; display: block; }

/* Vertical elevation ruler — paint the dark PNG once on the cell.
 * NOTE: do NOT add a ::before duplicating the image with rotate(90deg).
 * That stale overlay (left over from an earlier "rotate the image
 * without rotating the content" trick) draws the same elevation ruler
 * sideways on top of the upright one, producing the horizontal-looking
 * strip artifact in the middle of the column. */
#panorama .rotate {
    position: relative;
    overflow: hidden;
    background-color: #161b22 !important;
    background-image: url("/static/img/reguaanguloselevation11_dark.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
}
#panorama .rotate::before { content: none !important; }
#panorama .rotate > span { position: relative; z-index: 1; }