/**
 * GlobalCoin — Client Theme (localhost)
 * File: config/localhost/theme.css
 *
 * Loaded AFTER bootstrap.min.css — client overrides always win.
 * Minimalist clean theme — flat cards, airy spacing, indigo/blue accent.
 * Change the tokens below to rebrand the entire PWA.
 */

/* ─── Design tokens ───────────────────────────────────────────
 *  Softer UI pass — chunkier radii, three named shadow steps,
 *  and an extra ink-soft tone for "secondary text inside a card".
 *  The look brief: calm dashboard, rounded cards, gentle shadows,
 *  pastel badges. Tokens-only changes — no Bootstrap overrides
 *  added beyond what was already here. */
:root {
    --app-primary:      #0f172a;       /* sidebar ink / page title */
    --app-accent:       #1A56DB;       /* GlobalCoin brand blue    */
    --app-accent-d:     #1648B8;       /* hover / pressed accent   */
    --app-accent-light: #EEF2FF;       /* soft accent surface      */
    --app-accent-rgb:   26, 86, 219;
    --app-surface:      #ffffff;       /* card background          */
    --app-bg:           #f6f7fa;       /* page background (softer) */
    --sidebar-w:        220px;
    --navbar-h:         56px;
    --radius-card:      14px;          /* was 10px — rounder feel  */
    --radius-btn:       10px;          /* was  7px                 */
    --radius-pill:      999px;
    --transition:       .18s ease;
    --border-color:     #e2e8f0;
    --border-soft:      #eef0f3;       /* lighter divider inside a card */
    --text-muted:       #64748b;
    --text-ink-soft:    #475569;       /* secondary text in cards  */
    --shadow-xs:        0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:        0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:        0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
}

/* ─── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    background: var(--app-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .9rem;
    color: #0f172a;
    padding-top: var(--navbar-h);
    -webkit-font-smoothing: antialiased;
}

/* ─── Personal font-size overrides (Appearance tab) ──────────
 * html.fs-small (default .9rem) / fs-medium / fs-large
 * Changing the root font-size scales every rem-based unit in the
 * UI (cards, buttons, form controls) without touching each class.
 */
html.fs-small  { font-size: 100%;    /* 16px × 0.9rem = 14.4px body */ }
html.fs-medium { font-size: 106.25%; /* 17px body scaling           */ }
html.fs-large  { font-size: 112.5%;  /* 18px body scaling           */ }
html.fs-medium body { font-size: .95rem; }
html.fs-large  body { font-size: 1rem;  }

/* ─── Navbar — 3-column split ────────────────────────────────── */
.app-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    height: var(--navbar-h);
    z-index: 1050;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Side offcanvas panels (ticket/KYC detail, etc.) start BELOW the fixed top
   navbar instead of sliding under it — the navbar sits at z-index 1050, above
   the offcanvas (1045), so a top:0 panel is clipped by it. bottom:0 (from
   Bootstrap's base .offcanvas) keeps the height correct. */
.offcanvas-end,
.offcanvas-start { top: var(--navbar-h); }

/* Left: brand section — fixed 220px, matches sidebar */
.navbar-brand-panel {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    padding: 0 12px 0 8px;
    border-right: 1px solid var(--border-color);
    gap: 8px;
    flex-shrink: 0;
}
.nav-sidebar-toggle {
    width: 32px; height: 32px;
    border: none; background: transparent; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.nav-sidebar-toggle:hover { background: var(--app-bg); color: var(--app-accent); }

.navbar-brand-name {
    text-decoration: none;
    display: flex; flex-direction: column;
    line-height: 1.15;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.brand-line1 {
    font-size: .78rem;
    font-weight: 700;
    color: var(--app-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.brand-line2 {
    font-size: .7rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-single {
    font-size: .85rem;
    font-weight: 700;
    color: var(--app-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}

/* Centre: search panel */
.navbar-search-panel {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 12px;
    min-width: 0;
    max-width: 480px;
}
.nav-search-form {
    flex: 1;
    max-width: 420px;
    position: relative;
}
.nav-search-inner {
    display: flex;
    align-items: center;
    background: var(--app-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 10px;
    height: 34px;
    gap: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.nav-search-inner:focus-within {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb),.10);
}
.nav-search-icon { color: var(--text-muted); flex-shrink: 0; }
.nav-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: .83rem;
    color: var(--app-primary);
    min-width: 0;
}
.nav-search-input::placeholder { color: var(--text-muted); }

/* Right: action icons — shrink-wrap, push right */
.navbar-actions-panel {
    display: flex;
    align-items: center;
    padding: 0 8px 0 4px;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.nav-action-btn {
    width: 34px; height: 34px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background var(--transition), color var(--transition);
}
.nav-action-btn:hover { background: var(--app-accent-light); color: var(--app-accent); }
.nav-action-badge {
    position: absolute; top: 5px; right: 5px;
    width: 7px; height: 7px;
    background: var(--app-accent);
    border-radius: 50%;
    border: 1.5px solid #fff;
}

/* User button */
.nav-user-btn {
    display: flex; align-items: center; gap: 7px;
    border: none; background: transparent; border-radius: 8px;
    padding: 4px 8px; cursor: pointer;
    transition: background var(--transition);
}
.nav-user-btn:hover { background: var(--app-bg); }
.nav-username { font-size: .83rem; font-weight: 600; color: var(--app-primary); }
.nav-chevron { color: var(--text-muted); }

/* User avatar */
.user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem; flex-shrink: 0;
    user-select: none;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.app-sidebar {
    background: var(--app-primary);
    width: var(--sidebar-w);
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 1px 0 0 rgba(255,255,255,.05);
    z-index: 1040;
    transition: transform .25s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1039;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

@media (max-width: 991.98px) {
    .app-sidebar      { transform: translateX(-100%); }
    .app-sidebar.open { transform: translateX(0); }
    .main-wrapper     { margin-left: 0; }
}
@media (min-width: 992px) {
    .app-sidebar      { transform: translateX(0) !important; }
    .main-wrapper     { margin-left: var(--sidebar-w); }
    .sidebar-overlay  { display: none !important; }
    .d-lg-none        { display: none !important; }
}

/* Nav section labels */
.nav-section-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,.3);
    padding: 16px 16px 4px;
}

/* Sidebar links — softer rounding, subtle hover, accent-bar active */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 8px;
    padding: .55rem .8rem;
    color: rgba(255,255,255,.65);
    font-size: .875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    text-decoration: none;
    position: relative;
}
.sidebar-link i { width: 18px; text-align: center; font-size: 1rem; opacity: .85; flex-shrink: 0; }
.sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}
.sidebar-link.active {
    color: #fff;
    background: rgba(var(--app-accent-rgb),.18);
    box-shadow: inset 3px 0 0 var(--app-accent);
    font-weight: 600;
}
.sidebar-link.active i { opacity: 1; }
.sidebar-link.text-danger-soft { color: rgba(248,113,113,.7); }
.sidebar-link.text-danger-soft:hover { color: #f87171; border-left-color: #f87171; }

/* ─── Sidebar + quick-add button (bilty pattern) ──────────────── */
.sidebar-link-wrap {
    position: relative;
    display: block;
}
.sidebar-plus-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition);
    z-index: 2;
}
@media (hover: none), (max-width: 767.98px) {
    .sidebar-plus-btn { opacity: 1 !important; }
}
.sidebar-link-wrap:hover .sidebar-plus-btn { opacity: 1; }
.sidebar-plus-btn:hover { background: var(--app-accent); color: #fff; }

/* ─── Chat sidebar (bilty pattern) ─────────────────────────────
 * Fixed right-side slide-out panel. Default state is translated
 * off-screen on the right; .open slides it in. On mobile it
 * occupies the full viewport (including over the navbar).
 */
.chat-sidebar {
    position: fixed;
    top: var(--navbar-h);
    right: 0;
    width: 360px;
    max-width: 100vw;
    height: calc(100vh - var(--navbar-h));
    background: var(--app-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0,0,0,.08);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
}
.chat-sidebar.open { transform: translateX(0); }

@media (max-width: 575.98px) {
    .chat-sidebar {
        width: 100vw;
        top: 0;
        height: 100vh;
        border-left: none;
        z-index: 1060;
    }
}

.chat-sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-sidebar-header h6 {
    font-weight: 700;
    font-size: .875rem;
    margin: 0;
    color: var(--app-primary);
}
.chat-close-btn {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: none;
    background: var(--app-bg);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: all var(--transition);
}
.chat-close-btn:hover { background: var(--border-color); color: var(--app-primary); }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}
.chat-msg.mine   { align-self: flex-end;   align-items: flex-end;   }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .8375rem;
    line-height: 1.45;
    word-break: break-word;
}
.chat-msg.mine .chat-bubble {
    background: var(--app-accent);
    color: #fff;
    border-radius: 12px 12px 3px 12px;
}
.chat-msg.theirs .chat-bubble {
    background: #f1f5f9;
    color: var(--app-primary);
    border-radius: 12px 12px 12px 3px;
}
.chat-meta {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: 3px;
    padding: 0 3px;
}

.chat-load-more { text-align: center; padding: 6px 0 2px; }
.chat-load-more button {
    font-size: .75rem;
    color: var(--app-accent);
    background: none;
    border: 1px solid var(--app-accent-light);
    border-radius: 20px;
    padding: 3px 14px;
    cursor: pointer;
    transition: all var(--transition);
}
.chat-load-more button:hover { background: var(--app-accent-light); }

.chat-input-area {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.chat-input-area textarea {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .835rem;
    resize: none;
    min-height: 38px;
    max-height: 100px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition);
}
.chat-input-area textarea:focus { border-color: var(--app-accent); }
.chat-send-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--app-accent);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background var(--transition);
}
.chat-send-btn:hover    { background: var(--app-accent-d); }
.chat-send-btn:disabled { background: var(--border-color); cursor: default; }

