/* ===== Theme variables (ค่าเริ่มต้น — ถูก override จาก settings.primaryColor) ===== */
  :root { --brand:#db1f26; --brand-dark:#a4171c; }

  /* ===== Base ===== */
  body { font-family: 'Prompt', sans-serif; }
  .hidden-view { display: none; }

  /* ===== Status badges (สีตามสถานะงาน) ===== */
  .st-รอคิวอยู่      { background:#fef3c7; color:#92400e; }
  .st-กำลังดำเนินการ { background:#dbeafe; color:#1e40af; }
  .st-เสร็จแล้ว      { background:#d1fae5; color:#065f46; }
  .st-ขอแก้ไข        { background:#fee2e2; color:#991b1b; }
  .st-กำลังแก้ไข     { background:#fed7aa; color:#9a3412; }
  .st-แก้เสร็จแล้ว   { background:#ccfbf1; color:#115e59; }
  .st-ปิดจบงาน       { background:#e5e7eb; color:#374151; }
  .st-ปิดการขาย      { background:#1f2937; color:#f9fafb; }

  /* ===== Spinner ===== */
  .spin { animation: sp 0.8s linear infinite; }
  @keyframes sp { to { transform: rotate(360deg); } }

  /* ===== Form controls ===== */
  .lbl { display:block; font-size:.8rem; color:#475569; margin-bottom:.25rem; font-weight:500; }
  .inp { width:100%; border:1px solid #cbd5e1; border-radius:.6rem; padding:.55rem .75rem; font-size:.9rem; outline:none; background:#fff; }
  .inp:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
  .inpfile { width:100%; font-size:.85rem; }
  .inpfile::file-selector-button { border:0; background:#e2e8f0; padding:.45rem .8rem; border-radius:.5rem; margin-right:.6rem; cursor:pointer; font-family:inherit; }

  /* ===== Buttons ===== */
  .btn-primary { background:var(--brand); color:#fff; border-radius:.7rem; padding:.55rem 1.1rem; font-weight:500; }
  .btn-primary:hover { background:var(--brand-dark); }
  .btn-warn { background:#f59e0b; color:#fff; border-radius:.7rem; padding:.55rem 1.1rem; font-weight:500; }
  .btn-warn:hover { background:#d97706; }
  .btn-dark { background:#1f2937; color:#fff; border-radius:.7rem; padding:.55rem 1.1rem; font-weight:500; }
  .btn-ghost { background:#fff; border:1px solid #cbd5e1; color:#475569; border-radius:.7rem; padding:.55rem 1.1rem; font-weight:500; }
  .btn-ghost:hover { background:#f1f5f9; }

  /* ===== Chips (ตัวกรองสถานะ) ===== */
  .chip { padding:.35rem .9rem; border-radius:9999px; border:1px solid #cbd5e1; font-size:.8rem; background:#fff; color:#475569; }
  .chip-on { background:var(--brand); color:#fff; border-color:var(--brand); }

  /* ===== Contact buttons ===== */
  .contact { color:#fff; border-radius:.7rem; padding:.5rem .9rem; font-size:.85rem; display:inline-flex; align-items:center; gap:.4rem; }

  /* ===== Collapsible (details/summary) — ซ่อนสามเหลี่ยม default ใช้ ▾ เอง ===== */
  summary { list-style:none; cursor:pointer; user-select:none; }
  summary::-webkit-details-marker { display:none; }
  details[open] > summary { color:var(--brand); }

  /* ===== Mobile / touch + base ===== */
  /* สำคัญ: ให้มี scroll container ชั้นเดียว (หน้าต่างเบราว์เซอร์) — ห้ามตั้ง overflow-y
     ทั้ง html และ body พร้อมกัน ไม่งั้นเมาส์วีลบนเดสก์ท็อปจะเลื่อนไม่ได้ ต้องลากแถบ scroll */
  html {
    font-size: 16px;                       /* ฐานขนาดตัวอักษร (rem) กันบางเบราว์เซอร์ย่อ */
    -webkit-text-size-adjust: 100%;        /* กัน iOS/Chrome ปรับขนาดตัวอักษรเอง */
    text-size-adjust: 100%;
  }
  body {
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;     /* เลื่อนลื่นบน iOS */
  }
  /* modal เลื่อนได้ในตัวเองด้วยเมาส์วีล (max-h-[90vh] overflow-auto ตั้งตอน openModal) */
  #modal-box { -webkit-overflow-scrolling: touch; }
  @media (max-width: 640px) {
    /* จอเล็ก: ให้ overlay เลื่อนทั้งก้อน + ชิดบน กันเนื้อหายาวโดนตัด */
    #modal { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 1.25rem; padding-bottom: 1.25rem; }
    #modal-box { max-height: none; }
  }