/* ============================================================================
   KSAM LINE OA BACKEND — CENTRAL THEME TOKENS
   ----------------------------------------------------------------------------
   Palette, spacing and type scale are taken from the approved KSAM back-end
   console design (SourceCode/index.html + the Dashboard / KSAM Line Connect
   mockups): Krungsri yellow #FDB913 on a #23272F navigation rail, white
   top bar, #F4F6F9 page background.

   This is the ONLY place theme values are defined — never hard-code a colour
   in a component stylesheet or a .cshtml file.
   ============================================================================ */

:root {
    /* ===== BRAND ===== */
    --ksam-primary: #FDB913; /* krungsri yellow */
    --ksam-primary-hover: #E5A50B;
    --ksam-primary-soft: #FFF8E6;
    --ksam-primary-softer: #FFFCF2;
    --ksam-on-primary: #3A2F06; /* text/icon on top of yellow */

    /* ===== NAVIGATION RAIL ===== */
    --ksam-nav: #23272F;
    --ksam-nav-dark: #1B1E24;
    --ksam-nav-text: #C9CFDA;
    --ksam-nav-text-muted: #8A93A0;
    --ksam-nav-group: #6C7686;
    --ksam-nav-hover: rgba(255, 255, 255, .06);
    --ksam-nav-border: rgba(255, 255, 255, .07);

    /* ===== INK / TEXT ===== */
    --ksam-ink: #1B1E24;
    --ksam-ink-2: #5A626E;
    --ksam-ink-3: #8A93A0;

    /* ===== SURFACES ===== */
    --ksam-bg: #F4F6F9;
    --ksam-card: #FFFFFF;
    --ksam-surface-soft: #FAFBFC;
    --ksam-surface-head: #F7F8FA;
    --ksam-row-hover: #FBFCFD;

    /* ===== LINES ===== */
    --ksam-line: #E3E7ED;
    --ksam-line-soft: #EFF2F6;
    --ksam-line-input: #CFD5DE;

    /* ===== STATUS ===== */
    --ksam-ok: #0F9D58;
    --ksam-ok-bg: #E7F6EE;
    --ksam-warn: #B7791F;
    --ksam-warn-bg: #FDF3DA;
    --ksam-warn-border: #F1DFAF;
    --ksam-err: #D93025;
    --ksam-err-bg: #FDECEA;
    --ksam-err-border: #F3B7B2;
    --ksam-info: #1A73E8;
    --ksam-info-bg: #E8F0FE;
    --ksam-info-border: #C6DAFC;
    --ksam-purple: #6B4EFF;
    --ksam-purple-bg: #EEEAFF;
    --ksam-neutral-bg: #EEF1F5;

    /* ===== LAYOUT ===== */
    --ksam-sidebar-width: 248px;
    --ksam-topbar-height: 60px;
    --ksam-content-pad: 22px;

    /* ===== RADIUS ===== */
    --ksam-radius: 10px;
    --ksam-radius-sm: 8px;
    --ksam-radius-xs: 7px;
    --ksam-radius-lg: 14px;
    --ksam-radius-pill: 999px;

    /* ===== SHADOW ===== */
    --ksam-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --ksam-shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);

    /* ===== FOCUS ===== */
    --ksam-focus-ring: 0 0 0 3px rgba(253, 185, 19, .25);

    /* ===== TYPE SCALE =====
       Krungsri Condensed is a narrow face, so the base sits one step above the
       14px of the reference mockup to keep Thai text equally legible.
       Change --ksam-fs-base to retune the whole console. */
    --ksam-fs-base: 15px;
    --ksam-fs-xs: 11px;
    --ksam-fs-sm: 12px;
    --ksam-fs-md: 13px;
    --ksam-fs-lg: 16px;
    --ksam-fs-xl: 18px;
    --ksam-fs-2xl: 21px;
    --ksam-fs-kpi: 31px;

    /* ========================================================================
       GENERIC ALIASES — component stylesheets use these neutral names so a
       re-brand only has to touch the block above.
       ======================================================================== */
    --color-primary: var(--ksam-primary);
    --color-primary-hover: var(--ksam-primary-hover);
    --color-on-primary: var(--ksam-on-primary);
    --color-white: #FFFFFF;
    --color-text: var(--ksam-ink);
    --color-text-sub: var(--ksam-ink-2);
    --color-text-muted: var(--ksam-ink-3);
    --color-border: var(--ksam-line);
    --color-border-soft: var(--ksam-line-soft);
    --color-success: var(--ksam-ok);
    --color-success-soft: var(--ksam-ok-bg);
    --color-warning: var(--ksam-warn);
    --color-warning-soft: var(--ksam-warn-bg);
    --color-info: var(--ksam-info);
    --color-info-soft: var(--ksam-info-bg);
    --color-danger: var(--ksam-err);
    --color-danger-soft: var(--ksam-err-bg);
    --color-bg-hover: var(--ksam-row-hover);

    --body-bg: var(--ksam-bg);
    --surface-bg: var(--ksam-card);
    --surface-soft: var(--ksam-surface-soft);
    --input-bg: #FFFFFF;
    --border-color: var(--ksam-line);
    --border-color-soft: var(--ksam-line-soft);
    --text-main: var(--ksam-ink);
    --text-sub: var(--ksam-ink-2);
    --text-muted: var(--ksam-ink-3);

    --radius-sm: var(--ksam-radius-sm);
    --radius-md: var(--ksam-radius);
    --radius-lg: var(--ksam-radius);
    --radius-pill: var(--ksam-radius-pill);

    --card-shadow: var(--ksam-shadow);
    --shadow-card: var(--ksam-shadow);
    --shadow-soft: var(--ksam-shadow);
    --shadow-modal: var(--ksam-shadow-lg);
    --shadow-raise: var(--ksam-shadow-lg);
    --focus-ring: var(--ksam-focus-ring);

    /* ===== BOOTSTRAP 5 OVERRIDES ===== */
    --bs-primary: #FDB913;
    --bs-primary-rgb: 253, 185, 19;
    --bs-link-color: #1A73E8;
    --bs-link-color-rgb: 26, 115, 232;
    --bs-link-hover-color: #174EA6;
    --bs-body-color: #1B1E24;
    --bs-body-bg: #F4F6F9;
    --bs-border-color: #E3E7ED;
    --bs-border-radius: 10px;
    --bs-body-font-size: 15px;
}