/* ============================================
   BandThai — Theme
   Premium Dark Gold Design
   ============================================ */
:root {
  /* Color Palette */
  --premium-black: #1a1a1a;
  --premium-dark: #4a5568;
  --premium-gray: #718096;
  --premium-light-gray: #cbd5e0;
  --premium-border: #e2e8f0;
  --premium-gold: #f6ad55;
  --premium-gold-light: #fef5e7;
  --premium-gold-dark: #ed8936;
  --premium-white: #ffffff;
  --premium-off-white: #f7fafc;
  --premium-text: #2d3748;
  --premium-text-light: #718096;
  --premium-text-muted: #a0aec0;

  /* Accent */
  --accent-primary: #4299e1;
  --accent-success: #48bb78;
  --accent-error: #fc8181;
  --accent-warning: #f6ad55;

  /* Gradients */
  --bg-gradient-primary: linear-gradient(135deg, #f7fafc 0%, #edf2f7 50%, #e2e8f0 100%);
  --bg-gradient-card: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  --bg-gradient-gold: linear-gradient(135deg, #f6ad55 0%, #fef5e7 100%);

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.02);
  --shadow-sm: 0 2px 4px 0 rgba(0,0,0,.04);
  --shadow-md: 0 4px 8px 0 rgba(0,0,0,.06);
  --shadow-lg: 0 8px 16px 0 rgba(0,0,0,.08);
  --shadow-xl: 0 12px 24px 0 rgba(0,0,0,.10);
  --shadow-2xl: 0 20px 40px 0 rgba(0,0,0,.12);
  --shadow-gold: 0 4px 12px 0 rgba(246,173,85,.20);

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px;

  /* Transitions */
  --transition-fast: all .15s cubic-bezier(.4,0,.2,1);
  --transition-base: all .3s cubic-bezier(.4,0,.2,1);
  --transition-slow: all .5s cubic-bezier(.4,0,.2,1);

  /* Spacing */
  --spacing-xs: 4px;  --spacing-sm: 8px;  --spacing-md: 16px;
  --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px;

  /* Typography */
  --font-family-primary: -apple-system,BlinkMacSystemFont,'Segoe UI','Kanit','Sarabun','Helvetica Neue',Arial,sans-serif;
  --font-family-display: 'Kanit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-family-body: 'Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-xs: .8125rem; --text-sm: .9375rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.8;

  /* Z-index */
  --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030;
  --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070;
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;
  font-family:var(--font-family-primary);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--premium-text);
  background:var(--bg-gradient-primary);
  /* background-attachment:fixed removed — iOS Safari bug */
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page layout */
.page-container,.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md);box-sizing:border-box;width:100%}
.page-header{margin-bottom:var(--spacing-lg)}
.page-header h1{font-family:var(--font-family-display);font-size:var(--text-2xl);font-weight:700;color:var(--premium-text)}
.page-header p{color:var(--premium-text-light);margin-top:4px}
.page-main{padding-bottom:calc(var(--spacing-3xl) + env(safe-area-inset-bottom))}
main{padding-bottom:calc(var(--spacing-2xl) + env(safe-area-inset-bottom))}

/* Card */
.card{background:var(--premium-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,.06);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-wrap:wrap}
.card-title{font-size:var(--text-lg);font-weight:700;color:var(--premium-text);margin:0}

/* Buttons — minimum 44px touch target */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px var(--spacing-md);min-height:44px;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);border:none;cursor:pointer;transition:var(--transition-base);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--premium-gold);color:var(--premium-black)}
.btn-primary:hover{background:var(--premium-gold-dark)}
.btn-secondary{background:var(--premium-off-white);color:var(--premium-text);border:1px solid var(--premium-light-gray)}
.btn-secondary:hover{background:var(--premium-light-gray)}
.btn-danger{background:#c53030;color:#fff}
.btn-danger:hover{background:#9b2c2c}
.btn-success{background:#276749;color:#fff}
.btn-success:hover{background:#1c4532}
.btn-ghost{background:transparent;color:var(--premium-text-light);border:1px solid var(--premium-border)}
.btn-ghost:hover{background:var(--premium-off-white);color:var(--premium-text)}
.btn-sm{padding:6px 14px;min-height:36px;font-size:var(--text-xs)}
.btn-lg{padding:14px var(--spacing-xl);min-height:52px;font-size:var(--text-base)}

/* Form — inputs at least 44px tall for touch */
.form-label,.form-group label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--premium-text);margin-bottom:var(--spacing-xs)}
.form-group{margin-bottom:var(--spacing-md)}
.form-control,
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:11px var(--spacing-md);
  min-height:44px;
  border:1px solid var(--premium-border);
  border-radius:var(--radius-sm);
  font-size:var(--text-base);
  font-family:inherit;
  color:var(--premium-text);
  background:var(--premium-white);
  transition:var(--transition-fast);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.form-control:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--premium-gold);
  box-shadow:0 0 0 3px rgba(246,173,85,.2);
}
.form-group textarea,.form-control[rows]{min-height:auto;height:auto}

