@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/**
 * specht App — Design System
 *
 * Single source of truth for all colors, spacing, typography.
 * Defines both --spa-* (app) and --swp-* (portal) variables
 * for backward compatibility.
 *
 * @package specht-weclapp
 * @since   2.2.0
 */

/* ══════════════════════════════════════════════════════════════════════
 *  1. Design Tokens (CSS Custom Properties)
 * ══════════════════════════════════════════════════════════════════════ */

:root,
.pleniofy-app {
    /* ── Brand Colors ─────────────────────────────── */
    --spa-primary:        #6C3FC5;
    --spa-primary-hover:  #4D2A9A;
    --spa-primary-light:  #F3EFFE;
    --spa-primary-dark:   #1A0A3C;
    --spa-accent:         #00C896;

    /* ── Semantic Colors ──────────────────────────── */
    --spa-success:        #00C896;
    --spa-success-bg:     #D4FFF3;
    --spa-warning:        #f59e0b;
    --spa-warning-bg:     #fff3cd;
    --spa-danger:         #dc3545;
    --spa-danger-bg:      #fef2f2;
    --spa-info:           #3b82f6;
    --spa-info-bg:        #dbeafe;

    /* ── Neutrals ─────────────────────────────────── */
    --spa-white:          #ffffff;
    --spa-bg:             #FAFAFA;
    --spa-bg-card:        #ffffff;
    --spa-border:         #E8E0FA;
    --spa-border-light:   #F3EFFE;
    --spa-divider:        #eee;

    /* ── Text ─────────────────────────────────────── */
    --spa-text:           #1e293b;
    --spa-text-secondary: #666;
    --spa-muted:          #999;
    --spa-muted-light:    #bbb;

    /* ── Typography Scale ─────────────────────────── */
    --spa-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --spa-font-mono:      "SF Mono", "Fira Code", Consolas, monospace;
    --spa-text-xs:        10px;
    --spa-text-sm:        11px;
    --spa-text-base:      13px;
    --spa-text-md:        14px;
    --spa-text-lg:        16px;
    --spa-text-xl:        18px;
    --spa-text-2xl:       22px;

    /* ── Spacing Scale ────────────────────────────── */
    --spa-space-xs:       4px;
    --spa-space-sm:       6px;
    --spa-space-md:       8px;
    --spa-space-lg:       12px;
    --spa-space-xl:       16px;
    --spa-space-2xl:      24px;

    /* ── Radius ───────────────────────────────────── */
    --spa-radius-sm:      6px;
    --spa-radius:         8px;
    --spa-radius-lg:      16px;
    --spa-radius-full:    50%;

    /* ── Shadows ──────────────────────────────────── */
    --spa-shadow:         0 1px 3px rgba(0,0,0,.08);
    --spa-shadow-md:      0 4px 6px rgba(0,0,0,.07);
    --spa-shadow-lg:      0 10px 15px rgba(0,0,0,.1);

    /* ── Backward compat: --swp-* aliases ─────────── */
    --swp-primary:        var(--spa-primary);
    --swp-primary-hover:  var(--spa-primary-hover);
    --swp-success:        var(--spa-success);
    --swp-warning:        var(--spa-warning);
    --swp-error:          var(--spa-danger);
    --swp-info:           var(--spa-info);
    --swp-bg:             var(--spa-white);
    --swp-bg-subtle:      var(--spa-bg);
    --swp-border:         var(--spa-border);
    --swp-text:           var(--spa-text);
    --swp-text-muted:     var(--spa-muted);
    --swp-radius:         var(--spa-radius-lg);
    --swp-shadow:         var(--spa-shadow);
    --swp-shadow-md:      var(--spa-shadow-md);
}

/* ══════════════════════════════════════════════════════════════════════
 *  2. Base Reset (scoped to .pleniofy-app)
 * ══════════════════════════════════════════════════════════════════════ */

