/*!
 * f4host: F4 Networks design system for Blesta 5.13.11 (bootstrap-based theme).
 *
 * Loads after application.min.css and Blesta's admin theme CSS, before rtl.css.
 * Overrides are scoped under `body` so they win on specificity; `!important`
 * appears only where Blesta's theme CSS (or a Bootstrap utility) already uses it.
 *
 * Sections: 1 font · 2 tokens · 3 base · 4 layout · 5 components · 6 public shell
 *           7 client shell · 8 locations · 9 Bootstrap/Blesta overrides
 *           10 Support Manager · 11 responsive (1080px nav, 900px, 560px)
 */

/* 1. Font ---------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../webfonts/Inter-VariableFont.ttf") format("truetype");
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
    color-scheme: light;
    --ink: #0b1220;
    --muted: #5b6576;
    --faint: #687384; /* 4.8:1 on white, 4.5:1 on --soft */
    --line: #e6e9ef;
    --line-strong: #cdd3dd;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-blur: rgba(255, 255, 255, .85);
    --surface-blur-strong: rgba(255, 255, 255, .9);
    --soft: #f6f8fb;
    /* The closing CTA band and the hero accents stay dark-on-light in both themes. */
    --cta-bg: #0b1220;
    --cta-ink: #ffffff;
    --cta-glow: rgba(43, 111, 255, .45);  /* corner radial */
    --cta-beam: rgba(43, 111, 255, .9);   /* pulse glow color in the CTA band */
    --accent-paper: #fff7ed;
    --accent-paper-border: #fed7aa;
    --accent-paper-ink: #9a3412;
    --alert-success-bg: #f0fdf4; --alert-success-border: #bbf7d0; --alert-success-ink: #166534;
    --alert-warning-bg: #fff7ed; --alert-warning-border: #fed7aa; --alert-warning-ink: #9a3412;
    --alert-danger-bg:  #fef2f2; --alert-danger-border:  #fecaca; --alert-danger-ink:  #991b1b;
    --blue: #2b6fff;
    --blue-hover: #1a4fd1;
    --blue-tint: #eaf1ff;
    --btn-primary-ink: #ffffff;     /* text color inside primary buttons */
    --green: #16a34a;
    --green-hover: #15803d;
    --amber: #d97706;
    --amber-hover: #b45309;
    --red: #dc2626;
    --red-hover: #b91c1c;
    /* Status pills route through tokens so dark mode can retune them without
     * stepping on the light-mode palette. */
    --pill-ok-bg:   #dcfce7; --pill-ok-ink:   #166534;
    --pill-warn-bg: #fef3c7; --pill-warn-ink: #92400e;
    --pill-bad-bg:  #fee2e2; --pill-bad-ink:  #991b1b;
    /* Card inset highlight: off (none) in light mode, 1px sheen in dark. Gives
     * cards a sense of elevation on pure black. */
    --card-inset: transparent;

    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --r-sm: 8px;
    --r-btn: 10px;
    --r-card: 12px;
    --r: 14px;
    --r-lg: 18px;

    --shadow-btn: 0 1px 2px rgba(43, 111, 255, .3), 0 6px 16px -6px rgba(43, 111, 255, .5);
    --shadow-hover: 0 18px 40px -24px rgba(43, 111, 255, .45);
    --shadow-soft: 0 12px 32px -20px rgba(11, 18, 32, .25);
    --shadow-pop: 0 16px 40px -16px rgba(11, 18, 32, .28);
    --shadow-panel: 0 30px 60px -30px rgba(11, 18, 32, .25);
    --ring: 0 0 0 3px rgba(43, 111, 255, .18);
}

/* 3. Base ---------------------------------------------------------------- */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

/* html body[class] beats Blesta's inline custom_css rules that target specific
 * body class patterns like body[class^="plugin-order"]{background:#fff}. Every
 * Blesta body carries a class attribute, so the match is universal. */
html body[class], html body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    color: var(--ink);
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -.015em;
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue-hover);
    text-underline-offset: 2px;
}

img, svg, video {
    max-width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
}

code, kbd, pre, samp, .f4-mono {
    font-family: var(--mono);
}

::selection {
    background: var(--blue-tint);
    color: var(--ink);
}

:focus-visible,
body .btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--blue);
}

[hidden] {
    display: none !important;
}

.f4-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: hidden until focused */
.f4-skip:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    overflow: visible;
    clip: auto;
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    font-weight: 600;
    color: var(--ink);
}

/* 4. Layout -------------------------------------------------------------- */
.f4-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.f4-section {
    padding: 88px 0;
}

.f4-section--soft {
    background: var(--soft);
}

.f4-head {
    max-width: 680px;
    margin-bottom: 44px;
}

.f4-eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

.f4-section h2,
.f4-h2 {
    margin: 0 0 14px;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
}

.f4-sub {
    margin: 0;
    max-width: 620px;
    font-size: 17px;
    color: var(--muted);
}

.f4-grid {
    display: grid;
    gap: 18px;
}

.f4-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f4-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.f4-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.f4-split {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: start;
}

.f4-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 5. Components ---------------------------------------------------------- */

/* Buttons */
.f4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

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

.f4-btn--primary {
    background: var(--blue);
    color: var(--btn-primary-ink);
    box-shadow: var(--shadow-btn);
}

.f4-btn--primary:hover,
.f4-btn--primary:focus {
    background: var(--blue-hover);
    color: var(--btn-primary-ink);
}

.f4-btn--ghost {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.f4-btn--ghost:hover,
.f4-btn--ghost:focus {
    border-color: var(--line-strong);
    color: var(--ink);
}

.f4-btn--sm {
    padding: 7px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
}

/* Cards and panels */
.f4-card {
    display: block;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--ink);
    box-shadow: inset 0 1px 0 var(--card-inset);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.f4-card:hover {
    box-shadow: inset 0 1px 0 var(--card-inset), var(--shadow-soft);
}

a.f4-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

a.f4-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    color: var(--ink);
}

.f4-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.f4-card p {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--muted);
}

/* Category line above a card title (CMS product cards) */
.f4-card .f4-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--blue);
}

.f4-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
}

.f4-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 11px;
    background: var(--blue-tint);
    color: var(--blue-hover);
    font-size: 18px;
}

.f4-list {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.f4-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px dashed var(--line);
}

.f4-list li em {
    font-style: normal;
    color: var(--faint);
}

.f4-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: inset 0 1px 0 var(--card-inset);
    overflow: hidden;
}

.f4-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
}

.f4-panel__head a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.f4-panel__body {
    padding: 16px;
}

.f4-panel__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.f4-panel__row:last-child {
    border-bottom: 0;
}

.f4-panel__row small {
    display: block;
    font-size: 12px;
    color: var(--faint);
}

/* Pills */
.f4-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.f4-pill--ok   { background: var(--pill-ok-bg);   color: var(--pill-ok-ink); }
.f4-pill--warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }
.f4-pill--bad  { background: var(--pill-bad-bg);  color: var(--pill-bad-ink); }
.f4-pill--info { background: var(--blue-tint); color: var(--blue-hover); }

/* Tables: put .f4-table on a wrapper div around a <table> */
.f4-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

.f4-table table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.f4-table th {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}

.f4-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.f4-table tr:last-child td {
    border-bottom: 0;
}

/* FAQ: <div class="f4-faq"><details><summary>Q</summary><p>A</p></details></div>
   or <details class="f4-faq"> directly */
