:root {
    /* Rebranded around the hero gradient (#071726 -> #0B3D91 -> #0F766E),
       so every component built on these tokens - buttons, badges, KPI
       icons, module tiles, charts, the auth screen, the sidebar - now
       reads as one consistent palette instead of the gradient looking
       like a different blue from the rest of the UI. */
    --primary: #0B3D91; /* was #0A4D8C - now the gradient's own blue */
    --primary-dark: #082C6B; /* was #073763 - deepened to match */
    --primary-light: #3B82F6; /* was #2F80ED - nudged slightly to sit well against the new primary */
    --secondary: #0F766E; /* was #0E7490 - now the gradient's own teal */
    --secondary-light: #14B8A6; /* unchanged - already a good lighter step from the new secondary */
    --accent: #F59E0B;
    --accent-dark: #B97A08;
    --success: #22C55E;
    --danger: #DC2626;
    --dark: #071726; /* was #081827 - now the gradient's own darkest stop */
    --light: #F8FAFC;
    --border: #E2E8F0;
    --text: #1F2937;
    --text-light: #6B7280;
    --font-body: 'Inter',system-ui,-apple-system,sans-serif;
    --font-mono: 'IBM Plex Mono',monospace;
    --transition: all .25s ease;
    --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
    --shadow: 0 8px 24px rgba(15,23,42,.1);
    --shadow-lg: 0 24px 60px rgba(15,23,42,.18);
    /* Now built from the tokens above instead of hardcoded hex, so any
       future adjustment to --dark/--primary/--secondary updates the
       hero gradient too, instead of the two drifting out of sync. */
    --grad-hero: linear-gradient(150deg, var(--dark) 0%, var(--primary) 48%, var(--secondary) 120%);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: var(--font-body);
    color: var(--text);
}

/*==========================================================
CLEANUP — consolidates rules that were declared more than once
elsewhere in this file. Delete the original scattered copies of:
  - the second .sidebar background override (hardcoded hex)
  - the second .sidebar-link / .sidebar-link.active block
  - the second .sidebar-footer block
  - the duplicated .order-actions .btn / .order-date-note pair
    (delete the SECOND, later copy of each - they were identical)
==========================================================*/

/* Was missing entirely - .locked-value referenced var(--radius-sm) with
   no definition anywhere, so that element silently rendered with NO
   border-radius at all. Added here rather than inventing a whole new
   spacing-scale token set for one usage. */
:root {
    --radius-sm: 8px;
}

/* One definition, tokens instead of hardcoded hex - future changes to
   --dark/--primary/--secondary now flow through here automatically,
   same as everywhere else in the theme. */
.sidebar {
    background: linear-gradient(180deg, var(--dark) 0%, var(--primary) 55%, var(--secondary) 130%);
}

.sidebar-link {
    position: relative;
    text-decoration: none !important;
}

    .sidebar-link:hover {
        transform: translateX(2px);
        text-decoration: none !important;
    }

    .sidebar-link.active {
        background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.05));
        box-shadow: inset 0 0 0 1px rgba(125,211,252,.14);
    }

.sidebar-back,
.sidebar-submenu-item {
    text-decoration: none !important;
}

    .sidebar-back:hover,
    .sidebar-submenu-item:hover {
        text-decoration: none !important;
    }

.sidebar-footer {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
    color: rgba(255,255,255,.35);
}

/*==========================================================
FORMS — v2

Supersedes the earlier "FORM PRIMITIVES" block entirely (delete
that section - .form-group, .form-control, .form-section-label,
.form-check, .auth-error-banner - and use this in its place).
Same base classes, no markup changes needed anywhere. Adds: a
visible hover state before focus, a proper invalid/error state,
a required-field marker, nicer checkboxes with their own hover
ring, consistent label rhythm, and a slightly deeper inset shadow
at rest so fields read as tactile rather than flat.
==========================================================*/

.form-group {
    margin-bottom: 18px;
}

    .form-group label:not(.form-check) {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 7px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--dark);
        letter-spacing: .01em;
    }

/* Add class="form-required" to a <label> for a red asterisk - clearer
   than relying on the browser's native "required" styling, which most
   people never notice. */
.form-required::after {
    content: "*";
    color: var(--danger);
    font-weight: 700;
}

.form-control {
    display: block;
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .form-control:hover:not(:focus):not(:disabled) {
        border-color: #C7D0DC;
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(11,61,145,.1);
    }

    .form-control::placeholder {
        color: #9CA3AF;
    }

    .form-control:disabled {
        background: var(--light);
        color: var(--text-light);
        border-color: var(--border);
        box-shadow: none;
        cursor: not-allowed;
    }

    /* Add class="is-invalid" to a .form-control, and a sibling
   <span class="invalid-feedback"> for the message - mirrors the
   danger treatment already used in .auth-error-banner elsewhere. */
    .form-control.is-invalid {
        border-color: var(--danger);
        background-color: rgba(220,38,38,.02);
    }

        .form-control.is-invalid:focus {
            box-shadow: 0 0 0 4px rgba(220,38,38,.1);
        }

.invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
}

textarea.form-control {
    resize: vertical;
    min-height: 90px;
    line-height: 1.65;
}

/* Native select arrow redrawn in the theme's own text colour rather than
   a fixed grey, so it stays consistent if --text-light is ever tuned. */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
    cursor: pointer;
}

    select.form-control:hover:not(:focus) {
        border-color: #C7D0DC;
    }

input[type="file"].form-control {
    padding: 9px 12px;
    cursor: pointer;
    box-shadow: none;
}

    input[type="file"].form-control::file-selector-button {
        margin-right: 12px;
        padding: 7px 14px;
        border: none;
        border-radius: 7px;
        background: var(--light);
        color: var(--text);
        font-family: var(--font-body);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }

        input[type="file"].form-control::file-selector-button:hover {
            background: var(--border);
        }

.form-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 26px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
}

    .form-section-label:first-of-type {
        margin-top: 0;
    }

/* Checkbox rows get their own hover ring, matching .radio-option's
   treatment elsewhere - a border colour shift plus a very faint tint,
   so the row itself feels clickable, not just the tiny checkbox. */
.form-check {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 2px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
    transition: var(--transition);
}

    .form-check:hover {
        color: var(--dark);
    }

    .form-check input[type="checkbox"] {
        width: 17px;
        height: 17px;
        flex-shrink: 0;
        accent-color: var(--primary);
        cursor: pointer;
    }

.auth-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    border-left: 3px solid var(--danger);
    background: rgba(220,38,38,.05);
    color: #991B1B;
}

    .auth-error-banner i {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .auth-error-banner ul {
        margin: 0;
        padding-left: 16px;
    }

    .auth-error-banner li {
        margin-bottom: 2px;
    }

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}


/*
==========================================================
TRUSTLINE CLIENT DASHBOARD — application shell
This file is the dashboard-specific layer: sidebar,
topbar, cards, module tiles, tables, badges, forms, and
the login page. The :root block above supplies the brand
colours/variables this file relies on throughout.
==========================================================
*/

/*==========================================================
APP SHELL
==========================================================*/

.app-body {
    background: var(--light);
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    z-index: 100;
    background: var(--dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .sidebar-brand img {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        flex-shrink: 0;
    }

.sidebar-brand-text h2 {
    font-size: 14.5px;
    color: #fff;
    line-height: 1.3;
}

.sidebar-brand-text span {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: 16px 12px 8px;
}

    .sidebar-section-label:first-child {
        padding-top: 4px;
    }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.68);
    position: relative;
    transition: var(--transition);
}

    .sidebar-link i {
        font-size: 17px;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
        color: rgba(255,255,255,.5);
    }

    .sidebar-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

        .sidebar-link:hover i {
            color: #fff;
        }

    .sidebar-link.active {
        background: rgba(47,128,237,.16);
        color: #fff;
    }

        .sidebar-link.active i {
            color: #7DD3FC;
        }

        .sidebar-link.active::before {
            content: "";
            position: absolute;
            left: -14px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 22px;
            border-radius: 0 3px 3px 0;
            background: linear-gradient(180deg,var(--primary-light),var(--secondary-light));
        }

.sidebar-link-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    background: var(--danger);
    color: #fff;
    border-radius: 10px;
    padding: 2px 7px;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-back {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
}

    .sidebar-back:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .sidebar-back i {
        font-size: 15px;
    }

/* ---------- Sidebar module dropdowns (CSS-only, via <details>) ---------- */

.sidebar-module-group {
    margin-bottom: 2px;
}

    .sidebar-module-group summary {
        list-style: none;
        cursor: pointer;
        justify-content: flex-start;
    }

        .sidebar-module-group summary::-webkit-details-marker {
            display: none;
        }

.sidebar-module-chevron {
    margin-left: auto;
    font-size: 11px !important;
    color: rgba(255,255,255,.4) !important;
    transition: transform .2s ease;
}

.sidebar-module-group[open] .sidebar-module-chevron {
    transform: rotate(180deg);
}

.sidebar-submenu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 6px 44px;
}

.sidebar-submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,.45);
}

.badge-soon {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Main column */
.app-main {
    margin-left: 264px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 72px;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-title h1 {
    font-size: 19px;
    color: var(--dark);
}

.topbar-title span {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-light);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 17px;
    background: var(--light);
}

    .topbar-icon-btn:hover {
        background: var(--border);
        color: var(--dark);
    }

    .topbar-icon-btn .dot {
        position: absolute;
        top: 7px;
        right: 8px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--danger);
        border: 2px solid #fff;
    }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.topbar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.topbar-user-info {
    line-height: 1.3;
}

    .topbar-user-info b {
        display: block;
        font-size: 13.5px;
        color: var(--dark);
    }

    .topbar-user-info span {
        display: block;
        font-size: 11.5px;
        color: var(--text-light);
    }

