/**
 * SoftdotStudio Hub – Base Styles
 * Design tokens, app shell, components, responsive layout.
 */

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
    /* Colors – Dark theme (primary) */
    --bg:        #0d1117;
    --bg-alt:    #161b22;
    --card:      #1c2128;
    --border:    #30363d;
    --text:      #c9d1d9;
    --text-bright: #f0f6fc;
    --muted:     #8b949e;
    --accent:    #00e5ff;
    --accent-hover: #33eaff;
    --success:   #3fb950;
    --warning:   #d29922;
    --danger:    #f85149;

    /* Derived backgrounds */
    --bg-secondary: #151b23;
    --bg-tertiary:  #1c2128;

    /* Accent RGB for rgba() usage */
    --accent-rgb: 0, 229, 255;

    /* Subtle / alpha variants */
    --accent-subtle:  rgba(0, 229, 255, 0.12);
    --success-subtle: rgba(63, 185, 80, 0.12);
    --warning-subtle: rgba(210, 153, 34, 0.12);
    --danger-subtle:  rgba(248, 81, 73, 0.12);

    /* Spacing */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;

    /* Border Radius */
    --r1: 4px;
    --r2: 6px;
    --r3: 8px;
    --r4: 12px;

    /* Shadows */
    --shadow1: 0 1px 3px rgba(0,0,0,0.12);
    --shadow2: 0 4px 12px rgba(0,0,0,0.15);
    --shadow3: 0 8px 24px rgba(0,0,0,0.2);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);    /* entering, landing (FLIP, lightbox) */
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);        /* leaving the stage */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a small overshoot on toggles */
    --t-fast: 120ms;
    --t: 200ms;
    --t-mid: 200ms;       /* was referenced (with fallbacks) before it existed */
    --t-slow: 320ms;

    /* Elevation + glass — layered depth for floating surfaces */
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 6px -2px rgba(0, 0, 0, 0.35);
    --elev-2: 0 4px 10px -2px rgba(0, 0, 0, 0.42), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
    --elev-3: 0 12px 28px -6px rgba(0, 0, 0, 0.55), 0 24px 60px -18px rgba(0, 0, 0, 0.65);
    --glass-bg: rgba(22, 27, 34, 0.72);
    --glass-border: rgba(240, 246, 252, 0.08);

    /* Typography */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-brand: 'Space Mono', monospace;
    --fs1: 0.75rem;
    --fs2: 0.875rem;
    --fs3: 1rem;
    --fs4: 1.25rem;
    --fs5: 1.5rem;
    --fs6: 2rem;
    --fs7: 2.5rem;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 56px;
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t) var(--ease);
}
a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
    display: block;
}

/* ── Utility ────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.p-0 { padding: 0 !important; }

/* ── Language Toggle ───────────────────────────────────────────── */
.lang-toggle {
    position: fixed;
    top: var(--s3);
    right: var(--s3);
    z-index: 1000;
}
.lang-toggle--auth {
    z-index: 1001;
}
.lang-toggle--inline {
    position: static;
}
.lang-toggle__form {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 2px;
    backdrop-filter: blur(8px);
}
.lang-toggle__btn {
    padding: 0.3rem 0.65rem;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}
.lang-toggle__btn:hover {
    color: var(--text-bright);
    background: rgba(0, 229, 255, 0.1);
}
.lang-toggle__active {
    padding: 0.3rem 0.65rem;
    border-radius: var(--r2);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── App Shell ──────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    transition: grid-template-columns var(--t-slow) var(--ease);
}

.app-shell[data-sidebar-collapsed="true"] {
    grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

.main-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

.main-content {
    flex: 1;
    padding: var(--s5);
    max-width: 1400px;
    width: 100%;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg-alt);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width var(--t-slow) var(--ease);
    z-index: 100;
}

.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--text-bright);
    font-weight: 700;
    font-size: var(--fs3);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent);
}

.sidebar__logo-text {
    font-family: var(--font-brand);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.sidebar__logo-text-primary {
    color: #ffffff;
}

.sidebar__logo-text-accent {
    color: var(--accent);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__logo-text {
    opacity: 0;
    width: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__header {
    padding: 0 var(--s1);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__logo {
    gap: 0;
}

.sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    flex-shrink: 0;
}

.sidebar__toggle:hover {
    color: var(--text-bright);
    background: var(--accent-subtle);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__toggle svg {
    transform: rotate(180deg);
}

.sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s2) var(--s2);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar__section-label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--s3) var(--s2) var(--s1);
    white-space: nowrap;
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__section-label {
    opacity: 0;
}

.sidebar__divider {
    height: 1px;
    background: var(--border);
    margin: var(--s2) var(--s2);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    color: var(--text);
    font-size: var(--fs2);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--t) var(--ease);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.sidebar__link--active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.sidebar__link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.sidebar__link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__link-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__link-label {
    opacity: 0;
    width: 0;
}

.sidebar__link-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__link-badge {
    display: none;
}

/* Status dot on a menu entry - the server status on "Hintergrundprozesse" (2026-10-09, it
   replaced the server notifications). Colour AND shape carry the state, the sentence in
   aria-label/title says it: circle = ok, diamond = attention, pulsing ring = critical, hollow
   red ring = unknown (the guard is silent - never shown as fine). Only transform/opacity move. */
.sidebar__status-dot {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: auto;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--muted);
    transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
                border-radius var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.sidebar__link-badge + .sidebar__status-dot { margin-left: var(--s2); }
.sidebar__status-dot--ok { background: var(--success); box-shadow: 0 0 6px rgba(63, 185, 80, 0.45); }
.sidebar__status-dot--warn {
    background: var(--warning);
    border-radius: 1.5px;
    transform: rotate(45deg) scale(0.92);
    box-shadow: 0 0 8px rgba(210, 153, 34, 0.55);
}
.sidebar__status-dot--crit { background: var(--danger); box-shadow: 0 0 10px rgba(248, 81, 73, 0.6); }
.sidebar__status-dot--crit::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid var(--danger);
    border-radius: 50%;
    opacity: 0;
    animation: sidebar-status-pulse 1.8s var(--ease) infinite;
}
.sidebar__status-dot--unknown { background: transparent; box-shadow: inset 0 0 0 2px var(--danger); }
/* Paused (Connor during a deploy drain, 2026-10-21): neutral, no pulse - nothing is broken, he
   waits on purpose. The shape is a pause sign (two bars), so it reads without colour too. */
.sidebar__status-dot--paused {
    border-radius: 1px;
    background: linear-gradient(90deg, var(--accent) 0 34%, transparent 34% 66%, var(--accent) 66% 100%);
    box-shadow: none;
    opacity: 0.85;
}
/* All well, and the entry wants no permanent green (Connor): the dot fades out, in place - no
   layout shift, only opacity and transform move. */
.sidebar__status-dot--hidden {
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
}
@keyframes sidebar-status-pulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}
/* Collapsed sidebar: the labels go, the dot moves onto the icon's corner and stays. The narrow
   tablet sidebar (220 px) does the same - beside the label it would cut "Hintergrundprozesse". */
.app-shell[data-sidebar-collapsed="true"] .sidebar__status-dot {
    position: absolute;
    top: 7px;
    left: 28px;
    margin: 0;
    outline: 2px solid var(--bg-alt);
}
@media (min-width: 768px) and (max-width: 1024px) {
    .sidebar__status-dot {
        position: absolute;
        top: 7px;
        left: 28px;
        margin: 0;
        outline: 2px solid var(--bg-alt);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar__status-dot { transition: none; }
    .sidebar__status-dot--crit::after { animation: none; opacity: 0.6; transform: none; }
}

.sidebar__footer {
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--border);
    font-size: var(--fs1);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__footer {
    text-align: center;
    padding: var(--s3) var(--s1);
}

.sidebar__bug-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s2);
    margin-bottom: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs1);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__bug-btn:hover {
    color: var(--warning);
    border-color: var(--warning);
    background: rgba(237, 137, 54, 0.08);
}

.sidebar__bug-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar__bug-btn-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn {
    justify-content: center;
    padding: var(--s2);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar__feature-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s2);
    margin-bottom: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs1);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__feature-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(66, 153, 225, 0.08);
}

.sidebar__feature-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar__feature-btn-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn {
    justify-content: center;
    padding: var(--s2);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* ── Sidebar CTA Buttons (Push + Install) ── */

.sidebar__cta-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 var(--s2);
    margin: var(--s2) 0;
}

.sidebar__cta-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 1px dashed var(--accent);
    border-radius: var(--r2);
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
    color: var(--accent);
    font-size: var(--fs1);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__cta-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.sidebar__cta-btn:active {
    transform: translateY(0);
}

.sidebar__cta-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar__cta-btn-label {
    transition: opacity var(--t) var(--ease), width var(--t) var(--ease);
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn {
    justify-content: center;
    padding: var(--s2);
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.app-shell[data-sidebar-collapsed="true"] .sidebar__cta-group:empty,
.sidebar__cta-group:empty {
    display: none;
}

/* Disabled CTA state (manual install / unsupported) */
.sidebar__cta-btn--disabled {
    opacity: 0.4;
    border-color: var(--c-text-muted, #6e7681);
    background: transparent;
    color: var(--c-text-muted, #6e7681);
    cursor: pointer;
}

.sidebar__cta-btn--disabled:hover {
    opacity: 0.65;
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    transform: none;
    box-shadow: none;
}

.sidebar__cta-btn--disabled:active {
    transform: none;
}

/* Address CTA — orange accent */
.sidebar__cta-btn--address {
    border-color: var(--warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    color: var(--warning, #f59e0b);
}
.sidebar__cta-btn--address:hover {
    background: rgba(245, 158, 11, 0.18);
    border-style: solid;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* ── Platform Guide Modal ──────────────────────────────────────── */
.platform-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.platform-guide-overlay--visible {
    opacity: 1;
}

.platform-guide {
    max-width: 380px;
    width: 100%;
    background: var(--c-bg-secondary, #161b22);
    border: 1px solid var(--c-border, #30363d);
    border-radius: var(--r3, 12px);
    padding: var(--s5, 1.5rem);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s ease;
}

.platform-guide-overlay--visible .platform-guide {
    transform: translateY(0) scale(1);
}

.platform-guide__header {
    display: flex;
    align-items: center;
    gap: var(--s2, 0.5rem);
    margin-bottom: var(--s4, 1rem);
}

.platform-guide__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent, #6366f1);
}

.platform-guide__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text, #e6edf3);
}

.platform-guide__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-text-secondary, #b1bac4);
}

.platform-guide__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: guide-step;
}

.platform-guide__steps li {
    counter-increment: guide-step;
    padding: var(--s2, 0.5rem) 0;
    padding-left: 2.2rem;
    position: relative;
    line-height: 1.5;
}

.platform-guide__steps li::before {
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: calc(var(--s2, 0.5rem) + 1px);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.platform-guide__note {
    margin-top: var(--s3, 0.75rem);
    padding: var(--s3, 0.75rem);
    background: var(--c-bg-tertiary, #1c2128);
    border-radius: var(--r2, 8px);
    font-size: 0.88rem;
    color: var(--c-text-muted, #6e7681);
    line-height: 1.5;
}

.platform-guide__actions {
    margin-top: var(--s4, 1rem);
    display: flex;
    gap: var(--s2, 0.5rem);
}

.platform-guide__btn {
    flex: 1;
    padding: var(--s2, 0.5rem) var(--s3, 0.75rem);
    border: 1px solid var(--c-border, #30363d);
    border-radius: var(--r2, 8px);
    background: var(--c-bg-tertiary, #1c2128);
    color: var(--c-text, #e6edf3);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t, 0.15s) ease;
    text-align: center;
}

.platform-guide__btn:hover {
    background: var(--c-bg-hover, #262c36);
    border-color: var(--c-text-muted, #6e7681);
}

.platform-guide__btn--primary {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    color: #fff;
}

.platform-guide__btn--primary:hover {
    filter: brightness(1.1);
    border-color: var(--accent, #6366f1);
}

.feature-request__context {
    margin-top: var(--s4);
    padding: var(--s3);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}

.sidebar__version {
    display: block;
}

.bug-report__hint {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: var(--s1);
}

.bug-report__context {
    margin-top: var(--s4);
    padding: var(--s3);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}

.bug-report__context-title {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--s2);
}

.bug-report__context-items {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.bug-report__context-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs1);
    color: var(--text-secondary);
}

.bug-report__context-item svg {
    flex-shrink: 0;
    color: var(--muted);
}

.bug-report__screenshot-preview {
    position: relative;
    margin-top: var(--s2);
    max-width: 280px;
    border-radius: var(--r2);
    overflow: hidden;
    border: 1px solid var(--border);
}

.bug-report__screenshot-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r2);
}

.bug-report__screenshot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t) var(--ease);
}

.bug-report__screenshot-remove:hover {
    background: rgba(220, 50, 50, 0.8);
}

.bug-report-screenshot__img {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: opacity var(--t) var(--ease);
}

.bug-report-screenshot__img:hover {
    opacity: 0.85;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--s5);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 90;
    gap: var(--s4);
}

.topbar__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all var(--t) var(--ease);
}

.topbar__hamburger:hover {
    background: var(--accent-subtle);
    color: var(--text-bright);
}

.topbar__breadcrumb {
    flex: 1;
    min-width: 0;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-left: auto;
}

.topbar__lang {
    /* Alias for inline lang toggle in topbar */
}

.topbar__lang .lang-toggle {
    position: static;
}

.topbar__user {
    position: relative;
}

.topbar__user-btn {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    font-family: var(--font);
    font-size: var(--fs2);
}

.topbar__user-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.topbar__user-name {
    font-weight: 500;
    white-space: nowrap;
}

.topbar__user-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform var(--t) var(--ease);
}

.topbar__dropdown {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    min-width: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    box-shadow: var(--shadow3);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all var(--t) var(--ease);
    z-index: 200;
    padding: var(--s2);
}

.topbar__dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.topbar__user-btn .topbar__user-chevron {
    transition: transform var(--t) var(--ease);
}

.topbar__dropdown.is-open ~ .topbar__user-btn .topbar__user-chevron,
.topbar__user:has(.is-open) .topbar__user-chevron {
    transform: rotate(180deg);
}

.topbar__dropdown-header {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s1);
}

.topbar__dropdown-email {
    font-size: var(--fs1);
    color: var(--muted);
    word-break: break-all;
}

.topbar__dropdown-role {
    margin-top: var(--s1);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.topbar__dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: var(--s1) 0;
}

.topbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs2);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    text-align: left;
}

.topbar__dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.topbar__dropdown-item--danger {
    color: var(--danger);
}

.topbar__dropdown-item--danger:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

/* ── Notification Bell ──────────────────────────────────────────── */
.topbar__notifications {
    position: relative;
}

.notif-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    position: relative;
}

.notif-bell:hover {
    background: var(--accent-subtle);
    color: var(--text-bright);
}

.notif-bell__icon {
    width: 20px;
    height: 20px;
}

.notif-bell__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    animation: notifBadgePop 0.3s var(--ease);
}

@keyframes notifBadgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Notification dropdown panel */
.notif-panel {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    width: 380px;
    max-height: 480px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    box-shadow: var(--shadow3);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all var(--t) var(--ease);
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.notif-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.notif-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-panel__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}

.notif-panel__actions {
    display: flex;
    gap: var(--s2);
}

.notif-panel__btn {
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--font);
    font-size: var(--fs1);
    cursor: pointer;
    padding: var(--s1) var(--s2);
    border-radius: var(--r1);
    transition: all var(--t) var(--ease);
}

.notif-panel__btn:hover {
    background: var(--accent-subtle);
}

.notif-panel__tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.notif-panel__tab {
    flex: 1;
    padding: var(--s2) var(--s3);
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--fs2);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    border-bottom: 2px solid transparent;
}

.notif-panel__tab:hover {
    color: var(--text);
}

.notif-panel__tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.notif-panel__list {
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
}

.notif-panel__empty {
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--muted);
    font-size: var(--fs2);
}

/* Individual notification item: the main area is the link (or, without a target,
   a button that expands the text); the unread dot is a separate dismiss button. */
.notif-item {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
    transition: background var(--t) var(--ease), opacity 180ms var(--ease), transform 180ms var(--ease);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item__main {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: var(--s3);
    padding: var(--s3) 0 var(--s3) var(--s4);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.notif-item:not(:has(.notif-item__mark)) .notif-item__main {
    padding-right: var(--s4);
}

.notif-item__main:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: var(--r1);
}

@media (hover: hover) {
    .notif-item:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    .notif-item--unread:hover {
        background: rgba(0, 229, 255, 0.18);
    }
}

.notif-item--unread {
    background: var(--accent-subtle);
}

/* "Mark all read" in the unread tab: entries slide out before the empty state. */
.notif-item.is-leaving {
    opacity: 0;
    transform: translateX(16px);
}

.notif-item.is-expanded .notif-item__title,
.notif-item.is-expanded .notif-item__body {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.notif-item__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
}

.notif-item__icon--ticket {
    background: var(--warning-subtle);
    color: var(--warning);
}

.notif-item__icon--chat {
    background: var(--success-subtle);
    color: var(--success);
}

.notif-item__icon--release {
    background: var(--accent-subtle);
    color: var(--accent);
}

.notif-item__icon--invoice {
    background: var(--danger-subtle);
    color: var(--danger);
}

.notif-item__icon svg {
    width: 16px;
    height: 16px;
}

.notif-item__content {
    flex: 1;
    min-width: 0;
}

.notif-item__title {
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text-bright);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item__body {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item__time {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    white-space: nowrap;
}

/* Dismiss button around the unread dot — a 44px touch target, the dot stays 8px. */
.notif-item__mark {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--s3) + 6px) 0 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.notif-item__mark:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: var(--r1);
}

.notif-item__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transition: transform 180ms var(--ease);
}

@media (hover: hover) {
    /* A ring announces the action before the click. */
    .notif-item__mark:hover .notif-item__dot {
        transform: scale(1.5);
        box-shadow: 0 0 0 3px var(--accent-subtle);
    }
}

.notif-item__mark.is-gone {
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .notif-item,
    .notif-item__mark,
    .notif-item__dot {
        transition: none;
    }
}

.notif-panel__footer {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--border);
    text-align: center;
    flex-shrink: 0;
}

.notif-panel__footer a {
    font-size: var(--fs2);
    color: var(--accent);
    text-decoration: none;
}

.notif-panel__footer a:hover {
    text-decoration: underline;
}

/* ── Settings Profile Card ────────────────────────────────────── */
.settings-profile-card {
    display: flex;
    align-items: center;
    gap: var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s4);
    margin-bottom: var(--s5);
    max-width: 800px;
}

.settings-profile-card__info {
    flex: 1;
    min-width: 0;
}

.settings-profile-card__name {
    font-weight: 600;
    font-size: var(--fs4);
    color: var(--text-primary);
    line-height: 1.3;
}

.settings-profile-card__email {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: 2px;
}

.settings-profile-card__role {
    margin-top: var(--s1);
}

.settings-profile-card__link {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .settings-profile-card {
        flex-wrap: wrap;
    }

    .settings-profile-card__link {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ── Notification Settings Page ────────────────────────────────── */
.notif-settings {
    max-width: 800px;
}

/* Global channel master toggles */
.notif-settings__global {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s4);
    margin-bottom: var(--s5);
}

.notif-settings__global-title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s1);
}

.notif-settings__global-desc {
    font-size: var(--fs1);
    color: var(--muted);
    margin-bottom: var(--s4);
}

.notif-settings__global-toggles {
    display: flex;
    gap: var(--s5);
    flex-wrap: wrap;
}

.notif-settings__global-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.notif-settings__global-label {
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text);
    user-select: none;
}

.notif-settings__push-status {
    font-size: var(--fs0);
    font-weight: 500;
    padding: 0.15em 0.5em;
    border-radius: var(--r1);
    white-space: nowrap;
}
.notif-settings__push-status:empty { display: none; }
.notif-settings__push-status--ok {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}
.notif-settings__push-status--warn {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.notif-settings__table td.channel-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.notif-settings__group {
    margin-bottom: var(--s5);
}

.notif-settings__group-title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--border);
}

.notif-settings__table {
    width: 100%;
    border-collapse: collapse;
}

.notif-settings__table th {
    text-align: center;
    padding: var(--s2) var(--s3);
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notif-settings__table th:first-child {
    text-align: left;
}

.notif-settings__table td {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--border);
}

.notif-settings__table td:first-child {
    font-size: var(--fs2);
    color: var(--text);
}

.notif-settings__table td:not(:first-child) {
    text-align: center;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 10px;
    transition: all var(--t) var(--ease);
}

.toggle-switch__slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--text);
    border-radius: 50%;
    transition: all var(--t) var(--ease);
}

.toggle-switch input:checked + .toggle-switch__slider {
    background: var(--accent);
}

.toggle-switch input:checked + .toggle-switch__slider::before {
    transform: translateX(16px);
    background: #fff;
}

.toggle-switch input:disabled + .toggle-switch__slider {
    opacity: 0.4;
    cursor: not-allowed;
}

.toggle-switch__slider--saved {
    animation: toggle-saved-flash .5s ease;
}
@keyframes toggle-saved-flash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--success-rgb, 46,204,113), .5); }
    50%  { box-shadow: 0 0 0 6px rgba(var(--success-rgb, 46,204,113), 0); }
    100% { box-shadow: none; }
}

.toggle-switch--coming-soon {
    opacity: 0.35;
    pointer-events: none;
}

/* Notification full page */
.notif-page {
    max-width: 800px;
}

.notif-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}

.notif-page__list {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
}

.notif-page .notif-item__main {
    padding: var(--s4) 0 var(--s4) var(--s4);
}

.notif-page .notif-item:not(:has(.notif-item__mark)) .notif-item__main {
    padding-right: var(--s4);
}

.notif-page .notif-item__mark {
    padding-top: calc(var(--s4) + 6px);
}

/* The entry a notification without a target was opened for (…/notifications#notif-N). */
.notif-page .notif-item:target {
    box-shadow: inset 3px 0 0 var(--accent);
}

