/* ธีม Flatpickr ให้เข้ากับ Dark Obsidian Navy + Sapphire Gold Glassmorphic HUD */
:root {
    --rv-bg: #0B0F19;
    --rv-panel: #111827;
    --rv-border: #1E293B;
    --rv-cyan: #E8C878;
    --rv-blue: #4C7FFF;
}

/* ============ Scrollbar (ทั้งระบบ) ============ */
/* ธีมสโครลบาร์กลาง ให้เข้ากับ Dark Obsidian Navy + Sapphire Gold Glassmorphic HUD
   - scrollbar-width/scrollbar-color (มาตรฐาน, Firefox) ประกาศที่ :root เพราะเป็น inherited property
     เลยลงไปถึงทุก element ที่ scroll ได้เองอัตโนมัติ ไม่ต้องเติมทีละจุด
   - *::-webkit-scrollbar (Chrome/Edge/Safari) ต้องใช้ universal selector เพราะ pseudo-element กลุ่มนี้
     ไม่ inherit ต้องประกาศครอบทุก element ไว้เลยเพื่อให้ครอบคลุมทุกจุดที่มี overflow ในระบบ (main content,
     modal body, ตารางแนวนอน, แถบ tab, ลิสต์ในการ์ด ฯลฯ) โดยอัตโนมัติ แม้เพิ่มจุด scroll ใหม่ในอนาคตก็ไม่ต้อง
     เติม class เอง
   - ค่าสีเขียนเป็น rgba() ตายตัว (ผูกกับ --rv-cyan/--rv-blue แค่ตอน active เพราะไม่มี alpha) ถ้าเปลี่ยน
     โทนสีธีมหลักในอนาคต ต้องไล่แก้ rgba ชุดนี้ด้วย (ดู CLAUDE.md ข้อ 10) */
:root {
    scrollbar-width: thin;
    scrollbar-color: rgba(76, 127, 255, 0.5) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(232, 200, 120, 0.55), rgba(76, 127, 255, 0.55));
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(232, 200, 120, 0.85), rgba(76, 127, 255, 0.85));
    box-shadow: 0 0 6px 1px rgba(232, 200, 120, 0.45);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--rv-cyan);
    box-shadow: 0 0 8px 1px rgba(232, 200, 120, 0.6);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* ============ Input Alignment Convention ============ */
/* ข้อความ = ชิดซ้าย, ตัวเลข = ชิดขวา, วันที่ = กึ่งกลาง (ต้องใช้แบบนี้เสมอทั้งระบบ) */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
textarea {
    text-align: left;
}

input[type='number'] {
    text-align: right;
}

/* ปุ่ม "แสดงรหัสผ่าน" (ไอคอนรูปตา) เป็นของ browser เอง (Edge/Chromium ::-ms-reveal) ไม่ใช่ปุ่มที่ระบบสร้าง
   default เป็นสีดำ มองไม่เห็นบนพื้น input สีเข้ม (--rv-panel) ของธีมนี้ ต้อง invert ให้เป็นสีอ่อนแทน */
input[type='password']::-ms-reveal {
    filter: invert(1) grayscale(1) brightness(1.6);
    cursor: pointer;
}

/* input[data-flatpickr] คือ input เดิมที่ flatpickr ซ่อนไว้ (altInput: true สร้าง input ใหม่มาแสดงแทน)
   ตัวที่มองเห็นจริงมี type="text" เสมอ จึงต้องจับด้วย class .rv-input-date แทน attribute selector
   และต้องเขียนเป็น "input.rv-input-date" (ไม่ใช่ ".rv-input-date" เฉยๆ) เพื่อให้ specificity เท่ากับ
   กฎ input[type='text'] ด้านบน (element+attribute = element+class) แล้วอาศัยลำดับประกาศทีหลังชนะ
   ไม่งั้นกฎ text-align: left ของ input[type='text'] จะชนะเพราะ specificity สูงกว่า */
