/*
 * orca.teams — shell, components and legacy page compatibility
 * Design system "Signal-Kontor" (ported from orca.people), violet product hue.
 *
 * Sections:
 *   1. Base and typography
 *   2. Shared components (UI.*)
 *   3. Shell: login, rail, top bar, menus, content
 *   4. Legacy page compatibility (Bootstrap restyle + classes used by
 *      unmigrated page modules, templates and js/components/*)
 *   5. orca.teams shell additions (team tree, impersonation banner)
 *   6. Responsive and print
 *
 * Colours: tokens.css only. Product hue never on fills.
 * Page-specific CSS goes into css/pages/<slug>.css (App.loadPageCss).
 */

/* =====================================================
   1. BASE
   ===================================================== */
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--hue-orca); text-decoration: none; }
a:hover { color: var(--text); }

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { color: var(--text); }

.ui-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.ui-mono, .mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ui-caption { font-size: var(--fs-caption); color: var(--caption); }
.ui-text-2 { color: var(--text-2); }

/* Type scale */
.ui-page-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-title);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
}
.ui-page-sub { font-size: var(--fs-caption); color: var(--caption); }
.ui-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ui-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ui-card-title, .chart-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-card-title);
    letter-spacing: -0.01em;
    margin: 0;
}

/* Icons */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }

/* =====================================================
   2. COMPONENTS
   ===================================================== */

/* ---- Button: 28 / 36 / 44, icon + label ---- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: var(--r-control);
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    user-select: none;
    box-sizing: border-box;
}
.ui-btn:hover { color: var(--text); background: var(--hover); }
.ui-btn:active { transform: translateY(0.5px); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.ui-btn-ic { display: inline-flex; }
.ui-btn-ic .icon { vertical-align: 0; }

.ui-btn-sm { height: var(--h-sm); padding: 0 10px; font-size: var(--fs-caption); min-width: var(--h-sm); }
.ui-btn-md { height: var(--h-md); }
.ui-btn-lg { height: var(--h-lg); padding: 0 18px; font-size: 14px; }
.ui-btn-icon { padding: 0; }
.ui-btn-icon.ui-btn-sm { width: var(--h-sm); min-width: var(--h-sm); }
.ui-btn-icon.ui-btn-md { width: var(--h-md); min-width: var(--h-md); }
.ui-btn-icon.ui-btn-lg { width: var(--h-lg); min-width: var(--h-lg); }

.ui-btn-primary { background: var(--action); color: var(--action-text); border-color: var(--action); }
.ui-btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-text); }
.ui-btn-secondary { background: var(--surface); color: var(--text); border-color: var(--hairline); }
.ui-btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.ui-btn-ghost:hover { background: var(--hover); color: var(--text); }
.ui-btn[style*="--btn-hue"] .ui-btn-ic { color: var(--btn-hue); }
.ui-btn-primary[style*="--btn-hue"] .ui-btn-ic { color: inherit; }
.ui-btn[aria-pressed="true"] { background: var(--hover-strong); }

/* ---- Tag ---- */
.ui-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tag-tone, var(--text-2));
    background: color-mix(in srgb, var(--tag-tone, var(--text-2)) 12%, transparent);
    white-space: nowrap;
    vertical-align: middle;
}
.ui-tag-ic { display: inline-flex; }
.ui-tag-mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- Count badge / big count ---- */
.ui-count {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}
.ui-bigcount {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-count);
    line-height: 1;
}

/* ---- KPI row ---- */
.ui-kpi {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hairline);
}
.ui-kpi:last-child { border-bottom: none; }
.ui-kpi-label { font-size: var(--fs-caption); color: var(--text-2); padding-top: 2px; display: flex; align-items: center; gap: 6px; }
.ui-kpi-right { text-align: right; min-width: 0; }
.ui-kpi-value { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 15px; }
.ui-kpi-sub { font-size: 11px; color: var(--caption); margin-top: 1px; }

/* ---- Source dot ---- */
.ui-source { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--caption); vertical-align: middle; --src: var(--text-2); }
.ui-source-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--src); flex-shrink: 0; }

/* ---- Amount ---- */
.ui-amount { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-amount-neg { color: var(--critical); }
.ui-amount-pos { color: var(--ok); }

/* ---- Empty state ---- */
.ui-empty { text-align: center; padding: 40px 20px; color: var(--caption); }
.ui-empty-ic { color: var(--caption); margin-bottom: 10px; }
.ui-empty-title { font-weight: 600; color: var(--text); font-size: 14px; }
.ui-empty-text { font-size: var(--fs-caption); margin-top: 2px; max-width: 420px; margin-left: auto; margin-right: auto; }
.ui-empty-action { margin-top: 14px; }

/* ---- Skeleton ---- */
.ui-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.ui-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--raised) 25%, var(--hairline) 50%, var(--raised) 75%);
    background-size: 200% 100%;
    animation: ui-shimmer 1.4s infinite;
}
@keyframes ui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Card ---- */
.ui-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 18px 20px;
    box-sizing: border-box;
    min-width: 0;
}
.ui-card[style*="--card-hue"] { border-top: 2px solid var(--card-hue); }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui-card.is-muted { background: var(--raised); }
.ui-card.is-muted .ui-card-title { color: var(--caption); }
.ui-card-meta { font-size: var(--fs-caption); color: var(--caption); display: inline-flex; align-items: center; gap: 6px; }

