/*
 * Hiprosuite design tokens.
 *
 * Every colour, size and radius in the product resolves to a variable defined
 * here. Nothing else should name a colour.
 *
 * WHY THIS FILE EXISTS
 *
 * The theme before this was stock Bootstrap with the defaults left in place:
 * #0d6efd (Bootstrap's own $primary) appeared fifteen times, the body grey was
 * #f4f6f9 in base.html and #f8f9fa in landing.html, and styles lived in inline
 * <style> blocks in twelve templates. Two greys meant to be the same grey,
 * maintained apart, is the same defect as the hand-typed pricing features and
 * the hardcoded "Save 20%" — a claim kept separately from the thing it
 * describes. A token file is the fix for a whole class of that.
 *
 * THE BLUE IS NOT NEW
 *
 * --hp-blue-700 is #0A4275, which was already in the codebase as the dark stop
 * of the old hero gradient. The ramp is built around it rather than replacing
 * it, so the app icon, the Play Store listing and anything already printed stay
 * consistent. What goes is #0d6efd, which was never a decision.
 *
 * SURFACES ARE NOT WHITE
 *
 * --hp-surface is #FAFBFC, not #FFFFFF, and the page behind it is #E9EDF2.
 * Large areas of pure white at full brightness are the main cause of eye strain
 * over a long working day, and this is a product somebody stares at for eight
 * hours. Text contrast stays at roughly 12.6:1, well above the 4.5:1 floor —
 * less light, no loss of legibility.
 *
 * DARK MODE
 *
 * Driven by Bootstrap 5.3's own `data-bs-theme` attribute on <html> rather than
 * a scheme of our own, so Bootstrap's components follow without being fought.
 * Light is the default on purpose: dark is better at midnight and worse on a
 * tablet in Lagos daylight, which is where a good share of these users are.
 *
 * RULE FOR ANYONE EDITING TEMPLATES
 *
 * If you are about to type a hex value into a template, it belongs here
 * instead. A colour written into markup is invisible to the theme switch, and
 * will be unreadable in one mode or the other.
 */

/* ---------------------------------------------------------------------------
   1. PRIMITIVES
   Raw ramps. These never change between themes; the semantic tokens in
   section 2 choose which rung each theme stands on.
   --------------------------------------------------------------------------- */

