/* Hallmark · shape: app screen · genre: editorial · theme: Hedgerow (deal 2/3, seed crm-multi-floor-home-decor-5592·ca663394·2026-11-02·r0)
 * nav: sidebar, nine destinations · signature: the lit showroom facade, one window per department, brightness is stock health · states: empty, full, error by toast; no loading state as data is local · hedgerow: leaf green, cream ink, one chartreuse
 * axes: dark/high-contrast-serif/chromatic-green · posture: drenched · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E3 S4 R3 V4 · weakest: P, sample data until the owner shares records, labelled as sample on every entry screen */
/* waive 37: Noto Sans Devanagari is required for the Hindi interface toggle */
/* waive 10b: entrance motion was explicitly requested by the client brief ("animated") */
@import url("./tokens.css");
@import url("./base.css");

:root { --font-hindi: "Noto Sans Devanagari", var(--font-body); --glow: oklch(84% 0.13 85); --glow-2: oklch(62% 0.11 75); --print-paper: oklch(99% 0.005 88); --print-ink: oklch(18% 0.01 158); --win-shade: oklch(15% 0.03 158 / 0.92); --scrim: oklch(10% 0.02 158 / 0.65); }
html[lang="hi"] body, html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] button { font-family: var(--font-hindi); }
h1 { font-size: var(--text-3xl); max-width: none; }
h2 { font-size: var(--text-xl); }

.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; }
.side { background: var(--color-paper-2); border-right: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-lg); position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.brand { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; }
.brand small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.side nav { display: grid; gap: var(--space-3xs); }
.side nav a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 var(--space-sm); text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); border-radius: var(--radius-pill); transition: background-color var(--dur-micro), color var(--dur-micro), transform var(--dur-short) var(--ease-out); }
.side nav a:hover { background: var(--color-paper-3); color: var(--color-ink); transform: translateX(3px); }
.side nav a[aria-current] { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.side nav b { font-weight: 700; font-size: var(--text-xs); }
.side-foot { margin-top: auto; display: grid; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.menu-btn { display: none; }
main { padding: var(--space-xl) var(--space-xl) var(--space-3xl); max-width: 1320px; width: 100%; margin-inline: auto; min-width: 0; }
.view { animation: rise var(--dur-long) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-lg); }
.head p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
section + section { margin-top: var(--space-xl); }
section > h2 { margin-bottom: var(--space-sm); }

button, .btn { min-height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); transition: background-color var(--dur-micro), border-color var(--dur-micro), transform var(--dur-micro); position: relative; }
button::after, .btn::after { content: ""; position: absolute; inset: -4px 0; }
button:hover, .btn:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
button:active, .btn:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); font-weight: 700; }
.primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.link { border: 0; padding: 0 var(--space-2xs); min-height: 28px; text-decoration: underline; color: var(--color-ink-2); background: none; }
.link:hover { background: none; color: var(--color-ink); }
.danger { color: var(--color-error); }
input, select, textarea { min-height: 36px; background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); border-radius: 0; min-width: 0; transition: border-color var(--dur-micro); }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
label { display: grid; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.grow { flex: 1 1 200px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); padding: var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-md); animation: rise var(--dur-short) var(--ease-out) both; align-items: end; }