.pleniofy-app {
    font-family: var(--spa-font);
    font-size: var(--spa-text-base);
    color: var(--spa-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.pleniofy-app *, .pleniofy-app *::before, .pleniofy-app *::after {
    box-sizing: border-box;
}
.pleniofy-app a { color: var(--spa-primary); text-decoration: none; }
.pleniofy-app a:hover { color: var(--spa-primary-hover); }

/* ══════════════════════════════════════════════════════════════════════
 *  3. Layout Components
 * ══════════════════════════════════════════════════════════════════════ */

.spa-page-title {
    font-size: var(--spa-text-lg);
    font-weight: 700;
    margin: 0 0 var(--spa-space-xl);
    color: var(--spa-text);
}

/* ── Cards ─────────────────────────────────────────── */
.spa-settings-card,
.spa-card {
    background: var(--spa-bg-card);
    border: 1px solid var(--spa-border-light);
    border-radius: var(--spa-radius-lg);
    padding: var(--spa-space-xl);
    margin-bottom: var(--spa-space-lg);
}
.spa-card-title {
    font-size: var(--spa-text-md);
    font-weight: 700;
    margin: 0 0 var(--spa-space-lg);
    display: flex;
    align-items: center;
    gap: var(--spa-space-sm);
}

/* ── Buttons ───────────────────────────────────────── */
.spa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spa-space-xs);
    padding: var(--spa-space-sm) var(--spa-space-lg);
    font-size: var(--spa-text-sm);
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--spa-border);
    border-radius: var(--spa-radius);
    background: var(--spa-white);
    color: var(--spa-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.spa-btn:hover {
    background: var(--spa-bg);
    border-color: var(--spa-muted);
}
.spa-btn-primary {
    background: var(--spa-primary);
    color: var(--spa-white);
    border-color: var(--spa-primary);
}
.spa-btn-primary:hover {
    background: var(--spa-primary-hover);
    border-color: var(--spa-primary-hover);
    color: var(--spa-white);
}
.spa-btn-secondary {
    background: var(--spa-bg);
    border-color: var(--spa-border);
    color: var(--spa-text-secondary);
}
.spa-btn-danger {
    background: var(--spa-danger);
    color: var(--spa-white);
    border-color: var(--spa-danger);
}
.spa-btn-sm {
    padding: var(--spa-space-xs) var(--spa-space-md);
    font-size: var(--spa-text-xs);
}
.spa-btn-lg {
    padding: var(--spa-space-md) var(--spa-space-2xl);
    font-size: var(--spa-text-base);
}
.spa-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Form Fields ───────────────────────────────────── */
.spa-field {
    margin-bottom: var(--spa-space-lg);
}
.spa-field label {
    display: block;
    font-size: var(--spa-text-sm);
    font-weight: 600;
    color: var(--spa-text-secondary);
    margin-bottom: var(--spa-space-xs);
}
.spa-field input[type="text"],
.spa-field input[type="email"],
.spa-field input[type="url"],
.spa-field input[type="password"],
.spa-field input[type="number"],
.spa-field input[type="date"],
.spa-field input[type="time"],
.spa-field textarea,
.spa-field select {
    width: 100%;
    padding: var(--spa-space-sm) var(--spa-space-md);
    font-size: var(--spa-text-base);
    font-family: inherit;
    border: 1px solid var(--spa-border);
    border-radius: var(--spa-radius);
    background: var(--spa-white);
    color: var(--spa-text);
    transition: border-color 0.15s;
}
.spa-field input:focus,
.spa-field textarea:focus,
.spa-field select:focus {
    outline: none;
    border-color: var(--spa-primary);
    box-shadow: 0 0 0 2px var(--spa-primary-light);
}

/* ── Badges / Status ───────────────────────────────── */
.spa-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--spa-space-md);
    font-size: var(--spa-text-sm);
    font-weight: 600;
    border-radius: var(--spa-radius-sm);
    line-height: 1.8;
}
.spa-badge-success { background: var(--spa-success-bg); color: #155724; }
.spa-badge-warning { background: var(--spa-warning-bg); color: #856404; }
.spa-badge-danger  { background: var(--spa-danger-bg);  color: #721c24; }
.spa-badge-info    { background: var(--spa-info-bg);    color: #1e40af; }
.spa-badge-muted   { background: #e8e8e8;              color: var(--spa-text-secondary); }
.spa-badge-active  { background: var(--spa-primary);    color: var(--spa-white); }

/* ── Tabs ──────────────────────────────────────────── */
.spa-tab {
    padding: var(--spa-space-md) var(--spa-space-xl);
    border: none;
    background: none;
    font-size: var(--spa-text-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--spa-text-secondary);
    transition: all 0.15s;
}
.spa-tab:hover { color: var(--spa-text); }
.spa-tab-active,
.spa-tab.active {
    color: var(--spa-primary);
    border-bottom-color: var(--spa-primary);
}

/* ── Nav / Sidebar ─────────────────────────────────── */
.spa-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spa-space-md);
    padding: var(--spa-space-md) var(--spa-space-lg);
    font-size: var(--spa-text-base);
    color: var(--spa-text);
    text-decoration: none;
    border-radius: var(--spa-radius);
    transition: background 0.15s;
}
.spa-nav-item:hover { background: var(--spa-bg); }
.spa-nav-item.active {
    background: var(--spa-primary-light);
    color: var(--spa-primary);
    font-weight: 600;
}
.spa-nav-separator {
    font-size: var(--spa-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--spa-muted);
    padding: var(--spa-space-lg) var(--spa-space-lg) var(--spa-space-xs);
    font-weight: 700;
}

/* ── Tables / Lists ────────────────────────────────── */
.spa-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spa-space-lg) 0;
    border-bottom: 1px solid var(--spa-border-light);
    gap: var(--spa-space-md);
}
.spa-list-item:last-child { border-bottom: none; }

/* ── Dashboard Widgets ─────────────────────────────── */
.spa-widget {
    background: var(--spa-bg-card);
    border: 1px solid var(--spa-border-light);
    border-radius: var(--spa-radius-lg);
    padding: var(--spa-space-xl);
    min-height: 120px;
}
.spa-widget-title {
    font-size: var(--spa-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--spa-muted);
    margin: 0 0 var(--spa-space-lg);
}
.spa-widget-stat {
    font-size: var(--spa-text-2xl);
    font-weight: 700;
    line-height: 1.2;
}

/* ── Alerts / Messages ─────────────────────────────── */
.spa-alert {
    padding: var(--spa-space-lg) var(--spa-space-xl);
    border-radius: var(--spa-radius);
    font-size: var(--spa-text-sm);
    margin-bottom: var(--spa-space-lg);
}
.spa-alert-info    { background: var(--spa-info-bg);    color: #1e40af; border: 1px solid #bfdbfe; }
.spa-alert-success { background: var(--spa-success-bg); color: #155724; border: 1px solid #c3e6cb; }
.spa-alert-warning { background: var(--spa-warning-bg); color: #856404; border: 1px solid #ffeeba; }
.spa-alert-danger  { background: var(--spa-danger-bg);  color: #721c24; border: 1px solid #f5c6cb; }

/* ── Empty States ──────────────────────────────────── */
.spa-empty {
    text-align: center;
    padding: var(--spa-space-2xl);
    color: var(--spa-muted);
    font-size: var(--spa-text-sm);
}

/* ── Drawer / Mobile Nav ───────────────────────────── */
.spa-drawer-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.spa-drawer-overlay.open { opacity: 1; visibility: visible; }

.spa-drawer {
    position: fixed; top: 0; left: -280px; bottom: 0;
    width: 280px;
    background: var(--spa-white);
    z-index: 2200;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: var(--spa-shadow-lg);
}
.spa-drawer.open { left: 0; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    .spa-settings-card { padding: var(--spa-space-lg); }
    .spa-btn { padding: var(--spa-space-sm) var(--spa-space-md); }
}

/* ══════════════════════════════════════════════════════════════════════
 *  4. Utility Classes (replacing common inline styles)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Text ──────────────────────────────────────────── */
.spa-text-xs   { font-size: var(--spa-text-xs) !important; }
.spa-text-sm   { font-size: var(--spa-text-sm) !important; }
.spa-text-base { font-size: var(--spa-text-base) !important; }
.spa-text-md   { font-size: var(--spa-text-md) !important; }
.spa-text-lg   { font-size: var(--spa-text-lg) !important; }
.spa-text-xl   { font-size: var(--spa-text-xl) !important; }
.spa-text-2xl  { font-size: var(--spa-text-2xl) !important; }
.spa-text-muted    { color: var(--spa-muted) !important; }
.spa-text-secondary{ color: var(--spa-text-secondary) !important; }
.spa-text-success  { color: var(--spa-success) !important; }
.spa-text-danger   { color: var(--spa-danger) !important; }
.spa-text-warning  { color: var(--spa-warning) !important; }
.spa-text-primary  { color: var(--spa-primary) !important; }
.spa-font-bold     { font-weight: 700 !important; }
.spa-font-semibold { font-weight: 600 !important; }
.spa-font-mono     { font-family: var(--spa-font-mono) !important; }
.spa-text-center   { text-align: center !important; }
.spa-text-right    { text-align: right !important; }
.spa-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Hint/Help text (most common pattern: 17 occurrences) ── */
.spa-hint {
    font-size: var(--spa-text-sm);
    color: var(--spa-muted);
}
.spa-help {
    font-size: var(--spa-text-sm);
    color: var(--spa-muted);
    margin-top: 2px;
}
.spa-caption {
    font-size: var(--spa-text-xs);
    color: var(--spa-muted);
}

/* ── Card Title (14 occurrences) ── */
.spa-card-title,
.spa-section-title {
    margin: 0 0 var(--spa-space-lg);
    font-size: var(--spa-text-md);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spa-space-sm);
}

/* ── Spacing ───────────────────────────────────────── */
.spa-mt-0   { margin-top: 0 !important; }
.spa-mt-xs  { margin-top: var(--spa-space-xs) !important; }
.spa-mt-sm  { margin-top: var(--spa-space-sm) !important; }
.spa-mt-md  { margin-top: var(--spa-space-md) !important; }
.spa-mt-lg  { margin-top: var(--spa-space-lg) !important; }
.spa-mt-xl  { margin-top: var(--spa-space-xl) !important; }
.spa-mt-2xl { margin-top: var(--spa-space-2xl) !important; }
.spa-mb-0   { margin-bottom: 0 !important; }
.spa-mb-sm  { margin-bottom: var(--spa-space-sm) !important; }
.spa-mb-md  { margin-bottom: var(--spa-space-md) !important; }
.spa-mb-lg  { margin-bottom: var(--spa-space-lg) !important; }
.spa-p-0    { padding: 0 !important; }
.spa-p-sm   { padding: var(--spa-space-sm) !important; }
.spa-p-md   { padding: var(--spa-space-md) !important; }
.spa-p-lg   { padding: var(--spa-space-lg) !important; }
.spa-p-xl   { padding: var(--spa-space-xl) !important; }
.spa-gap-xs { gap: var(--spa-space-xs); }
.spa-gap-sm { gap: var(--spa-space-sm); }
.spa-gap-md { gap: var(--spa-space-md); }
.spa-gap-lg { gap: var(--spa-space-lg); }

/* ── Layout ────────────────────────────────────────── */
.spa-flex        { display: flex; }
.spa-flex-col    { display: flex; flex-direction: column; }
.spa-flex-center { display: flex; align-items: center; }
.spa-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.spa-flex-wrap   { flex-wrap: wrap; }
.spa-flex-1      { flex: 1; }
.spa-grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spa-space-md); }
.spa-grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spa-space-md); }
.spa-grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spa-space-md); }
.spa-w-full      { width: 100%; }
.spa-hidden      { display: none !important; }