.topbar-user i {
    font-size: 12px;
    color: var(--text-light);
}

.app-content {
    flex: 1;
    padding: 32px;
}

@media(max-width:960px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .3s ease;
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .app-main {
        margin-left: 0;
    }

    .topbar {
        padding: 0 18px;
    }

    .app-content {
        padding: 20px;
    }

    #sidebarToggle {
        display: flex !important;
    }
}

/*==========================================================
KPI CARDS
==========================================================*/

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
}

    .kpi-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }

    .kpi-card:nth-child(1)::before {
        background: var(--primary);
    }

    .kpi-card:nth-child(2)::before {
        background: var(--secondary);
    }

    .kpi-card:nth-child(3)::before {
        background: var(--accent-dark);
    }

    .kpi-card:nth-child(4)::before {
        background: var(--danger);
    }

.kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.kpi-card:nth-child(1) .kpi-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.kpi-card:nth-child(2) .kpi-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.kpi-card:nth-child(3) .kpi-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.kpi-card:nth-child(4) .kpi-icon {
    background: linear-gradient(135deg,#B91C1C,var(--danger));
}

.kpi-trend {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
}

    .kpi-trend.up {
        color: #15803D;
        background: rgba(34,197,94,.1);
    }

    .kpi-trend.down {
        color: var(--danger);
        background: rgba(220,38,38,.08);
    }

    .kpi-trend.flat {
        color: var(--text-light);
        background: var(--light);
    }

.kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 6px;
}

.kpi-label {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 600;
}

@media(max-width:1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:560px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
MODULE LAUNCH TILES (Overview page)
==========================================================*/

.module-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.module-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

    .module-tile:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: transparent;
    }

.module-tile-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.module-tile h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.module-tile p {
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}

.module-tile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
}

    .module-tile-link i {
        font-size: 12px;
        transition: transform .2s ease;
    }

.module-tile:hover .module-tile-link i {
    transform: translateX(3px);
}

.module-tile.comms .module-tile-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.module-tile.comms .module-tile-link {
    color: var(--primary);
}

.module-tile.erp .module-tile-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.module-tile.erp .module-tile-link {
    color: var(--secondary);
}

.module-tile.cyber .module-tile-icon {
    background: linear-gradient(135deg,#B91C1C,var(--danger));
}

.module-tile.cyber .module-tile-link {
    color: var(--danger);
}

.module-tile.reports .module-tile-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.module-tile.reports .module-tile-link {
    color: var(--accent-dark);
}

.module-tile.settings .module-tile-icon {
    background: linear-gradient(135deg,var(--primary-dark),#0F766E);
}

.module-tile.settings .module-tile-link {
    color: var(--primary-dark);
}

@media(max-width:900px) {
    .module-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .module-grid {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
PANEL — generic content card used across module pages
==========================================================*/

.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px;
    margin-bottom: 24px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

    .panel-head h3 {
        font-size: 16px;
    }

    .panel-head p {
        font-size: 13px;
        color: var(--text-light);
        margin-top: 2px;
    }

/*==========================================================
MODULE HERO — small header banner at the top of each module page
==========================================================*/

.module-hero {
    border-radius: 16px;
    padding: 32px 34px;
    margin-bottom: 28px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

    .module-hero::before {
        content: "";
        position: absolute;
        top: -100px;
        right: -80px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.14),transparent 70%);
        pointer-events: none;
    }

.module-hero-text {
    position: relative;
    z-index: 2;
}

    .module-hero-text .tag {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: rgba(255,255,255,.7);
        margin-bottom: 8px;
        display: block;
    }

    .module-hero-text h1 {
        color: #fff;
        font-size: 24px;
        margin-bottom: 6px;
    }

    .module-hero-text p {
        color: rgba(255,255,255,.78);
        font-size: 14px;
        margin: 0;
    }

.module-hero .btn {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.module-hero.comms {
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
}

.module-hero.erp {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.module-hero.cyber {
    background: linear-gradient(135deg,#1F1315,#B91C1C);
}

.module-hero.reports {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.module-hero.settings {
    background: linear-gradient(135deg,var(--primary-dark),#0F766E);
}

/*==========================================================
SUB-FEATURE TILES — used inside module pages (e.g. Communications:
Single SMS / Bulk SMS / Airtime)
==========================================================*/

.feature-tile-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.feature-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--transition);
}

    .feature-tile:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
    }

.feature-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.feature-tile h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.feature-tile p {
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 16px;
}

.feature-tile .btn {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 10px 16px;
}

@media(max-width:800px) {
    .feature-tile-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:520px) {
    .feature-tile-grid {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
BADGES / STATUS PILLS
==========================================================*/

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

    .badge.success {
        background: rgba(34,197,94,.1);
        color: #15803D;
    }

    .badge.warning {
        background: rgba(245,158,11,.12);
        color: var(--accent-dark);
    }

    .badge.danger {
        background: rgba(220,38,38,.09);
        color: var(--danger);
    }

    .badge.info {
        background: rgba(10,77,140,.08);
        color: var(--primary);
    }

    .badge.neutral {
        background: var(--light);
        color: var(--text-light);
    }

/*==========================================================
EMPTY / COMING SOON STATE
==========================================================*/

.empty-state {
    text-align: center;
    padding: 70px 30px;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 16px;
}

    .empty-state i {
        font-size: 40px;
        color: var(--border);
        margin-bottom: 18px;
        display: block;
    }

    .empty-state h3 {
        font-size: 17px;
        margin-bottom: 8px;
    }

    .empty-state p {
        font-size: 14px;
        color: var(--text-light);
        max-width: 420px;
        margin: 0 auto;
    }

/*==========================================================
TOOLBAR — search + primary action, sits above a data table
==========================================================*/

.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.toolbar-search {
    position: relative;
    flex: 1;
    max-width: 320px;
}

    .toolbar-search i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 14px;
    }

    .toolbar-search input {
        width: 100%;
        padding: 10px 14px 10px 38px;
        border: 1px solid var(--border);
        border-radius: 10px;
        font-size: 13.5px;
        font-family: var(--font-body);
    }

        .toolbar-search input:focus {
            outline: none;
            border-color: var(--primary);
        }

/*==========================================================
DATA TABLE
==========================================================*/

.data-table-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

    .data-table-wrap .empty-state {
        border: none;
        border-radius: 0;
        border-top: 1px solid var(--border);
    }

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

    .data-table thead th {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-light);
        background: var(--light);
        padding: 14px 20px;
        border-bottom: 1px solid var(--border);
    }

    .data-table tbody td {
        padding: 16px 20px;
        font-size: 13.5px;
        color: var(--text);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr:hover {
        background: var(--light);
    }

.table-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.table-user-cell b {
    display: block;
    font-size: 13.5px;
    color: var(--dark);
}

.table-user-cell span {
    display: block;
    font-size: 12px;
    color: var(--text-light);
}

.table-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.table-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 14px;
}

    .table-action-btn:hover {
        background: var(--light);
        color: var(--primary);
    }

    .table-action-btn.danger:hover {
        color: var(--danger);
    }

.role-chip {
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

    .role-chip.admin {
        background: rgba(220,38,38,.09);
        color: var(--danger);
    }

    .role-chip.staff {
        background: rgba(10,77,140,.08);
        color: var(--primary);
    }

    .role-chip.viewer {
        background: var(--light);
        color: var(--text-light);
    }

@media(max-width:800px) {
    .data-table thead {
        display: none;
    }

    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100%;
    }

        .data-table tbody tr {
            border-bottom: 1px solid var(--border);
            padding: 14px 20px;
        }

        .data-table tbody td {
            border-bottom: none;
            padding: 6px 0;
        }

    .table-actions {
        justify-content: flex-start;
        margin-top: 8px;
    }
}

/*==========================================================
MODAL — CSS-only, checkbox-driven (no JavaScript). The trigger
checkbox must be a sibling of .modal-overlay in the markup —
both direct children of the page content, not nested inside
different containers — for the ~ selector below to work.
==========================================================*/

.modal-toggle-input {
    display: none;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(8,24,39,.55);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-toggle-input:checked ~ .modal-overlay {
    display: flex;
}

.modal-box {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

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

    .modal-head h3 {
        font-size: 17px;
    }

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 16px;
    cursor: pointer;
}

    .modal-close:hover {
        background: var(--light);
        color: var(--dark);
    }

.modal-body {
    padding: 24px 26px;
}

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

.check-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .check-group label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        color: var(--text);
        font-weight: 500;
        cursor: pointer;
    }

    .check-group input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
    }

/*==========================================================
BUTTON — small dashboard-scoped variants (this file already
defines .btn/.btn-primary/.btn-outline below via the login
page section; this adds a light variant for use on dark
module-hero backgrounds)
==========================================================*/

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.3;
    text-decoration: none;
}

    .btn:hover {
        text-decoration: none;
    }

.btn-primary {
    background: var(--primary);
    color: #fff;
}

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

.btn-outline {
    background: #fff;
    color: var(--text);
    border-color: var(--border);
}

    .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

.btn-light {
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
}

    .btn-light:hover {
        background: rgba(255,255,255,.26);
    }

/*==========================================================
AUTH SCREEN
Form left, brand right. The form takes the reading position
because it is what someone came here to use; the panel beside
it is quiet on purpose.
==========================================================*/

.auth-screen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/*---------- Form side ----------*/
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    /* A faint wash rather than pure white, so the card has something to
       lift off. On white, a white card with a shadow reads as a rendering
       artefact rather than an object. */
    background: #F7F9FC;
}

.auth-form-card {
    width: 100%;
    max-width: 430px;
    padding: 40px 38px 34px;
    background: #fff;
    border-radius: 14px;
    /* Two shadows: a tight one for the edge, a wide soft one for the lift.
       A single shadow does one or the other, never both convincingly. */
    box-shadow: 0 1px 3px rgba(8,24,39,.06), 0 22px 50px rgba(8,24,39,.09);
}

    .auth-form-card h2 {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--primary);
        margin: 0 0 6px;
    }

.auth-form-sub {
    font-size: 14.5px;
    color: var(--text-light);
    margin: 0 0 26px;
}

/*---------- Notices ----------*/

.auth-notice {
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    /* A coloured left edge rather than a full tinted box - it marks the
       message without turning a third of the form into a warning. */
    border-left: 3px solid;
}

.auth-notice-error {
    background: rgba(220,38,38,.05);
    border-left-color: var(--danger);
    color: #991B1B;
}

.auth-notice-info {
    background: rgba(34,197,94,.06);
    border-left-color: #22C55E;
    color: #15803D;
}

.auth-notice ul {
    margin: 0;
    padding-left: 16px;
}

/*---------- Fields ----------*/

/* The icon lives in its own tinted block rather than floating over the
   input, so the text never has to dodge around it and the field reads as
   one object rather than an input with something stuck on top. */
.auth-field {
    display: flex;
    align-items: stretch;
    background: #EEF2F9;
    border: 1.5px solid transparent;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 14px;
    transition: border-color .2s ease, background .2s ease;
}

    .auth-field:focus-within {
        border-color: var(--primary);
        background: #fff;
    }

.auth-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: rgba(10,77,140,.07);
    color: var(--primary);
    font-size: 15px;
    transition: background .2s ease;
}

