/* ============================================================
   hos-stock: ธีม "data" (แบบที่ 3B: เน้นข้อมูล สีกรมท่าแต้มทอง แถบเมนูสีน้ำเงิน)
   - โหลดต่อจาก app.css และมีผลเฉพาะเมื่อ <html data-theme="data">
   - กลับหน้าตาแบบเดิม: แก้ค่าเริ่มต้นใน <head> ของ index.html ให้เป็น data-theme="classic"
     หรือเอาบรรทัด <link> ของไฟล์นี้ออกจาก index.html ก็ได้ (app.css ไม่ถูกแก้)
   - ไม่แตะหน้า login (#loginOverlay)
   ============================================================ */

html[data-theme="data"] {
  --c-accent: #1f3a5f;
  --c-accent-dark: #172b4d;
  --c-accent-tint: #e8edf3;
  --c-accent-ring: rgba(31, 58, 95, .18);
  --c-gold: #b8963e;
  --c-ink: #111827;
  --c-ink-2: #374151;
  --c-muted: #6b7280;
  --c-faint: #9ca3af;
  --c-line: #e5e7eb;
  --c-line-2: #f3f4f6;
  --c-bg: #ffffff;
  --c-bg-2: #f9fafb;
  --c-warn: #92400e;
  --c-warn-bg: #fef3c7;
  --c-bad: #991b1b;
  --c-bad-bg: #fee2e2;
  --c-good: #15803d;
  --r: 6px;
}

/* ---------- ฟอนต์และขนาดพื้นฐาน (เฉพาะในแอป ไม่รวมหน้า login) ---------- */
html[data-theme="data"] #app,
html[data-theme="data"] .modal-overlay,
html[data-theme="data"] .confirm-overlay,
html[data-theme="data"] #toast {
  font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
  font-size: 17px;
  color: var(--c-ink);
}

html[data-theme="data"] :is(#app, .modal-overlay, .confirm-overlay) :is(button, input, select, textarea, .btn, .sub-btn, .nav-btn, .day-head, .print-date-btn) {
  font-family: inherit;
}

html[data-theme="data"] #app {
  background: var(--c-bg);
}

/* ---------- ไอคอนเส้นแทนอีโมจิ ---------- */
html[data-theme="data"] .ico {
  display: inline-block;
  width: var(--ic, 16px);
  height: var(--ic, 16px);
  vertical-align: -3px;
  font-size: 0 !important;
  line-height: 0;
  overflow: hidden;
  color: inherit;
  background-color: transparent;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  flex-shrink: 0;
}

html[data-theme="data"] .ico[data-ico] {
  background-color: currentColor;
}

html[data-theme="data"] .ico:not([data-ico]),
html[data-theme="data"] .ico[data-ico=""] {
  display: none;
}

/* ---------- แถบข้าง: สีน้ำเงิน กะทัดรัด แบ่งกลุ่ม (โลโก้ย้ายไปแถบบน) ---------- */
html[data-theme="data"] .sidebar {
  width: 232px;
  background: #1f3a5f;
  color: #d7e0ea;
  border-right: 0;
  box-shadow: none;
}

html[data-theme="data"] .sidebar-logo {
  display: block;
  padding: 18px 16px 14px;
  text-align: center;
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

html[data-theme="data"] .sidebar-logo img {
  width: 100%;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  box-shadow: none;
}

html[data-theme="data"] .sidebar-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

html[data-theme="data"] .sidebar-title span {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #b9c6d6;
}

html[data-theme="data"] .sidebar-nav {
  padding: 14px 10px;
  background: transparent;
  gap: 2px;
}

html[data-theme="data"] .nav-group-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #8fa3c0;
  padding: 12px 10px 4px;
}

html[data-theme="data"] .sidebar-nav .nav-btn {
  color: #d7e0ea;
  border: 0;
  border-radius: var(--r);
  padding: 8px 10px;
  font-size: 15.5px;
  font-weight: 500;
  gap: 10px;
  line-height: 1.35;
}

html[data-theme="data"] .sidebar-nav .nav-btn:hover {
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

html[data-theme="data"] .sidebar-nav .nav-btn.active {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-gold);
}

