/* ── LakiApuri Brand CSS ─────────────────────────────────────────────── */
/* Extracted from app.py inline styles                                    */

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

/* ── Variables ───────────────────────────────────────────────────────── */
:root {
    --color-primary: #464E46;
    --color-bg: #F5F2F0;
    --color-text: #2C2A29;
    --color-border: #C4C6B9;
    --color-card: #E2E2DC;
    --color-muted: #888;
    --color-white: #fff;
    --font-body: 'Sofia Sans', sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    --sidebar-width: 240px;

    /* Spacing tokens */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography tokens */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 0.9375rem;
    --text-lg: 1.25rem;
    --text-xl: 1.625rem;
    --text-2xl: 2rem;

    /* Font weight tokens */
    --font-regular: 400;
    --font-medium: 500;

    /* Semantic color tokens */
    --color-success: #3D7A4A;
    --color-error: #B03A2E;
    --color-warning: #C67F17;
    --color-error-bg: #FDF0EF;
    --color-error-border: #E8C4C4;
    --color-success-bg: #EFF7F0;
    --color-warning-bg: #FFF8EC;

    /* Kanban stage color tokens */
    --stage-uusi-yhteydenotto: #5B8DBE;
    --stage-jatkoyhteydenotto: #7A6DAB;
    --stage-uusi-toimeksianto: #5B8DBE;
    --stage-odottaa-materiaaleja: #C67F17;
    --stage-materiaalin-analyysi: #7A6DAB;
    --stage-odottaa-vakuutuspaatosta: #A0855B;

    /* Lawyer stage color tokens */
    --stage-aloittamatta: #5B8DBE;
    --stage-neuvottelussa: #7A6DAB;
    --stage-kril-fine: #3D7A4A;
    --stage-karajaoikeus: #C67F17;
    --stage-valitusasteet: #A0855B;
    --stage-passiiviset: #888888;

    /* Alavaihe color tokens (per D-03, D-06) */
    --alavaihe-haastettu: #D4694A;
    --alavaihe-vastattu: #B8860B;
    --alavaihe-valmistelussa: #5A8F7B;
    --alavaihe-sovittelu-ko: #6B7FA3;
    --alavaihe-paakasittely-ko: #8B5E83;
    --alavaihe-valitus: #C25B56;
    --alavaihe-vastavalitus: #9B7E4A;
    --alavaihe-vastine: #4A8B8C;
    --alavaihe-sovittelu-va: #7B6BA3;
    --alavaihe-paakasittely-va: #A06B5E;

    /* Radius tokens */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-full: 9999px;

    /* Shadow tokens */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-panel: 0 12px 40px rgba(0,0,0,0.2);
    --shadow-dropdown: 0 4px 16px rgba(0,0,0,0.15);

    /* Seasonal theming fallbacks (Phase 13) */
    --season-primary: var(--color-primary);
    --season-accent: var(--color-primary);
    --season-bg-tint: var(--color-bg);
    --season-calendar-dot: var(--color-primary);

    /* Extended semantic color tokens (Phase 60, TOK-01) */
    --color-text-muted: #777;
    --color-success-dark: #1a7a4a;
    --color-warning-dark: #9a6c00;
    --color-success-border: #a5d6a7;
    --color-warning-border: #e8d48a;
    --color-info-bg: #e8f0fe;
    --color-link: var(--color-primary);
}

/* Alpine.js cloak — hide until initialized */
[x-cloak] { display: none !important; }

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

html, body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 500;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Login Page ──────────────────────────────────────────────────────── */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: var(--space-xl);
}

.login-box {
    width: 100%;
    max-width: 380px;
}

.login-brand {
    font-family: var(--font-body);
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-lg);
}

.login-divider {
    height: 1px;
    background: var(--color-card);
    margin-bottom: var(--space-xl);
}

.login-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
    border-radius: 4px;
    padding: var(--space-md) var(--space-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.form-input {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-md) var(--space-md);
    transition: border-color 0.15s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-bg);
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-danger {
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.btn-text {
    background: transparent;
    color: var(--color-primary);
    border: none;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.btn-lg { font-size: var(--text-base); padding: 0.75rem var(--space-lg); }
.btn-block { width: 100%; }

/* ── Layout: Sidebar + Content ───────────────────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--color-primary);
    color: var(--color-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-logo {
    text-align: center;
    padding: var(--space-lg) var(--space-md) var(--space-sm);
    overflow: visible; /* Allow monkey to escape logo area */
    position: relative;
    z-index: 1;
}

.sidebar-logo img {
    width: 70px;
    opacity: 0.9;
}

/* -- Monkey animation (Phase 13 ANIM-01) -------------------------------- */

.monkey-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monkey-container {
    width: 48px;
    height: 48px;
    position: relative;
    overflow: visible; /* Allow escape animations outside bounds */
}

.monkey-container svg {
    width: 100%;
    height: 100%;
}

.monkey-video {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
    object-fit: cover;
    border-radius: var(--radius-full);
    display: block;
    background: var(--color-primary);
}

/* Speech bubble (D-10) */
.monkey-speech {
    position: absolute;
    top: -8px;
    right: -12px;
    transform: translateX(100%);
    max-width: 160px;
    background: var(--season-accent, var(--color-card));
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-sm) var(--space-md);
    border-radius: 8px;
    white-space: nowrap;
    z-index: 101;
    pointer-events: none;
}

/* Speech bubble tail pointing left toward monkey */
.monkey-speech::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--season-accent, var(--color-card)) transparent transparent;
}

/* Speech bubble transitions */
.speech-enter { transition: opacity 200ms ease-out; }
.speech-enter-start { opacity: 0; }
.speech-enter-end { opacity: 1; }
.speech-leave { transition: opacity 300ms ease-in; }
.speech-leave-start { opacity: 1; }
.speech-leave-end { opacity: 0; }

/* Accessibility: hide monkey for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .monkey-container {
        display: none;
    }
    .monkey-speech {
        display: none !important;
    }
}

.sidebar-user {
    text-align: center;
    padding: var(--space-xs) var(--space-md) var(--space-md);
}

.sidebar-user-name {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-bg);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.sidebar-user-role {
    font-size: var(--text-sm);
    color: var(--color-border);
}

.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: var(--space-xs) var(--space-md);
}

.sidebar-section {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-border);
    padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
}

.nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-md);
    border-radius: 4px;
    color: var(--color-bg);
    font-size: var(--text-sm);
    font-weight: 400;
    transition: background 0.12s;
    text-decoration: none;
}

/* Nav icons (Phase 11) */
.nav-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: var(--space-xs);
    opacity: 0.7;
    flex-shrink: 0;
}
.nav-link.active .nav-icon {
    opacity: 1;
}

.nav-link:hover {
    background: rgba(255,255,255,0.1);
    text-decoration: none;
}

.nav-link.active {
    background: rgba(255,255,255,0.15);
    font-weight: 500;
}

.sidebar-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: 5px;
    text-decoration: none;
}
.sidebar-cta:hover { text-decoration: none; opacity: 0.9; }

.sidebar-footer {
    margin-top: auto;
    padding: var(--space-md);
}

.btn-logout {
    display: block;
    width: 100%;
    padding: var(--space-sm);
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: var(--color-border);
    font-size: var(--text-sm);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-logout:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-bg);
    text-decoration: none;
}

/* ── Main Content ────────────────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: var(--space-xl) var(--space-xl);
    min-height: 100vh;
}

.main-content-chat {
    padding: var(--space-md) var(--space-lg) 0;
}

.page-header {
    margin-bottom: var(--space-xl);
}

.page-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-primary);
    font-weight: 500;
}

/* ── Placeholder page ────────────────────────────────────────────────── */
.placeholder-card {
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: 6px;
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-base);
}

/* ── Chat (Claude.ai style — centered, spacious) ────────────────────── */
.chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: calc(100vh - 4rem);
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Empty state — vertically centered, Claude.ai style */
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: var(--space-xl);
}