.scroll { overflow-x: auto; border-top: var(--rule-hair) solid var(--color-rule); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { text-align: left; font-weight: 500; color: var(--color-muted); font-size: var(--text-xs); padding: var(--space-xs) var(--space-sm); white-space: nowrap; }
td { padding: var(--space-xs) var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: middle; }
tbody tr { transition: background-color var(--dur-micro); }
tbody tr:hover { background: color-mix(in oklab, var(--color-paper-3) 55%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.thumb { width: 40px; height: 40px; object-fit: cover; flex: none; background: var(--color-paper-3); }
.thumb-none { display: grid; place-items: center; font-family: var(--font-display); color: var(--color-muted); }
.item { display: flex; gap: var(--space-sm); align-items: center; min-width: 220px; }
.sub { color: var(--color-muted); font-size: var(--text-xs); }
.pill { display: inline-block; padding: 1px var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-xs); border: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.pill.bad { color: var(--color-error); border-color: var(--color-error); }
.pill.warn { color: var(--glow); border-color: var(--glow-2); }
.pill.good { color: var(--color-success); border-color: var(--color-success); }
.level { width: 72px; height: 4px; background: var(--color-paper-3); overflow: hidden; }
.level i { display: block; height: 100%; background: var(--color-accent); transform-origin: left; animation: growx var(--dur-long) var(--ease-out) both; }
@keyframes growx { from { transform: scaleX(0); } }
.empty { padding: var(--space-xl) var(--space-md); text-align: center; color: var(--color-muted); font-size: var(--text-sm); display: grid; gap: var(--space-sm); justify-items: center; }
.detail td { background: var(--color-paper-2); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-block: var(--rule-hair) solid var(--color-rule); }
.stat { padding: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.stat:first-child { border-left: 0; }
.stat strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat span { font-size: var(--text-xs); color: var(--color-muted); }

/* the signature */
.home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; margin-top: var(--space-lg); }
.facade { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-md); }
.sign { font-family: var(--font-display); font-size: var(--text-2xl); text-align: center; color: var(--glow); padding-bottom: var(--space-sm); animation: sign 1.1s steps(4) both; }
.sign small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }
@keyframes sign { 0% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: 0.2; } 100% { opacity: 1; } }
.floor { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-xs); border-top: 3px solid var(--color-rule); padding-block: var(--space-xs); }
.floor > span { font-size: var(--text-xs); color: var(--color-muted); align-self: center; line-height: 1.25; }
.wins { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-xs); }
.win { display: flex; flex-direction: column; justify-content: end; align-items: flex-start; text-align: left; gap: 0; min-height: 84px; padding: var(--space-xs); border-radius: 0; border: var(--rule-hair) solid var(--color-rule); overflow: hidden; background: var(--color-paper); isolation: isolate; font-size: var(--text-xs); line-height: 1.2; color: var(--color-ink); }
.win::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(to top, var(--glow-2), var(--glow)); opacity: var(--lit, 0); animation: lighton 0.5s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: var(--lit, 0); animation: lighton 0.5s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.win::after { inset: 0; z-index: -1; background: linear-gradient(to top, var(--win-shade), transparent 75%); }
@keyframes lighton { 0% { opacity: 0; } 50% { opacity: var(--lit, 0); } 65% { opacity: calc(var(--lit, 0) * 0.3); } 100% { opacity: var(--lit, 0); } }
.win b { font-weight: 700; }
.win:hover { transform: translateY(-2px); border-color: var(--glow); background: var(--color-paper); }
.door { display: flex; justify-content: center; gap: var(--space-md); border-top: 3px solid var(--color-rule); padding-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); flex-wrap: wrap; }
.key { display: inline-flex; gap: var(--space-2xs); align-items: center; }
.key i { width: 10px; height: 10px; background: var(--glow); }
.key.dim i { background: var(--glow-2); opacity: 0.45; }
.key.off i { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.queue { display: grid; }
.queue a, .queue .q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; font-size: var(--text-sm); }
.queue a:hover strong { text-decoration: underline; }
.queue strong { font-weight: 500; display: block; }

/* login */
.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; max-width: 1180px; margin-inline: auto; padding: var(--space-lg); }
.login h1 { font-size: var(--text-3xl); margin-bottom: var(--space-sm); }
.login p { color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.roles { display: grid; gap: var(--space-xs); }
.roles button { justify-content: space-between; min-height: 56px; border-radius: 0; text-align: left; }
.roles span { color: var(--color-muted); font-size: var(--text-xs); }
.note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-md); }

