:root {
    /* ── Core Colors (Current System) ─────────────────────────── */
    --bg: #FFFFFF;
    --text: #1A1A1A;
    --muted: #4A4A4A;
    --line: #E0E0E0;
    --shell-bg: #06352C;          /* Dark teal */
    --lime: #CCFF00;              /* Bright lime accent */

    /* ── Semantic Color Mappings ──────────────────────────────── */
    --text-light: #FFFFFF;
    --text-muted: #4A4A4A;
    --border: #E0E0E0;

    /* ── Brand Color Palette (Core) ───────────────────────────── */
    --brand-anchor-green: #06352C;        /* Anchor Green */
    --brand-dark-moss: #1D4C3D;           /* Dark Moss */
    --brand-cactus-green: #0F8264;        /* Cactus Green */
    --brand-soft-jade: #0BA88A;           /* Soft Jade */
    --brand-electric-lime: #CCFF00;       /* Electric Lime */
    --brand-storm-silver: #C1C1C1;        /* Storm Silver */
    --brand-washed-stone: #F5F5F5;        /* Washed Stone */

    /* ── Extended Color Palette (Consistent saturation) ────────– */
    --brand-purple: #7B4B95;              /* Purple - medium saturation */
    --brand-blue: #3B6F8F;                /* Blue - balanced saturation */
    --brand-yellow: #E8C547;              /* Yellow - vibrant tone */
    --brand-orange: #C97A3A;              /* Orange - warm, balanced */
    --brand-red: #D84A38;                 /* Red - vibrant accent */

    /* ── Status Colors (Brand-based, consistent saturation) ──── */
    --success: #0F8264;                   /* Cactus Green - vibrant */
    --warning: #0BA88A;                   /* Soft Jade - accent */
    --error: #D84A38;                     /* Red - kept (good saturation) */
    --info: #0BA88A;                      /* Soft Jade - info */

    /* ── Forest/Shell Colors ──────────────────────────────────── */
    --forest: #06352C;                    /* Anchor Green */
    --forest-soft: #f0f5f3;               /* Soft background */
    --teal: #0BA88A;                      /* Soft Jade */

    /* ── Status-specific Colors (Extended palette) ────────────── */
    --status-done: #0BA88A;               /* brand-soft-jade */
    --status-progress: #3B6F8F;           /* brand-blue */
    --status-ondeck: #888888;             /* brand-storm-silver (darkened for legibility) */
    --status-scoping: #7B4B95;            /* brand-purple */
    --status-feedback: #C97A3A;           /* brand-orange */
    --status-approval: #E8C547;           /* brand-yellow */
    --status-blocked: #D84A38;            /* brand-red */
    --status-hold: #8A7060;               /* muted warm neutral */

    /* ── Task Category Colors (Extended palette) ─────────────── */
    /* New 5-tier Pulse point system */
    --category-rock-color: #0F8264;       /* Cactus Green - 8 pts */
    --category-initiative-color: #7B4B95; /* Purple - 5 pts */
    --category-milestone-color: #C97A3A;  /* Orange - 3 pts */
    --category-quickwin-color: #E8C547;   /* Yellow - 2 pts */
    --category-task-color: #3B6F8F;       /* Blue - 1 pt */

    /* Back-compat aliases (legacy class names still referenced in some files) */
    --category-projects-color: var(--category-initiative-color);
    --category-quick-wins-color: var(--category-milestone-color);
    --category-tasks-color: var(--category-task-color);

    /* ── Rock Status Colors (Roadmap/OKR legend) ──────────────── */
    --rock-not-started: #1D4C3D;          /* Dark Moss */
    --rock-on-track: #0F8264;             /* Cactus Green */
    --rock-at-risk: #C97A3A;              /* Orange */
    --rock-off-track: #D84A38;            /* Red */
    --rock-completed: #0BA88A;            /* Soft Jade */
    --rock-canceled: #C1C1C1;             /* Storm Silver */

    /* ── Layout ───────────────────────────────────────────────── */
    --radius: 8px;
    --gap: 24px;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-width: none;
    font-family: "Plus Jakarta Sans", sans-serif;
}

*::-webkit-scrollbar {
    display: none;
}

html {
    font-size: 16px;
    height: 100%;
    overflow: hidden;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
}