.chat-empty-greeting {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.chat-empty-sub {
    font-size: var(--text-base);
    color: var(--color-muted);
    margin-bottom: var(--space-xl);
}

.chat-empty-input {
    width: 100%;
    max-width: 580px;
}

.chat-form-hero {
    border-width: 2px;
}

.chat-suggestions {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.chat-chip {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.chat-chip:hover {
    background: var(--color-white);
    border-color: var(--color-primary);
}

.chat-upload {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.upload-chip {
    font-size: var(--text-xs);
    background: var(--color-card);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 3px;
}

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Each message — full width, centered content */
.chat-msg {
    width: 100%;
}

.chat-msg-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-msg-user .chat-msg-content {
    background: var(--color-primary);
    color: var(--color-bg);
    border-radius: 20px 20px 4px 20px;
    padding: var(--space-md) 1.15rem;
    max-width: 80%;
    font-size: var(--text-base);
    line-height: 1.55;
}

.chat-msg-assistant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chat-msg-assistant .chat-msg-content {
    background: transparent;
    padding: var(--space-xs) 0;
    max-width: 100%;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text);
}

.chat-msg-label {
    font-size: var(--text-xs);
    color: var(--color-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

.chat-msg-user .chat-msg-label {
    text-align: right;
}

/* Markdown inside chat */
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}
.markdown-body h2 { font-size: var(--text-lg); }
.markdown-body h3 { font-size: var(--text-base); }
.markdown-body p { margin-bottom: var(--space-md); }
.markdown-body ul, .markdown-body ol { padding-left: 1.3rem; margin-bottom: var(--space-md); }
.markdown-body li { margin-bottom: var(--space-xs); }
.markdown-body strong { color: var(--color-primary); }
.markdown-body code {
    background: var(--color-card);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.87em;
}
.markdown-body blockquote {
    border-left: 3px solid var(--color-border);
    padding-left: var(--space-md);
    color: var(--color-text-muted);
    margin: var(--space-md) 0;
}

/* Typing indicator */
.chat-typing {
    display: inline-flex;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
}
.chat-typing span {
    width: 7px;
    height: 7px;
    background: var(--color-border);
    border-radius: 50%;
    animation: typing 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* Context card */
.context-card {
    width: 100%;
    margin-top: var(--space-sm);
}

.context-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: var(--color-card);
    border: 1px solid var(--color-card);
    border-radius: 8px;
    padding: var(--space-md) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-muted);
    cursor: pointer;
}
.context-toggle:hover { border-color: var(--color-border); }

.context-details {
    background: var(--color-card);
    border: 1px solid var(--color-card);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: var(--space-md) var(--space-md);
    font-size: var(--text-sm);
}

.doc-download-link {
    display: inline-block;
    font-size: var(--text-sm);
    padding: var(--space-xs) 0;
}

/* Feedback */
.chat-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.fb-btn {
    background: none;
    border: 1px solid var(--color-card);
    border-radius: 6px;
    padding: 3px var(--space-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.fb-btn:hover { border-color: var(--color-primary); background: var(--color-card); }

.fb-form {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* Input bar — sticky bottom, big centered box */
.chat-input-bar {
    padding: var(--space-md) 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.chat-form {
    display: flex;
    gap: 0;
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-xs);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-form:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(70, 78, 70, 0.08);
}

.chat-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: var(--space-md) var(--space-md) !important;
    font-family: inherit;
    font-size: var(--text-base) !important;
    line-height: 1.4;
    outline: none;
}
.chat-input:focus {
    box-shadow: none !important;
    border: none !important;
}
.chat-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(70, 78, 70, 0.3);
}

.chat-send {
    white-space: nowrap;
    width: auto;
    min-width: 44px;
    height: 44px;
    border-radius: 12px !important;
    padding: 0 var(--space-md) !important;
    margin: 0;
    align-self: center;
}
.chat-send:disabled {
    opacity: 0.4;
}

.chat-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-clear {
    background: none;
    border: none;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    cursor: pointer;
    padding: var(--space-xs) 0;
}
.btn-clear:hover { color: var(--color-text); }

/* ── CMS Pipeline ────────────────────────────────────────────────────── */
.pipeline-container { max-width: 1200px; }

.pipeline-group { margin-bottom: var(--space-xl); }

.pipeline-group-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-card);
}

.pipeline-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

.pipeline-col {
    background: var(--color-card);
    border-radius: 6px;
    padding: var(--space-sm);
    min-height: 200px;
}

.pipeline-col-header {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid var(--color-card);
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
}

.pipeline-col-count {
    background: var(--color-card);
    border-radius: 10px;
    padding: 0 var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}

.pipeline-card {
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: 4px;
    padding: var(--space-md) var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pipeline-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.pipeline-card-client {
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.pipeline-card-matter {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}

.pipeline-card-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-muted);
    align-items: center;
}

.pipeline-card-tag {
    background: var(--color-card);
    padding: 1px 5px;
    border-radius: 2px;
}

.pipeline-card-days { margin-left: auto; }

.pipeline-empty {
    font-size: var(--text-sm);
    color: var(--color-border);
    text-align: center;
    padding: var(--space-lg) 0;
}

/* ── CMS Badges ──────────────────────────────────────────────────────── */
/* deprecated -- use .badge instead */
.cms-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}
.badge-intake { background: var(--color-card); color: var(--color-text-muted); }
.badge-arviointi { background: var(--color-card); color: var(--color-success-dark); }
.badge-aktiivinen { background: var(--color-primary); color: var(--color-bg); }
.badge-odottaa { background: var(--color-card); color: var(--color-text); }
.badge-ratkaistu { background: var(--color-card); color: var(--color-link); }
.badge-suljettu { background: var(--color-card); color: var(--color-muted); }

/* ── Badge Component ────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge-muted   { background: var(--color-card);       color: var(--color-muted); }

/* ── Close Button (shared across modals and panels) ──────────────────── */
.close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    position: absolute;
    top: var(--space-md, 1rem);
    right: var(--space-md, 1rem);
    z-index: 1;
}
.close-btn:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}
.close-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    left: var(--sidebar-width);
    background: rgba(0,0,0,0.4);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-2xl) var(--space-xl);
    overflow-y: hidden;
}
body.modal-open { overflow: hidden; }

.modal-box {
    background: var(--color-bg);
    border-radius: 10px;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

/* deprecated aliases — use .close-btn */
.modal-close, .panel-close { }

.modal-detail { padding: var(--space-lg); }

.modal-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); }
.no-underline { text-decoration: none; }
.modal-tab {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all .15s;
}
.modal-tab:hover { color: var(--color-text); }
.modal-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Sub-tab bar (Phase 19 - lawyer case detail) */
.sub-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.sub-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.sub-tab:hover {
    color: var(--color-text);
}
.sub-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Confirmation dialog */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
}
.confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.confirm-box {
    position: relative;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-panel);
}
.confirm-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}
.confirm-message {
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* Stage dropdown */
.stage-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    min-width: 200px;
    padding: var(--space-xs) 0;
    margin-top: var(--space-xs);
}
.stage-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.1s;
}
.stage-dropdown-item:hover {
    background: var(--color-bg);
}

/* Alavaihe badge */
.alavaihe-badge {
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    white-space: nowrap;
}

/* Summary states */
.summary-stale {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.summary-version {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-primary);
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    min-width: 0;
}
.modal-body > * {
    min-width: 0;
    overflow: hidden;
}

.detail-section {
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: 6px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.detail-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.detail-row {
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}

.detail-label {
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
}

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline { margin-top: var(--space-md); }

.timeline-entry {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
    position: relative;
}

.timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    position: absolute;
    left: -5px;
    top: 4px;
}

.timeline-icon {
    position: absolute;
    left: -20px;
    top: 0;
    font-size: var(--text-base);
}

.timeline-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
    align-items: center;
}

