/* ==========================================================================
   ibomate-brand.css — the iBoMate brand, painted over apple-ui.css
   --------------------------------------------------------------------------
   Design source: "iboMate Reseller Program v3". Same palette, same type, same
   curvature as the landing page, so a reseller who clicks through from the
   site does not arrive somewhere that looks like a different company.

   Loaded LAST, after apple-ui.css. It redefines that file's tokens and adds
   nothing structural, which is the whole point: apple-ui.css is entirely
   token-driven, so ~40 pages of Bootstrap markup change colour without a
   single page being edited. Delete this one <link> and the panel is exactly
   what it was.

   Two deliberate departures from the landing page:

   - Buttons are a SOLID accent, not the site's #39c6f4->#2456e6 gradient.
     White text on the gradient's light end is about 2.2:1, which is fine for
     a hero seen for a second and wrong for a control somebody clicks all day.
     The gradient is kept for decoration only - the sidebar mark and the
     active-page indicator.
   - The light appearance is not a lighter navy but a real light theme. The
     toggle in the top bar still works and both halves are branded; forcing
     everyone dark would have quietly removed a feature.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Type — Sora, self-hosted next to this file
   -------------------------------------------------------------------------- */

/* Both files are variable fonts covering wght 400-800, so one face per unicode
   range is the whole family. Nothing is fetched from fonts.googleapis.com: the
   panel is used behind captive networks and on connections that lose it. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/sora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens — light appearance (the default)
   -------------------------------------------------------------------------- */