.auth-field:focus-within .auth-field-icon {
    background: rgba(10,77,140,.1);
}

.auth-field input {
    flex: 1;
    min-width: 0;
    padding: 15px 16px;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
}

    .auth-field input::placeholder {
        color: #8B9AB4;
    }

    /* Chrome imposes its own tint on autofilled fields. background-color cannot
   override it; a large inset shadow is the standard way round. */
    .auth-field input:-webkit-autofill,
    .auth-field input:-webkit-autofill:hover,
    .auth-field input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #EEF2F9 inset;
        -webkit-text-fill-color: var(--text);
        transition: background-color 9999s ease-in-out 0s;
    }

/*---------- Row ----------*/

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 6px 0 22px;
    font-size: 13.5px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    cursor: pointer;
}

    .auth-remember input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
    }

.auth-link {
    color: var(--primary);
    font-weight: 600;
}

    .auth-link:hover {
        text-decoration: underline;
    }

/*---------- Submit ----------*/

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(10,77,140,.22);
    transition: transform .25s ease, box-shadow .25s ease;
}

    /* The arrow advances on hover — a small acknowledgement that the button
       moves you forward, rather than a colour change that says nothing. */
    .auth-submit i {
        transition: transform .25s ease;
    }

    .auth-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(10,77,140,.3);
    }

        .auth-submit:hover i {
            transform: translateX(4px);
        }

/*---------- Help and footer ----------*/

.auth-help {
    font-size: 12.5px;
    color: var(--text-light);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.7;
}

.auth-card-foot {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-light);
    text-align: center;
    line-height: 1.7;
}

/*==========================================================
BRAND PANEL
==========================================================*/

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: var(--grad-hero);
    overflow: hidden;
}

.particles-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.auth-brand-mark {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

    .auth-brand-mark img {
        width: 84px;
        height: auto;
    }

    .auth-brand-mark span {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #fff;
        max-width: 320px;
        line-height: 1.25;
    }

.auth-brand-links {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 42px;
}

    .auth-brand-links a {
        font-size: 13.5px;
        color: rgba(255,255,255,.65);
        transition: color .25s ease;
    }

        .auth-brand-links a:hover {
            color: #fff;
        }

.auth-brand-foot {
    position: absolute;
    bottom: 32px;
    left: 40px;
    right: 40px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.auth-brand-copy {
    font-size: 11.5px;
    color: rgba(255,255,255,.38);
}

.auth-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(255,255,255,.75);
}

/*==========================================================
RESPONSIVE
The brand panel drops to a strip above the form rather than
disappearing — it carries the logo and the legal links, and
losing both on mobile would leave an unbranded form with no
way to reach the terms.
==========================================================*/

@media(max-width:900px) {
    .auth-screen {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        order: -1;
        padding: 34px 24px 28px;
        min-height: auto;
    }

    .auth-brand-mark {
        flex-direction: row;
        gap: 14px;
    }

        .auth-brand-mark img {
            width: 46px;
        }

        .auth-brand-mark span {
            font-size: 17px;
            text-align: left;
        }

    .auth-brand-links {
        margin-top: 22px;
        gap: 18px;
    }

        .auth-brand-links a {
            font-size: 12.5px;
        }

    .auth-brand-foot {
        position: static;
        margin-top: 22px;
        left: auto;
        right: auto;
        justify-content: center;
    }

    .auth-form-side {
        padding: 34px 24px 48px;
    }
}

/* ---------- Module Adoption bar chart ---------- */
.module-adoption-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

    .module-adoption-row:last-child {
        border-bottom: none;
    }

.module-adoption-label {
    width: 150px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
}

.module-adoption-track {
    flex: 1;
    height: 10px;
    border-radius: 6px;
    background: var(--light);
    overflow: hidden;
    display: block;
}

.module-adoption-fill {
    display: block;
    height: 100%;
    border-radius: 6px;
    transition: width .3s ease;
}

.module-adoption-count {
    width: 150px;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-light);
}

/* ---------- Two-column chart layout ---------- */
.chart-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}

@media(max-width:900px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Module Adoption vertical bar chart ---------- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    height: 200px;
    padding-top: 10px;
}

.bar-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.bar-chart-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 6px;
}

.bar-chart-track {
    width: 100%;
    max-width: 56px;
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: var(--light);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.bar-chart-fill {
    width: 100%;
    border-radius: 8px 8px 0 0;
    transition: height .5s ease;
}

.bar-chart-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dark);
    margin-top: 8px;
    text-align: center;
}

.bar-chart-pct {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-light);
    margin-top: 2px;
}

/* ---------- Active vs Inactive donut chart ---------- */
.donut-chart-wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 10px 0;
}

.donut-chart {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-chart-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

    .donut-chart-hole b {
        font-size: 20px;
        color: var(--dark);
    }

    .donut-chart-hole span {
        font-size: 10.5px;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: .03em;
    }

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
}

    .donut-legend-item b {
        margin-left: auto;
        font-size: 16px;
        color: var(--dark);
    }

.donut-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* ---------- User menu: hover dropdown ---------- */
.user-menu {
    position: relative;
}

    .user-menu .topbar-user {
        cursor: pointer;
        padding-right: 4px;
    }

/* The outer element becomes visible on hover and its own padding-top
   supplies the visual gap - since padding is part of the element's
   hoverable box (unlike a separate margin/gap before it), the cursor
   never leaves .user-menu while crossing that space, so the dropdown
   no longer disappears before the mouse reaches it. */
.user-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 10px;
    width: 220px;
    z-index: 100;
}

.user-menu:hover .user-menu-dropdown {
    display: block;
}

.user-menu-dropdown-inner {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15,23,42,.14);
    overflow: hidden;
}

.user-menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

    .user-menu-header b {
        display: block;
        font-size: 13px;
        color: var(--dark);
    }

    .user-menu-header span {
        display: block;
        font-size: 11.5px;
        color: var(--text-light);
        margin-top: 1px;
    }

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}

    .user-menu-item:hover {
        background: var(--light);
        text-decoration: none;
    }

    .user-menu-item i {
        color: var(--primary);
        font-size: 14px;
        width: 16px;
        text-align: center;
    }

/* Round avatar */
.topbar-user-avatar {
    border-radius: 50% !important;
}

/* ================= Communications module ================= */

.comms-hero {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}

@media(max-width:1000px) {
    .comms-hero {
        grid-template-columns: 1fr;
    }
}

/* Balance card - deliberately the most visually prominent thing on the
   page, since it is what users check most often and what determines
   whether they can send at all. */
.comms-balance-card {
    background: var(--grad-hero);
    color: #fff;
    border-radius: 16px;
    padding: 26px;
    position: relative;
    overflow: hidden;
}

    .comms-balance-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -50px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.14),transparent 70%);
    }

.comms-balance-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

.comms-balance-value {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    margin: 6px 0 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
    z-index: 2;
}

    .comms-balance-value span {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,.7);
    }

.comms-balance-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #FCD34D;
}

.comms-topup {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.15);
    position: relative;
    z-index: 2;
}

.comms-topup-title {
    display: block;
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: var(--font-mono);
}

.comms-topup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

    .comms-topup-row span {
        color: rgba(255,255,255,.6);
    }

    .comms-topup-row b {
        font-family: var(--font-mono);
        font-size: 14px;
        color: #fff;
    }

.comms-hero-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comms-stat-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

@media(max-width:760px) {
    .comms-stat-row {
        grid-template-columns: 1fr;
    }
}

.comms-stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.comms-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.comms-stat b {
    display: block;
    font-size: 19px;
    color: var(--dark);
    line-height: 1.2;
}

.comms-stat span {
    display: block;
    font-size: 11.5px;
    color: var(--text-light);
    margin-top: 2px;
}

.comms-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media(max-width:760px) {
    .comms-actions {
        grid-template-columns: 1fr;
    }
}

