/* ==========================================================================
   Base — two themes, dark by default.
   Every colour goes through a variable; the light theme only redefines them.
   No external dependencies.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
    --bg:        #0b0e13;
    --bg-2:      #11161f;
    --panel:     #141a24;
    --panel-2:   #19212d;
    --line:      #232c3b;
    --line-2:    #2e3a4d;

    --text:      #e6edf3;
    --text-2:    #9aa7b8;
    --muted:     #6b7889;

    --accent:    #4ade80;
    --accent-dk: #22c55e;
    --on-accent: #06210f;
    --danger:    #f87171;
    --danger-bg: rgba(248, 113, 113, .10);
    --danger-br: rgba(248, 113, 113, .30);
    --danger-tx: #fca5a5;
    --ok-bg:     rgba(74, 222, 128, .10);
    --ok-br:     rgba(74, 222, 128, .30);
    --ok-tx:     #86efac;
    --active-bg: rgba(74, 222, 128, .13);
    --active-tx: #6ee7a0;
    --ok-bg-hover:     rgba(74, 222, 128, .20);
    --danger-bg-hover: rgba(248, 113, 113, .18);

    --btn-hover:   #202a38;
    --btn-hover-br:#3a4759;
    --row-hover:   rgba(255, 255, 255, .02);
    --glow:        #16202e;
    --ring:        rgba(74, 222, 128, .12);
    --mark-ring:   rgba(74, 222, 128, .14);
    --shadow:      none;

    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --r: 8px;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg:        #f6f7f9;
    --bg-2:      #ffffff;
    --panel:     #ffffff;
    --panel-2:   #f2f4f7;
    --line:      #e3e7ed;
    --line-2:    #d3d9e2;

    --text:      #1a2029;
    --text-2:    #4d5764;
    --muted:     #7b8593;

    --accent:    #16a34a;
    --accent-dk: #15803d;
    --on-accent: #ffffff;
    --danger:    #dc2626;
    --danger-bg: rgba(220, 38, 38, .07);
    --danger-br: rgba(220, 38, 38, .25);
    --danger-tx: #b91c1c;
    --ok-bg:     rgba(22, 163, 74, .08);
    --ok-br:     rgba(22, 163, 74, .28);
    --ok-tx:     #15803d;
    --active-bg: rgba(22, 163, 74, .10);
    --active-tx: #15803d;
    --ok-bg-hover:     rgba(22, 163, 74, .16);
    --danger-bg-hover: rgba(220, 38, 38, .13);

    --btn-hover:   #e8ecf1;
    --btn-hover-br:#c2cad6;
    --row-hover:   rgba(0, 0, 0, .02);
    --glow:        #e7f3ec;
    --ring:        rgba(22, 163, 74, .15);
    --mark-ring:   rgba(22, 163, 74, .16);
    --shadow:      0 1px 2px rgba(16, 24, 40, .04);

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Numbers: monospace + fixed-width digits so columns line up */
.num, .stat-value, .table .right {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.muted   { color: var(--muted); }
.right   { text-align: right; }
.nowrap  { white-space: nowrap; }
.pad     { padding: 16px 18px; }

.ellipsis {
    max-width: 1px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--panel-2);
    border: 0;
    border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.theme-toggle:hover { background: var(--btn-hover); color: var(--text); }
.theme-toggle svg   { width: 15px; height: 15px; display: block; }

/* Sun shows in dark mode (to switch to light), moon shows in light mode */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.login-theme {
    position: absolute;
    top: 14px;
    right: 14px;
}

.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: auto;
    background: var(--panel-2);
    border: 0;
    border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
}

.nav-burger:hover { color: var(--text); }
.nav-burger svg   { width: 16px; height: 16px; display: block; }

/* ==========================================================================
   Login
   ========================================================================== */

body.is-login {
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 500px at 50% -10%, var(--glow) 0%, transparent 70%),
        var(--bg);
}

.login-shell { width: min(380px, 92vw); padding: 24px 0; }

.login-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px 26px 26px;
    box-shadow: var(--shadow);
}

.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }

.brand-mark { flex: none; display: block; }

.login-brand-name {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--text-2);
}

.login-title { margin: 0 0 18px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }

.login-foot {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: block; margin-bottom: 14px; }

.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-2);
}

.field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    transition: border-color .12s, box-shadow .12s;
}

.field input:focus {
    outline: none;
    border-color: var(--accent-dk);
    box-shadow: 0 0 0 3px var(--ring);
}

/* Buttons carry no border — the fill is the shape. Borders belong to
   boxes: panels, cards, the modal, form fields. */
.btn {
    display: inline-block;
    padding: 10px 16px;
    background: var(--panel-2);
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.btn:hover { background: var(--btn-hover); }

.btn:focus-visible {
    outline: 2px solid var(--accent-dk);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--accent-dk);
    color: var(--on-accent);
    font-weight: 600;
}

.btn-primary:hover { background: var(--accent); }

.btn-block { width: 100%; margin-top: 6px; }

/* Label-style buttons: tinted fill, coloured text, no border. Used where
   the colour carries the meaning — red disables, green enables. */
.btn-label-danger { background: var(--danger-bg); color: var(--danger-tx); }
.btn-label-ok     { background: var(--ok-bg);     color: var(--ok-tx); }

.btn-label-danger:hover { background: var(--danger-bg-hover); }
.btn-label-ok:hover     { background: var(--ok-bg-hover); }

/* Icon + label. On phones the label goes and the icon carries it. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-icon svg { width: 14px; height: 14px; flex: none; }
.btn-sm    { padding: 5px 10px; font-size: 12px; }
.btn-ghost { background: transparent; }

.alert {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.alert-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-br);
    color: var(--danger-tx);
}

/* ==========================================================================
   Signed-in layout
   ========================================================================== */

.shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }

.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    padding: 20px 14px;

    /* Stays put while the content scrolls. Sticky rather than fixed, so it
       keeps its grid column and the main area needs no offset. */
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;   /* mobile browsers: excludes the address bar */
    overflow: hidden; /* only .nav scrolls, never the whole sidebar */
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px 20px;
}

.sidebar-brand .nav-burger { margin-left: auto; }

