/* ---------- Base / Variables ---------- */
:root{
  --text:#eef2f6;
  --muted:#b8c2cc;
  --primary:#22c55e;
  --primary-ink:#072b12;
  --danger:#ef4444;
  --danger-ink:#2a0b0b;
  --glass-bg: rgba(15, 23, 42, .48);     /* slate-900 w/ opacity */
  --glass-brd: rgba(255,255,255,.10);
  --focus: 0 0 0 3px rgba(34,197,94,.35);
  --card-max: 480px;                     /* dialog width on mobile; raise to 560px if you like */
}

/* Mobile-first resets */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Background image ---------- */
.bg-cover{
  position:relative;
  background:#0b1220 url("../img/cafe-bg.jpg") center/cover no-repeat fixed;
}
.bg-cover::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.60));
  pointer-events:none;
}

/* ---------- Layout ---------- */
.page{
  min-height:100dvh;          /* safe viewport height on mobile */
  display:grid;
  place-items:center;
  padding:24px;
}
.card{
  width:100%;
  max-width:var(--card-max);
  margin:0 auto;
  border-radius:20px;
  padding:20px;
}
.card--glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* ---------- Typography ---------- */
.title{ margin:0 0 6px; font-size:22px; letter-spacing:.2px }
.sub{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.5 }
.label{ display:block; margin:8px 0 8px; font-size:14px; color:var(--muted) }
.muted{ color:var(--muted) }
.center{ text-align:center }
.pill{
  margin-left:6px; display:inline-block; padding:3px 10px;
  border:1px solid var(--glass-brd); border-radius:999px;
  font-size:12px; color:var(--text); opacity:.9
}

/* ---------- Stacks / Grids ---------- */
.stack{ display:flex; flex-direction:column; gap:10px }
.grid{ display:grid; gap:10px }
.grid-2{ grid-template-columns:1fr 1fr }

/* ---------- Inputs (mobile hardened) ---------- */
.input-group{
  display:grid;
  grid-template-columns:minmax(68px,auto) 1fr;   /* prefix | input */
  gap:8px;
  align-items:center;
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid var(--glass-brd);
  border-radius:14px;
  padding:8px;
}
.prefix{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:68px;
  height:48px;
  text-align:center;
  font-weight:600;
  letter-spacing:.5px;
  background: rgba(255,255,255,.06);
  border-radius:10px;
  padding:0 12px;
}
.input{
  appearance:none; border:0; outline:0;
  width:100%; min-width:0;              /* prevent overflow on tiny screens */
  height:48px; font-size:18px; padding:10px 12px;
  color:var(--text); background:transparent;
}
.input::placeholder{ color:#9aa6b2 }
.input:focus-visible{ box-shadow:var(--focus); border-radius:10px }

/* Standalone boxed input (used in reports filters) */
.input--box{
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-brd);
  border-radius:14px;
  padding:12px;
  font-size:16px;
  width:100%;
  color:var(--text);
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:0; cursor:pointer; display:inline-block; text-align:center;
  padding:14px 16px; border-radius:14px; font-weight:700; text-decoration:none
}
.btn-lg{ width:100%; font-size:16px; min-height:48px }
.btn-primary{ background:var(--primary); color:var(--primary-ink) }
.btn-ghost{ background:rgba(255,255,255,.08); color:var(--text); border:1px solid var(--glass-brd) }
.btn-danger{ background:var(--danger); color:var(--danger-ink) }
.btn:focus-visible{ box-shadow:var(--focus) }

/* ---------- Alerts ---------- */
.alert{ padding:12px; border-radius:12px; margin:4px 0 8px }
.alert-error{
  background: rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fecaca
}

/* ---------- Key/Value list ---------- */
.kv{
  display:flex; flex-direction:column; gap:10px; margin:10px 0 18px
}
.kv > div{
  display:flex; justify-content:space-between; gap:14px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-brd);
  border-radius:12px; padding:10px 12px
}
.kv strong{ font-weight:700 }

/* ---------- Success icon ---------- */
.icon-check{
  display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:rgba(34,197,94,.15); color:#86efac; font-size:28px; margin:0 auto 4px
}

/* ---------- Responsive tweaks ---------- */
@media (min-width: 540px){
  .title{ font-size:24px }
  .card{ padding:24px }
}

@media (max-width:380px){
  .grid-2{ grid-template-columns:1fr }              /* stack buttons vertically */
  .input-group{ grid-template-columns:minmax(60px,auto) 1fr }
  .prefix{ min-width:60px }
}