html[data-theme="data"] .nav-icon {
  display: inline-flex;
  font-size: 0;
  line-height: 0;
}

html[data-theme="data"] .nav-icon .ico {
  --ic: 18px;
  vertical-align: 0;
}

html[data-theme="data"] .sidebar-foot {
  padding: 12px 16px !important;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  color: #8fa3c0 !important;
  font-size: 12px !important;
  opacity: 1 !important;
  text-align: center !important;
}

html[data-theme="classic"] .nav-group-label {
  display: none;
}

/* ---------- แถบบน: โลโก้ + ชื่อระบบ | ช่องค้นหา | วันที่ ผู้ใช้ ออกจากระบบ ---------- */
html[data-theme="data"] .main-wrapper header {
  height: auto;
  min-height: 56px;
  padding: 8px 20px;
  gap: 16px;
  border-bottom: 2px solid var(--c-gold);
  box-shadow: none;
  flex-wrap: wrap;
}

html[data-theme="data"] .main-wrapper header .header-left {
  gap: 10px;
}

html[data-theme="data"] .main-wrapper header .header-icon {
  display: none;
}

html[data-theme="data"] .main-wrapper header .header-icon img {
  height: 34px;
  width: 34px;
  object-fit: contain;
}

html[data-theme="data"] .header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

html[data-theme="data"] .main-wrapper header .header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-accent);
  white-space: nowrap;
}

html[data-theme="data"] .main-wrapper header .header-sub {
  font-size: 14px;
  color: var(--c-muted);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

html[data-theme="data"] .main-wrapper header .header-sub::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--c-line);
}

html[data-theme="data"] .header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  flex-wrap: wrap;
}

html[data-theme="data"] .header-date {
  color: var(--c-muted);
  white-space: nowrap;
}

html[data-theme="data"] .header-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.2;
}

html[data-theme="data"] .header-user .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html[data-theme="data"] .header-user small {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 400;
}

html[data-theme="data"] .main-wrapper header .logout-btn {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--r);
  border: 1px solid #d1d5db;
  background: var(--c-bg);
  color: var(--c-ink-2);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

html[data-theme="data"] .main-wrapper header .logout-btn:hover {
  background: var(--c-bg-2);
  border-color: var(--c-faint);
}

html[data-theme="data"] .main-wrapper header .logout-btn .ico {
  --ic: 16px;
}

html[data-theme="data"] main {
  padding: 20px 24px 32px;
  max-width: none;
}

html[data-theme="data"] .main-wrapper {
  background: var(--c-bg);
}

/* ---------- แท็บย่อย ---------- */
html[data-theme="data"] .sub-nav {
  gap: 2px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 18px;
}

html[data-theme="data"] .sub-btn {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  padding: 9px 14px;
  margin-bottom: -1px;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html[data-theme="data"] .sub-btn:hover {
  color: var(--c-ink);
  background: var(--c-bg-2);
}

html[data-theme="data"] .sub-btn.active {
  background: none;
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  font-weight: 600;
}

html[data-theme="data"] .sub-btn .ico {
  --ic: 17px;
}

/* ---------- การ์ด ---------- */
html[data-theme="data"] .card {
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: none;
  margin-bottom: 18px;
}

html[data-theme="data"] .card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 10px;
  margin-bottom: 16px;
  gap: 8px;
}

html[data-theme="data"] .card-title .ico {
  --ic: 20px;
  color: var(--c-accent);
}

/* ชื่อหน้า (card-title ที่อยู่นอกการ์ด) */
html[data-theme="data"] .section > .card-title {
  font-size: 22px !important;
  margin-bottom: 14px !important;
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---------- ปุ่ม ---------- */
html[data-theme="data"] .btn {
  font-size: 15.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--r);
  min-height: 38px;
  gap: 6px;
  line-height: 1.3;
  border: 1px solid transparent;
}

html[data-theme="data"] .btn .ico {
  --ic: 17px;
}

html[data-theme="data"] .btn:hover {
  transform: none;
  box-shadow: none;
}

html[data-theme="data"] .btn-primary,
html[data-theme="data"] .btn-success {
  background: var(--c-accent) !important;
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}