/* Desktop: the drawer is just the column that holds the nav and the footer */
.nav-drawer { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-drawer-head { display: none; }
.nav-backdrop { display: none; }

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;

    /* min-height:0 is what actually lets a flex child scroll — without it
       the list grows and pushes the footer off the bottom instead. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.nav::-webkit-scrollbar        { width: 8px; }
.nav::-webkit-scrollbar-track  { background: transparent; }
.nav::-webkit-scrollbar-thumb  { background: var(--line-2); border-radius: 4px; }
.nav::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 13px;
}

.nav-icon { display: inline-flex; flex: none; width: 16px; height: 16px; opacity: .75; }
.nav-icon svg { width: 16px; height: 16px; }
.nav-link:hover .nav-icon, .nav-link.is-active .nav-icon { opacity: 1; }
.nav-group-toggle .nav-label { flex: 1; text-align: left; }

.nav-link:hover { background: var(--panel-2); color: var(--text); }

/* Active item reads as a label: tinted fill and green text, no rule */
.nav-link.is-active {
    background: var(--active-bg);
    color: var(--active-tx);
}

.nav-link.is-active:hover {
    background: var(--active-bg);
    color: var(--active-tx);
}

/* Never shrinks, so the avatar and sign out stay visible at the bottom */
/* Collapsible nav group */
.nav-group { display: flex; flex-direction: column; }

.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.nav-caret {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform .16s ease;
}

.nav-group.is-open .nav-caret { transform: rotate(180deg); }

/* Animating to auto height is not possible, so the row goes 0fr -> 1fr.
   That needs exactly ONE grid child: with several, only the first row
   gets the template and the rest fall into auto rows, which is why the
   links were clipped. Hence the wrapper. */
.nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
}

.nav-sub-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-height: 0;
}

.nav-group.is-open .nav-sub { grid-template-rows: 1fr; }

/* A little air once the group is open */
.nav-group.is-open .nav-sub-inner { padding-top: 2px; }

/* Sub-items: no guide line, dimmer text that lights up on hover; the
   active one keeps the green pill */
.nav-sub-link {
    margin-left: 25px;
    padding-left: 10px;
    font-size: 12.5px;
    color: var(--muted);
}
.nav-sub-link:not(.is-active):hover { color: var(--text); background: var(--panel-2); }
/* Red dot at the right of a brand whose report jobs are off (brands.run_report = 0) */
.nav-dot {
    flex: 0 0 auto;
    margin-left: auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-bg);
}

@media (prefers-reduced-motion: reduce) {
    .nav-sub { transition: none; }
    .nav-caret { transition: none; }
}

.sidebar-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.foot-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.who {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 6px;
    min-width: 0;
}

.avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--text-2);
}

.who-name {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-signout { text-decoration: none; }
.btn-signout:hover { color: var(--danger); }

.main { padding: 26px 28px 40px; min-width: 0; }

/* ==========================================================================
   Page header and cards
   ========================================================================== */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

/* The name gives way first: the dot and the kebab keep their place and
   only the text ellipsises. */
.page-title {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.3px;
}

.title-text {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-title .dot,
.page-title .btn-dots { flex: 0 0 auto; }
.page-sub   { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.page-meta  { display: flex; align-items: center; gap: 10px; font-size: 12px; flex: 0 0 auto; }

.tag {
    padding: 2px 8px;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat {
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* A tile that opens a detail page */
a.stat-link { display: block; color: inherit; text-decoration: none; transition: border-color .12s; }
a.stat-link:hover { border-color: var(--accent); }
a.stat-link:hover .stat-value { color: var(--accent); }
.stat-arrow { opacity: 0; transition: opacity .12s; }
a.stat-link:hover .stat-arrow { opacity: 1; }

/* Always-visible "opens a page" mark on a clickable tile, top right */
a.stat-link { position: relative; }
.stat-open {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text-2);
    transition: background .12s, color .12s;
}
.stat-open svg { width: 13px; height: 13px; }
a.stat-link:hover .stat-open { background: var(--ok-bg); color: var(--accent); }
.stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.5px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}

.panel-title { margin: 0; font-size: 13px; font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

/* ==========================================================================
   Bar chart (pure CSS)
   ========================================================================== */

.chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 190px;
    padding: 18px 18px 8px;
}

.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.chart-bar {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dk) 100%);
    border-radius: 3px 3px 0 0;
    min-height: 0;
    transition: opacity .12s;
}

.chart-col:hover .chart-bar { opacity: .75; }

.chart-x {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.table th {
    padding: 9px 18px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.table td {
    padding: 9px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--row-hover); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The fixed column widths add up to 590px; below this the flexible
   Destination column gets squeezed to nothing, so scroll instead. */
.table-scroll .table { min-width: 820px; }

/* Key/value tables: the number column does not need half the width */
.table-kv th:last-child,
.table-kv td:last-child { width: 120px; }

/* Panels sharing a row match the tallest one, so the row reads as a row
   rather than as boxes of assorted heights. */
.grid-2 { align-items: stretch; }
.grid-2 > .panel { align-self: stretch; }


/* ==========================================================================
   Table tools, status dots and row actions
   ========================================================================== */

.table-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.table-tool { display: flex; align-items: center; gap: 6px; font-size: 12px; }

.table-tool select:not(.qselect-native),
.table-tool input {
    padding: 5px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}

.table-tool input { width: 170px; }

.table-tool select:focus,
.table-tool input:focus {
    outline: none;
    border-color: var(--accent-dk);
    box-shadow: 0 0 0 3px var(--ring);
}

.table-sortable th[data-sort] { cursor: pointer; user-select: none; }
.table-sortable th[data-sort]:hover { color: var(--text-2); }

.table-sortable th[data-sort]::after {
    content: "\2195";
    margin-left: 6px;
    opacity: .35;
    font-size: 10px;
}

.table-sortable th.sort-asc::after  { content: "\2191"; opacity: 1; }
.table-sortable th.sort-desc::after { content: "\2193"; opacity: 1; }

.table-foot { border-top: 1px solid var(--line); margin: 0; font-size: 12px; }

.col-code { width: 120px; }
.col-n    { width: 90px; }
/* "04/09/2026 17:33" in mono plus the cell padding needs ~165px; at
   130px it was running into the next column. */
.col-date { width: 165px; }
.col-st   { width: 90px; text-align: center; }
.col-act  { width: 110px; }

/* Status cells: the dot sits centred under its heading instead of
   hugging the previous column. */
.table td.col-st-cell { text-align: center; }

.link-title { font-weight: 500; }

.dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
}

.dot-on  { background: var(--accent);  box-shadow: 0 0 0 3px var(--mark-ring); }
.dot-off { background: var(--danger);  box-shadow: 0 0 0 3px var(--danger-bg); }

form.inline { display: inline; }

/* The last column needs breathing room, or the buttons touch the border */
.table td:last-child, .table th:last-child { padding-right: 18px; }

.alert-ok {
    background: var(--ok-bg);
    border: 1px solid var(--ok-br);
    color: var(--ok-tx);
    word-break: break-all;
}

/* ==========================================================================
   Clickable rows, code cell and link detail
   ========================================================================== */

.row-link { cursor: pointer; }
.row-link:hover { background: var(--row-hover); }

.row-link:focus-visible {
    outline: 2px solid var(--accent-dk);
    outline-offset: -2px;
}

/* Country flags. The ring matters: a flag that is mostly white (JP, PL)
   would otherwise dissolve into a light theme's background, and one that
   is mostly dark does the same in the dark theme. */
.flag {
    width: 20px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line-2);
    object-fit: cover;
    vertical-align: middle;
}

/* Same footprint, so a column of flags stays aligned when one is unknown.
   The question mark is drawn in the ring's own colour: present enough to
   say "no flag here", quiet enough not to compete with the real ones. */
.flag-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    background: var(--bg-2);
    box-shadow: 0 0 0 1px var(--line-2);
    color: var(--line-2);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.flag-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

/* Country names run long — Bosnia and Herzegovina, British Indian Ocean
   Territory — and the flag must not be squeezed out to make room, so the
   name is what gives way. The code is in the cell's title either way. */
.flag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sans);
}