.timeline-type {
    background: var(--color-card);
    padding: 1px 5px;
    border-radius: 2px;
}

.timeline-title {
    font-weight: 500;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
}

.timeline-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.note-form-wrapper { margin-bottom: var(--space-md); }

/* ── Client Form ─────────────────────────────────────────────────────── */
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
}

.form-section {
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: 6px;
    padding: var(--space-md);
}

.form-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

select.form-input {
    appearance: auto;
}

textarea.form-input {
    font-family: var(--font-body);
    resize: vertical;
}

/* ── Time Tracking ───────────────────────────────────────────────────── */
.time-summary {
    text-align: center;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}
.time-summary-val {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-primary);
}
.time-summary-label {
    font-size: var(--text-xs);
    color: var(--color-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.time-form-grid {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.btn-preset {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-preset:hover { background: var(--color-card); }

.time-entry {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
}
.time-entry-meta {
    font-size: var(--text-xs);
    color: var(--color-muted);
}
.time-entry-desc {
    font-size: var(--text-sm);
    margin: var(--space-xs) 0;
}
.time-entry-case {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── Esteellisyydet ──────────────────────────────────────────────────── */
.est-form-grid {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Deprecated — use .data-table (Phase 58) */
.est-table { width: 100%; border-collapse: collapse; }
.est-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); padding: var(--space-sm) var(--space-md); border-bottom: 2px solid var(--color-border); text-align: left; }
.est-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); }
.est-table tr:hover td { background: rgba(0, 0, 0, 0.02); }

.btn-delete {
    background: none;
    border: 1px solid var(--color-error-border);
    border-radius: 3px;
    color: var(--color-error);
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    font-family: var(--font-body);
}
.btn-delete:hover { background: var(--color-error-bg); }

/* ── Documents in modal ──────────────────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.doc-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    padding: var(--space-xs) 0;
    flex-wrap: wrap;
    min-width: 0;
}
.doc-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-item-type {
    font-size: var(--text-xs);
    background: var(--color-card);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--color-muted);
}
.doc-item-date {
    font-size: var(--text-xs);
    color: var(--color-muted);
}
.doc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    font-size: var(--text-xs);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg);
    color: var(--color-muted);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}
.doc-action-btn:hover {
    background: var(--color-card);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.doc-source-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: 2px;
    font-size: var(--text-xs); font-weight: 700; flex-shrink: 0;
    background: var(--color-card); color: var(--color-muted);
}

/* ── Dropzone ───────────────────────────────────────────────────────── */
.dropzone {
    border: 2px dashed var(--color-border);
    border-radius: 6px;
    padding: var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    background: var(--color-bg);
}
.dropzone:hover { border-color: var(--color-primary); background: rgba(26,58,92,.03); }
.dropzone-active { border-color: var(--color-primary); background: rgba(26,58,92,.06); }
.dropzone-icon {
    font-size: var(--text-lg); font-weight: 300; color: var(--color-muted);
    line-height: 1; margin-bottom: var(--space-sm);
}
.dropzone-text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Kirjeenvaihto timeline ──────────────────────────────────────────── */
.kirjeenvaihto-timeline { display: flex; flex-direction: column; gap: 0; }
.kv-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.kv-item:last-child { border-bottom: none; }
.kv-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.kv-date { font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); white-space: nowrap; }
.kv-type {
    font-size: var(--text-xs); padding: 1px 5px; border-radius: 2px;
    background: var(--color-card); color: var(--color-muted);
}
.kv-parties { font-size: var(--text-xs); color: var(--color-text-muted); }
.kv-kategoria {
    font-size: var(--text-xs); padding: 1px 5px; border-radius: 2px;
    font-weight: 600; white-space: nowrap;
}
.kv-kat-asiakashankinta { background: var(--color-card); color: var(--color-success-dark); }
.kv-kat-asiakasvastapuoli { background: var(--color-card); color: var(--color-text); }
.kv-kat-lakimies { background: var(--color-card); color: var(--color-link); }
.kv-kat-muu { background: var(--color-card); color: var(--color-text-muted); }
.kv-summary { line-height: 1.5; color: var(--color-text); }
.kv-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-xs); font-style: italic; }
.kv-source { margin-top: var(--space-xs); }

/* -- Utility Classes -- */

/* Spacing utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.pb-md { padding-bottom: var(--space-md); }

/* Typography utilities */
.text-xs { font-size: var(--text-xs); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-muted { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.font-medium { font-weight: var(--font-medium); }

/* Layout utilities */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.col-span-2 { grid-column: 1 / -1; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.w-150 { width: 150px; }
.min-w-250 { min-width: 250px; }
.input-compact { padding: 0.2rem 0.4rem; }
.pb-lg-border { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.editor-empty-state { max-width: 600px; margin: 3rem auto; text-align: center; color: #666; }
.kirjeenvaihto-iframe { width: 100%; border: 1px solid var(--color-border); border-radius: 6px; min-height: 200px; margin-top: var(--space-sm); background: #fff; }
.nowrap { white-space: nowrap; }
/* Alias — remove when templates migrated in Phase 57 */
.btn-ghost { background: transparent; color: var(--color-primary); border: none; padding-left: var(--space-sm); padding-right: var(--space-sm); }
.btn-sm { font-size: var(--text-xs); padding: var(--space-xs) 0.75rem; }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.kanban-email-preview { white-space: pre-wrap; max-height: 150px; overflow-y: auto; }
.btn-compact { padding: var(--space-xs) var(--space-sm); }
/* Alias — remove when templates migrated in Phase 57 */
.btn-cancel { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-outline-primary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.cursor-pointer { cursor: pointer; }
.clickable { cursor: pointer; }
/* .clickable elements need tabindex="0" and @keydown.enter in templates — Phase 57/59 */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-shrink-0 { flex-shrink: 0; }
.mt-xs { margin-top: var(--space-xs); }
.text-sm { font-size: var(--text-sm); }
.text-center { text-align: center; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.text-label { font-size: var(--text-xs); text-transform: uppercase; color: var(--color-muted); font-weight: 600; }
.form-input-compact { font-size: var(--text-sm); padding: var(--space-sm) var(--space-sm); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.items-start { align-items: flex-start; }
.text-success-dark { color: var(--color-success-dark); }
.text-error-dark { color: var(--color-error); }
.alert-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 6px; padding: var(--space-md); }
.alert-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: 6px; padding: var(--space-md) var(--space-md); }
.alert-error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error-border); border-radius: 4px; padding: var(--space-md) var(--space-md); }
.inline-block { display: inline-block; }

/* -- Text alignment utilities (Phase 60, Plan 03 prep) -- */
.text-right { text-align: right; }
.text-left { text-align: left; }

/* -- Display utilities -- */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }

/* -- Whitespace utilities -- */
.whitespace-pre-wrap { white-space: pre-wrap; }
.overflow-hidden { overflow: hidden; }

/* -- Text utilities -- */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-success { color: var(--color-success); }
.text-primary { color: var(--color-primary); }

/* -- Margin/padding micro utilities -- */
.mb-xs { margin-bottom: var(--space-xs); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-xs { margin-top: var(--space-xs); }
.align-start { align-items: flex-start; }

/* -- Font size utilities -- */
.text-lg { font-size: var(--text-lg); }

/* -- Flex direction utilities -- */
.flex-column { flex-direction: column; }

/* -- Padding-top utilities -- */
.pt-lg { padding-top: var(--space-lg); }
.pt-md { padding-top: var(--space-md); }

/* -- Section heading size variants -- */
.section-title-xl { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--space-sm); }
.section-title-2xl { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-primary); margin-bottom: var(--space-sm); }

/* -- Grid column utilities -- */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; }

/* -- Detail separator -- */
.detail-separator { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }

/* -- Background utilities -- */
.bg-success { background: var(--color-success-bg); }
.bg-error { background: var(--color-error-bg); }
.bg-warning { background: var(--color-warning-bg); }
.bg-card { background: var(--color-card); }

/* -- Flex grow utilities -- */
.flex-1 { flex: 1; }

/* -- Border radius utilities -- */
.rounded-md { border-radius: var(--radius-md); }

/* -- Overflow utilities -- */
.overflow-x-auto { overflow-x: auto; }

/* -- Code block styling -- */
.code-block { border-radius: var(--radius-md); overflow-x: auto; }

/* -- Form input compact padding -- */
.form-input-xs { padding: 0.3rem 0.5rem; }

/* -- Notice error variant -- */
.notice-error { background: #fef2f2; border: 1px solid var(--color-error); color: var(--color-error); }

/* -- Separator border -- */
.border-bottom-card { border-bottom: 1px solid var(--color-card); }

/* -- Cursor utilities -- */
.cursor-pointer { cursor: pointer; }

/* -- Position utilities -- */
.position-relative { position: relative; }

/* -- Margin utilities -- */
.m-0 { margin: 0; }
.mt-xs { margin-top: var(--space-xs); }
.ml-auto { margin-left: auto; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.mr-xs { margin-right: var(--space-xs); }
.pb-xs { padding-bottom: var(--space-xs); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }

/* -- Font weight utilities -- */
.fw-medium { font-weight: var(--font-medium); }
.fw-semibold { font-weight: var(--font-semibold, 600); }

/* -- Display inline utilities -- */
.d-inline-flex { display: inline-flex; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* -- Flex alignment utilities -- */
.align-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }

/* -- Width utilities -- */
.w-full { width: 100%; }
.max-w-800 { max-width: 800px; }
.max-w-900 { max-width: 900px; }
.max-w-640 { max-width: 640px; }
.max-w-1200 { max-width: 1200px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* -- Laskutus component classes -- */
.stat-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-muted);
}
.stat-value {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-semibold, 600);
    margin: var(--space-xs) 0 0 0;
}
.stat-row {
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-md);
    background: var(--color-card);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.notice-box {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.notice-warning {
    background: var(--color-warning-bg, #fef3cd);
    color: var(--color-warning-text, #856404);
}
.link-primary {
    color: var(--color-primary);
    text-decoration: none;
}
.link-primary:hover {
    text-decoration: underline;
}
.btn-link-delete {
    background: none;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-xs) var(--space-sm);
}
.btn-link-delete:hover {
    text-decoration: underline;
}
.btn-link-primary {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-xs) var(--space-sm);
    text-decoration: none;
}
.btn-link-primary:hover {
    text-decoration: underline;
}
.table-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.dropdown-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 250px;
    overflow-y: auto;
}
.dropdown-item {
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}
.dropdown-item:hover {
    background: var(--color-bg);
}
.back-link {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    display: inline-block;
    margin-bottom: var(--space-md);
}

/* -- Component classes for repeated inline patterns -- */
.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}
.empty-state {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--text-base);
}
.table-input {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.table-cell-right {
    text-align: right;
}
.form-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

/* ── Gap closure utilities (Plan 06) ─────────────────────────────── */
.pos-relative { position: relative; }
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin-top: var(--space-xs); }
/* -- Page Tab Bar -------------------------------------------------------- */
.page-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); flex-wrap: wrap; }
.page-tab {
    padding: var(--space-md) var(--space-lg); font-size: var(--text-base); font-weight: 500;
    color: var(--color-text-muted); background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; font-family: var(--font-body); transition: all .15s;
}
.page-tab:hover { color: var(--color-text); }
.page-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.page-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.tab-panel { padding-top: var(--space-lg); }

