/* ==========================================================================
   Overdrive / LEAD — Global Styles (enterprise tidy)
   ========================================================================== */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

/* --------------------------------------------------------------------------
   1) Tokens — Light
-------------------------------------------------------------------------- */
:root {
    --brand-blue: #087CC4;
    /* Neutrals & type */
    --bg: #F5F6F8;
    --card: #FFFFFF;
    --line: #DDE1E6;
    --text: #1F2328;
    --muted: #667085;
    --text-2: #445162;
    /* Status */
    --success: #1F8A5B;
    --warning: #B78300;
    --danger: #C54545;
    /* Radii & shadows */
    --radius: 12px;
    --shadow-sm: 0 4px 14px rgba(27,31,35,.05);
    --shadow-md: 0 10px 24px rgba(27,31,35,.08);
    /* Layout metrics */
    --content-max: 1600px;
    --gutter: 0;
    /* Tables */
    --tbl-font: .875rem;
    --th1-h: 42px;
    --th2-h: 42px;
    --th-bg: #F3F6FA;
    --filter-bg: #FFFFFF;
    /* Bootstrap bridge */
    --bs-primary: var(--brand-blue);
    --bs-success: var(--success);
    --bs-warning: #FFC107;
    --bs-danger: var(--danger);
    --bs-info: var(--brand-blue);
    --bs-body-bg: var(--bg);
    --bs-link-color: var(--brand-blue);
    /* Sidebar */
    --side-head-bg: #383d40; /* logo strip */
    --nav-w: 150px; /* desktop rail width */
    --nav-mobile-w: 264px; /* off-canvas width */
    /* Compact nav feel */
    --side-pad: 10px;
    --nav-gap: 4px;
    --nav-radius: 8px;
    --nav-pad-y: 6px;
    --nav-pad-x: 8px;
    --nav-font: .84rem;
    --nav-icon: 16px;
    --active-wash: #EAF3FF;
    --hover-wash: #F4F6FA;
    --active-border: #CFE4FF;
    --hover-border: #E5EAF0;
}

/* 2) Tokens — Dim */
html[data-theme="dim"],
body[data-theme="dim"] {
    --bg: #F2F3F5;
    --card: #FFFFFF;
    --line: #D6D8DC;
    --text: #1F2328;
    --muted: #5F6368;
    --shadow-sm: 0 4px 14px rgba(27,31,35,.05);
    --shadow-md: 0 10px 24px rgba(27,31,35,.07);
    --bs-primary: var(--brand-blue);
    --bs-link-color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   3) Base
-------------------------------------------------------------------------- */
html, body {
    height: 100%
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   4) Shell (sidebar + content)
-------------------------------------------------------------------------- */
.od-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0,1fr);
}

/* Sidenav (desktop) */
.sidenav {
    grid-column: 1;
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: var(--nav-w);
    width: var(--nav-w);
}

/* Content */
.od-main {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.canvas {
    margin-inline: 1px;
    padding: 10px;
}

/* --------------------------------------------------------------------------
   5) Off-canvas (phones)
-------------------------------------------------------------------------- */
@media (max-width:900px) {
    .od-shell {
        grid-template-columns: 1fr
    }

    .od-main {
        grid-column: 1 / -1
    }

    .sidenav {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--nav-mobile-w);
        min-width: var(--nav-mobile-w);
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 40;
    }

        .sidenav.is-open {
            transform: none
        }

    .scrim {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.28);
        display: none;
        z-index: 30;
    }

        .scrim.show {
            display: block
        }

    body.is-locked {
        overflow: hidden
    }
}

/* Desktop scrim safeguard */
@media (min-width:901px) {
    .scrim {
        display: none !important
    }
}

/* --------------------------------------------------------------------------
   6) Sidebar header (KEEP EXACT LOOK)
-------------------------------------------------------------------------- */
.s-head {
    margin: -12px -8px 10px -8px; /* full-bleed */
    padding: 5px;
    background: var(--side-head-bg);
    box-shadow: inset 0 -1px 0 var(--line);
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.logo-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.od-logo {
    height: 40px;
    display: block
}

.brandname {
    font-weight: 900;
    letter-spacing: .2px;
    margin: 0
}

.brandtag {
    color: var(--text);
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.2;
    margin: 0
}

/* --------------------------------------------------------------------------
   7) Navigation (compact, enterprise)
-------------------------------------------------------------------------- */
.sec-label {
    margin: 10px 6px 6px;
    font-size: .70rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7B8694;
    font-weight: 600;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: var(--nav-gap);
    padding: 2px;
}

    .nav a,
    .nav button {
        text-decoration: none !important;
        appearance: none;
        border: 1px solid transparent;
        background: transparent;
        display: grid;
        grid-template-columns: var(--nav-icon) 1fr;
        align-items: center;
        gap: 8px;
        padding: var(--nav-pad-y) var(--nav-pad-x);
        border-radius: var(--nav-radius);
        color: var(--text-2);
        font-weight: 700;
        font-size: var(--nav-font);
        letter-spacing: .01em;
        line-height: 1;
        cursor: pointer;
    }

.n-ico {
    width: var(--nav-icon);
    color: #5E6672;
    text-align: center;
}

/* Hover */
.nav a:hover,
.nav button:hover {
    background: var(--hover-wash);
    border-color: var(--hover-border);
    color: #243142;
}

/* Active (soft blue pill; no left rail) */
.nav .active,
.nav .is-active {
    background: var(--active-wash);
    border-color: var(--active-border);
    color: #0B5CA0;
    box-shadow: none;
}

/* Key-hint hidden for narrow rail */
.n-kbd {
    display: none
}

/* Footer bits in nav */
.s-foot {
    margin-top: auto;
    padding: 8px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
}

.toggler {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    padding: .42rem .65rem;
    font-weight: 800;
    cursor: pointer;
}

    .toggler:hover {
        background: #F3F4F6;
        border-color: #C9CCD2
    }

.shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5E6773;
    font-weight: 700;
    font-size: .82rem;
    padding: 8px 10px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: #FAFBFC;
}

/* --------------------------------------------------------------------------
   8) Generic UI
-------------------------------------------------------------------------- */
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card.g-glass {
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(8px) saturate(1.06);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}

    .card.g-glass .card-header {
        border-radius: 1rem 1rem 0 0
    }

.btn, .form-control, .form-select {
    border: 1px solid var(--line) !important;
    background: #fff;
    color: var(--text);
    border-radius: 10px;
}

.btn {
    font-weight: 800
}

    .btn:hover {
        background: #F3F4F6;
        border-color: #C9CCD2 !important
    }

a {
    color: var(--brand-blue);
    text-decoration: none
}

.canvas a:hover {
    text-decoration: underline
}

/* Tables */
.table-responsive {
    max-height: 60vh;
    overflow: auto
}

.inv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

    .inv-table th, .inv-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: .45rem .6rem;
        vertical-align: middle;
        font-size: var(--tbl-font);
        border-top: 1px solid var(--line);
    }

    .inv-table thead th {
        position: relative;
        padding-right: 1.4rem;
        font-weight: 700;
        line-height: 1.25;
        background: var(--th-bg);
        border-top: none;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
    }

    .inv-table thead .filters-row th {
        cursor: default;
        padding-top: .35rem;
        padding-bottom: .35rem;
        background: var(--filter-bg);
    }

    .inv-table thead th .sort-caret {
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(0,0,0,.35);
        pointer-events: none;
    }

    .inv-table thead th.is-sorted, .is-sorted {
        color: var(--brand-blue)
    }

/* Badges */
.badge.status-badge {
    padding: .35rem .55rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
}

.bg-primary-soft {
    background: color-mix(in srgb,var(--brand-blue) 15%,white);
    color: #0b386e;
    border: 1px solid color-mix(in srgb,var(--brand-blue) 25%,white);
}

.bg-success-soft {
    background: color-mix(in srgb,var(--success) 15%,white);
    color: #0b5b2a;
    border: 1px solid color-mix(in srgb,var(--success) 25%,white);
}

.bg-danger-soft {
    background: color-mix(in srgb,var(--danger) 15%,white);
    color: #7a1520;
    border: 1px solid color-mix(in srgb,var(--danger) 25%,white);
}

/* Overlays / skeleton / tooltips */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.loading-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
    text-align: center;
}

.skeleton-bar {
    display: inline-block;
    height: .9rem;
    border-radius: .25rem;
    background: #f2f4f8;
    background-image: linear-gradient(90deg,#f2f4f8 0,#e9edf3 40%,#f2f4f8 80%);
    background-size: 600px 100%;
    animation: shimmer 1.2s infinite linear;
}

@keyframes shimmer {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 600px 0
    }
}

.tooltip.rich-tip {
    opacity: 1 !important
}

    .tooltip.rich-tip .tooltip-inner {
        max-width: 520px;
        padding: .5rem .75rem;
        background: #fff;
        color: #0f172a;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: .5rem;
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
        text-align: left;
        white-space: normal;
        max-height: none;
        overflow: visible;
    }

/* Utilities */
.font-sm {
    --tbl-font: .75rem;
    --th1-h: 38px;
    --th2-h: 38px
}

.font-md {
    --tbl-font: .875rem
}

.font-lg {
    --tbl-font: 1rem;
    --th1-h: 46px;
    --th2-h: 46px
}

.component-row {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center
}

.kpi .kpi-label {
    font-size: .875rem;
    color: #6A6E75
}

.kpi .kpi-value {
    font-size: 1.25rem;
    font-weight: 800
}

/* Optional tiny header strip */
.strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}

.m-menu {
    display: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    padding: .45rem .7rem;
    font-weight: 900;
    cursor: pointer;
}

    .m-menu:hover {
        background: #F3F4F6
    }

