/* Master Admin portal. Uses the shared tokens; nothing here is specific to one screen size. */
.admin-nav { border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav .tabs { margin: 0; padding: 4px var(--gutter); width: max-content; min-width: 100%; }
.admin-nav .tab { white-space: nowrap; }

/* "You are managing <restaurant> as Master Admin" strip above a restaurant's own screens */
.master-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px var(--gutter); background: var(--ink); color: var(--card); font-size: 14px; position: sticky; top: 0; z-index: 70; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.master-bar .btn { min-height: 36px; } .master-bar .btn:not(.primary) { color: var(--ink); } /* a <button> has no inherited text colour: without this the "Customer" button is dark on dark in the kitchen skin */
.master-bar + .app-head { top: calc(52px + env(safe-area-inset-top, 0px)); }

.warn-row td { background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.dim-row td { opacity: .72; }
.warn { color: var(--warn); } .b { font-weight: 700; } .small { font-size: 12px; }
.alertbar { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--radius); padding: 10px 14px; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.tag.demo { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.idcell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.icon-btn.sm { min-width: 32px; min-height: 32px; font-size: 13px; }
table.data td .actions { gap: 6px; } .actions .btn { flex: none; min-width: max-content; } /* never squeezed below a fingertip by a narrow column */
table.data td .btn.sm { min-height: 32px; padding: 3px 10px; }

.kpi-btn { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.kpi-btn[aria-pressed='true'] { outline: 2px solid var(--accent); outline-offset: -2px; }
.kpis-wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kpis-wide { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kpis-wide { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .kpis-wide { grid-template-columns: repeat(6, 1fr); } }

table.data.matrix th, table.data.matrix td { white-space: nowrap; }

/* Leads: a lead's history, newest first */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { border-left: 2px solid var(--line, #e5e7eb); padding: 2px 0 2px 12px; }

/* Quotes: one line of a quote on one row on a wide screen, wrapping on a narrow one */
.qline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-bottom: 1px solid var(--line, #e5e7eb); padding-bottom: 8px; }
.qline > select, .qline > input { width: auto; flex: 0 0 auto; }
.qline > select[aria-label="Line type"] { flex-basis: 130px; } .qline > select[aria-label="Plan"] { flex-basis: 150px; }
.qline > select[aria-label="Billing"] { flex-basis: 115px; } .qline > select[aria-label="GST"] { flex-basis: 110px; }
.qline > .q-desc { flex: 1 1 200px; min-width: 0; } .qline > .q-qty { flex-basis: 72px; } .qline > .q-unit { flex-basis: 120px; }
.qline > .q-out { flex: 1 0 100px; text-align: right; }

/* Leads: the funnel from website visit to live customer */
.funnel { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.funnel .bar { height: 8px; border-radius: 99px; background: var(--line, #e5e7eb); overflow: hidden; margin-top: 4px; }
.funnel .bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ── The Master Admin wears the SYQAVO website's look ("Midnight Saffron", tokens in shared/brand.css) ──
   Only body[data-role='admin'] (the platform owner's screens, including its sign-in). Restaurant, staff and guest screens keep shared/theme.css,
   including the restaurant screens a Master Admin opens from here (they switch body[data-role] to the restaurant's own skin).
   The app's tokens are re-pointed at the brand's, so every existing component follows; the rules below add the website's glass, pills and spring. */
body[data-role='admin'] {
  --bg: var(--sq-bg); --card: var(--sq-bg-3); --ink: var(--sq-ink); --mute: var(--sq-mute);
  --line: var(--sq-line); --line-strong: var(--sq-line-2);
  --accent: var(--sq-saffron); --accent-ink: var(--sq-accent-ink); --accent-soft: rgba(255, 159, 67, .14);
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .13);
  --bad: #ff6b81; --bad-soft: rgba(255, 92, 138, .14); --info: #93c5fd; --info-soft: rgba(147, 197, 253, .13);
  --radius: var(--sq-radius-sm); --radius-sm: 12px; --font: var(--sq-font); --mono: var(--sq-mono);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -32px rgba(0, 0, 0, .7);
  --glass-card: linear-gradient(155deg, var(--sq-glass-2), var(--sq-glass) 60%);
  color-scheme: dark; -webkit-font-smoothing: antialiased;
  /* the website's light behind everything, held still (an operations screen does not need drifting colour) */
  background:
    radial-gradient(60vmax 60vmax at 0% -10%, rgba(255, 159, 67, .16), transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 0%, rgba(255, 92, 138, .11), transparent 60%),
    radial-gradient(70vmax 60vmax at 30% 110%, rgba(139, 108, 255, .14), transparent 60%),
    radial-gradient(50vmax 50vmax at 100% 100%, rgba(52, 224, 184, .06), transparent 60%),
    var(--sq-bg);
  background-attachment: fixed;
}
body[data-role='admin'] ::selection { background: rgba(255, 92, 138, .35); }
body[data-role='admin'] :focus-visible { outline: 2px solid var(--sq-accent-2); outline-offset: 3px; }
body[data-role='admin'] h1, body[data-role='admin'] h2 { letter-spacing: -.02em; }
body[data-role='admin'] a { color: var(--sq-accent-2); }

/* header: the website's frosted bar */
body[data-role='admin'] .app-head { background: rgba(16, 13, 32, .66); border-bottom-color: var(--sq-line); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
body[data-role='admin'] .logo { background: conic-gradient(from 200deg, var(--sq-saffron), var(--sq-rose), var(--sq-violet), var(--sq-mint), var(--sq-saffron)); color: #fff; box-shadow: 0 0 22px rgba(255, 92, 138, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
body[data-role='admin'] .admin-nav { border-top-color: var(--sq-line); }
body[data-role='admin'] .tab { color: var(--sq-ink-2); font-weight: 600; transition: background-color .25s var(--sq-ease), color .2s; }
body[data-role='admin'] .tab:hover { background: var(--sq-glass-2); color: var(--sq-ink); }
body[data-role='admin'] .tab[aria-current='page'] { background: var(--sq-glass-hi); color: var(--sq-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
body[data-role='admin'] .tag { background: var(--sq-glass-2); color: var(--sq-accent-2); border: 1px solid var(--sq-line-2); }
body[data-role='admin'] .banner { background: rgba(251, 191, 36, .1); color: #fcd34d; border-bottom: 1px solid rgba(251, 191, 36, .22); }

/* surfaces: frosted glass cards (blur only where it is cheap: large screens with a mouse) */
body[data-role='admin'] .card, body[data-role='admin'] .kpi, body[data-role='admin'] .login-card {
  background: var(--glass-card); border-color: var(--sq-line); box-shadow: var(--shadow);
  transition: border-color .3s, box-shadow .4s var(--sq-ease), transform .6s var(--sq-spring); }
@media (min-width: 900px) and (hover: hover) {
  body[data-role='admin'] .card, body[data-role='admin'] .kpi, body[data-role='admin'] .login-card { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
  body[data-role='admin'] button.kpi-btn:hover { transform: translateY(-2px); border-color: rgba(255, 159, 67, .4); }
}
body[data-role='admin'] .kpi .n { letter-spacing: -.02em; }
@media (max-width: 480px) { body[data-role='admin'] .kpi .n { font-size: 18px; letter-spacing: -.03em; } } /* a phone keeps a figure like ₹21,17,880.00 on one line */
body[data-role='admin'] .kpi-btn[aria-pressed='true'] { outline-color: var(--sq-saffron); }

/* controls: pill buttons, the brand gradient for the main action, a springy press */
body[data-role='admin'] .btn { border-radius: 999px; background: var(--sq-glass-2); border-color: var(--sq-line-2); color: var(--sq-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .5s var(--sq-spring), background .25s, border-color .25s, box-shadow .3s; }
body[data-role='admin'] .btn:hover:not(:disabled) { background: var(--sq-glass-hi); border-color: rgba(255, 255, 255, .28); }
body[data-role='admin'] .btn:active:not(:disabled) { transform: scale(.97); }
body[data-role='admin'] .btn.primary { background: var(--sq-grad); background-size: 160% 100%; border-color: transparent; color: #fff; text-shadow: 0 1px 2px rgba(27, 10, 16, .35);
  box-shadow: 0 12px 34px -12px rgba(255, 92, 138, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
body[data-role='admin'] .btn.primary:hover:not(:disabled) { background: var(--sq-grad); background-size: 160% 100%; background-position: 100% 0; border-color: transparent; }
body[data-role='admin'] .btn.ghost { background: transparent; }
body[data-role='admin'] .btn.bad { background: rgba(255, 92, 138, .16); border-color: rgba(255, 92, 138, .45); color: #ffb3c4; }
body[data-role='admin'] .btn.ok { background: rgba(74, 222, 128, .15); border-color: rgba(74, 222, 128, .45); color: #bbf7d0; }
body[data-role='admin'] .icon-btn { color: var(--sq-ink); }
body[data-role='admin'] .icon-btn:hover { background: var(--sq-glass-2); }
body[data-role='admin'] .chip { background: var(--sq-glass); border-color: var(--sq-line-2); color: var(--sq-ink-2); }
body[data-role='admin'] .chip[aria-pressed='true'], body[data-role='admin'] .chip.on { background: var(--sq-ink); color: var(--sq-bg); border-color: var(--sq-ink); }
body[data-role='admin'] .seg { background: var(--sq-glass); }
body[data-role='admin'] .seg button { color: var(--sq-ink-2); }
body[data-role='admin'] .seg button[aria-pressed='true'] { background: var(--sq-glass-hi); color: var(--sq-ink); }

/* fields */
body[data-role='admin'] input:not([type='checkbox']):not([type='radio']), body[data-role='admin'] select, body[data-role='admin'] textarea {
  background: rgba(255, 255, 255, .04); border-color: var(--sq-line-2); color: var(--sq-ink); }
body[data-role='admin'] input::placeholder, body[data-role='admin'] textarea::placeholder { color: rgba(163, 158, 196, .7); }
body[data-role='admin'] input:focus, body[data-role='admin'] select:focus, body[data-role='admin'] textarea:focus { border-color: var(--sq-saffron); outline-color: rgba(255, 159, 67, .28); }
body[data-role='admin'] select option { background: var(--sq-bg-3); color: var(--sq-ink); }

/* tables, badges, notices */
body[data-role='admin'] table.data th { color: var(--sq-mute); border-bottom-color: var(--sq-line-2); }
body[data-role='admin'] table.data tr:hover td { background: rgba(255, 255, 255, .03); }
body[data-role='admin'] .badge { background: var(--sq-glass-2); color: var(--sq-ink-2); }
body[data-role='admin'] .badge.s-accepted, body[data-role='admin'] .badge.s-preparing, body[data-role='admin'] .badge.s-food_preparing { background: rgba(255, 159, 67, .16); color: #fdba74; }
body[data-role='admin'] .alertbar { color: #fcd34d; }
body[data-role='admin'] .errorbox { color: #ffb3c4; }
body[data-role='admin'] .demo-hint, body[data-role='admin'] .creds { border-color: var(--sq-line-2); background: rgba(255, 255, 255, .03); }
body[data-role='admin'] .skeleton { background: linear-gradient(90deg, var(--sq-glass) 25%, var(--sq-glass-2) 50%, var(--sq-glass) 75%); background-size: 200% 100%; }
body[data-role='admin'] .toast { background: var(--sq-ink); color: var(--sq-bg); }

/* sheets: the website's glass sheet, springing in */
body[data-role='admin'] .overlay { background: rgba(7, 6, 15, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-role='admin'] .sheet { background: rgba(20, 17, 39, .92); border: 1px solid var(--sq-line-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); animation: up .45s var(--sq-spring); }
body[data-role='admin'] .sheet-head { border-bottom-color: var(--sq-line); }

/* charts */
body[data-role='admin'] .chart .bar { fill: var(--sq-saffron); } body[data-role='admin'] .chart .bar2 { fill: var(--sq-line-2); } body[data-role='admin'] .legend i { background: var(--sq-saffron); }
body[data-role='admin'] .funnel .bar span { background: var(--sq-grad); }

@media (prefers-reduced-motion: reduce) {
  body[data-role='admin'] .btn, body[data-role='admin'] .card, body[data-role='admin'] .kpi, body[data-role='admin'] .sheet { transition: none; animation: none; }
}