/*!
 * @skillpass/workspace-shell — shell.css
 * Generalt fajl: scripts/build-css.mjs (forras: src/tokens.css + src/components.css)
 */
/*
 * SkillPass Workspace Shell — design-tokenek
 *
 * Forras: specification/plan-v17/02-f2-shell-kontrakt.md 2. fejezet.
 * Minden token `--sp-` prefixu, hogy a fogyaszto sajat valtozoival ne utkozzon.
 * NINCS preflight/reset: a csomag csak a sajat `.sp-*` szelektorait definialja.
 */

:root,
[data-sp-theme="light"] {
  /* Feluletek */
  --sp-bg-canvas: #fbf7f1;
  --sp-bg-surface: #ffffff;
  --sp-bg-subtle: #f7f5f1;
  --sp-border: #e8e4dd;
  --sp-border-strong: #d8d2c8;

  /* Szoveg */
  --sp-text: #1b2340;
  --sp-text-muted: #6b7280;
  --sp-text-inverse: #ffffff;

  /* Markak */
  --sp-brand: #1d6fe0;
  --sp-brand-strong: #1558b5;
  --sp-brand-soft: #eaf2fd;
  --sp-accent: #1d6fe0;
  --sp-accent-soft: rgba(29, 111, 224, 0.1);
  --sp-accent-contrast: #ffffff;

  /* Statusz */
  --sp-success: #22a06b;
  --sp-success-soft: #e6f6ef;
  --sp-warning: #d97706;
  --sp-danger: #dc2626;

  /* Identity-ring */
  --sp-ring: conic-gradient(
    from 210deg,
    #1d6fe0,
    #22a06b,
    #f5c518,
    #f0731d,
    #e2464a,
    #8b5cf6,
    #1d6fe0
  );
  --sp-ring-width: 3px;
  --sp-ring-gap: 2px;
  --sp-ring-gap-color: #ffffff;

  /* Meretek */
  --sp-topbar-h: 68px;
  --sp-sidebar-w: 244px;
  --sp-rail-w: 300px;
  --sp-drawer-w: 396px;
  --sp-switcher-w: 400px;
  --sp-gap: 24px;
  --sp-radius: 12px;
  --sp-radius-sm: 8px;
  --sp-radius-pill: 999px;
  --sp-shadow-card: 0 1px 2px rgba(27, 35, 64, 0.06);
  --sp-shadow-pop: 0 18px 44px rgba(27, 35, 64, 0.16);

  /* Tipografia — kulso font betoltese TILOS (CSP 'self') */
  --sp-font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --sp-font-size: 14px;
  --sp-line-height: 1.45;

  /* Hatter-minta — 0.1.6 ota kikapcsolva: a shell nem hivatkozik ra, a tartalomterulet
     egyszinu (--sp-bg-canvas). A valtozo `none` ertekkel megmarad, hogy a partner
     sajat hivatkozasa erre a tokenre ne torjon. */
  --sp-bg-pattern: none;
}

[data-sp-theme="dark"] {
  --sp-bg-canvas: #12151f;
  --sp-bg-surface: #1a1e2b;
  --sp-bg-subtle: #222739;
  --sp-border: #2a2f3f;
  --sp-border-strong: #3a4156;

  --sp-text: #eef1f7;
  --sp-text-muted: #9aa3b8;
  --sp-text-inverse: #12151f;

  --sp-brand: #5b9bf0;
  --sp-brand-strong: #7db0f5;
  --sp-brand-soft: rgba(91, 155, 240, 0.16);
  --sp-accent: #5b9bf0;
  --sp-accent-soft: rgba(91, 155, 240, 0.18);
  --sp-accent-contrast: #0f1320;

  --sp-success: #3cc78c;
  --sp-success-soft: rgba(60, 199, 140, 0.16);
  --sp-warning: #f0a33c;
  --sp-danger: #f16b6b;

  --sp-ring-gap-color: #1a1e2b;
  --sp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sp-shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/*
 * SkillPass Workspace Shell — komponens-stilusok
 *
 * Minden szelektor `sp-` prefixu. NINCS elem-szelektor, NINCS reset:
 * a fogyaszto sajat stiluslapjat nem befolyasoljuk.
 */

/* ---------------------------------------------------------------- alapok */

.sp-shell {
  display: grid;
  grid-template-columns: var(--sp-sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--sp-topbar-h) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  font-family: var(--sp-font-sans);
  font-size: var(--sp-font-size);
  line-height: var(--sp-line-height);
  color: var(--sp-text);
  background: var(--sp-bg-canvas);
  -webkit-font-smoothing: antialiased;
}

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

.sp-shell__content {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  min-height: 0;
  overflow-y: auto;
  align-items: flex-start;
  gap: var(--sp-gap);
  padding: var(--sp-gap);
  background-color: var(--sp-bg-canvas);
  background-image: none;
}

.sp-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
}