.f4-faq details,
details.f4-faq {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.f4-faq summary,
details.f4-faq > summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.f4-faq summary::-webkit-details-marker,
details.f4-faq > summary::-webkit-details-marker {
    display: none;
}

.f4-faq summary::after,
details.f4-faq > summary::after {
    content: "+";
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--blue);
}

.f4-faq details[open] > summary::after,
details.f4-faq[open] > summary::after {
    content: "\2013";
}

.f4-faq details > :not(summary),
details.f4-faq > :not(summary) {
    max-width: 620px;
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--muted);
}

/* Alerts and the dashboard due-invoice banner */
.f4-alert {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: var(--soft);
    font-size: 14px;
}

.f4-alert--due {
    background: var(--accent-paper);
    border-color: var(--accent-paper-border);
    color: var(--accent-paper-ink);
}

.f4-alert--due .f4-btn {
    background: #ea580c;
    color: #fff;
}

.f4-alert--due .f4-btn:hover,
.f4-alert--due .f4-btn:focus {
    background: #c2410c;
    color: #fff;
}

/* KPI tiles (Blesta's dashboard cards get the same look in section 9) */
.f4-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.f4-kpi {
    display: block;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}

.f4-kpi__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.f4-kpi__value {
    display: block;
    margin: 2px 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.f4-kpi__link {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* Hero */
.f4-hero {
    padding: 72px 0 64px;
    background: radial-gradient(900px 400px at 85% -10%, var(--blue-tint), transparent 70%);
}

.f4-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 56px;
    align-items: center;
}

.f4-hero h1 {
    margin: 0 0 20px;
    font-size: 56px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.035em;
}

.f4-hero h1 span,
.f4-accent {
    color: var(--blue);
}

.f4-hero .f4-pill + h1 {
    margin-top: 22px;
}

.f4-hero .f4-panel {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
}

.f4-lede {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 18px;
    color: var(--muted);
}

.f4-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--muted);
}

.f4-checks li::before {
    content: "\2713";
    margin-right: 6px;
    font-weight: 700;
    color: var(--green);
}

/* Stats strip: <div class="f4-stats"><div class="f4-wrap f4-stats__grid"><div class="f4-stat">… */
.f4-stats {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.f4-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.f4-stat {
    padding: 28px 0 28px 28px;
    border-left: 1px solid var(--line);
}

.f4-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.f4-stat__value {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.f4-stat__label {
    font-size: 13px;
    color: var(--muted);
}

/* Numbered feature ("Why F4") */
.f4-feature h3 {
    margin: 14px 0 8px;
    font-size: 17px;
}

.f4-feature p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.f4-feature__num {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
}

/* Chips */
.f4-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 28px;
    padding: 0;
    list-style: none;
}

.f4-chip {
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: 13px;
}

/* Closing call to action — stays dark in both themes by design. A soft
 * breathing pulse lives behind the content via ::before (see below). */
.f4-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 56px;
    border-radius: 22px;
    background: var(--cta-bg) radial-gradient(600px 300px at 100% 0, var(--cta-glow), transparent 70%);
    color: var(--cta-ink);
    overflow: hidden;
}

/* Pulse glow: a soft blob of accent color breathes behind the content.
 * Slow (6.5s), calm, barely demands notice. Shifts side-to-side while
 * fading, so the motion registers without being distracting. */
.f4-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 20% 50%, var(--cta-beam) 0%, transparent 60%);
    filter: blur(20px);
    opacity: .5;
    animation: f4-cta-pulse 6.5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

.f4-cta > * {
    position: relative;
    z-index: 1;
}

@keyframes f4-cta-pulse {
    0%, 100% { opacity: .22; transform: translateX(-8%) scale(1); }
    50%      { opacity: .7;  transform: translateX(10%) scale(1.1); }
}

.f4-cta h2 {
    margin: 0 0 8px;
    color: var(--cta-ink);
}

.f4-cta p {
    margin: 0;
    color: #aeb6c4;
}

.f4-cta .f4-btn--ghost {
    background: transparent;
    border-color: #2a3446;
    color: #fff;
}

.f4-cta .f4-btn--ghost:hover,
.f4-cta .f4-btn--ghost:focus {
    border-color: #4a5568;
    color: #fff;
}

/* Quick-action links: <div class="f4-qa"><a href>Label</a>… */
.f4-qa {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
}

.f4-qa a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.f4-qa a::after {
    content: "\2192";
    color: var(--blue);
}

.f4-qa a:hover {
    border-color: var(--line-strong);
    background: var(--soft);
    color: var(--ink);
}

/* Menu (hamburger) button, shared by the public nav and the client drawer */
.f4-menu-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.f4-menu-btn__bars,
.f4-menu-btn__bars::before,
.f4-menu-btn__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.f4-menu-btn__bars {
    position: relative;
}

.f4-menu-btn__bars::before,
.f4-menu-btn__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.f4-menu-btn__bars::before { top: -6px; }
.f4-menu-btn__bars::after  { top: 6px; }

.f4-avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Page heading row (client dashboard "Welcome back") */
.f4-pagehead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.f4-pagehead h1,
.f4-pagehead h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.f4-pagehead p {
    margin: 2px 0 0;
    color: var(--muted);
}

/* 6. Public shell -------------------------------------------------------- */
.f4-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--surface-blur);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.f4-topbar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 68px;
}

.f4-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
}

.f4-brand:hover {
    color: var(--ink);
    text-decoration: none;
}

.f4-brand img {
    height: 34px;
    width: auto;
}

.f4-nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 24px;
}

.f4-nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 auto;
}

/* All nav links behave the same whether or not they have a dropdown.
   Single-line, consistent height, centered to the row. */
.f4-nav__links > a,
.f4-nav__links > .f4-nav__item > a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}

.f4-nav__links > a:hover,
.f4-nav__links > a[aria-current],
.f4-nav__links > .f4-nav__item > a:hover,
.f4-nav__links > .f4-nav__item.is-active > a,
.f4-nav__links > .f4-nav__item > a[aria-current] {
    color: var(--ink);
}

/* Dropdown nav items (when Blesta's $nav item has 'sub') */
.f4-nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.f4-nav__item > a::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid currentColor;
    opacity: .55;
    transform: translateY(1px);
    transition: transform .15s, opacity .15s;
}
.f4-nav__item:hover > a::after,
.f4-nav__item:focus-within > a::after,
.f4-nav__item.is-open > a::after { opacity: .9; transform: translateY(1px) rotate(180deg); }
.f4-nav__sub {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 200px;
    /* No margin: sub sits flush against the parent so there is NO dead
       strip for the cursor to cross. The padding-top preserves the visual
       breathing room between the parent label and the first sub item. */
    padding: 14px 8px 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
}
/* Belt-and-suspenders: a 10px transparent bridge extends UPWARD from the
   sub, so even if the parent <a> is shorter than the item's hover box,
   the bridge still catches the cursor. Spans the full width of the sub
   plus a small horizontal cushion on each side. */
.f4-nav__sub::before {
    content: "";
    position: absolute;
    inset-inline-start: -8px;
    inset-inline-end: -8px;
    top: -10px;
    height: 10px;
}
.f4-nav__item:hover > .f4-nav__sub,
.f4-nav__item:focus-within > .f4-nav__sub,
.f4-nav__item.is-open > .f4-nav__sub {
    display: flex;
}
.f4-nav__sub a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.f4-nav__sub a:hover,
.f4-nav__sub a[aria-current] {
    background: var(--soft);
    color: var(--ink);
}

