/* Aloke console theme — the owner-facing pair (/owner and /loyalty) only.
   Loaded LAST in each page's head, after auth.css and the page's own sheet,
   so everything here wins by order and nothing needs !important (except the
   two places noted).

   WHAT THIS FILE IS: the Aloke brand (the deep purple of the landing page,
   the wallet and the customer card) applied to the shared tokens, plus a
   component-polish pass — bigger touch targets, softer cards, clearer
   selected states — for the two consoles a non-technical shop owner uses.

   WHAT IT IS NOT: a second design system. It only re-values the tokens
   auth.css declares and sharpens shapes that already exist. The admin/super
   consoles, the till and the customer pages do not load it and keep their
   own look. */

:root {
  --bg: #F7F5FB;
  --surface: #FFFFFF;
  --ink: #241C33;
  --muted: #6E6580;
  --line: #E9E4F2;

  --accent: #5B2C91;          /* Aloke purple — the card's own colour */
  --accent-press: #48226F;
  --accent-weak: #F1EBFA;

  --r-card: 14px;
  --r-btn: 10px;

  --ring: 0 0 0 3px rgba(91, 44, 145, .16);
  --overlay-shadow: 0 8px 30px rgba(36, 28, 51, .14);
  --card-shadow: 0 1px 2px rgba(36, 28, 51, .05), 0 6px 18px rgba(36, 28, 51, .05);
}

/* The topbar wears the brand: a purple mark, a quiet white bar. */
.topbar { box-shadow: 0 1px 0 rgba(36, 28, 51, .03); }
.logo, .auth-logo {
  background: linear-gradient(135deg, #6D3AAE, #48226F);
  color: #fff;
}

/* Cards float a little instead of sitting flat. */
.section { box-shadow: var(--card-shadow); }
.section > h2 { font-size: 19px; }

/* Buttons: thumb-sized everywhere, one primary per view. */
.primary { min-height: 44px; height: auto; padding: 10px var(--s5); border-radius: var(--r-pill); }
.ghost, .btn-line, .btn-danger, .btn-approve { min-height: 44px; height: auto; padding: 8px var(--s4); }
.btn-sm { min-height: 36px; height: auto; padding: 4px 12px; }
.icon-btn { width: 44px; height: 44px; border-radius: var(--r-btn); }
.primary:active:not(:disabled) { transform: translateY(1px); }

/* Inputs: comfortable to hit, calm until touched. */
input, select, textarea { min-height: 44px; border-radius: var(--r-btn); }
textarea { min-height: 90px; }
input[type="checkbox"], input[type="radio"], input[type="color"],
input[type="file"], input[type="range"] { min-height: 0; }

/* Focus is always visible — keyboard or till-glove taps alike. */
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Stat tiles: the number leads, a soft brand wash behind it. */
.stat { border-radius: var(--r-card); background: var(--surface); }
.stat .stat-num {
  color: var(--accent-press);
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}

/* THE TWO-LEVEL NAV — the selected group is unmistakable: solid purple,
   white type. A thumb should never have to squint at a hairline. */
.pgroup { border-radius: var(--r-pill); background: var(--surface); }
.pgroup.on {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.pgroup.on:hover { color: #fff; }
.ptab.on { border-bottom-width: 3px; }

/* Chips and badges pick up the brand tint through the tokens; the pill tabs
   (super-style .tab, the brand tabs) just get real touch height. */
.tab, .br-tab, .br-pill { min-height: 40px; }

/* Tables: quiet zebra so a long member list can be read across. */
table.data tbody tr:hover td { background: var(--accent-weak); }

/* GUIDED EMPTINESS — an empty list is an invitation, not a shrug. */
.empty {
  border: 1px dashed var(--line); border-radius: var(--r-card);
  background: var(--bg); padding: var(--s5) var(--s4);
  line-height: 1.9;
}

/* Success reads as the brand, not as a second alarm colour. */
.ok-box { border-inline-start: 3px solid var(--accent); }
.error-box { border-inline-start: 3px solid var(--danger); }

/* The sticky save bar on /loyalty: clearly a bar, never mistaken for a card. */
.ly-save .section {
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -8px 24px rgba(36, 28, 51, .10);
}
.ly-save .primary { min-width: 160px; }

/* ADVANCED SETTINGS DISCLOSURE — the fold that keeps a first run to three
   decisions. Same quiet dashed voice as the owner console's advanced groups. */
.lp-adv {
  border: 1px dashed var(--line); border-radius: var(--r-card);
  background: var(--bg); margin-top: var(--s4);
}
.lp-adv > summary {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 48px; padding: var(--s2) var(--s4);
  cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
.lp-adv > summary::-webkit-details-marker { display: none; }
.lp-adv > summary:hover { color: var(--ink); }
.lp-adv[open] { background: var(--surface); border-style: solid; }
.lp-adv[open] > summary { color: var(--ink); }
.lp-adv > summary .ic { width: 18px; height: 18px; transition: transform .15s ease; }
.lp-adv[open] > summary .ic { transform: rotate(180deg); }
.lp-adv-b { padding: 0 var(--s4) var(--s4); }
.lp-adv .lp-row { margin-bottom: var(--s4); }
.lp-adv .lp-row:last-child { margin-bottom: 0; }

/* Helper lines under inputs: one quiet sentence answering "what goes here". */
.field .hint { line-height: 1.7; }

/* Larger tap rows for the repeating editors (rewards, tiers, bundles). */
.lp-rows .lp-row { border-radius: var(--r-card); background: var(--surface); }

/* Respect a reduced-motion request: no lifts, no chevron spins. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}