/* Thai Date Overlay — show พ.ศ. format on date/month pickers */
.thai-date-wrap{position:relative;width:100%}
.thai-date-wrap input[type="date"],
.thai-date-wrap input[type="month"]{color:transparent!important}
.thai-date-wrap input[type="date"]::-webkit-datetime-edit,
.thai-date-wrap input[type="month"]::-webkit-datetime-edit{color:transparent}
.thai-date-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.thai-date-wrap input[type="month"]::-webkit-calendar-picker-indicator{position:relative;z-index:2;opacity:1}
.thai-date-overlay{position:absolute;left:var(--spacing-md,12px);top:0;bottom:0;right:36px;display:flex;align-items:center;pointer-events:none;font-size:var(--text-base,1rem);color:var(--premium-text,#333);z-index:1;white-space:nowrap;overflow:hidden}
.thai-date-overlay:empty::after{content:'เลือกวันที่';color:var(--premium-text-muted,#a0aec0)}

/* Table */
.table-responsive{overflow-x:auto;border-radius:var(--radius-md)}
table{width:100%;border-collapse:collapse}
thead{background:#2d3748}
thead th{color:var(--premium-gold);font-weight:600;font-size:var(--text-sm);padding:12px var(--spacing-md);text-align:left;white-space:nowrap}
tbody tr{border-bottom:1px solid var(--premium-off-white);transition:var(--transition-fast)}
tbody tr:hover{background:var(--premium-off-white)}
tbody td{padding:10px var(--spacing-md);color:var(--premium-text);font-size:var(--text-sm)}

/* Status badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600}
.badge-success{background:#c6f6d5;color:#276749}
.badge-warning{background:#fefcbf;color:#744210}
.badge-danger{background:#fed7d7;color:#c53030}
.badge-info{background:#bee3f8;color:#2c5282}
.badge-normal{background:#e2e8f0;color:#4a5568}

/* Empty state */
.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--premium-text-light)}
.empty-state p{margin-bottom:var(--spacing-sm)}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-modal-backdrop);align-items:center;justify-content:center;padding:var(--spacing-md)}
.modal-overlay.active{display:flex}
.modal-box{background:var(--premium-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:var(--spacing-xl)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}
.modal-header h3{font-size:var(--text-xl);font-weight:700}
.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--premium-text-light);padding:4px;border-radius:var(--radius-sm);transition:var(--transition-fast)}
.modal-close:hover{color:var(--accent-error)}
.modal-footer{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-lg)}

/* Confirm modal */
.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:calc(var(--z-modal) + 10);align-items:center;justify-content:center;padding:var(--spacing-md)}
.confirm-overlay.active{display:flex}
.confirm-box{background:var(--premium-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);width:100%;max-width:380px;padding:var(--spacing-xl);text-align:center}
.confirm-box h3{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--spacing-sm)}
.confirm-box p{color:var(--premium-text-light);margin-bottom:var(--spacing-lg)}
.confirm-actions{display:flex;gap:var(--spacing-sm);justify-content:center}

/* Toast — center bottom on mobile, bottom-right on desktop */
#toast{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:24px;
  z-index:var(--z-tooltip);padding:13px 22px;border-radius:var(--radius-lg);
  font-weight:600;font-size:var(--text-sm);box-shadow:var(--shadow-xl);
  opacity:0;transition:opacity .3s;pointer-events:none;max-width:360px;
}
#toast.show{opacity:1}
#toast.success{background:#276749;color:#fff}
#toast.error{background:#c53030;color:#fff}
#toast.info{background:#2c5282;color:#fff}
@media(max-width:600px){
  #toast{right:16px;left:16px;bottom:calc(20px + env(safe-area-inset-bottom));
    text-align:center;max-width:none}
}

/* Print */
@media print {
  .main-nav,.no-print{display:none!important}
  body{background:white!important;font-size:12pt}
  .card{box-shadow:none;border:1px solid #ddd}
  a{color:inherit;text-decoration:none}
}

/* Mobile */
@media(max-width:900px){
  /* Push content above the bottom tab bar */
  main, .page-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}
@media(max-width:768px){
  .page-container,.container{padding:var(--spacing-sm)}
  .card{padding:var(--spacing-md);border-radius:var(--radius-md)}
  .modal-box{max-width:100%;margin:var(--spacing-sm)}
  .page-header h1{font-size:var(--text-xl)}
  /* Stack card-header on narrow screens */
  .card-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Make stat grids 2-col on mobile */
  .stat-grid { grid-template-columns: repeat(2,1fr) !important; gap: var(--spacing-sm) !important; }
}
@media(max-width:480px){
  .page-container,.container{padding:10px}
  .card{padding:var(--spacing-sm)}
  .card-header{gap:6px}
  .modal-box{border-radius:var(--radius-lg);padding:var(--spacing-md)}
  /* Stack modal footer on mobile */
  .modal-footer,.confirm-actions{flex-direction:column-reverse;gap:8px}
  .modal-footer .btn,.confirm-actions .btn{width:100%;justify-content:center}
  /* Bigger touch areas for tab buttons */
  .tab-btn { padding: var(--spacing-sm) var(--spacing-md); min-height: 44px; }
}

/* ── Ad Countdown Timer ─────────────────────────────────────── */
#_adCountdown {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 400;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 3px 10px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  letter-spacing: 0.03em;
}
@media (max-width:1023px) {
  #_adCountdown { top: 66px; right: 10px; }
}

