/* ============================================================================
   AliothPress Admin — Unified Horizon
   
   Glass minimalism, strict hierarchy, unified forms.
   This single CSS file styles the entire admin panel.
   WCAG AA compliant: all text/bg pairs ≥ 4.5:1, UI components ≥ 3:1.
   
   Sections:
     1. Variables & Reset
     2. Layout (container, sidebar, main)
     3. Sidebar navigation
     4. Page header
     5. Flash messages / Alerts
     6. Buttons (unified)
     7. Form inputs & fields
     8. Cards & panels
     9. Tables
    10. User menu
    11. Utilities
    12. Badges & status indicators
    13. Modal & overlays
   ============================================================================ */


/* ============================================================================
   1. ADMIN VARIABLES
   ============================================================================ */

:root {
  /* --- Admin palette (dark sidebar, light content) --- */
  --adm-sidebar-bg:      #1a1e2e;
  --adm-sidebar-surface:  #232838;
  --adm-sidebar-border:   rgba(255, 255, 255, 0.06);
  --adm-sidebar-text:     #e2e8f0;
  --adm-sidebar-muted:    #a0aec0;            /* WCAG fix: was #8b99b0 (3.9:1), now 5.0:1 on sidebar bg ✅ */
  --adm-sidebar-active:   #8ba0be;
  --adm-sidebar-active-bg:rgba(92, 122, 158, 0.14);
  --adm-sidebar-active-glow: 0 0 12px rgba(92, 122, 158, 0.25);
  --adm-sidebar-width:    260px;
  
  /* --- Content area --- */
  --adm-bg:              #f8fafc;
  --adm-surface:         #ffffff;
  --adm-surface-alt:     #f1f5f9;
  --adm-border:          #cbd5e1;            /* Structural borders (cards, dividers) */
  --adm-border-light:    #e2e8f0;            /* Decorative separators */
  --adm-input-border:    #8293a6;            /* WCAG fix: 3.15:1 on white — form input boundaries */
  --adm-text:            #1e293b;
  --adm-text-secondary:  #64748b;            /* 4.76:1 on white ✅ */
  --adm-text-muted:      #636b78;            /* WCAG fix: was #6b7280 (4.62:1 on bg), now 5.14:1 on bg, 5.38:1 on white ✅ */
  
  /* --- Accent — soft steel-blue, harmonious with sidebar --- */
  --adm-primary:         #4e6b8c;            /* WCAG fix: was #5c7a9e (3.96:1 with on-primary text), now 4.92:1 ✅; as accent on white 4.44:1 → 5.52:1 ✅ */
  --adm-primary-hover:   #43607f;            /* WCAG fix: keeps ≥4.5:1 on hover (5.82:1) ✅ */
  --adm-primary-light:   #edf1f6;
  --adm-primary-border:  #c4d0e0;
  --adm-primary-subtle:  rgba(92, 122, 158, 0.08);
  --adm-on-primary:      #f0f2f5;            /* text on primary buttons/badges: 4.92:1 ✅ */
  --adm-on-error:        #f0f2f5;            /* text on danger buttons: 4.70:1 ✅ */
  
  /* --- Status: soft, harmonious with theme palettes --- */
  --adm-success:         #16a34a;
  --adm-success-bg:      #ecfdf5;
  --adm-success-border:  #a7f3d0;
  --adm-success-text:    #065f46;
  
  --adm-error:           #8c6068;
  --adm-error-bg:        #f6f0f1;
  --adm-error-border:    #dcc8cb;
  --adm-error-text:      #6e4a50;
  
  --adm-warning:         #d97706;            /* WCAG fix: accessible amber for UI elements */
  --adm-warning-bg:      #fffbeb;
  --adm-warning-border:  #fde68a;
  --adm-warning-text:    #92400e;
  
  --adm-info:            #0284c7;            /* WCAG fix: accessible blue for UI elements */
  --adm-info-bg:         #f0f9ff;
  --adm-info-border:     #bae6fd;
  --adm-info-text:       #0c4a6e;
  
  /* --- Shapes --- */
  --adm-radius:          8px;
  --adm-radius-lg:       12px;
  --adm-radius-sm:       6px;

  /* --- Form field widths ---
     The admin uses exactly TWO field widths:
     1) full width (default: inputs/textareas are width:100%)
     2) medium (--adm-field-md) for short-value fields: passwords,
        usernames, emails, search boxes, IDs, ports, hosts, selects.
     Do not introduce new per-field widths — use .input-medium. */
  --adm-field-md:        360px;
  
  /* --- Shadows --- */
  --adm-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.04);
  --adm-shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --adm-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  
  /* --- Transitions --- */
  --adm-transition:      200ms ease;
  --adm-transition-slow: 300ms ease;
}


/* ============================================================================
   1b. DARK THEME OVERRIDES
   Applied via data-theme="dark" on <body>
   ============================================================================ */

body[data-theme="dark"] {
  /* --- Sidebar (slightly lighter to differentiate from content) --- */
  --adm-sidebar-bg:       #111318;
  --adm-sidebar-surface:  #181a22;
  --adm-sidebar-border:   rgba(255, 255, 255, 0.06);
  --adm-sidebar-text:     #d1d5db;
  --adm-sidebar-muted:    #9ba8bc;            /* WCAG fix: was #8b99b0 (3.9:1), now ~4.6:1 on dark sidebar bg ✅ */
  --adm-sidebar-active:   #a8b4d0;
  --adm-sidebar-active-bg:rgba(168, 180, 208, 0.14);
  
  /* --- Content area --- */
  --adm-bg:              #0f1117;
  --adm-surface:         #1a1c25;
  --adm-surface-alt:     #22242e;
  --adm-border:          #2d3044;
  --adm-border-light:    #262937;
  --adm-input-border:    #4b5268;
  --adm-text:            #e2e8f0;
  --adm-text-secondary:  #94a3b8;
  --adm-text-muted:      #95a0b3;            /* WCAG fix: was #8892a4 (5.41:1), now 6.43:1 on surface ✅ */
  
  /* --- Accent --- */
  --adm-primary:         #a8b4d0;
  --adm-primary-hover:   #b8c4dc;
  --adm-primary-light:   rgba(168, 180, 208, 0.12);
  --adm-primary-border:  rgba(168, 180, 208, 0.25);
  --adm-primary-subtle:  rgba(168, 180, 208, 0.06);
  --adm-on-primary:      #0f1117;            /* WCAG fix: white-on-#a8b4d0 was 1.85:1 ❌, dark ink is 9.08:1 ✅ (10.75:1 on hover) */
  --adm-on-error:        #0f1117;            /* WCAG fix: white-on-#b07878 was 3.23:1 ❌, dark ink is 5.22:1 ✅ */
  
  /* --- Status (darker backgrounds, brighter text) --- */
  --adm-success:         #34d399;
  --adm-success-bg:      rgba(52, 211, 153, 0.1);
  --adm-success-border:  rgba(52, 211, 153, 0.25);
  --adm-success-text:    #6ee7b7;
  
  --adm-error:           #b07878;
  --adm-error-bg:        rgba(176, 120, 120, 0.1);
  --adm-error-border:    rgba(176, 120, 120, 0.25);
  --adm-error-text:      #d0a0a0;
  
  --adm-warning:         #fbbf24;
  --adm-warning-bg:      rgba(251, 191, 36, 0.1);
  --adm-warning-border:  rgba(251, 191, 36, 0.25);
  --adm-warning-text:    #fde68a;
  
  --adm-info:            #38bdf8;
  --adm-info-bg:         rgba(56, 189, 248, 0.1);
  --adm-info-border:     rgba(56, 189, 248, 0.25);
  --adm-info-text:       #7dd3fc;
  
  /* --- Shadows (stronger for dark surfaces) --- */
  --adm-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.2);
  --adm-shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --adm-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
}


/* ============================================================================
   2. LAYOUT
   ============================================================================ */

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

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--adm-bg);
  color: var(--adm-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

body[data-theme="dark"] {
  color-scheme: dark;
}

.admin-container {
  display: flex;
  min-height: 100vh;
}


/* ============================================================================
   3. SIDEBAR
   ============================================================================ */

.sidebar {
  width: var(--adm-sidebar-width);
  background: var(--adm-sidebar-bg);
  color: var(--adm-sidebar-text);
  padding: 0;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--adm-sidebar-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
}

/* Scrollbar */
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Header */
.sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--adm-sidebar-border);
  flex-shrink: 0;
}

.sidebar-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.sidebar-brand-icon {
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -2px;
}

.sidebar-header p {
  font-size: 12px;
  color: var(--adm-sidebar-muted);
  font-weight: 400;
}

/* Navigation */
.sidebar-menu {
  list-style: none;
  padding: 12px 0;
  flex: 1;
}

.menu-section {
  padding: 0 12px;
  margin-bottom: 8px;
}

.menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-section-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--adm-sidebar-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 16px 8px 6px;
}

.menu-item {
  margin-bottom: 1px;
}

.menu-item a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  color: var(--adm-sidebar-text);
  text-decoration: none;
  border-radius: var(--adm-radius);
  font-size: 14px;
  font-weight: 450;
  transition: all var(--adm-transition);
  border-inline-start: 3px solid transparent;
  position: relative;
}

.menu-item a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.menu-item a.active {
  background: var(--adm-sidebar-active-bg);
  color: var(--adm-sidebar-active);
  border-inline-start-color: var(--adm-sidebar-active);
  font-weight: 500;
  box-shadow: var(--adm-sidebar-active-glow);
}

.menu-icon {
  margin-inline-end: 10px;
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Submenu — collapsible */
.submenu {
  list-style: none;
  padding: 0 0 0 38px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}

.menu-item.is-expanded > .submenu {
  max-height: 200px;
  margin: 2px 0 4px;
  opacity: 1;
}

/* Chevron indicator for items with submenu */
.menu-item.has-submenu > a {
  padding-inline-end: 32px;
}

.menu-item.has-submenu > a::after {
  content: '';
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-inline-end: 1.5px solid var(--adm-sidebar-muted);
  border-bottom: 1.5px solid var(--adm-sidebar-muted);
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.25s ease;
}

.menu-item.has-submenu.is-expanded > a::after {
  transform: translateY(-65%) rotate(45deg);
}

.submenu a {
  font-size: 13px !important;
  padding: 6px 12px !important;
  color: var(--adm-sidebar-muted) !important;
  border-inline-start: none !important;
}

.submenu a:hover {
  color: var(--adm-sidebar-text) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}


/* ============================================================================
   4. MAIN CONTENT
   ============================================================================ */

.main-content {
  margin-inline-start: var(--adm-sidebar-width);
  flex: 1;
  padding: 28px 32px;
  min-width: 0;
}

.page-body {
  max-width: 1200px;
}

/* Page header */
.page-header {
  margin: -28px -32px 28px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--adm-border);
  background: var(--adm-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-header h2 {
  font-size: 18px;
  font-weight: 400;
  color: var(--adm-text);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.page-header p {
  color: var(--adm-text-secondary);
  font-size: 14px;
}


/* ============================================================================
   5. FLASH MESSAGES / ALERTS
   ============================================================================ */

.alert {
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-width: 1px;
  border-style: solid;
  /* Toast readability rework (owner's unification pass):
     — toasts live in the fixed #adm-toasts STACK (flex column, gap),
       never in one overlapping point; the element itself is static.
     — the background is ALWAYS an opaque surface: the type tokens
       carry 10% alpha in dark mode (fine for inline tints, unreadable
       floating over content), so the tint is layered on --adm-surface
       via background-image — dark mode gets a solid softly-tinted
       card, light mode looks exactly as before. Tokens untouched.
     — lifetime scales with text length and pauses on hover; the
       timing lives in base.html's toast controller, not here. */
  max-width: 420px;
  background-color: var(--adm-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  animation: toastSlideIn 0.3s ease;
  pointer-events: auto;
  cursor: default;
}

.alert .alert-close {
  margin-inline-start: auto;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0 0 0 12px;
}

.alert .alert-close:hover {
  opacity: 1;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
  from { opacity: 1; pointer-events: auto; }
  to { opacity: 0; transform: translateY(10px); pointer-events: none; }
}

.alert-success {
  background-image: linear-gradient(var(--adm-success-bg), var(--adm-success-bg));
  color: var(--adm-success-text);
  border-color: var(--adm-success-border);
}

.alert-error {
  background-image: linear-gradient(var(--adm-error-bg), var(--adm-error-bg));
  color: var(--adm-error-text);
  border-color: var(--adm-error-border);
}

.alert-warning {
  background-image: linear-gradient(var(--adm-warning-bg), var(--adm-warning-bg));
  color: var(--adm-warning-text);
  border-color: var(--adm-warning-border);
}

.alert-info {
  background-image: linear-gradient(var(--adm-info-bg), var(--adm-info-bg));
  color: var(--adm-info-text);
  border-color: var(--adm-info-border);
}

/* The toast stack: newest at the bottom, older ones lift up, nothing
   ever overlaps. The container is click-transparent; toasts are not. */
#adm-toasts {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(420px, calc(100vw - 48px));
  pointer-events: none;
}

#adm-toasts .alert {
  pointer-events: auto;
}

.alert.is-leaving {
  animation: toastFadeOut 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .alert,
  .alert.is-leaving {
    animation-duration: 0.01s;
  }
}


/* ============================================================================
   6. BUTTONS (Unified)
   ============================================================================ */

/* Base button — ONE size for everything */
button,
input[type="submit"],
.btn,
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-ghost,
a.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--adm-border);
  border-radius: 5px;
  background: var(--adm-surface);
  color: var(--adm-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1.4;
  font-family: inherit;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
a.btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* Primary — soft steel-blue */
.btn-primary,
a.btn-primary,
button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-ghost):not(.action-link):not(.action-delete):not(.action-edit):not(.action-translate):not(.action-view):not(.sidebar-btn):not(.ai-assist-btn):not(.backup-btn),
input[type="submit"] {
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border-color: var(--adm-primary);
}

.btn-primary:hover,
a.btn-primary:hover,
button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-ghost):not(.action-link):not(.action-delete):not(.action-edit):not(.action-translate):not(.action-view):not(.sidebar-btn):not(.ai-assist-btn):not(.backup-btn):hover,
input[type="submit"]:hover {
  background: var(--adm-primary-hover);
  border-color: var(--adm-primary-hover);
  color: var(--adm-on-primary);
  opacity: 1;
}

