/* ============================================================================================
   DESIGN TOKENS — single source of truth for the whole app set (portal + all integrations).
   Pixel-exact: every token holds the value the app already uses, so this layer is a pure
   refactor (no visual change). Two tiers:
     1. Raw palette primitives (--c-*): the actual color values, grouped by hue/ramp.
     2. Semantic aliases (--color-*): role-based names that components reference.
   Legacy names (--bg, --panel, --primary, --line, --radius, --shadow, …) are kept as aliases
   so existing rules keep working. To re-theme: change the primitives (and optionally remap the
   semantic aliases); components need no edits.
   ============================================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Neutral ramp (fehér alap) --- */
  --c-neutral-0:   #ffffff;
  --c-neutral-50:  #f7f7f7;
  --c-neutral-100: #f0f0f0;
  --c-neutral-150: #ebebeb;
  --c-neutral-200: #e4e4e4;
  --c-neutral-250: #f7f7f7;
  --c-neutral-300: #e4e4e4;
  --c-neutral-350: #e4e4e4;
  --c-neutral-400: #d8d8d8;
  --c-neutral-450: #f0f0f0;
  --c-neutral-500: #d8d8d8;
  --c-neutral-550: #d8d8d8;
  --c-neutral-600: #c8c8c8;
  --c-neutral-650: #a8a8a8;

  /* --- Ink ramp (semleges, nem meleg) --- */
  --c-ink-400: #9A9A93;
  --c-ink-500: #6b6b6b;
  --c-ink-600: #444444;
  --c-ink-700: #333333;
  --c-ink-750: #333333;
  --c-ink-800: #555555;
  --c-ink-850: #333333;
  --c-ink-900: #222222;

  /* --- Brand: navy --- */
  --c-navy:       #102A3D;
  --c-navy-hover: #0d2233;

  /* --- Brand: green --- */
  --c-green-50:  #EDF5E2;
  --c-green-500: #7FB83D;
  --c-green-600: #5E9E2E;
  --c-green-700: #4a7d22;

  /* --- Amber (warning) --- */
  --c-amber-400: #c8870c;
  --c-amber-600: #9a6606;
  --c-amber-700: #9a6606;

  /* --- Red (danger) --- */
  --c-red-50:  #fdecec;
  --c-red-100: #f7d7d7;
  --c-red-500: #d24545;
  --c-red-600: #b83838;
  --c-red-700: #962d2d;

  /* --- Translucent --- */
  --c-overlay-strong: rgba(16, 42, 61, 0.50);
  --c-overlay-soft:   rgba(16, 42, 61, 0.40);
  --c-white-94: rgba(255, 255, 255, 0.94);
  --c-white-78: rgba(255, 255, 255, 0.78);
  --c-white-72: rgba(255, 255, 255, 0.72);
  --c-focus-ring: rgba(127, 184, 61, 0.30);
  --c-green-tint: rgba(127, 184, 61, 0.15);
  --c-amber-tint: rgba(200, 135, 12, 0.18);
  --c-red-tint:   rgba(210, 69, 69, 0.16);
  --c-shadow:     rgba(16, 42, 61, 0.12);

  /* --- Semantic aliases --- */
  --color-bg:               var(--c-neutral-250);
  --color-surface:          var(--c-neutral-0);
  --color-surface-subtle:   var(--c-neutral-100);
  --color-surface-subtle-2: var(--c-neutral-50);
  --color-surface-raised:   var(--c-neutral-150);
  --color-surface-inset:    var(--c-neutral-200);
  --color-surface-alt:      var(--c-neutral-300);
  --color-surface-muted:    var(--c-neutral-350);
  --color-surface-hover:    var(--c-neutral-400);
  --color-surface-sidebar:  var(--c-navy);
  --color-border:           var(--c-neutral-550);
  --color-border-strong:    var(--c-neutral-650);
  --color-text:             var(--c-ink-800);
  --color-text-row:         var(--c-ink-700);
  --color-text-strong:      var(--c-ink-600);
  --color-text-subtle:      var(--c-ink-500);
  --color-text-muted:       var(--c-ink-400);
  --color-primary:          var(--c-green-600);
  --color-primary-hover:    var(--c-green-700);
  --color-primary-soft:     var(--c-green-50);
  --color-danger:           var(--c-red-600);
  --color-danger-hover:     var(--c-red-700);
  --color-danger-soft:      var(--c-red-50);
  --color-warning:          var(--c-amber-400);
  --color-focus:            var(--c-green-500);
  --color-on-primary:       var(--c-neutral-0);
  --color-overlay:          var(--c-overlay-strong);

  /* --- Navy: direkt hivatkozáshoz --- */
  --navy: var(--c-navy);
  --navy-hover: var(--c-navy-hover);
  --green: var(--c-green-500);
  --green-strong: var(--c-green-600);
  --green-soft-bg: var(--c-green-50);
  --green-soft-text: #3F6B16;

  /* --- Legacy aliases (megtartva, komponensek ezekre hivatkoznak) --- */
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --panel-muted: var(--color-surface-muted);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-soft: var(--color-primary-soft);
  --error: var(--color-danger);
  --error-soft: var(--color-danger-soft);
  --focus: var(--color-focus);
  --ink: var(--c-ink-750);

  /* --- Tipográfia --- */
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 26px;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    700;
  --leading-tight: 1.35;
  --leading-normal: 1.5;

  /* --- Spacing (változatlan) --- */
  --space-1: 2px;   --space-2: 4px;   --space-3: 6px;
  --space-4: 8px;   --space-5: 10px;  --space-6: 12px;
  --space-7: 14px;  --space-8: 16px;  --space-9: 18px;
  --space-10: 20px; --space-12: 24px; --space-14: 28px;
  --space-16: 32px;

  /* --- Radius (változatlan) --- */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-md: 0 4px 24px var(--c-shadow);
  --shadow: var(--shadow-md);

  /* --- Motion (változatlan) --- */
  --transition-fast: 160ms ease;

  /* --- Layout (változatlan) --- */
  --sidebar-width: 310px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.is-hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shop-select-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 40px 24px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.shop-select-screen::before {
  content: '';
  position: absolute;
  right: -160px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 56px solid rgba(127, 184, 61, 0.07);
  pointer-events: none;
}

.shop-select-screen::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute;
  right: -160px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 56px solid rgba(127, 184, 61, 0.07);
  pointer-events: none;
}

.login-screen::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.shop-select-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  box-shadow: 0 8px 48px rgba(16, 42, 61, 0.28);
}

.shop-select-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.login-panel {
  width: min(100%, 420px);
  padding: 36px 36px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 48px rgba(16, 42, 61, 0.28);
  position: relative;
  z-index: 1;
}

.login-panel h1 {
  margin: 28px 0 20px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.login-brand-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.3px;
}

.login-brand-name span {
  color: var(--green);
}

.login-brand-sub {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--text);
}

.brand-logo {
  display: block;
  width: 150px;
  height: auto;
}

.brand-product {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--color-text-strong);
  font-weight: var(--weight-heavy);
  white-space: nowrap;
}

.sidebar-brand {
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-brand .brand-logo {
  width: 180px;
}

.sidebar-brand .brand-product {
  padding-left: 0;
  border-left: 0;
}

/* The app name under the sidebar logo is redundant (the shop/app is shown in the header). */
#app-brand-product {
  display: none;
}

.shop-select-header {
  margin-bottom: 24px;
}

.shop-select-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin: 0 0 6px;
}

.shop-select-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Kilépés — ghost, navy háttéren fehér, panel felett */
.shop-logout-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}

