/* Lordwell Ops — utility-first, mobile-first.
   Brand: ink #282F37 + hot coral #FF6B6B on cream #FAF7F0. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  --ink:        #282F37;
  --ink-soft:   #525C68;
  --ink-mute:   #8590A0;
  --cream:      #FAF7F0;
  --cream-deep: #F1ECE0;
  --coral:      #FF6B6B;
  --coral-deep: #E25555;
  --coral-soft: #FFD7D7;
  --line:       #E7E0CF;
}

html, body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body { font-feature-settings: "ss01","cv11"; }

/* Brand wordmark — uses the actual SVG */
.wordmark-img { height: 22px; width: auto; display: block; }

/* Status pills */
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; line-height:1; }
.pill-ok      { background:#E5F1EA; color:#205C3A; }
.pill-warn    { background:#FAEDD7; color:#7A4E10; }
.pill-danger  { background:#FFE0E0; color:#9B2A2A; }
.pill-info    { background:#E2E6EC; color:var(--ink); }
.pill-muted   { background:#EFEAD9; color:#564A29; }
.pill-coral   { background:var(--coral-soft); color:#9B2A2A; }
.pill-ink     { background:var(--ink); color:#fff; }

/* Card */
.card { background:#fff; border:1px solid #EFE8D5; border-radius:14px; box-shadow:0 1px 0 rgba(40,47,55,.04), 0 4px 14px rgba(40,47,55,.06); }

/* Tap-target row */
.row { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; min-height:64px; }
.row + .row { border-top:1px solid #EFE8D5; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1rem; border-radius:12px; font-weight:600; min-height:48px; transition: transform .04s ease, background .15s, border-color .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:#1A2128; }
.btn-coral   { background:var(--coral); color:#fff; }
.btn-coral:hover { background:var(--coral-deep); }
.btn-ghost   { background:#F4EEDB; color:var(--ink); }
.btn-outline { background:#fff; border:1.5px solid #D8CFB6; color:var(--ink); }
.btn-danger  { background:#B43A3A; color:#fff; }
.btn-block   { width:100%; }
.btn[disabled] { opacity:.45; pointer-events:none; }

/* Inputs */
.input, .select, .textarea {
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1.5px solid #D8CFB6;
  background:#fff; color:var(--ink); font-size:16px; min-height:48px;
}
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(40,47,55,.08); }
.label { font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:.35rem; display:block; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid rgba(0,0,0,.07);
  padding-bottom: var(--safe-bot);
  z-index: 50;
  height: calc(62px + var(--safe-bot));
  align-items: stretch;
}

/* Regular nav items */
.bottom-nav a,
.bottom-nav button.bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px 10px;
  color: #A09890; font-size: 10.5px; font-weight: 700;
  letter-spacing: .01em; text-decoration: none;
  background: none; border: none; cursor: pointer;
  position: relative; transition: color .15s;
}
.bottom-nav a[aria-current="page"],
.bottom-nav button.bn-item[aria-current="page"] { color: var(--coral); }

/* Coral dot indicator under active label */
.bottom-nav a[aria-current="page"]::after,
.bottom-nav button.bn-item[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--coral);
}

/* Nav icon — no background, just the icon */
.nav-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  color: #A09890;
  transition: color .15s, transform .1s;
}
.bottom-nav a[aria-current="page"] .nav-icon,
.bottom-nav button.bn-item[aria-current="page"] .nav-icon {
  color: var(--coral);
  background: transparent;
  transform: scale(1.08);
}

/* FAB — elevated coral button in centre */
.bn-fab-wrap {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 10px;
  gap: 3px;
}
.bn-fab-btn {
  width: 50px; height: 50px;
  border-radius: 16px;
  background: var(--coral);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 300; line-height: 1;
  box-shadow: 0 4px 18px rgba(255,107,107,.45), 0 1px 4px rgba(255,107,107,.25);
  border: none; cursor: pointer;
  transform: translateY(-10px);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.bn-fab-btn:active {
  transform: translateY(-10px) scale(.92);
  box-shadow: 0 2px 8px rgba(255,107,107,.35);
}
.bn-fab-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--coral);
  letter-spacing: .01em;
  margin-top: -2px;
}

/* Header */
.app-header {
  padding-top: calc(var(--safe-top) + 12px);
  padding-bottom: 12px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 70%, rgba(250,247,240,0));
  position: sticky; top:0; z-index: 30;
}

/* Big stat */
.stat { display:flex; flex-direction:column; gap:4px; padding:14px; background:#fff; border:1px solid #EFE8D5; border-radius:14px; }
.stat .num { font-family:'Outfit', 'Inter', sans-serif; font-weight:700; font-size:30px; line-height:1; color:var(--ink); letter-spacing:-0.01em; }
.stat .lbl { font-size:.72rem; font-weight:600; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; }

/* Sheet (bottom modal) */
.sheet-overlay { position:fixed; inset:0; background:rgba(40,47,55,.45); }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(40,47,55,.18); padding-bottom: var(--safe-bot); max-height:92vh; overflow:auto; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(40,47,55,.55); display:grid; place-items:center; padding:16px; }
.modal-panel { background:#fff; border-radius:16px; max-width: 480px; width:100%; max-height:88vh; overflow:auto; }

/* Toast */
.toast { background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); font-weight:500; pointer-events:auto; max-width:92vw; }
.toast.ok { background:#205C3A; }
.toast.warn { background:#7A4E10; }
.toast.err { background:#9B2A2A; }

/* Helpers */
.hr-soft { height:1px; background:#EFE8D5; }
.divider-label { display:flex; align-items:center; gap:.6rem; color:var(--ink-mute); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.divider-label::before, .divider-label::after { content:""; flex:1; height:1px; background:#EFE8D5; }

/* Camera + scanner */
.camera-stage { position:relative; background:#000; aspect-ratio: 3/4; border-radius:14px; overflow:hidden; }
.camera-stage video, .camera-stage canvas { width:100%; height:100%; object-fit: cover; display:block; }
.shutter { width:74px; height:74px; border-radius:999px; background:#fff; border:5px solid var(--coral); }

/* Scrollable lists keep room for bottom nav */
.with-bn { padding-bottom: calc(80px + var(--safe-bot)); }

/* Photo thumb grid */
.thumb-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.thumb-grid img { aspect-ratio:1; object-fit:cover; border-radius:10px; width:100%; }

/* Display headings */
.display { font-family:'Outfit','Inter',sans-serif; font-weight:700; letter-spacing:-0.015em; color:var(--ink); }

/* Subtle motion */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fade .18s ease-out both; }
  @keyframes fade { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }
}

/* Coral smile underline — small brand flourish under section titles */
.title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; }
.smile-mark { display:inline-block; width:24px; height:6px; border-radius:0 0 12px 12px; background:var(--coral); margin-top:2px; }

/* Print friendly POD */
@media print {
  .no-print { display:none !important; }
}

/* ── Desktop / responsive ───────────────────────────────────────────────── */

/* App shell becomes a row on desktop */
.app-shell { display:flex; flex-direction:column; flex:1; min-height:100vh; }
.app-shell-content { display:flex; flex-direction:column; flex:1; min-width:0; }

/* Desktop sidebar — hidden on mobile */
.desktop-sidebar {
  display:none;
  width:220px; min-width:220px;
  background:var(--ink); color:#fff;
  flex-direction:column;
  position:sticky; top:0; height:100vh;
  overflow-y:auto; z-index:40;
}
.desktop-sidebar .ds-brand {
  padding:1.25rem 1rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:.5rem;
}
.desktop-sidebar .wordmark-img { filter:brightness(0) invert(1); }
.desktop-sidebar .ds-nav { flex:1; padding:.5rem 0; }
.desktop-sidebar .ds-nav a {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; color:rgba(255,255,255,.65);
  font-weight:600; font-size:.875rem;
  transition:background .12s, color .12s;
}
.desktop-sidebar .ds-nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.desktop-sidebar .ds-nav a.ds-active { background:rgba(255,255,255,.12); color:#fff; }
.desktop-sidebar .ds-ico {
  width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06); flex-shrink:0;
}
.desktop-sidebar .ds-nav a.ds-active .ds-ico { background:var(--coral); }
.desktop-sidebar .ds-footer { display:none; }
.desktop-sidebar .ds-device { display:none; }

/* Pinned Me / account link at bottom of sidebar */
.desktop-sidebar .ds-me-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem 1rem;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(255,107,107,.08);
  color:rgba(255,255,255,.85);
  font-weight:600; font-size:.875rem;
  transition:background .12s, color .12s;
  text-decoration:none; flex-shrink:0;
}
.desktop-sidebar .ds-me-link:hover { background:rgba(255,107,107,.16); color:#fff; }
.desktop-sidebar .ds-me-link.ds-me-active { background:rgba(255,107,107,.22); color:#fff; }
.desktop-sidebar .ds-me-ico {
  width:34px; height:34px; border-radius:50%;
  background:var(--coral); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
}
.desktop-sidebar .ds-me-info { flex:1; min-width:0; }
.desktop-sidebar .ds-me-name {
  font-weight:700; font-size:.875rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.desktop-sidebar .ds-me-role {
  font-size:.7rem; font-weight:600; color:var(--coral);
  text-transform:uppercase; letter-spacing:.06em; margin-top:1px;
}
.desktop-sidebar .ds-me-arrow { color:rgba(255,255,255,.35); font-size:1.1rem; }

/* Fixed footer that sits above mobile bottom-nav but doesn't cover desktop sidebar */
.view-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--cream); border-top: 1px solid var(--line);
  padding: .6rem 1rem;
  padding-bottom: calc(80px + var(--safe-bot) + .25rem);
  z-index: 60;
}
.view-footer-new {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--cream); border-top: 1px solid var(--line);
  padding: 1rem;
  padding-bottom: calc(80px + var(--safe-bot) + .75rem);
  z-index: 60;
}

@media (min-width: 768px) {
  .app-shell { flex-direction:row; }
  .desktop-sidebar { display:flex; }
  .bottom-nav { display:none !important; }
  .with-bn { padding-bottom:1.5rem; }
  /* Sidebar handles navigation — hide the mobile header */
  .app-header { display:none; }
  /* Wider content on desktop */
  .max-w-3xl { max-width:960px; }
  /* Stat grids go wider on desktop */
  .desktop-cols-4 { grid-template-columns: repeat(4,1fr) !important; }
  /* Fixed footers must not cover the sidebar */
  .view-footer, .view-footer-new {
    left: 220px;
    padding-bottom: 1rem;
    z-index: 20;
  }
}

/* ── Lordwell logo — alive animations ──────────────────────────────────────── */

/* Smile floats gently up and down on idle */
@keyframes smile-float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}
.js-wink-logo .wink-smile {
  animation: smile-float 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* Wink — eyelid drops */
@keyframes lordwell-wink {
  0%          { transform: scaleY(0); }
  18%, 40%    { transform: scaleY(1); }
  58%, 100%   { transform: scaleY(0); }
}
.lordwell-winking .wink-lid {
  animation: lordwell-wink 0.65s ease-in-out forwards;
}

/* Smile jumps up while winking, then settles back */
@keyframes smile-wink-rise {
  0%          { transform: translateY(0px); }
  25%, 45%    { transform: translateY(-10px); }
  75%, 100%   { transform: translateY(0px); }
}
.lordwell-winking .wink-smile {
  animation: smile-wink-rise 0.65s ease-in-out forwards !important;
}