.comms-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    transition: var(--transition);
}

    .comms-action-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: var(--primary);
        text-decoration: none;
    }

    .comms-action-card > i:first-child {
        font-size: 22px;
        color: var(--primary);
        width: 26px;
        text-align: center;
        flex-shrink: 0;
    }

    .comms-action-card.primary > i:first-child {
        color: var(--secondary);
    }

    .comms-action-card b {
        display: block;
        font-size: 14.5px;
        color: var(--dark);
    }

    .comms-action-card span {
        display: block;
        font-size: 12px;
        color: var(--text-light);
        margin-top: 1px;
    }

.comms-action-arrow {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-light);
    transition: transform .2s ease;
}

.comms-action-card:hover .comms-action-arrow {
    transform: translateX(3px);
    color: var(--primary);
}

/* ---------- Send SMS ---------- */

.send-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

@media(max-width:1000px) {
    .send-layout {
        grid-template-columns: 1fr;
    }
}

.send-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 90px;
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}

/* Cost card - mirrors the balance card's visual weight, because the cost
   of a send is exactly as important as the balance it draws from. */
.cost-card {
    background: var(--dark);
    color: #fff;
    border-radius: 14px;
    padding: 22px;
}

.cost-card-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.cost-card-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin: 4px 0 18px;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

    .cost-card-value span {
        font-size: 13px;
        font-weight: 600;
        color: rgba(255,255,255,.6);
    }

.cost-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

    .cost-row:last-child {
        border-bottom: none;
    }

    .cost-row span {
        color: rgba(255,255,255,.6);
    }

    .cost-row b {
        font-family: var(--font-mono);
        font-size: 13px;
        color: #fff;
    }

.cost-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    font-size: 12.5px;
}

    .cost-balance span {
        color: var(--text-light);
    }

    .cost-balance b {
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--dark);
    }

.cost-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(245,158,11,.15);
    color: #FCD34D;
    font-size: 12px;
    line-height: 1.5;
}

.info-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .info-list li {
        font-size: 12.5px;
        color: var(--text-light);
        line-height: 1.6;
    }

        .info-list li b {
            color: var(--dark);
        }

/* ---------- Campaign detail ---------- */

.campaign-summary {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}

@media(max-width:900px) {
    .campaign-summary {
        grid-template-columns: 1fr;
    }
}

.message-preview {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.campaign-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.campaign-stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    text-align: center;
}

    .campaign-stat b {
        display: block;
        font-size: 22px;
        color: var(--dark);
        line-height: 1.2;
    }

    .campaign-stat span {
        display: block;
        font-size: 11.5px;
        color: var(--text-light);
        margin-top: 3px;
    }

/* A sub-item that is actually built and clickable, versus the "Soon"
   placeholders around it - brighter text and a hover state so the
   difference is obvious at a glance. */
.sidebar-submenu-link {
    color: rgba(255,255,255,.75) !important;
    text-decoration: none;
    transition: var(--transition);
}

    .sidebar-submenu-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff !important;
        text-decoration: none;
    }

.radio-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13.5px;
    transition: var(--transition);
}

    .radio-option:hover {
        border-color: var(--primary);
    }

    .radio-option input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
    }

/* Parent (reseller) account row - visually separated from the tenant table
   because Trustline is not a peer of the companies below it. */
.parent-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--dark);
    color: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.parent-account-badge {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .parent-account-badge > i {
        font-size: 20px;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 11px;
        background: rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .parent-account-badge b {
        display: block;
        font-size: 14.5px;
        color: #fff;
    }

    .parent-account-badge span {
        display: block;
        font-size: 12px;
        color: rgba(255,255,255,.6);
        margin-top: 2px;
    }

.parent-account-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.parent-account-balance {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

    .parent-account-balance small {
        font-size: 12px;
        font-weight: 600;
        color: rgba(255,255,255,.6);
    }

.bulk-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

@media(max-width:1050px) {
    .bulk-layout {
        grid-template-columns: 1fr;
    }
}

.bulk-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bulk-panel-title {
    font-size: 15px;
    margin-bottom: 16px;
    color: var(--dark);
}

.compose-meter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-light);
}

.sender-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 10px;
}

    .sender-display i {
        color: var(--primary);
        font-size: 15px;
    }

    .sender-display b {
        font-family: var(--font-mono);
        font-size: 13.5px;
        color: var(--dark);
    }

.number-example {
    margin-top: 12px;
}

    .number-example span {
        display: block;
        font-size: 11px;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 4px;
    }

    .number-example code {
        display: block;
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--text-light);
        line-height: 1.7;
    }

    .radio-option span {
        display: flex;
        align-items: center;
        gap: 8px;
    }
.settings-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

@media(max-width:1000px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
}

.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comms-balance-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

    .comms-balance-meta > span {
        font-family: var(--font-mono);
        font-size: 11px;
        color: rgba(255,255,255,.55);
    }

.comms-balance-refresh {
    background: rgba(255,255,255,.14);
    border: none;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

    .comms-balance-refresh:hover {
        background: rgba(255,255,255,.26);
    }

/* Explicit grid rather than flex: the search box, select and buttons each
   get a fixed track, so no element can expand into another regardless of
   its content or the browser's flex-basis interpretation. */
.contact-filters {
    display: grid;
    grid-template-columns: 320px 200px auto auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

@media(max-width:820px) {
    .contact-filters {
        grid-template-columns: 1fr;
    }
}

.contact-filters .toolbar-search {
    position: relative;
    width: 100%;
    max-width: none;
}

    .contact-filters .toolbar-search input {
        width: 100%;
        box-sizing: border-box;
    }

.contact-filters select.form-control {
    width: 100%;
}

.group-section-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 8px;
}

.group-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.group-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

    .group-option:hover {
        border-color: var(--primary);
        background: var(--light);
    }

    .group-option input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
        flex-shrink: 0;
    }

.group-option-body {
    flex: 1;
    min-width: 0;
}

    .group-option-body b {
        display: block;
        font-size: 13px;
        color: var(--dark);
    }

    .group-option-body small {
        display: block;
        font-size: 11.5px;
        color: var(--text-light);
        margin-top: 1px;
        line-height: 1.4;
    }

.group-count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: rgba(10,77,140,.07);
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* A group with nobody in it, or one not yet available (customers pending
   ERP). Dimmed rather than hidden so the capability is visibly there. */
.group-option.unavailable {
    opacity: .45;
    cursor: not-allowed;
}

    .group-option.unavailable:hover {
        border-color: var(--border);
        background: transparent;
    }


.import-errors {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 280px;
    overflow-y: auto;
}

    .import-errors li {
        font-size: 12.5px;
        color: var(--text);
        line-height: 1.6;
    }

.placeholder-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.placeholder-chip {
    background: rgba(10,77,140,.07);
    border: 1px solid transparent;
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
}

    .placeholder-chip:hover {
        background: rgba(10,77,140,.14);
        border-color: var(--primary);
    }

.message-preview-box {
    background: rgba(14,116,144,.07);
    border: 1px solid rgba(14,116,144,.2);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
    min-height: 60px;
    white-space: pre-wrap;
    word-break: break-word;
}

.webhook-url {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    word-break: break-all;
    color: var(--dark);
}

.delivery-bar {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--light);
}

.delivery-bar-segment {
    height: 100%;
    transition: width .4s ease;
}

.delivery-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-light);
}

    .delivery-legend i {
        font-size: 8px;
        margin-right: 4px;
        vertical-align: middle;
    }

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 16px;
}

.template-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .template-card-head b {
        font-size: 14.5px;
        color: var(--dark);
    }

.template-uses {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--primary);
    background: rgba(10,77,140,.07);
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

.template-body {
    background: var(--light);
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 110px;
    overflow: hidden;
}

.template-meta {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-light);
}

.template-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: var(--accent-dark);
    line-height: 1.5;
}

.template-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.template-picker {
    display: flex;
    gap: 8px;
}

    .template-picker select {
        flex: 1;
        min-width: 0;
    }

    .template-picker .btn {
        flex-shrink: 0;
    }

.report-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .report-filter-field label {
        font-size: 11px;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-light);
    }

    .report-filter-field input {
        width: 170px;
    }

.failure-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.failure-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

    .failure-item-head b {
        font-size: 13px;
        color: var(--dark);
    }

    .failure-item-head span {
        font-family: var(--font-mono);
        font-size: 12.5px;
        color: var(--danger);
        font-weight: 700;
    }

.failure-bar {
    height: 6px;
    border-radius: 4px;
    background: var(--light);
    overflow: hidden;
}

.failure-bar-fill {
    height: 100%;
    background: var(--danger);
    border-radius: 4px;
}

.failure-item small {
    display: block;
    font-size: 11.5px;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 5px;
}

.confirm-panel {
    border: 2px solid var(--accent);
    background: rgba(245,158,11,.04);
}

.product-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    display: block;
}

.product-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light);
    color: var(--text-light);
    font-size: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media(max-width:640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
    gap: 12px;
}

.image-tile {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--light);
}

    .image-tile img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .image-tile form {
        position: absolute;
        top: 6px;
        right: 6px;
        margin: 0;
    }

    .image-tile button {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        background: rgba(220,38,38,.9);
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.enquiry-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.enquiry-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    border-left: 3px solid var(--accent);
}
    /* Handled enquiries stay visible but recede, so the list reads as a queue
   rather than an undifferentiated archive. */
    .enquiry-card.handled {
        border-left-color: var(--border);
        opacity: .72;
    }

.enquiry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

    .enquiry-head b {
        font-size: 15px;
        color: var(--dark);
    }

.enquiry-org {
    margin-left: 8px;
    font-size: 12.5px;
    color: var(--text-light);
}

