/*
  Craft Connect design system, extracted verbatim from docs/design/dashboard.html and
  docs/design/login.html - those two files are the authoritative visual spec. Do not hand-tune
  values here without updating this comment to explain the deviation and why.

  Layered over Radzen's "standard"/"standard-dark" component theme (swapped by
  CraftThemeStyles.razor). No literal Radzen "fluent" theme ships in this project's installed
  Radzen.Blazor package (confirmed by listing its shipped theme files) - the --rz-* overrides
  below are how the source designs' look is reproduced on top of Radzen's Standard base.
*/

:root {
    /* ---- raw design tokens (verbatim names/values from both HTML files) ---- */
    --navy: #0f1b2d;
    --navy-2: #16243a;
    --navy-3: #1e3050;
    --green: #3dbe6c;
    --green-press: #34a85e;
    --blue: #2d8fe0;
    --amber: #e8a13d;
    --red: #d95757;
    --green-dim: #e2f6ea;
    --blue-dim: #e3f0fb;
    --amber-dim: #fbf0dd;
    --red-dim: #fbe7e7;
    --err-dim: #fbe7e7;
    --paper: #f6f8fb;
    --card: #ffffff;
    --line: #e3e8ef;
    --ink: #17202e;
    --muted: #64748b;
    --faint: #94a3b8;
    --greendk: #1e7a44;
    --ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --disp: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
    --mono: 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
    --r: 8px;
    /* Not explicitly named in either source file, but every interactive control (.btn, .orgsel,
       .bell, .uchip, form inputs) consistently uses 7px while cards/marks use --r (8px) - extracted
       as its own token since the pattern is consistent, not copy-pasted from a named variable. */
    --r-control: 7px;
    --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 3px 10px rgba(15, 27, 45, .05);

    /* on-color for solid fills: the exact near-black the login design pairs with --green (not
       white - white-on-green/blue/amber fails WCAG AA; this dark ink clears it at every shade
       from base to darker, since darkening a fill only increases contrast against dark text). */
    --on-fill: #0b2416;

    /* ---- Radzen component variables ---- */
    --rz-primary: var(--green);
    --rz-primary-light: #73d095;
    --rz-primary-lighter: rgba(61, 190, 108, .16);
    --rz-primary-dark: #33a05b;
    --rz-primary-darker: #2c894e;
    --rz-on-primary: var(--on-fill);
    --rz-on-primary-light: var(--on-fill);
    --rz-on-primary-lighter: var(--greendk);
    --rz-on-primary-dark: var(--on-fill);
    --rz-on-primary-darker: var(--on-fill);

    --rz-secondary: var(--blue);
    --rz-secondary-light: #68aee9;
    --rz-secondary-lighter: rgba(45, 143, 224, .16);
    --rz-secondary-dark: #2678bc;
    --rz-secondary-darker: #2067a1;
    --rz-on-secondary: var(--on-fill);
    --rz-on-secondary-light: var(--on-fill);
    --rz-on-secondary-lighter: var(--blue);
    --rz-on-secondary-dark: var(--on-fill);
    --rz-on-secondary-darker: var(--on-fill);

    --rz-success: var(--green);
    --rz-success-light: #73d095;
    --rz-success-lighter: var(--green-dim);
    --rz-success-dark: #33a05b;
    --rz-success-darker: #2c894e;
    --rz-on-success: var(--on-fill);
    --rz-on-success-light: var(--on-fill);
    --rz-on-success-lighter: var(--greendk);
    --rz-on-success-dark: var(--on-fill);
    --rz-on-success-darker: var(--on-fill);

    --rz-warning: var(--amber);
    --rz-warning-light: #eebb73;
    --rz-warning-lighter: var(--amber-dim);
    --rz-warning-dark: #c38733;
    --rz-warning-darker: #a7742c;
    --rz-on-warning: var(--on-fill);
    --rz-on-warning-light: var(--on-fill);
    --rz-on-warning-lighter: #9a6414;
    --rz-on-warning-dark: var(--on-fill);
    --rz-on-warning-darker: var(--on-fill);

    --rz-danger: var(--red);
    --rz-danger-light: #e48686;
    --rz-danger-lighter: var(--red-dim);
    --rz-danger-dark: #b64949;
    --rz-danger-darker: #9c3f3f;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: var(--on-fill);
    --rz-on-danger-lighter: var(--red);
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;

    --rz-text-font-family: var(--ui);
    --rz-card-border-radius: var(--r);
    --rz-panel-border-radius: var(--r);
    --rz-card-shadow: var(--shadow);

    /* Sidebar stays navy in both app themes - see NavMenu.razor.css. */
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, .08);
    --rz-panel-menu-item-active-background-color: rgba(255, 255, 255, .14);
    --rz-panel-menu-item-active-indicator: var(--blue);
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-border-radius: 6px;
    --rz-panel-menu-item-color: #ffffff;
}