:root {
    /* Brand blue. 700 is the pre-existing #0A4275. 600 is the interactive
       stop — links, primary buttons, focus rings. 800/900 carry the sidebar. */
    --hp-blue-50:  #F1F6FB;
    --hp-blue-100: #DCE9F5;
    --hp-blue-200: #B7D0E9;
    --hp-blue-300: #89B3DB;
    --hp-blue-400: #4E94D9;
    --hp-blue-500: #1E6FB8;
    --hp-blue-600: #0E5391;
    --hp-blue-700: #0A4275;
    --hp-blue-800: #0A2E52;
    --hp-blue-900: #071E36;

    /* Neutrals, tinted very slightly blue so they sit with the brand instead
       of reading as a separate grey system. */
    --hp-grey-0:   #FFFFFF;
    --hp-grey-25:  #FAFBFC;
    --hp-grey-50:  #F4F6F8;
    --hp-grey-100: #E9EDF2;
    --hp-grey-200: #DDE3EA;
    --hp-grey-300: #C3CCD6;
    --hp-grey-400: #97A3B0;
    --hp-grey-500: #6B7786;
    --hp-grey-600: #4F5B69;
    --hp-grey-700: #3A444F;
    --hp-grey-800: #262D37;
    --hp-grey-900: #151A21;
    --hp-grey-950: #0F1318;

    /* Status. Deliberately sharing no hue with the brand blue: in the old
       theme the primary colour, the info colour and the link colour were all
       #0d6efd, so a warning and a hyperlink were the same colour. A failed
       payment has to be unmistakable at a glance. */
    --hp-success:     #15803D;
    --hp-success-bg:  #DCFCE7;
    --hp-success-fg:  #14532D;
    --hp-warning:     #B45309;
    --hp-warning-bg:  #FEF3C7;
    --hp-warning-fg:  #78350F;
    --hp-danger:      #B42318;
    --hp-danger-bg:   #FEE2E2;
    --hp-danger-fg:   #7F1D1D;

    /* Typography. Inter for its tabular figures, which is the whole reason
       it is worth a webfont request here: naira columns that do not line up
       look wrong in a way people feel before they can name it. */
    --hp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --hp-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* 14px base, not Bootstrap's 16. Standard for dense applications and
       worth several more rows of a table on a laptop screen. */
    --hp-text-xs:   0.6875rem;
    --hp-text-sm:   0.8125rem;
    --hp-text-base: 0.875rem;
    --hp-text-lg:   1rem;
    --hp-text-xl:   1.125rem;
    --hp-text-2xl:  1.375rem;
    --hp-text-3xl:  1.75rem;
    --hp-text-4xl:  2.25rem;
    --hp-text-display: 3rem;

    --hp-leading-tight:  1.25;
    --hp-leading-normal: 1.5;
    --hp-leading-loose:  1.7;

    /* Spacing on a 4px grid. */
    --hp-space-1: 0.25rem;
    --hp-space-2: 0.5rem;
    --hp-space-3: 0.75rem;
    --hp-space-4: 1rem;
    --hp-space-5: 1.5rem;
    --hp-space-6: 2rem;
    --hp-space-7: 3rem;

    --hp-radius-sm: 4px;
    --hp-radius:    6px;
    --hp-radius-lg: 10px;
    --hp-radius-pill: 999px;

    /* Structure comes from hairline borders, not shadows. The card lift and
       drop shadows in the old theme are the most template-looking thing a
       Bootstrap page can do. */
    --hp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --hp-shadow:    0 2px 6px rgba(15, 23, 42, 0.06);
    --hp-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

    /* Text sitting on the brand navy — the hero, the auth card headers, the
       footer. Defined once in the primitives and not repeated per theme,
       because the surface underneath them is the brand colour and does not
       change between light and dark. Without these, every page that puts white
       text on navy writes #FFFFFF into its own markup, which is how the hero
       and the two auth pages each ended up with their own idea of what the
       muted-on-navy colour was. */
    --hp-on-brand:           #FFFFFF;
    --hp-on-brand-secondary: #C7D8EA;
    --hp-on-brand-muted:     #8FB0CE;

    --hp-sidebar-width: 260px;
    --hp-sidebar-collapsed: 68px;
}