.enquiry-date {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-light);
}

.enquiry-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

    .enquiry-contact a {
        font-size: 12.5px;
        color: var(--primary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .enquiry-contact a:hover {
            text-decoration: underline;
        }

.enquiry-message {
    background: var(--light);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 14px;
}

.enquiry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

@media(max-width:760px) {
    .order-steps {
        grid-template-columns: repeat(2,1fr);
    }
}

.order-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--light);
}

    .order-step.done {
        background: #fff;
        border-color: rgba(21,128,61,.3);
    }

.order-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--text-light);
    font-size: 14px;
}

.order-step.done .order-step-icon {
    background: #15803D;
    color: #fff;
}

.order-step b {
    display: block;
    font-size: 13px;
    color: var(--dark);
}

.order-step span {
    display: block;
    font-size: 11.5px;
    color: var(--text-light);
    font-family: var(--font-mono);
    margin-top: 1px;
}

.order-step small {
    display: block;
    font-size: 10.5px;
    color: var(--text-light);
    margin-top: 1px;
}

.order-totals {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    max-width: 320px;
    margin-left: auto;
}

    .order-totals > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 4px 0;
        font-size: 13.5px;
    }

        .order-totals > div span {
            color: var(--text-light);
        }

        .order-totals > div b {
            font-family: var(--font-mono);
            color: var(--dark);
        }

.order-totals-grand {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 10px !important;
}

    .order-totals-grand span {
        color: var(--dark) !important;
        font-weight: 600;
    }

    .order-totals-grand b {
        font-size: 17px;
        color: var(--primary) !important;
    }

.order-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .order-actions form {
        margin: 0;
    }

    .order-actions .btn {
        width: 100%;
        justify-content: flex-start;
    }

.line-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.line-editor-head,
.line-editor-row {
    display: grid;
    grid-template-columns: 1fr 110px 70px 120px 70px 40px;
    gap: 8px;
    align-items: center;
}

    .line-editor-head span {
        font-size: 11px;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-light);
    }

    .line-editor-row .form-control {
        margin: 0;
    }

@media(max-width:900px) {
    .line-editor-head {
        display: none;
    }

    .line-editor-row {
        grid-template-columns: 1fr 1fr;
    }
}
.order-action-pair {
    display: flex;
    gap: 6px;
}

    .order-action-pair .btn:first-child {
        flex: 1;
        justify-content: flex-start;
    }

    .order-action-pair form {
        margin: 0;
    }

        .order-action-pair form .btn {
            width: auto;
            padding-left: 11px;
            padding-right: 11px;
        }

.stock-current {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
    background: var(--light);
    border-radius: 10px;
}

    .stock-current b {
        font-size: 26px;
        font-weight: 800;
        color: var(--dark);
        line-height: 1;
    }

    .stock-current span {
        font-size: 13px;
        color: var(--text-light);
    }

/* Buttons in the actions panel can carry long labels - "Email delivery note",
   "Extend 30 days". Allowing them to wrap rather than overflow keeps the
   panel intact at any sidebar width. */
.order-actions .btn {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .order-actions .btn i {
        flex-shrink: 0;
    }

.order-date-note {
    padding: 10px 12px;
    background: var(--light);
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.5;
}

    .order-date-note span {
        display: block;
        color: var(--text-light);
        font-size: 11.5px;
    }

    .order-date-note b {
        font-family: var(--font-mono);
        font-size: 13px;
    }

/* Buttons here carry long labels - "Email delivery note", "Extend 30 days".
   Wrapping rather than overflowing keeps the panel intact at any width. */
.order-actions .btn {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .order-actions .btn i {
        flex-shrink: 0;
    }

.order-date-note {
    padding: 10px 12px;
    background: var(--light);
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.5;
}

    .order-date-note span {
        display: block;
        color: var(--text-light);
        font-size: 11.5px;
    }

    .order-date-note b {
        font-family: var(--font-mono);
        font-size: 13px;
    }
/* The Record Payment action is an anchor rather than a form button, so it
   sits directly in the flex column and stretches to the container's natural
   width instead of the panel's. box-sizing keeps the padding inside that
   width rather than adding to it. */
.order-actions > .btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
}

.order-actions form .btn {
    width: 100%;
    box-sizing: border-box;
}

.locked-value {
    padding: 12px 15px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--text);
}

/* The cancel panel is visually separated from the ordinary actions - it is
   irreversible, and shouldn't sit among buttons that aren't. */
.danger-panel {
    border-color: rgba(220,38,38,.25) !important;
    background: rgba(220,38,38,.02);
}

.img-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.img-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

    .img-row.is-primary {
        border-color: rgba(245,158,11,.4);
        background: rgba(245,158,11,.03);
    }

    .img-row img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        border-radius: 7px;
        background: var(--light);
        padding: 3px;
    }

.img-primary-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-dark);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.img-index {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-light);
}

.img-row-actions {
    display: flex;
    gap: 4px;
}

    .img-row-actions form {
        margin: 0;
    }

    .img-row-actions button {
        width: 27px;
        height: 27px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--text-light);
        font-size: 11px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
    }

        .img-row-actions button:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

    .img-row-actions .img-del:hover {
        border-color: var(--danger);
        color: var(--danger);
    }

/*==========================================================
FLOATING LABELS
==========================================================*/

.form-group.floating {
    position: relative;
}

    /* Taller than a plain input, because the field holds two lines of
       information rather than one. The asymmetric padding leaves room for
       the label above and sits the value on the lower half. */
    .form-group.floating .form-control {
        height: 62px;
        padding: 26px 16px 10px 44px;
        font-size: 15px;
        line-height: 1.4;
    }

    .form-group.floating .form-group-icon {
        position: absolute;
        left: 16px;
        /* Aligned to the value rather than the field's centre - the label
           occupies the upper portion, so a centred icon would sit between
           the two and belong to neither. */
        top: 38px;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 15px;
        pointer-events: none;
        transition: color .25s ease;
    }

    .form-group.floating .form-control:focus ~ .form-group-icon {
        color: var(--primary);
    }

    /* At rest the label sits where the value will be, so it reads as a
       placeholder. pointer-events:none so clicking it reaches the input. */
    .form-group.floating label {
        position: absolute;
        left: 44px;
        top: 38px;
        transform: translateY(-50%);
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-light);
        letter-spacing: 0;
        text-transform: none;
        pointer-events: none;
        transition: top .2s cubic-bezier(.4,0,.2,1), font-size .2s ease, letter-spacing .2s ease, color .2s ease;
    }

    /* Rises on focus or once the field holds a value. The small caps and
       letter-spacing at the top mark it as a label rather than content -
       the same treatment as the eyebrows elsewhere in the interface. */
    .form-group.floating .form-control:focus + label,
    .form-group.floating .form-control:not(:placeholder-shown) + label,
    .form-group.floating .form-control:-webkit-autofill + label {
        top: 16px;
        transform: none;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--primary);
    }

    /*---------- Chrome autofill ----------*/

    /* Chrome imposes its own tint on autofilled fields. background-color cannot
   override it; a large inset shadow is the standard way round. */
    .form-group.floating .form-control:-webkit-autofill,
    .form-group.floating .form-control:-webkit-autofill:hover,
    .form-group.floating .form-control:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
        -webkit-text-fill-color: var(--text);
        transition: background-color 9999s ease-in-out 0s;
    }
/*==========================================================
TRUSTLINE — DATA-VIZ PALETTE & CONTAINER TREATMENT
Load after dashboard.css and dashboard-motion.css. Restyles the
chart panels on the Overview page (and anywhere else the same
classes are reused) with a colour scale drawn from the existing
brand variables — no stock red/green traffic-light colours — and
a container shape that echoes the radial-glow treatment already
used on .module-hero, so the charts read as part of the same
system rather than a bolted-on widget.
==========================================================*/

:root {
    /* Ordered qualitative scale for charts. Built from brand hues plus one
       deliberate addition (a muted indigo) so a 4th series doesn't have to
       repeat a brand colour. Reserved for data — not used elsewhere. */
    --chart-1: var(--primary); /* #0A4D8C deep blue   */
    --chart-2: var(--secondary-light); /* #14B8A6 teal        */
    --chart-3: var(--accent); /* #F59E0B amber       */
    --chart-4: #7C6FE0; /* soft indigo         */
    --chart-1-light: var(--primary-light);
    --chart-2-light: #5EEAD4;
    --chart-3-light: #FCD34D;
    --chart-4-light: #A79DEF;
    /* Neutral, not alarmist — "inactive" is a state, not an error, so it
       doesn't borrow --danger red. */
    --chart-neutral: #64748B;
    --chart-neutral-light: #94A3B8;
}

/* ---------- Chart panel container ---------- */
/* Distinguishes chart panels from ordinary content panels: a faint radial
   wash anchored at one corner (same device as .module-hero) instead of a
   flat white card, plus a soft two-stop top edge instead of the single
   flat colour bar KPI cards use. */
.panel-chart {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%);
}

    .panel-chart::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--chart-1), var(--chart-2) 55%, var(--chart-3));
    }

    .panel-chart::after {
        content: "";
        position: absolute;
        top: -70px;
        right: -60px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(10,77,140,.06), transparent 70%);
        pointer-events: none;
    }

    .panel-chart .panel-head {
        position: relative;
        z-index: 1;
    }

/* ---------- Bar chart ---------- */
/* Gradient fill instead of a flat colour block gives each bar a sense of
   volume rather than reading as a coloured rectangle; the track gets a
   faint inset so bars look seated in a groove, not floating on flat grey. */
.bar-chart-track {
    background: var(--light);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
    border-radius: 10px 10px 4px 4px;
}