/* ── Borders ───────────────────────────────────────── */
.spa-border-b     { border-bottom: 1px solid var(--spa-border-light); }
.spa-border-t     { border-top: 1px solid var(--spa-border-light); }
.spa-divider      { border-top: 1px solid var(--spa-divider); padding-top: var(--spa-space-lg); margin-top: var(--spa-space-lg); }

/* ── Stat Displays ─────────────────────────────────── */
.spa-stat {
    text-align: center;
}
.spa-stat-value {
    font-size: var(--spa-text-2xl);
    font-weight: 700;
    line-height: 1.2;
}
.spa-stat-label {
    font-size: var(--spa-text-sm);
    color: var(--spa-muted);
    margin-top: 2px;
}

/* ── Device Icons ──────────────────────────────────── */
.spa-device-item {
    display: flex;
    align-items: center;
    gap: var(--spa-space-md);
    padding: var(--spa-space-md) 0;
    border-bottom: 1px solid var(--spa-border-light);
}
.spa-device-item:last-child { border-bottom: none; }
.spa-device-icon { font-size: 24px; }
.spa-device-info { flex: 1; }
.spa-device-name { font-weight: 600; font-size: var(--spa-text-base); }
.spa-device-meta { font-size: var(--spa-text-sm); color: var(--spa-muted); }
.spa-device-current {
    font-size: var(--spa-text-xs);
    padding: 1px 6px;
    background: var(--spa-primary);
    color: var(--spa-white);
    border-radius: var(--spa-radius-sm);
}
.spa-device-online {
    font-size: var(--spa-text-xs);
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--spa-success-bg);
    color: #155724;
}
.spa-device-offline {
    font-size: var(--spa-text-xs);
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--spa-bg);
    color: var(--spa-muted);
}

