/* ===== UI Kit: primitive component classes ใช้ร่วมกันทุกหน้า (ต่อยอดจาก design tokens ใน sidebar.css) =====
   ไฟล์นี้ตั้งใจให้ "เสริม" ของเดิม ไม่ใช่ล้างของเดิมทิ้ง — ทุก selector ที่นี่เขียนให้ specificity ต่ำพอที่ class
   เฉพาะหน้า/เฉพาะ component (เช่น .btn.print, .badge-delivered) ที่มีอยู่แล้วยังชนะได้เสมอ (ใช้สีตามความหมายทาง
   ธุรกิจของมันต่อไป) ไฟล์นี้แค่กำหนด "ค่าเริ่มต้น" ที่สอดคล้องกันสำหรับ base class (.btn, .badge, input ฯลฯ)
   และเพิ่ม state ที่ของเดิมส่วนใหญ่ยังไม่มี (focus ring, disabled, error, loading, empty state) */

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

/* focus ring ที่เห็นชัดตอนกด Tab ไปตามหน้า (keyboard navigation) — ของเดิมส่วนใหญ่ไม่มี ใส่แบบ additive
   ใช้ :focus-visible กันไม่ให้ขึ้นวงแหวนตอนคลิกด้วยเมาส์ (โผล่เฉพาะตอน navigate ด้วยคีย์บอร์ด) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-accent-dark);
    outline-offset: 2px;
}

/* ===== ปุ่ม ===== */
/* พื้นหลักเป็นเขียวมะนาวสด (--color-accent) — สว่างเกินกว่าตัวหนังสือขาวจะอ่านออก จึงต้องใช้ตัวหนังสือ/ไอคอน
   สีเข้ม (--color-accent-text) เสมอ ต่างจาก pattern เดิมที่ปุ่มหลักพื้นเขียวเข้ม+ตัวหนังสือขาว */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--color-accent); color: var(--color-accent-text); border: none;
    padding: 10px 20px; border-radius: var(--radius-full);
    font-family: var(--font-base); font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    min-height: 44px; box-sizing: border-box;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled {
    opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

/* ปุ่มรอง — ไม่แย่งความสนใจจากปุ่มหลัก */
.btn-secondary {
    background: var(--bg-page); color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.btn-secondary:hover { background: #eef0f2; }

/* ปุ่มขอบ (ghost) — สำหรับ action รองสุดในกลุ่มเดียวกัน */
.btn-ghost {
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.btn-ghost:hover { background: var(--bg-page); color: var(--text-primary); }

/* ปุ่มเน้น (featured CTA) — teal พื้นเข้ม+ตัวหนังสือขาว ใช้กับ action สำคัญที่อยากให้เด่นกว่าปุ่มหลักทั่วไป */
.btn-featured { background: var(--color-secondary); color: #fff; }
.btn-featured:hover { background: var(--color-secondary-hover); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-dark); }

/* ===== ฟอร์ม/input ===== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, label.field-label {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.field-hint { font-size: 12px; color: var(--text-secondary); }
.field-error { font-size: 12px; color: var(--color-danger); }

/* พื้น input ทึบสีเทาอ่อน ไม่มีเส้นขอบจนกว่าจะโฟกัส (ตาม Lumina spec) — ใช้ border โปร่งใสหนา 1px แทนการไม่มี
   border เลย เพื่อให้ยังมีขอบเขตกล่องชัดเจนพอสำหรับ high-contrast mode / สายตาไม่ดี */
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="tel"], input[type="time"],
select, textarea {
    font-family: var(--font-base); font-size: 14px; color: var(--text-primary);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 10px 12px; background: var(--bg-page);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent-dark); background: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(212,255,95,0.35); outline: none;
}
input.input-error, select.input-error, textarea.input-error {
    border-color: var(--color-danger);
}
input.input-error:focus, select.input-error:focus, textarea.input-error:focus {
    box-shadow: 0 0 0 3px rgba(186,26,26,0.15);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--bg-page); color: var(--text-secondary); cursor: not-allowed; opacity: 0.7;
}
input::placeholder, textarea::placeholder { color: #9aa0a6; }

/* ===== Badge (โครงสร้างกลาง — สีตามความหมายธุรกิจให้ class เฉพาะหน้าที่มีอยู่แล้วเป็นคนกำหนดต่อไป) ===== */
.badge {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}

/* ===== Empty state ===== */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 20px; color: var(--text-secondary);
}
.empty-state .empty-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.7; }
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state .empty-desc { font-size: 13px; }