@media (max-width:900px) {
    .m-menu {
        display: inline-flex
    }
}

/* Footer */
.site-footer, .od-foot {
    border-top: 1px solid var(--line);
    background: var(--card);
    padding: .75rem 0;
}







































/* GanttChart.razor.css or wwwroot/css/gantt-chart.css */
/* ==========================================================================
   Gantt Chart Component Styles - Complete CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables (inherits from Site.css but redeclared for standalone use)
   -------------------------------------------------------------------------- */
:root {
    --brand-blue: #087CC4;
    --bg: #F5F6F8;
    --card: #FFFFFF;
    --line: #DDE1E6;
    --text: #1F2328;
    --muted: #667085;
    --text-2: #445162;
    --success: #1F8A5B;
    --warning: #B78300;
    --danger: #C54545;
    --radius: 12px;
    --shadow-sm: 0 4px 14px rgba(27,31,35,.05);
    --shadow-md: 0 10px 24px rgba(27,31,35,.08);
    /* Gantt specific variables */
    --row-height: 42px;
    --header-height: 80px;
    --sidebar-width: 380px;
    --cell-padding: 8px;
    --weekend-bg: #F8F9FA;
    --today-line: #FF6B6B;
    --milestone-color: #9333EA;
    --critical-path: #DC2626;
    --hover-bg: #FAFBFC;
    --selected-bg: #EBF5FF;
    --selected-border: #087CC4;
    --task-bar-height: 28px;
    --resize-handle-width: 8px;
}

/* --------------------------------------------------------------------------
   Main Container
   -------------------------------------------------------------------------- */
.gantt-container {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.gantt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom, #FFFFFF, #FAFBFC);
    min-height: 56px;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gantt-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 16px 0 0;
    letter-spacing: -0.02em;
}

/* Buttons */
.btn {
    padding: 6px 12px;
    border: 1px solid var(--line);
    background: white;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    font-family: inherit;
    white-space: nowrap;
}

    .btn:hover {
        background: #F3F4F6;
        border-color: #C9CCD2;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .btn.active {
        background: var(--brand-blue);
        color: white;
        border-color: var(--brand-blue);
    }

        .btn.active:hover {
            background: #0968A8;
            border-color: #0968A8;
        }

.btn-primary {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

    .btn-primary:hover {
        background: #0968A8;
        border-color: #0968A8;
    }

/* View Selector */
.view-selector {
    display: flex;
    gap: 4px;
    padding: 2px;
    background: #F3F4F6;
    border-radius: 8px;
    border: 1px solid var(--line);
}

    .view-selector .btn {
        border: none;
        background: transparent;
        padding: 4px 10px;
        font-size: 0.8125rem;
    }

        .view-selector .btn:hover {
            background: rgba(255,255,255,0.5);
        }

        .view-selector .btn.active {
            background: white;
            color: var(--brand-blue);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        }

/* Zoom Controls */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.zoom-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 700;
    color: var(--muted);
    font-size: 1.125rem;
    transition: all 0.15s;
}

    .zoom-btn:hover {
        background: #F3F4F6;
        color: var(--text);
    }

    .zoom-btn:active {
        background: #E5E7EB;
    }

.zoom-level {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 40px;
    text-align: center;
    user-select: none;
}

/* --------------------------------------------------------------------------
   Main Layout
   -------------------------------------------------------------------------- */
.gantt-wrapper {
    display: flex;
    height: 600px;
    position: relative;
    background: var(--bg);
}

/* --------------------------------------------------------------------------
   Task List Sidebar
   -------------------------------------------------------------------------- */
.task-list {
    width: var(--sidebar-width);
    border-right: 2px solid var(--line);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    background: white;
}

.task-list-header {
    height: var(--header-height);
    display: grid;
    grid-template-columns: 30px 1fr 80px 100px;
    align-items: center;
    padding: 0 var(--cell-padding);
    background: #F8F9FB;
    border-bottom: 2px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

    .task-list-header > div {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        padding: 4px;
    }

.task-list-body {
    position: relative;
}

/* Task Rows */
.task-row {
    display: grid;
    grid-template-columns: 30px 1fr 80px 100px;
    align-items: center;
    height: var(--row-height);
    padding: 0 var(--cell-padding);
    border-bottom: 1px solid #EEF0F3;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: white;
}

    .task-row:hover {
        background: var(--hover-bg);
    }

    .task-row.selected {
        background: var(--selected-bg);
        border-left: 3px solid var(--selected-border);
        padding-left: calc(var(--cell-padding) - 3px);
    }

        .task-row.selected::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid rgba(8, 124, 196, 0.2);
            pointer-events: none;
        }

    .task-row.subtask {
        padding-left: calc(var(--cell-padding) + 24px);
    }

        .task-row.subtask.selected {
            padding-left: calc(var(--cell-padding) + 21px);
        }

    .task-row.collapsed .expand-icon {
        transform: rotate(-90deg);
    }

/* Expand/Collapse Icon */
.expand-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: var(--muted);
    font-size: 0.625rem;
    border-radius: 4px;
}

    .expand-icon:hover {
        background: rgba(0,0,0,0.05);
        color: var(--text);
    }

/* Task Name */
.task-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 4px;
    min-width: 0;
    overflow: hidden;
}

    .task-name span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .task-name input {
        border: 1px solid var(--brand-blue);
        border-radius: 4px;
        padding: 4px 8px;
        font: inherit;
        width: 100%;
        background: white;
        outline: none;
        box-shadow: 0 0 0 2px rgba(8, 124, 196, 0.2);
    }

/* Assignee */
.assignee {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
}

/* Progress */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #2CB67D);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 35px;
    text-align: right;
}

/* --------------------------------------------------------------------------
   Timeline Chart
   -------------------------------------------------------------------------- */
.timeline-chart {
    flex: 1;
    overflow: auto;
    position: relative;
    background: white;
}

/* Timeline Header */
.timeline-header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 9;
    background: #F8F9FB;
    border-bottom: 2px solid var(--line);
}

.timeline-header-row {
    display: flex;
    height: 50%;
    border-bottom: 1px solid #E5E7EB;
}

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

.timeline-cell {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-right: 1px solid #E5E7EB;
    position: relative;
    color: var(--text-2);
    background: white;
}

    .timeline-cell.weekend {
        background: var(--weekend-bg);
    }

    .timeline-cell.today {
        background: rgba(255, 107, 107, 0.05);
    }

        .timeline-cell.today::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: -600px;
            width: 2px;
            background: var(--today-line);
            z-index: 100;
            pointer-events: none;
        }

/* Chart Rows */
.chart-rows {
    position: relative;
    min-height: 100%;
}

.chart-row {
    height: var(--row-height);
    position: relative;
    border-bottom: 1px solid #EEF0F3;
    display: flex;
}

    .chart-row:hover {
        background: rgba(0,0,0,0.01);
    }

.chart-cell {
    flex-shrink: 0;
    border-right: 1px solid #F3F4F6;
    position: relative;
    height: 100%;
}

    .chart-cell.weekend {
        background: var(--weekend-bg);
    }

/* Task Bars */
.task-bar {
    position: absolute;
    height: var(--task-bar-height);
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-blue);
    border-radius: 6px;
    cursor: move;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 5;
    min-width: 30px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
}

    .task-bar:hover {
        transform: translateY(-50%) scale(1.02);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        z-index: 10;
    }

    .task-bar.dragging {
        opacity: 0.8;
        cursor: grabbing;
        z-index: 1000;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }

    .task-bar.milestone {
        background: var(--milestone-color);
        width: var(--task-bar-height) !important;
        height: var(--task-bar-height);
        transform: translateY(-50%) rotate(45deg);
        padding: 0;
        border-radius: 4px;
    }

        .task-bar.milestone:hover {
            transform: translateY(-50%) rotate(45deg) scale(1.1);
        }

    .task-bar.critical {
        background: var(--critical-path);
    }

        .task-bar.critical:hover {
            background: #B91C1C;
        }

/* Task Bar Progress */
.task-bar-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 6px 0 0 6px;
    pointer-events: none;
    transition: width 0.3s ease;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--resize-handle-width);
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.2s;
}

.task-bar:hover .resize-handle {
    opacity: 1;
}

.resize-handle.left {
    left: 0;
    border-radius: 6px 0 0 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.4), transparent);
}

.resize-handle.right {
    right: 0;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(270deg, rgba(255,255,255,0.4), transparent);
}

.resize-handle:hover {
    background: rgba(255,255,255,0.5);
}

/* Dependencies */
.dependency-canvas {
    pointer-events: none;
    z-index: 4;
}

.dependency-line {
    stroke: var(--muted);
    stroke-width: 2;
    fill: none;
    opacity: 0.6;
    stroke-dasharray: none;
}

    .dependency-line.critical {
        stroke: var(--critical-path);
        stroke-width: 3;
        opacity: 1;
    }

.dependency-arrow {
    fill: var(--muted);
    opacity: 0.6;
}

.dependency-line.critical + .dependency-arrow {
    fill: var(--critical-path);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Task Modal
   -------------------------------------------------------------------------- */
.task-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

    .task-modal.open {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #FFFFFF, #FAFBFC);
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #F3F4F6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--muted);
    transition: all 0.2s;
}

    .modal-close:hover {
        background: #E5E7EB;
        color: var(--text);
    }

.modal-body {
    padding: 20px;
}

/* Form Elements */
.form-group {
    margin-bottom: 16px;
}

    .form-group:last-child {
        margin-bottom: 0;
    }

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    background: white;
    color: var(--text);
    transition: all 0.2s;
}

    .form-control:focus {
        outline: none;
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px rgba(8,124,196,0.1);
    }

    .form-control:disabled {
        background: #F3F4F6;
        color: var(--muted);
        cursor: not-allowed;
    }

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

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M6 9L2 5h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