html[data-theme="data"] .btn-primary:hover,
html[data-theme="data"] .btn-success:hover {
  background: var(--c-accent-dark) !important;
  border-color: var(--c-accent-dark);
}

html[data-theme="data"] .btn-outline {
  background: var(--c-bg);
  border: 1px solid #d1d5db;
  color: var(--c-ink-2);
}

html[data-theme="data"] .btn-outline:hover {
  background: var(--c-bg-2);
  border-color: var(--c-faint);
  color: var(--c-ink);
}

html[data-theme="data"] .btn-danger {
  background: var(--c-bg);
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

html[data-theme="data"] .btn-danger:hover {
  background: #fef2f2;
}

html[data-theme="data"] .btn-warning {
  background: var(--c-bg);
  border: 1px solid #d1d5db;
  color: var(--c-warn);
}

html[data-theme="data"] .btn-warning:hover {
  background: #fffbeb;
  border-color: #f0d9a6;
}

html[data-theme="data"] .btn-info {
  background: var(--c-bg) !important;
  border: 1px solid #bfdbfe;
  color: #1d4ed8 !important;
}

html[data-theme="data"] .btn-info:hover {
  background: #eff6ff !important;
}

html[data-theme="data"] .btn-sm {
  font-size: 15px;
  padding: 5px 10px;
  min-height: 30px;
}

html[data-theme="data"] .btn-xs {
  font-size: 14.5px;
  padding: 3px 8px;
  min-height: 28px;
}

html[data-theme="data"] .btn-xs .ico {
  --ic: 16px;
}

html[data-theme="data"] .btn-group {
  gap: 8px;
}

/* ---------- ฟอร์ม ---------- */
html[data-theme="data"] .form-grid {
  gap: 14px;
}

html[data-theme="data"] .form-group {
  gap: 5px;
}

html[data-theme="data"] .form-group label {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink-2);
}

html[data-theme="data"] .form-group label .ico,
html[data-theme="data"] .filter-group label .ico,
html[data-theme="data"] .checkbox-filter-title .ico {
  --ic: 16px;
  color: var(--c-muted);
  margin-right: 2px;
}

html[data-theme="data"] .form-group input,
html[data-theme="data"] .form-group select,
html[data-theme="data"] .form-group textarea,
html[data-theme="data"] .filter-group input,
html[data-theme="data"] .filter-group select {
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: var(--r);
  font-size: 16px;
  min-height: 40px;
  color: var(--c-ink);
  background: var(--c-bg);
}

html[data-theme="data"] .form-group input:focus,
html[data-theme="data"] .form-group select:focus,
html[data-theme="data"] .form-group textarea:focus,
html[data-theme="data"] .filter-group input:focus,
html[data-theme="data"] .filter-group select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}

html[data-theme="data"] .form-group input[readonly] {
  background: var(--c-line-2);
  color: var(--c-muted);
}

html[data-theme="data"] .form-group .hint {
  font-size: 14px;
  color: var(--c-muted);
}

html[data-theme="data"] .datalist-dropdown {
  border: 1px solid var(--c-faint);
  border-radius: var(--r);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}

html[data-theme="data"] .datalist-dropdown div {
  padding: 8px 10px;
  font-size: 16px;
  border-bottom: 1px solid var(--c-line-2);
}

html[data-theme="data"] .datalist-dropdown div:hover {
  background: var(--c-accent-tint);
  color: var(--c-ink);
}

/* ---------- ตัวกรอง ---------- */
html[data-theme="data"] .filter-bar {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: none;
}

html[data-theme="data"] .filter-row {
  gap: 10px;
}

html[data-theme="data"] .filter-group {
  gap: 4px;
}

html[data-theme="data"] .filter-group label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink-2);
}

html[data-theme="data"] .filter-group input,
html[data-theme="data"] .filter-group select {
  padding: 6px 10px;
  min-height: 38px;
  min-width: 150px;
}

html[data-theme="data"] .checkbox-filter {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 10px 12px;
}

