/* ============================================================
   WAGONCAM — AURORA GLASS · DUSK  (ธีมกลางใช้ได้ทุกหน้า)
   วิธีใช้: ใส่ใน <head> ของแต่ละหน้า "ท้ายสุด" (ต่อจาก bootstrap + theme.css + <style> ของหน้า)
     <meta name="theme-color" content="#cf4b66">
     <link rel="stylesheet" href="aurora-dusk.css">
   เอฟเฟกต์กระจก (backdrop-filter) ใช้ได้บนเบราว์เซอร์ใหม่
   ============================================================ */
        /* ============================================================
           WAGONCAM Store POS — AURORA GLASS
           กระจกฝ้าโปร่ง + พื้นออโรร่า + แอคเซนต์ไล่เฉดม่วง→ชมพู
           แก้เฉพาะหน้าตา ไม่แตะ logic / id เดิม
           ============================================================ */
        :root{
          --grad:linear-gradient(135deg,#e2581c 0%, #cf4b66 50%, #9f1239 100%);
          --accent:#c2410c; --accent-2:#be185d; --primary-color:#c2410c;
          --ink:#3a2329; --ink-2:#5e4148; --muted:#8f6b73; --muted-2:#b5949c;
          --glass:rgba(255,255,255,.54); --glass-strong:rgba(255,255,255,.62); --glass-weak:rgba(255,255,255,.38);
          --gborder:rgba(255,255,255,.62); --hair:rgba(90,45,55,.16); --ifield:rgba(130,85,90,.26);
          --shadow:0 8px 26px -12px rgba(110,45,60,.36); --shadow-lg:0 18px 42px -16px rgba(110,45,60,.46);
          --ring:0 0 0 3px rgba(194,65,12,.22);
          --ok:#15803d; --ok-bg:rgba(220,252,231,.72); --ok-line:rgba(134,209,160,.7);
          --danger:#b91c1c; --danger-bg:rgba(254,226,226,.82); --danger-line:rgba(248,180,180,.85);
          --radius:18px; --radius-sm:12px;
        }
        *{ -webkit-tap-highlight-color:transparent; }
        body{
          font-family:'Sarabun',system-ui,sans-serif; color:var(--ink);
          letter-spacing:.1px; min-height:100vh;
          background:
            radial-gradient(58% 48% at 6% -4%, #efb074 0%, rgba(239,176,116,0) 60%),
            radial-gradient(54% 44% at 99% 3%, #e294a2 0%, rgba(226,148,162,0) 60%),
            radial-gradient(70% 60% at 50% 106%, #9a597a 0%, rgba(154,89,122,0) 64%),
            linear-gradient(180deg,#f0e6dd 0%, #e6dae0 100%);
          background-attachment:fixed;
        }
        .num,.net-amount,.btn-main-amount{ font-variant-numeric:tabular-nums; }

        /* ---------- Header (glass) ---------- */
        .app-header{
          position:sticky; top:0; z-index:1020; display:flex; justify-content:space-between; align-items:center; gap:12px;
          padding:12px 18px; background:rgba(255,255,255,.5);
          -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
          border-bottom:1px solid var(--gborder); box-shadow:0 6px 22px -10px rgba(110,45,60,.3);
        }
        .brand-block{ display:flex; flex-direction:column; line-height:1.05; }
        .brand-mark{ font-weight:800; font-size:18px; letter-spacing:1.4px;
          background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent); }
        .brand-sub{ font-size:10.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); margin-top:3px; }
        .header-actions{ display:flex; align-items:center; gap:8px; }
        .hbtn{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.55); color:var(--accent);
          border:1px solid var(--gborder); font-size:12px; font-weight:700; padding:7px 12px; border-radius:10px;
          -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
        .hbtn:active{ background:rgba(255,255,255,.75); color:var(--accent); }
        .user-pill{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.5); color:var(--ink-2);
          border:1px solid var(--gborder); font-size:12px; font-weight:700; padding:7px 12px; border-radius:10px; max-width:150px; }
        .user-pill span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

        /* ---------- Glass surfaces ---------- */
        .scan-panel,.totals,.field-panel,.vat-switch,.tax-box{
          background:var(--glass-strong);
          -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          border:1px solid var(--gborder); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.55);
        }
        .main-card{
          background:var(--glass-weak);
          -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
          border:1px solid var(--gborder); border-radius:var(--radius);
          box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.5) !important;
          padding:18px 16px;
        }

        /* ---------- Eyebrows ---------- */
        .section-eyebrow,.field-eyebrow,.scan-eyebrow{ font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); }
        .section-eyebrow{ display:flex; align-items:center; gap:10px; margin:20px 0 12px; }
        .section-eyebrow::after{ content:""; flex:1; height:1px; background:var(--hair); }
        .field-eyebrow{ margin-bottom:8px; color:var(--ink-2); }
        .field-eyebrow i,.scan-eyebrow i{ color:var(--accent); }

        /* ---------- Inputs ---------- */
        .form-control,.form-select{
          background:rgba(255,255,255,.55); border:1px solid var(--ifield); border-radius:10px; color:var(--ink); font-weight:600;
          -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
        }
        .form-control:focus,.form-select:focus{ background:rgba(255,255,255,.82); border-color:var(--accent); box-shadow:var(--ring); }
        .form-control::placeholder{ color:var(--muted-2); }
        .form-floating>label{ color:var(--muted); font-weight:600; }
        .input-group-text{ background:rgba(255,255,255,.5); border:1px solid var(--ifield); color:var(--muted); }
        .input-group .bg-light{ background:rgba(255,255,255,.5)!important; }
        .btn-gen{ background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:10px; font-weight:700; padding:0 14px; }
        .btn-gen:hover,.btn-gen:focus{ filter:brightness(1.06); color:#fff; }

        /* ---------- Scan panel ---------- */
        .scan-panel{ position:relative; overflow:hidden; border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px; }
        .scan-panel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); box-shadow:0 0 12px rgba(207,75,102,.5); }
        .scan-eyebrow{ margin-bottom:8px; }
        .scan-row{ display:flex; align-items:center; gap:8px; }
        .smart-input{ flex:1; height:46px; border:1px solid var(--ifield); border-radius:10px; background:rgba(255,255,255,.55); color:var(--ink);
          font-weight:700; font-size:14px; letter-spacing:.6px; text-align:center; transition:.15s; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
        .smart-input::placeholder{ font-weight:600; letter-spacing:0; color:var(--muted-2); }
        .smart-input:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.85); box-shadow:var(--ring); }
        .scan-btn{ height:46px; width:46px; flex:0 0 46px; border-radius:10px; border:1px solid var(--gborder); background:rgba(255,255,255,.6); color:var(--accent); font-size:16px;
          -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
        .scan-btn:active{ background:rgba(255,255,255,.82); }

        /* ---------- Item rows ---------- */
        .item-row{ position:relative; overflow:hidden; background:var(--glass-strong);
          -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          border:1px solid var(--gborder); border-radius:var(--radius-sm);
          box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.55) !important;
          padding:14px; margin-bottom:12px; animation:slideIn .22s ease; }
        .item-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); box-shadow:0 0 12px rgba(159,18,57,.45); }
        @keyframes slideIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
        .item-seq{ background:var(--grad)!important; color:#fff; font-weight:700; border-radius:7px!important; letter-spacing:.5px; box-shadow:0 2px 8px -2px rgba(207,75,102,.5); }
        .item-row .product-name{ color:var(--ink)!important; }
        .item-row .product-price{ color:var(--accent)!important; }
        .btn-remove{ background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line); width:30px; height:30px; border-radius:9px; font-size:12px; }
        .btn-remove:active{ background:rgba(255,210,218,.92); }
        .item-row .btn-secondary{ background:rgba(255,255,255,.55); border:1px solid var(--gborder); color:var(--ink-2); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
        .sn-input{ font-size:13px!important; color:var(--ink)!important; letter-spacing:.6px; font-weight:700; }
        .special-input{ background:rgba(255,255,255,.5); border:1px solid var(--gborder); margin-top:8px; border-radius:10px; padding:10px; display:none; }
        .stock-info{ font-size:11px; margin-top:8px; padding:8px 10px; border-radius:10px; font-weight:700; display:block; line-height:1.5; border:1px solid transparent; }
        .stock-available{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
        .stock-empty{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }
        .stock-detail-row{ display:flex; justify-content:space-between; border-bottom:1px dashed rgba(90,45,55,.15); padding-bottom:3px; margin-bottom:3px; }
        .stock-detail-row:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }

        /* ---------- Totals ---------- */
        .totals{ border-radius:var(--radius-sm); padding:4px 16px; margin:6px 0 16px; }
        .totals-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; font-size:14px; color:var(--ink-2); border-bottom:1px dashed var(--hair); }
        .totals-row > span:first-child{ color:var(--muted); font-weight:600; }
        .totals-row .num{ font-weight:700; color:var(--ink); }
        .discount-control{ display:flex; align-items:center; gap:6px; }
        .disc-input{ width:96px; height:36px; text-align:right; font-weight:700; color:var(--accent-2); border:1px solid var(--ifield); border-radius:9px; padding:0 8px; background:rgba(255,255,255,.6); }
        .disc-input:focus{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(219,39,119,.18); }
        .disc-type{ height:36px; border:1px solid var(--ifield); border-radius:9px; font-weight:700; padding:0 6px; background:rgba(255,255,255,.6); color:var(--ink); }
        .net-row{ border-bottom:0; padding:14px 0 12px; border-top:1px solid var(--hair); }
        .net-row > span:first-child{ font-size:15px; font-weight:800; color:var(--ink); }
        .net-amount{ font-size:25px; font-weight:800; color:var(--accent);
          background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

        /* ---------- Field panels ---------- */
        .field-panel{ border-radius:var(--radius-sm); padding:14px; margin-bottom:14px; }
        .vat-switch{ border-radius:12px; padding:12px 14px 12px 52px; margin-bottom:14px; min-height:auto; display:flex; align-items:center; }
        .vat-switch .form-check-input{ width:44px; height:24px; margin-left:-38px; margin-top:0; cursor:pointer; background-color:rgba(255,255,255,.6); border-color:var(--gborder); }
        .vat-switch .form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
        .vat-switch .form-check-label{ color:var(--ink); }
        .tax-box{ border-radius:var(--radius-sm); padding:14px; margin-bottom:14px; }

        /* ---------- Footer action ---------- */
        .footer-submit{ position:fixed; bottom:0; left:0; width:100%; background:rgba(255,255,255,.5);
          -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
          padding:12px 16px calc(12px + env(safe-area-inset-bottom)); z-index:1000;
          border-top:1px solid var(--gborder); box-shadow:0 -8px 26px -10px rgba(110,45,60,.3); }
        .btn-main{ width:100%; height:56px; border-radius:16px; border:none; cursor:pointer; background:var(--grad); color:#fff; font-weight:800;
          display:flex; justify-content:center; gap:9px; align-items:center; padding:0 20px; font-size:16px;
          box-shadow:0 10px 26px -8px rgba(207,75,102,.6), inset 0 1px 0 rgba(255,255,255,.35);
          transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
        .btn-main:hover{ filter:brightness(1.04); }
        .btn-main:active{ transform:translateY(1px); box-shadow:0 4px 14px -6px rgba(207,75,102,.6), inset 0 1px 0 rgba(255,255,255,.25); }
        .btn-main-label{ display:inline-flex; align-items:center; gap:9px; }
        .btn-main-amount{ font-size:18px; }

        /* ---------- Scanner / receipt ---------- */
        #reader{ width:100%; min-height:250px; background:#000; border-radius:16px; display:none; margin-bottom:15px; border:3px solid var(--accent); }
        #receiptArea{ display:none; }

        :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
        @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

        @media print {
            @page { size: 80mm auto; margin: 0; }
            body * { visibility: hidden; }
            #receiptArea, #receiptArea * { visibility: visible; }
            #receiptArea { display: block !important; position: absolute; left: 0; top: 0; width: 80mm; margin: 0; padding: 0; font-size: 12px; color: black !important; background: white; }
            .no-print { display: none !important; }
        }
    

        /* ===== GENERIC HELPERS (Bootstrap/คอมโพเนนต์ทั่วไป) ===== */
        a:not(.btn){ color:var(--accent); }
        a:not(.btn):hover{ color:var(--accent-2); }
        .text-primary{ color:var(--accent)!important; }
        .text-success{ color:var(--ok)!important; }
        .btn-primary{ background:var(--grad); border:none; color:#fff; font-weight:700; border-radius:12px;
          box-shadow:0 8px 20px -8px rgba(159,18,57,.5), inset 0 1px 0 rgba(255,255,255,.3); }
        .btn-primary:hover,.btn-primary:focus,.btn-primary:active{ filter:brightness(1.04); color:#fff; background:var(--grad); }
        .btn-outline-primary{ color:var(--accent); border:1px solid var(--accent); border-radius:12px; font-weight:700; background:rgba(255,255,255,.4); }
        .btn-outline-primary:hover{ background:var(--accent); color:#fff; }
        .btn-success{ background:var(--ok); border:none; color:#fff; font-weight:700; border-radius:12px; }
        .card{ background:var(--glass-strong); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          border:1px solid var(--gborder); border-radius:var(--radius-sm); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.5); }
        .card-header{ background:transparent; border-bottom:1px solid var(--hair); font-weight:700; color:var(--ink); }
        .modal-content{ background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
          border:1px solid var(--gborder); border-radius:16px; box-shadow:var(--shadow-lg); color:var(--ink); }
        .modal-header,.modal-footer{ border-color:var(--hair); }
        .table{ color:var(--ink); }
        .table thead th{ color:var(--muted); font-weight:800; font-size:11px; letter-spacing:.6px; text-transform:uppercase; border-bottom:1px solid var(--hair); }
        .table td,.table th{ border-color:var(--hair); }
        .table-hover tbody tr:hover{ background:rgba(255,255,255,.45); }
        .nav-pills .nav-link{ color:var(--ink-2); font-weight:700; border-radius:10px; }
        .nav-pills .nav-link.active{ background:var(--accent); color:#fff; }
        .form-switch .form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
        .badge.bg-primary{ background:var(--accent)!important; }
        .badge.bg-success{ background:var(--ok)!important; }
        hr{ border-color:var(--hair); opacity:1; }

        /* ============================================================
           PAGE OVERRIDES — คลาสเฉพาะของแต่ละหน้าในระบบ (เน้นสีพื้น/ขอบ/เงา ไม่ยุ่ง layout)
           ============================================================ */
        /* หัวหน้าจอ (header ทุกแบบ) */
        .app-header, .app-header--report{
          background:rgba(255,255,255,.5)!important; color:var(--ink)!important;
          -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
          border-bottom:1px solid var(--gborder)!important; box-shadow:0 6px 22px -10px rgba(110,45,60,.3)!important;
        }
        .app-header h4,.app-header h5,.app-header .fw-bold{ color:var(--ink); }
        .app-header .opacity-75{ color:var(--muted)!important; opacity:1!important; }
        .app-header .btn-light{ background:rgba(255,255,255,.55)!important; color:var(--accent)!important; border:1px solid var(--gborder)!important; }

        /* home.html */
        .home-header{ background:var(--grad)!important; box-shadow:0 12px 30px -10px rgba(159,18,57,.4)!important; }
        .menu-card{ background:var(--glass-strong)!important; border:1px solid var(--gborder)!important; box-shadow:var(--shadow)!important; color:var(--ink-2)!important; }
        .menu-card h6{ color:var(--ink)!important; }

        /* index.html (login) */
        .login-card{ background:rgba(255,255,255,.93)!important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--gborder); box-shadow:var(--shadow-lg)!important; }
        .btn-login{ background:var(--grad)!important; box-shadow:0 10px 24px -8px rgba(159,18,57,.5)!important; }
        .custom-input:focus{ border-color:var(--accent)!important; background:#fff!important; box-shadow:var(--ring)!important; }
        .logo-box i{ color:var(--accent)!important; }

        /* แผงแบบ POS เดิม (online-orders, claim) */
        .smart-scan-box, .price-summary, .payment-method-box, .stock-cut-box, .manual-date-box, .info-box{
          background:var(--glass-strong)!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          border:1px solid var(--gborder)!important; border-radius:var(--radius-sm)!important; box-shadow:var(--shadow);
        }

        /* การ์ด/กล่องทั่วระบบ (report, dashboard, stock, ai-stock, service, my-bills, register, barcode, users) */
        .stat-card, .total-card, .data-card, .summary-card, .summary-box, .recommend-box,
        .card-dash, .card-head, .result-box, .table-card, .table-custom, .filter-card,
        .filter-box, .search-box, .bill-item, .nav-container, .tab-btn-group, .stock-item,
        .user-item, .upload-area, .date-picker-row{
          background:var(--glass-strong)!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
          border:1px solid var(--gborder)!important; border-radius:var(--radius-sm); box-shadow:var(--shadow);
        }
        .stat-val.text-primary, .data-val.text-primary{ color:var(--accent)!important; }

        /* แท็บ/พิลล์ที่ active -> สีแบรนด์ */
        .nav-active, .nav-tab.nav-active, .tab-btn.active, .chan-pill.active, .scope-pill.active,
        .cat-chip.active, .branch-chip.active, .metric-toggle.active{
          background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important;
        }

        /* ปุ่มลอย (FAB) */
        .btn-home-fab, .fab-home, .fab-btn, .btn-fab{
          background:var(--grad)!important; color:#fff!important; border:none!important;
          box-shadow:0 10px 22px -6px rgba(159,18,57,.5)!important;
        }
        .role-boss{ background:var(--accent)!important; color:#fff!important; }

        /* พิมพ์: พื้นขาว ไม่เอาเงา/กระจก */
        @media print{
          body{ background:#fff !important; }
          .app-header, .app-header--report, .home-header, .btn-home-fab, .fab-btn, .fab-home, .footer-submit{ box-shadow:none !important; }
        }