input[type='date'],
input[type='time'],
input[data-flatpickr],
input[data-flatpickr-time],
input.rv-input-date,
input.rv-input-time {
    text-align: center;
}

/* ป้องกันการกระพริบแสดง yyyy-mm-dd / HH:mm (ค่าดิบของ input เดิม) ตอนโหลด/รีเฟรชหน้า ก่อนที่ flatpickr JS
   จะ initialize เสร็จแล้วสลับไปโชว์ altInput (รูปแบบ j F Y ผ่าน locale th เช่น 10 สิงหาคม 2569 สำหรับ
   <x-form-date> หรือ H:i น. สำหรับ <x-form-time>) แทน ซ่อน input เดิมไว้ด้วย visibility (คงพื้นที่ไว้กัน
   เลย์เอาต์กระตุก) ตั้งแต่ paint แรกเลย ไม่ต้องรอ JS รัน - พอ flatpickr โหลดเสร็จ มันจะเซ็ต type="hidden"
   ให้ input เดิมเองอยู่แล้ว (ไม่ถูก render ต่อ) */
input[data-flatpickr],
input[data-flatpickr-time] {
    visibility: hidden;
}

/* ============ ป้องกันมือถือซูมอัตโนมัติเมื่อแตะ input (ทั้งระบบ) ============ */
/* iOS Safari จะซูมหน้าจออัตโนมัติเมื่อ focus เข้า input/select/textarea ที่ font-size คำนวณจริงต่ำกว่า
   16px (พฤติกรรมของ browser เอง ไม่ใช่ bug) ในระบบนี้หลายจุดใช้ Tailwind arbitrary value เช่น
   text-[14px]/text-[12px] ตรงกับ input โดยตรง (เช่น resources/views/auth/login.blade.php) ทำให้โดนซูม
   แก้ด้วยการบังคับ font-size 16px เฉพาะช่วงจอมือถือ (breakpoint เดียวกับ Tailwind sm: = max-width 639px)
   เท่านั้น ไม่กระทบ desktop ที่ยังต้องการ font-size ตาม design เดิม ต้องใช้ !important เพราะ class
   arbitrary value ของ Tailwind (เช่น .text-\[14px\]) มี specificity (0,1,0) สูงกว่า element selector
   เฉยๆ แบบนี้ (0,0,1) อยู่แล้ว ถ้าไม่ใส่ !important กฎนี้จะแพ้เสมอ */
@media (max-width: 639px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============ Input Height Consistency ============ */
/* กำหนด line-height ตายตัวให้ input/textarea ทุกช่อง แทนการปล่อยเป็น "normal" ที่ขึ้นกับ font metrics
   ของ Kanit (ไม่แน่นอน ทำให้ความสูงจริงเพี้ยนไปจากที่คำนวณไว้) เพื่อให้ความสูงจริงคำนวณได้แน่นอนตายตัว
   = border 1px x2 + padding 8px x2 (py-2) + line-height 20px = 38px ทุกจอ ไม่ต้องพึ่งการวัดตอน runtime */
input,
textarea {
    line-height: 20px;
}

/* ============ Flatpickr ============ */
/* ห้ามใส่ max-height/overflow-y: auto ให้ .flatpickr-calendar เด็ดขาด (เคยเกิดปัญหามาแล้วจริง)
   เพราะ flatpickr ตั้ง width แบบ inline px ให้ .flatpickr-days/.dayContainer ไว้ตายตัว (สำหรับ animation
   เปลี่ยนเดือน) พอ scrollbar โผล่มันแย่งพื้นที่ความกว้างไปโดยที่ day grid ไม่ย่อตาม ทำให้คอลัมน์ขวาสุด
   ถูกซ่อน/ทับด้วย scrollbar เอง (แบบในรูปที่เจอ) ปล่อยให้เป็น default (ไม่ scroll) แล้วให้กลไก
   repositioning ของ flatpickr เอง (พลิกไปโชว์ด้านบน input แทนถ้าที่ไม่พอด้านล่าง) จัดการแทน */
.flatpickr-calendar {
    background: var(--rv-panel);
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(76, 127, 255, 0.08);
    font-family: 'Kanit', sans-serif;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--rv-border);
}
.flatpickr-months {
    background: transparent;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
    color: #e2e8f0;
    fill: #e2e8f0;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #64748b;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--rv-cyan);
}
.flatpickr-weekdays {
    background: transparent;
}
span.flatpickr-weekday {
    background: transparent;
    color: #64748b;
    font-size: 11px;
}
.flatpickr-day {
    color: #cbd5e1;
    border-radius: 8px;
}
.flatpickr-day.today {
    border-color: var(--rv-blue);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(76, 127, 255, 0.15);
    border-color: transparent;
    color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--rv-blue);
    border-color: var(--rv-blue);
    color: #0B0F19;
    font-weight: 600;
    box-shadow: 0 0 12px 1px rgba(76, 127, 255, 0.55);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #334155;
}
.numInputWrapper span {
    border: none;
}
.numInputWrapper span:hover {
    background: rgba(76, 127, 255, 0.15);
}