.bar-chart-fill {
    border-radius: 10px 10px 4px 4px;
    transition: filter var(--dur-fast, .18s) ease, transform var(--dur-fast, .18s) ease;
}

.bar-chart-col:hover .bar-chart-fill {
    filter: brightness(1.08) saturate(1.1);
}

.bar-chart-col:hover .bar-chart-value {
    color: var(--chart-1);
}

/* Assign the palette by position so callers don't need to pass colours
   inline — nth-child keeps series colour consistent across re-renders. */
.bar-chart-col:nth-child(4n+1) .bar-chart-fill {
    background: linear-gradient(180deg, var(--chart-1-light), var(--chart-1));
}

.bar-chart-col:nth-child(4n+2) .bar-chart-fill {
    background: linear-gradient(180deg, var(--chart-2-light), var(--chart-2));
}

.bar-chart-col:nth-child(4n+3) .bar-chart-fill {
    background: linear-gradient(180deg, var(--chart-3-light), var(--chart-3));
}

.bar-chart-col:nth-child(4n+4) .bar-chart-fill {
    background: linear-gradient(180deg, var(--chart-4-light), var(--chart-4));
}

/* ---------- Donut chart ---------- */
/* Brand blue/teal instead of green, neutral slate instead of red — the
   pairing now sits in the same colour family as the rest of the page
   rather than importing a separate red/green status-light vocabulary. */
.donut-chart {
    box-shadow: 0 10px 26px rgba(15,23,42,.1);
}

.donut-chart-hole {
    box-shadow: inset 0 1px 4px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.08);
}

    .donut-chart-hole b {
        color: var(--chart-1);
    }

.donut-legend-item {
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--light);
}

    .donut-legend-item b {
        font-variant-numeric: tabular-nums;
    }

.donut-legend-dot {
    box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 0 0 4px currentColor;
}

/* ---------- Module adoption rows (horizontal bars) ---------- */
.module-adoption-track {
    background: var(--light);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.05);
}

.module-adoption-fill {
    border-radius: 6px;
}

.module-adoption-row:nth-child(4n+1) .module-adoption-fill {
    background: linear-gradient(90deg, var(--chart-1), var(--chart-1-light));
}

.module-adoption-row:nth-child(4n+2) .module-adoption-fill {
    background: linear-gradient(90deg, var(--chart-2), var(--chart-2-light));
}

.module-adoption-row:nth-child(4n+3) .module-adoption-fill {
    background: linear-gradient(90deg, var(--chart-3), var(--chart-3-light));
}

.module-adoption-row:nth-child(4n+4) .module-adoption-fill {
    background: linear-gradient(90deg, var(--chart-4), var(--chart-4-light));
}

/*==========================================================
FORM PRIMITIVES — base rules for .form-group / .form-control /
.form-section-label / .form-check / .auth-error-banner.

Every SuperAdmin view already uses these classes correctly (New
Product, Edit Product, Categories, Stock adjustment, image upload,
etc.) - the views were never the problem. This stylesheet only ever
defined MODIFIERS that assume a base rule exists (.form-group.floating
.form-control, .contact-filters select.form-control { width:100% },
.line-editor-row .form-control { margin:0 }) but never the base rule
itself, so every plain input/select/textarea/label fell back to the
untouched browser default. This block supplies that missing base,
matching the existing look of .toolbar-search input and .auth-field
elsewhere in this file.
==========================================================*/

.form-group {
    margin-bottom: 16px;
}

    .form-group label:not(.form-check) {
        display: block;
        margin-bottom: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--dark);
    }

.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    background-color: #fff;
    box-sizing: border-box;
    transition: var(--transition);
}

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(10,77,140,.08);
    }

    .form-control::placeholder {
        color: #9CA3AF;
    }

    .form-control:disabled {
        background: var(--light);
        color: var(--text-light);
        cursor: not-allowed;
    }

textarea.form-control {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* Native select arrow can't be restyled directly, so it's hidden and
   redrawn with a background image - same chevron used on the shop
   filter select. */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

/* File inputs (product image upload) get lighter padding and a styled
   native file-picker button rather than the raw OS control. */
input[type="file"].form-control {
    padding: 8px 12px;
    cursor: pointer;
}

    input[type="file"].form-control::file-selector-button {
        margin-right: 12px;
        padding: 7px 14px;
        border: none;
        border-radius: 7px;
        background: var(--light);
        color: var(--text);
        font-family: var(--font-body);
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }

        input[type="file"].form-control::file-selector-button:hover {
            background: var(--border);
        }

/* Small uppercase divider used to break a long form into sections
   (Details / Pricing / Stock / Visibility on the product form). */
.form-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 22px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

    .form-section-label:first-of-type {
        margin-top: 0;
    }

/* Checkbox rows ("Track stock levels", "Visible on the storefront").
   The label itself is the clickable row, matching .radio-option and
   .check-group elsewhere in this file. */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

    .form-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: var(--primary);
    }

/* Validation summary / status banner. Danger by default; views already
   override to a success palette inline for non-error messages (see
   TempData["StatusMessage"] usage), same pattern as .auth-notice. */
.auth-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    border-left: 3px solid var(--danger);
    background: rgba(220,38,38,.05);
    color: #991B1B;
}

    .auth-error-banner i {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .auth-error-banner ul {
        margin: 0;
        padding-left: 16px;
    }

    .auth-error-banner li {
        margin-bottom: 2px;
    }

/*==========================================================
SIDEBAR — underline fix + enterprise polish

ROOT CAUSE: .sidebar-link, .sidebar-back, .sidebar-submenu-item and
.sidebar-submenu-link all defined colour/padding/icon sizing but never
set text-decoration, so the browser's default anchor underline was
never overridden - hence the flat, underlined list-of-links look
instead of proper nav items. That's fixed below, along with a refined
active/hover treatment and the .sidebar-role-chip used in the updated
_Layout.cshtml.
==========================================================*/

.sidebar-link,
.sidebar-back,
.sidebar-submenu-item {
    text-decoration: none !important;
}

    .sidebar-link:hover,
    .sidebar-back:hover,
    .sidebar-submenu-item:hover {
        text-decoration: none !important;
    }

/* Slightly more considered hover/active than the flat background swap
   alone - a small rightward nudge on hover, and a soft glow behind the
   active item rather than just a flat tint, so the current page reads
   as unmistakably "here" at a glance. */
.sidebar-link {
    position: relative;
}

    .sidebar-link:hover {
        transform: translateX(2px);
    }

    .sidebar-link.active {
        background: linear-gradient(90deg, rgba(47,128,237,.18), rgba(47,128,237,.05));
        box-shadow: inset 0 0 0 1px rgba(125,211,252,.12);
    }

/* Section labels sit closer to their group and slightly further from
   the one before, so the grouping reads visually rather than just
   through the label text. */
.sidebar-section-label {
    margin-top: 18px;
    margin-bottom: 4px;
}

    .sidebar-section-label:first-child {
        margin-top: 4px;
    }

/* Small role badge under the brand mark, sitting above the console
   name in the footer - a quick, persistent reminder of which
   privilege level this session is operating at. */
.sidebar-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    background: rgba(245,158,11,.14);
    color: #FCD34D;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .sidebar-role-chip i {
        font-size: 10px;
    }

/* Footer text sits below the chip, slightly dimmer than the chip
   itself so the badge stays the visual anchor of that block. */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    color: rgba(255,255,255,.35);
}

/*==========================================================
SUBMENU ACTIVE STATE — highlights the current page's submenu item
(e.g. "Send Single SMS" while on /Communications/Sms/SendSingle),
now that DashboardSidebar/Default.cshtml sets this class based on
the actual route rather than nothing ever marking it.
==========================================================*/

.sidebar-submenu-link.active {
    background: rgba(47,128,237,.16);
    color: #fff !important;
}

    .sidebar-submenu-link.active .bi {
        /* The item's own coloured dot icon stays as-is; only the text
           colour is forced to white above so the label reads clearly
           against the tinted background. */
        filter: none;
    }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-dark);
    text-decoration: none;
    transition: var(--transition);
}

    .back-link:hover {
        color: var(--accent);
        text-decoration: none;
    }

    .back-link i {
        font-size: 12px;
        transition: transform .2s ease;
    }

    .back-link:hover i {
        transform: translateX(-3px);
    }

/*==========================================================
SIDEBAR BACKGROUND — theme gradient instead of flat --dark.
Same colour stops as --grad-hero (used on the shop hero banner,
auth screen, and comms balance card), reoriented top-to-bottom
rather than the original 150deg diagonal - a tall 264px-wide
column shows almost none of a diagonal's range, so the same three
stops read much better running vertically.
==========================================================*/

.sidebar {
    background: linear-gradient(180deg, #071726 0%, #0B3D91 55%, #0F766E 130%);
}
   text-align: right;
}

.paybill-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--light);
    border-radius: 10px;
}

    .paybill-details > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .paybill-details span {
        font-size: 12.5px;
        color: var(--text-light);
    }

    .paybill-details b {
        font-size: 15px;
    }

.topup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

    .topup-row:last-child {
        border-bottom: none;
    }
/*==========================================================
DASHBOARD — ENTERPRISE POLISH + REBRAND-DRIFT FIXES
Paste at the very end of dashboard.css (after everything else,
including any other override files you've already added).
==========================================================*/

/* ---------- BUG FIX 1: restore FORMS v2 as the winning ruleset ---------- */
.form-control {
    padding: 11px 15px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .form-control:hover:not(:focus):not(:disabled) {
        border-color: #C7D0DC;
    }

    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(11,61,145,.1);
    }