html[data-theme="data"] .checkbox-filter-title {
  font-size: 14.5px;
  margin-bottom: 6px;
  color: var(--c-ink-2);
}

html[data-theme="data"] .checkbox-list {
  gap: 5px;
}

html[data-theme="data"] .checkbox-list label {
  font-size: 15.5px;
  gap: 6px;
}

html[data-theme="data"] .checkbox-list input[type=checkbox],
html[data-theme="data"] #app input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--c-accent);
}

/* ---------- ตาราง ---------- */
html[data-theme="data"] table {
  font-size: 15.5px;
}

html[data-theme="data"] thead {
  background: var(--c-bg) !important;
  color: var(--c-ink-2);
}

html[data-theme="data"] thead th {
  padding: 7px 10px;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 2px solid var(--c-line);
}

html[data-theme="data"] thead th:hover {
  background: var(--c-line-2);
}

html[data-theme="data"] thead th .sort-icon {
  color: var(--c-accent);
  opacity: 1;
}

html[data-theme="data"] tbody tr {
  border-bottom: 1px solid var(--c-line-2);
}

html[data-theme="data"] tbody tr:nth-child(even) {
  background: var(--c-bg-2);
}

html[data-theme="data"] tbody tr:hover {
  background: #eef2f7;
}

html[data-theme="data"] tbody td {
  padding: 6px 10px;
}

html[data-theme="data"] tbody tr.low-stock,
html[data-theme="data"] tbody tr.low-stock:nth-child(even) {
  background: #fef9ec;
}

html[data-theme="data"] tbody tr.low-stock:hover {
  background: #fdf2d0;
}

html[data-theme="data"] tbody tr.out-stock,
html[data-theme="data"] tbody tr.out-stock:nth-child(even) {
  background: #fef2f2;
}

html[data-theme="data"] tbody tr.out-stock:hover {
  background: #fde2e2;
}

html[data-theme="data"] .monthly-table th {
  border-color: var(--c-line);
}

html[data-theme="data"] .monthly-table .cat-row {
  background: var(--c-line-2);
  color: var(--c-ink);
}

html[data-theme="data"] .issue-items-table th {
  background: var(--c-bg-2);
  font-size: 14.5px;
  padding: 7px 10px;
}

html[data-theme="data"] .issue-items-table td {
  padding: 7px 10px;
}

html[data-theme="data"] .issue-items-table tfoot tr {
  background: var(--c-bg-2) !important;
}

html[data-theme="data"] .req-table thead th {
  padding: 6px 8px;
}

/* ป้ายหมวด: ข้อความล้วน สีกลาง */
html[data-theme="data"] .badge {
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 14px;
  font-weight: 500;
  background: var(--c-line-2);
  color: var(--c-ink-2);
}

html[data-theme="data"] .badge .ico {
  display: none;
}

/* ---------- การ์ดสรุป ---------- */
html[data-theme="data"] .stats-grid {
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 16px;
}

html[data-theme="data"] .stat-card {
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 10px 12px;
  text-align: left;
  box-shadow: none;
}

html[data-theme="data"] .stat-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--c-faint);
}

html[data-theme="data"] .stat-card.active {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}

html[data-theme="data"] .stat-card .stat-icon {
  display: none;
}

html[data-theme="data"] .stat-card .stat-num {
  font-size: 24px;
  color: var(--c-ink);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

html[data-theme="data"] .stat-card .stat-label {
  font-size: 14.5px;
  color: var(--c-muted);
  margin-top: 2px;
}

html[data-theme="data"] .stat-low .stat-num {
  color: var(--c-warn);
}

html[data-theme="data"] .stat-out .stat-num {
  color: var(--c-bad);
}

html[data-theme="data"] .asset-card {
  border-top-width: 3px;
}

html[data-theme="data"] .asset-card .stat-num {
  color: var(--kc);
  font-size: 24px;
}

html[data-theme="data"] .asset-card .stat-label {
  font-size: 15.5px;
  color: var(--c-ink);
}

html[data-theme="data"] .asset-section-label {
  font-size: 16px;
  color: var(--c-ink);
}

html[data-theme="data"] .asset-section-label .ico {
  --ic: 17px;
  color: var(--c-accent);
}

html[data-theme="data"] .asset-import-info {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  font-size: 15.5px;
  padding: 10px 14px;
}

html[data-theme="data"] .asset-import-info b {
  color: var(--c-ink);
}

html[data-theme="data"] .asset-check-list {
  font-size: 15.5px;
}

html[data-theme="data"] .asset-check-list .ok {
  color: var(--c-good);
}

html[data-theme="data"] .report-summary-box {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 10px 14px;
}

html[data-theme="data"] .report-summary-box div {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--c-ink-2);
}

