/* Akuti Admin — styles */
:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f232c;
  --border: #2a2f3a;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --primary: #4f8cff;
  --primary-600: #3a76e6;
  --success: #2fbf71;
  --danger: #ef5350;
  --warning: #e0a64b;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.38);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Alert / badge tint colors — overridden by the light theme below */
  --alert-error-text: #ff9b99;
  --alert-success-text: #7fe3ab;
  --alert-info-text: #aac6ff;
  --tint-primary: #aac6ff;
  --plain-glow: #1b2030;

  /* Solid (non-transparent) alert backgrounds — used by #menuAlert since it
     floats over arbitrary page content and a see-through tint would blend
     unpredictably with whatever is underneath. */
  --alert-error-bg: #2a1516;
  --alert-error-border: #6b2b29;
  --alert-success-bg: #12281c;
  --alert-success-border: #1f5c3b;
  --alert-info-bg: #131c2e;
  --alert-info-border: #2c4c8f;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: #d8dde6;
  --text: #1b2027;
  --muted: #5a6472;
  --primary: #2f6fe0;
  --primary-600: #245ac0;
  --success: #1f9d57;
  --danger: #d64541;
  --warning: #b7791f;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.07);
  --shadow-card-hover: 0 4px 14px rgba(15, 23, 42, 0.12);

  --alert-error-text: #b3312d;
  --alert-success-text: #157a42;
  --alert-info-text: #245ac0;
  --tint-primary: #245ac0;
  --plain-glow: #e6ecf7;

  --alert-error-bg: #fdecec;
  --alert-error-border: #f1b0ae;
  --alert-success-bg: #e8f7ee;
  --alert-success-border: #a8dfc0;
  --alert-info-bg: #eaf1ff;
  --alert-info-border: #b7cdfa;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }
code { background: var(--surface-2); padding: .1em .4em; border-radius: 4px; font-size: .9em; }

/* ---------- Plain (login) layout ---------- */
.layout-plain {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--plain-glow) 0%, var(--bg) 60%);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .brand-mark { display: inline-flex; width: 40px; height: 40px; }
.auth-brand h1 { margin: 8px 0 2px; font-size: 22px; }
.auth-tagline { color: var(--muted); margin: 0; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }

/* ---------- App layout ---------- */
.layout-app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-mark { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.brand-name { font-weight: 700; letter-spacing: .2px; }

.brand-mark img { width: 100%; height: 100%; display: none; }
.brand-mark img.logo-dark-theme { display: block; }
[data-theme="light"] .brand-mark img.logo-dark-theme { display: none; }
[data-theme="light"] .brand-mark img.logo-light-theme { display: block; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.is-active { background: var(--surface-2); color: var(--text); }
.sidebar-footer { margin-top: auto; }
.user-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.user-name { font-weight: 600; font-size: 14px; }
.user-meta { color: var(--muted); font-size: 12px; }

.app-main { flex: 1; min-width: 0; padding: 28px 36px; max-width: 1100px; }
.page-header { margin-bottom: 22px; }
.page-header-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-header h1 { font-size: 24px; }
.page-sub { color: var(--muted); margin: 0; }
.tenant-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(79, 140, 255, 0.12);
  border: 1px solid rgba(79, 140, 255, 0.35);
  border-radius: 999px;
  color: var(--tint-primary);
  font-size: 12px; font-weight: 600;
  padding: 3px 11px;
  white-space: nowrap;
}
.tenant-tag::before { content: '🏢'; font-size: 12px; }

/* ---------- Cards & grids ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card h2 { font-size: 17px; }
.card-link { display: block; color: var(--text); transition: border-color .15s; }
.card-link:hover { border-color: var(--primary); text-decoration: none; }
.card-icon { font-size: 26px; margin-bottom: 6px; }
.card-cta { color: var(--primary); font-weight: 600; font-size: 14px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid.tight { gap: 12px; }
/* ---------- Mobile topbar & hamburger ---------- */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.hamburger {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 9px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.hamburger:hover { border-color: var(--primary); color: var(--primary); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 199;
}
.sidebar-overlay.is-open { display: block; }

@media (max-width: 720px) {
  .layout-app { display: block; }
  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.is-open { transform: translateX(0); }

  .app-main { padding: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
}

.def-list { display: grid; gap: 10px; margin: 0; }
.def-list > div { display: flex; justify-content: space-between; gap: 16px; }
.def-list dt { color: var(--muted); }
.def-list dd { margin: 0; font-weight: 500; text-align: right; }
.muted { color: var(--muted); }
.muted.pad { padding: 6px 2px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field-help { font-size: 12px; color: var(--muted); font-weight: 400; }
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline .field-label { margin: 0; }
.field-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.field-checkbox span { font-size: 14px; color: var(--text); }
.field-saved { font-size: 12px; color: var(--success); }
.field-saved.field-error { color: var(--danger); }

/* Momentary highlight when navigating to a field from a validation error */
.field-flash { animation: field-flash 2s ease-out; border-radius: var(--radius-sm); }
@keyframes field-flash {
  0%, 100% { background: transparent; box-shadow: none; }
  15% { background: rgba(239, 83, 80, 0.18); box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.4); }
}

input[type="text"], input[type="password"], input[type="number"],
select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 11px;
  font-family: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}
textarea { resize: vertical; }
.inline-controls { display: flex; align-items: center; gap: 10px; }

/* Character counters */
.field-input-row { display: flex; align-items: flex-end; gap: 8px; }
.field-input-row input, .field-input-row textarea { flex: 1; }
.char-counter { font-size: 11px; color: var(--muted); white-space: nowrap; min-width: 42px; text-align: right; }
.char-counter.char-counter-limit { color: var(--danger); font-weight: 600; }

/* Active-language translation control — one visible input at a time,
   language dots show which languages already have content. */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lang-dots { display: flex; gap: 4px; flex-shrink: 0; }
.lang-dot {
  appearance: none; border: 1px solid var(--border); background: transparent;
  color: var(--muted); border-radius: 999px; width: 26px; height: 22px;
  font-size: 10px; font-weight: 700; letter-spacing: .2px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lang-dot.has-content { border-color: var(--success); color: var(--success); }
.lang-dot.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Diet chips */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.chip-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.chip-check input { width: auto; }

/* Radio option group (e.g. category type) */
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.radio-option input[type="radio"] { width: auto; margin-top: 3px; }
.radio-option-text { display: flex; flex-direction: column; gap: 2px; }
.radio-option-title { font-size: 14px; color: var(--text); font-weight: 500; }
.radio-option.is-selected { border-color: var(--primary); background: rgba(79, 140, 255, 0.08); }

/* Icon-button group shared by reorderable list rows (images, videos, ...) */
.row-actions { display: flex; gap: 6px; }

/* Images */
.image-box, .image-list { display: flex; flex-direction: column; gap: 8px; }
.image-editor {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px;
}
.image-fields { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 6px; flex: 1; }
@media (max-width: 720px) { .image-fields { grid-template-columns: 1fr; } }

/* YouTube video URLs */
.video-list { display: flex; flex-direction: column; gap: 8px; }
.video-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px;
}
.video-row input { flex: 1; }

/* Portions */
.portion-list { display: flex; flex-direction: column; gap: 8px; }
.portion-editor {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px;
}
.portion-editor-main { display: flex; align-items: flex-start; gap: 8px; }
.portion-fields { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 6px; flex: 1; }
@media (max-width: 720px) { .portion-fields { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-600); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--primary); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--primary); }
.btn-success { background: var(--success); color: #06281a; }
.btn-danger { background: var(--danger); color: #fff; }
.icon-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text); border-color: var(--primary); }
.icon-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Dropdown / kebab menu ----------
   First popover-style primitive in this codebase (see assets/js/ui.js
   `dropdown()`). Outside-click and Escape close it; only one is open at a
   time. z-index sits above .toolbar-sticky (40) but well below the modal
   layers (480/500) since it never needs to outrank a confirm dialog. */
