/* ========================================================================
   TreeManager Theme Engine
   ใช้ semantic tokens เป็นศูนย์กลาง ห้ามกำหนดสีองค์ประกอบหลักกระจายหลายไฟล์
   ======================================================================== */
:root {
    color-scheme: light;
    --theme-font: 'Sarabun', sans-serif;
    --main-font: var(--theme-font);
    --header-height: 80px;

    --z-background: 0;
    --z-content: 10;
    --z-header: 1000;
    --z-dropdown: 1200;
    --z-overlay: 900;
    --z-drawer: 1500;
    --z-tooltip: 1700;
    --z-modal: 2000;
    --z-loading: 2500;

    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --control-height: 46px;

    --page-bg: #eef3f7;
    --page-bg-alt: #e3edf3;
    --surface-1: #ffffff;
    --surface-2: #f5f8fa;
    --surface-3: #eaf1f5;
    --surface-elevated: #ffffff;
    --surface-overlay: rgba(8, 23, 33, .58);

    --text-primary: #17232b;
    --text-secondary: #52636d;
    --text-disabled: #84939b;
    --text-on-primary: #ffffff;
    --text-on-accent: #10232c;
    --icon-color: #24536b;

    --primary: #145c7d;
    --primary-hover: #0d4864;
    --primary-soft: #dceef6;
    --secondary: #2d7a57;
    --secondary-hover: #205e42;
    --accent: #e4a72f;
    --accent-soft: #fff2cf;

    --header-bg: rgba(255, 255, 255, .94);
    --header-text: #17394b;
    --header-muted: #526c79;
    --header-icon: #145c7d;
    --header-border: #81b4c9;
    --footer-bg: #123f54;
    --footer-text: #ffffff;
    --footer-muted: #d7e9f1;
    --footer-border: #e4a72f;
    --drawer-bg: #ffffff;
    --drawer-text: #183b4c;
    --drawer-muted: #5e7380;
    --drawer-border: #d5e4eb;
    --menu-hover-bg: #e8f4f8;
    --menu-hover-text: #0e4f6c;
    --dropdown-bg: #ffffff;
    --dropdown-text: #183b4c;

    --card-bg: #ffffff;
    --card-text: #17232b;
    --card-muted: #5c6d76;
    --card-border: #ccdce4;
    --table-bg: #ffffff;
    --table-head-bg: #145c7d;
    --table-head-text: #ffffff;
    --table-row-hover: #edf7fa;
    --input-bg: #ffffff;
    --input-text: #17232b;
    --input-placeholder: #76868f;
    --input-border: #aebfc8;
    --input-focus: #1680aa;
    --button-bg: #145c7d;
    --button-text: #ffffff;
    --button-hover-bg: #0d4864;
    --button-secondary-bg: #2d7a57;
    --button-secondary-text: #ffffff;

    --success: #177245;
    --success-soft: #daf3e6;
    --warning: #9b5a00;
    --warning-soft: #fff0cf;
    --danger: #b3261e;
    --danger-soft: #fde2df;
    --info: #0b6f9f;
    --info-soft: #dceffc;
    --focus-ring: rgba(20, 92, 125, .28);
    --border-color-theme: #ccdce4;

    --shadow-sm-theme: 0 2px 8px rgba(20, 47, 61, .08);
    --shadow-md-theme: 0 10px 28px rgba(20, 47, 61, .13);
    --shadow-lg-theme: 0 22px 60px rgba(20, 47, 61, .2);

    --theme-pattern-opacity: .55;
    --effect-opacity: .45;
    --effect-scale: 1;
    --theme-gradient: linear-gradient(135deg, #145c7d, #2d7a57);
    --theme-pattern: radial-gradient(circle at 18% 15%, rgba(20,92,125,.11) 0 2px, transparent 3px),
                     linear-gradient(135deg, transparent 0 48%, rgba(45,122,87,.055) 49% 51%, transparent 52% 100%);
    --theme-pattern-size: 38px 38px, 72px 72px;

    /* aliases รองรับโค้ดเดิม */
    --primary-color: var(--primary);
    --primary-light: var(--secondary);
    --wood-color: var(--accent);
    --wood-dark: var(--text-primary);
    --gold-primary: var(--accent);
    --gold-light: var(--accent-soft);
    --gold-dark: var(--warning);
    --bg-color: var(--page-bg);
    --bg-light: var(--page-bg);
    --bg-surface: var(--surface-3);
    --bg-card: var(--card-bg);
    --text-main: var(--text-primary);
    --text-muted: var(--text-secondary);
    --white: var(--surface-1);
    --border-color: var(--border-color-theme);
    --forest-deep: var(--primary);
    --forest-light: var(--secondary);
    --text-white: var(--text-on-primary);
    --shadow-sm: var(--shadow-sm-theme);
    --shadow-md: var(--shadow-md-theme);
    --shadow-lg: var(--shadow-lg-theme);
    --transition: all .25s ease;
}

html[data-color-mode="dark"] { color-scheme: dark; }

/* ============================= 1. CLASSIC ============================== */
html[data-theme="classic"] {
    --page-bg:#eef3f7;--page-bg-alt:#dfeaf0;--surface-1:#fff;--surface-2:#f5f8fa;--surface-3:#e8f1f5;--surface-elevated:#fff;
    --text-primary:#17232b;--text-secondary:#52636d;--text-disabled:#84939b;--text-on-primary:#fff;--text-on-accent:#10232c;--icon-color:#24536b;
    --primary:#145c7d;--primary-hover:#0d4864;--primary-soft:#dceef6;--secondary:#2d7a57;--secondary-hover:#205e42;--accent:#e4a72f;--accent-soft:#fff2cf;
    --header-bg:rgba(255,255,255,.94);--header-text:#17394b;--header-muted:#526c79;--header-icon:#145c7d;--header-border:#81b4c9;
    --footer-bg:#123f54;--footer-text:#fff;--footer-muted:#d7e9f1;--footer-border:#e4a72f;
    --drawer-bg:#fff;--drawer-text:#183b4c;--drawer-muted:#5e7380;--drawer-border:#d5e4eb;--menu-hover-bg:#e8f4f8;--menu-hover-text:#0e4f6c;--dropdown-bg:#fff;--dropdown-text:#183b4c;
    --card-bg:#fff;--card-text:#17232b;--card-muted:#5c6d76;--card-border:#ccdce4;--table-bg:#fff;--table-head-bg:#145c7d;--table-head-text:#fff;--table-row-hover:#edf7fa;
    --input-bg:#fff;--input-text:#17232b;--input-placeholder:#76868f;--input-border:#aebfc8;--input-focus:#1680aa;--button-bg:#145c7d;--button-text:#fff;--button-hover-bg:#0d4864;--button-secondary-bg:#2d7a57;--button-secondary-text:#fff;
    --border-color-theme:#ccdce4;--focus-ring:rgba(20,92,125,.28);--radius-md:12px;--theme-gradient:linear-gradient(135deg,#145c7d,#2d7a57);
    --theme-pattern:radial-gradient(circle at 18% 15%,rgba(20,92,125,.11) 0 2px,transparent 3px),linear-gradient(135deg,transparent 0 48%,rgba(45,122,87,.055) 49% 51%,transparent 52% 100%);--theme-pattern-size:38px 38px,72px 72px;
}
html[data-theme="classic"][data-color-mode="dark"] {
    --page-bg:#0f1b22;--page-bg-alt:#142630;--surface-1:#172932;--surface-2:#1d333e;--surface-3:#223b47;--surface-elevated:#203843;
    --text-primary:#f1f7fa;--text-secondary:#bed0d9;--text-disabled:#7e98a5;--text-on-primary:#fff;--text-on-accent:#101c22;--icon-color:#83c8e2;
    --primary:#4ba6ca;--primary-hover:#78c4df;--primary-soft:#173d4d;--secondary:#60b78b;--secondary-hover:#83cfaa;--accent:#f2c45d;--accent-soft:#4a3b19;
    --header-bg:rgba(15,31,40,.96);--header-text:#f2f8fb;--header-muted:#b8ced8;--header-icon:#79c7e4;--header-border:#386f85;
    --footer-bg:#09141a;--footer-text:#fff;--footer-muted:#bad0da;--footer-border:#f2c45d;
    --drawer-bg:#132630;--drawer-text:#f3f8fa;--drawer-muted:#b9ccd5;--drawer-border:#31505f;--menu-hover-bg:#214251;--menu-hover-text:#fff;--dropdown-bg:#18303b;--dropdown-text:#f3f8fa;
    --card-bg:#172932;--card-text:#f1f7fa;--card-muted:#bed0d9;--card-border:#31505f;--table-bg:#172932;--table-head-bg:#235f78;--table-head-text:#fff;--table-row-hover:#203c49;
    --input-bg:#10232c;--input-text:#f1f7fa;--input-placeholder:#96abb5;--input-border:#426371;--input-focus:#67c1e2;--button-bg:#2b7795;--button-text:#fff;--button-hover-bg:#3d91b2;--button-secondary-bg:#347a59;--button-secondary-text:#fff;
    --border-color-theme:#31505f;--focus-ring:rgba(103,193,226,.3);--theme-pattern:radial-gradient(circle at 18% 15%,rgba(75,166,202,.12) 0 2px,transparent 3px),linear-gradient(135deg,transparent 0 48%,rgba(96,183,139,.07) 49% 51%,transparent 52% 100%);
}

/* ============================== 2. LUXURY =============================== */
html[data-theme="luxury"] {
    --page-bg:#f4efe4;--page-bg-alt:#e9dfca;--surface-1:#fffaf0;--surface-2:#f8f0df;--surface-3:#eee2ca;--surface-elevated:#fffdf6;
    --text-primary:#241b2d;--text-secondary:#66566c;--text-disabled:#958a98;--text-on-primary:#fff7df;--text-on-accent:#22190a;--icon-color:#694679;
    --primary:#261d3b;--primary-hover:#3a2857;--primary-soft:#e9e0f1;--secondary:#543568;--secondary-hover:#70478a;--accent:#b88a22;--accent-soft:#f8eac2;
    --header-bg:linear-gradient(120deg,#171324,#2a1d3c);--header-text:#fff6d8;--header-muted:#e4d5b0;--header-icon:#e6bd56;--header-border:#c89c37;
    --footer-bg:linear-gradient(120deg,#171324,#24172f);--footer-text:#fff7df;--footer-muted:#d8c9aa;--footer-border:#c89c37;
    --drawer-bg:#21192d;--drawer-text:#fff7df;--drawer-muted:#ddcfb6;--drawer-border:#5d4865;--menu-hover-bg:#3c294a;--menu-hover-text:#ffe7a1;--dropdown-bg:#241a31;--dropdown-text:#fff7df;
    --card-bg:#fffaf0;--card-text:#241b2d;--card-muted:#66566c;--card-border:#c8aa65;--table-bg:#fffaf0;--table-head-bg:#2b203e;--table-head-text:#fff1c7;--table-row-hover:#f6edd8;
    --input-bg:#fffdf7;--input-text:#241b2d;--input-placeholder:#86798b;--input-border:#bca66f;--input-focus:#a87716;--button-bg:#2b203e;--button-text:#fff0bc;--button-hover-bg:#443057;--button-secondary-bg:#a8781b;--button-secondary-text:#211708;
    --border-color-theme:#c8aa65;--focus-ring:rgba(184,138,34,.3);--radius-md:10px;--shadow-md-theme:0 12px 32px rgba(30,20,43,.2);--shadow-lg-theme:0 26px 70px rgba(30,20,43,.28);--theme-gradient:linear-gradient(135deg,#251b37,#6b416f 62%,#b88a22);
    --theme-pattern:linear-gradient(30deg,transparent 45%,rgba(184,138,34,.14) 46% 48%,transparent 49%),linear-gradient(-30deg,transparent 45%,rgba(184,138,34,.1) 46% 48%,transparent 49%);--theme-pattern-size:68px 68px;
}
html[data-theme="luxury"][data-color-mode="dark"] {
    --page-bg:#0d0b13;--page-bg-alt:#17101e;--surface-1:#1d1725;--surface-2:#261d30;--surface-3:#30243b;--surface-elevated:#2a2034;
    --text-primary:#fff8e8;--text-secondary:#d7c9d8;--text-disabled:#8e8192;--text-on-primary:#fff7d9;--text-on-accent:#1d1405;--icon-color:#e7bd55;
    --primary:#d3a942;--primary-hover:#edca70;--primary-soft:#3d321b;--secondary:#a273aa;--secondary-hover:#bf8cc7;--accent:#e4b84e;--accent-soft:#453616;
    --header-bg:linear-gradient(120deg,#09070d,#24172f);--header-text:#fff6d8;--header-muted:#d8c9aa;--header-icon:#f0c763;--header-border:#b98a2e;
    --footer-bg:linear-gradient(120deg,#09070d,#1a1022);--footer-text:#fff7df;--footer-muted:#cfbea0;--footer-border:#b98a2e;
    --drawer-bg:#18111f;--drawer-text:#fff7df;--drawer-muted:#cfbfd1;--drawer-border:#53415c;--menu-hover-bg:#35243f;--menu-hover-text:#ffe7a1;--dropdown-bg:#201628;--dropdown-text:#fff7df;
    --card-bg:#1d1725;--card-text:#fff8e8;--card-muted:#d7c9d8;--card-border:#796131;--table-bg:#1d1725;--table-head-bg:#382748;--table-head-text:#fff1c7;--table-row-hover:#2b2135;
    --input-bg:#15101b;--input-text:#fff8e8;--input-placeholder:#a99aab;--input-border:#665173;--input-focus:#e4b84e;--button-bg:#6f5521;--button-text:#fff8df;--button-hover-bg:#8d6c2b;--button-secondary-bg:#754b7b;--button-secondary-text:#fff;
    --border-color-theme:#796131;--focus-ring:rgba(228,184,78,.32);
}

/* ============================== 3. MINIMAL ============================== */
html[data-theme="minimal"] {
    --page-bg:#f7f7f8;--page-bg-alt:#efeff1;--surface-1:#fff;--surface-2:#fafafa;--surface-3:#f0f0f2;--surface-elevated:#fff;
    --text-primary:#202124;--text-secondary:#64666b;--text-disabled:#999ba0;--text-on-primary:#fff;--text-on-accent:#202124;--icon-color:#4d5156;
    --primary:#3f5663;--primary-hover:#293d48;--primary-soft:#e8edf0;--secondary:#71848e;--secondary-hover:#586c76;--accent:#a47c5b;--accent-soft:#f1e8e0;
    --header-bg:rgba(255,255,255,.97);--header-text:#202124;--header-muted:#64666b;--header-icon:#3f5663;--header-border:#dedfe2;
    --footer-bg:#f1f1f2;--footer-text:#292a2d;--footer-muted:#67696e;--footer-border:#d4d5d8;
    --drawer-bg:#fff;--drawer-text:#202124;--drawer-muted:#64666b;--drawer-border:#e0e1e3;--menu-hover-bg:#f0f1f2;--menu-hover-text:#202124;--dropdown-bg:#fff;--dropdown-text:#202124;
    --card-bg:#fff;--card-text:#202124;--card-muted:#64666b;--card-border:#dedfe2;--table-bg:#fff;--table-head-bg:#eceef0;--table-head-text:#25272a;--table-row-hover:#f6f6f7;
    --input-bg:#fff;--input-text:#202124;--input-placeholder:#808287;--input-border:#c8c9cc;--input-focus:#526c7a;--button-bg:#3f5663;--button-text:#fff;--button-hover-bg:#293d48;--button-secondary-bg:#eceef0;--button-secondary-text:#25272a;
    --border-color-theme:#dedfe2;--focus-ring:rgba(63,86,99,.22);--radius-md:7px;--shadow-sm-theme:0 1px 3px rgba(0,0,0,.05);--shadow-md-theme:0 4px 14px rgba(0,0,0,.07);--shadow-lg-theme:0 14px 36px rgba(0,0,0,.11);--theme-gradient:linear-gradient(135deg,#3f5663,#71848e);--theme-pattern:linear-gradient(rgba(32,33,36,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(32,33,36,.025) 1px,transparent 1px);--theme-pattern-size:48px 48px;
}
html[data-theme="minimal"][data-color-mode="dark"] {
    --page-bg:#161719;--page-bg-alt:#1e1f22;--surface-1:#222326;--surface-2:#292a2e;--surface-3:#303136;--surface-elevated:#292a2e;
    --text-primary:#f2f2f3;--text-secondary:#c4c5c8;--text-disabled:#85868a;--text-on-primary:#fff;--text-on-accent:#161719;--icon-color:#c7c9cd;
    --primary:#aebbc2;--primary-hover:#d1d8dc;--primary-soft:#323b40;--secondary:#8fa0a8;--secondary-hover:#b0bdc3;--accent:#c9a98d;--accent-soft:#453a31;
    --header-bg:rgba(29,30,33,.97);--header-text:#f2f2f3;--header-muted:#bfc0c4;--header-icon:#d3d6d9;--header-border:#3c3d41;
    --footer-bg:#111214;--footer-text:#f0f0f1;--footer-muted:#b5b6b9;--footer-border:#3c3d41;
    --drawer-bg:#202124;--drawer-text:#f2f2f3;--drawer-muted:#bfc0c4;--drawer-border:#404145;--menu-hover-bg:#303136;--menu-hover-text:#fff;--dropdown-bg:#25262a;--dropdown-text:#f2f2f3;
    --card-bg:#222326;--card-text:#f2f2f3;--card-muted:#c4c5c8;--card-border:#404145;--table-bg:#222326;--table-head-bg:#303136;--table-head-text:#f2f2f3;--table-row-hover:#2c2d31;
    --input-bg:#18191b;--input-text:#f2f2f3;--input-placeholder:#999a9e;--input-border:#505156;--input-focus:#b7c5cc;--button-bg:#566b76;--button-text:#fff;--button-hover-bg:#6d838e;--button-secondary-bg:#34363a;--button-secondary-text:#f2f2f3;
    --border-color-theme:#404145;--focus-ring:rgba(183,197,204,.25);
}

/* ============================== 4. HITECH =============================== */
html[data-theme="hitech"] {
    --page-bg:#07111d;--page-bg-alt:#0b1c2a;--surface-1:#0e2030;--surface-2:#10283a;--surface-3:#143247;--surface-elevated:#132d40;
    --text-primary:#eafaff;--text-secondary:#a9ceda;--text-disabled:#688996;--text-on-primary:#021017;--text-on-accent:#081016;--icon-color:#31ddff;
    --primary:#28d7fa;--primary-hover:#73e8ff;--primary-soft:#103c4a;--secondary:#9c65ff;--secondary-hover:#bd96ff;--accent:#4cffb1;--accent-soft:#124b38;
    --header-bg:rgba(5,15,26,.94);--header-text:#eafaff;--header-muted:#a9ceda;--header-icon:#31ddff;--header-border:#25c9ee;
    --footer-bg:#040b13;--footer-text:#eafaff;--footer-muted:#9cc2ce;--footer-border:#9c65ff;
    --drawer-bg:#081927;--drawer-text:#eafaff;--drawer-muted:#a9ceda;--drawer-border:#245064;--menu-hover-bg:#10394d;--menu-hover-text:#72edff;--dropdown-bg:#0b2131;--dropdown-text:#eafaff;
    --card-bg:rgba(13,34,50,.94);--card-text:#eafaff;--card-muted:#a9ceda;--card-border:#23607a;--table-bg:#0d2232;--table-head-bg:#122f45;--table-head-text:#69eaff;--table-row-hover:#123347;
    --input-bg:#071925;--input-text:#eafaff;--input-placeholder:#7da2af;--input-border:#28647b;--input-focus:#31ddff;--button-bg:#21c8e8;--button-text:#031117;--button-hover-bg:#65e6ff;--button-secondary-bg:#7e4cdd;--button-secondary-text:#fff;
    --border-color-theme:#23607a;--focus-ring:rgba(49,221,255,.33);--radius-md:6px;--shadow-sm-theme:0 0 10px rgba(40,215,250,.08);--shadow-md-theme:0 0 24px rgba(40,215,250,.14);--shadow-lg-theme:0 0 46px rgba(156,101,255,.2);--theme-gradient:linear-gradient(135deg,#22d3ee,#8b5cf6 58%,#34d399);--theme-pattern:linear-gradient(rgba(49,221,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(49,221,255,.09) 1px,transparent 1px),radial-gradient(circle,rgba(156,101,255,.22) 0 1px,transparent 2px);--theme-pattern-size:42px 42px,42px 42px,84px 84px;
}
html[data-theme="hitech"][data-color-mode="light"] { color-scheme:dark; }
html[data-theme="hitech"][data-color-mode="dark"] {
    --page-bg:#02070d;--page-bg-alt:#06111b;--surface-1:#081722;--surface-2:#0b1e2b;--surface-3:#0e2838;--surface-elevated:#0e2534;
    --card-bg:rgba(7,25,37,.96);--table-bg:#071925;--header-bg:rgba(2,8,14,.97);--footer-bg:#010408;--drawer-bg:#06131e;--dropdown-bg:#081a27;
    --text-primary:#f0fcff;--text-secondary:#b4d8e3;--card-text:#f0fcff;--card-muted:#b4d8e3;--input-text:#f0fcff;
}

/* ============================== 5. NATURE =============================== */
html[data-theme="nature"] {
    --page-bg:#eef3df;--page-bg-alt:#dfe8ca;--surface-1:#fffdf2;--surface-2:#f5f4df;--surface-3:#e7ebce;--surface-elevated:#fffef6;
    --text-primary:#24301f;--text-secondary:#5b6951;--text-disabled:#89927f;--text-on-primary:#fff;--text-on-accent:#263013;--icon-color:#3e6b38;
    --primary:#356438;--primary-hover:#274f2b;--primary-soft:#dcead7;--secondary:#7b5a35;--secondary-hover:#604427;--accent:#c89c35;--accent-soft:#f5e8b9;
    --header-bg:rgba(246,248,229,.96);--header-text:#294b2a;--header-muted:#61705a;--header-icon:#3e743f;--header-border:#8eae70;
    --footer-bg:#294a2c;--footer-text:#fffbea;--footer-muted:#dce8cf;--footer-border:#c89c35;
    --drawer-bg:#f7f8e9;--drawer-text:#294b2a;--drawer-muted:#61705a;--drawer-border:#cdd9b8;--menu-hover-bg:#e3edd4;--menu-hover-text:#28532b;--dropdown-bg:#fffdf2;--dropdown-text:#294b2a;
    --card-bg:#fffdf2;--card-text:#24301f;--card-muted:#5b6951;--card-border:#bccca8;--table-bg:#fffdf2;--table-head-bg:#356438;--table-head-text:#fffbea;--table-row-hover:#edf2df;
    --input-bg:#fffef8;--input-text:#24301f;--input-placeholder:#7e8875;--input-border:#adbd9b;--input-focus:#4c7f46;--button-bg:#356438;--button-text:#fff;--button-hover-bg:#274f2b;--button-secondary-bg:#7b5a35;--button-secondary-text:#fff;
    --border-color-theme:#bccca8;--focus-ring:rgba(53,100,56,.27);--radius-md:16px;--theme-gradient:linear-gradient(135deg,#356438,#76944f 62%,#c89c35);--theme-pattern:radial-gradient(ellipse at 25% 20%,rgba(72,117,60,.12) 0 12%,transparent 13%),radial-gradient(ellipse at 75% 65%,rgba(123,90,53,.08) 0 10%,transparent 11%);--theme-pattern-size:120px 90px,150px 110px;
}
html[data-theme="nature"][data-color-mode="dark"] {
    --page-bg:#111a11;--page-bg-alt:#182318;--surface-1:#1d2a1c;--surface-2:#243322;--surface-3:#2c3d29;--surface-elevated:#263724;
    --text-primary:#f1f5e8;--text-secondary:#c5d0b9;--text-disabled:#87947c;--text-on-primary:#fff;--text-on-accent:#171b0b;--icon-color:#8ecb7d;
    --primary:#6eaa62;--primary-hover:#91c984;--primary-soft:#294329;--secondary:#b38a5a;--secondary-hover:#cfaa7d;--accent:#e1bb5c;--accent-soft:#493c1c;
    --header-bg:rgba(19,31,18,.96);--header-text:#f2f5e8;--header-muted:#c2cfb7;--header-icon:#98d487;--header-border:#54724a;
    --footer-bg:#091008;--footer-text:#fffbea;--footer-muted:#c8d5bc;--footer-border:#d4aa45;
    --drawer-bg:#192518;--drawer-text:#f2f5e8;--drawer-muted:#c2cfb7;--drawer-border:#465c40;--menu-hover-bg:#2b4229;--menu-hover-text:#fff;--dropdown-bg:#1d2c1c;--dropdown-text:#f2f5e8;
    --card-bg:#1d2a1c;--card-text:#f1f5e8;--card-muted:#c5d0b9;--card-border:#50644a;--table-bg:#1d2a1c;--table-head-bg:#31552f;--table-head-text:#fffbea;--table-row-hover:#293c27;
    --input-bg:#131e13;--input-text:#f1f5e8;--input-placeholder:#9aa88e;--input-border:#52674c;--input-focus:#8ecb7d;--button-bg:#3f743b;--button-text:#fff;--button-hover-bg:#528b4d;--button-secondary-bg:#805f3c;--button-secondary-text:#fff;
    --border-color-theme:#50644a;--focus-ring:rgba(142,203,125,.3);
}

/* ============================== 6. FLORAL =============================== */
html[data-theme="floral"] {
    --page-bg:#fff2f6;--page-bg-alt:#f7e6ef;--surface-1:#fffafd;--surface-2:#fff4f8;--surface-3:#f4e4ed;--surface-elevated:#fffafd;
    --text-primary:#3e2937;--text-secondary:#725b69;--text-disabled:#a08e98;--text-on-primary:#fff;--text-on-accent:#382533;--icon-color:#a13f74;
    --primary:#a33d74;--primary-hover:#812b59;--primary-soft:#f4ddea;--secondary:#7050a0;--secondary-hover:#573c80;--accent:#e48c70;--accent-soft:#fee5dc;
    --header-bg:rgba(255,248,252,.95);--header-text:#713052;--header-muted:#806475;--header-icon:#b2437f;--header-border:#e5a8c5;
    --footer-bg:#733052;--footer-text:#fff7fb;--footer-muted:#f0d8e5;--footer-border:#f0a18a;
    --drawer-bg:#fff8fc;--drawer-text:#713052;--drawer-muted:#806475;--drawer-border:#edc5d8;--menu-hover-bg:#fae4ef;--menu-hover-text:#842e5f;--dropdown-bg:#fffafd;--dropdown-text:#713052;
    --card-bg:#fffafd;--card-text:#3e2937;--card-muted:#725b69;--card-border:#e7bfd3;--table-bg:#fffafd;--table-head-bg:#963767;--table-head-text:#fff;--table-row-hover:#fff0f6;
    --input-bg:#fffafd;--input-text:#3e2937;--input-placeholder:#967e8c;--input-border:#ddb3c8;--input-focus:#b54982;--button-bg:#a33d74;--button-text:#fff;--button-hover-bg:#812b59;--button-secondary-bg:#7050a0;--button-secondary-text:#fff;
    --border-color-theme:#e7bfd3;--focus-ring:rgba(163,61,116,.25);--radius-md:20px;--theme-gradient:linear-gradient(135deg,#d9679e,#8d61bb 58%,#f0a18a);--theme-pattern:radial-gradient(circle at 20% 20%,rgba(217,103,158,.12) 0 7px,transparent 8px),radial-gradient(circle at 70% 60%,rgba(112,80,160,.09) 0 9px,transparent 10px);--theme-pattern-size:88px 88px,120px 120px;
}
html[data-theme="floral"][data-color-mode="dark"] {
    --page-bg:#1b1118;--page-bg-alt:#271622;--surface-1:#30202b;--surface-2:#392532;--surface-3:#452d3c;--surface-elevated:#3b2734;
    --text-primary:#fff4fa;--text-secondary:#e4c7d6;--text-disabled:#a08494;--text-on-primary:#fff;--text-on-accent:#24141e;--icon-color:#f090bd;
    --primary:#e06ca4;--primary-hover:#f291bf;--primary-soft:#503047;--secondary:#aa83d1;--secondary-hover:#c6a3e7;--accent:#f0a18a;--accent-soft:#513127;
    --header-bg:rgba(31,16,27,.96);--header-text:#fff4fa;--header-muted:#dfc2d1;--header-icon:#f090bd;--header-border:#76455f;
    --footer-bg:#10080e;--footer-text:#fff7fb;--footer-muted:#d9bccc;--footer-border:#e38d77;
    --drawer-bg:#281923;--drawer-text:#fff4fa;--drawer-muted:#dfc2d1;--drawer-border:#644052;--menu-hover-bg:#4a2a3d;--menu-hover-text:#fff;--dropdown-bg:#30202b;--dropdown-text:#fff4fa;
    --card-bg:#30202b;--card-text:#fff4fa;--card-muted:#e4c7d6;--card-border:#6b4358;--table-bg:#30202b;--table-head-bg:#71304f;--table-head-text:#fff;--table-row-hover:#432c3a;
    --input-bg:#21151d;--input-text:#fff4fa;--input-placeholder:#b397a6;--input-border:#70485c;--input-focus:#f090bd;--button-bg:#9a3f6b;--button-text:#fff;--button-hover-bg:#b85583;--button-secondary-bg:#73539a;--button-secondary-text:#fff;
    --border-color-theme:#6b4358;--focus-ring:rgba(240,144,189,.3);
}

/* ============================== 7. CUSTOM =============================== */
html[data-theme="custom"] {
    --page-bg:#eef3f7;--page-bg-alt:#e4ebf0;--surface-1:#fff;--surface-2:#f6f8fa;--surface-3:#e9eef2;--surface-elevated:#fff;
    --text-primary:#18232b;--text-secondary:#586974;--text-disabled:#89969e;--text-on-primary:#fff;--text-on-accent:#18232b;--icon-color:#5b4ab0;
    --primary:#5b4ab0;--primary-hover:#47398d;--primary-soft:#e8e4fa;--secondary:#0c8b84;--secondary-hover:#086d68;--accent:#d28a1d;--accent-soft:#fff0d2;
    --header-bg:#5b4ab0;--header-text:#fff;--header-muted:#eeeaff;--header-icon:#fff;--header-border:#8778d5;
    --footer-bg:#322763;--footer-text:#fff;--footer-muted:#ddd7ff;--footer-border:#d28a1d;
    --drawer-bg:#fff;--drawer-text:#26203f;--drawer-muted:#645e75;--drawer-border:#ddd8ef;--menu-hover-bg:#eeeafd;--menu-hover-text:#47398d;--dropdown-bg:#fff;--dropdown-text:#26203f;
    --card-bg:#fff;--card-text:#18232b;--card-muted:#586974;--card-border:#d5d9df;--table-bg:#fff;--table-head-bg:#5b4ab0;--table-head-text:#fff;--table-row-hover:#f0edff;
    --input-bg:#fff;--input-text:#18232b;--input-placeholder:#7c8991;--input-border:#b9c2c8;--input-focus:#5b4ab0;--button-bg:#5b4ab0;--button-text:#fff;--button-hover-bg:#47398d;--button-secondary-bg:#0c8b84;--button-secondary-text:#fff;
    --border-color-theme:#d5d9df;--focus-ring:rgba(91,74,176,.27);--theme-gradient:linear-gradient(135deg,var(--primary),var(--secondary));--theme-pattern:radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--primary) 14%,transparent) 0 3px,transparent 4px),linear-gradient(135deg,transparent 0 48%,color-mix(in srgb,var(--secondary) 8%,transparent) 49% 51%,transparent 52%);--theme-pattern-size:54px 54px,86px 86px;
}
html[data-theme="custom"][data-color-mode="dark"] {
    --page-bg:#12131a;--page-bg-alt:#1b1c25;--surface-1:#23242e;--surface-2:#2b2c37;--surface-3:#343641;--surface-elevated:#2b2d38;
    --text-primary:#f5f5fa;--text-secondary:#c9cad4;--text-disabled:#8d8e98;--input-bg:#171820;--input-text:#f5f5fa;--input-placeholder:#9c9da8;
    --card-bg:#23242e;--card-text:#f5f5fa;--card-muted:#c9cad4;--table-bg:#23242e;--table-row-hover:#30323d;--drawer-bg:#1d1e27;--drawer-text:#f5f5fa;--drawer-muted:#c9cad4;--dropdown-bg:#242630;--dropdown-text:#f5f5fa;
    --border-color-theme:#454754;--card-border:#454754;--drawer-border:#454754;--input-border:#575966;
}

/* =============================== 8. OCEAN =============================== */
html[data-theme="ocean"] {
    --page-bg:#dff6fa;--page-bg-alt:#c5edf3;--surface-1:#f8feff;--surface-2:#eaf9fb;--surface-3:#d6f0f3;--surface-elevated:#fbffff;
    --text-primary:#123541;--text-secondary:#52727b;--text-disabled:#839aa0;--text-on-primary:#fff;--text-on-accent:#13323c;--icon-color:#027f9d;
    --primary:#087e9b;--primary-hover:#05647d;--primary-soft:#d4f1f6;--secondary:#119b8b;--secondary-hover:#0c7a6e;--accent:#d89b4a;--accent-soft:#fff0d9;
    --header-bg:linear-gradient(180deg,rgba(226,249,252,.97),rgba(196,237,244,.95));--header-text:#0f5064;--header-muted:#4e727d;--header-icon:#0786a5;--header-border:#4fb8ca;
    --footer-bg:linear-gradient(180deg,#0b687b,#074654);--footer-text:#f0feff;--footer-muted:#c7eef3;--footer-border:#d7aa66;
    --drawer-bg:#f2fdff;--drawer-text:#104e60;--drawer-muted:#55747d;--drawer-border:#b4e0e7;--menu-hover-bg:#d9f4f7;--menu-hover-text:#05647d;--dropdown-bg:#f8feff;--dropdown-text:#104e60;
    --card-bg:#f8feff;--card-text:#123541;--card-muted:#52727b;--card-border:#addce4;--table-bg:#f8feff;--table-head-bg:#087e9b;--table-head-text:#fff;--table-row-hover:#e5f8fa;
    --input-bg:#fbffff;--input-text:#123541;--input-placeholder:#759096;--input-border:#9bcdd6;--input-focus:#0794b3;--button-bg:#087e9b;--button-text:#fff;--button-hover-bg:#05647d;--button-secondary-bg:#119b8b;--button-secondary-text:#fff;
    --border-color-theme:#addce4;--focus-ring:rgba(8,126,155,.28);--radius-md:18px;--theme-gradient:linear-gradient(135deg,#0786a5,#14ad9b 63%,#e4b36d);--theme-pattern:radial-gradient(circle at 25% 25%,rgba(255,255,255,.62) 0 3px,transparent 4px),radial-gradient(circle at 70% 45%,rgba(7,134,165,.08) 0 13px,transparent 14px),linear-gradient(170deg,transparent 0 46%,rgba(255,255,255,.3) 47% 49%,transparent 50%);--theme-pattern-size:55px 55px,130px 100px,160px 80px;
}
html[data-theme="ocean"][data-color-mode="dark"] {
    --page-bg:#061c26;--page-bg-alt:#082a35;--surface-1:#0d3340;--surface-2:#103e4c;--surface-3:#154b59;--surface-elevated:#124452;
    --text-primary:#edfcff;--text-secondary:#b8dce3;--text-disabled:#789ba3;--text-on-primary:#fff;--text-on-accent:#10282e;--icon-color:#54d8ee;
    --primary:#32bad3;--primary-hover:#68d7e9;--primary-soft:#124a57;--secondary:#3bc6ad;--secondary-hover:#6ed9c5;--accent:#e6b76f;--accent-soft:#4a361d;
    --header-bg:linear-gradient(180deg,rgba(5,28,38,.97),rgba(8,49,61,.96));--header-text:#edfcff;--header-muted:#b8dce3;--header-icon:#62ddf0;--header-border:#237c90;
    --footer-bg:linear-gradient(180deg,#05232c,#031318);--footer-text:#effeff;--footer-muted:#b2d9e0;--footer-border:#bd8c4d;
    --drawer-bg:#092934;--drawer-text:#edfcff;--drawer-muted:#b8dce3;--drawer-border:#286173;--menu-hover-bg:#124655;--menu-hover-text:#fff;--dropdown-bg:#0c3441;--dropdown-text:#edfcff;
    --card-bg:#0d3340;--card-text:#edfcff;--card-muted:#b8dce3;--card-border:#2b6574;--table-bg:#0d3340;--table-head-bg:#12677b;--table-head-text:#fff;--table-row-hover:#144653;
    --input-bg:#071f29;--input-text:#edfcff;--input-placeholder:#8cadb5;--input-border:#367081;--input-focus:#54d8ee;--button-bg:#147f95;--button-text:#fff;--button-hover-bg:#1c9bb3;--button-secondary-bg:#168d7d;--button-secondary-text:#fff;
    --border-color-theme:#2b6574;--focus-ring:rgba(84,216,238,.3);
}

/* ========================= GLOBAL COMPONENT MAPPING ==================== */
html { background: var(--page-bg); scroll-behavior: smooth; }
body {
    background: transparent;
    color: var(--text-primary);
    font-family: var(--theme-font);
    min-height:100vh;
    isolation:isolate;
}
body, input, button, select, textarea, option { font-family:var(--theme-font); }
a { color:var(--primary); }
::selection { background:var(--primary); color:var(--text-on-primary); }

.master-header {
    height:var(--header-height);
    background:var(--header-bg);
    color:var(--header-text);
    border-bottom:2px solid var(--header-border);
    box-shadow:var(--shadow-sm-theme);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    z-index:var(--z-header);
}
.header-container { height:var(--header-height); gap:14px; }
.logo-area { color:var(--header-text); min-width:0; }
.logo-area { text-decoration:none; }
.logo-area h1 { color:var(--header-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logo-area img { max-height:44px; max-width:180px; object-fit:contain; }
.logo-icon,.master-header .material-symbols-outlined { color:var(--header-icon); }
.nav-links li a { color:var(--header-text); border-radius:var(--radius-sm); min-height:44px; }
.nav-links li a:hover,.nav-links li a:focus-visible { color:var(--menu-hover-text); background:var(--menu-hover-bg); }
.dropdown-content { background:var(--dropdown-bg); color:var(--dropdown-text); border:1px solid var(--drawer-border); border-top:3px solid var(--accent); border-radius:var(--radius-sm); box-shadow:var(--shadow-md-theme); z-index:var(--z-dropdown); }
.dropdown-content a { color:var(--dropdown-text); border-bottom:1px solid var(--drawer-border); }
.dropdown-content a:hover,.dropdown-content a:focus-visible { color:var(--menu-hover-text); background:var(--menu-hover-bg); }
.user-actions { display:flex; align-items:center; gap:8px; }
.header-user-link { display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--header-text);min-height:44px;padding:4px 7px;border-radius:var(--radius-pill); }
.header-user-link:hover { background:var(--menu-hover-bg);color:var(--menu-hover-text); }
.header-avatar { width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--header-border); }
.header-icon-btn,.mobile-menu-btn {
    width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--header-border);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--header-bg) 82%,transparent);color:var(--header-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);
}
.header-icon-btn:hover,.header-icon-btn:focus-visible,.mobile-menu-btn:hover,.mobile-menu-btn:focus-visible { background:var(--menu-hover-bg);color:var(--menu-hover-text);transform:translateY(-1px); }
.header-icon-btn .material-symbols-outlined,.mobile-menu-btn .material-symbols-outlined { color:currentColor; }

.master-content { position:relative; z-index:auto; padding:34px 0 48px; }
.master-footer { position:relative;z-index:auto;background:var(--footer-bg);color:var(--footer-text);border-top:3px solid var(--footer-border);box-shadow:0 -8px 24px rgba(0,0,0,.08); }
.master-footer h3,.master-footer p,.master-footer a { color:var(--footer-text); }
.master-footer .footer-muted { color:var(--footer-muted); }

.luxury-box,.card,.dashboard-card,.settings-card,.catalog-card,.stat-card {
    background:var(--card-bg);
    color:var(--card-text);
    border-color:var(--card-border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md-theme);
}
.luxury-box { border:1px solid var(--card-border); }
.luxury-box::before,.card::before { border-color:var(--accent); }

.btn { min-height:42px;border-radius:var(--radius-sm);color:var(--button-text); }
.btn-primary { background:var(--theme-gradient);color:var(--button-text);border:1px solid color-mix(in srgb,var(--button-bg) 78%,#000); }
.btn-primary:hover,.btn-primary:focus-visible { background:var(--button-hover-bg);color:var(--button-text);box-shadow:0 0 0 4px var(--focus-ring),var(--shadow-sm-theme); }
.btn-outline { background:transparent;color:var(--primary);border:1px solid var(--primary); }
.btn-outline:hover,.btn-outline:focus-visible { background:var(--primary);color:var(--text-on-primary); }
.btn-danger { background:var(--danger);color:#fff; }
.btn-danger:hover,.btn-danger:focus-visible { filter:brightness(.9);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 25%,transparent); }
.btn:disabled { opacity:.55;cursor:not-allowed;transform:none; }

.form-group label,label { color:var(--text-primary); }
.form-control,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea {
    background:var(--input-bg);
    color:var(--input-text);
    -webkit-text-fill-color:var(--input-text);
    caret-color:var(--input-text);
    opacity:1;
    border-color:var(--input-border);
    border-radius:var(--radius-sm);
    min-height:var(--control-height);
}
select option { background:var(--input-bg);color:var(--input-text);-webkit-text-fill-color:var(--input-text); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color:var(--input-text)!important;
    caret-color:var(--input-text)!important;
    -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset!important;
    box-shadow:0 0 0 1000px var(--input-bg) inset!important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder { color:var(--input-placeholder);opacity:1; }
.form-control:focus,input:focus,select:focus,textarea:focus { border-color:var(--input-focus);outline:none;box-shadow:0 0 0 4px var(--focus-ring); }
input[type="checkbox"],input[type="radio"] { accent-color:var(--primary);width:18px;height:18px; }
input[type="range"] { accent-color:var(--primary); }

.table-responsive { background:var(--table-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm-theme); }
.data-table { background:var(--table-bg);color:var(--text-primary); }
.data-table th { background:var(--table-head-bg);color:var(--table-head-text);border-color:var(--accent); }
.data-table th:hover { background:color-mix(in srgb,var(--table-head-bg) 84%,var(--accent)); }
.data-table td { color:var(--text-primary);border-color:var(--card-border); }
.data-table tbody tr:hover { background:var(--table-row-hover); }

.modal { z-index:var(--z-modal);background:var(--surface-overlay); }
.modal-content,.popup,.tooltip-box { background:var(--surface-elevated);color:var(--text-primary);border-color:var(--card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg-theme); }
.modal-content { border-top:4px solid var(--accent); }
.badge,.status-badge,.status-pill { border-radius:var(--radius-pill); }
.tooltip,[data-tooltip] { --tooltip-bg:var(--text-primary);--tooltip-text:var(--surface-1); }

.route-login .master-content { display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height) - 140px); }
.route-login .login-box,.route-login .luxury-box { background:color-mix(in srgb,var(--card-bg) 94%,transparent);backdrop-filter:blur(18px);border-color:var(--accent);box-shadow:var(--shadow-lg-theme); }
.route-login .master-footer { margin-top:0; }
.route-catalog .catalog-card,.route-home .luxury-box { transition:transform .25s ease,box-shadow .25s ease; }
.route-catalog .catalog-card:hover,.route-home .luxury-box:hover { transform:translateY(-3px);box-shadow:var(--shadow-lg-theme); }

/* Drawer มือถือ */
.mobile-drawer-overlay { position:fixed;inset:var(--header-height) 0 0 0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:var(--z-overlay); }
.mobile-drawer-overlay.is-open { opacity:1;visibility:visible; }
body.drawer-open { overflow:hidden;touch-action:none; }
.mobile-user-menu { display:none; }

@media (max-width:1024px) {
    :root { --header-height:72px; }
    .container { padding-left:16px;padding-right:16px; }
    .header-container { position:relative; }
    .logo-area h1 { max-width:min(56vw,420px);font-size:19px; }
    .main-nav .nav-links {
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        position:fixed;
        top:var(--header-height);
        left:0;
        width:min(88vw,380px);
        height:calc(100dvh - var(--header-height));
        max-height:none;
        padding:10px 12px 22px;
        background:var(--drawer-bg);
        color:var(--drawer-text);
        border-right:1px solid var(--drawer-border);
        box-shadow:var(--shadow-lg-theme);
        overflow-y:auto;
        overscroll-behavior:contain;
        transform:translateX(-105%);
        visibility:hidden;
        transition:transform .28s ease,visibility .28s ease;
        z-index:var(--z-drawer);
    }
    .main-nav .nav-links.mobile-active { transform:translateX(0);visibility:visible; }
    .main-nav .nav-links > li { width:100%;border-bottom:1px solid var(--drawer-border); }
    .main-nav .nav-links > li > a,.mobile-user-menu a { width:100%;min-height:50px;padding:12px 10px;color:var(--drawer-text);justify-content:flex-start;white-space:normal; }
    .main-nav .nav-links .dropbtn { justify-content:space-between; }
    .main-nav .dropdown-content { position:static;display:none;width:100%;min-width:0;margin:0 0 8px;padding:4px;background:var(--surface-2);border:1px solid var(--drawer-border);box-shadow:none;border-radius:var(--radius-sm); }
    .main-nav .dropdown.open .dropdown-content { display:block; }
    .main-nav .dropdown-content a { min-height:48px;padding:11px 12px 11px 34px;color:var(--drawer-text); }
    .main-nav .dropdown-content a:hover { padding-left:38px; }
    .mobile-user-menu { display:block;margin-top:10px;padding-top:8px;border-top:2px solid var(--drawer-border); }
    .mobile-user-actions { display:flex;flex-direction:column;gap:6px; }
    .mobile-user-profile,.mobile-user-logout { display:flex!important;align-items:center;gap:10px;text-decoration:none; }
    .mobile-user-avatar { width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--primary); }
    .mobile-user-logout { color:var(--danger)!important; }
    .user-actions { display:flex; }
    .user-actions .header-user-link,.user-actions .header-logout-btn,.user-actions .header-login-label { display:none; }
    .mobile-menu-btn { display:inline-flex; }
}
@media (max-width:560px) {
    :root { --header-height:66px; }
    .logo-area h1 { max-width:46vw;font-size:16px; }
    .logo-area img { max-width:110px;max-height:38px; }
    .header-icon-btn,.mobile-menu-btn { width:42px;height:42px;min-width:42px; }
    .master-content { padding:24px 0 36px; }
    .footer-container { flex-direction:column;align-items:flex-start;gap:8px; }
}


/* Sidebar / Popup / Badge / Tooltip / Toggle / Loading */
.sidebar,.app-sidebar {
    background:var(--drawer-bg);color:var(--drawer-text);border:1px solid var(--drawer-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md-theme);
}
.sidebar a,.app-sidebar a { color:var(--drawer-text); }
.sidebar a:hover,.app-sidebar a:hover { color:var(--menu-hover-text);background:var(--menu-hover-bg); }
.popup,.popover { background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--card-border);box-shadow:var(--shadow-lg-theme);border-radius:var(--radius-md); }
.badge,.status-badge { display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;background:var(--primary-soft);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);font-weight:700; }
.badge-success { background:var(--success-soft);color:var(--success); }
.badge-warning { background:var(--warning-soft);color:var(--warning); }
.badge-danger { background:var(--danger-soft);color:var(--danger); }
[data-tooltip] { position:relative; }
[data-tooltip]::after { content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,5px);max-width:240px;padding:7px 10px;background:var(--text-primary);color:var(--surface-1);border-radius:var(--radius-sm);font-size:12px;line-height:1.35;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;z-index:var(--z-tooltip);box-shadow:var(--shadow-md-theme);transition:opacity .18s ease,transform .18s ease; }
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after { opacity:1;visibility:visible;transform:translate(-50%,0); }
.toggle-switch { position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer; }
.toggle-switch input { position:absolute;opacity:0;width:1px;height:1px; }
.toggle-slider { position:relative;width:52px;height:30px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--input-border);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);transition:var(--transition); }
.toggle-slider::after { content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .22s ease; }
.toggle-switch input:checked + .toggle-slider { background:var(--primary); }
.toggle-switch input:checked + .toggle-slider::after { transform:translateX(22px); }
.toggle-switch input:focus-visible + .toggle-slider { box-shadow:0 0 0 4px var(--focus-ring); }
.theme-loading-overlay { position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--page-bg) 86%,transparent);backdrop-filter:blur(8px);color:var(--text-primary);z-index:var(--z-loading); }
.theme-spinner,.loading-spinner { width:48px;height:48px;border:4px solid var(--surface-3);border-top-color:var(--primary);border-right-color:var(--secondary);border-radius:50%;animation:themeSpin .8s linear infinite; }
.skeleton { position:relative;overflow:hidden;background:var(--surface-3);border-radius:var(--radius-sm);color:transparent!important; }
.skeleton::after { content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface-1) 60%,transparent),transparent);animation:skeletonMove 1.35s infinite; }
@keyframes themeSpin { to{transform:rotate(360deg)} }
@keyframes skeletonMove { to{transform:translateX(100%)} }
.dashboard-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px; }
.dashboard-card { padding:18px; }
.dashboard-card .material-symbols-outlined { color:var(--icon-color); }