/* ---------------------------------------------------------------------------
   2. SEMANTIC TOKENS — LIGHT
   Templates use these, never the ramps above. The name says the job, so a
   theme can change the answer without a template changing.
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --hp-page:            var(--hp-grey-100);
    --hp-surface:         var(--hp-grey-25);
    --hp-surface-raised:  var(--hp-grey-0);
    --hp-surface-sunken:  var(--hp-grey-50);
    --hp-surface-hover:   var(--hp-grey-100);

    --hp-text:            #1A2028;
    --hp-text-secondary:  var(--hp-grey-600);
    --hp-text-muted:      var(--hp-grey-500);
    --hp-text-inverse:    var(--hp-grey-0);

    --hp-border:          var(--hp-grey-200);
    --hp-border-strong:   var(--hp-grey-300);

    --hp-accent:          var(--hp-blue-600);
    --hp-accent-hover:    var(--hp-blue-700);
    --hp-accent-subtle:   var(--hp-blue-50);
    --hp-accent-text:     var(--hp-blue-700);

    --hp-sidebar-bg:      var(--hp-blue-800);
    --hp-sidebar-text:    #AEC6E0;
    --hp-sidebar-active:  var(--hp-blue-700);
    --hp-sidebar-marker:  var(--hp-blue-400);

    --hp-focus-ring:      rgba(14, 83, 145, 0.35);
}

/* ---------------------------------------------------------------------------
   3. SEMANTIC TOKENS — DARK
   Surfaces lift as they come forward, rather than darkening. Status tints are
   re-derived rather than reused: #DCFCE7 behind white text is unreadable.
   --------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --hp-page:            var(--hp-grey-950);
    --hp-surface:         #181D25;
    --hp-surface-raised:  #1F252E;
    --hp-surface-sunken:  var(--hp-grey-950);
    --hp-surface-hover:   #232A33;

    --hp-text:            #EDF0F3;
    --hp-text-secondary:  #A8B2BD;
    --hp-text-muted:      #83909E;
    --hp-text-inverse:    var(--hp-grey-950);

    --hp-border:          #2B323C;
    --hp-border-strong:   #3A424E;

    --hp-accent:          var(--hp-blue-400);
    --hp-accent-hover:    var(--hp-blue-300);
    --hp-accent-subtle:   rgba(78, 148, 217, 0.14);
    --hp-accent-text:     var(--hp-blue-300);

    --hp-sidebar-bg:      #12171F;
    --hp-sidebar-text:    #93A4B6;
    --hp-sidebar-active:  #1D2735;
    --hp-sidebar-marker:  var(--hp-blue-400);

    --hp-success-bg:  rgba(21, 128, 61, 0.18);
    --hp-success-fg:  #6EE7A0;
    --hp-warning-bg:  rgba(180, 83, 9, 0.20);
    --hp-warning-fg:  #FBBF5A;
    --hp-danger-bg:   rgba(180, 35, 24, 0.20);
    --hp-danger-fg:   #FCA5A0;

    --hp-focus-ring:      rgba(78, 148, 217, 0.40);
}

/* ---------------------------------------------------------------------------
   4. BOOTSTRAP BRIDGE
   Bootstrap 5.3 reads its own CSS variables at runtime, so the whole framework
   can be re-skinned here without a Sass build step. Anything Bootstrap draws
   picks these up: alerts, badges, tables, forms, dropdowns, modals.
   --------------------------------------------------------------------------- */

:root {
    --bs-body-bg:          var(--hp-page);
    --bs-body-color:       var(--hp-text);
    --bs-body-font-family: var(--hp-font-sans);
    --bs-body-font-size:   var(--hp-text-base);
    --bs-body-line-height: var(--hp-leading-normal);

    --bs-primary:      var(--hp-blue-600);
    --bs-primary-rgb:  14, 83, 145;
    --bs-link-color:   var(--hp-accent);
    --bs-link-hover-color: var(--hp-accent-hover);

    --bs-border-color: var(--hp-border);
    --bs-border-radius:    var(--hp-radius);
    --bs-border-radius-sm: var(--hp-radius-sm);
    --bs-border-radius-lg: var(--hp-radius-lg);

    --bs-secondary-color: var(--hp-text-secondary);
    --bs-emphasis-color:  var(--hp-text);

    --bs-success: var(--hp-success);
    --bs-warning: var(--hp-warning);
    --bs-danger:  var(--hp-danger);
}

body {
    background-color: var(--hp-page);
    color: var(--hp-text);
    font-family: var(--hp-font-sans);
    font-size: var(--hp-text-base);
    /* Inter's default figures are proportional. Tabular everywhere means a
       column of money lines up without every table opting in. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hp-text);
    font-weight: 600;
    line-height: var(--hp-leading-tight);
    letter-spacing: -0.01em;
}
h1 { font-size: var(--hp-text-3xl); }
h2 { font-size: var(--hp-text-2xl); }
h3 { font-size: var(--hp-text-xl); }
h4 { font-size: var(--hp-text-lg); }
h5, h6 { font-size: var(--hp-text-base); }

/* ---------------------------------------------------------------------------
   5. COMPONENTS
   Only where Bootstrap's own variables do not reach far enough.
   --------------------------------------------------------------------------- */

.card {
    background-color: var(--hp-surface-raised);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: none;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--hp-border);
    font-weight: 600;
}

/* Bootstrap 5.3 buttons are driven by per-component variables, so the global
   --bs-primary does not reach them on its own. */
