/* ==========================================================
   Smart Uniform Ticket System
   WinUI 3 (Fluent) NavigationView-style rail + Light/Dark theme
   ========================================================== */
:root {
  --accent:        #0067C0;
  --accent-hover:  #005AA8;
  --accent-pressed:#004C8C;
  --accent-light:  #E7F2FC;
  --mica-bg:       #F3F3F3;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFA;
  --border-subtle: rgba(0,0,0,.08);
  --text-primary:  #1B1B1B;
  --text-secondary:#5F5F5F;
  --rail-bg:       #FBFBFB;
  --rail-text:     #2b2b2b;
  --rail-hover:    rgba(0,0,0,.05);
  --rail-active-bg:#E7F2FC;
  --radius-card:   8px;
  --radius-ctrl:   4px;
  --shadow-soft:   0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lift:   0 4px 10px rgba(0,0,0,.10), 0 10px 24px rgba(0,0,0,.08);
}

html[data-theme="dark"] {
  --accent:        #4CC2FF;
  --accent-hover:  #6FD0FF;
  --accent-pressed:#3AA9E0;
  --accent-light:  rgba(76,194,255,.14);
  --mica-bg:       #202020;
  --surface:       #2B2B2B;
  --surface-2:     #323232;
  --border-subtle: rgba(255,255,255,.09);
  --text-primary:  #F3F3F3;
  --text-secondary:#C6C6C6;
  --rail-bg:       #272727;
  --rail-text:     #E8E8E8;
  --rail-hover:    rgba(255,255,255,.06);
  --rail-active-bg:rgba(76,194,255,.16);
  --shadow-soft:   0 1px 3px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
  --shadow-lift:   0 4px 10px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html, body {
  background: var(--mica-bg);
  font-family: 'Segoe UI Variable Text','Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text-primary);
}
body { min-height: 100vh; display:flex; flex-direction:column; }

/* ---------------- Watermark helper ---------------- */
.efc-watermark { position: relative; z-index: 0; }
.efc-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

/* ---------------- Top bar ---------------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 1050;
}
.rail-toggle {
  border: none; background: transparent; color: var(--text-primary);
  width: 36px; height: 36px; border-radius: var(--radius-ctrl);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.rail-toggle:hover { background: var(--rail-hover); }
.topbar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--text-primary); font-weight:600; }
.topbar-brand img { height: 24px; }
.theme-switch .btn-icon {
  border: 1px solid var(--border-subtle); background: var(--surface); color: var(--text-primary);
  width: 36px; height: 36px; border-radius: var(--radius-ctrl); display:flex; align-items:center; justify-content:center;
}
.theme-switch .btn-icon:hover { background: var(--rail-hover); }
.theme-switch .dropdown-item { display:flex; align-items:center; gap:8px; }

/* ---------------- App shell: rail + content ---------------- */
.app-shell { display:flex; flex: 1 1 auto; min-height: 0; }

.rail {
  width: 56px; flex-shrink: 0; overflow-x:hidden; overflow-y:auto;
  background: var(--rail-bg);
  border-right: 1px solid var(--border-subtle);
  padding: 10px 6px;
  transition: width .18s ease;
  white-space: nowrap;
}
.rail.expanded { width: 232px; }
.rail-item {
  display:flex; align-items:center; gap: 12px;
  padding: 10px 10px; margin: 2px 0; border-radius: var(--radius-ctrl);
  color: var(--rail-text); text-decoration:none; font-weight:500; font-size:.92rem;
  position: relative;
}
.rail-item i { font-size:1.15rem; width:20px; text-align:center; flex-shrink:0; }
.rail-item:hover { background: var(--rail-hover); color: var(--rail-text); }
.rail-item.active { background: var(--rail-active-bg); color: var(--accent); font-weight:600; }
.rail-item.active::before {
  content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:3px;
  border-radius: 3px; background: var(--accent);
}
.rail-label { display:none; }
.rail.expanded .rail-label { display:inline; }
.rail-divider { height:1px; background: var(--border-subtle); margin: 10px 4px; }
.rail-section-label {
  display:none; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  color: var(--text-secondary); padding: 4px 10px; text-transform:uppercase;
}
.rail.expanded .rail-section-label { display:block; }

.app-content { flex: 1 1 auto; min-width: 0; padding: 24px; }
.app-footer { background: var(--surface); border-top: 1px solid var(--border-subtle); }

@media (max-width: 767px) {
  .app-content { padding: 14px; }
  .topbar-brand span { display:none; }
}

/* ---------------- Cards (Fluent surface) ---------------- */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
  color: var(--text-primary);
}
.card-header {
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  background: var(--surface-2);
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
}
.table { color: var(--text-primary); }
.table-light, .table > :not(caption) > * > * { background-color: transparent; color: inherit; }
.table thead.table-light th { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border-subtle); }
.table td, .table th { border-color: var(--border-subtle); }
.list-group-item { background: var(--surface); color: var(--text-primary); border-color: var(--border-subtle); }
.list-group-item.active { background: var(--accent-light); color: var(--accent); border-color: var(--border-subtle); }
.alert-secondary { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-subtle); }