.sp-rail-col {
  flex: 0 0 var(--sp-rail-w);
  width: var(--sp-rail-w);
}

.sp-card {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-bg-surface);
  box-shadow: var(--sp-shadow-card);
}

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

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

.sp-shell :focus-visible {
  outline: 2px solid var(--sp-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- topbar */

.sp-topbar {
  grid-column: 2;
  grid-row: 1;
  z-index: 40;
  display: flex;
  height: var(--sp-topbar-h);
  align-items: center;
  gap: 12px;
  padding: 0 20px 0 28px;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-bg-surface);
}

.sp-topbar__search {
  position: relative;
  display: flex;
  max-width: 600px;
  min-width: 0;
  flex: 1 1 600px;
  align-items: center;
  height: 40px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: var(--sp-bg-surface);
}

.sp-topbar__search-icon {
  flex: 0 0 auto;
  margin-right: 10px;
  color: var(--sp-text-muted);
}

.sp-topbar__search-input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--sp-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.sp-topbar__search-input::placeholder {
  color: var(--sp-text-muted);
}

.sp-kbd {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  background: var(--sp-bg-subtle);
  color: var(--sp-text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.sp-topbar__spacer {
  flex: 1 1 auto;
}

.sp-topbar__context {
  display: flex;
  align-items: center;
}

.sp-topbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-iconbutton {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sp-text-muted);
  cursor: pointer;
}

.sp-iconbutton:hover {
  background: var(--sp-bg-subtle);
  color: var(--sp-text);
}

.sp-iconbutton__dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--sp-bg-surface);
  border-radius: 50%;
  background: #f0731d;
}

/* app pill */

.sp-apppill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  max-width: 220px;
  padding: 0 12px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-bg-surface);
  color: var(--sp-text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sp-apppill:hover {
  background: var(--sp-bg-subtle);
}

.sp-apppill[aria-expanded="true"] {
  border-color: var(--sp-border-strong);
  background: var(--sp-bg-subtle);
}

.sp-apppill__text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  line-height: 1.25;
}

/*
  NOTE: a hosszu app-nev („SuperSkiller”, „AI Bootcamp”) korabban 2-3 sorba
  tordelodott, es az „Aktiv munkater” alsor is elcsuszott. A pill fix
  max-szelessegu, a ket sor pedig egysoros, harompontos csonkolassal jelenik
  meg; a teljes nev a `title` attributumban olvashato.
*/
.sp-apppill__name,
.sp-apppill__sub {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-apppill__name {
  font-size: 14px;
  font-weight: 600;
}

.sp-apppill__sub {
  color: var(--sp-text-muted);
  font-size: 12px;
}

/* user button */

.sp-userbutton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: var(--sp-radius);
  background: transparent;
  color: var(--sp-text);
  cursor: pointer;
  font-family: inherit;
}

.sp-userbutton:hover {
  background: var(--sp-bg-subtle);
}

.sp-userbutton__name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------- identity ring */

.sp-ring {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sp-ring);
  padding: var(--sp-ring-width);
}

.sp-ring__inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--sp-ring-gap) solid var(--sp-ring-gap-color);
  border-radius: 50%;
  background: var(--sp-bg-subtle);
  color: var(--sp-text-muted);
  font-weight: 600;
}

.sp-ring__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.sp-ring__initials {
  font-size: 0.4em;
  letter-spacing: 0.02em;
}