/* Secondary — subtle filled, NOT transparent */
.btn-secondary,
a.btn-secondary,
.btn-ghost,
a.btn-ghost {
  background: var(--adm-primary-light);
  color: var(--adm-primary);
  border-color: var(--adm-primary);
}

.btn-secondary:hover,
a.btn-secondary:hover,
.btn-ghost:hover,
a.btn-ghost:hover {
  border-color: var(--adm-primary-hover);
  opacity: 1;
}

/* Danger — muted dusty rose */
.btn-danger,
a.btn-danger,
.logout-btn {
  background: var(--adm-error);
  color: var(--adm-on-error);
  border-color: var(--adm-error);
}

.btn-danger:hover,
a.btn-danger:hover,
.logout-btn:hover {
  opacity: 0.85;
}

/* Small variant — only for tight spaces */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* Button group */
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ============================================================================
   7. FORM INPUTS & FIELDS
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--adm-text);
  /* longhand everywhere on selects: never reset the arrow image */
  background-color: var(--adm-bg);
  border: 1px solid var(--adm-input-border);
  border-radius: var(--adm-radius);
  transition: border-color var(--adm-transition),
              box-shadow var(--adm-transition),
              background var(--adm-transition);
  outline: none;
  line-height: 1.5;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
  border-color: var(--adm-border);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--adm-primary);
  box-shadow: 0 0 0 3px var(--adm-primary-subtle);
  /* longhand on purpose: the background SHORTHAND here (higher
     specificity than the plain `select` arrow rule below) resets
     background-image and made the dropdown arrow vanish while the
     select stayed :focus after choosing, until an outside click */
  background-color: var(--adm-surface);
}

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

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-inline-end: 32px;
}

/* RTL admin (ar/he, dir="rtl" on <html>): mirror the arrow to the
   inline-end side; padding-inline-end above already reserves the room */
[dir="rtl"] select {
  background-position: left 12px center;
}

/* Labels */
label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--adm-text);
  margin-bottom: 4px;
}

/* Help text under fields */
.form-help,
.help-text {
  font-size: 13px;
  color: var(--adm-text-muted);
  margin-top: 4px;
}

/* Form group spacing */
.form-group {
  margin-bottom: 20px;
}

.form-group select {
  max-width: var(--adm-field-md);
}

.filter-bar input[type="text"] {
  width: 100%;
  max-width: var(--adm-field-md);
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--adm-primary);
  width: auto;
}

input[disabled],
input[readonly] {
  background: var(--adm-bg);
  color: var(--adm-text-muted);
  cursor: default;
}


/* ============================================================================
   8. CARDS & PANELS
   ============================================================================ */

.card,
.panel,
div[style*="background: white"],
div[style*="background:#fff"],
div[style*="background: #fff"] {
  background: var(--adm-surface) !important;
  border: 1px solid var(--adm-border) !important;
  border-radius: var(--adm-radius-lg) !important;
  box-shadow: var(--adm-shadow-sm);
}

/* Generic card-like sections used in admin templates */
.settings-section,
.form-section {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

.settings-section h3,
.form-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--adm-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--adm-border-light);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--adm-border-light);
  margin: 16px 0;
}


/* ============================================================================
   9. TABLES
   ============================================================================ */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

th {
  text-align: start;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--adm-text-muted);
  background: var(--adm-bg);
  border-bottom: 1px solid var(--adm-border);
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--adm-border-light);
  color: var(--adm-text);
}

tbody tr {
  transition: background var(--adm-transition);
}

tbody tr:hover {
  background: var(--adm-primary-subtle);
}

/* First and last cells rounded */
table thead th:first-child { border-radius: var(--adm-radius) 0 0 0; }
table thead th:last-child { border-radius: 0 var(--adm-radius) 0 0; }


/* ============================================================================
   10. USER MENU (bottom of sidebar)
   ============================================================================ */

.user-menu {
  padding: 16px;
  border-top: 1px solid var(--adm-sidebar-border);
  margin-top: auto;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--adm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
}

img.user-avatar--img {
  object-fit: cover;
  border: 2px solid var(--adm-border-light);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--adm-sidebar-text);
}

.user-role {
  font-size: 12px;
  color: var(--adm-sidebar-muted);
}

.user-menu .profile-btn {
  display: block;
  width: 100%;
  padding: 7px 12px;
  color: var(--adm-sidebar-text);
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  border: 1px solid var(--adm-sidebar-border);
  border-radius: var(--adm-radius);
  margin-bottom: 6px;
  transition: all var(--adm-transition);
  background: transparent;
}

.user-menu .profile-btn:hover {
  border-color: var(--adm-primary);
  color: var(--adm-primary);
  background: var(--adm-sidebar-active-bg);
}

.logout-btn {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--adm-radius);
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--adm-transition);
}

.logout-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #fecaca;
  border-color: rgba(220, 38, 38, 0.3);
  transform: none;
}


/* ============================================================================
   11. UTILITIES
   ============================================================================ */

/* Text helpers */
.text-muted { color: var(--adm-text-muted); }
.text-secondary { color: var(--adm-text-secondary); }
.text-primary { color: var(--adm-primary); }
.text-success { color: var(--adm-success); }
.text-error { color: var(--adm-error); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }

/* Spacing */
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* Flex helpers */
.flex { display: flex; }
.items-end { align-items: flex-end; }
.mb-0 { margin-bottom: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* Additional spacing */
.mt-1 { margin-top: 4px; }
.mt-3 { margin-top: 12px; }
.mb-1 { margin-bottom: 4px; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.input-readonly { cursor: default; opacity: 0.8; }
.mb-3 { margin-bottom: 12px; }
.mb-5 { margin-bottom: 20px; }
.mt-5 { margin-top: 20px; }
.ml-1 { margin-inline-start: 4px; }
.ml-3 { margin-inline-start: 12px; }

/* Additional flex */
.flex-col { flex-direction: column; }
.gap-1 { gap: 4px; }
.gap-6 { gap: 24px; }
.flex-1 { flex: 1; }

/* Additional text */
.text-md { font-size: 14px; }
.text-bold { font-weight: 600; }
.text-uppercase { text-transform: uppercase; }
.text-lg { font-size: 20px; }
.text-warning { color: var(--adm-warning); }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-preline { white-space: pre-line; }
.table-scroll { overflow-x: auto; }
.td-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-start { text-align: start; }
.text-normal { font-weight: 400; }
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.cursor-default { cursor: default; }
.opacity-muted { opacity: 0.8; }
.flex-shrink-0 { flex-shrink: 0; }
.emoji-lg { font-size: 24px; }

/* ── Info card ── */
.info-card {
  padding: 16px;
  border-radius: var(--adm-radius);
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
}

/* ── Action row (label left, button right) ── */
.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Mini label (uppercase muted) ── */
.mini-label {
  font-size: 12px;
  color: var(--adm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* ── Status banner ── */
.status-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: var(--adm-radius);
  margin-bottom: 20px;
}

.status-banner-success {
  background: var(--adm-success-bg);
  border: 1px solid var(--adm-success);
}

.status-banner-error {
  background: var(--adm-error-bg);
  border: 1px solid var(--adm-error);
}

.status-banner-warning {
  background: var(--adm-warning-bg);
  border: 1px solid var(--adm-warning);
}

/* ── Password toggle field ── */
.input-password-wrap {
  position: relative;
}

.input-password-wrap input {
  padding-inline-end: 44px;
}

.btn-password-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  color: var(--adm-text-muted);
}

/* ── Result box (shown via JS) ── */
.result-box {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--adm-radius-sm);
  font-size: 13px;
}

.result-box.visible {
  display: block;
}

.result-box.success {
  background: var(--adm-success-bg);
  border: 1px solid var(--adm-success);
  color: var(--adm-success);
}

.result-box.error {
  background: var(--adm-error-bg);
  border: 1px solid var(--adm-error);
  color: var(--adm-error);
}

.result-box.warning {
  background: var(--adm-warning-bg);
  border: 1px solid var(--adm-warning);
  color: var(--adm-warning);
}

/* ── Social links list ── */
.social-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-link-row svg {
  flex-shrink: 0;
}

.social-link-row input {
  flex: 1;
}

/* ── Radio group row ── */
.radio-group {
  display: flex;
  gap: 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ── Guide table (SMTP setup etc.) ── */
.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 13px;
}

.guide-table th {
  padding: 8px;
  font-weight: 600;
  background: var(--adm-border-light);
  text-align: start;
}

.guide-table td {
  padding: 8px;
  border-bottom: 1px solid var(--adm-border-light);
}

.guide-table tr:last-child td {
  border-bottom: none;
}

/* ── Collapsible guide block ── */
.guide-header {
  cursor: pointer;
  padding: 12px 16px;
  border-radius: var(--adm-radius);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--adm-info-bg);
  color: var(--adm-info-text);
}

.guide-body {
  display: none;
  padding: 20px;
  border-radius: 0 0 var(--adm-radius) var(--adm-radius);
  font-size: 14px;
  line-height: 1.7;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
  color: var(--adm-text-secondary);
}

.guide-body.active {
  display: block;
}

.guide-body p {
  margin: 0 0 12px;
}

.guide-body p:last-child {
  margin-bottom: 0;
}

/* ── Logo preview ── */
.logo-preview-wrap {
  position: relative;
  display: none;
  margin-top: 8px;
  width: fit-content;
}

.logo-preview-wrap img {
  max-height: 60px;
  border-radius: var(--adm-radius-sm);
  border: 1px solid var(--adm-border-light);
}

.image-preview-wrap {
  position: relative;
  display: none;
  margin-top: 8px;
  width: fit-content;
}

.image-preview-wrap .image-preview-thumb {
  display: block;
}

.btn-remove-preview {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ── Field width helpers ──
   Exactly two widths exist in the admin: full (default) and medium.
   .input-medium works on inputs, selects and wrappers (.input-password-wrap). */
.input-medium {
  display: block;   /* each medium field owns its line; ignored inside flex rows */
  width: 100%;
  max-width: var(--adm-field-md);
}

/* Deprecated alias — kept so third-party plugins don't break.
   Renders identically to .input-medium; do not use in new markup. */
.input-narrow {
  display: block;
  width: 100%;
  max-width: var(--adm-field-md);
}


/* ============================================================================
   12. BADGES & STATUS
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-published,
.badge-success {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.badge-draft {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
}

.badge-active {
  background: var(--adm-primary-light);
  color: #4338ca;                             /* WCAG fix: was --adm-primary-hover, 4338ca = 7.07:1 ✅ */
}

.badge-inactive {
  background: #f1f5f9;
  color: #475569;                             /* WCAG fix: was #64748b (4.34:1), now 6.92:1 ✅ */
}


/* ============================================================================
   13. RESPONSIVE (admin sidebar collapse on small screens)
   ============================================================================ */

