/* ============================================================
   Bel-Café Digital — Global / Shared Styles
   Page-specific styles live in: login.css | landing.css |
   scanner.css | menu.css | karyawan.css | admin.css
   ============================================================ */

/* ── 1. Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 2. Variables ── */
:root {
  --brand:       #F54927;
  --brand-dark:  #C43A1F;
  --brand-light: #FEEBE7;
  --brand-mid:   #F76B4F;
  --sidebar:     #17171F;

  --success:        #16A34A;
  --success-bg:     #DCFCE7;
  --success-border: #BBF7D0;
  --warn:           #D97706;
  --warn-bg:        #FEF3C7;
  --danger:         #DC2626;
  --danger-bg:      #FEE2E2;
  --info:           #1D4ED8;
  --info-bg:        #EFF6FF;

  --g50:  #F9FAFB;
  --g100: #F3F4F6;
  --g200: #E5E7EB;
  --g300: #D1D5DB;
  --g400: #9CA3AF;
  --g600: #4B5563;
  --g700: #374151;
  --g800: #1F2937;
}

/* ── 3. Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--g800);
  background: var(--g50);
  min-height: 100vh;
}

/* ── 4. Shared Topbar (scanner + menu) ── */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--g200);
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-logo  { font-size: 22px; flex-shrink: 0; }
.topbar-title { font-size: 15px; font-weight: 700; flex: 1; }
.topbar-officer { font-size: 11px; color: var(--g400); }
.topbar-back {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--g100); display: flex; align-items: center;
  justify-content: center; font-size: 18px;
  text-decoration: none; color: var(--g800); flex-shrink: 0;
}
.topbar-link {
  font-size: 12px; font-weight: 600; color: var(--g800);
  text-decoration: none; padding: 6px 10px;
  border-radius: 8px; background: var(--g100);
}
.topbar-link:hover { background: var(--g200); }
.topbar-link--admin {
  color: var(--brand);
  background: var(--brand-light);
}
.topbar-logout {
  font-size: 12px; font-weight: 600; color: var(--danger);
  text-decoration: none; padding: 6px 10px; border-radius: 8px;
}
.topbar-logout:hover { background: var(--danger-bg); }

/* ── 5. Shared Badges ── */
.badge {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 99px;
  display: inline-block; white-space: nowrap;
}
.badge.ok      { background: var(--success-bg); color: var(--success); }
.badge.dup,
.badge.low     { background: var(--warn-bg);    color: var(--warn); }
.badge.denied,
.badge.empty   { background: var(--danger-bg);  color: var(--danger); }
.badge.invalid { background: var(--g100);        color: var(--g400); }

/* ── 6. Shared Buttons ── */
.btn {
  padding: 10px 18px; border-radius: 8px; border: none;
  cursor: pointer; font-size: 13px; font-weight: 700;
  font-family: inherit; transition: all .2s;
}
.btn-primary   { background: var(--brand);      color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--g100);       color: var(--g700); }
.btn-secondary:hover { background: var(--g200); }
.btn-danger    { background: var(--danger-bg);  color: var(--danger); }
.btn-danger:hover { background: #FCA5A5; }

/* ── 7. Shared Forms ── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

/* ── 8. Shared Toast ── */
.toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  padding: 11px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 700; z-index: 200;
  white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.2);
  animation: toastIn .2s ease; pointer-events: none;
}
.toast.success { background: var(--success); color: #fff; }
.toast.error   { background: var(--danger);  color: #fff; }
.toast.warn    { background: var(--warn);    color: #fff; }
/* bottom-right variant used by admin */
.toast.toast--br {
  top: auto; bottom: 24px; left: auto;
  right: 24px; transform: none;
}

/* ── 9. Shared Spinner / Animations ── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
@keyframes toastIn {
  from { opacity:0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
@keyframes modalIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes scanline { 0%{top:16px} 100%{top:calc(100% - 16px)} }
.spinner {
  width: 20px; height: 20px;
  border: 3px solid var(--g200);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ── 10. Shared Loading State ── */
.loading-state {
  text-align: center; padding: 40px 20px;
  color: var(--g400); font-size: 14px;
}

/* ── 11. Shared Alert ── */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.alert-success { background: var(--brand-light); color: var(--brand); }
.alert-error   { background: var(--danger-bg);   color: var(--danger); }

/* ── Responsive: topbar ── */
@media (min-width: 400px) {
  .topbar-officer { display: block; }
}