/* === IBM Carbon Design System Inspired === */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Carbon Gray */
    --cds-background: #f4f4f4;
    --cds-layer-01: #ffffff;
    --cds-layer-02: #e0e0e0;
    --cds-layer-hover: #e8e8e8;
    --cds-border-subtle: #e0e0e0;
    --cds-border-strong: #8d8d8d;
    --cds-text-primary: #161616;
    --cds-text-secondary: #525252;
    --cds-text-placeholder: #a8a8a8;
    --cds-text-on-color: #ffffff;
    --cds-text-helper: #6f6f6f;
    /* Carbon Blue */
    --cds-interactive: #0f62fe;
    --cds-interactive-hover: #0353e9;
    --cds-focus: #0f62fe;
    --cds-highlight: #d0e2ff;
    /* Carbon Support */
    --cds-support-error: #da1e28;
    --cds-support-error-bg: #fff1f1;
    --cds-support-success: #198038;
    --cds-support-success-bg: #defbe6;
    --cds-support-warning: #f1c21b;
    --cds-support-warning-bg: #fdf6dd;
    --cds-support-warning-text: #6e4b00;
    /* Spacing */
    --cds-spacing-03: 0.5rem;
    --cds-spacing-04: 0.75rem;
    --cds-spacing-05: 1rem;
    --cds-spacing-06: 1.5rem;
    --cds-spacing-07: 2rem;
    /* Compat aliases */
    --color-bg: var(--cds-background);
    --color-surface: var(--cds-layer-01);
    --color-primary: var(--cds-interactive);
    --color-primary-hover: var(--cds-interactive-hover);
    --color-text: var(--cds-text-primary);
    --color-text-muted: var(--cds-text-secondary);
    --color-border: var(--cds-border-subtle);
    --color-error-bg: var(--cds-support-error-bg);
    --color-error-text: var(--cds-support-error);
    --color-error-border: #ffd7d9;
    --radius: 0px;
    --shadow: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-lg: 0 6px 16px rgba(0,0,0,0.10);
}

/* === Carbon Dark (Gray 90) === */
[data-theme="dark"] {
    --cds-background: #262626;
    --cds-layer-01: #393939;
    --cds-layer-02: #525252;
    --cds-layer-hover: #474747;
    --cds-border-subtle: #525252;
    --cds-border-strong: #8d8d8d;
    --cds-text-primary: #f4f4f4;
    --cds-text-secondary: #c6c6c6;
    --cds-text-placeholder: #6f6f6f;
    --cds-text-on-color: #ffffff;
    --cds-text-helper: #a8a8a8;
    --cds-interactive: #78a9ff;
    --cds-interactive-hover: #a6c8ff;
    --cds-focus: #78a9ff;
    --cds-highlight: #0043ce;
    --cds-support-error: #ff8389;
    --cds-support-error-bg: #520408;
    --cds-support-success: #42be65;
    --cds-support-success-bg: #044317;
    --cds-support-warning: #f1c21b;
    --cds-support-warning-bg: #3a2e05;
    --cds-support-warning-text: #f1c21b;
    --color-error-border: #750e13;
    --shadow: 0 2px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 6px 16px rgba(0,0,0,0.4);
}

[data-theme="dark"] .navbar {
    background: #161616;
}

[data-theme="dark"] .auth-page {
    background: #161616;
}

[data-theme="dark"] .notice-item {
    color: var(--cds-support-warning-text);
    background: rgba(0,0,0,0.2);
}

[data-theme="dark"] .notice-item:hover {
    background: rgba(0,0,0,0.4);
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--cds-background);
    color: var(--cds-text-primary);
    line-height: 1.5;
    font-size: 0.875rem;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--cds-interactive);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === Auth Pages === */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cds-spacing-07) var(--cds-spacing-05);
    background: var(--cds-text-primary);
}

.auth-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-07);
    width: 100%;
    max-width: 400px;
}

.auth-header {
    margin-bottom: var(--cds-spacing-06);
}

.auth-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.auth-header p {
    color: var(--cds-text-secondary);
    font-size: 0.875rem;
}

.auth-error {
    background: var(--cds-support-error-bg);
    color: var(--cds-support-error);
    border-left: 3px solid var(--cds-support-error);
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
    font-size: 0.875rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-05);
}