/* Group caption */
.ui-group-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: 0.1em; font-weight: 600; color: var(--caption);
    padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
    text-transform: uppercase;
}
.ui-group-label.critical { color: var(--critical); }
.ui-group-label.warn { color: var(--warn); }
.ui-group-label.ok { color: var(--ok); }

.ui-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--caption); flex-shrink: 0; }
.ui-status-dot.ok { background: var(--ok); }
.ui-status-dot.warn { background: var(--warn); }
.ui-status-dot.critical { background: var(--critical); }

/* ---- Info popover ("i" on KPI cards) ---- */
.ui-info { position: relative; display: inline-flex; vertical-align: middle; }
.ui-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: 1px solid transparent; border-radius: 50%;
    background: transparent; color: var(--caption);
}
.ui-info-btn:hover, .ui-info-btn[aria-expanded="true"] { color: var(--text); background: var(--hover); }
.ui-info-pop {
    position: fixed; top: 0; left: 0; z-index: 2050;
    width: 320px; max-width: calc(100vw - 32px);
    font-family: var(--font-body); letter-spacing: normal; text-transform: none;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--hairline); border-radius: var(--r-card);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    text-align: left; font-size: var(--fs-caption); line-height: 1.5;
    white-space: normal; font-weight: 400;
}
.ui-info-pop[hidden] { display: none; }
.ui-info-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.ui-info-sec + .ui-info-sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ui-info-label { font-size: 10px; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; color: var(--caption); margin-bottom: 3px; }
.ui-info-formula { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--text); }
.ui-info-list { margin: 0; padding-left: 16px; color: var(--text-2); }
.ui-info-list li + li { margin-top: 2px; }
.ui-info-dq { display: flex; align-items: flex-start; gap: 6px; color: var(--text-2); }
.ui-info-dq.warn { color: var(--warn); }
.ui-info-dq .icon { margin-top: 1px; }

/* =====================================================
   3. SHELL
   ===================================================== */

/* ---- Brand ---- */
.shell-brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.shell-brand-name .shell-brand-accent { color: var(--hue-orca); }
.shell-brand-name .shell-brand-rest { color: var(--caption); }

/* ---- Login ---- */
.shell-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ground);
    padding: 24px 16px;
    box-sizing: border-box;
}
.shell-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 32px 28px 24px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
.shell-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.shell-login-brand img { border-radius: 8px; }
.shell-login-brand .shell-brand-name { font-size: 22px; }
.shell-login h1 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 4px; letter-spacing: -0.01em; }
.shell-login p { margin: 0 0 20px; color: var(--caption); font-size: var(--fs-caption); }
.shell-login .ui-btn { width: 100%; }
.shell-login-error {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--r-control);
    background: color-mix(in srgb, var(--critical) 10%, transparent);
    color: var(--critical); font-size: var(--fs-caption); margin-bottom: 14px;
}
.shell-login-foot { text-align: center; color: var(--caption); font-size: 11px; margin-top: 20px; }
.shell-login-theme { position: fixed; top: 16px; right: 16px; }

/* ---- App layout ---- */
/* The rail is viewport-fixed; the wrapper paints the rail column (bg + border) down the
   whole document so tall pages and full-page captures show a continuous column. */
.shell-app {
    display: flex; min-height: 100vh;
    background:
        linear-gradient(to right, var(--rail-bg) calc(var(--rail-w) - 1px), var(--rail-border) calc(var(--rail-w) - 1px), var(--rail-border) var(--rail-w), transparent var(--rail-w))
        no-repeat,
        var(--ground);
}

.shell-rail {
    width: var(--rail-w);
    flex-shrink: 0;
    background: var(--rail-bg);
    border-right: 1px solid var(--rail-border);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 12px;
    box-sizing: border-box;
    gap: 2px;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1030;
    overflow: hidden;
}
.shell-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; margin: 0 -4px; padding: 0 4px; }

.rail-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 16px;
    font-size: 19px;
    color: var(--text);
}
.rail-brand:hover { color: var(--text); }
.rail-brand img { border-radius: 5px; }
.rail-brand .rail-env { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--warn); margin-left: auto; letter-spacing: 0.08em; }

.rail-group-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--caption);
    padding: 10px 10px 6px;
    text-transform: uppercase;
}
.rail-group-label:first-child { padding-top: 2px; }
.rail-group-label.rail-toggle {
    width: 100%; border: 0; background: none; text-align: left; border-radius: 6px; cursor: pointer;
}
.rail-group-label.rail-toggle:hover { color: var(--text-2); background: var(--hover); }
.rail-group-label .rail-chev { display: inline-flex; transition: transform 0.15s ease; }
.rail-group-label.open .rail-chev { transform: rotate(90deg); }

.rail-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    height: 34px; padding: 0 10px;
    border-radius: var(--r-control);
    font-size: var(--fs-body); font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    flex-shrink: 0;
}
.rail-item:hover { background: var(--hover); color: var(--text); }
.rail-item .rail-ic { display: inline-flex; color: var(--text-2); width: 16px; justify-content: center; }
.rail-item .rail-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item .rail-count { margin-left: auto; color: var(--hue-orca); }
.rail-item.active, .rail-item.active:hover { color: var(--text); font-weight: 600; }
.rail-item.active .rail-ic { color: var(--hue-orca); }
.rail-item.active::before {
    /* -4px: inside .shell-rail-scroll's 4px gutter; further left is clipped by its overflow */
    content: ''; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px;
    background: var(--hue-orca);
}

.rail-divider { height: 1px; background: var(--hairline); margin: 10px 4px 4px; flex-shrink: 0; }