.loading-screen {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: #06352C;
    transition: opacity 280ms ease, visibility 280ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Icon: very large, bottom right, partially off-screen */
.ls-icon-svg {
    position: absolute;
    right: -5vw;
    bottom: -22vh;
    width: 90vw;
    max-width: 1600px;
    min-width: 800px;
    height: auto;
    opacity: 0.9;
}

/* Single line orbiting the icon outline */
.ls-ring {
    stroke-dasharray: 0.3 0.7;
    stroke-dashoffset: 0;
    stroke-width: 25 !important;
    animation: ls-orbit 1.6s linear infinite;
}

@keyframes ls-orbit {
    to { stroke-dashoffset: -1; }
}

/* Fill hidden until page is ready */
.ls-icon-fill {
    opacity: 0;
}

/* On complete: orbit pauses, line expands to full outline, then lime fill */
.loading-screen.ls-complete .ls-ring {
    animation: ls-connect 0.45s ease forwards;
}

@keyframes ls-connect {
    from { stroke-dasharray: 0.3 0.7; }
    to   { stroke-dasharray: 1 0; stroke-dashoffset: 0; }
}

.loading-screen.ls-complete .ls-icon-fill {
    animation: ls-fill-in 0.35s ease 0.4s forwards;
}

@keyframes ls-fill-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ── App Shell Layout ─────────────────────────────────────── */
.app-shell {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.app-shell.sidebar-open .sidebar-backdrop {
    display: block;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    width: 220px;
    background: var(--shell-bg);
    border-right: 1px solid #1D4C3D;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.26s ease, padding 0.26s ease, border-color 0.26s ease;
}

/* Desktop collapse — icon-only mode */
.app-shell.sidebar-collapsed .sidebar {
    width: 56px;
    padding: 0;
    align-items: center;
}

.app-shell.sidebar-collapsed .sidebar-header {
    align-items: center;
    padding: 20px 0;
    gap: 0;
    width: 100%;
    flex-direction: column;
}

.app-shell.sidebar-collapsed .sidebar-brand {
    align-items: center;
    padding: 0;
    gap: 0;
}

.app-shell.sidebar-collapsed .sidebar-brand-sub,
.app-shell.sidebar-collapsed .nav-item span,
.app-shell.sidebar-collapsed .refresh-btn span,
.app-shell.sidebar-collapsed .user-name,
.app-shell.sidebar-collapsed .sign-out-btn {
    opacity: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.08s ease, max-width 0s ease 0.08s !important;
}

.app-shell.sidebar-collapsed .sidebar-brand-name {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.08s ease !important;
}

.app-shell.sidebar-collapsed .sidebar-brand-name-collapsed {
    opacity: 1 !important;
    transition: opacity 0.08s ease !important;
}

.app-shell.sidebar-collapsed .sidebar-logo-wrap {
    width: 100% !important;
    height: 36px !important;
}

.app-shell.sidebar-collapsed .sidebar-logo-full {
    opacity: 0 !important;
}

.app-shell.sidebar-collapsed .sidebar-logo-icon {
    opacity: 1 !important;
    transform: scale(0.65); /* Make the icon slightly smaller */
    transform-origin: center;
}

.app-shell.sidebar-collapsed .sidebar-nav {
    width: 100%;
    align-items: center;
    padding: 0;
}

.app-shell.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 14px 0;
    width: 100%;
    gap: 0;
}

.app-shell.sidebar-collapsed .sidebar-footer {
    align-items: center;
    gap: 0;
    width: 100%;
}

.sidebar-tools {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid #1D4C3D;
    padding: 10px 0;
}

.sidebar-tools-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.45;
    padding: 6px 20px;
    transition: opacity 0.08s ease, max-height 0.08s ease, padding 0.08s ease, margin 0.08s ease;
}

.app-shell.sidebar-collapsed .sidebar-tools-header {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.sidebar-tools .nav-item {
    padding: 8px 20px;
    font-size: 13px;
}

.sidebar-tools .nav-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.app-shell.sidebar-collapsed .sidebar-tools .nav-item {
    justify-content: center;
    padding: 14px 0;
}

.app-shell.sidebar-collapsed .sidebar-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.app-shell.sidebar-collapsed .sidebar-user-name,
.app-shell.sidebar-collapsed .sidebar-user-logout {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-footer .refresh-btn {
    width: 100%;
    min-height: 50px;
    padding: 15px 0;
    margin-left: 0;
    gap: 0;
}

.app-shell.sidebar-collapsed .user-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
    border-radius: 0;
    border: none;
    background: transparent;
    gap: 0 !important;
    overflow: hidden;
    flex-shrink: 0;
}

.app-shell.sidebar-collapsed .user-avatar {
    flex-shrink: 0;
    margin: 0 auto;
}

.app-shell.sidebar-collapsed .last-updated {
    opacity: 0 !important;
    max-height: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.app-shell.sidebar-collapsed .user-name,
.app-shell.sidebar-collapsed .sign-out-btn {
    opacity: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.08s ease, max-width 0s ease 0.08s !important;
}

.app-shell.sidebar-collapsed .sidebar-collapse-btn {
    width: 100%;
    height: 50px;
    padding: 0;
    justify-content: center;
    margin: 0;
}

.app-shell.sidebar-collapsed .collapse-icon {
    transform: rotate(180deg);
}

/* ── Sidebar Toggle Button (mobile topbar) ── */
.sidebar-toggle {
    display: none; /* hidden on desktop; shown on mobile */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0;
    border: none;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.13);
    color: var(--text-light);
}

/* ── Sidebar Collapse Button (desktop sidebar) ── */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 0;
    border: none;
    border-top: 1px solid #1D4C3D;
    border-bottom: 1px solid #1D4C3D;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    margin: 0;
    justify-content: flex-end; /* Right-align content */
}

.sidebar-collapse-btn span {
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    transition: opacity 0.15s ease 0.22s, max-width 0s ease 0.22s;
}

.sidebar-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 1);
}

.collapse-icon {
    flex-shrink: 0;
    transition: transform 0.26s ease;
}

/* ── Sidebar Header (brand + collapse button stacked) ── */
.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
    width: 100%;
}

.sidebar-logo-wrap {
    position: relative;
    height: 28px;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.26s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-logo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.26s ease;
    filter: brightness(0) invert(1);
}

.sidebar-logo-full {
    opacity: 1;
}

.sidebar-logo-icon {
    opacity: 0;
    object-position: center;
}

.sidebar-brand-sub {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    transition: opacity 0.15s ease 0.22s, max-width 0s ease 0.22s;
}

.sidebar-brand {
    position: relative;
}

.sidebar-brand-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    padding: 4px 0 0 0;
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    transition: opacity 0.15s ease 0.22s, max-width 0s ease 0.22s;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-brand-name-collapsed {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    opacity: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    transition: opacity 0.15s ease 0.22s;
}

.sidebar-divider {
    height: 0;
    border-top: 1px solid #1D4C3D;
    margin: 12px -20px;
    flex-shrink: 0;
}

.sidebar-sprint {
    padding: 4px 0 10px;
}

.sidebar-sprint .sprint-select-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.sidebar-sprint .sprint-selector {
    width: 100%;
    border-radius: 10px;
    height: 40px;
    padding: 0 36px 0 14px;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c7ff3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 12px,
        #0a2e1f;
    border: 1px solid rgba(199, 255, 58, 0.25);
    color: var(--text-light);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-sprint .sprint-selector:hover {
    border-color: rgba(199, 255, 58, 0.5);
}

.sidebar-sprint .sprint-selector:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(199, 255, 58, 0.12);
    outline: none;
}