.auth-footer {
    text-align: center;
    margin-top: var(--cds-spacing-06);
    padding-top: var(--cds-spacing-06);
    border-top: 1px solid var(--cds-border-subtle);
}

.auth-footer p {
    color: var(--cds-text-secondary);
    font-size: 0.875rem;
}

.auth-divider {
    text-align: center;
    margin: var(--cds-spacing-05) 0;
    color: var(--cds-text-secondary);
    font-size: 0.75rem;
}

/* === Form Elements === */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cds-text-secondary);
    letter-spacing: 0.01em;
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    padding: 0.6875rem 1rem;
    border: none;
    border-bottom: 1px solid var(--cds-border-strong);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    width: 100%;
    background: var(--cds-background);
    transition: border-color 0.15s;
}

.form-group input:focus {
    border-bottom-color: var(--cds-focus);
    box-shadow: inset 0 -1px 0 var(--cds-focus);
}

.form-group .form-error-message,
.form-group ul {
    color: var(--cds-support-error);
    font-size: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6875rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.1s;
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: 0.01em;
    min-height: 2.5rem;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
}

.btn-primary:hover {
    background: var(--cds-interactive-hover);
}

.btn-outline {
    background: transparent;
    color: var(--cds-interactive);
    border: 1px solid var(--cds-interactive);
}

.btn-outline:hover {
    background: var(--cds-highlight);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    min-height: 2rem;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-height: 1.5rem;
}

.btn-google {
    display: block;
    text-align: center;
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
    border: 1px solid var(--cds-border-strong);
    padding: 0.6875rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.btn-google:hover {
    background: var(--cds-layer-hover);
    text-decoration: none;
}

/* === Navbar === */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 3rem;
    background: var(--cds-text-primary);
    color: var(--cds-text-on-color);
}

.navbar-brand {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cds-text-on-color);
    letter-spacing: 0.02em;
}

.navbar-brand:hover {
    text-decoration: none;
    color: var(--cds-text-on-color);
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-04);
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    font-size: 0.75rem;
    color: #c6c6c6;
    text-decoration: none;
}

.navbar-user:hover {
    color: var(--cds-text-on-color);
    text-decoration: none;
}

.navbar-links .btn-outline {
    color: var(--cds-text-on-color);
    border-color: #6f6f6f;
    min-height: 1.75rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

.navbar-links .btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: #a8a8a8;
}

.navbar-links .btn-primary {
    min-height: 1.75rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

/* === Avatars === */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-xs { width: 20px; height: 20px; font-size: 0.6rem; }
.avatar-sm { width: 24px; height: 24px; font-size: 0.65rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1.2rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 2rem; }

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
    font-weight: 600;
    line-height: 1;
}

/* === Impersonation Bar === */
.impersonate-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cds-spacing-04);
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    background: #f1c21b;
    color: #161616;
    font-size: 0.8125rem;
}

.impersonate-exit {
    background: #161616;
    color: #f1c21b;
    border: none;
    font-size: 0.75rem;
}

.impersonate-exit:hover {
    background: #393939;
}

/* === Nav Links === */
.navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #c6c6c6;
    border-bottom: 2px solid transparent;
    transition: background 0.1s, color 0.1s;
}

.nav-link:hover {
    color: var(--cds-text-on-color);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}

.nav-link.active {
    color: var(--cds-text-on-color);
    border-bottom-color: var(--cds-interactive);
}

.nav-link-highlight {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
}

.nav-link-highlight:hover {
    background: var(--cds-interactive-hover);
    color: var(--cds-text-on-color);
}

.nav-link-highlight.active {
    background: var(--cds-interactive-hover);
    color: var(--cds-text-on-color);
    border-bottom-color: var(--cds-text-on-color);
}

/* === Home Page (Landing) === */
.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 3rem);
    text-align: center;
    padding: var(--cds-spacing-07);
}

.home-content h1 {
    font-size: 2.625rem;
    font-weight: 300;
    margin-bottom: var(--cds-spacing-03);
    letter-spacing: 0;
}

.home-content p {
    color: var(--cds-text-secondary);
    font-size: 1.25rem;
    font-weight: 300;
}

