/* =============================================================================
   RumiNest360 — design tokens (Phase 16A, re-themed in Phase 21A)

   The one place colour, type, spacing, radius, shadow and motion are decided.
   Everything else in the application refers to these names and never to a
   literal value.

   Phase 21 takes the look of the Vuexy admin template: its palette, Public Sans,
   6px corners, borderless cards on a soft shadow. Nothing is copied from the
   template itself (it is a paid product) — only the free pieces it is built on
   are used, and the values below are ours to measure.

   Loaded AFTER bootstrap.min.css, which is left untouched on disk. Bootstrap
   5.3 is driven by CSS custom properties, so the second half of this file
   re-points its tokens at ours: every existing card, btn, table, badge,
   form-control and alert in the application inherits the new system without a
   single page edit. Where Bootstrap 5.3.3 compiled a literal value instead of a
   variable (buttons, focus rings, checked controls), the override lives in
   components.css beside the component it belongs to.

   No Bootstrap file is forked, patched or upgraded.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Typeface

   Public Sans, variable, self-hosted (wwwroot/fonts). Self-hosted because the
   content policy allows fonts only from this origin — a font CDN would be
   refused — and because nothing about a page load should leave the network.
   Two subsets: Latin, which every page needs, and Latin Extended, which the
   browser fetches only for a page that shows a character from it — the rupee
   sign (U+20B9) is the one that matters here. SIL Open Font License 1.1; the
   licence travels with the files in wwwroot/fonts/OFL.txt.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Public Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/public-sans-latin-variable-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Public Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/public-sans-latin-ext-variable-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---------------------------------------------------------------- brand
       Two primaries, on purpose. #2b8e92 is the brand: gradients, icons, focus
       halos, chart series — anything that carries no text. White text on it is
       only 3.4:1, so every fill that carries text (a button, the active menu
       item, a solid badge) and every primary-coloured word on white uses the
       darker shade, #267c81, which is 4.9:1 (#1e676b, the hover, is 6.5:1). */
    --sm-primary: #2b8e92;
    --sm-primary-rgb: 43, 142, 146;
    --sm-primary-600: #267c81;
    --sm-primary-600-rgb: 38, 124, 129;
    --sm-primary-700: #1e676b;
    --sm-primary-tint: #ddedee;
    --sm-primary-tint-2: #cae3e4;
    --sm-primary-border: #aad2d3;
    --sm-primary-ink: #1e676b;
    --sm-primary-gradient: linear-gradient(270deg, var(--sm-primary) 0%, #1e676b 100%);

    /* The other Vuexy hues at full strength. Non-text use only — icons, chart
       series, progress fills, tile backgrounds through their tints. Text in these
       families uses the measured money inks below. Info (and the credit tone)
       is blue rather than Vuexy's cyan, which sat too close to the teal primary. */
    --sm-success: #28c76f;
    --sm-info: #2f80ed;
    --sm-warning: #ff9f43;
    --sm-danger: #ff4c51;
    --sm-secondary: #808390;
    /* The second series of a two-series chart: amber, so it never reads as a shade of the teal. */
    --sm-chart-2: #f5a524;

    /* The navigation surface. Light since Phase 21: the sidebar is a white panel on
       the page, like every card, and its ink is the page's ink. */
    --sm-nav-bg: #ffffff;
    --sm-nav-ink: #5d5a68;
    --sm-nav-ink-dim: #6d6b77;
    --sm-nav-ink-strong: #444050;
    --sm-nav-line: rgba(47, 43, 61, 0.12);
    --sm-nav-hover: rgba(47, 43, 61, 0.06);
    --sm-nav-active: var(--sm-primary-tint);
    --sm-nav-accent: var(--sm-primary);

    /* ------------------------------------------------------- money semantics
       Tone by meaning, not by severity: "part paid" is a state, not a warning.
       Each has a solid ink for text on white, a tint for a chip or panel
       background (Vuexy's 16% wash), a border for its edge, and a darker ink for
       text that sits ON the tint. Measured:

         paid    #178046  5.0 on white   paid-ink   5.8 on its tint
         due     #a75a00  5.1            due-ink    6.1
         over    #d0262b  5.3            over-ink   5.8
         credit  #1e63c8  5.7            credit-ink 6.7                       */
    --sm-paid: #178046;
    --sm-paid-tint: #ddf6e8;
    --sm-paid-border: #a9e9c5;
    --sm-paid-ink: #126b3a;

    --sm-due: #a75a00;
    --sm-due-tint: #fff0e1;
    --sm-due-border: #ffd9b4;
    --sm-due-ink: #8a4a00;

    --sm-over: #d0262b;
    --sm-over-tint: #ffe2e3;
    --sm-over-border: #ffb7b9;
    --sm-over-ink: #b0151a;

    --sm-credit: #1e63c8;
    --sm-credit-tint: #deebfc;
    --sm-credit-border: #accdf8;
    --sm-credit-ink: #174d9c;

    --sm-neutral-tint: #f1f0f2;
    --sm-neutral-border: #dbdade;

    /* ------------------------------------------------------------- surfaces */
    --sm-page: #f8f7fa;
    --sm-surface: #ffffff;
    --sm-surface-2: #fbfbfc;
    --sm-surface-sunken: #f8f7fa;

    /* ------------------------------------------------------------------- ink
       Measured, not assumed. Every one of these carries text somewhere, so each
       clears 4.5:1 against every surface it is used on — white, the page (which
       is also the sunken surface) and the neutral tint:

         ink    #444050  10.0 / 9.4 / 8.8   headings, figures, strong values
         ink-2  #5d5a68   6.7 / 6.3 / 5.9   body copy
         ink-3  #6d6b77   5.2 / 4.9 / 4.6   muted: labels, captions, meta

       Vuexy's own muted grey (#acaab1) is 2.3:1 and is used here only as ink-4:
       the breadcrumb separator (aria-hidden, decorative) and the label of a
       disabled control, which WCAG 1.4.3 exempts. A placeholder IS text, so it
       takes ink-3. */
    --sm-ink: #444050;
    --sm-ink-rgb: 68, 64, 80;
    --sm-ink-2: #5d5a68;
    --sm-ink-3: #6d6b77;
    --sm-ink-4: #acaab1;
    --sm-ink-inverse: #ffffff;

    /* The base every shadow and hairline is tinted with: Vuexy's dark ink. */
    --sm-shade-rgb: 47, 43, 61;

    /* ------------------------------------------------------------------ line */
    --sm-line: rgba(var(--sm-shade-rgb), 0.12);
    --sm-line-strong: rgba(var(--sm-shade-rgb), 0.2);
    --sm-line-solid: #e6e6e8;

    /* ---------------------------------------------------------------- radius */
    --sm-r-xs: 4px;
    --sm-r-sm: 6px;
    --sm-r: 6px;
    --sm-r-lg: 8px;
    --sm-r-xl: 10px;
    --sm-r-pill: 999px;

    /* --------------------------------------------------------------- spacing
       4px base. Used by the shell and by our own components; Bootstrap's own
       spacing utilities are left exactly as they are. */
    --sm-s-1: 4px;
    --sm-s-2: 8px;
    --sm-s-3: 12px;
    --sm-s-4: 16px;
    --sm-s-5: 20px;
    --sm-s-6: 24px;
    --sm-s-7: 32px;
    --sm-s-8: 40px;
    --sm-s-9: 48px;

    /* ---------------------------------------------------------------- shadow
       One soft layer each, tinted with the ink rather than black. shadow-2 is the
       card; shadow-3 is anything that floats (a menu, a dialog, a toast). */
    --sm-shadow-1: 0 0.125rem 0.375rem rgba(var(--sm-shade-rgb), 0.12);
    --sm-shadow-2: 0 0.1875rem 0.75rem rgba(var(--sm-shade-rgb), 0.14);
    --sm-shadow-3: 0 0.25rem 1.125rem rgba(var(--sm-shade-rgb), 0.16);
    --sm-shadow-nav: 0 0.125rem 0.5rem rgba(var(--sm-shade-rgb), 0.12);
    --sm-shadow-primary: 0 0.125rem 0.375rem rgba(var(--sm-primary-rgb), 0.3);

    /* ------------------------------------------------------------------ type */
    --sm-font: "Public Sans Variable", "Public Sans", system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --sm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --sm-text-xs: 0.75rem;     /* 12px — caption, table meta */
    --sm-text-sm: 0.8125rem;   /* 13px — labels, badges, table heads */
    --sm-text-md: 0.875rem;    /* 14px — dense table text */
    --sm-text: 0.9375rem;      /* 15px — body */
    --sm-text-lg: 1.0625rem;   /* 17px — card titles */
    --sm-text-xl: 1.125rem;    /* 18px */
    --sm-title: 1.5rem;        /* 24px — page title */
    --sm-display: 1.75rem;     /* 28px — a figure that carries a page */
    --sm-display-lg: 2.25rem;  /* 36px */

    --sm-track-label: 0.04em;
    --sm-track-tight: 0;

    /* ---------------------------------------------------------------- shell */
    --sm-sidebar-w: 260px;
    --sm-sidebar-rail-w: 80px;
    --sm-topbar-h: 58px;
    --sm-topbar-gap: 1rem;
    --sm-crumbs-h: 36px;
    --sm-content-max: 1440px;

    /* --------------------------------------------------------------- motion */
    --sm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sm-fast: 150ms;
    --sm-mid: 200ms;

    /* ---------------------------------------------------------------- focus */
    --sm-focus: var(--sm-primary-600);
    --sm-focus-halo: rgba(var(--sm-primary-rgb), 0.25);
    --sm-focus-inverse: #ffffff;

    /* ----------------------------------------------------------------- layer
       The sidebar and its backdrop keep the z-indexes the application already
       relied on, so nothing that sits above them starts sitting below. */
    --sm-z-sidebar: 1045;
    --sm-z-backdrop: 1040;
    --sm-z-topbar: 1030;
    --sm-z-menu: 1035;
}