/* ============ Flatpickr Time Picker (<x-form-time>) ============ */
/* panel ปกติของ flatpickr กำหนด width ตายตัว 307.875px มาให้พอดีกับตาราง 7 วัน/เดือน (โหมดปฏิทิน)
   แต่โหมด noCalendar (time-only) ไม่มีตารางวันมาเติมพื้นที่ ถ้าปล่อย width เดิมไว้ตัวเลขชั่วโมง/นาที
   จะกระจายห่างกันมาก ดูโหว่ๆ ไม่ "สวยงาม" ต้องบีบ panel ให้แคบพอดีตัวเลขแทน (flatpickr เติม class
   .noCalendar ให้ root panel เองอัตโนมัติเมื่อตั้ง noCalendar: true ไม่ต้องเซ็ต inline style เพราะ JS
   ของ flatpickr เองจะ set .style.width inline ก็ต่อเมื่อมี daysContainer เท่านั้น โหมดนี้ไม่มีจึงไม่ชน) */
.flatpickr-calendar.noCalendar {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
}

/* .flatpickr-time คือแผงเลือกเวลาแบบ scroll wheel/สปินเนอร์ ใช้ font ตัวเลขแบบ tabular (JetBrains Mono)
   ให้ตัวเลขชั่วโมง/นาทีนิ่ง ไม่ขยับตอนเปลี่ยนเลขเหมือน font Kanit ทั่วไป
   .flatpickr-calendar.hasTime .flatpickr-time ของ default (border-top: 1px solid #e6e6e6) มี
   specificity สูงกว่า .flatpickr-time เฉยๆ (3 class vs 1 class) ต้องเขียน selector เดียวกันเป๊ะๆ ถึงจะ
   ทับสีเส้นขาวเดิมได้ (ไม่งั้นจะเห็นเส้นขาวคาดขวางด้านบน panel ไม่เข้าธีมมืด) */
.flatpickr-calendar.hasTime .flatpickr-time {
    background: transparent;
    border-top: none;
    height: 44px;
    line-height: 44px;
    max-height: 44px;
}
/* input[type='number'] { text-align: right } (Input Alignment Convention ด้านบน) หลุดมาชนกับช่อง
   ชั่วโมง/นาทีของ flatpickr เพราะเป็น input[type='number'] เหมือนกัน และ specificity เท่ากับ default
   ของ flatpickr เอง (.numInputWrapper input { text-align:center }) ทำให้ลำดับ import ชนะแทน (เลข
   นาทีไปเกาะขอบขวาของกล่อง ไม่ชิดกับ : ตรงกลาง) ต้อง override เจาะจงด้วย specificity ที่สูงกว่าตรงนี้ */
.flatpickr-time input[type='number'] {
    text-align: center;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: rgba(76, 127, 255, 0.12);
}
.flatpickr-time .numInputWrapper:hover {
    background: transparent;
}
.flatpickr-time .flatpickr-am-pm {
    color: #e2e8f0;
    font-family: 'Kanit', sans-serif;
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: rgba(76, 127, 255, 0.15);
}