.shop-logout-btn:hover { color: #fff; }

/* Vissza gomb — másodlagos, panel bal felső */
.shop-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.shop-back-btn:hover { background: var(--color-surface-subtle); }

/* Kártyák */
.shop-select-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.select-shop-card {
  background: var(--color-surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

/* Admin kártya — navy */
.select-shop-card.is-admin {
  background: var(--navy);
  border-color: var(--navy);
}

/* Monogram háttér-elem */
.select-shop-card .card-monogram {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 72px;
  font-weight: var(--weight-bold);
  color: rgba(16, 42, 61, 0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.select-shop-card.is-admin .card-monogram {
  color: rgba(255, 255, 255, 0.06);
}

/* Kártya ikon */
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(16, 42, 61, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--navy);
}

.select-shop-card.is-admin .card-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--green);
}

/* App kártya — vertikális layout */
.select-shop-card.is-app {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.select-shop-card.is-app .card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.select-shop-card.is-app .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--green);
  font-size: 22px;
  flex-shrink: 0;
}

/* Kártya tartalom */
.card-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin-bottom: 5px;
}

.select-shop-card.is-admin .card-name { color: #fff; }

.card-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.card-badge-type {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
  background: rgba(16, 42, 61, 0.10);
  color: var(--navy);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.select-shop-card.is-admin .card-badge-type {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.card-badge-active {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: var(--green-soft-bg);
  color: var(--green-soft-text);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.card-badge-admin {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: rgba(127, 184, 61, 0.25);
  color: var(--green);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.card-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.6;
}

.select-shop-card.is-admin .card-meta { color: rgba(255, 255, 255, 0.5); }

/* CTA gomb a kártyán */
.select-shop-button {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.select-shop-button:hover { background: var(--primary-hover); }

.select-shop-button:disabled {
  background: var(--color-border-strong);
  cursor: not-allowed;
}

/* App kártya gombja — teljes szélesség */
.select-shop-card.is-app .select-shop-button {
  width: 100%;
}

/* Háttér ikon app kártyákon */
.card-bg-icon {
  position: absolute;
  right: -4px;
  bottom: -8px;
  font-size: 64px;
  color: rgba(16, 42, 61, 0.05);
  pointer-events: none;
}

.login-form {
  display: grid;
  gap: var(--space-8);
}

.field-group {
  display: grid;
  gap: 7px;
}

.field-group label {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-weight: 650;
}

.field-group input,
.composer textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--text);
}

.field-group input {
  height: 44px;
  padding: 0 12px;
}

.password-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
}

.ghost-button,
.primary-button,
.sync-action-button {
  min-height: 40px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: var(--weight-bold);
}

.primary-button,
.sync-action-button {
  background: var(--primary);
  color: var(--color-on-primary);
}

.primary-button:hover,
.sync-action-button:hover {
  background: var(--primary-hover);
}

.primary-button:disabled,
.sync-action-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sync-cancel-button {
  margin-top: 8px;
  background: var(--color-danger);
}

.sync-cancel-button:hover {
  background: var(--color-danger-hover);
}

.ghost-button {
  background: var(--color-surface);
  border-color: var(--line);
  color: var(--color-text-strong);
}

.ghost-button:hover {
  background: var(--panel-muted);
}

.password-toggle {
  min-width: 78px;
}

.form-error,
.sync-message {
  min-height: 20px;
  margin: 0;
  color: var(--error);
  font-size: var(--text-base);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ── APP SHELL ───────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── HEADER ──────────────────────────────────────────────── */
.app-header {
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header-brand {
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: #fff;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-decoration: none;
}

.app-header-brand span { color: var(--green); }

.app-header-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.app-header-ctx {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.app-header-ctx strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--weight-medium);
}

.app-header-spacer { flex: 1; }

.app-header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.80);
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.btn-nav:hover { background: rgba(255, 255, 255, 0.14); }

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.btn-logout:hover { color: rgba(255, 255, 255, 0.75); }

/* ── BODY (sidebar + content) ────────────────────────────── */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 52px);
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-sync {
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-sync-btn {
  width: 100%;
  background: var(--primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background var(--transition-fast);
}

.sidebar-sync-btn:hover { background: var(--primary-hover); }

.sidebar-sync-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sidebar-sync-cancel {
  background: var(--color-danger);
}

.sidebar-sync-cancel:hover { background: var(--color-danger-hover); }

.sidebar-sync-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.30);
  padding: 4px 14px 10px;
}

/* Last sync older than 2 days: flag it in red as a gentle "data may be stale" hint. */
.sidebar-sync-meta.is-stale {
  color: var(--c-red-500);
  font-weight: var(--weight-semibold);
}

/* Sync progress (kept; recoloured for the navy sidebar) */
.sync-progress {
  display: grid;
  gap: var(--space-5);
}

.sync-progress-bar {
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

.sync-progress-fill {
  display: block;
  /* Width is data, not style: JS sets the --sync-progress custom property (0%–100%). */
  width: var(--sync-progress, 0%);
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  transition: width 180ms ease;
}

.sync-progress-steps {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sync-progress-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
}

.sync-progress-step strong {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-xs);
}

.sync-step-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sync-step-detail {
  min-height: 15px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.40);
  font-size: var(--text-2xs);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-step-dot {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
}

.sync-progress-step.is-running .sync-step-dot {
  background: var(--color-warning);
}

.sync-progress-step.is-running strong {
  color: var(--c-amber-400);
}

.sync-progress-step.is-done .sync-step-dot {
  background: var(--primary);
}

.sync-progress-step.is-done strong {
  color: var(--green);
}

.sync-progress-step.is-failed .sync-step-dot {
  background: var(--c-red-500);
}

.sync-progress-step.is-failed strong {
  color: var(--c-red-500);
}

.sync-message {
  color: var(--c-red-500);
}

.sync-message:empty {
  display: none;
}

/* ── SIDEBAR MENU ────────────────────────────────────────── */
.sidebar-menu {
  flex: 1;
  padding: 6px 0 16px;
}

.sidebar-menu:empty { display: none; }

/* The collapsible wrapper is kept (the existing toggle handler drives `.is-open`),
   but visually it reads as a flat group of headers + items per the new design. */
.menu-section {
  display: block;
}

.menu-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 4px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  width: 100%;
  font-family: var(--font-sans);
  text-align: left;
}

.menu-group-header:hover { color: rgba(255, 255, 255, 0.55); }

.menu-group-chevron {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.20);
  transition: transform var(--transition-fast);
}

.menu-section.is-open .menu-group-chevron {
  transform: rotate(180deg);
}

.menu-section:not(.is-open) .menu-section-content {
  display: none;
}

.menu-list {
  display: block;
}

.menu-item {
  display: block;
  width: 100%;
  padding: 7px 14px 7px 22px;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.menu-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.menu-item.is-active {
  color: #fff;
  font-weight: var(--weight-semibold);
  border-left-color: var(--green);
  background: rgba(127, 184, 61, 0.10);
}

.empty-list {
  color: var(--muted);
  font-size: var(--text-base);
}

.recent-section {
  min-height: 0;
}

/* ── CONTENT ─────────────────────────────────────────────── */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
}

.content-page-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 13px 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.content-page-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.client-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Shop strip (UNAS resource JSON links) — now lives in the content page header. */
.shop-strip {
  min-width: 0;
}

.shop-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.shop-card-title {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 750;
}