/* ── Hamburger toggle button ── */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  background: var(--adm-surface);
  color: var(--adm-text);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-toggle:hover {
  background: var(--adm-primary-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-toggle:active {
  transform: scale(0.95);
}

/* ── Sidebar overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.is-open {
  opacity: 1;
}

@media (max-width: 768px) {
  .sidebar-toggle {
    display: flex;
  }

  .sidebar-overlay {
    display: block;
    pointer-events: none;
  }

  .sidebar-overlay.is-open {
    pointer-events: auto;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  
  .sidebar.is-open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-inline-start: 0;
    padding: 20px 16px;
    padding-top: 72px; /* space for hamburger button */
  }

  .page-header--with-action {
    margin: -20px -16px 20px;
    padding: 12px 16px;
    top: 60px; /* below hamburger */
  }

  .page-header--with-action .btn-group {
    gap: 4px;
  }
}

/* ── RTL: mobile sidebar slides from right edge ── */
@media (max-width: 768px) {
  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }
  [dir="rtl"] .sidebar.is-open {
    transform: translateX(0);
  }
}


/* ============================================================================
   14. PAGE-SPECIFIC COMPONENT CLASSES
   Shared patterns extracted from admin templates for de-hardcoding.
   ============================================================================ */

/* ── Settings / card sections ── */
.settings-section {
  background: var(--adm-surface);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  margin-bottom: 24px;
  border: 1px solid var(--adm-border);
}

.settings-section h3 {
  font-size: 15px;
  margin-bottom: 16px;
  color: var(--adm-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--adm-border-light);
}

.section-subtitle {
  margin-top: -12px;
  margin-bottom: 16px;
}

.profile-avatar-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 8px;
  object-fit: cover;
  border: 2px solid var(--adm-border-light);
}

.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-top: 8px;
}

.profile-avatar-wrap .profile-avatar-preview {
  margin-top: 0;
}

.profile-avatar-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--adm-border);
  background: var(--adm-surface);
  color: var(--adm-text-secondary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--adm-shadow-sm);
  transition: all var(--adm-transition);
}

.profile-avatar-remove:hover {
  background: var(--adm-error-bg);
  color: var(--adm-error-text);
  border-color: var(--adm-error-border);
}

/* ── Status connected / not connected ── */
.status-connected {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.status-not-connected {
  background: var(--adm-error-bg);
  color: var(--adm-error-text);
}

/* ── Container widths ── */
.container-sm { max-width: 700px; }
.container-md { max-width: 900px; }
.container-lg { max-width: 1100px; }
.container-xl { max-width: 1200px; }

/* ── Editor layout (two-column: main + sidebar) ── */
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 24px;
  align-items: start;
}
.editor-layout--wide { max-width: 1200px; }

.editor-main {
  background: var(--adm-surface);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  border: 1px solid var(--adm-border);
  /* Grid items default to min-width:auto, so wide content (tables, long
     URLs, code) could force the column — and the whole page — wider than
     the viewport. That is what made some admin tabs look "zoomed out" on
     mobile. min-width:0 lets the column shrink and contain its content. */
  min-width: 0;
}

.editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* same grid-overflow guard as .editor-main */
}

@media (max-width: 1024px) {
  .editor-layout { grid-template-columns: 1fr; }
}

/* ── Grid layouts ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-grid:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ── Stat items ── */
.stat-item {
  background: var(--adm-bg);
  border-radius: var(--adm-radius);
  padding: 16px;
  text-align: center;
  border: 1px solid var(--adm-border-light);
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--adm-text);
}

.stat-label {
  font-size: 13px;
  color: var(--adm-text-muted);
  margin-top: 4px;
}

/* ── Label with required marker ── */
label.required::after {
  content: ' *';
  color: var(--adm-error);
}

/* ── Checkbox-style label ── */
label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ── Content editor textarea ── */
textarea.editor-content {
  min-height: 400px;
  font-family: 'Courier New', monospace;
}

textarea.code-textarea {
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

/* ── Collapsible sections ── */
.collapsible {
  border-top: 1px solid var(--adm-border-light);
  padding-top: 16px;
  margin-top: 16px;
}

.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-weight: 600;
  color: var(--adm-text);
}

.collapsible-header:hover {
  color: var(--adm-primary);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible-content.active {
  max-height: 2000px;
}

.arrow {
  transition: transform 0.3s;
}

.arrow.active {
  transform: rotate(90deg);
}

/* ── Form actions bar ── */
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--adm-border);
  margin-top: 24px;
}

.form-actions .spacer {
  margin-inline-start: auto;
}

/* ── Button: pick image ── */
.btn-pick-image {
  padding: 7px 14px;
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border: 1px solid var(--adm-primary);
  border-radius: 5px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.15s ease;
}

.btn-pick-image:hover {
  background: var(--adm-primary-hover);
}

/* ── Button: sidebar-wide ── */
.sidebar-btn {
  display: block;
  width: 100%;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-bottom: 8px;
  border: 1px solid var(--adm-border);
}
.sidebar-btn--highlight {
  background: var(--adm-primary-light);
  color: var(--adm-primary);
  border: 2px solid var(--adm-primary);
}
.sidebar-btn--highlight:hover {
  border-color: var(--adm-primary-hover);
  transform: translateY(-1px);
}
.sidebar-btn--primary {
  background: var(--adm-primary);
  color: #fff;
}
.lang-flag {
  width: 18px;
  height: 13px;
  vertical-align: middle;
  border-radius: 2px;
}

/* ── AI assist & translate buttons ── */
.btn-ai,
.ai-assist-btn,
.ai-translate-all {
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border: 1px solid var(--adm-primary);
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
}

.ai-assist-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  margin-top: 8px;
}

.ai-translate-all {
  padding: 7px 14px;
  font-size: 12.5px;
  width: auto;
  margin-top: 8px;
}

/* On mobile the editor sidebar collapses to full page width, which made
   its action buttons span the whole screen. Let them shrink to their label
   and flow side by side: Preview, Open Builder, the AI assist buttons and
   Create Translation. Desktop (>768px) is unaffected — there the sidebar
   is a narrow 350px column where full width looks right. */
@media (max-width: 768px) {
  .editor-sidebar .sidebar-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    margin-inline-end: 8px;
  }
}

.btn-ai:hover,
.ai-assist-btn:hover,
.ai-translate-all:hover {
  background: var(--adm-primary-hover);
  transform: translateY(-1px);
}

.btn-ai:disabled,
.ai-translate-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Image field row ── */
.image-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.image-field-row input {
  flex: 1;
}

.image-preview-thumb {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--adm-radius-sm);
  margin-top: 8px;
  display: none;
}

/* ── Source info box (translation pages) ── */
.source-info {
  background: linear-gradient(135deg, var(--adm-primary-light) 0%, #f5f0ff 100%);
  border: 2px solid var(--adm-primary);
  border-radius: var(--adm-radius);
  padding: 16px;
  margin-bottom: 20px;
}

.source-info h4 {
  margin: 0 0 8px 0;
  color: var(--adm-primary);
  font-size: 14px;
}

.source-info p {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: var(--adm-text-secondary);
}

.source-info a {
  color: var(--adm-primary);
  text-decoration: none;
  font-size: 13px;
}

.source-info a:hover {
  text-decoration: underline;
}

/* ── Translation list (sidebar) ── */
.translation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.translation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--adm-border-light);
  font-size: 13px;
}

.translation-item:last-child {
  border-bottom: none;
}

.translation-lang {
  font-weight: 600;
  color: var(--adm-text);
}

.translation-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.translation-status.published {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.translation-status.draft {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
}

.translation-link {
  color: var(--adm-primary);
  text-decoration: none;
  font-size: 13px;
}

.translation-link:hover {
  text-decoration: underline;
}

.add-translation-select {
  width: 100%;
  padding-block: 8px;
  padding-inline: 12px 32px;
  border: 2px dashed var(--adm-border);
  border-radius: var(--adm-radius-sm);
  font-size: 13px;
  /* background-color, not the shorthand — the shorthand out-specified
     the global arrow rule and this select had no arrow at all */
  background-color: var(--adm-bg);
  cursor: pointer;
  margin-top: 8px;
}

.current-lang-badge {
  display: inline-block;
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Content list pages (posts/pages list) ── */
.content-table {
  width: 100%;
  background: var(--adm-surface);
  border-radius: var(--adm-radius-lg);
  border: 1px solid var(--adm-border);
  border-collapse: collapse;
  overflow: hidden;
}

.content-table thead {
  background: var(--adm-bg);
}

.content-table th {
  padding: 12px 16px;
  text-align: start;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--adm-text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--adm-border);
}

.content-table td {
  padding: 8px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--adm-border-light);
  vertical-align: middle;
}

.content-table tr:hover {
  background: var(--adm-primary-subtle);
}

.content-table tr:last-child td {
  border-bottom: none;
}

/* ── Title link in content tables ── */
.title-link,
.page-title-link,
.text-link {
  color: var(--adm-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.title-link:hover,
.page-title-link:hover,
.text-link:hover {
  color: var(--adm-primary);
}

.slug-text {
  color: var(--adm-text-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* ── Status badges (list pages) ── */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-published {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.status-draft {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
}

/* ── Language badge ── */
.lang-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--adm-border-light);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--adm-text-secondary);
}

/* ── Action links ── */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--adm-radius-sm);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--adm-transition);
}
button.action-link {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.action-edit {
  background: var(--adm-info-bg);
  color: var(--adm-info-text);
}

.action-edit:hover {
  background: var(--adm-info-border);
}

.action-translate {
  background: var(--adm-primary-light);
  color: var(--adm-primary);
}

.action-translate:hover {
  background: var(--adm-primary-border);
}

.action-duplicate {
  background: var(--adm-primary-light);
  color: var(--adm-primary);
}

.action-duplicate:hover {
  background: var(--adm-primary-border);
}

.action-view {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.action-view:hover {
  background: var(--adm-success-border);
}

.action-delete {
  background: var(--adm-error-bg);
  color: var(--adm-error-text);
}

.action-delete:hover {
  background: var(--adm-error-border);
}

/* ── Search autocomplete ── */
.search-autocomplete {
  position: relative;
  flex: 1;
}

.search-autocomplete input {
  width: 100%;
}

.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}

.autocomplete-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--adm-text);
  border-bottom: 1px solid var(--adm-border-light);
  transition: background var(--adm-transition);
  gap: 12px;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover {
  background: var(--adm-primary-light);
}

.autocomplete-title {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-bar select {
  width: auto;
  padding-block: 8px;
  padding-inline: 14px 32px;
  font-size: 14px;
}

.filter-link {
  padding: 6px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12.5px;
  color: var(--adm-text-secondary);
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  transition: all 0.15s ease;
}

.filter-link:hover {
  background: var(--adm-bg);
}

.filter-link.active {
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border-color: var(--adm-primary);
}

.filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-row label {
  font-size: 14px;
  color: var(--adm-text-muted);
  font-weight: 500;
}

.filter-row select {
  width: auto;
  padding-block: 8px;
  padding-inline: 14px 32px;
  font-size: 14px;
}

.filter-row input[type="text"] {
  width: 100%;
  min-width: 180px;
  max-width: var(--adm-field-md);
  padding: 8px 12px;
  font-size: 14px;
}

/* ── Bulk actions bar ── */
.bulk-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-primary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--adm-text);
  justify-content: flex-end;
}

/* ── Form type badge ── */
.form-type-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--adm-surface);
  color: var(--adm-text-secondary);
  border: 1px solid var(--adm-border);
}

/* ── Search box ── */
.search-box {
  margin-inline-start: auto;
  display: flex;
  gap: 6px;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 24px;
}

.pagination a,
.pagination span {
  padding: 8px 14px;
  border-radius: var(--adm-radius-sm);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--adm-border);
  color: var(--adm-text-secondary);
  background: var(--adm-surface);
}

.pagination a:hover {
  background: var(--adm-bg);
}

.pagination .current {
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border-color: var(--adm-primary);
  font-weight: 600;
}

.pagination-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pagination-footer .pagination {
  margin-top: 0;
}

.per-page-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--adm-text-muted);
  margin-inline-start: auto;
  white-space: nowrap;
}

.per-page-selector select {
  width: auto;
  min-width: 0;
  padding-block: 4px;
  padding-inline: 8px 28px;
  border-radius: var(--adm-radius-sm);
  border: 1px solid var(--adm-border);
  /* background-color, not the shorthand — the shorthand out-specified
     the global arrow rule and this select had no arrow at all */
  background-color: var(--adm-surface);
  color: var(--adm-text);
  font-size: 13px;
  cursor: pointer;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--adm-text-muted);
}