/* Deprecation aliases -- remove after full migration */
.tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); }
.section-header { font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); margin-bottom: var(--space-sm); }
.badge-sm { font-size: var(--text-xs); }
.d-inline { display: inline; }
.ml-auto { margin-left: auto; }
.mr-xs { margin-right: var(--space-xs); }
.mr-auto { margin-right: auto; }
.max-w-form { max-width: 600px; }
.mb-0 { margin-bottom: 0; }
.lh-loose { line-height: 1.8; }
.info-box { background: var(--color-surface-alt, var(--color-card)); border-radius: 6px; padding: var(--space-md) var(--space-md); line-height: 1.5; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.items-end { align-items: flex-end; }
.code-token { font-family: monospace; white-space: nowrap; font-weight: 500; }
.signature-preview { padding: var(--space-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sig-lang-btn { min-width: 40px; height: 28px; font-size: var(--text-xs); padding: 0; }
.font-semibold { font-weight: 600; }
.btn-outline-muted { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.text-success { color: var(--color-success-dark); }
.email-banner { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 6px; padding: var(--space-md) var(--space-md); font-size: var(--text-sm); }
.email-banner-title { font-weight: 600; color: var(--color-warning-dark); }
.form-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    max-width: 640px;
}
.form-card-wide {
    max-width: 960px;
}
.form-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* Required field marker — per D-03 */
.form-label.required::after {
    content: " *";
    color: var(--color-error, var(--color-error));
    font-weight: 600;
}

/* Modal footer — per D-01 */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-md);
}

/* Form error message — per A11Y-06 */
.form-error-msg {
    color: var(--color-error, var(--color-error));
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
    display: block;
}

/* ── Search results ────────────────────────────────────────────────── */
.search-results {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--color-card); }
.search-result-icon { font-size: var(--text-lg); flex-shrink: 0; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-name { font-weight: 600; font-size: var(--text-sm); }
.search-result-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-xs); }
.search-result-actions { flex-shrink: 0; }

/* -- Interactive States -- */

.btn-primary:hover { background: var(--color-text); }
.btn-secondary:hover { background: var(--color-card); }
.btn-danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }
.btn-text:hover { text-decoration: underline; }
.btn:active { filter: brightness(0.85); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-bg);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-input:hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.form-input:focus-visible { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: -1px; }
.form-input:disabled { opacity: 0.5; background: var(--color-card); cursor: not-allowed; }
.form-input--error { border-color: var(--color-error); background: var(--color-error-bg); }

/* ── Focus-Visible Accessibility ────────────────────────────────────── */
.nav-link:focus-visible,
.modal-tab:focus-visible,
.sub-tab:focus-visible,
.inbox-tab:focus-visible,
.kanban-card:focus-visible,
.pipeline-card:focus-visible,
.stage-dropdown-item:focus-visible,
.doc-action-btn:focus-visible,
.search-result-item:focus-visible,
.panel-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Micro-Interactions ─────────────────────────────────────────────── */
::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
    font-style: normal;
}

::selection {
    background: var(--color-primary);
    color: var(--color-bg);
}

/* Scoped scrollbar styling — NOT global */
.kanban-col,
.panel-body,
.modal-body,
.search-results {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* Webkit browsers */
.kanban-col::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
    width: 6px;
}
.kanban-col::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.kanban-col::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track {
    background: transparent;
}

/* -- Alert/Notification Classes -- */
.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
}
.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
}
.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
}

/* -- Status Indicator -- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}
.status-dot--active { background: var(--color-success); }
.status-dot--inactive { background: var(--color-error); }
.status-dot--warning { background: var(--color-warning); }

/* ── Data Table ─────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid var(--color-border);
    text-align: left;
}
.data-table td {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
}
.data-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
.data-table tr:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Financial table modifier — right-align numeric columns (3+) */
.data-table-financial td:nth-child(n+3) { text-align: right; }
.data-table-financial th:nth-child(n+3) { text-align: right; }
.data-table-financial tfoot td {
    font-weight: var(--font-medium);
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}