input[type="range"].form-control {
    padding: 4px 0;
}

input[type="date"].form-control {
    cursor: pointer;
}

/* Dependency List */
.dependency-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.dependency-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #F8F9FB;
    border-radius: 6px;
    border: 1px solid var(--line);
    transition: all 0.2s;
}

    .dependency-item:hover {
        background: #F3F4F6;
        border-color: #C9CCD2;
    }

.dependency-type {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    background: white;
    border-radius: 4px;
    color: var(--muted);
    border: 1px solid var(--line);
    min-width: 30px;
    text-align: center;
}

.dependency-item .btn {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
.task-list::-webkit-scrollbar,
.timeline-chart::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.task-list::-webkit-scrollbar-track,
.timeline-chart::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 10px;
}

.task-list::-webkit-scrollbar-thumb,
.timeline-chart::-webkit-scrollbar-thumb {
    background: #C9CCD2;
    border-radius: 10px;
    border: 2px solid #F3F4F6;
}

    .task-list::-webkit-scrollbar-thumb:hover,
    .timeline-chart::-webkit-scrollbar-thumb:hover {
        background: #A0A5AE;
    }

.task-list::-webkit-scrollbar-corner,
.timeline-chart::-webkit-scrollbar-corner {
    background: #F3F4F6;
}

/* --------------------------------------------------------------------------
   Loading States
   -------------------------------------------------------------------------- */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--line);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Responsive Design
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .task-list {
        width: 320px;
    }

    .task-list-header,
    .task-row {
        grid-template-columns: 30px 1fr 60px 80px;
    }
}

@media (max-width: 768px) {
    .gantt-toolbar {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .task-list {
        width: 280px;
    }

    .gantt-wrapper {
        height: 500px;
    }

    .task-list-header,
    .task-row {
        grid-template-columns: 30px 1fr 80px;
    }

    .assignee {
        display: none;
    }
}

@media (max-width: 480px) {
    .task-list {
        width: 200px;
    }

    .task-list-header,
    .task-row {
        grid-template-columns: 30px 1fr;
    }

    .progress-cell {
        display: none;
    }

    .gantt-title {
        font-size: 1rem;
    }

    .view-selector {
        order: -1;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
    .gantt-toolbar {
        display: none;
    }

    .gantt-wrapper {
        height: auto;
    }

    .task-list,
    .timeline-chart {
        overflow: visible;
    }

    .task-modal {
        display: none !important;
    }

    .task-bar:hover {
        transform: translateY(-50%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

/* --------------------------------------------------------------------------
   Dark Mode Support (if needed)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    /* Add dark mode overrides here if your app supports it */
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard navigation */
.btn:focus-visible,
.form-control:focus-visible,
.task-row:focus-visible,
.expand-icon:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .task-bar {
        border: 2px solid currentColor;
    }

    .dependency-line {
        stroke-width: 3;
    }
}
/* Additional styles for interact.js */
.task-bar {
    touch-action: none;
    user-select: none;
}

    .task-bar.dragging {
        opacity: 0.7;
        z-index: 1000;
        cursor: grabbing !important;
    }

    .task-bar.resizing {
        opacity: 0.8;
        z-index: 1000;
    }

.resize-handle-left,
.resize-handle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
}

.resize-handle-left {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent);
}

.resize-handle-right {
    right: 0;
    background: linear-gradient(270deg, rgba(255,255,255,0.3), transparent);
}

    .resize-handle-left:hover,
    .resize-handle-right:hover {
        background: rgba(255,255,255,0.5);
    }

/* Prevent text selection during drag */
.dragging * {
    user-select: none !important;
}






















.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: .2s
}

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

.drawer-panel {
    position: fixed;
    top: 0;
    right: -520px;
    height: 100dvh;
    width: 520px;
    max-width: 92vw;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    box-shadow: -12px 0 24px rgba(0,0,0,.08);
    transition: right .22s;
    display: flex;
    flex-direction: column
}

    .drawer-panel.open {
        right: 0
    }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 1px solid #eee
}

.drawer-title {
    font-weight: 700
}

.drawer-body {
    padding: 1rem;
    overflow: auto;
    flex: 1
}

.drawer-footer {
    padding: .75rem 1rem;
    border-top: 1px solid #eee;
    display: flex;
    gap: .5rem;
    justify-content: flex-end
}

.btn-close {
    border: none;
    background: none;
    width: 32px;
    height: 32px;
    opacity: .6
}

    .btn-close:hover {
        opacity: 1
    }


/* Wider drawer */
.oc-wide {
    --bs-offcanvas-width: 860px;
}

/* Sticky footer within offcanvas */
.oc-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Section cards (lighter than default cards) */
.section {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
}

    .section + .section {
        margin-top: 1rem;
    }