.empty-state h3 {
  color: var(--adm-text);
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--adm-text-muted);
  margin-bottom: 20px;
}

.empty-state a {
  text-decoration: none;
  font-weight: 500;
}

.empty-state a.btn-primary,
.empty-state a.btn-upload {
  color: var(--adm-on-primary);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ── Info box ── */
.info-box {
  background: var(--adm-primary-light);
  border-inline-start: 4px solid var(--adm-primary);
  padding: 14px 16px;
  border-radius: var(--adm-radius-sm);
  margin-top: 20px;
  margin-bottom: 24px;
}

.info-box p {
  margin: 0;
  color: var(--adm-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Role badges (users page) ── */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.role-owner {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
}

.role-admin {
  background: var(--adm-info-bg);
  color: var(--adm-info-text);
}

.role-editor {
  background: var(--adm-border-light);
  color: var(--adm-text-secondary);
}

.role-pending {
  background: var(--adm-error-bg);
  color: var(--adm-error-text);
}

/* ── User row (users page) ── */
.user-row {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--adm-border-light);
}

.user-row:last-child {
  border-bottom: none;
}

.user-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #ffffff;
  font-size: 18px;
  margin-inline-end: 16px;
  flex-shrink: 0;
}

img.user-avatar-lg.user-avatar--img {
  object-fit: cover;
  border: 2px solid var(--adm-border-light);
}

.user-info-col { flex: 1; }

.user-name-lg {
  font-weight: 600;
  font-size: 15px;
  color: var(--adm-text);
}

.user-email {
  font-size: 13px;
  color: var(--adm-text-muted);
}

.user-meta {
  font-size: 12px;
  color: var(--adm-text-muted);
  margin-top: 2px;
}

/* ── User actions ── */
.user-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-actions select {
  padding-block: 5px;
  padding-inline: 10px 28px;
  font-size: 13px;
  line-height: 1.4;
}

/* Mobile: avatar + info + badge + a row of action buttons never fit in one
   line; without wrapping, the buttons overflowed the card to the right.
   Wrap instead: info line first, actions drop to their own full row below.
   Desktop (>768px) keeps the original single-line layout. */
@media (max-width: 768px) {
  .user-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .user-info-col { min-width: 0; }
  .user-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
}

/* ── Invite form (users page) ── */
.invite-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.invite-form .form-group {
  margin-bottom: 0;
}

/* The --grow / --role modifiers are used in users.html but their rules
   were never written, so the e-mail group collapsed to its intrinsic
   flex size (tiny field, truncated placeholder). Standard field width,
   same token as .filter-row inputs. */
.invite-form .form-group--grow {
  flex: 1 1 auto;
  min-width: 220px;
  max-width: var(--adm-field-md);
}

.invite-form .form-group--grow input {
  width: 100%;
}

.invite-form .form-group--role select {
  width: auto;
}

.btn-invite {
  padding: 7px 14px;
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border: 1px solid var(--adm-primary);
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
  font-size: 12.5px;
}

.btn-invite:hover {
  background: var(--adm-primary-hover);
  opacity: 0.9;
}

/* ── Backup page ── */
.backup-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  border: 1px solid var(--adm-primary);
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.backup-btn:hover {
  background: var(--adm-primary-hover);
  transform: translateY(-1px);
}

.backup-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.backup-btn--danger {
  background: var(--adm-error);
  border-color: var(--adm-error);
}

/* ── Spinner (backup/restore) ── */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Audit log ── */
.log-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--adm-surface);
  border-radius: var(--adm-radius-lg);
  overflow: hidden;
  border: 1px solid var(--adm-border);
}

.log-table th {
  background: var(--adm-bg);
  text-align: start;
  padding: 12px 16px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--adm-text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--adm-border);
}

.log-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--adm-border-light);
  font-size: 14px;
  color: var(--adm-text-secondary);
  vertical-align: middle;
}

.log-table tr:hover {
  background: var(--adm-primary-subtle);
}

.ip-inline {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--adm-text-muted);
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--adm-border);
  border-radius: 4px;
  white-space: nowrap;
}

.time-cell {
  font-size: 13px;
  color: var(--adm-text-muted);
  white-space: nowrap;
}

.date-cell {
  color: var(--adm-text-muted);
  font-size: 13px;
}

.author-cell {
  color: var(--adm-text-secondary);
  font-size: 13px;
}

/* ── Audit log action badges ── */
.badge-login { background: var(--adm-success-bg); color: var(--adm-success-text); }
/* AI-agent attribution badge (audit log): themed via the --adm-info tokens
   so light and dark palettes both apply. */
.badge-actor-agent { background: var(--adm-info-bg); color: var(--adm-info); border: 1px solid var(--adm-info-border); }
/* 2FA recovery codes — monospace card, shown exactly once during setup. */
.twofa-recovery-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 1px;
  background: var(--adm-surface-alt);
  color: var(--adm-text);
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  padding: 16px 20px;
  max-width: 320px;
  user-select: all;
}
.badge-login_failed { background: var(--adm-error-bg); color: var(--adm-error-text); }
.badge-login_blocked { background: var(--adm-error-border); color: var(--adm-error-text); }
.badge-logout { background: var(--adm-border-light); color: var(--adm-text-secondary); }
.badge-create_post,
.badge-create_page { background: var(--adm-info-bg); color: var(--adm-info-text); }
.badge-edit_post,
.badge-edit_page,
.badge-edit_settings { background: var(--adm-warning-bg); color: var(--adm-warning-text); }
.badge-delete_post,
.badge-delete_page,
.badge-clear_audit_log { background: var(--adm-error-bg); color: var(--adm-error-text); }

/* ── Menu page ── */
.menu-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--adm-border-light);
  padding-bottom: 0;
}

.menu-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: var(--adm-text-muted);
  font-size: 15px;
  transition: all var(--adm-transition);
}

.menu-tab.active {
  color: var(--adm-primary);
  border-bottom-color: var(--adm-primary);
}

.menu-tab:hover {
  color: var(--adm-primary);
}

.menu-form {
  background: var(--adm-surface);
  padding: 32px;
  border-radius: var(--adm-radius-lg);
  border: 1px solid var(--adm-border);
}

.menu-form h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--adm-text);
}

.current-menu {
  background: var(--adm-bg);
  padding: 20px;
  border-radius: var(--adm-radius);
  margin-bottom: 24px;
}

.current-menu h4 {
  font-size: 14px;
  color: var(--adm-text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.current-menu-item {
  padding: 12px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius-sm);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-menu-item:last-child { margin-bottom: 0; }

.menu-item-info { flex: 1; }
.menu-item-title { font-weight: 600; color: var(--adm-text); margin-bottom: 2px; }
.menu-item-link { font-size: 13px; color: var(--adm-text-muted); }

.menu-item-type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-inline-start: 8px;
}

.type-page { background: var(--adm-border-light); color: var(--adm-text-secondary); }
.type-post { background: var(--adm-warning-bg); color: var(--adm-warning-text); }

/* ── Content type tabs (inside menu forms) ── */
.content-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--adm-border-light);
}

.content-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: var(--adm-text-muted);
  font-size: 14px;
  transition: all var(--adm-transition);
}

.content-tab.active {
  color: var(--adm-text);
  border-bottom-color: var(--adm-primary);
  background: var(--adm-bg);
}

.content-tab:hover { color: var(--adm-text); }

.content-panel { display: none; }
.content-panel.active { display: block; }

/* ── Selected counter (menus) ── */
.selected-counter {
  font-size: 13px;
  color: var(--adm-primary);
  font-weight: 600;
  margin-inline-start: auto;
}

/* ── Row check state (menus) ── */
.content-table .cb-cell {
  width: 40px;
  text-align: center;
}

.content-table .cb-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.content-table .title-cell {
  font-weight: 600;
  color: var(--adm-text);
}

.content-table .slug-cell {
  color: var(--adm-text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.content-table .label-input {
  padding: 4px 8px;
  border: 1px solid var(--adm-border);
  border-radius: 4px;
  font-size: 13px;
  width: 140px;
  color: var(--adm-text-secondary);
  display: none;
}

.content-table .label-input:focus {
  border-color: var(--adm-primary);
}

.content-table tr.row-checked {
  background: var(--adm-primary-light);
}

.content-table tr.row-checked .label-input {
  display: inline-block;
}

/* ── AI section (ai.html) ── */

.ai-section {
  background: var(--adm-surface);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  margin-bottom: 24px;
  border: 1px solid var(--adm-border);
}

.ai-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--adm-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--adm-border-light);
}

.api-key-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.api-key-row input { flex: 1; }

.tool-card {
  padding: 20px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 16px;
  transition: all var(--adm-transition);
}

.tool-card:hover {
  border-color: var(--adm-primary);
  background: var(--adm-primary-subtle);
}

.tool-card h4 {
  margin-bottom: 8px;
  color: var(--adm-text);
}

.tool-card p {
  font-size: 13px;
  color: var(--adm-text-muted);
  margin-bottom: 12px;
}

/* ── AI Chat (moved from ai.html <style>) ── */

/* Quick action chips */
.ai-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ai-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--adm-border-light);
    background: var(--adm-bg);
    color: var(--adm-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ai-chip:hover:not(:disabled) {
    border-color: var(--adm-primary);
    background: var(--adm-primary-light, rgba(99, 102, 241, 0.08));
    color: var(--adm-primary);
}

.ai-chip.is-active {
    border-color: var(--adm-primary);
    background: var(--adm-primary);
    color: #fff;
}

.ai-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Chat container */
.ai-chat {
    border: 1px solid var(--adm-border-light);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 600px;
    background: var(--adm-surface, var(--adm-bg));
}

.ai-chat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--adm-border-light);
    background: var(--adm-bg);
}

.ai-chat__new-btn {
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid var(--adm-border-light);
    background: var(--adm-bg);
    color: var(--adm-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.ai-chat__new-btn:hover {
    border-color: var(--adm-primary);
    color: var(--adm-primary);
    background: var(--adm-primary-light, rgba(99, 102, 241, 0.08));
}

.ai-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Message bubbles */
.ai-msg {
    display: flex;
    gap: 10px;
    max-width: 85%;
    animation: msgFadeIn 0.3s ease;
}

@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-msg--assistant {
    align-self: flex-start;
}

.ai-msg__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: var(--adm-surface-alt, var(--adm-border-light));
}

.ai-msg--user .ai-msg__avatar {
    background: var(--adm-primary);
    color: #fff;
    font-size: 13px;
}

.ai-msg__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-msg__text {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}

.ai-msg--assistant .ai-msg__text {
    background: var(--adm-surface-alt, #f1f5f9);
    color: var(--adm-text);
    border-bottom-left-radius: 4px;
}

.ai-msg--user .ai-msg__text {
    background: var(--adm-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Result block inside assistant message */
.ai-result-block {
    margin-top: 8px;
    border: 1px solid var(--adm-border-light);
    border-radius: 8px;
    overflow: hidden;
}

.ai-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--adm-bg);
    border-bottom: 1px solid var(--adm-border-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-text-secondary);
}

.ai-result-header button {
    padding: 3px 10px;
    border: 1px solid var(--adm-border-light);
    border-radius: 4px;
    background: var(--adm-bg);
    font-size: 11px;
    cursor: pointer;
    color: var(--adm-text-secondary);
    transition: all 0.15s;
}

.ai-result-header button:hover {
    border-color: var(--adm-primary);
    color: var(--adm-primary);
}

.ai-result-content {
    padding: 12px;
    font-size: 13px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    color: var(--adm-text);
}

.ai-result-content table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.ai-result-content table td {
    padding: 6px 12px 6px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--adm-border-light);
}

.ai-result-content table td:first-child {
    font-weight: 600;
    color: var(--adm-text-secondary);
    white-space: nowrap;
    width: 140px;
}

/* Loading dots */
.ai-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.ai-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--adm-text-muted);
    animation: typingBounce 1.2s infinite;
}

.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Input area */
.ai-chat__input-area {
    border-top: 1px solid var(--adm-border-light);
    padding: 12px 16px;
    background: var(--adm-bg);
}

.ai-chat__context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--adm-primary-light, rgba(99, 102, 241, 0.08));
    border-radius: 6px;
    font-size: 12px;
    color: var(--adm-primary);
}

.ai-chat__context button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--adm-text-muted);
    line-height: 1;
    padding: 0 2px;
}

.ai-chat__input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.ai-chat__input-row textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--adm-border-light);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    max-height: 120px;
    background: var(--adm-bg);
    color: var(--adm-text);
    transition: border-color 0.15s;
}