/* ── Team Availability ─────────────────────────────── */
.spa-team-member {
    display: flex;
    align-items: center;
    gap: var(--spa-space-sm);
    padding: var(--spa-space-xs) 0;
    font-size: var(--spa-text-sm);
}
.spa-team-name { flex: 1; font-weight: 500; }
.spa-team-status { color: var(--spa-muted); font-size: var(--spa-text-sm); }

/* ── Module Toggle Row ─────────────────────────────── */
.spa-mod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spa-space-lg) 0;
    border-bottom: 1px solid var(--spa-border-light);
}
.spa-mod-row:last-child { border-bottom: none; }
.spa-mod-name { font-size: var(--spa-text-base); font-weight: 600; }
.spa-mod-desc { font-size: var(--spa-text-sm); color: var(--spa-muted); margin-top: 2px; }
.spa-mod-badge-addon {
    font-size: 9px;
    padding: 1px 5px;
    background: var(--spa-bg);
    border-radius: 2px;
    color: var(--spa-muted);
}

/* ── Calendar ──────────────────────────────────────── */
.spa-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spa-space-md);
    margin-bottom: var(--spa-space-lg);
    font-size: var(--spa-text-sm);
}
.spa-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spa-space-lg);
}
.spa-cal-title {
    margin: 0;
    font-size: var(--spa-text-lg);
}
.spa-bal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spa-space-md);
    text-align: center;
}