.f4-nav__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.f4-nav__actions > a:not(.f4-btn),
.f4-nav__actions .dropdown-toggle {
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.f4-topbar .f4-menu-btn {
    display: none;
    margin-left: auto;
}

.f4-footer {
    margin-top: 88px;
    padding: 64px 0 36px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.f4-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.f4-footer h4 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.f4-footer__grid a:not(.f4-brand) {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
}

.f4-footer__grid a:not(.f4-brand):hover {
    color: var(--ink);
}

.f4-footer__grid p {
    max-width: 260px;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.f4-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--faint);
}

.f4-footer__legal a {
    color: var(--faint);
}

.f4-footer__legal a:hover {
    color: var(--ink);
}

/* 7. Client shell -------------------------------------------------------- */
/* <div class="f4-shell"><aside class="f4-sidebar">…</aside>
   <div class="f4-shell__bar">(mobile only)</div><main class="f4-main">…</main></div> */
.f4-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--soft);
}

.f4-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 18px 14px;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--line);
    font-size: 14px;
}

.f4-sidebar .f4-brand {
    margin: 0 6px 22px;
    font-size: 16px;
}

.f4-sidebar .f4-brand img {
    height: 26px;
}

.f4-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.f4-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.f4-sidebar__link:hover {
    background: var(--soft);
    color: var(--ink);
    text-decoration: none;
}

.f4-sidebar__link.is-active,
.f4-sidebar__link[aria-current="page"] {
    background: var(--blue-tint);
    color: var(--blue-hover);
}

.f4-sidebar__link i {
    width: 16px;
    flex: none;
    text-align: center;
    opacity: .85;
}

.f4-sidebar__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 18px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
}

.f4-sidebar__sub .f4-sidebar__link {
    padding: 6px 10px;
    font-size: 13px;
}

.f4-sidebar__group {
    margin: 18px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}

.f4-sidebar__help {
    margin-top: auto;
    padding: 12px;
    border-radius: var(--r-btn);
    background: var(--soft);
    font-size: 12px;
    color: var(--muted);
}

.f4-sidebar__help b {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
}

.f4-shell__bar {
    display: none;
}

.f4-main {
    min-width: 0;
    padding: 24px 28px 48px;
}

/* Page title and account menu, at the top of every client page */
.f4-main__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.f4-main__top .f4-nav__actions {
    margin-left: auto;
}

.f4-main__title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.f4-nav__actions .dropdown-toggle .f4-avatar {
    margin-right: 6px;
    vertical-align: middle;
}

.f4-sidebar__help a {
    font-weight: 600;
}

/* Dashboard profile card (client_main_myinfo.pdt) */
.f4-profile__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.f4-profile__who strong {
    display: block;
}

.f4-profile__who small {
    font-size: 12px;
    color: var(--faint);
}

.f4-profile address {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

/* Login, password reset and 2FA: one centered card on the public shell */
body .row.login {
    padding-top: 0;
}

.f4-auth {
    max-width: 420px;
    margin: 48px auto;
}

.f4-auth__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

body .f4-auth__card .card-body {
    padding: 28px;
}

.f4-auth__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.f4-auth__lede {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--muted);
}

.f4-auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    font-size: 13px;
}

/* 7a. Staff-as-client floating badge ----------------------------------- */
/* Fixed to the left edge, visible while scrolling. Rendered once in
   structure.pdt when Blesta sets $staff_as_client. Clicking returns the
   admin to the staff portal. */
.f4-staff-badge {
    position: fixed;
    top: 80px;
    left: max(14px, env(safe-area-inset-left, 0px));
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--blue);
    color: var(--btn-primary-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.f4-staff-badge:hover,
.f4-staff-badge:focus {
    color: var(--btn-primary-ink);
    background: var(--blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
    text-decoration: none;
    outline: none;
}
@media (max-width: 760px) {
    /* On phones, dock to bottom-left to avoid covering the burger menu */
    .f4-staff-badge {
        top: auto;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding: 6px 12px;
        font-size: 12px;
    }
    .f4-staff-badge__text { display: inline; }
}

/* 7b. Topology (iptruth live BGP visibility SVG) ----------------------- */
.f4-topology {
    display: flex;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    padding: 24px;
    overflow-x: auto;
}
.f4-topology__img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Default (:root with no data-theme) is light; swap under
   prefers-color-scheme: dark unless data-theme pins light. Explicit
   data-theme always wins over the media query. */
.f4-topology__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f4-topology__img--light { display: none; }
    :root:not([data-theme="light"]) .f4-topology__img--dark { display: block; }
}
:root[data-theme="dark"] .f4-topology__img--light { display: none; }
:root[data-theme="dark"] .f4-topology__img--dark { display: block; }
:root[data-theme="light"] .f4-topology__img--dark { display: none; }
:root[data-theme="light"] .f4-topology__img--light { display: block; }
@media (max-width: 760px) { .f4-topology { padding: 12px; } }

/* 8. Locations (search + scroll table) --------------------------------- */
.f4-loc { margin-top: 10px; }

.f4-loc__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.f4-loc-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    max-width: 440px;
    padding: 0 14px 0 42px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    transition: border-color .15s, box-shadow .15s;
}

.f4-loc-field:focus-within {
    border-color: var(--blue);
    box-shadow: var(--ring);
}

.f4-loc-field__icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.f4-loc-search {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.f4-loc-search::placeholder { color: var(--faint); }

/* Hide the webkit search clear widget — we draw our own */
.f4-loc-search::-webkit-search-decoration,
.f4-loc-search::-webkit-search-cancel-button { display: none; }

.f4-loc-field__clear {
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
}
.f4-loc-field__clear:hover { background: var(--soft); color: var(--ink); }

.f4-loc-count {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.f4-loc-table {
    max-height: 560px;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: inset 0 1px 0 var(--card-inset);
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

.f4-loc-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.f4-loc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.f4-loc-table tbody th,
.f4-loc-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    line-height: 1.4;
}

.f4-loc-table tbody tr:last-child th,
.f4-loc-table tbody tr:last-child td { border-bottom: 0; }

/* Country / city dimming: when the row directly above shows the same value,
 * the JS tags the <span> with .is-dupe so the eye reads it as a continuation
 * cell. Switching to a span makes the padding stable while only the text
 * dims. */
.f4-loc-table .f4-loc-col-country { width: 16%; }
.f4-loc-table .f4-loc-col-city    { width: 16%; }
.f4-loc-table .f4-loc-col-facility { width: 32%; }
.f4-loc-table .f4-loc-col-addr    { color: var(--muted); font-size: 13px; }

.f4-loc-table .f4-loc-col-country span { font-weight: 600; color: var(--ink); }
.f4-loc-table .f4-loc-col-city span    { font-weight: 500; color: var(--ink); }
.f4-loc-table .f4-loc-col-country span.is-dupe,
.f4-loc-table .f4-loc-col-city span.is-dupe { opacity: 0; }

/* A thin accent rule separates city groups so the eye can see where one ends */
.f4-loc-table tbody tr.is-city-start th,
.f4-loc-table tbody tr.is-city-start td { border-top: 1px solid var(--line); }
.f4-loc-table tbody tr.is-city-start:first-child th,
.f4-loc-table tbody tr.is-city-start:first-child td { border-top: 0; }
/* The within-city rows get a lighter divider — the dupe cells already fade,
 * so the heavy border above makes the table read as "grouped" at a glance. */
.f4-loc-table tbody tr:not(.is-city-start) th,
.f4-loc-table tbody tr:not(.is-city-start) td { border-bottom-color: color-mix(in srgb, var(--line) 50%, transparent); }

.f4-loc-table tbody tr:hover th,
.f4-loc-table tbody tr:hover td { background: var(--soft); }

.f4-loc-table::-webkit-scrollbar { width: 10px; }
.f4-loc-table::-webkit-scrollbar-track { background: transparent; }
.f4-loc-table::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }
.f4-loc-table::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.f4-loc-empty {
    margin: 16px 0 0;
    padding: 16px;
    background: var(--soft);
    border: 1px dashed var(--line);
    border-radius: var(--r-btn);
    color: var(--muted);
    font-size: 14px;
}
.f4-loc-empty a { color: var(--blue); text-decoration: underline; }

.f4-loc-table__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.f4-loc-table__foot p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 720px) {
    .f4-loc-table .f4-loc-col-country { display: none; }
    .f4-loc-table thead th:first-child { display: none; }
    .f4-loc-table .f4-loc-col-city     { width: 32%; }
    .f4-loc-table .f4-loc-col-facility { width: 36%; }
    .f4-loc-table tbody th,
    .f4-loc-table tbody td { padding: 12px 12px; }
    .f4-loc-table .f4-loc-col-addr { font-size: 12.5px; }
    .f4-loc-field { max-width: none; }
}