.ai-chat__input-row textarea:focus {
    outline: none;
    border-color: var(--adm-primary);
}

.ai-chat__send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--adm-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
}

.ai-chat__send:hover:not(:disabled) {
    transform: scale(1.06);
}

.ai-chat__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ai-chat__send svg {
    width: 18px;
    height: 18px;
}

/* AI message text formatting */
.ai-msg__text strong { font-weight: 600; }
.ai-msg__text code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.ai-msg--assistant .ai-msg__text ul,
.ai-msg--assistant .ai-msg__text ol {
    list-style: disc;
    padding-left: 18px;
}

/* AI JS-generated content helpers */
.ai-welcome-hint {
    display: block;
    margin-top: 8px;
    color: var(--adm-text-muted);
    font-size: 13px;
}

.ai-content-preview {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--adm-border-light);
}

.ai-content-preview__body {
    margin-top: 6px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 12px;
    opacity: 0.8;
}

.ai-result-pre {
    font-size: 11px;
    max-height: 300px;
    overflow: auto;
}

.ai-result-content table .ai-field-sub {
    padding-left: 20px;
    font-weight: 400;
}

/* ── AI Modal (moved from base.html <style>) ── */

.ai-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.ai-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.ai-modal {
    background: var(--adm-surface); border-radius: 16px; width: 600px; max-width: 95vw;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); transform: translateY(20px);
    transition: transform 0.2s;
}
.ai-modal-overlay.is-open .ai-modal { transform: translateY(0); }

.ai-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--adm-border-light);
}
.ai-modal__header h3 { margin: 0; font-size: 16px; color: var(--adm-text); }
.ai-modal__close {
    background: none; border: none; font-size: 20px; cursor: pointer;
    color: var(--adm-text-muted); padding: 4px 8px; border-radius: 4px;
}
.ai-modal__close:hover { background: var(--adm-bg); color: var(--adm-text); }

.ai-modal__body {
    flex: 1; overflow-y: auto; padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
}

.ai-modal__chat {
    flex: 1; min-height: 120px; max-height: 350px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}

.ai-msg {
    padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.6;
    max-width: 90%; animation: aiFadeIn 0.2s ease;
}
@keyframes aiFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ai-msg--user {
    background: var(--adm-primary); color: var(--adm-surface); align-self: flex-end; border-bottom-right-radius: 4px;
}
.ai-msg--ai {
    background: var(--adm-bg); color: var(--adm-text); align-self: flex-start; border-bottom-left-radius: 4px;
    border: 1px solid var(--adm-border-light);
}
.ai-msg--ai code { background: var(--adm-border-light); padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.ai-msg--system {
    background: var(--adm-warning-bg); color: var(--adm-warning-text); align-self: center; font-size: 13px;
    border: 1px solid var(--adm-warning); text-align: center;
}
.ai-msg--loading::after {
    content: ''; display: inline-block; width: 16px; height: 16px;
    border: 2px solid var(--adm-primary); border-top-color: transparent;
    border-radius: 50%; animation: spin 0.8s linear infinite;
    margin-left: 8px; vertical-align: middle;
}

.ai-modal__input-row {
    display: flex; gap: 8px; align-items: flex-end;
}
.ai-modal__textarea {
    flex: 1; padding: 10px 14px; border: 2px solid var(--adm-border-light); border-radius: 8px;
    font-size: 14px; font-family: inherit; resize: none; min-height: 44px;
    max-height: 120px; outline: none; transition: border-color 0.2s; line-height: 1.5;
}
.ai-modal__textarea:focus { border-color: var(--adm-primary); }
.ai-modal__send {
    background: linear-gradient(135deg, var(--adm-primary) 0%, var(--adm-primary-hover) 100%);
    color: var(--adm-surface); border: none; padding: 10px 18px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: opacity 0.2s;
}
.ai-modal__send:hover { opacity: 0.9; }
.ai-modal__send:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-modal__context {
    font-size: 12px; color: var(--adm-text-muted); padding: 8px 12px;
    background: var(--adm-bg); border-radius: 6px; border: 1px solid var(--adm-border-light);
}
.ai-modal__context strong { color: var(--adm-text-secondary); }

.ai-modal__actions {
    display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--adm-border-light);
}
.ai-modal__apply {
    background: var(--adm-success); color: var(--adm-surface); border: none; padding: 10px 20px;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ai-modal__apply:hover { opacity: 0.9; }
.ai-modal__apply:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-modal__discard {
    background: var(--adm-border-light); color: var(--adm-text-secondary); border: none; padding: 10px 20px;
    border-radius: 8px; font-size: 14px; cursor: pointer;
}
.ai-modal__discard:hover { background: var(--adm-border); }

.result-box {
  background: var(--adm-bg);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 16px;
  margin-top: 16px;
  min-height: 100px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  display: none;
}

.result-box.active { display: block; }

.loading {
  text-align: center;
  padding: 20px;
  color: var(--adm-text-muted);
}

.loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--adm-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-inline-start: 8px;
  vertical-align: middle;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Tools page ── */
.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
}

@media (max-width: 768px) {
  .tools-grid { grid-template-columns: 1fr; }
}

.tool-card-page {
  background: var(--adm-surface);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  border: 1px solid var(--adm-border);
}

.tool-card-page h3 {
  font-size: 18px;
  margin-bottom: 16px;
  color: var(--adm-text);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--adm-border-light);
  font-size: 14px;
}

.stat-row:last-child { border-bottom: none; }
.stat-row .stat-label { color: var(--adm-text-muted); }
.stat-row .stat-value { font-weight: 600; color: var(--adm-text); }

.url-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.url-display {
  flex: 1;
  padding: 8px 12px;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius-sm);
  font-size: 13px;
  color: var(--adm-text-secondary);
  font-family: 'Courier New', monospace;
}

/* ── Status badge (generic) ── */
.status-badge-sm {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-active {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

/* ── Language grid (settings page) ── */
.language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.language-item {
  padding: 12px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  display: flex;
  align-items: center;
}

.language-item input[type="checkbox"] {
  margin-inline-end: 8px;
}

.language-item.active {
  background: var(--adm-primary-light);
  border-color: var(--adm-primary);
}

/* ── Theme mode radio options ── */
.theme-mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--adm-radius);
  border: 2px solid var(--adm-border);
  cursor: pointer;
  background: var(--adm-surface);
  transition: all var(--adm-transition);
}

.theme-mode-option input[type="radio"] {
  accent-color: var(--adm-primary);
}

.theme-mode-option--active {
  border-color: var(--adm-primary);
  background: var(--adm-primary-light);
}

/* ── Theme cards ── */
.theme-card {
  border: 2px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  overflow: hidden;
  transition: all var(--adm-transition);
}

.theme-card--active {
  border-color: var(--adm-primary);
  box-shadow: 0 0 0 1px var(--adm-primary), 0 4px 12px rgba(92, 122, 158, 0.15);
}

.theme-card__preview {
  height: 160px;
  overflow: hidden;
  border-bottom: 1px solid var(--adm-border-light);
}

.theme-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-card__preview--placeholder {
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, var(--adm-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-card__body {
  padding: 16px;
}

.theme-card__title {
  font-size: 15px;
  color: var(--adm-text);
}

.theme-card__active-badge {
  font-size: 11px;
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.theme-card__desc {
  font-size: 13px;
  color: var(--adm-text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.theme-card__tag {
  font-size: 11px;
  color: var(--adm-text-secondary);
  background: var(--adm-bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--adm-border-light);
}

.theme-card__current {
  width: 100%;
  padding: 8px 16px;
  background: var(--adm-bg);
  color: var(--adm-text-secondary);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius-sm);
  font-size: 13px;
  text-align: center;
}

.theme-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.theme-card__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Action row: Activate always shown; Delete only on custom themes.
   flex:1 on each child means one button fills the row (built-in themes),
   two buttons split it evenly 50/50 (custom themes) — no wrapping. */
.theme-card__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.theme-card__actions .btn {
  flex: 1 1 0;
  min-width: 0;
}

.theme-card__activate-btn {
  width: 100%;
}

/* ── Standalone auth pages (login, forgot, reset, invite) ── */
.auth-page {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, var(--adm-primary) 0%, var(--adm-primary-hover) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  background: var(--adm-surface);
  border-radius: var(--adm-radius-lg);
  padding: 40px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.auth-card h1 {
  color: var(--adm-text);
  margin-bottom: 10px;
  font-size: 28px;
  text-align: center;
}

.auth-subtitle {
  color: var(--adm-text-muted);
  margin-bottom: 30px;
  font-size: 14px;
  text-align: center;
}

.auth-card .form-group { margin-bottom: 20px; }

.auth-card label {
  color: var(--adm-text-secondary);
  font-weight: 500;
  font-size: 14px;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  padding: 12px 16px;
  border: 1px solid var(--adm-input-border);
  border-radius: var(--adm-radius);
  font-size: 15px;
}

.auth-card input:focus {
  border-color: var(--adm-primary);
  box-shadow: 0 0 0 3px var(--adm-primary-subtle);
}

.auth-card button[type="submit"] {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--adm-primary) 0%, var(--adm-primary-hover) 100%);
  color: var(--adm-on-primary);
  border: none;
  border-radius: var(--adm-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--adm-transition);
}

.auth-card button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(92, 122, 158, 0.4);
}

.auth-link {
  text-align: center;
  margin-top: 20px;
}

.auth-link a {
  color: var(--adm-primary);
  text-decoration: none;
  font-size: 14px;
}

.auth-link a:hover {
  text-decoration: underline;
}

/* ── Invite card (accept_invite.html) ── */
.invite-card {
  background: var(--adm-surface);
  border-radius: var(--adm-radius-lg);
  max-width: 480px;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.invite-header {
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  padding: 30px;
  text-align: center;
}

.invite-header h1 { font-size: 22px; margin-bottom: 6px; }
.invite-header p { opacity: 0.9; font-size: 14px; }

.invite-body { padding: 30px; }

.role-info {
  background: var(--adm-primary-light);
  padding: 12px 16px;
  border-radius: var(--adm-radius);
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--adm-text-secondary);
}

/* ── Page header with action button (list pages) ── */
.page-header--with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--adm-bg);
  margin: -28px -32px 28px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--adm-border);
}

.page-header--with-action .page-header__content {
  flex: 1;
}

.page-header--with-action .page-header__content h2 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
}

.page-header--with-action .page-header__content p {
  display: none;
}

/* ── Favicon page ── */


.favicon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.favicon-item {
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 14px 10px;
  text-align: center;
  background: var(--adm-surface);
  transition: all var(--adm-transition);
}

.favicon-item.active {
  border-color: var(--adm-success);
  background: var(--adm-success-bg);
}

.favicon-item.empty {
  border-style: dashed;
  opacity: 0.45;
}

.favicon-preview-box {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(var(--adm-border-light) 0% 25%, var(--adm-surface) 0% 50%) 50% / 12px 12px;
  border-radius: var(--adm-radius-sm);
  border: 1px solid var(--adm-border-light);
}

.favicon-preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.favicon-label { font-size: 12px; font-weight: 600; color: var(--adm-text); margin-bottom: 1px; }
.favicon-size { font-size: 12px; color: var(--adm-text-muted); }
.favicon-icon { font-size: 24px; }
.favicon-dash { font-size: 18px; color: var(--adm-text-muted); }

/* ── Upload zone (media upload / favicon) ── */
.upload-form {
  max-width: 600px;
}

.upload-zone {
  border: 2px dashed var(--adm-border);
  border-radius: var(--adm-radius-lg);
  padding: 40px 24px;
  text-align: center;
  transition: all var(--adm-transition);
  cursor: pointer;
  margin-bottom: 16px;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--adm-primary);
  background: var(--adm-primary-subtle);
}

.upload-zone input[type="file"] { display: none; }
.upload-zone-icon { font-size: 36px; margin-bottom: 8px; }
.upload-zone-label { font-size: 14px; font-weight: 600; color: var(--adm-text); margin-bottom: 2px; }
.upload-zone-hint { font-size: 13px; color: var(--adm-text-muted); }

.upload-preview {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  margin-bottom: 16px;
}

.upload-preview.visible { display: flex; }

.upload-preview img {
  width: 56px;
  height: 56px;
  border-radius: var(--adm-radius-sm);
  object-fit: cover;
  border: 1px solid var(--adm-border-light);
}

.upload-preview-name { font-size: 14px; font-weight: 500; color: var(--adm-text); }
.upload-preview-meta { font-size: 13px; color: var(--adm-text-muted); }

/* ── Form footer (shared pattern) ── */
.form-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--adm-border-light);
  margin-top: 20px;
}