.rail-verw { display: none; flex-direction: column; gap: 1px; }
.rail-verw.open { display: flex; }

.rail-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--raised); border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--text);
    flex-shrink: 0;
}

/* ---- Main column ---- */
.shell-main {
    flex: 1; min-width: 0;
    margin-left: var(--rail-w);
    display: flex; flex-direction: column;
    min-height: 100vh;
    background: var(--ground);
}

/* ---- Top bar ---- */
.shell-topbar {
    height: var(--topbar-h);
    flex-shrink: 0;
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center;
    padding: 0 var(--gutter);
    gap: 12px;
    box-sizing: border-box;
    background: var(--ground);
    position: sticky; top: 0; z-index: 1020;
}
.tb-menu-btn { display: none; }

/* Breadcrumb: the page label never shrinks, leading crumbs ellipsise first */
.tb-crumb { font-size: var(--fs-body); min-width: 0; flex: 1 1 auto; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.tb-crumb .breadcrumb-item { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; padding: 0; }
.tb-crumb .breadcrumb-item::before { content: none; }
.tb-crumb a.breadcrumb-item:hover { color: var(--text); }
.tb-crumb .breadcrumb-item.active { color: var(--text); font-weight: 500; }
.tb-crumb .breadcrumb-page { flex: 0 0 auto; overflow: visible; }
.tb-crumb .breadcrumb-sep { color: var(--caption); margin: 0 8px; flex: 0 0 auto; }

.tb-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px; position: relative; }
.tb-slot { position: relative; display: inline-flex; }

/* User button */
.tb-user {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--h-md); padding: 0 10px 0 4px;
    border: 1px solid var(--hairline); border-radius: var(--r-control);
    background: var(--surface); font-size: var(--fs-caption); color: var(--text-2);
    max-width: 220px; white-space: nowrap; overflow: hidden;
}
.tb-user:hover, .tb-user[aria-expanded="true"] { color: var(--text); background: var(--hover); }
.tb-user .rail-avatar { width: 26px; height: 26px; font-size: 10px; }
.tb-user .tb-user-name { overflow: hidden; text-overflow: ellipsis; }
.tb-user .rail-chev { display: inline-flex; color: var(--caption); }

/* Menus (user menu, tenant menu) */
.tb-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 260px; max-width: calc(100vw - 32px);
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 2000;
    box-sizing: border-box;
}
.tb-menu.open { display: block; }
.tb-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.tb-menu-head .tb-menu-name { font-weight: 600; color: var(--text); }
.tb-menu-head .tb-menu-mail { font-size: 11px; color: var(--caption); overflow: hidden; text-overflow: ellipsis; }
.tb-menu-caption { font-size: 10px; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; color: var(--caption); padding: 6px 10px 4px; }
.tb-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 34px; padding: 0 10px;
    border: 0; border-radius: 6px; background: none;
    color: var(--text); font-size: var(--fs-body); text-align: left;
    text-decoration: none; box-sizing: border-box; cursor: pointer;
}
.tb-menu-item:hover { background: var(--hover); color: var(--text); }
.tb-menu-item .icon { color: var(--text-2); }
.tb-menu-item .tb-menu-label { flex: 1; min-width: 0; }
.tb-menu-item .tb-menu-right { font-size: 11px; color: var(--caption); white-space: nowrap; }
.tb-menu-item .tb-menu-right.on { color: var(--hue-orca); }
.tb-menu-item.danger:hover { color: var(--critical); }
.tb-menu-item.danger:hover .icon { color: var(--critical); }
.tb-menu-item input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--hue-orca); flex-shrink: 0; }
.tb-menu-divider { height: 1px; background: var(--hairline); margin: 6px 4px; }
.tb-menu kbd { font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--hairline); border-radius: 4px; padding: 0 4px; color: var(--caption); background: transparent; }
.tb-menu-foot { display: flex; gap: 6px; padding: 6px 4px 2px; }
.tb-menu-foot .ui-btn { flex: 1; }

/* ---- Content ---- */
.shell-content { flex: 1; min-width: 0; padding: 24px var(--gutter) 40px; box-sizing: border-box; }

.shell-loading { display: flex; align-items: center; justify-content: center; min-height: 50vh; color: var(--caption); gap: 10px; }
.shell-spinner { width: 18px; height: 18px; border: 2px solid var(--hairline); border-top-color: var(--hue-orca); border-radius: 50%; animation: shell-spin 0.8s linear infinite; }
@keyframes shell-spin { to { transform: rotate(360deg); } }

/* ---- Toasts (showToast renders .alert.alert-<type> into #toast-container) ---- */
.toast-container { position: fixed; top: calc(var(--topbar-h) + 12px); right: 20px; z-index: 2100; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast-container .alert {
    min-width: 280px !important; max-width: 420px;
    margin: 0; padding: 10px 14px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--hairline); border-left-width: 3px; border-radius: var(--r-control);
    box-shadow: var(--shadow);
    font-size: var(--fs-body);
    box-sizing: border-box;
}
.toast-container .alert-success { border-left-color: var(--ok); }
.toast-container .alert-danger { border-left-color: var(--critical); }
.toast-container .alert-warning { border-left-color: var(--warn); }
.toast-container .alert-info { border-left-color: var(--info); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* =====================================================
   4. LEGACY PAGE COMPATIBILITY
   Restyle of the classes unmigrated page modules and templates use.
   ===================================================== */

/* Page header. orca.teams templates stack a back link above the title row
   and add Bootstrap d-flex themselves where they want a row, so the header
   stays a block here. */
.page-header { margin-bottom: 20px; }
.page-header h1 {
    font-family: var(--font-display); font-weight: 600; font-size: 24px;
    letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 4px;
    display: flex; align-items: center; gap: 10px;
}
.page-header p { color: var(--caption); font-size: var(--fs-caption); }
.page-header p { margin: 4px 0 0; }

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    color: var(--text);
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--text);
    --bs-card-border-color: var(--card-border);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--text);
    --bs-card-inner-border-radius: calc(var(--r-card) - 1px);
}
.card-header { background: transparent; border-bottom: 1px solid var(--hairline); padding: 12px 18px; color: var(--text); font-weight: 600; }
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-card-title); margin: 0; }
.card-body { padding: 16px 18px; }
.card-footer { background: var(--raised); border-top: 1px solid var(--hairline); padding: 12px 18px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-card-title); }

