@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&family=JetBrains+Mono:wght@500&display=swap");

/* Hassan Brothers components. Every colour, size and radius comes from tokens.css. */

.hb, .hb * { box-sizing: border-box; }
.hb {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hb :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ---------- Button ---------- */
.hb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 16px; border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font-body); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: background-color .12s, border-color .12s;
}
.hb-btn svg { width: 18px; height: 18px; flex: none; }
.hb-btn--primary { background: var(--brand-fill); color: var(--ink-inverse); }
.hb-btn--primary:hover { background: var(--brand-fill-hover); }
.hb-btn--secondary { background: var(--surface); color: var(--brand-600); border-color: var(--line-strong); }
.hb-btn--secondary:hover { background: var(--brand-100); }
.hb-btn--ghost { background: transparent; color: var(--ink-muted); }
.hb-btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }
.hb-btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.hb-btn--danger:hover { background: var(--danger-tint); }
.hb-btn--danger-solid { background: var(--danger); color: var(--ink-inverse); }
.hb-btn--sm { height: 32px; padding: 0 12px; font-size: 14px; }
.hb-btn--lg { height: var(--control-h-lg); padding: 0 24px; font-size: 16px; }
.hb-btn--icon { width: var(--control-h); padding: 0; }
.hb-btn--icon.hb-btn--sm { width: 32px; }
.hb-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Field ---------- */
.hb-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.hb-label { font: 600 13px/18px var(--font-body); color: var(--ink); }
.hb-label .hb-req { color: var(--danger); margin-left: 2px; }
.hb-input, .hb-select {
  height: var(--control-h); width: 100%; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 400 15px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.hb-input:focus, .hb-select:focus { outline: 2px solid var(--brand-600); outline-offset: 0; border-color: var(--brand-600); }
.hb-input--money { text-align: right; }
.hb-input[readonly] { background: var(--surface-sunken); border-color: var(--line); color: var(--ink-muted); }
/* A focused read-only box keeps the sunken ground and gets the normal focus ring: it must never pick up a
   state colour (an old global rule painted it salmon, which reads as an error). */
.hb-input[readonly]:focus, .hb-input[readonly]:active, .hb-select[disabled]:focus,
.form-control[readonly]:focus, input[readonly]:focus, textarea[readonly]:focus {
  background: var(--surface-sunken) !important; color: var(--ink-muted) !important;
  border-color: var(--brand-600) !important; outline: 2px solid var(--brand-600); outline-offset: 0; box-shadow: none !important;
}
.hb-help { font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.hb-field--error .hb-input { border-color: var(--danger); }
.hb-field--error .hb-help { color: var(--danger); }
.hb-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3) var(--space-4); align-items: start; }

/* ---------- Card & PageHeader ---------- */
.hb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.hb-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.hb-card__title { font: 700 16px/22px var(--font-display); margin: 0; }
.hb-card__body { padding: var(--space-5); }
.hb-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.hb-crumbs { font: 400 13px/18px var(--font-body); color: var(--ink-muted); display: flex; gap: 6px; }
.hb-crumbs a { color: var(--brand-600); text-decoration: none; }
.hb-page-title { font: 700 22px/28px var(--font-display); margin: 2px 0 0; color: var(--ink); text-wrap: balance; }
.hb-page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Segmented control (replaces the coloured tab buttons) ---------- */
.hb-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.hb-seg a, .hb-seg button { border: 0; background: transparent; color: var(--ink-muted); font: 600 14px/1 var(--font-body); padding: 9px 14px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; text-decoration: none; }
.hb-seg [aria-current="page"], .hb-seg [aria-pressed="true"] { background: var(--brand-fill); color: var(--ink-inverse); }

/* ---------- Badge ---------- */
.hb-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-body); white-space: nowrap; }
.hb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hb-badge--paid { background: var(--success-tint); color: var(--success); }
.hb-badge--due { background: var(--danger-tint); color: var(--danger); }
.hb-badge--partial { background: var(--warning-tint); color: var(--warning); }
.hb-badge--info { background: var(--info-tint); color: var(--info); }
.hb-badge--neutral { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- Filter bar ---------- */
.hb-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.hb-filter .hb-field { flex: 1 1 160px; }
.hb-filter__actions { display: flex; gap: var(--space-2); margin-left: auto; }

/* ---------- Data table ---------- */
.hb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.hb-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-body); font-variant-numeric: tabular-nums; }
.hb-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); color: var(--ink-muted); font: 600 13px/18px var(--font-body); text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.hb-table td { height: var(--row-h); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.hb-table tbody tr:hover td { background: var(--brand-50); }
.hb-table .hb-num { text-align: right; }
.hb-table .hb-neg { color: var(--danger); }
.hb-table .hb-actions { text-align: right; width: 1%; }
.hb-table .hb-actions .hb-btn { margin-left: 4px; }
.hb-table tfoot td { font-weight: 700; background: var(--surface-sunken); border-bottom: 0; }
.hb-link { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.hb-link:hover { text-decoration: underline; }
.hb-table-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3); color: var(--ink-muted); font-size: 13px; flex-wrap: wrap; }