.shop-card-meta,
.shop-card-counts {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.shop-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.app-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.json-link {
  min-height: 30px;
  border: 1px solid var(--line);
  padding: 0 9px;
  background: var(--color-surface);
  color: var(--primary);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
}

.json-link:hover {
  background: var(--primary-soft);
}

.json-link:disabled {
  cursor: default;
  color: var(--muted);
  background: var(--panel-muted);
}

.count-separator {
  color: var(--line-strong);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 0 8px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
}

.status-pill.is-muted {
  background: var(--panel-muted);
  color: var(--muted);
}

.content-region {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 26px;
}

.empty-state {
  width: min(100%, 640px);
  margin: 16vh auto 0;
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 10px;
  font-size: var(--text-3xl);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

.message {
  display: grid;
  gap: 7px;
  width: min(100%, 760px);
  margin: 0 auto 18px;
}

.message-role {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 750;
}

.message-bubble {
  padding: 13px 15px;
  border-radius: var(--radius);
  line-height: 1.55;
  white-space: pre-wrap;
}

.message.user .message-bubble {
  margin-left: auto;
  background: var(--primary);
  color: var(--color-on-primary);
}

.message.assistant .message-bubble {
  background: var(--color-surface-alt);
  color: var(--text);
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  padding: 16px 26px 22px;
  border-top: 1px solid var(--line);
  background: var(--c-white-94);
}

.composer textarea {
  min-height: 48px;
  max-height: 180px;
  resize: none;
  padding: 13px 14px;
  line-height: 1.45;
}

.send-button {
  align-self: end;
  min-width: 92px;
  height: 48px;
}

.selected-shop-card {
  width: 100%;
}

.json-viewer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--c-overlay-soft);
}

.json-viewer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 980px);
  max-height: min(86vh, 780px);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.json-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.json-viewer-header h2 {
  margin: 3px 0 0;
  font-size: var(--text-2xl);
}

.json-viewer-content {
  min-height: 360px;
  max-height: 680px;
  overflow: auto;
  margin: 0;
  padding: 18px 20px;
  background: var(--color-surface);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.45;
}

.json-viewer-content.is-code {
  background: var(--c-ink-850);
  color: var(--c-neutral-150);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
}

.data-table-wrapper,
.orders-table-wrapper {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.data-table,
.orders-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.data-table th,
.data-table td,
.orders-table th,
.orders-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th,
.orders-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-raised);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: 850;
  text-transform: uppercase;
}

.data-table td,
.orders-table td {
  color: var(--color-text-row);
  font-size: var(--text-sm);
}

.data-table tbody tr:last-child td,
.orders-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- UNAS predefined reports: chat-like wizard + sortable result table ---------------- */

.report-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  /* No max-width here: the chat panel keeps its own narrow column (see .report-chat),
     but the result table is free to span the full content area. */
}

.report-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 880px;
}

.report-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: 1.45;
  margin: 0;
}

.report-msg.is-bot {
  align-self: flex-start;
  background: var(--panel-muted);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.report-msg.is-user {
  align-self: flex-end;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: var(--weight-semibold);
  border-bottom-right-radius: 4px;
}

.report-control {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 100%;
  max-width: 420px;
}

.report-input {
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--color-surface);
}

.report-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.report-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-base);
  color: var(--text);
}

.report-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.report-preset-chip {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
}

.report-preset-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.report-preset-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-on-primary);
}

.report-custom-range {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.report-error {
  color: var(--error);
  font-size: var(--text-sm);
  min-height: 0;
}

.report-error:empty {
  display: none;
}

.report-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.report-summary {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

/* Generic sortable header (still used by the Mini-PIM .data-table). */
th.report-sortable {
  cursor: pointer;
  user-select: none;
}

th.report-sortable:hover {
  background: var(--color-surface-hover);
}

th.report-sortable.is-sorted {
  color: var(--primary);
}

.report-result {
  /* Allow the result section to span the full content width, regardless of any parent
     wizard / chat column. */
  width: 100%;
  min-width: 0;
}

/* ---- Report parameter bar (compact chips; replaces the old chat-style wizard) --------- */
.report-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
}

.report-loading,
.report-error {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.report-error { color: var(--c-red-500); }

.report-params {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.param-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.param-label {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 68px;
}

.param-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.param-option {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.param-option:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.param-option.is-selected {
  background: var(--primary);
  color: var(--color-on-primary);
  border-color: var(--primary);
}

.param-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.param-dash { color: var(--muted); }

.param-input {
  min-height: 30px;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.param-input:focus {
  outline: none;
  border-color: var(--primary);
}

.report-params-meta {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

/* ---- Report result table — navy header, sortable, striped (design mockup) ------------- */
/* Scoped to `.report-table` (the report result table carries its own class, NOT the shared
   `.data-table`), so admin / Mini-PIM / SQL-summary tables are unaffected. */

.report-table-wrap {
  width: 100%;
  overflow: auto;
}

.report-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0 9px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 10;
}

.report-table-meta {
  font-size: var(--text-xs);
  color: var(--muted);
}

.btn-csv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 11px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-csv:hover { background: var(--color-surface-subtle); }

.report-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.report-table thead tr { background: var(--navy); }

.report-table thead th {
  padding: 9px 13px;
  text-align: left;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  /* Header may wrap onto multiple lines so a long label doesn't dictate column width —
     the table fills the available width and only scrolls horizontally as a last resort. */
  white-space: normal;
  line-height: 1.2;
  vertical-align: bottom;
  cursor: pointer;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.report-table thead th:last-child { border-right: none; }

.report-table thead th:hover { background: var(--navy-hover); }

.report-table .th-inner {
  display: flex;
  align-items: center;
  gap: 5px;
}

.report-table .th-sort {
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0.30;
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
}

.report-table .th-sort.is-asc,
.report-table .th-sort.is-desc { opacity: 1; color: var(--green); }

.report-table tbody tr:nth-child(odd)  { background: var(--panel); }
.report-table tbody tr:nth-child(even) { background: var(--color-surface-subtle); }
.report-table tbody tr:hover { background: var(--primary-soft); }

.report-table tbody td {
  padding: 8px 13px;
  color: var(--color-text-row);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.report-table tbody td:last-child { border-right: none; }

.report-table tbody td:first-child {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* Numeric / money / date cells stay on a single line — never break "5 386 484 Ft". */
.report-table td.cell-money,
.report-table td.cell-number,
.report-table td.cell-date {
  white-space: nowrap;
}

@media (max-width: 960px) {
  :root {
    --sidebar-width: 260px;
  }

  .shop-select-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-body {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .app-sidebar {
    width: 100%;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .app-content {
    overflow: visible;
  }

  .content-page-header {
    flex-wrap: wrap;
  }

  .content-region,
  .composer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .composer {
    grid-template-columns: 1fr;
  }

  .send-button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .login-panel {
    padding: 24px;
  }

  .password-control {
    grid-template-columns: 1fr;
  }

  .brand-mark {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-product {
    padding-left: 0;
    border-left: 0;
  }
}

/* ===== SocialMedia: prompt-schema editor (admin.schema_edit) ===== */

.ps-editor {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
  width: 100%;
}

.ps-list-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 12px;
}

.ps-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ps-pane-head h3 {
  margin: 0;
  font-size: var(--text-md);
}

/* Category filter above the schema list (prompt_categories-driven tabs). */
.ps-list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: 10px;
}

/* Required category select at the top of the schema editor body. */
.ps-category-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.ps-category-row select {
  max-width: 220px;
}

.ps-list-item .ps-list-btn .badge {
  margin-left: var(--space-2);
}

.ps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ps-list-item .ps-list-btn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.ps-list-item .ps-list-btn:hover {
  background: var(--primary-soft);
}

.ps-list-item.is-active .ps-list-btn {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--weight-bold);
}

.ps-list-empty,
.ps-hint,
.ps-empty {
  color: var(--muted);
  font-size: var(--text-sm);
}

.ps-edit-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 14px;
  min-width: 0;
}

.ps-edit-head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ps-current {
  font-weight: 750;
}

.ps-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.ps-status {
  min-height: 18px;
  margin: 4px 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.ps-status.is-error {
  color: var(--color-danger);
}

.ps-edit-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

/* A séma egész szerkesztője egy függőleges folyam: mező-kártyák → "+ hozzáadás" → előnézet. */
.ps-edit-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ps-tree {
  min-width: 0;
}

/* Mező = összecsukható kártya (a közös .card primitívre épül). */
.ps-card .card-head {
  flex-wrap: wrap;
}

.ps-card-title {
  flex: 1 1 200px;
  min-width: 140px;
  font-weight: var(--weight-medium);
}

.ps-type-select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 6px 8px;
  cursor: pointer;
}

/* A fel/le nyilak a drag-fogantyú melletti fallback — kompakt, halvány. */
.ps-move {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.ps-move-btn {
  width: 26px;
  height: 18px;
  color: var(--muted);
}

.ps-move-btn .icon-svg {
  width: 12px;
  height: 12px;
}

/* A technikai `name` háttérben: halvány azonosító-sor, igény esetén szerkeszthető. */
.ps-id-line {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 8px;
}

.ps-id-line code {
  font-family: var(--font-mono);
  color: var(--color-text-strong);
}

.ps-id-edit {
  border: none;
  background: transparent;
  color: var(--color-focus);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  padding: 0;
}

.ps-field-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ps-field-help {
  font-size: var(--text-xs);
  color: var(--muted);
}

.ps-children {
  margin: 10px 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.ps-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Értékkészlet: fejléces, párba rendezett opciósorok (megjelenő szöveg / érték a promptba). */
.ps-option {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: var(--space-4);
  align-items: center;
}

.ps-option-head {
  padding: 0 2px;
}

.ps-add-sub,
.ps-add-opt {
  margin-top: 10px;
}

.ps-add-opt {
  width: auto;
}

/* Előnézet: alapból olvasható Prompt-előnézet; a nyers JSON diszkrét kapcsoló mögött. */
.ps-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 12px 14px;
}

.ps-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 10px;
}

.ps-preview-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.ps-preview-tabs {
  display: flex;
  gap: var(--space-3);
}

.ps-preview-prompt {
  font-size: var(--text-base);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ps-pv-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ps-pv-label {
  color: var(--muted);
}

.ps-pv-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.ps-preview-json {
  margin: 0;
  max-height: 50vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-row);
  white-space: pre-wrap;
  word-break: break-word;
}

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

/* Általános gomb-variánsok — a SocialMedia image editor (és bárki) használja. */
.ps-btn {
  border: 1px solid var(--line);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  color: inherit;
}

.ps-btn:hover {
  background: var(--primary-soft);
}

.ps-btn.ps-mini {
  padding: 3px 7px;
  font-size: var(--text-xs);
}

.ps-btn.ps-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-on-primary);
}

.ps-btn.ps-primary:hover {
  filter: brightness(0.96);
}

.ps-btn.ps-danger {
  color: var(--color-danger);
}

.ps-btn.ps-danger:hover {
  background: var(--c-red-100);
}

/* ===== SocialMedia: image editor (creative.image_editor) ===== */

.img-editor {
  width: 100%;
}

.img-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.img-tab {
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 9px 14px;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
}

.img-tab:hover {
  background: var(--primary-soft);
}

.img-tab.is-active {
  background: var(--color-surface);
  border-color: var(--line);
  color: var(--primary);
  font-weight: var(--weight-bold);
}

/* === Prompt Garden ====================================================================== */
/* A lista + szerkesztő nézet apró elrendezés-segédei; minden más a közös primitívekből jön
   (.data-table, .img-field, .img-tabs, .ps-btn, .empty-state). */

.garden-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.garden-toolbar .img-tabs {
  margin-bottom: 0;
}

.garden-editor {
  max-width: 720px;
}

/* Name cell rendered as an inline link-style button (no native button chrome). */
.garden-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--primary);
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-align: left;
}

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

.garden-actions {
  white-space: nowrap;
}

.garden-actions .ps-btn {
  margin-right: var(--space-2);
}

.garden-missing {
  color: var(--color-danger);
  font-size: var(--text-xs);
}

/* === Kép-készítő v2 + Archívum ========================================================== */
/* Prompt-mód választó (galéria / szabad szöveg), inline mentési panel, archívum-lightbox.
   A többi a meglévő img-* / data-table / empty-state primitívekből jön. */

.img-mode {
  display: flex;
  gap: var(--space-9);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}

.img-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--color-text-strong);
}

.img-save-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7);
  margin-top: var(--space-6);
  background: var(--color-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  padding: var(--space-9);
}