.notif-page .notif-item:target .notif-item__title,
.notif-page .notif-item:target .notif-item__body {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* Responsive */
@media (max-width: 767px) {
    .notif-panel {
        position: fixed;
        top: var(--topbar-height);
        left: 1rem;
        right: 1rem;
        width: auto;
        max-height: 60vh;
    }

    .notif-settings {
        overflow-x: auto;
    }

    .notif-settings__table th,
    .notif-settings__table td {
        padding: var(--s1) var(--s2);
    }

    .notif-settings__table td:first-child {
        font-size: var(--fs1);
    }

    .notif-settings__global-toggles {
        gap: var(--s3);
    }

    .notif-settings__global {
        padding: var(--s3);
    }
}

/* ── Mobile Sidebar Overlay ─────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--ease);
}

.sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s5);
    transition: all var(--t) var(--ease);
}

a.card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card--hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
    border-color: var(--accent);
}

.card--elevated {
    box-shadow: var(--shadow2);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}

.card__header--wrap {
    flex-wrap: wrap;
    gap: var(--s2);
}

@media (max-width: 640px) {
    .card__header--wrap .card__title {
        width: 100%;
    }
}

.card__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
}

.card__subtitle {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: var(--s1);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid transparent;
    border-radius: var(--r2);
    font-family: var(--font);
    font-size: var(--fs2);
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 600;
}
.btn--primary:hover {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--accent-hover);
    color: var(--accent-hover);
}

.btn--secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
    border-color: var(--muted);
}

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.btn--danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn--danger:hover {
    background: #f97583;
    border-color: #f97583;
    color: #fff;
}

.btn--success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn--success:hover {
    background: #56d364;
    border-color: #56d364;
    color: #fff;
}

.btn--sm {
    padding: var(--s1) var(--s3);
    font-size: var(--fs1);
}

.btn--lg {
    padding: var(--s3) var(--s5);
    font-size: var(--fs3);
}

/* ── Form Elements ──────────────────────────────────────────────── */
.form-group {
    margin-bottom: var(--s4);
}

.form-label {
    display: block;
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text-bright);
    margin-bottom: var(--s1);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--s2) var(--s3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs3);
    transition: all var(--t) var(--ease);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-input::placeholder {
    color: var(--muted);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.form-textarea::placeholder {
    color: var(--muted);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s3) center;
    padding-right: var(--s6);
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.badge--accent {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--success {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--warning {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--danger {
    background: var(--danger-subtle);
    color: var(--danger);
}

.badge--muted {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

/* ── Page Header ───────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.page-header__left {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.page-header__right {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

.table th {
    text-align: left;
    padding: var(--s3) var(--s4);
    background: var(--bg-alt);
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs2);
}

.data-table th {
    text-align: left;
    padding: var(--s3) var(--s4);
    background: var(--bg-alt);
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs1);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* ── Avatar ─────────────────────────────────────────────────────── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--avatar-bg, var(--accent-subtle));
    color: var(--avatar-color, var(--accent));
    font-weight: 600;
    flex-shrink: 0;
    user-select: none;
}

.avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--fs1);
}

.avatar--md {
    width: 36px;
    height: 36px;
    font-size: var(--fs2);
}

.avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--fs4);
}

.avatar--xl {
    width: 64px;
    height: 64px;
    font-size: var(--fs5);
}

/* ── Grid ───────────────────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--s4);
}

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

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

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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

/* ── Text Utilities ─────────────────────────────────────────────── */
.text-bright { color: var(--text-bright); }
.text-muted  { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-sm     { font-size: var(--fs2); }
.text-lg     { font-size: var(--fs4); }
.text-xl     { font-size: var(--fs5); }

.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ── Spacing Utilities ──────────────────────────────────────────── */
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mb-1 { margin-bottom: var(--s1); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }

/* ── Flex Utilities ─────────────────────────────────────────────── */
.flex            { display: flex; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.flex-wrap { flex-wrap: wrap; }

/* ── Display Utilities ──────────────────────────────────────────── */
.hide-mobile  { }
.hide-desktop { display: none; }

/* ── Notifications ──────────────────────────────────────────────── */
.notification {
    padding: var(--s3) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r2);
    font-size: var(--fs2);
    color: var(--text);
    opacity: 0;
    transform: translateX(20px);
    transition: all var(--t) var(--ease);
    max-width: 400px;
    box-shadow: var(--shadow2);
}

/* Toasts (Hub.notify) are text only and sit fixed over the topbar's right edge. The
   container's box swallowed clicks too, not just the toast inside it: "please try
   again" covered the very button to try again with, and the bell beside it. */
#notifications,
.notification {
    pointer-events: none;
}

.notification--visible {
    opacity: 1;
    transform: translateX(0);
}

.notification--success {
    border-left-color: var(--success);
}

.notification--error {
    border-left-color: var(--danger);
}

.notification--info {
    border-left-color: var(--accent);
}

.notification--warning {
    border-left-color: var(--warning);
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.animate-in {
    animation: fadeInUp var(--t-slow) var(--ease) both;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }

/* ── Flash Messages ───────────────────────────────────────────── */
.flash {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border-radius: var(--r2);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: var(--s4);
    border-left: 4px solid;
    animation: flashSlideIn 0.4s var(--ease) both;
}

.flash--success {
    background: rgba(52, 211, 153, 0.1);
    color: var(--green, #34d399);
    border-left-color: var(--green, #34d399);
}

.flash--error {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red, #f87171);
    border-left-color: var(--red, #f87171);
}

.flash--warning {
    background: rgba(251, 191, 36, 0.1);
    color: var(--yellow, #fbbf24);
    border-left-color: var(--yellow, #fbbf24);
}

.flash--info {
    background: rgba(96, 165, 250, 0.1);
    color: var(--blue, #60a5fa);
    border-left-color: var(--blue, #60a5fa);
}

@keyframes flashSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Dashboard Specific ─────────────────────────────────────────── */
.dashboard-welcome {
    background: linear-gradient(135deg, var(--card) 0%, rgba(0, 229, 255, 0.06) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    padding: var(--s6);
}

.dashboard-welcome__inner {
    display: flex;
    align-items: center;
    gap: var(--s5);
}

.dashboard-welcome__text h1 {
    font-size: var(--fs5);
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: var(--s1);
}

.dashboard-welcome__text p {
    color: var(--muted);
    font-size: var(--fs2);
}

.dashboard-stat {
    text-align: center;
}

.dashboard-stat__value {
    font-size: var(--fs6);
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.2;
}

.dashboard-stat__label {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: var(--s1);
}

.dashboard-stat__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--s3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r3);
    color: var(--accent);
    background: var(--accent-subtle);
}

.dashboard-activity {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-activity__empty {
    text-align: center;
    color: var(--muted);
    padding: var(--s6);
}

.dashboard-activity__empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--s3);
    color: var(--muted);
    opacity: 0.5;
}

/* ── Dashboard KPI Row (M14) ───────────────────────────────────── */
.dashboard-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}

.dashboard-kpi {
    display: flex;
    flex-direction: column;
}

.dashboard-kpi .card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s3);
}

.dashboard-kpi__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

/* Money Goal */
.kpi-money__content {
    display: flex;
    align-items: center;
    gap: var(--s5);
}

.kpi-money__ring {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.kpi-money__ring .progress-ring {
    width: 100%;
    height: 100%;
}

.kpi-money__ring .progress-ring__fill {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs4);
    font-weight: 700;
    color: var(--text-bright);
}

.kpi-money__details {
    flex: 1;
    min-width: 0;
}

.kpi-money__label {
    font-size: var(--fs1);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s1);
}

.kpi-money__value {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.kpi-money__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

/* Hank Dashboard Widget Container */
.kpi-hank__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    padding: var(--s3);
}

.kpi-hank__frame-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--bg);
}

.kpi-hank__frame-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}

.kpi-hank__frame-name {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-hank__frame {
    width: 100%;
    border: none;
    background: var(--bg);
    display: block;
}

/* Deadline List */
.deadline-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.deadline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast) var(--ease);
}

.deadline-item:hover {
    background: var(--bg-alt);
}

.deadline-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.deadline-item__title {
    font-size: var(--fs2);
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deadline-item__project {
    font-size: var(--fs1);
}

/* Queue List */
.queue-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast) var(--ease);
}

.queue-item:hover {
    background: var(--bg-alt);
}

.queue-item__info {
    flex: 1;
    min-width: 0;
}

.queue-item__title {
    font-size: var(--fs2);
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.queue-item__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs1);
    margin-top: 2px;
}

.queue-item__progress {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
    width: 100px;
}

.queue-item__percent {
    font-size: var(--fs1);
    color: var(--muted);
    width: 32px;
    text-align: right;
}

.progress-bar--sm {
    height: 4px;
    flex: 1;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.6s var(--ease);
}

/* Resume Grid */
.resume-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s3);
}

.resume-card {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s4);
    border-radius: var(--r3);
    border: 1px solid var(--border);
    background: var(--bg-alt);
    text-decoration: none;
    color: inherit;
    transition: all var(--t) var(--ease);
}

.resume-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
    border-color: var(--accent);
}

.resume-card__title {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resume-card__meta {
    font-size: var(--fs1);
}

.resume-card__action {
    margin-top: auto;
    align-self: flex-start;
}

/* Widget Grid */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
}

.widget-frame-container {
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
    background: var(--bg-alt);
}

.widget-frame__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.widget-frame__name {
    font-size: var(--fs1);
    color: var(--muted);
    font-weight: 500;
}

.widget-frame {
    width: 100%;
    border: none;
    display: block;
    background: transparent;
}

.widget-feedback {
    display: flex;
    gap: var(--s1);
}

.widget-feedback__btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r2);
    padding: 2px 6px;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--t-fast) var(--ease);
    line-height: 1;
}

.widget-feedback__btn:hover {
    color: var(--text-bright);
    border-color: var(--border);
    background: var(--bg-alt);
}

.widget-feedback__btn.is-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Dynamic Cards (M15) ─────────────────────────────────────── */

.card-slot {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.card-slot--top {
    margin-top: var(--s4);
}

.card-slot--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s3);
    margin-top: var(--s4);
}

.card-slot--sidebar {
    margin-top: var(--s3);
}

.card-slot--inbox-top {
    margin-bottom: var(--s3);
}

.card-slot--project-header {
    margin-bottom: var(--s3);
}

.card-frame-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
    transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease);
}

.card-frame-container:hover {
    border-color: var(--accent-subtle);
}

.card--seen {
    opacity: 0.75;
}

.card--seen:hover {
    opacity: 1;
}

.card-frame__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}

.card-frame__name {
    font-size: var(--fs1);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.card-frame {
    width: 100%;
    border: none;
    min-height: 80px;
    display: block;
    transition: height var(--t) var(--ease);
}

.card-feedback {
    display: flex;
    gap: var(--s1);
}

.card-feedback__btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r2);
    padding: 2px 6px;
    cursor: pointer;
    color: var(--muted);
    transition: all var(--t-fast) var(--ease);
    line-height: 1;
}

.card-feedback__btn:hover {
    color: var(--text-bright);
    border-color: var(--border);
    background: var(--bg-alt);
}

.card-feedback__btn.is-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Stats Divider */
.dashboard-stat__divider {
    color: var(--muted);
    font-weight: 400;
    margin: 0 2px;
}

.text-xs {
    font-size: var(--fs1);
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    margin-top: var(--s4);
}

/* Badge Small */
.badge--sm {
    font-size: 0.65rem;
    padding: 1px 6px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-shell[data-sidebar-collapsed="true"] {
        grid-template-columns: 1fr;
    }

    /* Reset collapsed state for mobile drawer — labels must be visible */
    .app-shell[data-sidebar-collapsed="true"] .sidebar__logo-text,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__link-label,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn-label,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn-label,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn-label {
        opacity: 1;
        width: auto;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__section-label {
        opacity: 1;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__link-badge {
        display: flex;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__bug-btn,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__feature-btn,
    .app-shell[data-sidebar-collapsed="true"] .sidebar__cta-btn {
        justify-content: flex-start;
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__footer {
        text-align: left;
        padding: var(--s3) var(--s4);
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__header {
        padding: 0 var(--s4);
    }

    .app-shell[data-sidebar-collapsed="true"] .sidebar__logo {
        gap: var(--s2);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--t-slow) var(--ease);
        z-index: 110;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar__footer {
        padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-overlay {
        display: block;
    }

    .topbar__hamburger {
        display: flex;
    }

    .main-content {
        padding: var(--s4);
    }

    /* Shell lock: prevent Android viewport wobble.
       Body = fixed shell at stable height, scroll only inside main-content */
    body.app-shell {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
    }

    .app-shell .main-wrap {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        contain: layout style;
    }

    .app-shell .main-content {
        overflow-y: auto;
    }

    .hide-mobile {
        display: none;
    }

    .hide-desktop {
        display: initial;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .topbar__user-name {
        display: none;
    }

    .topbar {
        padding: 0 var(--s3);
    }

    .dashboard-welcome {
        padding: var(--s4);
    }

    .dashboard-welcome__inner {
        flex-direction: column;
        text-align: center;
    }

    .dashboard-kpi-row {
        grid-template-columns: 1fr;
    }

    .kpi-money__content {
        flex-direction: column;
        text-align: center;
    }

    .kpi-money__meta {
        justify-content: center;
    }

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

    .widget-frame-container {
        grid-column: span 1 !important;
    }

    .card-slot--grid {
        grid-template-columns: 1fr;
    }

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

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

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

    .dashboard-kpi-row {
        grid-template-columns: 1fr;
    }

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

    .card-slot--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Prevent grid reflow flickering on tablet */
    .app-shell {
        transition: none;
    }

    .sidebar {
        transition: none;
    }

    /* Fix Android bottom bar: lock layout to visible viewport,
       scroll only inside main-content instead of the whole page */
    body.app-shell {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
    }

    .app-shell .main-wrap {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        contain: layout style;
    }

    .main-content {
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   M05 – Clients Module
   ══════════════════════════════════════════════════════════════════════ */

/* ── Clients Toolbar ───────────────────────────────────────────────── */
.clients-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin: var(--s4) 0;
    flex-wrap: wrap;
}

.clients-toolbar__search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.clients-toolbar__search-icon {
    position: absolute;
    left: var(--s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.clients-toolbar__search-input {
    padding-left: var(--s6) !important;
}

.clients-toolbar__filters {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 2px;
}

.clients-toolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    border-radius: var(--r2);
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
}

.clients-toolbar__filter:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.05);
}

.clients-toolbar__filter--active {
    color: var(--text-bright);
    background: var(--accent-subtle);
}

/* ── Sort Toggle (shared) ──────────────────────────────────────────── */
.sort-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: 2px;
}

.sort-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    border-radius: var(--r2);
    font-size: var(--fs1);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    cursor: pointer;
}

.sort-toggle__btn:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.05);
}

.sort-toggle__btn--active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.sort-toggle__btn--active:hover {
    color: var(--accent);
}

.sort-toggle__btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.sort-toggle__btn--active svg {
    opacity: 1;
}

@media (max-width: 640px) {
    .sort-toggle {
        order: 3;
        width: 100%;
    }
}

/* ── Client List ───────────────────────────────────────────────────── */
.client-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
    cursor: pointer;
}

.client-item:hover {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.04);
    transform: translateX(4px);
}

.client-item__info {
    flex: 1;
    min-width: 0;
}

.client-item__name {
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-item__email {
    font-size: var(--fs2);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-item__badges {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

.client-item__chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform var(--t) var(--ease);
}

.client-item:hover .client-item__chevron {
    transform: translateX(2px);
    color: var(--accent);
}

/* ── Client Header ─────────────────────────────────────────────────── */
.client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}

.client-header__identity {
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex: 1;
    min-width: 0;
}

.client-header__name {
    flex: 1;
    min-width: 0;
}

.client-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

/* ── Client Detail Grid ────────────────────────────────────────────── */
.client-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s4);
    align-items: start;
}

.client-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.client-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

/* ── Section Cards ─────────────────────────────────────────────────── */
.client-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s4);
}

.client-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s3);
}

.client-section__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}

.client-section__action {
    flex-shrink: 0;
}

/* ── Credit balance ("Guthaben-Konto") ─────────────────────────────── */
.client-credit__balance {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}
.client-credit__balance.is-positive {
    background: var(--success-subtle);
    border-color: var(--success);
}
.client-credit__amount {
    font-size: var(--fs5, 1.5rem);
    font-weight: 700;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}
.client-credit__balance.is-positive .client-credit__amount {
    color: var(--success);
}
.client-credit__caption {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs1);
}
.client-credit__form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.client-credit__row {
    display: flex;
    gap: var(--s2);
}
.client-credit__row .form-input { flex: 1; min-width: 0; }
.client-credit__type { flex: 0 0 42%; }
.client-credit__submit { align-self: flex-start; }
.client-credit__hint {
    font-size: var(--fs1);
    line-height: 1.4;
    margin: 0;
}
.client-credit__history {
    margin-top: var(--s4);
    border-top: 1px solid var(--border);
    padding-top: var(--s3);
}
.client-credit__history-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--s2);
}
.client-credit__table td {
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.client-credit__table tr:last-child td { border-bottom: none; }
.client-credit__meta { font-size: var(--fs1); }
.client-credit__pos { color: var(--success); }
.client-credit__neg { color: var(--danger, #f85149); }

/* Invoice draft: prepaid-credit application field */
.invoice-credit-card .form-input { width: 100%; }
.invoice-credit-card__hint {
    display: block;
    margin-top: var(--s2);
    font-size: var(--fs1);
    line-height: 1.4;
}

/* ── Contact Items ─────────────────────────────────────────────────── */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    border-radius: var(--r2);
    transition: background var(--t) var(--ease);
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.contact-item--primary {
    background: var(--accent-subtle);
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--s3) - 3px);
}

.contact-item__info {
    flex: 1;
    min-width: 0;
}

.contact-item__name {
    font-weight: 500;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.contact-item__detail {
    font-size: var(--fs2);
    color: var(--muted);
}

.contact-item__badge {
    flex-shrink: 0;
}

.contact-item__actions {
    display: flex;
    gap: var(--s1);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.contact-item:hover .contact-item__actions {
    opacity: 1;
}

/* ── Invite Items ──────────────────────────────────────────────────── */
.invite-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    border-radius: var(--r2);
    transition: background var(--t) var(--ease);
}

.invite-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.invite-item--pending {
    border-left: 3px solid var(--warning);
    padding-left: calc(var(--s3) - 3px);
}

.invite-item--used {
    opacity: 0.6;
}

.invite-item--expired {
    opacity: 0.4;
}

.invite-item__info {
    flex: 1;
    min-width: 0;
}

.invite-item__email {
    font-weight: 500;
    color: var(--text-bright);
}

.invite-item__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s1);
}

.invite-item__actions {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

.invite-link {
    font-family: var(--font-mono);
    font-size: var(--fs1);
    color: var(--muted);
    word-break: break-all;
    padding: var(--s2);
    background: var(--bg);
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

/* ── Account Items ─────────────────────────────────────────────────── */
.account-item {
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
}

.account-item:last-child {
    border-bottom: none;
}

.account-item__name {
    font-weight: 500;
    color: var(--text-bright);
}

.account-item__email {
    font-size: var(--fs2);
    color: var(--muted);
}

/* ── Empty States ──────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--s6) var(--s4);
}

.empty-state--compact {
    padding: var(--s4) var(--s3);
}

.empty-state__icon {
    margin: 0 auto var(--s4);
    color: var(--muted);
    opacity: 0.5;
}

.empty-state__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.empty-state__message {
    font-size: var(--fs2);
    color: var(--muted);
    margin-bottom: var(--s4);
}

.empty-state__action {
    margin-top: var(--s3);
}

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--ease);
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    box-shadow: var(--shadow3);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    transition: transform var(--t-slow) var(--ease);
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-overlay.is-open .modal {
    transform: scale(1) translateY(0);
}

.modal--sm {
    max-width: 480px;
}

.modal--lg {
    max-width: 720px;
}

.modal--xxl {
    max-width: 1400px;
    width: 95vw;
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Disable backdrop blur on tablet: the extra GPU compositing layer it
       forces triggers tile-rendering glitches (missing squares / flicker) on
       large foldable inner screens. Compensate with a more opaque dim. */
    .modal-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.72);
    }

    .modal--xxl {
        width: 98vw;
        max-width: 98vw;
    }

    .modal__body {
        overflow-y: scroll;
    }
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border);
}

.modal__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
}

.modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs5);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    line-height: 1;
}

.modal__close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
}

.modal__body {
    padding: var(--s5);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.modal__body::-webkit-scrollbar { width: 6px; }
.modal__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-top: 1px solid var(--border);
}

/* ── Invite Landing ────────────────────────────────────────────────── */
.invite-landing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--s4);
}

.invite-landing__card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    padding: var(--s6);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow3);
}

.invite-landing__logo {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.invite-landing__title {
    font-size: var(--fs4);
    font-weight: 700;
    color: var(--text-bright);
}

/* ── Address Details Toggle ────────────────────────────────────────── */
.client-address-details summary {
    list-style: none;
}

.client-address-details summary::-webkit-details-marker {
    display: none;
}

.client-address-details[open] summary svg {
    transform: rotate(90deg);
}

.client-address-details summary svg {
    transition: transform var(--t) var(--ease);
}

/* ── M05 Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .client-detail {
        grid-template-columns: 1fr;
    }

    .client-header {
        flex-direction: column;
        align-items: stretch;
    }

    .client-header__actions {
        padding-top: var(--s3);
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 767px) {
    .client-item {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .client-item__badges {
        order: 3;
        width: 100%;
        margin-left: calc(36px + var(--s4));
    }

    .clients-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .clients-toolbar__search {
        max-width: none;
    }

    .clients-toolbar__filters {
        justify-content: center;
    }

    .contact-item {
        flex-wrap: wrap;
    }

    .contact-item__actions {
        opacity: 1;
    }

    .invite-item {
        flex-wrap: wrap;
    }

    .invite-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .client-section {
        padding: var(--s3);
    }
}

@media (max-width: 480px) {
    .client-item__badges {
        margin-left: 0;
    }

    .client-header__actions {
        flex-direction: column;
    }

    .client-header__actions .btn,
    .client-header__actions form {
        width: 100%;
    }

    .client-header__actions form .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M06 – Workspace Projects & Explorer
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Projects Toolbar ─────────────────────────────────────────────────── */
.projects-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s4);
    flex-wrap: wrap;
}

.projects-toolbar__search {
    position: relative;
    flex: 0 1 320px;
    min-width: 200px;
}

.projects-toolbar__search-icon {
    position: absolute;
    left: var(--s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.projects-toolbar__search-input {
    padding-left: 2.25rem;
}

.projects-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--s1);
    flex-wrap: wrap;
}

.projects-toolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s3);
    border-radius: var(--r3);
    font-size: var(--fs2);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--t) var(--ease);
    text-decoration: none;
    white-space: nowrap;
}

.projects-toolbar__filter:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.projects-toolbar__filter--active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.projects-toolbar__filter--active:hover {
    color: var(--accent);
}

/* ── Project List ─────────────────────────────────────────────────────── */
.project-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.project-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    transition: background var(--t) var(--ease);
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--r4);
}

.project-item:hover {
    background: var(--bg-alt);
    color: var(--text);
}

.project-item__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r3);
    background: var(--accent-subtle);
    color: var(--accent);
    flex-shrink: 0;
}

.project-item__info {
    flex: 1;
    min-width: 0;
}

.project-item__name {
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item__path {
    font-size: var(--fs1);
    color: var(--muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item__badges {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.project-item__tasks {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.project-item__task-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--fs1);
    font-weight: 500;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    white-space: nowrap;
    line-height: 1.4;
}

.project-item__task-count--mine {
    background: var(--warning-subtle, rgba(234, 179, 8, 0.12));
    color: var(--warning, #eab308);
}

.project-item__client {
    font-size: var(--fs2);
    color: var(--muted);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item__chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform var(--t) var(--ease);
}

.project-item:hover .project-item__chevron {
    transform: translateX(2px);
    color: var(--text-bright);
}

/* ── Project Detail Header ────────────────────────────────────────────── */
.project-detail-header {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.project-detail-header__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.project-detail-header__info {
    flex: 1;
    min-width: 0;
}

.project-detail-header__title {
    font-size: var(--fs5);
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}

.project-detail-header__badges {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.project-detail-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

/* ── Project Detail ───────────────────────────────────────────────────── */
.project-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s4);
    align-items: start;
}

.project-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.project-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

/* ── Project Tabs ─────────────────────────────────────────────────────── */
.project-tabs {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1);
    background: var(--bg-alt);
    border-radius: var(--r3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.project-tabs::-webkit-scrollbar {
    display: none;
}

.project-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--r2);
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--t) var(--ease);
    cursor: pointer;
    border: none;
    background: none;
}

.project-tab:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.project-tab--active {
    color: var(--text-bright);
    background: var(--card);
    box-shadow: var(--shadow1);
}

.project-tab-content {
    display: none;
}

.project-tab-content--active {
    display: block;
}

/* ── Tab Placeholder (Coming Soon) ────────────────────────────────────── */
.tab-placeholder {
    text-align: center;
    padding: var(--s6) var(--s4);
}

.tab-placeholder__icon {
    margin: 0 auto var(--s4);
    color: var(--muted);
    opacity: 0.4;
}

.tab-placeholder__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.tab-placeholder__message {
    font-size: var(--fs2);
    color: var(--muted);
}

/* ── Group Explorer ───────────────────────────────────────────────────── */
.group-explorer {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.group-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    overflow: hidden;
}

.group-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    cursor: pointer;
    user-select: none;
    transition: background var(--t) var(--ease);
}

.group-section__header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.group-section__left {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
}

.group-section__chevron {
    color: var(--muted);
    transition: transform var(--t) var(--ease);
    flex-shrink: 0;
}

.group-section--open .group-section__chevron {
    transform: rotate(90deg);
}

.group-section__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}

.group-section__path {
    font-size: var(--fs1);
    color: var(--muted);
    font-family: var(--font-mono);
}

.group-section__badge {
    flex-shrink: 0;
}

.group-section__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.group-section__body {
    border-top: 1px solid var(--border);
    display: none;
}

.group-section--open .group-section__body {
    display: block;
}

/* ── Folder Items ─────────────────────────────────────────────────────── */
.folder-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s5);
    transition: background var(--t) var(--ease);
    border-bottom: 1px solid var(--border);
}

.folder-item:last-child {
    border-bottom: none;
}

.folder-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.folder-item--registered {
    border-left: 3px solid var(--success);
}

.folder-item--unregistered {
    border-left: 3px solid transparent;
}

.folder-item__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0;
}

.folder-item--registered .folder-item__icon {
    color: var(--success);
}

.folder-item__info {
    flex: 1;
    min-width: 0;
}

.folder-item__name {
    font-weight: 500;
    color: var(--text-bright);
    font-size: var(--fs2);
}

.folder-item__meta {
    font-size: var(--fs1);
    color: var(--muted);
    font-family: var(--font-mono);
}