/* "ไม่มีข้อมูล/ไม่พบผลลัพธ์" แบบสั้น (<p class="no-data">/<p class="no-result">) ที่กระจายอยู่หลายสิบหน้า
   เดิมแต่ละหน้าประกาศสีเอง ทำให้ไม่ตรงกัน — รวมมาไว้ที่นี่จุดเดียว ชนะ <style> เฉพาะหน้าได้เพราะไฟล์นี้ถูก
   link ทีหลังเสมอ (specificity เท่ากัน) จงใจ scope แค่ tag p เพราะ mold_detail.html ใช้ <span class="no-data">
   เป็นตัวบอก "ไม่มีวันที่" ในเซลตาราง ซึ่งเป็นคนละความหมายและไม่ควรถูกสไตล์นี้แตะ */
p.no-data, p.no-result {
    text-align: center; color: var(--text-secondary); font-size: 13px;
    padding: 32px 20px; margin: 0;
}

/* ===== Loading spinner ===== */
.loading-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2.5px solid var(--border-subtle); border-top-color: var(--color-accent);
    border-radius: 50%; animation: ui-spin 0.7s linear infinite;
}
.loading-row { display: flex; align-items: center; justify-content: center; gap: 10px;
               padding: 30px 0; color: var(--text-secondary); font-size: 13px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   ===== Page chrome: ดึงทุกหน้าให้ใช้ภาษาดีไซน์เดียวกับแดชบอร์ด (Figma "Planex Dashboard") =====
   แต่ละหน้ามี <style> ของตัวเองที่เขียนสี/มุมโค้งไว้คนละแบบ (การ์ดเงา 10-12px, ปุ่มสีจัด teal/ฟ้า/ม่วง/ส้ม)
   ไฟล์นี้ถูก link ทีหลัง <style> เฉพาะหน้าเสมอ จึงชนะที่ specificity เท่ากันได้ — รวมค่ากลางไว้ที่นี่จุดเดียว
   แทนการไล่แก้ทีละไฟล์ ถ้าหน้าไหนอยากได้สีเฉพาะของตัวเองจริงๆ เขียน selector ให้เฉพาะเจาะจงกว่านี้ได้
   ========================================================================= */

/* ---------- หัวข้อหน้า ---------- */
h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0 0 20px; }
h2 { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* ---------- พื้นผิวการ์ด: ขอบบาง มุมโค้ง 24px ไม่มีเงา (เดิมเงาฟุ้ง มุม 10-12px) ---------- */
.panel, .card, .filters, .main-form, .detail-box, .stat-card, .note-card, .mold-card,
.item-search-panel, .progress-section, .calendar, .total-hours-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: none;
}