.img-lightbox-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.img-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--line);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}

.img-lightbox-panel img {
  max-width: 86vw;
  max-height: 78vh;
  object-fit: contain;
}

.img-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: 760px;
}

.img-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 650;
}

.img-textarea {
  resize: vertical;
  min-height: 84px;
  font-weight: var(--weight-regular);
}

/* Tall multiline boxes on Tab 1: free-text prompt + generated-prompt preview (>= ~15 rows). */
.img-textarea-tall {
  min-height: 320px;
  line-height: 1.45;
}

.img-textarea-tall[readonly] {
  background: var(--color-surface-inset);
  color: var(--ink);
}

.img-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-subtle-2);
}

/* A "none"-type schema field: fixed prompt text, shown as a marker (no input). */
.img-fixed {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
}

/* A "text"/"multiline" schema field: predefined value shown read-only as "label: value". */
.img-fixed-pair {
  flex-wrap: wrap;
}

.img-fixed-key {
  font-weight: 650;
}

.img-fixed-val {
  font-weight: var(--weight-regular);
  white-space: pre-wrap;
}

.img-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.img-group > legend {
  padding: 0 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--primary);
  text-transform: uppercase;
}

.img-req {
  color: var(--color-danger);
}

.img-buttons {
  display: flex;
  gap: var(--space-4);
}

.img-result {
  position: relative;
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
}

.img-placeholder {
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

.img-output {
  max-width: 100%;
  max-height: 460px;
  border-radius: var(--radius);
}

.img-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 6px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.img-progress span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  animation: img-indeterminate 1.1s infinite ease-in-out;
}

@keyframes img-indeterminate {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.img-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

.img-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.img-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 650;
}

@media (max-width: 900px) {
  .img-split {
    grid-template-columns: 1fr;
  }
}

/* ===== SocialMedia: video creator (creative.video_editor) =====
   Reuses the image-editor layout (.img-*); only the result media is a <video> player. */

.vid-output {
  width: 100%;
  max-height: 460px;
  background: #000;
}

.img-lightbox-panel video {
  max-width: 86vw;
  max-height: 78vh;
}

/* ===== SocialMedia: post creator (creative.post_editor) =====
   Two styled platform cards (Instagram + Meta). The platform accent colours below are
   third-party BRAND identities (not theme tokens) — they must not recolour with the app theme. */

.post-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.post-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--weight-bold);
  color: #fff;
}

.post-card-head .ti {
  font-size: 1.15em;
}

/* Instagram brand gradient + Meta brand blue (third-party identities). */
.post-card-instagram .post-card-head {
  background: linear-gradient(95deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4);
}

.post-card-meta .post-card-head {
  background: #1877f2;
}

.post-card-body {
  position: relative;
  flex: 1;
  min-height: 180px;
  padding: var(--space-6);
}

