/* MyInukaZW Shared Design System */
:root {
  /* --- neutrals: the 60%. Everything that is not an action lives here. --- */
  --bg:         #FAF9F7;
  --surface:    #FFFFFF;
  --surface-2:  #F4F3F0;
  --border:     #E8E6E1;
  --ink:        #16150F;   /* primary text */
  --muted:      #6E6A60;   /* secondary text */

  /* --- brand: the 10%. Primary button, active tab, basket, focus ring. Nothing else. --- */
  --brand:        #C9A227;
  --brand-bright: #D4AF37;
  --brand-strong: #8A6D1F;  /* gold dark enough to be TEXT on a light surface (5.4:1) */
  --brand-soft:   #FBF4DE;
  --on-brand:     #16150F;  /* a yellow brand forces dark label text - never white */

  /* --- fixed chrome: the door and the top bar stay dark in both themes --- */
  --shell:    #16150F;
  --shell-2:  #241C12;
  --on-shell: #E8D48B;

  --success: #22C55E;
  --warning: #B45309;
  --danger:  #A33529;
  --link-ok: #15803D;
  --link-busy: #1D4ED8;

  --hero-deep: #4D3A12;
  --hero-glow: #8A6D1F;

  --elev-1: 0 1px 2px rgba(22,21,15,.04), 0 2px 10px rgba(22,21,15,.05);
  --elev-2: 0 4px 18px rgba(22,21,15,.10);
  --elev-3: 0 14px 38px rgba(22,21,15,.22);
  --radius: 16px;
  --radius-sm: 12px;
  --transition: all 0.25s cubic-bezier(0.22,1,0.36,1);

  /* --- legacy aliases: existing component rules keep working --- */
  --gold-primary: var(--brand);
  --gold-bright:  var(--brand-bright);
  --gold-light:   var(--on-shell);
  --gold-dark:    var(--brand-strong);
  --gold-pale:    var(--brand-soft);
  --cream:        var(--bg);
  --white:        var(--surface);
  --inset:        var(--surface-2);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --ink-2:        var(--shell-2);
}

[data-theme="dark"] {
  --bg:        #121211;
  --surface:   #1C1B19;
  --surface-2: #232220;
  --border:    #34322E;
  --ink:       #F2F0EA;
  --muted:     #A8A49A;
  --brand-soft:   #2B2415;
  --brand-strong: #E3C169;
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #E08C82;
  --link-ok: #4ADE80;
  --link-busy: #93C5FD;
  --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --elev-2: 0 4px 16px rgba(0,0,0,.5);
  --elev-3: 0 14px 38px rgba(0,0,0,.65);
}

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

/* The document must not be the thing that scrolls. While it was, Android treated a pull
   at the top as a page refresh - which an installed app should never do - and the URL bar
   resizing the viewport dragged the header around. Pin the shell, let one region inside
   it scroll, and both problems go with it. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
:focus-visible { outline: 3px solid rgba(212,175,55,.55); outline-offset: 2px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

h1 { font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 800; letter-spacing: -0.5px; }
h2 { font-size: clamp(1.3rem, 4.5vw, 1.6rem); font-weight: 800; margin-bottom: 14px; }
h3 { font-size: 1.08rem; font-weight: 700; }
.subheading { font-size: 0.95rem; color: var(--text-secondary); }
p { max-width: 65ch; }
.small { font-size: 0.8rem; color: var(--text-secondary); }
.label { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.12em; font-weight: 700; color: var(--text-secondary); }

.app-container { position: fixed; inset: 0; display: flex; flex-direction: column; }
/* the only scrolling region in the app; contain stops a scroll here reaching the page */
main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
       -webkit-overflow-scrolling: touch; padding: 16px; width: 100%; }
main > * { max-width: 640px; margin-left: auto; margin-right: auto; }