.home-actions {
    display: flex;
    gap: var(--cds-spacing-05);
    margin-top: var(--cds-spacing-06);
}

/* === Dashboard === */
.dashboard-greeting {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--cds-spacing-07);
    gap: var(--cds-spacing-05);
}

.dashboard-greeting h1 {
    font-size: 1.75rem;
    font-weight: 300;
    margin-bottom: 0.125rem;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-bottom: var(--cds-spacing-07);
    background: var(--cds-border-subtle);
}

.stat-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-card-accent {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
}

.stat-card-accent .stat-label {
    color: rgba(255,255,255,0.65);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    font-family: 'IBM Plex Mono', monospace;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--cds-spacing-05);
    align-items: start;
}

.dashboard-section {
    background: var(--cds-layer-01);
    border-left: 3px solid var(--cds-border-subtle);
    padding: var(--cds-spacing-05);
}

.dashboard-section h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-04);
}

.quick-links {
    display: flex;
    flex-direction: column;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-04);
    padding: var(--cds-spacing-04);
    color: var(--cds-text-primary);
    border-bottom: 1px solid var(--cds-border-subtle);
    transition: background 0.1s;
}

.quick-link:last-child {
    border-bottom: none;
}

.quick-link:hover {
    background: var(--cds-layer-hover);
    text-decoration: none;
}

.quick-link-icon {
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cds-background);
    flex-shrink: 0;
}

.quick-link strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
}

.quick-link span {
    font-size: 0.75rem;
    color: var(--cds-text-secondary);
}

.active-project-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-05);
}

/* === Leaderboard === */
.leaderboard {
    display: flex;
    flex-direction: column;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-03) 0;
    border-bottom: 1px solid var(--cds-border-subtle);
}

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

.leaderboard-rank {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.leaderboard-item .member-info { flex: 1; min-width: 0; }
.leaderboard-name { font-weight: 500; font-size: 0.875rem; display: block; line-height: 1.25; }
.leaderboard-position { font-size: 0.75rem; color: var(--cds-text-secondary); }
.leaderboard-hours { font-weight: 600; font-size: 0.875rem; flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; }

/* === Dashboard Notice === */
.dashboard-notice {
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
    font-size: 0.875rem;
    border-left: 3px solid;
}

.dashboard-notice strong { display: block; margin-bottom: 0.125rem; }
.dashboard-notice p { color: inherit; opacity: 0.8; font-size: 0.75rem; margin-bottom: 0; }

.notice-warning {
    background: var(--cds-support-warning-bg);
    border-left-color: var(--cds-support-warning);
    color: var(--cds-support-warning-text);
}

.notice-success {
    background: var(--cds-support-success-bg);
    border-left-color: var(--cds-support-success);
    color: var(--cds-support-success);
}

.notice-items { display: flex; flex-direction: column; gap: 0.25rem; margin-top: var(--cds-spacing-03); }
.notice-item { font-size: 0.75rem; color: var(--cds-support-warning-text); padding: 0.25rem 0.5rem; background: rgba(255,255,255,0.5); display: block; }
.notice-item:hover { background: rgba(255,255,255,0.8); text-decoration: none; }

/* === App Layout === */
.app-layout { min-height: 100vh; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--cds-spacing-07) var(--cds-spacing-06);
}

/* === Page Header === */
.page-header { margin-bottom: var(--cds-spacing-06); }

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 400;
}

.page-description {
    color: var(--cds-text-secondary);
    margin-top: 0.25rem;
}

.back-link {
    font-size: 0.75rem;
    color: var(--cds-text-secondary);
    display: inline-block;
    margin-bottom: var(--cds-spacing-03);
}

.back-link:hover { color: var(--cds-interactive); }

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 3rem var(--cds-spacing-07);
    color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
    border: 1px dashed var(--cds-border-subtle);
}

/* === Project Cards Grid === */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1px;
    background: var(--cds-border-subtle);
}

.project-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    display: block;
    color: var(--cds-text-primary);
    transition: background 0.1s;
    border-left: 3px solid transparent;
}

.project-card:hover {
    background: var(--cds-layer-hover);
    border-left-color: var(--cds-interactive);
    text-decoration: none;
}