.sp-ring__verified {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34%;
  height: 34%;
  max-width: 24px;
  max-height: 24px;
  min-width: 12px;
  min-height: 12px;
  border: 2px solid var(--sp-ring-gap-color);
  border-radius: 50%;
  background: var(--sp-success);
  color: #fff;
}

/* -------------------------------------------------------------- sidebar */

.sp-sidebar {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  height: 100%;
  min-height: 0;
  width: var(--sp-sidebar-w);
  flex-direction: column;
  border-right: 1px solid var(--sp-border);
  background: var(--sp-bg-surface);
}

.sp-sidebar__brand {
  display: flex;
  height: var(--sp-topbar-h);
  flex: 0 0 var(--sp-topbar-h);
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid transparent;
}

/*
 * A markajel a hivatalos SkillPass.ID logo (lasd `components/Brandmark.tsx`).
 * A logo sajat szines gradienseket hasznal, ezert NINCS alatta tonalt hatter es
 * NINCS `color` orokites: igy vilagos es sotet temaban egyarant jol latszik.
 * A meret a logo 730:680 (~1.07) aranyahoz igazodik.
 */
.sp-brandmark {
  display: flex;
  width: 24px;
  height: 22px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.sp-brandmark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sp-sidebar__brand-name {
  color: var(--sp-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sp-sidebar__app {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px 16px;
}

.sp-sidebar__app-icon {
  display: flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  overflow: hidden;
}

.sp-sidebar__app-name {
  display: flex;
  flex-direction: column;
  color: var(--sp-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.sp-sidebar__app-name span:first-child {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sp-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 12px 12px;
}

.sp-navsection + .sp-navsection {
  margin-top: 18px;
}

.sp-navsection--divided {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-border);
}

.sp-navsection__label {
  margin: 0 0 8px;
  padding: 0 10px;
  color: var(--sp-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sp-navsection__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--sp-text);
  font-size: 14px;
  text-decoration: none;
}

.sp-navitem:hover {
  background: var(--sp-bg-subtle);
}

.sp-navitem__icon {
  flex: 0 0 auto;
  color: var(--sp-text-muted);
}

.sp-navitem__label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-navitem__badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  font-size: 11px;
  font-weight: 600;
}

.sp-navitem[aria-current="page"] {
  background: var(--sp-brand-soft);
  color: var(--sp-brand);
  font-weight: 600;
}

.sp-navitem[aria-current="page"] .sp-navitem__icon {
  color: var(--sp-brand);
}

.sp-sidebar__footer {
  padding: 12px 18px 18px;
  border-top: 1px solid var(--sp-border);
}

.sp-sidebar__footer-title {
  margin: 0 0 8px;
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-sidebar__sync {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sp-text);
  font-size: 13px;
}

.sp-sidebar__sync-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-success);
}

.sp-sidebar__sync--stale .sp-sidebar__sync-icon {
  color: var(--sp-warning);
}

.sp-sidebar__sync--offline .sp-sidebar__sync-icon {
  color: var(--sp-danger);
}

/* ------------------------------------------------------------- switcher */

.sp-switcher-anchor {
  position: relative;
}

.sp-switcher {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  width: var(--sp-switcher-w);
  padding: 18px;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  background: var(--sp-bg-surface);
  box-shadow: var(--sp-shadow-pop);
}

.sp-switcher__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.sp-switcher__subtitle {
  margin: 2px 0 14px;
  color: var(--sp-text-muted);
  font-size: 13px;
}

.sp-switcher__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sp-switcher__cell {
  position: relative;
  display: flex;
  min-height: 108px;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-bg-surface);
  color: var(--sp-text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
}

.sp-switcher__cell:hover {
  background: var(--sp-bg-subtle);
}

.sp-switcher__cell--active {
  border-color: var(--sp-accent);
  background: var(--sp-bg-surface);
}

/* Manifest-ikon: az inline SVG `img`-be zartan jelenik meg (XSS-izolacio),
   ezert a meretet itt is kikenyszeritjuk; a fallback a nev kezdobetuje. */
.sp-appicon {
  display: inline-flex;
  flex: none;
  object-fit: contain;
}

.sp-appicon--fallback {
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/*
 * A kozponti SkillPass munkater ikonja a hivatalos logo: sajat szines
 * gradiensek, ezert NINCS tonalt hatter (sotet modban is jol latszik). Az
 * illesztest a `.sp-appicon` `object-fit: contain` adja.
 */
.sp-appicon--brand {
  background: none;
}

.sp-switcher__cell-icon {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  color: var(--sp-accent);
}

.sp-switcher__cell-icon--brand {
  color: var(--sp-brand);
}

.sp-switcher__cell-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.sp-switcher__cell-status {
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-switcher__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 9px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  font-size: 11px;
  font-weight: 600;
}

.sp-switcher__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sp-border);
  color: var(--sp-brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.sp-switcher__footer-label {
  flex: 1 1 auto;
}

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

.sp-drawer {
  position: fixed;
  z-index: 70;
  top: calc(var(--sp-topbar-h) - 12px);
  right: 0;
  bottom: 0;
  display: flex;
  width: var(--sp-drawer-w);
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid var(--sp-border);
  border-left: 1px solid var(--sp-border);
  border-top-left-radius: 14px;
  background: var(--sp-bg-surface);
  box-shadow: var(--sp-shadow-pop);
}

.sp-drawer__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
}

.sp-drawer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

/*
 * Béta-cimke (`components/BetaBadge.tsx`). A felirat helyes alakja a szotarbol
 * jon („Béta” / „Beta”), ezert a nagybetusites itt kifejezetten tiltott: egy
 * `text-transform: uppercase` szulo sem alakithatja „BÉTA”-va.
 */
.sp-beta-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--sp-brand);
  border-radius: var(--sp-radius-pill);
  background: var(--sp-brand-soft);
  color: var(--sp-brand-strong);
  font-family: var(--sp-font-sans);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 16px;
  text-transform: none;
  white-space: nowrap;
  cursor: default;
}