/* ลูกศรขึ้น/ลงของช่องชั่วโมง/นาที ปกติซ่อนไว้จนกว่าจะ hover ทั้งแผง (ธีม default ของ flatpickr) เปลี่ยน
   สีลูกศรให้เข้าธีม Sapphire แทนสีเทา default */
.flatpickr-time .arrowUp:after {
    border-bottom-color: #64748b;
}
.flatpickr-time .arrowDown:after {
    border-top-color: #64748b;
}
.flatpickr-time .numInputWrapper:hover .arrowUp:after {
    border-bottom-color: var(--rv-cyan);
}
.flatpickr-time .numInputWrapper:hover .arrowDown:after {
    border-top-color: var(--rv-cyan);
}

/* ============ Skeleton Loading (ทั้งระบบ) ============ */
/* Placeholder shimmer ที่ต้องใช้แทนข้อความ "กำลังโหลด.../กำลังประมวลผล..." หรือ spinner เปล่าๆ ทุกจุด
   ที่มีการโหลดข้อมูลแบบ async (fetch/AJAX) ในทุกโมดูล ทุกครั้งที่เพิ่มฟีเจอร์ใหม่หรือเพิ่มการแสดงข้อมูลใหม่
   ที่โหลดหลังจากหน้าเว็บ render เสร็จแล้ว ต้องเข้ากันกับ pattern นี้เสมอ (ดู CLAUDE.md ข้อ 7)
   ใช้คู่กับ:
   - <x-skeleton> component (resources/views/components/skeleton.blade.php) สำหรับสร้าง markup placeholder
   - RVSkeleton.show()/hide() ใน public/js/skeleton.js สำหรับสลับ skeleton <-> เนื้อหาจริง (ดู doc comment ในไฟล์นั้น)
   หมายเหตุ: หน้าที่ Blade render ข้อมูลจริงมาตั้งแต่ server (SSR ปกติของ Laravel) ไม่ต้องใช้ skeleton เพราะ
   browser ได้ข้อมูลจริงมาพร้อม HTML อยู่แล้ว - skeleton มีไว้เฉพาะจุดที่ JS fetch ข้อมูลเพิ่มหลัง page load
   เท่านั้น (ผลค้นหา, ผลลัพธ์ AI, การ์ดที่โหลดเพิ่มแบบ dynamic ฯลฯ) */
.rv-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background-color: rgba(30, 41, 59, 0.55);
}

.rv-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(232, 200, 120, 0) 0%,
        rgba(232, 200, 120, 0.16) 20%,
        rgba(76, 127, 255, 0.24) 50%,
        rgba(232, 200, 120, 0.16) 80%,
        rgba(232, 200, 120, 0) 100%
    );
    animation: rv-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes rv-skeleton-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .rv-skeleton::after {
        animation: none;
    }
}

/* ขนาดสำเร็จรูป - ใช้คู่กับ .rv-skeleton เสมอ (ดูตัวอย่างการใช้งานใน <x-skeleton>) */
.rv-skeleton-title {
    height: 18px;
    width: 55%;
    margin-bottom: 10px;
}
.rv-skeleton-line {
    height: 12px;
    width: 100%;
    margin-bottom: 8px;
}
.rv-skeleton-line:last-child {
    margin-bottom: 0;
    width: 80%;
}
.rv-skeleton-avatar {
    height: 40px;
    width: 40px;
    border-radius: 999px;
    flex-shrink: 0;
}
.rv-skeleton-badge {
    height: 20px;
    width: 64px;
    border-radius: 20px;
}
.rv-skeleton-button {
    height: 34px;
    width: 100px;
    border-radius: 8px;
}

/* กรอบการ์ด skeleton ให้ตรงกับสไตล์การ์ดข้อมูลจริงที่ใช้ทั้งระบบ
   (rounded-[11px] border border-rv-border bg-gray-900/60 p-[14px]) เพื่อไม่ให้ layout กระโดดตอนสลับเป็นข้อมูลจริง */
