/* ==========================================================================
   TaskFlow — โทเคนของระบบออกแบบ (แนวทาง iOS)
   ==========================================================================

   สีทุกค่าเก็บเป็นชุดตัวเลข RGB คั่นด้วยช่องว่าง  เช่น  --blue-rgb: 0 122 255
   แล้วค่อยแปลงเป็นสีจริงด้วย  rgb(var(--blue-rgb))
   ข้อดีคือได้ความโปร่งใสระดับไหนก็ได้จากค่าชุดเดียว  rgb(var(--blue-rgb) / .15)
   โดยไม่ต้องประกาศสีจางแยกอีกชุด

   การสลับโหมดสว่าง/มืดจึงเปลี่ยนแค่ชุด *-rgb เท่านั้น
   โทเคนที่ประกอบขึ้นจากมัน (--bg, --label, --accent …) ประกาศไว้ครั้งเดียว
   ========================================================================== */


/* ── โหมดสว่าง (ค่าเริ่มต้น) ─────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* สีความหมายตามพาเลตต์ iOS */
    --blue-rgb:   0 122 255;
    --green-rgb:  52 199 89;
    --red-rgb:    255 59 48;
    --orange-rgb: 255 149 0;
    --yellow-rgb: 255 204 0;
    --indigo-rgb: 88 86 214;
    --teal-rgb:   48 176 199;
    --pink-rgb:   255 45 85;
    --purple-rgb: 175 82 222;
    --gray-rgb:   142 142 147;

    /* พื้นผิว */
    --bg-rgb:        242 242 247;   /* systemGroupedBackground */
    --surface-rgb:   255 255 255;   /* การ์ด แผง */
    --surface-2-rgb: 255 255 255;   /* ชั้นที่ยกสูงขึ้น เช่น sheet */
    --material-rgb:  249 249 249;   /* แถบโปร่งแสง */

    /* พื้นหลังท้องฟ้า — กลางวันเป็นฟ้าใสไล่สีลงมาหาขอบฟ้า
       --sky-veil คือความทึบของม่านสี --bg ที่คลุมทับอีกชั้น
       ยิ่งมากยิ่งจาง เอาไว้คุมไม่ให้พื้นหลังไปแย่งความสนใจจากงาน */
    --sky-top:   132 196 255;
    --sky-mid:   192 226 255;
    --sky-low:   238 247 255;
    --sky-glow:  255 244 206;   /* แดดอ่อน ๆ มุมบน */
    --sky-star:  255 255 255;
    --sky-veil:  .55;

    /* ตัวอักษรและเส้น */
    --label-rgb:     0 0 0;
    --label-alt-rgb: 60 60 67;      /* ฐานของข้อความรอง/จาง */
    --separator-rgb: 60 60 67;
    --separator-a:   .29;
    --fill-rgb:      120 120 128;   /* พื้นหลังคอนโทรล */
    --fill-a:        .12;

    /* เงา — โหมดสว่างเท่านั้น */
    --shadow-1: 0 1px 2px rgb(0 0 0 / .05);
    --shadow-2: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px rgb(0 0 0 / .07);
    --shadow-3: 0 24px 64px rgb(0 0 0 / .18);
}