.code-plain { color: var(--text-2); }

/* The code doubles as the copy control, so it has to read as text and
   behave as a button: no chrome until the pointer is on it, and a tick
   that appears in place rather than shifting the line. */
.code-copy {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-2);
    cursor: pointer;
}

.code-copy:hover        { color: var(--text); }
.code-copy.is-copied    { color: var(--accent); }
.code-copy.is-failed    { color: var(--danger); }

.code-copy-tick {
    width: 0;
    height: 13px;
    opacity: 0;
    transition: opacity .12s ease;
}

.code-copy.is-copied .code-copy-tick { width: 13px; opacity: 1; }

.code-cell { display: inline-flex; align-items: center; gap: 8px; }

.eye {
    display: inline-flex;
    color: var(--muted);
    opacity: 0;
    transition: opacity .12s, color .12s;
}

.eye svg { width: 15px; height: 15px; display: block; }
.eye:hover { color: var(--accent); }

.row-link:hover .eye,
.row-link:focus-within .eye { opacity: 1; }

/* Touch devices have no hover, so the icon stays visible */
@media (hover: none) {
    .eye { opacity: 1; }
}

.crumb { margin: 0 0 14px; font-size: 12px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--text); }

.head-main { min-width: 0; }

.meta-line .dot { flex: 0 0 auto; }


.short-url {
    font-size: 13px;
    color: var(--accent);
    word-break: break-all;
}

.short-url:hover { text-decoration: underline; }


/* Visit log */
/* Wider than .col-date: this one shows seconds, and nowrap would push the
   overflow straight into the next cell. */
.col-datetime { width: 172px; }
.col-ip  { width: 130px; }
.col-dev { width: 90px; }

/* Users table */
.col-user { width: 200px; }

/* Two buttons in the actions cell instead of one */
.col-act-2 { width: 200px; }

.user-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.user-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-handle { font-size: 11px; }

.avatar-sm { width: 26px; height: 26px; }

/* Two fields side by side inside a modal */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }

/* Brands */
.brand-logo {
    flex: none;
    width: 72px;
    height: 36px;             /* the legacy logos are all 2:1 */
    border-radius: 5px;
    object-fit: cover;
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.brand-logo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
}

.brand-logo-lg { width: 64px; height: 32px; vertical-align: middle; margin-right: 10px; }
.brand-logo-xl { width: 180px; height: 90px; border-radius: 8px; font-size: 18px; }

.brand-title { display: flex; align-items: center; }

.page-back { margin-bottom: 14px; }
/* Breadcrumb above a tracker page: Brand › tracker › Users › Costs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs .crumb-sep { opacity: .5; }
.crumbs .is-current { color: var(--text); }

/* Brand reports */
.report-head { align-items: center; }
.report-brand { display: flex; align-items: center; gap: 14px; }
.report-brand .brand-logo-lg { width: 96px; height: 48px; margin: 0; }

.report-filters { display: flex; align-items: center; gap: 12px; }

.report-range-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    background: var(--panel);            /* white on light, tile colour on dark */
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.report-range-btn:hover { background: var(--panel-2); }
.report-range-btn svg { width: 15px; height: 15px; }
/* The account switch next to the date range (Clever Stake): same height and look as the button */
.report-filters .qselect { align-self: stretch; }
.report-filters .qselect-control {
    height: 100%; padding: 0 12px;
    background: var(--panel); border-color: var(--line); box-shadow: var(--shadow);
}
.report-filters .qselect-control:hover { background: var(--panel-2); }
.report-range-btn .nav-caret { width: 12px; height: 12px; opacity: .6; }

.stats-report { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Report tiles carry long money figures: smaller type that shrinks with
   the tile, and never overflows the box. */
.stats-report .stat { min-width: 0; }
.stats-report .stat-value {
    font-size: clamp(16px, 1.45vw, 22px);
    letter-spacing: -.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Never a lone tile on its own row. The grid is decided from the width
   of the content area (not the viewport) and from how many tiles there
   are: 8 in All time, 6 in a date range. Below the width where they fit
   on one line, the count drops to something that divides evenly. */
.main { container-type: inline-size; position: relative; }

/* Loading veil over the content area only — the sidebar stays usable */
.report-loading {
    position: fixed;            /* the viewport, minus the sidebar column */
    inset: 0 0 0 216px;
    z-index: 30;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.report-loading[hidden] { display: none; }

.report-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-2);
}

.spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--line-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

@container (max-width: 1320px) {
    .stats-report.stats-all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 1000px) {
    .stats-report.stats-all,
    .stats-report.stats-range { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
    .stats-report.stats-all,
    .stats-report.stats-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
}
.stat-sub { margin-top: 4px; font-size: 11px; opacity: .6; }
/* The carry over note stays small and mid-grey whatever colour the tile takes */
/* Ad-network dots after the costs (one per network behind the code).
   Their text sits in data-tip; ui.js shows it in the shared .tip-box */
.ad-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.stat-label .ad-dots { margin-left: 4px; }
.ad-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    cursor: help; outline: none;
}
.ad-dot.ad-ok   { background: var(--ok-tx); }
.ad-dot.ad-late { background: #e0b341; }
.ad-dot.ad-down { background: var(--danger); }
.ad-dot.ad-off  { background: #7fb3d5; opacity: .45; }   /* switched off: a pale blue, not a verdict */

.table td.nowrap, .table th.nowrap { white-space: nowrap; }
/* All accounts, Best country: flag · ISO · FTD users, evenly spaced and right-aligned */
.best-country { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; cursor: help; outline: none; }
.best-country .flag { margin: 0; }
/* All accounts, Top countries tile: five flags in a row, left to right = most FTD users first */
.top-countries { display: flex; gap: 12px; align-items: center; min-height: 1.4em; overflow: hidden; }
.top-country { display: inline-flex; flex: 0 1 20px; min-width: 0; cursor: help; outline: none; }
/* the flags shrink with the tile (5 in a row on any width) and never grow past 20px */
.top-country .flag { margin: 0; width: 100%; max-width: 20px; height: auto; aspect-ratio: 4 / 3; border-radius: 2px; }

/* All accounts, State column: two dots (snapshot, login) that open the brand form */
.state-dots { display: inline-flex; gap: 5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; background: transparent; border: 0; }
.state-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; cursor: pointer; }
.switch-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.state-dots:hover { background: var(--panel-2); }
.state-dots .ad-dot { width: 9px; height: 9px; }

/* Small "i" circle with a tooltip (NCO tile), text in data-tip */
.info-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 4px; vertical-align: 1px;
    border: 1px solid currentColor; border-radius: 50%;
    font-size: 9px; font-weight: 700; line-height: 1; font-style: normal;
    opacity: .7; cursor: help;
}
.info-tip:hover, .info-tip:focus-visible { opacity: 1; outline: none; }

/* Shared floating tooltip (ui.js): fixed to the viewport, so a table or
   card with overflow hidden can never cut it; the arrow is moved by JS to
   keep pointing at the element */
.tip-box {
    position: fixed; left: 0; top: 0; z-index: 1000;
    max-width: calc(100vw - 16px);
    padding: 8px 12px; border-radius: 8px;
    background: var(--text); color: var(--bg);
    font-size: 11px; font-weight: 500; line-height: 1.45;
    white-space: pre-line; text-align: left;
    pointer-events: none; opacity: 0; transform: translateY(3px);
    transition: opacity .12s, transform .12s;
}
.tip-box.is-on { opacity: 1; transform: translateY(0); }
.tip-box.is-below { transform: translateY(-3px); }
.tip-box.is-below.is-on { transform: translateY(0); }
.tip-arrow {
    position: absolute; top: 100%; left: 50%;
    margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text);
}
.tip-box.is-below .tip-arrow { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }

.stat[hidden] { display: none; }

.stat-signed.stat-pos { background: var(--ok-bg); border-color: var(--ok-br); }
.stat-signed.stat-pos .stat-value, .stat-signed.stat-pos .stat-label { color: var(--ok-tx); }
.stat-signed.stat-neg { background: var(--danger-bg); border-color: var(--danger); }
.stat-signed.stat-neg .stat-value, .stat-signed.stat-neg .stat-label { color: var(--danger-tx); }

.is-pos { color: var(--accent); }
.is-neg { color: var(--danger-tx); }

.report-tabs { display: flex; align-items: center; gap: 8px; }

.tab {
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    background: var(--panel-2);
    cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--ok-bg); color: var(--accent); }

.table-scroll .table-report, .table-report {
    width: 100% !important;    /* DataTables writes its own inline width */
    min-width: 1180px;         /* below this the panel scrolls sideways */
    table-layout: fixed;       /* the percentages on the columns are the law */
}
.table-report th, .table-report td { white-space: nowrap; }

/* Deposits: company badge in front of a tracker when every company is shown */
.dep-company {
    margin-right: 5px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-2);
}
.chip .dep-company { margin-right: 1px; }

/* In the list the badge gets a background, and is a touch smaller */
.table-deposits .dep-company {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--panel-2);
    font-size: 9px;
    vertical-align: 1px;
}

.table-deposits { min-width: 720px; table-layout: fixed; width: 100% !important; }
.table-costs { min-width: 720px; table-layout: fixed; width: 100% !important; }
.table-costs th, .table-costs td { white-space: nowrap; }
.table-costs .flag { vertical-align: -2px; border-radius: 2px; }
.table-costs tr.row-unknown td { color: var(--text-2); }
.table-deposits th, .table-deposits td { white-space: nowrap; }
.tab b { margin-left: 4px; font-weight: 600; }

/* A value that opens a detail page: plain, green on hover */
.cell-link { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: inherit; text-decoration: none; }
.cell-link:hover { color: var(--accent); }
.cell-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px;
    background: var(--panel-2); color: var(--text-2);
    transition: background .12s, color .12s;
}
.cell-open svg { width: 11px; height: 11px; }
.cell-link:hover .cell-open { background: var(--ok-bg); color: var(--accent); }

/* Tracker -> its users: the whole name + code block is the link */
.tracker-link { display: block; color: var(--text); text-decoration: none; }
.tracker-link .tracker-name { transition: color .12s; }
.tracker-link:hover .tracker-name { color: var(--accent); }

/* Country chips above the users list */
.country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}
.country-chips:empty { display: none; }
/* While the chips are being fetched: a quiet note where they will show */
.chips-loading {
    display: flex; align-items: center; gap: 8px;
    grid-column: 1 / -1;
    padding: 6px 2px;
    font-size: 13px;
    color: var(--text-2);
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; flex: 0 0 auto; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;      /* the border only shows on hover/active */
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.chip .flag { width: 16px; height: 12px; border-radius: 2px; }
.chip b { font-weight: 600; color: var(--text); }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.is-active { background: var(--ok-bg); border-color: var(--ok-br); color: var(--accent); }
.chip.is-active b { color: var(--accent); }
.chip-more { display: none; }              /* only on a phone (see media query) */
@media (max-width: 640px) { .chip-more { display: inline-flex; } }

/* Country name on hover, above the chip */
.chip[data-tip] { position: relative; }
.chip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(3px);
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--text);
    color: var(--bg);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s, transform .12s;
    z-index: 5;
}
.chip[data-tip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    z-index: 5;
}
.chip[data-tip]:hover::after, .chip[data-tip]:focus-visible::after,
.chip[data-tip]:hover::before, .chip[data-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%); }

.table-users { min-width: 900px; table-layout: fixed; width: 100% !important; }
.table-users th, .table-users td { white-space: nowrap; }
.table-users .flag { vertical-align: -2px; border-radius: 2px; }
[data-users-panel][hidden], [data-report-panel][hidden] { display: none; }

/* First column pinned while the rest scrolls sideways — every data table */
.table-report th:first-child, .table-report td:first-child,
.table-users th:first-child,  .table-users td:first-child,
.table-costs th:first-child,  .table-costs td:first-child,
.table-deposits th:first-child, .table-deposits td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
}
.table-report thead th:first-child, .table-users thead th:first-child,
.table-costs thead th:first-child, .table-deposits thead th:first-child { z-index: 3; background: var(--panel-2); }

/* Header row: plain, scrolls with the page; only the first column is
   pinned during the horizontal scroll. */
.table-report thead th, .table-users thead th, .table-costs thead th, .table-deposits thead th { background: var(--panel-2); }
.table-report tbody tr:hover td:first-child, .table-users tbody tr:hover td:first-child,
.table-costs tbody tr:hover td:first-child, .table-deposits tbody tr:hover td:first-child {
    /* same shade as the rest of the row: the translucent hover tint over the panel */
    background-color: var(--panel);
    background-image: linear-gradient(var(--row-hover), var(--row-hover));
}
.table-report td.col-tracker { overflow: hidden; text-overflow: ellipsis; }   /* only the tracker may be cut */
.table-report .col-tracker { width: 17%; }
.table-report td.right { padding-left: 8px; }
.tracker-name { display: block; font-weight: 500; }
.tracker-code { display: block; font-size: 11px; }