/* =============================================================================
   Bootstrap 5.3.3 remap

   Same specificity as Bootstrap's own ":root,[data-bs-theme=light]", declared
   later, so these win by source order. A Bootstrap "-rgb" variable cannot take
   a var() of a hex, so those are written out; each matches the token beside it.
   ========================================================================== */
:root {
    /* brand and semantic colours. "--bs-primary" is the text-safe shade, because
       Bootstrap uses it for .text-primary and .link-primary as well as fills. */
    --bs-primary: var(--sm-primary-600);
    --bs-primary-rgb: var(--sm-primary-600-rgb);
    --bs-primary-text-emphasis: var(--sm-primary-ink);
    --bs-primary-bg-subtle: var(--sm-primary-tint);
    --bs-primary-border-subtle: var(--sm-primary-border);

    --bs-success: var(--sm-paid);
    --bs-success-rgb: 23, 128, 70;
    --bs-success-text-emphasis: var(--sm-paid-ink);
    --bs-success-bg-subtle: var(--sm-paid-tint);
    --bs-success-border-subtle: var(--sm-paid-border);

    --bs-warning: var(--sm-due);
    --bs-warning-rgb: 167, 90, 0;
    --bs-warning-text-emphasis: var(--sm-due-ink);
    --bs-warning-bg-subtle: var(--sm-due-tint);
    --bs-warning-border-subtle: var(--sm-due-border);

    --bs-danger: var(--sm-over);
    --bs-danger-rgb: 208, 38, 43;
    --bs-danger-text-emphasis: var(--sm-over-ink);
    --bs-danger-bg-subtle: var(--sm-over-tint);
    --bs-danger-border-subtle: var(--sm-over-border);

    --bs-info: var(--sm-credit);
    --bs-info-rgb: 30, 99, 200;
    --bs-info-text-emphasis: var(--sm-credit-ink);
    --bs-info-bg-subtle: var(--sm-credit-tint);
    --bs-info-border-subtle: var(--sm-credit-border);

    /* ".text-secondary" resolves through --bs-secondary-rgb, ".text-muted" and
       ".form-text" through --bs-secondary-color: both land on the muted ink. */
    --bs-secondary: var(--sm-ink-3);
    --bs-secondary-rgb: 109, 107, 119;
    --bs-secondary-color: var(--sm-ink-3);
    --bs-secondary-color-rgb: 109, 107, 119;
    --bs-secondary-text-emphasis: var(--sm-ink);
    --bs-secondary-bg: var(--sm-neutral-tint);
    --bs-secondary-bg-rgb: 241, 240, 242;
    --bs-secondary-bg-subtle: var(--sm-neutral-tint);
    --bs-secondary-border-subtle: var(--sm-neutral-border);

    --bs-tertiary-color: var(--sm-ink-3);
    --bs-tertiary-color-rgb: 109, 107, 119;
    --bs-tertiary-bg: var(--sm-page);
    --bs-tertiary-bg-rgb: 248, 247, 250;

    --bs-light: var(--sm-surface-sunken);
    --bs-light-rgb: 248, 247, 250;
    --bs-light-bg-subtle: var(--sm-surface-2);
    --bs-light-border-subtle: var(--sm-line-solid);

    --bs-dark: var(--sm-ink);
    --bs-dark-rgb: var(--sm-ink-rgb);

    /* body and emphasis */
    --bs-body-color: var(--sm-ink-2);
    --bs-body-color-rgb: 93, 90, 104;
    --bs-body-bg: var(--sm-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: var(--sm-ink);
    --bs-emphasis-color-rgb: var(--sm-ink-rgb);
    --bs-heading-color: var(--sm-ink);

    /* links */
    --bs-link-color: var(--sm-primary-600);
    --bs-link-color-rgb: var(--sm-primary-600-rgb);
    --bs-link-hover-color: var(--sm-primary-700);
    --bs-link-hover-color-rgb: 2, 107, 91;

    /* lines and corners */
    --bs-border-color: var(--sm-line-solid);
    --bs-border-color-translucent: var(--sm-line);
    --bs-border-radius: var(--sm-r);
    --bs-border-radius-sm: var(--sm-r-xs);
    --bs-border-radius-lg: var(--sm-r-lg);
    --bs-border-radius-xl: var(--sm-r-xl);

    /* shadows — ".shadow-sm" carries most of the application's cards, so it takes
       the card shadow rather than a fainter one. */
    --bs-box-shadow-sm: var(--sm-shadow-2);
    --bs-box-shadow: var(--sm-shadow-2);
    --bs-box-shadow-lg: var(--sm-shadow-3);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--sm-shade-rgb), 0.06);

    /* type */
    --bs-body-font-family: var(--sm-font);
    --bs-font-sans-serif: var(--sm-font);
    --bs-font-monospace: var(--sm-font-mono);
    --bs-body-font-size: var(--sm-text);
    --bs-body-line-height: 1.47;
    --bs-body-font-weight: 400;

    /* form validation */
    --bs-form-invalid-color: var(--sm-over);
    --bs-form-invalid-border-color: var(--sm-over);
    --bs-form-valid-color: var(--sm-paid);
    --bs-form-valid-border-color: var(--sm-paid);

    --bs-code-color: var(--sm-primary-ink);
    --bs-highlight-bg: #fff0e1;
}