/* ---------- BUG FIX 2: sidebar active-link glow back on-brand ---------- */
.sidebar-link.active {
    background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.05));
    box-shadow: inset 0 0 0 1px rgba(125,211,252,.14);
}

/* ---------- Enterprise polish: panels ---------- */
.panel {
    position: relative;
    box-shadow: var(--shadow-sm);
}

.panel-head h3 {
    color: var(--dark);
    letter-spacing: -.01em;
}

/* ---------- Enterprise polish: buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 6px 16px rgba(11,61,145,.22);
}

    .btn-primary:hover {
        background: var(--primary-dark);
        box-shadow: 0 10px 22px rgba(11,61,145,.3);
        transform: translateY(-1px);
    }

.btn-outline:hover {
    background: rgba(11,61,145,.05);
}

.btn-sm {
    padding: 7px 13px;
    font-size: 12.5px;
    border-radius: 8px;
}

/* ---------- Enterprise polish: data tables ---------- */
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--dark);
    font-weight: 800;
}

.data-table tbody tr {
    border-left: 3px solid transparent;
    transition: border-color .18s ease, background .18s ease;
}

    .data-table tbody tr:hover {
        border-left-color: var(--primary);
        background: rgba(11,61,145,.025);
    }

/* ---------- Enterprise polish: badges ---------- */
.badge {
    padding: 5px 11px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px currentColor;
}

    .badge.success {
        box-shadow: inset 0 0 0 1px rgba(21,128,61,.25);
    }

    .badge.warning {
        box-shadow: inset 0 0 0 1px rgba(185,122,8,.25);
    }

    .badge.danger {
        box-shadow: inset 0 0 0 1px rgba(220,38,38,.25);
    }

    .badge.info {
        box-shadow: inset 0 0 0 1px rgba(11,61,145,.25);
    }

/* ---------- Companies page: optional summary strip ---------- */
.kpi-card-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
}

    .kpi-card-mini i {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        flex-shrink: 0;
    }

    .kpi-card-mini b {
        display: block;
        font-size: 18px;
        color: var(--dark);
        line-height: 1.1;
    }

    .kpi-card-mini span {
        display: block;
        font-size: 11.5px;
        color: var(--text-light);
        margin-top: 2px;
    }

.kpi-mini-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media(max-width:760px) {
    .kpi-mini-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- FONT: reverted ----------
   The Montserrat / uppercase / wide-tracking wordmark treatment is
   dropped entirely. .auth-brand-mark span goes back to whatever
   dashboard.css's own base rule already sets (font-weight 800, 26px,
   white) — nothing below touches font-family, weight, size, or case. */

/* ---------- UNDERLINE FIX — hard, high-specificity version ----------
   The earlier class-scoped fix (.auth-brand-mark a, .auth-brand-links a)
   didn't win, which means something with equal-or-higher specificity is
   still setting text-decoration:underline after it, or this file isn't
   actually the last stylesheet loaded on the page. This version uses
   !important and covers every anchor inside the auth brand panel, plus
   the two known classes directly, so it can't lose the cascade. */

.auth-brand *,
.auth-brand a,
.auth-brand a:hover,
.auth-brand a:visited,
.auth-brand a:focus,
.auth-brand-mark,
.auth-brand-mark a,
.auth-brand-mark span,
.auth-brand-links,
.auth-brand-links a {
    text-decoration: none !important;
    border-bottom: none !important;
    text-decoration-line: none !important;
}

    .auth-brand-links a:hover {
        text-decoration: none !important;
    }

/*==========================================================
ONBOARDING PAGE — /SuperAdmin/Companies/Create
Card-style form matching the rest of the admin theme, plus a
selectable module-picker replacing the plain checkbox list.
==========================================================*/

.onboard-form {
    max-width: 720px;
}

.onboard-panel {
    padding: 32px 34px 30px;
}

.onboard-modules-sub {
    font-size: 13px;
    color: var(--text-light);
    margin: -8px 0 16px;
}

/* ---------- Module picker: selectable cards instead of plain checkboxes ---------- */
.module-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media(max-width:640px) {
    .module-picker {
        grid-template-columns: 1fr;
    }
}

.module-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: var(--transition);
}

    .module-option:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
    }

    .module-option input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.module-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.module-option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 20px;
}

.module-option-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
}

.module-option-desc {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}

/* Checkmark badge — hidden until the card is selected */
.module-option-check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    background: #fff;
    transition: var(--transition);
}

.module-option input:checked ~ .module-option-check {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.module-option input:checked ~ .module-option-icon {
    box-shadow: 0 0 0 3px rgba(11,61,145,.14);
}

.module-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(11,61,145,.03);
}

/* Theme colors per module, matching .module-tile's existing palette */
.module-option.theme-comms .module-option-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.module-option.theme-erp .module-option-icon {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
}

.module-option.theme-academy .module-option-icon {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}

.module-option.theme-ids .module-option-icon {
    background: linear-gradient(135deg, #B91C1C, var(--danger));
}

/* ---------- Submit row ---------- */
.onboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

    .onboard-actions .btn-primary {
        padding: 12px 24px;
    }

/*==========================================================
SMS ACCOUNTS PAGE — /SuperAdmin/SmsAccounts
Replaces the inline-styled bits with real classes, upgrades the
Trustline pool banner to the same gradient treatment used for
balance cards elsewhere (.comms-balance-card / .module-hero),
and right-aligns numeric table columns.
==========================================================*/

/* 3-card KPI row variant, used alongside .kpi-grid so it still
   inherits the existing responsive breakpoints. */
.kpi-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media(max-width:900px) {
    .kpi-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:560px) {
    .kpi-grid-3 {
        grid-template-columns: 1fr;
    }
}

.kpi-label-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    margin-top: 2px;
    color: var(--text-light);
}

.kpi-value-warn {
    color: var(--accent-dark);
}

/* Parent pool banner — gradient + glow instead of flat var(--dark),
   matching .comms-balance-card / .module-hero elsewhere. */
.parent-account-row {
    background: var(--grad-hero);
    position: relative;
    overflow: hidden;
}

    .parent-account-row::before {
        content: "";
        position: absolute;
        top: -80px;
        right: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.14), transparent 70%);
        pointer-events: none;
    }

    .parent-account-row > * {
        position: relative;
        z-index: 2;
    }

/* Generic table cell helpers — used instead of scattering inline
   font-family/color styles across every view that renders a table. */
.cell-mono {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
}

.cell-strong {
    font-weight: 700;
}

.cell-sub {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 1px;
}

.cell-muted {
    color: var(--text-light);
    font-size: 12.5px;
}

/* Numeric columns (Balance, Rate) right-aligned for scannability -
   scoped to this table only via its own class, so it doesn't affect
   the Companies table or others that share .data-table. */
.sms-table td:nth-child(3),
.sms-table td:nth-child(4) {
    text-align: right;
}

/*==========================================================
SMS PROVISION + ADJUST UNITS PAGES
Cleans up repeated inline styles into real classes, fixes the
autofill background color so a browser-filled field doesn't
clash with the theme, and normalizes the dark-card CTA button.
==========================================================*/

/* Repeated 3x inline as style="text-transform:uppercase" - now a
   real modifier. */
.form-control-upper {
    text-transform: uppercase;
}

/* .form-check rows are clickable labels; cursor:pointer belongs on
   the class itself, not repeated inline on every usage. */
.form-check {
    cursor: pointer;
}

/* Normalizes the autofill highlight to the theme instead of the
   browser's default blue/lavender tint - this is cosmetic insurance
   on top of the autocomplete fixes in the markup, which address the
   actual wrong-data-getting-filled-in problem. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--text);
    transition: background-color 9999s ease-in-out 0s;
}

/* Success variant of the status banner, replacing the inline
   background/border/color override that was passed via style="". */
.auth-error-banner-success {
    background: rgba(34,197,94,.08);
    border-left-color: #22C55E;
    color: #15803D;
}

/* A crisp solid CTA for use inside dark cards (.cost-card,
   .comms-balance-card, .module-hero) - distinct from .btn-light,
   which is the translucent-on-dark variant used for secondary
   actions. This is for the one primary action a dark card needs
   to visually pop. */
.btn-solid-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: #fff;
    color: var(--dark);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--transition);
}

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

.cost-row-plain {
    border: none;
    padding-top: 4px;
}

.cost-card-note {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
}

/* Smaller sidebar info panels - was style="padding:18px" repeated
   inline on every .panel in the settings sidebar. */
.panel-sm {
    padding: 18px;
}

.panel-mini-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    margin-bottom: 10px;
}

.panel-mini-body {
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.panel-narrow {
    max-width: 520px;
}

/* Text-color utilities - replace one-off inline color:var(--x) on
   icons scattered across radio options and info panels. */
.text-primary {
    color: var(--primary);
}

.text-success {
    color: #15803D;
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--accent-dark);
}

/*==========================================================
PROVISION PAGE — enterprise elevation pass
Top accent on the main panel, colored icon chips for sidebar
notes, a real toggle switch instead of plain checkboxes, a
gradient treatment on the balance card matching .module-hero /
.comms-balance-card elsewhere, and a proper action-row footer.
==========================================================*/

/* Top accent bar - same device as .kpi-card / .ledger, so this
   page's main panel reads as part of the same visual system
   instead of a plain bordered box. */
.panel-accent {
    position: relative;
    overflow: hidden;
}

    .panel-accent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-line, linear-gradient(90deg, var(--primary-light), var(--secondary-light), var(--accent)));
    }

.panel-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Colored icon chips for sidebar mini-panels ----------
   Replaces a bare colored glyph with a proper circular icon badge,
   matching .module-tile-icon / .kpi-icon elsewhere. */