.dropdown { position: relative; display: inline-flex; }
.dropdown-trigger { font-weight: 700; letter-spacing: 1px; }
.dropdown.is-open .dropdown-trigger { color: var(--text); border-color: var(--primary); }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 190px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.dropdown-menu[hidden] { display: none; }
.dropdown-item {
  appearance: none; background: transparent; border: none; text-align: left;
  color: var(--text); font-size: 14px; font-family: inherit; font-weight: 500;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.dropdown-item:hover:not(:disabled) { background: var(--surface-2); }
.dropdown-item:disabled { opacity: .5; cursor: not-allowed; }
.dropdown-item-danger { color: var(--danger); }
.dropdown-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ---------- Alerts & badges ---------- */
.alert { position: relative; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 14px; margin-bottom: 16px; white-space: pre-line; }
/* .alert-close (below) is absolutely positioned, so any alert that gets one
   needs right-padding reserved for it — scoped here rather than on the base
   .alert so alerts without a close button (most of the app) don't gain
   unused padding. #menuAlert does the same via its own rule further down. */
#inboxAlert.alert, #threadAlert.alert { padding-right: 40px; }
.alert-error { background: rgba(239, 83, 80, 0.12); color: var(--alert-error-text); border: 1px solid rgba(239, 83, 80, 0.4); }
.alert-success { background: rgba(47, 191, 113, 0.12); color: var(--alert-success-text); border: 1px solid rgba(47, 191, 113, 0.4); }
.alert-info { background: rgba(79, 140, 255, 0.12); color: var(--alert-info-text); border: 1px solid rgba(79, 140, 255, 0.4); }
.alert-error-title { margin: 0 0 6px; font-weight: 600; }
.alert-error-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.alert-error-item { padding: 4px 0; }
.alert-error-item.is-clickable {
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.alert-error-item.is-clickable:hover { color: var(--text); }

/* Feedback alert that must stay visible regardless of scroll position
   (e.g. publish result triggered while scrolled to the bottom of a long form). */
#menuAlert.alert {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin-bottom: 0;
  padding-right: 40px;
  box-shadow: var(--shadow);
}
#menuAlert.alert-error   { background: var(--alert-error-bg);   border-color: var(--alert-error-border); }
#menuAlert.alert-success { background: var(--alert-success-bg); border-color: var(--alert-success-border); }
#menuAlert.alert-info    { background: var(--alert-info-bg);    border-color: var(--alert-info-border); }
.alert-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  opacity: 0.65;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.alert-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.alert-action { vertical-align: middle; margin-left: 4px; width: auto; }

@media (max-width: 720px) {
  #menuAlert.alert { top: 64px; width: calc(100% - 24px); }
}
.badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted);
}
.badge-success { background: rgba(47, 191, 113, 0.15); color: var(--alert-success-text); border-color: rgba(47, 191, 113, 0.4); }
.badge-danger { background: rgba(239, 83, 80, 0.15); color: var(--alert-error-text); border-color: rgba(239, 83, 80, 0.4); }
.badge-warning { background: rgba(224, 166, 75, 0.15); color: var(--warning); border-color: rgba(224, 166, 75, 0.4); }
.badge-sm { padding: 2px 8px; font-size: 11px; white-space: nowrap; }

/* ---------- Status page ---------- */
.status-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.status-actions { display: flex; gap: 10px; margin: 18px 0 12px; }

/* ---------- Menu toolbar ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
/* .toolbar's own `display: flex` otherwise wins the cascade over the
   browser's default `[hidden] { display: none }` (same specificity, author
   origin beats user-agent) — pre-existing bug independent of this ticket,
   caught while testing #inboxLoadMoreRow's empty-cursor case below. */