.folder-item__badges {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.folder-item__actions {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

/* ── Status Badges (Project-specific) ─────────────────────────────────── */
.badge--active {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--paused {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--completed {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--archived {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.badge--planning {
    background: var(--warning-subtle);
    color: var(--warning);
}

/* Extra-small badge modifier (phase chips) */
.badge--xs {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
}

.badge--registered {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--unregistered {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.badge--paid {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--unpaid {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--hub {
    background: var(--accent-subtle);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* ── Payment Toggle ───────────────────────────────────────────────────── */
.payment-toggle {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
}

.payment-toggle__switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: background var(--t) var(--ease);
    border: none;
    padding: 0;
}

.payment-toggle__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--text);
    border-radius: 50%;
    transition: transform var(--t) var(--ease);
}

.payment-toggle__switch--on {
    background: var(--success);
}

.payment-toggle__switch--on::after {
    transform: translateX(18px);
    background: #fff;
}

.payment-toggle__label {
    font-size: var(--fs2);
    color: var(--text);
}

/* ── Phase Details Card ──────────────────────────────────────────────── */
.phase-details-card {
    margin-bottom: var(--s4);
}

.phase-details-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}

.phase-details-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.phase-details-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
}

.phase-details-card__row:last-child {
    border-bottom: none;
}

.phase-details-card__label {
    font-size: var(--fs2);
    color: var(--muted);
    white-space: nowrap;
}

.phase-details-card__actions {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

.phase-details-card .payment-toggle {
    padding: 0;
}

/* ── Project Notes Auto-save ──────────────────────────────────────────── */
.project-notes-status {
    font-size: var(--fs1);
    color: var(--muted);
    min-height: 1em;
}

/* ── Project Tag Chips ────────────────────────────────────────────────── */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px var(--s2);
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--r2);
    font-size: var(--fs1);
    font-weight: 500;
}

/* ── M06 Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .project-detail-header {
        flex-wrap: wrap;
        gap: var(--s3);
    }

    .project-detail-header__icon {
        width: 36px;
        height: 36px;
    }

    .project-detail-header__icon svg {
        width: 18px;
        height: 18px;
    }

    .project-detail-header__info {
        flex: 1;
        min-width: calc(100% - 36px - var(--s3));
    }

    .project-detail-header__title {
        font-size: var(--fs4);
    }

    .project-detail-header__actions {
        width: 100%;
        padding-top: var(--s2);
        border-top: 1px solid var(--border);
    }

    .project-detail {
        grid-template-columns: 1fr;
    }

    .project-item {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .project-item__badges {
        order: 3;
        width: 100%;
        margin-left: calc(36px + var(--s4));
    }

    .project-item__tasks {
        order: 4;
        width: 100%;
        margin-left: calc(36px + var(--s4));
    }

    .project-item__client {
        max-width: none;
    }

    .projects-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-toolbar__search {
        max-width: none;
        flex: 1 1 auto;
    }

    .projects-toolbar__filters {
        justify-content: center;
    }

    .project-tabs {
        margin: 0 calc(-1 * var(--s4));
        padding: var(--s1) var(--s4);
        border-radius: 0;
    }

    .folder-item {
        flex-wrap: wrap;
    }

    .folder-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .group-section__header {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .group-section__path {
        width: 100%;
        order: 3;
    }

    .project-tab-content .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Project Info Collapse (Mobile) ──────────────────────────────── */

.project-info-toggle {
    display: none;
}

@media (max-width: 767px) {
    .project-info-collapse {
        overflow: hidden;
        transition: max-height 400ms var(--ease),
                    opacity 400ms var(--ease);
    }

    .project-info-collapse.is-collapsed {
        max-height: 0 !important;
        opacity: 0;
        pointer-events: none;
    }

    .project-info-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--s2);
        width: 100%;
        padding: var(--s2) var(--s3);
        margin-bottom: var(--s2);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r2);
        color: var(--muted);
        font-size: var(--fs2);
        cursor: pointer;
        transition: color var(--t) var(--ease),
                    background var(--t) var(--ease);
    }

    .project-info-toggle:hover,
    .project-info-toggle:focus-visible {
        color: var(--text-bright);
        background: var(--bg-alt);
    }

    .project-info-toggle__icon {
        transition: transform var(--t-slow) var(--ease);
    }

    .project-info-toggle[aria-expanded="false"] .project-info-toggle__icon {
        transform: rotate(-180deg);
    }
}

@media (max-width: 480px) {
    .project-item__badges {
        margin-left: 0;
    }

    .folder-item__badges {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M07 – ClientHub Projects & Wizard
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wizard ──────────────────────────────────────────────────────────── */
.wizard {
    max-width: 800px;
}

.wizard__progress {
    margin-bottom: var(--s5);
}

.wizard__progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--s4);
}

.wizard__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width var(--t-slow) var(--ease);
}

.wizard__progress-steps {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
}

.wizard__step-indicator {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    border-radius: var(--r3);
    font-size: var(--fs2);
    color: var(--muted);
    transition: all var(--t) var(--ease);
    cursor: default;
    white-space: nowrap;
}

.wizard__step-indicator--active {
    color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 600;
}

.wizard__step-indicator--completed {
    color: var(--success);
}

.wizard__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    font-size: var(--fs1);
    font-weight: 600;
    flex-shrink: 0;
    transition: all var(--t) var(--ease);
}

.wizard__step-indicator--active .wizard__step-number {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.wizard__step-indicator--completed .wizard__step-number {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.wizard__step-label {
    font-size: var(--fs2);
}

.wizard__body {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    min-height: 300px;
}

.wizard__panel {
    display: none;
    padding: var(--s5);
}

.wizard__panel--active {
    display: block;
    animation: fadeInUp var(--t-slow) var(--ease) both;
}

.wizard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    border-radius: 0 0 var(--r4) var(--r4);
}

.wizard__auto-save {
    font-size: var(--fs1);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.wizard__auto-save--saved {
    color: var(--success);
}

/* ── AI Assistant Panel ──────────────────────────────────────────────── */
.wizard__ai {
    margin: var(--s4) 0;
    padding: 0 var(--s5);
    position: relative;
}

.wizard__ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: var(--r4);
    color: var(--accent);
    font-size: var(--fs2);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}

.wizard__ai-toggle:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(139, 92, 246, 0.25));
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.wizard__ai-toggle.is-active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(139, 92, 246, 0.25));
    border-color: var(--accent);
}

.wizard__ai-toggle-count {
    font-size: var(--fs1);
    background: var(--accent-subtle);
    padding: 1px 6px;
    border-radius: 10px;
    color: var(--accent);
}

.wizard__ai-toggle-count:empty {
    display: none;
}

.wizard__ai-panel {
    display: none;
    margin-top: var(--s3);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
    animation: slideDown var(--t) var(--ease);
}

.wizard__ai-panel.is-open {
    display: flex;
    flex-direction: column;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard__ai-messages {
    flex: 1;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.wizard__ai-msg {
    max-width: 85%;
    padding: var(--s3) var(--s4);
    border-radius: var(--r3);
    font-size: var(--fs2);
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.wizard__ai-msg--assistant {
    align-self: flex-start;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
}

.wizard__ai-msg--streaming::after {
    content: '▊';
    display: inline;
    animation: wizardCursorBlink 0.6s step-end infinite;
    color: var(--accent, #58a6ff);
    font-weight: bold;
}

@keyframes wizardCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.wizard__ai-msg--user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--text-bright);
}

.wizard__ai-msg--error {
    align-self: center;
    background: var(--danger-subtle);
    border: 1px solid rgba(248, 81, 73, 0.3);
    color: var(--danger);
    font-size: var(--fs1);
    text-align: center;
}

/* Suggestion chips */
.wizard__ai-suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s3);
}

.wizard__ai-chip {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--r2);
    font-size: var(--fs1);
    line-height: 1.4;
    transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
}

.wizard__ai-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}

.wizard__ai-chip-icon--add { background: var(--success, #3fb950); }
.wizard__ai-chip-icon--remove { background: var(--danger, #f85149); }
.wizard__ai-chip-icon--replace { background: var(--accent); }

.wizard__ai-chip-label {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.wizard__ai-chip-value {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
}

.wizard__ai-chip-old {
    color: var(--danger, #f85149);
    text-decoration: line-through;
}

.wizard__ai-chip-new {
    color: var(--success, #3fb950);
}

.wizard__ai-chip-arrow {
    color: var(--text-muted);
    margin: 0 0.15em;
}

.wizard__ai-chip-accept {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--r2);
    background: transparent;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.wizard__ai-chip-accept:hover {
    background: var(--accent);
    color: var(--bg);
}

.wizard__ai-chip--accepted {
    opacity: 0.55;
    background: color-mix(in srgb, var(--success, #3fb950) 10%, transparent);
    border-color: color-mix(in srgb, var(--success, #3fb950) 25%, transparent);
    pointer-events: none;
}

.wizard__ai-chip--accepted .wizard__ai-chip-accept {
    background: var(--success, #3fb950);
    border-color: var(--success, #3fb950);
    color: #fff;
}

.wizard__ai-unavailable {
    padding: var(--s4);
    text-align: center;
}

.wizard__ai-input {
    display: flex;
    align-items: flex-end;
    gap: var(--s2);
    padding: var(--s3);
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
}

.wizard__ai-textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--bg);
    color: var(--text);
    padding: var(--s2) var(--s3);
    font-family: var(--font);
    font-size: var(--fs2);
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    transition: border-color var(--t) var(--ease);
}

.wizard__ai-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.wizard__ai-send {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r2);
    background: var(--accent);
    color: var(--bg);
    cursor: pointer;
    transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.wizard__ai-send:hover {
    background: var(--accent-hover);
}

.wizard__ai-send:active {
    transform: scale(0.93);
}

.wizard__ai-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wizard__ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: var(--s2) var(--s3);
    margin: var(--s2) var(--s3);
    background: color-mix(in srgb, var(--info, var(--primary)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--info, var(--primary)) 20%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.wizard__ai-disclaimer svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--info, var(--primary));
    opacity: 0.7;
}

.wizard__attach-doc {
    margin-top: var(--s4);
    padding: var(--s3) var(--s4);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: var(--radius);
}

.wizard__attach-doc-label {
    display: flex;
    align-items: center;
    gap: var(--s3);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

.wizard__attach-doc-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Brief document upload (manual briefs) */
.wizard__brief-upload {
    margin-top: var(--s4);
}

.wizard__brief-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s5) var(--s4);
    border: 2px dashed color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}

.wizard__brief-upload-dropzone:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.wizard__brief-upload-dropzone--active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.wizard__brief-upload-dropzone svg {
    color: var(--muted);
    opacity: 0.6;
}

.wizard__brief-upload-dropzone span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.wizard__brief-upload-dropzone small {
    font-size: 0.75rem;
    color: var(--muted);
}

.wizard__brief-upload-file {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: var(--radius);
}

.wizard__brief-upload-file-icon {
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0.7;
}

.wizard__brief-upload-file-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard__brief-upload-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 1.125rem;
    cursor: pointer;
    border-radius: var(--r1);
    transition: color 0.15s, background 0.15s;
}

.wizard__brief-upload-remove:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Typing dots animation */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--s3) var(--s4);
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    animation: typingBounce 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Chat AI reply button */
.chat-input__ai-reply {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--r2);
    color: var(--accent);
    font-size: var(--fs1);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
}

.chat-input__ai-reply:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(139, 92, 246, 0.22));
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.12);
}

.chat-input__ai-reply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-input__ai-reply.is-loading span {
    display: none;
}

.chat-input__ai-reply.is-loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* AI draft fill feedback */
.chat-input--ai-filled {
    animation: aiFillPulse 0.6s ease;
}
@keyframes aiFillPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99, 102, 241), 0.4); }
    50%  { box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 99, 102, 241), 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99, 102, 241), 0); }
}

/* ── Tag Input ───────────────────────────────────────────────────────── */
.tag-input {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s2);
    padding-right: calc(var(--s2) + 36px);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
    cursor: text;
}

.tag-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.tag-input__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    list-style: none;
}

.tag-input__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px var(--s2);
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--r2);
    font-size: var(--fs1);
    font-weight: 500;
    animation: fadeInUp var(--t-fast) var(--ease) both;
}

.tag-input__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: all var(--t) var(--ease);
}

.tag-input__chip-remove:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

.tag-input__field {
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs2);
    outline: none;
    min-width: 80px;
    flex: 1;
    padding: var(--s1);
}

.tag-input__field::placeholder {
    color: var(--muted);
    font-size: var(--fs1);
}

.tag-input__add-btn {
    position: absolute;
    right: var(--s2);
    top: var(--s2);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    line-height: 1;
}

.tag-input__add-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ── ClientHub Project List ──────────────────────────────────────────── */
.clienthub-projects {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

.clienthub-projects__section-title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s3);
}

.clienthub-project-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
    position: relative;
    cursor: pointer;
}

.clienthub-project-item:hover {
    border-color: var(--accent);
    transform: translateX(4px);
}

.clienthub-project-item__status-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--r3) 0 0 var(--r3);
}

.clienthub-project-item__status-bar--draft       { background: var(--muted); }
.clienthub-project-item__status-bar--submitted    { background: var(--accent); }
.clienthub-project-item__status-bar--triage       { background: var(--warning); }
.clienthub-project-item__status-bar--accepted     { background: var(--success); }
.clienthub-project-item__status-bar--rejected     { background: var(--danger); }
.clienthub-project-item__status-bar--in_progress  { background: var(--accent); }
.clienthub-project-item__status-bar--active       { background: var(--success); }
.clienthub-project-item__status-bar--waiting      { background: var(--warning); }
.clienthub-project-item__status-bar--done         { background: var(--success); }
.clienthub-project-item__status-bar--archived     { background: var(--muted); }

.clienthub-project-item__info {
    flex: 1;
    min-width: 0;
    padding-left: var(--s2);
}

.clienthub-project-item__title {
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clienthub-project-item__meta {
    font-size: var(--fs2);
    color: var(--muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    margin-top: var(--s1);
}

.clienthub-project-item__progress {
    width: 80px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.clienthub-project-item__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width var(--t-slow) var(--ease);
}

/* Live phase strip on a real-project card */
.clienthub-project-item__phases {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
}

.clienthub-project-item__phase-count {
    margin-left: var(--s1);
}

.clienthub-project-item__actions {
    display: flex;
    gap: var(--s2);
    flex-shrink: 0;
}

/* ── Active Project View ─────────────────────────────────────────────── */
.project-status-card {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: var(--s5);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
}

.progress-ring {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.progress-ring__svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.progress-ring__circle-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 6;
}

.progress-ring__circle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--t-slow) var(--ease);
}

.progress-ring__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs4);
    font-weight: 700;
    color: var(--text-bright);
}

.project-update-card {
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.project-update-card__label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--s2);
}

.project-update-card__text {
    color: var(--text);
    font-size: var(--fs2);
    line-height: 1.6;
}

/* ── Brief Rendered Sections ─────────────────────────────────────────── */
.brief-rendered {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.brief-section {
    padding: var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r3);
}

.brief-section__heading {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.brief-section__content {
    font-size: var(--fs2);
    color: var(--text);
    line-height: 1.6;
}

.brief-section__row {
    padding: var(--s1) 0;
    font-size: var(--fs2);
}

.brief-section__label {
    color: var(--muted);
    font-weight: 500;
}

.brief-section__value {
    color: var(--text);
}

/* ── Brief Markdown Content (rendered MD) ───────────────────────────── */
.brief-section__content h2,
.brief-section__content h3,
.brief-section__content h4,
.brief-section__content h5,
.brief-section__content h6 {
    color: var(--text-bright);
    margin: var(--s3) 0 var(--s2);
    font-weight: 600;
    line-height: 1.3;
}
.brief-section__content h2 { font-size: var(--fs3); }
.brief-section__content h3,
.brief-section__content h4,
.brief-section__content h5,
.brief-section__content h6 { font-size: var(--fs2); }
.brief-section__content > *:first-child { margin-top: 0; }
.brief-section__content > *:last-child  { margin-bottom: 0; }
.brief-section__content p { margin: 0 0 var(--s2); }
.brief-section__content ul,
.brief-section__content ol {
    margin: var(--s2) 0;
    padding-left: var(--s4);
}
.brief-section__content li { margin-bottom: var(--s1); }
.brief-section__content li > p { margin: 0; }
.brief-section__content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: var(--bg-alt);
    border-radius: var(--r1);
    color: var(--accent);
}
.brief-section__content pre {
    font-family: var(--font-mono);
    padding: var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r2);
    overflow-x: auto;
    margin: var(--s2) 0;
    border: 1px solid var(--border);
}
.brief-section__content pre code {
    padding: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--fs2);
}
.brief-section__content blockquote {
    margin: var(--s2) 0;
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--accent);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);
}
.brief-section__content blockquote > *:first-child { margin-top: 0; }
.brief-section__content blockquote > *:last-child  { margin-bottom: 0; }
.brief-section__content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.brief-section__content a:hover { color: var(--text-bright); }
.brief-section__content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--s3) 0;
}
.brief-section__content strong { color: var(--text-bright); font-weight: 600; }
.brief-section__content em { font-style: italic; }
.brief-section__content del { color: var(--muted); text-decoration: line-through; }

/* GFM Tables */
.brief-section__content table {
    border-collapse: collapse;
    margin: var(--s2) 0;
    width: 100%;
    font-size: var(--fs2);
    display: block;
    overflow-x: auto;
}
.brief-section__content thead { background: var(--bg-alt); }
.brief-section__content th,
.brief-section__content td {
    padding: var(--s2) var(--s3);
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.brief-section__content th { color: var(--text-bright); font-weight: 600; }
.brief-section__content tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* GFM Task Lists */
.brief-section__content ul li.task-list-item { list-style: none; margin-left: calc(-1 * var(--s4)); padding-left: var(--s4); position: relative; }
.brief-section__content li input[type="checkbox"] {
    margin-right: var(--s2);
    accent-color: var(--accent);
    transform: translateY(1px);
    cursor: default;
}

/* Editor hint shown beneath MD-aware textareas (Goal, Description) */
.brief-md-hint {
    display: block;
    margin-top: var(--s1);
    font-size: var(--fs1);
    color: var(--muted);
    line-height: 1.4;
}
.brief-md-hint code {
    font-family: var(--font-mono);
    font-size: 0.95em;
    padding: 0.05em 0.25em;
    background: var(--bg-alt);
    border-radius: var(--r1);
    color: var(--text);
}

/* ── Brief Document Card ─────────────────────────────────────────────── */
.brief-document {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s;
}
.brief-document:hover { border-color: var(--primary); }
.brief-document__icon { flex-shrink: 0; color: var(--muted); }
.brief-document__info { flex: 1; min-width: 0; }
.brief-document__name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brief-document__size { font-size: 0.75rem; color: var(--muted); }
.brief-document__download { flex-shrink: 0; white-space: nowrap; }
.brief-document__attach-badge { margin-top: var(--s2); }

/* ── Triage Inbox ────────────────────────────────────────────────────── */
.triage-inbox {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.triage-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
    cursor: pointer;
}

.triage-item:hover {
    border-color: var(--accent);
    transform: translateX(4px);
}

.triage-item__info {
    flex: 1;
    min-width: 0;
}

.triage-item__title {
    font-weight: 600;
    color: var(--text-bright);
}

.triage-item__client {
    font-size: var(--fs2);
    color: var(--muted);
}

.triage-item__date {
    font-size: var(--fs1);
    color: var(--muted);
}

.triage-item__badge {
    flex-shrink: 0;
}

/* ── Triage Detail ───────────────────────────────────────────────────── */
.triage-page {
    overflow: clip;
}

.triage-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s4);
    align-items: start;
    min-width: 0;
}

.triage-detail__brief {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    min-width: 0;
    overflow: hidden;
}