.panel-mini-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12.5px;
}

.panel-mini-icon-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.panel-mini-icon-warning {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}

.panel-sm {
    box-shadow: var(--shadow);
}

/* ---------- Gradient balance card ----------
   Matches .comms-balance-card / .module-hero instead of a flat
   var(--dark) fill, so the "big number" card reads consistently
   with the rest of the enterprise theme. */
.cost-card-grad {
    background: var(--grad-hero);
    position: relative;
    overflow: hidden;
}

    .cost-card-grad::before {
        content: "";
        position: absolute;
        top: -70px;
        right: -50px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.16), transparent 70%);
        pointer-events: none;
    }

    .cost-card-grad > * {
        position: relative;
        z-index: 2;
    }

/* ---------- Toggle switch ----------
   Replaces plain checkboxes for boolean settings (Airtime enabled,
   SMS sending enabled) with a pill-style switch - reads as an
   on/off system state rather than a form field, which is what
   these actually are. Pure CSS, no JS required. */
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    cursor: pointer;
}

.switch {
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.switch-track {
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 20px;
    background: var(--border);
    position: relative;
    transition: background .2s ease;
}

.switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,.25);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.switch input:checked ~ .switch-track {
    background: var(--primary);
}

    .switch input:checked ~ .switch-track .switch-thumb {
        transform: translateX(18px);
    }

.switch input:focus-visible ~ .switch-track {
    box-shadow: 0 0 0 3px rgba(11,61,145,.2);
}

.switch-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .switch-label b {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dark);
    }

    .switch-label small {
        font-size: 12px;
        color: var(--text-light);
        line-height: 1.5;
    }

/* ---------- Form footer action row ---------- */
.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

/*==========================================================
PLATFORM SETTINGS PAGE — /SuperAdmin/Settings
Reuses the same components introduced for Provision (panel-accent,
cost-card-grad, panel-sm, panel-mini-icon, btn-solid-light), plus
two small new utilities: .btn-block and .notice-warning.
==========================================================*/

/* Full-width, centered-content button - was repeated inline as
   style="width:100%;justify-content:center" on the Copy/Regenerate
   buttons. */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* Light-background warning callout, for use on white panels where
   .cost-warning (built for dark cards) would be the wrong contrast.
   Same left-accent pattern as .auth-notice / .legal-callout-warn
   elsewhere in the theme. */
.notice-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    background: rgba(245,158,11,.08);
    border-left: 3px solid var(--accent);
    color: var(--accent-dark);
    font-size: 11.5px;
    line-height: 1.6;
}

    .notice-warning i {
        flex-shrink: 0;
        margin-top: 1px;
    }

/*==========================================================
BUTTON — .btn-danger was referenced across the app (Delete
Category, and likely other destructive actions) but never
actually defined anywhere in the stylesheet, so it silently
fell back to plain .btn styling - identical to every other
outline button, with no red at all. This is the real fix.
==========================================================*/

.btn-danger {
    background: linear-gradient(135deg, #B91C1C, var(--danger));
    color: #fff;
    border-color: transparent;
}

    .btn-danger:hover {
        background: var(--danger);
        box-shadow: 0 8px 18px rgba(220,38,38,.28);
        transform: translateY(-1px);
    }

    .btn-danger:active {
        transform: translateY(0);
    }

/* Outline variant, for a destructive action that shouldn't be as
   visually loud as the solid version (e.g. a "Cancel and discard"
   action next to a bigger red button elsewhere). */
.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border-color: rgba(220,38,38,.35);
}

    .btn-outline-danger:hover {
        background: var(--danger);
        color: #fff;
        border-color: var(--danger);
    }

/*==========================================================
BUTTON — .btn-outline now uses the brand primary at rest, not
just on hover. Previously the base state fell back to plain
--border/--text (grey/black), so outline buttons only picked up
brand color once you hovered them - "View", "Products", etc. all
read as generic grey buttons until interacted with.
==========================================================*/

.btn-outline {
    background: #fff;
    color: var(--primary);
    border-color: rgba(11,61,145,.3);
}

    .btn-outline:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

/*==========================================================
SHOP CATEGORIES PAGE
Top accent on the table container (matching .panel-accent), and
right-aligned numeric columns.
==========================================================*/

.data-table-wrap-accent {
    position: relative;
}

    .data-table-wrap-accent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-line, linear-gradient(90deg, var(--primary-light), var(--secondary-light), var(--accent)));
        z-index: 1;
    }

.categories-table td:nth-child(2),
.categories-table td:nth-child(3) {
    text-align: right;
}

/*==========================================================
CATEGORIES PAGE — follow-up adjustments
1. Delete button pulled back to icon-only (.table-action-btn,
   already defined elsewhere in the theme but unused here) —
   just the trash icon is red, not the whole button container.
2. Table headings and numeric "badge-like" cell values (Products,
   Order) now pick up the brand primary color instead of plain
   dark/black text, so they read as themed data rather than
   generic table copy.
==========================================================*/

/* Table headings: brand-colored instead of plain dark text. */
.data-table thead th {
    color: var(--primary);
}

/* Accent color for numeric "chip-like" values in a table cell
   (category product counts, sort order, etc.) - reusable anywhere
   a small themed number needs to stand out from body text. */
.cell-accent {
    color: var(--primary);
    font-weight: 700;
}

/* .table-action-btn already existed in the theme for icon-only
   row actions but had no non-hover color for its .danger variant -
   it only turned red on hover, so at rest it looked identical to
   every other icon button. This makes the trash icon red at rest,
   while the button itself stays a plain icon button (transparent,
   no colored container) - hover just adds a soft red-tinted
   background for feedback. */
.table-action-btn.danger {
    color: var(--danger);
}

    .table-action-btn.danger:hover {
        background: rgba(220,38,38,.08);
        color: var(--danger);
    }

/*==========================================================
SHOP PRODUCTS PAGE
Same delete-button fix as Categories (icon-only, red icon, no
solid container), plus cleanup of scattered inline styles into
reusable classes, and a couple of small new utilities.
==========================================================*/

/* Action button row beside a panel-head title - was an inline
   style="display:flex;gap:10px" on the Categories/Products
   buttons wrapper. */
.panel-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Struck-through compare-at price. */
.cell-strike {
    font-size: 11px;
    color: var(--text-light);
    text-decoration: line-through;
}

/* Small warning-toned note under a table value (e.g. "2 promised,
   3 free" under a stock count). */
.cell-note-warning {
    font-size: 11px;
    color: var(--accent-dark);
}

/* Vertically stacked badges in one cell (Live/Hidden + Featured),
   replacing manual <br/> + inline margin-top on each badge. */
.badge-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/*==========================================================
SHOP PRODUCTS FILTER BAR — .shop-filter-select / .shop-filter-submit
Moved here from an embedded <style> block that was originally in
Shop-Index.cshtml. Centralizing it so it can't get silently dropped
if the view is edited/rewritten without someone remembering to carry
the inline block along with it (exactly what happened last round).
==========================================================*/

.shop-filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 10px 34px 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

    .shop-filter-select:hover {
        border-color: var(--primary);
    }

    .shop-filter-select:focus {
        outline: none;
        border-color: var(--primary);
    }

.shop-filter-submit {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}

/*==========================================================
NEW PRODUCT PAGE — reuses panel-accent, switch-row, form-actions
from earlier pages; only new addition is a mid-width panel size
(680px was previously an inline style).
==========================================================*/

.panel-md {
    max-width: 680px;
}

/*==========================================================
EDIT PRODUCT PAGE
Small new utilities to support flattening the accidentally
double-nested sidebar panel and cleaning up remaining inline
styles (section header row, small link, divider between
sub-sections sharing one card).
==========================================================*/

.section-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .section-title-row .panel-mini-title {
        margin-bottom: 0;
    }

.link-sm {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
}

    .link-sm:hover {
        text-decoration: underline;
    }

/* Divider between two sub-sections sharing one sidebar card
   (Stock and Images used to be two separate nested .panel cards -
   now one card with this instead). */
.panel-divider {
    border-top: 1px solid var(--border);
    margin: 18px 0;
}

.img-row-meta {
    display: flex;
    align-items: center;
}

/*==========================================================
ORDERS PAGE — plus one retroactive fix
==========================================================*/

/* Generic alias for the select styling originally scoped to
   .shop-filter-select - same visual treatment, usable anywhere a
   filter dropdown needs it, not just the Shop Products page. */
.select-control {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 10px 34px 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

    .select-control:hover {
        border-color: var(--primary);
    }

    .select-control:focus {
        outline: none;
        border-color: var(--primary);
    }

/* Order reference number - clickable, mono, themed, no underline
   at rest (previously an inline-styled <a> with no color/decoration
   set at all, so it inherited whatever the browser default is). */
.ref-link {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}

    .ref-link:hover {
        text-decoration: underline;
    }

/* Small muted note under a table value (dates, validity, due dates) -
   distinct from .cell-note-warning, which is always amber; this one
   is neutral by default and only turns red via .text-danger. */
.cell-note {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-light);
}

/* Block variant of .notice-warning for a page-level banner rather
   than a small sidebar note - full width, slightly larger padding. */
.notice-warning-block {
    margin: 0 0 20px;
    padding: 13px 16px;
    font-size: 13.5px;
}

/* RETROACTIVE FIX: .link-sm (added for the Edit Product "History"
   link) never set text-decoration:none at rest, so it was relying on
   there being a global anchor reset somewhere - there isn't one in
   this stylesheet, only on the public marketing site. Without this,
   "History" would show the browser's default underlined link style
   at rest, with the :hover rule redundantly adding it again. */
.link-sm {
    text-decoration: none;
}