/* ── Pagination ────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    font-size: var(--text-sm);
}
.pagination button {
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: var(--font-body);
}
.pagination button:hover:not(:disabled) { background: var(--color-card); }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .pagination-info { color: var(--color-muted); }

/* -- Admin Components -- */
.admin-container { max-width: 900px; }
/* Deprecated — use .data-table instead (Phase 58 migration) */
.admin-table {
    width: 100%;
    font-size: var(--text-xs);
    border-collapse: collapse;
}
.admin-table th {
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.admin-table td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.token-badge-found {
    background: var(--color-success-bg);
    color: var(--color-success);
    font-family: monospace;
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
}
.token-badge-missing {
    background: var(--color-error-bg);
    color: var(--color-error);
    font-family: monospace;
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* -- Slide-Over Panel -- */
.panel-overlay {
    position: fixed;
    inset: 0;
    left: var(--sidebar-width);
    background: rgba(0,0,0,0.4);
    z-index: 200;
}
.panel-slideover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-width);
    background: var(--color-bg);
    box-shadow: var(--shadow-panel);
    overflow-y: auto;
    z-index: 201;
    display: flex;
    flex-direction: column;
}
.panel-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
/* .panel-close deprecated — see .close-btn above */
.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
/* Slide-over transition classes */
.panel-enter { transition: transform 250ms ease-out; }
.panel-enter-start { transform: translateX(100%); }
.panel-enter-end { transform: translateX(0); }
.panel-leave { transition: transform 200ms ease-in; }
.panel-leave-start { transform: translateX(0); }
.panel-leave-end { transform: translateX(100%); }

/* -- Inbox Styles (migrated from inbox.html) -- */

.contact-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 3vh var(--space-xl); overflow-y: auto; backdrop-filter: blur(2px);
}
.contact-modal {
    background: var(--color-bg); border-radius: 10px; width: 100%; max-width: 480px;
    position: relative; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    transition: max-width 0.3s ease; margin-top: 2vh;
}
.contact-modal--wide { max-width: 960px; }
.contact-modal-header {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg); border-bottom: 1px solid var(--color-border);
}
.contact-modal-step {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--color-primary); color: var(--color-white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--text-base); flex-shrink: 0;
}
.contact-modal-title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.contact-modal-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-xs) 0 0; }
.contact-modal-body { padding: var(--space-lg) var(--space-lg) var(--space-lg); }
.cm-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.cm-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); }
.cm-form-section { min-width: 0; }
.cm-section-title {
    font-size: var(--text-sm); font-weight: 600; color: var(--color-primary);
    margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-primary);
}
.cm-form-actions {
    margin-top: var(--space-lg); padding-top: var(--space-md);
    border-top: 1px solid var(--color-border); display: flex; gap: var(--space-md);
}
/* deprecated -- use .page-tab instead */
.inbox-tab {
    padding: var(--space-md) var(--space-lg); font-size: var(--text-base); font-weight: 500;
    color: var(--color-text-muted); background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; font-family: var(--font-body); transition: all .15s;
}
.inbox-tab:hover { color: var(--color-text); }
/* deprecated -- use .page-tab--active instead */
.inbox-tab-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
@media (max-width: 900px) { .cm-form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
    .contact-overlay { padding: var(--space-md); }
    .contact-modal, .contact-modal--wide { max-width: 100%; }
    .cm-form-grid { grid-template-columns: 1fr; }
    .cm-check-grid { grid-template-columns: 1fr; }
}

/* -- Kanban Board (migrated from kanban.html) -- */
.kanban-board {
    display: grid;
    gap: var(--space-md);
    min-height: 400px;
}
.kanban-col {
    background: var(--color-card);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.kanban-col-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-md) var(--space-md);
    border-bottom: 2px solid var(--color-primary);
    min-height: 52px;
}
.kanban-col-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-primary);
}
.kanban-col-count {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 999px;
    min-width: 1.4rem;
    text-align: center;
}
.kanban-col-body {
    padding: var(--space-sm);
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.kanban-card {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: box-shadow .15s;
    cursor: pointer;
}
.kanban-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary);
}
.kanban-card-email {
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-bg);
}

/* Email content sandbox — CSS containment for inline email HTML (D-11) */
.email-content-sandbox {
    contain: layout style;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.5;
    background: var(--color-bg-muted, #fafafa);
    border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
}
.email-content-sandbox * {
    max-width: 100% !important;
    box-sizing: border-box;
}
.email-content-sandbox img {
    max-width: 100%;
    height: auto;
}
.email-content-sandbox pre.email-plain-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    margin: 0;
}

.kanban-card-conflict {
    background: var(--color-error);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 2px;
    display: inline-block;
    margin-bottom: var(--space-sm);
    letter-spacing: .05em;
}
.kanban-card-name {
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
}
.kanban-card-matter {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}
.kanban-card-meta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}
.kanban-tag {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 3px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.kanban-person {
    font-size: var(--text-xs);
    color: var(--color-primary);
}
.kanban-card-amount {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}
.kanban-card-activity {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.kanban-card-contact {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}
.kanban-card-contact a {
    color: var(--color-primary);
    text-decoration: none;
}
.kanban-card-contact a:hover {
    text-decoration: underline;
}
.kanban-card-actions {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.kanban-action-btn {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 3px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--color-text-muted);
}
.kanban-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.kanban-action-convert {
    color: var(--color-success-dark);
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}
.kanban-action-convert:hover {
    background: var(--color-success-dark);
    color: var(--color-white);
    border-color: var(--color-success-dark);
}
.kanban-memo-form {
    margin-top: var(--space-sm);
}
.kanban-empty {
    text-align: center;
    padding: var(--space-xl) var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* -- Kanban Card Menu (Three-Dot) -- */
.kanban-card-menu {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 5;
}
.kanban-menu-trigger {
    min-width: 24px;
    min-height: 24px;
}
.kanban-menu-item {
    white-space: nowrap;
}
.kanban-menu-trigger {
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    color: var(--color-muted);
    padding: var(--space-xs);
    line-height: 1;
    border-radius: var(--radius-sm);
}
.kanban-menu-trigger:hover {
    background: var(--color-card);
    color: var(--color-text);
}
.kanban-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    min-width: 160px;
    z-index: 10;
    padding: var(--space-xs) 0;
}
.kanban-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    color: var(--color-text);
    cursor: pointer;
}
.kanban-menu-item:hover {
    background: var(--color-card);
}

/* -- Handler Badge -- */
.handler-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-white, #fff);
    text-transform: uppercase;
    flex-shrink: 0;
}

/* -- Stage Color Strip -- */
.kanban-card[data-stage="uusi-yhteydenotto"] { border-left: 4px solid var(--stage-uusi-yhteydenotto); }
.kanban-card[data-stage="jatkoyhteydenotto"] { border-left: 4px solid var(--stage-jatkoyhteydenotto); }
.kanban-card[data-stage="uusi-toimeksianto"] { border-left: 4px solid var(--stage-uusi-toimeksianto); }
.kanban-card[data-stage="odottaa-materiaaleja"] { border-left: 4px solid var(--stage-odottaa-materiaaleja); }
.kanban-card[data-stage="materiaalin-analyysi"] { border-left: 4px solid var(--stage-materiaalin-analyysi); }
.kanban-card[data-stage="odottaa-vakuutuspaatosta"] { border-left: 4px solid var(--stage-odottaa-vakuutuspaatosta); }
.kanban-card[data-stage="aloittamatta"] { border-left: 4px solid var(--stage-aloittamatta); }
.kanban-card[data-stage="neuvottelussa"] { border-left: 4px solid var(--stage-neuvottelussa); }
.kanban-card[data-stage="kril-fine"] { border-left: 4px solid var(--stage-kril-fine); }
.kanban-card[data-stage="karajaoikeus"] { border-left: 4px solid var(--stage-karajaoikeus); }
.kanban-card[data-stage="valitusasteet"] { border-left: 4px solid var(--stage-valitusasteet); }
.kanban-card[data-stage="passiiviset"] { border-left: 4px solid var(--stage-passiiviset); }

