/* হাজিরা অ্যাপ — ফোনের পর্দা।
 *
 * তিনটে নিয়ম মাথায় রেখে লেখা, কারণ এটা দোকানের দরজায় দাঁড়িয়ে, তাড়ায়,
 * প্রায়ই রোদে ব্যবহার হবে:
 *   ১। বোতাম কমপক্ষে ৫৬ পিক্সেল উঁচু — হাতের আঙুল ছোট লক্ষ্যে লাগে না।
 *   ২। রঙে ভরসা নয়, লেখাতেও বলা — সবুজ/লাল না বুঝলেও শব্দ পড়া যায়।
 *   ৩। কোনো বাইরের ফন্ট নয়। POS ফন্ট নিজে হোস্ট করে; এখানে সিস্টেমের
 *      ফন্টেই চলে, কারণ বাংলা রেন্ডার সব আধুনিক ফোনেই ঠিক আছে আর একটাও
 *      বাড়তি ফাইল অফলাইনে ক্যাশ করতে হয় না।
 */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --g: #16a34a; --g-dark: #15803d; --g-soft: #ecfdf5; --g-line: #a7f3d0;
  --ink: #0f172a; --muted: #64748b; --faint: #94a3b8;
  /* body-র চেয়ে একটু হালকা কিন্তু muted-এর চেয়ে গাঢ় — লেবেল ও বিবরণে।
     আগে এগুলো #334155 হাতে লেখা ছিল, আর অন্ধকার মোডে গাঢ় কার্ডের উপর
     প্রায় অদৃশ্য হয়ে যেত — লগইন পর্দায় 'ফোন নম্বর' পড়াই যাচ্ছিল না। */
  --strong: #334155;
  --warn-ink: #78350f; --warn-ink-soft: #b45309; --danger-ink: #991b1b;
  --line: #e2e8f0; --bg: #f1f5f9; --card: #fff;
  --danger: #dc2626; --danger-soft: #fef2f2; --danger-line: #fecaca;
  --warn: #f59e0b; --warn-soft: #fffbeb; --warn-line: #fde68a;
  --blue: #2563eb;
}

html, body { height: 100%; }

body {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* ── পর্দা ── */
.screen { display: none; min-height: 100dvh; flex-direction: column; }
.screen.on { display: flex; }
.screen.center { align-items: center; justify-content: center; padding: 20px; }

.scroll {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ── উপরের বার ── */
.bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.bar b { font-size: 17px; }
.sp { flex: 1; }

.logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--g); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 17px; flex: none;
}
.logo.sm { width: 30px; height: 30px; font-size: 12px; }

/* ── কার্ড ── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 14px;
}
.card.tight { padding: 14px 16px; gap: 4px; }
.center-card { text-align: center; align-items: stretch; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand b { font-size: 19px; display: block; line-height: 1.25; }
.brand small { font-size: 13px; color: var(--muted); display: block; }

/* ── ফর্ম ── */
label { display: flex; flex-direction: column; gap: 6px; }
label > span { font-size: 14.5px; font-weight: 600; color: var(--strong); }
label.block { width: 100%; }

input, textarea {
  font: inherit; font-size: 17px;              /* ১৬-এর নিচে হলে iOS নিজে জুম করে */
  padding: 14px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(22,163,74,.13); }
textarea { resize: vertical; min-height: 96px; }

/* ── বোতাম ── */
.btn {
  font: inherit; font-weight: 700; font-size: 16.5px;
  min-height: 56px; padding: 14px 18px; border-radius: 13px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
}
.btn.lg { min-height: 60px; font-size: 18px; }
.btn.primary { background: var(--g); border-color: var(--g); color: #fff; }
.btn.primary:active { background: var(--g-dark); }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #111; }
/* ⚠ var(--card), #fff নয়। .btn.ghost-এর specificity অন্ধকার মোডের ঢালাও
   `.btn { background: var(--card) }` নিয়মটাকে হারিয়ে দেয়, তাই হাতে সাদা
   লিখলে কালো পর্দায় বোতামটা ধবধবে সাদা হয়ে থাকত। */
.btn.ghost { background: var(--card); color: var(--muted); font-weight: 600; }
.btn:disabled { opacity: .42; }

.linkbtn {
  font: inherit; font-size: 15px; background: none; border: 0;
  color: var(--muted); cursor: pointer; padding: 8px 4px; text-decoration: underline;
}

.stack { display: flex; flex-direction: column; gap: 10px; }
.actions { display: flex; flex-direction: column; gap: 10px; }

/* ── অবস্থার কার্ড ── */
.state-card {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--faint);
  border-radius: 14px; padding: 16px;
}
.state-card.in { border-left-color: var(--g); background: var(--g-soft); }
.state-card.break { border-left-color: var(--blue); background: #eff6ff; }
.state-card.done { border-left-color: var(--faint); }
.state-label { font-size: 19px; font-weight: 700; }
.state-detail { font-size: 15px; color: var(--muted); margin-top: 3px; }

.who { font-size: 18px; font-weight: 700; }
.who-meta { font-size: 14px; color: var(--muted); }

/* ── ছোট চিহ্ন ── */
.pill {
  font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--line); background: #f8fafc; color: var(--muted); white-space: nowrap;
}
.pill.on { background: var(--g-soft); border-color: var(--g-line); color: var(--g-dark); }
.pill.off { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink-soft); }

