:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#1d4ed8;
  --ok:#166534;
  --warn:#92400e;
  --danger:#b91c1c;
  --shadow:0 10px 24px rgba(15,23,42,.06);
  --radius:16px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, "Noto Sans Thai", sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.35}
.container{max-width:1200px;margin:0 auto;padding:18px}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.title{font-size:clamp(20px,2.6vw,30px);font-weight:900}
.subtitle{font-size:clamp(14px,1.6vw,16px);color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.card{grid-column:span 12;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
@media(min-width:900px){
  .card.half{grid-column:span 6;}
  .card.third{grid-column:span 4;}
}
.card h2{margin:0 0 10px;font-size:clamp(18px,2.1vw,22px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1}
label{font-weight:800;font-size:clamp(14px,1.6vw,16px)}
input,select,textarea{
  width:100%;border:1px solid var(--border);border-radius:12px;
  padding:12px 12px;font-size:clamp(15px,1.9vw,18px);
  outline:none;background:#fff;
}
textarea{min-height:90px;resize:vertical}
.btn{
  border:0;border-radius:12px;padding:12px 14px;
  font-size:clamp(15px,1.9vw,18px);font-weight:900;
  cursor:pointer;background:var(--primary);color:#fff;
}
.btn.secondary{background:#111827}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn.danger{background:var(--danger)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  font-weight:900;font-size:14px;background:#fff;
}
.badge.ok{border-color:#bbf7d0;background:#f0fdf4;color:var(--ok)}
.badge.warn{border-color:#fde68a;background:#fffbeb;color:var(--warn)}
.badge.danger{border-color:#fecaca;background:#fef2f2;color:var(--danger)}
.small{color:var(--muted);font-size:14px}
.hr{height:1px;background:var(--border);margin:12px 0}
.notice{border:1px solid var(--border);border-left:6px solid var(--primary);padding:12px;border-radius:14px;background:#f8fafc}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:1000px;background:#fff}
th,td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top;font-size:clamp(14px,1.7vw,16px)}
th{background:#f8fafc;font-weight:900}
tr:hover td{background:#f8fafc}
.kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  border:1px solid var(--border);border-bottom-width:2px;border-radius:8px;padding:2px 6px;font-size:13px;background:#fff;
}
.footer{margin-top:18px;color:var(--muted);font-size:13px}



/* ===== Mobile app-like refinements (no functional changes) ===== */
body{
  -webkit-tap-highlight-color: transparent;
}
.container{
  padding: 14px;
}
.header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.card{
  border-radius: 18px;
}
.btn{
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(29,78,216,.12);
}
.btn.ghost, .btn.secondary, .btn.danger{
  box-shadow: none;
}
input, select, textarea{
  border-radius: 14px;
}
.table-wrap{
  border-radius: 18px;
}

/* Improve touch and readability on phones */
@media (max-width: 520px){
  .container{ padding: 12px; }
  .header{ padding: 8px 0 12px; margin-bottom: 12px; }
  .card{ padding: 12px; }
  .row{ gap: 8px; flex-direction: column; align-items: stretch; }
  .field{ min-width: 0; }
  table{ min-width: 0; }
  th,td{ padding: 10px 8px; }
  .btn{ width: 100%; }
  .btn.ghost{ width: 100%; }
}

/* Safe-area padding for iOS (prevents bottom controls from being hidden) */
body{ padding-bottom: env(safe-area-inset-bottom); }


/* Public tracking number emphasis */
.trackingBig{
  font-size: clamp(24px, 5vw, 46px);
  padding: 8px 14px;
  border-radius: 12px;
  display: inline-block;
}


/* Exec (ผู้บริหาร): reduced typography size (only this page) */
body[data-page="exec"] .title{
  font-size:clamp(22px,2.4vw,30px);
}

body[data-page="exec"] .subtitle{
  font-size:clamp(14px,1.6vw,18px);
}

body[data-page="exec"] .card h2{
  font-size:clamp(18px,2.0vw,22px);
}

body[data-page="exec"] .badge{
  font-size:clamp(14px,1.6vw,18px);
  padding:6px 10px;
}

body[data-page="exec"] .small{
  font-size:clamp(13px,1.4vw,15px);
}


/* ===== Mobile table -> card layout (no horizontal scroll) ===== */
@media (max-width: 640px){
  .table-wrap{ overflow: visible; border: 0; }
  table{ min-width: 0; }
  thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  tr{ border:1px solid var(--border); border-radius: 16px; margin-bottom: 10px; overflow:hidden; background:#fff; }
  td{ border:0; border-bottom:1px solid var(--border); padding:10px 12px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  td:last-child{ border-bottom:0; }
  td::before{
    content: attr(data-label);
    font-weight:900;
    color: var(--muted);
    padding-right: 10px;
    flex: 0 0 42%;
  }
  td > *{ max-width: 58%; }

  /* Status cell can include multiple lines */
  td[data-label="สถานะ"]{ flex-direction: column; }
  td[data-label="สถานะ"]::before{ content:"สถานะ"; padding:0; flex:0 0 auto; margin-bottom:8px; }
  td[data-label="สถานะ"] > *{ max-width: 100%; }

  /* Action cell: stack buttons nicely */
  td[data-label="การจัดการ"]{ flex-direction: column; align-items: stretch; }
  td[data-label="การจัดการ"]::before{ content:"การจัดการ"; padding:0; flex:0 0 auto; margin-bottom:8px; }
  td[data-label="การจัดการ"] > *{ max-width: 100%; }
  td[data-label="การจัดการ"] .row{ flex-direction: column; align-items: stretch; }
  td[data-label="การจัดการ"] .btn{ width: 100%; }
}


/* ===== UI tweak: stronger case separators for SHOP/COURT ===== */
body[data-page="shop"] .table-wrap,
body[data-page="court"] .table-wrap{
  border:1px solid #cbd5e1;
}
body[data-page="shop"] tbody tr td,
body[data-page="court"] tbody tr td{
  border-bottom:2px solid #e2e8f0;
}
body[data-page="shop"] tbody tr:last-child td,
body[data-page="court"] tbody tr:last-child td{
  border-bottom:0;
}
@media (max-width: 640px){
  body[data-page="shop"] tr,
  body[data-page="court"] tr{
    border:2px solid #cbd5e1;
  }
}

/* ===== Exec history table: avoid forced wide table ===== */
body[data-page="exec"] #histStats table.hist-table{
  min-width:0;
}


/* ===== Auth UI ===== */
.authbar{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;              /* keep who + signout on one line */
  white-space:nowrap;
}
.authbar .who{
  font-weight:900;
  color: var(--text);
}
.authbar .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:14px;
  max-width:60vw;                /* allow small screens */
  overflow:hidden;
  text-overflow:ellipsis;
}
.auth-error{
  border-left-color: var(--danger);
}
.auth-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:520px;
}


/* ===== Responsive: Desktop table vs Mobile list ===== */
.desktop-only{display:block;}
.mobile-only{display:none;}
@media (max-width: 640px){
  .desktop-only{display:none;}
  .mobile-only{display:block;}
}

/* Mobile list (receipt + case first, tap to expand) */
.mobile-list{display:flex;flex-direction:column;gap:10px;}
.ml-item{border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden;}
.ml-sum{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;}
.ml-sum::-webkit-details-marker{display:none;}
.ml-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ml-case{font-weight:900;}
.ml-right{flex:0 0 auto;}
.ml-detail{padding:0 12px 12px;}
.ml-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);}
.ml-row:last-child{border-bottom:0;}
.ml-actions .row{flex-direction:column;align-items:stretch;}
.ml-actions .btn{width:100%;}

.authbar button{flex:0 0 auto;}

/* ===== Mobile: move authBar to 2nd line under the page title (no other changes) ===== */
@media (max-width: 640px){
  .header{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .header > div:first-child{
    width: 100%;
  }

  .authbar{
    width: 100%;
    justify-content: flex-end;
  }
}