.triage-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.triage-detail__client-card {
    padding: var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.triage-detail__client-card h4 {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.triage-detail__client-info {
    font-size: var(--fs2);
    color: var(--muted);
    line-height: 1.6;
}

/* ── Status Badges (M07 extensions) ──────────────────────────────────── */
.badge--draft {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.badge--submitted {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--triage {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--accepted {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--rejected {
    background: var(--danger-subtle);
    color: var(--danger);
}

.badge--in_progress {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--waiting {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--done {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--inquiry {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

/* ── Triage Brief Edit & Diff ────────────────────────────────────────── */
.triage-edit-form {
    padding: var(--s4);
}

.triage-edit-form .form-group {
    margin-bottom: var(--s3);
}

.triage-tabs {
    display: flex;
    gap: var(--s1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s4);
}

.triage-tab {
    padding: var(--s2) var(--s4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: var(--fs2);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.triage-tab:hover {
    color: var(--text-bright);
}

.triage-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.triage-tab-content {
    display: none;
}

.triage-tab-content--active {
    display: block;
}

/* Triage Tab Indicator */
.triage-tab__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.triage-tab__indicator--running {
    background: var(--warning);
    animation: pulse 1.5s infinite;
}

.triage-tab__indicator--ready {
    background: var(--success);
}

.triage-tab__indicator--failed {
    background: var(--danger);
}

/* Triage Kalkulation Tab */
.triage-kalkulation__summary {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--s3);
}

.triage-kalkulation__total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.triage-kalkulation__list {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.triage-kalkulation__milestone {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.triage-kalkulation__milestone-header {
    padding: var(--s3);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.triage-kalkulation__milestone-header strong {
    font-weight: 600;
    color: var(--bright);
}

.triage-kalkulation__milestone-time {
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.triage-kalkulation__milestone-desc {
    padding: var(--s2) var(--s3);
    color: var(--muted);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}

.triage-kalkulation__tasks {
    display: flex;
    flex-direction: column;
}

.triage-kalkulation__task {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border-light, var(--border));
    transition: background-color 0.15s ease;
}

.triage-kalkulation__task:last-child {
    border-bottom: none;
}

.triage-kalkulation__task:hover {
    background: var(--surface);
}

.triage-kalkulation__task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s2);
}

.triage-kalkulation__task-title {
    font-weight: 500;
    color: var(--text);
}

.triage-kalkulation__task-time {
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    transition: background-color 0.15s ease;
}

.triage-kalkulation__task-time:hover {
    background: var(--surface);
}

.triage-kalkulation__task-desc {
    margin-top: var(--s1);
    color: var(--muted);
    font-size: 0.85rem;
}

/* Kalkulation Empty/Error States */
.triage-kalkulation__empty {
    text-align: center;
    padding: var(--s6);
    color: var(--muted);
}

.triage-kalkulation__empty svg {
    margin-bottom: var(--s3);
    opacity: 0.3;
}

.triage-kalkulation__error {
    padding: var(--s3);
    background: var(--danger-bg, rgba(239,68,68,0.1));
    border-radius: var(--radius);
    color: var(--danger);
}

/* Brief Diff */
.brief-diff {
    padding: var(--s3);
}

.brief-diff__field {
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
}

.brief-diff__field:last-child {
    border-bottom: none;
}

.brief-diff__label {
    display: block;
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: var(--s1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.brief-diff__value {
    color: var(--text);
    font-size: var(--fs2);
}

.brief-diff__old {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.8;
    font-size: var(--fs2);
}

.brief-diff__new {
    color: var(--success);
    font-size: var(--fs2);
}

.brief-diff--changed .brief-diff__old {
    display: block;
    margin-bottom: var(--s1);
}

.brief-diff--changed .brief-diff__new {
    display: block;
}

.brief-diff--added {
    border-left: 3px solid var(--success);
    padding-left: var(--s3);
}

.brief-diff--removed {
    border-left: 3px solid var(--danger);
    padding-left: var(--s3);
}

.brief-diff .tag-chip.brief-diff__old {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    text-decoration: line-through;
}

.brief-diff .tag-chip.brief-diff__new {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
    text-decoration: none;
}

/* Inquiry / Info Banners */
.inquiry-banner {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid #a855f7;
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.inquiry-banner__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: #a855f7;
    margin-bottom: var(--s2);
}

.inquiry-note {
    background: rgba(168, 85, 247, 0.06);
    border-radius: var(--r2);
    padding: var(--s3);
    margin-bottom: var(--s3);
    color: var(--text);
    font-style: italic;
}

.inquiry-banner__actions {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s3);
    flex-wrap: wrap;
}

.info-changes-banner {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.info-changes-banner__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--success);
    margin-bottom: var(--s2);
}

.changes-toggle {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: var(--fs2);
    padding: var(--s1) 0;
    text-decoration: underline;
}

.changes-toggle:hover {
    opacity: 0.8;
}

.changes-detail {
    display: none;
    margin-top: var(--s3);
}

.changes-detail.is-open {
    display: block;
}

.triage-inquiry-info {
    padding: var(--s3);
    background: rgba(168, 85, 247, 0.06);
    border-radius: var(--r2);
    margin-bottom: var(--s3);
    color: #a855f7;
    font-size: var(--fs2);
    text-align: center;
}

.triage-proposed-info {
    padding: var(--s3);
    background: rgba(234, 179, 8, 0.08);
    border-radius: var(--r2);
    color: #eab308;
    font-size: var(--fs2);
    text-align: center;
}

.triage-client-updated-info {
    padding: var(--s3);
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--r2);
    color: #3b82f6;
    font-size: var(--fs2);
    text-align: center;
}

/* ── M07 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .triage-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .wizard__progress-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--s2);
    }

    .wizard__progress-steps::-webkit-scrollbar {
        display: none;
    }

    .wizard__step-label {
        display: none;
    }

    .wizard__step-indicator--active .wizard__step-label {
        display: inline;
    }

    .wizard__footer {
        flex-wrap: wrap;
        gap: var(--s3);
    }

    .triage-item {
        flex-wrap: wrap;
        gap: var(--s2);
        padding: var(--s3);
    }

    .triage-item:hover {
        transform: none;
    }

    .triage-item__info {
        flex: 1 1 100%;
        order: 1;
    }

    .triage-item__title {
        word-break: break-word;
    }

    .triage-item__date {
        order: 2;
        flex: 1 1 auto;
    }

    .triage-item__badge {
        order: 3;
        display: flex;
        flex-wrap: wrap;
        gap: var(--s1);
        justify-content: flex-end;
    }

    .clienthub-project-item {
        flex-wrap: wrap;
    }

    .clienthub-project-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .project-status-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M08 – Tasks, Milestones & Scope-Baseline
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tasks Header ──────────────────────────────────────────────────── */
.tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s4);
    flex-wrap: wrap;
}
.tasks-header__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .tasks-header > h2 {
        width: 100%;
    }
}

/* ── Scope Baseline Bar ──────────────────────────────────────────────── */
.scope-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.scope-bar__info {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.scope-bar__label {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
}

.scope-bar__stats {
    font-size: var(--fs1);
    color: var(--muted);
}

.scope-bar__progress {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}

.scope-bar__progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width var(--t-slow) var(--ease);
}

.scope-bar__percent {
    font-size: var(--fs2);
    font-weight: 700;
    color: var(--accent);
    min-width: 3ch;
    text-align: right;
}

.scope-bar__actions {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

.scope-bar__time-summary {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--text-sm);
    color: var(--muted);
    padding: var(--s1) 0;
    flex-wrap: wrap;
}

.scope-bar__time-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.scope-bar__time-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.scope-bar__time-separator {
    color: var(--border);
}

.scope-bar__time-item--over {
    color: var(--danger, #ef4444);
    font-weight: 600;
}

.scope-bar__time-item--over .scope-bar__time-label {
    color: var(--danger, #ef4444);
}

/* ── Cost Calculator Popover ───────────────────────────────────────── */
.scope-bar__time-summary--clickable {
    cursor: pointer;
    border-radius: var(--r2);
    padding: var(--s1) var(--s2);
    transition: background var(--t) var(--ease);
    position: relative;
}
.scope-bar__time-summary--clickable:hover {
    background: rgba(255, 255, 255, 0.04);
}

.cost-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 480px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    box-shadow: var(--shadow3);
    z-index: 200;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.cost-popover.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cost-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
}
.cost-popover__title {
    font-size: var(--fs3);
    font-weight: 600;
    color: var(--text-bright);
}
.cost-popover__close {
    border: none;
    background: none;
    color: var(--muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--s1);
    border-radius: var(--r2);
    line-height: 1;
    transition: all var(--t) var(--ease);
}
.cost-popover__close:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.06);
}

.cost-popover__body {
    padding: var(--s3) var(--s4);
}

.cost-popover__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs2);
}
.cost-popover__table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-bright);
    padding: var(--s2) var(--s2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cost-popover__table td {
    padding: var(--s2) var(--s2);
    color: var(--text);
    border-bottom: 1px solid rgba(48, 54, 61, 0.4);
    white-space: nowrap;
}
.cost-popover__table tr:last-child td {
    border-bottom: none;
}

.cost-popover__rate-label {
    color: var(--muted);
    font-weight: 500;
}

.cost-popover__price {
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: var(--s1);
    border-radius: var(--r1);
    padding: 2px 6px;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.cost-popover__price:hover {
    background: var(--accent-subtle);
    color: var(--accent);
}

.cost-popover__usd {
    color: var(--muted);
    font-size: var(--fs1);
}

.cost-popover__footer {
    padding: var(--s2) var(--s4);
    border-top: 1px solid var(--border);
    font-size: var(--fs1);
    color: var(--muted);
    text-align: right;
}

@media (max-width: 600px) {
    .cost-popover {
        min-width: unset;
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
    }
    .cost-popover.is-open {
        transform: translateX(-50%) translateY(0);
    }
    .cost-popover__table {
        font-size: var(--fs1);
    }
}

/* ── Change Request Badge ────────────────────────────────────────────── */
.change-request-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--r2);
    background: var(--warning-subtle);
    color: var(--warning);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Task Filters ────────────────────────────────────────────────────── */
.task-filter {
    padding: var(--s1) var(--s3);
    border: none;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: var(--fs2);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.task-filter:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.task-filter--active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Milestone Sections (Accordion) ──────────────────────────────────── */
.tasks-container {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.milestone-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    overflow: hidden;
}

.milestone-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    cursor: pointer;
    user-select: none;
    transition: background var(--t) var(--ease);
}

.milestone-section__header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.milestone-section__left {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
}

.milestone-section__right {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-shrink: 0;
}

.milestone-section__chevron {
    color: var(--muted);
    transition: transform var(--t) var(--ease);
    flex-shrink: 0;
}

.milestone-section--open .milestone-section__chevron {
    transform: rotate(90deg);
}

.milestone-section__title {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.milestone-section__deadline {
    font-size: var(--fs1);
    color: var(--muted);
    white-space: nowrap;
}

.milestone-section__time-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

.milestone-section__actions {
    display: flex;
    gap: var(--s1);
}

.milestone-section__body {
    border-top: 1px solid var(--border);
    display: none;
}

.milestone-section--open .milestone-section__body {
    display: block;
}

/* ── Task Cards ──────────────────────────────────────────────────────── */
.task-card {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    transition: background var(--t) var(--ease);
    border-bottom: 1px solid var(--border);
}

.task-card:last-child {
    border-bottom: none;
}

.task-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.task-card--in-progress {
    border-left: 3px solid var(--clr-warning, #f59e0b);
}

.task-card--in-progress .task-card__checkbox {
    border-color: var(--clr-warning, #f59e0b);
}

.task-card--in-progress .task-card__checkbox::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-warning, #f59e0b);
    animation: task-pulse 1.8s ease-in-out infinite;
}

@keyframes task-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1); }
}

.task-card--done {
    opacity: 0.6;
}

.task-card--empty {
    padding: var(--s3) var(--s4);
    justify-content: center;
}

.task-card__checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
    padding: 0;
    color: #fff;
}

.task-card__checkbox:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.task-card__checkbox--checked {
    background: var(--success);
    border-color: var(--success);
}

.task-card__checkbox--checked:hover {
    background: var(--success);
    border-color: var(--success);
    opacity: 0.8;
}

.task-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-card__title {
    font-size: var(--fs2);
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-card--done .task-card__title {
    text-decoration: line-through;
    color: var(--muted);
}

.task-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.task-card__priority {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: var(--r1);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-card__priority--low {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

.task-card__priority--medium {
    background: var(--accent-subtle);
    color: var(--accent);
}

.task-card__priority--high {
    background: var(--warning-subtle);
    color: var(--warning);
}

.task-card__priority--critical {
    background: var(--danger-subtle);
    color: var(--danger);
}

.task-card__assignee {
    flex-shrink: 0;
}

.task-card__actions {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

/* ── Auto-Abarbeiten: breakpoint marker on a task card ─────────── */
.task-card__breakpoint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.task-card__breakpoint:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.10);
}
.task-card__breakpoint--on {
    opacity: 1;
    color: #ef4444;
}
.task-card__breakpoint--on svg path {
    fill: #ef4444;
    stroke: #ef4444;
}
.task-card--breakpoint {
    box-shadow: inset 3px 0 0 #ef4444;
}

/* ── Auto-Abarbeiten: runner panel ────────────────────────────── */
.auto-run {
    position: relative;
    margin-bottom: var(--s4);
    padding: var(--s3);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(139, 92, 246, 0.05));
    border: 1px solid var(--accent, #6366f1);
    box-shadow: 0 10px 34px -14px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.auto-run[hidden] { display: none; }
.auto-run__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 0% 0%, rgba(99, 102, 241, 0.18), transparent 60%);
}
.auto-run__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.auto-run__head {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}
.auto-run__pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent, #6366f1);
    animation: autoRunPulse 1.8s infinite;
}
@keyframes autoRunPulse {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.auto-run__headtext {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}
.auto-run__state { font-weight: 700; color: var(--text-bright, #fff); }
.auto-run__sub { font-size: 0.8rem; color: var(--text-muted, #94a3b8); }
.auto-run__controls { display: flex; gap: var(--s1); flex-shrink: 0; }
.auto-run__current {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.9rem;
}
.auto-run__current-label { color: var(--text-muted, #94a3b8); flex-shrink: 0; }
.auto-run__current-task {
    font-weight: 600;
    color: var(--text-bright, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.auto-run__timer {
    font-variant-numeric: tabular-nums;
    color: var(--accent, #6366f1);
    font-weight: 700;
    flex-shrink: 0;
}
.auto-run__progress { display: flex; align-items: center; gap: var(--s2); }
.auto-run__bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.auto-run__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #6366f1), #8b5cf6);
    transition: width 0.5s ease;
}
.auto-run__count {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.auto-run__error {
    padding: var(--s2);
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    white-space: pre-wrap;
    word-break: break-word;
}
.auto-run__error[hidden] { display: none; }
/* State tints */
.auto-run--paused { border-color: #f59e0b; }
.auto-run--paused .auto-run__pulse { background: #f59e0b; animation: none; }
.auto-run--error .auto-run__pulse { background: #ef4444; }
.auto-run--stopping { border-color: #94a3b8; }
.auto-run--stopping .auto-run__pulse { background: #94a3b8; }
.auto-run--completed { border-color: #22c55e; }
.auto-run--completed .auto-run__pulse { background: #22c55e; animation: none; }
.auto-run--stopped .auto-run__pulse { background: #94a3b8; animation: none; }

/* Config modal bits */
.auto-run__intro { color: var(--text-muted, #94a3b8); margin-bottom: var(--s3); font-size: 0.9rem; }
.auto-run__scope { display: flex; gap: var(--s3); margin-top: var(--s1); flex-wrap: wrap; }
.auto-run__radio { display: flex; align-items: center; gap: var(--s1); cursor: pointer; }
.auto-run__preview {
    margin: var(--s3) 0;
    padding: var(--s2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
    color: var(--text, #cbd5e1);
}
.auto-run__warn {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s2);
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
    font-size: 0.82rem;
}
.auto-run__warn svg { flex-shrink: 0; margin-top: 1px; }

/* Current-task highlight on the card while the runner is working it */
.task-card--autorun {
    box-shadow: inset 3px 0 0 var(--accent, #6366f1), 0 0 0 1px rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.06);
}
.task-card--breakpoint.task-card--autorun {
    box-shadow: inset 3px 0 0 #ef4444, 0 0 0 1px rgba(99, 102, 241, 0.35);
}

/* ── Task Timer ──────────────────────────────────────────────────────── */
.task-card__timer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
    flex-shrink: 0;
}

.task-card__timer-btn:hover {
    color: var(--primary);
    background: var(--bg-hover);
}

.task-card__timer-btn--running {
    color: var(--warning, #f59e0b);
    animation: timer-pulse 2s ease-in-out infinite;
}

.task-card__timer-btn--running:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.task-card__tracked-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--muted);
}

.task-card__tracked-time svg {
    flex-shrink: 0;
}

.task-card__tracked-time--running {
    color: var(--warning, #f59e0b);
    font-weight: 600;
}

/* ── Drag & Drop (Tasks + Milestones) ────────────────────────────────── */
.task-card__drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--muted);
    opacity: 0;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
    touch-action: none;
}

.task-card:hover .task-card__drag-handle {
    opacity: 0.5;
}

.task-card__drag-handle:hover {
    opacity: 1 !important;
    color: var(--accent);
}

.task-card__drag-handle:active {
    cursor: grabbing;
}

.milestone-section__drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--muted);
    opacity: 0;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
    touch-action: none;
}

.milestone-section__header:hover .milestone-section__drag-handle {
    opacity: 0.5;
}

.milestone-section__drag-handle:hover {
    opacity: 1 !important;
    color: var(--accent);
}

.milestone-section__drag-handle:active {
    cursor: grabbing;
}

/* Ghost = placeholder left behind */
.task-card.sortable-ghost {
    background: var(--accent-subtle);
    border: 1px dashed var(--accent);
    border-radius: var(--r2);
    opacity: 0.4;
}

.task-card.sortable-ghost * {
    visibility: hidden;
}

/* Chosen = the dragged element */
.task-card.sortable-chosen {
    background: var(--card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: var(--r2);
    z-index: 100;
}

/* Fallback = cloned element during drag (forceFallback) */
.task-card.sortable-fallback {
    background: var(--card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: var(--r2);
    transform: rotate(1.5deg);
    opacity: 0.95;
}

/* Dim non-dragged cards during drag */
.tasks-container--dragging .task-card:not(.sortable-chosen):not(.sortable-ghost) {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

/* Milestone ghost */
.milestone-section.sortable-ghost {
    background: var(--accent-subtle);
    border: 2px dashed var(--accent);
    opacity: 0.4;
}

.milestone-section.sortable-ghost * {
    visibility: hidden;
}

/* Milestone chosen */
.milestone-section.sortable-chosen {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

/* Milestone fallback */
.milestone-section.sortable-fallback {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transform: rotate(0.5deg);
    opacity: 0.95;
}

/* Empty milestone body min-height as drop zone */
.milestone-section__body {
    min-height: 40px;
}

/* Hide empty-state placeholder when dragging into it */
.milestone-section__body .task-card--empty {
    transition: opacity 0.15s ease;
}

.milestone-section__body.sortable-over .task-card--empty {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* Hide drag handles when filter is active */
.tasks-container--filtered .task-card__drag-handle,
.tasks-container--filtered .milestone-section__drag-handle {
    display: none;
}

/* ── M08 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .scope-bar {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .scope-bar__progress {
        order: 3;
        flex: 0 0 100%;
    }

    .milestone-section__header {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .milestone-section__left {
        flex: 1 1 100%;
    }

    .milestone-section__right {
        flex-shrink: 1;
        flex-wrap: wrap;
        margin-left: auto;
    }

    .task-card__meta {
        flex-wrap: wrap;
    }

    .task-card__drag-handle,
    .milestone-section__drag-handle {
        opacity: 0.5;
    }
}

/* ── M08 Tablet Responsive ──────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .scope-bar {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .scope-bar__progress {
        order: 3;
        flex: 0 0 100%;
    }

    .scope-bar__actions {
        margin-left: auto;
    }

    .milestone-section__header {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .milestone-section__right {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .task-card__meta {
        flex-wrap: wrap;
    }

    .tasks-container {
        contain: layout;
    }

    /* Disable infinite animations that cause reflow cascades on tablet */
    .task-card__timer-btn--running {
        animation: none;
        opacity: 1;
    }

    .task-card--in-progress .task-card__checkbox::after {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    /* Isolate each task card to prevent cross-card reflows */
    .task-card {
        contain: layout style;
    }
}

/* ── Task Preview Modal ─────────────────────────────────────────────── */

.task-card__content[data-task-preview] {
    cursor: pointer;
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.task-card__content[data-task-preview]:hover {
    background-color: rgba(var(--clr-accent-rgb, 99, 102, 241), 0.06);
}

.task-card--done .task-card__content[data-task-preview]:hover {
    background-color: rgba(var(--clr-success-rgb, 34, 197, 94), 0.06);
}

.task-preview__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s4);
}

.task-preview__section {
    margin-bottom: var(--s4);
}

.task-preview__section:last-child {
    margin-bottom: 0;
}

.task-preview__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s1);
}

.task-preview__text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--text-sm);
    color: var(--clr-text);
    line-height: 1.6;
}

.task-preview__text--empty {
    font-style: italic;
    color: var(--clr-text-muted);
    opacity: 0.7;
}

.task-preview__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
}

.task-preview__meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.task-preview__meta-value {
    font-size: var(--text-sm);
    color: var(--clr-text);
    font-weight: 500;
}

.task-preview__meta-value--empty {
    color: var(--clr-text-muted);
    font-style: italic;
    font-weight: 400;
}

.task-preview__actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.task-preview__actions-left {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.task-preview__actions-right {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
}

.btn--status-progress,
.btn--status-done {
    position: relative;
    transition: all 0.2s ease;
}

.btn--status-progress.is-active {
    background-color: var(--clr-warning, #f59e0b);
    color: #fff;
    border-color: var(--clr-warning, #f59e0b);
    pointer-events: none;
}

.btn--status-done.is-active {
    background-color: var(--clr-success, #22c55e);
    color: #fff;
    border-color: var(--clr-success, #22c55e);
    pointer-events: none;
}

.btn--timer {
    transition: all 0.2s ease;
}

.btn--timer-running {
    background-color: var(--warning, #f59e0b);
    color: #fff;
    border-color: var(--warning, #f59e0b);
}

.btn--timer-running:hover {
    background-color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}

.btn--copy-task {
    transition: all 0.2s ease;
}

.btn--copy-task.is-copied {
    background-color: var(--clr-success, #22c55e);
    color: #fff;
    border-color: var(--clr-success, #22c55e);
}

@media (max-width: 640px) {
    .task-preview__meta {
        grid-template-columns: 1fr;
        gap: var(--s2);
    }

    .task-preview__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;   /* fill the flex-end modal footer instead of shrink-wrapping right */
    }

    .task-preview__actions-left,
    .task-preview__actions-right {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        width: 100%;
    }

    /* Stack footer buttons full-width on mobile: a row of flex:1 buttons cannot
       shrink below its content (min-width:auto), so 3 buttons — incl. the long
       "Send to Code Session" label — overflowed the modal and clipped the left. */
    .task-preview__actions-left .btn,
    .task-preview__actions-right .btn {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   M09 – Tickets
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ticket Toolbar ──────────────────────────────────────────────────── */
.ticket-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}

/* ── Ticket Filters ──────────────────────────────────────────────────── */
.ticket-filters {
    display: flex;
    gap: var(--s1);
    flex-wrap: wrap;
}

.ticket-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-filter:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.ticket-filter--active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

.ticket-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ── Filter Bar (global page) ────────────────────────────────────────── */
.ticket-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.ticket-filters-secondary {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

.ticket-filters-secondary .form-select,
.ticket-filters-secondary .form-input {
    min-width: 140px;
}

/* ── Ticket Cards ────────────────────────────────────────────────────── */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.ticket-card {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    cursor: pointer;
}

.ticket-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ticket-card__type {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
}

.ticket-card__type--bug {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ticket-card__type--feature {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.ticket-card__type--question {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ticket-card__content {
    flex: 1;
    min-width: 0;
}

.ticket-card__title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-card__meta {
    display: flex;
    gap: var(--s2);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

.ticket-card__badges {
    display: flex;
    gap: var(--s1);
    align-items: center;
    flex-shrink: 0;
}

.ticket-card__checkbox {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ticket-card__checkbox:hover {
    border-color: var(--accent);
}

.ticket-card__checkbox--checked {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}

/* ── Ticket Priority Badges ──────────────────────────────────────────── */
.ticket-card__priority {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ticket-card__priority--low {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.ticket-card__priority--medium {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ticket-card__priority--high {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ticket-card__priority--urgent {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ── Ticket Status Badges ────────────────────────────────────────────── */
.badge--open {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.badge--in_progress {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.badge--resolved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge--closed {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ── Ticket Detail Modal ─────────────────────────────────────────────── */
.modal--xl {
    max-width: 960px;
    width: 95vw;
}

.ticket-detail {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--s4);
}

.ticket-detail__main {
    min-width: 0;
}

.ticket-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    border-left: 1px solid var(--border);
    padding-left: var(--s4);
}

.ticket-detail__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: var(--s2);
    border-top: 1px solid var(--border);
}

.ticket-detail__actions {
    padding-top: var(--s2);
    border-top: 1px solid var(--border);
}

/* ── Comment Thread ──────────────────────────────────────────────────── */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.comment-item {
    padding: var(--s2) var(--s3);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
}

.comment-item--internal {
    border-left: 3px solid var(--accent);
    background: rgba(var(--accent-rgb, 99,102,241), 0.05);
}

.comment-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s1);
}

.comment-item__author {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.comment-item__badge {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    background: var(--accent);
    color: var(--bg-primary);
    border-radius: 4px;
    margin-left: var(--s1);
}

.comment-item__time {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.comment-item__body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.comment-item__delete {
    position: absolute;
    top: var(--s1);
    right: var(--s1);
    opacity: 0;
    transition: opacity 0.15s ease;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.comment-item:hover .comment-item__delete {
    opacity: 1;
}

.comment-item__delete:hover {
    color: #ef4444;
}

.comment-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s1);
}

/* ── File Drop Zone ──────────────────────────────────────────────────── */
.file-drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--s3);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-drop-zone:hover,
.file-drop-zone.is-dragover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 99,102,241), 0.05);
}

.file-drop-zone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-zone__label {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ── File Preview ────────────────────────────────────────────────────── */
.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-top: var(--s1);
}

.file-preview__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.file-preview__item-remove {
    cursor: pointer;
    color: var(--text-muted);
    border: none;
    background: none;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1;
}

.file-preview__item-remove:hover {
    color: #ef4444;
}

/* ── Attachment List ─────────────────────────────────────────────────── */
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.attachment-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--accent);
}

.attachment-item__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.attachment-item__size {
    color: var(--text-muted);
    font-size: 0.6875rem;
}

/* ── Bulk Action Bar ─────────────────────────────────────────────────── */
.bulk-bar {
    display: none;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    margin-top: var(--s2);
}

.bulk-bar.is-active {
    display: flex;
}

.bulk-bar__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.bulk-bar__actions {
    display: flex;
    gap: var(--s1);
    flex-wrap: wrap;
}

/* ── ClientHub Ticket Detail ─────────────────────────────────────────── */
.ch-ticket-detail__status {
    margin-bottom: var(--s2);
}

.ch-ticket-detail__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    padding: var(--s2);
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

/* ── M09 Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ticket-detail {
        grid-template-columns: 1fr;
    }

    .ticket-detail__sidebar {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: var(--s3);
    }

    .ticket-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ticket-filter-bar {
        gap: var(--s1);
    }

    .ticket-filters-secondary {
        flex-direction: column;
    }

    .ticket-filters-secondary .form-select,
    .ticket-filters-secondary .form-input {
        min-width: 100%;
    }

    .ticket-card {
        flex-wrap: wrap;
    }

    .ticket-card__badges {
        flex-basis: 100%;
        margin-top: var(--s1);
    }

    .comment-item__delete {
        opacity: 1;
    }

    .bulk-bar {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   M10 – Chat
   ══════════════════════════════════════════════════════════════════════ */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 600px;
    height: max(420px, calc(var(--hub-visible-viewport-height, 100dvh) - 200px));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary);
    overflow: hidden;
    min-height: 0;
}

/* Chat Banners */
.chat-banner {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    font-size: 0.82rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--border);
}
.chat-banner svg { flex-shrink: 0; }
.chat-banner--customer {
    background: rgba(var(--warning-rgb, 234, 179, 8), 0.08);
    color: var(--warning);
}
.chat-banner--internal {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.08);
    color: var(--accent);
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.chat-header__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--s2);
    color: var(--text-muted);
    text-align: center;
}

.chat-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Message bubble */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    animation: chatFadeIn 0.25s ease-out;
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.chat-message--own {
    align-self: flex-end;
}

.chat-message--other {
    align-self: flex-start;
}

.chat-message__author {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
    padding: 0 var(--s1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.chat-message__author .team-role-badge,
.chat-message__author .badge {
    font-size: 0.6rem;
    padding: 1px 6px;
}

.chat-message__bubble {
    padding: var(--s2) var(--s3);
    border-radius: 16px;
    line-height: 1.5;
    font-size: 0.9rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.chat-message--own .chat-message__bubble {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid var(--accent);
    color: var(--text);
    border-bottom-right-radius: 4px;
}

.chat-message--other .chat-message__bubble {
    background: var(--bg-tertiary);
    color: var(--text);
    border-top-left-radius: 4px;
}

.chat-message--other .chat-message__bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    border-width: 6px 6px 0 0;
    border-style: solid;
    border-color: var(--bg-tertiary) transparent transparent transparent;
}

.chat-message--agent .chat-message__bubble {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border: 1px solid var(--border);
    border-top-left-radius: 4px;
}

/* Internal chat: subtle green tint for own messages to distinguish from customer chat */
.chat-message--internal.chat-message--own .chat-message__bubble {
    background: rgba(22, 163, 106, 0.08);
    border-color: var(--success, #16a34a);
    color: var(--text);
}

.chat-message__meta {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
    padding: 0 var(--s1);
}

.chat-message--own .chat-message__meta {
    justify-content: flex-end;
}

.chat-message__edited {
    font-style: italic;
    opacity: 0.7;
}

/* Message actions (edit button) */
.chat-message__actions {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
}

.chat-message:hover .chat-message__actions {
    display: flex;
}

.chat-message__action-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-message__action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Attachments within message */
.chat-message__attachments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--s1);
}

.chat-attachment {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s;
}

.chat-message--own .chat-attachment {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

.chat-message--own .chat-attachment:hover {
    background: rgba(255,255,255,0.25);
}

.chat-message--other .chat-attachment,
.chat-message--agent .chat-attachment {
    background: rgba(0,0,0,0.05);
    color: var(--text-secondary);
}

.chat-message--other .chat-attachment:hover,
.chat-message--agent .chat-attachment:hover {
    background: rgba(0,0,0,0.1);
}

.chat-attachment__icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.chat-attachment__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.chat-attachment__size {
    flex-shrink: 0;
    opacity: 0.6;
    font-size: 0.7rem;
}

/* Chat image preview in message */
.chat-attachment--image {
    display: block;
    max-width: 280px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
}

.chat-attachment--image img {
    width: 100%;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
    min-height: 60px;
    background: var(--border);
}

.chat-attachment--image img:hover {
    opacity: 0.9;
}

/* Input area */
.chat-input {
    flex: 0 0 auto;
    min-width: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.chat-input__drop-zone {
    min-width: 0;
    padding: var(--s2) var(--s3);
    transition: background 0.2s;
}

.chat-input__drop-zone.is-dragover {
    background: rgba(var(--accent-rgb, 59, 130, 246), 0.08);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

.chat-input__row {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    gap: var(--s1);
}

.chat-input__field {
    min-width: 0;
    min-height: 38px;
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    background: var(--bg-primary);
    color: var(--text-primary);
    max-height: var(--hub-composer-max-height, 320px);
    overflow-y: auto;
    transition: border-color 0.2s;
}

.hub-composer-textarea {
    max-height: var(--hub-composer-max-height, 320px) !important;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scroll-padding-block: 0.5rem;
    scrollbar-gutter: stable;
}

.chat-input__field:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-input__field::placeholder {
    color: var(--text-muted);
}

.chat-input__attach,
.chat-input__send {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.chat-input__attach {
    background: transparent;
    color: var(--text-muted);
}

.chat-input__attach:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.chat-input__send {
    background: var(--accent);
    color: #fff;
}

.chat-input__send:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.chat-input__send:active {
    transform: scale(0.95);
}

/* File preview in input area */
.chat-input__file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.chat-input__file-preview:not(:empty) {
    margin-bottom: var(--s2);
}

.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    animation: chatFadeIn 0.2s ease-out;
}

.chat-file-chip__remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    transition: all 0.15s;
}

.chat-file-chip__remove:hover {
    background: rgba(0,0,0,0.1);
    color: var(--text-primary);
}

/* Edit inline form */
.chat-edit-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-edit-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.chat-edit-form__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.chat-edit-form__btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-primary);
    color: var(--text-secondary);
}

.chat-edit-form__btn:hover {
    background: var(--bg-tertiary);
}

.chat-edit-form__btn--save {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.chat-edit-form__btn--save:hover {
    filter: brightness(1.1);
}

/* Date separator */
.chat-date-separator {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: var(--s1) 0;
}

.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.chat-date-separator__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.chat-unread-separator {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--s2);
    margin: var(--s2) 0;
    color: var(--accent);
}

.chat-unread-separator::before,
.chat-unread-separator::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: 0.55;
}

.chat-unread-separator::after {
    background: linear-gradient(90deg, currentColor, transparent);
}

.chat-unread-separator span {
    padding: 0.2rem 0.55rem;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary));
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.chat-messages.is-loading-history,
.connor-message-list.is-loading-history {
    cursor: progress;
}

/* ── M10 Chat Responsive ──────────────────────────────────────────── */

@media (max-width: 1023px) {
    .chat-container {
        height: 500px;
        height: max(1000px, calc(100dvh - 180px));
    }

    .chat-message {
        max-width: 85%;
    }
}

@media (max-width: 767px) {
    .chat-container {
        height: 450px;
        height: calc(100dvh - 140px);
        border-radius: var(--radius, 8px);
    }

    .chat-message {
        max-width: 90%;
    }

    .chat-message__bubble {
        padding: var(--s1) var(--s2);
        font-size: 0.85rem;
    }

    .chat-input__field {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .chat-attachment__name {
        max-width: 140px;
    }

    .chat-attachment--image {
        max-width: 200px;
    }
}

/* ── M11: Releases & Downloads ────────────────────────────────────── */

.release-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s3);
    padding: var(--s2) 0;
}

.release-header__title {
    font-size: var(--fs3, 1.15rem);
    font-weight: 600;
    margin: 0;
}

.release-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.release-list__loading {
    display: flex;
    justify-content: center;
    padding: var(--s4);
}

.release-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg-primary);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.release-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.release-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius, 8px);
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-muted);
}

.release-card__body {
    flex: 1;
    min-width: 0;
}

.release-card__top {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.release-card__version {
    font-weight: 600;
    font-size: var(--fs2, 1rem);
}

.release-card__type {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.release-card__type--trial {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.release-card__type--full {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.release-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.release-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.release-card__changelog {
    margin-top: var(--s1);
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    line-height: 1.5;
    white-space: pre-line;
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.release-card__changelog::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(transparent, var(--bg-primary));
    pointer-events: none;
}

.release-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    flex-shrink: 0;
}

.release-card__actions .btn {
    white-space: nowrap;
}

/* ClientHub consolidated downloads — project line, "new" marker + dashboard pill.
   The Downloads sidebar badge reuses the shared .sidebar__link-badge .badge .badge--accent
   classes (like the workspace nav badges); it carries NO own colour rule, so it can never
   override those badges (a duplicate .sidebar__link-badge{background/color} here once made
   every workspace sidebar number white-on-accent = hard to read). */
.release-card__project {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 2px;
}
.release-card--new {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.release-card__new-badge {
    margin-left: 4px;
}
.dashboard-stat__pill {
    margin-left: 6px;
    vertical-align: middle;
    font-size: 10px;
}

/* Release Empty State */
.release-empty {
    text-align: center;
    padding: var(--s6, 3rem) var(--s3);
    color: var(--text-muted);
}

.release-empty svg {
    margin-bottom: var(--s2);
}

.release-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Drop Zone */
.release-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    border: 2px dashed var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg-secondary, #fafafa);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    min-height: 120px;
}

.release-drop-zone:hover,
.release-drop-zone.is-dragover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.04);
}

.release-drop-zone__text {
    margin: var(--s1) 0 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.release-drop-zone__hint {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.release-drop-zone__file {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    font-size: 0.9rem;
    margin-top: var(--s2);
}

.release-drop-zone__file .remove-file {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
}

.release-drop-zone__file .remove-file:hover {
    color: var(--danger, #ef4444);
}

/* Tab Switch in Modal */
.release-tab-switch {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    overflow: hidden;
}

.release-tab-switch__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--s1) var(--s2);
    border: none;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.release-tab-switch__btn:hover {
    background: var(--bg-primary);
}

.release-tab-switch__btn--active {
    background: var(--accent);
    color: #fff;
}

.release-tab-switch__btn--active:hover {
    background: var(--accent);
    color: #fff;
}

/* Source Row */
.release-source-row {
    display: flex;
    gap: var(--s2);
    align-items: flex-start;
}

.release-source-row .form-select {
    flex: 1;
}

/* Folder Status */
.release-folder-status__checking {
    padding: var(--s3);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.release-folder-status__items {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.release-folder-status__item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--radius, 6px);
    font-size: 0.9rem;
    transition: background 0.2s;
}

.release-folder-status__item.is-ok {
    background: rgba(34, 197, 94, 0.08);
    color: var(--color-success, #22c55e);
}

.release-folder-status__item.is-missing {
    background: rgba(239, 68, 68, 0.08);
    color: var(--color-danger, #ef4444);
}

.release-folder-status__name {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}

.release-folder-status__label {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.8;
}

.release-folder-status__warning {
    margin-top: var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--radius, 6px);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    font-size: 0.85rem;
}

/* Payment Hint */
.release-payment-hint {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    border-radius: var(--radius, 6px);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    font-size: 0.9rem;
    margin-top: var(--s2);
}

/* Locked Release Card */
.release-card--locked {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.release-card--locked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius, 8px);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.02) 10px,
        rgba(0, 0, 0, 0.02) 20px
    );
    pointer-events: none;
}

/* Responsive */
@media (max-width: 767px) {
    .release-card {
        flex-direction: column;
    }

    .release-card__actions {
        flex-direction: row;
        width: 100%;
    }

    .release-card__actions .btn {
        flex: 1;
    }

    .release-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s2);
    }

    .release-source-row {
        flex-direction: column;
    }

    .release-tab-switch {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   M16 – INVOICES
   ═══════════════════════════════════════════════════════════════════ */

/* Invoice Summary Cards */
.invoice-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.summary-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--s4);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.summary-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}

.summary-card__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--s1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-card--warning .summary-card__value { color: var(--warning); }
.summary-card--danger .summary-card__value { color: var(--danger); }
.summary-card--muted .summary-card__value { color: var(--text-muted); }

/* Invoice Filters */
.invoice-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.filter-tabs {
    display: flex;
    gap: var(--s1);
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s3);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
    background: transparent;
    border: 1px solid transparent;
}

.filter-tab:hover {
    background: var(--surface-3);
    color: var(--text-bright);
}

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

.filter-tab__count {
    font-size: 0.6875rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0 var(--s1);
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

.filter-tab--active .filter-tab__count {
    background: rgba(255, 255, 255, 0.25);
}

/* Invoice Status Badges */
/* ── Invoice year separator ────────────────────────────────── */
.year-separator td {
    padding: var(--s3) var(--s4);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    background: transparent;
}
.year-separator:hover td {
    background: transparent;
}

.invoice-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.invoice-status-badge--draft {
    background: var(--surface-3);
    color: var(--text-muted);
}

.invoice-status-badge--sent {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.invoice-status-badge--paid {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.invoice-status-badge--overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.invoice-status-badge--cancelled {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.invoice-status-badge--credited {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Invoice Form */
.invoice-form__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s4);
    align-items: start;
}

.invoice-form__main { min-width: 0; }
.invoice-form__sidebar { position: sticky; top: var(--s4); }

/* Invoice Items Table */
.invoice-items-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-items-table th {
    padding: var(--s2) var(--s3);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.invoice-items-table td {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.invoice-items-table tbody tr:last-child td {
    border-bottom: none;
}

.invoice-items-table tfoot td {
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--border);
}

.invoice-items-table--readonly td { font-size: 0.875rem; }

.invoice-total-row td {
    border-top: 2px solid var(--border);
    font-size: 1rem;
}

.invoice-items-actions {
    padding: var(--s3);
    border-top: 1px solid var(--border-subtle);
}

/* Invoice Totals */
.invoice-totals {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.invoice-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.invoice-totals__row--total {
    padding-top: var(--s2);
    border-top: 2px solid var(--border);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-bright);
}

.invoice-totals__row--info {
    justify-content: flex-end;
}

/* Invoice Totals Card */
.invoice-totals-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

/* Invoice Preview */
.invoice-preview {
    position: relative;
    background: white;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}

.invoice-preview__iframe {
    width: 100%;
    height: 800px;
    border: none;
    background: white;
}

/* Invoice Detail Grid */
.invoice-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--s4);
    align-items: start;
}

.invoice-detail__main { min-width: 0; }
.invoice-detail__sidebar { position: sticky; top: var(--s4); }

/* Invoice Info Grid */
.invoice-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s3);
}

.invoice-info-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.invoice-info-value {
    font-size: 0.9375rem;
    color: var(--text-bright);
}

/* Invoice Timeline */
.invoice-timeline {
    position: relative;
    padding-left: var(--s4);
}

.invoice-timeline h5 {
    margin-bottom: var(--s2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.invoice-timeline__item {
    position: relative;
    padding-bottom: var(--s3);
    padding-left: var(--s3);
}

.invoice-timeline__item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: -8px;
    width: 1px;
    background: var(--border);
}

.invoice-timeline__item:last-child::before { display: none; }

.invoice-timeline__dot {
    position: absolute;
    left: -20px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--warning);
    border: 2px solid var(--surface-1);
}

.invoice-timeline__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    align-items: center;
    font-size: 0.8125rem;
}

.invoice-timeline__content strong {
    color: var(--text-bright);
}

/* Related Documents */
.related-doc {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.875rem;
}

/* Settings Grid */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--s4);
}

/* Invoice Responsive */
@media (max-width: 1024px) {
    .invoice-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .invoice-form__grid,
    .invoice-detail-grid {
        grid-template-columns: 1fr;
    }

    .invoice-form__sidebar,
    .invoice-detail__sidebar {
        position: static;
    }

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

@media (max-width: 640px) {
    .invoice-summary {
        grid-template-columns: 1fr 1fr;
    }

    .invoice-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Detail-view: horizontal scroll for read-only table */
    .invoice-detail__main .card__body.p-0 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .invoice-detail__main .invoice-items-table {
        min-width: 600px;
    }

    /* Form-view: stacked card layout for editable items */
    .invoice-form__main .invoice-items-table,
    .invoice-form__main .invoice-items-table thead,
    .invoice-form__main .invoice-items-table tbody,
    .invoice-form__main .invoice-items-table tr,
    .invoice-form__main .invoice-items-table td {
        display: block;
    }
    .invoice-form__main .invoice-items-table thead {
        display: none;
    }
    .invoice-form__main .invoice-items-table .invoice-item-row {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r2);
        padding: var(--s4) var(--s3);
        margin-bottom: var(--s3);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--s1) 0;
        border: none;
        gap: var(--s3);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td::before {
        content: attr(data-label);
        flex: 0 0 35%;
        font-weight: 600;
        font-size: var(--fs1);
        color: var(--muted);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td:last-child {
        position: absolute;
        top: var(--s2);
        right: var(--s2);
        padding: 0;
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td:last-child::before {
        display: none;
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td:first-child {
        padding-bottom: var(--s2);
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--s1);
    }
    .invoice-form__main .invoice-items-table .invoice-item-row td .form-input,
    .invoice-form__main .invoice-items-table .invoice-item-row td .form-select {
        flex: 1;
        min-width: 0;
    }

    .invoice-detail__main .card__body {
        padding: var(--s3);
    }

    .page-header__left {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .page-header__right {
        flex-wrap: wrap;
        gap: var(--s2);
    }
}

@media (max-width: 480px) {
    .invoice-info-grid {
        grid-template-columns: 1fr;
    }

    .invoice-summary {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   M17 – Bookkeeping (EÜR)
   ═══════════════════════════════════════════════════════════════════ */

.bookkeeping-page {
    max-width: 1400px;
}

/* Year selector */
.bookkeeping-year-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-left: var(--s4);
}
.bookkeeping-year-selector .form-select {
    min-width: 100px;
}

/* Summary cards row */
.bookkeeping-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    margin-bottom: var(--s5);
}

/* Tabs */
.bookkeeping-tabs {
    display: flex;
    gap: var(--s1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s5);
}

.bookkeeping-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs2);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
    margin-bottom: -1px;
}

.bookkeeping-tab:hover {
    color: var(--text-bright);
}

.bookkeeping-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.bookkeeping-tab__count {
    background: var(--bg-alt);
    color: var(--muted);
    padding: 1px 8px;
    border-radius: var(--r3);
    font-size: var(--fs1);
}

.bookkeeping-tab--active .bookkeeping-tab__count {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* Table */
.bookkeeping-table {
    font-size: var(--fs2);
}

.bookkeeping-table th {
    white-space: nowrap;
}

.bookkeeping-entry {
    transition: background var(--t) var(--ease), opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.bookkeeping-entry:hover {
    background: var(--bg-alt);
}

/* Month total separator rows */
.bookkeeping-month-total {
    background: var(--bg-alt);
    border-top: 2px solid var(--border);
}

.bookkeeping-month-total td {
    padding: var(--s2) var(--s3);
    color: var(--text-bright);
}

/* Pending entries (AI scan) */
.entry-pending {
    background: var(--warning-subtle);
    border-left: 3px solid var(--warning);
}

.entry-pending__banner {
    padding: var(--s3) var(--s4) !important;
}

.entry-pending__content {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.entry-pending__actions {
    margin-left: auto;
    display: flex;
    gap: var(--s2);
}

/* Inline editing */
.inline-edit {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--r1);
    transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    min-width: 20px;
    display: inline-block;
}

.inline-edit:hover {
    background: var(--accent-subtle);
}

.inline-edit--active {
    background: transparent;
}

.inline-edit__input {
    min-width: 60px;
    max-width: 100%;
    animation: inlineEditFadeIn var(--t-fast) var(--ease);
}

.inline-edit__input:focus {
    box-shadow: 0 0 0 2px var(--accent);
}

@keyframes inlineEditFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Invoice link icon */
.bookkeeping-invoice-link {
    display: inline-flex;
    margin-left: var(--s1);
    opacity: 0.5;
    transition: opacity var(--t) var(--ease);
}

.bookkeeping-invoice-link:hover {
    opacity: 1;
}

/* Actions column */
.bookkeeping-actions {
    display: flex;
    gap: var(--s1);
    justify-content: flex-end;
}

/* ── Receipt state cell (expenses) ─────────────────────────────────
   Three states, and the colour is the whole point: 'placeholder' DOES have a
   file in the Rechnungsstelle (the Eigenbeleg), it is just not a real receipt,
   so it must not read as "done". */
.bk-receipt-cell {
    white-space: nowrap;
    width: 1%;
}

.bk-receipt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--r2);
    transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.bk-receipt__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.bk-receipt__btn:hover {
    transform: translateY(-1px);
    background: var(--bg-tertiary);
    border-color: var(--border);
    box-shadow: var(--shadow1);
}

.bk-receipt__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.bk-receipt__btn--static {
    cursor: default;
}

.bk-receipt__btn--static:hover {
    transform: none;
    box-shadow: none;
}

/* Real document on file — quiet, this is the expected state and needs no chip. */
.bk-receipt--attached .bk-receipt__btn--state {
    color: var(--success);
}

.bk-receipt--attached .bk-receipt__btn--state:hover {
    background: var(--success-subtle);
}

/* Substitute receipt filed, or nothing at all: both are gaps and both read red.
   The tinted chip is deliberate — as a bare glyph the warning competes with the
   row's delete button and stops reading as a STATUS. */
.bk-receipt--placeholder .bk-receipt__btn--state,
.bk-receipt--missing .bk-receipt__btn--state {
    color: var(--danger);
    background: var(--danger-subtle);
    border-color: rgba(248, 81, 73, 0.35);
}

.bk-receipt--missing .bk-receipt__btn--state {
    animation: bkReceiptPulse 2.4s var(--ease) infinite;
}

.bk-receipt__btn--remove:hover {
    color: var(--danger);
    border-color: var(--danger-subtle);
}

.bk-receipt.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

.bk-receipt.is-flash {
    background: var(--accent-subtle);
}

@keyframes bkReceiptPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ── Reason dialog (missing receipt) ───────────────────────────────
   Lives on document.body, not inside .main-wrap — that container has
   `contain: layout style`, which would make position:fixed resolve against it
   and drop the overlay behind the topbar. */
.bk-reason-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
}

.bk-reason-modal[hidden] {
    display: none !important;
}

.bk-reason-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.bk-reason-modal.is-open .bk-reason-modal__backdrop {
    opacity: 1;
}

.bk-reason-modal__panel {
    position: relative;
    width: min(34rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: var(--r3);
    box-shadow: var(--shadow3);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.bk-reason-modal.is-open .bk-reason-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.bk-reason-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4);
    border-bottom: 1px solid var(--border);
}

.bk-reason-modal__header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--danger);
}

.bk-reason-modal__sub {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.bk-reason-modal__body {
    padding: var(--s4);
}

.bk-reason-modal__text {
    width: 100%;
    resize: vertical;
    min-height: 5rem;
    font-family: inherit;
}

.bk-reason-modal__hint {
    margin: var(--s2) 0 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.bk-reason-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
    padding: var(--s3) var(--s4) var(--s4);
    border-top: 1px solid var(--border);
}

.bk-reason-modal__actions {
    display: flex;
    gap: var(--s2);
    margin-left: auto;
}

@media (max-width: 520px) {
    .bk-reason-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }
    .bk-reason-modal__actions {
        margin-left: 0;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-reason-modal__panel,
    .bk-reason-modal__backdrop {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-receipt--missing .bk-receipt__btn--state {
        animation: none;
    }
    .bk-receipt__btn:hover {
        transform: none;
    }
}

/* Add entry row */
.bookkeeping-add-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
    animation: slideDown var(--t-slow) var(--ease);
}

.bookkeeping-add-row--hidden {
    display: none;
}

.bookkeeping-add-row__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.bookkeeping-add-row__actions {
    display: flex;
    gap: var(--s2);
    justify-content: flex-end;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

/* Upload zone */
.bookkeeping-upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--r4);
    padding: var(--s6);
    text-align: center;
    cursor: pointer;
    margin-bottom: var(--s4);
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
    position: relative;
}

.bookkeeping-upload-zone:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.bookkeeping-upload-zone--dragover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.bookkeeping-upload-zone__text {
    color: var(--text);
    font-size: var(--fs3);
    margin-top: var(--s3);
}

.bookkeeping-upload-zone__hint {
    color: var(--muted);
    font-size: var(--fs1);
    margin-top: var(--s1);
}

.bookkeeping-upload-zone__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
}

.bookkeeping-upload-zone__loading--hidden {
    display: none;
}

/* Scan Modal (slide-in from right) */
.bookkeeping-scan-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease);
}

.bookkeeping-scan-modal--open {
    pointer-events: auto;
    opacity: 1;
}

.bookkeeping-scan-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.bookkeeping-scan-modal__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 90vw);
    background: var(--card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease);
    box-shadow: var(--shadow3);
}

.bookkeeping-scan-modal--open .bookkeeping-scan-modal__panel {
    transform: translateX(0);
}

.bookkeeping-scan-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4);
    border-bottom: 1px solid var(--border);
}

.bookkeeping-scan-modal__header h3 {
    font-size: var(--fs4);
    color: var(--text-bright);
}

.bookkeeping-scan-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s4);
}

.bookkeeping-scan-modal__preview {
    margin-bottom: var(--s4);
}

.bookkeeping-scan-modal__preview-content {
    max-height: 200px;
    overflow: hidden;
    border-radius: var(--r3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.bookkeeping-scan-modal__preview-img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.bookkeeping-scan-modal__preview-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s4);
    color: var(--muted);
}

.bookkeeping-scan-modal__hint {
    font-size: var(--fs2);
    margin-bottom: var(--s4);
}

.bookkeeping-scan-modal__fields {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.bookkeeping-scan-modal__fields .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}

.bookkeeping-scan-modal__positions {
    margin-top: var(--s4);
}

.bookkeeping-scan-modal__positions h4 {
    font-size: var(--fs2);
    color: var(--text-bright);
    margin-bottom: var(--s2);
}

.bookkeeping-scan-modal__actions {
    display: flex;
    gap: var(--s3);
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
}

/* Overview sections */
.bookkeeping-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.bookkeeping-section__title {
    font-size: var(--fs3);
    color: var(--text-bright);
    margin-bottom: var(--s4);
}

.bookkeeping-section__subtitle {
    font-size: var(--fs2);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--s3);
}

.bookkeeping-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

/* Monthly bar chart */
.bookkeeping-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--s2);
    height: 200px;
    padding: var(--s2) 0;
}

.bookkeeping-chart__month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.bookkeeping-chart__bars {
    flex: 1;
    display: flex;
    gap: 2px;
    align-items: flex-end;
    width: 100%;
}

.bookkeeping-chart__bar {
    flex: 1;
    min-height: 2px;
    border-radius: var(--r1) var(--r1) 0 0;
    transition: height var(--t-slow) var(--ease);
}

.bookkeeping-chart__bar--income {
    background: var(--success);
    opacity: 0.8;
}

.bookkeeping-chart__bar--expense {
    background: var(--danger);
    opacity: 0.8;
}

.bookkeeping-chart__label {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: var(--s1);
    white-space: nowrap;
}

.bookkeeping-chart__legend {
    display: flex;
    gap: var(--s4);
    justify-content: center;
    margin-top: var(--s3);
}

.bookkeeping-chart__legend-item {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--fs2);
    color: var(--muted);
}

.bookkeeping-chart__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bookkeeping-chart__legend-dot--income { background: var(--success); }
.bookkeeping-chart__legend-dot--expense { background: var(--danger); }

/* Category bars */
.bookkeeping-category-bars {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.bookkeeping-category-bar__header {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs2);
    margin-bottom: var(--s1);
}

.bookkeeping-category-bar__track {
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}

.bookkeeping-category-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--t-slow) var(--ease);
}

