/* ============================================================
   DIGITINER — DESIGN SYSTEM (2026)
   ============================================================
   Warm tactile aesthetic, light + dark mode, responsive.
   Density profiles: tighter on desktop (admin), roomier on
   touch/mobile (field workers, gloves, bright sun).

   Color philosophy: warm neutrals + restrained accent (deep
   teal). Looks "crafted" rather than "enterprise dashboard".

   Accessibility:
     - All text ≥ 4.5:1 contrast against background
     - Tap targets ≥ 44×44px on touch
     - 16px+ inputs (prevents iOS zoom)
     - Visible focus rings; reduced motion respected
   ============================================================ */

/* -------------------- Tokens -------------------- */

:root {
  --bg:            #faf9f6;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f3f0e9;
  --surface-3:    #ebe6dc;

  --text:         #1a1816;
  --text-2:       #65615b;
  --text-muted:   #a39d93;
  --text-on-accent: #ffffff;

  --border:       #e8e3da;
  --border-strong: #d3ccbe;

  --accent:       #1f5d4c;
  --accent-hover: #184a3c;
  --accent-soft:  #e5efeb;
  --accent-ring:  rgba(31, 93, 76, 0.25);

  --success:      #3d8b6a;
  --success-soft: #e6f1ec;
  --warning:      #b8761a;
  --warning-soft: #f7eedb;
  --danger:       #a73838;
  --danger-hover: #8a2a2a;
  --danger-soft:  #f5e3e3;
  --info:         #2d6491;
  --info-soft:    #e2ecf4;
  --pending:      #7a6840;
  --pending-soft: #f3ecdb;

  --shadow-sm: 0 1px 2px rgba(40, 30, 15, 0.04);
  --shadow-md: 0 2px 8px rgba(40, 30, 15, 0.06), 0 1px 2px rgba(40, 30, 15, 0.04);
  --shadow-lg: 0 12px 32px rgba(40, 30, 15, 0.12), 0 2px 8px rgba(40, 30, 15, 0.08);

  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;

  --card-pad:    14px;
  --row-pad-y:   10px;
  --row-pad-x:   14px;
  --tap:         36px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;

  --sidebar-w: 232px;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1a1815;
    --bg-elevated:   #211e1a;
    --surface:       #252320;
    --surface-2:     #2e2b27;
    --surface-3:     #36322d;
    --text:          #ebe7df;
    --text-2:        #a39d93;
    --text-muted:    #6b6660;
    --border:        #3a3631;
    --border-strong: #4a4540;
    --accent:        #4a8a76;
    --accent-hover:  #5a9d87;
    --accent-soft:   #1f3530;
    --accent-ring:   rgba(74, 138, 118, 0.35);
    --success:       #5fb38a;
    --success-soft:  #1d3329;
    --warning:       #d49340;
    --warning-soft:  #3a2a14;
    --danger:        #d05656;
    --danger-hover:  #b84444;
    --danger-soft:   #3a1d1d;
    --info:          #5f93c4;
    --info-soft:     #1a2a3a;
    --pending:       #b8a070;
    --pending-soft:  #322a18;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --bg:            #1a1815;
  --bg-elevated:   #211e1a;
  --surface:       #252320;
  --surface-2:     #2e2b27;
  --surface-3:     #36322d;
  --text:          #ebe7df;
  --text-2:        #a39d93;
  --text-muted:    #6b6660;
  --border:        #3a3631;
  --border-strong: #4a4540;
  --accent:        #4a8a76;
  --accent-hover:  #5a9d87;
  --accent-soft:   #1f3530;
  --accent-ring:   rgba(74, 138, 118, 0.35);
  --success:       #5fb38a;
  --success-soft:  #1d3329;
  --warning:       #d49340;
  --warning-soft:  #3a2a14;
  --danger:        #d05656;
  --danger-hover:  #b84444;
  --danger-soft:   #3a1d1d;
  --info:          #5f93c4;
  --info-soft:     #1a2a3a;
  --pending:       #b8a070;
  --pending-soft:  #322a18;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px), (pointer: coarse) {
  :root {
    --card-pad:    16px;
    --row-pad-y:   14px;
    --row-pad-x:   16px;
    --tap:         44px;
    --fs-base:     15px;
    --fs-md:       16px;
    --fs-lg:       18px;
  }
}