.post-text {
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.post-hashtag {
  color: var(--primary);
  font-weight: 650;
}

.post-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.img-lightbox-panel .post-cards {
  padding: var(--space-7);
  max-width: 86vw;
  max-height: 78vh;
  overflow: auto;
}

@media (max-width: 900px) {
  .post-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== SocialMedia: SEO content creator (seo.topics / seo.generate) ===== */

/* Topic status badges */
.seo-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 650;
}
.seo-badge-new { background: var(--color-surface-inset); color: var(--muted); }
.seo-badge-generating { background: var(--primary-soft); color: var(--primary); }
.seo-badge-done { background: #e3f4e5; color: #1f7a33; }
.seo-badge-error { background: #fbe4e4; color: #b3261e; }

.seo-actions-cell { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.seo-form,
.seo-readonly,
.seo-topic-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.seo-readonly {
  gap: 4px;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-inset);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

/* Generation phase steps */
.seo-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}
.seo-phase {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.seo-phase-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.seo-phase-active { color: var(--primary); }
.seo-phase-active .seo-phase-dot { background: var(--primary); animation: img-indeterminate 1.1s infinite ease-in-out; }
.seo-phase-done { color: var(--color-text-strong); }
.seo-phase-done .seo-phase-dot { background: var(--primary); }
.seo-phase-error { color: var(--color-danger); }
.seo-phase-error .seo-phase-dot { background: var(--color-danger); }

/* Result panels */
.seo-result { display: flex; flex-direction: column; gap: var(--space-7); margin-top: var(--space-7); }
.seo-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface);
}
.seo-panel > h3 { margin: 0 0 var(--space-5); }
.seo-panel > summary { font-weight: var(--weight-bold); cursor: pointer; }
.seo-report h4 { margin: var(--space-6) 0 var(--space-3); }

.seo-title-opts { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.seo-title-opt { font-size: var(--text-sm); }

.seo-article-frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin: var(--space-5) 0;
}

.seo-hero {
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--radius);
}

.seo-archive-view { display: flex; flex-direction: column; gap: var(--space-6); max-width: 86vw; width: 760px; max-height: 80vh; overflow: auto; padding: var(--space-6); }
.seo-archive-head { border: 0; }

/* ===========================================================================
   Admin CRUD surface (agency_admin only). Central stylesheet — no per-app CSS.
   =========================================================================== */

.admin-tile .status-pill {
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-screen {
  min-height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.admin-tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: var(--weight-semibold);
}

.admin-tab:hover {
  border-color: var(--line-strong);
}

.admin-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-on-primary);
}

.admin-message {
  margin: 0;
  min-height: 18px;
  font-size: var(--text-base);
  color: var(--primary);
}

.admin-message.is-error {
  color: var(--error);
}

.admin-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 14px;
}

.admin-toolbar h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.admin-table th {
  color: var(--muted);
  font-weight: 650;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-table tbody tr:hover {
  background: var(--panel-muted);
}

/* Layer 2 insights admin tab: manual "Frissítés most" controls + run log. */
.admin-help {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0 0 12px;
}

.admin-insights-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-7);
  margin-bottom: 18px;
}

.admin-insights-controls label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

.admin-insights-controls select {
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  font-size: var(--text-base);
}

.admin-status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 650;
}

.admin-status-pill.is-ok {
  background: var(--c-green-tint);
  color: var(--c-green-500);
}

.admin-status-pill.is-error {
  background: var(--c-red-tint);
  color: var(--c-red-500);
}

.admin-status-pill.is-running {
  background: var(--c-amber-tint);
  color: var(--c-amber-600);
}

.admin-insights-error {
  white-space: normal;
  max-width: 320px;
  color: var(--c-red-500);
  font-size: var(--text-xs);
}

.admin-empty {
  color: var(--muted);
  text-align: center;
  padding: 22px 12px;
}

.admin-actions-cell {
  display: flex;
  gap: var(--space-4);
}

.admin-row-action {
  padding: 5px 12px;
  font-size: var(--text-sm);
}

.admin-row-delete {
  color: var(--error);
  border-color: var(--error);
}

.admin-row-delete:hover {
  background: var(--error-soft);
}

/* Modal (forms + delete confirm) */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 1000;
  overflow-y: auto;
}

.admin-modal-panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 540px;
  padding: 22px 24px;
}

.admin-confirm-panel {
  max-width: 480px;
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 16px;
}

.admin-modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-form-section {
  margin: 14px 0 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.admin-field label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.admin-field input[type="text"],
.admin-field input[type="password"],
.admin-field select,
.admin-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: var(--color-surface);
  color: var(--text);
}

.admin-field textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.admin-field-check label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: var(--weight-medium);
}

.admin-field-help {
  color: var(--muted);
  font-size: var(--text-xs);
}

.admin-secret-status {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
  margin-top: 4px;
}

.admin-form-error {
  margin: 0;
  min-height: 0;
}

.danger-button {
  border: 1px solid var(--error);
  background: var(--error);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-weight: 650;
}

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

.danger-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-confirm-body {
  font-size: var(--text-base);
  line-height: 1.5;
}

.admin-impact-list {
  margin: 8px 0;
  padding-left: 20px;
}

.admin-impact-nested {
  color: var(--muted);
  font-size: var(--text-sm);
}

.admin-warn {
  color: var(--error);
  font-weight: var(--weight-semibold);
}

/* ============================================================================================
   Mini-PIM (prompt-admin sub-nav + terméktáblázat + ellenőrző ablak)
   ============================================================================================ */

/* Prompt-admin sub-navigation (Promptok tab inner switching) */
.admin-subnav {
  display: flex;
  gap: var(--space-4);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-subtab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.admin-subtab.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.admin-assignment-client {
  max-width: 360px;
  margin-bottom: 14px;
}

.admin-assignment-select {
  min-width: 240px;
}

/* Mini-PIM table view */
.pim {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Mini-PIM ellenőrző ablak (a táblázatot az újrahasználható .dg-* adatrács adja). */
.pim-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.pim-count {
  color: var(--muted);
  font-size: var(--text-sm);
}

.pim-generate-label {
  margin: 0;
  font-weight: 650;
}

.pim-col-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.pim-generate-msg {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Column config modal */
.pim-col-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 8px 0;
}

/* Verify window */
.pim-verify .data-table td {
  max-width: 320px;
  vertical-align: top;
}

.pim-content-link {
  color: var(--primary);
  font-weight: var(--weight-semibold);
}

.pim-publish {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.pim-publish .pim-generate-label {
  width: 100%;
}

.pim-content-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel-muted);
  border-radius: var(--radius);
  padding: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  max-height: 60vh;
  overflow: auto;
}

/* ============================================================================================
   REUSABLE UI PRIMITIVES — single definition, reused across the whole app set.
   Added for the Mini-PIM data-grid + prompt-editor redesign; usable anywhere.
   Style comes only from here (no per-app CSS, no inline style) — components reference tokens.
   ============================================================================================ */

/* Inline SVG icons inherit color/size via currentColor; sized centrally here. */
.icon-svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}

/* Small type/status marker (e.g. field type, product state). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.badge.is-accent {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Neutral context chip + accent (value-pill) variant. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.chip-accent {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}

/* Accessible on/off switch. Markup: <label class="toggle"><input type="checkbox"><span class="toggle-track"></span> label</label> */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  cursor: pointer;
  user-select: none;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background 0.15s ease;
  flex: none;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--c-shadow);
  transition: left 0.15s ease;
}

.toggle input:checked + .toggle-track {
  background: var(--primary);
}

.toggle input:checked + .toggle-track::after {
  left: 16px;
}

.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Square, icon-only button (32px). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-strong);
  cursor: pointer;
  line-height: 1;
}

.icon-btn:hover {
  background: var(--panel-muted);
}

.icon-btn.is-danger {
  color: var(--color-danger);
}

.icon-btn.is-danger:hover {
  background: var(--color-danger-soft);
}

.icon-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Dashed "+ add" affordance, full width. */
.add-dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: 11px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
}

.add-dashed:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
}

/* Collapsible card. Markup: <div class="card"><div class="card-head">…</div><div class="card-body">…</div></div> */
.card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.card-body {
  margin-top: 10px;
}

.card.is-collapsed .card-body {
  display: none;
}

.card-grip {
  color: var(--muted);
  cursor: grab;
  border-color: transparent;
  background: transparent;
}

