/* =====================================================================
   Sri Sabari POS
   FILE: /assets/css/app.css

   One stylesheet, because there is one app.

   It is built for a counter, not a desk. The same screen is used on a laptop
   with a mouse, on a tablet propped against the till, and on a phone held in
   one hand while the other hand holds the goods - so:

     - nothing you tap is smaller than 44px
     - the number a cashier is about to read is the biggest thing on screen
     - the layout collapses rather than scrolls sideways
     - :focus is always visible, because half of billing is done by keyboard

   Colours are named for what they mean, not what they are, so the shop's
   colour can change in one line.
   ===================================================================== */

:root {
  --ink:        #14181f;
  --ink-soft:   #5b6472;
  --ink-faint:  #8b94a3;
  --line:       #e3e7ee;
  --line-soft:  #eef1f6;
  --paper:      #ffffff;
  --page:       #f4f6fa;

  --brand:      #0f6b4f;   /* the shop's green */
  --brand-dark: #0b5540;
  --brand-tint: #e8f3ef;

  --accent:     #1863d8;
  --warn:       #b26a00;
  --warn-tint:  #fff5e5;
  --danger:     #c62828;   /* overdue credit, and nothing else */
  --danger-tint:#fdeceb;
  --good:       #1a7f4b;

  --r:    10px;
  --r-lg: 16px;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.16);

  --sidebar: 232px;
  --topbar:  58px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Figures line up in a column only if every digit is the same width. */
  --mono: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.right { text-align: right; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: 13px; }
.tiny  { font-size: 12px; }
.bold  { font-weight: 600; }
.hide  { display: none !important; }
.danger { color: var(--danger); }
.good   { color: var(--good); }
.nowrap { white-space: nowrap; }


/* ============================================================== SIGN IN */
.signin-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 520px at 50% -12%, #dcece5 0%, transparent 60%),
    var(--page);
}

.signin {
  width: 100%; max-width: 400px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 26px 26px;
}

.signin-mark {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 15px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 700; letter-spacing: .5px;
}

.signin h1 { margin: 0 0 3px; font-size: 21px; text-align: center; letter-spacing: -.2px; }
.signin .sub { margin: 0 0 22px; text-align: center; color: var(--ink-soft); font-size: 13.5px; }

/* The shop is chosen before anything else, because it decides everything the
   session sees afterwards. */
.store-pick { margin-bottom: 18px; }
.store-pick label { display: block; font-size: 12.5px; font-weight: 600;
                    text-transform: uppercase; letter-spacing: .4px;
                    color: var(--ink-soft); margin-bottom: 7px; }


