/* ===== Panel Operator ===== */
.operator-page { min-height: 100vh; background: var(--slate-100); }
.btn-lg { font-size: 1.15rem; padding: 1em 1.2em; }
.btn-sm { font-size: .9rem; padding: .5em .9em; border-radius: 10px; }
.btn-block { width: 100%; }

.loket-a { --c: var(--loket-a); --c-dark: var(--loket-a-dark); --soft: var(--loket-a-soft); }
.loket-b { --c: var(--loket-b); --c-dark: var(--loket-b-dark); --soft: var(--loket-b-soft); }

/* Login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(135deg, var(--navy-800), var(--teal-700));
}
.login-card {
  width: min(400px, 100%); background: #fff; border-radius: 20px; padding: 32px;
  box-shadow: var(--shadow); text-align: center;
}
.login-logo { height: 92px; width: auto; object-fit: contain; margin: 0 auto 12px; }
.login-card h1 { margin: 0; font-size: 1.6rem; color: var(--navy-800); }
.login-card p { margin: 4px 0 22px; color: var(--slate-500); }
.login-card label { display: block; text-align: left; font-weight: 700; margin-bottom: 6px; }
.login-card input {
  width: 100%; padding: 14px; font-size: 1.3rem; letter-spacing: .3em; text-align: center;
  border: 2px solid var(--slate-300); border-radius: 12px; margin-bottom: 16px;
}
.login-card input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(20, 184, 166, .2); }
.login-back { display: inline-block; margin-top: 16px; color: var(--slate-500); text-decoration: none; font-weight: 600; }

/* Topbar */
.op-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);
}
.op-brand { display: flex; align-items: center; gap: 12px; }
.op-brand img { height: 50px; width: auto; object-fit: contain; flex: none; }
.op-brand strong { display: block; font-size: 1.1rem; color: var(--navy-800); }
.op-brand span { font-size: .9rem; color: var(--slate-500); font-weight: 600; }
.op-top-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.op-clock { text-align: right; line-height: 1.15; }
.op-clock span { font-weight: 800; font-size: 1.2rem; color: var(--slate-800); }
.op-clock small { display: block; color: var(--slate-500); font-weight: 600; }
.op-nav { display: flex; gap: 8px; }
.op-topbar .conn { font-size: .9rem; color: var(--slate-600); }

.op-main { max-width: 1280px; margin: 0 auto; padding: 20px 24px 40px; display: grid; gap: 20px; }

.op-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  background: var(--navy-800); color: #fff; border-radius: var(--radius); padding: 14px 18px; font-size: .95rem;
}
.op-hint strong { color: var(--teal-400); }
.op-sound { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.op-sound input { width: 18px; height: 18px; accent-color: var(--teal-500); }

/* Kartu loket */
.op-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.op-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border-top: 6px solid var(--c); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .3s ease;
}
.op-card.flash { box-shadow: 0 0 0 4px var(--c), var(--shadow); }
.op-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 0;
}
.op-card-head h2 { margin: 0; font-size: 1.5rem; color: var(--c-dark); font-weight: 800; }
.op-card-head p { margin: 2px 0 0; color: var(--slate-500); font-weight: 600; }
.op-badge { font-size: .8rem; color: var(--slate-600); background: var(--soft); padding: 6px 10px; border-radius: 999px; }
.op-now { text-align: center; padding: 14px 20px 6px; }
.op-label { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); }
.op-number { display: block; font-size: clamp(3.5rem, 9vw, 5.5rem); font-weight: 800; line-height: 1.05; color: var(--c-dark); }
.op-number.empty { color: var(--slate-300); }
.op-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 20px 0; padding: 12px 0;
  background: var(--soft); border-radius: 12px; text-align: center;
}
.op-stats div + div { border-left: 1px solid rgba(15, 23, 42, .08); }
.op-stats dt { font-size: .78rem; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .06em; }
.op-stats dd { margin: 2px 0 0; font-size: 1.6rem; font-weight: 800; color: var(--slate-800); }
.op-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 20px; }
.op-actions .btn-primary { grid-column: 1 / -1; background: var(--c); }
.op-actions .btn-primary:hover { background: var(--c-dark); }
.op-actions .btn-primary kbd { margin-left: 4px; }

/* Panel umum */
.op-lower { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.panel h3 { margin: 0 0 14px; font-size: 1.1rem; color: var(--navy-800); }

.op-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 560px; overflow: auto; }
.op-history li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--soft); border-left: 5px solid var(--c);
}
.op-history .h-num { font-weight: 800; font-size: 1.25rem; color: var(--c-dark); }
.op-history .h-meta { font-size: .85rem; color: var(--slate-600); font-weight: 600; text-align: right; }
.op-history li.empty { background: var(--slate-50); border-left: 0; color: var(--slate-400); justify-content: center; }

.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field > span { font-weight: 700; font-size: .92rem; color: var(--slate-700); }
.field small { color: var(--slate-500); }
.field input[type="text"], .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 2px solid var(--slate-200); border-radius: 10px; background: #fff;
}
.field textarea { resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, .18);
}
.field input[type="range"] { accent-color: var(--teal-600); }
.field-checks { justify-content: center; }
.field-checks label { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.field-checks input { width: 18px; height: 18px; accent-color: var(--teal-600); }
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; }

.panel-danger {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 2px solid #fecaca;
}
.panel-danger h3 { color: var(--red-600); margin-bottom: 4px; }
.panel-danger p { margin: 0; color: var(--slate-600); }

@media (max-width: 900px) {
  .op-lower { grid-template-columns: 1fr; }
  .settings-form { grid-template-columns: 1fr; }
  .op-sound { margin-left: 0; }
}
@media (max-width: 480px) {
  .op-main { padding: 14px; }
  .op-topbar { padding: 10px 14px; }
  .op-actions { grid-template-columns: 1fr; }
  .op-grid { grid-template-columns: 1fr; }
}