.card-grip:active {
  cursor: grabbing;
}

.card.is-dragging {
  opacity: 0.55;
}

.card.is-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.card-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  transition: transform 0.15s ease;
}

.card.is-collapsed .card-chevron {
  transform: rotate(-90deg);
}

/* ============================================================================================
   REUSABLE DATA GRID — config-driven grid component (app/static/datagrid.js).
   Built on the shared .data-table/.data-table-wrapper; adds frozen columns, per-column filter
   row, hover bubble, row expand, contextual action bars and a full-window mode. The Mini-PIM
   product table is one instance; other lists (orders, customers, …) can reuse it.
   Frozen-column left offsets are passed as DATA via the --dg-left custom property (same pattern
   as the sync progress bar's --sync-progress) — never as inline formatting.
   ============================================================================================ */

.dg {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.dg-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.dg-search {
  flex: 1 1 240px;
  max-width: 360px;
}

.dg-count {
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.dg-count strong {
  color: var(--primary-hover);
  font-weight: var(--weight-semibold);
}

.dg-check-col {
  width: 40px;
  text-align: center;
}

/* Grid-specific z-index layering on top of the reused .data-table sticky header. */
.dg-grid {
  width: max-content;
  min-width: 100%;
}

.dg-grid thead th {
  z-index: 3;
}

.dg-grid td {
  vertical-align: middle;
}

.dg-grid th.is-right,
.dg-grid td.is-right {
  text-align: right;
}

/* Per-column width carried as DATA via --dg-w (same pattern as --sync-progress / --dg-left). */
.dg-sized {
  width: var(--dg-w);
  min-width: var(--dg-w);
  max-width: var(--dg-w);
}

.dg-grid tbody tr:hover td {
  background: var(--color-surface-subtle);
}

.dg-frozen {
  position: sticky;
  left: var(--dg-left, 0);
  z-index: 2;
  background: var(--color-surface);
}

.dg-grid thead th.dg-frozen {
  z-index: 5;
  background: var(--color-surface-raised);
}

.dg-grid tbody tr:hover td.dg-frozen {
  background: var(--color-surface-subtle);
}

.dg-frozen.is-edge::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

/* Per-column filter row (second header row), sticky just below the header row. */
.dg-filter-row th {
  top: var(--dg-head-h, 38px);
  background: var(--color-surface-subtle);
  padding: 6px 10px;
  text-transform: none;
  font-weight: var(--weight-regular);
}

.dg-filter-input {
  width: 100%;
  min-width: 64px;
  font: inherit;
  font-size: var(--text-xs);
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--text);
}

.dg-filter-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.dg-filter-range {
  display: flex;
  gap: 4px;
}

/* Single-line truncated cell + JS-positioned hover bubble. The clip bound comes from the
   column's --dg-w (.dg-sized); a default caps un-sized columns. */
.cell-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.cell-truncate.dg-sized {
  max-width: var(--dg-w);
}

.cell-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 12px var(--c-shadow);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
}

/* Row-expand toggle + detail row. */
.dg-expand {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px 0 0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.dg-detail-row td {
  background: var(--color-surface-subtle);
}

.dg-detail {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px 16px;
  padding: 4px 2px;
  font-size: var(--text-sm);
}

.dg-detail-key {
  color: var(--muted);
}

.dg-detail-val {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.dg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Contextual action bar — shown on selection, above the table and stuck to the bottom. */
.action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  border: 1px solid var(--c-green-tint);
}

.action-bar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary-hover);
}

.action-bar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.action-bar-hint {
  font-size: var(--text-xs);
  color: var(--primary-hover);
}

.action-bar.is-sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 30;
  box-shadow: 0 -2px 10px var(--c-shadow);
}

/* Rectangular on/off chip (e.g. content-type pick in the Mini-PIM bulk action). */
.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface);
  color: var(--muted);
  font-size: var(--text-xs);
  cursor: pointer;
}

.toggle-chip.is-on {
  background: var(--primary-soft);
  color: var(--primary-hover);
  border-color: transparent;
}

/* Full-window mode: hide the portal sidebar so a wide, many-column grid gets the whole width.
   The shell is flex now (.app-body row of .app-sidebar + .app-content), so hiding the sidebar
   lets the content take the full width on its own. */
body.is-grid-maximized .app-sidebar {
  display: none;
}

/* ── PRICING ─────────────────────────────────────────────── */
.pricing-wrap {
  background: var(--navy);
  min-height: 100%;
  padding: 40px 28px;
}

.pricing-title {
  text-align: center;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: 8px;
}

.pricing-subtitle {
  text-align: center;
  font-size: var(--text-md);
  color: rgba(255,255,255,0.40);
  margin-bottom: 32px;
}

.pricing-grid {
  display: grid;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
}

.pricing-col-head {
  padding: 22px 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.pricing-col-head:last-child { border-right: none; }

.pricing-col-featured { background: var(--green); }

.pricing-col-cta { background: rgba(255,255,255,0.06); }

.pricing-plan-badge {
  display: inline-block;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.4px; text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius-pill);
  padding: 3px 10px; margin-bottom: 8px;
}

.pricing-col-featured .pricing-plan-badge {
  background: rgba(255,255,255,0.25); color: #fff;
}

.pricing-plan-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.85);
  margin-bottom: 5px;
}

.pricing-col-featured .pricing-plan-name { color: #fff; }

.pricing-plan-price {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #fff;
}

.pricing-plan-price em {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: rgba(255,255,255,0.38);
  font-style: normal;
}

.pricing-plan-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.32);
  margin-top: 3px;
}

.pricing-col-featured .pricing-plan-sub { color: rgba(255,255,255,0.60); }

.pricing-btn {
  margin-top: 14px; width: 100%;
  border-radius: var(--radius);
  padding: 10px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
}

.pricing-btn-outline {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
}

.pricing-btn-primary {
  background: #fff; color: var(--navy);
  border: none; font-weight: var(--weight-bold);
}

.pricing-btn-ghost {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
}

.pricing-section {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 9px 16px;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

.pricing-row { display: contents; }

.pricing-row:hover > .pricing-cell { background: rgba(255,255,255,0.04); }
.pricing-row:hover > .pricing-cell-featured { background: rgba(127,184,61,0.18); }

.pricing-cell {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center;
  background: transparent;
}

.pricing-cell:last-child { border-right: none; }

.pricing-cell-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.09);
}

.pricing-cell-featured {
  background: rgba(127,184,61,0.09);
  border-right: 1px solid rgba(255,255,255,0.09);
}

.pricing-cell-cta { background: rgba(255,255,255,0.02); }

.pricing-feat-name {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.78);
  font-weight: var(--weight-medium);
}

.pricing-feat-desc {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.28);
  line-height: 1.4;
}

.pricing-check { color: var(--green); font-size: 20px; font-weight: var(--weight-bold); }
.pricing-cross { color: rgba(255,255,255,0.15); font-size: 18px; }

.pricing-qty {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  padding: 3px 11px; white-space: nowrap;
}

.pricing-cell-featured .pricing-qty {
  background: rgba(127,184,61,0.25); color: #d4f0a0;
}

.pricing-unlimited {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  background: rgba(127,184,61,0.15); color: var(--green);
  border-radius: var(--radius-pill); padding: 3px 11px;
}

.pricing-cell-featured .pricing-unlimited {
  background: rgba(127,184,61,0.28); color: #c8e89a;
}

.pricing-custom {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.28);
  font-style: italic;
}

/* Pricing — standalone pre-login view + login-page link + back button */
.pricing-view {
  min-height: 100vh;
  overflow-y: auto;
  background: var(--navy);
}

.pricing-link {
  margin-top: 2px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: color var(--transition-fast);
}

.pricing-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.pricing-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pricing-back:hover { background: rgba(255,255,255,0.14); }

