/* ============================================================
WAGONCAM — ธีมบริษัท ขาว–ดำ–แดง (พื้นสว่าง)
ไฟล์กลางคุมทุกหน้า: แก้ที่นี่ที่เดียว เปลี่ยนทั้งระบบ
วิธีใช้: ใส่บรรทัดนี้ใน ของทุกหน้า (ให้อยู่บรรทัดท้ายๆ)
============================================================ */
:root {
--brand-red: #dc2626;
--brand-red-dark: #b91c1c;
--brand-red-soft: #fef2f2;
--brand-red-100: #fee2e2;
--brand-red-text: #991b1b;
--brand-black: #111111;
--brand-ink: #171717;
--bg: #fbdad6;
--surface: #ffffff;
--border: #e5e5e3;
--muted: #737373;
}
/* ---------- พื้นฐานหน้า ---------- */
body {
background-color: var(--bg) !important;
}
/* ---------- หัวข้อบนสุด (Header) ---------- */
.glass-header {
background: var(--brand-black) !important;
border-radius: 0 !important;
border-bottom: 3px solid var(--brand-red) !important;
box-shadow: none !important;
}
.btn-icon.bg-blue-500\/20 {
background: rgba(220, 38, 38, 0.18) !important;
border-color: rgba(220, 38, 38, 0.35) !important;
}
/* ---------- การ์ด ---------- */
.form-card,
.stat-card {
background: var(--surface) !important;
border-color: var(--border) !important;
}
/* ---------- ช่องกรอกข้อมูล ---------- */
.input-field {
background-color: #fafafa;
border-color: var(--border);
}
.input-field:focus {
background: #ffffff !important;
border-color: var(--brand-red) !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
/* ---------- ปุ่มหลัก ---------- */
.btn-primary {
background: var(--brand-red) !important;
background-image: none !important;
}
.btn-primary:hover {
background: var(--brand-red-dark) !important;
}
.shadow-blue-300 {
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.25) !important;
}
/* ---------- สปินเนอร์โหลด ---------- */
.spinner {
border-top-color: var(--brand-red) !important;
}
/* ---------- ชิปกรองช่าง (หน้า index) ---------- */
.chip-btn.active {
background: var(--brand-red) !important;
border-color: var(--brand-red) !important;
color: #ffffff !important;
}
/* ---------- การ์ดงานที่ถูกกางออก ---------- */
.job-card.is-expanded {
border-color: var(--brand-red) !important;
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25) !important;
}
/* ============================================================
OVERRIDE คลาสสี Tailwind เดิม (ฟ้า + สีประจำช่าง) -> แบรนด์
============================================================ */
/* --- พื้นหลัง --- */
.bg-blue-50, .bg-blue-50\/50, .bg-blue-50\/30,
.bg-teal-50, .bg-rose-50, .bg-purple-50 {
background-color: var(--brand-red-soft) !important;
}
.bg-blue-100 {
background-color: var(--brand-red-100) !important;
}
.bg-blue-600 {
background-color: var(--brand-red) !important;
}
.bg-blue-700 {
background-color: var(--brand-red-dark) !important;
}
.bg-blue-900,
.bg-blue-900\/40, .bg-teal-900\/40, .bg-rose-900\/40, .bg-purple-900\/40 {
background-color: rgba(255, 255, 255, 0.12) !important;
}
/* --- ตัวอักษร --- */
.text-blue-600, .text-blue-700, .text-blue-800 {
color: var(--brand-red) !important;
}
.text-blue-900 {
color: var(--brand-black) !important;
}
.text-blue-100, .text-blue-200 {
color: #fecaca !important;
}
/* --- เส้นขอบ --- */
.border-blue-100, .border-blue-200,
.border-teal-100, .border-rose-100, .border-purple-100 {
border-color: var(--brand-red-100) !important;
}
.border-blue-500, .border-blue-600 {
border-color: var(--brand-red) !important;
}
.border-l-blue-500 {
border-left-color: var(--brand-red) !important;
}
.border-blue-400\/30, .border-teal-400\/30, .border-rose-400\/30, .border-purple-400\/30 {
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* --- สีของ radio/checkbox --- */
.accent-blue-600 {
accent-color: var(--brand-red) !important;
}
/* --- hover --- */
.hover\:bg-blue-100:hover {
background-color: var(--brand-red-100) !important;
}
.hover\:bg-blue-700:hover {
background-color: var(--brand-red-dark) !important;
}
.hover\:border-blue-400:hover {
border-color: var(--brand-red) !important;
}
/* --- focus --- */
.focus\:border-blue-400:focus,
.focus\:border-blue-500:focus {
border-color: var(--brand-red) !important;
}
/* --- ปุ่มสลับแบบ has-checked (หน้า admin) --- */
.has-\[\:checked\]\:text-blue-700:has(:checked) {
color: var(--brand-red) !important;
}
.has-\[\:checked\]\:border-blue-600:has(:checked) {
border-color: var(--brand-red) !important;
}
.has-\[\:checked\]\:bg-blue-50\/30:has(:checked) {
background-color: var(--brand-red-soft) !important;
}
/* ============================================================
โทนทางการ (Formal): มุมคมขึ้น เงาบางลง นิ่งขึ้น
============================================================ */
.rounded-b-\[1\.5rem\], .rounded-b-\[2rem\] {
border-radius: 0 !important;
}
.rounded-\[1\.5rem\], .rounded-\[1\.25rem\], .rounded-2xl, .rounded-3xl,
.job-card, .form-card, .stat-card {
border-radius: 8px !important;
}
.rounded-xl, .rounded-lg,
.input-field, .btn-primary {
border-radius: 6px !important;
}
.btn-primary {
letter-spacing: 0.12em !important;
}
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08) !important;
}
.animate-pop {
animation: none !important;
}
/* ============================================================
ไอคอน 2D (Material Symbols) — ขนาด/จัดตำแหน่งกลาง
============================================================ */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-size: 1.15em;
line-height: 1;
vertical-align: -0.18em;
}
.btn-icon .material-symbols-outlined {
font-size: 20px;
vertical-align: 0;
}
/* ============================================================
การ์ดคิวงาน: ลูกศรกาง/หุบ + ยกเลิก grayscale ตอนงานเสร็จ
============================================================ */
.card-chevron { transition: transform 0.3s ease; }
.is-expanded .card-chevron { transform: rotate(180deg); }
.job-card.is-done .card-header { filter: none !important; }
/* ============================================================
การ์ดฟอร์ม (หน้า admin): โหมดเข้ม ชาร์โคล + ตัวหนังสือสว่าง
(scope เฉพาะ .form-card ซึ่งมีแค่หน้า admin ใช้)
============================================================ */
.form-card {
background: #1f2937 !important;
border: 1px solid #374151 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}
.form-card h2 { color: #f1f5f9 !important; }
.form-card .input-label { color: #cbd5e1 !important; }
.form-card .text-slate-600:not(.input-field) { color: #cbd5e1 !important; }
.form-card p.text-slate-500 { color: #94a3b8 !important; }
.form-card .border-dashed { border-color: #374151 !important; }
.form-card h2 .material-symbols-outlined {
background: #fee2e2 !important;
color: #dc2626 !important;
border-radius: 6px !important;
padding: 3px !important;
font-size: 15px !important;
vertical-align: middle !important;
}
/* ============================================================
หมายเหตุ:
- สีสถานะที่มีความหมาย (เขียว=เสร็จ, ส้ม=งานแก้ไข, แดง=เก็บเงิน) ไม่แตะ
- meta theme-color มือถือ แก้ใน HTML:
============================================================ */