html[data-theme="data"] .report-summary-box span {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html[data-theme="data"] .export-row {
  margin-bottom: 10px;
}

/* ---------- ประวัติเบิกจ่าย: กลุ่มตามวัน ---------- */
html[data-theme="data"] .day-summary {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  font-size: 15.5px;
  padding: 10px 14px;
}

html[data-theme="data"] .day-summary b {
  color: var(--c-ink);
}

html[data-theme="data"] .day-row {
  border-radius: var(--r);
}

html[data-theme="data"] .day-row.open {
  border-color: var(--c-faint);
  box-shadow: none;
}

html[data-theme="data"] .day-head {
  padding: 10px 14px;
  font-size: 15.5px;
}

html[data-theme="data"] .day-row.open .day-head {
  background: var(--c-bg-2);
}

html[data-theme="data"] .day-chevron {
  color: var(--c-muted);
}

html[data-theme="data"] .day-date {
  font-size: 16px;
  color: var(--c-ink);
}

html[data-theme="data"] .day-weekday,
html[data-theme="data"] .pd-weekday {
  background: var(--c-line);
  color: var(--c-ink-2);
  border-radius: 4px;
  font-size: 14px;
}

html[data-theme="data"] .day-amount {
  color: var(--c-ink);
}

html[data-theme="data"] .day-pill {
  border-radius: 4px;
  background: var(--c-line-2);
  font-size: 14px;
}

html[data-theme="data"] .day-body {
  background: var(--c-bg);
  padding: 10px 14px 14px;
}

html[data-theme="data"] .req-block {
  border-radius: var(--r);
  padding: 10px 12px;
}

html[data-theme="data"] .req-name {
  color: var(--c-ink);
  font-size: 16px;
}

html[data-theme="data"] .req-name .ico,
html[data-theme="data"] .day-meta .ico,
html[data-theme="data"] .pd-meta .ico {
  --ic: 15px;
  color: var(--c-muted);
}

/* ---------- พิมพ์ใบเบิก ---------- */
html[data-theme="data"] .print-dates {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
}

html[data-theme="data"] .print-dates-title {
  color: var(--c-ink);
  font-size: 16px;
}

html[data-theme="data"] .print-dates-tools input,
html[data-theme="data"] .print-date-pick input {
  border: 1px solid #d1d5db;
  border-radius: var(--r);
  font-size: 15.5px;
  padding: 7px 10px;
}

html[data-theme="data"] .print-dates-tools input:focus,
html[data-theme="data"] .print-date-pick input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}

html[data-theme="data"] .print-date-btn {
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 8px 10px;
}

html[data-theme="data"] .print-date-btn:hover {
  border-color: var(--c-faint);
  background: var(--c-bg);
}

html[data-theme="data"] .print-date-btn.active {
  background: var(--c-accent-tint);
  border-color: var(--c-accent);
  box-shadow: none;
}

html[data-theme="data"] .pd-date {
  color: var(--c-ink);
  font-size: 16px;
}

html[data-theme="data"] .print-date-btn.active .pd-date,
html[data-theme="data"] .print-date-btn.active .pd-meta,
html[data-theme="data"] .print-date-btn.active .pd-stats {
  color: var(--c-ink);
}

html[data-theme="data"] .print-date-btn.active .pd-weekday {
  background: var(--c-accent);
  color: #fff;
}

html[data-theme="data"] .print-month-label {
  font-size: 14px;
}

html[data-theme="data"] .print-day-head {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 10px 14px;
}

html[data-theme="data"] .print-day-title {
  font-size: 16.5px;
}