.top-bar {
  flex-shrink: 0;
  z-index: 100;
  background: var(--shell);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--elev-2);
}
.top-bar-title { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 800; color: var(--on-shell); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-btn {
  background: color-mix(in srgb, var(--on-shell) 14%, transparent);
  color: var(--gold-light);
  border: 1px solid color-mix(in srgb, var(--on-shell) 42%, transparent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Status, not navigation. The connection pill and the theme switch were taking the
   header's width from the app's own name; down here they are nearer the thumb and the
   header can breathe. Reads as one unit with the tab bar below it. */
/* Everything that floats above the tab bar - the basket, the Add button, toasts - has to
   clear it. Adding the status strip changed that height, so the offset is declared once
   here and derived everywhere else rather than repeated as a magic number. */
:root { --bottom-chrome: 110px; }   /* strip 45 + tab bar 65 */

.status-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 14px;
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 100;
}
.bottom-nav {
  flex-shrink: 0;
  background: var(--white);
  border-top: 1px solid rgba(20,16,11,.08);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  box-shadow: 0 -2px 8px rgba(20,16,11,.06);
  z-index: 100;
}
.nav-item {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  transition: var(--transition);
}
.nav-item.active { color: var(--gold-dark); }
.nav-item.active svg { stroke-width: 2.5; }
.nav-icon { display: flex; height: 22px; align-items: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--elev-1);
  transition: var(--transition);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: var(--transition);
  min-height: 44px;
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
.btn-outline { background: transparent; border: 2px solid var(--gold-primary); color: var(--gold-dark); }
.btn-sm { padding: 8px 14px; font-size: 12px; width: auto; min-height: 44px; border-radius: 999px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--elev-1);
}
.stat-value { font-size: 28px; font-weight: 800; margin-bottom: 4px; color: var(--ink); letter-spacing: -0.5px; }
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.badge-success { background: #DCFCE7; color: #166534; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-danger { background: #FEE2E2; color: #991B1B; }

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.list-item:hover { background: var(--gold-pale); }

.input-group { margin-bottom: 16px; }
.input-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--text-secondary); }
.input-field {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--white);
  color: var(--text-primary);
  transition: var(--transition);
}
.input-field:focus { outline: none; border-color: var(--gold-primary); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,9,5,.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
/* A sheet is three parts, not one scrolling box. The whole thing used to scroll, so on a
   long sale the Checkout button sat below the fold and had to be hunted for - the one
   control the sheet exists to offer. Now only the middle scrolls: the grab handle stays
   at the top, the actions stay pinned at the bottom, always in reach of the thumb.
   dvh, not vh, because Android's URL bar resizes vh and would crop the actions. */
.modal {
  background: var(--white);
  width: 100%;
  max-width: 600px;
  max-height: 92dvh;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s;
  box-shadow: var(--elev-3);
}
.modal-overlay.active .modal { transform: translateY(0); }
/* while a finger is on it the sheet must track that finger exactly, with no easing */
.modal.is-dragging { transition: none; }

.modal-handle {
  flex-shrink: 0;
  padding: 10px 0 6px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;          /* we own the vertical gesture here */
}
.modal-handle::before {
  content: '';
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--border);
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 24px 8px;
}
.modal-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--white);
}
/* the call sites space their own buttons with margin-top; the footer owns that now */
.modal-actions .btn { margin-top: 0 !important; }
:root[data-motion="off"] .modal { transition: none; }

.toast-container.toast-top { top: 18px; bottom: auto; }
.toast-container { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bottom-chrome) + 28px); z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--ink);
  color: #F3EBD8;
  padding: 12px 20px;
  border-left: 3px solid var(--gold-primary);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--elev-3);
  animation: slideIn 0.3s ease;
  max-width: 340px;
  pointer-events: auto;
}
@keyframes slideIn { from { transform: translate3d(0,12px,0); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }

.empty-state { text-align: center; padding: 28px 16px; color: var(--text-secondary); }
.empty-state .icon { margin-bottom: 8px; color: var(--muted); opacity: .8; }
.empty-state h4 { color: var(--text-primary); margin-bottom: 4px; }
.empty-state p { font-size: 13px; margin: 0 auto; max-width: 40ch; }

.pin-gate {
  position: fixed;
  inset: 0;
  background: var(--shell-2);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.pin-gate.hidden { display: none; }
.pin-display { display: flex; gap: 16px; margin: 32px 0; }
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--on-shell);
  transition: var(--transition);
}
.pin-dot.filled { background: var(--on-shell); }
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 280px;
}
.pin-key {
  background: color-mix(in srgb, var(--on-shell) 14%, transparent);
  color: var(--gold-light);
  border: 1px solid color-mix(in srgb, var(--on-shell) 42%, transparent);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}
.pin-key:hover { background: color-mix(in srgb, var(--on-shell) 26%, transparent); }

@media (min-width: 768px) {
  main { padding: 24px; }
}