/*
 * RMS skin for the Captain panel.
 *
 * Modelled on the risk-management console the operators already use, so the two
 * read as one product: navy header, white tab bar, a cream filter strip, grey
 * section headers, and money in green or red-in-parentheses.
 *
 * Captain is an instrument panel, not a website — one or two people watch it for
 * hours while money moves — so density and alignment win over whitespace
 * throughout. Every figure is tabular monospace so columns compare down the page.
 *
 * Bootstrap supplies the grid; AdminLTE bundled its own copy, so removing
 * AdminLTE means loading Bootstrap on its own.
 */

:root {
    /* Chrome */
    --rms-navy: #1e3a6f;
    --rms-navy-deep: #16294f;
    --rms-navy-soft: #dde6f5;
    --rms-tab-active: #d6e4f7;

    /* Surface */
    --rms-ink: #16202b;
    --rms-muted: #6b7a8c;
    --rms-line: #c9d4e0;
    --rms-line-soft: #e6ecf3;
    --rms-page: #f4f6f9;
    --rms-card: #ffffff;

    /* Structure */
    --rms-section: #d9dee5;
    --rms-head: #eef2f8;
    --rms-pl: #e9e2f5;          /* the "player P/L" span */
    --rms-filter: #fdfae4;      /* the cream filter strip */
    --rms-filter-line: #d9cf7a;

    /* Meaning. Never used decoratively. */
    --rms-up: #1a7f37;
    --rms-down: #c62828;
    --rms-warn: #b26a00;
    --rms-back: #1a8ee1;
    --rms-lay: #f4496d;

    /* Type */
    --font-ui: 'Barlow', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-num: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --t-xs: 10.5px;
    --t-sm: 11.5px;
    --t-base: 13px;
    --t-md: 15px;
    --t-lg: 18px;
    --t-xl: 24px;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;

    /* Bootstrap's own names, remapped so stock components inherit the skin. */
    --blue: var(--rms-back);
    --red: var(--rms-down);
    --green: var(--rms-up);
    --muted: var(--rms-muted);
    --line: var(--rms-line);
    --ok: var(--rms-up);
}

body {
    background: var(--rms-page);
    color: var(--rms-ink);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--rms-navy); text-decoration: none; }