html[data-theme="data"] .print-day-title b {
  color: var(--c-ink);
}

html[data-theme="data"] .print-preview-label {
  color: var(--c-ink);
  font-size: 16px;
}

html[data-theme="data"] .pdf-iframe,
html[data-theme="data"] #reg-iframe {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r) !important;
}

html[data-theme="data"] .print-summary {
  border-radius: var(--r);
}

html[data-theme="data"] .print-summary summary {
  color: var(--c-ink);
  font-size: 16px;
}

html[data-theme="data"] .print-hint {
  font-size: 15px;
}

/* ---------- Modal / Confirm / Toast ---------- */
html[data-theme="data"] .modal {
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}

html[data-theme="data"] .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-line);
}

html[data-theme="data"] .modal-header h3 {
  font-size: 18px;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="data"] .modal-header h3 .ico {
  --ic: 20px;
  color: var(--c-accent);
}

html[data-theme="data"] .modal-header h3 img {
  height: 22px;
  margin-right: 0;
}

html[data-theme="data"] .modal-close {
  font-size: 22px;
  color: var(--c-muted);
}

html[data-theme="data"] .modal-body {
  padding: 20px;
}

html[data-theme="data"] .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--c-line);
  gap: 8px;
}

html[data-theme="data"] .item-info-box {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 12px;
}

html[data-theme="data"] .item-info-row {
  font-size: 15.5px;
}

html[data-theme="data"] .item-info-row span {
  color: var(--c-ink);
}

html[data-theme="data"] .confirm-box {
  border-radius: 8px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}

html[data-theme="data"] .confirm-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
}

html[data-theme="data"] .confirm-icon .ico {
  --ic: 40px;
  color: var(--c-accent);
  vertical-align: 0;
}

html[data-theme="data"] .confirm-title {
  font-size: 19px;
  color: var(--c-ink);
}

html[data-theme="data"] .confirm-msg {
  font-size: 16px;
  color: var(--c-ink-2);
  margin-bottom: 20px;
}

html[data-theme="data"] .confirm-btns {
  gap: 8px;
}

html[data-theme="data"] #toast {
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

html[data-theme="data"] #toast.success {
  background: var(--c-good);
}

html[data-theme="data"] #toast.error {
  background: #b91c1c;
}

html[data-theme="data"] #toast.info {
  background: #1f2937;
}

/* ---------- อื่น ๆ ---------- */
html[data-theme="data"] .loading,
html[data-theme="data"] .no-data {
  font-size: 16px;
  color: var(--c-muted);
  padding: 32px;
}

html[data-theme="data"] .no-data .ico {
  --ic: 20px;
  vertical-align: -4px;
  margin-right: 4px;
}

html[data-theme="data"] .spinner {
  border-top-color: var(--c-accent);
}

html[data-theme="data"] .app-footer {
  font-size: 14px;
  color: var(--c-faint);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding: 14px;
}

html[data-theme="data"] .app-footer img {
  height: 22px;
}

/* ข้อความสีน้ำเงินที่ใส่ inline ไว้ในหน้าเดิม → สีเข้มกลาง */
html[data-theme="data"] [style*="color:#1e429f"],
html[data-theme="data"] [style*="color: #1e429f"],
html[data-theme="data"] [style*="color:#1a56db"],
html[data-theme="data"] [style*="color:#4a5568"] {
  color: var(--c-ink) !important;
}

html[data-theme="data"] #excel-preview-area > div:first-child,
html[data-theme="data"] #reg-pdf-preview > div:first-child {
  font-size: 16px !important;
}

html[data-theme="data"] .import-error-text {
  font-size: 14.5px;
}

html[data-theme="data"] .asset-code {
  font-size: 14.5px;
}

/* ---------- จอเล็ก ---------- */
@media (max-width: 768px) {
  html[data-theme="data"] .nav-group-label {
    display: none;
  }

  html[data-theme="data"] main {
    padding: 14px;
  }
}