/* -------------------- Reset & base -------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { font-feature-settings: 'ss01', 'cv11'; }

/* Viewport handling for mobile browsers.
   - 100vh on iOS reports the full screen height ignoring the
     dynamic browser UI bars, so content at the bottom gets hidden
     when the URL/tab bar slides in.
   - 100dvh (dynamic viewport height) accounts for this correctly
     and is supported on iOS Safari 15.4+ and recent Chrome iOS.
   - We pair it with env(safe-area-inset-bottom) padding on the
     scroll container so the home indicator area doesn't eat
     content either.
*/
#app { min-height: 100vh; min-height: 100dvh; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0;
}
h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-3) 0; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

::selection { background: var(--accent-soft); color: var(--accent); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* -------------------- Layout -------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.content-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* Pad the bottom so neither the iOS home indicator nor any
     dynamic browser chrome eats the footer. */
  padding-bottom: env(safe-area-inset-bottom);
}
.content-column main { flex: 1; }

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
  /* Same padding at the bottom for the sidebar — when it appears
     as the mobile drawer, its footer (user info, sign out) needs
     to clear iOS chrome too. */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

.sidebar h1 {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
  padding: 0 var(--space-2);
}
.sidebar .company {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-6);
}

/* Brand: Digitiner mark + wordmark. Used in sidebar and mobile header. */
.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
  text-decoration: none;
  color: var(--text);
  line-height: 1;
}
.brand:hover { text-decoration: none; color: var(--text); }

/* Sidebar variant: left-aligned, with breathing room below before the nav. */
.sidebar .brand {
  margin-bottom: var(--space-6);
  padding: var(--space-2);
}
.brand-mark {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-mark svg {
  width: 22px;
  height: 22px;
  display: block;
}
.brand-wordmark {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 32;
  color: var(--text);
  line-height: 1;
}
.mobile-brand {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.mobile-brand .brand-wordmark {
  font-size: 20px;
}
.mobile-brand .brand-mark svg {
  width: 22px;
  height: 22px;
}

/* Company logo (loaded inline as SVG so it inherits currentColor).
   Sits in the sidebar footer above the user info. The SVG is fetched
   at runtime by app.js (loadCompanyLogos) and injected as innerHTML.
   Color matches the Digitiner wordmark so the two read as a pair. */
.company-logo {
  color: var(--text);
  padding: var(--space-3) var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-logo svg {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: 28px !important;
}
.company-logo img {
  /* Fallback when fetch fails */
  max-height: 28px;
  max-width: 100%;
}

/* Company name when no logo is available. Plain text. */
.company-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--space-2);
  text-align: center;
}

/* A thin divider in the sidebar footer between the company logo
   and the user info. */
.sidebar-footer-divider {
  border-top: 1px solid var(--border);
  margin: var(--space-2) 0;
}

/* App footer — sits below main content. */
.app-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.app-footer a {
  color: var(--text-2);
}
.app-footer a:hover {
  color: var(--accent);
}
.app-footer-right {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .app-footer { padding: var(--space-3) var(--space-4); }
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  min-height: var(--tap);
}
.sidebar nav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.sidebar nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.sidebar nav a .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.user-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition);
}
.user-link:hover { background: var(--surface-2); text-decoration: none; }
.user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.user-email {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main {
  padding: var(--space-6) var(--space-8);
  width: 100%;
}

/* -------------------- Toolbar -------------------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* -------------------- Buttons -------------------- */

button, .button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  padding: 0 var(--space-4);
  min-height: var(--tap);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform 80ms ease, box-shadow var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  user-select: none;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active, .button:active { transform: translateY(1px); }
button:disabled, .button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
button:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }

button.secondary, .button.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
button.secondary:hover, .button.secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

button.danger, .button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}
button.danger:hover, .button.danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

button.ghost, .button.ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}
button.ghost:hover, .button.ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

button.small, .button.small {
  padding: 0 var(--space-3);
  font-size: var(--fs-xs);
  min-height: 28px;
}
@media (max-width: 768px), (pointer: coarse) {
  button.small, .button.small { min-height: var(--tap); font-size: var(--fs-sm); }
}