/* ── Ad Expired Overlay ─────────────────────────────────────── */
.ad-expired-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-expired-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  max-width: 320px;
  width: 90%;
}

/* ── Ad Gate Page ───────────────────────────────────────────── */
.ad-gate-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.25rem;
  background: var(--bg-primary, #0a0a15);
  text-align: center;
}
.ad-gate-logo {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold, #fbbf24);
}
.ad-gate-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 300px;
  line-height: 1.6;
}
.ad-gate-video-box {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}
.ad-gate-countdown {
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold, #fbbf24);
}
.ad-gate-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
}


/* ============================================================
   UX IMPROVEMENTS — Tooltips + Floating Help Button
   ============================================================ */

/* ── Pure CSS Tooltip (data-tip attribute) ────────────────── */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:rgba(30,30,30,.95);color:#fff;
  font-size:.72rem;font-weight:600;font-family:var(--font-family-body);
  white-space:nowrap;padding:5px 10px;border-radius:6px;
  pointer-events:none;opacity:0;transition:opacity .18s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:9990;max-width:200px;white-space:normal;text-align:center;line-height:1.4;
}
[data-tip]::before{
  content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:rgba(30,30,30,.95);
  pointer-events:none;opacity:0;transition:opacity .18s;z-index:9990;
}
[data-tip]:hover::after,[data-tip]:hover::before{opacity:1}
/* Tooltip below variant */
[data-tip-below]::after{content:attr(data-tip-below);top:calc(100% + 8px);bottom:auto}
[data-tip-below]::before{top:calc(100% + 3px);bottom:auto;border-top-color:transparent;border-bottom-color:rgba(30,30,30,.95)}
[data-tip-below]:hover::after,[data-tip-below]:hover::before{opacity:1}

/* ── Floating Help Button ─────────────────────────────────── */
.fab-help{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0));right:20px;
  width:48px;height:48px;border-radius:50%;
  background:var(--premium-gold);color:#fff;
  border:none;cursor:pointer;
  font-size:1.3rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(246,173,85,.45);
  transition:transform .18s,box-shadow .18s;
  z-index:1000;text-decoration:none;
  line-height:1;
}
.fab-help:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(246,173,85,.55)}
.fab-help:active{transform:scale(.95)}
.fab-help-label{
  position:absolute;right:54px;
  background:rgba(30,30,30,.9);color:#fff;
  font-size:.72rem;font-weight:600;white-space:nowrap;
  padding:4px 10px;border-radius:6px;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.fab-help:hover .fab-help-label{opacity:1}
/* ============================================
   Accessibility — Text Scale & High Contrast
   ============================================ */
body.text-scale-lg {
  --text-xs: 1.015rem; --text-sm: 1.172rem; --text-base: 1.25rem;
  --text-lg: 1.406rem; --text-xl: 1.563rem; --text-2xl: 1.875rem;
  --text-3xl: 2.344rem; --text-4xl: 2.813rem;
}
body.text-scale-lg .btn { min-height: 52px; font-size: var(--text-sm); }
body.text-scale-lg .form-control,
body.text-scale-lg .form-group input,
body.text-scale-lg .form-group select,
body.text-scale-lg .form-group textarea { min-height: 52px; font-size: var(--text-base); }

body.text-scale-xl {
  --text-xs: 1.219rem; --text-sm: 1.406rem; --text-base: 1.5rem;
  --text-lg: 1.688rem; --text-xl: 1.875rem; --text-2xl: 2.25rem;
  --text-3xl: 2.813rem; --text-4xl: 3.375rem;
}
body.text-scale-xl .btn { min-height: 60px; font-size: var(--text-sm); }
body.text-scale-xl .form-control,
body.text-scale-xl .form-group input,
body.text-scale-xl .form-group select,
body.text-scale-xl .form-group textarea { min-height: 60px; font-size: var(--text-base); }

body.high-contrast {
  --premium-text-light: #2d3748;
  --premium-text-muted: #4a5568;
  --premium-text: #1a202c;
  --premium-border: #a0aec0;
}
body.high-contrast .badge { font-weight: 700; }
body.high-contrast .nav-link-desc { color: #4a5568; }