/* =========================================================
   WAGONCAM — Shared Theme / Design System
   ใช้ร่วมกันทุกหน้า แก้ที่ไฟล์นี้ไฟล์เดียว เปลี่ยนทุกหน้า
   ---------------------------------------------------------
   วิธีใช้ในแต่ละหน้า (ต่อจาก Bootstrap):
     <link rel="stylesheet" href="theme.css">
   แล้วกำหนดสีประจำหน้าใน <style> ของหน้านั้น เช่น
     :root { --primary-color: #059669; }            (POS เขียว)
     :root { --primary-color:#4f46e5; --primary-dark:#3730a3; }  (หัวไล่เฉด)

   หัว (App Bar) มี 3 แบบ:
     <div class="app-header ...">                 → สีพื้นเดียว (= --primary-color)
     <div class="app-header app-header--gradient">→ ไล่เฉด primary → primary-dark
     <div class="app-header app-header--report">  → เทาเข้ม สูง (หน้ารายงาน)
   ========================================================= */

/* ---------- 1. Design Tokens ---------- */
:root {
    --primary-color: #4f46e5;
    --primary-dark:  #3730a3;
    --bg-color:      #f1f5f9;
    --header-dark:   #1e293b;
    --card-radius:   24px;
    --field-radius:  12px;
    --header-radius: 30px;
}

/* ---------- 2. Base ---------- */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: var(--bg-color);
    -webkit-tap-highlight-color: transparent;
    /* padding-bottom ตั้งในแต่ละหน้าตามความสูงของแถบล่าง */
}

/* ---------- 3. App Bar (หัวโค้ง) ---------- */
.app-header {
    background: var(--primary-color);
    color: #fff;
    padding: 15px 20px 30px;
    border-bottom-left-radius: var(--header-radius);
    border-bottom-right-radius: var(--header-radius);
    margin-bottom: -20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.app-header h4, .app-header h5 { margin: 0; font-weight: 700; }
.app-header small { opacity: 0.75; }
.app-header .btn-light.text-primary { color: var(--primary-color) !important; }

/* แบบไล่เฉด */
.app-header.app-header--gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}
/* แบบหน้ารายงาน (เทาเข้ม สูง สำหรับการ์ดกรองลอย) */
.app-header.app-header--report {
    background: var(--header-dark);
    margin-bottom: 0;
    padding: 20px 20px 70px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ป้ายชื่อผู้ใช้ */
.user-pill {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---------- 4. Card ---------- */
.main-card {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 20px;
    margin: 0 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* ---------- 5. Form ---------- */
.form-control, .form-select {
    border-radius: var(--field-radius);
    font-size: 14px;
    border: 1px solid #e2e8f0;
    height: 45px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* ---------- 6. Modal ---------- */
.modal-content { border-radius: var(--card-radius); border: none; overflow: hidden; }

/* ---------- 7. Status badges (ใช้ร่วม) ---------- */
.bg-ok  { background: #dcfce7; color: #166534; }
.bg-low { background: #fee2e2; color: #991b1b; }
.badge-soft-success { background: #dcfce7; color: #166534; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.badge-soft-danger  { background: #fee2e2; color: #991b1b; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; }

/* ---------- 8. Report components (history / report) ---------- */
.filter-card { background: #fff; border-radius: 20px; padding: 20px; margin: -50px 15px 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }
.form-label-sm { font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 4px; }
.stat-card { background: #fff; border-radius: 15px; padding: 15px; height: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); border: 1px solid #f1f5f9; transition: transform 0.2s; }
.stat-card:hover { transform: translateY(-3px); }
.stat-card .stat-label { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .stat-val { font-size: 18px; font-weight: 800; color: #1e293b; margin-top: 5px; }
.table-card { background: #fff; border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); overflow: hidden; padding: 5px; }
.table-card .table thead th { background-color: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; border: none; padding: 12px 8px; }
.table-card .table tbody td { font-size: 13px; vertical-align: middle; border-bottom: 1px dashed #f1f5f9; padding: 12px 8px; }
.table-card .table tbody tr:last-child td { border-bottom: none; }

/* ---------- 9. ปุ่ม Home ลอย ---------- */
.btn-home-fab { position: fixed; bottom: 25px; right: 25px; width: 55px; height: 55px; background: var(--header-dark); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); text-decoration: none; font-size: 22px; z-index: 1000; }

/* ---------- 10. Print (ซ่อนองค์ประกอบจอ) ---------- */
@media print {
    .no-print { display: none !important; }
}
/* หมายเหตุ: หน้าที่พิมพ์ใบเสร็จ 80/58mm (pos/stock/claim/online) ใส่ @media print
   สำหรับ #receiptArea ไว้ในหน้าตัวเองตามเดิม เพราะแต่ละใบกว้างไม่เท่ากัน */