.rv-skeleton-card {
    border-radius: 11px;
    border: 1px solid var(--rv-border);
    background: rgba(17, 24, 39, 0.6);
    padding: 14px;
    margin-bottom: 14px;
}
/* ============ Sidebar Toggle (เดสก์ท็อป) ============ */
/* Sidebar (#app-sidebar) เป็น position: fixed เต็มความสูงจอ ไม่ขยับตามการเลื่อนหน้า และเปิด/ปิดได้
   ผ่านปุ่ม #sidebar-toggle ใน header (ค่าเริ่มต้นคือเปิด, จำสถานะผ่าน localStorage)
   ดู resources/views/components/sidebar.blade.php และ resources/views/components/header.blade.php */
@media (min-width: 768px) {
    #app-sidebar {
        transition: width 0.2s ease-out, padding 0.2s ease-out, opacity 0.2s ease-out;
    }
    #app-sidebar.rv-sidebar-closed {
        width: 0;
        padding-left: 0;
        padding-right: 0;
        border-right-width: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    #app-content {
        transition: margin-left 0.2s ease-out;
    }
    #app-content.rv-content-expanded {
        margin-left: 0;
    }
}

.rv-skeleton-card:last-child {
    margin-bottom: 0;
}

/* ============ Save Button Loading (ทั้งระบบ) ============ */
/* กันกดปุ่มบันทึกซ้ำ (double-submit) ทั้งระบบ - toggle จาก public/js/forms.js ทุกครั้งที่ฟอร์มไหนก็ตาม
   ถูก submit จริง (ปุ่มกด หรือ Enter-to-submit ข้อ 2) ปุ่มจะโดน disabled (ปุ่มกดซ้ำไม่ได้อยู่แล้วจาก
   attribute นี้) + ใส่ class นี้เพื่อแสดงสถานะกำลังโหลดให้เห็นชัดเจนคู่กัน ไม่ต้องเขียน logic ซ้ำในแต่ละ view
   สีเขียนเป็น rgba() ตายตัวผูกกับ --rv-blue เหมือน scrollbar/skeleton ด้านบน (ดูหมายเหตุ CLAUDE.md ข้อ 10
   ถ้าเปลี่ยนโทนสีธีมหลักในอนาคตต้องไล่แก้ rgba ชุดนี้ด้วยมือ) */
.rv-btn-loading {
    cursor: not-allowed !important;
    opacity: 0.7;
}

.rv-btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    vertical-align: -2px;
    border: 2px solid rgba(76, 127, 255, 0.35);
    border-top-color: var(--rv-blue);
    border-radius: 50%;
    animation: rv-btn-spin 0.6s linear infinite;
}

@keyframes rv-btn-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rv-btn-spinner {
        animation: none;
    }
}

/* ปุ่มติ้กเสร็จงานในโมดูลบันทึกงาน (work-log._item.blade.php) เป็นปุ่มสี่เหลี่ยมเล็ก 20x20px มีแค่ไอคอน
   เช็คเป็นลูกเดียว ใช้ spinner ตัวเดียวกับปุ่ม submit ทั่วไปข้างบน แต่ forms.js แทรก spinner ไว้ "ก่อน" ไอคอน
   เช็คเดิม (ไม่ได้แทนที่) ทำให้กลายเป็น 2 element เรียงกันแทนที่จะอยู่ตรงกลางปุ่มเดียว - ต้องซ่อนไอคอนเช็คเดิม
   ระหว่างโหลดและตัด margin-right ของ spinner ออก เพื่อให้เหลือแค่ spinner ลูกเดียวที่ flex items-center/
   justify-center ของปุ่มจัดกึ่งกลางให้เองแทน */
.rv-worklog-toggle-btn.rv-btn-loading svg {
    display: none;
}

.rv-worklog-toggle-btn .rv-btn-spinner {
    margin-right: 0;
}