/* Stats (legacy KPI tiles) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r-card); padding: 16px 18px; min-width: 0; }
.stat-card .stat-value, .stat-value {
    font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums;
    font-size: var(--fs-count); color: var(--text); line-height: 1.15;
}
.stat-card .stat-label, .stat-label { font-size: var(--fs-caption); color: var(--text-2); margin-top: 4px; }
.stat-card .stat-icon, .stat-icon { font-size: 20px; color: var(--hue-orca); }
.stat-change { font-size: var(--fs-caption); margin-top: 4px; color: var(--caption); }
.stat-change.positive { color: var(--ok); }
.stat-change.negative { color: var(--critical); }

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--hairline);
    --bs-table-hover-bg: var(--hover);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: color-mix(in srgb, var(--text) 2%, transparent);
    --bs-table-striped-color: var(--text);
    --bs-table-active-bg: var(--hover-strong);
    --bs-table-active-color: var(--text);
    margin-bottom: 0;
    color: var(--text);
}
.table > thead th, .table > :not(caption) > * > th {
    font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-2); white-space: nowrap;
    border-bottom: 1px solid var(--hairline); padding: 10px 12px;
    background: var(--raised);
}
.table > tbody td, .table > :not(caption) > * > td { padding: 9px 12px; vertical-align: middle; border-bottom-color: var(--hairline); color: var(--text); }
.table-sm > :not(caption) > * > * { padding: 6px 10px; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--hover); color: var(--text); }
.table-responsive { overflow-x: auto; }
.card > .table-responsive, .card-body > .table-responsive:only-child { border: 0; }
.table-secondary, .table-primary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark {
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--hairline);
    --bs-table-bg: var(--raised);
    --bs-table-striped-bg: var(--raised);
    --bs-table-hover-bg: var(--hover);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-color: var(--text);
    color: var(--text);
}
.table-success { --bs-table-bg: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.table-danger { --bs-table-bg: color-mix(in srgb, var(--critical) 10%, var(--surface)); }
.table-warning { --bs-table-bg: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.table-info, .table-primary { --bs-table-bg: color-mix(in srgb, var(--info) 10%, var(--surface)); }
tr.table-warning-subtle > td { background: color-mix(in srgb, var(--warn) 8%, transparent) !important; }
td.number, th.number { text-align: right; font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
tr.cursor-pointer, .cursor-pointer { cursor: pointer; }

/* Forms */
.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--hairline);
    color: var(--text);
    border-radius: var(--r-control);
    font-size: var(--fs-body);
    min-height: var(--h-md);
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface); border-color: var(--text); color: var(--text);
    box-shadow: 0 0 0 3px var(--hover);
}
.form-control::placeholder { color: var(--caption); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--raised); color: var(--caption); }
.form-control-sm, .form-select-sm { min-height: var(--h-sm); font-size: var(--fs-caption); border-radius: 6px; }
.form-select {
    --bs-form-select-bg-img: var(--img-select-chevron);
}
.form-label { font-weight: 600; font-size: var(--fs-caption); color: var(--text-2); margin-bottom: 6px; }
.form-text { color: var(--caption); }
.form-check-input { background-color: var(--surface); border-color: var(--caption); }
.form-check-input:checked { background-color: var(--action); border-color: var(--action); }
.form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: var(--img-check-on); }
.form-check-input:checked[type="radio"] { --bs-form-check-bg-image: var(--img-radio-on); }
.form-check-input:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--hover); }
.form-switch .form-check-input { --bs-form-switch-bg: var(--img-switch-off); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: var(--img-switch-off); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: var(--img-switch-on); }
.input-group-text { background: var(--raised); border-color: var(--hairline); color: var(--text-2); }