.sidebar-sprint .sprint-selector option {
    background: #0a2e1f;
    color: var(--text-light);
}

/* ── Sidebar Footer ───────────────────────────────────────── */
.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-footer .last-updated {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    transition: opacity 0.25s ease, max-height 0.25s ease;
    max-height: 60px;
    overflow: hidden;
}

.refresh-btn span {
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
    transition: opacity 0.2s ease, max-width 0.28s ease;
}

.sidebar-footer .refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    gap: 8px; /* Add space between icon and text */
    font-size: 13px;
    font-weight: 600;
    padding: 15.5px 20px;
    margin-left: 0;
    width: 100%;
    min-height: 50px;
    border-radius: 0;
    border: none;
    border-top: 1px solid #1D4C3D;
    border-bottom: 1px solid #1D4C3D;
    background: var(--shell-bg);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    box-sizing: border-box;
}

.sidebar-footer .refresh-btn:hover {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 1);
}

/* ── Sidebar User ─────────────────────────────────────────── */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #1D4C3D;
    min-height: 48px;
    overflow: hidden;
}

.sidebar-user-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: #0F8264;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

.sidebar-user-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s ease, max-width 0.28s ease;
}

.sidebar-user-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: color 150ms ease, background 150ms ease;
}

.sidebar-user-logout:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.app-shell.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

.app-shell.sidebar-collapsed .sidebar-user-name,
.app-shell.sidebar-collapsed .sidebar-user-logout {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

/* ── Sync Dot ─────────────────────────────────────────────── */
.sync-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    flex-shrink: 0;
    align-self: center;
    transition: background 0.4s ease, opacity 0.3s ease;
}

.app-shell.sidebar-collapsed .sync-dot {
    display: block;
}

.app-shell.sidebar-collapsed.syncing .sync-dot {
    background: #ef4444;
}

/* ── Main Wrapper ─────────────────────────────────────────── */
.main-wrapper {
    position: absolute;
    left: 220px;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: left 0.26s ease;
}

.app-shell.sidebar-collapsed .main-wrapper {
    left: 56px;
}

/* ── Top Bar ──────────────────────────────────────────────── */
.topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 56px;
    background: #f5f5f5;
    border-bottom: none;
    overflow: hidden;
    box-shadow: none;
}

.topbar-sprint span,
.topbar-nav-item,
.topbar-filters .filter-select {
    color: var(--text);
}

.topbar-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#filterGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#filterGroup .cs-wrapper {
    flex-shrink: 0;
    min-width: 160px;
    width: auto;
}


.topbar-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--text-light);
    border-radius: var(--radius);
    border: 1px solid #d0d0d0;
    padding: 5px;
    flex: 0 0 auto;
}

.topbar-nav-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
}

.topbar-nav-item:hover {
    background: #f5f5f5;
    color: var(--text);
}

.topbar-nav-item.active {
    background: #e0e0e0;
    color: var(--text);
}



/* ── Main Content ─────────────────────────────────────────── */
.main-content {
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
    scroll-behavior: smooth;
}

.page-inner {
    padding: var(--gap) calc(var(--gap) + 4px);
}

/* ── Content Sections ─────────────────────────────────────── */
.content-section {
    margin-bottom: var(--gap);
    scroll-margin-top: calc(56px + var(--gap));
}

.content-section:last-child {
    margin-bottom: 0;
    padding-bottom: var(--gap);
}

/* Tasks group-grid: no extra top margin */
#section-tasks .group-grid {
    margin-top: 0;
}

/* Sidebar filters stacked */
.sidebar-filters {
    padding: 4px 0 8px;
}

.sidebar-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    padding: 0 4px 10px;
}

.filter-group-col {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.filter-group-col .filter-select {
    width: 100%;
    border-radius: 0;
    height: 38px;
    padding: 0 32px 0 12px;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c7ff3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center / 11px,
        #0a2e1f;
    border: 1px solid rgba(199, 255, 58, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-group-col .filter-select:hover {
    border-color: rgba(199, 255, 58, 0.45);
}

.filter-group-col .filter-select:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(199, 255, 58, 0.12);
    outline: none;
}

.filter-group-col .filter-select option {
    background: #0a2e1f;
    color: var(--text-light);
}

.filter-group-col .filter-select.active {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center / 11px,
        var(--lime);
    color: #000000;
    border-color: var(--lime);
    font-weight: 700;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 0;
}

/* Nav items as anchor links */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    color: rgba(255, 255, 255, 0.6);
}

.nav-item span {
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    max-width: 200px;
    transition: opacity 0.15s ease 0.22s, max-width 0s ease 0.22s;
}

.nav-item:hover {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 1);
}

.nav-item.active {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 1);
    border-color: transparent;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo {
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.brand-copy h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-light);
}

.top-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.topbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 15.5px 20px;
    width: 100%;
    gap: 12px;
    transition: width 0.28s ease, height 0.28s ease, padding 0.28s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: width 0.28s ease, height 0.28s ease;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
    margin-left: 0;
    transition: opacity 0.15s ease 0.22s, max-width 0s ease 0.22s, margin 0s ease 0.22s;
}

.sign-out-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    max-width: 50px;
    flex-shrink: 0;
    margin-left: auto;
    transition: color 0.15s ease, opacity 0.15s ease 0.22s, max-width 0s ease 0.22s, margin 0s ease 0.22s;
}

.app-shell.sidebar-collapsed .user-name,
.app-shell.sidebar-collapsed .sign-out-btn {
    display: none !important;
}

.sign-out-btn:hover {
    color: var(--lime);
}

.controls-divider {
    height: 1px;
    background: rgba(199, 255, 58, 0.18);
    margin: 14px 0 0 0;
}

.controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0 0;
}

.controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .filter-select styles unified with .sprint-selector below */