/* -------------------- Forms -------------------- */

label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--space-1);
  letter-spacing: 0.01em;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"],
input[type="search"], input[type="url"], textarea, select {
  font-family: inherit;
  font-size: 16px;
  line-height: var(--lh-snug);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  width: 100%;
  min-height: var(--tap);
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (min-width: 769px) and (pointer: fine) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"],
  input[type="search"], input[type="url"], textarea, select {
    font-size: var(--fs-sm);
  }
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input:disabled, textarea:disabled, select:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea { min-height: 80px; resize: vertical; }

input[type="checkbox"], input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
  margin-right: var(--space-2);
}
@media (max-width: 768px), (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
  }
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2365615b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
}
.form-group .muted {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--space-1);
}
/* Required-field asterisk after a label */
.req-marker {
  color: var(--danger, #c92a2a);
  margin-left: 0.2em;
}
.form-row {
  display: grid;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* -------------------- Helpers -------------------- */

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* -------------------- Cards / list rows -------------------- */

.list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--row-pad-y) var(--row-pad-x);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
}
.list-card.selectable-row { cursor: pointer; }
.list-card.selectable-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.list-card .meta {
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.list-card .meta + .meta { margin-top: 2px; }

.row-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.row-link:hover { color: var(--accent); text-decoration: none; }

/* -------------------- Status -------------------- */

.status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin: var(--space-3) 0;
  border: 1px solid transparent;
}
.status.info {
  background: var(--info-soft);
  border-color: var(--info);
  color: var(--info);
}
.status.success {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.status.warning {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
}
.status.error {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.status.hidden { display: none; }

.empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* -------------------- Badges -------------------- */

.badge-pending, .badge-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: var(--fs-xs) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--pending-soft) !important;
  color: var(--pending) !important;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4 !important;
}
.badge-role {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* -------------------- Loading -------------------- */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  gap: var(--space-3);
}
.loading::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .loading::before { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row {
  height: 60px;
  margin-bottom: var(--space-2);
}

/* -------------------- Utilities -------------------- */

.muted {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.hidden { display: none !important; }
.intro {
  color: var(--text-2);
  font-size: var(--fs-md);
  margin-bottom: var(--space-4);
}

/* -------------------- Auth screen -------------------- */

.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--bg);
  /* Card-style content directly inside */
  max-width: 420px;
  margin: 0 auto;
}
.auth-screen > * {
  /* Content sits inside an implicit card formed by the flex column */
}
.auth-screen-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.auth-screen h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-1);
}
.auth-screen .intro {
  margin-bottom: var(--space-2);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.auth-brand .brand-mark { color: var(--accent); }
.auth-brand .brand-mark svg { width: 36px; height: 36px; }
.auth-brand .brand-wordmark { font-size: var(--fs-2xl); }

/* -------------------- Mobile drawer -------------------- */

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  /* Add safe-area top padding so the notch / Dynamic Island doesn't
     overlap the hamburger or brand on iOS. */
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.mobile-header h1 {
  font-size: var(--fs-md);
  font-weight: 700;
}
.menu-toggle {
  background: transparent;
  border: none;
  color: var(--text);
  padding: var(--space-2);
  min-height: var(--tap);
  width: var(--tap);
  border-radius: var(--radius);
}
.menu-toggle:hover { background: var(--surface-2); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .mobile-header { display: flex; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open { display: block; }
  main { padding: var(--space-4); max-width: 100%; }
}

/* -------------------- Toast -------------------- */

.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 260px;
  max-width: 420px;
  animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.success {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}
.toast.error {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
.toast.info {
  border-color: var(--info);
  background: var(--info-soft);
  color: var(--info);
}
.toast.removing { animation: toast-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateX(20px); opacity: 0; }
}

/* -------------------- Place editor -------------------- */

.place-block {
  display: block !important;
  padding: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}
.places-section h4 {
  margin-bottom: var(--space-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pending-event-card {
  border-left: 3px solid var(--pending) !important;
}

/* -------------------- Print -------------------- */

@media print {
  .sidebar, .mobile-header, .menu-toggle, button { display: none !important; }
  main { padding: 0; max-width: 100%; }
  .list-card { box-shadow: none; break-inside: avoid; }
}