/* Bootstrap buttons used by legacy pages: shell sizes and tones */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--r-control);
    --bs-btn-font-size: var(--fs-body);
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 14px;
    --bs-btn-line-height: calc(var(--h-md) - 2px);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--hover);
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    white-space: nowrap;
}
.btn-sm, .btn-group-sm > .btn { --bs-btn-padding-x: 10px; --bs-btn-line-height: calc(var(--h-sm) - 2px); --bs-btn-font-size: var(--fs-caption); --bs-btn-border-radius: 6px; }
.btn-lg, .btn-group-lg > .btn { --bs-btn-padding-x: 18px; --bs-btn-line-height: calc(var(--h-lg) - 2px); --bs-btn-font-size: 14px; }
.btn-primary {
    --bs-btn-bg: var(--action); --bs-btn-border-color: var(--action); --bs-btn-color: var(--action-text);
    --bs-btn-hover-bg: var(--action-hover); --bs-btn-hover-border-color: var(--action-hover); --bs-btn-hover-color: var(--action-text);
    --bs-btn-active-bg: var(--action-hover); --bs-btn-active-border-color: var(--action-hover); --bs-btn-active-color: var(--action-text);
    --bs-btn-disabled-bg: var(--action); --bs-btn-disabled-border-color: var(--action); --bs-btn-disabled-color: var(--action-text);
}
.btn-secondary, .btn-light, .btn-dark, .btn-outline-secondary, .btn-outline-light, .btn-outline-primary, .btn-outline-dark {
    --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hairline); --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--hairline); --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--hover-strong); --bs-btn-active-border-color: var(--hairline); --bs-btn-active-color: var(--text);
    --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--hairline); --bs-btn-disabled-color: var(--caption);
}
.btn-success {
    --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-color: var(--on-status);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ok) 85%, var(--text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--ok) 85%, var(--text)); --bs-btn-hover-color: var(--on-status);
    --bs-btn-active-bg: var(--ok); --bs-btn-active-color: var(--on-status);
}
.btn-danger, .btn-outline-danger {
    --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hairline); --bs-btn-color: var(--critical);
    --bs-btn-hover-bg: color-mix(in srgb, var(--critical) 10%, transparent); --bs-btn-hover-border-color: var(--critical); --bs-btn-hover-color: var(--critical);
    --bs-btn-active-bg: color-mix(in srgb, var(--critical) 15%, transparent); --bs-btn-active-border-color: var(--critical); --bs-btn-active-color: var(--critical);
    --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--hairline); --bs-btn-disabled-color: var(--critical);
}
.btn-warning, .btn-outline-warning {
    --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hairline); --bs-btn-color: var(--warn);
    --bs-btn-hover-bg: color-mix(in srgb, var(--warn) 10%, transparent); --bs-btn-hover-border-color: var(--warn); --bs-btn-hover-color: var(--warn);
    --bs-btn-active-bg: color-mix(in srgb, var(--warn) 15%, transparent); --bs-btn-active-color: var(--warn);
}
.btn-info, .btn-outline-info {
    --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hairline); --bs-btn-color: var(--info);
    --bs-btn-hover-bg: color-mix(in srgb, var(--info) 10%, transparent); --bs-btn-hover-border-color: var(--info); --bs-btn-hover-color: var(--info);
    --bs-btn-active-color: var(--info);
}
.btn-outline-success { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hairline); --bs-btn-color: var(--ok); --bs-btn-hover-bg: color-mix(in srgb, var(--ok) 10%, transparent); --bs-btn-hover-border-color: var(--ok); --bs-btn-hover-color: var(--ok); --bs-btn-active-color: var(--ok); }
.btn-link { --bs-btn-color: var(--hue-orca); --bs-btn-hover-color: var(--text); --bs-btn-active-color: var(--text); text-decoration: none; }
.btn-check:checked + .btn, .btn.active { background: var(--hover-strong); color: var(--text); border-color: var(--hairline); }
.btn-check:checked + .btn-primary, .btn-primary.active { background: var(--action); color: var(--action-text); border-color: var(--action); }

/* Badges (Bootstrap + legacy orca badge-* classes) */
.badge { font-weight: 600; font-size: 11px; border-radius: 999px; padding: 3px 8px; letter-spacing: 0.02em; color: var(--text-2); }
.badge.bg-primary, .badge.text-bg-primary, .badge-teal { background: color-mix(in srgb, var(--hue-orca) 12%, transparent) !important; color: var(--hue-orca) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge-secondary { background: var(--raised) !important; color: var(--text-2) !important; box-shadow: inset 0 0 0 1px var(--hairline); }
.badge.bg-success, .badge.text-bg-success, .badge-success { background: color-mix(in srgb, var(--ok) 12%, transparent) !important; color: var(--ok) !important; }
.badge.bg-danger, .badge.text-bg-danger, .badge-danger { background: color-mix(in srgb, var(--critical) 12%, transparent) !important; color: var(--critical) !important; }
.badge.bg-warning, .badge.text-bg-warning, .badge-warning { background: color-mix(in srgb, var(--warn) 12%, transparent) !important; color: var(--warn) !important; }
.badge.bg-info, .badge.text-bg-info { background: color-mix(in srgb, var(--info) 12%, transparent) !important; color: var(--info) !important; }
.badge.bg-dark, .badge.text-bg-dark, .badge.bg-light, .badge.text-bg-light { background: var(--raised) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--hairline); }
.badge.bg-warning.text-dark { color: var(--warn) !important; }
.badge.bg-info.text-dark { color: var(--info) !important; }
.badge .btn-close { filter: none !important; }
.bg-success-subtle { background: color-mix(in srgb, var(--ok) 12%, transparent) !important; color: var(--ok) !important; }
.bg-danger-subtle { background: color-mix(in srgb, var(--critical) 12%, transparent) !important; color: var(--critical) !important; }
.bg-warning-subtle { background: color-mix(in srgb, var(--warn) 12%, transparent) !important; color: var(--warn) !important; }
.bg-info-subtle { background: color-mix(in srgb, var(--info) 12%, transparent) !important; color: var(--info) !important; }
.bg-primary-subtle { background: color-mix(in srgb, var(--hue-orca) 12%, transparent) !important; color: var(--hue-orca) !important; }
.bg-secondary-subtle { background: var(--raised) !important; color: var(--text-2) !important; }

/* Status dots (personio-tenants, entra-tenants) */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--caption); }
.status-dot.connected { background: var(--ok); }
.status-dot.disconnected { background: var(--caption); }
.status-dot.error { background: var(--critical); }