.chip {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: var(--sm);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(236, 245, 242, 0.35);
    white-space: nowrap;
    color: var(--text-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chip strong {
    color: var(--lime);
    margin-right: 6px;
}

.sprint-select-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sprint-select-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lime);
    white-space: nowrap;
}

.sprint-selector,
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    text-decoration: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center / 11px,
        var(--text-light);
    transition: all 0.2s ease;
}

.sprint-selector:hover,
.filter-select:hover {
    border-color: #c1c1c1;
    background-color: #f5f5f5;
}

.sprint-selector:focus,
.filter-select:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(199, 255, 58, 0.15);
    outline: none;
}

.sprint-selector option,
.filter-select option {
    background: var(--text-light);
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    padding: 8px 12px;
}

.filter-select.active {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center / 11px,
        var(--text-light);
    color: var(--text);
    border-color: #e0e0e0;
    font-weight: 700;
}

/* ── Custom Sidebar Dropdowns (.cs-*) ────────────────────── */
.cs-wrapper {
    position: relative;
    width: 100%;
}

.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #0a2e1f;
    border: 1px solid rgba(199, 255, 58, 0.22);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-trigger:hover {
    border-color: rgba(199, 255, 58, 0.5);
}

.cs-wrapper.cs-open .cs-trigger {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(199, 255, 58, 0.12);
}

.cs-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-placeholder-label {
    color: rgba(255, 255, 255, 0.4);
}

.cs-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.cs-wrapper.cs-open .cs-arrow {
    transform: rotate(180deg);
}

.cs-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0b3321;
    border: 1px solid rgba(199, 255, 58, 0.2);
    border-radius: 14px;
    padding: 6px;
    z-index: 9999;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow-y: auto;
    max-height: 220px;
}

.cs-wrapper.cs-open .cs-panel {
    display: block;
    animation: cs-fade-in 0.12s ease;
}

@keyframes cs-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-option:hover {
    background: rgba(199, 255, 58, 0.1);
    color: var(--text-light);
}

.cs-option.cs-selected {
    color: var(--lime);
    font-weight: 700;
    background: rgba(199, 255, 58, 0.07);
}

.cs-option.cs-placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.cs-divider {
    height: 1px;
    background: var(--lime);
    margin: 4px 6px;
    opacity: 0.4;
    border-radius: 1px;
}

.sidebar-sprint .cs-trigger {
    height: 40px;
    font-size: 14px;
}

.last-updated {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.updated-dot {
    color: var(--lime);
    font-size: 16px;
    font-weight: 800;
    margin: 0 6px;
    vertical-align: middle;
}

.updated-time {
    color: var(--lime);
    font-weight: 700;
}

.list-name-cell {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    opacity: 0.8;
}

.refresh-btn {
    appearance: none;
    cursor: pointer;
    margin-left: 8px;
    border: 1px solid rgba(199, 255, 58, 0.5);
    background: rgba(199, 255, 58, 0.22);
    color: var(--text-light);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: var(--sm);
    font-weight: 700;
    font-family: "Plus Jakarta Sans", sans-serif;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.refresh-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.folder-btn {
    appearance: none;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid rgba(236, 245, 242, 0.35);
    background: rgba(255, 255, 255, 0.08);
    font-family: inherit;
    font-size: var(--sm);
    font-weight: 600;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
}

.folder-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-light);
}

.folder-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.folder-picker-card {
    background: #0c3d2b;
    border: 1px solid rgba(199, 255, 58, 0.3);
    border-radius: 16px;
    padding: 28px 32px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.folder-picker-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--lime);
    letter-spacing: -0.02em;
}

.folder-picker-card p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.folder-picker-card input {
    padding: 10px 14px;
    border-radius: 0;
    border: 1px solid rgba(199, 255, 58, 0.4);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-light);
    font-family: inherit;
    font-size: var(--sm);
    outline: none;
}

.folder-picker-card input:focus {
    border-color: var(--lime);
}

.folder-picker-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.folder-picker-actions button {
    appearance: none;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--sm);
    font-weight: 700;
    border: 1px solid rgba(199, 255, 58, 0.5);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
}

.folder-picker-actions button.primary {
    background: rgba(199, 255, 58, 0.22);
    color: var(--text-light);
}

.folder-picker-actions button:hover {
    opacity: 0.85;
}

.rocks-section {
    background: #0c3d2b;
    border: 1px solid rgba(199, 255, 58, 0.25);
    border-radius: var(--radius);
    padding: var(--gap);
    margin-bottom: var(--gap);
    box-shadow: var(--shadow);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--text-light);
    position: relative;
}

.rocks-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--gap);
    gap: 8px;
}

.rocks-header h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--text-light);
}

.rocks-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-align: left;
}

.rocks-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Shared: status dot colors ────── */
.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ld-not-started { background: var(--brand-dark-moss); }
.ld-on-track    { background: var(--brand-cactus-green); }
.ld-at-risk     { background: var(--brand-orange); }
.ld-off-track   { background: var(--brand-red); }
.ld-completed   { background: var(--brand-soft-jade); }
.ld-canceled    { background: var(--brand-storm-silver); }

/* ── Horizontal Gantt (VTL) ──────── */
.vtl-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Legend */
.vtl-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    padding: 0;
    background: transparent;
    border-radius: 10px;
    border: none;
}

.vtl-legend-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.vtl-legend-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    white-space: nowrap;
    margin-right: 2px;
}

.vtl-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.vtl-legend-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-light);
    flex-shrink: 0;
}

.vtl-legend-text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.vtl-legend-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    align-self: center;
    flex-shrink: 0;
}

/* Gantt wrapper */
.vtl-gantt {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none;
    overflow: hidden;
}

/* Header row */
.vtl-gantt-header {
    display: flex;
    height: 44px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.vtl-label-col {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.vtl-track-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.vtl-month-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    padding-left: 12px;
    pointer-events: none;
}

.vtl-today-label {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lime);
    white-space: nowrap;
    pointer-events: none;
}