.project-card h2 { font-size: 1rem; font-weight: 600; margin-bottom: var(--cds-spacing-03); }

.project-description {
    font-size: 0.875rem;
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-04);
    line-height: 1.5;
}

.project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.meta-date { color: var(--cds-text-secondary); }

/* === Badges === */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--cds-highlight);
    color: var(--cds-interactive);
}

.badge-sm { padding: 0.0625rem 0.375rem; font-size: 0.6875rem; }

.badge-danger {
    background: var(--cds-support-error-bg);
    color: var(--cds-support-error);
}

/* === Project Members === */
.project-members { margin-top: var(--cds-spacing-07); }
.project-members h2 { font-size: 1rem; font-weight: 600; margin-bottom: var(--cds-spacing-04); }

.members-list {
    background: var(--cds-layer-01);
    overflow: hidden;
}

.member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle);
}

.member-item:last-child { border-bottom: none; }
.member-info { display: flex; align-items: center; gap: var(--cds-spacing-03); }
.member-name { font-size: 0.875rem; font-weight: 500; }
.member-permissions { display: flex; gap: 0.25rem; flex-wrap: wrap; }

/* === Budget Bar === */
.budget-bar {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
    border-left: 3px solid var(--cds-interactive);
}

.budget-stats { display: flex; gap: var(--cds-spacing-07); margin-bottom: var(--cds-spacing-04); flex-wrap: wrap; }
.budget-stat { display: flex; flex-direction: column; gap: 0.0625rem; }
.budget-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cds-text-secondary); }
.budget-value { font-size: 1rem; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.budget-percent { font-size: 0.75rem; color: var(--cds-text-secondary); margin-top: var(--cds-spacing-03); }

/* === Progress Bar === */
.progress-track { height: 4px; background: var(--cds-layer-02); overflow: hidden; }
.progress-track-sm { height: 2px; margin-top: var(--cds-spacing-03); }
.progress-fill { height: 100%; background: var(--cds-interactive); transition: width 0.3s; }
.progress-warning { background: var(--cds-support-warning); }
.progress-danger { background: var(--cds-support-error); }

/* === Action Type Badge === */
.action-badge {
    display: inline-block;
    padding: 0.0625rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--action-color) 15%, transparent);
    color: var(--action-color);
}

.session-detail-top {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    margin-bottom: 0.0625rem;
}

/* === Action Breakdown === */
.action-breakdown {
    background: var(--cds-layer-01);
    border-left: 3px solid var(--cds-interactive);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
}

.action-breakdown-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--cds-spacing-05);
}

.action-breakdown-header h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
    margin: 0;
}

.action-breakdown-total {
    font-size: 0.75rem;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--cds-text-secondary);
}

.action-rows {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-04);
}

.action-row {
    display: grid;
    grid-template-columns: 120px 1fr 100px;
    align-items: center;
    gap: var(--cds-spacing-04);
}

.action-row-label {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
}

.action-row-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.action-row-name {
    font-size: 0.8125rem;
    color: var(--cds-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-row-bar-wrap {
    min-width: 0;
}

.action-row-bar {
    height: 20px;
    background: var(--cds-background);
    overflow: hidden;
}

.action-row-fill {
    height: 100%;
    transition: width 0.3s;
}

.action-row-stats {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    justify-content: flex-end;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8125rem;
}

.action-row-hours {
    font-weight: 600;
}

.action-row-pct {
    color: var(--cds-text-secondary);
    min-width: 2rem;
    text-align: right;
}

/* === Overrun Panel === */
.overrun-panel {
    background: var(--cds-support-error-bg);
    border-left: 3px solid var(--cds-support-error);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
}

.overrun-header {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    margin-bottom: var(--cds-spacing-04);
}

.overrun-header h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-support-error);
    margin: 0;
}

.overrun-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--cds-support-error);
    color: var(--cds-text-on-color);
    border-radius: 50%;
}

.overrun-list {
    display: flex;
    flex-direction: column;
}

.overrun-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cds-spacing-05);
    padding: var(--cds-spacing-03) var(--cds-spacing-04);
    color: var(--cds-text-primary);
    border-bottom: 1px solid rgba(218, 30, 40, 0.15);
    transition: background 0.1s;
}