/* 9. Bootstrap 4 / Blesta overrides -------------------------------------- */

/* Buttons. Blesta's theme CSS sets btn colours with !important, so ours must too. */
body .btn {
    padding: 9px 16px;
    border-radius: var(--r-btn);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

body .btn-sm,
body .btn-group-sm > .btn {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
}

body .btn.btn-xs {
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 12px;
}

body .btn-lg {
    padding: 12px 20px;
    border-radius: var(--r-card);
    font-size: 16px;
}

body .btn:focus,
body .btn.focus {
    box-shadow: none;
}

body .btn-primary,
body .btn-primary:disabled,
body .btn-primary.disabled {
    color: #fff !important;
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
    box-shadow: var(--shadow-btn);
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:not(:disabled):active {
    color: #fff !important;
    background-color: var(--blue-hover) !important;
    border-color: var(--blue-hover) !important;
}

body .btn-light,
body .btn-default,
body .btn-secondary,
body .btn-outline-secondary {
    color: var(--ink) !important;
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
}

body .btn-light:hover,
body .btn-light:focus,
body .btn-light.active,
body .btn-default:hover,
body .btn-secondary:hover,
body .btn-secondary:focus,
body .btn-outline-secondary:hover {
    color: var(--ink) !important;
    background-color: var(--soft) !important;
    border-color: var(--line-strong) !important;
}

body .btn-outline-primary {
    color: var(--blue) !important;
    background-color: var(--surface) !important;
    border-color: var(--blue-tint) !important;
}

body .btn-outline-primary:hover,
body .btn-outline-primary:focus,
body .btn-info,
body .btn-info:disabled {
    color: var(--blue-hover) !important;
    background-color: var(--blue-tint) !important;
    border-color: var(--blue-tint) !important;
}

body .btn-info:hover,
body .btn-info:focus {
    background-color: var(--surface-2) !important;
}

body .btn-success,
body .btn-success:disabled  { color: #fff !important; background-color: var(--green) !important; border-color: var(--green) !important; }
body .btn-success:hover,
body .btn-success:focus     { color: #fff !important; background-color: var(--green-hover) !important; border-color: var(--green-hover) !important; }
body .btn-danger,
body .btn-danger:disabled   { color: #fff !important; background-color: var(--red) !important; border-color: var(--red) !important; }
body .btn-danger:hover,
body .btn-danger:focus      { color: #fff !important; background-color: var(--red-hover) !important; border-color: var(--red-hover) !important; }
body .btn-warning,
body .btn-warning:disabled  { color: #fff !important; background-color: var(--amber) !important; border-color: var(--amber) !important; }
body .btn-warning:hover,
body .btn-warning:focus     { color: #fff !important; background-color: var(--amber-hover) !important; border-color: var(--amber-hover) !important; }

body .btn-link {
    color: var(--blue);
    font-weight: 500;
}

/* Theme-coloured text/background utilities */
body .text-primary, body .text-info { color: var(--blue) !important; }
body .text-success { color: var(--green) !important; }
body .text-warning { color: var(--amber) !important; }
body .text-danger  { color: var(--red) !important; }
body .bg-primary   { background-color: var(--blue) !important; }
body .border-primary { border-color: var(--blue) !important; }

/* Cards and Blesta widgets (.card.card-blesta > .card-header + .card-content > .card-body) */
body .card,
body .panel-blesta,
body .well {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: none;
}

body .card-blesta,
body .panel-blesta {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-card) !important;
}

body .card-header,
body .card-blesta > .card-header,
body .panel .panel-heading {
    width: auto;
    margin: 0;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

body .card > .card-header:first-child,
body .card-blesta > .card-header {
    border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}

body .card-header .btn-group .btn {
    padding: 4px 9px;
    font-size: 12px;
}

body .card-body,
body .panel .panel-body {
    padding: 16px 18px;
}

body .card-body h4 {
    border-bottom-color: var(--line);
    font-size: 16px;
}

/* Tables directly inside a widget run edge to edge */
body .card-body > .table-responsive {
    margin-left: -18px;
    margin-right: -18px;
}

body .card-body > .table-responsive .table tr > :first-child { padding-left: 18px; }
body .card-body > .table-responsive .table tr > :last-child  { padding-right: 18px; }

body .card-footer,
body .panel .panel-footer {
    padding: 12px 18px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

body .card > .card-footer:last-child {
    border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px);
}

/* Widget sub-navigation ("Open 2 | Closed 5") as pills */
body .card-nav {
    margin: 0 0 14px;
}

body .card-links {
    display: inline-flex; /* lets Blesta's floated link buttons share the line */
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    font-size: 13px;
}

body .card-links > li + li::before {
    content: none;
}

body .card-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 99px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

body .card-links > li > a:hover {
    background: var(--soft);
    color: var(--ink);
}

body .card-links > li.active > a {
    background: var(--blue-tint);
    color: var(--blue-hover);
}

body .card-links .badge {
    min-width: 0;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--soft);
    color: inherit;
    font-size: 11px;
}

/* Dashboard cards (blestaLoadCards) styled as KPI tiles. F4.initDueBanner strips the
   per-card inline colours, which Blesta writes with !important. */
body .cards a,
body .cards a:hover {
    color: inherit;
    text-decoration: none;
}

body .cards .card {
    display: block;
    min-height: 0;
    padding: 16px !important;
    border-radius: var(--r-card) !important;
    margin-bottom: 12px !important;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: inherit;
    text-align: left !important;
    transition: border-color .2s, box-shadow .2s;
}

body .cards a:hover .card,
a.f4-kpi:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-hover);
}

body .cards .card .card-content {
    display: flex;
    flex-direction: column-reverse;
}

body .cards .card .card-content .card-value {
    margin: 2px 0 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

body .cards .card .card-content .card-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
}

/* Tables: uppercase small headers, row dividers, no stripes */
body table {
    border: 0;
}

body .table {
    margin-bottom: 0;
    color: var(--ink);
    font-size: 14px;
}

body .table > thead > tr > th,
body .table > tbody > tr > th,
body .table > tfoot > tr > th,
body .table > thead > tr > td,
body .table > tbody > tr > td,
body .table > tfoot > tr > td {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

body .table > thead > tr > th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--faint);
}

body .table > thead > tr > th > a,
body .table > thead > tr > th > a:hover,
body .table > thead > tr > th > a:focus {
    color: inherit;
    text-decoration: none;
}

body .table > thead > tr > th > a:hover {
    color: var(--ink);
}

body .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

body .table td {
    font-variant-numeric: tabular-nums;
}

body .table-curved.table tr > td,
body .table-curved.table tr > th,
body .table-curved tbody > tr > td:first-child {
    border-left: 0;
    border-radius: 0;
}

body .table > tbody > tr:nth-of-type(n),
body .table > tbody > tr:nth-child(n) > td,
body .table > tbody > tr:nth-child(n) > th {
    background-color: transparent;
}

body .table-hover > tbody > tr:hover,
body .table-hover > tbody > tr:hover > td,
body .table-hover > tbody > tr:hover > th {
    background-color: var(--soft) !important;
    color: var(--ink);  /* Bootstrap defaults text to #212529 on hover — invisible in dark mode */
}
body .table-hover > tbody > tr:hover > td a,
body .table-hover > tbody > tr:hover > th a {
    color: var(--blue-hover);
}

body .table > tbody > tr.expand_details > td {
    background-color: var(--soft);
    border-top: 0;
}

/* Bordered tables — Bootstrap uses literal #dee2e6 which glows on dark. */
body .table-bordered,
body .table-bordered th,
body .table-bordered td,
body .table-bordered thead th,
body .table-bordered thead td {
    border-color: var(--line);
}

/* Contextual row colors. Mirror Bootstrap's structural selectors so our
   specificity wins over the default `.table > tbody > tr:nth-child(n) > td`
   rule that paints the base cell transparent. */
body .table > tbody > tr.table-info > td,
body .table > tbody > tr.table-info > th,
body .table > tbody > tr.table-info,
body .table-info > td, body .table-info > th {
    background-color: var(--blue-tint) !important;
    color: var(--ink);
    border-color: var(--line);
}
body .table > tbody > tr.table-success > td,
body .table > tbody > tr.table-success > th,
body .table-success > td, body .table-success > th {
    background-color: var(--pill-ok-bg, var(--soft)) !important;
    color: var(--pill-ok-ink, var(--ink));
    border-color: var(--line);
}
body .table > tbody > tr.table-warning > td,
body .table > tbody > tr.table-warning > th,
body .table-warning > td, body .table-warning > th {
    background-color: var(--pill-warn-bg, var(--soft)) !important;
    color: var(--pill-warn-ink, var(--ink));
    border-color: var(--line);
}
body .table > tbody > tr.table-danger > td,
body .table > tbody > tr.table-danger > th,
body .table-danger > td, body .table-danger > th {
    background-color: var(--pill-err-bg, var(--soft)) !important;
    color: var(--pill-err-ink, var(--ink));
    border-color: var(--line);
}
body .table > tbody > tr.table-active > td,
body .table > tbody > tr.table-active > th {
    background-color: var(--soft) !important;
    color: var(--ink);
}
body .table-dark,
body .table-dark th,
body .table-dark td   { background-color: var(--ink) !important; color: var(--bg); border-color: var(--line); }
body .thead-light th  { background-color: var(--soft) !important; color: var(--ink); border-color: var(--line); }
body .thead-dark th   { background-color: var(--ink)  !important; color: var(--bg);  border-color: var(--line); }

/* Forms */
body label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

body .form-check-label,
body .checkbox label,
body .radio label {
    font-weight: 400;
}

body .form-control,
body .custom-select {
    height: auto;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background-color: var(--surface);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

body .form-control::placeholder {
    color: var(--faint);
}

body .form-control:focus,
body .custom-select:focus {
    border-color: var(--blue);
    box-shadow: var(--ring);
    outline: 0;
}

body .form-control:disabled,
body .form-control[readonly] {
    background-color: var(--soft);
}

body .input-group-text {
    border-color: var(--line);
    border-radius: var(--r-btn);
    background: var(--soft);
    color: var(--muted);
    font-size: 14px;
}

body .help-block,
body .form-text {
    font-size: 12px;
    color: var(--muted);
}

body .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--blue);
    background-color: var(--blue);
}
/* Unchecked face — must come from tokens or it paints white on dark forms. */
body .custom-control-label::before {
    background-color: var(--surface);
    border-color: var(--line-strong);
}

/* Custom file input */
body .custom-file-label {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
body .custom-file-label::after {
    background: var(--soft);
    color: var(--ink);
    border-left-color: var(--line);
}

/* Chrome's autofill paints yellow-black over the input — suppress it so
   login and billing forms don't flash the wrong palette. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    -webkit-text-fill-color: var(--ink) !important;
    caret-color: var(--ink);
    transition: background-color 5000s ease-in-out 0s;
}

/* Tabs and pills */
body .nav-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--line);
}

body .nav-tabs .nav-link,
body .nav-tabs > li > a {
    margin: 0 0 -1px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

body .nav-tabs .nav-link:hover,
body .nav-tabs > li > a:hover {
    border-bottom-color: var(--line-strong);
    color: var(--ink);
}

body .nav-tabs .nav-link.active,
body .nav-tabs .nav-item.show .nav-link,
body .nav-tabs > li.active > a {
    border-width: 0 0 2px;
    border-color: transparent transparent var(--blue);
    background: none;
    color: var(--blue);
}

body .nav-tabs .nav-link.disabled,
body .nav-pills .nav-link.disabled {
    color: var(--faint);
    background: transparent;
    cursor: not-allowed;
}

body .nav-pills .nav-link {
    border-radius: var(--r-sm);
    color: var(--muted);
    font-weight: 500;
}

body .nav-pills .nav-link.active,
body .nav-pills .show > .nav-link {
    background: var(--blue-tint);
    color: var(--blue-hover);
}

/* Alerts. Blesta's theme sets these without !important. */
body .alert {
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    font-size: 14px;
}

body .alert p:last-child {
    margin-bottom: 0;
}

body .alert a:not(.btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

body .alert-info,
body .alert-primary   { background: var(--blue-tint); border-color: var(--blue-tint); color: var(--blue-hover); }
body .alert-success   { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-ink); }
body .alert-warning   { background: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-ink); }
body .alert-danger    { background: var(--alert-danger-bg); border-color: var(--alert-danger-border); color: var(--alert-danger-ink); }
body .alert-secondary,
body .alert-light     { background: var(--soft); border-color: var(--line); color: var(--ink); }

/* Badges as pills (theme CSS sets their colours with !important) */
body .badge {
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

body .badge-success { background-color: var(--pill-ok-bg) !important;   color: var(--pill-ok-ink) !important; }
body .badge-warning { background-color: var(--pill-warn-bg) !important; color: var(--pill-warn-ink) !important; }
body .badge-danger  { background-color: var(--pill-bad-bg) !important;  color: var(--pill-bad-ink) !important; }
body .badge-info,
body .badge-primary { background-color: var(--blue-tint) !important; color: var(--blue-hover) !important; }
body .badge-secondary,
body .badge-light,
body .badge-default { background-color: var(--soft) !important; color: var(--muted) !important; }
/* badge-dark: an "emphasis" pill. Use the inverse of the current ink so the
 * background always contrasts the text, across themes. */
body .badge-dark    { background-color: var(--ink) !important; color: var(--bg) !important; }

/* Dropdowns (Bootstrap's .dropdown-menu; the theme's own navbar dropdown is
   .f4-nav__sub, handled separately). Bootstrap defaults to a white card with
   dark text; both need to come from tokens so the panel reads in dark mode. */
body .dropdown-menu {
    padding: 6px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-pop);
    font-size: 14px;
}

body .dropdown-item,
body ul.dropdown-menu li a {
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
}

body .dropdown-item:hover,
body .dropdown-item:focus,
body ul.dropdown-menu li a:hover {
    background: var(--soft);
    color: var(--ink);
}

body .dropdown-item.active,
body .dropdown-item:active {
    background: var(--blue-tint);
    color: var(--blue-hover);
}

body .dropdown-item i {
    width: 18px;
    color: var(--faint);
}

body .dropdown-divider {
    margin: 6px 0;
    border-top-color: var(--line);
}

/* Pagination */
body .pagination {
    gap: 4px;
}

body .pagination .page-item .page-link {
    min-width: 36px;
    margin-left: 0;
    padding: 6px 12px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
}

body .pagination .page-item .page-link:hover {
    background: var(--soft);
    border-color: var(--line-strong);
}

body .pagination .page-item.active .page-link,
body div.pagination ul.pagination li.active a {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

body .pagination .page-item.disabled .page-link {
    background-color: var(--surface);
    color: var(--faint);
}

/* Bootstrap "close" (×) button — inside modals, alerts, dialogs. Bootstrap's
 * default is color:#000 with a white text-shadow, invisible on dark. */
body .close,
body button.close,
body .modal-header .close,
body .alert .close {
    color: var(--ink);
    text-shadow: none;
    opacity: .7;
}
body .close:hover,
body .close:focus {
    color: var(--ink);
    opacity: 1;
}

/* Popovers (Blesta tooltips/popovers on billing and account pages). */
body .popover {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: var(--shadow-pop);
}
body .popover-header {
    background: var(--soft);
    border-bottom-color: var(--line);
    color: var(--ink);
}
body .popover-body { color: var(--ink); }
body .popover .arrow::before,
body .popover .arrow::after { border-color: var(--line); }

/* Tooltips. Bootstrap's dark tooltip (#000 on #000 in dark) → invert. */
body .tooltip-inner {
    background: var(--ink);
    color: var(--bg);
}
body .tooltip .arrow::before,
body .bs-tooltip-top .arrow::before { border-top-color: var(--ink); }
body .bs-tooltip-bottom .arrow::before { border-bottom-color: var(--ink); }
body .bs-tooltip-left .arrow::before   { border-left-color:  var(--ink); }
body .bs-tooltip-right .arrow::before  { border-right-color: var(--ink); }

/* Progress bars — Bootstrap's #e9ecef rail glows on dark. */
body .progress {
    background: var(--soft);
    border-radius: var(--r-sm);
}
body .progress-bar {
    background-color: var(--blue);
    color: #fff;
}

/* Modals. The backdrop must stay dark in both themes (otherwise dark mode
 * gets a translucent-white wash over the page). Kept at a fixed color
 * rather than routing through --ink, which flips to near-white in dark. */
body .modal-backdrop {
    background-color: #000;
}

body .modal-backdrop.show {
    opacity: .55;
}

body .modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 0;
    border-radius: var(--r);
    box-shadow: var(--shadow-pop);
}

body .modal-header,
body .modal-footer {
    padding: 16px 20px;
    border-color: var(--line);
}

body .modal-header h5,
body .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

body .modal-body {
    padding: 20px;
}

/* List groups (secondary nav on client pages, option lists) */
body .list-group {
    border-radius: var(--r-card);
}

body .list-group-item {
    padding: 10px 14px;
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

body a.list-group-item:hover,
body a.list-group-item:focus {
    background-color: var(--soft) !important;
    color: var(--ink);
}

body .list-group-item.active,
body a.list-group-item.active,
body a.list-group-item.active:hover,
body a.list-group-item.active:focus {
    background-color: var(--blue-tint) !important;
    border-color: var(--line);
    color: var(--blue);
    font-weight: 600;
}

body .list-group-item i {
    color: inherit;
    opacity: .8;
}

body .list-group-item.disabled,
body .list-group-item-action:disabled,
body a.list-group-item.disabled {
    background-color: var(--surface);
    color: var(--faint);
    pointer-events: none;
}

/* Native typography that Blesta pages fall back to. These have raw browser
   defaults otherwise (groove fieldset border, light pre bg). */
body fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
body legend {
    width: auto;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
body blockquote {
    margin: 0 0 12px;
    padding: 8px 14px;
    border-left: 3px solid var(--line-strong);
    color: var(--muted);
}
body > pre,
body .card-body > pre,
body .modal-body > pre {
    background: var(--soft);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}
body code:not([class*="language-"]):not(.toastui-editor-md-code) {
    padding: 1px 6px;
    background: var(--soft);
    color: var(--ink);
    border-radius: 4px;
    font-size: .95em;
}

body .top-focus-box {
    background-color: var(--soft) !important;
    border-radius: var(--r-btn);
}

/* Breadcrumbs */
body .breadcrumb,
body .breadcrumbs .breadcrumb {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
}

body .breadcrumb-item + .breadcrumb-item::before {
    color: var(--faint);
}

body .breadcrumb-item.active {
    color: var(--muted);
}

/* Blesta's page title band */
body .title {
    height: auto;
    margin-bottom: 28px;
    padding: 28px 0;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

body .title .container-md,
body .title .container {
    padding-left: 15px;
}

body .title h1,
body .title h3 {
    display: block;
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* 10. Support Manager knowledge base and tickets ------------------------- */
body .card-kb {
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: radial-gradient(600px 220px at 90% -40%, var(--blue-tint), transparent 70%), var(--soft) !important;
    font-size: 14px;
    text-align: left;
}

body .card-kb .btn {
    color: #fff !important;
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}

body .card-kb .btn:hover {
    background-color: var(--blue-hover) !important;
    border-color: var(--blue-hover) !important;
}

body .section-title {
    margin: 28px 0 14px;
}

/* KB article: the title band already carries the article title as the H1 */
.f4-kb .section-title:has(+ .article) {
    display: none;
}

body .section-title h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}

body .section-title h3 i {
    margin-right: 6px;
    color: var(--blue);
    font-size: .85em;
}

body .section-title p {
    margin: 0;
    font-style: normal;
    color: var(--muted);
}

body .categories .row > div {
    margin-bottom: 10px;
}

body .categories .bg-light {
    height: 100%;
    margin: 0;
    background-color: var(--surface) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-card) !important;
    color: var(--muted);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

body .categories .bg-light:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-hover);
}

body .categories .bg-light > i {
    margin-right: 6px;
    color: var(--blue);
}

body .categories a {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

body .categories a:hover {
    color: var(--blue);
}

body .article {
    max-width: 760px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
}

body .article h2,
body .article h3,
body .article h4 {
    margin: 1.8em 0 .5em;
    letter-spacing: -.02em;
}

body .article a {
    text-decoration: underline;
}

body .article code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--soft);
    color: var(--ink);
    font-size: .9em;
}

body .article pre {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: var(--soft);
    font-size: 13px;
}

body .article pre code {
    padding: 0;
    background: none;
}

body .article table {
    width: 100%;
    margin: 1em 0;
    font-size: 14px;
    border-collapse: collapse;
}

body .article th,
body .article td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

body .rate {
    margin: 28px 10px 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--soft);
    font-size: 14px;
}

body .rate h5 {
    font-size: 14px;
}

body .rate a {
    margin-right: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
}

body .rate a.green { color: var(--green) !important; }
body .rate a.red   { color: var(--red) !important; }

/* 10b. Support-ticket widgets ------------------------------------------- */
/* ToastUI Editor (Blesta's rich-text widget) ships a hard-coded light
   stylesheet. Theme its surfaces, borders, text and the mode switcher so
   it reads correctly in dark mode. */
body .toastui-editor-defaultUI {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    color: var(--ink);
}
body .toastui-editor-defaultUI-toolbar,
body .toastui-editor-toolbar,
body .toastui-editor-toolbar-group {
    background: var(--soft);
    border-color: var(--line);
    border-bottom: 1px solid var(--line);
}
/* Keep ToastUI's own SVG sprites intact; only soften their hover affordance. */
body .toastui-editor-toolbar-icons:hover,
body .toastui-editor-toolbar-icons:focus {
    background-color: var(--card-inset, rgba(255, 255, 255, .06));
    border-color: var(--line);
}
body .toastui-editor-main,
body .toastui-editor-main-container,
body .toastui-editor-md-container,
body .toastui-editor-ww-container {
    background: var(--surface);
    color: var(--ink);
}
body .toastui-editor-contents,
body .toastui-editor-contents p,
body .toastui-editor-md-preview,
body .toastui-editor-md-preview-highlight {
    background: var(--surface);
    color: var(--ink);
}
body .toastui-editor-md-splitter { background: var(--line); }
body .toastui-editor-mode-switch {
    background: var(--soft);
    border-top: 1px solid var(--line);
}
body .toastui-editor-mode-switch .tab-item {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
}
body .toastui-editor-mode-switch .tab-item.active {
    background: var(--surface);
    color: var(--ink);
}
body .ProseMirror,
body .toastui-editor {
    background: var(--surface) !important;
    color: var(--ink) !important;
}
body .toastui-editor-md-code,
body .toastui-editor-md-code-block,
body .toastui-editor-ww-code-block,
body .toastui-editor-contents code {
    background: var(--soft);
    color: var(--ink);
}
body .toastui-editor-defaultUI .placeholder,
body .toastui-editor-contents .placeholder {
    color: var(--faint);
}

/* Blesta's drag-drop upload widget renders as a .form-control.drag-drop
   container that becomes a Dropzone with .dz-* children once JS runs. */
body .form-control.drag-drop,
body .dropzone,
body .dz-default.dz-message,
body .dropzone .dz-preview .dz-image {
    background: var(--surface);
    border: 1px dashed var(--line-strong, var(--line));
    color: var(--muted);
}
body .form-control.drag-drop:hover,
body .dropzone:hover {
    border-color: var(--blue);
    color: var(--ink);
}

/* Cloudflare Turnstile widget: can't theme the iframe from here, but we can
   make the wrapper not look like a stuck white card when the widget loads
   its light-mode default. The JS below (initTurnstileTheme) sets
   data-theme="dark" on the <div class="cf-turnstile"> so the iframe also
   renders dark. */
body .cf-turnstile {
    display: inline-block;
    min-height: 65px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

/* 11. Responsive --------------------------------------------------------- */
/* Brand (~175px) + six links (~550px) + actions (~200px guest, more with a long name or the
   language menu) + gaps need ~1000px of content; at 1080px the .f4-wrap content is 1032px. */
@media (max-width: 1080px) {
    /* Public nav collapses behind .f4-menu-btn */
    .f4-topbar .f4-menu-btn { display: inline-grid; }
    .f4-nav { display: none; }
    .f4-nav.is-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        max-height: calc(100vh - 68px);
        padding: 8px 24px 20px;
        overflow-y: auto;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-pop);
    }
    .f4-nav__links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
    .f4-nav__links > a,
    .f4-nav__links > .f4-nav__item > a { height: auto; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
    .f4-nav__item { display: block; height: auto; }
    /* Keep the caret as a grouping cue on mobile; it reads as "has sub" */
    .f4-nav__item > a::after { transform: translateY(0); opacity: .5; }
    .f4-nav__sub {
        position: static;
        display: flex;
        margin: 0 0 0 16px;
        padding: 0 0 0 10px;
        border-left: 2px solid var(--line);
        border-top: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        min-width: 0;
    }
    .f4-nav__sub::before { display: none; }
    .f4-nav__sub a { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
    .f4-nav__sub a:last-child { border-bottom: 0; }
    .f4-nav__actions { justify-content: space-between; }
}

@media (max-width: 900px) {
    .f4-section { padding: 64px 0; }
    .f4-section h2, .f4-h2 { font-size: 30px; }
    .f4-head { margin-bottom: 32px; }

    .f4-hero { padding: 48px 0; }
    .f4-hero h1 { font-size: 40px; }
    .f4-hero__grid,
    .f4-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }

    .f4-grid--2,
    .f4-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .f4-grid--4,
    .f4-kpis,
    .f4-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .f4-stat,
    .f4-stat:first-child { padding: 22px 0; border-left: 0; }
    .f4-stat:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
    .f4-stat:nth-child(n+3) { border-top: 1px solid var(--line); }

    .f4-cta { flex-direction: column; align-items: flex-start; padding: 36px; }

    .f4-footer { margin-top: 64px; padding-top: 48px; }
    .f4-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .f4-footer__grid > :first-child { grid-column: 1 / -1; }

    /* Client sidebar becomes an off-canvas drawer */
    .f4-shell { grid-template-columns: minmax(0, 1fr); }
    .f4-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        width: 280px;
        max-width: 85vw;
        height: auto;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .2s ease, visibility 0s .2s; /* hide only after sliding out */
    }
    .f4-sidebar--open {
        visibility: visible;
        transform: none;
        transition: transform .2s ease; /* visible at once, so focus can move in */
        box-shadow: 0 0 0 100vmax rgba(11, 18, 32, .45);
    }
    [dir="rtl"] .f4-sidebar { left: auto; right: 0; transform: translateX(100%); }
    [dir="rtl"] .f4-sidebar--open { transform: none; }
    .f4-shell__bar {
        position: sticky;
        top: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 12px;
        height: 56px;
        padding: 0 16px;
        background: var(--surface-blur-strong);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
    }
    .f4-shell__bar .f4-brand { font-size: 16px; }
    .f4-shell__bar .f4-brand img { height: 26px; }
    .f4-main { padding: 20px 16px 40px; }

    body .cards > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 560px) {
    .f4-wrap { padding: 0 16px; }
    .f4-section { padding: 48px 0; }
    .f4-section h2, .f4-h2 { font-size: 26px; }
    .f4-sub, .f4-lede { font-size: 16px; }
    .f4-hero h1 { font-size: 34px; }
    .f4-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .f4-card { padding: 20px; }
    .f4-cta { padding: 28px 22px; border-radius: var(--r-lg); }
    .f4-stat__value { font-size: 24px; }
    .f4-nav.is-open { padding: 8px 16px 20px; }
    body .card-body { padding: 14px; }
    body .card-body > .table-responsive { margin-left: -14px; margin-right: -14px; }
    body .card-body > .table-responsive .table tr > :first-child { padding-left: 14px; }
    body .card-body > .table-responsive .table tr > :last-child  { padding-right: 14px; }
    body .title { padding: 20px 0; }
    body .title h1, body .title h3 { font-size: 22px; }
}