/* Modals */
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-border-color: var(--hairline); --bs-modal-header-border-color: var(--hairline); --bs-modal-footer-border-color: var(--hairline); }
.modal-content { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); color: var(--text); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom-color: var(--hairline); padding: 14px 20px; }
.modal-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-card-title); }
.modal-body { padding: 18px 20px; }
.modal-footer { border-top-color: var(--hairline); padding: 12px 20px; background: var(--raised); border-radius: 0 0 var(--r-card) var(--r-card); }
.modal-backdrop { --bs-backdrop-bg: var(--overlay); --bs-backdrop-opacity: 1; }
.btn-close, .btn-close-white {
    filter: none !important; opacity: 0.8;
    --bs-btn-close-bg: var(--img-close);
    --bs-btn-close-white-filter: none;
}
.btn-close:hover { opacity: 1; }

/* Dropdowns */
.dropdown-menu { background: var(--surface); border-color: var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 6px; --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--hover); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-active-bg: var(--hover-strong); --bs-dropdown-link-active-color: var(--text); --bs-dropdown-header-color: var(--caption); --bs-dropdown-divider-bg: var(--hairline); }
.dropdown-item { color: var(--text); border-radius: 6px; font-size: var(--fs-body); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hover); color: var(--text); }

/* Alerts (inside pages; toasts are restyled above) */
.alert { border-radius: var(--r-control); font-size: var(--fs-body); }
.alert-success { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.alert-danger { background: color-mix(in srgb, var(--critical) 10%, transparent); border-color: color-mix(in srgb, var(--critical) 30%, transparent); color: var(--critical); }
.alert-warning { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.alert-info { background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.alert-secondary, .alert-light { background: var(--raised); border-color: var(--hairline); color: var(--text-2); }

/* Tabs & pills */
.nav-tabs { border-bottom: 1px solid var(--hairline); gap: 2px; --bs-nav-tabs-border-color: var(--hairline); }
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link { color: var(--text-2); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; font-size: var(--fs-body); font-weight: 500; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--hairline); background: transparent; }
.nav-tabs .nav-link.active { background: transparent; color: var(--text); border-bottom-color: var(--hue-orca); font-weight: 600; }
.nav-pills .nav-link { color: var(--text-2); border-radius: var(--r-control); padding: 6px 12px; font-size: var(--fs-body); font-weight: 500; }
.nav-pills .nav-link:hover { background: var(--hover); color: var(--text); }
.nav-pills .nav-link.active { background: var(--action); color: var(--action-text); }

/* List groups */
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--hairline); --bs-list-group-action-hover-bg: var(--hover); --bs-list-group-action-hover-color: var(--text); --bs-list-group-active-bg: var(--hover-strong); --bs-list-group-active-color: var(--text); --bs-list-group-active-border-color: var(--hairline); }
.list-group-item { background: var(--surface); border-color: var(--hairline); color: var(--text); }

/* Pagination */
.pagination {
    --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--hairline); --bs-pagination-color: var(--text-2);
    --bs-pagination-hover-bg: var(--hover); --bs-pagination-hover-border-color: var(--hairline); --bs-pagination-hover-color: var(--text);
    --bs-pagination-active-bg: var(--action); --bs-pagination-active-border-color: var(--action); --bs-pagination-active-color: var(--action-text);
    --bs-pagination-disabled-bg: var(--raised); --bs-pagination-disabled-border-color: var(--hairline); --bs-pagination-disabled-color: var(--caption);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--hover);
    --bs-pagination-border-radius: var(--r-control);
}

/* Progress */
.progress { background: var(--hairline); border-radius: 4px; }
.progress-bar { background: var(--hue-orca); }
.progress-bar.bg-success { background: var(--ok) !important; }
.progress-bar.bg-warning { background: var(--warn) !important; }
.progress-bar.bg-danger { background: var(--critical) !important; }

/* Spinners */

/* Tooltips & popovers */
.tooltip { --bs-tooltip-bg: var(--text); --bs-tooltip-color: var(--surface); --bs-tooltip-border-radius: 6px; font-size: var(--fs-caption); }
.popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--hairline); --bs-popover-body-color: var(--text); --bs-popover-header-bg: var(--raised); --bs-popover-header-color: var(--text); }

/* Accordion, offcanvas */
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--hairline); --bs-accordion-btn-bg: var(--surface); --bs-accordion-btn-color: var(--text); --bs-accordion-active-bg: var(--raised); --bs-accordion-active-color: var(--text); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--hover); }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); --bs-offcanvas-border-color: var(--hairline); }

/* Charts */
.chart-container { position: relative; height: 300px; }

/* Collapsible card sections */
.collapse-chevron { display: inline-block; transition: transform 0.2s ease; font-size: 0.8em; }
[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-chevron { transform: rotate(90deg); }

/* Bootstrap utilities that legacy pages use for colour */
.text-muted { color: var(--caption) !important; }
.text-body { color: var(--text) !important; }
.text-primary { color: var(--hue-orca) !important; }
.text-secondary { color: var(--text-2) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--critical) !important; }
.text-warning { color: var(--warn) !important; }
.text-info { color: var(--info) !important; }
.text-dark { color: var(--text) !important; }
.bg-dark { background: var(--ground) !important; }
.bg-secondary { background: var(--raised) !important; }
.bg-body-tertiary, .bg-light { background: var(--raised) !important; }
.border, .border-bottom, .border-top, .border-start, .border-end { --bs-border-color: var(--hairline); border-color: var(--hairline) !important; }
.border-danger { border-color: var(--critical) !important; }
code { font-family: var(--font-mono); font-size: 12px; color: var(--chart-4); }
hr { border-color: var(--hairline); opacity: 1; }
.small, small { font-size: var(--fs-caption); }
kbd { font-family: var(--font-mono); background: var(--raised); color: var(--text); border: 1px solid var(--hairline); }
.table .text-muted { color: var(--caption) !important; }