.btn-primary {
    --bs-btn-bg: var(--hp-accent);
    --bs-btn-border-color: var(--hp-accent);
    --bs-btn-hover-bg: var(--hp-accent-hover);
    --bs-btn-hover-border-color: var(--hp-accent-hover);
    --bs-btn-active-bg: var(--hp-accent-hover);
    --bs-btn-active-border-color: var(--hp-accent-hover);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
}
.btn-outline-primary {
    --bs-btn-color: var(--hp-accent-text);
    --bs-btn-border-color: var(--hp-border-strong);
    --bs-btn-hover-bg: var(--hp-accent);
    --bs-btn-hover-border-color: var(--hp-accent);
    --bs-btn-hover-color: #FFFFFF;
}
.btn {
    font-weight: 500;
    font-size: var(--hp-text-base);
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--hp-focus-ring);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hp-text);
    --bs-table-border-color: var(--hp-border);
    --bs-table-hover-bg: var(--hp-surface-hover);
    font-size: var(--hp-text-sm);
}
.table > thead th {
    color: var(--hp-text-secondary);
    font-weight: 500;
    font-size: var(--hp-text-xs);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--hp-border);
}
/* Money reads right-aligned and figure-aligned. A column of naira that does
   not line up is the clearest possible signal that a finance product was not
   built by anyone who works with money. */
.table td.amount, .table th.amount, .amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.form-control, .form-select {
    background-color: var(--hp-surface-raised);
    border-color: var(--hp-border-strong);
    color: var(--hp-text);
    font-size: var(--hp-text-base);
    border-radius: var(--hp-radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--hp-accent);
    box-shadow: 0 0 0 3px var(--hp-focus-ring);
    background-color: var(--hp-surface-raised);
    color: var(--hp-text);
}
.form-label {
    font-size: var(--hp-text-sm);
    font-weight: 500;
    color: var(--hp-text-secondary);
    margin-bottom: var(--hp-space-1);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--hp-surface-raised);
    --bs-dropdown-link-color: var(--hp-text);
    --bs-dropdown-link-hover-bg: var(--hp-surface-hover);
    --bs-dropdown-border-color: var(--hp-border);
    --bs-dropdown-font-size: var(--hp-text-sm);
    box-shadow: var(--hp-shadow);
    border-radius: var(--hp-radius);
}

.alert { border-radius: var(--hp-radius); border-width: 1px; font-size: var(--hp-text-base); }
.alert-success { background: var(--hp-success-bg); border-color: var(--hp-success); color: var(--hp-success-fg); }
.alert-warning { background: var(--hp-warning-bg); border-color: var(--hp-warning); color: var(--hp-warning-fg); }
.alert-danger,
.alert-error   { background: var(--hp-danger-bg);  border-color: var(--hp-danger);  color: var(--hp-danger-fg); }
.alert-info    { background: var(--hp-accent-subtle); border-color: var(--hp-accent); color: var(--hp-accent-text); }

.badge { font-weight: 500; font-size: var(--hp-text-xs); border-radius: var(--hp-radius-pill); padding: 0.25em 0.65em; }
.badge.bg-success { background: var(--hp-success-bg) !important; color: var(--hp-success-fg); }
.badge.bg-warning { background: var(--hp-warning-bg) !important; color: var(--hp-warning-fg); }
.badge.bg-danger  { background: var(--hp-danger-bg)  !important; color: var(--hp-danger-fg); }
.badge.bg-primary { background: var(--hp-accent-subtle) !important; color: var(--hp-accent-text); }

/* ---------------------------------------------------------------------------
   6. DENSITY
   Set on <html> and remembered per user. Comfortable is the default; compact
   is for the accountant with forty rows on screen, and matters more than any
   colour decision to somebody reconciling a ledger.
   --------------------------------------------------------------------------- */

[data-density="comfortable"] { --hp-row-pad: 0.6rem 0.75rem; --hp-cell-lh: 1.5; }
[data-density="compact"]     { --hp-row-pad: 0.3rem 0.6rem;  --hp-cell-lh: 1.35; }

.table > :not(caption) > * > * {
    padding: var(--hp-row-pad, 0.6rem 0.75rem);
    line-height: var(--hp-cell-lh, 1.5);
}