.overrun-item:last-child { border-bottom: none; }
.overrun-item:hover { background: rgba(218, 30, 40, 0.06); text-decoration: none; }

.overrun-item-title {
    font-weight: 500;
    font-size: 0.875rem;
    display: block;
}

.overrun-item-hours {
    font-size: 0.75rem;
    color: var(--cds-text-secondary);
    font-family: 'IBM Plex Mono', monospace;
}

.overrun-badge {
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--cds-support-error);
    white-space: nowrap;
}

/* === Todo Hours === */
.todo-hours { font-size: 0.75rem; color: var(--cds-text-secondary); margin-bottom: 0.25rem; }
.hours-spent { font-weight: 500; color: var(--cds-text-primary); }
.hours-est { color: var(--cds-text-secondary); }

/* === Task Group Tabs === */
.group-tabs {
    display: flex;
    gap: 1px;
    margin-bottom: var(--cds-spacing-05);
    background: var(--cds-border-subtle);
    overflow-x: auto;
}

.group-tab {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
    border-bottom: 2px solid transparent;
}

.group-tab:hover {
    text-decoration: none;
    color: var(--cds-text-primary);
    background: var(--cds-layer-hover);
}

.group-tab.active {
    color: var(--cds-text-primary);
    border-bottom-color: var(--group-color, var(--cds-interactive));
    font-weight: 600;
}

.group-tab-count {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    background: rgba(0,0,0,0.06);
    font-weight: 400;
}

.group-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

/* Task Group Badges on cards */
.todo-groups {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.group-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: color-mix(in srgb, var(--group-color, var(--cds-interactive)) 12%, transparent);
    color: var(--group-color, var(--cds-interactive));
}

/* === Group Summary === */
.group-summary {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-05);
    border-left: 3px solid var(--cds-border-subtle);
}

.group-summary-title {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    margin-bottom: var(--cds-spacing-04);
}

.group-summary-title h3 {
    font-size: 0.875rem;
    font-weight: 600;
}

.group-summary-stats {
    display: flex;
    gap: var(--cds-spacing-07);
    flex-wrap: wrap;
}

.group-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.group-summary-value {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.2;
}

.group-summary-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
}

/* === Todo Board (Kanban) === */
.todo-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cds-spacing-05); }
.todo-column { min-height: 200px; }

.column-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--cds-spacing-04);
    margin-bottom: var(--cds-spacing-04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cds-layer-01);
    border-bottom: 2px solid var(--cds-border-subtle);
}

.column-todo { color: var(--cds-text-secondary); }
.column-in_progress { color: var(--cds-support-warning-text); border-bottom-color: var(--cds-support-warning); }
.column-done { color: var(--cds-support-success); border-bottom-color: var(--cds-support-success); }

.column-count { font-size: 0.75rem; padding: 0.0625rem 0.375rem; background: rgba(0,0,0,0.06); }

.todo-list { display: flex; flex-direction: column; gap: 0.5rem; }

.todo-card {
    background: var(--cds-layer-01);
    border-left: 3px solid var(--cds-border-subtle);
    padding: var(--cds-spacing-04);
    transition: border-color 0.1s;
}