/* =============================================================================
   Base elements
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    font-family: var(--sm-font);
}

body {
    font-size: var(--sm-text);
    line-height: 1.47;
    color: var(--sm-ink-2);
    background-color: var(--sm-page);
    letter-spacing: var(--sm-track-tight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The heading scale, restated for a 15px body. Bootstrap's h1 is fluid
   (calc + vw), which makes a page title jump about as the window is resized. */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.3125rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 0.9375rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    line-height: 1.37;
    letter-spacing: var(--sm-track-tight);
    color: var(--sm-ink);
}

/* Bootstrap's font-size utilities, on the same 15px footing. */
.fs-1 { font-size: 2.25rem !important; }
.fs-2 { font-size: 1.75rem !important; }
.fs-3 { font-size: 1.5rem !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.125rem !important; }
.fs-6 { font-size: 0.9375rem !important; }

small, .small { font-size: var(--sm-text-sm); }

/* Bold is 600, not Bootstrap's 700: Public Sans at 700 is heavier than anything
   else on a Vuexy page. */
b, strong { font-weight: 600; }
.fw-bold { font-weight: 600 !important; }

a {
    text-decoration: none;
    transition: color var(--sm-fast) var(--sm-ease);
}

a:hover {
    text-decoration: none;
}

code {
    font-family: var(--sm-font-mono);
    font-size: 0.8125em;
    padding: 0.1em 0.35em;
    border-radius: var(--sm-r-xs);
    background-color: var(--sm-primary-tint);
    color: var(--sm-primary-ink);
}

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

