/*
 * AuditTrack canonical design tokens (v18)
 *
 * แหล่งกำหนดสีและค่าพื้นฐานเพียงจุดเดียวของระบบ
 * - --audit-normal-* : โหมดปกติ
 * - --audit-eye-*    : โหมดถนอมสายตา
 * - --audit-theme-*  : token ที่ component ต้องเรียกใช้จริง
 *
 * Component ใหม่ไม่ควรอ้างค่าสี hex โดยตรง ยกเว้นสีเชิงความหมายเฉพาะ
 * เช่น success / warning / danger หรือ gradient ของ Avatar
 */
:root {
    --audit-font-family: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    --audit-font-family-document: 'THSarabunNew_Web', 'TH Sarabun New', 'Sarabun', Tahoma, sans-serif;

    /* ===== Thai-safe typography metrics =====
     * Sarabun contains marks above and below the Thai baseline. Text-bearing
     * controls must reserve enough vertical room, especially when a parent uses
     * overflow:hidden for ellipsis or rounded corners.
     */
    --audit-line-height-body: 1.65;
    --audit-line-height-ui: 1.55;
    --audit-line-height-label: 1.55;
    --audit-line-height-single: 1.55;
    --audit-line-height-button: 1.5;
    --audit-line-height-textarea: 1.68;
    --audit-thai-safe-pad-y: .07em;

    /* ===== Canonical typography scale =====
     * Screen UI components must consume semantic aliases below. Do not set
     * page-local font-size or text color for equivalent components.
     */
    --audit-font-size-xs: .78rem;
    --audit-font-size-sm: .84rem;
    --audit-font-size-md: .94rem;
    --audit-font-size-lg: 1.05rem;
    --audit-font-size-xl: 1.24rem;
    --audit-font-size-summary-value: 1.72rem;

    --audit-font-weight-regular: 500;
    --audit-font-weight-medium: 600;
    --audit-font-weight-bold: 800;
    --audit-font-weight-heavy: 900;

    --audit-type-page-title-size: var(--audit-font-size-xl);
    --audit-type-page-title-weight: var(--audit-font-weight-heavy);
    --audit-type-section-title-size: 1.16rem;
    --audit-type-section-title-weight: var(--audit-font-weight-heavy);
    --audit-type-label-size: var(--audit-font-size-sm);
    --audit-type-label-weight: var(--audit-font-weight-bold);
    --audit-type-control-size: var(--audit-font-size-md);
    --audit-type-control-weight: var(--audit-font-weight-regular);
    --audit-type-button-size: var(--audit-font-size-md);
    --audit-type-button-weight: var(--audit-font-weight-bold);
    --audit-type-table-head-size: .88rem;
    --audit-type-table-head-weight: var(--audit-font-weight-heavy);
    --audit-type-table-cell-size: .92rem;
    --audit-type-table-cell-weight: var(--audit-font-weight-regular);
    --audit-type-summary-title-size: .88rem;
    --audit-type-summary-title-weight: var(--audit-font-weight-bold);
    --audit-type-summary-value-size: var(--audit-font-size-summary-value);
    --audit-type-summary-value-weight: var(--audit-font-weight-bold);
    --audit-type-summary-desc-size: var(--audit-font-size-sm);
    --audit-type-summary-desc-weight: var(--audit-font-weight-medium);

    /* ===== Canonical spacing scale =====
     * New layouts consume semantic aliases below. Avoid page-local pixel gaps.
     */
    --audit-space-0: 0;
    --audit-space-1: .25rem;
    --audit-space-2: .5rem;
    --audit-space-3: .75rem;
    --audit-space-4: 1rem;
    --audit-space-5: 1.25rem;
    --audit-space-6: 1.5rem;
    --audit-space-7: 2rem;
    --audit-space-8: 2.5rem;

    /* Semantic spacing aliases */
    --audit-layout-page-gap: var(--audit-space-6);
    --audit-layout-section-gap: var(--audit-space-5);
    --audit-layout-card-gap: var(--audit-space-4);
    --audit-layout-field-gap-x: var(--audit-space-4);
    --audit-layout-field-gap-y: var(--audit-space-3);
    --audit-layout-inline-gap: .55rem;
    --audit-layout-card-pad-x: var(--audit-space-5);
    --audit-layout-card-pad-y: var(--audit-space-4);
    --audit-layout-inner-pad: var(--audit-space-4);
    --audit-layout-label-gap: .34rem;
    --audit-layout-filter-action-min-width: 104px;
    --audit-layout-summary-min-height: 112px;
    --audit-layout-summary-icon-size: 56px;
    --audit-layout-table-header-height: 68px;
    --audit-layout-table-cell-pad-y: .78rem;
    --audit-layout-table-cell-pad-x: .68rem;
    --audit-layout-empty-state-min-height: 150px;
    --audit-layout-empty-state-pad: var(--audit-space-5);
    --audit-search-icon-width: 42px;
    --audit-control-label-height: 1.35rem;
    --audit-summary-accent-width: 4px;
    --audit-border-width: 1px;
    --audit-type-empty-title-size: 1rem;
    --audit-type-empty-desc-size: .86rem;

    /* ===== Brand ===== */
    --audit-brand-pink: #e87b98;
    --audit-brand-pink-soft: #f8e7ec;
    --audit-brand-primary: #b84668;
    --audit-brand-primary-hover: #9f3658;
    --audit-brand-primary-shadow: rgba(184, 70, 104, .24);
    --audit-brand-primary-shadow-hover: rgba(159, 54, 88, .30);

    /* ===== Normal mode palette ===== */
    --audit-normal-page-bg: #f4f6f9;
    --audit-normal-surface: #ffffff;
    --audit-normal-surface-soft: #f8fafc;
    --audit-normal-surface-muted: #f1f5f9;
    --audit-normal-surface-strong: #eef2f6;
    --audit-normal-text: #2f3742;
    --audit-normal-text-muted: #667085;
    --audit-normal-text-subtle: #8a94a3;
    --audit-normal-border: #d8dee6;
    --audit-normal-border-soft: #e8edf3;
    --audit-normal-border-strong: #c9d2dc;
    --audit-normal-control-bg: #ffffff;
    --audit-normal-control-disabled-bg: #eef1f4;
    --audit-normal-table-head-bg: #f6f8fb;
    --audit-normal-table-hover-bg: #fbfcfe;
    --audit-normal-sidebar-bg: #2c3e50;
    --audit-normal-sidebar-active-bg: #e67898;
    --audit-normal-sidebar-text: #eaf0f5;

    /* ===== Eye-care mode palette ===== */
    --audit-eye-page-bg: #d9cfbd;
    --audit-eye-surface: #eadfcc;
    --audit-eye-surface-soft: #d8c9ad;
    --audit-eye-surface-muted: #dfcfb8;
    --audit-eye-surface-strong: #d1bea0;
    --audit-eye-text: #3f382f;
    --audit-eye-text-muted: #665d50;
    --audit-eye-text-subtle: #817666;
    --audit-eye-border: #9a7f58;
    --audit-eye-border-soft: #b59f78;
    --audit-eye-border-strong: #8f7148;
    --audit-eye-control-bg: #eadfcc;
    --audit-eye-control-disabled-bg: #d8c9ad;
    --audit-eye-table-head-bg: #d8c9ad;
    --audit-eye-table-hover-bg: #e3d6bf;
    --audit-eye-sidebar-bg: #1f2b34;
    --audit-eye-sidebar-active-bg: #8d3144;
    --audit-eye-sidebar-text: #f5eee5;
    --audit-eye-primary: #8d3144;
    --audit-eye-primary-hover: #742537;

    /* ===== Active semantic palette: normal by default ===== */
    --audit-theme-mode: normal;
    --audit-theme-page-bg: var(--audit-normal-page-bg);
    --audit-theme-surface: var(--audit-normal-surface);
    --audit-theme-surface-soft: var(--audit-normal-surface-soft);
    --audit-theme-surface-muted: var(--audit-normal-surface-muted);
    --audit-theme-surface-strong: var(--audit-normal-surface-strong);
    --audit-theme-text: var(--audit-normal-text);
    --audit-theme-text-muted: var(--audit-normal-text-muted);
    --audit-theme-text-subtle: var(--audit-normal-text-subtle);
    --audit-theme-border: var(--audit-normal-border);
    --audit-theme-border-soft: var(--audit-normal-border-soft);
    --audit-theme-border-strong: var(--audit-normal-border-strong);
    --audit-theme-control-bg: var(--audit-normal-control-bg);
    --audit-theme-control-disabled-bg: var(--audit-normal-control-disabled-bg);
    --audit-theme-table-head-bg: var(--audit-normal-table-head-bg);
    --audit-theme-table-hover-bg: var(--audit-normal-table-hover-bg);
    --audit-theme-sidebar-bg: var(--audit-normal-sidebar-bg);
    --audit-theme-sidebar-active-bg: var(--audit-normal-sidebar-active-bg);
    --audit-theme-sidebar-text: var(--audit-normal-sidebar-text);
    --audit-theme-primary: var(--audit-brand-primary);
    --audit-theme-primary-hover: var(--audit-brand-primary-hover);
    --audit-theme-primary-shadow: var(--audit-brand-primary-shadow);
    --audit-theme-primary-shadow-hover: var(--audit-brand-primary-shadow-hover);

    /* ===== Backward-compatible semantic aliases ===== */
    --audit-bg: var(--audit-theme-page-bg);
    --audit-surface: var(--audit-theme-surface);
    --audit-surface-soft: var(--audit-theme-surface-soft);
    --audit-surface-muted: var(--audit-theme-surface-muted);
    --audit-text: var(--audit-theme-text);
    --audit-text-muted: var(--audit-theme-text-muted);
    --audit-text-subtle: var(--audit-theme-text-subtle);
    --audit-border: var(--audit-theme-border);
    --audit-border-soft: var(--audit-theme-border-soft);
    --audit-primary: var(--audit-theme-primary);
    --audit-primary-hover: var(--audit-theme-primary-hover);
    --audit-eye-muted: var(--audit-eye-text-muted);

    /* ===== Semantic status colors ===== */
    --audit-danger: #b02a37;
    --audit-danger-hover: #92202b;
    --audit-success: #146c43;
    --audit-warning: #997404;
    --audit-info: #084298;

    /* ===== Calendar palettes ===== */
    --audit-normal-calendar-bg: #ffffff;
    --audit-normal-calendar-header-bg: #f8fafc;
    --audit-normal-calendar-border: #d8dee6;
    --audit-normal-calendar-hover-bg: #f4e2e9;
    --audit-normal-calendar-hover-border: #d49aaa;
    --audit-normal-calendar-selected: #b84668;
    --audit-normal-calendar-selected-hover: #9f3658;
    --audit-normal-calendar-muted: #9a8d7b;

    --audit-eye-calendar-bg: #eadfcc;
    --audit-eye-calendar-header-bg: #d8c9ad;
    --audit-eye-calendar-border: #9a7f58;
    --audit-eye-calendar-hover-bg: #dfcfb8;
    --audit-eye-calendar-hover-border: #b59f78;
    --audit-eye-calendar-selected: #8d3144;
    --audit-eye-calendar-selected-hover: #742537;
    --audit-eye-calendar-muted: #9a8d7b;

    --audit-theme-calendar-bg: var(--audit-normal-calendar-bg);
    --audit-theme-calendar-header-bg: var(--audit-normal-calendar-header-bg);
    --audit-theme-calendar-border: var(--audit-normal-calendar-border);
    --audit-theme-calendar-hover-bg: var(--audit-normal-calendar-hover-bg);
    --audit-theme-calendar-hover-border: var(--audit-normal-calendar-hover-border);
    --audit-theme-calendar-selected: var(--audit-normal-calendar-selected);
    --audit-theme-calendar-selected-hover: var(--audit-normal-calendar-selected-hover);
    --audit-theme-calendar-muted: var(--audit-normal-calendar-muted);

    /* Backward-compatible calendar aliases */
    --audit-calendar-bg: var(--audit-theme-calendar-bg);
    --audit-calendar-header-bg: var(--audit-theme-calendar-header-bg);
    --audit-calendar-border: var(--audit-theme-calendar-border);
    --audit-calendar-hover-bg: var(--audit-theme-calendar-hover-bg);
    --audit-calendar-hover-border: var(--audit-theme-calendar-hover-border);
    --audit-calendar-selected: var(--audit-theme-calendar-selected);
    --audit-calendar-selected-hover: var(--audit-theme-calendar-selected-hover);

    /* ===== Canonical geometry =====
     * Boxes, inner panels and controls use separate semantic radii. Components
     * must consume these names instead of hard-coding corner values.
     */
    --audit-radius-control: 10px;
    --audit-radius-inner: 12px;
    --audit-radius-box: 16px;
    --audit-radius-modal: 18px;
    --audit-radius-pill: 999px;
    --audit-radius-circle: 50%;

    /* Backward-compatible geometry aliases */
    --audit-radius-sm: var(--audit-radius-control);
    --audit-radius-md: var(--audit-radius-inner);
    --audit-radius: var(--audit-radius-box);
    --audit-radius-lg: var(--audit-radius-modal);

    /* ===== Canonical control-row metrics =====
     * Inputs, dropdowns, smart-search shells and inline action buttons in the
     * same row MUST use --audit-control-row-height. General buttons may stay
     * slightly shorter when they are not aligned with form controls.
     */
    --audit-control-row-height: 46px;
    --audit-control-label-height: 22px;
    --audit-control-height: var(--audit-control-row-height);
    --audit-button-height: 42px;
    --audit-filter-control-height: var(--audit-control-row-height);
    --audit-filter-action-height: var(--audit-control-row-height);
    --audit-inline-action-height: var(--audit-control-row-height);
    --audit-search-control-height: var(--audit-control-row-height);
    --audit-control-safe-padding-y: .44rem;
    --audit-control-safe-padding-x: .85rem;
    --audit-icon-button-size: 36px;
    --audit-modal-footer-height: 68px;
    --audit-modal-header-height: 62px;
    --audit-avatar-ring-width: 2px;
    --audit-avatar-size-header: 54px;
    --audit-avatar-size-mobile: 46px;
    --audit-avatar-size-list: 50px;
    --audit-avatar-size-preview: 58px;

    /* ===== Canonical motion system (V78) =====
     * UI animations must consume these semantic tokens instead of page-local
     * durations. Keep transitions limited to composited or paint-only
     * properties; avoid wildcard transitions because they can animate layout metrics.
     */
    --audit-motion-duration-none: 0s;
    --audit-motion-duration-instant: 1ms;
    --audit-motion-duration-fast: 120ms;
    --audit-motion-duration-normal: 180ms;
    --audit-motion-duration-slow: 240ms;
    --audit-motion-duration-page: 320ms;
    --audit-motion-duration-pulse: 2000ms;
    --audit-motion-duration-pulse-slow: 2200ms;
    --audit-motion-duration-alert: 1150ms;
    --audit-motion-duration-alert-danger: 950ms;
    --audit-motion-duration-spinner: 720ms;
    --audit-motion-duration-spinner-slow: 900ms;
    --audit-motion-autofill-delay: 9999s;

    --audit-motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --audit-motion-ease-enter: cubic-bezier(0, 0, .2, 1);
    --audit-motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
    --audit-motion-ease-linear: linear;

    --audit-motion-distance-xs: 2px;
    --audit-motion-distance-sm: 4px;
    --audit-motion-distance-md: 8px;

    --audit-motion-control-duration: var(--audit-motion-duration-fast);
    --audit-motion-dialog-duration: var(--audit-motion-duration-normal);
    --audit-motion-modal-duration: var(--audit-motion-duration-normal);
    --audit-motion-sidebar-duration: var(--audit-motion-duration-slow);
    --audit-motion-layout-duration: var(--audit-motion-duration-slow);

    /* ===== Effects ===== */
    --audit-shadow-sm: 0 .18rem .55rem rgba(31, 41, 55, .06);
    --audit-shadow-card: 0 .35rem 1.15rem rgba(31, 41, 55, .06);
    --audit-shadow-modal: 0 .9rem 2.2rem rgba(31, 41, 55, .14);
    --audit-focus-ring: 0 0 0 .18rem rgba(184, 70, 104, .16);
    --audit-avatar-gradient: conic-gradient(from 90deg, #ff4d6d, #ffb703, #8ac926, #00b4d8, #4361ee, #b5179e, #ff4d6d);
}

/* Eye-care mode changes semantic tokens only. Components consume the same names. */
body.eye-care-mode,
body[data-audit-theme="eye-care"] {
    --audit-theme-mode: eye-care;
    --audit-theme-page-bg: var(--audit-eye-page-bg);
    --audit-theme-surface: var(--audit-eye-surface);
    --audit-theme-surface-soft: var(--audit-eye-surface-soft);
    --audit-theme-surface-muted: var(--audit-eye-surface-muted);
    --audit-theme-surface-strong: var(--audit-eye-surface-strong);
    --audit-theme-text: var(--audit-eye-text);
    --audit-theme-text-muted: var(--audit-eye-text-muted);
    --audit-theme-text-subtle: var(--audit-eye-text-subtle);
    --audit-theme-border: var(--audit-eye-border);
    --audit-theme-border-soft: var(--audit-eye-border-soft);
    --audit-theme-border-strong: var(--audit-eye-border-strong);
    --audit-theme-control-bg: var(--audit-eye-control-bg);
    --audit-theme-control-disabled-bg: var(--audit-eye-control-disabled-bg);
    --audit-theme-table-head-bg: var(--audit-eye-table-head-bg);
    --audit-theme-table-hover-bg: var(--audit-eye-table-hover-bg);
    --audit-theme-sidebar-bg: var(--audit-eye-sidebar-bg);
    --audit-theme-sidebar-active-bg: var(--audit-eye-sidebar-active-bg);
    --audit-theme-sidebar-text: var(--audit-eye-sidebar-text);
    --audit-theme-primary: var(--audit-eye-primary);
    --audit-theme-primary-hover: var(--audit-eye-primary-hover);
    --audit-theme-primary-shadow: rgba(141, 49, 68, .24);
    --audit-theme-primary-shadow-hover: rgba(116, 37, 55, .30);

    --audit-theme-calendar-bg: var(--audit-eye-calendar-bg);
    --audit-theme-calendar-header-bg: var(--audit-eye-calendar-header-bg);
    --audit-theme-calendar-border: var(--audit-eye-calendar-border);
    --audit-theme-calendar-hover-bg: var(--audit-eye-calendar-hover-bg);
    --audit-theme-calendar-hover-border: var(--audit-eye-calendar-hover-border);
    --audit-theme-calendar-selected: var(--audit-eye-calendar-selected);
    --audit-theme-calendar-selected-hover: var(--audit-eye-calendar-selected-hover);
    --audit-theme-calendar-muted: var(--audit-eye-calendar-muted);
}

/* Explicit normal state clears inherited eye-care values after switching modes.
 * :not(.eye-care-mode) is required for compatibility with older scripts that
 * may toggle the legacy class a few milliseconds before data-audit-theme.
 * Without this guard the later normal selector can temporarily overwrite the
 * eye-care tokens and leave primary controls in the wrong color.
 */
body[data-audit-theme="normal"]:not(.eye-care-mode) {
    --audit-theme-mode: normal;
    --audit-theme-page-bg: var(--audit-normal-page-bg);
    --audit-theme-surface: var(--audit-normal-surface);
    --audit-theme-surface-soft: var(--audit-normal-surface-soft);
    --audit-theme-surface-muted: var(--audit-normal-surface-muted);
    --audit-theme-surface-strong: var(--audit-normal-surface-strong);
    --audit-theme-text: var(--audit-normal-text);
    --audit-theme-text-muted: var(--audit-normal-text-muted);
    --audit-theme-text-subtle: var(--audit-normal-text-subtle);
    --audit-theme-border: var(--audit-normal-border);
    --audit-theme-border-soft: var(--audit-normal-border-soft);
    --audit-theme-border-strong: var(--audit-normal-border-strong);
    --audit-theme-control-bg: var(--audit-normal-control-bg);
    --audit-theme-control-disabled-bg: var(--audit-normal-control-disabled-bg);
    --audit-theme-table-head-bg: var(--audit-normal-table-head-bg);
    --audit-theme-table-hover-bg: var(--audit-normal-table-hover-bg);
    --audit-theme-sidebar-bg: var(--audit-normal-sidebar-bg);
    --audit-theme-sidebar-active-bg: var(--audit-normal-sidebar-active-bg);
    --audit-theme-sidebar-text: var(--audit-normal-sidebar-text);
    --audit-theme-primary: var(--audit-brand-primary);
    --audit-theme-primary-hover: var(--audit-brand-primary-hover);
    --audit-theme-primary-shadow: var(--audit-brand-primary-shadow);
    --audit-theme-primary-shadow-hover: var(--audit-brand-primary-shadow-hover);

    --audit-theme-calendar-bg: var(--audit-normal-calendar-bg);
    --audit-theme-calendar-header-bg: var(--audit-normal-calendar-header-bg);
    --audit-theme-calendar-border: var(--audit-normal-calendar-border);
    --audit-theme-calendar-hover-bg: var(--audit-normal-calendar-hover-bg);
    --audit-theme-calendar-hover-border: var(--audit-normal-calendar-hover-border);
    --audit-theme-calendar-selected: var(--audit-normal-calendar-selected);
    --audit-theme-calendar-selected-hover: var(--audit-normal-calendar-selected-hover);
    --audit-theme-calendar-muted: var(--audit-normal-calendar-muted);
}


/* ===== v12: body-scoped compatibility aliases =====
 * Legacy page styles still reference historical names. Defining these aliases
 * on body (not only :root) makes them follow the active theme after a live
 * normal <-> eye-care switch. A :root alias would keep the initial palette.
 */
body[data-audit-theme="normal"]:not(.eye-care-mode) {
    --audit-primary-dark-pink: var(--audit-brand-primary);
    --audit-primary-dark-pink-hover: var(--audit-brand-primary-hover);
    --audit-primary-dark-pink-shadow: var(--audit-brand-primary-shadow);
    --audit-primary-dark-pink-hover-shadow: var(--audit-brand-primary-shadow-hover);
    --audit-filter-search-bg: var(--audit-brand-primary);
    --audit-filter-search-hover-bg: var(--audit-brand-primary-hover);
    --audit-filter-search-shadow: var(--audit-brand-primary-shadow);
    --audit-filter-search-hover-shadow: var(--audit-brand-primary-shadow-hover);
}
body.eye-care-mode,
body[data-audit-theme="eye-care"] {
    --audit-primary-dark-pink: var(--audit-eye-primary);
    --audit-primary-dark-pink-hover: var(--audit-eye-primary-hover);
    --audit-primary-dark-pink-shadow: rgba(141, 49, 68, .24);
    --audit-primary-dark-pink-hover-shadow: rgba(116, 37, 55, .30);
    --audit-filter-search-bg: var(--audit-eye-primary);
    --audit-filter-search-hover-bg: var(--audit-eye-primary-hover);
    --audit-filter-search-shadow: rgba(141, 49, 68, .24);
    --audit-filter-search-hover-shadow: rgba(116, 37, 55, .30);
}