/* Alavaihe card stripe -- overrides stage border-left when alavaihe is set (per D-02) */
.kanban-card[data-alavaihe="alavaihe-haastettu"] { border-left: 4px solid var(--alavaihe-haastettu); }
.kanban-card[data-alavaihe="alavaihe-vastattu"] { border-left: 4px solid var(--alavaihe-vastattu); }
.kanban-card[data-alavaihe="alavaihe-valmistelussa"] { border-left: 4px solid var(--alavaihe-valmistelussa); }
.kanban-card[data-alavaihe="alavaihe-sovittelu-ko"] { border-left: 4px solid var(--alavaihe-sovittelu-ko); }
.kanban-card[data-alavaihe="alavaihe-paakasittely-ko"] { border-left: 4px solid var(--alavaihe-paakasittely-ko); }
.kanban-card[data-alavaihe="alavaihe-valitus"] { border-left: 4px solid var(--alavaihe-valitus); }
.kanban-card[data-alavaihe="alavaihe-vastavalitus"] { border-left: 4px solid var(--alavaihe-vastavalitus); }
.kanban-card[data-alavaihe="alavaihe-vastine"] { border-left: 4px solid var(--alavaihe-vastine); }
.kanban-card[data-alavaihe="alavaihe-sovittelu-va"] { border-left: 4px solid var(--alavaihe-sovittelu-va); }
.kanban-card[data-alavaihe="alavaihe-paakasittely-va"] { border-left: 4px solid var(--alavaihe-paakasittely-va); }

/* Alavaihe badge -- small colored pill in card top-right (per D-02) */
.kanban-alavaihe-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 1px var(--space-sm);
    border-radius: 8px;
    color: var(--color-white);
    line-height: 1.4;
    white-space: nowrap;
}

/* Collapsible kanban columns */
.kanban-col {
    transition: min-width 0.2s ease, max-width 0.2s ease;
}
.kanban-col-collapsed {
    min-width: 40px !important;
    max-width: 40px !important;
    transition: min-width 0.2s ease, max-width 0.2s ease;
}
.kanban-col-collapsed .kanban-col-header {
    padding: var(--space-sm) var(--space-xs);
}
.kanban-col-collapsed .kanban-col-header .kanban-col-title,
.kanban-col-collapsed .kanban-col-header .kanban-col-count {
    display: none;
}

.kanban-col-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xs);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.kanban-col-vertical .kanban-col-count {
    writing-mode: horizontal-tb;
    transform: rotate(180deg);
}

/* Chevron indicators */
.kanban-col-chevron {
    display: inline-block;
    font-size: var(--text-xs);
    transition: transform 0.2s;
    margin-left: auto;
}
.kanban-col-chevron::after {
    content: '\25BC';
}
.chevron-right::after {
    content: '\25B6';
}
.chevron-down::after {
    content: '\25BC';
}

/* -- Mobile Navigation -- */
.hamburger-btn {
    display: none;
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 250;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: var(--space-sm);
}
.hamburger-icon {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-white);
    position: relative;
    margin: 0 auto;
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-white);
    position: absolute;
    left: 0;
}
.hamburger-icon::before { top: -6px; }
.hamburger-icon::after { top: 6px; }

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99;
}

/* ── Mobile Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --sidebar-width: 0px; }

    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-overlay {
        display: block;
    }
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        transition: transform 0.25s ease-out;
        z-index: 150;
    }
    .sidebar.sidebar-open { transform: translateX(0); }

    .main-content {
        margin-left: 0;
        padding-top: 60px;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        padding-bottom: var(--space-md);
    }

    /* Slide-over panel goes full width on mobile (D-24) */
    .panel-overlay {
        left: 0;
    }
    .panel-slideover {
        left: 0;
    }

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

    .kanban-board {
        grid-template-columns: 1fr !important;
    }

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

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

    .modal-box {
        margin: var(--space-md);
        max-height: 90vh;
        overflow-y: auto;
    }

    .time-form-grid {
        flex-direction: column;
    }

    .est-form-grid {
        flex-direction: column;
    }

    .chat-msg { max-width: 95%; }

    .chat-container { height: calc(100vh - 4rem); }

    .login-brand { font-size: var(--text-2xl); }
}

/* ── Error page ──────────────────────────────────────────────────────── */
.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    text-align: center;
}
.error-code {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-border);
}
.error-msg {
    color: var(--color-muted);
    margin-top: var(--space-sm);
}

/* ── Utilities ───────────────────────────────────────────────────────── */
.text-muted { color: var(--color-muted); }
.text-sm { font-size: var(--text-sm); }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }

/* ── Chat session panel ─────────────────────────────────────────────── */
.chat-layout {
    display: flex;
    height: calc(100vh - 60px);
    overflow: hidden;
}
.chat-session-panel {
    width: 260px;
    min-width: 40px;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.session-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.session-toggle-btn {
    background: none;
    border: none;
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    color: var(--color-text);
}
.session-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs) 0;
}
.session-item {
    display: block;
    padding: var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--color-card);
    text-decoration: none;
    color: var(--color-text);
    transition: background .15s;
}
.session-item:hover {
    background: var(--color-card);
}
.session-item-active {
    background: var(--color-info-bg);
    border-left: 3px solid var(--color-primary);
}
.session-title {
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-meta {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-xs);
}

/* ── Citation links ─────────────────────────────────────────────────── */
.citation-link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}
.citation-link:hover {
    opacity: 0.8;
}
.citation {
    color: var(--color-muted);
    font-style: italic;
}
.citation-law {
    color: var(--color-link);
    font-weight: 500;
}

/* ── Timeline component ────────────────────────────────────────────── */
.timeline-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.timeline-detail-box {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.timeline-detail-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}
.timeline-detail-label {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
.timeline-detail-content {
    font-size: var(--text-sm);
    line-height: 1.6;
    white-space: pre-wrap;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.timeline-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.tl-btn {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: 3px;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
}
.tl-btn-edit { color: var(--color-primary); border-color: var(--color-primary); }
.tl-btn-edit:hover { background: var(--color-primary); color: var(--color-white); }
.tl-btn-delete { color: var(--color-error); border-color: var(--color-error-border); }
.tl-btn-delete:hover { background: var(--color-error); color: var(--color-white); }

/* ── Home Page & Calendar (Phase 12) ────────────────────────────── */

.home-page {
    padding: var(--space-xl);
}

.home-layout {
    display: block;
}

/* Calendar column */
.home-calendar-col {
    min-width: 0;
}

/* Month navigation */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: var(--space-md);
}

.calendar-nav-center {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.calendar-nav-tools {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--text-lg);
}

.calendar-nav-btn:hover {
    background: var(--color-card);
}

.calendar-month-label {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.calendar-today-btn {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    font-size: var(--text-xs);
    cursor: pointer;
    font-weight: var(--font-medium);
}

.calendar-today-btn:hover {
    opacity: 0.9;
}

.calendar-month-select {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

.calendar-month-select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Day header row */
.calendar-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 1px;
}

.calendar-day-header {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-muted);
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-xs) 0;
}

/* Calendar grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--color-border);
    height: calc(100vh - 220px);
}

.calendar-day {
    min-height: 0;
    padding: var(--space-sm);
    background: var(--color-bg);
    cursor: pointer;
    position: relative;
}

.calendar-day:hover {
    background: var(--color-card);
}

.calendar-day:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    z-index: 1;
}

.calendar-day.other-month {
    opacity: 0.4;
    cursor: default;
}

.calendar-day.is-today .day-number {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-medium);
}

.calendar-day.is-selected {
    border: 2px solid var(--color-primary);
    background: var(--color-card);
}

.day-number {
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

/* Event previews inside day cells */
.day-events-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.day-event-title {
    font-size: var(--text-xs);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: var(--space-xs);
    border-left: 3px solid var(--color-primary);
}

.day-event-title.event-deadline {
    border-left-color: var(--color-warning);
}

.day-event-title.event-muistutus,
.day-event-title.event-reminder {
    border-left-color: var(--stage-uusi-yhteydenotto);
}