/* ============================================================================
   MEDIA LIBRARY
   ============================================================================ */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.media-card {
  background: var(--adm-surface);
  border-radius: var(--adm-radius-lg);
  overflow: hidden;
  box-shadow: var(--adm-shadow-sm);
  transition: transform var(--adm-transition), box-shadow var(--adm-transition);
}

.media-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--adm-shadow-md);
}

.media-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.media-card-body {
  padding: 14px;
}

.media-alt {
  font-size: 13px;
  color: var(--adm-text);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-info {
  font-size: 12px;
  color: var(--adm-text-muted);
  margin-bottom: 8px;
}

.media-url-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}

.media-url-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  font-size: 12px;
  color: var(--adm-text-muted);
  background: var(--adm-bg);
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--adm-transition);
}

.copy-btn:hover {
  background: var(--adm-border-light);
}

.media-actions {
  display: flex;
  gap: 8px;
}

.media-actions .action-link {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--adm-radius);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  transition: background var(--adm-transition);
}

.media-actions form {
  display: contents;
}

.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--adm-primary);
  color: var(--adm-on-primary);
  text-decoration: none;
  border: 1px solid var(--adm-primary);
  border-radius: 5px;
  font-weight: 500;
  font-size: 12.5px;
  transition: all 0.15s ease;
}

.btn-upload:hover {
  background: var(--adm-primary-hover);
  transform: translateY(-1px);
}

/* ============================================================================
   MEDIA EDIT
   ============================================================================ */

.edit-container {
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .edit-container { grid-template-columns: 1fr; }
}

.image-preview-panel {
  background: var(--adm-surface);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  box-shadow: var(--adm-shadow-sm);
}

.image-preview-panel img {
  width: 100%;
  border-radius: var(--adm-radius);
  margin-bottom: 16px;
}

.edit-form-panel {
  background: var(--adm-surface);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  box-shadow: var(--adm-shadow-sm);
}

.url-row {
  display: flex;
  gap: 8px;
}

.url-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  font-size: 13px;
  color: var(--adm-text-muted);
  background: var(--adm-bg);
}

/* Slug editor row for media/edit — fixed "/" prefix and ".ext" suffix
   frame a single editable segment in the middle. Dark/light safe via CSS vars. */
.slug-row {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  overflow: hidden;
  background: var(--adm-surface);
}

.slug-row:focus-within {
  border-color: var(--adm-primary);
}

.slug-prefix,
.slug-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  color: var(--adm-text-muted);
  background: var(--adm-surface-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  user-select: none;
}

.slug-prefix {
  border-right: 1px solid var(--adm-border-light);
}

.slug-suffix {
  border-left: 1px solid var(--adm-border-light);
}

.slug-row input {
  flex: 1;
  border: none;
  padding: 10px 12px;
  font-size: 13px;
  background: transparent;
  color: var(--adm-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}

.image-info {
  font-size: 13px;
  color: var(--adm-text-muted);
  line-height: 1.8;
}

.image-info strong {
  color: var(--adm-text-secondary);
}

.dominant-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  border: 1px solid var(--adm-border-light);
}

.variants-info {
  margin-top: 16px;
  padding: 16px;
  background: var(--adm-bg);
  border-radius: var(--adm-radius);
  font-size: 13px;
}

.variants-info strong {
  color: var(--adm-text-secondary);
}

.variant-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--adm-border-light);
  border-radius: var(--adm-radius);
  margin: 2px;
  font-size: 12px;
}

.variants-separator {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--adm-border-light);
}

/* ============================================================================
   FILE MANAGER — Document cards with type icons
   ============================================================================ */

/* File type icon area (replaces image preview in media cards) */
.file-type-icon {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--adm-border-light);
  transition: background var(--adm-transition);
}

.file-type-icon .file-emoji {
  font-size: 52px;
  line-height: 1;
}

.file-type-icon .file-ext-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* Type-specific tinted backgrounds */
.file-type-icon[data-type="pdf"] {
  background: linear-gradient(135deg, rgba(220, 100, 100, 0.06), rgba(220, 100, 100, 0.12));
}
.file-type-icon[data-type="pdf"] .file-ext-badge {
  background: rgba(220, 100, 100, 0.12);
  color: var(--adm-error-text);
}

.file-type-icon[data-type="doc"],
.file-type-icon[data-type="docx"] {
  background: linear-gradient(135deg, rgba(92, 122, 180, 0.06), rgba(92, 122, 180, 0.12));
}
.file-type-icon[data-type="doc"] .file-ext-badge,
.file-type-icon[data-type="docx"] .file-ext-badge {
  background: rgba(92, 122, 180, 0.12);
  color: var(--adm-info-text);
}

.file-type-icon[data-type="xls"],
.file-type-icon[data-type="xlsx"],
.file-type-icon[data-type="csv"] {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0.12));
}
.file-type-icon[data-type="xls"] .file-ext-badge,
.file-type-icon[data-type="xlsx"] .file-ext-badge,
.file-type-icon[data-type="csv"] .file-ext-badge {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
}

.file-type-icon[data-type="zip"],
.file-type-icon[data-type="rar"] {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.06), rgba(217, 119, 6, 0.12));
}
.file-type-icon[data-type="zip"] .file-ext-badge,
.file-type-icon[data-type="rar"] .file-ext-badge {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
}

.file-type-icon[data-type="txt"] {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.06), rgba(100, 116, 139, 0.10));
}
.file-type-icon[data-type="txt"] .file-ext-badge {
  background: rgba(100, 116, 139, 0.10);
  color: var(--adm-text-secondary);
}

/* File edit — preview panel (reuses .edit-container grid) */
.settings-section .edit-container {
  max-width: none;
}

.file-preview-panel {
  background: var(--adm-bg);
  padding: 24px;
  border-radius: var(--adm-radius-lg);
  border: 1px solid var(--adm-border-light);
}

.file-icon-large {
  width: 100%;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--adm-radius);
  margin-bottom: 16px;
}

.file-icon-large .file-emoji {
  font-size: 64px;
  line-height: 1;
}

.file-icon-large .file-ext-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 14px;
  border-radius: 20px;
  text-transform: uppercase;
}

.file-info {
  font-size: 13px;
  color: var(--adm-text-muted);
  line-height: 1.8;
}

.file-info strong {
  color: var(--adm-text-secondary);
}

/* File upload preview (non-image) */
.file-upload-preview {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  margin-bottom: 16px;
}

.file-upload-preview.visible { display: flex; }

.file-upload-preview .preview-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: var(--adm-radius-sm);
  border: 1px solid var(--adm-border-light);
  background: var(--adm-surface);
}

/* ============================================================================
   NEWSLETTER — Status badges & recipient counter
   ============================================================================ */

.newsletter-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}

.newsletter-status--draft {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
  border: 1px solid var(--adm-warning-border);
}

.newsletter-status--sending {
  background: var(--adm-info-bg);
  color: var(--adm-info-text);
  border: 1px solid var(--adm-info-border);
}

.newsletter-status--sent {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
  border: 1px solid var(--adm-success-border);
}

.newsletter-status--failed {
  background: var(--adm-error-bg);
  color: var(--adm-error-text);
  border: 1px solid var(--adm-error-border);
}

/* Recipient counter card */
.recipient-counter {
  text-align: center;
  padding: 20px;
  margin-top: 12px;
  background: var(--adm-primary-light);
  border-radius: var(--adm-radius);
  border: 1px solid var(--adm-border-light);
}

.recipient-counter-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.recipient-counter-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--adm-primary);
  line-height: 1.2;
}

.recipient-counter-label {
  font-size: 0.82rem;
  color: var(--adm-text-secondary);
  margin-top: 2px;
}

/* Checkbox group for newsletter audience */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--adm-radius);
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 0.15s;
}

.checkbox-label:hover {
  background: var(--adm-primary-subtle);
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--adm-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Badge for subscriber count per language */
.badge-muted {
  background: var(--adm-border-light);
  color: var(--adm-text-secondary);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
  margin-inline-start: auto;
}

/* Info box for sent status */
.info-box {
  background: var(--adm-success-bg);
  border: 1px solid var(--adm-success-border);
  border-radius: var(--adm-radius);
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--adm-success-text);
}

.info-box p {
  margin: 4px 0;
}

.info-box--danger {
  background: var(--adm-error-bg);
  border-color: var(--adm-error);
  color: var(--adm-error-text);
  margin-top: 16px;
}

.info-box--warning {
  background: var(--adm-warning-bg);
  border-color: var(--adm-warning);
  color: var(--adm-warning-text);
}

/* Language badge (small flag-like badge) */
.language-badge {
  display: inline-block;
  background: var(--adm-border-light);
  color: var(--adm-text-secondary);
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================================================
   NEWSLETTER — Recipient list & CSV import
   ============================================================================ */

.recipient-list-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.recipient-search {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  color: var(--adm-text);
  font-size: 0.85rem;
}

.recipient-search:focus {
  outline: none;
  border-color: var(--adm-primary);
  box-shadow: 0 0 0 3px var(--adm-primary-light);
}

.recipient-sort-btn {
  padding: 5px 10px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  color: var(--adm-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}

.recipient-sort-btn:hover,
.recipient-sort-btn.active {
  background: var(--adm-primary-light);
  color: var(--adm-primary);
  border-color: var(--adm-primary);
}

.recipient-table-wrap {
  max-height: 400px;
  overflow-y: auto;
  /* Long e-mail addresses made the 4-column table wider than a phone
     screen and stretched the whole newsletter page; scroll the table
     itself instead. No effect on desktop where the table fits. */
  overflow-x: auto;
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
}

.recipient-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.recipient-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.recipient-table thead th {
  background: var(--adm-bg);
  padding: 8px 12px;
  text-align: start;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--adm-text-secondary);
  border-bottom: 1px solid var(--adm-border);
}

.recipient-table tbody tr {
  transition: background 0.1s;
}

.recipient-table tbody tr:hover {
  background: var(--adm-primary-subtle);
}

.recipient-table tbody tr.excluded {
  opacity: 0.45;
  text-decoration: line-through;
}

.recipient-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--adm-border-light);
  vertical-align: middle;
}

.recipient-table tbody td:first-child {
  width: 32px;
  text-align: center;
}

.recipient-email {
  font-weight: 500;
  color: var(--adm-text);
  word-break: break-all;
}

.recipient-name {
  color: var(--adm-text-secondary);
  font-size: 0.8rem;
}

.recipient-source {
  font-size: 0.75rem;
  color: var(--adm-text-muted);
}

.badge-imported {
  background: var(--adm-info-bg);
  color: var(--adm-info-text);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-confirmed {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-pending {
  background: var(--adm-warning-bg);
  color: var(--adm-warning-text);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.recipient-list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--adm-text-secondary);
}

.csv-import-zone {
  border: 2px dashed var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.csv-import-zone:hover {
  border-color: var(--adm-primary);
  background: var(--adm-primary-subtle);
}

.csv-import-zone input[type="file"] {
  display: none;
}

/* ============================================================================
   FORMS MODULE — Cards, Grid, Template Picker, Form Editor
   ============================================================================ */

/* ── Form card grid (list.html) ── */
.form-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.form-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s;
}

.form-card:hover {
  box-shadow: var(--adm-shadow-md);
}

.form-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.form-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--adm-text);
  margin: 0;
}

.form-card__type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--adm-text-secondary);
  background: var(--adm-border-light);
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.form-card__desc {
  font-size: 0.85rem;
  color: var(--adm-text-secondary);
  line-height: 1.4;
}

.form-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--adm-text-secondary);
}

.form-card__stat strong {
  color: var(--adm-text);
}

.form-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--adm-border-light);
}

.badge-active {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
  border: 1px solid var(--adm-success-border);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-inactive {
  background: var(--adm-border-light);
  color: var(--adm-text-secondary);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-new-count {
  background: var(--adm-primary);
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-inline-start: 4px;
}

/* ── Template picker grid (new.html) ── */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.template-card {
  background: var(--adm-surface);
  border: 2px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.template-card:hover {
  border-color: var(--adm-primary);
  background: var(--adm-primary-subtle);
  transform: translateY(-2px);
  box-shadow: var(--adm-shadow-sm);
}

.template-card.is-selected {
  border-color: var(--adm-primary);
  background: var(--adm-primary-light);
  box-shadow: 0 0 0 3px var(--adm-primary-light);
}

.template-card__icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.template-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--adm-text);
  margin-bottom: 4px;
}

.template-card__desc {
  font-size: 0.78rem;
  color: var(--adm-text-secondary);
  line-height: 1.4;
}

/* ── Form editor grid (edit.html) ── */
.fe-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .fe-grid { grid-template-columns: 1fr; }
}