/* ---------- Stat tile & report summary ---------- */
.hb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.hb-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); min-width: 0; }
.hb-stat__label { font: 600 13px/18px var(--font-body); color: var(--ink-muted); }
.hb-stat__value { font: 700 24px/30px var(--font-display); color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-stat__delta { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.hb-stat--key { background: var(--brand-fill); border-color: var(--brand-fill); }
.hb-stat--key .hb-stat__label, .hb-stat--key .hb-stat__value, .hb-stat--key .hb-stat__delta { color: var(--ink-inverse); }
/* A key tile whose figure is negative (a balance below zero) is shown as a warning, not as the good-news key style.
   hb-shortcuts.js adds the class on load when the value starts with a minus sign. */
.hb-stat--key.hb-stat--key-neg, .hb-stat--key.hb-stat--neg, .hb .hb-stat--key.hb-stat--key-neg { background: var(--danger-tint); border-color: var(--danger); }
/* Tint background + ink text (label, sub-text) and danger value: readable (4.5:1 or better) in light and dark. */
.hb-stat--key.hb-stat--key-neg .hb-stat__label, .hb-stat--key.hb-stat--key-neg .hb-stat__delta,
.hb-stat--key.hb-stat--neg .hb-stat__label, .hb-stat--key.hb-stat--neg .hb-stat__delta { color: var(--ink); }
.hb-stat--key.hb-stat--key-neg .hb-stat__value, .hb-stat--key.hb-stat--neg .hb-stat__value { color: var(--danger); }
/* Phone: the amount stays on one line ("Rs" never sits alone), so the figure shrinks instead of wrapping. */
@media screen and (max-width: 480px) {
  .hb-stat { padding: var(--space-3); }
  .hb-stat__value { font-size: clamp(13px, 4vw, 22px); line-height: 1.3; }
}

/* ---------- Totals bar (cashier) ---------- */
.hb-totals { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5); background: var(--surface-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); flex-wrap: wrap; }
.hb-totals__item { display: grid; gap: 2px; min-width: 0; }
.hb-totals__label { font: 600 12px/16px var(--font-body); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.hb-totals__value { font: 700 20px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.hb-totals__value--grand { font: 800 32px/36px var(--font-display); color: var(--ink); }
.hb-totals__value--due { color: var(--danger); }
.hb-totals__spacer { flex: 1; }

/* ---------- Alert ---------- */
.hb-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-size: 14px; line-height: 20px; }
.hb-alert svg { width: 20px; height: 20px; flex: none; margin-top: 0; }
.hb-alert strong { display: block; }
.hb-alert--success { background: var(--success-tint); color: var(--ink); border-color: var(--success); }
.hb-alert--success svg { color: var(--success); }
.hb-alert--danger { background: var(--danger-tint); color: var(--ink); border-color: var(--danger); }
.hb-alert--danger svg { color: var(--danger); }
.hb-alert--warning { background: var(--warning-tint); color: var(--ink); border-color: var(--warning); }
.hb-alert--warning svg { color: var(--warning); }
.hb-alert--info { background: var(--info-tint); color: var(--ink); border-color: var(--info); }
.hb-alert--info svg { color: var(--info); }

/* ---------- Dialog ---------- */
.hb-dialog { width: min(440px, 100%); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-5); display: grid; gap: var(--space-3); }
.hb-dialog__title { font: 700 18px/24px var(--font-display); margin: 0; }
.hb-dialog__body { color: var(--ink-muted); margin: 0; }
.hb-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

/* ---------- Keypad (PIN lock, switch user, manager approval, page lock) ---------- */
.hb-keypad { width: min(320px, 100%); display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.hb-keypad__title { font: 700 20px/26px var(--font-display); margin: 0; }
.hb-keypad__who { font-size: 13px; color: var(--ink-muted); }
.hb-dots { display: flex; gap: 14px; }
.hb-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
.hb-dots span.on { background: var(--brand-fill); border-color: var(--brand-fill); }
.hb-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.hb-keys button { height: 56px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 22px/1 var(--font-display); cursor: pointer; }
.hb-keys button:hover { background: var(--brand-50); }
.hb-keys .hb-key-ok { background: var(--brand-fill); color: var(--ink-inverse); border-color: var(--brand-fill); }
.hb-keypad__error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ---------- App frame pieces ---------- */
.hb-topbar { display: flex; align-items: center; gap: var(--space-3); height: 56px; padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.hb-user { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 8px 4px 4px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px/18px var(--font-body); cursor: pointer; }
.hb-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); font: 700 13px/1 var(--font-display); }
.hb-user small { display: block; font: 400 12px/14px var(--font-body); color: var(--ink-muted); }
.hb-staging-bar { height: 3px; background: var(--staging); }

@media screen and (max-width: 575px) {
  .hb-card__body { padding: var(--space-4); }
  .hb-totals { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .hb-totals__value--grand { font-size: 26px; line-height: 30px; }
  .hb-user .hb-user__text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hb-btn { transition: none; } }