/* --- Dark theme ------------------------------------------------------------
 * Flips the color tokens. All surfaces use var(--surface) / var(--soft) / var(--bg)
 * so a token swap is enough. The inline preload script in structure.pdt sets
 * data-theme="dark" on <html> for viewers whose OS prefers dark AND who have
 * no saved pin, so the block below is the single source of truth for dark mode.
 * (No @media (prefers-color-scheme: dark) copy needed.)
 * -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink:          #fafafa;
    --muted:        #a1a1aa;
    --faint:        #8f8f99;  /* lifted from #71717a — the prior value was 4.05:1 on --surface, below AA */
    --line:         #2a2a2e;
    --line-strong:  #3f3f45;
    --bg:           #000000;
    --surface:      #111111;
    --surface-2:    #060606;
    --soft:         #080808;
    --surface-blur: rgba(0, 0, 0, .72);
    --surface-blur-strong: rgba(0, 0, 0, .84);
    /* Dark-mode accents for paper alerts: deeper paper color, lighter ink */
    --accent-paper:        #3a2410;
    --accent-paper-border: #7a3f14;
    --accent-paper-ink:    #fbbf77;
    --alert-success-bg:    #0f2a1a; --alert-success-border: #14532d; --alert-success-ink: #86efac;
    --alert-warning-bg:    #3a2410; --alert-warning-border: #7a3f14; --alert-warning-ink: #fbbf77;
    --alert-danger-bg:     #2d0f12; --alert-danger-border:  #7f1d1d; --alert-danger-ink:  #fca5a5;
    --blue:         #2b6fff;
    --blue-hover:   #4c8bff;
    --blue-tint:    #16223f;
    --btn-primary-ink: #ffffff;
    --card-inset: rgba(255, 255, 255, .05);
    --pill-ok-bg:   #052419; --pill-ok-ink:   #34d399;
    --pill-warn-bg: #231206; --pill-warn-ink: #fbbf77;
    --pill-bad-bg:  #230a0c; --pill-bad-ink:  #fca5a5;
    --cta-bg:       #0a0a0a;
    --cta-ink:      #ffffff;
    --cta-glow:     rgba(43, 111, 255, .4);
    --cta-beam:     rgba(43, 111, 255, .95);
    --green:        #22c55e;
    --green-hover:  #34d399;
    --amber:        #f59e0b;
    --amber-hover:  #fbbf24;
    --red:          #ef4444;
    --red-hover:    #f87171;
    --shadow-btn:    0 1px 2px rgba(0, 0, 0, .55), 0 6px 16px -6px rgba(255, 255, 255, .25);
    --shadow-hover:  0 18px 40px -24px rgba(0, 0, 0, .8);
    --shadow-soft:   0 12px 32px -20px rgba(0, 0, 0, .7);
    --shadow-pop:    0 16px 40px -16px rgba(0, 0, 0, .8);
    --shadow-panel:  0 30px 60px -30px rgba(0, 0, 0, .9);
    --ring:          0 0 0 3px rgba(255, 255, 255, .25);
}