.fe-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.fe-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--adm-text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--adm-border-light);
}

.fe-field {
  margin-bottom: 14px;
}

.fe-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--adm-text-secondary);
  margin-bottom: 5px;
}

.fe-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 640px) {
  .fe-field-row { grid-template-columns: 1fr; }
}

/* Form field constructor */
.fe-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--adm-text-muted);
  font-size: 14px;
}

.fe-field-item {
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  background: var(--adm-bg);
  overflow: hidden;
  transition: border-color 0.2s;
}

.fe-field-item:hover {
  border-color: var(--adm-primary);
}

.fe-field-item.is-open {
  border-color: var(--adm-primary);
}

.fe-field-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  min-height: 42px;
}

.fe-field-drag {
  color: var(--adm-text-muted);
  cursor: grab;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.fe-field-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--adm-primary-light, rgba(99, 102, 241, 0.1));
  color: var(--adm-primary);
  flex-shrink: 0;
}

.fe-field-title {
  font-weight: 500;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-field-required-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--adm-error, #ef4444);
  flex-shrink: 0;
}

.fe-field-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.fe-field-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--adm-text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.fe-field-actions button:hover {
  background: var(--adm-hover);
  color: var(--adm-text);
}

.fe-field-actions .btn-del:hover {
  background: var(--adm-error-light, rgba(239, 68, 68, 0.1));
  color: var(--adm-error, #ef4444);
}

.fe-field-body {
  display: none;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--adm-border);
}

.fe-field-item.is-open .fe-field-body {
  display: block;
}

.fe-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--adm-text);
  cursor: pointer;
}
.fe-toggle--aligned { margin-top: 6px; }

.fe-toggle input[type="checkbox"] {
  accent-color: var(--adm-primary);
  width: 16px;
  height: 16px;
}

/* ── Field palette (add field buttons) ── */
.fe-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fe-palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  color: var(--adm-text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.fe-palette-btn:hover {
  border-color: var(--adm-primary);
  background: var(--adm-primary-subtle);
  color: var(--adm-primary);
}

.fe-palette-btn span {
  font-size: 1rem;
}

/* ── Source info block (translate.html) ── */
.source-field {
  background: var(--adm-bg);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.source-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--adm-text-muted);
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

.source-field__value {
  font-size: 0.85rem;
  color: var(--adm-text);
  line-height: 1.4;
}

/* Fix select background inside cards to use surface color */
.fe-card select,
.form-section select {
  background-color: var(--adm-surface);
  border: 1px solid var(--adm-input-border);
}

.fe-card select:focus,
.form-section select:focus {
  background-color: var(--adm-surface);
}

/* ============================================================================
   SUBMISSIONS — Status badges, detail view, metadata
   ============================================================================ */

/* Status badges in submissions table */
.sub-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.sub-status--new {
  background: var(--adm-primary-light);
  color: var(--adm-primary);
  border: 1px solid var(--adm-primary);
}

.sub-status--read {
  background: var(--adm-success-bg);
  color: var(--adm-success-text);
  border: 1px solid var(--adm-success-border);
}

.sub-status--archived {
  background: var(--adm-border-light);
  color: var(--adm-text-secondary);
  border: 1px solid var(--adm-border);
}

.sub-status--spam {
  background: var(--adm-error-bg);
  color: var(--adm-error-text);
  border: 1px solid var(--adm-error-border);
}

/* Submission detail rows */
.sd-row {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--adm-border-light);
  align-items: baseline;
}

.sd-row:last-child {
  border-bottom: none;
}

.sd-row__label {
  min-width: 140px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--adm-text-secondary);
  flex-shrink: 0;
}

.sd-row__value {
  font-size: 0.9rem;
  color: var(--adm-text);
  word-break: break-word;
  line-height: 1.5;
}

/* Submission metadata block */
.sd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  font-size: 0.85rem;
  color: var(--adm-text-secondary);
  align-items: center;
}

.sd-meta strong {
  color: var(--adm-text);
}

/* Inline status change form */
.sd-status-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sd-status-form select {
  width: auto;
  min-width: 120px;
  padding-block: 5px;
  padding-inline: 10px 28px;
  font-size: 0.82rem;
}


/* ============================================================================
   MENU BUILDER — Submenu / hierarchy support
   ============================================================================ */

/* Draggable item container */
.menu-item-row {
  display: flex;
  align-items: center;
  gap: var(--adm-space-2, 8px);
  padding: var(--adm-space-2, 8px) var(--adm-space-3, 12px);
  background: var(--adm-surface);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius);
  cursor: grab;
  transition: box-shadow 0.15s, background 0.15s;
}

.menu-item-row:active {
  cursor: grabbing;
}

.menu-item-row.is-dragging {
  box-shadow: var(--adm-shadow-md, 0 4px 12px rgba(0,0,0,.12));
  opacity: 0.8;
}

.menu-item-row__handle {
  color: var(--adm-text-muted);
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
}

.menu-item-row__label {
  font-size: 0.875rem;
  color: var(--adm-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.menu-item-row__lang {
  font-size: 0.75rem;
  color: var(--adm-text-muted);
  background: var(--adm-primary-subtle);
  padding: 2px 6px;
  border-radius: var(--adm-radius, 8px);
  flex-shrink: 0;
  font-family: var(--adm-font-mono, monospace);
}

.menu-item-row__actions {
  display: flex;
  align-items: center;
  gap: var(--adm-space-1, 4px);
  flex-shrink: 0;
}

/* Button to add a child (submenu) below this item */
.menu-item-row__add-child {
  background: none;
  border: 1px dashed var(--adm-border);
  color: var(--adm-text-secondary);
  border-radius: var(--adm-radius);
  padding: 2px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.menu-item-row__add-child:hover {
  border-color: var(--adm-primary);
  color: var(--adm-primary);
}

/* Remove button */
.menu-item-row__remove {
  background: none;
  border: none;
  color: var(--adm-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--adm-radius);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.menu-item-row__remove:hover {
  color: var(--adm-error, #c0535e);
  background: var(--adm-error-bg, #fdf2f3);
}

/* Submenu container indented under parent */
.menu-submenu {
  margin-inline-start: 28px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-inline-start: 2px solid var(--adm-border-light);
  padding-inline-start: 12px;
}

/* Mobile: the actions group (⤵ Child / ⤴ Parent / ✏️ / ✕) is wider than a
   phone screen and — being flex-shrink:0 — squeezed the flex:1 label to
   zero width (child items lost their titles entirely) while itself
   overflowing the row background. Wrap instead: label line first, actions
   on their own row below, everything inside the background. Submenu
   indentation is reduced so nested labels keep readable space.
   Desktop (>768px) keeps the original single-line layout. */
@media (max-width: 768px) {
  .menu-item-row { flex-wrap: wrap; }
  .menu-item-row__label { min-width: 0; }
  .menu-item-row__actions {
    flex-basis: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .menu-submenu {
    margin-inline-start: 12px;
    padding-inline-start: 8px;
  }
}

.menu-submenu .menu-item-row {
  background: var(--adm-bg);
}

/* Drop-zone hint (shown during drag) */
.menu-drop-zone {
  height: 32px;
  border: 2px dashed var(--adm-primary-light, #edf1f6);
  border-radius: var(--adm-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adm-text-muted);
  font-size: 0.75rem;
  transition: border-color 0.15s;
}

.menu-drop-zone.is-over {
  border-color: var(--adm-primary);
  background: var(--adm-primary-subtle);
}

/* ── Menu builder layout (vertical stacked) ── */
.menu-builder-layout {
  display: flex;
  flex-direction: column;
  gap: var(--adm-space-5, 20px);
  margin-top: var(--adm-space-4, 16px);
}

/* ── Builder panel (top block) ── */
.menu-builder {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius-lg, 12px);
  padding: var(--adm-space-4, 16px);
  width: 100%;
}
.menu-builder__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--adm-text);
  margin-bottom: 2px;
}
.menu-builder__note {
  font-size: 0.75rem;
  color: var(--adm-text-muted);
  margin-bottom: var(--adm-space-3, 12px);
}
.menu-builder__list {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}
.menu-builder__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  border: 2px dashed var(--adm-border-light);
  border-radius: var(--adm-radius);
  color: var(--adm-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--adm-space-3, 12px);
}
.menu-builder__footer {
  margin-top: var(--adm-space-4, 16px);
  border-top: 1px solid var(--adm-border-light);
  padding-top: var(--adm-space-3, 12px);
}
.menu-builder__submenu-note {
  font-size: 0.75rem;
  color: var(--adm-text-muted);
  margin-bottom: var(--adm-space-3, 12px);
  line-height: 1.45;
}

/* Nest-zone visual hint during drag */
.menu-item-row.nest-target {
  background: var(--adm-primary-subtle);
  border-color: var(--adm-primary);
  border-style: dashed;
}


/* ============================================================================
   DASHBOARD
   ============================================================================ */

/* ── Dashboard Layout ── */
.dash { max-width: 1200px; }

.dash-greeting {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px 16px;
    flex-wrap: wrap;
}
.dash-greeting h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--adm-text);
    margin: 0 0 4px;
}
.dash-greeting p {
    font-size: 13px;
    color: var(--adm-text-secondary);
    margin: 0;
}
/* Current CMS version — quiet chip in the top-right corner. Sits in normal
   flow (the dashboard deliberately has no sticky header bar), aligned to
   the same right edge as the header actions on other admin tabs. Theme
   colors come from the --adm-* variables, so it adapts to dark/light mode.
   Line-height matches the h2 cap height so the row height doesn't jump. */
.dash-version {
    flex-shrink: 0;
    align-self: flex-start;
    font-size: 12px;
    line-height: 20px;
    padding: 3px 10px;
    border: 1px solid var(--adm-border);
    border-radius: 999px;
    background: var(--adm-surface);
    color: var(--adm-text-secondary);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── Quick Actions ── */
.dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.dash-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--adm-primary);
    color: var(--adm-surface);
    text-decoration: none;
    border-radius: var(--adm-radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--adm-transition);
    border: none;
    cursor: pointer;
}
.dash-action:hover {
    background: var(--adm-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--adm-shadow-md);
}
.dash-action--outline {
    background: var(--adm-primary-light);
    color: var(--adm-primary);
    border: 1px solid var(--adm-border);
}
.dash-action--outline:hover {
    background: var(--adm-primary-subtle);
    border-color: var(--adm-primary);
}

/* ── Stat Cards ── */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.dash-stat {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border-light);
    border-radius: var(--adm-radius);
    padding: 18px 16px;
    transition: all var(--adm-transition);
    text-decoration: none;
    display: block;
}
.dash-stat:hover {
    border-color: var(--adm-primary);
    box-shadow: var(--adm-shadow-sm);
}
.dash-stat--highlight {
    border-color: var(--adm-primary);
}
.dash-stat__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--adm-text);
    line-height: 1;
    margin-bottom: 6px;
}
.dash-stat__label {
    font-size: 11px;
    color: var(--adm-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.dash-stat__icon {
    font-size: 16px;
    float: right;
    margin-top: -2px;
    opacity: 0.6;
}

/* ── Content Grid (two columns) ── */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

/* ── Section Cards ── */
.dash-section {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border-light);
    border-radius: var(--adm-radius);
    overflow: hidden;
}
.dash-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--adm-border-light);
}
.dash-section__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-section__link {
    font-size: 12px;
    color: var(--adm-primary);
    text-decoration: none;
    font-weight: 500;
}
.dash-section__link:hover { text-decoration: underline; }

/* ── List Items ── */
.dash-list { list-style: none; padding: 0; margin: 0; }

.dash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--adm-border-light);
    transition: background var(--adm-transition);
}
.dash-item:last-child { border-bottom: none; }
.dash-item:hover { background: rgba(0, 0, 0, 0.015); }

.dash-item__info { flex: 1; min-width: 0; }
.dash-item__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--adm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-item__meta {
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-top: 1px;
}

.dash-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

.dash-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.dash-badge--published { background: var(--adm-success-bg); color: var(--adm-success-text); }
.dash-badge--draft { background: var(--adm-warning-bg); color: var(--adm-warning-text); }

.dash-edit-link {
    font-size: 12px;
    color: var(--adm-primary);
    text-decoration: none;
    white-space: nowrap;
}
.dash-edit-link:hover { text-decoration: underline; }

/* ── Activity Feed ── */
.dash-activity { width: 100%; }

.dash-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--adm-border-light);
}
.dash-activity-item:last-child { border-bottom: none; }