.section-head {
    padding: .65rem .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

/* Compact inputs/tables */
.form-control-sm, .form-select-sm {
    font-size: .9rem;
}

.table-sm th, .table-sm td {
    padding: .35rem .5rem;
}

/* Scrollable table body w/ sticky headers */
.table-wrap {
    max-height: 240px; /* adjust to taste */
    overflow: auto;
    border-top: 1px solid var(--bs-border-color);
}

.table-sticky thead th {
    position: sticky;
    top: 0;
    background: var(--bs-body-bg);
    z-index: 2;
}

/* Subtle chips for IDs */
.badge-soft {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    font-weight: 600;
}
/* Drawer width + no horizontal scroll */
.oc-wide {
    --bs-offcanvas-width: 640px;
}
/* feel free to 600–720px */
.offcanvas-body {
    overflow-x: hidden;
}

    /* Prevent flex/grid children from forcing horizontal scroll */
    .offcanvas-body * {
        min-width: 0;
    }

/* Section shell */
.section {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

    .section + .section {
        margin-top: 1rem;
    }

.section-head {
    padding: .6rem .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

/* Compact form density */
.form-control-sm, .form-select-sm {
    font-size: .92rem;
}

/* Reusable grid forms (stack on mobile, 2-up on md+) */
.grid-form {
    display: grid;
    gap: .75rem;
}

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

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Card row for contact / bill-to editors */
.card-row {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .75rem;
    background: #fff;
}

    .card-row + .card-row {
        margin-top: .5rem;
    }

.row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.badge-soft {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    font-weight: 600;
}
/* --- Drawer: width, scroll, density ------------------------------------- */
.oc-wide {
    --bs-offcanvas-width: 700px;
}
/* 640–760 feels best */
.offcanvas {
    box-shadow: -20px 0 40px rgba(0,0,0,.10);
}

.offcanvas-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

.offcanvas-body {
    overflow-x: hidden;
    padding-top: .5rem;
}

/* Typography inside the drawer */
.offcanvas h1, .offcanvas .h1 {
    font-size: 1.55rem;
    font-weight: 900;
    margin: .25rem 0 .25rem;
    letter-spacing: -.02em;
}

.offcanvas h2, .offcanvas .h2 {
    font-size: 1.0rem;
    font-weight: 800;
    margin: 0;
}

/* Title row: add a quiet subline and action spacing */
.drawer-sub {
    color: var(--muted);
    font-weight: 700;
    font-size: .85rem;
    margin-top: .15rem;
}

/* Sticky action bar at bottom */
.oc-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(255,255,255,.85), #fff);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
    padding: .6rem .75rem;
}

/* Sections (single source of truth) */
.section {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

    .section + .section {
        margin-top: .9rem;
    }

.section-head {
    padding: .55rem .7rem;
    font-weight: 800;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--line);
    background: #FAFBFD;
}

/* Grid forms: compact, wrap nicely */
.grid-form {
    display: grid;
    gap: .65rem;
}

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

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.grid-span-2 {
    grid-column: 1 / -1;
}

/* Labels + inputs density */
.form-label {
    font-size: .85rem;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: .25rem;
}

.form-control-sm, .form-select-sm {
    font-size: .92rem;
    padding: .5rem .65rem;
    border-radius: 10px;
}

/* Ghost/soft buttons for secondary actions */
.btn-soft {
    background: #fff;
    border: 1px solid var(--line) !important;
    color: var(--text);
}

    .btn-soft:hover {
        background: #F3F4F6;
        border-color: #C9CCD2 !important;
    }

/* Small “chip” pills under the title (CustID, Company) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .5rem;
    font-weight: 800;
    font-size: .78rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    color: #3F4652;
}

/* Card rows for contacts / bill-tos */
.card-row {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .75rem;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

    .card-row + .card-row {
        margin-top: .5rem;
    }

.row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* Make long inputs shrink (prevents horizontal scroll) */
.offcanvas-body * {
    min-width: 0;
}


































/* CustomersList: small layout helpers */
.toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.search {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.btn-row {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Keep row columns aligned with header */
.gridCols {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.6fr .8fr auto;
    align-items: center;
    gap: .9rem;
}

.thead {
    position: sticky;
    top: .5rem;
    z-index: 5;
    background: #FAF6EF;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .55rem .75rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

.hcell {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    min-width: 0;
    flex-wrap: wrap;
}

.hicon {
    flex: 0 0 16px;
    height: 16px;
    opacity: .8;
}

.hlabel {
    font-weight: 800;
    color: #3F3C37;
}

.hsub {
    color: #7a7365;
    font-size: .8rem;
    margin-left: .35rem;
    white-space: nowrap;
}

.rowCard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin: .6rem 0;
    overflow: hidden;
}

.row {
    padding: .9rem .95rem;
}

.detail {
    border-top: 1px solid var(--line);
    background: #252a26;
    color: #f2eee6;
    padding: 1rem;
}

    .detail .sh {
        color: #e6dcc8;
    }

    .detail .card-row {
        background: #fff;
    }

/* Responsive: collapse to one column */
@media (max-width:900px) {
    .gridCols {
        grid-template-columns: 1fr;
    }

    .thead {
        display: none;
    }
}




/* =========================
   DENSE / ENTERPRISE THEME
   Apply on any container with .dense
   ========================= */
.dense {
    --fz: 13.5px;
    --lh: 1.25;
    --pad-1: 4px;
    --pad-2: 6px;
    --pad-3: 8px;
    --ctl-h: 30px; /* input/button height */
    --rad: 8px;
}

    /* Base text + spacing */
    .dense, .dense * {
        font-size: var(--fz);
        line-height: var(--lh);
    }

        .dense .section {
            margin-bottom: .5rem;
        }

        .dense .section-head {
            padding: .4rem .6rem;
        }

        .dense .p-3 {
            padding: .65rem !important;
        }

        /* Forms: much tighter */
        .dense .form-label {
            margin-bottom: .15rem;
            font-weight: 600;
            font-size: 12px;
            color: var(--muted);
        }

        .dense .grid-form {
            gap: .5rem;
        }

        .dense .form-control,
        .dense .form-select,
        .dense .input-group-text {
            min-height: var(--ctl-h);
            padding: 2px 8px !important;
            border-radius: var(--rad);
        }

        .dense textarea.form-control {
            min-height: 60px;
        }

        /* Buttons */
        .dense .btn {
            padding: 3px 8px;
            border-radius: var(--rad);
            font-weight: 700;
        }

        .dense .btn-sm {
            padding: 2px 7px;
        }

        .dense .btn-group > .btn {
            padding: 2px 7px;
        }

        /* Tables / list rows */
        .dense .table-wrap {
            max-height: 180px;
        }

        .dense .table-sm th,
        .dense .table-sm td {
            padding: .3rem .45rem;
        }

        .dense .card-row {
            padding: .5rem;
        }

        .dense .row-title {
            margin-bottom: .35rem;
        }

        /* Pills / badges smaller */
        .dense .badge, .dense .badge-soft, .dense .status-badge,
        .dense .pill {
            padding: .16rem .45rem;
            font-size: 12px;
        }

        /* Offcanvas drawer: slimmer & tighter */
        .dense .offcanvas-body {
            padding: .65rem .75rem;
        }

        .dense .oc-wide {
            --bs-offcanvas-width: 560px;
        }

        /* Header strip & chips—lower vertical mass */
        .dense .thead {
            padding: .4rem .6rem;
            border-radius: 10px;
        }

        .dense .hlabel {
            font-weight: 800;
        }

        .dense .hsub {
            font-size: 12px;
        }

        /* Inline controls row inside cards */
        .dense .row-actions .btn {
            padding: 2px 6px;
        }
/* =========================
   LEAD brand skin (Customers)
   ========================= */
.theme-lead {
    /* core brand + derived tints (accessible on light bg) */
    --brand-blue: #087CC4; /* LEAD primary */
    --brand-700: #0A65B3; /* hover/active */
    --brand-50: #E9F3FC; /* very soft wash */
    --brand-100: #D6EBFA; /* soft wash */
    --brand-200: #B8DBF6; /* soft border */
    --brand-900-text: #0b386e; /* readable brand text on light bg */
    /* nudge neutrals slightly cooler to fit the blue */
    --line: #D6E6F7;
    --th-bg: #F3F8FD; /* header band */
    --hover-wash: #F6FAFE;
    --active-wash: var(--brand-50);
    --active-border: var(--brand-200);
    --hover-border: #E6F2FD;
}

    /* Links + primary actions */
    .theme-lead a,
    .theme-lead .link {
        color: var(--brand-blue);
    }

    .theme-lead .btn-primary {
        background: var(--brand-blue);
        border-color: var(--brand-blue);
    }

        .theme-lead .btn-primary:hover {
            background: var(--brand-700);
            border-color: var(--brand-700);
        }

    .theme-lead .btn-outline-primary {
        color: var(--brand-blue);
        border-color: color-mix(in srgb, var(--brand-blue) 60%, white);
    }

        .theme-lead .btn-outline-primary:hover {
            background: color-mix(in srgb, var(--brand-blue) 10%, white);
        }

    /* Inputs / focus */
    .theme-lead .form-control,
    .theme-lead .form-select,
    .theme-lead .btn {
        border-color: var(--line) !important;
    }

        .theme-lead .form-control:focus,
        .theme-lead .form-select:focus,
        .theme-lead .btn:focus-visible {
            border-color: var(--brand-blue) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 28%, transparent);
        }

    /* Header band (column labels) */
    .theme-lead .thead {
        background: var(--th-bg);
        border-color: var(--brand-200);
    }

        .theme-lead .thead .hlabel {
            color: var(--brand-900-text);
        }

    /* Soft chips (CustID, etc.) */
    .theme-lead .badge-soft {
        background: color-mix(in srgb, var(--brand-blue) 8%, white);
        border-color: color-mix(in srgb, var(--brand-blue) 22%, white);
        color: var(--brand-900-text);
    }

    /* Row hover/active pills */
    .theme-lead .nav .is-active,
    .theme-lead .nav .active,
    .theme-lead .status-badge.is-active,
    .theme-lead .pill.is-brand {
        background: color-mix(in srgb, var(--brand-blue) 12%, white);
        border-color: color-mix(in srgb, var(--brand-blue) 28%, white);
        color: var(--brand-900-text);
    }

    /* Card rails / emphasis (optional) */
    .theme-lead .rowCard::before {
        background: var(--brand-blue);
        opacity: .95;
    }

    /* Drawer polish */
    .theme-lead .offcanvas-header,
    .theme-lead .drawer-header {
        border-bottom-color: var(--brand-200);
    }

    .theme-lead .drawer-title {
        color: var(--brand-900-text);
    }
/* =========================================
   Customers – Expanded Detail Panel
   ========================================= */
.customers-page .rowCard.expanded {
    box-shadow: var(--shadow-sm), 0 10px 26px rgba(0,0,0,.06);
}

/* Panel shell */
.customers-page .detail {
    background: linear-gradient(180deg,#FFFFFF,#FAFDFF);
    border-top: 2px solid var(--brand-200, #B8DBF6);
    padding: .7rem .8rem .9rem;
    color: var(--text);
}

    /* Two columns, collapses on narrow */
    .customers-page .detail .grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

@media (max-width:900px) {
    .customers-page .detail .grid2 {
        grid-template-columns: 1fr;
    }
}

/* Section heading */
.customers-page .detail .sh {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .35rem 0;
}

/* Rows/cards inside the detail */
.customers-page .detail .card-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .55rem .6rem;
    background: #fff;
    box-shadow: none;
}

    .customers-page .detail .card-row + .card-row {
        margin-top: .45rem;
    }

.customers-page .detail .row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .35rem 0;
}

/* Compact form density (overrides, only inside detail) */
.customers-page .detail .form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: .15rem;
}

.customers-page .detail .grid-form {
    gap: .45rem;
}

.customers-page .detail .form-control,
.customers-page .detail .form-select {
    min-height: 30px;
    padding: 2px 8px !important;
    border-radius: 8px;
}

.customers-page .detail textarea.form-control {
    min-height: 56px;
}

/* Small controls & buttons */
.customers-page .detail .btn {
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 700;
}

.customers-page .detail .btn-group > .btn {
    padding: 2px 7px;
}

.customers-page .detail .btn-primary {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}

    .customers-page .detail .btn-primary:hover {
        background: #0A65B3;
        border-color: #0A65B3;
    }

/* Subtle brand chips + radio color */
.customers-page .detail .badge-soft {
    background: color-mix(in srgb, var(--brand-blue) 10%, white);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 25%, white);
    color: #0b386e;
}

.customers-page .detail input[type="radio"] {
    accent-color: var(--brand-blue);
}

/* Muted helper text */
.customers-page .detail .muted {
    color: var(--muted);
}

/* Keep long inputs from forcing horizontal scroll */
.customers-page .detail * {
    min-width: 0;
}
/* =========================
   Customers toolbar polish
   ========================= */
.customers-page .hdr {
    align-items: center;
    gap: .75rem;
}

.customers-page .toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

/* Segmented filter (All / Active / Inactive) */
.customers-page .seg {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

    .customers-page .seg button {
        border: 0;
        background: transparent;
        cursor: pointer;
        padding: .38rem .75rem;
        font-weight: 800;
        font-size: .85rem;
        color: var(--text-2);
        line-height: 1;
    }

        .customers-page .seg button + button {
            border-left: 1px solid var(--line);
        }

        .customers-page .seg button:hover {
            background: var(--hover-wash);
        }

    .customers-page .seg .on {
        background: var(--active-wash);
        color: var(--brand-900-text);
        border-left-color: var(--active-border);
    }

/* Search group */
.customers-page .search {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: nowrap;
}

    /* Search input — pilly, compact, enterprise */
    .customers-page .search .form-control-sm {
        height: 34px;
        min-width: 280px;
        max-width: 42vw;
        padding: 0 .75rem !important;
        border-radius: 999px;
        border-color: var(--line);
        background: #fff;
        color: var(--text);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
    }

        .customers-page .search .form-control-sm::placeholder {
            color: #98a2b3;
        }

    /* Round search icon button */
    .customers-page .search .btn:first-of-type {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 8px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--line) !important;
        background: #fff;
        color: var(--text);
    }

        .customers-page .search .btn:first-of-type:hover {
            background: #F3F4F6;
            border-color: #C9CCD2 !important;
        }

    /* “Add” CTA — branded pill */
    .customers-page .search .btn:last-of-type {
        height: 34px;
        border-radius: 999px;
        padding: 0 .85rem;
        font-weight: 900;
        background: var(--brand-blue);
        color: #fff;
        border-color: var(--brand-blue) !important;
        box-shadow: 0 2px 6px rgba(8,124,196,.20);
    }

        .customers-page .search .btn:last-of-type:hover {
            background: #0A65B3;
            border-color: #0A65B3 !important;
        }

        .customers-page .search .btn:last-of-type .bi {
            margin-right: .35rem;
        }

    /* Consistent focus ring */
    .customers-page .seg button:focus-visible,
    .customers-page .search .form-control-sm:focus,
    .customers-page .search .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 28%, transparent);
        border-color: var(--brand-blue) !important;
    }