.sp-drawer__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}

.sp-drawer__profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 18px 18px;
}

.sp-drawer__profile-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-drawer__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.sp-drawer__email {
  overflow: hidden;
  color: var(--sp-text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
}

.sp-pill-success {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-success-soft);
  color: var(--sp-success);
  font-size: 12px;
  font-weight: 600;
}

.sp-idchip {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--sp-border);
  border-radius: 9px;
  background: var(--sp-bg-subtle);
  color: var(--sp-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
}

.sp-idchip__value {
  flex: 1 1 auto;
}

.sp-drawer__links {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.sp-drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--sp-text);
  font-size: 14px;
  text-decoration: none;
}

.sp-drawer__link:hover {
  background: var(--sp-bg-subtle);
}

.sp-drawer__link-icon {
  color: var(--sp-text-muted);
}

.sp-drawer__link-label {
  flex: 1 1 auto;
}

.sp-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  margin: 14px 18px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--sp-brand);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.sp-drawer__cta:hover {
  background: var(--sp-brand-strong);
}

.sp-drawer__section-title {
  margin: 0 18px 10px;
  font-size: 15px;
  font-weight: 700;
}

.sp-drawer__scope {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px;
}

.sp-scoperow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
}

.sp-scoperow__icon {
  display: flex;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--sp-brand-soft);
  color: var(--sp-brand);
}