/* ============================================================================
   Batch tartalomgyártás (Mini-PIM × SocialMedia): előkészítő mátrix + státusz oldal
   ============================================================================ */

.batch { display: grid; gap: var(--space-6); }

/* A mátrix celláiban kompakt dropdownok; az oszlop-fejléc "Összes beállítása" kisebb. */
.batch-matrix select { width: 100%; min-width: 120px; }
.batch-matrix .batch-default { font-size: var(--text-xs, 12px); font-weight: var(--weight-regular, 400); margin-top: var(--space-4); }
.batch-remove { padding: 2px 10px; line-height: 1; }

.batch-actions { display: flex; align-items: center; gap: var(--space-6); }

/* Státusz oldal: összesítő sor + progress (a --sync-progress mintát követi, világos sávon). */
.batch-summary { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.batch-progress {
  flex: 1 1 220px;
  height: 8px;
  min-width: 160px;
  overflow: hidden;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.batch-counts { font-size: var(--text-sm); color: var(--text); }

/* Státusz-badge (job-szintű) + tétel-szintű állapotjelzés. */
.batch-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--panel-muted);
  color: var(--text);
}
.batch-badge.is-running { background: var(--c-green-tint); color: var(--color-primary-hover); }
.batch-badge.is-done { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.batch-badge.is-error { background: var(--error-soft); color: var(--error); }

/* v2 — Mini-PIM bulk-sáv: a kijelölt termékek művelet-csoportja (ikon + címke + gomb). */
.batch-bulkbar { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.batch-bulk-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
}

/* v2 — letiltott oszlop (nincs batch-generátor / aktív modell): halvány fejléc + tiltott cellák. */
.batch-matrix th.batch-col-off { color: var(--muted); }
.batch-matrix th.batch-col-off .ti-alert-triangle { color: var(--error); }
.batch-matrix td.batch-col-off select { opacity: 0.5; cursor: not-allowed; }

/* v2 — eredmény-mátrix cella-státuszok (ikon + szín); a done cella kattintható link. */
.batch-cell-st { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.batch-cell-st.is-pending { color: var(--muted); }
.batch-cell-st.is-running { color: var(--color-primary-hover); }
.batch-cell-st.is-done { color: var(--color-primary-hover); text-decoration: none; font-size: var(--text-md); }
.batch-cell-st.is-error { color: var(--error); font-size: var(--text-xs, 12px); }
.batch-cell-st.is-running .ti-loader-2 { animation: batch-spin 0.9s linear infinite; }
.batch-cell-empty { color: var(--muted); text-align: center; }
@keyframes batch-spin { to { transform: rotate(360deg); } }

/* v2 — poszt-cella lightbox nézet (Meta + Instagram szöveg kártyákban). */
.batch-post-view { display: grid; gap: var(--space-5); }
.batch-post-view .post-card { padding: var(--space-5); }
.batch-post-view .post-card h4 { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--muted); }
.batch-post-view .post-card p { margin: 0; white-space: pre-wrap; }

/* ============================================================================
   === BATCH MODEL ROW ===
   v3 — provider/modell-választó sor a mátrix FEJLÉCÉBEN: content_type-onként egy
   kompakt dropdown, pontosan az oszlop szélességéhez illesztve (a th-ban ül).
   ============================================================================ */

.batch-matrix .batch-model-headrow th {
  background: var(--panel-muted);
  padding: var(--space-4);
  vertical-align: middle;
}
.batch-model-corner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  white-space: nowrap;
}
/* A dropdown az oszlop teljes szélességét kitölti; ha a provider nem fér ki, lenyitáskor látszik. */
.batch-model-cell select { width: 100%; max-width: 100%; }

/* A „Termék neve" cella egy sorban marad (mint a Mini-PIM rácsban); túlcsordulás → ellipszis,
   a teljes név egér ráhúzáskor (title) látszik. */
.batch-matrix .batch-prod-name {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === BATCH PREVIEW ===
   v3 — dry-run előnézet popup (lapozós, type-tabos): feldolgozott prompt + CURL.
   A .img-lightbox overlay-re épül; itt csak a panel belső szerkezete. */

.batch-preview-modal .batch-pv-panel {
  width: min(820px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  text-align: left;
}
.batch-pv-head { display: flex; align-items: center; gap: var(--space-5); }
.batch-pv-title { flex: 1; font-weight: var(--weight-medium); color: var(--text); }
.batch-pv-nav { padding: 2px 10px; line-height: 1; }
.batch-pv-close { margin-left: auto; }

.batch-pv-tabs { display: flex; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); }
.batch-pv-tab {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.batch-pv-tab.is-active { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: transparent; }

.batch-pv-body { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.batch-pv-label { font-size: var(--text-xs, 12px); font-weight: var(--weight-medium); color: var(--muted); }
.batch-pv-prompt {
  width: 100%;
  resize: vertical;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel-muted);
  color: var(--text);
}
.batch-pv-img { margin: 0; font-size: var(--text-xs, 12px); color: var(--muted); word-break: break-all; }
.batch-pv-curlhead { display: flex; align-items: center; gap: var(--space-5); }
.batch-pv-curl {
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 12px);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--navy, #102A3D);
  color: #e6edf3;
}
.batch-pv-copymsg { font-size: var(--text-xs, 12px); color: var(--color-primary-hover); }
.batch-pv-foot { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--space-5); }
.batch-pv-warn { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--muted); }

/* v3 — Mini-PIM „Fotó" oszlop linkje (szöveges link, nem <img>). */
.photo-link { white-space: nowrap; text-decoration: none; }

/* ============================================================================
   === LANDING PAGE ===
   Role-specific home screen after login (agency_admin: 3 cards + 4 widgets;
   client_user: app cards + 2 widgets). Token-driven; navy shell, white surfaces.
   ============================================================================ */

.landing-screen {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-12) var(--space-16);
  overflow-y: auto;
}

.landing-header {
  width: min(100%, 1120px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.landing-body {
  width: min(100%, 1120px);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ---- agency_admin: the 3 summary cards ---- */

.landing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.landing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  box-shadow: var(--shadow-md);
}

/* The admin card matches the others (light text on a light surface), only its background is a
   light grey instead of white so it reads as the distinct "platform" tile without sinking into
   the navy shell. */
.landing-card--admin {
  background: var(--color-surface-inset);
  border-color: var(--line);
}

.landing-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.landing-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.landing-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.landing-card__stat-row {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.landing-card__stat-row strong {
  font-size: var(--text-lg);
  color: var(--navy);
  font-weight: var(--weight-bold);
}

.landing-card__app-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.landing-card__app-mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.landing-card__app-mini-list li:last-child { border-bottom: none; padding-bottom: 0; }
.landing-card__app-mini-list strong { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

.landing-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.landing-chip--warn {
  background: var(--c-amber-tint);
  color: var(--c-amber-700);
}

/* Pushes the card button to the bottom so the 3 cards align regardless of body length. */
.landing-card__spacer { flex: 1 1 auto; }

/* ---- Dashboard section (both roles) ---- */

.dashboard__title {
  margin: 0 0 var(--space-8);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: #fff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
}

.dashboard-widget {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

.dashboard-widget__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.dashboard-empty {
  list-style: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Platform statistics: small number cards. */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle-2);
  border: 1px solid var(--line);
}

.stat-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
}

.stat-card__label {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Sync rows (recent jobs / per-datasource status). */
.sync-row-list,
.health-list,
.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sync-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  background: var(--color-surface-subtle-2);
}

.sync-row__name { flex: 1 1 auto; font-weight: var(--weight-medium); color: var(--color-text-strong); }
.sync-row__time { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.sync-row__status { white-space: nowrap; font-size: var(--text-xs); }

.sync-row.is-error { border-left-color: var(--color-danger); background: var(--c-red-tint); }
.sync-row.is-warn  { border-left-color: var(--color-warning); background: var(--c-amber-tint); }
.sync-row.is-running { border-left-color: var(--color-primary); background: var(--c-green-tint); }

/* System health rows. */
.health-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
}

.health-row__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}

.health-row.is-ok  .health-row__icon { background: var(--c-green-tint); color: var(--color-primary); }
.health-row.is-bad .health-row__icon { background: var(--c-red-tint); color: var(--color-danger); }

.health-row__label { flex: 1 1 auto; color: var(--color-text); }
.health-row__count { font-weight: var(--weight-bold); color: var(--navy); }
.health-row.is-bad .health-row__count { color: var(--color-danger); }

/* Quick links. */
.quick-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.quick-link { justify-content: flex-start; }

/* Notifications. */
.notification-item {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-subtle-2);
}

.notification-item--warning { border-left-color: var(--color-warning); background: var(--c-amber-tint); }
.notification-item--error   { border-left-color: var(--color-danger);  background: var(--c-red-tint); }
.notification-item--ok      { border-left-color: var(--color-primary);  background: var(--c-green-tint); color: var(--color-text-strong); }

/* ---- client_user: app cards ---- */

.landing-app-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-10);
}