/* Space between toolbar and header band */
.customers-page {
    --toolbar-gap: .6rem; /* tweak to taste */
}

    .customers-page .hdr {
        margin-bottom: var(--toolbar-gap);
    }

        /* ensure the grid header sits a touch lower only on this page */
        .customers-page .hdr + .thead {
            margin-top: .25rem; /* small extra nudge */
        }
/* ===== Mini schedule in nav ===== */
.s-brief {
    margin: 8px 6px 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.s-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.s-month {
    font-weight: 800;
    letter-spacing: .01em;
    font-size: .85rem;
    color: var(--text);
}

.s-cal-btn {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}

    .s-cal-btn:hover {
        background: var(--hover-wash);
    }

.s-daystrip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

    .s-daystrip .day {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 10px;
        padding: 6px 6px;
        min-width: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        cursor: pointer;
        user-select: none;
    }

        .s-daystrip .day:hover {
            background: var(--hover-wash);
        }

        .s-daystrip .day.on {
            background: var(--active-wash);
            border-color: var(--active-border);
            color: #0B5CA0;
        }

        .s-daystrip .day.today {
            box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-blue) 25%, transparent);
        }

    .s-daystrip .dow {
        font-size: .66rem;
        font-weight: 800;
        color: #6b7280;
    }

    .s-daystrip .num {
        font-weight: 900;
        font-size: .95rem;
        line-height: 1;
    }

    .s-daystrip .dots {
        display: flex;
        gap: 3px;
        height: 6px;
    }

        .s-daystrip .dots i {
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: var(--brand-blue);
            opacity: .55;
        }

.s-agenda {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ag-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

    .ag-row:hover {
        background: var(--hover-wash);
        border-color: var(--hover-border);
    }

    .ag-row .time {
        font-weight: 800;
        font-size: .8rem;
        color: #475569;
    }

    .ag-row .title {
        font-weight: 700;
        font-size: .83rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ag-row .tag {
        font-size: .72rem;
        font-weight: 800;
        padding: .15rem .45rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #FAFBFC;
        color: #3F4652;
    }

.ag-empty {
    padding: 8px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    color: #6b7280;
    background: #FAFBFC;
}

.s-brief-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.btn-soft.small {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
}

    .btn-soft.small:hover {
        background: var(--hover-wash);
        border-color: var(--hover-border);
    }

/* keep it comfy on very narrow rails */
@media (max-width: 900px) {
    .s-brief {
        margin: 8px;
    }
}
/* Wider rail + slightly larger type & touch targets */
.sidenav.nav-wide {
    --nav-w: 230px; /* was 150px */
    --nav-icon: 18px;
    --nav-font: .95rem;
    --nav-pad-y: 8px;
    --nav-pad-x: 10px;
}
/* Month popover */
.s-brief {
    position: relative;
}

/* click-away overlay inside the card */
.month-scrim {
    position: absolute;
    inset: 0;
    display: none;
}

    .month-scrim.open {
        display: block;
    }

.month-pop {
    position: absolute;
    top: 38px;
    left: 8px;
    width: 260px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 10px;
    display: none;
    z-index: 5;
}

    .month-pop.open {
        display: block;
    }

.s-monthbtn {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .s-monthbtn:hover {
        background: var(--hover-wash);
    }

    .s-monthbtn .caret {
        font-size: .75rem;
        opacity: .7;
    }

.mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.mp-month {
    font-weight: 900;
    letter-spacing: .01em;
    font-size: .9rem;
}

.mp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.mp-dow {
    text-align: center;
    font-size: .7rem;
    font-weight: 800;
    color: #6b7280;
    padding: 2px 0;
}

.mp-cell {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 6px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

    .mp-cell:hover {
        background: var(--hover-wash);
    }

    .mp-cell.on {
        background: var(--active-wash);
        border-color: var(--active-border);
        color: #0B5CA0;
    }

    .mp-cell.today {
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-blue) 25%, transparent);
    }

    .mp-cell.muted {
        opacity: .55;
    }

    .mp-cell .n {
        font-weight: 800;
    }

    .mp-cell .dots {
        display: flex;
        gap: 3px;
        height: 6px;
    }

        .mp-cell .dots i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--brand-blue);
            opacity: .55;
        }
/* 1) Make the rail a stacking context above main content */
.sidenav {
    position: sticky; /* already there */
    z-index: 60; /* NEW: keeps popover above page cards */
    overflow: visible; /* ensure nothing is clipped by the rail */
}




/* Make the grid use the wider rail */
.od-shell.nav-wide {
    --nav-w: 230px; /* pushes content left correctly */
    --nav-mobile-w: 300px; /* optional: wider off-canvas on phones */
}

/* Keep your size/typography tweaks inside the rail if you want */
.sidenav.nav-wide {
    --nav-icon: 18px;
    --nav-font: .95rem;
    --nav-pad-y: 8px;
    --nav-pad-x: 10px;
}

/* Mobile: keep widths in sync */
@media (max-width:900px) {
    .od-shell.nav-wide .sidenav {
        width: var(--nav-mobile-w);
        min-width: var(--nav-mobile-w);
    }
}
/* ========= Enterprise density for nav + schedule + page chrome ========= */

/* Sidebar spacing & labels */
.dense .sidenav {
    padding: 10px 6px;
}

.dense .sec-label {
    margin: 8px 6px 4px;
    font-size: .64rem;
    letter-spacing: .05em;
}

/* Nav items: smaller targets, same readability */
.dense .nav {
    gap: 2px;
    padding: 1px;
}

    .dense .nav a,
    .dense .nav button {
        grid-template-columns: 16px 1fr;
        padding: 5px 7px;
        font-size: .82rem;
        gap: 6px;
        border-radius: 8px;
    }

.dense .n-ico {
    width: 16px;
}

/* Mini schedule card */
.dense .s-brief {
    margin: 6px 6px 8px;
    padding: 6px;
    border-radius: 8px;
}

.dense .s-cal-head {
    margin-bottom: 4px;
}

.dense .s-month {
    font-size: .8rem;
}