.dash-activity__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--adm-primary);
    margin-top: 5px;
    flex-shrink: 0;
}
.dash-activity__dot--login { background: var(--adm-success); }
.dash-activity__dot--create { background: var(--adm-info); }
.dash-activity__dot--edit { background: var(--adm-warning); }
.dash-activity__dot--delete { background: var(--adm-error); }

.dash-activity__text {
    font-size: 12px;
    color: var(--adm-text);
    line-height: 1.4;
}
.dash-activity__time {
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-top: 1px;
}

/* ── Empty State ── */
.dash-empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--adm-text-muted);
    font-size: 13px;
}
.dash-empty a { color: var(--adm-primary); text-decoration: none; }
.dash-empty a:hover { text-decoration: underline; }

/* ── Update Banner ── */
.dash-update-banner {
    display: none;
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: var(--adm-radius);
    border: 1px solid var(--adm-success);
    background: var(--adm-success-bg);
    animation: msgFadeIn 0.3s ease;
}

.dash-update-banner.visible {
    display: block;
}

.dash-update-banner.is-success {
    border-color: var(--adm-success);
    background: var(--adm-success-bg);
}

.dash-update-banner__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-update-banner__title {
    font-weight: 500;
    font-size: 14px;
    color: var(--adm-text);
}

.dash-update-banner__version {
    font-size: 12px;
    color: var(--adm-text-secondary);
    margin-top: 2px;
}

.dash-update-banner__hint {
    font-size: 11px;
    color: var(--adm-text-muted);
    margin-top: 4px;
}

.dash-update-banner__changelog {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--adm-border-light);
    font-size: 12px;
    color: var(--adm-text-secondary);
    max-height: 80px;
    overflow-y: auto;
}

.dash-update-banner__changelog.visible {
    display: block;
}

/* ── Dashboard Responsive ── */
@media (max-width: 768px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dash-stats { grid-template-columns: 1fr; }
    /* Quick actions intentionally keep flex-row + wrap here: the previous
       `flex-direction: column` stretched each button to full width, which
       looked unlike every other button in the admin. */
}

/* ── Sidebar meta text (timestamps, translation info) ── */
.sidebar-meta {
    font-size: 13px;
    color: var(--adm-text-muted);
    margin-bottom: 8px;
}

.sidebar-separator {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--adm-border-light);
}

.btn-translate-create {
    background: var(--adm-primary-light);
    color: var(--adm-primary);
    border: 2px solid var(--adm-primary);
}

.badge-source {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    background: var(--adm-primary);
    color: var(--adm-primary-contrast, #fff);
    padding: 2px 8px;
    border-radius: 4px;
    margin-inline-start: 4px;
}

/* ── Page Builder promo card ── */
.builder-promo {
    padding: 12px;
    background: linear-gradient(135deg, var(--adm-primary-light) 0%, var(--adm-surface) 100%);
    border-radius: 8px;
    text-align: center;
}

.builder-promo__icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.builder-promo__title {
    font-size: 13px;
    color: var(--adm-text-secondary);
    font-weight: 600;
}

.builder-promo__hint {
    font-size: 12px;
    color: var(--adm-text-muted);
    margin-top: 4px;
}

.builder-readonly-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: var(--adm-info-bg);
    color: var(--adm-info-text);
    border: 1px solid var(--adm-info-border);
    border-radius: var(--adm-radius);
    font-size: 13px;
}

/* ── Image Picker Modal ── */
.image-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-picker-modal {
    background: var(--adm-surface);
    border-radius: 12px;
    padding: 24px;
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
    width: 90%;
}

.image-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.image-picker-header h2 {
    margin: 0;
}

.image-picker-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--adm-text);
}

.image-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.image-picker-item {
    cursor: pointer;
    border: 2px solid var(--adm-border-light);
    border-radius: 8px;
    overflow: hidden;
}

.image-picker-item:hover {
    border-color: var(--adm-primary);
}

.image-picker-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.image-picker-item__alt {
    padding: 8px;
    font-size: 12px;
    color: var(--adm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File name line under the alt text — same truncation behaviour,
   slightly smaller and monospace-ish so names read as file names. */
.image-picker-item__filename {
    padding: 0 8px 4px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--adm-text-muted);
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-picker-item__size {
    padding: 0 8px 8px;
    font-size: 11px;
    color: var(--adm-text-muted);
}

.image-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
}

.image-picker-empty a {
    color: var(--adm-primary);
}

.image-picker-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--adm-text-muted);
}

.image-picker-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--adm-error);
}

/* ── Slug validation states ── */
.slug-valid {
    color: var(--adm-success) !important;
}

.slug-error {
    color: var(--adm-error) !important;
}

.slug-input-valid {
    border-color: var(--adm-success) !important;
}

.slug-input-error {
    border-color: var(--adm-error) !important;
}

/* ── Image hint states ── */
.hint-success {
    color: var(--adm-success);
}

.hint-muted {
    color: var(--adm-text-muted);
}

/* ── FAQ Editor (AEO) ── */
.faq-editor-item {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--adm-border-light);
  border-radius: var(--adm-radius-sm);
  background: var(--adm-bg);
}

/* ─── Custom Links picker (Menus) ───────────────────────────────── */

/* Tight line-height on the two-line title/slug stack in Pages/Posts
   picker tables. Without this the block stretches the row to ~56px,
   while the Custom Links table (single inputs) only stretches to ~44px.
   Tightening the title/slug stack pulls the Pages/Posts row down so all
   three picker tables share the same vertical rhythm. */
.content-table .title-cell,
.content-table .slug-cell { line-height: 1.2; }

.custom-links__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.custom-links__target-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--adm-text-secondary);
  font-size: 0.92em;
  cursor: pointer;
  margin: 0;
}

/* Pencil-edit button on a custom-link menu item — quiet by default,
   gains visible affordance only on hover. Inherits theme variables so
   it works under both light and dark modes without hardcoded colors. */
.menu-item-row__edit {
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  opacity: 0.45;
  font-size: 0.85em;
  filter: grayscale(0.6);
  transition: opacity 0.15s, filter 0.15s;
}
.menu-item-row__edit:hover {
  opacity: 1;
  filter: none;
}

/* ── Menu builder: third tier (2.3.4) ─────────────────────────────────────
   Nested submenu container inside a submenu — one more indent step with the
   same guide-line language. Button visibility is driven by depth-aware JS
   via .is-hidden. Uses admin theme variables only (light/dark safe). */
.menu-submenu .menu-submenu {
  margin-inline-start: 24px;
  border-inline-start: 2px solid var(--adm-border-light);
}

.menu-submenu .menu-submenu .menu-item-row {
  background: var(--adm-bg-secondary, var(--adm-bg));
}

.menu-item-row__add-child.is-hidden {
  display: none;
}

/* Settings: brief flash when trying to deactivate the default language */
.language-item--locked-flash {
  outline: 2px solid var(--adm-primary, #818cf8);
  outline-offset: 2px;
  transition: outline-color 0.5s ease;
}


/* ── WebMCP: agent approval modal & autopilot badge ──
   Every color comes from the --adm-* tokens above, so the light and dark
   admin themes are both covered with zero hardcoded values. The overlay
   backdrop matches the image-picker convention (theme-neutral scrim). */
.wmcp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wmcp-modal {
    background: var(--adm-surface);
    color: var(--adm-text);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    padding: 24px;
    width: 90%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wmcp-modal h3 {
    margin: 0;
    font-size: 16px;
    color: var(--adm-text);
}

.wmcp-message {
    margin: 0;
    color: var(--adm-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wmcp-selectall {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
    color: var(--adm-text);
}

.wmcp-list {
    overflow-y: auto;
    max-height: 40vh;
    border: 1px solid var(--adm-border-light);
    border-radius: var(--adm-radius);
}

.wmcp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--adm-border-light);
    cursor: pointer;
    color: var(--adm-text);
}

.wmcp-item:last-child { border-bottom: none; }
.wmcp-item:hover { background: var(--adm-surface-alt); }
.wmcp-item span { overflow-wrap: anywhere; }

.wmcp-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wmcp-auto {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--adm-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.wmcp-auto select {
    /* background-color, not the shorthand — the shorthand out-specified
       the global arrow rule and this select had no arrow at all */
    background-color: var(--adm-surface);
    color: var(--adm-text);
    border: 1px solid var(--adm-input-border);
    border-radius: var(--adm-radius-sm);
    padding-block: 4px;
    padding-inline: 8px 32px;
    font-size: 13px;
}

.wmcp-autopilot-badge {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--adm-surface);
    color: var(--adm-text);
    border: 1px solid var(--adm-warning-border);
    border-left: 4px solid var(--adm-warning);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-md);
    padding: 10px 14px;
    font-size: 13px;
}

.wmcp-autopilot-badge button {
    background: none;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    color: var(--adm-text);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--adm-transition);
}

.wmcp-autopilot-badge button:hover { border-color: var(--adm-primary); }

/* ============================================================
   AdminDialog — shared themed alert/confirm/prompt (admin-dialog.js)
   ------------------------------------------------------------
   Replaces native browser dialogs across the whole admin. Same
   visual language as the editor's .ae-modal and the builder's
   .pb-dialog, built on the live --adm-* tokens + admin .btn
   classes, so light and dark themes both "just work".
   z-index above the image picker overlay and .ae-fullscreen. */
.adm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    padding: 1rem;
}
.adm-modal {
    width: 100%;
    max-width: 440px;
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: var(--adm-radius, 8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    padding: 1rem 1.25rem 1.25rem;
}
.adm-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.adm-modal-head h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--adm-text, #1e293b);
}
.adm-modal-head h3:empty { margin: 0; }
.adm-modal-x {
    border: none;
    background: transparent;
    color: var(--adm-text-muted, #636b78);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .3rem;
    border-radius: 4px;
    flex-shrink: 0;
}
.adm-modal-x:hover {
    background: var(--adm-surface-alt, #f1f5f9);
    color: var(--adm-text, #1e293b);
}
.adm-modal-message {
    font-size: .92rem;
    color: var(--adm-text-muted, #636b78);
    margin-bottom: .5rem;
    white-space: pre-line;      /* multi-line confirms keep their \n breaks */
    overflow-wrap: break-word;
}
.adm-modal-field { margin: .35rem 0 .75rem; }
.adm-modal-field label {
    display: block;
    font-size: .85rem;
    color: var(--adm-text-muted, #636b78);
    margin-bottom: .3rem;
}
.adm-modal-field input {
    width: 100%;
    font: inherit;
    padding: .45rem .65rem;
    background: var(--adm-surface, #fff);
    color: var(--adm-text, #1e293b);
    border: 1px solid var(--adm-input-border, var(--adm-border, #cbd5e1));
    border-radius: var(--adm-radius-sm, 4px);
}
.adm-modal-field input:focus {
    outline: none;
    border-color: var(--adm-primary, #4e6b8c);
    box-shadow: 0 0 0 3px var(--adm-primary-subtle, rgba(78, 107, 140, .18));
}
/* Checkbox rows: inline label, native-size box (the 100%-width rule above
   is for text inputs only) */
.adm-modal-field--checkbox label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--adm-text, #1e293b);
    font-size: .9rem;
    margin-bottom: 0;
    cursor: pointer;
}
.adm-modal-field--checkbox input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    accent-color: var(--adm-primary, #4e6b8c);
    cursor: pointer;
}
.adm-modal-field--checkbox { margin: .35rem 0 .45rem; }
.adm-modal-field__hint {
    display: block;
    font-size: .78rem;
    color: var(--adm-text-muted, #636b78);
    margin: .15rem 0 0 1.6rem;
}
/* Group label between fields (not an input) */
.adm-modal-field--note {
    font-size: .78rem;
    color: var(--adm-text-muted, #636b78);
    margin: .1rem 0 .5rem;
}
.adm-modal-field--heading {
    font-size: .8rem;
    font-weight: 600;
    color: var(--adm-text-muted, #636b78);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: .9rem 0 .35rem;
    padding-top: .6rem;
    border-top: 1px solid var(--adm-border-light, var(--adm-border, #e2e8f0));
}
.adm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}


/* ── One-line sticky header standard (owner's unification pass) ──
   The fixed bar keeps ONE height everywhere: it is set by the header
   button (posts-list is the reference), so pages without a real
   header action carry an invisible button-classed spacer — the
   metrics come from .btn itself, nothing hardcoded. Page subtitles
   live BELOW the fixed zone in .page-help: on mobile a wrapped
   subtitle must never grow the sticky area. */
.header-spacer {
  visibility: hidden;
  pointer-events: none;
}

.page-help {
  color: var(--adm-text-secondary);
  font-size: 14px;
  margin: 0 0 20px;
}