/* ---- DataTables, styled like .table (its own stylesheet is not loaded) ---- */
.report-tabs[hidden], .panel-title[hidden] { display: none; }

table.dataTable { width: 100% !important; margin: 0; border-collapse: collapse; }
table.dataTable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.dataTable thead th.right, .table th.right { text-align: right; }
table.dataTable thead th:hover { color: var(--text-2); }

/* Sort arrows: dim both-ways by default, green in the active direction */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after { content: "\2195\FE0E"; margin-left: 6px; opacity: .35; font-size: 10px; font-family: var(--mono); }
table.dataTable thead th.sorting_asc::after  { content: "\2191\FE0E"; opacity: 1; color: var(--accent); }
table.dataTable thead th.sorting_desc::after { content: "\2193\FE0E"; opacity: 1; color: var(--accent); }
table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { color: var(--text-2); }

/* Controls in the panel head: same look as the site's table tools */
.dt-top { display: flex; align-items: center; gap: 14px; }
.dataTables_length, .dataTables_filter { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dataTables_filter label, .dataTables_length label { display: flex; align-items: center; gap: 6px; }
.dataTables_length .qselect { min-width: 84px; }
.dataTables_length .qselect-control { padding: 5px 8px; font-size: 12px; }

.dataTables_filter input {
    width: 170px;
    padding: 5px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}
.dataTables_filter input:focus { outline: none; border-color: var(--accent-dk); box-shadow: 0 0 0 3px var(--ring); }

/* While a search request is in flight: a small spinner inside the field */
.dataTables_filter label { position: relative; }
.dataTables_filter.is-searching input { padding-right: 26px; }
.dataTables_filter.is-searching label::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border: 2px solid var(--line-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* Footer: count on the left, pager on the right */
.dt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    font-size: 12px;
}
.dataTables_info { color: var(--muted); font-family: var(--mono); }
.dataTables_paginate { display: flex; gap: 4px; }
.dataTables_paginate .paginate_button {
    padding: 4px 9px;
    border-radius: 5px;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
}
.dataTables_paginate .paginate_button:hover { background: var(--row-hover); color: var(--text); }
.dataTables_paginate .paginate_button.current { background: var(--ok-bg); color: var(--accent); }
.dataTables_paginate .paginate_button.disabled { opacity: .35; cursor: default; }
.dataTables_paginate .ellipsis { padding: 4px 4px; color: var(--muted); }

.dataTables_processing {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 6px; text-align: center;
    background: var(--panel-2); color: var(--muted);
    border-bottom: 1px solid var(--line); font-size: 11px;
}
.dataTables_wrapper { position: relative; }
table.dataTable td.dataTables_empty { padding: 18px; color: var(--muted); }


.link-muted { color: var(--text-2); text-decoration: none; }
.link-muted:hover { color: var(--text); }
.field-row .field { flex: 1; min-width: 0; }

/* Only applies when a select was not enhanced (no JS) */
.field select:not(.qselect-native) {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
}

.field select:not(.qselect-native):focus {
    outline: none;
    border-color: var(--accent-dk);
    box-shadow: 0 0 0 3px var(--ring);
}

/* Inside a form field the control should fill the width */
.field .qselect { display: block; width: 100%; }


.meta-line {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
    font-size: 13px;
    /* Context, not headline: it sits under the name and stays quiet. */
    color: var(--text-2);
    font-weight: 400;
}

.meta-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }

.meta-icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--muted);
}

/* The kebab beside the title: the addresses are one click away instead of
   taking a row of their own. */
.btn-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.btn-dots:hover  { background: var(--bg-2); color: var(--text); }
.btn-dots svg    { width: 16px; height: 16px; }

/* The two addresses, in the order the traffic travels. The icon and the
   copy button on either side never move; only the URL gives way, and it
   is cut in the middle so the tail stays readable. */
.url-flow { display: flex; flex-direction: column; gap: 2px; }

.url-flow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg-2);
    border-radius: 6px;
}

.url-flow-row > .meta-icon,
.url-flow-row > .btn-copy { flex: 0 0 auto; }

.url-flow-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.url-flow-label {
    font-size: 10.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.url-flow-arrow {
    display: flex;
    justify-content: center;
    color: var(--muted);
}

.url-flow-arrow svg { width: 16px; height: 16px; }

/* Middle ellipsis: the head shrinks, the tail is pinned. */
.url-mid {
    display: flex;
    min-width: 0;
    word-break: normal;
    text-decoration: none;
}

/* max-content caps the growth at the text's natural width, so when the URL
   fits, head and tail sit flush and the split is invisible; when it does
   not, the head fills the row exactly and the ellipsis lands against the
   tail with no gap. */
.url-mid-head {
    flex: 1 1 auto;
    min-width: 0;
    max-width: max-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.url-mid-tail { flex: 0 0 auto; white-space: nowrap; }

.dest-url {
    font-size: 13px;
    color: var(--text-2);
    word-break: break-all;
}

.dest-url:hover { color: var(--text); text-decoration: underline; }

/* Table footer, pager and loading state */
.qtable-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    font-size: 12px;
}

.pager-buttons { display: flex; gap: 4px; flex-wrap: wrap; }

.pager-buttons .btn {
    min-width: 30px;
    padding: 5px 8px;
    font-family: var(--mono);
}

.pager-buttons .btn.is-current {
    background: var(--active-bg);
    color: var(--active-tx);
}

.pager-buttons .btn:disabled { opacity: .35; cursor: default; }
.pager-buttons .btn:disabled:hover { background: var(--panel-2); }

/* A quiet spinner beside the panel title while a page is in flight */
.qtable-spinner {
    display: none;
    width: 11px;
    height: 11px;
    margin-left: 8px;
    border: 2px solid var(--line-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    vertical-align: -1px;
    animation: qtable-spin .6s linear infinite;
}

[data-table].is-loading .qtable-spinner { display: inline-block; }
[data-table].is-loading tbody { opacity: .5; transition: opacity .1s; }

@keyframes qtable-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .qtable-spinner { animation-duration: 2s; }
}

/* ==========================================================================
   Custom select
   ========================================================================== */

/* The native select stays in the DOM as the form value; it is hidden but
   still focusable-adjacent, never display:none, so validation messages
   and form submission behave normally. */
.qselect-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.qselect {
    position: relative;
    display: inline-block;
    min-width: 120px;
}

.qselect-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

.qselect-control:hover { border-color: var(--btn-hover-br); }

.qselect.is-open .qselect-control,
.qselect-control:focus-visible {
    outline: none;
    border-color: var(--accent-dk);
    box-shadow: 0 0 0 3px var(--ring);
}

.qselect-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.qselect-placeholder { color: var(--muted); }

.qselect-caret {
    flex: none;
    display: flex;
    color: var(--muted);
    transition: transform .16s ease;
}

.qselect-caret svg { width: 14px; height: 14px; display: block; }
.qselect.is-open .qselect-caret { transform: rotate(180deg); }

/* ---- menu ---- */

.qselect-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: qselect-in .12s ease-out;
}