/* ---- orca.teams legacy classes (pages, templates, js/components) ---- */

/* Lifecycle status badges (Badge.statusBadge → .badge.bg-status-<status>); unknown → neutral */
.badge[class*="bg-status-"]   { background: var(--raised) !important; color: var(--text-2) !important; box-shadow: inset 0 0 0 1px var(--hairline); }
.badge.bg-status-planned      { background: color-mix(in srgb, var(--warn) 12%, transparent) !important; color: var(--warn) !important; box-shadow: none; }
.badge.bg-status-provisioning { background: color-mix(in srgb, var(--info) 12%, transparent) !important; color: var(--info) !important; box-shadow: none; }
.badge.bg-status-active       { background: color-mix(in srgb, var(--ok) 12%, transparent) !important; color: var(--ok) !important; box-shadow: none; }
.badge.bg-status-error        { background: color-mix(in srgb, var(--critical) 12%, transparent) !important; color: var(--critical) !important; box-shadow: none; }

/* Owner stack: compact avatar chips */
.owner-stack { display: inline-flex; align-items: center; gap: 0; }
.owner-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--raised); border: 2px solid var(--surface);
    color: var(--text); font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    margin-left: -6px; line-height: 1;
}
.owner-chip:first-child { margin-left: 0; }
.owner-chip-more { background: transparent; color: var(--text-2); }
.table tr:hover .owner-chip { border-color: var(--raised); }

/* Row markers: hidden team, internal channel, channel in error */
tr.row-hidden td { color: var(--caption); background: color-mix(in srgb, var(--caption) 5%, transparent); }
tr.row-hidden td:first-child { box-shadow: inset 3px 0 0 var(--caption); }
tr.row-internal td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.row-channel-error td { background-color: color-mix(in srgb, var(--critical) 7%, transparent); }
tr.row-channel-error td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
.internal-lock { color: var(--warn); margin-right: 6px; }

/* Technical details disclosure */
details.tech-details { margin-top: 6px; border-radius: var(--r-control); }
details.tech-details > summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-caption); list-style: none; user-select: none; }
details.tech-details > summary::-webkit-details-marker { display: none; }
details.tech-details > summary::before { content: '\25B8'; display: inline-block; transition: transform 0.15s ease; margin-right: 4px; color: var(--caption); }
details.tech-details[open] > summary::before { transform: rotate(90deg); }
details.tech-details > .tech-details-body {
    margin-top: 6px; padding: 10px 12px;
    background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r-control);
    font-size: var(--fs-caption); color: var(--text-2);
}
details.tech-details code { word-break: break-all; }

/* Scope pill in page headers */
.scope-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--hue-orca) 12%, transparent);
    color: var(--hue-orca); font-size: 11px; font-weight: 600;
    font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none;
}
.scope-pill.scope-readonly { background: var(--raised); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--hairline); }

/* Legacy empty state */
.empty-state { padding: 40px 20px; text-align: center; color: var(--caption); }
.empty-state i { color: var(--caption); font-size: 24px; display: block; margin-bottom: 10px; }

/* Condition builder (rule editor → custom filter) */
.cf-condition-row { margin-bottom: 8px; }
.cf-row-grid { display: grid; grid-template-columns: 90px minmax(140px, 1fr) minmax(120px, 1fr) minmax(160px, 2fr) auto; gap: 8px; align-items: center; }
.cf-row-connector { text-align: center; font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.cf-connector-first { display: inline-block; padding: 4px 0; color: var(--caption); font-style: italic; text-transform: none; letter-spacing: 0; }
.cf-connector-toggle { width: 100%; font-weight: 600; letter-spacing: 0.06em; }
.cf-connector-toggle[data-connector="and"] { color: var(--hue-orca); }
.cf-connector-toggle[data-connector="or"] { color: var(--info); }
.cf-row-value { min-width: 0; }
#cf-preview-odata { word-break: break-word; }
@media (max-width: 768px) { .cf-row-grid { grid-template-columns: 1fr; } }

/* Technical identifiers in tables */
.code-soft {
    font-family: var(--font-mono); font-weight: 500;
    color: var(--text-2); font-size: 11px;
    background: var(--raised); padding: 1px 6px; border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--hairline);
}