.landing-app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

.landing-app-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.landing-app-card .card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xl);
}

.landing-app-card__title { display: flex; flex-direction: column; gap: var(--space-3); }
.landing-app-card .card-name { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--navy); }

.landing-app-card__actions {
  display: flex;
  gap: var(--space-5);
  margin-top: auto;
}

.landing-app-card__actions .primary-button,
.landing-app-card__actions .ghost-button { flex: 1 1 0; }

/* Inactive / locked app card. */
.app-card--locked { opacity: 0.55; }
.app-card--locked .card-icon { background: var(--color-surface-inset); color: var(--muted); }

/* ---- Responsive: stack everything on narrow screens ---- */
@media (max-width: 880px) {
  .landing-cards,
  .dashboard-grid,
  .dashboard-grid--two,
  .stat-card-grid,
  .quick-link-grid { grid-template-columns: 1fr; }
}

/* Landing header sits directly on the navy shell, so the brand needs light text (the navy
   default would be invisible); the green accent span stays as-is. */
.landing-header .login-brand-name { color: #fff; }
.landing-header .login-brand-sub { color: var(--c-white-72); }

/* === RECOMMENDATIONS PANEL ("Javaslatok" — UNAS app homepage) ============================
   Diagnostic/advice panel: severity-dot rows with actionable CTA buttons. Loaded as the UNAS
   landing (menu.json home_action). Data + behavior live in app/apps/unas/static/recommendations.js. */
.recommendations-view {
  max-width: 760px;
}

.rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.rec-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.rec-loading {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Run button (top-right / empty-state): bordered, with a leading icon that spins while running. */
.rec-run-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.rec-run-btn:hover:not([disabled]) { background: var(--color-surface-subtle); }
.rec-run-btn[disabled] { opacity: 0.6; cursor: default; }

.rec-spin { animation: rec-spin 0.9s linear infinite; }
@keyframes rec-spin { to { transform: rotate(360deg); } }

.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.rec-item {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Severity dot — explicit brand-status colors (spec). */
.rec-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  margin-top: 5px;
}
.rec-dot--urgent  { background: #E24B4A; }
.rec-dot--warning { background: #EF9F27; }
.rec-dot--success { background: #639922; }

.rec-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.rec-message {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text);
}

.rec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* Primary CTA: filled dark background, white text, no border (multiple wrap with flex). */
.rec-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.rec-cta:hover { opacity: 0.9; }

.rec-footer {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.rec-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.rec-empty-list {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ============================================================================================
   SHOPAUDIT — Shop Audit app (3-panel SSE elemző + history + sources)
   ============================================================================================ */

.shopaudit {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.shopaudit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); }
.shopaudit-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.shopaudit-meta { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.shopaudit-meta a { color: var(--color-primary); text-decoration: none; }
.shopaudit-meta a:hover { text-decoration: underline; }

.shopaudit-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.shopaudit-providers { display: flex; align-items: center; gap: var(--space-4); }
.shopaudit-providers__label { font-size: var(--text-sm); color: var(--color-text-subtle); font-weight: var(--weight-medium); }

.shopaudit-provider {
  padding: var(--space-3) var(--space-7);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shopaudit-provider:hover { border-color: var(--color-primary); }
.shopaudit-provider.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--color-on-primary);
}

.shopaudit-sources-count { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-medium); }

.shopaudit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 1100px) { .shopaudit-grid { grid-template-columns: 1fr; } }

.shopaudit-panel {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 70vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.shopaudit-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}
.shopaudit-panel__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong); }

.shopaudit-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-7);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.shopaudit-panel__body h1, .shopaudit-panel__body h2, .shopaudit-panel__body h3 {
  margin: var(--space-7) 0 var(--space-4);
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
}
.shopaudit-panel__body h1 { font-size: var(--text-lg); }
.shopaudit-panel__body h2 { font-size: var(--text-md); }
.shopaudit-panel__body h3 { font-size: var(--text-base); }
.shopaudit-panel__body :first-child { margin-top: 0; }
.shopaudit-panel__body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-xs); }
.shopaudit-panel__body th, .shopaudit-panel__body td { border: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); text-align: left; }
.shopaudit-panel__body th { background: var(--color-surface-subtle); }
.shopaudit-panel__body code { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-inset); padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.shopaudit-raw { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--text-xs); }

.shopaudit-status {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.shopaudit-status--idle { background: var(--color-surface-inset); color: var(--color-text-muted); }
.shopaudit-status--running { background: var(--c-amber-tint); color: var(--c-amber-600); }
.shopaudit-status--done { background: var(--c-green-tint); color: var(--green-soft-text); }
.shopaudit-status--error { background: var(--c-red-tint); color: var(--color-danger); }

.shopaudit-hint { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.shopaudit-hint--spin::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: shopaudit-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes shopaudit-spin { to { transform: rotate(360deg); } }
.shopaudit-error { color: var(--color-danger); font-size: var(--text-sm); margin: 0; }

/* History + Sources táblák */
.shopaudit-table { width: 100%; }
.shopaudit-url-cell, .shopaudit-summary-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.shopaudit-summary-cell { white-space: normal; }

.shopaudit-filters { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.shopaudit-filter {
  padding: var(--space-3) var(--space-7);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
}
.shopaudit-filter:hover { border-color: var(--color-primary); }
.shopaudit-filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--color-on-primary); }

.shopaudit-tag {
  display: inline-block;
  font-size: var(--text-2xs);
  background: var(--color-surface-inset);
  color: var(--color-text-subtle);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
}
.shopaudit-cat {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inset);
  color: var(--color-text-subtle);
}
.shopaudit-cat--blog { background: var(--c-green-tint); color: var(--green-soft-text); }
.shopaudit-cat--news { background: var(--c-amber-tint); color: var(--c-amber-600); }
.shopaudit-cat--research { background: var(--c-green-tint); color: var(--green-strong); }

/* Gombok (self-contained, token-vezérelt) */
.shopaudit-btn {
  padding: var(--space-5) var(--space-9);
  border: 1px solid var(--green-strong);
  border-radius: var(--radius);
  background: var(--green-strong);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.shopaudit-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.shopaudit-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.shopaudit-btn--secondary {
  background: var(--color-surface);
  color: var(--navy);
  border-color: var(--color-border-strong);
}
.shopaudit-btn--secondary:hover { background: var(--color-surface-subtle); border-color: var(--navy); }
.shopaudit-btn--sm { padding: var(--space-2) var(--space-6); font-size: var(--text-xs); }