.bookkeeping-category-bar__fill--income { background: var(--success); }
.bookkeeping-category-bar__fill--expense { background: var(--danger); }

.bookkeeping-category-total {
    display: flex;
    justify-content: space-between;
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
    font-size: var(--fs2);
}

/* Category management list */
.bookkeeping-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bookkeeping-category-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs2);
}

.bookkeeping-category-add {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s3);
}

.bookkeeping-category-add .form-input {
    flex: 1;
}

/* Export buttons */
.bookkeeping-export-buttons {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
}

/* ── Fiscal-year VAT regime (§ 19 UStG vs. Regelbesteuerung) ─────── */

/*
 * State chip next to the year selector. Deliberately not interactive — the control
 * itself lives in the overview tab. It answers the question the income tab raises:
 * why does a new booking default to 0 % VAT?
 * The generic .badge--subtle relies on design tokens this file no longer defines,
 * so the chip carries its own surface rather than rendering as bare text.
 */
.bookkeeping-regime-chip {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 999px;
    cursor: default;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.bookkeeping-regime-chip:hover {
    color: var(--text-bright);
    border-color: var(--accent);
}

.badge--warning.bookkeeping-regime-chip {
    background: var(--warning-subtle);
    border-color: rgba(210, 153, 34, 0.35);
    color: var(--warning);
}

/* The § 19 card states a fact, it is not a KPI to optimise — dimmer, dashed. */
.bookkeeping-summary .summary-card--muted {
    border-style: dashed;
}

.bookkeeping-summary .summary-card--muted .summary-card__value {
    color: var(--muted);
}

.bookkeeping-regime__help {
    font-size: var(--fs2);
    margin: calc(-1 * var(--s2)) 0 var(--s4);
    max-width: 78ch;
    line-height: 1.55;
}

.bookkeeping-regime__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.bookkeeping-regime__option {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    background: linear-gradient(180deg, var(--bg-alt), var(--bg));
    cursor: pointer;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}

.bookkeeping-regime__option:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow2);
}