/* ── โหมดมืด ────────────────────────────────────────────────────────────
   ประกาศสองครั้งโดยตั้งใจ และต้องแก้ให้ตรงกันเสมอ:
     1) ในกฎ @media  = กรณี "อัตโนมัติ" (ยังไม่เคยเลือกเอง / เลือกอัตโนมัติ)
     2) ในกฎ [data-theme="dark"] = กรณีผู้ใช้สั่งเป็นโหมดมืดเอง
   ใช้วิธีนี้แทน light-dark() เพื่อให้ทำงานได้กับเบราว์เซอร์รุ่นเก่าด้วย
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --blue-rgb:   10 132 255;
        --green-rgb:  48 209 88;
        --red-rgb:    255 69 58;
        --orange-rgb: 255 159 10;
        --yellow-rgb: 255 214 10;
        --indigo-rgb: 94 92 230;
        --teal-rgb:   64 200 224;
        --pink-rgb:   255 55 95;
        --purple-rgb: 191 90 242;
        --gray-rgb:   152 152 157;

        --bg-rgb:        0 0 0;
        --surface-rgb:   28 28 30;
        --surface-2-rgb: 44 44 46;
        --material-rgb:  30 30 30;

        /* กลางคืน — ฟ้าน้ำเงินเข้มไล่ลงมา ม่านบางกว่ากลางวันเพื่อให้เห็นดาว */
        --sky-top:   10 16 40;
        --sky-mid:   16 24 56;
        --sky-low:   24 32 68;
        --sky-glow:  118 152 255;   /* แสงจันทร์ */
        --sky-star:  255 255 255;
        --sky-veil:  .52;

        --label-rgb:     255 255 255;
        --label-alt-rgb: 235 235 245;
        --separator-rgb: 84 84 88;
        --separator-a:   .65;
        --fill-a:        .24;

        /* โหมดมืดแยกชั้นด้วยความสว่างของพื้นผิว ไม่ใช้เงา — เหมือน iOS จริง */
        --shadow-1: none;
        --shadow-2: none;
        --shadow-3: 0 24px 64px rgb(0 0 0 / .60);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --blue-rgb:   10 132 255;
    --green-rgb:  48 209 88;
    --red-rgb:    255 69 58;
    --orange-rgb: 255 159 10;
    --yellow-rgb: 255 214 10;
    --indigo-rgb: 94 92 230;
    --teal-rgb:   64 200 224;
    --pink-rgb:   255 55 95;
    --purple-rgb: 191 90 242;
    --gray-rgb:   152 152 157;

    --bg-rgb:        0 0 0;
    --surface-rgb:   28 28 30;
    --surface-2-rgb: 44 44 46;
    --material-rgb:  30 30 30;

    /* กลางคืน — ฟ้าน้ำเงินเข้มไล่ลงมา ม่านบางกว่ากลางวันเพื่อให้เห็นดาว */
    --sky-top:   10 16 40;
    --sky-mid:   16 24 56;
    --sky-low:   24 32 68;
    --sky-glow:  118 152 255;   /* แสงจันทร์ */
    --sky-star:  255 255 255;
    --sky-veil:  .52;

    --label-rgb:     255 255 255;
    --label-alt-rgb: 235 235 245;
    --separator-rgb: 84 84 88;
    --separator-a:   .65;
    --fill-a:        .24;

    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 24px 64px rgb(0 0 0 / .60);
}


/* ── สี accent ที่ผู้ใช้เลือกเอง ─────────────────────────────────────────
   ชี้ไปที่ชุด *-rgb ของสีนั้น ซึ่งสลับตามโหมดให้เองอยู่แล้ว
   จึงไม่ต้องประกาศคู่สว่าง/มืดของ accent ซ้ำอีก
   ------------------------------------------------------------------------ */
:root                        { --accent-rgb: var(--blue-rgb); }
:root[data-accent="blue"]    { --accent-rgb: var(--blue-rgb); }
:root[data-accent="indigo"]  { --accent-rgb: var(--indigo-rgb); }
:root[data-accent="teal"]    { --accent-rgb: var(--teal-rgb); }
:root[data-accent="green"]   { --accent-rgb: var(--green-rgb); }
:root[data-accent="orange"]  { --accent-rgb: var(--orange-rgb); }
:root[data-accent="pink"]    { --accent-rgb: var(--pink-rgb); }
:root[data-accent="purple"]  { --accent-rgb: var(--purple-rgb); }


