/*
  ชมรมห้องสมุดสีเขียว (Green Libraries Group) — Kendo UI Theme Overrides
  Base: Kendo UI 2024 Q4 "Default" theme v13.1.1 (default-main.css)

  Strategy: override Kendo CSS custom properties at :root so every
  Kendo component (buttons, inputs, stepper, grid, upload, dialog…)
  automatically picks up the green brand palette. Component-specific
  layout/spacing lives in custom.css.

  ═══════════════════════════════════════════════════════════════
  DESIGN TOKENS — "ธรรมชาติ ทันสมัย สบายตา" (natural / modern / easy on the eyes)
  ═══════════════════════════════════════════════════════════════

  PRIMARY PALETTE (forest → leaf)
    Forest-900  #14301F   — headings on light surfaces
    Forest-700  #1E5631   — primary brand, dark buttons
    Forest-600  #2E7D4F   — primary actions, active nav
    Leaf-500    #4CAF6D   — hover states, accents
    Leaf-100    #E3F3E6   — tint backgrounds, active nav bg
    Leaf-50     #F4FAF3   — page background

  NEUTRALS
    White       #FFFFFF   — card / surface
    Bark-600    #5B6B5E   — secondary text
    Sage-200    #DCE8D8   — borders
    Sage-100    #EEF5EC   — input backgrounds

  STATUS COLORS
    Success  #2F8F5B / bg #E7F6ED   — อนุมัติแล้ว / ออกใบเสร็จแล้ว
    Warning  #D98324 / bg #FDF1E2   — รอตรวจสอบ
    Error    #C4483A / bg #FBEAE8   — ตีกลับ / ไม่อนุมัติ
    Info     #2E7D9A / bg #E6F2F6   — ข้อมูล/แจ้งเตือนทั่วไป

  TYPOGRAPHY
    Font family : 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', sans-serif
    Base size   : 15px
    Line height : 1.6
*/

:root {
    /* ─── PRIMARY / BRAND ────────────────────────────────── */
    --kendo-color-primary:        #2E7D4F;
    --kendo-color-primary-hover:  #256B42;
    --kendo-color-primary-active: #1E5631;
    --kendo-color-on-primary:     #ffffff;

    /* ─── BASE (buttons, inputs default state) ───────────── */
    --kendo-color-base:           #EEF5EC;
    --kendo-color-base-hover:     #E3F3E6;
    --kendo-color-base-active:    #CFE8D3;
    --kendo-color-on-base:        #14301F;

    /* ─── SURFACE (popup backgrounds, dropdowns) ─────────── */
    --kendo-color-surface:        #ffffff;
    --kendo-color-surface-alt:    #F4FAF3;
    --kendo-color-on-surface:     #14301F;

    /* ─── APP BACKGROUND ─────────────────────────────────── */
    --kendo-color-app-surface:    #F0F7EE;

    /* ─── BORDER ─────────────────────────────────────────── */
    --kendo-color-border:         #DCE8D8;
    --kendo-color-border-alt:     #C7DDC0;

    /* ─── TEXT ───────────────────────────────────────────── */
    --kendo-color-subtle:         #5B6B5E;

    /* ─── STATUS: SUCCESS ────────────────────────────────── */
    --kendo-color-success:        #2F8F5B;
    --kendo-color-success-hover:  #277A4C;
    --kendo-color-success-active: #206640;
    --kendo-color-on-success:     #ffffff;

    /* ─── STATUS: WARNING ────────────────────────────────── */
    --kendo-color-warning:        #D98324;
    --kendo-color-warning-hover:  #BE7015;
    --kendo-color-warning-active: #A15F12;
    --kendo-color-on-warning:     #ffffff;

    /* ─── STATUS: ERROR ──────────────────────────────────── */
    --kendo-color-error:          #C4483A;
    --kendo-color-error-hover:    #AC3B2F;
    --kendo-color-error-active:   #8F3026;
    --kendo-color-on-error:       #ffffff;

    /* ─── STATUS: INFO ───────────────────────────────────── */
    --kendo-color-info:           #2E7D9A;
    --kendo-color-info-hover:     #266A83;
    --kendo-color-info-active:    #1F586D;
    --kendo-color-on-info:        #ffffff;

    /* ─── TYPOGRAPHY ─────────────────────────────────────── */
    --kendo-font-family:          'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', sans-serif;
    --kendo-font-family-monospace: 'Fira Code', 'Consolas', monospace;
    --kendo-font-size:            15px;
    --kendo-font-size-sm:         13px;
    --kendo-font-size-lg:         17px;
    --kendo-line-height:          1.6;
    --kendo-font-weight:          400;
    --kendo-font-weight-bold:     700;

    /* ─── SHAPE ──────────────────────────────────────────── */
    --kendo-border-radius-sm:     6px;
    --kendo-border-radius-md:     10px;
    --kendo-border-radius-lg:     16px;
    --kendo-border-radius-full:   9999px;

    /* ─── SPACING ────────────────────────────────────────── */
    --kendo-spacing-1:            4px;
    --kendo-spacing-2:            8px;
    --kendo-spacing-3:            12px;
    --kendo-spacing-4:            16px;

    /* ─── SHADOW ─────────────────────────────────────────── */
    --kendo-box-shadow-depth-1: 0 2px 12px rgba(30, 86, 49, 0.08);
    --kendo-box-shadow-depth-2: 0 8px 28px rgba(30, 86, 49, 0.14);
}