/* ================================================================ FORMS */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=tel], input[type=search], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.3 var(--font);
  /* 16px on a phone, or iOS zooms the page the moment the field is tapped. */
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  outline: none;
}
input:disabled, select:disabled { background: var(--line-soft); color: var(--ink-faint); }
input::placeholder { color: var(--ink-faint); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235b6472' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.select-lg { min-height: 54px; font-size: 16px; font-weight: 600; }

textarea { min-height: 76px; resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font: 600 15px/1 var(--font);
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover  { background: var(--line-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #a81f1f; border-color: #a81f1f; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--line-soft); color: var(--ink); }

.btn-lg    { min-height: 54px; font-size: 16px; padding: 0 24px; }
.btn-block { width: 100%; }
.btn-sm    { min-height: 38px; font-size: 13.5px; padding: 0 12px; }


/* ================================================================ SHELL */
.shell { min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #10161f;
  color: #cdd5e1;
  display: flex; flex-direction: column;
  z-index: 40;
}

.sidebar-head {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-shop { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.sidebar-sub  { font-size: 11.5px; color: #7f8b9d; margin-top: 2px;
                text-transform: uppercase; letter-spacing: .5px; }

.nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.nav-label {
  padding: 12px 10px 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; color: #66738a;
}
.nav a {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 0 12px; margin-bottom: 2px;
  border-radius: 9px;
  color: #cdd5e1; font-size: 14.5px; font-weight: 500;
  text-decoration: none;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.on    { background: var(--brand); color: #fff; }
.nav a .ic   { width: 18px; text-align: center; font-size: 15px; opacity: .9; }
.nav a .tag  {
  margin-left: auto; min-width: 20px; padding: 1px 6px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font: 600 11px/17px var(--font); text-align: center;
}

.sidebar-foot {
  padding: 11px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-foot .who { flex: 1; min-width: 0; }
.sidebar-foot .who b { display: block; font-size: 13.5px; color: #fff; font-weight: 600;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot .who span { font-size: 11.5px; color: #7f8b9d; }
.sidebar-foot a.out {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  color: #9aa5b6; background: rgba(255,255,255,.06);
}
.sidebar-foot a.out:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }

.main { margin-left: var(--sidebar); min-height: 100vh; min-height: 100dvh;
        display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar);
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.topbar .spacer { flex: 1; }
.topbar .today { font-size: 13px; color: var(--ink-soft); }

.burger { display: none; width: 42px; height: 42px; border-radius: 9px;
          border: 1px solid var(--line); background: var(--paper);
          font-size: 18px; cursor: pointer; }

.content { flex: 1; padding: 16px; }
.content-flush { padding: 0; }

.scrim {
  position: fixed; inset: 0; background: rgba(10,15,25,.45);
  z-index: 35; opacity: 0; pointer-events: none; transition: opacity .18s;
}
body.nav-open .scrim { opacity: 1; pointer-events: auto; }


/* ================================================================ CARDS */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.card-head {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.card-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow);
}
.stat .k { font-size: 12px; font-weight: 600; text-transform: uppercase;
           letter-spacing: .4px; color: var(--ink-soft); }
.stat .v { font-size: 25px; font-weight: 700; letter-spacing: -.6px; margin-top: 4px;
           font-variant-numeric: tabular-nums; }
.stat .n { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.stat.is-danger { border-color: #f3c9c6; background: var(--danger-tint); }
.stat.is-danger .v { color: var(--danger); }
.stat.is-warn { border-color: #f0dcb4; background: var(--warn-tint); }
.stat.is-warn .v { color: var(--warn); }


/* ============================================================== TABLES */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc;
  text-align: left; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft);
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.grid tbody tr:hover { background: #fbfcfe; }
table.grid .num, table.grid .right { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tr.is-void td { color: var(--ink-faint); text-decoration: line-through; }
table.grid tr.is-late td.amt { color: var(--danger); font-weight: 600; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .2px;
}
.pill-paid    { background: #e6f4ec; color: var(--good); }
.pill-partial { background: var(--warn-tint); color: var(--warn); }
.pill-credit  { background: var(--danger-tint); color: var(--danger); }
.pill-void    { background: var(--line-soft); color: var(--ink-soft); }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-faint); }
.empty .big { font-size: 30px; margin-bottom: 8px; opacity: .5; }


/* =============================================================== MODAL */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(10,15,25,.5);
}
.modal.open { display: flex; }
.modal-box {
  width: 100%; max-width: 460px;
  max-height: 92vh; max-height: 92dvh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal-box.wide { max-width: 680px; }
.modal-head {
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-head h3 { margin: 0; font-size: 16.5px; font-weight: 650; flex: 1; }
/* Every dialog can be closed. A tablet has no Escape key, and a cashier who
   cannot get out of a popup cannot serve the person in front of them. */
.modal-x {
  /* 44px, like everything else you tap. The way out of a dialog is the last
     control that should need a careful aim. */
  width: 44px; height: 44px; border-radius: 9px;
  border: none; background: transparent; color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer;
  flex: none;
}
.modal-x:hover { background: var(--line-soft); color: var(--ink); }
.modal-body { padding: 18px; }
.modal-foot {
  padding: 14px 18px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--paper);
}
.modal-foot .btn { flex: 1; }


/* ============================================================== TOASTS */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
          z-index: 90; display: flex; flex-direction: column; gap: 8px;
          width: calc(100% - 32px); max-width: 400px; }
.toast {
  padding: 12px 15px; border-radius: var(--r);
  background: #1b2330; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: rise .2s ease-out;
}
.toast.err  { background: var(--danger); }
.toast.good { background: var(--good); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }


/* ========================================================== TYPEAHEAD */
.ta-wrap { position: relative; }
.ta-list {
  position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 262px; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  display: none;
}
.ta-list.open { display: block; }
.ta-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 13px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.ta-item:last-child { border-bottom: none; }
.ta-item.on, .ta-item:hover { background: var(--brand-tint); }
.ta-item .nm { flex: 1; font-weight: 500; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-item .rt { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13.5px; }
.ta-item.new .nm { color: var(--brand); font-weight: 600; }



/* ====================================== FIGURES, MONEY AND MODES
   Written for the till, and then wanted on day closing, on the
   purchase page and on credit - all of which load this file and not
   bill.css. They live here so a row of figures looks the same
   wherever it is shown. */
.trow { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.trow .k { color: var(--ink-soft); }
.trow .v { margin-left: auto; font-variant-numeric: tabular-nums; }
.trow.sep { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; }
.pay-due {
  text-align: center; padding: 6px 0 16px;
}
.pay-due .k { font-size: 12.5px; font-weight: 600; text-transform: uppercase;
              letter-spacing: .5px; color: var(--ink-soft); }
.pay-due .v { font-size: 38px; font-weight: 700; letter-spacing: -1px;
              font-variant-numeric: tabular-nums; line-height: 1.1; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mode {
  min-height: 56px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 14.5px/1 var(--font); color: var(--ink);
}
.mode small { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
.mode:hover { border-color: var(--brand); }
.mode.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.mode.on small { color: rgba(255,255,255,.75); }.quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.quick button {
  flex: 1; min-width: 68px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
  font: 600 14px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
}
.quick button:hover { border-color: var(--brand); background: var(--brand-tint); }
.change {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r);
  background: #eef4ff; border: 1px solid #cfe0ff;
  display: flex; align-items: center; font-size: 15px; font-weight: 600; color: #12408f;
}
.change .v { margin-left: auto; font-size: 21px; font-variant-numeric: tabular-nums; }
.change.is-credit { background: var(--danger-tint); border-color: #f3c9c6; color: var(--danger); }


/* ==================================================== THE PAYMENT SHEET
   Pick a mode, put in an amount, press Add. Again for a second mode and the
   bill is split between them.

   This is used standing up, on a tablet propped against the till, with
   somebody waiting - so nothing here is smaller than a thumb, the balance
   stays pinned at the top and Pay at the bottom, and the middle is the only
   part that scrolls. */

.pay-head { gap: 8px; }
.pay-head h3 { flex: none; }
.pay-head .bal {
  margin-left: auto;
  padding: 7px 13px; border-radius: 20px;
  background: var(--danger); color: #fff;
  font: 700 15px/1 var(--font); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-head .bal.is-clear { background: var(--good); }
.pay-head .bal.is-over  { background: var(--warn); }

.pay-who {
  text-align: center; padding: 2px 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-soft);
}

.pay-entry {
  padding: 14px; border-radius: var(--r-lg);
  background: #f7f9fc; border: 1px solid var(--line);
}
.pay-label {
  display: block; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-soft); margin: 0 0 8px;
}

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.mode {
  min-height: 56px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 650 15px/1 var(--font); color: var(--ink);
}
.mode small { font-size: 10.5px; color: var(--ink-faint); font-weight: 600; }
.mode:hover { border-color: var(--brand); }
.mode.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.mode.on small { color: rgba(255,255,255,.75); }
/* A mode already put down keeps a mark, so a split is visible at a glance even
   after the selection has moved on. A dot, not a border - a border reads as
   "selected", which is a different thing and the one next to it. */
.mode { position: relative; }
.mode.used::after {
  content: "";
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
}
.mode.used.on::after { background: #fff; }

/* The amount, and the one button that commits it. */
.amt-row { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.amt-row .cur {
  display: grid; place-items: center; width: 34px;
  font-size: 18px; font-weight: 700; color: var(--ink-soft);
}
.amt-row input {
  flex: 1; min-width: 0; min-height: 56px;
  font-size: 22px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.btn-add { min-height: 56px; min-width: 104px; font-size: 16px; flex: none; }

.quick { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.quick:empty { display: none; }
.quick button {
  flex: 1; min-width: 66px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
  font: 650 14px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
}
.quick button:hover { border-color: var(--brand); background: var(--brand-tint); }

/* What has been put down so far. */
.taken:empty { display: none; }
.taken { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.pay-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 8px 8px 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.pay-row.is-credit { background: var(--danger-tint); border-color: #f3c9c6; }
.pay-row .nm { font-weight: 650; font-size: 15px; }
.pay-row .rf { font-size: 12px; color: var(--ink-faint); }
.pay-row .amt {
  margin-left: auto; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pay-row .js-drop {
  width: 44px; height: 44px; border-radius: 9px; border: none;
  background: transparent; color: var(--ink-faint);
  font-size: 20px; line-height: 1; cursor: pointer; flex: none;
}
.pay-row .js-drop:hover { background: var(--danger-tint); color: var(--danger); }

/* The bottom: what changes the amount, beside the amount it changes. */
.pay-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.pf-tools { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }

.adv-chip {
  min-height: 46px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px dashed var(--brand); border-radius: var(--r);
  background: var(--brand-tint); color: var(--brand-dark);
  font: 700 14px/1 var(--font); cursor: pointer; white-space: nowrap;
}
.adv-chip.on { background: var(--brand); border-style: solid; color: #fff; }

.disc-mini { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.disc-mini .lab {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-soft);
}
.disc-mini input {
  width: 76px; min-height: 46px; padding: 6px 9px;
  text-align: right; font-size: 15px; font-variant-numeric: tabular-nums;
}

/* Settings: which pages somebody can open - grouped as the sidebar is, two
   even tiles to a row, one on a phone. */
.btn-key { min-width: 46px; padding: 0 12px; font-size: 17px; }
#m-access .modal-box { max-width: 640px; }
.acc-note { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.acc-tools {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 8px 8px 8px 14px; border-radius: var(--r); background: var(--line-soft);
}
.acc-count { flex: 1; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.acc-group + .acc-group { margin-top: 16px; }
.acc-group[hidden] { display: none; }
.acc-group-h {
  margin: 0 2px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft);
}
.acc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acc-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  transition: border-color .12s, background-color .12s;
}
.acc-row[hidden] { display: none; }
.acc-row:hover { border-color: var(--brand); }
.acc-row:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.acc-row input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--brand); cursor: pointer; }
.acc-ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--line-soft); font-size: 17px;
}
.acc-row:has(input:checked) .acc-ic { background: #fff; }
.acc-nm { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
@media (max-width: 520px) { .acc-list { grid-template-columns: 1fr; } }

/* The order pad: the shop's own list, a heading with its sizes under it and a
   box against each for how many. No rate, no amount - see pos/order.php. */
.pad-group + .pad-group { margin-top: 14px; }
.pad-h {
  margin: 0 2px 8px; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.2px; color: var(--ink);
}
.pad-sub {
  margin: 0 2px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft);
}
.pad-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.pad-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 10px 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  transition: border-color .12s, background-color .12s;
}
.pad-row:focus-within { border-color: var(--brand); background: var(--brand-tint); }
.pad-nm { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pad-row input.pad-q {
  width: 72px; flex: none; min-height: 40px; padding: 8px;
  text-align: center; font-weight: 650;
}

/* The maker's mark: sign-in, the sidebar, and the foot of every screen.
   Part of the deal with the shop - see Maker in app/core.php. */
.signin-logo { display: block; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 16px; }
.signin-foot { margin: 18px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.signin-foot a, .app-foot a { color: inherit; }
.maker {
  display: flex; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 8px 10px;
  border-radius: 9px; background: rgba(255,255,255,.05); color: #9aa5b6; font-size: 12px;
}
.maker:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.maker img { width: 26px; height: 26px; flex: none; padding: 2px; border-radius: 7px; background: #fff; }
.maker b { color: #fff; font-weight: 650; }
.app-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px 14px; font-size: 12px; color: var(--ink-soft); text-align: center;
}
.app-foot img { width: 18px; height: 18px; flex: none; }

/* The letter Alt presses a button with. */
[data-alt] u { text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

.net-line {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 14px 16px;
  border-radius: var(--r);
  background: var(--brand); color: #fff;
}
.net-line span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }
.net-line b { margin-left: auto; font-size: 24px; font-weight: 800;
              letter-spacing: -.5px; font-variant-numeric: tabular-nums; }

.change {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r);
  background: #eef4ff; border: 1px solid #cfe0ff;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 15px; font-weight: 650; color: #12408f;
}
/* One row per fact: a bill can owe change AND leave a balance on credit. */
.change .cr { display: flex; align-items: center; }
.change .cr b { margin-left: auto; font-size: 21px; font-variant-numeric: tabular-nums; }
.change.is-credit { background: var(--danger-tint); border-color: #f3c9c6; color: var(--danger); }

.btn-pay { min-height: 56px; font-size: 17px; font-weight: 700; flex: 2 !important; }

/* Figures shown on other screens. */
.trow { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.trow .k { color: var(--ink-soft); }
.trow .v { margin-left: auto; font-variant-numeric: tabular-nums; }
.trow.sep { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; }

.pay-due { text-align: center; padding: 6px 0 16px; }
.pay-due .k { font-size: 12.5px; font-weight: 600; text-transform: uppercase;
              letter-spacing: .5px; color: var(--ink-soft); }
.pay-due .v { font-size: 38px; font-weight: 700; letter-spacing: -1px;
              font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ============================================================= WHATSAPP
   No API and no account. The link opens whatever WhatsApp the shop is already
   signed into, with the message ready and send still to be pressed. */
.btn-wa { background: #25d366; border-color: #25d366; color: #073b22; font-weight: 700; }
.btn-wa:hover { background: #1fbb59; border-color: #1fbb59; }

.send { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.send label {
  display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-soft); margin-bottom: 8px;
}

/* ============================================================ SCANNER */
.scan-stage {
  position: relative;
  background: #10161f;
  border-radius: var(--r);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
/* The frame is exactly the size of the picture as drawn, so the overlay can
   simply fill it - no measuring, and nothing to get wrong while the dialog is
   still hidden and everything measures zero. */
.scan-frame { position: relative; line-height: 0; }
.scan-canvas { display: block; max-width: 100%; max-height: 56vh; }

/* The quad sits exactly over the picture, in the picture's own coordinates,
   so a handle stays on its corner however the image is scaled to fit. */
.scan-quad {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
}
.scan-quad polygon {
  fill: rgba(15,107,79,.18);
  stroke: #35d29a; stroke-width: 3; vector-effect: non-scaling-stroke;
}
.scan-quad circle {
  fill: #fff; stroke: #0f6b4f; stroke-width: 3;
  vector-effect: non-scaling-stroke; cursor: grab;
}
.scan-hint { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }

.bill-shot {
  display: block; width: 100%; max-height: 260px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--r); background: #fafbfd;
}
.shot-thumb {
  width: 40px; height: 40px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--line); cursor: zoom-in; background: #fafbfd;
}


/* ========================================================== RESPONSIVE */
@media (max-width: 980px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .main { margin-left: 0; }
  .burger { display: grid; place-items: center; }
}

@media (max-width: 620px) {
  .content { padding: 12px; }

  /* A card's heading and its filters sit side by side on a laptop. On a phone
     they stack, or the date boxes push the search off the edge of the card. */
  .card-head { flex-wrap: wrap; }
  .card-head > form { flex: 1 0 100%; }
  .card-head > form > * { flex: 1 1 auto; min-width: 0; }
  .card-head input[type=search], .card-head input[type=date], .card-head select {
    width: auto !important; min-width: 130px;
  }
  .card-head .spacer { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat .v { font-size: 21px; }
  .topbar h1 { font-size: 15.5px; }
  .topbar .today { display: none; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-box { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 94dvh; }
  /* 16px, so tapping a field never zooms the page on iOS. */
  input, select, textarea { font-size: 16px; }
}

@media print {
  .sidebar, .topbar, .no-print, .toasts { display: none !important; }
  .main { margin: 0; }
  .content { padding: 0; }
  body { background: #fff; }
}