.bookkeeping-regime__option:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.bookkeeping-regime__option.is-active {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-subtle), var(--bg-alt) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow1);
}

.bookkeeping-regime__option.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
}

.bookkeeping-regime__option.is-locked:hover {
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}

.bookkeeping-regime__option input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.bookkeeping-regime__body {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
}

.bookkeeping-regime__label {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
}

.bookkeeping-regime__desc {
    font-size: var(--fs1);
    line-height: 1.55;
}

.bookkeeping-regime__origin {
    font-size: var(--fs1);
    color: var(--muted);
    padding: var(--s1) 0 var(--s1) var(--s3);
    border-left: 2px solid var(--border);
    margin-bottom: var(--s3);
}

.bookkeeping-regime__diverges {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    font-size: var(--fs1);
    line-height: 1.55;
    color: var(--warning);
    background: var(--warning-subtle);
    border: 1px solid rgba(210, 153, 34, 0.3);
    border-radius: var(--r2);
    padding: var(--s3);
    margin-bottom: var(--s4);
}

.bookkeeping-regime__diverges svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.bookkeeping-regime__diverges a {
    margin-left: var(--s1);
    white-space: nowrap;
}

.bookkeeping-regime__actions {
    display: flex;
    justify-content: flex-end;
}

/*
 * Live gross preview in the add rows.
 *
 * Spans the full field grid and aligns right on purpose: the net and rate inputs sit
 * at the END of the row, so a preview that took a grid cell of its own would wrap to
 * the FIRST column of the next line — landing under the date field, metres away from
 * the two numbers it is derived from.
 */
.bookkeeping-add-row__preview {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s2);
    min-height: 0;
    font-family: var(--font-mono);
    font-size: var(--fs1);
    color: var(--muted);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease);
}

.bookkeeping-add-row__preview.is-visible {
    opacity: 1;
    transform: none;
    color: var(--text-bright);
}

/* ── Plausibility findings ───────────────────────────────────────── */

/*
 * Two tones, on purpose. The three defect rules mean a row contradicts itself or
 * the year — that is red. 'review_expense' is a standing shortlist of a § 19
 * year's biggest taxed expenses and is NEVER empty on healthy data; painting it
 * red would make the bookkeeping look permanently broken.
 */
.bk-plausibility__banner {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    font-size: var(--fs2);
    line-height: 1.55;
    color: var(--text);
    background: var(--warning-subtle);
    border-left: 3px solid var(--warning);
    border-radius: var(--r2);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
}

.bk-plausibility__banner svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning);
}

.bk-plausibility__block + .bk-plausibility__block {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
}

.bk-plausibility__count {
    font-size: var(--fs1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--danger);
    margin-bottom: var(--s3);
}

.bk-plausibility__count--quiet {
    color: var(--muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-top: calc(-1 * var(--s2));
}

.bk-finding-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.bk-finding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    background: var(--bg-alt);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

.bk-finding:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow2);
    border-color: var(--accent);
}

.bk-plausibility__block--defect .bk-finding {
    border-left: 3px solid var(--danger);
    background: linear-gradient(90deg, var(--danger-subtle), var(--bg-alt) 45%);
}

.bk-plausibility__block--review .bk-finding {
    border-left: 3px solid var(--border);
    background: var(--bg);
}

.bk-finding__main {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
}

.bk-finding__head {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    flex-wrap: wrap;
}

.bk-finding__date {
    font-size: var(--fs1);
    color: var(--muted);
}

.bk-finding__party {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
}

.bk-finding__rule {
    font-size: var(--fs2);
    line-height: 1.5;
    color: var(--text);
}

.bk-plausibility__block--defect .bk-finding__rule {
    color: var(--danger);
}

.bk-finding-list--quiet .bk-finding__rule {
    color: var(--muted);
}

.bk-finding__amounts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    font-size: var(--fs1);
    color: var(--muted);
}

.bk-finding__gross {
    color: var(--text-bright);
}

.bk-finding__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--s1) var(--s2);
    border-radius: var(--r2);
    font-size: var(--fs1);
    color: var(--accent);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}

.bk-finding__link:hover {
    background: var(--accent-subtle);
    gap: var(--s2);
}

.bk-finding__link svg {
    transition: transform var(--t-fast) var(--ease);
}

.bk-finding__link:hover svg {
    transform: translateX(2px);
}

/* Row a finding links to — announces itself once, then gets out of the way. */
.bookkeeping-entry--targeted {
    animation: bkTargetFlash 2.6s var(--ease);
}

@keyframes bkTargetFlash {
    0%, 55% {
        background: var(--accent-subtle);
        box-shadow: inset 3px 0 0 var(--accent);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bookkeeping-regime__option:hover,
    .bk-finding:hover {
        transform: none;
    }
    .bookkeeping-add-row__preview {
        transition: none;
        transform: none;
    }
    .bookkeeping-entry--targeted {
        animation: none;
        background: var(--accent-subtle);
    }
}

/* Utility classes */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* Stagger animations for table rows */
.bookkeeping-table tbody tr {
    animation: fadeInRow var(--t) var(--ease) both;
}

@keyframes fadeInRow {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.bookkeeping-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.bookkeeping-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.bookkeeping-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.bookkeeping-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.bookkeeping-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.bookkeeping-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.bookkeeping-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.bookkeeping-table tbody tr:nth-child(8) { animation-delay: 210ms; }
.bookkeeping-table tbody tr:nth-child(9) { animation-delay: 240ms; }
.bookkeeping-table tbody tr:nth-child(10) { animation-delay: 270ms; }

/* ── Bookkeeping Responsive ─────────────────────────────────────── */

@media (max-width: 1024px) {
    .bookkeeping-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .bookkeeping-overview-grid {
        grid-template-columns: 1fr;
    }

    .bookkeeping-scan-modal__panel {
        width: min(440px, 90vw);
    }
}

@media (max-width: 768px) {
    .bookkeeping-summary {
        grid-template-columns: 1fr 1fr;
    }

    .bookkeeping-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .bookkeeping-table {
        font-size: var(--fs1);
    }

    .bookkeeping-add-row__fields {
        grid-template-columns: 1fr 1fr;
    }

    .bookkeeping-chart {
        height: 150px;
    }

    .bookkeeping-scan-modal__panel {
        width: 100vw;
    }

    /* The finding link would squeeze the amounts to two characters otherwise. */
    .bk-finding {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-finding__link {
        align-self: flex-start;
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .bookkeeping-summary {
        grid-template-columns: 1fr;
    }

    .bookkeeping-add-row__fields {
        grid-template-columns: 1fr;
    }

    .bookkeeping-regime__options {
        grid-template-columns: 1fr;
    }

    .bookkeeping-regime__actions .btn {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        gap: var(--s3);
    }

    .bookkeeping-year-selector {
        margin-left: 0;
    }
}

/* ── PWA Install Banner ──────────────────────────────────────────── */

.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--c-surface, #161b22);
    border-top: 1px solid var(--c-border, #30363d);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.install-banner--visible {
    transform: translateY(0);
}

.install-banner__text {
    flex: 1;
    font-size: var(--fs2, 0.875rem);
    color: var(--c-text, #c9d1d9);
}

.install-banner__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: var(--c-accent, #238636);
    color: #fff;
    font-size: var(--fs2, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.install-banner__btn:hover {
    background: #2ea043;
}

.install-banner__close {
    background: none;
    border: none;
    color: var(--c-text-muted, #8b949e);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.install-banner__close:hover {
    color: var(--c-text, #c9d1d9);
}

@media (max-width: 480px) {
    .install-banner {
        flex-wrap: wrap;
        padding: var(--s3);
    }

    .install-banner__text {
        width: 100%;
        margin-bottom: var(--s2);
    }

    .install-banner__btn {
        flex: 1;
    }
}

/* ── Push Notification Banner ───────────────────────────────────── */

.push-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--c-surface, #161b22);
    border-top: 1px solid var(--c-border, #30363d);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.push-banner--visible {
    transform: translateY(0);
}

.push-banner__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.push-banner__text {
    flex: 1;
    font-size: var(--fs2, 0.875rem);
    color: var(--c-text, #c9d1d9);
}

.push-banner__btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: var(--c-accent, #238636);
    color: #fff;
    font-size: var(--fs2, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.push-banner__btn:hover {
    background: #2ea043;
}

.push-banner__close {
    background: none;
    border: none;
    color: var(--c-text-muted, #8b949e);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.push-banner__close:hover {
    color: var(--c-text, #c9d1d9);
}

@media (max-width: 480px) {
    .push-banner {
        flex-wrap: wrap;
        padding: var(--s3);
    }

    .push-banner__text {
        width: 100%;
        margin-bottom: var(--s2);
    }

    .push-banner__btn {
        flex: 1;
    }

    .push-banner__icon {
        display: none;
    }
}

/* ── Session Banner (app.js HubSession) ─────────────────────────────
   An open page outlived the session it was rendered for — another account
   signed in, or the session ended — and stopped acting on its behalf. Floats
   below the topbar, clear of the composers at the bottom and of the push
   banner; attached to <body>, above every drawer. */

.hub-session-banner {
    position: fixed;
    top: calc(var(--topbar-height) + var(--s3));
    left: 50%;
    z-index: 10050;
    width: min(620px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3) var(--s4);
    padding: var(--s4);
    border: 1px solid rgba(210, 153, 34, 0.38);
    border-radius: var(--r4);
    background:
        linear-gradient(135deg, rgba(210, 153, 34, 0.16), rgba(210, 153, 34, 0) 55%),
        var(--glass-bg);
    box-shadow:
        var(--elev-3),
        inset 0 1px 0 rgba(240, 246, 252, 0.05),
        0 0 48px -12px rgba(210, 153, 34, 0.45);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    color: var(--text);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.97);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity var(--t-slow) var(--ease-emph), transform var(--t-slow) var(--ease-emph);
}

.hub-session-banner.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
}

.hub-session-banner__glow {
    position: absolute;
    top: -90px;
    left: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210, 153, 34, 0.3), transparent 65%);
    pointer-events: none;
    animation: hub-session-glow 3.2s var(--ease) infinite alternate;
}

.hub-session-banner__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f2c14e, var(--warning));
    color: #1b1300;
    box-shadow: 0 6px 18px -6px rgba(210, 153, 34, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* The ring breathes outward: the page is waiting for a decision. */
.hub-session-banner__icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(210, 153, 34, 0.55);
    border-radius: 50%;
    animation: hub-session-ring 2.4s var(--ease) infinite;
}

.hub-session-banner__icon svg {
    width: 22px;
    height: 22px;
}

.hub-session-banner__body {
    position: relative;
    min-width: 0;
}

.hub-session-banner__title {
    display: block;
    color: var(--text-bright);
    font-size: var(--fs3);
    font-weight: 700;
    line-height: 1.3;
}

.hub-session-banner__text {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs2);
    line-height: 1.45;
}

.hub-session-banner__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.hub-session-banner__btn {
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: var(--r3);
    background: linear-gradient(145deg, #f2c14e, var(--warning));
    color: #1b1300;
    font: inherit;
    font-size: var(--fs2);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(210, 153, 34, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        transform var(--t-fast) var(--ease),
        box-shadow var(--t) var(--ease),
        filter var(--t) var(--ease);
}

.hub-session-banner__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -8px rgba(210, 153, 34, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hub-session-banner__btn:active {
    transform: translateY(0) scale(0.97);
}

.hub-session-banner__btn:focus-visible,
.hub-session-banner__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hub-session-banner__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--t) var(--ease),
        background var(--t) var(--ease),
        border-color var(--t) var(--ease);
}

.hub-session-banner__close:hover {
    border-color: var(--glass-border);
    background: rgba(240, 246, 252, 0.06);
    color: var(--text-bright);
}

@keyframes hub-session-glow {
    from { opacity: 0.55; transform: translate(0, 0) scale(1); }
    to   { opacity: 1;    transform: translate(12px, 8px) scale(1.12); }
}

@keyframes hub-session-ring {
    0%   { opacity: 0.7; transform: scale(0.92); }
    70%  { opacity: 0;   transform: scale(1.35); }
    100% { opacity: 0;   transform: scale(1.35); }
}

@media (max-width: 640px) {
    .hub-session-banner {
        top: calc(var(--topbar-height) + var(--s2));
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--s3) var(--s4) var(--s4);
    }

    .hub-session-banner__actions {
        grid-column: 1 / -1;
    }

    .hub-session-banner__btn {
        flex: 1;
        padding: 0.7rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-session-banner,
    .hub-session-banner.is-visible {
        transform: translate(-50%, 0);
        transition: opacity var(--t) linear;
    }

    .hub-session-banner__glow,
    .hub-session-banner__icon::after {
        animation: none;
    }
}

/* ── Push Permission Box (Settings) ────────────────────────────── */

.push-permission-box {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r2, 8px);
    border: 1px solid var(--c-border, #30363d);
    margin-bottom: var(--s5);
}

.push-permission-box__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.push-permission-box__content {
    flex: 1;
    min-width: 0;
}

.push-permission-box__title {
    display: block;
    font-size: var(--fs2, 0.875rem);
    margin-bottom: 0.125rem;
}

.push-permission-box__text {
    font-size: var(--fs1, 0.8125rem);
    color: var(--c-text-muted, #8b949e);
    margin: 0;
}

.push-permission-box__btn {
    flex-shrink: 0;
}

/* Status variants */
.push-permission-box--ok {
    border-color: var(--c-success, #238636);
    background: rgba(35, 134, 54, 0.08);
}

.push-permission-box--ok .push-permission-box__icon {
    background: var(--c-success, #238636);
    color: #fff;
}

.push-permission-box--warn {
    border-color: var(--c-warning, #d29922);
    background: rgba(210, 153, 34, 0.08);
}

.push-permission-box--warn .push-permission-box__icon {
    background: var(--c-warning, #d29922);
    color: #fff;
}

.push-permission-box--default {
    border-color: var(--c-accent, #1f6feb);
    background: rgba(31, 111, 235, 0.06);
}

.push-permission-box--default .push-permission-box__icon {
    background: rgba(31, 111, 235, 0.15);
    color: var(--c-accent, #1f6feb);
}

@media (max-width: 480px) {
    .push-permission-box {
        flex-wrap: wrap;
    }

    .push-permission-box__content {
        flex: 1 1 calc(100% - 3.5rem);
    }

    .push-permission-box__btn {
        width: 100%;
        margin-top: var(--s2);
    }
}

/* ── Test Notification Button ─── */

.notif-settings__test {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s4) 0;
    padding: var(--s3) var(--s4);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--r3);
}

.notif-settings__test-hint {
    font-size: var(--fs1);
    color: var(--muted);
}

/* ── Global Search – Command Palette (M20) ─────────────────────── */

/* Topbar trigger button */
.topbar__search-trigger {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r2);
    background: var(--bg-alt);
    color: var(--muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
    min-width: 0;
}

.topbar__search-trigger:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--bg);
}

.topbar__search-trigger svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.topbar__search-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__search-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--r1);
    background: var(--bg);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* Search overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 140px);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Search modal */
.search-modal {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r4);
    box-shadow: var(--shadow3), 0 0 0 1px rgba(0,0,0,0.1);
    transform: scale(0.97) translateY(-8px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.search-overlay.is-open .search-modal {
    transform: scale(1) translateY(0);
}

/* Modal header with search input */
.search-modal__header {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
}

.search-modal__icon {
    flex-shrink: 0;
    color: var(--muted);
}

.search-modal__input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-bright);
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
}

.search-modal__input::placeholder {
    color: var(--muted);
}

.search-modal__esc {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--r1);
    background: var(--bg-alt);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* Modal body */
.search-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s2) 0;
    min-height: 80px;
    max-height: calc(70vh - 110px);
}

/* Empty state */
.search-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--muted);
}

.search-modal__empty-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.search-modal__empty-hint {
    font-size: 0.8125rem;
    margin: 0;
}

/* Loading state */
.search-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: var(--s6) var(--s4);
    color: var(--muted);
    font-size: 0.875rem;
}

.search-modal__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: search-spin 0.6s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

.search-modal__empty[hidden],
.search-modal__loading[hidden] {
    display: none;
}

/* No results state */
.search-modal__no-results {
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
}

.search-modal__no-results p {
    margin: 0;
}

/* Results – group headers */
.search-group {
    padding: var(--s1) 0;
}

.search-group + .search-group {
    border-top: 1px solid var(--border);
    margin-top: var(--s1);
    padding-top: var(--s2);
}

.search-group__label {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s4) var(--s2);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* Result items */
.search-result {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 0;
}

.search-result:hover,
.search-result.is-active {
    background: var(--accent-subtle);
}

.search-result__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--r2);
    background: var(--bg-alt);
    color: var(--muted);
}

.search-result__body {
    flex: 1;
    min-width: 0;
}

.search-result__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result__title mark {
    background: var(--warning-subtle);
    color: var(--warning);
    border-radius: 2px;
    padding: 0 1px;
}

.search-result__subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.search-result__status {
    flex-shrink: 0;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--r1);
    background: var(--bg-alt);
    color: var(--muted);
    text-transform: capitalize;
}

/* Footer with keyboard hints */
.search-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s2) var(--s4);
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
}

.search-modal__hint {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: 0.6875rem;
    color: var(--muted);
}

.search-modal__hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--r1);
    background: var(--bg);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.625rem;
    line-height: 1;
}

/* ── Mobile responsive ─────────────────────────────────────────── */

@media (max-width: 767px) {
    .topbar__search-text,
    .topbar__search-kbd {
        display: none;
    }

    .topbar__search-trigger {
        padding: 0.375rem;
    }

    .search-overlay {
        padding-top: 0;
        align-items: stretch;
    }

    .search-modal {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100svh;
        height: 100vh;
        height: 100svh;
        border-radius: 0;
        border: none;
    }

    .search-modal__body {
        max-height: calc(100vh - 55px);
        max-height: calc(100svh - 55px);
    }

    .search-modal__footer {
        display: none;
    }
}

/* ── Type Selection Page ───────────────────────────────────────── */

.type-select {
    max-width: 960px;
    margin: 0 auto;
}

.type-select__header {
    margin-bottom: var(--s5);
}

.type-select__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}

.type-select__card-form {
    display: contents;
}

.type-select__card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s5) var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    width: 100%;
}

.type-select__card-btn:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.type-select__card-btn:active {
    transform: translateY(0);
}

.type-select__card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--primary);
    transition: background 0.25s, color 0.25s;
}

.type-select__card-btn:hover .type-select__card-icon {
    background: var(--primary);
    color: var(--text-on-primary, #fff);
}

.type-select__card-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-bright);
}

.type-select__card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .type-select__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s3);
    }

    .type-select__card-btn {
        padding: var(--s4) var(--s3);
    }
}

@media (max-width: 480px) {
    .type-select__grid {
        grid-template-columns: 1fr;
    }
}

/* ── AI Brief Card (type-select page) ──────────────────────── */

.type-select__ai-divider {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin: var(--s6) 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.type-select__ai-divider::before,
.type-select__ai-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.type-select__ai-card {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: var(--s5);
    text-align: center;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.type-select__ai-card:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
}

.type-select__ai-card.drag-over {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

.type-select__ai-header {
    margin-bottom: var(--s4);
}

.type-select__ai-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
    color: var(--primary);
}

.type-select__ai-sparkle {
    animation: ai-sparkle-pulse 2s ease-in-out infinite;
}

@keyframes ai-sparkle-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

.type-select__ai-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0 0 var(--s2);
}

.type-select__ai-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
}

.type-select__ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--s3);
    padding: var(--s2) var(--s3);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.type-select__ai-disclaimer svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--warning);
}

.type-select__ai-disclaimer--privacy {
    background: color-mix(in srgb, var(--info, #3b82f6) 8%, transparent);
    border-color: color-mix(in srgb, var(--info, #3b82f6) 25%, transparent);
    margin-top: var(--s2);
}

.type-select__ai-disclaimer--privacy svg {
    color: var(--info, #3b82f6);
}

/* Dropzone */
.type-select__ai-dropzone[hidden] {
    display: none !important;
}

.type-select__ai-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding: var(--s5) var(--s4);
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
    border-radius: var(--radius);
}

.type-select__ai-dropzone:hover {
    color: var(--primary);
}

.type-select__ai-dropzone-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
}

.type-select__ai-dropzone-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Loading */
.type-select__ai-loading[hidden],
.type-select__ai-error[hidden] {
    display: none !important;
}

.type-select__ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s6) var(--s4);
}

.type-select__ai-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.type-select__ai-loading-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-bright);
}

.type-select__ai-loading-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    max-width: 360px;
}

/* Error */
.type-select__ai-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding: var(--s5) var(--s4);
}

.type-select__ai-error-msg {
    font-size: 0.875rem;
    color: var(--danger);
    text-align: center;
    line-height: 1.5;
}

.type-select__ai-retry {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.type-select__ai-retry:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
}

@media (max-width: 480px) {
    .type-select__ai-card {
        padding: var(--s4);
    }

    .type-select__ai-desc {
        font-size: 0.75rem;
    }
}

/* Type Badge (inline) */
.badge--subtle {
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* ── Design Upload (Wizard) ─────────────────────────────────────── */

.design-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    text-align: center;
    color: var(--text-muted);
}

.design-upload__dropzone:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-alt));
}

.design-upload__dropzone--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt));
    transform: scale(1.01);
}

.design-upload__dropzone svg {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.design-upload__dropzone:hover svg {
    opacity: 0.8;
}

.design-upload__preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.design-upload__preview:empty {
    display: none;
}

.design-upload__thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    transition: box-shadow 0.2s, transform 0.15s;
}

.design-upload__thumb:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.design-upload__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design-upload__thumb-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

.design-upload__thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}

.design-upload__thumb:hover .design-upload__thumb-remove {
    opacity: 1;
}

.design-upload__thumb-remove:hover {
    background: var(--danger, #e53e3e);
}

.design-upload__thumb-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s;
}

.design-upload__thumb:hover .design-upload__thumb-name {
    opacity: 1;
}

.design-upload__thumb--uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
}

.design-upload__spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: designSpin 0.7s linear infinite;
}

@keyframes designSpin {
    to { transform: rotate(360deg); }
}

/* Design References Grid (Brief Summary) */
.design-refs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.design-refs-grid__item {
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.design-refs-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design-refs-grid__item--file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--text-muted);
}