/* ---- ไอคอนเส้น (mask) แทนอีโมจิ: สร้างโดย design/ui-concepts/gen-icons.pl ---- */
html[data-theme="data"] .ico[data-ico="alert"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="arrow-left"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="arrow-up"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="book"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5v14Z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="box"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8Z'/%3E%3Cpath d='m3 8 9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="briefcase"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="building"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 8h2'/%3E%3Cpath d='M13 8h2'/%3E%3Cpath d='M9 12h2'/%3E%3Cpath d='M13 12h2'/%3E%3Cpath d='M9 16h2'/%3E%3Cpath d='M13 16h2'/%3E%3Cpath d='M10 21v-3h4v3'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="calendar"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M3 11h18'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="chart"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-8'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-6'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="check"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="clock"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="download"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="edit"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="eye"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="file-text"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="folder"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="folder-open"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M3 18V7'/%3E%3Cpath d='m3 18 2.5-7H22l-2.5 7Z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="hash"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M10 3 8 21'/%3E%3Cpath d='M16 3l-2 18'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="help"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .9-1 1.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="home"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="inbox"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13l3.5 7v7H2v-7Z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="landmark"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9'/%3E%3Cpath d='M19 21V9'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3Cpath d='m2 9 10-6 10 6'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="laptop"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="layout"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M3 9h6'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="list"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Cpath d='M4 6h.01'/%3E%3Cpath d='M4 12h.01'/%3E%3Cpath d='M4 18h.01'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="logout"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="money"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 12h.01'/%3E%3Cpath d='M18 12h.01'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="pill"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 20.5 20.5 10.5a4.95 4.95 0 0 0-7-7L3.5 13.5a4.95 4.95 0 0 0 7 7Z'/%3E%3Cpath d='m8.5 8.5 7 7'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="plug"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5'/%3E%3Cpath d='M15 2v5'/%3E%3Cpath d='M6 7h12v4a6 6 0 0 1-12 0Z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="plus"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="printer"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='4' y='9' width='16' height='8' rx='1'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="receipt"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-2.5-1.5L14 21l-2-1.5L10 21l-2.5-1.5L5 21Z'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="refresh"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="ruler"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17 17 3l4 4L7 21Z'/%3E%3Cpath d='m7 11 2 2'/%3E%3Cpath d='m10 8 2 2'/%3E%3Cpath d='m13 5 2 2'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="save"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="search"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="settings"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h8'/%3E%3Cpath d='M18 6h2'/%3E%3Cpath d='M4 12h2'/%3E%3Cpath d='M12 12h8'/%3E%3Cpath d='M4 18h10'/%3E%3Cpath d='M20 18h0'/%3E%3Ccircle cx='15' cy='6' r='2.5'/%3E%3Ccircle cx='9' cy='12' r='2.5'/%3E%3Ccircle cx='17' cy='18' r='2.5'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="store"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 1-5h16l1 5'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="sun"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.9 4.9 1.4 1.4'/%3E%3Cpath d='m17.7 17.7 1.4 1.4'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m4.9 19.1 1.4-1.4'/%3E%3Cpath d='m17.7 6.3 1.4-1.4'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="tooth"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5c-1.5-1.5-5-2-6.5 1C4 9.5 6 12 6.5 14c.5 2.5.8 7 2.5 7s1.5-5 3-5 1.3 5 3 5 2-4.5 2.5-7c.5-2 2.5-4.5 1-7.5-1.5-3-5-2.5-6.5-1Z'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="trash"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="tray-down"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 17v3h16v-3'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="tray-up"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 17v3h16v-3'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="trend-down"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3Cpath d='M16 17h6v-6'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="upload"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="user"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="users"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20a7 7 0 0 1 14 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M22 19a5 5 0 0 0-6-4.9'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="x"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
html[data-theme="data"] .ico[data-ico="x-circle"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E")}

/* จอเล็ก: แถบข้างเต็มความกว้าง เมนูเรียงเป็นแถว */
@media (max-width: 768px) {
  html[data-theme="data"] .sidebar {
    width: 100%;
  }

  html[data-theme="data"] .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }

  html[data-theme="data"] .sidebar-nav .nav-btn {
    padding: 7px 10px;
  }
}

/* ---------- หน้าสต็อกคงเหลือ: ป้ายสรุปข้างชื่อหน้า + ตาราง + แผง "ต้องสั่งซื้อ" ---------- */
html[data-theme="data"] #sec-report.active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

html[data-theme="data"] #sec-report > .card-title {
  margin: 0 !important;
  flex: 0 0 auto;
}