/* The @media (prefers-color-scheme: dark) copy of the token block was
 * removed — the inline preload script in structure.pdt now sets
 * data-theme="dark" when the OS prefers dark and no pin is saved, so
 * the :root[data-theme="dark"] block above is the single source. */


/* Theme toggle button (sits in the header). Square, icon-only, border-matched. */
.f4-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.f4-theme-toggle:hover {
    border-color: var(--line-strong);
    background: var(--soft);
}
.f4-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-color: var(--blue);
}
.f4-theme-toggle svg {
    width: 18px;
    height: 18px;
}
.f4-theme-toggle .f4-theme-toggle__sun { display: none; }
.f4-theme-toggle .f4-theme-toggle__moon { display: block; }
:root[data-theme="dark"] .f4-theme-toggle .f4-theme-toggle__sun { display: block; }
:root[data-theme="dark"] .f4-theme-toggle .f4-theme-toggle__moon { display: none; }

/* Dark-mode hover: a drop shadow on pure black is invisible, so cards lift
 * with a brand-blue border glow instead. */
:root[data-theme="dark"] a.f4-card:hover,
:root[data-theme="dark"] .f4-panel:hover {
    box-shadow:
        inset 0 1px 0 var(--card-inset),
        0 0 0 1px var(--blue),
        0 18px 40px -20px rgba(43, 111, 255, .35);
}