.design-refs-grid__name {
    display: block;
    padding: 2px 4px;
    font-size: 0.625rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .design-upload__preview,
    .design-refs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .design-upload__preview,
    .design-refs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .design-upload__dropzone {
        padding: 1.25rem 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Bug Report Admin
   ══════════════════════════════════════════════════════════════════ */

/* Status badges */
.badge--bug-new {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--bug-seen {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--bug-resolved {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--bug-closed {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

/* Feature request status badges */
.badge--feature-new {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge--feature-seen {
    background: var(--warning-subtle);
    color: var(--warning);
}

.badge--feature-accepted {
    background: rgba(66, 153, 225, 0.12);
    color: var(--primary);
}

.badge--feature-done {
    background: var(--success-subtle);
    color: var(--success);
}

.badge--feature-declined {
    background: rgba(139, 148, 158, 0.12);
    color: var(--muted);
}

/* Feature request detail page grid */
.feature-request-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s4);
}

.feature-request-detail-grid .card--accent {
    border-color: var(--primary);
    border-left: 3px solid var(--primary);
}

/* Detail page grid */
.bug-report-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.bug-report-detail-grid .card {
    break-inside: avoid;
}

.bug-report-detail-grid .card--accent {
    grid-column: 1 / -1;
    border-color: var(--accent);
    border-left: 3px solid var(--accent);
}

/* Detail info grid */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3) var(--s5);
}

.detail-grid__item--full {
    grid-column: 1 / -1;
}

.detail-grid__label {
    display: block;
    font-size: var(--fs1);
    color: var(--muted);
    margin-bottom: var(--s1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.detail-grid__value {
    display: block;
    color: var(--text-bright);
}

/* Description box */
.bug-report-description {
    background: var(--surface0);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: var(--s3);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: var(--fs2);
    line-height: 1.6;
    color: var(--text);
}

/* Page history */
.bug-report-history {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: history-counter;
}

.bug-report-history__item {
    counter-increment: history-counter;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 2.5rem;
}

.bug-report-history__item:last-child {
    border-bottom: none;
}

.bug-report-history__item::before {
    content: counter(history-counter);
    position: absolute;
    left: 0;
    top: var(--s2);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs1);
    font-weight: 700;
}

.bug-report-history__title {
    font-weight: 500;
    color: var(--text-bright);
}

.bug-report-history__url {
    font-size: 0.8em;
    color: var(--muted);
    word-break: break-all;
    font-family: var(--font-mono, monospace);
}

.bug-report-history__time {
    font-size: 0.75em;
    color: var(--muted);
}

/* Quick actions */
.quick-actions {
    border-top: 1px solid var(--border);
    padding-top: var(--s4);
}

.quick-actions__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
}

.quick-actions__form {
    flex: 0 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .bug-report-detail-grid {
        grid-template-columns: 1fr;
    }

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

/* ═══════════════════════════════════════════════════════════════════
   Phase Switcher
   ═══════════════════════════════════════════════════════════════════ */

.phase-switcher {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r3);
    margin-bottom: var(--s3);
}

.phase-switcher__label {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.phase-switcher__items {
    display: flex;
    gap: var(--s1);
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.phase-switcher > .btn {
    flex-shrink: 0;
}

.phase-switcher__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    border-radius: var(--r2);
    font-size: var(--fs2);
    color: var(--muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    cursor: pointer;
}

.phase-switcher__item:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, .04);
    border-color: var(--border);
}

.phase-switcher__item--active {
    color: var(--text-bright);
    background: var(--card);
    box-shadow: var(--shadow1);
    border-color: var(--accent);
}

.phase-switcher__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.phase-switcher__dot--planning { background: var(--warning); }
.phase-switcher__dot--active { background: var(--success); }
.phase-switcher__dot--completed { background: var(--info); }
.phase-switcher__dot--archived { background: var(--muted); }

/* Phase Management Modal */

.phase-manage-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.phase-manage-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

.phase-manage-item__info {
    flex: 1;
    min-width: 0;
}

.phase-manage-item__title {
    font-weight: 600;
    color: var(--text-bright);
}

.phase-manage-item__desc {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: 2px;
}

.phase-manage-item__actions {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

.phase-manage-item--initial {
    border-color: var(--accent);
    border-style: dashed;
}

/* Extension banner in triage */

.extension-banner {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--r3);
    margin-bottom: var(--s3);
}

.extension-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.extension-banner__text {
    flex: 1;
}

.extension-banner__text strong {
    color: var(--text-bright);
}

.extension-banner a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.extension-banner a:hover {
    text-decoration: underline;
}

.extension-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
}

.extension-link-item:last-child {
    border-bottom: none;
}

.extension-link-item:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.extension-link-item__title {
    font-weight: 500;
    color: var(--text-bright);
}

/* Extension CTA in ClientHub project overview */

.extension-cta {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.10) 0%, rgba(63, 185, 80, 0.06) 100%);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--r4);
    margin-bottom: var(--s3);
    transition: all var(--t) var(--ease);
    position: relative;
    overflow: hidden;
}

.extension-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.05) 0%, rgba(63, 185, 80, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.extension-cta:hover::before {
    opacity: 1;
}

.extension-cta:hover {
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.1);
}

.extension-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r3);
    background: rgba(0, 229, 255, 0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.extension-cta__body {
    flex: 1;
    min-width: 0;
}

.extension-cta__title {
    font-weight: 600;
    font-size: var(--fs3);
    color: var(--text-bright);
    margin-bottom: 2px;
}

.extension-cta__desc {
    font-size: var(--fs2);
    color: var(--muted);
    line-height: 1.4;
}

.extension-cta__action {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .extension-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--s3);
    }

    .extension-cta__icon {
        margin: 0 auto;
    }

    .extension-cta__action {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .phase-switcher {
        flex-wrap: nowrap;
        padding: var(--s1) var(--s2);
    }

    .phase-switcher__label {
        font-size: var(--fs1);
    }

    .phase-switcher__item {
        font-size: var(--fs1);
        padding: var(--s1) var(--s2);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Team Management
   ═══════════════════════════════════════════════════════════════════ */

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s3);
}

/* Team Card */
.team-card {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s4);
    background: var(--card);
    border-radius: var(--r3);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: all var(--t) var(--ease);
}

.team-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow2);
    transform: translateY(-2px);
}

.team-card__header {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.team-card__avatar,
.team-detail-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs3);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.team-detail-header__avatar {
    width: 64px;
    height: 64px;
    font-size: var(--fs5);
}

.team-card__info {
    flex: 1;
    min-width: 0;
}

.team-card__name {
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card__email {
    font-size: var(--fs1);
    color: var(--muted);
}

.team-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.team-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.team-card__tech-label {
    font-size: var(--fs0);
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    margin-right: 2px;
}

.team-card__rate {
    font-size: var(--fs2);
    color: var(--muted);
    font-weight: 500;
}

/* Role Badge */
.team-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs1);
    font-weight: 600;
    background: color-mix(in srgb, var(--role-color, var(--accent)) 15%, transparent);
    color: var(--role-color, var(--accent));
    border: 1px solid color-mix(in srgb, var(--role-color, var(--accent)) 30%, transparent);
    white-space: nowrap;
}

.team-role-badge--lg {
    padding: 4px 14px;
    font-size: var(--fs2);
}

/* Skill Chip */
.team-skill-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r1);
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--surface0);
    color: var(--text);
    border: 1px solid var(--border);
}

.team-skill-chip--more {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: transparent;
}

.team-skill-chip--added {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.team-skill-chip--removed {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    text-decoration: line-through;
}

/* Team Detail Header */
.team-detail-header {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.team-detail-header__info {
    flex: 1;
    min-width: 0;
}

.team-detail-header__info h2 {
    margin: 0;
    font-size: var(--fs5);
    color: var(--text-bright);
}

.team-detail-header__email {
    font-size: var(--fs2);
    color: var(--muted);
    margin-top: 2px;
}

.team-detail-header__roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-top: var(--s2);
}

/* Detail fields */
.detail-fields {
    display: grid;
    gap: var(--s3);
}

.detail-fields--compact {
    gap: var(--s2);
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-field__label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-field__value {
    color: var(--text-bright);
    line-height: 1.5;
}

.detail-text {
    color: var(--text);
    line-height: 1.7;
    margin-top: var(--s1);
}

.detail-links {
    list-style: none;
    padding: 0;
    margin: var(--s1) 0 0;
}

.detail-links li {
    padding: var(--s1) 0;
}

.detail-links a {
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
}

.detail-links a:hover {
    text-decoration: underline;
}

/* Assignment List */
.assignment-list {
    display: flex;
    flex-direction: column;
}

.assignment-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s2) var(--s1);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
}

.assignment-list__item:last-child {
    border-bottom: none;
}

.assignment-list__item:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.assignment-list__name {
    font-weight: 500;
    color: var(--text-bright);
}

/* Assignment Toggle (button + slider pattern) */
.assignment-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

.assignment-toggle__slider {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--surface0);
    border: 2px solid var(--border);
    position: relative;
    transition: all var(--t) var(--ease);
}

.assignment-toggle__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: all var(--t) var(--ease);
}

.assignment-toggle--on .assignment-toggle__slider {
    background: var(--accent);
    border-color: var(--accent);
}

.assignment-toggle--on .assignment-toggle__slider::after {
    left: 22px;
    background: #fff;
}

.assignment-toggle:hover .assignment-toggle__slider {
    border-color: var(--accent);
}

.assignment-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Profile Diff */
.profile-diff-banner {
    background: linear-gradient(135deg, rgba(var(--warning-rgb, 234, 179, 8), 0.08), rgba(var(--warning-rgb, 234, 179, 8), 0.02));
    border: 1px solid rgba(var(--warning-rgb, 234, 179, 8), 0.25);
    border-radius: var(--r3);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

.profile-diff-banner__header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.profile-diff-banner__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid rgba(var(--warning-rgb, 234, 179, 8), 0.15);
}

/* Info variation for acknowledgement banners */
.profile-diff-banner--info {
    background: linear-gradient(135deg, rgba(var(--info-rgb, 59, 130, 246), 0.08), rgba(var(--info-rgb, 59, 130, 246), 0.02));
    border-color: rgba(var(--info-rgb, 59, 130, 246), 0.25);
}
.profile-diff-banner--info .profile-diff-banner__actions {
    border-top-color: rgba(var(--info-rgb, 59, 130, 246), 0.15);
}

/* Client profile email change notice */
.profile-email-notice {
    display: flex;
    align-items: center;
    gap: var(--s1);
    color: var(--warning);
    margin-top: var(--s1);
    font-size: var(--fs1);
}

.profile-diff {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.profile-diff__field {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

.profile-diff__label {
    font-size: var(--fs1);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-diff__values {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

.profile-diff__old {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.7;
}

.profile-diff__arrow {
    flex-shrink: 0;
    color: var(--muted);
}

.profile-diff__new {
    color: var(--success);
    font-weight: 500;
}

.profile-diff__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Permissions Grid */
.permissions-grid {
    border: 1px solid var(--border);
    border-radius: var(--r2);
    overflow: hidden;
    font-size: var(--fs2);
}

.permissions-grid__header {
    display: flex;
    background: var(--bg-alt);
    font-weight: 600;
    padding: var(--s2) var(--s3);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs1);
}

.permissions-grid__row {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
    padding: var(--s1) var(--s3);
    transition: background 0.15s;
}

.permissions-grid__row:hover {
    background: rgba(var(--accent-rgb), 0.03);
}

.permissions-grid__cell--label {
    flex: 0 0 180px;
    font-weight: 500;
    color: var(--text-bright);
}

.permissions-grid__cell--check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--s1) var(--s2);
    cursor: pointer;
    font-size: var(--fs1);
    color: var(--muted);
}

.permissions-grid__cell--check input:checked + span {
    color: var(--accent);
    font-weight: 600;
}

/* Role Card Header */
.role-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.role-card-header__info {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.role-card-header__actions {
    display: flex;
    gap: var(--s1);
}

/* Checkbox list */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.checkbox-list__item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}

.checkbox-list__item input[type="checkbox"] {
    accent-color: var(--accent);
}

/* Form section title */
.form-section-title {
    font-size: var(--fs3);
    color: var(--text-bright);
    margin: var(--s4) 0 var(--s2);
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--border);
}

/* Color input */
.form-input--color {
    width: 48px;
    height: 36px;
    padding: 2px;
    cursor: pointer;
    border-radius: var(--r2);
}

/* Team Tab in Project Detail */
.team-assignment-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.team-assignment-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--bg-alt);
    border-radius: var(--r2);
    border: 1px solid var(--border);
}

.team-assignment-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--s2);
}

.team-assignment-item__detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.team-assignment-item__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: var(--s1);
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.team-assignment-item__section--secondary {
    opacity: .7;
}

.team-assignment-item__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.team-assignment-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding-left: var(--s4);
}

.team-assignment-item__name {
    font-weight: 600;
    color: var(--text-bright);
}

.team-assignment-item__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .permissions-grid__cell--label {
        flex: 0 0 120px;
    }

    .permissions-grid__row {
        flex-wrap: wrap;
    }
}

/* ── Permission Notice ──────────────────────────────────────────── */
.permission-notice {
    display: flex;
    align-items: center;
    gap: var(--s2);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--r2);
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    font-size: var(--fs2);
    color: var(--muted);
}
.permission-notice__icon { flex-shrink: 0; color: var(--warning); }
[data-no-permission] { opacity: 0.45; cursor: not-allowed !important; pointer-events: auto !important; }

/* ── AI Task Planner ──────────────────────────────────────────── */

.planner-intro {
    text-align: center;
    padding: var(--s4) 0;
}
.planner-intro p {
    margin-bottom: var(--s3);
    line-height: 1.6;
    color: var(--text);
}
.planner-intro__option {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--surface);
    border-radius: var(--r2);
    font-size: var(--fs2);
    color: var(--muted);
}
.planner-intro__option label {
    white-space: nowrap;
}
.planner-intro__option select {
    min-width: 120px;
}
.planner-intro__code-basis {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    text-align: left;
    min-width: 280px;
}
.planner-intro__code-basis-label {
    font-weight: 600;
    color: var(--text);
    font-size: var(--fs2);
}
.planner-intro__code-basis-radios {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}
.planner-intro__code-basis-radios .form-check {
    display: flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
}
.planner-intro__code-basis select:disabled {
    opacity: 0.5;
}
.planner-intro__finished {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    text-align: left;
    min-width: 280px;
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.planner-intro__finished:has(#plannerFinishedProject:checked) {
    border-color: var(--accent);
}
.planner-intro__finished .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    /* Override .planner-intro__option label { white-space: nowrap } so the label wraps
       on narrow viewports instead of being clipped. */
    white-space: normal;
}
.planner-intro__finished .form-check input {
    flex-shrink: 0;
    margin-top: 2px;
}
.planner-intro__finished-hint {
    font-size: var(--fs1);
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}
.planner-intro__folders.is-required .planner-intro__folders-label::after {
    content: " *";
    color: var(--accent);
}
.planner-intro__folders-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    font-size: var(--fs2);
    padding: var(--s3);
}
.planner-intro__folders {
    margin-top: var(--s3);
    text-align: left;
}
.planner-intro__folders-label {
    display: block;
    font-weight: 600;
    font-size: var(--fs2);
    margin-bottom: var(--s1);
    color: var(--text);
}
.planner-intro__folders-hint {
    font-size: var(--fs1);
    color: var(--muted);
    margin-bottom: var(--s2);
    line-height: 1.4;
}
.planner-intro__folders-actions {
    display: flex;
    gap: var(--s1);
    margin-bottom: var(--s2);
}
.planner-intro__folder-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s1);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--s2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
}
.planner-intro__folder-item {
    display: flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    border-radius: var(--r1);
    cursor: pointer;
    font-size: var(--fs2);
    transition: background-color .15s ease;
    user-select: none;
}
.planner-intro__folder-item:hover {
    background: var(--surface-hover, rgba(255,255,255,.06));
}
.planner-intro__folder-item input[type="checkbox"] {
    accent-color: var(--accent);
    flex-shrink: 0;
}
.planner-intro__folder-item svg {
    flex-shrink: 0;
    color: var(--muted);
}
.planner-intro__folder-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-progress {
    padding: var(--s4) 0;
    text-align: center;
}
.planner-progress__bar {
    height: 6px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--s3);
}
.planner-progress__fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.planner-progress__info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}
.planner-progress__step {
    font-weight: 600;
    color: var(--bright);
    font-size: var(--fs3);
}
.planner-progress__label {
    color: var(--text);
    font-size: var(--fs2);
}
.planner-progress__spinner {
    margin-top: var(--s3);
}

.planner-error {
    padding: var(--s4);
    text-align: center;
    color: var(--danger);
}

.planner-logs {
    margin-top: var(--s3);
    border-top: 1px solid var(--border-subtle);
}
.planner-logs > summary {
    cursor: pointer;
    padding: var(--s2) 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    user-select: none;
}
.planner-logs > summary:hover {
    color: var(--text-secondary);
}
.planner-logs__content {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r2);
    padding: var(--s2) var(--s3);
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: pre;
    margin-bottom: var(--s2);
}

.planner-review {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.planner-review::-webkit-scrollbar { width: 6px; }
.planner-review::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.planner-review::-webkit-scrollbar-track { background: transparent; }
.planner-review__summary {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface);
    border-radius: var(--r2);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}
.planner-review__summary strong {
    flex: 1;
    min-width: 0;
    color: var(--bright);
    word-break: break-word;
}
.planner-review__total {
    font-size: var(--fs2);
    color: var(--accent);
    font-weight: 600;
}
.planner-review__lines {
    font-size: var(--fs2);
    color: var(--muted);
    font-family: var(--font-mono, monospace);
}

.planner-review__list {
    min-width: 0;
    max-width: 100%;
}
.planner-review__milestone {
    margin-bottom: var(--s3);
}
.planner-review__milestone-header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r2) var(--r2) 0 0;
}
.planner-review__milestone-title {
    font-weight: 600;
    color: var(--bright);
}

.planner-review__tasks {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r2) var(--r2);
}

.planner-review__task {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s2) var(--s3);
    padding-right: calc(var(--s3) + 28px);
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: opacity 0.3s ease, background 0.2s ease;
}
.planner-review__task:last-child { border-bottom: none; }
.planner-review__task:hover { background: var(--surface); }

.planner-review__task--readonly {
    opacity: 0.5;
    background: var(--surface);
    pointer-events: none;
    padding-right: var(--s3);
}
.planner-review__task--removed {
    opacity: 0.3;
    text-decoration: line-through;
}
.planner-review__task--removed .planner-review__task-remove {
    opacity: 1;
    pointer-events: auto;
}

.planner-review__task-main {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}
.planner-review__task-title {
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}
.planner-review__task-meta {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    font-size: var(--fs2);
}
.planner-review__task-time {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.planner-review__task-assignee {
    color: var(--muted);
}
.planner-review__task-desc {
    display: block;
    width: 100%;
    margin-top: 2px;
    color: var(--muted);
}
.planner-review__task-remove {
    position: absolute;
    top: var(--s2);
    right: var(--s2);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.planner-review__task:hover .planner-review__task-remove { opacity: 1; }

/* Responsive */
@media (max-width: 1024px) {
    .planner-review__task-remove {
        opacity: 1;
    }
    .planner-review__summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Planner button states */
.planner-btn--running {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
    animation: plannerBtnPulse 2s ease-in-out infinite;
}
.planner-btn--running:hover {
    background: var(--warning);
    border-color: var(--warning);
}
.planner-btn--running svg {
    animation: spin 1.5s linear infinite;
}
.planner-btn--result-ready {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    animation: plannerBtnReady 1.5s ease-in-out infinite;
}
.planner-btn--result-ready:hover {
    background: var(--success);
    border-color: var(--success);
}

@keyframes plannerBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--warning-rgb, 234, 179, 8), 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(var(--warning-rgb, 234, 179, 8), 0); }
}
@keyframes plannerBtnReady {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--success-rgb, 34, 197, 94), 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(var(--success-rgb, 34, 197, 94), 0); }
}

/* Planner inline edit */
.planner-edit { cursor: pointer; border-radius: var(--r1); transition: background 0.15s; display: inline-block; padding: 1px 4px; margin: -1px -4px; }
.planner-edit:hover { background: var(--surface); }
.planner-edit--active { background: transparent; padding: 0; margin: 0; }
.planner-edit__input {
    font: inherit; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r1); padding: 2px var(--s1); width: 100%; color: var(--text);
    box-sizing: border-box;
}
.planner-edit__input:focus { border-color: var(--accent); outline: none; }
textarea.planner-edit__input { min-height: 48px; resize: vertical; }
select.planner-edit__input { cursor: pointer; }
.planner-review__task--readonly .planner-edit,
.planner-review__task--removed .planner-edit { pointer-events: none; cursor: default; }
.planner-review__task--readonly .planner-edit:hover,
.planner-review__task--removed .planner-edit:hover { background: transparent; }
.planner-review__task-details { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s1); }
.planner-review__task-details-row { display: flex; align-items: flex-start; gap: var(--s1); }
.planner-review__task-details-label { font-size: 0.75rem; color: var(--text-muted); min-width: 40px; padding-top: 2px; }
.planner-review__task-details-value { flex: 1; font-size: 0.85rem; min-width: 0; word-break: break-word; white-space: pre-wrap; }
.planner-review__milestone-details { display: flex; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }
.planner-review__milestone-desc { font-size: 0.85rem; color: var(--text-muted); flex: 1; min-width: 0; word-break: break-word; }
.planner-review__milestone-deadline { font-size: 0.85rem; color: var(--text-muted); }

/* ── Planner task group borders ──────────────────────────────── */
.planner-review__task--group-coding { border-left: 3px solid var(--accent); }
.planner-review__task--group-other_work { border-left: 3px solid var(--warning); }
.planner-review__task--group-organizational { border-left: 3px solid var(--muted); }

/* ── Planner group bar ──────────────────────────────────────── */
.planner-review__groups {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--surface);
    border-radius: var(--r2);
    margin-bottom: var(--s3);
    flex-wrap: wrap;
}
.planner-review__group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
    font-size: var(--fs2);
}
.planner-review__group-item-row {
    display: flex;
    align-items: center;
    gap: var(--s1);
}
.planner-review__group-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.planner-review__group-label {
    font-weight: 500;
    color: var(--text);
}
.planner-review__group-count {
    color: var(--text-muted);
}
.planner-review__group-mult {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 2px;
}
.planner-review__group-mult-input {
    width: 52px;
    padding: 2px 4px;
    font: inherit;
    font-size: var(--fs2);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    color: var(--text);
    text-align: center;
}
.planner-review__group-mult-input:focus {
    border-color: var(--accent);
    outline: none;
}
.planner-review__group-time {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.planner-review__group-item[data-group="coding"] .planner-review__group-time { color: var(--accent); }
.planner-review__group-item[data-group="other_work"] .planner-review__group-time { color: var(--warning); }
.planner-review__group-item[data-group="organizational"] .planner-review__group-time { color: var(--muted); }
@media (max-width: 1024px) {
    .planner-review__groups {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s2);
    }
    .planner-review__group-item {
        flex-direction: row;
        gap: var(--s2);
    }
    .planner-review__group-time {
        font-size: 0.95rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .planner-review__task-details-row {
        flex-direction: column;
        gap: 2px;
    }

    .planner-review__milestone-details {
        flex-direction: column;
    }

    .planner-review {
        contain: layout style;
    }
}

/* ── AI Team Assignment Loading Modal ─────────────────────────── */
.ai-assign-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    padding: var(--s6) var(--s4);
    text-align: center;
}
.ai-assign-loading__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.ai-assign-loading__title {
    font-size: var(--fs4);
    font-weight: 600;
    color: var(--text);
}
.ai-assign-loading__text {
    font-size: var(--fs2);
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.5;
}
.ai-assign-loading__dots::after {
    content: '';
    animation: ai-assign-dots 1.5s steps(4, end) infinite;
}
@keyframes ai-assign-dots {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ── Task Summary Accordion (Team Detail) ───────────────────── */

.task-summary { display:flex; flex-direction:column; gap:var(--s1); }

.task-summary-project__header {
    display:flex; align-items:center; gap:var(--s2);
    width:100%; padding:var(--s2) var(--s3);
    background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius, 8px); cursor:pointer;
    font:inherit; color:var(--text); text-align:left;
    transition:background .15s;
}
.task-summary-project__header:hover { background:var(--bg-hover, var(--border)); }

.task-summary-project__chevron {
    display:flex; align-items:center; transition:transform .2s;
}
.task-summary-project.is-open > .task-summary-project__header .task-summary-project__chevron {
    transform:rotate(90deg);
}

.task-summary-project__title { flex:1; font-weight:600; }

.task-summary-project__stats {
    font-size:var(--fs1, .8125rem); color:var(--muted); white-space:nowrap;
}

.task-summary-project__body {
    display:none; padding:var(--s1) 0 var(--s1) var(--s3);
}
.task-summary-project.is-open > .task-summary-project__body { display:block; }

.task-summary-phase { margin-bottom:var(--s2); }

.task-summary-phase__header {
    display:flex; align-items:center; gap:var(--s2);
    padding:var(--s1) 0;
    font-weight:500; font-size:var(--fs2, .875rem);
    border-bottom:1px solid var(--border);
}
.task-summary-phase__name { flex-shrink:0; }

.task-summary-task {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--s1) var(--s2);
    font-size:var(--fs1, .8125rem);
    border-bottom:1px dashed var(--border);
}
.task-summary-task:last-child { border-bottom:none; }
.task-summary-task__title { flex:1; color:var(--text); }
.task-summary-task__time { color:var(--muted); white-space:nowrap; }