.day-event-title.event-done {
    border-left-color: var(--color-success);
    text-decoration: line-through;
    opacity: 0.6;
}

.day-event-overflow {
    font-size: var(--text-xs);
    color: var(--color-muted);
    padding-left: var(--space-xs);
}

/* Right sidebar */
.home-sidebar-col {
    min-width: 0;
    margin-top: calc(220px + var(--space-md));
}

.sidebar-greeting {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.sidebar-section-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.sidebar-empty-today {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-md);
}

/* Sidebar event list */
.sidebar-event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.sidebar-event-item {
    padding: var(--space-sm);
    background: var(--color-card);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.sidebar-event-item.event-deadline {
    border-left-color: var(--color-warning);
}

.sidebar-event-item.event-muistutus,
.sidebar-event-item.event-reminder {
    border-left-color: var(--stage-uusi-yhteydenotto);
}

.sidebar-event-item.event-done {
    border-left-color: var(--color-success);
    opacity: 0.6;
}

.sidebar-event-item.event-done .event-title {
    text-decoration: line-through;
}

.event-title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.event-desc {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-xs);
}

.event-matter-link {
    font-size: var(--text-xs);
    color: var(--color-primary);
    margin-top: var(--space-xs);
    display: inline-block;
}

.event-actions {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/* Quick stats */
.quick-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
}

.quick-stat-card {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.quick-stat-value {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text);
    margin: 0;
}

.quick-stat-label {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin: 0;
}

/* Day detail sidebar */
.sidebar-back-link {
    font-size: var(--text-xs);
    color: var(--color-primary);
    display: inline-block;
    margin-bottom: var(--space-sm);
    cursor: pointer;
}

.sidebar-day-detail {
    max-width: 640px;
}

.sidebar-default {
    max-width: 640px;
}

.sidebar-day-heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-md);
}

/* Reminder form */
.reminder-form-wrapper {
    margin-top: var(--space-md);
}

.reminder-form-wrapper summary {
    cursor: pointer;
}

.reminder-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.empty-state-text {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-md);
}

/* Small action buttons */
.btn-xs {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    color: var(--color-text);
}

.btn-xs:hover {
    background: var(--color-card);
}

.btn-xs.btn-danger {
    color: var(--color-error);
    border-color: var(--color-error);
}

.btn-xs.btn-danger:hover {
    background: var(--color-error);
    color: var(--color-white);
}

/* Spacing utilities */
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* ── Seasonal theming (Phase 13) ──────────────────────────────── */

/* Hero banner (D-01) — video edition */
.hero-banner {
    width: 100%;
    height: 280px;
    border-radius: var(--radius-lg);
    position: relative;
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.35) 100%
    );
    border-radius: var(--radius-lg);
    z-index: 1;
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: translateY(8px);
}

.hero-greeting {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-medium);
    line-height: 1.15;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .hero-greeting {
        opacity: 1;
        transform: none;
    }
    .hero-video {
        display: none;
    }
    .hero-banner {
        background-size: cover;
        background-position: center;
    }
}

/* Calendar accent Lottie overlay (D-03) */
.calendar-accent-lottie {
    width: 100%;
    height: 48px;
    opacity: 0.6;
    pointer-events: none;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.calendar-accent-lottie svg {
    width: 100%;
    height: 100%;
}

/* Calendar event dots use seasonal color */
.calendar-day.has-events::after {
    background: var(--season-calendar-dot, var(--color-primary));
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .calendar-accent-lottie {
        display: none;
    }
}

/* Responsive calendar (from UI-SPEC) */
@media (max-width: 1024px) {
    .calendar-day {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .calendar-grid {
        min-height: 0;
    }
    .calendar-day {
        min-height: 0;
    }
    .day-events-preview .day-event-title {
        display: none;
    }
    .day-event-overflow {
        display: none;
    }
    .calendar-day.has-events::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--season-calendar-dot, var(--color-primary));
        margin-top: var(--space-xs);
    }
}

/* ── Progress bar ─────────────────────────────────────── */
.progress-track {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full, 999px);
    transition: width 0.3s ease;
    min-width: 2%;
}

/* --- Compose Modal (Phase 23) --- */
.compose-modal { max-width: 720px; max-height: 90vh; overflow-y: auto; }
.compose-header { display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.compose-header h3 { font-family: var(--font-heading); font-size: var(--text-lg);
  font-weight: var(--font-medium); margin: 0; }
.compose-form { padding: var(--space-lg); }
.compose-field { margin-bottom: var(--space-md); padding: 0 var(--space-lg); }
#compose-form-content form { padding-top: var(--space-lg); }
.compose-field-label { display: block; font-size: var(--text-xs); font-weight: var(--font-medium);
  text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-xs); }
.compose-input { width: 100%; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base); font-family: var(--font-body);
  background: var(--color-card); }
.compose-input:focus { outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(70, 78, 70, 0.15); }
.compose-input:focus-visible { outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(70, 78, 70, 0.3); }
.compose-ccbcc-toggle { background: none; border: none; color: var(--color-primary);
  font-size: var(--text-xs); font-weight: var(--font-medium); cursor: pointer;
  text-decoration: underline; padding: var(--space-xs); white-space: nowrap; }
.compose-editor-wrap { margin-bottom: var(--space-md); padding: 0 var(--space-lg); }
.compose-attachments { margin-bottom: var(--space-md); padding: 0 var(--space-lg); }
.compose-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.compose-tag { display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--color-card); color: var(--color-text); font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: 9999px; }
.compose-tag-remove { background: none; border: none; color: var(--color-muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 var(--space-xs); }
.compose-tag-remove:hover { color: var(--color-error); }
.compose-footer { display: flex; justify-content: flex-end; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); }
.compose-error { background: rgba(176, 58, 46, 0.1); color: var(--color-error);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  margin: 0 var(--space-lg) var(--space-md); font-size: var(--text-base); }
.doc-picker { position: relative; }
.doc-picker-input { width: 100%; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base); background: var(--color-white, #fff); }
.doc-picker-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  max-height: 200px; overflow-y: auto; background: var(--color-white, #fff);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown, 0 4px 12px rgba(0,0,0,0.15)); }
.doc-picker-item { padding: var(--space-sm) var(--space-md); cursor: pointer;
  font-size: var(--text-base); }
.doc-picker-item:hover { background: var(--color-card); }
.doc-picker-item--selected { opacity: 0.5; }
@media (max-width: 768px) {
  .compose-modal { max-width: 100%; margin: var(--space-md); }
}

/* == Phase 31: Style & Layout Unification == */

/* -- btn-outline (D-02) -- */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-bg);
}

/* -- Loading indicator (D-09) -- */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
}
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: p31-spin 0.8s linear infinite;
}
@keyframes p31-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* -- Label/value pairs (D-06) -- */
.label-value {
    margin-bottom: var(--space-sm);
}
.label-muted {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}

/* -- Placeholder card enhancements (D-07) -- */
.placeholder-card svg {
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}
.placeholder-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    margin-top: 0;
}
.placeholder-text {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: 0;
    margin-bottom: 0;
}