/* ---------------- Buttons (Fluent accent) ---------------- */
.btn { border-radius: var(--radius-ctrl); font-weight: 600; }
.btn-brand { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-brand:hover { background: var(--accent-hover); border-color: var(--accent-hover); color:#fff; }
.btn-brand:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn-accent { background: var(--accent); border: none; color: #fff; font-weight: 600; }
.btn-accent:hover { background: var(--accent-hover); color: #fff; }
.btn-gold-outline { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; font-weight: 600; }
.btn-gold-outline:hover { background: var(--accent-light); color: var(--accent); }
.btn-gold-outline:disabled { border-color: var(--border-subtle); color: var(--text-secondary); opacity:.6; }
.btn-outline-secondary { border-color: var(--border-subtle); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--rail-hover); color: var(--text-primary); }
.btn-check:checked + .btn, .btn.active { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------------- Form controls (Fluent text fields) ---------------- */
.form-control, .form-select {
  border-radius: var(--radius-ctrl);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light), 0 1px 0 var(--accent) inset;
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 2px var(--accent-light); }
::placeholder { color: var(--text-secondary); opacity: .7; }

h1,h2,h3,h4,h5,h6 { color: var(--text-primary); }
.text-brand { color: var(--accent) !important; }
.text-gold { color: var(--accent) !important; }
.text-muted { color: var(--text-secondary) !important; }
a { color: var(--accent); }
.dropdown-menu { background: var(--surface); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lift); border-radius: var(--radius-card); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--accent-light); color: var(--accent); }

/* ---------------- Kiosk (hardware barcode scanner model) ---------------- */
.kiosk-wrapper { max-width: 820px; margin: 0 auto; }
.scan-station {
  position: relative;
  width: 140px; height: 140px;
  margin: 10px auto 0;
  display:flex; align-items:center; justify-content:center;
}
.scan-station-icon {
  position: relative; z-index: 2;
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size: 2.6rem;
  border: 2px solid var(--accent);
}
.scan-pulse-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent);
  animation: scanPulseRing 1.8s ease-out infinite;
}
@keyframes scanPulseRing {
  0%   { transform: scale(0.8); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.scan-input {
  font-size: 1.1rem; letter-spacing: .5px; text-align:center;
  border: 2px solid var(--accent) !important;
}
.scan-input:focus {
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.ticket-type-choice .btn { min-width: 190px; }

/* ---------------- Advanced Reader: mode switcher + engine badge ---------------- */
.reader-mode-switch {
  position: relative;
  display: inline-flex;
  background: var(--mica-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.reader-mode-btn {
  position: relative; z-index: 1;
  border: none; background: transparent;
  padding: 9px 20px; border-radius: 999px;
  font-weight: 600; font-size: .9rem;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 7px;
  transition: color .2s ease;
  cursor: pointer;
}
.reader-mode-btn.active { color: #fff; }
.reader-mode-btn:disabled { opacity: .5; cursor: not-allowed; }
.reader-mode-highlight {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.engine-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-light); color: var(--accent);
  padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: .82rem;
  letter-spacing: .2px;
}
.engine-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 rgba(0,103,192,.5);
  animation: dotpulse 1.4s infinite;
}
@keyframes dotpulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,103,192,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(0,103,192,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,103,192,0); }
}

.reader-mode-panel {
  transition: opacity .2s ease;
}
.reader-mode-panel.fading { opacity: 0; }

/* ---------------- Camera scan mode (secondary reader) ---------------- */
.scan-box {
  position:relative; border-radius:16px; overflow:hidden; background:#111;
  box-shadow: var(--shadow-lift);
  border: 2px solid var(--accent);
  margin: 0 auto;
  width: 380px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
}
.scan-box video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-hint {
  position:absolute; bottom:0; left:0; right:0; padding: 10px 8px;
  text-align:center; color:#fff; font-weight:600; font-size:.95rem;
  background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.scan-corner { position:absolute; width:34px; height:34px; border-color: var(--accent); }
.scan-corner.tl { top:10px; left:10px; border-top:4px solid; border-left:4px solid; border-radius: 6px 0 0 0; }
.scan-corner.tr { top:10px; right:10px; border-top:4px solid; border-right:4px solid; border-radius: 0 6px 0 0; }
.scan-corner.bl { bottom:10px; left:10px; border-bottom:4px solid; border-left:4px solid; border-radius: 0 0 0 6px; }
.scan-corner.br { bottom:10px; right:10px; border-bottom:4px solid; border-right:4px solid; border-radius: 0 0 6px 0; }
.scan-pulse-dot {
  position:absolute; top:12px; right:14px; width:10px; height:10px; border-radius:50%;
  background:#2ecc71; box-shadow:0 0 0 rgba(46,204,113,.6); animation: dotpulseGreen 1.4s infinite;
}
@keyframes dotpulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

.diag-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  font-size: .82rem;
}
.diag-row { display:flex; justify-content:space-between; gap:10px; padding: 3px 0; }
.diag-row span:first-child { color: var(--text-secondary); }
.diag-value { font-weight:600; color: var(--text-primary); }
.diag-value.ok { color: #1c6b34; }
.diag-value.bad { color: #b3261e; }

/* ---------------- Printable Ticket ---------------- */
.token-print {
  position: relative;
  text-align:center;
  padding: 26px 20px;
  max-width: 380px;
  margin: 0 auto;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: #fff;
  color: #111;
  overflow: hidden;
}
.token-print::before {
  content:"";
  position:absolute; inset:0;
  background-image: url('../img/logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size: 75%;
  opacity: .07;
  z-index:0;
}
.token-print > * { position:relative; z-index:1; }
.token-print .big-token { font-size: 3.4rem; font-weight:800; color: #0067C0; letter-spacing:1px; margin: 4px 0 10px; }
.token-print .tp-row { display:flex; justify-content:space-between; text-align:left; padding:4px 0; border-bottom:1px solid #eee; font-size:.95rem; }
.token-print .tp-row b { color: #555; }

/* ---------------- Queue / Counter ---------------- */
.queue-item.waiting { border-left:6px solid #8a8a8a; }
.queue-item.called { border-left:6px solid var(--accent); }
.queue-item.serving { border-left:6px solid var(--accent-pressed); }

.now-serving-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.now-serving-card.flash {
  transform: scale(1.03);
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-lift);
}

/* ---------------- Public Display (always plain, ignores theme) ---------------- */
html.display-page, .display-page body { height:100%; margin:0; overflow:hidden; }
.display-screen {
  height:100vh; width:100vw; overflow:hidden;
  background: #FFFFFF;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  position:relative;
}
.display-label { font-size:3vw; color:#444; letter-spacing:6px; font-weight:600; margin-bottom:6px;}
.display-token { font-size: 22vw; font-weight:800; color:#111; line-height:1; transition: transform .3s ease; }
.display-counter { font-size:2.8vw; color:#0067C0; font-weight:700; margin-top:16px;}

/* ---------------- Stock badges ---------------- */
.stock-pill { display:inline-block; padding:6px 12px; margin:3px; border-radius:20px; font-weight:600; font-size:.85rem;}
.stock-ok { background:#dff3e3; color:#1c6b34; }
.stock-low { background:#fff1cf; color:#8a6412; }
.stock-out { background:#fbdde0; color:#9c1c22; }

.badge-booked   { background:#dbeafe; color:#1c4e8a; }
.badge-arrived  { background:#c9e8d1; color:#1c6b34; }
.badge-cancelled{ background:#f1c6c9; color:#8a1f24; }
.badge-noshow   { background:#e5e5e5; color:#555; }

@media print {
  .topbar, .rail, .app-footer, .no-print { display:none !important; }
  body { background:#fff; }
  .token-print { border-color:#999; box-shadow:none; }
}

@media (max-width: 576px) {
  .display-token { font-size: 28vw; }
  .display-label { font-size: 5vw; }
  .display-counter { font-size: 4.5vw; }
}