/* ---------------------------------------------------------------------------
   7. APPLICATION SHELL
   A 260px sidebar replacing six hover dropdowns in a top navbar.

   The old navigation was not merely dated, it did not work for half the people
   using it. Hover dropdowns have no hover on a tablet, and a foreman opening
   "Inventory" on a site tablet had to tap and hope. A navbar also cannot grow:
   seven groups already overflowed on a laptop, and the next module had nowhere
   to go. Jira, Linear, Notion and the AWS console all moved to nested sidebars
   for the same two reasons.

   Structure is deliberately shallow — seven top-level destinations, children
   indented and set smaller so the eye reads them as subordinate rather than
   as more choices at the same level.
   --------------------------------------------------------------------------- */

.hp-shell { display: flex; min-height: 100vh; }

.hp-sidebar {
    width: var(--hp-sidebar-width);
    flex-shrink: 0;
    background: var(--hp-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1040;
    transition: transform 0.18s ease;
}
.hp-sidebar::-webkit-scrollbar { width: 6px; }
.hp-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }

.hp-brand {
    display: flex; align-items: center; gap: var(--hp-space-2);
    padding: var(--hp-space-4);
    color: #FFFFFF;
    font-size: var(--hp-text-lg);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hp-brand:hover { color: #FFFFFF; }

.hp-nav { padding: var(--hp-space-3) 0; flex: 1; }

.hp-nav-link {
    display: flex; align-items: center; gap: var(--hp-space-3);
    padding: 0.55rem var(--hp-space-4);
    color: var(--hp-sidebar-text);
    font-size: var(--hp-text-base);
    text-decoration: none;
    border-left: 3px solid transparent;
    white-space: nowrap;
}
.hp-nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,0.05); }
.hp-nav-link .hp-nav-icon { width: 18px; text-align: center; flex-shrink: 0; }
.hp-nav-link .hp-nav-caret { margin-left: auto; font-size: 0.65rem; transition: transform 0.15s ease; }
.hp-nav-link[aria-expanded="true"] .hp-nav-caret { transform: rotate(90deg); }

.hp-nav-link.is-active,
.hp-nav-group.is-active > .hp-nav-link {
    background: var(--hp-sidebar-active);
    color: #FFFFFF;
    border-left-color: var(--hp-sidebar-marker);
}

/* Children are smaller and indented. Size and indent together are what make
   them read as belonging to the parent rather than competing with it. */
.hp-subnav { list-style: none; padding: 0; margin: 0; }
.hp-subnav a {
    display: block;
    padding: 0.38rem var(--hp-space-4) 0.38rem 3.1rem;
    color: var(--hp-sidebar-text);
    font-size: var(--hp-text-sm);
    text-decoration: none;
}
.hp-subnav a:hover { color: #FFFFFF; background: rgba(255,255,255,0.05); }
.hp-subnav a.is-active { color: #FFFFFF; font-weight: 500; }
.hp-subnav-heading {
    padding: var(--hp-space-3) var(--hp-space-4) var(--hp-space-1) 3.1rem;
    font-size: var(--hp-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.38);
}
.hp-subnav-sep { border: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: var(--hp-space-2) var(--hp-space-4); }

.hp-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--hp-sidebar-width);
    display: flex;
    flex-direction: column;
}

.hp-topbar {
    background: var(--hp-surface-raised);
    border-bottom: 1px solid var(--hp-border);
    padding: var(--hp-space-2) var(--hp-space-5);
    display: flex; align-items: center; gap: var(--hp-space-3);
    position: sticky; top: 0; z-index: 1020;
    min-height: 52px;
}
.hp-topbar-spacer { margin-left: auto; }

/* The tenant name, centred on the bar itself rather than within the flex row.
   `sticky` already establishes a containing block, so no extra positioning is
   needed on the parent.

   max-width keeps a long company name from running under the controls on
   either side; the ellipsis plus the title attribute means it degrades to
   something readable rather than something overlapping. pointer-events:none so
   it can never swallow a click meant for a button beneath it. */
