/* REPTOR app-tokens — populated in wave-frontend phase 3 */
/* Migrated from inline <style> in templates/index.html. */
/* :root vars are aliases to Tabler tokens; rule bodies use Tabler hex-mapped vars. */

:root {
    /* Sidebar-* and header-* removed (no longer used post-shell-swap) */
    /* Legacy aliases pointing to Tabler vars (preserve existing rule bodies) */
    --accent: var(--tblr-primary);
    --accent-light: var(--tblr-primary-lt, rgba(var(--tblr-primary-rgb), .15));
    --body-bg: var(--tblr-body-bg);
    --card-bg: var(--tblr-card-bg);
    --card-border: var(--tblr-border-color);
    --text-primary: var(--tblr-body-color);
    --text-secondary: var(--tblr-secondary);
    --text-muted: var(--tblr-muted, var(--tblr-secondary));
    --table-header-bg: var(--tblr-bg-surface-tertiary, #f8fafc);
    --table-border: var(--tblr-border-color-translucent, var(--tblr-border-color));
    --accent-cyan: var(--tblr-cyan);
    --accent-green: var(--tblr-green);
    --accent-orange: var(--tblr-orange);
    --accent-red: var(--tblr-red);
    --accent-purple: var(--tblr-purple);
    --accent-yellow: var(--tblr-yellow);
    /* REPTOR-specific tokens (no Tabler equivalent) */
    --reptor-login-gradient-mid: #1e3a5f;
}
        body { background:var(--body-bg); color:var(--text-primary); font-family:'Inter',system-ui,-apple-system,sans-serif; margin:0; }
        ::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-thumb { background:var(--tblr-gray-300, #cbd5e1); border-radius:3px; }
        ::-webkit-scrollbar-track { background:transparent; }

        /* LOGIN */
        #loginScreen { position:fixed; inset:0; background:linear-gradient(135deg,var(--tblr-dark, #0f172a) 0%,var(--tblr-dark, #1e293b) 40%,var(--reptor-login-gradient-mid) 100%); display:flex; align-items:center; justify-content:center; z-index:9999; }
        .login-card { background:rgba(30,41,59,.95); border:1px solid var(--tblr-gray-700, #334155); border-radius:12px; padding:48px; width:420px; text-align:center; box-shadow:0 25px 60px rgba(0,0,0,.4); }
        .login-card .logo { font-size:38px; font-weight:800; color:#ffffff; margin-bottom:8px; }
        .login-card .logo span { color:var(--accent); }
        .login-card .subtitle { font-size:12px; color:var(--tblr-gray-600, #64748b); margin-bottom:32px; }
        .login-card input { background:var(--tblr-dark, #0f172a); border:1px solid var(--tblr-gray-700, #334155); color:var(--tblr-border-color, #e2e8f0); }
        .login-card input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.25); }
        .login-card input::placeholder { color:var(--tblr-gray-700, #475569); }


        /* CARDS */
        .card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
        .card-header { background:transparent; border-bottom:1px solid var(--card-border); }
        .card-title { color:var(--text-primary); }
        .stat-card { position:relative; overflow:hidden; }
        .stat-card .stat-icon { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:40px; height:40px; opacity:.08; }
        .stat-card .stat-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:600; }
        .stat-card .stat-value { font-size:28px; font-weight:800; margin:4px 0 2px; color:var(--text-primary); }
        .stat-card .stat-sub { font-size:11px; color:var(--text-secondary); }
        .border-start-blue { border-left:3px solid var(--accent) !important; }
        .border-start-cyan { border-left:3px solid var(--accent-cyan) !important; }
        .border-start-green { border-left:3px solid var(--accent-green) !important; }
        .border-start-orange { border-left:3px solid var(--accent-orange) !important; }
        .border-start-purple { border-left:3px solid var(--accent-purple) !important; }
        .border-start-red { border-left:3px solid var(--accent-red) !important; }

        /* TABLE */
        .table { color:var(--text-primary); }
        .table thead th { background:var(--table-header-bg); color:var(--text-secondary); font-size:10px; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--table-border); font-weight:700; padding:8px 10px; white-space:nowrap; }
        .table td { border-bottom:1px solid var(--table-border); padding:7px 10px; font-size:12px; color:var(--text-secondary); }
        .table tbody tr:hover td { background:var(--tblr-bg-surface-tertiary, #f8fafc); color:var(--text-primary); }

        /* STATUS BADGES */
        .badge-status { font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px; }
        .badge-sent,.badge-Sent,.badge-Queued { background:var(--accent-light); color:var(--accent); }
        .badge-Paid,.badge-Approved,.badge-approved,.badge-success { background:var(--tblr-green-lt, #d1fae5); color:var(--tblr-green-darker, #059669); }
        .badge-Failed,.badge-Rejected,.badge-rejected,.badge-error { background:var(--tblr-red-lt, #fee2e2); color:var(--tblr-red-darker, #dc2626); }
        .badge-Canceled,.badge-canceled { background:var(--tblr-orange-lt, #ffedd5); color:var(--tblr-orange-darker, #ea580c); }
        .badge-running { background:var(--accent-light); color:var(--accent); }
        .badge-Acknowledged { background:var(--tblr-purple-lt, #ede9fe); color:var(--tblr-purple-darker, #7c3aed); }

        /* FORMS */
        .form-control,.form-select { background:var(--tblr-bg-forms, var(--card-bg)); border:1px solid var(--card-border); color:var(--text-primary); font-size:12px; }
        .form-control:focus,.form-select:focus { background:var(--tblr-bg-forms, var(--card-bg)); border-color:var(--accent); color:var(--text-primary); box-shadow:0 0 0 2px rgba(var(--tblr-primary-rgb), .15); }
        .form-label { font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-secondary); font-weight:600; }



        /* running / scheduled indicators */
        .job-card .running-dot { display:inline-block; width:10px; height:10px; border-radius:50%;
            background: var(--accent); margin-right:6px; animation: pulse-dot 1s ease-in-out infinite; }
        @keyframes pulse-dot { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(59,130,246,.5); }
            50% { opacity: .6; box-shadow: 0 0 0 6px rgba(59,130,246,0); } }
        .job-card .sched-switch { margin: 0 6px 0 2px; }
        .job-card .sched-switch .form-check-input { cursor: pointer; width: 2.2em; height: 1.1em; }
        .job-card .sched-label { font-size: 11px; color: var(--text-muted); user-select: none; }
        .schedule-panel { background: var(--accent-light, var(--tblr-primary-lt, #f0f9ff)); border: 1px dashed var(--card-border);
            border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
        .schedule-panel label { font-size: 11px; }

        /* ==== Jobs cards — 3 tiers ==== */
        .job-card { transition: all .15s ease; }
        .job-card .job-tier-2,
        .job-card .job-tier-3-log,
        .job-card .job-tier-3-edit { display: none; }
        .job-card[data-card-state="medium"] .job-tier-2 { display: block; }
        .job-card[data-card-state="expanded-log"] .job-tier-2,
        .job-card[data-card-state="expanded-log"] .job-tier-3-log,
        .job-card[data-card-state="expanded-edit"] .job-tier-2,
        .job-card[data-card-state="expanded-edit"] .job-tier-3-edit { display: block; }
        .job-card[data-card-state="collapsed"] { opacity: .92; }
        .job-card[data-card-state="collapsed"]:hover { opacity: 1; }
        .job-card[data-card-state="expanded-log"],
        .job-card[data-card-state="expanded-edit"] { border-color: var(--accent); }
        .job-card .btn-group-sm > .btn.is-active { background: var(--accent-light); border-color: var(--accent); }
        .job-card .job-tier-1 { cursor: default; }
        .job-card .job-tier-1 strong { font-size: 14px; }
        .job-card .inline-log-table th,
        .job-card .inline-log-table td { font-size: 11px; padding: 4px 8px; }
        /* SYNC LOG */
        .sync-log { background:var(--tblr-bg-surface-tertiary, #f8fafc); border:1px solid var(--card-border); border-radius:6px; padding:10px 14px; font-family:'JetBrains Mono','Fira Code',monospace; font-size:11px; color:var(--text-secondary); max-height:200px; overflow-y:auto; }

        /* MAP */
        .map-wrapper { border-radius:8px; overflow:hidden; border:1px solid var(--card-border); }
        #geoMap { height:500px; width:100%; background:var(--tblr-border-color, #e2e8f0); }

        /* PAGE */
        .page-body { padding:20px; }
        .page { display:none; } .page.active { display:block; }

        /* CONFIG CARD */
        .config-card { transition:border-color .15s; }
        .config-card:hover { border-color:var(--accent); }
        .config-card .config-status { width:8px; height:8px; border-radius:50%; display:inline-block; }
        .config-card .config-status.online { background:var(--accent-green); box-shadow:0 0 6px rgba(16,185,129,.4); }
        .config-card .config-status.offline { background:var(--accent-red); }

        /* DETAIL PANEL */
        .offcanvas { background:var(--card-bg); border-left:1px solid var(--card-border); color:var(--text-primary); }
        .offcanvas-header { border-bottom:1px solid var(--card-border); }
        .dp-field { margin-bottom:12px; }
        .dp-label { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:600; }
        .dp-value { font-size:13px; color:var(--text-primary); margin-top:2px; }

        /* TOAST */
        .toast-container { z-index:9999; }

        /* BTN */
        .btn-primary { background:var(--accent); border-color:var(--accent); }
        .btn-primary:hover { background:var(--tblr-primary-darker, #2563eb); border-color:var(--tblr-primary-darker, #2563eb); }
        .btn-action { background:var(--tblr-bg-surface, #f1f5f9); border:1px solid var(--card-border); color:var(--text-secondary); }
        .btn-action:hover { background:var(--tblr-border-color, #e2e8f0); color:var(--text-primary); border-color:var(--tblr-gray-300, #cbd5e1); }/* NAV FOOTER */

        .text-cyan { color:var(--accent-cyan) !important; }
        .text-green { color:var(--accent-green) !important; }
        .text-orange { color:var(--accent-orange) !important; }
        .text-purple { color:var(--accent-purple) !important; }
        .text-accent { color:var(--accent) !important; }

        /* Lucide icon inline sizing */
        .dm-accent svg { color:var(--accent-yellow) !important; }

        /* UI Config — swatch picker (substitui input[type=color] livre) */
        .theme-picker { gap: 8px; }
        .swatch-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 4px 8px; border: 1px solid var(--tblr-border-color);
            border-radius: 4px; background: var(--tblr-bg-surface);
            cursor: pointer; font-size: 12px; color: var(--tblr-body-color);
            min-width: 130px; justify-content: flex-start;
        }
        .swatch-btn:hover { border-color: var(--tblr-primary); }
        .swatch-current {
            display: inline-block; width: 24px; height: 24px;
            border-radius: 3px; border: 1px solid var(--tblr-border-color); flex-shrink: 0;
        }
        .swatch-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
        .swatch-grid {
            width: 380px; max-height: 400px; overflow-y: auto;
            background: var(--tblr-card-bg); border: 1px solid var(--tblr-border-color);
        }
        .swatch-row {
            display: grid; grid-template-columns: 60px repeat(9, 1fr);
            gap: 2px; align-items: center; margin-bottom: 4px;
        }
        .swatch-row:has(> .swatch-cell:nth-child(11)) {
            grid-template-columns: 60px repeat(10, 1fr);
        }
        .swatch-row-label {
            font-size: 10px; color: var(--tblr-secondary);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            text-align: right; padding-right: 4px;
        }
        .swatch-cell {
            width: 100%; height: 26px; border-radius: 3px; cursor: pointer;
            border: 2px solid transparent; transition: transform .1s; padding: 0;
        }
        .swatch-cell:hover { transform: scale(1.15); border-color: var(--tblr-body-color); }
        .swatch-cell.active { border-color: var(--tblr-primary); }
        .uicfg-menu-item { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px; margin-bottom:6px; }
        .uicfg-menu-item .uicfg-icon-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--card-border); border-radius:6px; cursor:pointer; transition:all .15s; background:var(--tblr-bg-surface-tertiary, #f8fafc); }
        .uicfg-menu-item .uicfg-icon-btn:hover { border-color:var(--accent); background:var(--accent-light); }
        .uicfg-menu-item .uicfg-icon-btn svg { width:18px; height:18px; }
        .uicfg-menu-item input { border:none; background:transparent; font-size:13px; font-weight:500; color:var(--text-primary); outline:none; flex:1; }
        .uicfg-menu-item input:focus { border-bottom:1px solid var(--accent); }
        .uicfg-menu-item .uicfg-key { font-size:9px; color:var(--text-muted); font-family:monospace; min-width:120px; }

        /* Icon Picker Modal */
        .icon-picker-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; display:flex; align-items:center; justify-content:center; }
        .icon-picker-modal { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; width:700px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,.2); }
        .icon-picker-header { padding:16px 20px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; gap:12px; }
        .icon-picker-header input { flex:1; border:1px solid var(--card-border); border-radius:6px; padding:8px 12px; font-size:13px; background:var(--tblr-bg-surface-tertiary, var(--card-bg)); color:var(--text-primary); }
        .icon-picker-header input:focus { outline:none; border-color:var(--accent); }
        .icon-picker-header .icon-count { font-size:11px; color:var(--text-muted); white-space:nowrap; }
        .icon-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:4px; padding:16px; overflow-y:auto; flex:1; }
        .icon-picker-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 4px; border-radius:6px; cursor:pointer; transition:all .1s; gap:4px; }
        .icon-picker-cell:hover { background:var(--accent-light); }
        .icon-picker-cell.selected { background:var(--accent); color:#fff; }
        .icon-picker-cell svg { width:22px; height:22px; }
        .icon-picker-cell span { font-size:8px; color:var(--text-muted); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:68px; }
        .icon-picker-cell.selected span { color:#fff; }
        .icon-picker-footer { padding:12px 20px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; gap:8px; }

        /* Measure tool */
        .measure-active { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
        .measure-tooltip { background:rgba(0,0,0,.8); color:#fff; padding:4px 8px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; border:none; box-shadow:0 2px 6px rgba(0,0,0,.3); }
        .measure-tooltip::before { display:none; }
        .measure-total { background:var(--accent); color:#fff; padding:4px 10px; border-radius:4px; font-size:12px; font-weight:700; border:none; box-shadow:0 2px 8px rgba(59,130,246,.4); }
        .measure-total::before { display:none; }

        /* Tank tooltip */
        .tank-tooltip { font-size:11px !important; line-height:1.5; max-width:280px; }

        /* Logo upload */
        .logo-upload-box { border:2px dashed var(--card-border); border-radius:8px; padding:16px; text-align:center; cursor:pointer; transition:all .15s; position:relative; min-height:80px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; }
        .logo-upload-box:hover { border-color:var(--accent); background:var(--accent-light); }
        .logo-upload-box img { max-height:60px; max-width:100%; object-fit:contain; }
        .logo-upload-box .upload-hint { font-size:11px; color:var(--text-muted); }
        .logo-upload-box input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
        .logo-upload-actions { display:flex; gap:6px; margin-top:6px; justify-content:center; }
        .brand-logo-img { max-height:40px; max-width:190px; object-fit:contain; }
        .login-logo-img { max-height:80px; max-width:320px; object-fit:contain; margin-bottom:12px; }

        /* Map Picker */
        .map-picker-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; display:flex; align-items:center; justify-content:center; }
        .map-picker-modal { background:var(--card-bg); border-radius:12px; width:700px; box-shadow:0 25px 60px rgba(0,0,0,.2); overflow:hidden; }
        .map-picker-modal .mp-header { padding:12px 16px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; }
        .map-picker-modal .mp-header h4 { margin:0; font-size:14px; }
        .map-picker-modal #mapPickerMap { height:400px; }
        .map-picker-modal .mp-footer { padding:10px 16px; border-top:1px solid var(--card-border); display:flex; align-items:center; gap:12px; }
        .map-picker-modal .mp-footer .mp-coords { font-family:monospace; font-size:12px; color:var(--text-secondary); }
        .loc-map-btn { cursor:pointer; color:var(--accent); font-size:11px; text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
        .loc-map-btn:hover { text-decoration:underline; }

        /* Excel-style column filter */
        .col-filter-btn { background:none; border:none; cursor:pointer; padding:1px 3px; color:var(--text-muted); vertical-align:middle; position:relative; }
        .col-filter-btn:hover, .col-filter-btn.active { color:var(--accent); }
        .col-filter-btn svg { width:12px; height:12px; }
        .col-filter-dropdown { position:absolute; top:100%; left:0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:100; width:240px; max-height:320px; display:flex; flex-direction:column; }
        .col-filter-dropdown .cfd-search { padding:6px 8px; border-bottom:1px solid var(--card-border); }
        .col-filter-dropdown .cfd-search input { width:100%; border:1px solid var(--card-border); border-radius:4px; padding:3px 6px; font-size:11px; }
        .col-filter-dropdown .cfd-search input:focus { outline:none; border-color:var(--accent); }
        .col-filter-dropdown .cfd-actions { padding:4px 8px; border-bottom:1px solid var(--card-border); display:flex; gap:8px; font-size:10px; }
        .col-filter-dropdown .cfd-actions a { color:var(--accent); cursor:pointer; text-decoration:none; }
        .col-filter-dropdown .cfd-actions a:hover { text-decoration:underline; }
        .col-filter-dropdown .cfd-list { overflow-y:auto; flex:1; max-height:200px; padding:4px 0; }
        .col-filter-dropdown .cfd-item { display:flex; align-items:center; gap:6px; padding:2px 8px; font-size:11px; cursor:pointer; color:var(--text-secondary); }
        .col-filter-dropdown .cfd-item:hover { background:var(--tblr-bg-surface, #f1f5f9); }
        .col-filter-dropdown .cfd-item input { accent-color:var(--accent); flex-shrink:0; }
        .col-filter-dropdown .cfd-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .col-filter-dropdown .cfd-sort { padding:4px 8px; border-bottom:1px solid var(--card-border); display:flex; gap:4px; }
        .col-filter-dropdown .cfd-sort button { flex:1; font-size:10px; padding:3px; border:1px solid var(--card-border); border-radius:4px; background:var(--card-bg); cursor:pointer; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; gap:3px; }
        .col-filter-dropdown .cfd-sort button:hover { border-color:var(--accent); color:var(--accent); }
        .col-filter-dropdown .cfd-sort button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
        .col-filter-dropdown .cfd-footer { padding:6px 8px; border-top:1px solid var(--card-border); display:flex; justify-content:flex-end; gap:4px; }
        .col-filter-dropdown .cfd-footer button { font-size:10px; padding:3px 10px; border-radius:4px; cursor:pointer; }

        /* Alias inline edit */
        .alias-cell { display:flex; align-items:center; gap:4px; }
        .alias-cell input { border:none; border-bottom:1px dashed var(--card-border); background:transparent; font-size:12px; color:var(--accent); padding:0 2px; width:100%; min-width:80px; }
        .alias-cell input:focus { border-bottom-color:var(--accent); outline:none; }

        /* Tables list filter bar */
        .dm-tables-toolbar { padding:8px 12px; border-bottom:1px solid var(--card-border); display:flex; align-items:center; gap:8px; }
        .dm-tables-toolbar input, .dm-tables-toolbar select { font-size:11px; padding:3px 8px; border:1px solid var(--card-border); border-radius:4px; }
        .dm-tables-toolbar input:focus, .dm-tables-toolbar select:focus { outline:none; border-color:var(--accent); }

        /* === Phase 3 utility helpers (replace inline styles) === */
        .cursor-pointer { cursor: pointer; }
        .cursor-default { cursor: default; }
        .icon-sm { width:14px !important; height:14px !important; font-size:14px; }
        .icon-md { width:20px !important; height:20px !important; font-size:20px; }
        .icon-lg { width:40px !important; height:40px !important; font-size:40px; }
        .input-search { width:200px; }
        .input-search-sm { width:240px; }
        .input-search-md { width:300px; }
        .map-canvas-md { height:500px; background:var(--tblr-border-color, #e2e8f0); }
        .map-canvas-lg { height:600px; background:var(--tblr-border-color, #e2e8f0); }
        .map-canvas-xl { height:70vh; background:var(--tblr-border-color, #e2e8f0); }
        .thead-sticky thead th { position:sticky; top:0; z-index:10; background: var(--tblr-bg-surface-tertiary, #f8fafc); }
        .text-mono-11 { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:11px; }
        .scraper-canvas-bg { background:#0f172a; }
        .scraper-badge--readonly { background: rgba(220,38,38,.9); color:#fff; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; }
        .scraper-badge--interactive { background: rgba(234,179,8,.9); color:#000; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; }
        body.popup-mode > #appScreen > header.navbar { display:none !important; }
        body.popup-mode .popup-hide { display:none !important; }
        body.popup-mode .container-xl { max-width:100% !important; padding:8px 12px !important; }
        body.popup-mode .map-canvas-lg { height:calc(100vh - 200px) !important; }
        body.popup-mode #offTankCounts { display:none !important; }
        .sap-chart-md { height:300px; }
        body.card-fs-on { overflow:hidden; }
        .card.card-fs { position:fixed; inset:0; z-index:9999; border-radius:0; margin:0; }
        .card.card-fs > .card-body { height:100vh !important; }
        .card.card-fs #networkMapContainer,
        .card.card-fs #offshoreMapContainer { height:100vh !important; border-radius:0; }
        .card.card-fs .card-fs-exit { z-index:10000; }
        body.card-fs-on .network-fs-hide { display:none; }
        .netgraph-canvas-bg { background:var(--tblr-bg-surface, #f8fafc); }

/* === Phase 3 round-2 utilities === */
.fs-9  { font-size: 9px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-22 { font-size: 22px; }
.fs-48 { font-size: 48px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-220 { width: 220px; }
.w-250 { width: 250px; }
.w-320 { width: 320px; }
.w-500 { width: 500px; }
.icon-xs { width:12px !important; height:12px !important; font-size:12px; }
.icon-xl { width:48px !important; height:48px !important; font-size:48px; }
.text-mono-10 { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:10px; }
.text-mono-12 { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; }
.text-yellow { color: var(--accent-yellow) !important; }
.h-400 { height: 400px; }
.h-200 { height: 200px; }
.minw-100 { min-width: 100px; }
.minw-120 { min-width: 120px; }
.minw-200 { min-width: 200px; }
.border-start-yellow { border-left: 3px solid var(--accent-yellow) !important; }

/* === Phase 3 round-3 utilities === */
.text-accent { color: var(--accent) !important; }
.opacity-40 { opacity: .4; }
.opacity-60 { opacity: .6; }
.opacity-80 { opacity: .8; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.text-truncate-1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* === DB viewer (dm-database) — full-width data grid === */
.db-viewer-scroll { max-height: calc(100vh - 260px); }
.db-viewer-scroll table th { white-space: nowrap; cursor: default; user-select: none; }
.db-viewer-scroll table th:hover { background: var(--tblr-bg-surface-tertiary, #f8fafc); }
.db-viewer-scroll table td { white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.db-viewer-scroll table td.db-cell-null { color: var(--tblr-secondary); font-style: italic; }
.db-viewer-scroll table td.db-cell-bool .ti-check { color: var(--tblr-green); }
.db-viewer-scroll table td.db-cell-bool .ti-x { color: var(--tblr-red); }
.db-viewer-scroll table td.db-cell-num,
.db-viewer-scroll table td.db-cell-date,
.db-viewer-scroll table td.db-cell-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
.db-cols-menu { position: absolute; top: 100%; right: 0; z-index: 1050; background: var(--tblr-card-bg, #fff); border: 1px solid var(--tblr-border-color, #e2e8f0); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 240px; max-height: 360px; overflow-y: auto; padding: 6px 0; }
.db-cols-menu-item { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.db-cols-menu-item:hover { background: var(--tblr-bg-surface-tertiary, #f8fafc); }
.db-cols-menu-item input { margin: 0; }
.db-cols-menu-toolbar { padding: 6px 12px; border-bottom: 1px solid var(--tblr-border-color, #e2e8f0); display: flex; gap: 8px; font-size: 11px; }
.db-cols-menu-toolbar a { cursor: pointer; color: var(--tblr-primary); text-decoration: none; }

/* Header layout per th: name+sort | filter button | resizer */
.db-viewer-scroll table th { position: relative; padding-right: 22px; }
.db-th-row { display: flex; align-items: center; gap: 4px; }
.db-th-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.db-th-type { font-size: 10px; font-weight: normal; color: var(--tblr-secondary); }
.db-th-sort { cursor: pointer; }
.db-th-filter { background: transparent; border: 0; padding: 0 4px; color: var(--tblr-secondary); cursor: pointer; line-height: 1; }
.db-th-filter:hover { color: var(--tblr-primary); }
.db-th-filter.active { color: var(--tblr-primary); }
.db-col-resizer { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; user-select: none; }
.db-col-resizer:hover { background: var(--tblr-primary); opacity: .35; }
.db-col-resizing { cursor: col-resize !important; user-select: none; }

/* Filter dropdown (Excel-style) — floats at fixed coords */
.db-filter-menu { position: fixed; z-index: 1060; background: var(--tblr-card-bg, #fff); border: 1px solid var(--tblr-border-color, #e2e8f0); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); width: 260px; padding: 8px; }
.db-filter-menu .db-filter-search { width: 100%; }
.db-filter-menu .db-filter-actions { display: flex; gap: 6px; margin-top: 6px; font-size: 11px; }
.db-filter-menu .db-filter-actions a { cursor: pointer; color: var(--tblr-primary); text-decoration: none; }
.db-filter-menu .db-filter-list { max-height: 240px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--tblr-border-color, #e2e8f0); padding-top: 6px; }
.db-filter-menu .db-filter-item { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.db-filter-menu .db-filter-item:hover { background: var(--tblr-bg-surface-tertiary, #f8fafc); }
.db-filter-menu .db-filter-item input { margin: 0; }
.db-filter-menu .db-filter-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.db-filter-menu .db-filter-footer { display: flex; gap: 6px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--tblr-border-color, #e2e8f0); }

/* Detalhes da linha (modal) e marker de truncamento */
.db-pre-wrap { white-space: pre-wrap; word-break: break-word; }
.db-cell-trunc { color: var(--tblr-body-color); }
.db-cell-trunc .ti-cut { font-size: 13px; }

/* === Mail viewer (dm-mail) — list-only com scroll vertical === */
.mail-viewer-list { max-height: calc(100vh - 230px); overflow-y: auto; }

/* === Tabler beta21 navbar fixes ===
   1. --tblr-navbar-active-color do core tem typo: `var(--tblr-body-color) color`
      (literal "color" no fim invalida a var, deixa nav-link.show sem cor visível).
      Re-declara a variável com valor válido.
   2. Garante hover visível em qualquer tema. */
.navbar {
    --tblr-navbar-active-color: var(--tblr-body-color);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.show {
    color: var(--tblr-primary);
}
.navbar .navbar-brand a,
.navbar-brand a:hover,
.navbar-brand a:focus { color: var(--tblr-body-color); text-decoration: none; }
.navbar-brand a .brand-logo { color: inherit; font-weight: 800; letter-spacing: .5px; }