/* ── Connector Editor ──────────────────────────────── */
.spa-conn-item {
    border: 1px solid var(--spa-border);
    border-radius: var(--spa-radius);
    padding: var(--spa-space-lg) var(--spa-space-lg);
    margin-bottom: var(--spa-space-md);
}
.spa-conn-editor {
    border: 2px solid var(--spa-primary);
}
.spa-map-editor {
    border: 2px solid var(--spa-accent);
}

/* ── Settings Actions (Save row) ───────────────────── */
.spa-settings-actions {
    display: flex;
    align-items: center;
    gap: var(--spa-space-md);
    margin-top: var(--spa-space-lg);
}
.spa-settings-status {
    font-size: var(--spa-text-sm);
    padding: var(--spa-space-sm) var(--spa-space-lg);
    border-radius: var(--spa-radius);
}
.spa-saved-indicator {
    font-size: var(--spa-text-sm);
    color: var(--spa-success);
    opacity: 0;
    transition: opacity 0.3s;
}
.spa-saved-indicator.show { opacity: 1; }

/* ── Org chart (Organization view) ───────────────────────────── */
.spa-org-loading{ padding:24px; color:var(--spa-text-secondary); }
.spa-org-empty{ text-align:center; padding:48px 24px; background:var(--spa-bg-card); border:1px solid var(--spa-border); border-radius:16px; }
.spa-org-empty-title{ font-weight:700; color:var(--spa-text); margin-bottom:6px; }
.spa-org-empty-hint{ color:var(--spa-text-secondary); font-size:14px; }
.spa-org-team{ background:var(--spa-bg-card); border:1px solid var(--spa-border); border-radius:16px; padding:16px; margin-bottom:16px; }
.spa-org-team-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-left:12px; border-left:3px solid var(--spa-primary); }
.spa-org-team-title{ font-weight:700; color:var(--spa-text); font-size:16px; margin-right:auto; }
.spa-org-type{ display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--spa-primary); background:var(--spa-primary-light); border-radius:9999px; padding:2px 8px; vertical-align:middle; }
.spa-org-members{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.spa-org-chip{ display:flex; align-items:center; gap:8px; background:var(--spa-bg); border:1px solid var(--spa-border); border-radius:9999px; padding:5px 14px 5px 5px; min-height:44px; box-sizing:border-box; }
.spa-org-chip-lead{ background:var(--spa-primary-light); border-color:var(--spa-primary); }
.spa-org-avatar{ flex:0 0 auto; width:34px; height:34px; border-radius:9999px; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.spa-org-chip-meta{ display:flex; flex-direction:column; line-height:1.2; }
.spa-org-chip-name{ font-size:13px; font-weight:600; color:var(--spa-text); }
.spa-org-chip-pos{ font-size:11px; color:var(--spa-text-secondary); }
.spa-org-badge-lead{ display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#fff; background:var(--spa-primary); border-radius:9999px; padding:1px 6px; margin-left:2px; vertical-align:middle; }
.spa-org-sub{ margin:14px 0 0 16px; padding-left:12px; border-left:1px dashed var(--spa-border); }
.spa-org-unassigned .spa-org-team-head{ border-left-color:var(--spa-divider); }
.spa-org-hint{ font-size:12px; color:var(--spa-text-secondary); margin-top:10px; }
@media (max-width:600px){
    .spa-org-team{ padding:12px; }
    .spa-org-sub{ margin-left:8px; padding-left:8px; }
    .spa-org-team-title{ font-size:15px; }
}

/* ══════════════════════════════════════════════════════════════════════
 *  Mitarbeiter-Liste + Employee Drawer (Block 0)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar / Suche ── */
.spa-staff-toolbar { margin-bottom: 14px; }
.spa-staff-search {
    width: 100%; max-width: 360px;
    padding: 10px 14px;
    border: 1px solid var(--spa-border);
    border-radius: var(--spa-radius);
    font-size: var(--spa-text-sm); font-family: inherit;
    background: var(--spa-white); color: var(--spa-text);
    box-sizing: border-box;
}
.spa-staff-search:focus { outline: none; border-color: var(--spa-primary); box-shadow: 0 0 0 3px var(--spa-primary-light); }

/* ── Liste ── */
.spa-staff-list { display: flex; flex-direction: column; gap: 8px; }
.spa-staff-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    background: var(--spa-white);
    border: 1px solid var(--spa-border);
    border-radius: var(--spa-radius-lg);
    padding: 10px 14px;
    cursor: pointer; font: inherit; color: inherit;
    min-height: 56px;
    transition: border-color .12s ease, background .12s ease;
}
.spa-staff-row:hover { border-color: var(--spa-primary); background: var(--spa-primary-light); }
.spa-staff-row:focus-visible { outline: 2px solid var(--spa-primary); outline-offset: 2px; }
.spa-staff-row-main { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.spa-staff-row-name { font-weight: 600; color: var(--spa-text); font-size: var(--spa-text-sm); }
.spa-staff-row-sub { font-size: var(--spa-text-xs); color: var(--spa-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.spa-staff-row-badges { display: flex; gap: 6px; flex-shrink: 0; }
.spa-staff-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--spa-primary); background: var(--spa-primary-light);
    border-radius: 9999px; padding: 3px 9px; white-space: nowrap;
}
.spa-staff-badge-muted { color: var(--spa-text-secondary); background: var(--spa-bg); border: 1px solid var(--spa-border); }

/* ── Employee Drawer (rechts; mobil Vollbild) ── */
.spa-emp-overlay {
    position: fixed; inset: 0;
    background: rgba(26,10,60,.45);
    z-index: 2300; opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.spa-emp-overlay.open { opacity: 1; visibility: visible; }
.spa-emp-overlay[hidden] { display: none; }

.spa-emp-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 100vw;
    background: var(--spa-white);
    z-index: 2400;
    box-shadow: -8px 0 32px rgba(26,10,60,.18);
    transform: translateX(100%);
    transition: transform .22s ease;
    display: flex; flex-direction: column;
}
.spa-emp-drawer.open { transform: translateX(0); }
.spa-emp-drawer[hidden] { display: none; }

.spa-emp-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--spa-border); flex-shrink: 0; }
.spa-emp-title { font-weight: 700; font-size: var(--spa-text-lg); color: var(--spa-text); margin-right: auto; }
.spa-emp-close {
    border: none; background: transparent; font-size: 26px; line-height: 1;
    color: var(--spa-text-secondary); cursor: pointer;
    width: 44px; height: 44px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.spa-emp-close:hover { background: var(--spa-bg); color: var(--spa-text); }
.spa-emp-body { flex: 1; overflow-y: auto; padding: 20px; }
.spa-emp-foot { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--spa-border); flex-shrink: 0; }
.spa-emp-msg { font-size: var(--spa-text-sm); margin-right: auto; }
.spa-emp-msg-ok   { color: var(--spa-success); }
.spa-emp-msg-err  { color: var(--spa-danger); }
.spa-emp-msg-warn { color: var(--spa-warning); }

/* ── Drawer-Formularfelder ── */
.spa-fld-section { margin-bottom: 22px; }
.spa-fld-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--spa-text-secondary); margin-bottom: 10px; }
.spa-fld { display: block; margin-bottom: 12px; }
.spa-fld-label { display: block; font-size: var(--spa-text-xs); font-weight: 600; color: var(--spa-text); margin-bottom: 4px; }
.spa-fld-input {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--spa-border);
    border-radius: var(--spa-radius);
    font-size: var(--spa-text-sm); font-family: inherit;
    background: var(--spa-white); color: var(--spa-text);
    box-sizing: border-box;
}
.spa-fld-input:focus { outline: none; border-color: var(--spa-primary); box-shadow: 0 0 0 3px var(--spa-primary-light); }

@media (max-width: 600px) {
    .spa-emp-drawer { width: 100vw; }
    .spa-staff-row-sub { max-width: 55vw; }
}

@media (prefers-reduced-motion: reduce) {
    .spa-emp-drawer, .spa-emp-overlay, .spa-staff-row { transition: none; }
}