/* billing */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-lg); align-items: start; }
.hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-xs); margin-top: var(--space-sm); }
.hit { height: auto; min-height: 60px; border-radius: 0; justify-content: flex-start; text-align: left; padding: var(--space-xs); }
.hit span { display: block; }
.hit .thumb-none { display: grid; }
.ticket { background: var(--color-ink); color: var(--color-accent-ink); padding: var(--space-md); position: sticky; top: var(--space-md); }
.ticket h2 { margin-bottom: var(--space-sm); }
.ticket input, .ticket select { background: transparent; color: var(--color-accent-ink); border-color: var(--color-muted); width: 100%; }
.ticket input::placeholder { color: var(--color-accent-deep); }
.ticket label { color: var(--color-accent-ink); }
.ticket button, .ticket .btn { color: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.ticket button:hover, .ticket .btn:hover { background: var(--color-ink-2); }
.ticket .primary { background: var(--color-accent-ink); color: var(--color-ink); }
.ticket .primary:hover { background: var(--color-paper); }
.ticket .sub { color: var(--color-accent-ink); }
.line { display: grid; grid-template-columns: minmax(0, 1fr) 56px 76px 24px; gap: var(--space-xs); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px dashed var(--color-muted); font-size: var(--text-sm); animation: rise var(--dur-short) var(--ease-out) both; }
.line input { padding: var(--space-3xs) var(--space-2xs); min-height: 30px; }
.line button { min-height: 24px; padding: 0; border: 0; }
.totals { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); margin-block: var(--space-sm); font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-family: var(--font-display); font-size: var(--text-2xl); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); margin-bottom: var(--space-xs); }
.done { animation: printout 0.7s var(--ease-out) both; }
@keyframes printout { from { transform: translateY(-40px); opacity: 0; } }

/* attendance */
.marks { display: inline-flex; gap: var(--space-3xs); }
.marks button { min-height: 32px; width: 34px; padding: 0; border-radius: 0; font-size: var(--text-xs); }
.marks button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); font-weight: 700; }
.month { display: grid; grid-template-columns: repeat(31, 8px); gap: var(--space-3xs); }
.month i { width: 8px; height: 14px; background: var(--color-paper-3); }
.month i.P { background: var(--color-accent-deep); } .month i.H { background: var(--glow-2); } .month i.A { background: var(--color-error); } .month i.L { background: var(--glow); } .month i.W { background: var(--color-rule); }

/* leads */
.board { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-xs); }
.col h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.lead-c { padding: var(--space-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-xs); font-size: var(--text-sm); animation: rise var(--dur-short) var(--ease-out) both; display: grid; gap: var(--space-2xs); }

/* charts */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3xs); height: 180px; align-items: end; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bars i { display: block; background: var(--color-accent); transform-origin: bottom; animation: growy var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i) * 14ms); min-height: 1px; }
.bars i:hover { background: var(--color-ink); }
@keyframes growy { from { transform: scaleY(0); } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }

/* palette, toast */
.pal { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: grid; justify-items: center; align-items: start; padding-top: 12vh; padding-inline: var(--space-md); }
.pal > div { width: min(600px, 100%); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-muted); animation: rise var(--dur-short) var(--ease-out) both; }
.pal input { width: 100%; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); min-height: 48px; font-size: var(--text-md); }
.pal a { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); text-decoration: none; font-size: var(--text-sm); }
.pal a:hover, .pal a:focus-visible { background: var(--color-paper-3); }
#toasts { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast); display: grid; gap: var(--space-xs); }
.toast { background: var(--color-ink); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); display: flex; gap: var(--space-md); align-items: center; animation: rise var(--dur-short) var(--ease-out) both; }
.toast button { min-height: 28px; color: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.toast button:hover { background: var(--color-ink-2); }
#print { display: none; }

@media (max-width: 60rem) {
  .shell { display: block; }
  .side { z-index: var(--z-sticky); height: auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: var(--space-xs) var(--space-md); gap: var(--space-xs); }
  .menu-btn { display: inline-flex; }
  .side nav, .side-foot { display: none; width: 100%; }
  .side.open nav, .side.open .side-foot { display: grid; }
  .side.open { max-height: 100dvh; }
  main { padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .home, .pos, .split, .login { grid-template-columns: minmax(0, 1fr); }
  .login { gap: var(--space-lg); align-content: start; }
  .ticket { position: static; }
  .floor { grid-template-columns: minmax(0, 1fr); }
  .wins { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .win { min-height: 72px; }
  .stat { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
}
@media print {
  #app, #toasts { display: none; }
  body { background: var(--print-paper); color: var(--print-ink); }
  #print { display: block; color: var(--print-ink); font-size: 12px; }
  #print h2 { font-size: 20px; }
  #print table { margin-block: var(--space-sm); }
  #print td, #print th { border-top: 1px solid var(--print-ink); color: var(--print-ink); padding: var(--space-2xs); }
  .labels { display: flex; flex-wrap: wrap; gap: var(--space-md); }
  .labels svg { fill: var(--print-ink); }
}