/* ==================================================
   THEME TOKENS - the only colors to use in CSS. Pick by role:
     backgrounds  --bg-*      text  --text*      lines  --border*
     brand        --primary*  status --color-*   data  --category-*
   Light values below; [data-theme="dark"] redefines them (data-theme is set on
   <html> by the inline script in _layout_header.html). In JS use getCssVar("name").
   ================================================== */
:root {
    color-scheme: light;

    /* Backgrounds, from lowest to highest */
    --bg-frame: #fff;                    /* top bar, sidebar */
    --bg-page: #fcfcfc;                  /* content area behind the cards */
    --bg-surface: #fff;                  /* cards, panels, dialogs, grids, inputs */
    --bg-surface-header: #f8f8f8;        /* headers and toolbars inside a surface */
    --bg-subtle: #f2f2f2;                /* quiet fills inside a surface: stripes, code, switch track */
    --bg-hover: #e9f1ff;                 /* hovered row / item, light brand tint */
    --bg-selected: #d2dbf1;              /* selected row / item */
    --bg-backdrop: rgba(0, 0, 0, 0.1);   /* dimming behind dialogs */

    /* Text */
    --text: #000;                        /* normal text */
    --text-muted: #888;                  /* secondary text, hints, captions */
    --text-disabled: #c5c5c5;            /* disabled / placeholder text */
    --text-heading: var(--primary);      /* headings and labels */
    --text-on-primary: #d2dbf1;          /* text and icons on a --primary background */

    /* Lines */
    --border: #d2dbf1;                   /* cards, inputs, grids, dialogs */
    --border-subtle: #f2f2f2;            /* light separators: table rows, dividers */
    --border-focus: #afbbd8;             /* focus ring */

    /* Brand: buttons, links, active states, icons */
    --primary: #011D51;
    --primary-hover: #13387c;
    --primary-light: #6489cc;
    --primary-rgb: 1, 29, 81;            /* for translucent tints: rgba(var(--primary-rgb), 0.1) */

    /* Status */
    --color-error: #cc1316;
    --color-success: #19a558;
    --color-info: var(--primary);

    /* Data / category colors: tiles, legends, charts */
    --category-yellow: #ffb74d;
    --category-green: #81c784;
    --category-pink: #f48fb1;
    --category-blue: #7986cb;
    --category-brown: #a1887f;
    --category-violet: #9575cd;
    --category-red: #e57373;

    /* JSON / code syntax (QJsonEditor, prettyjson.css) */
    --code-key: var(--primary);
    --code-string: #0a7d3b;
    --code-number: #b35c00;
    --code-literal: #7a3ea8;

    --logo-url: url(/static/app/img/logo/salesmatic-logo.svg);
}

/* Dark theme, built on the brand navy #011D51: all surfaces are deep navies of its hue,
   from the darkest frame (top bar, sidebar) up to the surface headers. --primary is the
   lightened brand blue, with brand navy (#011D51) text on it. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-frame: #060d1c;
    --bg-page: #081226;
    --bg-surface: #0f1c36;
    --bg-surface-header: #152443;
    --bg-subtle: #1a2b4f;
    --bg-hover: #1f3563;
    --bg-selected: #28437a;
    --bg-backdrop: rgba(1, 10, 30, 0.6);

    --text: #e6e9f0;
    --text-muted: #8d97ab;
    --text-disabled: #5d687d;
    --text-heading: var(--text);
    --text-on-primary: #011D51;

    --border: #22355c;
    --border-subtle: #182848;
    --border-focus: #3a5a9a;

    --primary: #8fb3f5;
    --primary-hover: #a9c4f8;
    --primary-light: #7f9fdb;
    --primary-rgb: 143, 179, 245;

    --color-error: #ef5350;
    --color-success: #3ccf7e;

    --code-string: #7ee2a0;
    --code-number: #ffb570;
    --code-literal: #d0a8ff;

    --logo-url: url(/static/app/img/logo/salesmatic-logo-dark.svg);
}

/* --------------------------------------------------
   NOT FOR NEW CODE
   1. Pico variables: the login pages (Pico CSS) read these to get the brand colors.
   2. Old token names, still read by some app scripts (op, os, QAnalysis) and by external
      plugins (Berger price models); migrate those before removing them.
   -------------------------------------------------- */
:root {
    font-family: "Poppins", sans-serif;

    /* 1. Pico (login pages) */
    --font-family: "Poppins", sans-serif;
    --primary-inverse: #fff;
    --primary-focus: var(--border-focus);
    --secondary: var(--primary);
    --contrast: var(--color-error);
    --contrast-hover: #d43b3d;
    --muted-color: var(--border);
    --border-color: var(--primary);
    --form-element-border-color: var(--border-focus);
    --switch-background-color: #c8cbd6;

    /* 2. Old names -> new tokens */
    --background: var(--bg-frame);
    --surface: var(--bg-surface);
    --surface-shade: var(--bg-page);
    --surface-header: var(--bg-surface-header);
    --on-surface: var(--text);
    --on-surface-muted: var(--text-muted);
    --on-surface-light: var(--text-disabled);
    --on-surface-shade: var(--bg-subtle);
    --tertiary: var(--border);
    --tertiary-light: var(--bg-hover);
    --tertiary-hover: var(--bg-hover);
    --tertiary-shade: color-mix(in srgb, var(--primary-light) 12.5%, transparent); /* translucent, e.g. plugin read-only overlays */
    --error-color: var(--color-error);
    --backdrop: var(--bg-backdrop);
    --yellow: var(--category-yellow);
    --green: var(--category-green);
    --pink: var(--category-pink);
    --blue: var(--category-blue);
    --brown: var(--category-brown);
    --violet: var(--category-violet);
    --red: var(--category-red);
}

/* Theme-specific <img> pairs (e.g. the top-bar logo): show only the one for the active theme */
:root:not([data-theme="dark"]) .logo-dark,
:root[data-theme="dark"] .logo-light {
    display: none;
}

body {
    font-family: 'Poppins', "sans-serif";
    /* Base size for raw text (spans, paragraphs, headings, em-sized text).
       Set on body, not html, so rem-based Kendo widgets keep their own size. */
    font-size: 14px;
}


.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info {
    color: var(--color-info);
}

.error {
    color: var(--color-error);
}

.success {
    color: var(--color-success);
}

.alert {
    border: var(--border-width) solid;
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

.alert::before {
    vertical-align: -0.13rem;
    margin-right: 0.2rem;
    font-family: "Material Symbols Outlined";
}

.alert.info::before {
    content: "info";
}

.alert.error::before {
    content: "error";
}

.alert.success::before {
    content: "done";
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}