/* Jelppa design system 2.0 – semantic tokens shared by all production views.
   Change the product-wide visual language here; feature CSS should consume these tokens. */
:root{
  /* Brand – organization colour still comes from --primary/--primary-hover. */
  --jelppa-primary:var(--primary,#3157d5);
  --jelppa-primary-hover:var(--primary-hover,#223fa6);
  --jelppa-primary-contrast:var(--primary-contrast,#fff);
  --jelppa-primary-soft:color-mix(in srgb,var(--jelppa-primary) 9%,#fff);
  --jelppa-focus:color-mix(in srgb,var(--jelppa-primary) 55%,#fff);

  /* Surfaces */
  --jelppa-bg:#f6f7f9;
  --jelppa-surface:#ffffff;
  --jelppa-surface-subtle:#f9fafb;
  --jelppa-surface-muted:#f2f4f7;
  --jelppa-surface-hover:#f8fbff;
  --jelppa-neutral-bg:#eef1f6;
  --jelppa-on-solid:#ffffff;

  /* Typography */
  --jelppa-text:#18212f;
  --jelppa-text-strong:#101828;
  --jelppa-text-secondary:#344054;
  --jelppa-text-tertiary:#475467;
  --jelppa-muted:#667085;
  --jelppa-text-subtle:#98a2b3;

  /* Borders */
  --jelppa-border:#e4e7ec;
  --jelppa-border-soft:#edf0f3;
  --jelppa-border-strong:#d0d5dd;

  /* Semantic states */
  --jelppa-success:#16865c;
  --jelppa-success-bg:#dff7e8;
  --jelppa-success-text:#14532d;
  --jelppa-danger:#c23a4b;
  --jelppa-danger-bg:#fee2e2;
  --jelppa-danger-text:#991b1b;
  --jelppa-warning:#f4b740;
  --jelppa-warning-bg:#fef3c7;
  --jelppa-warning-text:#5b3a00;
  --jelppa-info-bg:#e8f0ff;
  --jelppa-info-text:#2447a8;

  /* Shape */
  --jelppa-radius-xs:6px;
  --jelppa-radius-sm:8px;
  --jelppa-radius-md:10px;
  --jelppa-radius-lg:14px;
  --jelppa-radius-xl:18px;
  --jelppa-radius-pill:999px;

  /* Spacing – 4 px base rhythm */
  --jelppa-space-1:4px;
  --jelppa-space-2:8px;
  --jelppa-space-3:12px;
  --jelppa-space-4:16px;
  --jelppa-space-5:20px;
  --jelppa-space-6:24px;
  --jelppa-space-7:32px;

  /* Elevation */
  --jelppa-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --jelppa-shadow-sm:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.04);
  --jelppa-shadow-md:0 10px 30px rgba(23,32,51,.08);

  /* Controls/layout */
  --jelppa-control-height:36px;
  --jelppa-control-height-touch:38px;
  --jelppa-control-height-lg:40px;
  --jelppa-content-max:1320px;
  --jelppa-sidebar-width:244px;
  --jelppa-sidebar-collapsed-width:68px;
  --jelppa-transition-fast:.14s ease;

  /* Compatibility aliases for older Jelppa CSS. */
  --bg:var(--jelppa-bg);
  --card:var(--jelppa-surface);
  --ink:var(--jelppa-text);
  --muted:var(--jelppa-muted);
  --line:var(--jelppa-border);
  --success:var(--jelppa-success);
  --danger:var(--jelppa-danger);
  --warning:var(--jelppa-warning);
}
.status-positive,.status-negative,.status-warning,.status-neutral,.state-positive,.state-negative,.state-warning,.state-neutral{display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--jelppa-radius-pill);padding:.22rem .55rem;font-weight:800;line-height:1.2}
.status-positive,.state-positive{background:var(--jelppa-success-bg);color:var(--jelppa-success-text)}
.status-negative,.state-negative{background:var(--jelppa-danger-bg);color:var(--jelppa-danger-text)}
.status-warning,.state-warning{background:var(--jelppa-warning-bg);color:var(--jelppa-warning-text)}
.status-neutral,.state-neutral{background:var(--jelppa-info-bg);color:var(--jelppa-info-text)}
:focus-visible{outline:3px solid var(--jelppa-focus);outline-offset:2px}

/* Accessible application modal / alert dialog. */
.jelppa-modal-backdrop{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.48);backdrop-filter:blur(2px)}
.jelppa-modal-backdrop.is-open{display:flex}
.jelppa-modal{width:min(100%,480px);display:flex;gap:16px;background:var(--jelppa-surface,#fff);color:var(--jelppa-text,#172033);border:1px solid var(--jelppa-border,#dfe5ef);border-radius:var(--jelppa-radius-xl,18px);box-shadow:0 24px 70px rgba(15,23,42,.24);padding:24px}
.jelppa-modal-icon{flex:0 0 40px;width:40px;height:40px;border-radius:var(--jelppa-radius-pill);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;background:var(--jelppa-danger-bg,#fee2e2);color:var(--jelppa-danger-text,#991b1b)}
.jelppa-modal-body{min-width:0;flex:1}
.jelppa-modal h2{margin:0 0 8px;font-size:20px;line-height:1.25}
.jelppa-modal p{margin:0;color:var(--jelppa-text,#172033);line-height:1.55}
.jelppa-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.jelppa-modal-confirm .jelppa-modal-icon{background:#eef4ff;color:#1f5eff}
.jelppa-modal-confirm .jelppa-modal-body>div>p+p,.jelppa-modal-confirm .jelppa-modal-body>p+p{margin-top:12px}
body.jelppa-modal-open{overflow:hidden}
@media(max-width:560px){.jelppa-modal-backdrop{padding:14px}.jelppa-modal{padding:20px;gap:12px}.jelppa-modal-icon{flex-basis:36px;width:36px;height:36px;font-size:21px}}

/* Migration safety chain */
.migration-description{margin-top:3px;font-size:.82rem}
.migration-wizard{overflow:hidden}
.migration-steps{display:grid;gap:8px;margin:16px 0 20px}
.migration-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--jelppa-border);border-radius:var(--jelppa-radius-md);background:var(--jelppa-surface)}
.migration-step.is-ok{background:color-mix(in srgb,var(--jelppa-success-bg) 38%,#fff)}
.migration-step.is-current{background:color-mix(in srgb,var(--jelppa-warning-bg) 45%,#fff)}
.migration-step-number{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:var(--jelppa-radius-pill);background:var(--jelppa-surface-muted);color:var(--jelppa-text-secondary);font-weight:900}
.migration-step strong{display:block}.migration-step small{display:block;margin-top:2px;color:var(--jelppa-muted);line-height:1.4}
.migration-confirm-card,.migration-danger-zone{margin-top:18px;padding:18px;border:1px solid var(--jelppa-border);border-radius:var(--jelppa-radius-md);background:#fbfcfe}
.migration-danger-zone{border-color:#f6b8b8;background:#fffafa}
.migration-preview-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:16px;margin-top:20px}
.migration-preview-grid>div{min-width:0}
.migration-sql-preview{max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;padding:14px;border:1px solid var(--jelppa-border);border-radius:var(--jelppa-radius-md);background:#111827;color:#f9fafb;font-size:.82rem;line-height:1.5}
.migration-sql-preview.rollback{background:#1f2937}
.migration-backup-note{margin:14px 0}
@media(max-width:820px){.migration-preview-grid{grid-template-columns:1fr}.migration-step{grid-template-columns:30px minmax(0,1fr)}.migration-step>.badge{grid-column:2;justify-self:start}}

/* Migration wizard compact preview */
.migration-backup-fields{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(280px,1.35fr);gap:12px}
.migration-preview-stack{display:grid;gap:10px;margin-top:18px}
.migration-details{border:1px solid var(--jelppa-border);border-radius:var(--jelppa-radius-md);background:var(--jelppa-surface);overflow:hidden}
.migration-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;cursor:pointer}
.migration-details>summary::-webkit-details-marker{display:none}
.migration-details>summary strong{display:block}.migration-details>summary small{display:block;margin-top:2px;color:var(--jelppa-muted);line-height:1.4}
.migration-details .details-action{flex:none;font-weight:800;color:var(--primary,var(--jelppa-primary))}
.migration-details[open] .details-action::before{content:"Piilota ";}.migration-details[open] .details-action{font-size:0}.migration-details[open] .details-action::before{font-size:.9rem}
.migration-details .migration-sql-preview{margin:0;border:0;border-top:1px solid var(--jelppa-border);border-radius:0;max-height:300px}
.migration-details .migration-rollback-note{margin:0;border:0;border-top:1px solid var(--jelppa-border);border-radius:0}
@media(max-width:820px){.migration-backup-fields{grid-template-columns:1fr}.migration-details>summary{align-items:flex-start}.migration-details .details-action{font-size:.85rem}}

/* Platform database status */
.database-status-server{display:block;margin-top:3px;color:var(--jelppa-muted)}
.database-status-table td{vertical-align:top}
@media(max-width:900px){.database-status-table{min-width:980px}}

/* Password confirmation is shown only inside the common destructive-action dialog. */
.jelppa-password-confirm-form{margin-top:18px}
.jelppa-password-confirm-form .field{margin:0}

/* Jelppa unified local outline icon library */
.ui-icon{
  width:1.15em;
  height:1.15em;
  display:inline-block;
  flex:0 0 auto;
  vertical-align:-0.16em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.system-nav-icon .ui-icon,.system-nav-subicon .ui-icon{width:18px;height:18px;display:block;margin:auto}
.system-nav-caret .ui-icon{width:15px;height:15px;display:block;transition:transform .16s ease}
.theme-choice .ui-icon{width:15px;height:15px;display:block}
.service-nav-new .ui-icon{width:15px;height:15px;margin-right:5px}