.sp-scoperow__icon--accent {
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

.sp-scoperow__title {
  font-size: 13px;
  font-weight: 600;
}

.sp-scoperow__subtitle {
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-drawer__info {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-drawer__info-icon {
  flex: 0 0 auto;
  color: var(--sp-brand);
}

.sp-drawer__footer {
  display: flex;
  margin-top: auto;
  border-top: 1px solid var(--sp-border);
}

.sp-drawer__footer-action {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--sp-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.sp-drawer__footer-action + .sp-drawer__footer-action {
  border-left: 1px solid var(--sp-border);
}

.sp-drawer__footer-action:hover {
  background: var(--sp-bg-subtle);
}

/* ---------------------------------------------------- offline profile menu */

.sp-profilemenu {
  position: fixed;
  z-index: 70;
  top: calc(var(--sp-topbar-h) - 6px);
  right: var(--sp-gap);
  display: flex;
  width: min(300px, calc(100vw - 2 * var(--sp-gap)));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  background: var(--sp-bg-surface);
  box-shadow: var(--sp-shadow-pop);
}

.sp-profilemenu:focus {
  outline: none;
}

.sp-profilemenu__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--sp-border);
}

.sp-profilemenu__name {
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 700;
}

.sp-profilemenu__email {
  overflow: hidden;
  color: var(--sp-text-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-profilemenu__note {
  margin-top: 8px;
  color: var(--sp-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.sp-profilemenu__items {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.sp-profilemenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: var(--sp-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.sp-profilemenu__item:hover,
.sp-profilemenu__item:focus-visible {
  background: var(--sp-bg-subtle);
}

/* ----------------------------------------------------------- page header */

.sp-pageheader__title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.sp-pageheader__subtitle {
  margin: 8px 0 0;
  color: var(--sp-text-muted);
  font-size: 15px;
}

/* -------------------------------------------------------------- grid-ek */

.sp-grid {
  display: grid;
  gap: 16px;
}

.sp-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sp-row > * {
  min-width: 0;
  flex: 1 1 0;
}

.sp-row > .sp-activity {
  flex: 1.25 1 0;
}

/* ------------------------------------------------------------- stat card */

.sp-statcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.sp-statcard__icon {
  display: flex;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

.sp-statcard__icon--square {
  border-radius: 12px;
}

.sp-statcard__body {
  min-width: 0;
  flex: 1 1 auto;
}

.sp-statcard__title {
  color: var(--sp-text-muted);
  font-size: 13px;
}

.sp-statcard__value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sp-statcard__subtitle {
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-statcard__chevron {
  flex: 0 0 auto;
  color: var(--sp-text-muted);
}

.sp-statcard--stacked {
  flex-direction: row;
  align-items: flex-start;
}

.sp-statcard--stacked .sp-statcard__value {
  font-size: 24px;
}

.sp-progress {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-bg-subtle);
}

.sp-progress__bar {
  height: 100%;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-accent);
}

/* -------------------------------------------------------------- app card */

.sp-section {
  padding: 18px;
}

.sp-section__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.sp-section__titles {
  flex: 1 1 auto;
}

.sp-section__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.sp-section__subtitle {
  margin: 4px 0 0;
  color: var(--sp-text-muted);
  font-size: 13px;
}

.sp-section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sp-brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sp-appcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-bg-surface);
}

.sp-appcard__icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
}

.sp-appcard__menu {
  position: absolute;
  top: 12px;
  right: 10px;
}

.sp-appcard__name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.sp-appcard__status {
  color: var(--sp-text-muted);
  font-size: 13px;
}

.sp-appcard__status strong {
  color: var(--sp-text);
  font-weight: 700;
}

.sp-appcard__open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* -------------------------------------------------------------- hero card */

.sp-hero {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: stretch;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-bg-surface);
  box-shadow: var(--sp-shadow-card);
}

.sp-hero__body {
  min-width: 0;
  flex: 1 1 58%;
}

.sp-hero__kicker {
  color: var(--sp-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sp-hero__title {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--sp-text-muted);
  font-size: 14px;
}

.sp-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sp-hero__description {
  margin: 12px 0 0;
  max-width: 460px;
  color: var(--sp-text);
  font-size: 14px;
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.sp-hero__illustration {
  position: relative;
  flex: 1 1 42%;
  min-width: 0;
}

.sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.sp-button--primary {
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
}

.sp-button--secondary {
  border-color: var(--sp-border-strong);
  background: var(--sp-bg-surface);
  color: var(--sp-text);
}

/* ---------------------------------------------------------------- stepper */

.sp-stepper {
  padding: 16px 20px 20px;
}

.sp-stepper__title {
  margin: 0 0 14px;
  color: var(--sp-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sp-stepper__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-stepper__item {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
}

.sp-stepper__item:last-child {
  flex: 0 0 auto;
}

.sp-stepper__index {
  display: flex;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  font-size: 13px;
  font-weight: 700;
}

.sp-stepper__item--active .sp-stepper__index {
  background: var(--sp-accent);
  color: var(--sp-accent-contrast);
}

.sp-stepper__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sp-stepper__sublabel {
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-stepper__line {
  flex: 1 1 auto;
  height: 2px;
  margin: 0 14px;
  border-radius: 2px;
  background: var(--sp-text-muted);
  opacity: 0.38;
}

/* ------------------------------------------------------------ activity */

.sp-activity__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-activityrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
}

.sp-activityrow__icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

.sp-activityrow__body {
  min-width: 0;
  flex: 1 1 auto;
}

.sp-activityrow__title {
  font-size: 14px;
  font-weight: 600;
}

.sp-activityrow__subtitle {
  color: var(--sp-text-muted);
  font-size: 12px;
}

.sp-activityrow__meta {
  flex: 0 0 auto;
  color: var(--sp-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.sp-statuspill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sp-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.sp-statuspill__icon {
  color: var(--sp-success);
}

/* ---------------------------------------------------------- quick access */

.sp-quick__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sp-quicktile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.sp-quicktile:hover {
  background: var(--sp-bg-subtle);
}

.sp-quicktile__icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

.sp-quicktile__body {
  min-width: 0;
  flex: 1 1 auto;
}

.sp-quicktile__title {
  font-size: 14px;
  font-weight: 600;
}

.sp-quicktile__subtitle {
  color: var(--sp-text-muted);
  font-size: 12px;
}

/* ------------------------------------------------------------ right rail */

.sp-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-railcard {
  display: flex;
  gap: 12px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.sp-railcard__icon {
  display: flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sp-brand-soft);
  color: var(--sp-brand);
}

.sp-railcard__icon--success {
  background: var(--sp-success-soft);
  color: var(--sp-success);
}

.sp-railcard__body {
  min-width: 0;
  flex: 1 1 auto;
}

.sp-railcard__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.sp-railcard__text {
  margin: 6px 0 0;
  color: var(--sp-text-muted);
  font-size: 13px;
}

.sp-railcard__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--sp-brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.sp-railcard__chevron {
  flex: 0 0 auto;
  align-self: center;
  color: var(--sp-text-muted);
}

.sp-railcard--quote {
  flex-direction: column;
  gap: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sp-railcard__quotemark {
  color: var(--sp-border-strong);
}

.sp-railcard__quote {
  margin: 0;
  color: var(--sp-text-muted);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}

.sp-railcard__cite {
  color: var(--sp-text-muted);
  font-size: 13px;
  font-style: normal;
}

/* ------------------------------------------------------------- reszponziv */

.sp-sidebar__toggle,
.sp-topbar__search-toggle {
  display: none;
}

@media (max-width: 1280px) {
  .sp-rail-col {
    display: none;
  }
}

@media (max-width: 1024px) {
  .sp-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-topbar,
  .sp-shell__content {
    grid-column: 1;
  }

  .sp-sidebar {
    position: fixed;
    z-index: 80;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
  }

  .sp-shell--menu-open .sp-sidebar {
    transform: translateX(0);
    box-shadow: var(--sp-shadow-pop);
  }

  .sp-sidebar__toggle {
    display: inline-flex;
  }

  .sp-topbar__search {
    flex-basis: 260px;
  }

  .sp-apppill {
    max-width: 168px;
  }

  .sp-drawer {
    width: 100%;
    top: 0;
    border-top-left-radius: 0;
  }

  .sp-switcher {
    width: min(var(--sp-switcher-w), calc(100vw - 24px));
  }
}

/*
  NOTE: mobil topbar (≤640px). Korabban a kereso mezo, a
  ⌘K jelzes, a ket soros app-pill es a profilnev nem fert ki, a sugo- es a
  profil-gomb a viewporton kivulre csuszott (scrollWidth 432 / clientWidth 390).
  Itt a kereso ikongomb lesz, a sugo rejtett, az app-pill ikon + rovid nev (alcim
  nelkul), a profil-gomb csak avatar; minden elem zsugorodhat, semmi nem log ki
  es nem fed at (320px-ig ellenorizve).
*/
@media (max-width: 640px) {
  .sp-topbar {
    position: relative;
    gap: 4px;
    padding: 0 10px;
  }

  .sp-topbar__search,
  .sp-topbar .sp-kbd,
  .sp-topbar__help,
  .sp-topbar .sp-apppill__sub,
  .sp-userbutton__name,
  .sp-userbutton__chevron {
    display: none;
  }

  .sp-topbar__search-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .sp-topbar__context,
  .sp-switcher-anchor {
    min-width: 0;
    flex: 0 1 auto;
  }

  .sp-topbar__actions {
    flex: 0 0 auto;
    gap: 2px;
  }

  .sp-apppill {
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    height: 40px;
    padding: 0 6px;
  }

  .sp-apppill > * {
    flex-shrink: 0;
  }

  .sp-apppill > .sp-apppill__text {
    min-width: 0;
    max-width: 104px;
    flex: 0 1 auto;
  }

  .sp-apppill__name {
    font-size: 13px;
  }

  .sp-userbutton {
    gap: 0;
    height: 40px;
    padding: 0 2px;
  }

  .sp-topbar--search-open .sp-topbar__search {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 10px;
    left: 10px;
    display: flex;
    max-width: none;
    transform: translateY(-50%);
    box-shadow: var(--sp-shadow-pop);
  }

  .sp-switcher {
    position: fixed;
    top: calc(var(--sp-topbar-h) - 4px);
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - var(--sp-topbar-h) - 16px);
    max-height: calc(100dvh - var(--sp-topbar-h) - 16px);
    overflow-y: auto;
  }
}

/* Erintokepernyon (nincs hover) a billentyuparancs-tipp (⌘ K) felesleges. */
@media (hover: none) {
  .sp-kbd {
    display: none;
  }
}

/*
  NOTE: mobil tartalom-kartyak (≤640px). 360/390px-en a ket oszlopos stat-kartyakban
  az 52px-es ikon + chevron mellett ~35px maradt a szovegnek, a cimek (pl.
  „Dokumentumok”) kilogtak a kartyabol es a chevron ratakart a szovegre; a gyors-
  eleres csempek ugyanigy. Itt a stat-kartya fuggoleges (ikon felul, chevron a jobb
  felso sarokban), a gyors-eleres racs egy oszlopos.
*/
@media (max-width: 640px) {
  .sp-statcard {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .sp-statcard__icon {
    width: 40px;
    height: 40px;
  }

  .sp-statcard__body {
    width: 100%;
  }

  .sp-statcard__title,
  .sp-statcard__subtitle,
  .sp-quicktile__title,
  .sp-quicktile__subtitle {
    overflow-wrap: anywhere;
  }

  .sp-statcard > .sp-statcard__chevron {
    position: absolute;
    top: 14px;
    right: 12px;
  }

  .sp-quick__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Erintesi cel legalabb 24px (WCAG 2.2 SC 2.5.8). */
  .sp-section__link {
    min-height: 24px;
  }
}

/*
  NOTE: 320–359px-en a kontextus-slottal egyutt a rovid app-nev mar nem ferne ki
  ertelmesen (par pixeles „…”), ezert ilyenkor a pill csak ikon + chevron.
*/
@media (max-width: 359px) {
  .sp-topbar {
    padding: 0 6px;
    gap: 2px;
  }

  .sp-topbar:has(.sp-topbar__context) .sp-apppill__text {
    display: none;
  }
}

/* ------------------------------------------------ inline elemek blokkosítása */

.sp-statcard__body,
.sp-statcard__title,
.sp-statcard__value,
.sp-statcard__subtitle,
.sp-appcard__status,
.sp-activityrow__title,
.sp-activityrow__subtitle,
.sp-quicktile__title,
.sp-quicktile__subtitle,
.sp-scoperow__title,
.sp-scoperow__subtitle,
.sp-switcher__cell-name,
.sp-switcher__cell-status,
.sp-apppill__name,
.sp-apppill__sub,
.sp-stepper__label,
.sp-stepper__sublabel,
.sp-hero__kicker,
.sp-drawer__email {
  display: block;
}