.queue { font-size: 13.5px; color: var(--muted); }
.queue.pending { color: var(--warn-ink-soft); font-weight: 600; }

.foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line);
}

/* ── বার্তা ── */
.msg { font-size: 14.5px; min-height: 20px; color: var(--danger); text-align: center; }
.hint { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.big-muted { font-size: 16px; color: var(--strong); }
.count { font-size: 13.5px; color: var(--danger); text-align: right; }
.count.ok { color: var(--muted); }

.warn {
  background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.55;
}
.warn.hide { display: none; }

/* ── ফলের চিহ্ন ── */
.mark {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 4px;
  display: grid; place-items: center; font-size: 38px; font-weight: 700; color: #fff;
}
.mark.ok { background: var(--g); }
.mark.ok:after { content: '✓'; }
.mark.bad { background: var(--danger); }
.mark.bad:after { content: '✕'; }
.mark.queued { background: var(--warn); color: #111; }
.mark.queued:after { content: '⟳'; }

#resultTitle { font-size: 21px; font-weight: 700; }
#resultScreen .card.bad { background: var(--danger-soft); border-color: var(--danger-line); }
#resultScreen .card.bad #resultTitle { color: var(--danger-ink); }

/* ── বিরতির ঘড়ি ── */
.ring {
  width: 168px; height: 168px; border-radius: 50%; margin: 0 auto 6px;
  border: 12px solid var(--g-line); border-top-color: var(--g);
  display: grid; place-content: center; text-align: center;
}
.ring.over { border-color: var(--danger-line); border-top-color: var(--danger); }
.ring-n { font-size: 42px; font-weight: 700; line-height: 1; }
.ring-u { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; }

/* ── স্পিনার ── */
.spinner {
  width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%;
  border: 5px solid var(--g-line); border-top-color: var(--g);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ইতিহাস ── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center; }
.tile b { display: block; font-size: 22px; font-weight: 700; }
.tile span { font-size: 12px; color: var(--muted); }

.list { display: flex; flex-direction: column; gap: 7px; }
.row {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; align-items: center; gap: 11px;
}
.row .d { font-weight: 700; font-size: 15.5px; min-width: 62px; }
.row .m { flex: 1; font-size: 14px; color: var(--muted); }
.row .s { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.s.present { background: var(--g-soft); color: var(--g-dark); }
.s.late { background: var(--warn-soft); color: var(--warn-ink-soft); }
.s.absent { background: var(--danger-soft); color: var(--danger-ink); }
.s.off, .s.holiday, .s.leave { background: #f1f5f9; color: var(--muted); }
.s.incomplete { background: #eff6ff; color: var(--blue); }

/* ── ভাষা ── */
.lang { display: flex; gap: 8px; justify-content: center; }
.lang button {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 99px; min-height: 40px;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer;
}
.lang button.on { background: var(--g); border-color: var(--g); color: #fff; }

/* ── টোস্ট ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));
  background: #0f172a; color: #fff; padding: 13px 20px; border-radius: 12px;
  font-size: 15px; max-width: 90%; text-align: center; z-index: 80;
  box-shadow: 0 8px 26px rgba(15,23,42,.3);
}
.toast.ok { background: var(--g-dark); }
.toast.err { background: #991b1b; }

.hide { display: none !important; }

/* ── বড় পর্দা (ট্যাব) ── */
@media (min-width: 640px) {
  .scroll { max-width: 520px; margin: 0 auto; width: 100%; }
}

/* ── অন্ধকার মোড ──
   ফোন অন্ধকারে থাকলে সাদা পর্দা চোখে লাগে, আর ভোরে বা রাতে শিফট শুরু
   হলে ঠিক তখনই অ্যাপটা খোলা হয়। */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e2e8f0; --muted: #94a3b8; --faint: #64748b;
    --line: #334155; --bg: #0f172a; --card: #1e293b;
    --strong: #cbd5e1;
    /* গাঢ় পটভূমিতে গাঢ় লেখা পড়া যায় না — তাই উল্টো দিকে সরানো */
    --warn-ink: #fcd34d; --warn-ink-soft: #fbbf24; --danger-ink: #fca5a5;
    --g-soft: #052e1a; --g-line: #166534;
    --danger-soft: #3f1414; --danger-line: #7f1d1d;
    --warn-soft: #3b2c07; --warn-line: #78350f;
  }
  .bar, input, textarea, .btn, .state-card, .tile, .row, .pill { background: var(--card); }
  .btn.primary { background: var(--g); }
  .state-card.break { background: #10233f; }
}