.modal-box, .history-modal-box, .copy-dept-modal {
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

/* ---------- ตาราง ---------- */
th {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid #edeae6;
}
td { border-bottom: 1px solid #edeae6; }

/* ---------- ปุ่ม ----------
   ปุ่มหลัก (เพิ่ม/บันทึก/ใช้งาน) = พื้นเกือบดำตาม CTA ของแดชบอร์ด, แก้ไข = ฟ้า, ลบ = แดง
   ส่วนปุ่มเครื่องมือ (PDF/พิมพ์/ส่งออก/ประวัติ) เปลี่ยนจากสีจัดเป็นปุ่มขอบบางพื้นขาว เพื่อไม่ให้หน้าเต็มไปด้วยสี */
.btn, .btn-add, .btn-save, .btn-apply, .btn-apply-range, .btn-publish, .btn-add-topic,
.btn-add-dept, .btn-add-category, .btn-save-dept, .btn-save-category, .btn-save-stock,
.btn-save-draft, .btn-save-color, .btn-save-resin {
    background: var(--color-ink); color: #fff;
    border: none; border-radius: var(--radius-full);
}
.btn:hover, .btn-add:hover, .btn-save:hover, .btn-apply:hover, .btn-apply-range:hover,
.btn-publish:hover, .btn-add-topic:hover, .btn-add-dept:hover, .btn-add-category:hover,
.btn-save-dept:hover, .btn-save-category:hover, .btn-save-stock:hover, .btn-save-draft:hover,
.btn-save-color:hover, .btn-save-resin:hover {
    background: var(--color-ink-hover);
}

.btn-edit, .btn-copy-dept, .copy-dept-confirm-btn, .btn-withdraw, .btn-ship-report {
    background: #2563eb; color: #fff; border: none;
}
.btn-edit:hover, .btn-copy-dept:hover, .copy-dept-confirm-btn:hover,
.btn-withdraw:hover, .btn-ship-report:hover { background: #1d4ed8; }

.btn-delete, .btn-del, .btn-danger, .btn-report-issue, .color-clear-btn, .photo-del,
.photo-thumb-del, .po-file-del, .resin-image-remove-btn, .stock-image-remove-btn {
    background: #dc2626; color: #fff; border: none;
}
.btn-delete:hover, .btn-del:hover, .btn-danger:hover, .btn-report-issue:hover,
.color-clear-btn:hover, .photo-del:hover, .photo-thumb-del:hover, .po-file-del:hover,
.resin-image-remove-btn:hover, .stock-image-remove-btn:hover { background: #b91c1c; }

.btn-repair, .btn-release { background: #d97706; color: #fff; border: none; }
.btn-repair:hover, .btn-release:hover { background: #b45309; }

.btn-pdf, .btn-print, .btn-print-pdf, .btn-export, .btn-history, .btn-secondary,
.btn-clear, .dept-print-btn, .export-btn, .export-btn.production, .export-btn.orders, .preset-btn {
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
}
.btn-pdf:hover, .btn-print:hover, .btn-print-pdf:hover, .btn-export:hover, .btn-history:hover,
.btn-secondary:hover, .btn-clear:hover, .dept-print-btn:hover, .export-btn:hover,
.export-btn.production:hover, .export-btn.orders:hover, .preset-btn:hover { background: var(--bg-page); }

.btn-cancel, .btn-cancel-modal { background: var(--bg-page); color: var(--text-primary); border: none; }
.btn-cancel:hover, .btn-cancel-modal:hover { background: var(--border-subtle); }

/* ---------- ชิป/แท็บกรอง ---------- */
.tab-pill, .tab-btn, .filter-chip, .dept-chip {
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-full);
    color: var(--text-secondary); font-weight: 500;
}
.tab-pill:hover, .tab-btn:hover, .filter-chip:hover, .dept-chip:hover { background: var(--bg-page); }
.tab-pill.active, .tab-btn.active, .filter-chip.active, .dept-chip.active {
    background: var(--color-ink); color: #fff; border-color: var(--color-ink); font-weight: 600;
}

/* ---------- ช่องค้นหาทรงเม็ดยาแบบเดียวกับแถบค้นหาบนแดชบอร์ด ---------- */
.search-box {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
    background: var(--bg-surface); padding: 12px 18px;
}
.search-box:focus {
    border-color: var(--text-muted); background: var(--bg-surface);
    box-shadow: none; outline: none;
}

/* ===== Flash / toast message (ใช้กับ get_flashed_messages) ===== */
.flash-message {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-warning-light); border: 1px solid #f5cf8f; color: #8a5a00;
    padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px;
}
.flash-message.flash-success { background: var(--bg-success-light); border-color: #9fe0b5; color: #1e7a34; }
.flash-message.flash-error { background: var(--bg-danger-light); border-color: #f0aca4; color: var(--color-danger-dark); }