.qselect.drops-up .qselect-menu { top: auto; bottom: calc(100% + 5px); }

@keyframes qselect-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.qselect-search { padding: 8px; border-bottom: 1px solid var(--line); }

.qselect-search input {
    width: 100%;
    padding: 7px 9px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}

.qselect-search input:focus {
    outline: none;
    border-color: var(--accent-dk);
}

.qselect-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.qselect-list::-webkit-scrollbar { width: 8px; }
.qselect-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.qselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* display:flex above beats the browser's [hidden] (same specificity, and
   author styles win over the user agent), so filtering hid nothing. */
.qselect-option[hidden] { display: none; }

.qselect-option.is-active   { background: var(--panel-2); }
.qselect-option.is-selected { color: var(--active-tx); }
.qselect-option.is-disabled { opacity: .45; cursor: not-allowed; }

.qselect-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.qselect-tick {
    flex: none;
    display: flex;
    opacity: 0;
    color: var(--active-tx);
}

.qselect-tick svg { width: 13px; height: 13px; display: block; }
.qselect-option.is-selected .qselect-tick { opacity: 1; }

.qselect-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }

/* ---- icons and dots ---- */

.qselect-icon { flex: none; font-size: 13px; line-height: 1; }
.qselect-flag { flex: none; }

.qselect-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}

/* ---- tags (multiple) ---- */

.qselect.is-multi .qselect-control { padding: 5px 8px; min-height: 36px; }

.qselect-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px 2px 7px;
    background: var(--panel-2);
    border-radius: 4px;
    font-size: 12px;
    max-width: 160px;
}

.qselect-tag .qselect-label { overflow: hidden; text-overflow: ellipsis; }

.qselect-tag-x {
    color: var(--muted);
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
}

.qselect-tag-x:hover { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    .qselect-menu { animation: none; }
    .qselect-caret { transition: none; }
}

/* ==========================================================================
   Copy button
   ========================================================================== */

.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 7px 9px;
    color: var(--text-2);
}

.btn-copy:hover { color: var(--text); }

/* Both icons share one grid cell, so swapping them shifts nothing */
.copy-icons { display: grid; }
.copy-icons svg {
    grid-area: 1 / 1;
    width: 15px;
    height: 15px;
    display: block;
}

.btn-copy .icon-check,
.btn-copy .copy-word { opacity: 0; }

.btn-copy .icon-check { transform: scale(.5); }

/* The label slides open rather than snapping the button wider */
.copy-word {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    transition: max-width .18s ease, opacity .18s ease, margin-left .18s ease;
}

.btn-copy.is-copied { background: var(--ok-bg); color: var(--ok-tx); }
.btn-copy.is-copied .icon-copy  { opacity: 0; }
.btn-copy.is-copied .icon-check { opacity: 1; animation: copy-pop .26s ease-out forwards; }
.btn-copy.is-copied .copy-done  { max-width: 70px; opacity: 1; margin-left: 6px; }

.btn-copy.is-failed { background: var(--danger-bg); color: var(--danger-tx); }
.btn-copy.is-failed .copy-fail { max-width: 70px; opacity: 1; margin-left: 6px; }

@keyframes copy-pop {
    0%   { transform: scale(.5); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-copy.is-copied .icon-check { animation: none; transform: none; }
    .copy-word { transition: none; }
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 20px;
}

/* Without this the display:grid above beats the browser's [hidden] (same
   specificity, and author styles win over the user agent), leaving the
   modal permanently on top of the page swallowing clicks. */
.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.modal-card {
    position: relative;
    width: min(460px, 100%);
    /* A grid item's automatic minimum size can push it past its own width;
       long URLs inside would otherwise widen the card past the screen. */
    min-width: 0;
    max-width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    animation: modal-in .14s ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-card { animation: none; }
}

.modal-sm { width: min(520px, 100%); }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.modal-x {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.modal-x:hover { color: var(--text); }

.modal-body { padding: 18px; min-width: 0; }
.modal-note { margin: 2px 0 0; font-size: 12px; }

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Empty state / 404
   ========================================================================== */

.empty { padding: 60px 20px; text-align: center; }
.empty-code  { font-family: var(--mono); font-size: 44px; font-weight: 600; color: var(--line-2); }
.empty-title { margin: 6px 0 4px; font-size: 17px; }
.empty-text  { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet and below: the sidebar becomes a top bar and the nav collapses. */
@media (max-width: 900px) {
    /* Top bar row is content height; the main row takes the rest. Without
       this, while the page is still streaming in (main empty) the grid
       stretched the bar's row to the full viewport and the bar floated
       in the middle of the screen. */
    .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
    .report-loading { inset: 0; }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        align-self: start;
        display: grid;
        align-content: start;
        grid-template-columns: 1fr;
        gap: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 10px 14px;

        /* Back to content height: as a top bar it must not fill the screen */
        height: auto;
        max-height: 100dvh;
        overflow-y: auto;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0;
    }

    .nav-burger { display: inline-flex; }

    /* Off-canvas drawer: slides in from the right, styled like the desktop
       sidebar — MENU title, the groups, then avatar / theme / sign out */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        transition: opacity .25s ease;
    }
    .nav-backdrop[hidden] { display: none; }
    .sidebar.nav-open .nav-backdrop { opacity: 1; }

    .nav-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        width: min(300px, 86vw);
        display: flex;
        flex-direction: column;
        background: var(--bg-2);
        border-left: 1px solid var(--line);
        padding: 16px 14px 18px;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.32, .72, .24, 1);
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }
    .sidebar.nav-open .nav-drawer { transform: none; }
    @media (prefers-reduced-motion: reduce) {
        .nav-drawer, .nav-backdrop { transition: none; }
    }

    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--line);
    }
    .nav-drawer-title {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .nav-drawer-x { margin-left: 0; }

    .nav { flex: 1; min-height: 0; overflow-y: auto; margin-top: 6px; gap: 4px; }

    /* A touch bigger on a phone: burger, rows, icons, sub-items */
    .nav-burger { width: 38px; height: 38px; }
    .nav-burger svg { width: 20px; height: 20px; }
    .nav-drawer-title { font-size: 12px; }
    .nav-link { padding: 11px 12px; font-size: 15px; gap: 11px; border-radius: 8px; }
    .nav-icon, .nav-icon svg { width: 19px; height: 19px; }
    .nav-caret { width: 18px; height: 18px; }
    .nav-sub-link { font-size: 14px; padding: 10px 12px; margin-left: 30px; }
    .sidebar-foot .theme-toggle { width: 36px; height: 36px; }
    .sidebar-foot .theme-toggle svg { width: 17px; height: 17px; }
    .who-name { font-size: 14px; }
    .avatar { width: 34px; height: 34px; }

    .sidebar-foot { margin-top: 10px; padding-top: 12px; }

    body.nav-locked { overflow: hidden; }

    .main { padding: 20px 16px 34px; }
}