.todo-card:hover { border-left-color: var(--cds-interactive); }
.todo-card .todo-title { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; }
.todo-card .todo-description { font-size: 0.75rem; color: var(--cds-text-secondary); margin-bottom: var(--cds-spacing-03); }
.todo-meta { display: flex; align-items: center; gap: var(--cds-spacing-04); font-size: 0.75rem; color: var(--cds-text-secondary); }
.todo-assignee { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-empty { text-align: center; padding: var(--cds-spacing-06) var(--cds-spacing-03); font-size: 0.75rem; color: var(--cds-text-secondary); }

/* === Status Badges === */
.status-badge { display: inline-block; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; }
.status-todo { background: #e0e0e0; color: #525252; }
.status-in_progress { background: #fdf6dd; color: #6e4b00; }
.status-done { background: #defbe6; color: #198038; }

/* === Overdue === */
.overdue { color: var(--cds-support-error); font-weight: 500; }

/* === Todo Table === */
.todo-table { background: var(--cds-layer-01); overflow: hidden; }

.todo-table table { width: 100%; border-collapse: collapse; }

.todo-table th {
    text-align: left;
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
    background: var(--cds-background);
    border-bottom: 1px solid var(--cds-border-subtle);
}

.todo-table td {
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    border-bottom: 1px solid var(--cds-border-subtle);
    font-size: 0.875rem;
    vertical-align: top;
}

.todo-table tr:last-child td { border-bottom: none; }
.todo-table tr:hover { background: var(--cds-layer-hover); }
.todo-table .todo-title { font-weight: 500; display: block; }
.todo-table .todo-description { font-size: 0.75rem; color: var(--cds-text-secondary); display: block; margin-top: 0.125rem; }
.text-muted { color: var(--cds-text-secondary); }

/* === Todo Filters === */
.todo-filters {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
}

.todo-filters-row {
    display: flex;
    align-items: flex-end;
    gap: var(--cds-spacing-03);
    flex-wrap: wrap;
}

.todo-filter-search {
    flex: 1;
    min-width: 180px;
}

.todo-filters-row .form-group {
    margin: 0;
}

.todo-filters-row select.form-input {
    min-width: 140px;
}

/* Sort Links */
.sort-link {
    color: var(--cds-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.sort-link:hover {
    color: var(--cds-text-primary);
    text-decoration: none;
}

.sort-active {
    color: var(--cds-interactive);
}

.sort-arrow {
    font-size: 0.6rem;
}

/* Todo Table Extras */
.todo-table-groups {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.todo-table-hours {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* === Pagination === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-top: var(--cds-spacing-06);
    background: var(--cds-border-subtle);
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--cds-spacing-04);
    font-size: 0.875rem;
    background: var(--cds-layer-01);
    color: var(--cds-text-primary);
    transition: background 0.1s;
}

.pagination-link:hover {
    background: var(--cds-layer-hover);
    text-decoration: none;
}

.pagination-current {
    background: var(--cds-interactive);
    color: var(--cds-text-on-color);
    font-weight: 600;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2.5rem;
    background: var(--cds-layer-01);
    color: var(--cds-text-secondary);
    font-size: 0.875rem;
}

/* === Page Header Row === */
.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cds-spacing-05);
}

/* === Flash Messages === */
.flash {
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
    font-size: 0.875rem;
    border-left: 3px solid;
}

.flash-success {
    background: var(--cds-support-success-bg);
    border-left-color: var(--cds-support-success);
    color: var(--cds-support-success);
}

/* === Todo Card Actions === */
.todo-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cds-spacing-03); }
.todo-actions { display: flex; gap: 0.125rem; flex-shrink: 0; }

.todo-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
    color: var(--cds-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.todo-action:hover { background: var(--cds-layer-hover); color: var(--cds-interactive); text-decoration: none; }
.todo-action-delete:hover { color: var(--cds-support-error); }
.inline-form { display: inline; }

/* === Table Actions === */
.table-actions { text-align: right; white-space: nowrap; }

/* === Form Card === */
.container-sm { max-width: 640px; }

.form-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-06);
}

.todo-form { display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-05); }

.form-input {
    padding: 0.6875rem 1rem;
    border: none;
    border-bottom: 1px solid var(--cds-border-strong);
    font-size: 0.875rem;
    font-family: inherit;
    width: 100%;
    background: var(--cds-background);
    outline: none;
    transition: border-color 0.15s;
}

.form-input:focus {
    border-bottom-color: var(--cds-focus);
    box-shadow: inset 0 -1px 0 var(--cds-focus);
}

.form-textarea { resize: vertical; min-height: 80px; }

/* Checkbox / Radio groups (Symfony expanded widget) */
.form-group > div > div {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-03);
    padding: var(--cds-spacing-03) 0;
}

.form-group > div > div input[type="checkbox"],
.form-group > div > div input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--cds-interactive);
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.form-group > div > div label {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--cds-text-primary);
    cursor: pointer;
    margin: 0;
}

.form-actions { display: flex; gap: var(--cds-spacing-04); padding-top: var(--cds-spacing-03); }

/* === Filter Bar === */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-06); }