/* ── โทเคนที่ประกอบขึ้นจากค่าข้างบน — ประกาศครั้งเดียว ─────────────────── */
:root {
    --bg:          rgb(var(--bg-rgb));
    --surface:     rgb(var(--surface-rgb));
    --surface-2:   rgb(var(--surface-2-rgb));
    --material:    rgb(var(--material-rgb) / .80);
    --scrim:       rgb(0 0 0 / .40);

    --label:       rgb(var(--label-rgb));
    --label-2:     rgb(var(--label-alt-rgb) / .60);
    --label-3:     rgb(var(--label-alt-rgb) / .32);
    --separator:   rgb(var(--separator-rgb) / var(--separator-a));

    --fill:        rgb(var(--fill-rgb) / var(--fill-a));
    --fill-strong: rgb(var(--fill-rgb) / calc(var(--fill-a) * 1.8));

    --accent:      rgb(var(--accent-rgb));
    --accent-tint: rgb(var(--accent-rgb) / .14);
    --accent-ring: rgb(var(--accent-rgb) / .30);
    --on-accent:   #ffffff;

    --blue:   rgb(var(--blue-rgb));
    --green:  rgb(var(--green-rgb));
    --red:    rgb(var(--red-rgb));
    --orange: rgb(var(--orange-rgb));
    --yellow: rgb(var(--yellow-rgb));
    --indigo: rgb(var(--indigo-rgb));
    --teal:   rgb(var(--teal-rgb));
    --pink:   rgb(var(--pink-rgb));
    --purple: rgb(var(--purple-rgb));
    --gray:   rgb(var(--gray-rgb));

    /* ── ตัวอักษร ──────────────────────────────────────────────────────
       Sarabun ทั้งเว็บ ทั้งภาษาไทยและอังกฤษ (ไฟล์อยู่ในโปรเจกต์ ดู fonts.css)
       ฟอนต์ระบบต่อท้ายไว้เป็นตัวสำรอง ใช้ระหว่างที่ไฟล์ยังโหลดไม่เสร็จ
       และในกรณีที่โหลดไม่สำเร็จเลย                                        */
    --font: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
            "Segoe UI", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;

    --text-large-title: 700 2.125rem/1.2 var(--font);   /* 34px */
    --text-title:       700 1.625rem/1.25 var(--font);  /* 26px */
    --text-title-2:     700 1.375rem/1.3 var(--font);   /* 22px */
    --text-headline:    600 1.0625rem/1.4 var(--font);  /* 17px */
    --text-body:        400 1.0625rem/1.5 var(--font);  /* 17px */
    --text-subhead:     400 .9375rem/1.45 var(--font);  /* 15px */
    --text-footnote:    400 .8125rem/1.4 var(--font);   /* 13px */
    --text-caption:     400 .75rem/1.35 var(--font);    /* 12px */

    /* ── รูปทรง ──────────────────────────────────────────────────────── */
    --r-sm:   8px;    /* ชิป แท็ก */
    --r-md:   10px;   /* ปุ่ม อินพุต */
    --r-lg:   14px;   /* การ์ด */
    --r-xl:   20px;   /* แผง sheet */
    --r-full: 999px;

    /* ── ระยะ (สเกล 4px) ─────────────────────────────────────────────── */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

    /* ── การเคลื่อนไหว — เส้นโค้งแบบ sheet ของ iOS ────────────────────── */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 340ms;

    --sidebar-w: 260px;

    /* ทุกหน้าใช้พื้นที่เต็มความกว้างที่มี
       เพดาน 2000px ไว้กันจอ ultrawide ยืดจนเนื้อหากว้างเกินกวาดสายตาไหว */
    --content-w: 2000px;
}


/* ==========================================================================
   พื้นฐานของเอกสาร
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font: var(--text-body);
    color: var(--label);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* ภาษาไทยมีวรรณยุกต์ซ้อนบน-ล่าง จึงเผื่อระยะบรรทัดมากกว่าปกติเล็กน้อย */
    line-height: 1.55;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-tint); }

/* วงแหวนโฟกัสเห็นชัดทั้งสองโหมด และไม่ไปทับเงาของคอมโพเนนต์ */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* แถบเลื่อนบางแบบ iOS */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--fill-rgb) / .45) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgb(var(--fill-rgb) / .45);
    border: 3px solid transparent;
    border-radius: var(--r-full);
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--fill-rgb) / .70); background-clip: content-box; }


/* ── ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหวในระบบปฏิบัติการ ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}