/* ==========================================================================
   Desktop app frame
   ========================================================================== */

/* The document itself must not scroll. A sticky sidebar still rides along
   with macOS elastic overscroll, because the rubber band moves the whole
   viewport and takes fixed and sticky elements with it. Handing the scroll
   to the content pane instead means there is no document scroll to bounce,
   so the sidebar is genuinely immovable.

   Phones keep the normal document scroll: an inner scroller there stops the
   browser from hiding its address bar, which costs a strip of screen on
   every page. */
@media (min-width: 641px) {
    html, body { overflow: hidden; }

    .shell { height: 100dvh; }

    /* No longer sticky: it is a full-height column in a frame that cannot
       move, which is what sticky was imitating. */
    .sidebar { position: static; }

    .main {
        min-height: 0;          /* lets a grid child actually overflow */
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color: var(--line-2) transparent;
    }

    .main::-webkit-scrollbar        { width: 10px; }
    .main::-webkit-scrollbar-track  { background: transparent; }
    .main::-webkit-scrollbar-thumb  { background: var(--line-2); border-radius: 5px; }
    .main::-webkit-scrollbar-thumb:hover { background: var(--muted); }
}

/* Phones */
@media (max-width: 640px) {
    .page-head { gap: 10px; }

    .panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .table-tools { width: 100%; }
    .table-tool  { flex: 1; }
    .table-tool input { width: 100%; min-width: 0; }

    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-value { font-size: 20px; }

    .main { padding: 16px 12px 30px; }
    .chart { height: 150px; padding: 14px 12px 6px; }

    /* Every other label, otherwise 14 dates overlap into a grey smear.
       The survivors need to overflow their own column or they get clipped
       to "24/" — there is room, because the neighbour is now empty. */
    .chart-col:nth-child(even) .chart-x { visibility: hidden; }
    .chart-x { overflow: visible; }

    /* Action buttons keep the icon only; the label lives in title/aria */
    .btn-icon span { display: none; }
    .btn-icon { padding: 7px 9px; }

    /* Secondary columns go away on a phone; the detail page still has them */
    .hide-sm { display: none; }
    .table-scroll .table { min-width: 480px; }
    /* Country chips: a 4-wide grid, 3 rows, the 12th cell is the +/- toggle */
    .country-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 14px; }
    .country-chips .chip { justify-content: center; padding: 6px 4px; }
    .country-chips .chip span { overflow: hidden; text-overflow: ellipsis; }
    .country-chips .chip-extra { display: none; }
    .country-chips.is-open .chip-extra { display: inline-flex; }
    .country-chips .chip-more { color: var(--accent); border-style: dashed; border-color: var(--ok-br); }
    .country-chips .chip-more { font-weight: 500; }
    .country-chips.is-open .chip-more { color: var(--danger-tx); border-color: var(--danger); }
    .country-chips .chip-more [data-chips-icon] { font-size: 15px; line-height: 1; }
    .country-chips .chip[data-tip]::after, .country-chips .chip[data-tip]::before { display: none; }

    /* Data tables (users, costs, deposits): one look on a phone — tighter
       cells, sideways scroll, same first-column padding */
    .table th, .table td { padding-left: 8px; padding-right: 8px; }
    .table td { padding-top: 9px; padding-bottom: 9px; font-size: 12.5px; }
    .table td.right, .table th.right { padding-left: 4px; }
    .table td:first-child, .table th:first-child { padding-left: 12px; }
    .table td:last-child, .table th:last-child { padding-right: 12px; }
    /* Phone: the table sizes itself to its content and scrolls sideways as
       far as it needs — nothing is squeezed, nothing overlaps */
    .table-scroll .table, .table-scroll table.dataTable {
        table-layout: auto !important;
        width: auto !important;
        min-width: 100%;
    }
    .table-scroll .table th, .table-scroll .table td { white-space: nowrap; }
    .table-scroll .table th[style], .table-scroll .table td[style] { width: auto !important; }
    .table-scroll .table-users, .table-scroll .table-deposits, .table-scroll .table-costs, .table-scroll .table-report, .table-scroll .table-all, .table-scroll .table-perf { min-width: 100%; }
    /* The scroller itself: never wider than the panel, and the browser
       keeps both pan directions (a sideways drag scrolls the table, an
       up/down drag the page) */
    .table-scroll { max-width: 100%; overflow-x: auto; overflow-y: visible; touch-action: pan-x pan-y; }
    .panel { min-width: 0; }
    .state-dots { touch-action: manipulation; }
    .table-users .col-kyc { width: auto; }
    .ago { margin-right: 10px; min-width: 0; }
    .ago-date { min-width: 0; }
    /* Costs by country: the ISO is enough on a phone */
    .table-costs .country-name { display: none; }
    /* Only the ISO is shown, so the table gets narrow and the numbers sit
       next to each other instead of spread across 720px */
    /* Costs by country: fills the panel, the spare width shared by every column */
    .table-costs th, .table-costs td { padding-left: 7px; padding-right: 7px; }
    .table-costs th:first-child, .table-costs td:first-child { padding-left: 12px; }
    .table-costs th:last-child, .table-costs td:last-child { padding-right: 12px; }

    /* The report keeps every column and scrolls sideways instead, with
       tighter cells so less of it is off-screen */
    .table-report td.col-tracker { overflow: visible; text-overflow: clip; }
    .day-dow { display: none; }

    /* The range is already on the button below; keep only the last update */
    .report-range-label, .report-range-sep { display: none; }

    /* Range button goes full width on its own row, above the tiles */
    .report-head { flex-wrap: wrap; }
    .report-brand { width: 100%; }
    .report-filters { width: 100%; margin-top: 12px; }
    .report-range-btn { width: 100%; justify-content: center; padding: 10px 14px; white-space: nowrap; }
    .report-range-btn .nav-caret { margin-left: auto; }
    /* The account switch: full width on its own row, the button's height */
    .report-filters .qselect { width: 100%; }
    .qselect-list { max-height: 50vh; }
    .report-filters .qselect-control { padding: 10px 14px; }
    /* Users page: Registered / Deposited on their own row above the picker, half width each */
    .report-filters { flex-wrap: wrap; }
    .report-filters [data-users-by] { width: 100%; }
    .report-filters [data-users-by] .tab { flex: 1 1 0; padding: 10px 12px; font-size: 13px; text-align: center; }
    .stats-report .stat-value { font-size: 19px; }


    .url-flow-row { gap: 8px; padding: 9px 10px; }
    .short-url { font-size: 12px; }
    .meta-line { gap: 10px; font-size: 12px; }
    .meta-line .meta-item { gap: 6px; }
    .meta-line .meta-icon { width: 13px; height: 13px; }

    .modal { padding: 12px; }
    .login-shell { width: min(380px, 94vw); }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .stats { grid-template-columns: 1fr; }
}