.hp-tenant {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(40%, 420px);
    font-weight: 600;
    font-size: var(--hp-text-base);
    color: var(--hp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Below the sidebar breakpoint the bar holds the hamburger and the full set of
   controls with no room left in the middle, and a name sitting under them
   reads as a mistake. The company is still on the dashboard and in settings. */
@media (max-width: 767.98px) {
    .hp-tenant { display: none; }
}
.hp-icon-btn {
    background: transparent; border: 1px solid transparent;
    color: var(--hp-text-secondary);
    width: 34px; height: 34px; border-radius: var(--hp-radius);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
.hp-icon-btn:hover { background: var(--hp-surface-hover); color: var(--hp-text); }
.hp-icon-btn .badge { position: absolute; top: 1px; right: 0; font-size: 0.6rem; padding: 2px 5px; }

.hp-content { padding: var(--hp-space-5); flex: 1; }

.hp-sidebar-toggle { display: none; }
.hp-scrim { display: none; }

/* Below lg the sidebar slides over the content rather than shrinking it.
   A 260px sidebar on a 768px tablet leaves too little room for a data table,
   which is the thing people came to look at. */
@media (max-width: 991.98px) {
    .hp-sidebar { transform: translateX(-100%); }
    .hp-sidebar.is-open { transform: translateX(0); }
    .hp-main { margin-left: 0; }
    .hp-sidebar-toggle { display: inline-flex; }
    .hp-content { padding: var(--hp-space-4); }
    .hp-scrim.is-open {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,0.4); z-index: 1035;
    }
}

/* ---------------------------------------------------------------------------
   8. CHARTS
   Series colours as tokens so a chart follows the theme like everything else.
   Chart.js cannot read CSS variables itself, so the templates read these with
   getComputedStyle and hand the resolved values over — which is why they are
   defined here rather than in the one template that draws a chart.

   --hp-chart-text and --hp-chart-grid matter more than the series colours: a
   chart left at Chart.js defaults draws its axis labels in near-black, which
   on a dark page is an invisible chart rather than an ugly one.
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --hp-chart-1: #0E5391;
    --hp-chart-2: #B42318;
    --hp-chart-3: #B45309;
    --hp-chart-4: #15803D;
    --hp-chart-5: #6B7786;
    --hp-chart-6: #4E94D9;
    --hp-chart-text: #4F5B69;
    --hp-chart-grid: #DDE3EA;
}

[data-bs-theme="dark"] {
    --hp-chart-1: #4E94D9;
    --hp-chart-2: #F07167;
    --hp-chart-3: #E9A23B;
    --hp-chart-4: #4ADE80;
    --hp-chart-5: #97A3B0;
    --hp-chart-6: #89B3DB;
    --hp-chart-text: #A8B2BD;
    --hp-chart-grid: #2B323C;
}

/* ---------------------------------------------------------------------------
   9. LEFT-ACCENT CARDS
   The KPI cards use Bootstrap's `border-start border-4 border-success` to put a
   coloured bar down one edge. That worked while `.card { border: none }`, since
   only the edge that had a width could show a colour.

   Section 5 gives every card a hairline on all four sides, so `border-success`
   began colouring the whole outline and a cost report turned into three boxes
   ringed in green, red and blue. The colour is meant to be an accent, not a
   frame: the other three edges are pinned back to the neutral border here so
   the pattern keeps working without every template that uses it being edited.
   --------------------------------------------------------------------------- */

.card.border-start.border-4 {
    border-top-color: var(--hp-border);
    border-right-color: var(--hp-border);
    border-bottom-color: var(--hp-border);
}

/* ---------------------------------------------------------------------------
   10. THE MARK AND WORDMARK
   See templates/core/_logo_mark.html for what the shapes are.

   The H and the S take `currentColor`, so the mark picks up whatever colour
   the surrounding text is — white in the sidebar, brand navy on a light page —
   without a second copy of the SVG per context. Only the chair names a colour
   of its own.
   --------------------------------------------------------------------------- */

:root { --hp-mark-seat: var(--hp-blue-400); }

.hp-mark { display: block; flex-shrink: 0; }
.hp-mark .m-frame   { fill: currentColor; stroke: none; }
.hp-mark .m-frame-s { fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: round; }
.hp-mark .m-seat    { fill: var(--hp-mark-seat); stroke: none; }
.hp-mark .m-legs    { fill: none; stroke: var(--hp-mark-seat); stroke-width: 1.9; stroke-linecap: round; }

/* "Hiprosuite" is one word everywhere it is typed — in the domain, in email,
   in the store listing. The break between "Hipro" and "suite" is made with
   colour in the wordmark only, so a reader gets the parse without the name
   becoming HiProSuite, which would then be spelled three different ways by
   three different people. It already had been: the codebase held 72
   "Hiprosuite" and one "HiproSuite". */
.hp-wordmark { font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
.hp-wordmark .wm-alt { color: var(--hp-blue-300); }

/* Icon sizing. Font Awesome shipped fa-lg and fa-2x; Tabler does not, and
   these are referenced across the templates, so they are defined once here
   rather than left as dead classes that silently do nothing. */
.ti-lg { font-size: 1.25em; }
.ti-2x { font-size: 2em; }
.ti-3x { font-size: 3em; }
.ti-4x { font-size: 4em; }
.ti { vertical-align: -0.125em; }

/* ---------------------------------------------------------------------------
   11. DARK MODE — BOOTSTRAP UTILITY REPAIRS

   Bootstrap's colour utilities are absolute, not semantic. `bg-light` means
   "light grey", not "a slightly raised surface", so it stays light grey when
   the page turns dark while the text on it follows the theme and turns light.
   Light text on a light panel is invisible. That is how the heading "What you
   are not paying for separately" disappeared from the pricing page in dark
   mode — the card is `bg-light`, and nothing about the card was wrong in
   isolation.

   This is fixed here, once, rather than in the templates. There are roughly
   165 of these across 45 files; editing each one is a large mechanical sweep
   of exactly the kind that produced `ti-menu-2-staggered` the last time. A
   stylesheet override also covers the next template someone writes with
   `bg-light` in it, which a sweep cannot.

   `!important` is required: Bootstrap's utilities carry it, and this file
   loads after Bootstrap.
   --------------------------------------------------------------------------- */

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
    background-color: var(--hp-surface-raised) !important;
    color: var(--hp-text) !important;
}

/* A panel that was light and is now dark takes its text with it. Without this,
   `badge bg-light text-dark` and `card-body bg-light` holding a `text-dark`
   heading would stay dark-on-dark — the same failure, one level down. */
[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .bg-white.text-dark,
[data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-white .text-dark {
    color: var(--hp-text) !important;
}

/*
   Bare `text-dark` — text asked to be dark with no background of its own, so
   it is sitting on the page or on a card and is unreadable once both go dark.

   The :not() chain is the whole point of this rule. Most `text-dark` on this
   platform is NOT broken: `badge bg-warning text-dark`, `badge bg-info
   text-dark`, `btn btn-warning text-dark` — 47 of the 65 uses — are dark text
   on a yellow or cyan chip, which is correct in both themes and must not be
   touched. In every one of those the background class sits on the same
   element as text-dark, so excluding elements that carry any `bg-*` or `btn-*`
   class separates the broken from the correct without listing them by hand.
*/
[data-bs-theme="dark"] .text-dark:not([class*="bg-"]):not([class*="btn-"]) {
    color: var(--hp-text) !important;
}

/* Table head rows. `table-light` works through Bootstrap's own table
   variables rather than a plain background, so it needs its own rule — a
   `.bg-light` override does not reach it. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    --bs-table-bg:    var(--hp-surface-raised);
    --bs-table-color: var(--hp-text);
    background-color: var(--hp-surface-raised) !important;
    color: var(--hp-text) !important;
}

/* `bg-dark text-white` and `btn-dark` are deliberately left alone. Dark panel,
   white text — correct in both themes, and the vendor and procurement forms
   rely on it. */