[data-theme="dark"] {
    --paper: #141a23;
    --card: #1d2530;
    --line: #2d3948;
    --ink: #e9eef5;
    --muted: #9db0c5;
    --faint: #6b7f96;
    --green-dim: #15301f;
    --blue-dim: #122a40;
    --amber-dim: #312611;
    --red-dim: #331a1a;
    --err-dim: #331a1a;
    --greendk: #6fdb98;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 12px rgba(0, 0, 0, .28);
}

/* Radzen's Standard theme ships a decorative multi-color blurred-blob SVG as the page background
   (its own marketing flourish) via a plain `body{background:...}` rule. `html body` (specificity
   0,0,2) reliably beats it regardless of stylesheet load order - Radzen's <link> is injected
   dynamically at runtime, so source order isn't guaranteed.

   color: var(--ink) matters just as much as the background: nothing else in this file sets a
   base text color, so without this every element without its own explicit color rule (h1/h3,
   table cells, .val, .at, etc.) falls back to the browser's default black. That's invisible
   against the dark theme's --paper/--card backgrounds - color is inherited, so setting it once
   here fixes all of them at once, and every more specific rule below (.stat .lab, .muted, etc.)
   still overrides it as normal. */
html body {
    background: var(--paper);
    color: var(--ink);
}

/* App-wide placeholder text style, matching docs/design/login.html's .control input::placeholder
   rule - Radzen's text/numeric/date inputs all render a real <input> under the hood, so a plain
   selector here reaches them without needing ::deep inside every page. */
input::placeholder,
textarea::placeholder {
    color: var(--faint);
    opacity: 1;
}

/* Grids sit inside a .card wrapper for border/radius/shadow (matching the source designs' plain
   <table> inside <div class="card">), so the grid itself stays borderless; header row is
   uppercase/muted/small to match dashboard.html's th styling - no Radzen variable covers
   letter-spacing or the numeric-column mono font, so those are plain selectors below. */
.rz-grid-table thead th {
    text-transform: uppercase;
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: .07em;
    font-weight: 600;
}

.rz-data-row:hover > td {
    background: var(--paper);
}

.mono, .num {
    font-family: var(--mono);
}

.num {
    text-align: right;
}

/* Generic page-content primitives from the source designs (card/grid/tag/chip/btn) - reusable
   across any page, not just Dashboard. */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.ch {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ch h3 {
    font-family: var(--disp);
    font-size: 14.5px;
    font-weight: 600;
}

.ch .sub {
    color: var(--faint);
    font-size: 12px;
}

.ch .r {
    margin-left: auto;
    font-size: 12.5px;
}

.cb {
    padding: 16px;
}

.grid {
    display: grid;
    gap: 16px;
}

.g4 {
    grid-template-columns: repeat(4, 1fr);
}

.g2-1 {
    grid-template-columns: 2.05fr 1fr;
}

.g1-1-1 {
    grid-template-columns: 1.1fr 1fr 1fr;
}

.g3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1120px) {
    .g4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .g2-1, .g1-1-1, .g3 {
        grid-template-columns: 1fr;
    }
}

.tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
}

.tag.green {
    background: var(--green-dim);
    color: var(--greendk);
}

.tag.blue {
    background: var(--blue-dim);
    color: var(--blue);
}

.tag.amber {
    background: var(--amber-dim);
    color: #9a6414;
}

[data-theme="dark"] .tag.amber {
    color: #e8bd72;
}

.tag.red {
    background: var(--red-dim);
    color: var(--red);
}