.dense .s-cal-btn {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.dense .s-daystrip {
    gap: 3px;
    margin-bottom: 4px;
    padding-bottom: 3px;
}

    .dense .s-daystrip .day {
        min-width: 48px;
        padding: 5px 5px;
        border-radius: 8px;
        gap: 1px;
    }

    .dense .s-daystrip .dow {
        font-size: .6rem;
    }

    .dense .s-daystrip .num {
        font-size: .9rem;
        line-height: 1;
    }

    .dense .s-daystrip .dots {
        gap: 2px;
        height: 5px;
    }

        .dense .s-daystrip .dots i {
            width: 5px;
            height: 5px;
        }

.dense .s-agenda {
    gap: 3px;
}

.dense .ag-row {
    padding: 5px;
    gap: 6px;
    border-radius: 7px;
}

    .dense .ag-row .time {
        font-size: .78rem;
    }

    .dense .ag-row .title {
        font-size: .8rem;
    }

    .dense .ag-row .tag {
        font-size: .7rem;
        padding: .12rem .4rem;
    }

/* Month popover (mini-month) */
.dense .s-monthbtn {
    padding: 4px 8px;
    border-radius: 8px;
}

.dense .month-pop {
    top: 34px;
    width: 236px;
    padding: 8px;
    border-radius: 10px;
}

.dense .mp-head {
    margin-bottom: 4px;
}

.dense .mp-month {
    font-size: .85rem;
}

.dense .mp-grid {
    gap: 3px;
}

.dense .mp-dow {
    font-size: .64rem;
}

.dense .mp-cell {
    padding: 5px 0 3px;
    border-radius: 8px;
    gap: 2px;
}

    .dense .mp-cell .n {
        font-size: .82rem;
    }

    .dense .mp-cell .dots {
        gap: 2px;
        height: 5px;
    }

        .dense .mp-cell .dots i {
            width: 5px;
            height: 5px;
        }

/* Page strip + headings */
.dense .strip {
    padding: 8px 10px;
}

.dense .canvas h1, .dense .canvas .h1 {
    font-size: 1.35rem;
    margin: .25rem 0 .6rem;
    letter-spacing: -.01em;
}

/* Buttons/inputs already compact via .dense; nudge default buttons slightly */
.dense .btn {
    padding: 3px 8px;
    border-radius: 8px;
}

.dense .btn-primary {
    font-weight: 800;
}

/* Tables (list view) – slightly tighter than your default dense rules */
.dense .inv-table th, .dense .inv-table td {
    padding: .32rem .45rem;
}
/* =========================
   Compact + Quiet (enterprise)
   Scope: .dense.tone-quiet
   ========================= */
.dense.tone-quiet {
    --fz: 13px; /* slightly smaller base */
    --ctl-h: 28px; /* input / button height */
    --rad: 8px; /* sharper corners */
    --tbl-font: .82rem; /* table body text */
}

    /* Reduce global boldness */
    .dense.tone-quiet body,
    .dense.tone-quiet .canvas {
        font-weight: 400;
    }

    .dense.tone-quiet h1, .dense.tone-quiet .h1 {
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .dense.tone-quiet h2, .dense.tone-quiet .h2 {
        font-weight: 700;
    }

    .dense.tone-quiet b, .dense.tone-quiet strong {
        font-weight: 600;
    }

    /* Header strip + page title */
    .dense.tone-quiet .strip {
        padding: 8px 10px;
    }

    .dense.tone-quiet .canvas h1,
    .dense.tone-quiet .page-title {
        margin: .15rem 0 .5rem;
        font-size: 1.28rem;
    }

    /* Sidebar: quieter weights, tighter paddings */
    .dense.tone-quiet .sec-label {
        margin: 8px 6px 4px;
        font-size: .64rem;
        letter-spacing: .05em;
    }

    .dense.tone-quiet .nav {
        gap: 2px;
        padding: 1px;
    }

        .dense.tone-quiet .nav a,
        .dense.tone-quiet .nav button {
            padding: 4.5px 7px;
            font-weight: 600; /* was 700 */
            font-size: .8rem;
            grid-template-columns: 16px 1fr;
            border-radius: 8px;
            color: #4b5563; /* quieter */
        }

        .dense.tone-quiet .nav .active {
            color: #0B5CA0;
        }

    /* Mini schedule in rail */
    .dense.tone-quiet .s-brief {
        margin: 6px 6px 8px;
        padding: 6px;
        border-radius: 8px;
    }

    .dense.tone-quiet .s-month {
        font-size: .8rem;
        font-weight: 700;
    }

    .dense.tone-quiet .s-cal-btn {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    .dense.tone-quiet .s-daystrip {
        gap: 3px;
        margin-bottom: 4px;
        padding-bottom: 3px;
    }

        .dense.tone-quiet .s-daystrip .day {
            min-width: 48px;
            padding: 5px;
            gap: 1px;
            border-radius: 8px;
        }

        .dense.tone-quiet .s-daystrip .dow {
            font-size: .6rem;
            font-weight: 700;
            color: #6b7280;
        }

        .dense.tone-quiet .s-daystrip .num {
            font-size: .9rem;
            font-weight: 800;
        }

    .dense.tone-quiet .ag-row {
        padding: 5px;
        gap: 6px;
        border-radius: 7px;
    }

        .dense.tone-quiet .ag-row .time {
            font-size: .76rem;
            color: #475569;
            font-weight: 700;
        }

        .dense.tone-quiet .ag-row .title {
            font-size: .8rem;
            font-weight: 600;
        }

    /* Month popover */
    .dense.tone-quiet .s-monthbtn {
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 700;
    }

    .dense.tone-quiet .month-pop {
        top: 34px;
        width: 236px;
        padding: 8px;
        border-radius: 10px;
    }

    .dense.tone-quiet .mp-month {
        font-size: .85rem;
        font-weight: 800;
    }

    .dense.tone-quiet .mp-dow {
        font-size: .64rem;
    }

    .dense.tone-quiet .mp-cell {
        padding: 5px 0 3px;
        gap: 2px;
        border-radius: 8px;
    }

        .dense.tone-quiet .mp-cell .n {
            font-size: .82rem;
            font-weight: 700;
        }

    /* Buttons/inputs: smaller + less shouty */
    .dense.tone-quiet .btn {
        padding: 3px 8px;
        font-weight: 700;
        border-radius: 8px;
    }

    .dense.tone-quiet .btn-primary {
        font-weight: 800;
    }

    .dense.tone-quiet .form-control,
    .dense.tone-quiet .form-select {
        min-height: var(--ctl-h);
        padding: 2px 8px !important;
    }

    /* Tables/list view: tighter rows, quiet body text */
    .dense.tone-quiet .inv-table th {
        font-weight: 700;
    }

    .dense.tone-quiet .inv-table td {
        font-weight: 500;
        color: #374151;
    }

    .dense.tone-quiet .inv-table th,
    .dense.tone-quiet .inv-table td {
        padding: .3rem .42rem;
    }

    /* KPI tiles / counters: dial back bold */
    .dense.tone-quiet .kpi .kpi-label {
        font-size: .82rem;
        color: #6b7280;
        font-weight: 600;
    }

    .dense.tone-quiet .kpi .kpi-value {
        font-size: 1.05rem;
        font-weight: 800;
    }

    /* Badges & pills */
    .dense.tone-quiet .badge,
    .dense.tone-quiet .status-badge,
    .dense.tone-quiet .pill {
        font-weight: 600;
    }

    /* Reduce card shadows for flatter enterprise feel */
    .dense.tone-quiet .panel,
    .dense.tone-quiet .card,
    .dense.tone-quiet .section {
        box-shadow: 0 4px 10px rgba(27,31,35,.04);
    }


.pm-rte {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.pm-rte-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--line);
    background: #fbfbfd;
    position: sticky;
    top: 0;
    z-index: 1
}

.pm-rte-btn {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: .25rem .45rem;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer
}

    .pm-rte-btn:hover {
        background: #f8f9fa
    }

.pm-rte-sep {
    width: 1px;
    height: 20px;
    background: var(--line)
}

.pm-rte-fill {
    flex: 1
}

.pm-rte-editor {
    min-height: 220px;
    padding: .75rem .9rem;
    outline: none
}

    .pm-rte-editor:empty:before {
        content: attr(data-placeholder);
        color: #9aa3af
    }
.pm-field-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(220px,1fr));
    gap: .5rem
}

@media (max-width:1100px) {
    .pm-field-grid {
        grid-template-columns: repeat(2,minmax(220px,1fr))
    }
}

@media (max-width:680px) {
    .pm-field-grid {
        grid-template-columns: 1fr
    }
}
.pm-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem
}

@media (max-width:900px) {
    .pm-two-col {
        grid-template-columns: 1fr
    }
}

.pm-card-lite {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .75rem;
    background: #fff
}

.pm-subtitle {
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .5rem
}
.pm-modal.pm-compact .pm-section {
    padding: .75rem
}

.pm-modal.pm-compact .pm-form-row {
    gap: .5rem
}

.pm-modal.pm-compact .pm-input, .pm-modal.pm-compact .pm-select {
    padding: .45rem .6rem
}

.pm-modal.pm-compact .pm-chip {
    padding: 2px 8px
}
.pm-group-row {
    --g-indent: 16px;
}

    .pm-group-row[data-level="0"] .pm-group-cell {
        padding-left: .75rem;
    }

    .pm-group-row[data-level="1"] .pm-group-cell {
        padding-left: calc(.75rem + 1 * var(--g-indent));
    }

    .pm-group-row[data-level="2"] .pm-group-cell {
        padding-left: calc(.75rem + 2 * var(--g-indent));
    }



    /* Level-aware group headers */
    .pm-group-row[data-level] .pm-group-cell {
        /* indent header based on level */
        padding-left: calc(.75rem + var(--g-level, 0) * 18px);
    }

    .pm-group-row.lvl-0 .pm-group-cell {
        background: #EAF2FF; /* boldest */
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        box-shadow: inset 0 1px 0 #E5EFFE;
    }

    .pm-group-row.lvl-1 .pm-group-cell {
        background: #F5F7FB;
        border-left: 4px solid #BED3FF;
    }

    .pm-group-row.lvl-2 .pm-group-cell {
        background: #FBFCFF;
        border-left: 4px dashed #DFE9FF;
    }

/* Label pill for the dimension name ("Customer", "Owner", etc.) */
.pm-group-dim-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-right: .5rem;
    border-radius: 999px;
    font-size: .675rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #0B5ED7;
    background: #E7F0FF;
    border: 1px solid #D6E6FF;
}

/* Make the group title stand out a touch */
.pm-group-label {
    font-weight: 800;
}
/* subtle level rails inside group header, like your tree rails */
.pm-group-cell {
    position: relative;
}

    .pm-group-cell::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: calc(var(--g-level,0) * 12px);
        background-image: repeating-linear-gradient( to right, transparent, transparent 11px, rgba(17,24,39,.08) 11px, rgba(17,24,39,.08) 12px );
        opacity: .35;
        pointer-events: none;
    }

/* level-tinted backgrounds for faster scanning */
.pm-group-row.lvl-0 .pm-group-cell {
    background: #EEF2FF;
}
/* light indigo */
.pm-group-row.lvl-1 .pm-group-cell {
    background: #F3F4F6;
}
/* neutral */
.pm-group-row.lvl-2 .pm-group-cell {
    background: #F8FAFC;
}
/* extra light */

/* tiny caption (replaces the big blue pill) */
.pm-group-caption {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94A3B8; /* slate-400 */
    font-weight: 700;
    margin-right: .5rem;
}