/* Settings Theme Engine */
.theme-settings-shell { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:22px;align-items:start; }
.settings-panel-stack { display:grid;gap:22px; }
.settings-section { background:var(--card-bg);color:var(--card-text);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md-theme);padding:22px; }
.settings-section h3 { display:flex;align-items:center;gap:8px;color:var(--text-primary);margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--card-border); }
.theme-option-grid { display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px; }
.theme-option { position:relative;display:block;cursor:pointer; }
.theme-option input { position:absolute;opacity:0;pointer-events:none; }
.theme-option-body { min-height:116px;border:2px solid var(--card-border);border-radius:var(--radius-md);padding:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px;transition:var(--transition); }
.theme-option input:checked + .theme-option-body { border-color:var(--primary);box-shadow:0 0 0 4px var(--focus-ring);transform:translateY(-2px); }
.theme-option input:focus-visible + .theme-option-body { outline:3px solid var(--input-focus);outline-offset:3px; }
.theme-option-icon { font-size:30px;line-height:1; }
.theme-option-name { color:var(--text-primary);font-weight:700; }
.theme-option-desc { color:var(--text-secondary);font-size:12px;line-height:1.45; }
.mode-choice { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.mode-choice label { cursor:pointer; }
.mode-choice input { position:absolute;opacity:0; }
.mode-choice span { min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--surface-2); }
.mode-choice input:checked + span { background:var(--primary);color:var(--text-on-primary);border-color:var(--primary); }
.custom-color-grid { display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:12px; }
.color-field { display:grid;gap:6px; }
.color-field label { font-size:13px;color:var(--text-secondary); }
.color-field input[type="color"] { width:100%;height:46px;padding:4px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);cursor:pointer; }
.intensity-grid { display:grid;gap:15px; }
.intensity-row { display:grid;grid-template-columns:minmax(170px,1fr) minmax(180px,2fr) 58px;gap:12px;align-items:center; }
.intensity-value { text-align:center;font-weight:700;color:var(--primary);background:var(--primary-soft);padding:5px 7px;border-radius:var(--radius-pill); }
.font-preview-box { padding:18px;border:1px solid var(--card-border);border-radius:var(--radius-md);background:var(--surface-2); }
.font-preview-main { display:block;font-size:25px;line-height:1.5;color:var(--text-primary); }
.font-preview-sub { display:block;color:var(--text-secondary); }
.theme-live-preview { overflow:hidden;border:1px solid var(--card-border);border-radius:var(--radius-md);background:var(--page-bg);box-shadow:var(--shadow-md-theme); }
.theme-live-preview-header { padding:12px 14px;background:var(--header-bg);color:var(--header-text);border-bottom:2px solid var(--header-border);display:flex;align-items:center;justify-content:space-between; }
.theme-live-preview-body { padding:16px;background-image:var(--theme-pattern);background-size:var(--theme-pattern-size); }
.theme-live-preview-card { padding:14px;background:var(--card-bg);color:var(--card-text);border:1px solid var(--card-border);border-radius:var(--radius-md); }
.theme-live-preview-footer { padding:12px 14px;background:var(--footer-bg);color:var(--footer-text);border-top:2px solid var(--footer-border); }
.custom-theme-fields[hidden] { display:none; }
.danger-zone { border-top:4px solid var(--danger); }
.danger-note { padding:14px;border-radius:var(--radius-sm);background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent); }
@media(max-width:1100px){.theme-settings-shell{grid-template-columns:1fr}.theme-option-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.theme-option-grid{grid-template-columns:repeat(2,1fr)}.custom-color-grid{grid-template-columns:repeat(2,1fr)}.intensity-row{grid-template-columns:1fr 58px}.intensity-row label{grid-column:1/-1}.mode-choice{grid-template-columns:1fr}}
@media(max-width:420px){.theme-option-grid,.custom-color-grid{grid-template-columns:1fr}}