::selection {
    background-color: var(--sm-primary-tint-2);
    color: var(--sm-primary-ink);
}

/* One visible focus treatment for the whole application: a 2px ring and a soft
   halo. Applied on :focus-visible, so a mouse click leaves no ring behind but
   every keyboard user can always see where they are. */
:focus-visible {
    outline: 2px solid var(--sm-focus);
    outline-offset: 2px;
    border-radius: var(--sm-r-xs);
}

/* A restrained scrollbar for the panes that scroll (the sidebar, a wide table
   box). The standard properties cover Firefox; the ::-webkit rules the rest. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sm-shade-rgb), 0.25) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--sm-shade-rgb), 0.2);
    border: 3px solid transparent;
    border-radius: var(--sm-r-pill);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--sm-shade-rgb), 0.35);
}

/* =============================================================================
   Typography helpers

   Named after what they mean, not after what they look like.
   ========================================================================== */

/* A small uppercase label above a value or a group of them. */
.sm-eyebrow,
.sm-label {
    font-size: var(--sm-text-xs);
    font-weight: 500;
    letter-spacing: var(--sm-track-label);
    text-transform: uppercase;
    color: var(--sm-ink-3);
    line-height: 1.4;
}

.sm-caption {
    font-size: var(--sm-text-xs);
    color: var(--sm-ink-3);
    line-height: 1.5;
}

/* Figures that must line up in a column. Every money and quantity value in the
   application carries this, so digits share one advance width and a total sits
   directly under the amounts it adds up. */
.sm-num,
.sm-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

.sm-money {
    white-space: nowrap;
}

/* A figure that carries a page or a panel. */
.sm-figure {
    font-size: var(--sm-display);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--sm-ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.sm-figure-lg {
    font-size: var(--sm-display-lg);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.sm-tone-paid { color: var(--sm-paid) !important; }
.sm-tone-due { color: var(--sm-due) !important; }
.sm-tone-over { color: var(--sm-over) !important; }
.sm-tone-credit { color: var(--sm-credit) !important; }
.sm-tone-muted { color: var(--sm-ink-3) !important; }

/* =============================================================================
   Reduced motion

   Every transition in the design system is declared so that it can be turned
   off here, in one place.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}