/* -- Stage badge variants (D-11) -- */
.kanban-stage-badge {
    font-size: var(--text-xs);
    white-space: nowrap;
    font-weight: 400;
}
/* Yhteydenotot stages */
.kanban-stage-badge--uusi-yhteydenotto { background: rgba(91, 141, 190, 0.15); color: var(--stage-uusi-yhteydenotto); }
.kanban-stage-badge--jatkoyhteydenotto { background: rgba(122, 109, 171, 0.15); color: var(--stage-jatkoyhteydenotto); }
/* Toimeksiannot stages */
.kanban-stage-badge--uusi-toimeksianto { background: rgba(91, 141, 190, 0.15); color: var(--stage-uusi-yhteydenotto); }
.kanban-stage-badge--odottaa-materiaaleja { background: rgba(198, 127, 23, 0.15); color: var(--color-warning); }
.kanban-stage-badge--materiaalin-analyysi { background: rgba(122, 109, 171, 0.15); color: var(--stage-jatkoyhteydenotto); }
.kanban-stage-badge--odottaa-vakuutuspaatosta { background: rgba(160, 133, 91, 0.15); color: var(--stage-odottaa-vakuutuspaatosta); }
/* Lakimies stages */
.kanban-stage-badge--aloittamatta { background: rgba(91, 141, 190, 0.15); color: var(--stage-uusi-yhteydenotto); }
.kanban-stage-badge--neuvottelussa { background: rgba(122, 109, 171, 0.15); color: var(--stage-jatkoyhteydenotto); }
.kanban-stage-badge--kril-fine { background: rgba(61, 122, 74, 0.15); color: var(--color-success); }
.kanban-stage-badge--karajaoikeus { background: rgba(198, 127, 23, 0.15); color: var(--color-warning); }
.kanban-stage-badge--valitusasteet { background: rgba(160, 133, 91, 0.15); color: var(--stage-odottaa-vakuutuspaatosta); }
.kanban-stage-badge--passiiviset { background: rgba(136, 136, 136, 0.15); color: var(--stage-passiiviset); }

/* Phase 104 / KANBAN-01 — kategoria badge + AI briefing icon.
   Tokens from UI-SPEC §Component Contract §1 and §2. */
.kanban-kategoria-badge {
    display: inline-block;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--color-card);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}

.briefing-icon-btn {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-xs);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
}

.briefing-icon-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.briefing-icon-btn:hover {
    transform: scale(1.1);
}

/* -- Waiting indicator (D-15) -- */
.kanban-waiting-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--color-warning);
}
.kanban-waiting-indicator svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* -- Modal header stacked layout -- */
.modal-header-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* -- Kanban card footer -- */
.kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-sm);
}

/* ═══ Split-panel AI chat ═══ */
.panel-body--split { display: flex; gap: 0; }
.detail-column { flex: 1; overflow-y: auto; padding: var(--space-lg); max-width: 1400px; }
.panel-body--split .detail-column { max-width: none; }
.chat-column {
    flex: 0 0 420px;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Chat panel widget */
.chat-panel-widget { display: flex; flex-direction: column; height: 100%; }
.chat-panel-header {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.chat-panel-header .font-medium { font-weight: var(--font-medium); font-size: var(--text-base); }
.chat-panel-messages { flex: 1; overflow-y: auto; padding: var(--space-md); }
.chat-panel-messages .chat-msg { max-width: 100%; }
.chat-panel-input {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
.chat-panel-input .chat-form { display: flex; gap: var(--space-sm); }
.chat-panel-input .chat-input { flex: 1; font-size: var(--text-base); }
.chat-panel-input .chat-send { flex-shrink: 0; }

/* Chat panel empty state */
.chat-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-muted);
}
.chat-panel-empty h3 { font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-sm); }
.chat-panel-empty p { font-size: var(--text-xs); line-height: 1.5; }

/* Chat panel session sidebar */
.chat-panel-sessions {
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}
.chat-panel-sessions .session-item {
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid transparent;
    cursor: pointer;
    font-size: var(--text-xs);
    transition: background 0.15s;
}
.chat-panel-sessions .session-item:hover {
    background: rgba(70, 78, 70, 0.04);
}
.chat-panel-sessions .session-item-active {
    border-left-color: var(--color-primary);
    background: rgba(70, 78, 70, 0.06);
}
.chat-panel-sessions .session-title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-panel-sessions .session-meta {
    font-size: var(--text-xs);
    color: var(--color-muted);
}
.session-empty {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-xs);
}

/* Responsive: full takeover on small screens */
@media (max-width: 1024px) {
    .chat-column {
        position: absolute;
        inset: 0;
        flex: none;
        width: 100%;
        z-index: 10;
        background: var(--color-bg);
        border-left: none;
    }
}

/* Search group headers (Phase 37 -- universal search) */
.search-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-card);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.search-group-badge {
    display: inline-block;
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
}

.search-group-badge--own {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.search-group-badge--other {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.search-group-badge--contact {
    background: var(--color-card);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

/* -----------------------------------------------------------------------
   Phase 38: Tehtava system
   ----------------------------------------------------------------------- */

/* Tehtava modal — narrower than case detail modal */
.tehtava-modal {
    max-width: 560px;
}

.tehtava-modal .modal-detail {
    padding: var(--space-lg);
}

/* Form layout within tehtava modal */
.tehtava-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.tehtava-form label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    display: block;
}

.tehtava-form .form-row {
    display: flex;
    gap: var(--space-sm);
}

.tehtava-form .form-row > * {
    flex: 1;
}

/* Time field takes less space than date */
.tehtava-form .form-row .time-field {
    flex: 0 0 140px;
}

/* Compact autocomplete within modal */
.tehtava-autocomplete {
    position: relative;
}

.tehtava-ac-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    margin-top: var(--space-xs);
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
}

.tehtava-ac-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background 0.1s;
}

.tehtava-ac-item:hover {
    background: var(--color-card);
}

.tehtava-ac-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.tehtava-ac-empty {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-xs);
}

/* Selected matter display */
.tehtava-selected-matter {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-card);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

.tehtava-selected-matter .clear-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--text-base);
    padding: 0;
    line-height: 1;
}

.tehtava-selected-matter .clear-btn:hover {
    color: var(--color-error);
}

/* Event type: tehtava (sidebar day detail) */
.event-tehtava {
    border-left: 3px solid var(--color-primary);
}

/* Modal action row */
.tehtava-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

/* Time prefix in calendar events */
.event-time {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    margin-right: var(--space-xs);
}

/* ── Phase 061: Visual Polish ─────────────────────────────────────────── */

/* POL-05: Text truncation width variants */
.text-truncate-sm { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.text-truncate-md { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.text-truncate-lg { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* POL-10: Justify-end utility for button repositioning */
.justify-end { justify-content: flex-end; }

/* POL-11: Max-width constraint for dropdown forms */
.max-w-400 { max-width: 400px; }

/* POL-04: Card limit toggle button */
.kanban-show-more { width: 100%; margin-top: var(--space-sm); }

/* ── Global sidebar search (Phase 73) ───────────────────────────── */
.sidebar-search {
    padding: var(--space-sm) var(--space-md);
    position: relative;
}

.sidebar-search-dropdown {
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    top: 100%;
    z-index: 300;
    background: var(--color-white, #fff);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    max-height: 400px;
    overflow-y: auto;
}

.sidebar-search-dropdown .search-results {
    max-height: none;
    overflow-y: visible;
    border: none;
    border-radius: 0;
}

.search-show-all {
    display: block;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary);
    text-decoration: none;
}

.search-show-all:hover {
    background: var(--color-card);
}

/* ── Phase 100 — Esteellisyys warning panel (ToimeksiantoModal) ───────── */
.esteellisyys-warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.esteellisyys-warning__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.esteellisyys-warning__icon {
    color: var(--color-warning-dark);
    font-size: var(--text-lg);
    line-height: 1;
}
.esteellisyys-warning__body {
    color: var(--color-warning-dark);
    font-size: var(--text-sm);
    margin: 0;
}
.esteellisyys-warning__confirm {
    margin-top: var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--color-warning-dark);
}
.esteellisyys-warning__confirm input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Phase 100 Plan 06 — Kanban card flag chips (VISMA-06, UI-SPEC §3)
 * ------------------------------------------------------------------------- */
.card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.card-flag {
    height: 24px;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: default;
    line-height: 1;
}
.card-flag--button {
    cursor: pointer;
    font-family: inherit;
}
.card-flag--button:hover {
    filter: brightness(0.96);
}
.card-flag--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-dark);
}
.card-flag--pending {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
.card-flag--error {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error);
}
.card-flag--manual {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text, #2C2A29);
}