/* --- Motion -----------------------------------------------------------
 * Three ideas, tuned to not feel like a marketing deck:
 *   1. Reveal-on-scroll: elements rise 16px and fade in when they enter
 *      the viewport. Added by JS as .is-in. Stagger via nth-child.
 *   2. Entry animation on the hero (runs once on page load).
 *   3. Micro-interactions: buttons scale down on press, CTA glow drifts.
 *
 * Everything collapses to "no-op" under prefers-reduced-motion.
 * ------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* Hidden-state is guarded by .js-reveal on <html>. The JS sets that class
 * immediately AFTER it has observed every reveal target, so if JS fails
 * to load (or runs late enough that the first frame has already painted),
 * nothing stays stuck at opacity 0. */
.js-reveal .f4-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1),
                transform .6s cubic-bezier(.2, .7, .2, 1);
}
.js-reveal .f4-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Stagger children inside a grid (f4-grid--2/3/4) or list of f4-feature */
.js-reveal .f4-reveal-stagger.is-in > * { animation: f4-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.js-reveal .f4-reveal-stagger.is-in > *:nth-child(1) { animation-delay: .00s; }
.js-reveal .f4-reveal-stagger.is-in > *:nth-child(2) { animation-delay: .07s; }
.js-reveal .f4-reveal-stagger.is-in > *:nth-child(3) { animation-delay: .14s; }
.js-reveal .f4-reveal-stagger.is-in > *:nth-child(4) { animation-delay: .21s; }
.js-reveal .f4-reveal-stagger.is-in > *:nth-child(5) { animation-delay: .28s; }
.js-reveal .f4-reveal-stagger.is-in > *:nth-child(6) { animation-delay: .35s; }

@keyframes f4-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Hero entrance: first paint only, lets the landing feel composed. */
.f4-hero__grid > * {
    animation: f4-hero-in .7s cubic-bezier(.2, .7, .2, 1) both;
}
.f4-hero__grid > *:nth-child(2) { animation-delay: .12s; }
@keyframes f4-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* Button press feedback */
.f4-btn:active { transform: translateY(1px) scale(.985); }

/* (The old slow background-position drift was replaced by the ::before beam
 * on .f4-cta above.) */

/* Honour the user's system preference. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .f4-reveal, .f4-reveal.is-in,
    .f4-reveal-stagger > *, .f4-reveal-stagger.is-in > *,
    .f4-hero__grid > *, .f4-cta, .f4-cta::before,
    a.f4-card, a.f4-card:hover, .f4-panel:hover,
    .f4-btn, .f4-btn:active {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* Freeze the pulse glow at a comfortable mid-opacity instead of blanking it */
    .f4-cta::before { opacity: .35 !important; }
}


/* --- Bootstrap utility overrides -----------------------------------------
 * Blesta's app.min.css + the theme's custom CSS ship with Bootstrap utility
 * classes that paint light surfaces unconditionally. Route them through
 * the theme's tokens so they adapt to dark mode. */
body .bg-light,
body .bg-white {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
}

/* The cart summary card and signup form use `.card.bg-light.p-3`, and
 * the newsletter opt-in box uses `.form-group.well`. Both need a dark
 * surface and token-based text. */
body .card.bg-light,
body .card.bg-white,
body .form-group.well {
    background-color: var(--surface) !important;
    border: 1px solid var(--line);
    color: var(--ink);
}

/* Form labels and headings inside those cards sometimes carry inline
 * color: #000 or text-dark; drop back to the ink token. */
body .card.bg-light label,
body .card.bg-white label,
body .form-group.well label {
    color: var(--ink);
}