a:hover { color: #0f2c5c; text-decoration: underline; }

/* Every figure: same face, same width, decimals in a column. */
.num,
.table .text-right,
.small-box .inner h3,
.money,
code {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid var(--rms-navy);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- header --
   Navy bar with the product mark and the clock; a white tab strip beneath it.
   The markup is one Bootstrap navbar, so the strip is made by letting the
   container wrap and giving the collapsible half its own background.
   ------------------------------------------------------------------------ */

.main-header.navbar {
    background: var(--rms-navy);
    border: 0;
    padding: 0 0 0 var(--s4);
    box-shadow: none;
}

.main-header .container-fluid { flex-wrap: wrap; padding-right: var(--s4); }

/* Tight, because this bar carries a name and a clock and nothing that is
   read: every pixel it takes is one the tables do not get. */
.main-header .navbar-brand {
    color: #fff;
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: .06em;
    padding: 5px 0;
}
.main-header .navbar-brand .brand-text { color: #fff; }
.main-header .navbar-brand i { color: #9fc0ef; }

.main-header .container-fluid .actions {
    order: 0 !important;
    margin-left: auto;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.header-clock {
    color: #dbe6f7;
    font-family: var(--font-num);
    font-size: var(--t-base);
    white-space: nowrap;
}
.header-clock b { color: #fff; font-weight: 500; }

/* The tab strip. */
.main-header .navbar-collapse {
    flex-basis: 100%;
    background: #fff;
    margin: 0 calc(-1 * var(--s4));
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--rms-line);
}

.main-header .navbar-nav .nav-link {
    color: #2c3e56;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 8px 13px;
    border-right: 1px solid var(--rms-line-soft);
    white-space: nowrap;
}

/* The colour is not optional here, and leaving it out was a bug.
 *
 * The markup is one Bootstrap navbar carrying .navbar-dark, because the top
 * half of it IS dark — but the tab strip below is white, and .navbar-dark
 * paints nav links white on hover for the bar it thinks it is styling:
 *
 *     .navbar-dark .navbar-nav .nav-link:hover { color: rgba(255,255,255,.75) }
 *
 * That selector is four classes, the same weight as this one and heavier than
 * the plain .nav-link rule above, so with no colour stated here every tab went
 * near-white the moment the mouse touched it — a label vanishing into its own
 * strip. Saying it explicitly is what keeps the text on the strip.
 *
 * :focus is included for the same reason: .navbar-dark colours that identically,
 * and a tab reached by keyboard would disappear the same way.
 */
.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus {
    background: var(--rms-navy-soft);
    color: var(--rms-navy-deep);
    text-decoration: none;
}

.main-header .navbar-nav .nav-link.active {
    background: var(--rms-tab-active);
    color: var(--rms-navy-deep);
    box-shadow: inset 0 -3px 0 var(--rms-navy);
}

.chips { margin-left: auto; }
.chip {
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #dbe6f7;
    font-size: var(--t-xs);
    font-weight: 600;
}
.chip.ok { color: #b7f0cd; border-color: rgba(183, 240, 205, .4); }
.chip.bad { color: #ffc2c2; border-color: rgba(255, 194, 194, .4); }

/* ------------------------------------------------------------- content --- */

.content-wrapper { background: var(--rms-page); }

.content-header {
    padding: var(--s2) 0;
    background: var(--rms-card);
    border-bottom: 1px solid var(--rms-line);
    margin-bottom: var(--s4);
}

.content-header h1 {
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--rms-navy);
    margin: 0;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 6px 0 0;
    font-size: var(--t-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.breadcrumb-item.active { color: var(--rms-muted); }

/* ------------------------------------------------------------ filter bar --
   The cream strip the console puts above every report.
   ------------------------------------------------------------------------ */

.filter-bar {
    background: var(--rms-filter);
    border: 1px solid var(--rms-filter-line);
    border-radius: 2px;
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.filter-bar label {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5c5326;
    margin: 0 2px 0 0;
}

/* ----------------------------------------------------------------- card --- */

.card {
    background: var(--rms-card);
    border: 1px solid var(--rms-line);
    border-radius: 2px;
    box-shadow: none;
    margin-bottom: var(--s4);
}

.card.card-outline, .card.card-primary.card-outline { border-top: 2px solid var(--rms-navy); }

.card-header {
    background: var(--rms-head);
    border-bottom: 1px solid var(--rms-line);
    border-radius: 0;
    padding: 8px var(--s3);
    min-height: 0;
}

.card-header .card-title {
    color: var(--rms-navy);
    font-size: var(--t-base);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
}
.card-header .card-title i { color: var(--rms-navy); }

.card-body { padding: 10px var(--s3); }
.card-body.pb-0 { padding-bottom: 0; }
.card-body > p.meta { font-size: var(--t-sm); line-height: 1.4; }

/* ------------------------------------------------------------ stat tiles --- */

.small-box {
    border-radius: 2px;
    border: 1px solid var(--rms-line);
    box-shadow: none;
    margin-bottom: var(--s4);
    overflow: hidden;
}

.small-box .icon { display: none; }

.small-box .inner {
    padding: 9px var(--s3) 10px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.small-box .inner h3 {
    font-size: var(--t-xl);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
}

.small-box .inner p {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
    margin: 0 0 3px;
}

/* The second figure on a tile — the same money in the other unit.
 *
 * A tile's background is a solid colour, so the muted grey the tables use for a
 * footnote is close to invisible on it: .meta is --rms-muted, and the rule above
 * then uppercases it, spaces it out and drops it to 80% opacity. On the navy and
 * the red tiles that came out unreadable.
 *
 * Inherits the tile's own text colour rather than hard-coding a translucent
 * white, because the tiles are not all dark — bg-warning is a light amber with
 * near-black text, and a white footnote on it would disappear the same way.
 *
 * Lives here rather than in a component because three of them use it: the tiles
 * on the account page, the live board and the bet book. It was scoped inside
 * LiveBets, which meant BetBook wrote class="tile-alt" and got nothing.
 */
.small-box .inner p.tile-alt {
    color: inherit;
    opacity: .85;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.small-box.bg-info { background: var(--rms-navy) !important; color: #fff !important; }
.small-box.bg-primary { background: #33507f !important; color: #fff !important; }
.small-box.bg-success { background: var(--rms-up) !important; color: #fff !important; }
.small-box.bg-danger { background: var(--rms-down) !important; color: #fff !important; }
.small-box.bg-warning { background: #e8a33d !important; color: #1f1400 !important; }
.small-box.bg-secondary { background: var(--rms-muted) !important; color: #fff !important; }

/* ---------------------------------------------------------------- table --- */

.table { color: var(--rms-ink); margin-bottom: 0; }

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rms-head);
    color: #33475f;
    border: 0;
    border-bottom: 1px solid var(--rms-line);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 7px var(--s3);
    white-space: nowrap;
}

.table thead th.text-right { text-align: right; }

.table tbody td {
    border-top: 1px solid var(--rms-line-soft);
    padding: 5px var(--s3);
    vertical-align: middle;
    font-size: 12.5px;
    line-height: 1.35;
}

.table tbody tr:first-child td { border-top: 0; }
.table-hover tbody tr:hover { background: #f2f7ff; }

.table .text-right { text-align: right; font-size: var(--t-base); font-weight: 500; }

.table td .meta {
    font-family: var(--font-ui);
    display: inline;
    margin-left: 6px;
    font-size: var(--t-xs);
}

/* The row that just moved: the point of a live socket is showing which one. */
@keyframes rms-row-flash {
    0% { background: #fff2c4; }
    100% { background: transparent; }
}
.table tbody tr.is-updated { animation: rms-row-flash 1.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .table tbody tr.is-updated {
        animation: none;
        box-shadow: inset 3px 0 0 var(--rms-warn);
    }
}

/* -------------------------------------------------------------- risk book --
   Section header per market, and a lavender span over the per-runner columns.
   ------------------------------------------------------------------------ */

.book-section {
    background: var(--rms-section);
    color: #2b3646;
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px var(--s3);
    border-top: 1px solid var(--rms-line);
}

.table thead th.pl-span {
    background: var(--rms-pl);
    color: #4a3d6b;
    text-align: center;
    border-bottom: 1px solid #cfc2e8;
}

.table thead th.pl-col {
    background: #f2edfa;
    color: #4a3d6b;
    text-align: right;
}

.pl-up { color: var(--rms-up); }
.pl-down { color: var(--rms-down); }
.pl-flat { color: var(--rms-muted); }

.runner-name {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    color: var(--rms-muted);
    letter-spacing: .01em;
}

/* --------------------------------------------------------------- badges --- */

.badge {
    border-radius: 2px;
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 7px;
}
.badge.ok { background: #e2f4e8; color: #14682e; }
.badge.wait { background: #fdf2d8; color: #8a5a00; }
.badge.no { background: #fbe4e4; color: #9c1c1c; }
/* A product the app could not name. Grey on purpose: it must not look like
   one of the three it knows, and it is not a fault either. */
.badge.other { background: #e8ecf2; color: #4a5768; }

/* --------------------------------------------------------------- buttons --- */

.btn {
    border-radius: 2px;
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 12px;
}

.btn.brand, .btn-primary {
    background: var(--rms-navy);
    border-color: var(--rms-navy-deep);
    color: #fff;
}
.btn.brand:hover, .btn-primary:hover { background: var(--rms-navy-deep); color: #fff; }

.btn.ghost {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.btn.light { background: #fff; border: 1px solid var(--rms-line); color: var(--rms-navy); }
.btn.stop, .btn-danger { background: var(--rms-down); border-color: var(--rms-down); color: #fff; }
.btn.resume, .btn-success { background: var(--rms-up); border-color: var(--rms-up); color: #fff; }
.btn.danger { background: #fbe4e4; color: var(--rms-down); border: 1px solid #f0c4c4; }

/* ---------------------------------------------------------------- forms --- */

.form-control, .custom-select, select, input[type=text], input[type=password] {
    border: 1px solid var(--rms-line);
    border-radius: 2px;
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    color: var(--rms-ink);
}
.form-control:focus, .custom-select:focus {
    border-color: var(--rms-navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 111, .15);
}

label {
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rms-muted);
}

/* --------------------------------------------------------------- alerts --- */

.alert {
    border-radius: 2px;
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--t-base);
    padding: var(--s2) var(--s3);
}
.alert-success { background: #e2f4e8; border-color: #bfe3cd; border-left-color: var(--rms-up); color: #14682e; }
.alert-danger { background: #fbe4e4; border-color: #f0c4c4; border-left-color: var(--rms-down); color: #9c1c1c; }
.alert-warning { background: #fdf2d8; border-color: #f0debb; border-left-color: var(--rms-warn); color: #8a5a00; }

/* --------------------------------------------------------------- footer --- */

.main-footer {
    background: var(--rms-navy-deep);
    color: #9fb3d1;
    border-top: 0;
    font-size: var(--t-sm);
    padding: 10px var(--s3);
}
.main-footer strong { color: #fff; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------- shared helpers --- */

.meta { color: var(--rms-muted); font-size: var(--t-sm); }
.empty { color: var(--rms-muted); font-size: var(--t-base); }
.count { color: var(--rms-muted); font-size: var(--t-sm); }
.name { color: var(--rms-navy); font-weight: 600; }
.money small { color: var(--rms-down); }

/* The on/off switch.

   Only the checked colour was ever defined here — the shape came from
   AdminLTE, which this panel does not load, so every "switch" on every page
   has been drawing as the browser's own checkbox. It is the control that
   enables and disables a desktop, and it looked like nothing. */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    vertical-align: middle;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch span {
    position: absolute;
    inset: 0;
    background: #c9d4e0;
    border-radius: 999px;
    transition: background .15s ease;
}

.switch span::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}

.switch input:checked + span { background: var(--rms-navy); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 2px var(--rms-navy-soft); }
.switch input:disabled + span { opacity: .5; cursor: default; }
.dot.live { background: var(--rms-up); box-shadow: 0 0 0 5px rgba(26, 127, 55, .15); }

.bet { border-color: var(--rms-line); background: var(--rms-card); border-radius: 2px; }
.mainbet { background: var(--rms-head); border-radius: 2px; }
.proxybox { background: #f7f9fc; border-color: var(--rms-line); }

/* ---------------------------------------------------------------- dialog --
   A form that is used occasionally does not deserve a permanent third of the
   page. Written here rather than pulled from Bootstrap's modal: that one wants
   its own JavaScript and a stack of wrapper markup, and this is a card on a
   dimmed page.

   Deliberately plain — no entrance animation. The console is watched for hours;
   a panel that slides every time somebody adds a user is a panel that draws the
   eye away from the numbers.
   ------------------------------------------------------------------------ */

.modal-backdrop-own {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh var(--s4) var(--s4);
    overflow-y: auto;
    background: rgba(22, 32, 43, .45);
}

.modal-own {
    width: 100%;
    max-width: 420px;
    margin: 0;
    box-shadow: 0 10px 30px rgba(22, 32, 43, .25);
}

/* The close control is a glyph, not a word: it sits in the header beside a
   title that already says what the dialog is. */
.modal-own .card-header .btn { line-height: 1; padding: 2px 8px; }

@media (max-width: 575px) {
    .modal-backdrop-own { padding: 0; align-items: stretch; }
    .modal-own { max-width: none; border-radius: 0; }
}

/* --------------------------------------------------------- narrow screens --
   The console is watched on a desk, but it is also opened on a phone to answer
   one question — did that bet land on both accounts — and it has to be usable
   for that without becoming a different product.

   Nothing here restyles the panel small. The chrome stays navy, the strip stays
   a strip, the figures stay monospace and dense: an operator switching between
   a desk and a phone should be reading the same instrument, not a summary of
   it.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .main-header .navbar-collapse { margin: 0 calc(-1 * var(--s4)); }

    /* The tab strip stays one row and scrolls sideways.

       Bootstrap stacks a collapsed navbar, which turned twelve tabs into twelve
       full-width rows: every page opened below a screenful of navigation, and
       the thing you came to read started under the fold. A strip you swipe
       keeps the tabs where they are on the desk and keeps the page at the top.

       The scrollbar is left visible and styled rather than hidden. It is the
       only thing telling you there are more tabs to the right, and a strip that
       hides its own overflow is how a page ends up with menu items nobody
       finds. */
    .main-header .navbar-collapse {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .main-header .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .main-header .navbar-nav .nav-link {
        border-right: 1px solid var(--rms-line-soft);
        border-bottom: 0;
    }

    .main-header .navbar-collapse::-webkit-scrollbar { height: 3px; }
    .main-header .navbar-collapse::-webkit-scrollbar-track { background: var(--rms-line-soft); }
    .main-header .navbar-collapse::-webkit-scrollbar-thumb { background: var(--rms-navy-soft); }

    /* A tab cut off mid-word at the right edge is the clearest thing that says
       "there is more this way" — so the strip is allowed to end on one, and the
       fade tells you it is an edge rather than the last tab. It sits on the
       header, not inside the scroller, so it stays at the edge as you swipe. */
    .main-header .container-fluid { position: relative; }
    .main-header .container-fluid::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28px;
        height: 40px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    }

    .chips { margin-left: 0; padding: var(--s2) 0; }
    .header-clock { display: none; }
}

@media (max-width: 767px) {
    /* The brand still names the product; it does not need to shout it on a
       screen this wide. */
    .main-header.navbar { padding-left: var(--s3); }
    .main-header .container-fluid { padding-right: var(--s3); }
    .main-header .navbar-brand { font-size: var(--t-lg); }

    .content-header { padding: var(--s2) 0 var(--s2); margin-bottom: var(--s3); }
    .content-header h1 { font-size: var(--t-md); }

    /* "Captain Control Panel", under the page title, on the page it is already
       the title of. The one piece of chrome here that says nothing. */
    .content-header .breadcrumb { display: none; }

    .content-wrapper > .content > .container-fluid,
    .content-header > .container-fluid { padding-left: var(--s3); padding-right: var(--s3); }

    .card { margin-bottom: var(--s3); }
    .card-body { padding: var(--s2) var(--s3); }

    /* A card's title and its controls stop sharing a line and stack, each
       full width — an account filter squeezed to a third of a phone is a
       filter nobody can read the options of. */
    .card-header { padding: var(--s2) var(--s3); }
    .card-header .card-tools {
        width: 100%;
        margin-top: 6px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .card-header .card-tools .form-control { width: auto; flex: 1 1 140px; }

    /* Every table is wider than a phone and stays that way: the columns are
       what the answer needs, and dropping some on a small screen would mean the
       phone and the desk disagree about what a bet was. They scroll sideways
       instead, tighter, with the figures still in their columns.

       The min-width is what makes that true. Without it the browser honours the
       container and squeezes the columns to fit instead of overflowing, so
       nothing scrolls and every cell wraps into a tall thin ribbon — an account
       name and its three notes became eight lines each, and a five-row table
       became a page and a half. Giving the table a width larger than the phone
       is what turns "squeeze" back into "scroll". */
    .table thead th, .table tbody td { padding: 6px 8px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table-responsive > .table { min-width: 760px; }

    /* Cells that hold a figure or a state must not wrap at all: a broken
       "3 h old" or a badge split across two lines reads as two things. */
    .table td .badge, .table td .num, .table th { white-space: nowrap; }

    /* The meta lines under a name are notes, not paragraphs. On a phone they
       were doing the most damage, so they get the width they need and stop
       stacking one word per line. */
    .table td .meta { white-space: normal; min-width: 150px; }

    .small-box .inner { padding: var(--s2) var(--s3); }
    .small-box .inner h3 { font-size: var(--t-lg); }
    .small-box .inner p { font-size: var(--t-xs); }

    .side-box { min-width: 0; flex: 1 1 100%; }

    .filter-bar { padding: var(--s2); }
}

/* A finger is not a mouse pointer: anything meant to be tapped gets a target
   worth aiming at, on touch screens only, so the desk keeps its density. */
@media (pointer: coarse) {
    .btn, .form-control, select.form-control {
        min-height: 38px;
    }

    .main-header .navbar-nav .nav-link { padding-top: 12px; padding-bottom: 12px; }

    /* The switch is a real control on Manage Users and Panel Roles, and at its
       desk size it is a hard thing to hit. */
    .switch { transform: scale(1.15); transform-origin: left center; }
}

/* ---- Unit switch -------------------------------------------------------
   Skyfair reports these accounts in points; every bet page can be read in
   rupees instead. The control is a preference rather than a filter — it does
   not change what is counted, only what the numbers mean — so it sits above
   the figures it governs, not among the account and type selects. Shared here
   rather than scoped per page because three pages carry it. */
.unit-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid var(--rms-line);
    border-radius: 8px;
    background: var(--rms-surface, #fff);
}

.unit-switch label { cursor: pointer; user-select: none; margin-bottom: 0; }

/* ------------------------------------------------ the 1366 x 768 laptop --
   The panel is watched on one of these all day, and at that size the default
   scale spends the screen on air: about a third of the vertical space went to
   padding, and a bet table showed nine rows where it could show fourteen.

   Almost all of it is done by redefining the tokens rather than overriding
   rules one at a time. Type and spacing already come from --t-* and --s*, so
   changing them here moves the whole panel together and cannot drift the way
   a list of individual overrides would. What follows the tokens is only the
   handful of places that hardcode a pixel.

   Spacing is cut harder than type (a quarter, against a tenth). Space is where
   the room actually is, and text that is hard to read has not saved anybody
   anything — this stays at 12px base, not 10.

   Bounded below at 1200px so it does not fight the tablet rules underneath;
   above 1440 the default scale is right and this does not apply. */
@media (min-width: 1200px) and (max-width: 1440px) {
    :root {
        --t-xs: 9.5px;
        --t-sm: 10.5px;
        --t-base: 12px;
        --t-md: 13.5px;
        --t-lg: 16px;
        --t-xl: 20px;

        --s1: 3px; --s2: 6px; --s3: 9px; --s4: 12px; --s5: 15px;
    }

    /* Rows: the whole point of the exercise. */
    .table tbody td { padding: 3px var(--s2); font-size: 11.5px; line-height: 1.3; }
    .table thead th { padding: 4px var(--s2); }

    .card-body { padding: 7px var(--s3); }
    .card-header { padding: 5px var(--s3); }
    .card { margin-bottom: var(--s3); }

    /* The strip at the top is fixed furniture on every page, so a few pixels
       off it is a few pixels back on every table underneath. */
    .main-header .navbar-brand { font-size: var(--t-md); }
    .main-header .navbar-nav .nav-link { padding: 4px var(--s2); }

    .small-box .inner { padding: var(--s2) var(--s3); }
    .small-box .inner h3 { font-size: var(--t-md); }
}

/* Short screens, whatever their width. 768 high is the constraint on a laptop
   far more than 1366 wide is: the width can scroll sideways and be read, the
   height is simply how many rows exist. */
@media (max-height: 800px) {
    .content-wrapper { padding-top: var(--s2); }
    .card { margin-bottom: var(--s2); }
    .table tbody td { padding-top: 3px; padding-bottom: 3px; }
}