#inboxLoadMoreRow[hidden] { display: none; }
.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar select { width: auto; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg { background: var(--surface); color: var(--muted); border: none; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13px; }
.seg.is-active { background: var(--surface-2); color: var(--text); }

/* ---------- Editor header (context row + action row) ----------
   Two `.toolbar` rows inside one sticky wrapper: a context row (back link,
   menu name, status badge) and an action row (tabs, Save, Publish, kebab).
   Bounding the header to exactly two rows is what makes it safe to keep
   .toolbar-sticky on at every width (see that rule further down). */
.editor-header { margin-bottom: 16px; }
.editor-header .toolbar { margin-bottom: 10px; }
.editor-header .toolbar:last-child { margin-bottom: 0; }
.editor-title {
  font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 320px;
}

.empty-state {
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 40px; text-align: center; color: var(--muted);
}

/* ---------- Sections & accordions ---------- */
.section { margin-bottom: 18px; }
.subsection { margin-top: 8px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; }
.section-header h3 { font-size: 16px; margin: 0; }
.section-header h4 { font-size: 14px; margin: 0; color: var(--muted); }

.accordion { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--surface); }
.accordion-nested { background: var(--surface-2); }
.accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 4px 4px; }
.accordion-toggle {
  flex: 1; text-align: left; background: transparent; border: none; color: var(--text);
  font-weight: 600; font-size: 14px; padding: 10px 8px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.caret { color: var(--muted); font-size: 11px; }
.accordion-actions { display: flex; gap: 6px; }
.accordion-content { padding: 6px 14px 14px; border-top: 1px solid var(--border); }
.accordion-title-wrap { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Item rows (compact list; click opens the focused item editor panel) ---------- */
.item-row-list { display: flex; flex-direction: column; gap: 4px; }
.item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.item-row:hover, .item-row:focus { border-color: var(--primary); outline: none; background: var(--surface-2); }
.item-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.item-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row-price { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Sticky editor header ----------
   Sticky at every viewport width, including mobile. This used to be static
   below 720px because the old single-row toolbar held up to 14 elements and
   could wrap to several rows on a phone — pinning that much height would
   have eaten a large share of the viewport for the whole editing session.
   The header is now bounded to exactly two rows (.editor-header's context
   row + action row; see the Menu Editor section), so that risk is gone and
   sticky can stay on at all sizes. */
.toolbar-sticky {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); padding: 12px 0; margin: -12px 0 16px;
}

.json-area {
  width: 100%; min-height: 420px; font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; margin-bottom: 12px;
}

/* ---------- Menu listing ----------
   Each row is two `.menu-item-row` lines: identity (name + status badge) on
   top, metadata + actions (primary button + kebab) below — replacing the
   single right-pinned `.menu-item-meta` column that used to stack every
   button and metadata line on top of each other. */
.menu-group-header { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.menu-group-header h2 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 8px; }
.menu-group-count { color: var(--muted); font-size: 13px; font-weight: 600; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-list-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.menu-list-item:hover, .menu-list-item:focus {
  background: var(--surface-2); border-color: var(--border); outline: none;
}
.menu-item-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-item-name { font-weight: 600; font-size: 14px; }
.menu-item-updated { color: var(--muted); font-size: 12px; }
.menu-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

@media (max-width: 720px) {
  .menu-item-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .menu-item-actions { width: 100%; justify-content: space-between; }
}

/* ---------- Inbox listing ----------
   Card-based list: each message is its own bordered, shadowed .inbox-card
   (not nested inside a .card, which would read as cards-in-a-card) rather
   than the flat borrowed .menu-list-item rows this used before. */
.inbox-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-list + .toolbar { margin-top: 14px; }
.inbox-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.inbox-card:hover {
  border-color: var(--primary); box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.inbox-card:active { transform: translateY(0); }
.inbox-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inbox-card:focus:not(:focus-visible) { outline: none; }
.inbox-card.is-busy { opacity: .6; cursor: default; }
.inbox-card.is-busy:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: none; }

.inbox-busy-label { color: var(--muted); font-size: 12px; font-style: italic; white-space: nowrap; }

.inbox-avatar {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79, 140, 255, 0.15); color: var(--tint-primary);
  font-size: 13px; font-weight: 600;
}

.inbox-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.inbox-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inbox-card-aside { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.inbox-sender {
  font-weight: 600; font-size: 15px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.inbox-subject {
  font-weight: 500; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-preview {
  font-size: 13px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox-contact {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
  .inbox-avatar { width: 32px; height: 32px; font-size: 12px; }
  .inbox-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-card { transition: background .15s, border-color .15s; transform: none; }
  .inbox-card:hover, .inbox-card:active { transform: none; }
}

/* ---------- Inbox thread ---------- */
.inbox-thread-head { display: flex; align-items: center; gap: 14px; }
.inbox-thread-subject { font-size: 15px; font-weight: 600; color: var(--text); margin: 10px 0 0; }
.inbox-detail-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  margin: 14px 0; font-size: 13px;
}
.inbox-detail-grid dt { color: var(--muted); }
.inbox-detail-grid dd { margin: 0; color: var(--text); }
.inbox-message-body { white-space: pre-wrap; line-height: 1.6; }
.inbox-audit-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.inbox-audit-item:last-child { border-bottom: none; }
.inbox-audit-dot {
  width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0;
  background: var(--muted);
}
.inbox-audit-body { flex: 1; min-width: 0; }
.inbox-audit-time { color: var(--muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 720px) {
  .inbox-detail-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .inbox-detail-grid dt { font-weight: 600; }
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  max-width: 460px; width: 100%;
  box-shadow: var(--shadow);
}
.modal-card h3 { font-size: 18px; margin-bottom: 10px; }
.modal-card p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* Indeterminate progress — no real progress signal exists during PDF
   generation, so this deliberately never claims a percentage. */
.pdf-progress {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--border); margin-bottom: 12px;
}
.pdf-progress-bar {
  height: 100%; width: 40%; border-radius: 999px;
  background: var(--primary);
  animation: pdf-progress-slide 1.4s ease-in-out infinite;
}
@keyframes pdf-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ---------- Item editor panel (focused single-item editing, full-screen) ----------
   Comes after .modal-overlay/.modal-card above so it wins the cascade at equal
   specificity. Sits below the shared .modal-overlay z-index (500) so AkutiConfirm's
   "discard changes?" prompt — triggered from inside this panel — always renders on top. */
.modal-overlay-full { padding: 0; z-index: 480; }
.modal-card-wide {
  width: 100%; height: 100%; max-width: none; max-height: none;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-radius: 0; border: none;
}
.modal-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-card-header h3 { margin: 0; font-size: 16px; }
.modal-card-body {
  padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0;
  max-width: 760px; width: 100%; margin: 0 auto;
}
.modal-actions-row {
  flex-direction: row; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.modal-actions-row .btn { width: auto; }

/* Full-bleed edge-to-edge only makes sense on small screens. Above the app's
   existing mobile breakpoint, show it as a large centered dialog instead —
   dimmed backdrop, rounded corners, shadow — so it still reads as a modal
   rather than a page navigation. */
@media (min-width: 721px) {
  .modal-overlay-full { padding: 40px; }
  .modal-card-wide {
    width: 100%; max-width: 900px;
    height: auto; max-height: calc(100vh - 80px);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-bottom: 10px;
}
.theme-toggle .theme-icon { font-size: 14px; line-height: 1; }
.theme-toggle-auth { width: auto; padding: 6px 14px; margin: 14px auto 0; }

/* ---------- Language switcher ---------- */
.lang-switcher { display: flex; gap: 4px; margin-bottom: 10px; }
.lang-btn {
  flex: 1; background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--radius-sm);
  padding: 5px 0; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: border-color .15s, color .15s;
}
.lang-btn:hover { color: var(--text); border-color: var(--primary); }
.lang-btn.is-active { background: var(--surface-2); color: var(--text); border-color: var(--primary); }
.lang-switcher-auth { justify-content: center; gap: 8px; margin-top: 18px; }
.lang-switcher-auth .lang-btn { flex: 0 0 auto; padding: 5px 16px; }
@media (max-width: 720px) { .lang-switcher:not(.lang-switcher-auth) { display: none; } }