:root {
    --ap-font: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;

    /* The landing page's curvature: 10-18px, tighter than Apple's hardware curve. */
    --ap-r-sm: 8px;
    --ap-r-md: 10px;
    --ap-r-lg: 14px;
    --ap-r-xl: 18px;

    --ap-bg: #eef3fb;
    --ap-surface: #ffffff;
    --ap-surface-2: #f7f9fe;
    --ap-surface-raised: #ffffff;
    --ap-nav-bg: rgba(255, 255, 255, 0.78);
    --ap-sidebar-bg: rgba(10, 31, 77, 0.97);   /* navy in both appearances - it
                                                  carries the brand mark */

    --ap-text: #0a1f4d;
    --ap-text-2: #4a5d7e;
    --ap-text-3: #6b7c99;
    --ap-on-accent: #ffffff;

    --ap-separator: rgba(10, 31, 77, 0.12);
    --ap-separator-strong: rgba(10, 31, 77, 0.2);
    --ap-fill: rgba(10, 31, 77, 0.04);
    --ap-fill-hover: rgba(10, 31, 77, 0.07);

    /* #1a4fd0 against white is 7.2:1, and white on it is 7.2:1 - it is used
       both as link text and as a button fill, so it has to clear AA twice. */
    --ap-accent: #1a4fd0;
    --ap-accent-hover: #1746b8;
    --ap-accent-ring: rgba(36, 86, 230, 0.3);

    --ap-red: #c02b39;
    --ap-red-hover: #a72330;
    --ap-green: #0f7a58;
    --ap-orange: #9a5a08;

    --ap-shadow-sm: 0 1px 2px rgba(10, 31, 77, 0.06), 0 0 1px rgba(10, 31, 77, 0.1);
    --ap-shadow-md: 0 4px 16px rgba(10, 31, 77, 0.08), 0 0 1px rgba(10, 31, 77, 0.1);
    --ap-shadow-lg: 0 12px 40px rgba(10, 31, 77, 0.12), 0 0 1px rgba(10, 31, 77, 0.1);

    /* Brand-only additions. apple-ui.css does not know these exist; they are
       used by the rules in section 4. */
    --ibo-cyan: #4cc9e8;
    --ibo-grad: linear-gradient(135deg, #39c6f4, #2456e6);
    --ibo-deep: #0a1f4d;

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. Tokens — dark appearance. This is the landing page's own palette.
   -------------------------------------------------------------------------- */

/* Written out twice, exactly as apple-ui.css does: once for the OS preference
   when nothing is forced, once for the toggle. Keeping the same shape means a
   reader comparing the two files sees the same structure in both. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ap-bg: #070c1a;
        --ap-surface: #0d1530;
        --ap-surface-2: #0a1128;
        --ap-surface-raised: #111c3d;
        --ap-nav-bg: rgba(7, 12, 26, 0.85);
        --ap-sidebar-bg: rgba(9, 16, 40, 0.94);

        --ap-text: #eaf1fb;
        --ap-text-2: #9db0cd;
        --ap-text-3: #66788f;
        --ap-on-accent: #ffffff;

        --ap-separator: rgba(255, 255, 255, 0.08);
        --ap-separator-strong: rgba(255, 255, 255, 0.15);
        --ap-fill: rgba(255, 255, 255, 0.05);
        --ap-fill-hover: rgba(255, 255, 255, 0.09);

        /* Sits inside the brand gradient's range. White on it is 4.9:1, and it
           is 4.6:1 as link text on --ap-surface - AA on both counts, which the
           gradient's light end would not have been. */
        --ap-accent: #2b6fe3;
        --ap-accent-hover: #3b86f0;
        --ap-accent-ring: rgba(76, 201, 232, 0.4);

        --ap-red: #f47e7e;
        --ap-red-hover: #f79b9b;
        --ap-green: #57d9a3;
        --ap-orange: #f4a259;

        --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --ap-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
        --ap-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --ap-bg: #070c1a;
    --ap-surface: #0d1530;
    --ap-surface-2: #0a1128;
    --ap-surface-raised: #111c3d;
    --ap-nav-bg: rgba(7, 12, 26, 0.85);
    --ap-sidebar-bg: rgba(9, 16, 40, 0.94);

    --ap-text: #eaf1fb;
    --ap-text-2: #9db0cd;
    --ap-text-3: #66788f;
    --ap-on-accent: #ffffff;

    --ap-separator: rgba(255, 255, 255, 0.08);
    --ap-separator-strong: rgba(255, 255, 255, 0.15);
    --ap-fill: rgba(255, 255, 255, 0.05);
    --ap-fill-hover: rgba(255, 255, 255, 0.09);

    --ap-accent: #2b6fe3;
    --ap-accent-hover: #3b86f0;
    --ap-accent-ring: rgba(76, 201, 232, 0.4);

    --ap-red: #f47e7e;
    --ap-red-hover: #f79b9b;
    --ap-green: #57d9a3;
    --ap-orange: #f4a259;

    --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --ap-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --ap-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   4. The handful of things a token cannot say
   -------------------------------------------------------------------------- */

/* The sidebar is navy in both appearances, so its contents are always light -
   apple-ui.css sizes and spaces them, this only recolours. */
#sidebar-wrapper {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

#sidebar-wrapper .list-group-item {
    color: #c6d4ea !important;
}

#sidebar-wrapper .list-group-item:hover,
#sidebar-wrapper .list-group-item:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* The current page. A cyan rule and a wash rather than a filled row: the fill
   was the one place a solid accent had to carry small text at every weight. */
#sidebar-wrapper .list-group-item.active {
    color: #ffffff !important;
    background: rgba(76, 201, 232, 0.12) !important;
    box-shadow: inset 3px 0 0 0 var(--ibo-cyan);
}

#sidebar-wrapper .sidebar-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The mark behind the panel logo, taken from the app icon's own gradient. */
#sidebar-wrapper .sidebar-logo {
    background: var(--ibo-grad);
    border-radius: var(--ap-r-lg);
}

/* Sora's digits are proportional. Anywhere the panel lines numbers up in a
   column - expiry dates, MAC addresses, device counts - they have to be
   tabular or the column visibly wobbles row to row. */
table, .table, input, textarea, select, code, kbd, samp, .ap-mono {
    font-variant-numeric: tabular-nums;
}

/* Focus. apple-ui.css draws the ring from --ap-accent-ring, which is now cyan;
   this only makes sure the ring is visible against the navy sidebar too. */
#sidebar-wrapper a:focus-visible {
    outline: 2px solid var(--ibo-cyan);
    outline-offset: -2px;
}

/* The sign-in, setup and password-reset screens are deliberately NOT restyled
   here. auth.css already draws its ambient wash from --ap-accent-ring, which
   this file has just made cyan, so those pages became branded the moment the
   tokens changed - which is exactly what auth.css's own header promises.
   An earlier draft painted a navy gradient onto body.ap-login as well. It was
   wrong twice: it stacked a second wash under auth.css's, and in the light
   appearance it put --ap-text navy on a navy page, so the title and the footer
   link outside the white card went unreadable. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}