/* ── AppBar ──────────────────────────────────────────────────── */
.k-appbar {
    font-family: var(--kendo-font-family);
    box-shadow: 0 1px 6px rgba(20, 48, 31, 0.08);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.k-button-solid-primary {
    background-image: linear-gradient(135deg, #2E7D4F 0%, #256B42 100%);
    border-color: #256B42;
}
.k-button-solid-primary:hover,
.k-button-solid-primary.k-hover {
    background-image: linear-gradient(135deg, #37945D 0%, #2E7D4F 100%);
    border-color: #2E7D4F;
}

/* ── Stepper / Wizard ────────────────────────────────────────── */
.k-stepper .k-step-current .k-step-indicator {
    background-color: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    box-shadow: 0 0 0 4px rgba(46, 125, 79, 0.16);
}
.k-stepper .k-step-done .k-step-indicator {
    background-color: var(--kendo-color-success);
    border-color: var(--kendo-color-success);
}
.k-stepper .k-step-current .k-step-label {
    color: var(--kendo-color-primary);
    font-weight: 600;
}
.k-stepper .k-progressbar {
    background-color: var(--kendo-color-border);
}
.k-stepper .k-progressbar .k-selected {
    background-color: var(--kendo-color-success);
}

/* ── Input / Picker focus ──────────────────────────────────────── */
.k-input:hover,
.k-picker:hover,
.k-textarea:hover {
    border-color: var(--kendo-color-primary-hover);
}
.k-input:focus-within,
.k-picker:focus-within,
.k-textarea:focus-within {
    border-color: var(--kendo-color-primary);
    box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.15);
}

/* ── RadioGroup / CheckBox ─────────────────────────────────────── */
.k-radio:checked,
.k-checkbox:checked {
    border-color: var(--kendo-color-primary);
    background-color: var(--kendo-color-primary);
}

/* ── Upload ──────────────────────────────────────────────────── */
.k-upload .k-dropzone {
    background-color: var(--kendo-color-surface-alt);
    border: 2px dashed var(--kendo-color-border-alt);
}
.k-upload .k-dropzone:hover,
.k-upload .k-dropzone.k-hover {
    border-color: var(--kendo-color-primary);
    background-color: var(--kendo-color-base-hover);
}
.k-upload .k-upload-status-total {
    color: var(--kendo-color-success);
}

/* ── Grid header ─────────────────────────────────────────────── */
.k-grid .k-grid-header,
.k-grid .k-header {
    background-color: #F4FAF3;
    color: #5B6B5E;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ── Dialog / Window ─────────────────────────────────────────── */
.k-dialog .k-dialog-content {
    padding: 20px 24px;
}
.k-dialog-wrapper .k-dialog,
.k-dialog-wrapper .k-window-titlebar {
    border-radius: 14px;
}
.k-dialog-wrapper .k-dialog-titlebar {
    border-radius: 14px 14px 0 0;
}
.k-dialog-wrapper .k-dialog-buttongroup {
    border-radius: 0 0 14px 14px;
}

/* ── Notification ────────────────────────────────────────────── */
.k-notification-success {
    background-color: #E7F6ED;
    color: #1E5631;
    border-color: #BFE3CC;
}
.k-notification-error {
    background-color: #FBEAE8;
    color: #7A2E24;
    border-color: #F0C3BD;
}

/* ── Badge status colors (used by application status chips) ──── */
.k-badge.k-badge-solid-success { background-color: var(--kendo-color-success); }
.k-badge.k-badge-solid-warning { background-color: var(--kendo-color-warning); }
.k-badge.k-badge-solid-error   { background-color: var(--kendo-color-error); }