/* Body */
.vtl-gantt-body {
    display: flex;
    flex-direction: column;
    position: relative;
}

.vtl-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--lime);
    opacity: 0.4;
    z-index: 10;
    pointer-events: none;
}

.vtl-today-line::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    opacity: 0.85;
}

/* Rows */
.vtl-row {
    display: flex;
    align-items: stretch;
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.1s ease;
}

.vtl-row:last-child {
    border-bottom: none;
}

.vtl-row:hover .vtl-row-label,
.vtl-row:hover .vtl-row-track {
    background: rgba(255, 255, 255, 0.025);
}

.vtl-row-label {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.14);
    transition: background 0.1s ease;
}

.vtl-row-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(220, 232, 242, 0.95);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtl-row-track {
    background: rgba(0, 0, 0, 0.06);
    transition: background 0.1s ease;
}

/* Grid lines (month boundaries) */
.vtl-grid-line {
    position: absolute;
    top: -44px;
    bottom: 0;
    width: 1px;
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Bars */
.vtl-bar {
    position: absolute;
    top: 10px;
    bottom: 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(18, 28, 20, 0.92);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 34px 0 16px;
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    min-width: 10px;
}

.vtl-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 7px 0 0 7px;
    background: rgba(255, 255, 255, 0.25);
}