.filter-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
    border: 1px solid var(--cds-border-subtle);
    transition: all 0.1s;
}

.filter-chip:hover { text-decoration: none; border-color: var(--cds-border-strong); color: var(--cds-text-primary); }
.filter-chip.active { background: var(--chip-color, var(--cds-interactive)); color: var(--cds-text-on-color); border-color: var(--chip-color, var(--cds-interactive)); }

/* === Employee Grid === */
.employee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--cds-border-subtle); }

.employee-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-05);
    color: var(--cds-text-primary);
    transition: background 0.1s;
    border-left: 3px solid transparent;
}

a.employee-card:hover {
    background: var(--cds-layer-hover);
    text-decoration: none;
    border-left-color: var(--cds-interactive);
}

.employee-avatar { flex-shrink: 0; }
.employee-info h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.0625rem; }
.employee-email { font-size: 0.75rem; color: var(--cds-text-secondary); margin-bottom: 0.375rem; }

.position-badge {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--pos-color) 12%, transparent);
    color: var(--pos-color);
    border: 1px solid color-mix(in srgb, var(--pos-color) 25%, transparent);
}

/* === Todo Title Link === */
.todo-title-link { font-weight: 500; font-size: 0.875rem; color: var(--cds-text-primary); display: block; }
.todo-title-link:hover { color: var(--cds-interactive); text-decoration: none; }
.todo-table .todo-title-link { font-size: inherit; }

/* === Todo Detail Page === */
.todo-show-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cds-spacing-05); }
.todo-show-header h1 { display: inline; margin-right: var(--cds-spacing-04); }

.todo-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--cds-spacing-05); align-items: start; }

.detail-section {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-04);
    border-left: 3px solid var(--cds-border-subtle);
}

.detail-section h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
    margin-bottom: var(--cds-spacing-04);
}

.detail-section p { font-size: 0.875rem; line-height: 1.6; }

/* Hours Stats */
.hours-stats { display: flex; gap: var(--cds-spacing-07); }
.hours-stat { display: flex; flex-direction: column; }
.hours-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-family: 'IBM Plex Mono', monospace; }
.hours-stat-label { font-size: 0.75rem; color: var(--cds-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

/* User Hours Breakdown */
.user-hours-list { display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.user-hours-item { display: flex; flex-direction: column; gap: 0.25rem; }
.user-hours-bar { display: flex; align-items: center; gap: var(--cds-spacing-04); }
.user-hours-value { font-size: 0.875rem; font-weight: 600; min-width: 3.5rem; text-align: right; font-family: 'IBM Plex Mono', monospace; }

/* Time Log */
.time-log { display: flex; flex-direction: column; }

.time-log-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cds-spacing-05);
    padding: var(--cds-spacing-04) 0;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.time-log-entry:last-child { border-bottom: none; padding-bottom: 0; }
.time-log-entry:first-child { padding-top: 0; }
.time-log-left { min-width: 0; }
.time-log-note { font-size: 0.75rem; color: var(--cds-text-secondary); margin-top: 0.125rem; margin-left: 1.5rem; }
.time-log-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.time-log-hours { font-weight: 600; font-size: 0.875rem; font-family: 'IBM Plex Mono', monospace; }
.time-log-date { font-size: 0.75rem; color: var(--cds-text-secondary); }

/* Detail Sidebar */
.detail-card {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-04);
}

.detail-card h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--cds-spacing-04); }

.detail-field {
    padding: var(--cds-spacing-03) 0;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.detail-field:last-child { border-bottom: none; padding-bottom: 0; }
.detail-field:first-child { padding-top: 0; }

.detail-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cds-text-secondary);
    margin-bottom: 0.25rem;
}

.log-time-form { display: flex; flex-direction: column; gap: var(--cds-spacing-04); }

/* === Sessions === */
.session-filters {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-06);
}

.filter-fields { display: flex; align-items: flex-end; gap: var(--cds-spacing-05); flex-wrap: wrap; }
.filter-fields .form-group { flex: 0 0 auto; }
.filter-fields .form-group label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cds-text-secondary); }
.filter-submit { margin-bottom: 0; }
.filter-shortcuts { display: flex; gap: 0.375rem; margin-top: var(--cds-spacing-04); }
.session-day { margin-bottom: var(--cds-spacing-06); }