.chat-online-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    transition: background var(--transition);
}
.chat-online-dot.connected { background: #22c55e; }

/* ─── Drag + drop helpers (sortable rows) ─────────────────────── */
.gc-sortable-row { cursor: grab; }
.gc-sortable-row.dragging { opacity: .45; }
.gc-sortable-row .gc-drag-handle {
    cursor: grab;
    color: #94a3b8;
    padding: 4px 8px;
    user-select: none;
}
.gc-sortable-row .gc-drag-handle:hover { color: #475569; }
.gc-drop-target { outline: 2px dashed var(--app-accent); outline-offset: -4px; }

/* ─── FAQ list (public + admin manager) ────────────────────────── */
.gc-faq-group { border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; margin-bottom: 14px; background: #fff; }
.gc-faq-group > .gc-faq-group-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: #f8fafc;
    border-radius: 10px 10px 0 0;
    font-weight: 700;
    display:flex;
    align-items:center;
    gap:8px;
}
.gc-faq-item { padding: 10px 14px; border-top: 1px solid var(--border-color, #e2e8f0); }
.gc-faq-item:first-child { border-top: none; }
.gc-faq-q { font-weight: 600; cursor: pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.gc-faq-a { color:#475569; font-size:.87rem; margin-top:6px; display:none; }
.gc-faq-item.open .gc-faq-a { display: block; }

/* ─── Main wrapper ────────────────────────────────────────────── */
.main-wrapper {
    min-height: calc(100vh - var(--navbar-h));
    transition: margin-left .2s ease;
    display: flex;
    flex-direction: column;
}
.content-area {
    padding: 20px 24px;
    max-width: 1400px;
    flex: 1;
}
@media (max-width: 575.98px) {
    .content-area { padding: 14px 12px; }
}

/* ─── Cards — soft surface, gentle shadow, generous padding ───
 *  The default state carries shadow-sm so cards feel "lifted" off
 *  the page without yelling for attention. Hover steps up to
 *  shadow-md + a subtle 1px translate for a satisfying click cue. */
.app-card {
    background: var(--app-surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.app-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}
.app-card-header {
    background: var(--app-surface);
    border-bottom: 1px solid var(--border-soft);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.app-card-header h6,
.app-card-header h5 { margin: 0; font-weight: 700; letter-spacing: -.01em; color: var(--app-primary); }
.app-card-body { padding: 1.25rem; }

/* Bootstrap .card inherits the same soft surface treatment. */
.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--app-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-color); }
.card .card-header {
    background: var(--app-surface);
    border-bottom: 1px solid var(--border-soft);
    padding: 1rem 1.25rem;
    font-weight: 600;
}
.card .card-body { padding: 1.25rem; }

/* ─── Stat tiles — calm dashboard look ────────────────────────
 *  Small uppercase caption above a chunky number. The accent
 *  variant prints a faint coloured wash in the corner so a glance
 *  reads the kind/severity without spelling it out. */
.stat-card {
    background: var(--app-surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
    transform: translateY(-2px);
}
.stat-card .stat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    font-size: 1.15rem;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}
.stat-card .stat-value {
    font-size: 1.75rem; font-weight: 800; line-height: 1.05;
    color: var(--app-primary); letter-spacing: -.02em;
}
.stat-card .stat-label {
    font-size: .72rem; color: var(--text-muted); margin-top: 4px;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.stat-card.accent  .stat-icon { background: var(--app-accent-light); color: var(--app-accent); }
.stat-card.success .stat-icon { background: #dcfce7; color: #16a34a; }
.stat-card.info    .stat-icon { background: #e0f2fe; color: #0284c7; }
.stat-card.warning .stat-icon { background: #fef9c3; color: #ca8a04; }
.stat-card.danger  .stat-icon { background: #fee2e2; color: #dc2626; }

/* ─── Page header — bigger, tighter letter-spacing for hierarchy. */
.page-header { margin-bottom: 1.5rem; }
.page-title    { font-size: 1.35rem; font-weight: 800; color: var(--app-primary); margin: 0; letter-spacing: -.02em; }
.page-subtitle { font-size: .82rem; color: var(--text-muted); margin: .15rem 0 0; }

/* ─── Tables — calm, dense, hover row, soft hairlines ────────── */
.table-app thead th {
    background: #fafbfc;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding: .75rem .85rem;
    white-space: nowrap;
}
.table-app tbody td {
    font-size: .9rem;
    padding: .7rem .85rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft);
    color: var(--app-primary);
}
.table-app tbody tr:hover { background: #fafbfc; }
.table-app tbody tr:last-child td { border-bottom: 0; }
.table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-primary);
    font-size: .9rem;
}
.table thead th {
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: #fafbfc;
    padding: .75rem .85rem;
}
.table tbody td { padding: .7rem .85rem; border-color: var(--border-soft); }

/* ─── Buttons — rounded, gentle lift on hover ─────────────────── */
.btn {
    /* inline-flex + centering so an icon sits on the text baseline and the
       label is vertically centred even when padding is trimmed (py-0 chips,
       segmented toggles like Pending/Settled/Reversed and the passbook
       windows). Bootstrap's default inline-block left them off-centre. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn);
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), transform var(--transition), color var(--transition);
}
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .18) !important; }
.btn-primary {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(var(--app-accent-rgb), .25);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--app-accent-d);
    border-color: var(--app-accent-d);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--app-accent-rgb), .25);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(var(--app-accent-rgb), .25); }
.btn-app-primary {
    background: var(--app-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: .88rem;
    padding: .5rem 1.05rem;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 1px 2px rgba(var(--app-accent-rgb), .25);
}
.btn-app-primary:hover { background: var(--app-accent-d); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--app-accent-rgb), .25); }
.btn-app-primary:active { transform: translateY(0); }

/* Soft outline-like neutral pills — used for "Cancel" / "Back" in
 * modal footers + a few accent-secondary affordances. Sits next to
 * the primary button without competing. */
.btn-light, .btn-outline-secondary {
    background: var(--app-surface);
    border: 1px solid var(--border-color);
    color: var(--text-ink-soft);
    border-radius: var(--radius-btn);
}
.btn-light:hover, .btn-outline-secondary:hover {
    background: var(--app-bg);
    border-color: #cbd5e1;
    color: var(--app-primary);
}

/* ─── Form controls ───────────────────────────────────────────── */
.form-control, .form-select {
    border-color: var(--border-color);
    border-radius: 10px;
    font-size: .9rem;
    padding: .5rem .85rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb),.12);
    outline: 0;
}
.form-control::placeholder { color: #94a3b8; }
.form-label { font-size: .82rem; font-weight: 600; color: var(--text-ink-soft); margin-bottom: .35rem; }
.form-text  { font-size: .78rem; color: var(--text-muted); }
.form-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--app-accent);
    border-bottom: 1px solid var(--app-accent-light);
    padding-bottom: .35rem;
    margin-bottom: .9rem;
}
/* Input groups — softer borders, focus-within wraps the whole group. */
.input-group {
    border-radius: 10px;
}
.input-group .form-control {
    border-radius: 10px 0 0 10px;
}
.input-group .form-control:focus {
    box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb),.12);
}

/* ─── Badges — pastel pill style (Bootstrap's *-subtle variants) */
.badge {
    font-weight: 600; letter-spacing: .02em;
    padding: .3rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .72rem;
}
.badge.bg-success-subtle  { background:#dcfce7 !important; color:#166534 !important; }
.badge.bg-warning-subtle  { background:#fef9c3 !important; color:#854d0e !important; }
.badge.bg-danger-subtle   { background:#fee2e2 !important; color:#991b1b !important; }
.badge.bg-info-subtle     { background:#dbeafe !important; color:#1e40af !important; }
.badge.bg-primary-subtle  { background:#e0e7ff !important; color:#3730a3 !important; }
.badge.bg-secondary-subtle{ background:#f1f5f9 !important; color:#334155 !important; }
.badge.bg-light           { background:#f1f5f9 !important; color:#334155 !important; }

/* ─── Filter bar — flat ───────────────────────────────────────── */
.filter-bar {
    background: var(--app-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: none;
    padding: 12px 16px;
    margin-bottom: 1rem;
}

/* ─── Pagination ──────────────────────────────────────────────── */
.pagination .page-link {
    border-radius: 6px !important;
    margin: 0 2px;
    border-color: var(--border-color);
    color: var(--app-primary);
    font-size: .83rem;
}
.pagination .page-item.active .page-link {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

/* ─── Action buttons (flat) ───────────────────────────────────── */
.btn-action {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: none;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.btn-action-view     { background: var(--app-accent-light); color: var(--app-accent); }
.btn-action-edit     { background: #fef9c3; color: #ca8a04; }
.btn-action-delete   { background: #fee2e2; color: #dc2626; }
.btn-action-print    { background: #dcfce7; color: #16a34a; }
.btn-action-download { background: #ede9fe; color: #7c3aed; }

/* ─── Footer ──────────────────────────────────────────────────── */
.app-footer {
    background: var(--app-surface);
    border-top: 1px solid var(--border-color);
    font-size: .73rem;
    color: var(--text-muted);
    padding: 12px 16px;
    text-align: center;
    margin-top: auto;
}

/* ─── Bootstrap component overrides ──────────────────────────── */
.modal-content { border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.modal-header { border-bottom: 1px solid var(--border-color); padding: 14px 18px; }
.modal-footer { border-top: 1px solid var(--border-color); padding: 12px 18px; }
.modal-body   { padding: 18px; }

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: 6px;
}
.dropdown-item {
    border-radius: 7px;
    font-size: .845rem;
    padding: 7px 10px;
}
.dropdown-item:hover { background: var(--app-bg); }

.alert { border-radius: 9px; font-size: .86rem; }

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--border-color); }
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-size: .855rem;
    font-weight: 500;
    padding: 8px 14px;
    transition: color var(--transition);
}
.nav-tabs .nav-link:hover { color: var(--app-primary); }
.nav-tabs .nav-link.active {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
    background: transparent;
    font-weight: 600;
}

/* Flatten global shadows */
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.modal-content { box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; }
.dropdown-menu { box-shadow: 0 4px 16px rgba(0,0,0,.10) !important; }
.toast         { box-shadow: 0 4px 12px rgba(0,0,0,.10) !important; }

/* ─── Mobile search bar — slides below navbar ─────────────────── */
.mobile-search-bar {
    position: fixed;
    top: var(--navbar-h);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    z-index: 1049;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease, padding .2s ease;
}
.mobile-search-bar.open {
    max-height: 64px;
    padding: 10px 14px;
}
.mobile-search-inner {
    display: flex;
    align-items: center;
    background: var(--app-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 10px;
    height: 38px;
    gap: 8px;
}
.mobile-search-icon { color: var(--text-muted); flex-shrink: 0; }
.mobile-search-input {
    flex: 1; border: none; background: transparent;
    outline: none; font-size: .875rem; color: var(--app-primary);
}
.mobile-search-close {
    border: none; background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center;
    padding: 0; flex-shrink: 0;
}
.mobile-search-close:hover { color: var(--app-primary); }

/* ─── Dark mode ───────────────────────────────────────────────── */
body.dark-mode {
    --app-bg:       #0f172a;
    --app-surface:  #1e293b;
    --app-primary:  #f1f5f9;
    --text-muted:   #94a3b8;
    --border-color: #334155;
    color: #e2e8f0;
    color-scheme: dark;
}

/* Chrome */
body.dark-mode .navbar-brand-panel,
body.dark-mode .app-navbar {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .app-sidebar {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode .nav-search-inner,
body.dark-mode .mobile-search-inner {
    background: #0f172a;
    border-color: #334155;
}
body.dark-mode .nav-action-btn { background: #334155; color: #e2e8f0; }
body.dark-mode .app-card,
body.dark-mode .card,
body.dark-mode .filter-bar,
body.dark-mode .stat-card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .nav-section-label { color: rgba(255,255,255,.35); }

/* Typography */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .h1, body.dark-mode .h2, body.dark-mode .h3,
body.dark-mode .h4, body.dark-mode .h5, body.dark-mode .h6 { color: #f1f5f9; }
body.dark-mode .text-muted,
body.dark-mode .text-body-secondary,
body.dark-mode .text-body-tertiary { color: #94a3b8 !important; }
body.dark-mode .text-dark,
body.dark-mode .text-black,
body.dark-mode .text-body { color: #e2e8f0 !important; }
body.dark-mode small,
body.dark-mode .small { color: inherit; }
body.dark-mode a { color: #93c5fd; }
body.dark-mode a:hover { color: #bfdbfe; }
body.dark-mode hr { border-color: #334155; }
body.dark-mode code,
body.dark-mode kbd { background: #0f172a; color: #fca5a5; border: 1px solid #334155; padding: 1px 5px; border-radius: 3px; }
body.dark-mode pre { background: #0f172a; color: #e2e8f0; border-color: #334155; }

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
body.dark-mode .form-control::placeholder { color: #64748b; }
body.dark-mode .form-control:disabled,
body.dark-mode .form-select:disabled,
body.dark-mode .form-control[readonly] { background: #1a2438; color: #94a3b8; }
body.dark-mode .form-label,
body.dark-mode .col-form-label { color: #e2e8f0; }
body.dark-mode .form-text { color: #94a3b8; }
body.dark-mode .form-check-input { background-color: #0f172a; border-color: #475569; }
body.dark-mode .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
body.dark-mode .input-group-text { background: #0f172a; color: #e2e8f0; border-color: #334155; }

/* Buttons — outlines need light colours in dark mode */
body.dark-mode .btn-outline-dark,
body.dark-mode .btn-outline-secondary {
    color: #e2e8f0;
    border-color: #475569;
    background: transparent;
}
body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-secondary:hover {
    background: #334155;
    color: #f1f5f9;
    border-color: #64748b;
}
body.dark-mode .btn-outline-primary { color: #93c5fd; border-color: #3b82f6; }
body.dark-mode .btn-outline-primary:hover { background: #1e3a8a; color: #f1f5f9; }
body.dark-mode .btn-outline-danger { color: #fca5a5; border-color: #ef4444; }
body.dark-mode .btn-outline-danger:hover { background: #7f1d1d; color: #fff; }
body.dark-mode .btn-outline-success { color: #86efac; border-color: #22c55e; }
body.dark-mode .btn-outline-success:hover { background: #14532d; color: #fff; }
body.dark-mode .btn-outline-warning { color: #fcd34d; border-color: #eab308; }
body.dark-mode .btn-outline-warning:hover { background: #78350f; color: #fff; }
body.dark-mode .btn-outline-info { color: #7dd3fc; border-color: #0ea5e9; }
body.dark-mode .btn-outline-info:hover { background: #075985; color: #fff; }
body.dark-mode .btn-light { background: #334155; color: #e2e8f0; border-color: #475569; }
body.dark-mode .btn-light:hover { background: #475569; color: #f1f5f9; }
body.dark-mode .btn-dark { background: #475569; color: #f1f5f9; border-color: #64748b; }
body.dark-mode .btn-dark:hover { background: #64748b; }
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tabs */
body.dark-mode .nav-tabs { border-bottom-color: #334155; }
body.dark-mode .nav-tabs .nav-link { color: #cbd5e1; border-color: transparent; }
body.dark-mode .nav-tabs .nav-link:hover { border-color: #334155 #334155 transparent; color: #f1f5f9; }
body.dark-mode .nav-tabs .nav-link.active {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155 #334155 #1e293b;
}

/* Dropdowns / modals */
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: #334155; }
body.dark-mode .dropdown-item { color: #e2e8f0; }
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus { background: #334155; color: #f1f5f9; }
body.dark-mode .dropdown-divider { border-color: #334155; }

/* Tables */
body.dark-mode .table {
    --bs-table-bg: #1e293b;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #334155;
    --bs-table-striped-bg: #243247;
    --bs-table-striped-color: #e2e8f0;
    --bs-table-hover-bg: #2a3a52;
    --bs-table-hover-color: #f1f5f9;
    color: #e2e8f0;
    border-color: #334155;
}
body.dark-mode .table thead th,
body.dark-mode .table-light,
body.dark-mode .table-light > th,
body.dark-mode .table-light > td,
body.dark-mode .table-app thead th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
body.dark-mode .table-app tbody td { color: #e2e8f0; border-color: #334155; }

/* Alerts — shift the pale Bootstrap backgrounds to dark-friendly tints */
body.dark-mode .alert-secondary { background: #1e293b; color: #cbd5e1; border-color: #334155; }
body.dark-mode .alert-info      { background: #0c3b52; color: #bae6fd; border-color: #075985; }
body.dark-mode .alert-success   { background: #0b3b25; color: #bbf7d0; border-color: #166534; }
body.dark-mode .alert-warning   { background: #3f2c0a; color: #fde68a; border-color: #854d0e; }
body.dark-mode .alert-danger    { background: #3f1515; color: #fecaca; border-color: #991b1b; }
body.dark-mode .alert-primary   { background: #14265a; color: #bfdbfe; border-color: #1e40af; }

/* Bootstrap "subtle" backgrounds used by badges + cards */
body.dark-mode .bg-light         { background-color: #1e293b !important; color: #e2e8f0; }
body.dark-mode .bg-light-subtle  { background-color: #1a2438 !important; color: #e2e8f0; }
body.dark-mode .bg-dark-subtle   { background-color: #0f172a !important; color: #e2e8f0; }
body.dark-mode .bg-body-tertiary { background-color: #1a2438 !important; }
body.dark-mode .bg-primary-subtle { background-color: #14265a !important; }
body.dark-mode .bg-success-subtle { background-color: #0b3b25 !important; }
body.dark-mode .bg-warning-subtle { background-color: #3f2c0a !important; }
body.dark-mode .bg-danger-subtle  { background-color: #3f1515 !important; }
body.dark-mode .bg-info-subtle    { background-color: #0c3b52 !important; }

body.dark-mode .text-primary     { color: #93c5fd !important; }
body.dark-mode .text-success     { color: #86efac !important; }
body.dark-mode .text-warning     { color: #fcd34d !important; }
body.dark-mode .text-danger      { color: #fca5a5 !important; }
body.dark-mode .text-info        { color: #7dd3fc !important; }

/* Borders */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-end,
body.dark-mode .border-bottom,
body.dark-mode .border-start { border-color: #334155 !important; }

/* Misc UI bits used in admin pages */
body.dark-mode .list-group-item { background: #1e293b; color: #e2e8f0; border-color: #334155; }
body.dark-mode .page-link { background: #1e293b; color: #e2e8f0; border-color: #334155; }
body.dark-mode .page-item.active .page-link { background: var(--app-accent); border-color: var(--app-accent); }
body.dark-mode .upload-zone { background: #1a2438; border-color: #475569; color: #cbd5e1; }
body.dark-mode .upload-zone .bi { color: #64748b; }
body.dark-mode .field-hint { color: #64748b; }
body.dark-mode .form-label-sm { color: #cbd5e1; }

/* Scrollbar thumb contrast */
body.dark-mode ::-webkit-scrollbar-thumb { background: #334155; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ─── Customer shell — dark sidebar with purple accent ──────────
 * Scoped under body.customer-shell so admin/backend keep the dark
 * slate sidebar untouched. Goal: deep-navy surface, purple-violet
 * highlight on the active item (with a left rail), generous airy
 * spacing — matches the LMS reference look.
 *
 * Layout:
 *   .app-sidebar = column flex (nav grows + footer pinned)
 *   .sidebar-nav = scrolls when overflowing
 *   .sidebar-footer = stays at the bottom: Logout CTA
 */
body.customer-shell {
    --customer-sidebar-bg:        #0e1525;
    --customer-sidebar-bg-d:      #0a0f1d;
    --customer-sidebar-fg:        rgba(255,255,255,.62);
    --customer-sidebar-fg-active: #ffffff;
    --customer-sidebar-section:   rgba(255,255,255,.40);
    --customer-sidebar-divider:   rgba(255,255,255,.08);
    --customer-sidebar-accent:    #7c5cff;
    --customer-sidebar-accent-bg: rgba(124, 92, 255, .14);
    --customer-sidebar-accent-bd: rgba(124, 92, 255, .35);
}

/* Make the navbar's brand panel match the dark sidebar visually
   so the left column reads as a single dark rail. */
body.customer-shell .navbar-brand-panel {
    background: var(--customer-sidebar-bg);
    border-right: 0;
}
body.customer-shell .nav-sidebar-toggle { color: rgba(255,255,255,.72); }
body.customer-shell .nav-sidebar-toggle:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
body.customer-shell .brand-line1,
body.customer-shell .brand-single   { color: #fff; }
body.customer-shell .brand-line2    { color: rgba(255,255,255,.55); }

body.customer-shell .app-sidebar {
    background: var(--customer-sidebar-bg);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Top scrolling nav region */
body.customer-shell .app-sidebar .sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 0 18px;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
body.customer-shell .app-sidebar .sidebar-nav::-webkit-scrollbar { width: 4px; }
body.customer-shell .app-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 2px;
}

/* Section labels — softer, more uppercase rhythm */
body.customer-shell .nav-section-label {
    color: var(--customer-sidebar-section);
    padding: 18px 20px 6px;
    letter-spacing: 1.6px;
}
body.customer-shell .nav-section-label:first-child { padding-top: 4px; }

/* Sidebar links — generous padding, rounded with purple-rail active */
body.customer-shell .sidebar-link {
    color: var(--customer-sidebar-fg);
    font-size: .88rem;
    font-weight: 500;
    padding: 11px 16px;
    margin: 2px 10px;
    border-left: 0;
    border-radius: 9px;
    gap: 12px;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.customer-shell .sidebar-link i {
    font-size: 1.05rem;
    opacity: .8;
    transition: color .15s ease, opacity .15s ease;
}
body.customer-shell .sidebar-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--customer-sidebar-fg-active);
    border-left-color: transparent;
}
body.customer-shell .sidebar-link:hover i { opacity: 1; }

body.customer-shell .sidebar-link.active {
    background: var(--customer-sidebar-accent-bg);
    color: var(--customer-sidebar-fg-active);
    border-left-color: transparent;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--customer-sidebar-accent),
                inset 0 0 0 1px var(--customer-sidebar-accent-bd);
}
body.customer-shell .sidebar-link.active i {
    opacity: 1;
    color: var(--customer-sidebar-accent);
}

/* Group toggle button (the parent rows that expand sub-items) */
body.customer-shell .sidebar-group-toggle .sidebar-chevron {
    font-size: .75rem;
    opacity: .55;
}
body.customer-shell .sidebar-group-toggle:hover .sidebar-chevron { opacity: .9; }
body.customer-shell .sidebar-group-toggle[aria-expanded="true"] {
    color: var(--customer-sidebar-fg-active);
}
body.customer-shell .sidebar-group-toggle[aria-expanded="true"] i:not(.sidebar-chevron) {
    color: var(--customer-sidebar-accent);
    opacity: 1;
}

/* Sub-items — indented under the group with a subtle inset background */
body.customer-shell .sidebar-submenu {
    margin: 2px 10px 6px;
    padding: 2px 0 4px;
    border-left: 1px solid rgba(255,255,255,.08);
    margin-left: 28px;
}
body.customer-shell .sidebar-submenu .sidebar-sublink {
    padding-left: 16px;
    font-size: .83rem;
    margin: 1px 0 1px 6px;
    color: rgba(255,255,255,.58);
}
body.customer-shell .sidebar-submenu .sidebar-sublink i.bi {
    font-size: .92rem;
    opacity: .75;
}
body.customer-shell .sidebar-submenu .sidebar-sublink:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
}
body.customer-shell .sidebar-submenu .sidebar-sublink.active {
    background: var(--customer-sidebar-accent-bg);
    color: #fff;
    box-shadow: inset 2px 0 0 0 var(--customer-sidebar-accent);
}
body.customer-shell .sidebar-submenu .sidebar-sublink.active i.bi {
    color: var(--customer-sidebar-accent);
    opacity: 1;
}

/* Pinned footer — Logout CTA */
body.customer-shell .sidebar-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--customer-sidebar-divider);
    padding: 10px 0 14px;
    background: var(--customer-sidebar-bg);
}
body.customer-shell .sidebar-link-quiet {
    color: rgba(255,255,255,.78);
}
body.customer-shell .sidebar-link-quiet:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* Full-width red logout button at the very bottom */
body.customer-shell .sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 14px 4px;
    padding: 11px 14px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    border: 0;
    transition: background var(--transition), transform var(--transition);
}
body.customer-shell .sidebar-logout-btn i { font-size: 1rem; }
body.customer-shell .sidebar-logout-btn:hover {
    background: #b91c1c;
    color: #fff;
}
body.customer-shell .sidebar-logout-btn:active { transform: translateY(1px); }

/* ─── Customer portal — content surface polish ────────────────
 * Reference: the dashboard mockups the user shared (big bold display
 * numbers, soft floating cards on a gray-violet bg, pill tabs, generous
 * gutters). Scoped under body.customer-shell so admin pages keep their
 * tighter look. Anything we tighten here we also bump on mobile so a
 * card never feels claustrophobic on a phone.
 */
body.customer-shell {
    --cust-surface-bg:    #eef0f5;          /* soft violet-gray behind cards */
    --cust-card-bg:       #ffffff;
    --cust-card-radius:   16px;
    --cust-card-shadow:   0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
    --cust-card-shadow-h: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .07);
    --cust-divider:       #eef1f6;
    --cust-stat-num:      #0f172a;
    --cust-stat-num-w:    800;
    background: var(--cust-surface-bg);
}

/* Generous content gutters — the reference uses ~28-32px on desktop,
   tighter on phones but still airy. */
body.customer-shell .content-area { padding: 28px 28px 40px; }
@media (max-width: 767.98px) {
    body.customer-shell .content-area { padding: 18px 14px 30px; }
}

/* Cards — soft float on the violet-gray bg, no harsh borders. */
body.customer-shell .app-card,
body.customer-shell .card {
    background: var(--cust-card-bg);
    border: 0;
    border-radius: var(--cust-card-radius);
    box-shadow: var(--cust-card-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}
body.customer-shell .card:hover { box-shadow: var(--cust-card-shadow-h); }
body.customer-shell .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cust-divider);
    padding: 18px 22px;
}
body.customer-shell .card-body { padding: 22px; }
body.customer-shell .card-footer {
    background: transparent;
    border-top: 1px solid var(--cust-divider);
    padding: 14px 22px;
}

/* Page header — bigger title, room to breathe. */
body.customer-shell .page-header { margin-bottom: 1.75rem; }
body.customer-shell .page-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
body.customer-shell .page-subtitle { font-size: .88rem; color: #64748b; }

/* Stat cards — the hero numbers in the references. Display-weight
   typography, light label, optional trend pill. */
body.customer-shell .stat-card {
    background: var(--cust-card-bg);
    border: 0;
    border-radius: var(--cust-card-radius);
    box-shadow: var(--cust-card-shadow);
    padding: 22px 22px 20px;
    transition: box-shadow .18s ease, transform .18s ease;
}
body.customer-shell .stat-card:hover {
    box-shadow: var(--cust-card-shadow-h);
    transform: translateY(-1px);
}
body.customer-shell .stat-card .stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 1.2rem;
}
body.customer-shell .stat-card .stat-value {
    font-size: 2rem;
    font-weight: var(--cust-stat-num-w);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--cust-stat-num);
}
body.customer-shell .stat-card .stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    margin-top: 6px;
}

/* "Hero number" helper — drop on any element you want to showcase. */
body.customer-shell .hero-number {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--cust-stat-num);
}
body.customer-shell .hero-number-lg {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

/* Pill tabs (Daily / Weekly / Monthly style from reference) — applies
   to any .nav-pills inside the customer shell. */
body.customer-shell .nav-pills {
    background: #f1f3f8;
    border-radius: 999px;
    padding: 4px;
    display: inline-flex;
    gap: 2px;
}
body.customer-shell .nav-pills .nav-link {
    color: #64748b;
    font-weight: 600;
    font-size: .82rem;
    padding: 7px 16px;
    border-radius: 999px;
    border: 0;
}
body.customer-shell .nav-pills .nav-link.active {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

/* Buttons — pill-shaped primary CTAs to match the references. */
body.customer-shell .btn {
    border-radius: 10px;
    font-weight: 600;
}
body.customer-shell .btn-pill,
body.customer-shell .btn-primary,
body.customer-shell .btn-app-primary {
    border-radius: 999px;
    padding: 8px 18px;
}
body.customer-shell .btn-outline-secondary {
    border-radius: 999px;
    border-color: #e2e8f0;
    color: #475569;
}

/* Subtle status badges — match the reference's light-on-tint style. */
body.customer-shell .badge.bg-success-subtle  { background: #dcfce7 !important; color: #15803d !important; }
body.customer-shell .badge.bg-warning-subtle  { background: #fef9c3 !important; color: #a16207 !important; }
body.customer-shell .badge.bg-danger-subtle   { background: #fee2e2 !important; color: #b91c1c !important; }
body.customer-shell .badge.bg-info-subtle     { background: #e0f2fe !important; color: #0369a1 !important; }
body.customer-shell .badge.bg-primary-subtle  { background: #e0e7ff !important; color: #4338ca !important; }
body.customer-shell .badge {
    font-weight: 600;
    padding: .35em .7em;
    border-radius: 999px;
    font-size: .72rem;
}

/* Table-style row lists (Transaction History, etc. from reference) —
   each row gets an icon, primary label, secondary label, status badge,
   amount on the right. Uses .row-list pattern that we'll emit from
   pages going forward; works fine on any existing .list-group too. */
body.customer-shell .row-list { display: flex; flex-direction: column; }
body.customer-shell .row-list .row-list-item,
body.customer-shell .list-group .list-group-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--cust-divider);
    background: transparent;
    transition: background .15s ease;
}
body.customer-shell .row-list .row-list-item:last-child,
body.customer-shell .list-group .list-group-item:last-child { border-bottom: 0; }
body.customer-shell .row-list .row-list-item:hover,
body.customer-shell .list-group .list-group-item:hover { background: #f8fafc; }
body.customer-shell .row-list-icon,
body.customer-shell .list-group-item .row-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #f1f3f8;
    color: #475569;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: .95rem;
}
body.customer-shell .row-list-main { flex: 1 1 auto; min-width: 0; }
body.customer-shell .row-list-title { font-weight: 600; color: #0f172a; }
body.customer-shell .row-list-sub   { font-size: .78rem; color: #64748b; }
body.customer-shell .row-list-amount {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Card-section heading pattern from reference — heading + sub on the
   left, action button on the right. */
body.customer-shell .section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
body.customer-shell .section-head h5,
body.customer-shell .section-head h6 {
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--cust-stat-num);
}
body.customer-shell .section-sub { font-size: .82rem; color: #64748b; margin: 0; }

/* Divider used inside cards (e.g. between the headline number and a
   thin sparkline or a CTA below). */
body.customer-shell .card-divider {
    height: 1px;
    background: var(--cust-divider);
    margin: 16px 0;
}

/* Form controls — softer fills to match the reference look. */
body.customer-shell .form-control,
body.customer-shell .form-select {
    background: #f6f7fb;
    border-color: #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}
body.customer-shell .form-control:focus,
body.customer-shell .form-select:focus {
    background: #fff;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), .14);
}

/* Dark-mode override — keep the customer sidebar branded blue even in
   dark theme so the brand is unmistakable, but soften the surface bg
   so cards still float against it. */
body.customer-shell.dark-mode,
body.dark-mode.customer-shell { --cust-surface-bg: #0b1220; --cust-card-bg: #111a2e; --cust-divider: #1e293b; --cust-stat-num: #f1f5f9; }
body.customer-shell.dark-mode .app-sidebar,
body.dark-mode.customer-shell .app-sidebar,
body.dark-mode.customer-shell .sidebar-footer {
    background: var(--customer-sidebar-bg);
}
body.dark-mode.customer-shell .card,
body.dark-mode.customer-shell .stat-card,
body.dark-mode.customer-shell .app-card { background: var(--cust-card-bg); }
body.dark-mode.customer-shell .nav-pills { background: #1e293b; }
body.dark-mode.customer-shell .nav-pills .nav-link { color: #94a3b8; }
body.dark-mode.customer-shell .nav-pills .nav-link.active { background: #f1f5f9; color: #0f172a; }
body.dark-mode.customer-shell .form-control,
body.dark-mode.customer-shell .form-select { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* ─── OTP / MPIN input — 4-cell row ────────────────────────────
 * Used by the session-reauth modal and the onboarding-MPIN setup
 * modal. Cells are big, calm, and high-contrast so a customer on a
 * phone can hit them without zooming. Active cell glows with the
 * brand accent ring.
 */
.otp-input { width: 100%; }
.otp-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap;
}
.otp-cell {
    /* Flex to fit the container (e.g. a narrow modal-sm) rather than a fixed
       width that overflows the modal — capped at 52px so wider layouts look
       identical, and min-width:0 lets the cells shrink on small screens. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 52px;
    height: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--app-primary);
    background: #f8fafc;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    outline: none;
    caret-color: var(--app-accent);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    -moz-appearance: textfield;
}
.otp-cell::-webkit-outer-spin-button,
.otp-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-cell:hover { border-color: #cbd5e1; }
.otp-cell:focus {
    border-color: var(--app-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), .18);
}
.otp-cell.filled {
    background: #fff;
    border-color: var(--app-accent);
}
.otp-input.is-error .otp-cell {
    border-color: #ef4444;
    background: #fef2f2;
    animation: otpShake .35s cubic-bezier(.36,.07,.19,.97) both;
}
.otp-input.is-error .otp-cell:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}
@keyframes otpShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
@media (max-width: 380px) {
    .otp-cell { max-width: 44px; height: 54px; font-size: 1.25rem; }
    .otp-boxes { gap: 8px; }
}
/* Dark-mode tuning */
body.dark-mode .otp-cell {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .otp-cell:focus { background: #1e293b; }

/* ─── MPIN modal — split layout (art on the left, form on the right)
 * Used by both the session-reauth modal and the onboarding-MPIN setup
 * modal. The left panel is a brand-blue gradient with a jiggling key
 * SVG; the right panel holds the heading + OTP form. Collapses to a
 * single column on phones so the form still has room to breathe.
 */
.mpin-modal-dialog { max-width: 720px; }
.mpin-modal { overflow: hidden; }            /* clip rounded corners */
.mpin-modal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 360px;
}
.mpin-modal-art {
    background: linear-gradient(135deg, #0b5cd5 0%, #1648b8 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    position: relative;
    overflow: hidden;
}
/* Soft halo behind the key for depth */
.mpin-modal-art::before {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
}
.mpin-key-art {
    position: relative;
    z-index: 1;
    width: 110px;
    height: 110px;
    color: #fff;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
    transform-origin: 50% 65%;
    animation: mpinKeyJiggle 1.8s cubic-bezier(.36,.07,.19,.97) infinite;
}
.mpin-art-tag {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    font-size: .78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    text-align: center;
    font-weight: 600;
}
@keyframes mpinKeyJiggle {
     0%             { transform: rotate(-12deg) translateY(0); }
    10%             { transform: rotate(-22deg) translateY(-3px); }
    25%             { transform: rotate(-4deg)  translateY(0); }
    40%             { transform: rotate(-18deg) translateY(-2px); }
    55%             { transform: rotate(-8deg)  translateY(0); }
    70%             { transform: rotate(-16deg) translateY(-1px); }
    85%             { transform: rotate(-10deg) translateY(0); }
   100%             { transform: rotate(-12deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mpin-key-art { animation: none; transform: rotate(-12deg); }
}

/* Raster fallback art (e.g. an animated GIF dropped into
   config/{client}/img/) — sized + drop-shadowed to match the SVG version
   so the modal layout stays identical regardless of which asset ships. */
.mpin-key-art-gif {
    position: relative;
    z-index: 1;
    max-width: 160px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
@media (max-width: 575.98px) {
    .mpin-key-art-gif { max-width: 110px; }
}

.mpin-modal-body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mpin-modal-body h5 { font-weight: 700; }
.mpin-modal-body .mpin-modal-lede {
    color: var(--text-muted);
    font-size: .86rem;
    margin-bottom: 18px;
}

@media (max-width: 575.98px) {
    .mpin-modal-dialog { max-width: calc(100% - 1rem); margin: .5rem auto; }
    .mpin-modal-grid { grid-template-columns: 1fr; min-height: 0; }
    .mpin-modal-art { padding: 22px 16px; }
    .mpin-key-art   { width: 76px; height: 76px; }
    .mpin-modal-body { padding: 22px 20px 24px; }
}

/* Dark mode: keep the art panel branded, soften the body */
body.dark-mode .mpin-modal-body { background: #1e293b; color: #e2e8f0; }

/* ─── Welcome / set-password modal — split layout ─────────────
 * Fires for customers whose password_hash sentinel is still 'NA'
 * (must_set_password=1). Mirrors the design pattern from
 * global-hotel/theme/looknbook/add-password-modal.php:
 *   • brand-blue art panel on the left
 *   • password form + live-validating requirements list on the right
 *   • collapses to a single column on phones
 *   • success overlay swaps in over the form on save
 */
.welcome-pwd-dialog { max-width: 880px; }
.welcome-pwd-modal {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    position: relative;
}
.welcome-pwd-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 520px;
}
.welcome-pwd-art {
    background: linear-gradient(135deg, #0b5cd5 0%, #1648b8 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    overflow: hidden;
}
.welcome-pwd-art::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
}
.welcome-pwd-illustration {
    position: relative;
    z-index: 1;
    width: 160px; height: 160px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}
.welcome-pwd-tagline {
    position: relative; z-index: 1;
    margin-top: 22px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
}
.welcome-pwd-subtag {
    position: relative; z-index: 1;
    margin-top: 4px;
    font-size: .82rem;
    color: rgba(255,255,255,.78);
    text-align: center;
}

.welcome-pwd-body {
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.welcome-pwd-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--app-primary);
    display: flex;
    align-items: center;
}
.welcome-pwd-lede {
    font-size: .9rem;
    color: var(--text-muted);
    margin: 0 0 22px;
}

.welcome-pwd-field { margin-bottom: 14px; }
.welcome-pwd-label {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}
.welcome-pwd-inputgroup {
    display: flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0 12px;
    border: 1px solid transparent;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.welcome-pwd-inputgroup:focus-within {
    background: #fff;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), .15);
}
.welcome-pwd-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    padding: 12px 0;
    font-size: .9rem;
    color: var(--app-primary);
}
.welcome-pwd-input.is-error,
.welcome-pwd-input.is-error + .welcome-pwd-toggle {
    color: #dc2626;
}
.welcome-pwd-input.is-error ~ * { color: #dc2626; }
.welcome-pwd-inputgroup:has(.welcome-pwd-input.is-error) {
    background: #fef2f2;
    border-color: #fecaca;
}
.welcome-pwd-toggle {
    background: 0;
    border: 0;
    color: var(--text-muted);
    padding: 0 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.welcome-pwd-toggle:hover { color: var(--app-primary); }

.welcome-pwd-reqs {
    list-style: none;
    padding: 0;
    margin: 4px 0 18px;
    font-size: .78rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.welcome-pwd-reqs li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    transition: color .2s ease;
}
.welcome-pwd-reqs .req-dot {
    flex: 0 0 14px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    position: relative;
    transition: all .2s ease;
}
.welcome-pwd-reqs li.is-ok { color: #16a34a; }
.welcome-pwd-reqs li.is-ok .req-dot {
    background: #16a34a;
    border-color: #16a34a;
}
.welcome-pwd-reqs li.is-ok .req-dot::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.854 4.146a.5.5 0 0 1 0 .708L6.207 12.5l-3.561-3.56a.5.5 0 1 1 .708-.708L6.207 11.086l7.146-7.147a.5.5 0 0 1 .701.207z'/></svg>") center/contain no-repeat;
}
.welcome-pwd-reqs li.is-bad { color: #dc2626; }
.welcome-pwd-reqs li.is-bad .req-dot {
    background: #dc2626;
    border-color: #dc2626;
}
.welcome-pwd-reqs li.is-bad .req-dot::after {
    content: '✕';
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 8px;
    line-height: 10px;
    text-align: center;
    font-weight: 700;
}

.welcome-pwd-submit {
    width: 100%;
    padding: 12px 16px;
    background: var(--app-accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    margin-top: 8px;
}
.welcome-pwd-submit:hover:not(:disabled) { background: var(--app-accent-d); }
.welcome-pwd-submit:active:not(:disabled) { transform: translateY(1px); }
.welcome-pwd-submit:disabled { opacity: .7; cursor: wait; }

.welcome-pwd-feedback {
    margin-top: 12px;
    font-size: .82rem;
    text-align: center;
    min-height: 20px;
    color: var(--text-muted);
}
.welcome-pwd-feedback.is-error { color: #dc2626; }
.welcome-pwd-feedback.is-success { color: #16a34a; }

/* Success overlay (revealed in place of the grid on save) */
.welcome-pwd-success {
    padding: 60px 32px;
    text-align: center;
    background: #fff;
    animation: welcomePwdFadeIn .35s ease-out;
}
.welcome-pwd-success-icon {
    font-size: 4rem;
    color: #16a34a;
    line-height: 1;
    margin-bottom: 12px;
}
.welcome-pwd-success-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--app-primary);
}
.welcome-pwd-success-text { color: var(--text-muted); margin: 0; }
@keyframes welcomePwdFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .welcome-pwd-dialog  { max-width: calc(100% - 1rem); margin: .5rem auto; }
    .welcome-pwd-grid    { grid-template-columns: 1fr; min-height: 0; }
    .welcome-pwd-art     { padding: 28px 18px; }
    .welcome-pwd-illustration { width: 96px; height: 96px; }
    .welcome-pwd-body    { padding: 24px 22px 26px; }
    .welcome-pwd-reqs    { grid-template-columns: 1fr; }
}

/* Dark mode tweaks */
body.dark-mode .welcome-pwd-body,
body.dark-mode .welcome-pwd-success { background: #1e293b; color: #e2e8f0; }
body.dark-mode .welcome-pwd-title,
body.dark-mode .welcome-pwd-success-title { color: #f1f5f9; }
body.dark-mode .welcome-pwd-inputgroup { background: #0f172a; border-color: #334155; }
body.dark-mode .welcome-pwd-inputgroup:focus-within { background: #1e293b; }
body.dark-mode .welcome-pwd-input { color: #e2e8f0; }
body.dark-mode .welcome-pwd-label { color: #cbd5e1; }
body.dark-mode .welcome-pwd-reqs li { color: #94a3b8; }

/* ─── Print ─────────────────────────────────────────────────── */
@media print {
    .app-navbar,
    .app-sidebar,
    .sidebar-overlay,
    .app-footer,
    .no-print,
    .toast-container { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    body { padding-top: 0 !important; }
    .app-card, .card { box-shadow: none !important; border: 1px solid #ddd; }
}

/* ─── Auth pages (login / create-account / reset-password) ──────
 *  All rules scoped to `.login-page` so the borderless soft inputs
 *  + brand-coloured CTA button stay confined to the auth surface and
 *  don't leak into the admin shell. Each page has its own <style>
 *  block too but the canonical pattern lives here.
 *
 *  Use `<button class="btn cta-primary w-100">` for the primary CTA.
 *  The previous .btn-dark was reading flat-black + bland; this one
 *  picks up the brand-accent blue with a coloured shadow + lift.
 */
.login-page .form-section .form-control,
.login-page .browser-content .form-control {
    background-color: #f5f6fa;
    border: 1px solid transparent;
    border-radius: 12px;
    height: 56px;
    padding: .7rem 1.1rem;
    font-size: 15px;
    color: var(--app-primary);
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.login-page .form-section .form-control::placeholder,
.login-page .browser-content .form-control::placeholder {
    color: #94a3b8;
}
.login-page .form-section .form-control:focus,
.login-page .browser-content .form-control:focus {
    background-color: #fff;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb), .14);
    color: var(--app-primary);
}
.login-page .input-group {
    border: 1px solid transparent;
    background: #f5f6fa;
    border-radius: 12px;
    overflow: hidden;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.login-page .input-group:focus-within {
    background: #fff;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb), .14);
}
.login-page .input-group .form-control,
.login-page .input-group .form-control:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.login-page .input-group-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    color: #94a3b8;
    transition: color .15s;
}
.login-page .input-group-text:hover { color: var(--app-accent); }

/* Bold, brand-coloured CTA. Replaces .btn-dark in all 3 auth pages. */
.login-page .cta-primary {
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(var(--app-accent-rgb), .28),
                0 1px 3px rgba(var(--app-accent-rgb), .18);
    transition: background .2s, transform .12s ease, box-shadow .2s;
    letter-spacing: -.01em;
}
.login-page .cta-primary:hover,
.login-page .cta-primary:focus {
    background: var(--app-accent-d) !important;
    border-color: var(--app-accent-d) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--app-accent-rgb), .35),
                0 2px 4px rgba(var(--app-accent-rgb), .18);
}
.login-page .cta-primary:active { transform: translateY(0); }


/* ════════════════════════════════════════════════════════════════════
   1NR customer dashboard (skin body: pages/cust-dashboard-body.php)
   Ported from the shared custom body. All scoped under body.customer-shell
   so only the customer dashboard is affected. Brand hues resolve to 1NR's
   own tokens (--app-primary ink, --app-accent blue); generic --cust-* /
   --app-* tokens are kept verbatim so 1NR's palette applies automatically.
   ════════════════════════════════════════════════════════════════════ */

body.customer-shell .nr-dash {
    --nr-radius: 14px;
}


/* Welcome */

body.customer-shell .nr-welcome-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

body.customer-shell .nr-welcome {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--app-primary);
    margin: 0;
}

body.customer-shell .nr-wave {
    font-size: 1.2rem;
}

body.customer-shell .nr-welcome-sub {
    color: #64748b;
    margin: .15rem 0 0;
    font-size: .9rem;
}

body.customer-shell .nr-date {
    color: #64748b;
    font-size: .85rem;
    white-space: nowrap;
    padding-top: .4rem;
}


/* Card base for the dashboard sections */

body.customer-shell .nr-card {
    background: var(--cust-card-bg);
    border: 0;
    border-radius: var(--nr-radius);
    box-shadow: var(--cust-card-shadow);
}

body.customer-shell .nr-viewall {
    border-radius: 20px;
    font-size: .78rem;
    padding: .2rem .7rem;
}


/* Quick actions */

body.customer-shell .nr-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}

body.customer-shell .nr-qa {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--cust-card-bg);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--cust-card-shadow);
    padding: .7rem .8rem;
    text-decoration: none;
    color: var(--app-primary);
    font-weight: 600;
    font-size: .9rem;
    transition: transform .15s ease, box-shadow .15s ease;
    text-align: left;
    width: 100%;
}

body.customer-shell .nr-qa:hover {
    transform: translateY(-2px);
    box-shadow: var(--cust-card-shadow-h);
}

body.customer-shell .nr-qa-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

body.customer-shell .nr-qa-lb {
    line-height: 1.15;
}


/* Important updates */

body.customer-shell .nr-updates-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.customer-shell .nr-updates-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--cust-divider);
    font-size: .88rem;
}

body.customer-shell .nr-updates-list li:last-child {
    border-bottom: 0;
}

body.customer-shell .nr-up-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-accent);
    flex-shrink: 0;
}

body.customer-shell .nr-up-text {
    flex: 1;
    color: #334155;
}

body.customer-shell .nr-up-date {
    color: #94a3b8;
    font-size: .75rem;
    white-space: nowrap;
}

body.customer-shell .nr-up-illus {
    width: 100%;
    max-width: 130px;
}


/* Services grid (5-col) */

body.customer-shell .nr-services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
}

body.customer-shell .nr-svc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    padding: .4rem .2rem;
    border-radius: 12px;
    transition: background .15s ease;
}

body.customer-shell .nr-svc:hover {
    background: var(--cust-surface-bg);
}

body.customer-shell .nr-svc-ic {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--app-accent-light);
    color: var(--app-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

body.customer-shell .nr-svc-ic img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
}

body.customer-shell .nr-svc-lb {
    font-size: .76rem;
    font-weight: 600;
    color: var(--app-primary);
    text-align: center;
    line-height: 1.2;
}


/* Wallet card — one connected unit: accent header (balance) + white body (rows).
   Spacing comes from Bootstrap utilities in the markup (p-3/px-3/py-2/mb-1/mb-0),
   not hardcoded here — keeps the card compact instead of stretching to fill
   the dashboard column. Header background is set inline in the markup. */

body.customer-shell .nr-wallet-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

body.customer-shell .nr-wallet-header {
    position: relative;
    color: #fff;
}

body.customer-shell .nr-wallet-icon {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 46px;
    opacity: .9;
}

body.customer-shell .nr-wallet-label {
    font-size: 13px;
    opacity: .85;
}

body.customer-shell .nr-wallet-amount {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
}

body.customer-shell .nr-wallet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.customer-shell .nr-wallet-row:not(:last-child) {
    border-bottom: 1px solid #eef0f5;
}

body.customer-shell .nr-wallet-row-label {
    font-size: 13px;
    color: #222;
}

body.customer-shell .nr-wallet-row-value {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

body.customer-shell .nr-wallet-row-value.nr-wallet-due {
    color: #e53935;
}


/* Stats cards */

body.customer-shell .nr-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

body.customer-shell .nr-stat {
    background: var(--cust-card-bg);
    border-radius: 12px;
    box-shadow: var(--cust-card-shadow);
    padding: .75rem .7rem;
}

body.customer-shell .nr-stat-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: .4rem;
}

body.customer-shell .nr-stat-lb {
    font-size: .72rem;
    color: #64748b;
    line-height: 1.2;
}

body.customer-shell .nr-stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--app-primary);
    margin: .1rem 0;
}

body.customer-shell .nr-stat-link {
    font-size: .72rem;
    color: var(--app-accent);
    text-decoration: none;
}

body.customer-shell .nr-stat-link:hover {
    text-decoration: underline;
}


/* Work summary */

body.customer-shell .nr-ws-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

body.customer-shell .nr-ws-tab {
    font-size: .72rem;
    padding: .22rem .6rem;
    border-radius: 20px;
    text-decoration: none;
    color: #64748b;
    background: var(--cust-surface-bg);
    white-space: nowrap;
}

body.customer-shell .nr-ws-tab.active {
    background: var(--app-accent);
    color: #fff;
}

body.customer-shell .nr-chart {
    width: 100%;
    height: 120px;
}

body.customer-shell .nr-ws-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .76rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--cust-divider);
}

body.customer-shell .nr-ws-stat:last-child {
    border-bottom: 0;
}

body.customer-shell .nr-ws-stat b {
    color: var(--app-primary);
}


/* Quick links bar */

body.customer-shell .nr-quicklinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    background: var(--cust-card-bg);
    border-radius: 12px;
    box-shadow: var(--cust-card-shadow);
    padding: .7rem 1rem;
    margin-top: 1rem;
}

body.customer-shell .nr-ql-title {
    font-weight: 700;
    color: var(--app-primary);
    font-size: .85rem;
}

body.customer-shell .nr-quicklinks a {
    color: #475569;
    text-decoration: none;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

body.customer-shell .nr-quicklinks a:hover {
    color: var(--app-accent);
}

body.customer-shell .nr-quicklinks a i {
    color: var(--app-accent);
}


/* Footer */

body.customer-shell .nr-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
    padding: .7rem .3rem;
    font-size: .78rem;
    color: #64748b;
    border-top: 1px solid var(--cust-divider);
}

body.customer-shell .nr-foot-left i {
    color: #16a34a;
}

body.customer-shell .nr-foot-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

body.customer-shell .nr-foot-right a {
    color: #475569;
    text-decoration: none;
}

body.customer-shell .nr-foot-right a:hover {
    color: var(--app-accent);
}

@media (max-width: 991px) {
    body.customer-shell .nr-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 575px) {
    body.customer-shell .nr-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    body.customer-shell .nr-stats-row {
        grid-template-columns: 1fr;
    }
}

/* ─── Inter — self-hosted ────────────────────────────────────────────────
 * Google Fonts CDN is blocked by the PROD CSP `font-src 'self'`, so the woff2
 * files load same-origin from assets/fonts/ (../../assets/fonts/). Weights 300–800. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../../assets/fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../../assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../../assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../../assets/fonts/inter-800.woff2') format('woff2'); }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body.customer-shell,
body.customer-shell * { font-family: 'Inter', sans-serif !important; }

/* 1nr page background */
body { background-color: #f9fafe !important; }