.vtl-bar:hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.vtl-bar-name {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.vtl-bar-avatar {
    position: absolute;
    bottom: 50%;
    right: 7px;
    transform: translateY(50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-light);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    letter-spacing: 0;
}

/* Bar status colors */
.rock-status-not-started.vtl-bar {
    background: rgba(29, 76, 61, 0.18);
    border-color: rgba(29, 76, 61, 0.3);
}
.rock-status-not-started.vtl-bar::before { background: var(--rock-not-started); }

.rock-status-on-track.vtl-bar {
    background: rgba(15, 130, 100, 0.14);
    border-color: rgba(15, 130, 100, 0.32);
    box-shadow: 0 2px 12px rgba(15, 130, 100, 0.1);
}
.rock-status-on-track.vtl-bar::before { background: var(--rock-on-track); }

.rock-status-at-risk.vtl-bar {
    background: rgba(201, 122, 58, 0.14);
    border-color: rgba(201, 122, 58, 0.32);
    box-shadow: 0 2px 12px rgba(201, 122, 58, 0.1);
}
.rock-status-at-risk.vtl-bar::before { background: var(--rock-at-risk); }

.rock-status-off-track.vtl-bar {
    background: rgba(216, 74, 56, 0.14);
    border-color: rgba(216, 74, 56, 0.32);
    box-shadow: 0 2px 12px rgba(216, 74, 56, 0.1);
}
.rock-status-off-track.vtl-bar::before { background: var(--rock-off-track); }

.rock-status-completed.vtl-bar {
    background: rgba(11, 168, 138, 0.14);
    border-color: rgba(11, 168, 138, 0.32);
    box-shadow: 0 2px 12px rgba(11, 168, 138, 0.1);
}
.rock-status-completed.vtl-bar::before { background: var(--rock-completed); }

.rock-status-canceled.vtl-bar {
    background: rgba(193, 193, 193, 0.14);
    border-color: rgba(193, 193, 193, 0.26);
    opacity: 0.6;
}
.rock-status-canceled.vtl-bar::before { background: var(--rock-canceled); }

/* ── Empty / placeholder ──────────── */
.roadmap-empty {
    text-align: center;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

.rock-card.placeholder {
    padding: 20px 24px;
    border: 1px solid rgba(199, 255, 58, 0.1);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.4);
}

.rock-card.placeholder h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.rock-card.placeholder p {
    margin: 0;
    font-size: 13px;
}

/* ── Responsive ───────────────────── */
@media (max-width: 1080px) {
    .rocks-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.card {
    background: var(--text-light);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.card-pad {
    padding: var(--gap);
}

.kpi {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--line);
}

.kpi .label {
    color: var(--muted);
    font-size: var(--xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.kpi .value {
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.kpi .delta {
    color: var(--brand-cactus-green);
    font-size: var(--sm);
    font-weight: 600;
}


.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.analytics-grid .card {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.analytics-grid .card:not(.chart-card) {
    justify-content: flex-end;
}

.analytics-grid .card:not(.chart-card) .health-list {
    margin-top: auto;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-title h2,
.section-title h5 {
    margin: 0;
    letter-spacing: -0.01em;
}

.section-title h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-title h5 {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Charts ───────────────────────────────────────────────── */
.chart-wrap {
    height: auto;
    flex: 1;
    padding-top: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#pointsBar {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.custom-stacked-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
    min-height: 0;
    gap: 12px;
    align-items: flex-end;
}

.bar-segment {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    flex: 1;
    height: 100%;
    gap: 8px;
    transition: opacity 0.2s ease;
}

.bar-segment:hover {
    opacity: 0.85;
}

.bar-segment-fill {
    width: 100%;
    border-radius: var(--radius);
}

.bar-above-label {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.bar-segment-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    word-break: break-word;
}

.card.chart-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 24px !important;
}

.card.chart-card .section-title {
    padding: 0 0 12px 0;
}

.chart-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.chart-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.chart-meta-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.chart-meta-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Group Grid ───────────────────────────────────────────── */
.group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

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

.group-item {
    padding: var(--gap);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--text-light);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-item.secondary {
    background: var(--bg);
}

.group-item.card-pad {
    padding: var(--gap);
}

.group-item.card-pad-sm {
    padding: 16px 20px;
}

.group-card {
    grid-column: 1 / -1;
}

.group-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}

.group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.group-description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

/* ── Form Controls ────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-label .optional-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

.form-control input,
.form-control textarea,
.form-control select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--text-light);
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control input:focus,
.form-control textarea:focus,
.form-control select:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(199, 255, 58, 0.12);
}

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

.form-control select {
    appearance: none;
    -webkit-appearance: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 12px,
        var(--text-light);
}

.form-control select:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.form-control select option {
    background: var(--text-light);
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.form-actions button {
    appearance: none;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background: var(--line);
    color: var(--muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.form-actions button:hover {
    background: #d1d1d1;
    color: var(--text);
}

.form-actions button.primary {
    background: var(--lime);
    color: var(--text);
}

.form-actions button.primary:hover {
    background: #c0f200;
}

.form-message {
    font-size: 13px;
    color: #ef4444;
    margin-top: 8px;
}

/* ── Custom Selects (.cs-*) ───────────────────────────────── */
.cs-wrapper {
    position: relative;
}

.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--text-light);
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-trigger:hover {
    border-color: #c1c1c1;
}

.cs-wrapper.cs-open .cs-trigger {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(199, 255, 58, 0.12);
}

.cs-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-placeholder-label {
    color: var(--muted);
    font-style: italic;
}

.cs-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.cs-wrapper.cs-open .cs-arrow {
    transform: rotate(180deg);
}

.cs-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--text-light);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 4px;
    z-index: 9999;
    box-shadow: var(--shadow);
    overflow-y: auto;
    max-height: 220px;
}

.cs-wrapper.cs-open .cs-panel {
    display: block;
    animation: cs-fade-in 0.12s ease;
}

@keyframes cs-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-option:hover {
    background: rgba(0, 0, 0, 0.15);
    color: var(--text);
}

.cs-option.cs-selected {
    color: var(--lime);
    font-weight: 700;
    background: rgba(199, 255, 58, 0.07);
}

.cs-option.cs-placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.cs-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
}

/* ── Sprint Health ────────────────────────────────────────── */
.health-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.health-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.health-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.bar {
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.bar-stacked span {
    height: 100%;
    transition: width 0.3s ease;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

/* ── Tabbed Cards (Workload & Tasks) ─────────────────────── */
.tabbed-card {
    display: flex;
    flex-direction: column;
}

.tab-bar {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #eeeeee;
    color: var(--text);
    border-bottom: 1px solid #e0e0e0;
    border-radius: var(--radius) var(--radius) 0 0;
}

.tab-body {
    padding: 24px;
}

.group-card .tab-body {
    padding: 0;
}

/* ── Workload Table ──────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

th {
    text-align: left;
    padding: 12px 20px;
    background: #fdfdfd;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

thead th:first-child {
    border-radius: 8px 0 0 0;
}

thead th:last-child {
    border-radius: 0 8px 0 0;
}

td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

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

.task-name {
    font-weight: 600;
}

.capacity-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
}

.capacity-good { background: rgba(109, 179, 66, 0.15); color: #6DB342; }   /* Green */
.capacity-mid  { background: rgba(232, 162, 37, 0.15); color: #E8A225; }      /* Yellow */
.capacity-high { background: rgba(216, 74, 56, 0.15); color: #D84A38; }       /* Red */
.capacity-over { background: #D84A38; color: var(--text-light); }                       /* Red */

/* ── Workload Grid ──────────────────────────────────────── */
.workload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    width: 100%;
}

.workload-card {
    background: var(--text-light);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.workload-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.workload-util {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

.workload-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.metric-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.workload-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar.stacked {
    display: flex;
    gap: 0;
}

.progress-category {
    height: 100%;
    display: flex;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-category:last-child {
    border-right: none;
}

.progress-category.category-rock       { background: rgba(15, 130, 100, 0.2); }
.progress-category.category-initiative { background: rgba(123, 75, 149, 0.2); }
.progress-category.category-milestone  { background: rgba(201, 122, 58, 0.2); }
.progress-category.category-quickwin   { background: rgba(232, 197, 71, 0.2); }
.progress-category.category-task       { background: rgba(59, 111, 143, 0.2); }

.progress-fill {
    height: 100%;
    background: var(--status-progress);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-segment {
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}

.progress-segment.category-rock       { background: var(--category-rock-color); }
.progress-segment.category-initiative { background: var(--category-initiative-color); }
.progress-segment.category-milestone  { background: var(--category-milestone-color); }
.progress-segment.category-quickwin   { background: var(--category-quickwin-color); }
.progress-segment.category-task       { background: var(--category-task-color); }

.progress-label {
    font-size: 11px;
    color: var(--muted);
}

.workload-capacity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.capacity-bar {
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.capacity-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.capacity-fill.capacity-good { background: #6DB342; }
.capacity-fill.capacity-mid { background: #E8A225; }
.capacity-fill.capacity-over { background: #D84A38; }

.capacity-label {
    font-size: 11px;
    color: var(--muted);
}

/* ── All Items Task Grid ─────────────────────────────────── */
.task-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

.task-header-row {
    display: grid;
    grid-template-columns: 2fr 150px 150px 160px;
    background: #fdfdfd;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}

.task-th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    position: relative;
}

.status-group-row {
    display: grid;
    grid-template-columns: 1fr;
    padding: 12px 16px;
    background: #f8faf9;
    border-bottom: 1px solid var(--line);
}

.status-group-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-group-count {
    margin-left: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.task-row {
    display: grid;
    grid-template-columns: 2fr 150px 150px 160px;
    border-bottom: 1px solid var(--line);
    transition: background 0.1s ease;
}

.task-row:hover {
    background: #f9f9f9;
}

.task-cell {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.task-name-cell {
    overflow: hidden;
}

.task-name-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.task-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.av-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    flex-shrink: 0;
}

.priority-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-urgent { color: #D84A38; }  /* Rust */
.priority-high   { color: #E8A225; }  /* Ochre */
.priority-normal { color: #6B8FC9; }  /* Slate */
.priority-low    { color: #A8A3A0; }  /* Stone */

.category-status-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s ease;
    color: var(--text-light);
}

.category-status-btn:hover {
    transform: scale(1.1);
}

.category-rock       { background: var(--category-rock-color); }
.category-initiative { background: var(--category-initiative-color); }
.category-milestone  { background: var(--category-milestone-color); }
.category-quickwin   { background: var(--category-quickwin-color); }
.category-task       { background: var(--category-task-color); }

/* Status coloring for group headers and task left-borders */
.status-ondeck   .status-group-label { color: var(--status-ondeck); }
.status-scoping  .status-group-label { color: var(--status-scoping); }
.status-progress .status-group-label { color: var(--status-progress); }
.status-feedback .status-group-label { color: var(--status-feedback); }
.status-blocked  .status-group-label { color: var(--status-blocked); }
.status-approval .status-group-label { color: var(--status-approval); }
.status-hold     .status-group-label { color: var(--status-hold); }
.status-done     .status-group-label { color: var(--status-done); }

/* Status group header backgrounds */
.status-group-row.status-ondeck   { background: rgba(168,163,160, 0.30); }
.status-group-row.status-scoping  { background: rgba(123, 75,149, 0.30); }
.status-group-row.status-progress { background: rgba( 59,111,143, 0.30); }
.status-group-row.status-feedback { background: rgba(201,122, 58, 0.30); }
.status-group-row.status-blocked  { background: rgba(216, 74, 56, 0.35); }
.status-group-row.status-approval { background: rgba(232,197, 71, 0.30); }
.status-group-row.status-hold     { background: rgba(107, 66, 38, 0.30); }
.status-group-row.status-done     { background: rgba( 15,130,100, 0.30); }

/* Row-level status coloring via left border accent */
.task-row.status-ondeck   { border-left: 3px solid var(--status-ondeck);   background: rgba(168,163,160,0.04); }
.task-row.status-scoping  { border-left: 3px solid var(--status-scoping);  background: rgba(123, 75,149,0.04); }
.task-row.status-progress { border-left: 3px solid var(--status-progress); background: rgba( 59,111,143,0.04); }
.task-row.status-feedback { border-left: 3px solid var(--status-feedback); background: rgba(201,122, 58,0.04); }
.task-row.status-blocked  { border-left: 3px solid var(--status-blocked);  background: rgba(216, 74, 56,0.06); }
.task-row.status-approval { border-left: 3px solid var(--status-approval); background: rgba(232,197, 71,0.04); }
.task-row.status-hold     { border-left: 3px solid var(--status-hold);     background: rgba(107, 66, 38,0.04); }
.task-row.status-done     { border-left: 3px solid var(--status-done);     background: rgba( 15,130,100,0.04); opacity: 0.7; }

/* ── Extended Color Utility Classes ────────────────────────────── */

/* Background colors */
.bg-purple { background: var(--brand-purple); }
.bg-blue { background: var(--brand-blue); }
.bg-yellow { background: var(--brand-yellow); }
.bg-orange { background: var(--brand-orange); }
.bg-red { background: var(--brand-red); }
.bg-cactus { background: var(--brand-cactus-green); }
.bg-jade { background: var(--brand-soft-jade); }
.bg-lime { background: var(--brand-electric-lime); }

/* Text colors */
.text-purple { color: var(--brand-purple); }
.text-blue { color: var(--brand-blue); }
.text-yellow { color: var(--brand-yellow); }
.text-orange { color: var(--brand-orange); }
.text-red { color: var(--brand-red); }
.text-cactus { color: var(--brand-cactus-green); }
.text-jade { color: var(--brand-soft-jade); }
.text-lime { color: var(--brand-electric-lime); }

/* Border colors */
.border-purple { border-color: var(--brand-purple); }
.border-blue { border-color: var(--brand-blue); }
.border-yellow { border-color: var(--brand-yellow); }
.border-orange { border-color: var(--brand-orange); }
.border-red { border-color: var(--brand-red); }

/* All Items Legend in tab-bar */
.all-items-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.ail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666666;
}

.ail-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.ail-icon svg { width: 10px; height: 10px; }

/* Column Resizing */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 10;
}

.col-resize-handle:hover {
    background: var(--lime);
}

/* ── Custom Selects (Light Topbar) ── */
#filterGroup .cs-wrapper,
#topMeta .cs-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
}

#filterGroup .cs-trigger,
#topMeta .cs-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px 0 13px;
    background: var(--text-light);
    border: 1px solid #C1C1C1;
    border-radius: var(--radius);
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#filterGroup .cs-trigger:hover,
#topMeta .cs-trigger:hover {
    border-color: #a1a1a1;
    background: #fdfdfd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#filterGroup .cs-wrapper.cs-open .cs-trigger,
#topMeta .cs-wrapper.cs-open .cs-trigger {
    border-color: var(--text);
    background: var(--text-light);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

#filterGroup .cs-arrow,
#topMeta .cs-arrow {
    display: flex;
    align-items: center;
    color: var(--muted);
    margin-left: 2px;
    flex-shrink: 0;
}

#filterGroup .cs-trigger-label,
#topMeta .cs-trigger-label {
    flex: 1;
}

#filterGroup .cs-placeholder-label,
#topMeta .cs-placeholder-label {
    color: var(--muted);
}

#filterGroup .cs-panel,
#topMeta .cs-panel {
    display: none;
}

.cs-topbar-panel {
    background: var(--text-light);
    border: 1px solid #C1C1C1;
    border-radius: 12px;
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 4px;
    overflow-y: auto;
}

.cs-topbar-panel .cs-option {
    display: flex;
    align-items: center;
    border-radius: 8px;
    width: 100%;
    padding: 7px 11px;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease;
    box-sizing: border-box;
}

.cs-topbar-panel .cs-option:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
}

.cs-topbar-panel .cs-option.cs-selected {
    color: var(--text);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.04);
}

.cs-topbar-panel .cs-option.cs-placeholder {
    color: var(--muted);
}

.cs-topbar-panel .cs-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 3px 8px;
}

/* ── Status Picker Dropdown ────────────────────────────────── */
.status-picker {
    position: fixed;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    min-width: 180px;
    padding: 6px 0;
}

.status-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.status-picker-item:hover {
    background-color: #F5F5F5;
}

.status-picker-item.active {
    background-color: #f5f5f5;
    font-weight: 500;
}

.status-picker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-picker-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
}

/* ── Roadmap fullscreen layout ──────────────────────────────── */
[data-page="roadmap"] .main-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f5f5f5;
    position: relative;
    padding-left: 0;
}

[data-page="roadmap"] .page-inner {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[data-page="roadmap"] .content-section {
    flex: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[data-page="roadmap"] .rocks-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    border: none;
    background: #fff;
    box-shadow: none;
}

[data-page="roadmap"] .rocks-header {
    display: none;
}

[data-page="roadmap"] .rocks-list {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

[data-page="roadmap"] .vtl-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

/* Legend — light mode */
[data-page="roadmap"] .vtl-legend {
    padding: 10px 20px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
    background: #fff;
}

[data-page="roadmap"] .vtl-legend-label {
    color: #888;
}

[data-page="roadmap"] .vtl-legend-item {
    color: #333;
}

[data-page="roadmap"] .vtl-legend-text {
    color: #555;
}

[data-page="roadmap"] .vtl-legend-divider {
    background: #e0e0e0;
}

/* Gantt — light mode, full-page, wide timeline */
[data-page="roadmap"] .vtl-gantt {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

[data-page="roadmap"] .vtl-gantt-header {
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    min-width: max(100%, 1800px);
    flex-shrink: 0;
    height: 52px;
}

[data-page="roadmap"] .vtl-label-col {
    border-right: 1px solid #e0e0e0;
}

[data-page="roadmap"] .vtl-gantt-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    min-height: 0;
    min-width: max(100%, 1800px);
    background: #fff;
    padding-top: 8px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

[data-page="roadmap"] .vtl-row {
    border-bottom: 1px solid #f0f0f0;
    min-height: 64px;
    margin: 0 12px;
}

/* Filler row stretches to fill remaining body height */
[data-page="roadmap"] .vtl-row-filler {
    flex: 1;
    min-height: 0;
    border-bottom: none;
    pointer-events: none;
}

[data-page="roadmap"] .vtl-row-filler .vtl-grid-line {
    top: 0;
}

[data-page="roadmap"] .vtl-row:hover .vtl-row-track {
    background: rgba(0, 0, 0, 0.015);
}

[data-page="roadmap"] .vtl-row-label {
    background: #fafafa;
}

[data-page="roadmap"] .vtl-row-name {
    color: #1a1a1a;
}

[data-page="roadmap"] .vtl-row-track {
    background: transparent;
}

[data-page="roadmap"] .vtl-grid-line {
    background: #e8e8e8;
    top: -52px;
}

[data-page="roadmap"] .vtl-bar {
    top: 8px;
    bottom: 8px;
    border-radius: 6px;
}

[data-page="roadmap"] .vtl-bar-name {
    color: #fff;
    font-size: 13px;
}

[data-page="roadmap"] .vtl-bar-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

[data-page="roadmap"] .vtl-month-label {
    font-size: 11px;
    top: auto;
    bottom: 6px;
    transform: none;
    color: #999;
    font-weight: 700;
}

[data-page="roadmap"] .vtl-quarter-label {
    top: 8px;
    font-size: 11px;
}

/* ── Roadmap year navigation ────────────────────────────────── */
.roadmap-year-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.roadmap-year-float {
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    padding: 4px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.roadmap-year-float .roadmap-year-btn {
    color: #1a1a1a;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

.roadmap-year-float .roadmap-year-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

.roadmap-year-float .roadmap-year-label {
    color: #1a1a1a;
    font-size: 12px;
}

.roadmap-year-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 5px 7px;
    transition: background 0.15s, color 0.15s;
}

.roadmap-year-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.roadmap-year-label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    min-width: 100px;
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ── Roadmap quarter bands ──────────────────────────────────── */
.vtl-quarter-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.03);
    pointer-events: none;
    z-index: 0;
}

.vtl-row-quarter-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.025);
    pointer-events: none;
    z-index: 0;
}

.vtl-quarter-label {
    position: absolute;
    top: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.2);
    padding-left: 8px;
    pointer-events: none;
    z-index: 1;
}

/* ── View Toggle Switch (Stats ↔ Tasks) ─────────────────────── */

/* Bar status colors — solid for light background */
[data-page="roadmap"] .rock-status-not-started.vtl-bar {
    background: #1D4C3D;
    border-color: #144034;
    box-shadow: 0 2px 8px rgba(29, 76, 61, 0.3);
}
[data-page="roadmap"] .rock-status-on-track.vtl-bar {
    background: #0F8264;
    border-color: #0a6b52;
    box-shadow: 0 2px 8px rgba(15, 130, 100, 0.3);
}
[data-page="roadmap"] .rock-status-at-risk.vtl-bar {
    background: #C97A3A;
    border-color: #a8622d;
    box-shadow: 0 2px 8px rgba(201, 122, 58, 0.3);
}
[data-page="roadmap"] .rock-status-off-track.vtl-bar {
    background: #D84A38;
    border-color: #b83c2c;
    box-shadow: 0 2px 8px rgba(216, 74, 56, 0.3);
}
[data-page="roadmap"] .rock-status-completed.vtl-bar {
    background: #0BA88A;
    border-color: #089070;
    box-shadow: 0 2px 8px rgba(11, 168, 138, 0.3);
}
[data-page="roadmap"] .rock-status-canceled.vtl-bar {
    background: #a0a0a0;
    border-color: #888;
    opacity: 0.7;
}

/* Today line — visible on light background */
[data-page="roadmap"] .vtl-today-line {
    background: var(--brand-cactus-green);
    opacity: 0.6;
}

[data-page="roadmap"] .vtl-today-line::before {
    background: var(--brand-cactus-green);
}

[data-page="roadmap"] .vtl-today-label {
    color: var(--brand-cactus-green);
}