/* breadcrumb header */
.pm-crumb {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.pm-crumb-path {
    color: #6B7280;
}

.pm-crumb-sep {
    color: #CBD5E1;
}

.pm-group-label {
    font-weight: 700;
    color: #111827;
}











/* ========================================================================
       Project Timeline — Consolidated Stylesheet
       Notes:
       - Uses table-layout:auto so the browser sizes columns naturally.
       - Small columns are nowrap + fixed-ish width in ch/px; name wraps.
       - One definition per class (no duplicates), grouped by feature.
       - Relies on your global tokens: --card, --line, --radius, --brand-blue, etc.
       ======================================================================== */


/* ========== 1) App Shell: wrapper, command bar, header, KPIs, actions ========== */

.pm-wrapper {
    --pm-row-h: 44px;
    --pm-indent: 16px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pm-command-bar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.pm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pm-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.pm-stats {
    display: flex;
    gap: 2rem;
}

.pm-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.pm-view-toggles, .pm-filters, .pm-controls {
    display: flex;
    gap: .5rem;
}


/* Buttons & toggles */

.pm-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    border-radius: 8px;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

    .pm-btn:hover {
        background: #F8F9FA;
        border-color: #C9CCD2;
        transform: translateY(-1px);
    }

.pm-btn-primary {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

    .pm-btn-primary:hover {
        background: #0968A8;
        border-color: #0968A8;
    }

.pm-btn.critical-active {
    background: #FFF3E0;
    border-color: #FF6B35;
    color: #E55100;
}

.pm-btn-secondary {
    padding: .375rem .75rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-2);
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 500;
    transition: all .15s;
}

    .pm-btn-secondary:hover {
        background: #F8F9FA;
        border-color: #C9CCD2;
    }

.pm-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
    padding: 0;
}

    .pm-toggle:hover {
        background: #F8F9FA;
        border-color: #C9CCD2;
    }

    .pm-toggle.active {
        background: var(--brand-blue);
        border-color: var(--brand-blue);
        color: #fff;
    }

.btn-icon, .toggle-icon {
    font-size: 1rem;
}

.pm-content {
    position: relative;
    min-height: 400px;
}


/* ========== 2) Table wrapper & base table ========== */

.pm-table-wrapper {
    overflow: auto;
    max-height: calc(100vh - 280px);
    border-radius: var(--radius);
}

/* Let the browser decide widths; we guide with nowrap/widths on small cols */
.pm-table {
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
}

    .pm-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
    }

.pm-header-row {
    background: var(--th-bg, #f8fafc);
}

.pm-table th {
    padding: .625rem .75rem;
    text-align: left;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #5F6368;
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}

.th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sort-indicator {
    opacity: .3;
    cursor: pointer;
    transition: opacity .15s;
}

    .sort-indicator:hover {
        opacity: .7;
    }

.pm-table td {
    padding: .625rem .75rem;
    border-bottom: 1px solid #F0F1F3;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* default: all cells truncate … */
}

/* Row states */
.pm-item-row {
    transition: background .15s ease;
    cursor: pointer;
}

    .pm-item-row:hover {
        background: #F8F9FA;
    }

    .pm-item-row.selected {
        background: #EAF3FF;
    }

    .pm-item-row.overdue {
        background: #FFF5F5;
    }

    .pm-item-row.critical {
        background: #FFF8E1;
        box-shadow: inset 3px 0 0 #FF6B35;
    }

    .pm-item-row.promise-at-risk {
        background: #FFF3E0;
    }

/* Zebra (optional; comment out if you don’t want striping) */
.pm-table tbody tr:not(.pm-group-row):nth-child(even) {
    background: #FAFBFC;
}


/* ========== 3) Column sizing rules (auto layout friendly) ========== */
/* Keep small columns tight and non-wrapping; Name wraps and grows rows */

.pm-col-expand {
    width: 28px;
    padding-left: 6px;
    padding-right: 6px;
}

.pm-table th.pm-col-actions, .pm-table td.pm-col-actions {
    width: clamp(96px, 10vw, 140px);
}

.pm-table th.pm-col-progress, .pm-table td.pm-col-progress {
    width: 14ch;
}

.pm-table th.pm-col-owner, .pm-table td.pm-col-owner {
    width: 18ch;
}

.pm-table th.pm-col-status, .pm-table td.pm-col-status {
    width: 12ch;
}

.pm-table th.pm-col-customer, .pm-table td.pm-col-customer {
    width: 16ch;
}

.pm-table th.pm-col-dates, .pm-table td.pm-col-dates {
    width: 12ch;
}

/* Name column: takes leftover, wraps; allow row to grow */
.pm-table th.pm-col-name, .pm-table td.pm-col-name {
    width: auto; /* leftover width */
    min-width: 340px; /* don’t crush on narrow screens */
    white-space: normal; /* wrapping enabled */
    overflow: visible; /* allow multi-line content */
}

/* When the Name wraps, let the row height expand */
.pm-table.pm-compact td {
    height: auto;
    min-height: var(--pm-row-h);
}


/* ========== 4) Tree/Name cell (indent rails, caret, type tag) ========== */

.pm-item-name {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--pm-row-h);
    line-height: 1.35;
    /* the indent is controlled by data-level via CSS var */
    padding-left: calc(28px + var(--level, 0) * var(--pm-indent));
}

    /* faint vertical rails for each indent step */
    .pm-item-name.pm-treecell::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 28px;
        width: calc(var(--level,0) * var(--pm-indent));
        pointer-events: none;
        background-image: repeating-linear-gradient( to right, transparent, transparent calc(var(--pm-indent) - 1px), rgba(17,24,39,.08) calc(var(--pm-indent) - 1px), rgba(17,24,39,.08) var(--pm-indent) );
        opacity: .35;
    }

/* expander/caret */
.pm-expander, .pm-group-toggle {
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
}

    .pm-expander:hover, .pm-group-toggle:hover {
        background: rgba(0,0,0,.04);
    }

.pm-caret {
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #6b7280;
    transition: transform .12s ease, border-left-color .12s ease;
}

.pm-item-row:hover .pm-caret, .pm-group-row:hover .pm-caret {
    border-left-color: #111827;
}

.pm-caret.open {
    transform: rotate(90deg);
}

/* tiny type tag before the name (P/D/T/M) */
.pm-type-abbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    border: 1px solid var(--line);
    background: #F8FAFC;
    color: #475569;
}
    /* optional color accents by type code class you already add */
    .pm-type-abbr.type-project {
        background: #E3F2FD;
        color: #1565C0;
        border-color: #CFE5FA;
    }

    .pm-type-abbr.type-deliverable {
        background: #F3E5F5;
        color: #6A1B9A;
        border-color: #E2CEE9;
    }

    .pm-type-abbr.type-task {
        background: #E8F5E9;
        color: #2E7D32;
        border-color: #D4E8D5;
    }

    .pm-type-abbr.type-milestone {
        background: #FFFDE7;
        color: #795548;
        border-color: #F3EDC2;
    }

.item-text {
    font-weight: 500;
    color: var(--text);
}


/* ========== 5) Group rows (header bands for Status/Owner/Type/etc.) ========== */

.pm-group-row td {
    padding: 0;
    border-bottom: none;
}

.pm-group-cell {
    padding: .35rem .75rem;
    background: #F3F4F6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.pm-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    color: #111827;
}

.pm-group-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pm-group-count {
    min-width: 1.5rem;
    text-align: center;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: #E5E7EB;
    font-weight: 700;
    color: #374151;
}

.pm-group-dates {
    font-weight: 600;
    color: #6b7280;
}


/* ========== 6) Chips, badges, status, dates, owner/avatar ========== */

.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: .25rem .5rem;
    max-width: 100%;
}

.pm-chip-title {
    font-weight: 700;
}

.pm-chip-sub {
    color: #6b7280;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-chip-x {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: #9e9e9e;
}

.pm-badge,
.pm-status-badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.badge-danger {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
}

.badge-success {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}

.badge-warning {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFE0B2;
}

.badge-critical {
    background: #FF5722;
    color: #fff;
    animation: pulse 2s infinite;
}

.status-notstarted {
    background: #F5F5F5;
    color: #616161;
}

.status-inprogress {
    background: #FFF3E0;
    color: #E65100;
}

.status-completed {
    background: #E8F5E9;
    color: #1B5E20;
}

.status-onhold {
    background: #FCE4EC;
    color: #880E4F;
}

.pm-date {
    font-weight: 500;
    color: var(--text-2);
}

    .pm-date.date-warning {
        color: #E65100;
        font-weight: 600;
        background: #FFF3E0;
        padding: .125rem .375rem;
        border-radius: 4px;
    }

.pm-owner {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pm-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg,#667EEA 0%, #764BA2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.owner-name {
    font-weight: 500;
    color: var(--text-2);
}

.pm-unassigned {
    color: #9E9E9E;
    font-style: italic;
}


/* ========== 7) Progress & dependencies & row actions ========== */

.pm-progress {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pm-progress-bar {
    flex: 1;
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.pm-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--progress) * 1%);
    background: linear-gradient(90deg,#4CAF50,#45A049);
    transition: width .3s ease;
}

.pm-progress-text {
    font-size: .6875rem;
    font-weight: 600;
    color: #5F6368;
    min-width: 35px;
    text-align: right;
}

.pm-deps-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.pm-dep-tag {
    padding: .125rem .375rem;
    background: #E8EAF6;
    color: #3F51B5;
    border-radius: 4px;
    font-size: .625rem;
    font-weight: 600;
    cursor: help;
}

    .pm-dep-tag.violated {
        background: #FFEBEE;
        color: #C62828;
    }

.pm-dep-more {
    padding: .125rem .375rem;
    background: #F5F5F5;
    color: #757575;
    border-radius: 4px;
    font-size: .625rem;
    font-weight: 600;
}

.pm-actions-group {
    display: flex;
    gap: .25rem;
}

.pm-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-size: .875rem;
}

    .pm-action-btn:hover {
        background: #F8F9FA;
        border-color: #C9CCD2;
        transform: translateY(-1px);
    }

.pm-action-delete:hover {
    background: #FFEBEE;
    border-color: #EF5350;
}


/* ========== 8) Inline editing affordances ========== */