/* Scrollbar */
* { scrollbar-width:thin;scrollbar-color:var(--primary) var(--surface-3); }
*::-webkit-scrollbar { width:11px;height:11px; }
*::-webkit-scrollbar-track { background:var(--surface-3); }
*::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--primary) 78%,var(--surface-3));border:2px solid var(--surface-3);border-radius:var(--radius-pill); }
*::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* Keyboard / Accessibility */
:focus-visible { outline:3px solid var(--input-focus);outline-offset:3px; }
.skip-link { position:fixed;top:8px;left:8px;z-index:9999;transform:translateY(-160%);background:var(--text-primary);color:var(--surface-1);padding:10px 14px;border-radius:var(--radius-sm); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }

/* Print: ธีมห้ามกระทบเอกสารพิมพ์ */
@media print {
    @page { background:#fff; }
    html,body,body *:not(.material-symbols-outlined) { font-family:'Sarabun',sans-serif!important; }
    html,body { background:#fff!important;color:#000!important; }
    body::before,body::after,.theme-background-layer,.theme-effects,.mobile-drawer-overlay,.skip-link,.master-header,.master-footer,.main-nav,.user-actions,.mobile-menu-btn,.header-icon-btn,.no-print,button:not(.print-keep),.btn:not(.print-keep) { display:none!important; }
    *,*::before,*::after { animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important;filter:none!important; }
    .master-content { padding:0!important;margin:0!important;background:#fff!important; }
    .container { max-width:none!important;padding:0!important; }
    .luxury-box,.card,.modal-content,.table-responsive { background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:none!important; }
    .data-table th,.data-table td { background:#fff!important;color:#000!important;border-color:#000!important; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important; }
}

/* ========================================================================
   Responsive Header Layout Fix v3
   - Desktop: เมนูอยู่บรรทัดเดียว ไม่ตกลงใต้ Header
   - Compact PC/Tablet/Mobile: เปลี่ยนเป็น Drawer ก่อนพื้นที่จะไม่พอ
   ======================================================================== */
.master-header {
    overflow: visible;
}

.master-header .header-container {
    width: 100%;
    max-width: 1720px;
    padding-inline: clamp(14px, 2vw, 32px);
    flex-wrap: nowrap;
}

.master-header .logo-area,
.master-header .main-nav,
.master-header .user-actions,
.master-header .mobile-menu-btn {
    position: relative;
    z-index: 2;
}

/* ปุ่ม Hamburger แสดงเฉพาะช่วงที่ใช้ Drawer เท่านั้น */
.master-header .mobile-menu-btn {
    display: none;
}

.master-header .logo-area {
    flex: 1 1 240px;
    max-width: min(330px, 25vw);
    overflow: hidden;
}

.master-header .logo-area img {
    flex: 0 0 auto;
}

.master-header .logo-area h1 {
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
}

.master-header .main-nav {
    flex: 0 1 auto;
    min-width: 0;
}

.master-header .nav-links {
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(2px, .45vw, 9px);
}

.master-header .nav-links > li {
    flex: 0 0 auto;
}

.master-header .nav-links > li > a {
    padding-inline: clamp(8px, .65vw, 14px);
    font-size: clamp(14px, .92vw, 17px);
    line-height: 1.25;
    white-space: nowrap;
}

.master-header .nav-links > li > a > .material-symbols-outlined {
    flex: 0 0 auto;
}

.master-header .user-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}

.master-header .header-user-link {
    min-width: 0;
}

.master-header .header-user-name {
    display: block;
    max-width: clamp(72px, 7vw, 126px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

/* เว้นพื้นที่ปุ่มด้านขวา ไม่ให้ลวดลายประจำธีมซ้อนกับปุ่มควบคุม */
@media (min-width: 1451px) {
    html[data-theme] .master-header::before {
        right: clamp(360px, 23vw, 460px);
    }
}

@media (max-width: 1450px) {
    html[data-theme] .master-header::before {
        display: none;
    }
}

/* ลดขนาดอย่างนุ่มนวลบน Desktop ที่พื้นที่เริ่มจำกัด */
@media (min-width: 1181px) and (max-width: 1450px) {
    .master-header .header-container {
        gap: 8px;
        padding-inline: 14px;
    }
    .master-header .logo-area {
        flex-basis: 190px;
        max-width: 250px;
    }
    .master-header .logo-area h1 {
        font-size: 18px;
    }
    .master-header .nav-links {
        gap: 1px;
    }
    .master-header .nav-links > li > a {
        padding-inline: 8px;
        font-size: 14px;
    }
    .master-header .nav-links .material-symbols-outlined {
        font-size: 21px;
    }
    .master-header .user-actions {
        gap: 5px;
    }
    .master-header .header-icon-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }
    .master-header .header-user-link {
        gap: 6px;
        padding-inline: 5px;
    }
    .master-header .header-avatar {
        width: 34px;
        height: 34px;
    }
    .master-header .header-user-name {
        max-width: 78px;
    }
}

/* Drawer breakpoint สูงกว่าเดิม เพื่อไม่ให้ Header แตกบน Notebook/Tablet แนวนอน */
@media (max-width: 1180px) {
    :root {
        --header-height: 72px;
    }

    .master-header .header-container {
        max-width: none;
        padding-inline: 14px;
        gap: 8px;
    }

    .master-header .logo-area {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        overflow: hidden;
    }

    .master-header .logo-area h1 {
        flex: 1 1 auto;
        max-width: none;
        font-size: clamp(16px, 2.4vw, 20px);
    }

    .master-header .logo-area img {
        max-width: 52px;
        max-height: 46px;
    }

    .master-header .main-nav {
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        height: 0;
    }

    .master-header .main-nav .nav-links {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: min(88vw, 390px);
        height: calc(100dvh - var(--header-height));
        max-height: none;
        padding: 10px 12px max(22px, env(safe-area-inset-bottom));
        background: var(--drawer-bg);
        color: var(--drawer-text);
        border-right: 1px solid var(--drawer-border);
        box-shadow: var(--shadow-lg-theme);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        visibility: hidden;
        opacity: 0;
        transition: transform .28s ease, visibility .28s ease, opacity .2s ease;
        z-index: var(--z-drawer);
    }

    .master-header .main-nav .nav-links.mobile-active {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    .master-header .main-nav .nav-links > li {
        width: 100%;
        border-bottom: 1px solid var(--drawer-border);
    }

    .master-header .main-nav .nav-links > li > a,
    .master-header .mobile-user-menu a {
        width: 100%;
        min-height: 50px;
        padding: 12px 10px;
        color: var(--drawer-text);
        font-size: 16px;
        line-height: 1.4;
        justify-content: flex-start;
        white-space: normal;
    }

    .master-header .main-nav .nav-links .dropbtn {
        justify-content: flex-start;
    }

    .master-header .main-nav .nav-links .dropbtn > .material-symbols-outlined:last-child {
        margin-left: auto;
        transition: transform .2s ease;
    }

    .master-header .main-nav .dropdown.open .dropbtn > .material-symbols-outlined:last-child {
        transform: rotate(180deg);
    }

    .master-header .main-nav .dropdown:hover .dropdown-content {
        display: none;
    }

    .master-header .main-nav .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        margin: 0 0 8px;
        padding: 4px;
        background: var(--surface-2);
        border: 1px solid var(--drawer-border);
        box-shadow: none;
        border-radius: var(--radius-sm);
    }

    .master-header .main-nav .dropdown.open .dropdown-content {
        display: block;
    }

    .master-header .main-nav .dropdown-content a {
        min-height: 48px;
        padding: 11px 12px 11px 38px;
        color: var(--drawer-text);
        white-space: normal;
    }

    .master-header .mobile-user-menu {
        display: block;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 2px solid var(--drawer-border);
    }

    .master-header .user-actions {
        display: flex;
        flex: 0 0 auto;
        margin-left: auto;
        gap: 7px;
    }

    .master-header .user-actions .header-user-link,
    .master-header .user-actions .header-logout-btn,
    .master-header .user-actions .header-login-label {
        display: none;
    }

    .master-header .mobile-menu-btn {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .mobile-drawer-overlay {
        inset: var(--header-height) 0 0 0;
    }
}

@media (max-width: 560px) {
    :root {
        --header-height: 66px;
    }

    .master-header .header-container {
        padding-inline: 10px;
        gap: 6px;
    }

    .master-header .logo-area {
        gap: 8px;
    }

    .master-header .logo-area img {
        width: 38px;
        height: 38px;
        max-width: 38px;
        max-height: 38px;
        object-fit: contain;
    }

    .master-header .logo-area h1 {
        font-size: 16px;
    }

    .master-header .header-icon-btn,
    .master-header .mobile-menu-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .master-header .main-nav .nav-links {
        width: min(92vw, 370px);
    }
}

@media (max-width: 370px) {
    .master-header .logo-area h1 {
        font-size: 14px;
    }

    .master-header .logo-area img {
        width: 34px;
        height: 34px;
        max-width: 34px;
        max-height: 34px;
    }

    .master-header .header-icon-btn,
    .master-header .mobile-menu-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}


/* Mobile table scroll compatibility: keep wide admin tables reachable by touch */
.table-responsive.table-box-reset {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

/* Mobile form text visibility fix
   ป้องกัน WebKit/Chrome บางรุ่นแสดงค่าที่พิมพ์เป็นโปร่งใสหรือใช้สีเดิมจากระบบ */
@media (max-width: 1024px) {
    .form-control,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        color:var(--input-text);
        -webkit-text-fill-color:var(--input-text);
        caret-color:var(--input-text);
        opacity:1;
    }
}

@media print {
    .skip-link { display:none!important;visibility:hidden!important; }
}

.tree-extra-detail-list {
    display:grid;
    gap:10px;
    margin:8px 0 18px;
}
.tree-extra-detail-list p {
    margin:0;
    padding:10px 12px;
    background:var(--surface-2);
    color:var(--text-primary);
    border:1px solid var(--card-border);
    border-radius:var(--radius-sm);
    line-height:1.55;
    white-space:pre-line;
}


/* Global mobile table scroll safety v2: applies to every admin table */
.table-responsive,
.mobile-table-scroll {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
}

@media (max-width:768px) {
    .table-responsive > .data-table,
    .mobile-table-scroll > .data-table {
        width:max-content;
        min-width:max(820px, 100%);
    }
}

/* ========================================================================
   SchoolBell compatibility layer — mapped from the uploaded Theme Engine
   ======================================================================== */
:root {
    --page-background:var(--page-bg);
    --page-text:var(--text-primary);
    --page-muted:var(--text-secondary);
    --header-background:var(--header-bg);
    --header-hover:var(--menu-hover-bg);
    --footer-background:var(--footer-bg);
    --drawer-background:var(--drawer-bg);
    --drawer-hover:var(--menu-hover-bg);
    --card-background:var(--card-bg);
    --input-background:var(--input-bg);
    --button-background:var(--button-bg);
    --button-hover:var(--button-hover-bg);
    --theme-primary:var(--primary);
    --theme-secondary:var(--secondary);
    --success-color:var(--success);
    --warning-color:var(--warning);
    --danger-color:var(--danger);
    --info-color:var(--info);
    --focus-color:var(--input-focus);
    --shadow-color:rgba(20,47,61,.16);
    --radius:var(--radius-md);
    --card-shadow:var(--shadow-md-theme);
}
html[data-theme="sea"] { --theme-font:var(--theme-font); }
html[data-theme="sea"] body { visibility:visible; }
html,body,button,input,select,textarea,option,table { font-family:var(--theme-font)!important; }
body *:not(code):not(pre):not(kbd):not(samp) { font-family:inherit; }
code,pre,kbd,samp,.code { font-family:"Cascadia Code",Consolas,"Courier New",monospace!important; }