/* ---- Admin: country map ---- */
.page-narrow { max-width: 980px; margin: 0 auto; }
.map-groups { display: flex; flex-direction: column; }
.map-group { padding: 12px 16px 14px; border-top: 1px solid var(--border); }
.map-group:first-child { border-top: 0; }
.map-parent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.map-parent .flag { width: 20px; height: 15px; border-radius: 2px; }
.map-parent b { font-weight: 600; }
.map-parent .map-count { margin-left: auto; font-size: 12px; }
.tag-muted { opacity: .7; }
.map-children { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 28px; }
@media (max-width: 640px) { .map-children { padding-left: 0; } }
.map-children .inline { display: inline; }
.chip-remove { cursor: pointer; font: inherit; }
.chip-remove .chip-x { margin-left: 2px; color: var(--muted); font-size: 14px; line-height: 1; }
.chip-remove:hover { border-color: var(--danger, #e5484d); color: var(--danger, #e5484d); }
.chip-remove:hover b, .chip-remove:hover .chip-x { color: var(--danger, #e5484d); }

/* ==========================================================================
   Full-page forms (brand, user): centred column, labelled rows
   ========================================================================== */
.form-panel { max-width: 980px; margin: 0 auto 18px; overflow: visible; } /* pickers' menus hang below the panel */
.page-head-centered { max-width: 980px; margin-left: auto; margin-right: auto; }
.form-section { padding: 18px 22px 8px; border-top: 1px solid var(--line); }
.form-section:first-child { border-top: 0; }
.form-section-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.form-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; }
.form-row-label { font-size: 13px; color: var(--text-2); }
.form-row-label .muted { font-size: 12px; }
.form-row-field { display: block; min-width: 0; }
.form-row-field input, .form-row-field textarea, .form-row-field select:not(.qselect-native) {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
}
.form-row-field input[type="number"] { max-width: 140px; }
.form-row-field input[type="color"] { padding: 2px; }

/* Keyboard focus: no ring, no border change — the caret is the cue */
.form-row-field input:focus, .form-row-field textarea:focus, .form-row-field select:focus,
.field input:focus, .field select:not(.qselect-native):focus,
.qselect-control:focus-visible, .qselect-search input:focus,
.dataTables_filter input:focus, .table-tool input:focus, .table-tool select:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--line-2);
}
.form-row-field-sm { max-width: 300px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.logo-picker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type="color"] { width: 42px; height: 34px; padding: 2px; }
.color-field input[type="text"] { width: 120px; font-family: var(--mono); }
.form-panel .modal-note { padding: 4px 0 10px; }

.page-tabs { margin: 0 auto 14px; max-width: 980px; }
.user-title { display: flex; align-items: center; gap: 10px; }
.user-title .avatar { width: 32px; height: 32px; }
.user-title-handle { font-size: 14px; font-weight: 400; }
.tracker-add { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tracker-add .qselect, .tracker-add select { flex: 1; min-width: 0; }
.tracker-add .qselect-menu { width: 100%; max-width: none; }
/* Brand pick + the brand's trackers: the brand select keeps its width, the trackers take the rest */
.tracker-add-brands > .qselect:first-of-type, .tracker-add-brands > select[data-tracker-brand] { flex: 0 0 220px; }
.tracker-add-list { flex: 1; min-width: 0; display: flex; }
.tracker-add-list[hidden] { display: none; }
.tracker-add-list .qselect, .tracker-add-list select { flex: 1; min-width: 0; }
/* The picker's menu must be allowed to hang below the card */
.panel-overflow { overflow: visible; }

@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; gap: 6px; padding: 8px 0; }
    .form-section { padding: 14px 14px 6px; }
    .form-actions { padding: 12px 14px; }
    .form-row-field-sm { max-width: none; }
    .tracker-add { flex-direction: column; align-items: stretch; }
}

/* File inputs inside a field: same box, native picker inside */
.field input[type="file"] { padding: 8px 10px; font-family: var(--sans); font-size: 13px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 6px 10px; border: 0; border-radius: 5px;
    background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer;
}

/* Header action buttons with an icon */
.report-filters .btn { display: inline-flex; align-items: center; gap: 7px; }
.report-filters .btn svg { width: 15px; height: 15px; flex: none; }

/* KYC badge on the users tables */
.kyc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--panel-2); color: var(--text-2); white-space: nowrap; }
.kyc b { font-weight: 600; opacity: .7; }
.kyc-top  { background: rgba(96, 165, 250, .16); color: #93c5fd; }     /* Verified 4: the best */
.kyc-ok   { background: var(--ok-bg); color: var(--ok-tx); }             /* Verified 3 */
.kyc-low  { background: rgba(45, 212, 191, .14); color: #5eead4; }      /* Verified 1-2 */
.kyc-bad  { background: var(--danger-bg); color: var(--danger-tx, var(--danger)); }
.kyc-wait { background: var(--panel-2); color: var(--muted); }
:root[data-theme="light"] .kyc-top { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
:root[data-theme="light"] .kyc-low { background: rgba(13, 148, 136, .12); color: #0f766e; }

/* Days since the last deposit, before the date on the users tables */
.ago { display: inline-block; min-width: 38px; margin-right: 14px; text-align: right; font-size: 12px; color: var(--text-2); }
.ago-now { color: var(--accent); font-weight: 600; }
.ago-mid { color: var(--muted); }
.ago-old { color: var(--danger-tx, var(--danger)); font-weight: 600; }
.ago-date { display: inline-block; min-width: 82px; text-align: right; }

.table th.center, .table td.center { text-align: center; }
table.dataTable thead th.center { text-align: center; }

/* Left-aligned cell link (country on the costs page) */
.cell-link-left { justify-content: flex-start; }
.cell-link-left:hover .country-name { color: var(--accent); }

/* "Today" / "Yesterday" in place of the date on recent deposits */
.day-rel { color: var(--text-2); }

/* The Today tile of the report opens the Today range */
[data-stat-today] { cursor: pointer; }

/* Preview as another user (ROLE_SUPER): bar at the top of every page until "Back" */
.preview-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 16px; padding: 8px 12px; border-radius: 8px;
    background: var(--danger-bg); border: 1px solid var(--danger-br); color: var(--danger-tx); font-size: 13px;
}
.preview-bar .btn { white-space: nowrap; }
.inline-form { display: inline-flex; align-items: center; }
/* User page head: the id up top, the Preview button on the name's line */
.user-head-meta { flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; }