.pm-editable {
    padding: .125rem .25rem;
    border-radius: 4px;
    transition: all .15s;
}

    .pm-editable:hover {
        background: #E8F0FE;
        box-shadow: 0 0 0 2px #E8F0FE;
    }

.pm-inline-edit,
.pm-inline-select,
.pm-inline-date,
.pm-inline-number {
    padding: .25rem .5rem;
    border: 2px solid var(--brand-blue);
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    background: #fff;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.pm-inline-number {
    width: 60px;
}

.pm-item-row.new-inline {
    background: #F0F6FF;
}

    .pm-item-row.new-inline input, .pm-item-row.new-inline select {
        background: #fff;
    }


/* ========== 9) Grouping controller (label + select) ========== */

.pm-groupby {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .pm-groupby label {
        font-size: .8rem;
        color: #6b7280;
        text-transform: uppercase;
    }


/* ========== 10) Modal (edit item / dependencies / history) ========== */

.pm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn .2s ease;
}

.pm-modal {
    background: var(--card);
    border-radius: 12px;
    width: 980px;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: slideUp .3s ease;
}

.pm-modal-wide {
    width: 800px;
}

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

.pm-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.pm-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    color: #9E9E9E;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .pm-modal-close:hover {
        background: #F5F5F5;
        color: var(--text);
    }

.pm-modal-body {
    flex: 1;
    overflow: auto;
    padding: 1.25rem;
}

.pm-modal-footer {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--line);
    background: #FAFBFC;
    border-radius: 0 0 12px 12px;
    position: sticky;
    bottom: 0;
}

/* Section cards inside modal */
.pm-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pm-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(17,24,39,.06);
    padding: 12px 14px;
}

.pm-section-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .5rem;
}

.pm-section-title {
    margin: 0;
    font-weight: 700;
    color: #111827;
}

.pm-count-pill {
    font-size: .72rem;
    color: #475569;
    background: #E5E7EB;
    border-radius: 999px;
    padding: 0 .45rem;
}

/* Forms */
.pm-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pm-form-group {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.pm-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #5F6368;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pm-input, .pm-select, .pm-textarea {
    padding: .625rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .875rem;
    font-family: inherit;
    background: #fff;
    transition: all .15s;
}

    .pm-input:focus, .pm-select:focus, .pm-textarea:focus {
        outline: none;
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px rgba(8,124,196,.1);
    }

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

/* Subitems table inside modal */
.pm-subitems-wrap {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

    .pm-subitems-wrap table {
        width: 100%;
        table-layout: fixed;
    }

    .pm-subitems-wrap thead th {
        position: sticky;
        top: 0;
        background: #F8FAFC;
        z-index: 1;
    }

    .pm-subitems-wrap tbody tr:nth-child(even) {
        background: #FBFBFD;
    }

    .pm-subitems-wrap tbody tr:hover {
        background: #F3F6FB;
    }

/* Dependency cards in dependency modal */
.pm-deps-section {
    margin-bottom: 2rem;
}

.pm-section-title {
    font-size: .875rem;
    font-weight: 600;
    color: #5F6368;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1rem;
}

.pm-deps-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pm-dep-card {
    display: flex;
    align-items: center;
    padding: .75rem;
    background: #F8F9FA;
    border: 1px solid var(--line);
    border-radius: 8px;
    position: relative;
}

    .pm-dep-card.violated {
        background: #FFF5F5;
        border-color: #FFCDD2;
    }

.pm-dep-info {
    flex: 1;
}

.pm-dep-name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem;
}

.pm-dep-meta {
    display: flex;
    gap: .5rem;
    font-size: .75rem;
}

.pm-dep-type {
    color: #5F6368;
}

.pm-dep-lag {
    color: #9E9E9E;
}

.pm-dep-status {
    margin-right: .5rem;
}

.pm-dep-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .pm-dep-remove:hover {
        background: rgba(244,67,54,.1);
        color: #F44336;
    }

/* Commitment history list */
.pm-commitment-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 1rem;
}

.pm-commitment-entry {
    background: #F8F9FA;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
}

.pm-commitment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
}

.pm-commitment-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.pm-commitment-user {
    font-weight: 600;
    color: var(--text);
}

.pm-commitment-date {
    color: var(--muted);
    font-size: .875rem;
}

.pm-commitment-change {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pm-date-change {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    background: #fff;
    border-radius: 6px;
}

.pm-date-old {
    font-weight: 500;
    color: #9E9E9E;
    text-decoration: line-through;
}

.pm-date-new {
    font-weight: 600;
    color: var(--text);
}

.pm-date-arrow {
    color: #9E9E9E;
}

.pm-date-diff {
    padding: .125rem .5rem;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
}

    .pm-date-diff.delayed {
        background: #FFEBEE;
        color: #C62828;
    }

    .pm-date-diff.accelerated {
        background: #E8F5E9;
        color: #2E7D32;
    }

.pm-commitment-reason {
    padding: .5rem;
    background: #fff;
    border-radius: 6px;
    font-size: .875rem;
    color: var(--text-2);
}


/* ========== 11) Empty states, Gantt placeholder, loading ========== */

.pm-empty-state {
    text-align: center;
    padding: 2rem;
    color: #9E9E9E;
}

.empty-icon {
    font-size: 2rem;
    opacity: .5;
}

.pm-gantt-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #F5F7FA 0%, #E9ECEF 100%);
}

.placeholder-content {
    text-align: center;
}

.placeholder-icon {
    font-size: 3rem;
    opacity: .3;
}

.placeholder-content h3 {
    margin: 1rem 0 .5rem;
    color: var(--text);
}

.placeholder-content p {
    color: var(--muted);
    font-size: .875rem;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.6);
    z-index: 5;
}

.loading-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #E0E0E0;
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 1rem;
}


/* ========== 12) Animations ========== */

@keyframes pulse {
    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: .8
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0
    }

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

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


/* ========== 13) Responsive tweaks ========== */

@media (max-width: 900px) {
    .pm-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-view-toggles, .pm-filters, .pm-controls {
        justify-content: center;
    }

    .pm-table-wrapper {
        overflow-x: auto;
    }
}

@media (max-width: 680px) {
    .pm-table th.pm-col-owner, .pm-table td.pm-col-owner {
        display: none;
    }
    /* hide some columns on very small screens */
    .pm-table th.pm-col-progress, .pm-table td.pm-col-progress {
        display: none;
    }
}


/* ========== 14) Dark theme touches (optional) ========== */

html[data-theme="dim"] .pm-modal {
    background: var(--card);
}

html[data-theme="dim"] .pm-table thead {
    background: #2A2D31;
}

html[data-theme="dim"] .pm-item-row:hover {
    background: rgba(255,255,255,.03);
}

/* =========================================================
       Compact density (Wrike-like)
       - Smaller paddings
       - Shorter rows (~32px)
       - Tighter avatars/badges/actions
       - Keeps auto column sizing + name wrapping
       ========================================================= */

.pm-table.pm-compact {
    --pm-row-h: 32px;
    --pm-pad-x: 6px;
    --pm-pad-y: 4px;
    font-size: 13px; /* dense but readable */
}

    /* Header / cells */
    .pm-table.pm-compact th {
        padding: var(--pm-pad-y) var(--pm-pad-x);
        font-size: 11px;
        letter-spacing: .04em;
        border-bottom: 1px solid var(--line);
    }

    .pm-table.pm-compact td {
        padding: var(--pm-pad-y) var(--pm-pad-x);
        height: auto; /* allow grow on wrap */
        min-height: var(--pm-row-h);
        vertical-align: middle;
    }

        /* Name cell stays wrap-friendly in compact */
        .pm-table.pm-compact th.pm-col-name,
        .pm-table.pm-compact td.pm-col-name {
            white-space: normal;
            overflow: visible;
        }

    .pm-table.pm-compact .pm-item-name {
        min-height: var(--pm-row-h);
        gap: 6px;
        line-height: 1.3;
    }

        .pm-table.pm-compact .pm-item-name.pm-treecell::before {
            opacity: .3;
        }

    /* Caret / expander */
    .pm-table.pm-compact .pm-expander,
    .pm-table.pm-compact .pm-group-toggle {
        width: 18px;
        height: 18px;
    }

    .pm-table.pm-compact .pm-caret {
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 5px;
    }

    /* Progress */
    .pm-table.pm-compact .pm-progress-bar {
        height: 4px;
    }

    .pm-table.pm-compact .pm-progress-text {
        font-size: 11px;
        min-width: 30px;
    }

    /* Avatars & row actions */
    .pm-table.pm-compact .pm-avatar {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .pm-table.pm-compact .pm-action-btn {
        width: 24px;
        height: 24px;
        font-size: .8125rem;
    }

    /* Pills / badges / chips */
    .pm-table.pm-compact .pm-status-badge,
    .pm-table.pm-compact .pm-badge {
        padding: 2px 8px;
        font-size: 11px;
        border-radius: 10px;
    }

    .pm-table.pm-compact .pm-chip {
        padding: 2px 8px;
        gap: 6px;
    }

    .pm-table.pm-compact .pm-chip-title {
        font-size: 12px;
    }

    .pm-table.pm-compact .pm-chip-sub {
        font-size: 11px;
    }

    /* Group headers */
    .pm-table.pm-compact .pm-group-cell {
        padding: 4px 8px;
    }

    .pm-table.pm-compact .pm-group-count {
        padding: 1px 6px;
        font-size: 11px;
    }

    /* Slightly stronger hover for density */
    .pm-table.pm-compact .pm-item-row:hover {
        background: #F3F6FB;
    }

.pm-table th.pm-col-est, .pm-table td.pm-col-est {
    width: 10ch; /* compact number column */
    text-align: right;
}