.chips {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.chip {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 99px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.chip.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

[data-theme="dark"] .chip.on {
    background: var(--blue);
    border-color: var(--blue);
}

.btn {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: var(--r-control);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--ui);
    cursor: pointer;
}

.btn:hover {
    border-color: var(--blue);
}

/* Record grid toolbar (view selector, New/Import/Export, search) - sits directly above a
   RadzenDataGrid. Reusable across any list page (Invoices, Locations, ...), not page-specific. */
.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    flex-wrap: wrap;
}

.grid-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--line);
    flex-shrink: 0;
}

.grid-toolbar-spacer {
    flex: 1;
    min-width: 12px;
}

.grid-toolbar-search {
    position: relative;
    width: 260px;
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th {
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    white-space: nowrap;
}

td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--paper);
}

td.num, th.num {
    text-align: right;
    font-family: var(--mono);
}

.code {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* Compact row list primitive (leading accent bar, title/subtitle, trailing amount) - used by
   dashboard alert/due-soon tiles and reusable by any future page needing the same pattern. */
.arow {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.arow:last-child {
    border-bottom: none;
}

.sev {
    width: 4px;
    align-self: stretch;
    border-radius: 4px;
    background: var(--red);
}

.sev.mid {
    background: var(--amber);
}

.at {
    font-weight: 600;
    font-size: 13px;
}

.am {
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 2px;
}

.an {
    margin-left: auto;
    text-align: right;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

.an b {
    color: var(--ink);
    font-size: 12.5px;
}

.devc {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 12px;
    border-radius: 6px;
    padding: 1px 7px;
    background: var(--red-dim);
    color: var(--red);
}

.statuses {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.stitem {
    flex: 1;
    min-width: 130px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    padding: 9px 12px;
    font-size: 11.5px;
}

.stitem .n {
    font-weight: 600;
    color: var(--ink);
}

.stitem .c {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    margin-top: 3px;
}

.donut-wrap {
    display: flex;
    gap: 18px;
    align-items: center;
}

.legend {
    font-size: 12.5px;
    flex: 1;
}

.leg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4.5px 0;
}

.leg .sw {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.leg .nm {
    color: var(--ink);
}

.leg .amt {
    margin-left: auto;
    font-family: var(--mono);
    color: var(--muted);
    font-size: 11.5px;
}

.stat {
    padding: 15px 16px;
}

.stat .lab {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.stat .val {
    font-family: var(--mono);
    font-size: 23px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: -.02em;
}

.delta {
    display: inline-flex;
    gap: 4px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 7px;
    margin-top: 8px;
}

.delta.up {
    background: var(--red-dim);
    color: var(--red);
}

.delta.down {
    background: var(--green-dim);
    color: var(--greendk);
}

.delta.flat {
    background: var(--paper);
    color: var(--muted);
}

/* Dialog layout: title bar and Save/Cancel footer must stay visible regardless of how tall the
   body content is, and a tab strip (when a dialog has one) must stay pinned with only the active
   tab's content scrolling. Radzen's own .rz-dialog-content is a plain block with no height/overflow
   handling (only .rz-tabview-panels has flex:1;overflow:auto, and only once its ancestor chain has
   a real height to distribute) - these rules give it a real flex box to fill so that RadzenTabs'
   existing panel-scroll rule can take effect, and so non-tabbed dialogs get the same pinned-footer
   behavior via .modal-body/.modal-scroll/.modal-footer below. Applies globally; dialogs that don't
   opt into the .modal-* classes are unaffected since flex:1 on an auto-height ancestor is a no-op. */
.rz-dialog {
    max-height: 90vh;
}

.rz-dialog-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.modal-body > .rz-tabview {
    flex: 1 1 auto;
    min-height: 0;
}

.modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: .25rem;
}

.modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .75rem;
}

/* Detail-page tab controls (as opposed to a modal's) size against the viewport directly - there's
   no bounded dialog ancestor to inherit a height from. Subtracts the sticky top bar, .wrap's
   padding, and the breadcrumb/heading/toolbar block every detail page renders above its tabs;
   RadzenTabs' own .rz-tabview-panels{flex:1;overflow:auto} rule then scrolls the active tab's
   content within that fixed height, same as .modal-body does for dialogs. */
.page-tabs-fill {
    height: calc(100vh - 300px);
    min-height: 320px;
}