.session-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cds-spacing-03);
    padding-bottom: var(--cds-spacing-03);
    border-bottom: 2px solid var(--cds-text-primary);
}

.session-day-title h2 { font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: var(--cds-spacing-03); }
.session-day-meta { display: flex; align-items: center; gap: var(--cds-spacing-04); }
.session-day-total { font-size: 0.875rem; font-weight: 600; color: var(--cds-interactive); font-family: 'IBM Plex Mono', monospace; }

.session-empty {
    text-align: center;
    padding: var(--cds-spacing-05);
    font-size: 0.75rem;
    color: var(--cds-text-secondary);
    background: var(--cds-layer-01);
    border: 1px dashed var(--cds-border-subtle);
}

.session-entries { display: flex; flex-direction: column; gap: 1px; background: var(--cds-border-subtle); }

.session-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--cds-spacing-05);
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
}

.session-time { flex-shrink: 0; min-width: 100px; display: flex; flex-direction: column; gap: 0.0625rem; }
.session-timerange { font-size: 0.75rem; color: var(--cds-text-secondary); font-family: 'IBM Plex Mono', monospace; }
.session-hours { font-size: 0.875rem; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.session-details { flex: 1; min-width: 0; }
.session-project { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cds-text-secondary); margin-bottom: 0.0625rem; }
.session-todo { font-weight: 500; font-size: 0.875rem; color: var(--cds-text-primary); }
.session-todo:hover { color: var(--cds-interactive); }
.session-note { font-size: 0.75rem; color: var(--cds-text-secondary); margin-top: 0.25rem; line-height: 1.4; }
.session-actions { display: flex; gap: 0.125rem; flex-shrink: 0; }

.session-grand-total {
    text-align: right;
    padding: var(--cds-spacing-05) 0;
    font-size: 0.875rem;
    color: var(--cds-text-secondary);
    border-top: 2px solid var(--cds-text-primary);
}

.session-grand-total strong { color: var(--cds-text-primary); font-size: 1rem; font-family: 'IBM Plex Mono', monospace; }

/* === Settings === */
.settings-section {
    background: var(--cds-layer-01);
    padding: var(--cds-spacing-06);
    margin-bottom: var(--cds-spacing-05);
}

.settings-section h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--cds-spacing-05);
}

.settings-profile {
    display: flex;
    align-items: center;
}

.settings-profile .member-info {
    gap: var(--cds-spacing-05);
}

.settings-profile h2 {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.125rem;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cds-spacing-05);
}

.settings-row-info strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.0625rem;
}

.settings-row-info p {
    font-size: 0.75rem;
}

/* Toggle Switch */
.toggle {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--cds-border-strong);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.toggle-on {
    background: var(--cds-interactive);
}

.toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--cds-text-on-color);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-on .toggle-knob {
    transform: translateX(24px);
}

/* Nav Settings Icon */
.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #c6c6c6;
    font-size: 1rem;
    transition: color 0.1s;
}

.nav-icon:hover {
    color: var(--cds-text-on-color);
    text-decoration: none;
}

/* === Employee Profile === */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--cds-spacing-06);
    margin-bottom: var(--cds-spacing-07);
}

.profile-identity h1 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--cds-spacing-03);
}

.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--cds-spacing-05);
    align-items: start;
}

.profile-field {
    padding: var(--cds-spacing-04) 0;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.profile-field:last-child { border-bottom: none; }

.profile-field span:not(.detail-label) {
    font-size: 0.875rem;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.profile-stat .stat-value {
    font-size: 2rem;
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--cds-spacing-05);
}

/* === Responsive === */
@media (max-width: 768px) {
    .todo-board { grid-template-columns: 1fr; }

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

    .todo-detail-grid,
    .dashboard-grid,
    .profile-grid { grid-template-columns: 1fr; }

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

    .action-row {
        grid-template-columns: 100px 1fr 80px;
    }

    .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: var(--cds-spacing-03) var(--cds-spacing-05);
        gap: var(--cds-spacing-03);
    }

    .navbar-nav {
        order: 3;
        width: 100%;
        height: auto;
    }

    .nav-link { height: 2.5rem; }
}