html[data-theme="data"] #sec-report .stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  flex: 1 1 auto;
}

html[data-theme="data"] #sec-report .stat-card {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--c-line-2);
  color: var(--c-ink-2);
}

html[data-theme="data"] #sec-report .stat-card:hover {
  background: var(--c-line);
  border: 0;
}

html[data-theme="data"] #sec-report .stat-card .stat-num {
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  line-height: 1.3;
}

html[data-theme="data"] #sec-report .stat-card .stat-label {
  font-size: 14px;
  color: inherit;
  margin: 0;
  line-height: 1.3;
}

html[data-theme="data"] #sec-report .stat-low {
  background: var(--c-warn-bg);
  color: #78350f;
}

html[data-theme="data"] #sec-report .stat-out {
  background: var(--c-bad-bg);
  color: #7f1d1d;
}

html[data-theme="data"] #sec-report .stat-card.active,
html[data-theme="data"] #sec-report .stat-card.active:hover {
  background: var(--c-accent);
  color: #ffffff;
}

html[data-theme="data"] #sec-report > .card {
  flex: 999 1 560px;
  min-width: 0;
  margin: 0;
  align-self: flex-start;
}

html[data-theme="data"] .side-panel {
  flex: 1 1 280px;
  max-width: 320px;
  align-self: flex-start;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  font-size: 14.5px;
}

html[data-theme="data"] .side-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-line);
  background: #f4f6f9;
  font-weight: 700;
  color: var(--c-accent);
}

html[data-theme="data"] .side-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

html[data-theme="data"] .side-panel li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-line-2);
}

html[data-theme="data"] .side-panel .sp-name {
  font-weight: 500;
  display: block;
}

html[data-theme="data"] .side-panel .sp-meta {
  display: block;
  font-size: 12.5px;
  color: var(--c-muted);
}

html[data-theme="data"] .side-panel .sp-out,
html[data-theme="data"] .side-panel .sp-low {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

html[data-theme="data"] .side-panel .sp-out {
  color: var(--c-bad);
}

html[data-theme="data"] .side-panel .sp-low {
  color: var(--c-warn);
}

html[data-theme="data"] .side-panel .sp-empty {
  padding: 14px;
  color: var(--c-muted);
  font-size: 14px;
  justify-content: center;
}

html[data-theme="data"] .side-panel .sp-foot {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

html[data-theme="data"] thead th .sort-icon {
  color: var(--c-gold);
}

/* ธีมเดิม: ไม่มีช่องค้นหา วันที่ ชิปผู้ใช้ และแผงด้านขวา */
html[data-theme="classic"] :is(.header-date, .header-user, .side-panel) {
  display: none;
}

@media (max-width: 900px) {
  html[data-theme="data"] .side-panel {
    max-width: none;
  }

}

/* แถบบน: ชื่อผู้ใช้อยู่ในชิปแล้ว ไม่ต้องซ้ำที่ปุ่มออกจากระบบ และให้ทั้งแถบพอดีบรรทัดเดียวที่ 1366px ขึ้นไป */
html[data-theme="data"] .logout-name {
  display: none;
}

/* จอเล็ก: แถบข้างไม่ยืดเต็มจอ เมนูเรียงเป็นแถวชิดบน */
@media (max-width: 768px) {
  html[data-theme="data"] .sidebar {
    height: auto;
    position: static;
  }

  html[data-theme="data"] .sidebar-nav {
    flex: 0 0 auto;
    align-content: flex-start;
  }

  html[data-theme="data"] .sidebar-nav .nav-btn {
    white-space: nowrap;
  }
}

/* ---------- คู่มือการใช้งาน (เมนูสุดท้าย) ---------- */
html[data-theme="data"] .manual-head .card-title {
  font-size: 20px
}

html[data-theme="data"] .manual-frame {
  border-color: var(--c-line);
  border-radius: var(--r)
}