/* Khatiwada POS Master Dashboard
   Shared product palette with the landing, cashier and Zebra interfaces.
   Operator surfaces use a darker navigation treatment for clearer separation
   from customer facing screens. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;

  --cream: #F7F4EC;
  --cream-soft: #F0EBE0;
  --surface: #FFFFFF;
  --surface-soft: #FBFAF7;
  --ink: #20211D;
  --muted: #62645D;
  --muted-2: #87887F;
  --border: #DED8CA;
  --border-strong: #CFC7B7;

  --brand: #1F5A43;
  --brand-dark: #174834;
  --brand-deep: #12392D;
  --brand-soft: #E3F0E9;
  --orange: #E86118;
  --orange-soft: #FCE9DC;

  --success: #287A58;
  --success-soft: #E7F5EC;
  --warning: #B66A16;
  --warning-soft: #FFF3DC;
  --danger: #B63D3D;
  --danger-dark: #923030;
  --danger-soft: #FBEAEA;

  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(32,33,29,.05), 0 1px 4px rgba(32,33,29,.04);
  --shadow-md: 0 10px 30px rgba(32,33,29,.07);
  --shadow-lg: 0 24px 60px rgba(18,57,45,.16);

  --font-heading: 'Poppins', 'Noto Sans Devanagari', sans-serif;
  --font-body: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { background: var(--cream); }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
a { color: inherit; }

/* Shell */
.admin-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.admin-sidebar {
  width: 252px;
  flex: 0 0 252px;
  min-height: 100vh;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 14px 14px;
  overflow-y: auto;
  background-color: var(--brand-deep);
  /* Same watermark as the login/setup screens (see .login-body in the other
     three repos' admin.css) -- the sidebar is this dashboard's own dark
     brand panel, same idea. Pinned to the bottom since the sidebar scrolls
     but its background doesn't, so it stays anchored rather than scrolling
     away with the nav links. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240.6%20247.7%22%20role%3D%22img%22%20aria-label%3D%22KPOS%20Nepal%22%3E%0A%3Cg%20transform%3D%22translate%28-185.9%2C-221.3%29%22%3E%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.09%22%20d%3D%22M%20194.035%20229.409%20L%20257.805%20229.479%20C%20257.633%20244.414%20259.976%20308.517%20255.722%20317.794%20C%20243.586%20344.255%20232.997%20341.542%20227.905%20381.403%20C%20239.403%20354.525%20253.184%20343.834%20273.613%20323.732%20L%20328.726%20269.827%20C%20320.595%20262.778%20311.698%20255.561%20303.411%20248.623%20L%20405.41%20229.332%20C%20402.296%20243.653%20399.318%20258.004%20396.476%20272.382%20C%20392.401%20290.629%20388.137%20309.712%20385.126%20328.111%20C%20377.93%20319.52%20370.599%20311.044%20363.134%20302.687%20C%20338.238%20329.842%20305.896%20358.243%20279.986%20385.484%20C%20253.339%20413.5%20257.584%20423.115%20257.88%20461.019%20L%20193.899%20461.037%20L%20194.035%20229.409%20z%22/%3E%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.09%22%20d%3D%22M%20330.678%20354.662%20C%20335.304%20356.221%20408.795%20448.935%20418.458%20460.989%20L%20385.825%20461.077%20L%20344.102%20461.041%20C%20329.965%20445.246%20314.888%20425.593%20302.574%20408.449%20C%20288.38%20388.688%20317.791%20367.314%20330.678%20354.662%20z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom -6vh;
  background-size: 70%;
  background-attachment: local;
  color: #F7F4EC;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 2px 8px 17px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  margin-bottom: 8px;
}
/* 2026-08-27: replaced kpos-icon.png (a plain K in a terracotta circle) with
   the real KPOS Nepal lockup -- reads as the actual brand name instead of an
   abstract mark, closing the same "which product is this" gap the terracotta
   badge was a workaround for. Inline SVG, single light fill (#F7F4EC) so it
   stays visible against --brand-deep the same way the terracotta circle did,
   without needing its own colored backdrop. Aspect ratio is ~2.4:1 (mark +
   "NEPAL Retail Platform"), so these size by height only, width:auto. */
.admin-brand-logo { height: 34px; width: auto; flex-shrink: 0; }
.auth-brand-logo { height: 48px; width: auto; flex-shrink: 0; }
.side-version-icon { width: 16px; height: 16px; }
.brand-copy { min-width: 0; }
.brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-kicker {
  display: block;
  margin-top: 2px;
  color: rgba(247,244,236,.62);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.side-section {
  padding: 15px 10px 6px;
  color: rgba(247,244,236,.48);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 9px;
  color: rgba(247,244,236,.72);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.side-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-link.active { background: #F7F4EC; color: var(--brand-deep); font-weight: 800; }
.side-link.account-name { cursor: default; color: rgba(247,244,236,.56); }
.side-link.account-name:hover { background: transparent; color: rgba(247,244,236,.56); }
.side-link.logout-link { color: #F5C8AE; }
/* Pinned to the bottom of the sidebar (flex column, margin-top:auto) rather
   than sitting in the link list -- it's diagnostic info, not a destination. */
.side-version { margin-top: auto; padding: 10px; font-size: 0.78rem; color: rgba(247,244,236,.55); display: flex; align-items: center; gap: 8px; }
.side-version-icon { flex-shrink: 0; border-radius: 4px; }
/* The commit hash is a debugging detail for verifying a deploy landed, not
   something an operator should have to make sense of at a glance -- kept
   small and on its own line rather than sharing top billing with the real
   KPOS version. */
.side-version-commit { display: block; margin-top: 2px; font-size: 0.68rem; opacity: .8; font-family: monospace; }

.side-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: .9;
}

.admin-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 1320px;
  padding: 36px clamp(24px, 4vw, 54px) 56px;
}

/* Typography and page headers */
h1, h2, h3 { font-family: var(--font-heading); color: var(--ink); }
h1 { font-size: clamp(1.65rem, 2.7vw, 2.15rem); letter-spacing: -.035em; line-height: 1.12; }
h2 { font-size: 1.08rem; letter-spacing: -.015em; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.page-head-copy p { margin-top: 7px; color: var(--muted); max-width: 720px; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--orange);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hint { color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
.hint-sm { font-size: 13px; }
.no-margin { margin: 0 !important; }
.optional-text { font-weight: 500; color: var(--muted); }
.muted-inline { color: var(--muted); }
.current-session { color: var(--muted); font-size: .8rem; }

/* Feedback */
.flash, .error {
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #B9DEC8;
  border-radius: var(--radius);
  background: var(--success-soft);
  color: #205C41;
  box-shadow: var(--shadow-sm);
  overflow-wrap: anywhere;
}
.flash-error, .error { border-color: #E7BABA; background: var(--danger-soft); color: #842D2D; }

/* Buttons */
button, .button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 750;
  font-size: .9rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
button:hover, .button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible { outline: 3px solid rgba(31,90,67,.18); outline-offset: 2px; }
button.small, .button.small { min-height: 34px; padding: 6px 10px; font-size: .78rem; }
.button.secondary, button.secondary { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.button.secondary:hover, button.secondary:hover { background: var(--surface-soft); border-color: #BEB5A5; }
button.danger, .button.danger { background: var(--danger); border-color: var(--danger); }
button.danger:hover, .button.danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
.button.ghost, button.ghost { background: transparent; border-color: transparent; color: var(--brand); }
.button.ghost:hover, button.ghost:hover { background: var(--brand-soft); border-color: transparent; }

/* Fields */
label { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-weight: 700; font-size: .86rem; }
input, select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: .92rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input::placeholder { color: #A09E95; }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,90,67,.12); }

.form-box {
  width: min(100%, 470px);
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.form-box label { margin-bottom: -4px; }
.form-box button { align-self: flex-start; margin-top: 4px; }

/* Panels and metrics */
.panel {
  padding: 22px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.panel-head p { margin-top: 5px; color: var(--muted); font-size: .88rem; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.metric-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
}
.metric-label { color: var(--muted); font-size: .75rem; font-weight: 750; }
.metric-value { display: block; margin-top: 3px; font-family: var(--font-heading); font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; }
.metric-card.active .metric-value { color: var(--brand); }
.metric-card.attention .metric-value { color: var(--orange); }

.inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(190px, 1fr) minmax(190px, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.inline-form.three-fields { grid-template-columns: repeat(3, minmax(170px, 1fr)) auto; }
/* The customer-create form's third field is a <select> whose longest option
   ("Standard (browser cashier)") needs more room than an even three-way
   split gives it -- .three-fields is shared with the Admins page's
   Username/Password/Confirm form, which genuinely wants equal columns, so
   this is scoped to just this one form rather than changed generally. */
.inline-form.three-fields.customer-create { grid-template-columns: minmax(160px, .9fr) minmax(175px, .75fr) minmax(285px, 1.5fr) auto; }
/* Add-admin, since the operator no longer types a password by hand (see
   KPOS v0.9.20) -- one field plus the submit button, not the wider grid
   sized for the old three-input form. */
.inline-form.one-field { grid-template-columns: minmax(220px, 1fr) auto; }
.inline-form .form-error { grid-column: 1 / -1; margin-bottom: 0; }
.inline-form button { white-space: nowrap; }

.provision-preview {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  margin-top: 14px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}
.provision-preview code { color: var(--brand-dark); overflow-wrap: anywhere; }

/* Status chips */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #EEF0ED;
  color: #52564F;
  font-size: .7rem;
  font-weight: 800;
  text-transform: capitalize;
  white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: currentColor; opacity: .7; }
.chip-active { background: var(--success-soft); color: #1F6A48; }
.chip-suspended { background: var(--danger-soft); color: #923636; }
.chip-pending { background: var(--warning-soft); color: #9A5B12; }

/* Tables */
.table-wrap {
  /* Scroll rather than clip. `overflow: hidden` silently cut off the rightmost
     columns at widths where this is still a real table (roughly 721px upward),
     so the Actions column was unreachable on a tablet with no scrollbar and no
     indication anything was missing. Below 720px the card layout takes over
     and this reverts to visible. */
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: 13px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid #ECE8DF; }
th {
  background: #F4F0E8;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .065em;
}
tbody tr:hover { background: #FCFBF8; }
tbody tr:last-child td { border-bottom: 0; }
td { font-size: .86rem; }
td.empty { padding: 30px 18px; text-align: center; color: var(--muted); }
td.store-cell strong { display: block; color: var(--ink); font-size: .88rem; }
td.store-cell small { display: block; margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
.build-commit {
  font-size: .78rem; color: var(--muted); background: #F7F4EC;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 7px;
}
/* A debugging detail for verifying a deploy landed, not the headline -- see
   the KPOS_VERSION comment in app.py. Kept small, own line, monospace. */
.build-commit-detail { display: block; margin-top: 3px; font-size: .68rem; color: var(--muted); opacity: .7; font-family: monospace; }

.actions-menu { display: flex; flex-wrap: wrap; gap: 6px; min-width: 230px; }
.actions-menu form { display: inline-flex; }
.actions-menu .button.small, .actions-menu button.small { min-height: 32px; padding: 5px 8px; border-color: var(--border); background: #fff; color: var(--brand-dark); font-size: .72rem; }
.actions-menu .button.small:hover, .actions-menu button.small:hover { background: var(--brand-soft); border-color: #BFD4C8; }
.actions-menu button.small.danger, .actions-menu .button.small.danger { color: var(--danger); border-color: #E9C6C6; background: #fff; }
.actions-menu button.small.danger:hover, .actions-menu .button.small.danger:hover { background: var(--danger-soft); border-color: #E2AFAF; }

/* Authentication and first run */
.login-body { min-height: 100vh; min-height: 100dvh; background: var(--cream); }
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
}
.auth-context {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px, 5vw, 68px);
  background-color: var(--brand-deep);
  /* 2026-08-27: replaced the abstract concentric-circle decoration with the
     same icon watermark used on the sidebar and on the other three repos'
     login screens -- one consistent brand language across every dark panel
     instead of two unrelated decorative motifs. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240.6%20247.7%22%20role%3D%22img%22%20aria-label%3D%22KPOS%20Nepal%22%3E%0A%3Cg%20transform%3D%22translate%28-185.9%2C-221.3%29%22%3E%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.09%22%20d%3D%22M%20194.035%20229.409%20L%20257.805%20229.479%20C%20257.633%20244.414%20259.976%20308.517%20255.722%20317.794%20C%20243.586%20344.255%20232.997%20341.542%20227.905%20381.403%20C%20239.403%20354.525%20253.184%20343.834%20273.613%20323.732%20L%20328.726%20269.827%20C%20320.595%20262.778%20311.698%20255.561%20303.411%20248.623%20L%20405.41%20229.332%20C%20402.296%20243.653%20399.318%20258.004%20396.476%20272.382%20C%20392.401%20290.629%20388.137%20309.712%20385.126%20328.111%20C%20377.93%20319.52%20370.599%20311.044%20363.134%20302.687%20C%20338.238%20329.842%20305.896%20358.243%20279.986%20385.484%20C%20253.339%20413.5%20257.584%20423.115%20257.88%20461.019%20L%20193.899%20461.037%20L%20194.035%20229.409%20z%22/%3E%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.09%22%20d%3D%22M%20330.678%20354.662%20C%20335.304%20356.221%20408.795%20448.935%20418.458%20460.989%20L%20385.825%20461.077%20L%20344.102%20461.041%20C%20329.965%20445.246%20314.888%20425.593%20302.574%20408.449%20C%20288.38%20388.688%20317.791%20367.314%20330.678%20354.662%20z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -6vw bottom -8vh;
  background-size: 55vh;
  color: #F7F4EC;
}
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.auth-brand strong { display: block; font-family: var(--font-heading); font-size: 1rem; }
.auth-brand small { display: block; margin-top: 2px; color: rgba(247,244,236,.58); font-size: .72rem; }
.auth-context-copy { position: relative; z-index: 1; max-width: 500px; padding: 60px 0; }
.auth-context-copy .eyebrow { color: #F3B58D; }
.auth-context-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -.05em; line-height: 1.04; }
.auth-context-copy p { max-width: 450px; margin-top: 18px; color: rgba(247,244,236,.7); font-size: 1rem; line-height: 1.7; }
.auth-context-foot { position: relative; z-index: 1; color: rgba(247,244,236,.48); font-size: .72rem; }

.auth-main { display: grid; place-items: center; padding: 42px 24px; }
.login-box {
  width: min(100%, 430px);
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.login-box .eyebrow { margin-bottom: -4px; }
.login-box h1 { font-size: 1.8rem; }
.login-box .auth-intro { margin: -4px 0 5px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.login-box label { margin-top: 2px; }
.login-box > button[type='submit'] { width: 100%; margin-top: 5px; }
.auth-note { padding: 12px 13px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: .79rem; line-height: 1.55; }

/* Password show and hide control */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 44px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 30px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
}
.password-toggle:hover { color: var(--ink); background: var(--cream-soft); }
.password-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Mobile navigation */
.sidebar-toggle {
  display: none;
  width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 18px;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); }

@media (max-width: 1040px) {
  /* .customer-create must be listed explicitly. It is a three class selector
     (.inline-form.three-fields.customer-create), so it out-specifies a two
     class one, and media queries add no specificity of their own. Without it
     the desktop grid survives on phones and the form forces the whole page
     wider than the viewport. */
  .inline-form,
  .inline-form.three-fields,
  .inline-form.three-fields.customer-create { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .inline-form button { justify-self: start; }
}

@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    min-height: auto;
    height: auto;
    position: sticky;
    z-index: 50;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    box-shadow: 0 4px 18px rgba(18,57,45,.12);
  }
  .admin-brand { flex: 1; border-bottom: 0; margin: 0; padding: 0; }
  .admin-brand-logo { height: 30px; }
  .brand-kicker { display: none; }
  .sidebar-toggle { display: inline-flex; }
  .admin-sidebar > .side-link, .admin-sidebar > .side-section, .admin-sidebar > .side-version { display: none; width: 100%; }
  .admin-sidebar.open > .side-link, .admin-sidebar.open > .side-section { display: flex; }
  .admin-sidebar.open > .side-section { padding-top: 12px; }
  /* KPOS v0.9.20: .side-version had no collapsed-row exemption of its own,
     so it rendered inline in the always visible mobile topbar and ate into
     .admin-brand's flex:1 width, cramming the store name into an ellipsis
     far sooner than the screen actually required. Found live on a real
     phone (same bug, same fix, as pos-saas-cashier/pos-saas-zebra). */
  .admin-sidebar.open > .side-version { display: flex; margin-top: 0; }
  .admin-main { padding: 24px 18px 42px; }

  .auth-shell { grid-template-columns: 1fr; }
  .auth-context { min-height: 240px; padding: 28px 24px; }
  .auth-context-copy { padding: 42px 0 20px; }
  .auth-context-copy h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .auth-context-foot { display: none; }
  .auth-main { padding: 28px 18px 42px; }
}

@media (max-width: 720px) {
  .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid .metric-card:first-child { grid-column: 1 / -1; }
  .inline-form,
  .inline-form.three-fields,
  .inline-form.three-fields.customer-create { grid-template-columns: 1fr; }
  .inline-form button { width: 100%; }
  .panel { padding: 18px; }

  .table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  table, thead, tbody, tr, th, td { display: block; width: 100%; }
  thead { display: none; }
  table { background: transparent; }
  tbody { display: grid; gap: 12px; }
  tbody tr {
    overflow: hidden;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  tbody tr:hover { background: var(--surface); }
  td {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 10px 13px;
    border-bottom: 1px solid #ECE8DF;
    overflow-wrap: anywhere;
  }
  td::before {
    content: attr(data-label);
    color: var(--muted-2);
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  /* The store cell carries a full hostname, which does not fit the value
     column of the 105px label grid and broke mid-word ("...chickenkiller.co"
     then a lone "m" on the next line). Give it the whole card width. */
  td.store-cell { display: block; }
  td.store-cell::before { display: block; margin-bottom: 4px; }
  td.actions { display: block; padding: 12px 13px; }
  td.actions::before { content: 'Actions'; display: block; margin-bottom: 9px; }
  .actions-menu { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .actions-menu form { display: block; }
  .actions-menu .button.small, .actions-menu button.small { width: 100%; min-height: 38px; }
  td.empty { display: block; padding: 28px 16px; }
  td.empty::before { display: none; }
}

@media (max-width: 480px) {
  .admin-main { padding-inline: 14px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid .metric-card:first-child { grid-column: auto; }
  .login-box { padding: 26px 20px; border-radius: 18px; }
  .auth-context { min-height: 220px; }
  .actions-menu { grid-template-columns: 1fr; }
  td { grid-template-columns: 90px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   New customer panel, and the delete confirmation page

   Both exist because the dashboard's JavaScript does not run. The CSP here is
   script-src 'self' with no 'unsafe-inline', so every inline handler in these
   templates was dead, including the confirm() that was the only guard on
   deleting a customer. Rather than move that guard into a script file, both of
   these are plain server rendered HTML: they cannot be switched off by a header
   change, a blocked file, or JavaScript being unavailable.
   --------------------------------------------------------------------------- */

/* Shown once after a create. The temp password is readable exactly here and
   nowhere else, so it gets its own block rather than being a phrase in a flash
   message that is easy to skim past and awkward to select on a phone. */
.new-customer-panel {
  border: 1px solid var(--success);
  border-left: 5px solid var(--success);
  background: var(--success-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.new-customer-head { display: flex; align-items: flex-start; gap: 12px; }
.new-customer-tick {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--success); color: #fff; font-weight: 700; line-height: 1;
}
.new-customer-panel h2 { margin: 0 0 2px; font-size: 1.15rem; }
.new-customer-sub { margin: 0; color: var(--muted); font-size: .9rem; }

.new-customer-facts { margin: 14px 0 0; display: grid; gap: 8px; }
.new-customer-facts > div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.new-customer-facts dt {
  flex: 0 0 150px; margin: 0; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.new-customer-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.new-customer-facts code {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 8px; font-size: .92rem;
}
/* The one value on this page worth making unmissable. */
.new-customer-facts code.secret {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  border-color: var(--success); color: var(--brand-dark);
  user-select: all;   /* one tap or click selects the whole password */
}
.new-customer-warn { margin: 14px 0 0; font-size: .88rem; line-height: 1.55; }

.new-customer-email-send { margin: 14px 0 0; }
.new-customer-email-send label {
  display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--muted);
}
.new-customer-email-row { display: flex; gap: 8px; max-width: 360px; }
.new-customer-email-row input {
  flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .9rem; background: #fff;
}

/* The delete confirmation page. */
.danger-eyebrow { color: var(--danger); }
.danger-card {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(18px, 3vw, 26px);
  max-width: 640px;
  box-shadow: var(--shadow-md);
}
.danger-lead { margin: 0 0 14px; line-height: 1.6; }
.danger-list { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 7px; }
.danger-list li { line-height: 1.5; }
.danger-list code { overflow-wrap: anywhere; }

.danger-form { display: grid; gap: 18px; border-top: 1px solid var(--border); padding-top: 20px; }
.danger-form label { display: grid; gap: 6px; font-weight: 600; }
.danger-form input {
  font-family: var(--font-body); font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; width: 100%; min-width: 0;
}
.danger-form input:focus { outline: 2px solid var(--danger); outline-offset: 1px; }
.field-note { font-weight: 400; font-size: .82rem; color: var(--muted); line-height: 1.45; }

.danger-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Cancel is the safe choice, so it is the easier target, but it must not LOOK
   like the confirm button. The default .button here is solid green, which reads
   as "go" and is exactly the wrong signal on this page. */
.danger-actions a.button {
  background: #fff; color: var(--ink);
  border: 1px solid var(--border-strong); box-shadow: none;
}
.danger-actions a.button:hover { background: var(--cream-soft); border-color: var(--ink); }
/* Cancel is the wider target on a phone, since it is the safe choice and the
   destructive one should never be the easiest thing to hit by accident. */
@media (max-width: 560px) {
  .danger-actions { display: grid; }
  .danger-actions .button, .danger-actions button { width: 100%; text-align: center; }
  .danger-actions a.button { order: -1; }
}