/* User cell (display name first) */
.user-cell { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.user-cell .owner-chip { margin-left: 0; margin-right: 0; flex-shrink: 0; }
.user-cell-text { display: inline-flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-cell-name { font-weight: 500; color: var(--text); font-size: var(--fs-body); }
.user-cell-subtitle { color: var(--caption); font-size: 11px; font-family: var(--font-mono); font-weight: 500; }
td .user-cell { width: 100%; }

/* User popover (hover card from components/user-tooltip.js) */
.user-popover {
    position: absolute; z-index: 2000; width: 320px; max-width: calc(100vw - 32px);
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
    padding: 12px 14px; box-shadow: var(--shadow-lg);
    font-size: var(--fs-body); color: var(--text); pointer-events: auto;
}
.user-popover-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.user-popover-upn { color: var(--text-2); font-size: var(--fs-caption); margin-bottom: 8px; word-break: break-all; }
.user-popover-upn code { font-size: var(--fs-caption); }
.user-popover-meta { border-top: 1px solid var(--hairline); padding-top: 8px; margin-top: 4px; }
.user-popover-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; line-height: 1.4; }
.user-popover-key { color: var(--caption); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; flex-shrink: 0; }
.user-popover-value { color: var(--text); font-size: var(--fs-caption); text-align: right; }

/* Bootstrap spinners pick up the product hue (icons/indicators only) */
.spinner-border { color: var(--hue-orca); }
.btn .spinner-border, .ui-btn .spinner-border { color: currentColor; }

/* =====================================================
   5. ORCA.TEAMS SHELL ADDITIONS
   ===================================================== */

/* ---- Member rail: team tree (buildManagerSidebar) ---- */
.sidebar-team { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.sidebar-team-header .sidebar-team-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: -4px; margin-right: -6px;
    border-radius: 4px; color: var(--caption);
    transition: transform 0.15s ease;
}
.sidebar-team-header .sidebar-team-caret:hover { background: var(--hover-strong); color: var(--text); }
.sidebar-team.open .sidebar-team-caret { transform: rotate(90deg); }
.sidebar-team-count { margin-left: auto; color: var(--caption); }
.sidebar-team-header.active .sidebar-team-count { color: var(--hue-orca); }
.sidebar-team-children { display: none; flex-direction: column; gap: 1px; }
.sidebar-team.open .sidebar-team-children { display: flex; }
.rail-item.rail-sub { height: 30px; padding-left: 34px; font-weight: 400; }
.rail-item.rail-sub .rail-ic { color: var(--caption); }
.rail-item.rail-sub.active .rail-ic { color: var(--hue-orca); }
.sidebar-channel-empty { padding: 4px 10px 6px 34px; font-size: var(--fs-caption); color: var(--caption); font-style: italic; }
.rail-empty { padding: 0 10px; font-size: var(--fs-caption); color: var(--caption); line-height: 1.5; }
.rail-empty.critical { color: var(--critical); }

/* ---- Impersonation banner ("Anzeigen als …") ---- */
.impersonation-banner {
    position: sticky; top: var(--topbar-h); z-index: 1019;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px var(--gutter);
    background: color-mix(in srgb, var(--warn) 12%, var(--ground));
    border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    color: var(--text); font-size: var(--fs-caption);
}
.impersonation-banner-text { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.impersonation-banner-text .icon { color: var(--warn); margin-top: 1px; }
.impersonation-banner .ui-btn { flex-shrink: 0; }
.tb-user.is-impersonating { border-color: var(--warn); }
.tb-user.is-impersonating .rail-avatar { border-color: var(--warn); color: var(--warn); }

/* Impersonation picker list */
#impersonate-results .list-group-item-action { cursor: pointer; }
#impersonate-results .imp-name { font-weight: 600; color: var(--text); }
#impersonate-results .imp-sub { font-size: var(--fs-caption); color: var(--caption); }

/* =====================================================
   6. RESPONSIVE & PRINT
   ===================================================== */
@media (max-width: 991.98px) {
    :root { --gutter: 16px; }
    .shell-app { background: var(--ground); }
    .shell-rail { transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: none; border-right-color: var(--hairline); }
    .shell-rail.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .shell-main { margin-left: 0; }
    .shell-topbar { gap: 8px; }
    .tb-menu-btn { display: inline-flex; margin-left: -6px; }
    .tb-user .tb-user-name, .tb-user .rail-chev { display: none; }
    .tb-user { padding-right: 4px; }
    .shell-rail-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 1029; display: none; }
    .shell-rail-backdrop.open { display: block; }
    .toast-container { right: 16px; left: 16px; }
    .toast-container .alert { min-width: 0 !important; max-width: none; }
}
@media (max-width: 640px) {
    .tb-menu { position: fixed; top: calc(var(--topbar-h) + 6px); left: 16px; right: 16px; min-width: 0; max-width: none; }
    .tb-actions { gap: 6px; }
    .tb-crumb .breadcrumb-item:not(.breadcrumb-page), .tb-crumb .breadcrumb-sep { display: none; }
    .tb-crumb .breadcrumb-page { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
    .shell-content { padding-top: 16px; }
    .page-header h1 { font-size: 20px; }
    .ui-page-title { font-size: 22px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stat-card { padding: 12px 14px; }
    .stat-card .stat-value, .stat-value { font-size: 20px; }
    .form-control, .form-select { font-size: 16px; }
    .modal-dialog { margin: 0.5rem; }
    /* Legacy tables without .table-responsive must not widen the page */
    .card:has(> .table), .card:has(> .card-body > .table) { overflow-x: auto; }
}
@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
}

@media print {
    .shell-rail, .shell-topbar, .impersonation-banner, .page-header .btn, .pagination, .toast-container { display: none !important; }
    .shell-main { margin-left: 0; }
    .shell-app { background: none; }
    .card { border: 1px solid var(--hairline); break-inside: avoid; }
}

/* ─── Admin-Rail: Team-Tree unter TEAMS (wie die Service-Liste in Vigil) ── */
.rail-sub-label { padding-top: 10px; }
.rail-team-tree .sidebar-team-header { height: 30px; }
.rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--caption); display: inline-block; }
.rail-dot-ok { background: var(--ok); }
.rail-dot-warn { background: var(--warn); }
.rail-dot-critical { background: var(--critical); }