/* ============================================================
   BeautyPortal design system
   Re-themes Bootstrap 5.3 to the brand palette + adds polish.
   Central file: every page inherits from these tokens.
   ============================================================ */

/* Hurme Geometric Sans 3 — the logo's own typeface, used as --font-heading for every H1-H6/Subtitle1
   heading app-wide (see MainLayout.razor's Theme.Typography) so product-UI headings visually match the
   brand mark, distinct from --font-sans (Inter, body/data text) and --font-serif (Playfair, the
   handful of true editorial marketing surfaces). Only the weights actually used ship as webfonts. */
@font-face {
    font-family: 'Hurme Geometric Sans 3';
    src: url('/fonts/hurme/HurmeGeometricSans3-Regular.woff2') format('woff2'),
         url('/fonts/hurme/HurmeGeometricSans3-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hurme Geometric Sans 3';
    src: url('/fonts/hurme/HurmeGeometricSans3-SemiBold.woff2') format('woff2'),
         url('/fonts/hurme/HurmeGeometricSans3-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hurme Geometric Sans 3';
    src: url('/fonts/hurme/HurmeGeometricSans3-Bold.woff2') format('woff2'),
         url('/fonts/hurme/HurmeGeometricSans3-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hurme Geometric Sans 3';
    src: url('/fonts/hurme/HurmeGeometricSans3-Black.woff2') format('woff2'),
         url('/fonts/hurme/HurmeGeometricSans3-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette */
    --bp-plum-900: #16234a;
    --bp-plum-800: #1e2f5c;
    --bp-plum-700: #2a4488;
    --bp-wine-600: #003FAA;
    --bp-wine-500: #4f7fd6;
    --bp-rose-300: #90b4ee;
    --bp-rose-200: #b8d0f5;
    --bp-rose-100: #dde8fb;
    --bp-blush-50: #f4f8fe;
    --bp-ink: #1c2b30;
    --bp-muted: #5f7681;
    --bp-line: #dbe7ea;
    --bp-gold: #409dc1;

    /* Bootstrap variable overrides — recolor the whole framework */
    --bs-primary: #003FAA;
    --bs-primary-rgb: 0, 63, 170;
    --bs-link-color: #4f7fd6;
    --bs-link-color-rgb: 79, 127, 214;
    --bs-link-hover-color: #003FAA;
    --bs-body-color: #1c2b30;
    --bs-body-bg: #f5f8fd;
    --bs-border-color: #dbe7ea;
    --bs-emphasis-color: #16234a;
    --bs-font-sans-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --bp-font-display: 'Hurme Geometric Sans 3', 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
    --font-serif: var(--bp-font-display);
    --font-sans: var(--bs-font-sans-serif);
    --font-heading: 'Hurme Geometric Sans 3', var(--font-sans);
    --font-mono: ui-monospace, 'Cascadia Code', 'Roboto Mono', 'SF Mono', Consolas, Menlo, monospace;
    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.9rem;
    --bp-shadow-sm: 0 1px 2px rgba(22, 35, 74, 0.05);
    --bp-shadow-md: 0 6px 18px rgba(30, 47, 92, 0.09);
    --bp-shadow-lg: 0 14px 34px rgba(30, 47, 92, 0.14);
}

html, body {
    font-family: var(--bs-font-sans-serif);
    background-color: #f5f8fd;
    color: var(--bp-ink);
    -webkit-font-smoothing: antialiased;
    /* Proportional digits make price/count/percent columns wobble at a glance — this one rule fixes
       every numeric column app-wide without having to hunt each one down individually. */
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Two-track type system
   ------------------------------------------------------------
   Which scale you use is decided by SURFACE, not by size or by
   "this needs to stand out". The display track (.bp-editorial-*, .bp-display —
   --font-serif/--bp-font-display, formerly Playfair Display, now the brand's own
   Hurme Geometric Sans 3 at its Regular weight so it reads lighter/larger than the
   --font-heading tokens below) is for marketing pages, content/editorial sections,
   a product hero, onboarding, empty states — the ~10% of screens that carry
   the brand at its most expressive. Everything past the login boundary — dashboards,
   tables, forms, settings, filters, modals — uses the heading/sans/mono
   tokens below (.bp-title / .bp-section / .bp-subsection / .bp-body
   / .bp-secondary / .bp-label / .bp-eyebrow / .bp-data) and stays there.

   Only two weights exist in the product track: 400 and 500. If
   something needs more emphasis than 500, reach for size or color —
   not weight. 300 appears only in .bp-editorial-body (too thin to
   pass contrast in dense interface text). .bp-eyebrow is the one
   decorative move allowed inside the product — use it sparingly.

   .bp-title / .bp-section / .bp-subsection specifically use
   --font-heading (Hurme Geometric Sans 3, the logo's own typeface)
   rather than --font-sans — every real heading in the product UI
   ties back to the brand mark; body/label/data text stays on Inter
   for density and legibility. Weight is 600 (Hurme SemiBold, an
   actually-shipped weight) rather than 500 to avoid synthetic bold.
   ============================================================ */
.bp-display        { font-family: var(--font-serif); font-size: 56px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.bp-editorial-h1    { font-family: var(--font-serif); font-size: 40px; font-weight: 400; line-height: 1.1;  letter-spacing: -0.015em; }
.bp-editorial-h2    { font-family: var(--font-serif); font-size: 30px; font-weight: 400; line-height: 1.2;  letter-spacing: -0.01em; }
.bp-editorial-body  { font-family: var(--font-sans);  font-size: 17px; font-weight: 300; line-height: 1.7;  letter-spacing: 0; }
.bp-title           { font-family: var(--font-heading); font-size: 24px; font-weight: 600; line-height: 1.3;  letter-spacing: -0.01em; }
.bp-section         { font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.4;  letter-spacing: 0; }
.bp-subsection      { font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.bp-body            { font-family: var(--font-sans);  font-size: 15px; font-weight: 400; line-height: 1.6;  letter-spacing: 0; }
.bp-secondary       { font-family: var(--font-sans);  font-size: 14px; font-weight: 400; line-height: 1.5;  letter-spacing: 0; }
.bp-label           { font-family: var(--font-sans);  font-size: 15px; font-weight: 500; line-height: 1.4;  letter-spacing: 0; }
.bp-eyebrow         { font-family: var(--font-sans);  font-size: 14px; font-weight: 600; line-height: 1.3;  letter-spacing: 0.1em; text-transform: uppercase; }
.bp-data            { font-family: var(--font-mono);  font-size: 14px; font-weight: 400; line-height: 1.5;  letter-spacing: 0; font-variant-numeric: tabular-nums; }

body {
    background-image:
        radial-gradient(900px 500px at 100% -5%, rgba(184, 208, 245, 0.14), transparent),
        radial-gradient(700px 400px at -5% 100%, rgba(144, 180, 238, 0.10), transparent);
    background-attachment: fixed;
}

/* Elegant display serif for headings — editorial/beauty feel */
h1, h2, .brand-serif {
    font-family: var(--bp-font-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--bp-plum-800);
}
h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }

h3, h4, h5 {
    font-family: var(--bs-font-sans-serif);
    color: var(--bp-plum-800);
    font-weight: 500;
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--bp-wine-500);
    text-decoration: none;
}
a:hover, .btn-link:hover {
    color: var(--bp-wine-600);
    text-decoration: underline;
}

/* ---- Buttons ---- */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.45rem 1.1rem;
    transition: filter .12s ease, box-shadow .12s ease, transform .04s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-brand {
    color: #fff;
    background: var(--bp-wine-600);
    border: none;
    box-shadow: 0 2px 6px rgba(0, 63, 170, 0.22);
}
.btn-primary:hover, .btn-brand:hover,
.btn-primary:focus, .btn-brand:focus {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(0, 63, 170, 0.3);
}

.btn-outline-primary {
    color: var(--bp-wine-600);
    border-color: var(--bp-rose-300);
}
.btn-outline-primary:hover {
    background: var(--bp-wine-600);
    border-color: var(--bp-wine-600);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--bp-muted);
    border-color: var(--bp-line);
}
.btn-outline-secondary:hover {
    background: var(--bp-plum-700);
    border-color: var(--bp-plum-700);
    color: #fff;
}

/* ---- Focus rings in brand color ---- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(144, 180, 238, 0.4);
    border-color: var(--bp-rose-300);
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px rgba(22, 35, 74, 0.04);
    transition: box-shadow .15s ease, transform .15s ease;
}
.card-header {
    background: var(--bp-blush-50);
    border-bottom: 1px solid var(--bp-line);
    font-weight: 500;
    color: var(--bp-wine-600);
    border-top-left-radius: 0.9rem !important;
    border-top-right-radius: 0.9rem !important;
}

/* Cards used as clickable tiles lift on hover */
a.card:hover, .card.hover-lift:hover {
    box-shadow: 0 10px 24px rgba(30, 47, 92, 0.13);
    transform: translateY(-2px);
}

/* ---- Forms ---- */
.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--bp-plum-700);
    margin-bottom: 0.3rem;
}
.form-control, .form-select {
    border-radius: 0.5rem;
    border-color: #cfe0e3;
    padding: 0.5rem 0.75rem;
}
.form-control::placeholder { color: #9fb6bb; }
.form-text { color: var(--bp-muted); }

/* ---- Tables ---- */
.table {
    --bs-table-hover-bg: rgba(184, 208, 245, 0.12);
    --bs-table-border-color: var(--bp-line);
}
.table > thead th {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bp-muted);
    font-weight: 500;
    border-bottom: 2px solid var(--bp-line);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.table > tbody > tr > td { padding-top: 0.7rem; padding-bottom: 0.7rem; vertical-align: middle; }

/* ---- Badges ---- */
.badge { font-weight: 500; letter-spacing: 0.01em; padding: 0.38em 0.7em; }

/* ---- Section headings inside cards ---- */
.card-header .bi, .card-title { color: var(--bp-wine-600); }

/* ---- Nav pills / tabs in brand ---- */
.nav-tabs .nav-link.active { color: var(--bp-wine-600); border-bottom-color: var(--bp-wine-600); }
.nav-pills .nav-link.active { background: var(--bp-wine-600); }

.content { padding-top: 1.4rem; }
h1:focus, h2:focus { outline: none; }

/* Validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #cc2a4b; font-size: 0.875rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 0.5rem;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-check-input:checked { background-color: var(--bp-wine-600); border-color: var(--bp-wine-600); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ============================================================
   Reusable premium components (use these across pages)
   ============================================================ */

/* Page hero banner (dashboards, section tops) */
.bp-hero {
    border-radius: 1.1rem;
    padding: 1.6rem 2rem;
    color: #fff;
    background:
        radial-gradient(700px 300px at 90% -30%, rgba(184, 208, 245,0.28), transparent),
        linear-gradient(120deg, var(--bp-plum-900) 0%, var(--bp-plum-700) 55%, var(--bp-wine-600) 100%);
    box-shadow: var(--bp-shadow-md);
}
.bp-hero h1, .bp-hero h2 { color: #fff; }

/* Stat tile */
.bp-stat {
    background: #fff;
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    padding: 1.15rem 1.3rem;
    box-shadow: var(--bp-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
a.bp-stat:hover { box-shadow: var(--bp-shadow-md); transform: translateY(-2px); color: inherit; }
.bp-stat .bp-stat-num {
    font-family: var(--bp-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bp-wine-600);
}
.bp-stat .bp-stat-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bp-muted);
    font-weight: 600;
}

/* Chip / tag */
.bp-chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--bp-blush-50);
    border: 1px solid var(--bp-line);
    color: var(--bp-wine-600);
}

/* Soft section surface */
.bp-surface {
    background: #fff;
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    box-shadow: var(--bp-shadow-sm);
}

/* Action tile (dashboard quick actions) */
.bp-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    padding: 1.15rem 1.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--bp-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    height: 100%;
}
.bp-tile:hover {
    box-shadow: var(--bp-shadow-md);
    transform: translateY(-2px);
    border-color: var(--bp-rose-200);
    color: inherit;
}
.bp-tile .bp-tile-ico { font-size: 1.6rem; margin-bottom: .4rem; display: block; }
.bp-tile .bp-tile-title { font-weight: 650; color: var(--bp-plum-800); }
.bp-tile .bp-tile-sub { font-size: .875rem; color: var(--bp-muted); }

/* Gold hairline accent */
.bp-accent-line { height: 3px; width: 44px; border-radius: 3px; background: linear-gradient(90deg, var(--bp-rose-200), var(--bp-gold)); }


/* ============================================================
   App shell — persistent top nav-bar + contextual sidebar
   (echoes the legacy top-nav + tools-box structure)
   ============================================================ */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar */
.topbar {
    display: flex; align-items: center; gap: 1.1rem;
    background: linear-gradient(90deg, #16234a 0%, #1e2f5c 55%, #2a4488 100%);
    color: #fff; padding: 0 1.1rem; height: 60px;
    position: sticky; top: 0; z-index: 30;
    box-shadow: 0 2px 10px rgba(22, 35, 74, 0.25);
}
.topbar-brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.topbar-brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .55rem; background: linear-gradient(135deg, #b8d0f5, #90b4ee); color: #1e2f5c; font-weight: 800; font-family: Georgia, serif; }
.brand-word { font-family: var(--bp-font-display); letter-spacing: .01em; }
.brand-word-accent { color: var(--bp-rose-200); }

.topnav { display: flex; align-items: center; gap: .1rem; flex: 1; }
.topnav-link { color: rgba(255,255,255,.82); text-decoration: none; padding: .5rem .8rem; border-radius: .45rem; font-size: .92rem; font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; }
.topnav-link:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.topnav-link.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

.topbar-account { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.acct-info { text-align: right; line-height: 1.15; }
.acct-company { font-size: .875rem; font-weight: 600; color: #fff; }
.acct-name { font-size: .875rem; color: var(--bp-rose-200); }
.topbar-btn, .topbar-btn-ghost { border: none; border-radius: .5rem; padding: .42rem .9rem; font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.topbar-btn { background: var(--bp-rose-200); color: #1e2f5c; }
.topbar-btn:hover { background: var(--bp-rose-100); color: #1e2f5c; }
.topbar-btn-ghost { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.25); }
.topbar-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.topnav-toggle, .topnav-burger { display: none; }

/* Body: sidebar + content */
.app-body { display: flex; flex: 1; align-items: stretch; }
.app-sidebar { width: 238px; flex-shrink: 0; background: linear-gradient(180deg, #1e2f5c 0%, #2a4488 100%); padding: .5rem .4rem 2rem; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.app-main { flex: 1; min-width: 0; background: transparent; }
.app-main .content { padding-top: 1.3rem; padding-bottom: 3rem; max-width: 1320px; }

.side-group-title { padding: 1rem .9rem .3rem; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.58); }
.side-group-title:first-child { padding-top: .5rem; }
.side-scroll .side-link { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; margin: .05rem .25rem; border-radius: .5rem; color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; transition: background .12s, color .12s; }
.side-scroll .side-link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.side-scroll .side-link.active { background: rgba(255,255,255,.17); color: #fff; font-weight: 600; }
.side-ico { width: 1.35rem; text-align: center; display: inline-block; }

@media (max-width: 900px) {
    .topnav { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #1e2f5c; padding: .4rem; display: none; z-index: 29; box-shadow: 0 8px 16px rgba(0,0,0,.3); }
    .topnav-toggle:checked ~ .topnav { display: flex; }
    .topnav-burger { display: inline-block; cursor: pointer; font-size: 1.4rem; color: #fff; order: 3; margin-left: .5rem; }
    .topbar-account .topbar-btn-ghost { display: none; }
    .app-sidebar { display: none; }
    .app-main .content { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ============================================================
   Toasts (transient pop-up notifications)
   ============================================================ */
/* ============================================================
   Notification bell + panel (in the top bar)
   ============================================================ */
.notif-wrap { position: relative; }
.notif-bell { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; width: 2.3rem; height: 2.3rem; border-radius: .55rem; cursor: pointer; font-size: 1.05rem; position: relative; }
.notif-bell:hover { background: rgba(255,255,255,.2); }
.notif-badge { position: absolute; top: -9px; right: -9px; background: #e8506b; color: #fff; font-size: 14px; font-weight: 600; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.notif-action-badge { border-color: #fff; font-weight: 750; }
.notif-backdrop { position: fixed; inset: 0; z-index: 1090; }
.notif-panel { position: absolute; right: 0; top: calc(100% + .5rem); width: 410px; max-width: 92vw; max-height: 82vh; background: #fff; border: 1px solid var(--bp-line); border-radius: .8rem; box-shadow: var(--bp-shadow-lg); z-index: 1091; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--bp-line); font-weight: 700; color: #17263b; }
.notif-mark { background: none; border: none; color: #0e5aa7; font-size: .875rem; cursor: pointer; font-weight: 650; }
.notif-list { max-height: 235px; overflow-y: auto; }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--bp-muted); }
.notif-item { display: flex; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--bp-line); cursor: pointer; transition: background .1s; }
.notif-item:hover { background: var(--bp-blush-50); }
.notif-item.unread { background: rgba(184, 208, 245,.12); }
.notif-item-ico { flex-shrink: 0; font-size: 1.1rem; }
.notif-item-body { min-width: 0; }
.notif-item-title { font-weight: 500; color: var(--bp-plum-800); font-size: .88rem; }
.notif-item-msg { color: var(--bp-muted); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-item-time { color: var(--bp-muted); font-size: .875rem; margin-top: .15rem; }
.notif-foot { display: block; text-align: center; padding: .7rem; color: #0e5aa7; font-weight: 700; font-size: .875rem; border-top: 1px solid var(--bp-line); }
.notif-update-dot { background: #35a8e0; border: 2px solid #fff; border-radius: 50%; bottom: -2px; height: 9px; position: absolute; right: -2px; width: 9px; }
.notif-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--bp-line); cursor: pointer; }
.notif-row:hover { background: var(--bp-blush-50); }
.notif-row.unread { background: rgba(184, 208, 245,.12); }
.notif-row-ico { font-size: 1.3rem; }

/* ============================================================
   Modal scroll safety — every pop-up scrolls instead of overflowing
   ============================================================ */
.modal-dialog { max-height: calc(100vh - 2rem); }
.modal-content { max-height: calc(100vh - 2rem); overflow: hidden; }
.modal-body { overflow-y: auto; }
.modal-backdrop-custom { overflow-y: auto; }

/* Every section shares the Beauty Navigator logo cyan accent. */
.app-shell,
.app-shell[data-section] { --section-accent: #409DC1; }

/* The legacy shell uses the same dark-blue/cyan pairing as the current shell. */
.topbar { background: linear-gradient(90deg, var(--section-dark) 0%, var(--section-accent) 220%); }
.app-body { border-top: 4px solid var(--section-accent); }
.app-sidebar { background: linear-gradient(180deg, var(--section-dark) 0%, #16234a 100%); }
.bp-accent-line { background: var(--section-accent) !important; }
.topnav-link.active { box-shadow: inset 0 -3px 0 var(--section-accent); background: rgba(255,255,255,.14); }

/* Live countdown urgency + icon alignment */
.countdown-ending { color: #cc2a4b; font-weight: 500; }
.countdown-ended { color: var(--bp-muted); }
.side-ico.bi { font-size: 1rem; line-height: 1; vertical-align: -.05em; }
.notif-bell .bi { vertical-align: -.1em; }

/* Icon coloring for tiles / feature cards / stats */
.bp-tile-ico .bi { color: var(--section-accent); font-size: 1.6rem; }
.feature-ico .bi { color: var(--section-accent); }
.acct-name { color: var(--bp-rose-200); }

/* ============================================================
   Right utility bar — the third column (portal layout)
   ============================================================ */
.app-rightbar {
    width: 270px; flex-shrink: 0;
    padding: 1.2rem .85rem 2rem;
    position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
    background: linear-gradient(180deg, #f4f8fe 0%, #eaf4f6 100%);
    border-left: 1px solid var(--bp-line);
}
.rb-box {
    background: #fff; border: 1px solid var(--bp-line); border-radius: .8rem;
    padding: .9rem 1rem; margin-bottom: 1rem; box-shadow: var(--bp-shadow-sm);
    border-top: 3px solid var(--section-accent);
}
.rb-box-title { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bp-wine-600); margin-bottom: .7rem; }
.rb-box-title .bi { margin-right: .25rem; }

/* Account box */
.rb-account { border-top-color: #003FAA; }
.rb-account-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.rb-avatar { width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: linear-gradient(135deg,#003FAA,#1e2f5c); color: #fff; font-weight: 700; font-family: var(--bp-font-display); display: inline-flex; align-items: center; justify-content: center; }
.rb-account-info { min-width: 0; }
.rb-account-company { font-weight: 650; color: var(--bp-plum-800); font-size: .9rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-account-name { font-size: .875rem; color: var(--bp-muted); }
.rb-account-btn { display: block; text-align: center; background: linear-gradient(135deg,#4f7fd6,#003FAA); color: #fff; border-radius: .5rem; padding: .55rem; font-size: .875rem; font-weight: 600; text-decoration: none; }
.rb-account-btn:hover { filter: brightness(1.08); color: #fff; }

/* Join box (anon) */
.rb-join { border-top-color: #409dc1; }
.rb-join-text { font-size: .875rem; color: var(--bp-muted); margin: 0 0 .7rem; }
.rb-join-btn { display: block; text-align: center; background: linear-gradient(135deg,#4f7fd6,#003FAA); color: #fff; border-radius: .5rem; padding: .5rem; font-weight: 600; text-decoration: none; }
.rb-join-btn:hover { filter: brightness(1.08); color: #fff; }
.rb-signin { display: block; text-align: center; margin-top: .5rem; font-size: .875rem; color: var(--bp-wine-600); text-decoration: none; }

/* Search box */
.rb-search { display: flex; gap: .4rem; }
.rb-search-input { flex: 1; min-width: 0; border: 1px solid var(--bp-line); border-radius: .5rem; padding: .5rem .65rem; font-size: 1rem; }
.rb-search-btn { border: none; background: var(--bp-wine-600); color: #fff; border-radius: .5rem; padding: 0 .7rem; }

/* Platform-colored tool tiles */
.rb-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rb-tool { --t: #003faa; display: flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--t); background: color-mix(in srgb, var(--t) 10%, #fff); border: 1px solid color-mix(in srgb, var(--t) 30%, #fff); border-radius: .55rem; padding: .5rem .55rem; transition: background .12s; }
.rb-tool:hover { background: color-mix(in srgb, #409dc1 18%, #fff); color: var(--t); }
.rb-tool .bi { font-size: .95rem; }

/* Explore links with colour dots */
.rb-links { display: flex; flex-direction: column; }
.rb-links a { display: flex; align-items: center; gap: .5rem; padding: .5rem .1rem; font-size: .875rem; color: var(--bp-ink); text-decoration: none; border-bottom: 1px solid #eef5f6; }
.rb-links a:last-child { border-bottom: none; }
.rb-links a:hover { color: var(--bp-wine-600); }
.rb-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 1200px) { .app-rightbar { display: none; } }

/* Right-bar Tools — one branded vertical list */
.rb-toollist { display: flex; flex-direction: column; gap: .3rem; }
.rb-toollist a {
    --t: #003faa;
    display: flex; align-items: center; gap: .55rem;
    font-size: .875rem; font-weight: 600; text-decoration: none;
    color: var(--bp-plum-800);
    padding: .45rem .6rem;
    border-radius: .5rem;
    border-left: 3px solid var(--t, var(--bp-wine-600));
    background: color-mix(in srgb, var(--t, #003FAA) 7%, #fff);
    transition: background .12s, transform .06s;
}
.rb-toollist a:hover { background: color-mix(in srgb, var(--t, #003FAA) 16%, #fff); color: var(--bp-plum-800); transform: translateX(2px); }
.rb-toollist a .bi { color: var(--t, var(--bp-wine-600)); font-size: 1rem; width: 1.1rem; text-align: center; }

/* Right-bar full search form */
.rb-search-form { display: flex; flex-direction: column; gap: .4rem; }
.rb-search-label { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bp-muted); }
.rb-search-btn-full { border: none; background: linear-gradient(135deg,#4f7fd6,#003FAA); color: #fff; border-radius: .5rem; padding: .55rem; font-size: .875rem; font-weight: 600; }
.rb-search-btn-full:hover { filter: brightness(1.08); }

/* Native portal presentation. */
.bn-hover-lift { transition: box-shadow .15s ease, transform .15s ease; }
.bn-hover-lift:hover { box-shadow: 0 8px 20px rgba(22,35,74,.14); transform: translateY(-2px); }

/* Native portal presentation. */
.acct-form .form-control {
    border: 1px solid var(--bp-line);
    border-radius: 8px;
    padding: 1rem .9rem;
    font-size: .95rem;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.acct-form .form-control:focus {
    border-color: var(--bp-wine-600);
    box-shadow: 0 0 0 3px rgba(0,63,170,.14);
    outline: none;
}
.acct-form .form-floating > label { color: var(--bp-muted); }
.acct-form .form-control::placeholder { color: transparent; }
.acct-form .form-control { text-align: left; }
.acct-check { display: flex; align-items: center; gap: .5rem; color: var(--bp-ink); font-size: .92rem; cursor: pointer; }
.acct-check .form-check-input { width: 1.1rem; height: 1.1rem; accent-color: var(--bp-wine-600); }

.acct-btn-primary {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: .8rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: var(--bp-wine-600);
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 6px rgba(0,63,170,.28);
}
.acct-btn-primary:hover { filter: brightness(1.07); box-shadow: 0 4px 12px rgba(0,63,170,.34); }

.acct-btn-link, .acct-form .btn-link {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: none;
    border: 1px solid var(--bp-line);
    border-radius: 8px;
    padding: .7rem 1rem;
    color: var(--bp-wine-600);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.acct-btn-link:hover, .acct-form .btn-link:hover { background: var(--bp-blush-50); }

.acct-divider { display: flex; align-items: center; text-align: center; color: var(--bp-muted); margin: 1.25rem 0; font-size: .875rem; }
.acct-divider::before, .acct-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--bp-line); }
.acct-divider span { padding: 0 .8rem; }

.acct-links { display: flex; flex-direction: column; gap: .5rem; }
.acct-links a { color: var(--bp-wine-600); text-decoration: none; font-size: .9rem; }
.acct-links a:hover { text-decoration: underline; }

/* Native portal presentation. */
.news-public{max-width:1120px;margin:0 auto;padding:2rem 1.25rem;color:#263238}.news-hero{padding:2.5rem 0 2rem;border-bottom:1px solid #dfe5e7;margin-bottom:2rem}.news-hero h1,.news-detail h1{font-family:'Hurme Geometric Sans 3',sans-serif;line-height:1.08;margin:.25rem 0;font-size:clamp(2rem,5vw,3.75rem)}.news-kicker{color:#00796b;text-transform:uppercase;letter-spacing:.11em;font-size:.875rem;font-weight:700}.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;list-style:none;padding:0}.news-card{height:100%;border:1px solid #dfe5e7;border-radius:12px;overflow:hidden;background:#fff}.news-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.news-card-body{padding:1.25rem}.news-card time,.news-byline{font-size:.88rem;color:#617278}.news-card h2{font-size:1.35rem;line-height:1.25;margin:.55rem 0}.news-card a,.news-back,.news-pagination a,.news-active-filter a{color:#00695c}.news-taxonomy{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.news-taxonomy a{font-size:.875rem;color:#00695c;text-decoration:none;border:1px solid #80cbc4;border-radius:999px;padding:.2rem .55rem}.news-pagination{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin:2rem 0}.news-active-filter,.news-empty{padding:1rem 1.25rem;background:#f1f8f7;border-radius:8px;margin:1rem 0}.news-detail{max-width:820px}.news-detail>article>header{margin:2rem 0}.news-standfirst,.news-summary{font-size:1.2rem;line-height:1.55;color:#455a64}.news-detail figure{margin:1.5rem 0}.news-detail figure img{display:block;width:100%;height:auto;border-radius:10px}.news-body{font-size:1.06rem;line-height:1.75}.news-body img{max-width:100%;height:auto}.news-body table{width:100%;border-collapse:collapse}.news-body th,.news-body td{border:1px solid #dfe5e7;padding:.5rem}

.news-kicker,
.news-taxonomy a {
    font-size: .875rem;
}