/* ── Responsive Branding ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar__logo-text {
        font-size: 0.7rem;
    }
}

/* ── Invoice Reminder Banner (ClientHub) ────────────────────────── */
.invoice-reminder-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.5rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 90;
}
.invoice-reminder-banner__inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 1200px;
    margin: 0 auto;
}
.invoice-reminder-banner__icon {
    flex-shrink: 0;
    color: var(--yellow, #fbbf24);
    opacity: 0.9;
}
.invoice-reminder-banner__text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.4;
}
.invoice-reminder-banner__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--yellow, #fbbf24);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t) var(--ease);
}
.invoice-reminder-banner__link:hover {
    color: #fcd34d;
}

/* Invoice Reminder Popup Content */
.invoice-reminder-popup__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 0.5rem 0;
}
.invoice-reminder-popup__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.invoice-reminder-popup__text {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .invoice-reminder-banner { padding: 0.5rem 0.75rem; }
    .invoice-reminder-banner__text { font-size: 0.75rem; }
    .invoice-reminder-banner__link { font-size: 0.75rem; }
}

/* ── Escalation Hint (Admin Dashboard) ──────────────────────────── */
.escalation-hint {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--yellow, #fbbf24);
    border-radius: var(--r3);
    overflow: hidden;
}
.escalation-hint__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.escalation-hint__icon {
    color: var(--yellow, #fbbf24);
    flex-shrink: 0;
}
.escalation-hint__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-bright);
    flex: 1;
    margin: 0;
}
.escalation-hint__list {
    display: flex;
    flex-direction: column;
}
.escalation-hint__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background var(--t) var(--ease);
}
.escalation-hint__item:last-child { border-bottom: none; }
.escalation-hint__item:hover { background: rgba(255, 255, 255, 0.03); }
.escalation-hint__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}
.escalation-hint__number {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-bright);
    white-space: nowrap;
}
.escalation-hint__client {
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.escalation-hint__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
.escalation-hint__footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
@media (max-width: 768px) {
    .escalation-hint__item { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
    .escalation-hint__meta { flex-wrap: wrap; }
}

/* ── Kundenchat (Customer Chat console) ─────────────────────────── */
/* Fill the content area exactly (mirrors the Hank chat) so the composer stays
   pinned and only the messages scroll — no whole-page scroll on mobile. */
.main-content:has(.cc) { padding: 0; }
/* --hub-bottom-overlay-height (app.js initVh, from the banners' layout box) keeps the
   composer above a fixed push/PWA banner from the banner's first frame on. The chat
   used to measure the sliding banner's rect itself and only caught up at a later DOM
   change — the composer sat under the banner meanwhile (2026-09-23). */
.cc {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - var(--topbar-height, 56px));
    height: calc(100svh - var(--topbar-height, 56px));
    height: calc(var(--hub-visible-viewport-height, 100svh) - var(--topbar-height, 56px) - var(--hub-bottom-overlay-height, 0px));
    overflow: hidden;
    background: var(--bg-primary);
}
.cc-rail {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
    min-width: 0;
    min-height: 0;
}
.cc-rail__head { padding: 1rem 1rem 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cc-rail__title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.cc-rail__new { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-primary); color: var(--accent); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.cc-rail__new:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transform: translateY(-1px); }

/* New-chat / connect-source modal */
.cc-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: ccFade 0.15s ease; }
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
.cc-modal__box { width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); overflow: hidden; }
.cc-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.cc-modal__head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.cc-modal__close { border: none; background: transparent; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.cc-modal__close:hover { color: var(--text-primary); }
.cc-modal__body { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.cc-modal__sec h4 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); font-weight: 700; }
.cc-modal__search, .cc-modal__input { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; }
.cc-modal__search:focus, .cc-modal__input:focus { outline: none; border-color: var(--accent); }
.cc-modal__clients { margin-top: 0.5rem; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cc-modal__client { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; padding: 0.55rem 0.7rem; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-primary); font-size: 0.92rem; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.cc-modal__client:hover { background: var(--bg-secondary); border-color: var(--accent); }
.cc-modal__tag { flex-shrink: 0; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 5px; background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-secondary); }
.cc-modal__empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
.cc-modal__extrow { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 520px) { .cc-modal__extrow { flex-direction: row; } .cc-modal__extrow .cc-head__btn { flex-shrink: 0; } }
/* Language picker modal (dropdown of mql5 languages + free-text custom entry) */
.cc-modal__hint { margin: 0; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.45; }
.cc-langform { display: flex; flex-direction: column; gap: 0.35rem; }
.cc-langform__label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); margin-top: 0.5rem; }
.cc-langform__select { cursor: pointer; }
.cc-langform__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.cc-langform__save { background: var(--accent); border-color: var(--accent); color: #fff; }
.cc-langform__save:hover { filter: brightness(1.05); border-color: var(--accent); }
.cc-rail__search { padding: 0 1rem 0.75rem; }
.cc-rail__search-input {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
    border-radius: 9px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;
}
.cc-rail__search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.cc-rail__scroll { flex: 1; overflow-y: auto; padding: 0 0.5rem 1rem; }

.cc-triage { margin: 0.25rem 0 0.75rem; padding: 0.5rem; background: color-mix(in srgb, var(--warning, #eab308) 12%, transparent); border-radius: 10px; }
.cc-triage__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; margin: 0 0.25rem 0.4rem; }
.cc-triage__item { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; border-radius: 8px; background: var(--bg-primary); margin-bottom: 0.4rem; }
.cc-triage__meta { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.cc-triage__label { font-size: 0.85rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cc-triage__actions { display: flex; gap: 0.35rem; align-items: center; }
.cc-triage__open { flex-shrink: 0; padding: 0.35rem 0.6rem; border: 1px solid var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.cc-triage__open:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cc-triage__select { flex: 1; min-width: 0; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.82rem; }

.cc-list { display: flex; flex-direction: column; gap: 2px; }
.cc-list__empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.cc-item {
    display: flex; flex-direction: column; gap: 0.25rem; width: 100%; text-align: left;
    padding: 0.6rem 0.7rem; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
    background: transparent; color: inherit; transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.cc-item:hover { background: var(--bg-primary); border-color: var(--border); }
.cc-item--active { background: var(--bg-primary); border-color: var(--accent); }
.cc-item__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cc-item__name { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item__lang { font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 5px; background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-secondary); text-transform: uppercase; flex-shrink: 0; }
.cc-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cc-item__preview { font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item__badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.cc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-primary); }
.cc-main__placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--text-muted); }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.cc-head__title { font-weight: 700; font-size: 1rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-head__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cc-head__btn { padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.cc-head__btn:hover { border-color: var(--accent); }
.cc-head__lang { font-size: 0.82rem; color: var(--text-secondary); }
.cc-head__back { display: none; flex-shrink: 0; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; margin-right: 0.25rem; }
.cc-head__back:hover { border-color: var(--accent); }
.cc-messages { flex: 1; min-height: 0; }

/* ── Agentengeführtes Gespräch (§5.0 des MQL5-Auto-Plans) ─────────────────────
   ZWEI ZUSTÄNDE, ZWEI FORMEN. Führt der Agent, ERSETZT der Hinweis das Antwortfeld:
   der Weg bleibt erreichbar, kostet aber einen bewussten Klick — ein entferntes Feld
   hieße „geht nicht" und würde bei etwas Dringendem umgangen, ein normal aussehendes
   wäre ein zweiter Normalweg, und zwei Absender in einem Thread widersprechen sich.
   Ist er PAUSIERT, ist der Mensch der Absender: das Feld steht offen, der Hinweis
   schrumpft auf eine Leiste darüber. Violett statt des mql5-Blaus der Kanal-Badges —
   die Automatik ist eine andere Achse als der Kanal, über den sie spricht. */
.cc-composer--agent,
.cc-agentbar { --cc-agent: #8b7cf6; }

/* ── Die Bruecke zur Auftragsakte (2026-08-25) ───────────────────────────────
   Sie sitzt unter der Kopfzeile und ueber dem Nachrichtenstrom, und sie ist
   ZUSTANDSUNABHAENGIG da — anders als die Agentenleiste darunter, die mit dem
   Auftragsende verschwindet. Genau dann sucht man die Akte am haeufigsten.
   Zurueckhaltend gehalten: sie ist ein Wegweiser, keine Meldung. */
.cc-orderbar {
    flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    padding: 0.4rem 0.9rem; font-size: 0.76rem; line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.cc-orderbar__icon { opacity: .7; }
.cc-orderbar__link {
    color: var(--accent); text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .15s;
}
.cc-orderbar__link:hover { border-bottom-color: currentColor; }
/* Der Aktentitel, wenn er vom Chatnamen abweicht — sonst fuehrt der Link zu einer
   Ueberschrift, die man nicht wiedererkennt. Er darf schrumpfen, die Links nicht. */
.cc-orderbar__name {
    flex: 1 1 8rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-style: italic; opacity: .85;
}
.cc-orderbar__state {
    flex: 0 0 auto; padding: 0.05rem 0.45rem; border-radius: 999px;
    background: var(--bg-primary); border: 1px solid var(--border);
    font-size: 0.7rem;
}

.cc-composer--agent {
    display: block; padding: 0.75rem 0.9rem;
    background: color-mix(in srgb, var(--cc-agent) 7%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--cc-agent) 30%, transparent);
}
.cc-agentnote { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }
.cc-agentnote b { color: var(--cc-agent); }
.cc-agentnote a { color: var(--cc-agent); text-decoration: none; white-space: nowrap; }
.cc-agentnote a:hover { text-decoration: underline; }
/* Bewusst unscheinbar: der Notausgang soll auffindbar sein, nicht einladend. */
.cc-agentnote__override {
    margin-top: 0.5rem; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.76rem;
    color: var(--text-muted); background: transparent;
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.cc-agentnote__override:hover {
    color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

.cc-agentbar {
    flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem;
    padding: 0.45rem 0.9rem; font-size: 0.78rem; line-height: 1.45;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--cc-agent) 9%, var(--bg-secondary));
    border-top: 1px solid color-mix(in srgb, var(--cc-agent) 28%, transparent);
}
.cc-agentbar__text { flex: 1 1 18rem; min-width: 0; }
.cc-agentbar__text b { color: var(--cc-agent); }
.cc-agentbar__why { color: var(--text-muted); font-style: italic; }
.cc-agentbar__actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.cc-agentbar__btn {
    padding: 0.3rem 0.7rem; font: inherit; font-size: 0.76rem;
    color: var(--text-primary); background: var(--bg-primary);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cc-agentbar__btn:hover {
    color: var(--cc-agent);
    border-color: color-mix(in srgb, var(--cc-agent) 55%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cc-agent) 22%, transparent);
    transform: translateY(-1px);
}
.cc-agentbar__btn:active { transform: translateY(0); box-shadow: none; }
.cc-agentbar__link { color: var(--cc-agent); text-decoration: none; white-space: nowrap; }
.cc-agentbar__link:hover { text-decoration: underline; }

.cc-badge { display: inline-flex; align-items: center; padding: 0.05rem 0.4rem; border-radius: 5px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-secondary); }
.cc-badge--mql5 { background: color-mix(in srgb, #2563eb 18%, transparent); color: #2563eb; }
.cc-badge--whatsapp { background: color-mix(in srgb, #25d366 20%, transparent); color: #128c3e; }
.cc-badge--instagram { background: color-mix(in srgb, #d6249f 16%, transparent); color: #c13584; }

.cc-message--system { align-self: center; opacity: 0.75; }
.cc-message--system .chat-message__bubble { background: transparent; border: 1px dashed var(--border); font-style: italic; }
.cc-msg-status { font-size: 0.68rem; color: var(--text-muted); margin-left: 0.35rem; }
.cc-msg-status--fail { color: var(--danger, #dc2626); }
.cc-msg-status--warn { color: var(--warning, #d29922); }

/* Zustellstörung: der Streifen unter der Blase, der sagt WAS, WARUM und WAS NUN.
   Bewusst kräftiger als ein Status-Wort in der Fußzeile — eine Nachricht, die den
   Kunden nicht erreicht hat, ist keine Randnotiz. Die linke Kante trägt die Farbe,
   damit der Streifen auch im schnellen Überfliegen einer langen Zeitleiste auffällt. */
.cc-delivery {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
    margin-top: 0.4rem; padding: 0.45rem 0.6rem;
    border-radius: 8px; border: 1px solid transparent; border-left-width: 3px;
    font-size: 0.72rem; line-height: 1.35;
}
.cc-delivery--failed {
    background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
    border-left-color: var(--danger, #dc2626);
}
.cc-delivery--unsure {
    background: color-mix(in srgb, var(--warning, #d29922) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning, #d29922) 32%, transparent);
    border-left-color: var(--warning, #d29922);
}
.cc-delivery__head { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.66rem; }
.cc-delivery--failed .cc-delivery__head { color: var(--danger, #dc2626); }
.cc-delivery--unsure .cc-delivery__head { color: var(--warning, #d29922); }
.cc-delivery__reason { flex: 1 1 12rem; min-width: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.cc-delivery__hint { flex: 1 1 100%; color: var(--text-muted); font-style: italic; }
.cc-delivery__action {
    flex: 0 0 auto; padding: 0.25rem 0.7rem; border-radius: 6px; cursor: pointer;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--danger, #dc2626);
    background: transparent; color: var(--danger, #dc2626);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.cc-delivery__action:hover { background: var(--danger, #dc2626); color: #fff; }
.cc-delivery__action:active { transform: translateY(1px); }
.cc-delivery__action[disabled] { opacity: 0.55; cursor: default; transform: none; }
@media (max-width: 560px) {
    .cc-delivery__action { flex: 1 1 100%; text-align: center; }
}
.cc-msg-xlate { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed var(--border); }
.cc-msg-xlate__toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--text-muted); user-select: none; }
.cc-msg-xlate__toggle::-webkit-details-marker { display: none; }
.cc-msg-xlate__toggle::after { content: '▾'; font-size: 0.6rem; opacity: 0.7; transition: transform 0.15s; }
.cc-msg-xlate[open] .cc-msg-xlate__toggle::after { transform: rotate(180deg); }
.cc-msg-xlate__tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 4px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cc-msg-xlate__text { margin-top: 0.35rem; font-size: 0.86rem; color: var(--text-secondary); }
.cc-msg-xlate--pending { margin-top: 0.35rem; font-size: 0.68rem; font-style: italic; color: var(--text-muted); }

/* ── Markdown in der Chatblase (Kundenchat + ClientHub) ──────────────────
   md-render.css bringt die Typografie mit; hier steht nur die Einpassung.

   BREITE: .chat-message ist auf 75 % gedeckelt (siehe „Message bubble" oben) —
   fuer eine Textblase richtig, fuer eine Tabelle oder einen Code-Block viel zu
   eng. Der :has()-Selektor greift NUR, wo das Markdown wirklich reiche Bloecke
   erzeugt hat (md-render setzt .md-render--rich selbst); eine gewoehnliche
   Nachricht behaelt ihre 75 %. Denselben Weg geht Connor (connor.css).
   Der interne Projekt-Chat nutzt dieselben .chat-*-Klassen und bleibt
   unberuehrt, weil er kein data-md-raw setzt.

   Nur die OBERGRENZE, nicht die Breite: .chat-message ist ein Flex-Element mit
   align-self und misst sich am Inhalt. Eine schmale Tabelle bleibt damit
   schmal, und erst wenn der Inhalt mehr will, ist mehr da. Connor setzt an
   derselben Stelle zusaetzlich `width` — dort ist die Blase selbst der
   Markdown-Wirt, hier steckt sie eine Ebene tiefer. */
.chat-message:has(.chat-message__body.md-render--rich) {
    max-width: min(94%, 920px);
}

/* Uebersetzungsvorschau: kleinere Schrift, deshalb auch engere Bloecke.
   md-render.css rechnet durchgehend in em — die Abstaende skalieren also mit,
   nur der Aussenabstand des ersten/letzten Blocks braucht eine Ansage. */
.cc-msg-xlate__text.is-md-rendered {
    margin-top: 0.45rem;
}

.cc-msg-xlate__text .md-code-block,
.cc-msg-xlate__text .md-table-region {
    margin: 0.5em 0;
}

/* KONTRAST: --md-surface ist fuer dunkle Flaechen gebaut. Die eigene Blase ist
   akzentgetoent (.chat-message--own), die fremde liegt auf --bg-tertiary —
   auf beiden verschwaende die Vorgabe den Unterschied zwischen Blase und
   Code-Flaeche. Je Blasenart eine eigene Tiefe, damit der Block als Flaeche
   lesbar bleibt statt mit dem Hintergrund zu verschmelzen. */
.chat-message--own .chat-message__body.is-md-rendered,
.chat-message--own .cc-msg-xlate__text.is-md-rendered {
    --md-surface: rgba(5, 9, 15, 0.34);
    --md-surface-raised: rgba(5, 9, 15, 0.5);
    --md-border: color-mix(in srgb, var(--accent) 34%, transparent);
}

.chat-message--other .chat-message__body.is-md-rendered,
.chat-message--other .cc-msg-xlate__text.is-md-rendered {
    --md-surface: rgba(5, 9, 15, 0.28);
    --md-surface-raised: rgba(5, 9, 15, 0.44);
}

.cc-composer { border-top: 1px solid var(--border); }
.cc-composer__row { display: flex; align-items: flex-end; gap: 0.5rem; }
.cc-composer__channel { min-height: 38px; max-width: 9rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.82rem; align-self: flex-end; }
.cc-composer__field { flex: 1; resize: none; }
.cc-composer__files { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.cc-composer__file { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--bg-tertiary, var(--bg-secondary)); color: var(--text-secondary); }

@media (max-width: 900px) {
    .cc { grid-template-columns: 1fr; }
    .cc-rail { display: none; width: 100%; border-right: none; }
    .cc--mobile-list .cc-rail { display: flex; }
    .cc--mobile-list .cc-main { display: none; }
    .cc-head__back { display: inline-flex; }
}

/* ClientHub customer chat page (mirrors the Hank chat height handling) */
.main-content:has(.ch-chat) { padding: 0; }
.ch-chat {
    display: flex; flex-direction: column; overflow: hidden;
    height: calc(100vh - var(--topbar-height, 56px));
    height: calc(100svh - var(--topbar-height, 56px));
    /* banner strip: same global value as the Kundenchat (.cc) above */
    height: calc(var(--hub-visible-viewport-height, 100svh) - var(--topbar-height, 56px) - var(--hub-bottom-overlay-height, 0px));
}
/* In the regular layout the chat takes exactly what .main-wrap (already a flex
   column) leaves below ALL of its bars, instead of "viewport − topbar": a client
   with overdue invoices also gets the invoice reminder bar there, and the formula
   above then hung the composer 37 px below the screen (2026-09-23). The wrap is
   pinned to the visible viewport minus the bottom banner strip; the rule above
   stays as the fallback for a chat rendered outside that frame. */
.main-wrap:has(> .main-content > .ch-chat) {
    height: 100vh;
    height: 100svh;
    height: calc(var(--hub-visible-viewport-height, 100svh) - var(--hub-bottom-overlay-height, 0px));
    min-height: 0;
}
.main-wrap:has(> .main-content > .ch-chat) > .main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.main-wrap:has(> .main-content > .ch-chat) > .main-content > .ch-chat {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
.ch-chat__container { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ch-chat .chat-messages { flex: 1; min-height: 0; }

body.hub-keyboard-visible .chat-container {
    min-height: 0;
}

body.hub-keyboard-visible .push-banner,
body.hub-keyboard-visible .install-banner {
    display: none;
}

@media (max-width: 767px) {
    .chat-container {
        height: max(320px, calc(var(--hub-visible-viewport-height, 100dvh) - 150px));
    }

    body.hub-keyboard-visible .chat-container {
        height: max(120px, calc(var(--hub-visible-viewport-height, 100dvh) - 120px));
    }

    .chat-input__drop-zone {
        padding-inline: var(--s2);
    }
}

/* ClientHub dashboard "Nachrichten" widget card */
.dashboard-msg-card { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.dashboard-msg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); border-color: var(--accent); }
.dashboard-msg-card__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-subtle, color-mix(in srgb, var(--accent) 14%, transparent)); }
.dashboard-msg-card--unread .dashboard-msg-card__icon { color: #fff; background: var(--accent); }
.dashboard-msg-card__body { flex: 1; min-width: 0; }
.dashboard-msg-card__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text-primary); }
.dashboard-msg-card__preview { font-size: 0.88rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; }
.dashboard-msg-card__arrow { flex-shrink: 0; color: var(--text-muted); }
.dashboard-msg-card:hover .dashboard-msg-card__arrow { color: var(--accent); }

/* ── Login Clearance Prompt ────────────────────────────────────────
   An admin is stuck on the login screen and asked to be let in. Shown to
   every signed-in admin — including that admin's own other sessions, which
   is the phone-asks/desktop-confirms case.

   The host is appended to <body> by _initLoginApprovals(), never into the
   page content: `.app-shell .main-wrap` carries `contain: layout style` and
   would otherwise become the containing block for position:fixed, parking
   this overlay inside the scroll area instead of the viewport. */
.login-approval-host {
    position: fixed;
    right: var(--s4);
    /* --login-approval-lift is measured in JS from a visible .push-banner,
       which owns the same bottom edge one z-index below. */
    bottom: calc(var(--s4) + var(--login-approval-lift, 0px));
    z-index: 10001;
    transition: bottom var(--t) var(--ease);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    width: min(360px, calc(100vw - 2 * var(--s4)));
    pointer-events: none;
}

.login-approval {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    background: linear-gradient(160deg, rgba(28, 33, 40, 0.98), rgba(21, 27, 35, 0.98));
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: var(--r4);
    box-shadow: var(--shadow3), 0 0 0 1px rgba(168, 85, 247, 0.08),
                0 0 28px rgba(168, 85, 247, 0.14);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease),
                border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.login-approval.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.login-approval.is-deciding {
    opacity: 0.65;
}

/* Sheen along the top edge — reads as "this card is live", and doubles as
   the visual anchor for the urgent state below. */
.login-approval__bar {
    height: 3px;
    background: rgba(168, 85, 247, 0.15);
    overflow: hidden;
}

.login-approval__bar i {
    display: block;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
    animation: loginApprovalSweep 2.2s linear infinite;
}

@keyframes loginApprovalSweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}

.login-approval__body {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4);
}

.login-approval__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
}

.login-approval__icon svg {
    width: 20px;
    height: 20px;
}

.login-approval__text {
    flex: 1;
    min-width: 0;
}

.login-approval__title {
    font-size: var(--fs2);
    font-weight: 600;
    color: var(--text-bright);
}

.login-approval__who {
    font-size: var(--fs2);
    color: var(--text);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* IP and device are the only things vouching for this request — no
   confirmation code was chosen — so they stay legible, not decorative. */
.login-approval__meta {
    font-size: var(--fs1);
    color: var(--muted);
    margin-top: var(--s1);
    overflow-wrap: anywhere;
}

.login-approval__timer {
    flex-shrink: 0;
    font-size: var(--fs1);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    padding: 2px var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--r1);
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.login-approval.is-urgent {
    border-color: rgba(210, 153, 34, 0.45);
}

.login-approval.is-urgent .login-approval__timer {
    color: var(--warning);
    border-color: rgba(210, 153, 34, 0.5);
}

.login-approval__actions {
    display: flex;
    gap: var(--s2);
    padding: 0 var(--s4) var(--s4);
}

.login-approval__btn {
    flex: 1;
    padding: var(--s2) var(--s3);
    font-size: var(--fs2);
    font-weight: 600;
    font-family: var(--font);
    border-radius: var(--r2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
                color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.login-approval__btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.login-approval__btn:active:not(:disabled) {
    transform: translateY(0);
}

.login-approval__btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.login-approval__btn--deny {
    background: transparent;
    color: var(--muted);
}

.login-approval__btn--deny:hover:not(:disabled) {
    background: var(--danger-subtle);
    border-color: rgba(248, 81, 73, 0.4);
    color: var(--danger);
}

.login-approval__btn--approve {
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(168, 85, 247, 0.45);
    color: #e9d5ff;
}

.login-approval__btn--approve:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.3);
    border-color: #c084fc;
    color: #fff;
}

.login-approval__btn:focus-visible {
    outline: 2px solid #c084fc;
    outline-offset: 2px;
}

/* Phones: full width at the bottom, above the thumb rather than under it. */
@media (max-width: 640px) {
    .login-approval-host {
        left: var(--s3);
        right: var(--s3);
        bottom: calc(var(--s3) + var(--login-approval-lift, 0px));
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-approval {
        transition: opacity var(--t) var(--ease);
        transform: none;
    }

    .login-approval.is-visible {
        transform: none;
    }

    .login-approval__bar i {
        animation: none;
        width: 100%;
        background: rgba(168, 85, 247, 0.5);
    }

    .login-approval__btn:hover:not(:disabled) {
        transform: none;
    }
}