/* CSS Variables for Design System */
:root {
    --color-background: #0a0a0a;
    --color-card-bg: rgba(28, 28, 30, 0.6);
    --color-sidebar-bg: rgba(28, 28, 30, 0.4);
    --color-primary: #3b82f6;
    --color-secondary: #64748b;
    --color-accent: #60a5fa;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-yellow: #fbbf24;
    --color-text-primary: #ffffff;
    --color-text-secondary: #94a3b8;
    --color-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Layout System */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
/* ── Sidebar Navigation — Collapsible Icon Strip ── */
.sidebar {
    width: 64px;
    background: #000000;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--color-border);
    position: fixed;
    height: 100vh;
    overflow: hidden;          /* stays hidden; JS adds .anim-done for scroll */
    z-index: 100;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.28s ease,
                box-shadow 0.28s ease,
                border-right-color 0.2s ease;
    will-change: width;
}

.sidebar.expanded {
    width: 260px;
    background: #000000;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
}

/* Allow scrolling only after expand completes (set by transitionend in JS) */
.sidebar.expanded.anim-done {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Pinned — brighter border as the only indicator */
.sidebar.pinned {
    border-right-color: rgba(255, 255, 255, 0.2);
}

.logo { text-align: left; margin-bottom: 0; }

.logo-image {
    width: 36px; height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.logo-text {
    display: none;
    font-size: 48px; font-weight: 700;
    color: var(--color-yellow);
}

/* ── Project selector area ────────────────────────────────────────── */
.sidebar-project-area {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
    padding: 0 14px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

.sidebar-project-area .project-selector--custom {
    flex: 1;
    min-width: 0;
}

/* Trigger: always flex-start, padding shifts to center icon when narrow */
.project-selector-trigger {
    transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.18s ease,
                border-color 0.18s ease !important;
}

/* Collapsed: pad to center the 36px avatar inside 64px rail */
.sidebar:not(.expanded) .project-selector-trigger {
    padding: 10px 0;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    justify-content: center;
}

/* Avatar — visible in collapsed, fade out when expanded */
.project-selector-trigger-avatar-wrap {
    flex-shrink: 0;
    overflow: hidden;
    max-width: 36px;
    opacity: 1;
    pointer-events: auto;
    transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease;
}

.sidebar.expanded .project-selector-trigger-avatar-wrap {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}

/* Label — hidden in collapsed, reveal when expanded */
.project-selector-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
    opacity: 0;
    max-width: 0;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.08s ease 0s;
}

.sidebar.expanded .project-selector-label {
    opacity: 1;
    max-width: 190px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.18s;
}

/* Chevron — hidden in collapsed */
.project-selector-chevron {
    font-size: 11px;
    color: var(--color-text-secondary);
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.08s ease 0s,
                transform 0.25s ease;
}

.sidebar.expanded .project-selector-chevron {
    opacity: 0.85;
    max-width: 20px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.18s,
                transform 0.25s ease;
}

.project-selector-trigger[aria-expanded="true"] .project-selector-chevron {
    transform: rotate(180deg);
}

/* ── Nav menu ─────────────────────────────────────────────────────── */
.nav-menu {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item { margin-bottom: 0; }

/* Nav link: icon always sits at a fixed 22px from left edge.
   22+20+22 = 64px — exactly fills the collapsed rail with no justify-content tricks,
   so the icon never shifts when the sidebar expands or collapses. */
.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 22px;
    color: rgba(255, 255, 255, 0.44);
    text-decoration: none;
    border-radius: 10px;
    background: none !important;
    font-weight: 500;
    cursor: pointer;
    transform-origin: left center;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.nav-link:hover  { color: rgba(255, 255, 255, 0.85); }
.nav-link.active { color: rgba(255, 255, 255, 1); }

.nav-icon {
    min-width: 20px;
    width: 20px;
    font-size: 17px;
    text-align: center;
    flex-shrink: 0;
}

/* Nav label — max-width clip for smooth reveal.
   Collapse direction: opacity snaps away immediately (0.08s, no delay) so text
   is gone before the sidebar has finished shrinking — no "violent" overlap.
   Expand direction: overridden below with a delayed fade-in so text waits for
   the sidebar width to open before it appears. */
.nav-label {
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.08s ease 0s,
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.expanded .nav-label {
    max-width: 180px;
    opacity: 1;
    margin-left: 13px;
    /* On expand: fade in after the width has opened up */
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.2s ease 0.18s,
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Sidebar footer ───────────────────────────────────────────────── */
.sidebar-footer {
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    padding: 0 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.user-profile {
    display: flex;
    align-items: center;
    padding: 10px;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease;
    margin-bottom: 8px;
    width: 100%;
    overflow: hidden;
}

.user-profile:hover { background: rgba(255, 255, 255, 0.05); }

.user-info {
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.08s ease 0s,
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.expanded .user-info {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.2s ease 0.18s,
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-name {
    color: var(--color-text-primary);
    font-size: 13px; font-weight: 400;
    margin-bottom: 2px;
}

.user-role { color: var(--color-text-secondary); font-size: 11px; }

.sidebar-footer-item {
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 4px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    white-space: nowrap;
    transition: max-height 0.3s ease, opacity 0.08s ease 0s;
}

.sidebar.expanded .sidebar-footer-item {
    max-height: 32px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease 0.18s;
}

/* User Profile View Styles */
.user-profile-view {
    max-width: 800px;
}

.profile-content {
    background: var(--color-card-bg);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(10px);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 24px;
}

.profile-info h2 {
    color: var(--color-text-primary);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.profile-info p {
    color: var(--color-text-secondary);
    font-size: 16px;
    margin-bottom: 4px;
}

.profile-details h3 {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setting-item label {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 500;
}

.profile-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--color-text-primary);
    font-size: 16px;
    transition: all 0.2s ease;
}

.profile-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Subscription Section Styles */
.subscription-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subscription-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: var(--color-success);
    color: white;
}
.status-badge.warning {
    background: var(--color-warning);
    color: #1f2937;
}
.status-badge.inactive {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
}

.subscription-info h4 {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.subscription-info p {
    color: var(--color-text-secondary);
    font-size: 16px;
    margin: 0;
}

.subscription-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.detail-item label {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.detail-item span {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 500;
}

.subscription-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.subscription-button {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.subscription-button.primary {
    background: var(--color-primary);
    color: white;
}

.subscription-button.primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

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

.subscription-button.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-primary);
}

/* Selected Categories Styles */
.selected-categories {
    margin-top: 20px;
}

.selected-categories h4 {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-item {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Category Summary Styles */
.selected-categories-summary {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.selected-categories-summary h4 {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.categories-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.category-summary-item {
    background: linear-gradient(135deg, var(--color-success), #059669);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-note {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 64px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Without `min-width: 0`, the default `min-width: auto` on flex items
       prevents this column from shrinking below its content's intrinsic
       size. The Scope bubble world is 2800px wide, which would otherwise
       force this column — and every ancestor — to 2800px, hiding the
       cluster off-screen behind body's `overflow-x: hidden`. */
    min-width: 0;
    transition: margin-left 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content.sidebar-open {
    margin-left: 260px;
}

/* Top Header Bar */
.header {
    height: 96px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0;
    padding-left: 0;
}

.page-title-header {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-project-button {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* User Profile View Styles */
.user-profile-view {
    max-width: 800px;
}

.profile-content {
    background: var(--color-card-bg);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(10px);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 24px;
}

.profile-info h2 {
    color: var(--color-text-primary);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.profile-info p {
    color: var(--color-text-secondary);
    font-size: 16px;
    margin-bottom: 4px;
}

.profile-details h3 {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setting-item label {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 500;
}

.profile-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--color-text-primary);
    font-size: 16px;
    transition: all 0.2s ease;
}

.profile-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Subscription Section Styles */
.subscription-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subscription-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: var(--color-success);
    color: white;
}
.status-badge.warning {
    background: var(--color-warning);
    color: #1f2937;
}
.status-badge.inactive {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
}

.subscription-info h4 {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.subscription-info p {
    color: var(--color-text-secondary);
    font-size: 16px;
    margin: 0;
}

.subscription-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.detail-item label {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.detail-item span {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 500;
}

.subscription-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.subscription-button {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.subscription-button.primary {
    background: var(--color-primary);
    color: white;
}

.subscription-button.primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

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

.subscription-button.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-primary);
}

/* Selected Categories Styles */
.selected-categories {
    margin-top: 20px;
}

.selected-categories h4 {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-item {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Category Summary Styles */
.selected-categories-summary {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.selected-categories-summary h4 {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.categories-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.category-summary-item {
    background: linear-gradient(135deg, var(--color-success), #059669);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-note {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 64px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Without `min-width: 0`, the default `min-width: auto` on flex items
       prevents this column from shrinking below its content's intrinsic
       size. The Scope bubble world is 2800px wide, which would otherwise
       force this column — and every ancestor — to 2800px, hiding the
       cluster off-screen behind body's `overflow-x: hidden`. */
    min-width: 0;
}

/* Top Header Bar */
.header {
    height: 96px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0;
    padding-left: 0;
}

.page-title-header {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-project-button {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-project-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}

/* Native select kept for state + change handlers; custom UI is visible */
.project-selector.project-selector--custom {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: default;
}

.project-selector.project-selector--custom:hover {
    background: transparent;
}

.project-dropdown-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.project-selector-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 10px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.project-selector-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(139, 92, 246, 0.35);
}

.project-selector-trigger:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.55);
    outline-offset: 2px;
}

.project-selector-trigger-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.project-selector-trigger-avatar-wrap {
    flex-shrink: 0;
}

.project-selector-trigger-avatar-wrap > .project-selector-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.project-selector-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.project-selector-chevron {
    font-size: 11px;
    color: var(--color-text-secondary);
    opacity: 0.85;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.project-selector-trigger[aria-expanded="true"] .project-selector-chevron {
    transform: rotate(180deg);
}

.project-selector-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.project-selector-avatar.is-swapping > * {
    opacity: 0;
    transition: opacity 0.18s ease;
}
.project-selector-avatar > * {
    opacity: 1;
    transition: opacity 0.22s ease;
}
/* Subtle pulse on the avatar while project context is loading */
.project-selector-trigger.is-loading .project-selector-avatar {
    animation: projectAvatarPulse 1.1s ease-in-out infinite;
}
@keyframes projectAvatarPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.0), 0 2px 8px rgba(0,0,0,0.35); }
    50%      { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.28), 0 2px 8px rgba(0,0,0,0.35); }
}
/* Project pill that appears at the top of every view's header */
.header-project-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.18s ease, color 0.18s ease;
}
.header-project-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}
.header-project-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(145deg, hsl(220, 12%, 32%), hsl(220, 14%, 20%));
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}
.header-project-chip-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.header-project-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-project-chip.is-system {
    color: rgba(255, 255, 255, 0.45);
}

.project-selector-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-selector-avatar-initials {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.project-selector-avatar--placeholder .project-selector-avatar-placeholder-icon {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
}

.project-selector-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 3000;
    background: linear-gradient(165deg, rgba(28, 28, 32, 0.98), rgba(18, 18, 22, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 6px;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(139, 92, 246, 0.08);
    backdrop-filter: blur(18px);
    max-height: min(320px, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.project-selector-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.project-selector-option:hover {
    background: rgba(139, 92, 246, 0.12);
}

.project-selector-option.is-selected {
    background: rgba(139, 92, 246, 0.18);
}

.project-selector-option:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.5);
    outline-offset: 0;
}

.project-selector-option-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.project-selector-option-avatar > .project-selector-avatar {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    box-shadow: none;
    border: none;
}

.project-selector-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-selector-panel::-webkit-scrollbar {
    width: 6px;
}

.project-selector-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.finalize-button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

.finalize-button:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

.finalize-button:disabled {
    background: rgba(75, 85, 99, 0.5);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.add-project-button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

.add-project-button:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

.submit-button {
    background: var(--color-success);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.submit-button:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* Page Content */
.page-content {
    flex: 1;
    padding: 64px 64px;
    width: 100%;
    /* Same min-width:0 unlock as .main-content, so descendant scrollable
       regions (Scope bubble map) can clip horizontally instead of
       inflating the whole page. */
    min-width: 0;
    box-sizing: border-box;
}



/* Category Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.category-card {
    background: var(--color-card-bg);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(255, 255, 255, 0.1);
}

.category-card.selected {
    border-color: var(--color-yellow);
    background: rgba(251, 191, 36, 0.05);
}

.category-card.selected .category-icon {
    color: var(--color-yellow);
}

.category-icon {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.category-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.category-description {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Selection Counter */
.selection-counter {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 16px;
    margin-top: 16px;
}

/* Scope: Apple Music–style bubble cloud (phases + subcategories) */
.scope-bubble-field.categories-grid {
    display: block;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    min-height: min(72vh, 580px);
    margin-bottom: 24px;
    padding: 0 8px 40px;
    overflow: visible;
}

.scope-apple-shell .scope-bubble-hint {
    color: rgba(255, 255, 255, 0.55);
}

.scope-apple-shell .scope-bubble-hint a.scope-magnetic-link {
    color: #64d2ff;
    text-decoration-color: rgba(100, 210, 255, 0.45);
}

.scope-bubble-hint {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 15px;
    max-width: 34rem;
    margin: 0 auto 18px;
    line-height: 1.45;
    font-weight: 500;
}

.scope-bubble-hint a.scope-magnetic-link {
    color: #1d1d1f;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.25);
    text-underline-offset: 2px;
}

/* Apple Music / iOS “For You” bubble picker — dark grey chrome */
.main-content.main-content--scope-music {
    background: #1c1c1e;
}

.main-content.main-content--scope-music .header {
    background: #1c1c1e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    height: auto;
    min-height: 96px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.main-content.main-content--scope-music .page-title {
    color: #f5f5f7;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 1.75rem;
}

.main-content.main-content--scope-music .scope-v8-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.main-content.main-content--scope-music .project-indicator,
.main-content.main-content--scope-music .project-indicator i {
    color: #f5f5f7;
}

.main-content.main-content--scope-music .add-project-button,
.main-content.main-content--scope-music .finalize-button {
    border-radius: 999px;
    font-weight: 600;
}

.main-content.main-content--scope-music .add-project-button {
    background: transparent;
    color: #f5f5f7;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
}

.main-content.main-content--scope-music .add-project-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}

.main-content.main-content--scope-music .finalize-button {
    background: #1d1d1f;
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.main-content.main-content--scope-music .header-action-btn.secondary {
    background: transparent;
    color: #f5f5f7;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-weight: 600;
}

.main-content.main-content--scope-music .header-action-btn.primary {
    background: #1d1d1f;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.scope-apple-shell {
    background: #1c1c1e;
    border-radius: 20px;
    padding: 20px 20px 8px;
    margin-bottom: 16px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.scope-apple-shell .scope-bubble-field {
    margin-bottom: 0;
    padding-bottom: 8px;
    min-height: unset;
}

.scope-apple-shell .selection-counter {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 8px;
}

.scope-engine-details {
    max-width: 40rem;
    margin: 0 auto 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.scope-engine-details summary {
    cursor: pointer;
    color: #f5f5f7;
    font-weight: 600;
    list-style: none;
}

.scope-engine-details summary::-webkit-details-marker {
    display: none;
}

.scope-engine-details-body {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.scope-engine-details-body code {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.scope-bubble-inner {
    position: relative;
    z-index: 1;
    min-height: min(64vh, 560px);
    overflow: visible;
}

/* Scrollable “map” (pan like Apple Music bubble picker) — dark grey canvas */
.scope-bubble-map {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: min(70vh, 640px);
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1c1c1e;
    cursor: grab;
    box-sizing: border-box;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 36px 56px -36px rgba(0, 0, 0, 0.55),
        inset 0 -36px 56px -36px rgba(0, 0, 0, 0.55),
        inset 36px 0 56px -36px rgba(0, 0, 0, 0.4),
        inset -36px 0 56px -36px rgba(0, 0, 0, 0.4);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.scope-bubble-map.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.scope-bubble-map.is-dimmed {
    opacity: 0.42;
    filter: saturate(0.85);
    pointer-events: none;
    transition: opacity 0.35s ease, filter 0.35s ease;
}

/* Apple-style thin scroll indicators (cue: "this map keeps going") */
.scope-bubble-map::-webkit-scrollbar,
.scope-bubble-subs-map::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scope-bubble-map::-webkit-scrollbar-track,
.scope-bubble-subs-map::-webkit-scrollbar-track {
    background: transparent;
}

.scope-bubble-map::-webkit-scrollbar-thumb,
.scope-bubble-subs-map::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    border: 2px solid #1c1c1e;
    background-clip: padding-box;
}

.scope-bubble-map::-webkit-scrollbar-thumb:hover,
.scope-bubble-subs-map::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.36);
    background-clip: padding-box;
}

.scope-bubble-map::-webkit-scrollbar-corner,
.scope-bubble-subs-map::-webkit-scrollbar-corner {
    background: transparent;
}

.scope-bubble-canvas {
    position: relative;
    margin: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCOPE FULLSCREEN MODE  (class="scope-view" on <body>)
   Collapses the sidebar to a corner toggle, removes all chrome above/around
   the bubble map, and fills the viewport with the interactive canvas.
   All other tabs are unaffected — the class is removed when leaving Scope.
════════════════════════════════════════════════════════════════════════════ */

body.scope-view {
    background: #1c1c1e;
}

/* ── Sidebar collapse ─────────────────────────────────────────────────── */
body.scope-view .sidebar {
    transform: translateX(-100%);
    width: 0;
    min-width: 0;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
                width 0.35s cubic-bezier(.4,0,.2,1);
}
body.scope-view .main-content {
    margin-left: 0;
    transition: margin-left 0.35s cubic-bezier(.4,0,.2,1);
}

/* Sidebar visible when nav panel is open */
body.scope-view.scope-nav-open .sidebar {
    transform: translateX(0);
    width: 260px;
    background: #000000;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
}
/* Match open drawer width (260px) so the map/content isn’t trapped under the sidebar */
body.scope-view.scope-nav-open .main-content {
    margin-left: 260px;
}

/* Scope strips .expanded from the sidebar (see initializeNavigation) so width
   is driven only by body.scope-nav-open — without these mirrors, nav labels
   and project/footer text stay clipped (max-width:0 / opacity:0). */
body.scope-view.scope-nav-open .sidebar .project-selector-trigger {
    padding: 10px 12px;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    justify-content: flex-start;
}
body.scope-view.scope-nav-open .sidebar .project-selector-trigger-avatar-wrap {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}
body.scope-view.scope-nav-open .sidebar .project-selector-label {
    opacity: 1;
    max-width: 190px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.18s;
}
body.scope-view.scope-nav-open .sidebar .project-selector-chevron {
    opacity: 0.85;
    max-width: 20px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.18s,
                transform 0.25s ease;
}
body.scope-view.scope-nav-open .sidebar #sidebarNavMenu .nav-link {
    justify-content: flex-start;
}
body.scope-view.scope-nav-open .sidebar .nav-label {
    max-width: 180px;
    opacity: 1;
    margin-left: 13px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.2s ease 0.18s,
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.scope-view.scope-nav-open .sidebar .user-info {
    max-width: 180px;
    opacity: 1;
    margin-left: 10px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.2s ease 0.18s,
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.scope-view.scope-nav-open .sidebar .sidebar-footer-item {
    max-height: 32px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease 0.18s;
}

/* Top band matches the fixed Scope filter strip (64px) so header backgrounds
   align across the open nav drawer and the bubble pane. */
body.scope-view.scope-nav-open .sidebar-project-area {
    height: 64px;
}

/* ── Hide all top chrome ──────────────────────────────────────────────── */
body.scope-view .header,
body.scope-view .scope-engine-details,
body.scope-view .scope-bubble-hint,
body.scope-view .selection-counter,
body.scope-view #scopeBubbleStatusBar,
/* Boot diagnostic pill (top-center) — not part of the production UI in
   fullscreen mode; conflicts visually with the new filter tab strip. */
body.scope-view #v8BootPill {
    display: none !important;
}

/* ── Zero out page padding so map touches all edges ──────────────────── */
body.scope-view .page-content {
    padding: 0;
}
body.scope-view .scope-apple-shell {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
}
body.scope-view .scope-bubble-field {
    min-height: unset;
    padding: 0;
    margin: 0;
}
body.scope-view .scope-bubble-inner {
    margin: 0;
    padding: 0;
}

/* ── Bubble map fills viewport minus bottom bar ───────────────────────── */
body.scope-view .scope-bubble-map {
    height: calc(100dvh - 64px); /* 64px = scope bottom bar */
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* Reserve space at the top for the floating filter tab strip
       (12px offset + ~46px pill height + 6px gap = 64px). The bubble
       world reads this padding via getComputedStyle and shrinks the
       physics height accordingly so bubbles never drift behind the
       strip — and so clicks on bubbles aren't occluded by tab pills. */
    padding-top: 64px;
    box-sizing: border-box;
}

/* ── Floating nav-toggle button (right side of top header bar) ──────── */
.scope-nav-toggle {
    display: none; /* hidden by default; shown only in scope-view */
    position: fixed;
    top: 11px; /* centered in 64px header: (64 - 42) / 2 */
    right: 12px;
    z-index: 9990;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(29,29,31,0.82);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.28);
    transition: background 0.2s, transform 0.2s;
    align-items: center;
    justify-content: center;
}
body.scope-view .scope-nav-toggle {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}
.scope-nav-toggle:hover {
    background: rgba(50,50,56,0.92);
    transform: scale(1.06);
}
/* ── Drawer push behaviour ────────────────────────────────────────────
   When the nav opens we push the bubble area aside (margin-left on
   .main-content) instead of overlaying it. The backdrop is kept in the
   DOM as an invisible click-to-dismiss target only over the bubble
   pane — sidebar itself stays interactive — but it never blurs or
   dims the canvas. */
.scope-nav-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: 260px; /* aligned with open drawer + .main-content margin */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 9980;
    cursor: pointer;
}
body.scope-view.scope-nav-open .scope-nav-drawer-backdrop {
    display: none; /* nav closes only via top toggle icon */
}

/* ── Scope filter tabs (top header bar) ───────────────────────────────
   Full-width header bar matching the height of other page headers.
   Single click toggles "focus" (only this tag's bubbles); double click
   toggles "eliminated" (this tag's bubbles hidden). Slides with the
   push drawer the same way the bottom bar does. */
.scope-filter-tabs {
    display: none; /* hidden outside scope-view */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 9985;
    gap: 8px;
    padding: 0 64px 0 20px; /* right: 64px leaves room for nav-toggle */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: rgba(28, 28, 30, 0.92);
    backdrop-filter: blur(20px) saturate(2);
    -webkit-backdrop-filter: blur(20px) saturate(2);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    transition: left 0.35s cubic-bezier(.4,0,.2,1);
}
.scope-filter-tabs::-webkit-scrollbar { display: none; }
body.scope-view .scope-filter-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
body.scope-view.scope-nav-open .scope-filter-tabs { left: 260px; }

.scope-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(60, 60, 67, 0.72);
    color: #f5f5f7;
    font: 500 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}
.scope-tab:hover {
    background: rgba(72, 72, 78, 0.88);
    border-color: rgba(255, 255, 255, 0.22);
}
.scope-tab:active { transform: scale(0.96); }
/* Focus state: only this tag's bubbles are shown. */
.scope-tab.is-focus {
    background: #f5f5f7;
    color: #1c1c1e;
    border-color: #f5f5f7;
}
/* Eliminated state: this tag's bubbles are hidden. */
.scope-tab.is-eliminated {
    background: rgba(244,67,54,0.08);
    color: #b3261e;
    border-color: rgba(244,67,54,0.32);
    text-decoration: line-through;
}
.scope-tab.is-eliminated:hover {
    background: rgba(244,67,54,0.14);
}
/* Reset button — clears all filters. Subtle, tucked at the end. */
.scope-tab.is-reset {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border-color: transparent;
}
.scope-tab.is-reset:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Scope bottom action bar ──────────────────────────────────────────── */
.scope-bottom-bar {
    display: none; /* hidden outside scope-view */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    z-index: 9970;
    background: rgba(28, 28, 30, 0.94);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 20px;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.4);
    /* Match the same push transition as the sidebar so the bar slides
       with the bubble area instead of running under the open sidebar. */
    transition: left 0.35s cubic-bezier(.4,0,.2,1);
}
body.scope-view .scope-bottom-bar {
    display: flex;
}
body.scope-view.scope-nav-open .scope-bottom-bar {
    left: 260px;
}
/* keep the old fixed-bottom-actions bar hidden in scope-view */
body.scope-view #fixedBottomActions {
    display: none !important;
}
.scope-bottom-bar .scope-search-wrap {
    flex: 1;
    position: relative;
    max-width: 360px;
}
.scope-bottom-bar .scope-search-wrap input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    font: 500 14px -apple-system, system-ui, sans-serif;
    color: #f5f5f7;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}
.scope-bottom-bar .scope-search-wrap input:focus {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
}
.scope-bottom-bar .scope-search-wrap .scope-search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    pointer-events: none;
}
.scope-bottom-bar .scope-bar-spacer { flex: 1; }
.scope-bottom-bar .scope-bar-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    font: 600 14px -apple-system, system-ui, sans-serif;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.15s;
}
.scope-bottom-bar .scope-bar-btn:hover { opacity: 0.84; transform: scale(1.02); }
.scope-bottom-bar .scope-bar-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}
.scope-bottom-bar .scope-bar-btn.primary {
    background: #f5f5f7;
    color: #1c1c1e;
}

/* ── Matter.js bubble physics stage — large scrollable world inside .scope-bubble-map */
.scope-bubble-physics-host {
    position: relative;
    display: block;
    box-sizing: border-box;
    background: #1c1c1e;
    flex-shrink: 0;
}

.scope-matter-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #1c1c1e;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.scope-matter-canvas.is-dragging-bubble {
    cursor: grabbing;
}

.scope-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 12px 16px;
    border: none;
    cursor: grab;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    color: #ffffff;
    border-radius: 50%;
    aspect-ratio: 1;
    box-sizing: border-box;
    background: #d2d2d7 !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    z-index: 2;
    opacity: 1;
    touch-action: none;
    user-select: none;
}

/* Tone variants neutralized to a single grey palette (Step 3 visual rule:
   "all bubbles solid grey, no pink, no gradients, no images"). */
.scope-bubble--tone-0,
.scope-bubble--tone-1,
.scope-bubble--tone-2,
.scope-bubble--tone-3,
.scope-bubble--tone-4 {
    background: #d2d2d7 !important;
}

.scope-bubble.scope-bubble--dragging {
    cursor: grabbing;
    z-index: 50;
    opacity: 0.95;
}

.scope-bubble--phase {
    width: 156px;
    height: 156px;
    min-width: 156px;
    min-height: 156px;
}

.scope-bubble--sub {
    width: 112px;
    height: 112px;
    min-width: 112px;
    min-height: 112px;
    padding-bottom: 12px;
}

.scope-bubble::before,
.scope-bubble::after {
    display: none;
}

.scope-bubble:hover:not(.scope-bubble--dragging) {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.10);
    z-index: 4;
}

.scope-bubble.selected {
    background: #1d1d1f !important;
    color: #ffffff;
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 5px #1d1d1f,
        0 16px 36px rgba(0, 0, 0, 0.18);
    z-index: 5;
    transform: scale(1.04);
}

.scope-bubble-icon {
    position: relative;
    z-index: 2;
    font-size: clamp(22px, 4vw, 32px);
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.55) !important;
}

.scope-bubble.selected .scope-bubble-icon {
    color: rgba(255, 255, 255, 0.95) !important;
}

.scope-bubble-label {
    position: relative;
    z-index: 2;
    font-size: clamp(11px, 1.8vw, 13px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 95%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1d1d1f;
}

.scope-bubble.selected .scope-bubble-label {
    color: #ffffff;
}

.scope-bubble--hidden {
    display: none;
}

.scope-bubble-fallback-msg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 22rem;
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    z-index: 3;
    pointer-events: none;
}

/* Apple Music–style center anchor (magnetic focal point) — hidden in Matter.js mode */
.scope-bubble-anchor {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    border-radius: 50%;
    background: #ffffff;
    border: 3.5px solid #1d1d1f;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 1),
        0 12px 36px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    text-align: center;
    line-height: 1.15;
    padding: 6px;
    text-transform: uppercase;
    box-sizing: border-box;
}

.scope-bubble-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    z-index: 6;
    border-radius: 20px;
    animation: none;
    pointer-events: none;
}

@keyframes scopeBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.scope-bubble-subs {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: none;
    z-index: 12;
    width: 100%;
    max-height: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: scopeSubsPanelInInline 0.26s ease forwards;
    transform-origin: center;
}

@keyframes scopeSubsPanelInInline {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.scope-bubble-subs-head {
    position: absolute;
    left: 18px;
    top: 12px;
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    background: rgba(18, 18, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.scope-bubble-back-btn {
    display: none !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f5f5f7;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.scope-bubble-back-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
}

.scope-bubble-subs-phase {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f5f5f7;
    margin: 0;
    letter-spacing: -0.02em;
}

.scope-bubble-subs-map {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border: none;
    background: transparent;
    cursor: grab;
    box-sizing: border-box;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.main-content.main-content--scope-music .fixed-bottom-actions {
    background: rgba(28, 28, 30, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.main-content.main-content--scope-music .search-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f5f5f7;
}

.main-content.main-content--scope-music .search-icon {
    color: rgba(255, 255, 255, 0.45);
}

.main-content.main-content--scope-music .bottom-action-btn.primary {
    background: #f5f5f7;
    color: #1c1c1e;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.main-content.main-content--scope-music .bottom-action-btn.secondary {
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.scope-bubble-subs-map.is-dragging {
    cursor: grabbing;
}

.scope-bubble-subs-canvas {
    position: relative;
    margin: 0;
    box-sizing: border-box;
}

.scope-bubble-subs-canvas .scope-bubble {
    position: absolute;
}

.scope-bubble-subs-hint {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    margin: 14px 0 0;
}

/* Subcategory detail panel — floats on the right of the bubble field
   when a subcategory is selected. Drives the estimate model inputs. */
.scope-detail-panel {
    position: fixed;
    top: 96px;
    right: 24px;
    width: 340px;
    max-height: calc(100vh - 140px);
    /* Must sit above scope bottom bar / nav (9980–9990), below modal overlays (100000) */
    z-index: 99950;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    overflow: hidden;
    animation: scopeDetailPanelIn 0.32s cubic-bezier(0.34, 1.15, 0.64, 1) forwards;
}
.scope-detail-panel[hidden] { display: none; }
@keyframes scopeDetailPanelIn {
    from { opacity: 0; transform: translateX(12px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* When phase checklist panel (.spp) is open, sit child-detail panel to its left */
.scope-detail-panel.scope-detail-beside-phase {
    right: 430px; /* 390px spp + 16px gap + 24px margin from edge */
    z-index: 99970;
}
@media (max-width: 1100px) {
    .scope-detail-panel.scope-detail-beside-phase {
        right: 12px;
        left: 12px;
        width: auto;
        z-index: 99980;
    }
}
@media (max-width: 900px) {
    .scope-detail-panel {
        top: auto;
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        max-height: 60vh;
    }
}
.scope-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.scope-detail-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    flex: 0 0 auto;
}
.scope-detail-title {
    flex: 1 1 auto;
    min-width: 0;
}
.scope-detail-title h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.scope-detail-title .scope-detail-phase {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.scope-detail-close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: #1d1d1f;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.scope-detail-close:hover { background: rgba(0, 0, 0, 0.1); }
.scope-detail-body {
    overflow: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.scope-detail-section h5 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.55);
}
/* Segmented control (Contractors | Team) */
.scope-detail-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}
.scope-detail-seg button {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    padding: 7px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.scope-detail-seg button.is-active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Resource list (contractors / team members) */
.scope-detail-resource-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    max-height: 180px;
    overflow: auto;
}
.scope-detail-resource {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.scope-detail-resource:hover { background: rgba(0, 0, 0, 0.05); }
.scope-detail-resource.is-selected {
    background: rgba(10, 132, 255, 0.08);
    border-color: rgba(10, 132, 255, 0.35);
}
.scope-detail-resource input[type="checkbox"] { accent-color: #0a84ff; }
.scope-detail-resource-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scope-detail-resource-meta {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
}
.scope-detail-resource-empty {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    padding: 14px 8px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}
/* Sliders */
.scope-detail-sliders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.scope-detail-slider {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.scope-detail-slider-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #1c1c1e;
}
.scope-detail-slider-label .scope-detail-slider-value {
    color: #0a84ff;
    font-variant-numeric: tabular-nums;
}
.scope-detail-slider input[type="range"] {
    width: 100%;
    accent-color: #0a84ff;
}
.scope-detail-grade {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.scope-detail-grade button {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    padding: 8px 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scope-detail-grade button.is-active {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
}
/* Measurement inputs */
.scope-detail-measurement {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.scope-detail-measurement:last-child { border-bottom: none; }
.scope-detail-measurement-name {
    font-size: 12px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.2;
}
.scope-detail-measurement-name small {
    display: block;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    margin-top: 1px;
}
.scope-detail-measurement-input {
    display: flex;
    gap: 4px;
    align-items: center;
}
.scope-detail-measurement-input input {
    width: 78px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.scope-detail-measurement-input input:focus {
    outline: none;
    border-color: #0a84ff;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}
.scope-detail-measurement-input span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    min-width: 36px;
}
.scope-detail-loading {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    padding: 8px 0;
}

/* ─── Phase Selection Panel (parent bubble) ──────────────────────── */
.spp {
    position: fixed;
    top: 96px;
    right: 24px;
    width: 390px;
    /* Explicit height so flex children fill it; capped to avoid overflow */
    height: calc(100vh - 140px);
    max-height: 780px;
    z-index: 99960;
    display: flex;
    flex-direction: column;
    background: rgba(252, 250, 247, 0.97);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 22px;
    box-shadow: 0 28px 72px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    overflow: hidden;
    transform: translateX(430px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.36s cubic-bezier(0.34,1.15,0.64,1),
                opacity 0.28s ease;
}
.spp.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 900px) {
    .spp { top:auto; right:8px; left:8px; bottom:8px; width:auto; height:70vh; max-height:70vh; }
}
/* Header */
.spp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex: 0 0 auto;
}
.spp-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.spp-title {
    flex: 1 1 auto;
    min-width: 0;
}
.spp-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spp-title span {
    font-size: 11px;
    color: rgba(0,0,0,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.spp-btn-icon {
    background: rgba(0,0,0,0.05);
    border: none;
    color: #1d1d1f;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: background 0.15s;
    flex: 0 0 auto;
}
.spp-btn-icon:hover { background: rgba(0,0,0,0.12); }
/* View container — slides between main & measurement */
.spp-views {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}
.spp-view {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
                opacity 0.2s ease;
}
.spp-view.is-hidden-left  { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.spp-view.is-hidden-right { transform: translateX(100%);  opacity: 0; pointer-events: none; }
/* Section headings */
.spp-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(0,0,0,0.4);
    margin: 0 0 6px;
}
/* Checklist */
.spp-checklist {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.spp-check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.13s;
}
.spp-check-row:hover { background: rgba(0,0,0,0.04); }
.spp-check-row.is-off { opacity: 0.42; }
.spp-check-box {
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(0,0,0,0.22);
    background: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    transition: background 0.15s, border-color 0.15s;
}
.spp-check-row.is-on .spp-check-box {
    background: #1d1d1f;
    border-color: #1d1d1f;
}
.spp-check-box i { color: #fff; font-size: 10px; display: none; }
.spp-check-row.is-on .spp-check-box i { display: block; }
.spp-check-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.3;
}
.spp-check-meta {
    flex: 0 0 auto;
    text-align: right;
}
.spp-check-cost {
    font-size: 11px;
    font-weight: 700;
    color: #1c1c1e;
}
.spp-check-time {
    font-size: 10px;
    color: rgba(0,0,0,0.45);
    margin-top: 1px;
}
/* Photos strip */
.spp-photo-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.spp-photo-thumb {
    width: 72px; height: 72px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
}
.spp-photo-add {
    width: 72px; height: 72px;
    border-radius: 12px;
    border: 1.5px dashed rgba(0,0,0,0.2);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: rgba(0,0,0,0.35);
    font-size: 20px;
    transition: background 0.15s, border-color 0.15s;
}
.spp-photo-add:hover { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.4); }
/* Text input / textarea */
.spp-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 500;
    color: #1c1c1e;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: none;
}
.spp-input:focus {
    outline: none;
    border-color: #6b5e4e;
    box-shadow: 0 0 0 3px rgba(107,94,78,0.14);
}
.spp-input::placeholder { color: rgba(0,0,0,0.3); }
/* Assign row */
.spp-assign-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
/* Upload prints button */
.spp-upload-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1.5px dashed rgba(0,0,0,0.18);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.spp-upload-btn:hover { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.35); }
.spp-upload-btn i { font-size: 18px; color: rgba(0,0,0,0.45); }
.spp-upload-btn .spp-upload-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,0,0,0.4);
    display: block;
    margin-top: 1px;
}
/* Measure CTA */
.spp-measure-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-radius: 16px;
    background: #1c1c1e;
    border: none;
    cursor: pointer;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.15s, transform 0.1s;
}
.spp-measure-cta:hover { background: #333; }
.spp-measure-cta:active { transform: scale(0.98); }
.spp-measure-cta-left { display: flex; align-items: center; gap: 10px; }
.spp-measure-cta-left i { font-size: 20px; color: rgba(255,255,255,0.7); }
.spp-measure-cta-text { text-align: left; }
.spp-measure-cta-text strong { display: block; font-size: 14px; font-weight: 700; }
.spp-measure-cta-text small { font-size: 11px; color: rgba(255,255,255,0.55); }
.spp-measure-cta-arrow { font-size: 18px; color: rgba(255,255,255,0.45); }
/* ─── Measurement View ─────────────────────────────────────────── */
.spp-meas-room {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 12px 14px;
}
.spp-meas-room-name {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spp-meas-room-name input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    font-family: inherit;
    outline: none;
}
.spp-meas-dims {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 6px;
    align-items: center;
}
.spp-meas-dim-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.spp-meas-dim-field label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0,0,0,0.4);
}
.spp-meas-dim-field input {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.spp-meas-dim-field input:focus {
    outline: none;
    border-color: #6b5e4e;
    box-shadow: 0 0 0 3px rgba(107,94,78,0.14);
}
.spp-meas-x { font-size: 13px; font-weight: 600; color: rgba(0,0,0,0.3); padding-top: 16px; }
.spp-meas-area {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,0.45);
}
.spp-meas-area strong { color: #1c1c1e; font-size: 13px; }
.spp-meas-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #1c1c1e;
    border-radius: 14px;
    color: #fff;
}
.spp-meas-total-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); }
.spp-meas-total-val { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.spp-meas-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border-radius: 12px;
    border: 1.5px dashed rgba(0,0,0,0.18);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    transition: background 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.spp-meas-add:hover { background: rgba(0,0,0,0.04); }

@keyframes scopeBubblePop {
    from {
        opacity: 0;
        transform: scale(0.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scope-bubble {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .scope-bubble.selected {
        transform: none !important;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        width: 56px;
    }

    .sidebar.expanded {
        width: 240px;
    }

    .main-content {
        margin-left: 56px;
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    .scope-bubble-field.categories-grid {
        display: block;
        grid-template-columns: none;
    }

    /* Bottom Action Bar - Sidebar Hidden */
    .fixed-bottom-actions {
        left: 16px;
        right: 16px;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 24px 16px;
    }

    .header {
        padding: 0 16px;
    }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .scope-bubble-field.categories-grid {
        display: block;
        grid-template-columns: none;
    }

    .category-card {
        padding: 20px;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Animation delays handled conditionally via JavaScript */

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Success Animation */
@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.success-animation {
    animation: successPulse 0.6s ease;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 99999;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
}

.modal {
    background: rgba(26, 26, 26, 0.95);
    border-radius: 20px 0 0 20px;
    padding: 48px 48px 48px 48px;
    width: 680px;
    height: 100vh;
    overflow-y: auto;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    box-shadow: 
        -10px 0 30px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.modal-overlay.active .modal {
    transform: translateX(0);
}

.modal-header {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    background: rgba(26, 26, 26, 0.95);
    z-index: 10;
    padding-top: 0;
    margin-top: 0;
    margin-left: -48px;
    margin-right: -48px;
    padding-left: 48px;
    padding-right: 48px;
    backdrop-filter: blur(10px);
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.5px;
}

.modal-close {
    background: rgba(75, 85, 99, 0.3);
    border: 1px solid rgba(156, 163, 175, 0.2);
    color: #e5e7eb;
    font-size: 20px;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.modal-close:hover {
    background: rgba(107, 114, 128, 0.4);
    border-color: rgba(156, 163, 175, 0.4);
    color: #ffffff;
    transform: scale(1.05);
}

.modal-subtitle {
    display: none;
}

.modal-content {
    margin-bottom: 32px;
    padding-top: 20px;
}

.form-group {
    margin-bottom: 28px;
}

.form-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.3px;
}

.form-input {
    width: 100%;
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 12px;
    padding: 18px 24px;
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    backdrop-filter: blur(10px);
}

.form-input:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(31, 41, 55, 0.9);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

.form-input::placeholder {
    color: #6b7280;
    font-weight: 400;
}

.form-select {
    width: 100%;
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 12px;
    padding: 18px 24px;
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 20px;
    padding-right: 52px;
    backdrop-filter: blur(10px);
}

.form-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
}

.form-select:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(31, 41, 55, 0.9);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

.form-select option {
    background: #1f2937;
    color: #e5e7eb;
    padding: 12px;
}

.modal-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

.btn-secondary {
    background: rgba(75, 85, 99, 0.5);
    color: #e5e7eb;
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-width: 120px;
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(107, 114, 128, 0.5);
    border-color: rgba(251, 191, 36, 0.5);
    transform: translateY(-2px);
}

.selected-categories-summary {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.selected-categories-summary h4 {
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.categories-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.category-summary-item {
    background: rgba(251, 191, 36, 0.2);
    color: #1f2937;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

.summary-note {
    color: #9ca3af;
    font-size: 13px;
    margin: 0;
    font-style: italic;
}

.selected-categories {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.selected-categories h4 {
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-item {
    background: rgba(251, 191, 36, 0.2);
    color: #1f2937;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tasks View Styles */
.action-bar {
    display: flex;
    gap: 24px;
    align-items: center;
}

.search-container {
    position: relative;
    width: 280px;
}

.search-input {
    width: 100%;
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 12px;
    padding: 12px 40px 12px 16px;
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    backdrop-filter: blur(10px);
}

.search-input:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(31, 41, 55, 0.9);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 16px;
}

.filter-container {
    width: 160px;
}

.filter-select {
    width: 100%;
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 12px;
    padding: 12px 16px;
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    backdrop-filter: blur(10px);
}

.filter-select:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(31, 41, 55, 0.9);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* Tasks View Navigator (List / Kanban) — replaces the static "Tasks" page title in the header */
.tasks-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.tasks-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tasks-view-tab i {
    font-size: 14px;
    opacity: 0.85;
}

.tasks-view-tab:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.tasks-view-tab.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.18);
}

.tasks-view-tab.active i { opacity: 1; }

/* V9.1: Adaptive Tasks header — mirrors the Materials filter rail.
   Left cluster = view tabs (List / Kanban). Right trail = view-
   dependent controls (status/team/category selects in List mode,
   kanban perspective selector + hint in Kanban mode). */
.header:has(.tasks-header-shell) {
    height: auto;
    min-height: 96px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 0;
    align-items: center;
    overflow: hidden;
}
.tasks-header-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}
.tasks-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
}
.tasks-header-row .tasks-view-tabs {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
/* Adaptive trail — softens content into the right edge instead of
   hard-clipping. Justification flips to flex-end so list filters
   and the kanban hint stay visually anchored to the right. */
.tasks-header-trail {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 24px;
    justify-content: flex-end;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black 100%);
            mask-image: linear-gradient(to right, transparent 0, black 80px, black 100%);
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tasks-header-trail .filter-container { flex-shrink: 0; }
.tasks-header-trail .filter-select {
    padding: 9px 14px;
    font-size: 14px;
    min-width: 130px;
}
.tasks-header-trail .kanban-perspective-tabs { flex-shrink: 0; }
.tasks-header-trail .kanban-perspective-hint {
    color: rgba(240, 234, 216, 0.45);
    font-size: 12px;
    font-style: italic;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Kanban Board (status-grouped columns) */
.tasks-kanban-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.kanban-column {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    min-height: 240px;
    overflow: hidden;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.kanban-column-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f3f4f6;
    margin: 0;
}

.kanban-column-title .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.kanban-column[data-status="pending"] .status-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.kanban-column[data-status="in_progress"] .status-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.kanban-column[data-status="completed"] .status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }

.kanban-column-count {
    font-size: 12px;
    font-weight: 700;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 10px;
    border-radius: 999px;
    min-width: 28px;
    text-align: center;
}

.kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

/* ── Per-column action footer (Estimate + Share) ───────────────
   Each Kanban column carries a footer pinned to its bottom edge
   with two buttons: Estimate (or View when an estimate already
   exists) and Share (disabled until an estimate exists). The
   buttons act on every task currently in the column. */
.kanban-column-footer {
    flex-shrink: 0;
    display: flex; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.22);
}
.kanban-col-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    font: 600 12px -apple-system, system-ui, sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s, color .15s;
}
.kanban-col-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.09);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
}
.kanban-col-btn:active { transform: scale(0.97); }
.kanban-col-btn:disabled {
    opacity: 0.36; cursor: not-allowed;
}
/* Estimate-exists state — green "View" pill. */
.kanban-col-btn.is-view {
    background: rgba(16,185,129,0.16);
    border-color: rgba(16,185,129,0.5);
    color: #34d399;
}
.kanban-col-btn.is-view:hover {
    background: rgba(16,185,129,0.24);
}
/* Per-card mini badge so individual task rows show their own
   estimate state (since columns mix estimated + un-estimated). */
.kanban-card-est-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(16,185,129,0.16);
    border: 1px solid rgba(16,185,129,0.45);
    color: #34d399;
    text-transform: uppercase;
}

.kanban-card {
    background: rgba(28, 28, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
    border-color: rgba(251, 191, 36, 0.35);
}

.kanban-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kanban-card-priority {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 30px;
    text-align: center;
}

.kanban-card-title {
    color: #f3f4f6;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    flex: 1;
}

.kanban-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #9ca3af;
}

.kanban-card-assignee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d1d5db;
}

.kanban-card-hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d1d5db;
}

.kanban-card-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.kanban-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    font-style: italic;
    padding: 24px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

@media (max-width: 1100px) {
    .tasks-kanban-board { grid-template-columns: 1fr; }
}

/* V9.1: Kanban perspective selector — lives in the adaptive Tasks
   header trail (see .tasks-header-trail) so the right side of the
   header swaps between filter selects (List view) and these tabs
   (Kanban view). The legacy .kanban-perspective-bar wrapper is
   retained as a no-op fallback in case a third party renders it. */
.kanban-perspective-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.kanban-perspective-tabs {
    display: inline-flex;
    background: rgba(28, 28, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.kanban-perspective-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease;
}
.kanban-perspective-tab i { opacity: 0.85; }
.kanban-perspective-tab:hover { color: #f3f4f6; background: rgba(255, 255, 255, 0.04); }
.kanban-perspective-tab.active {
    color: #1c1c1e;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.28);
}
.kanban-perspective-tab.active i { opacity: 1; color: #1c1c1e; }
.kanban-perspective-hint {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* V9.1: Wide-board layout — team & dates can have many columns,
   so allow the board to scroll horizontally instead of squashing. */
.tasks-kanban-board.theme-team,
.tasks-kanban-board.theme-dates {
    grid-template-columns: repeat(var(--kanban-cols, 5), minmax(260px, 1fr));
    overflow-x: auto;
    padding-bottom: 6px;
}
@media (max-width: 1100px) {
    .tasks-kanban-board.theme-team,
    .tasks-kanban-board.theme-dates { grid-template-columns: repeat(var(--kanban-cols, 5), minmax(240px, 1fr)); }
}

/* Generic accent dot for non-status perspectives. */
.kanban-column[data-theme="team"] .status-dot { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); }
.kanban-column[data-theme="team"][data-group=""] .status-dot { background: #6b7280; box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.18); }
.kanban-column[data-theme="dates"] .status-dot { background: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); }
.kanban-column[data-theme="dates"][data-group="today"] .status-dot { background: #f43f5e; box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18); }
.kanban-column[data-theme="dates"][data-group="tomorrow"] .status-dot { background: #fb923c; box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18); }
.kanban-column[data-theme="dates"][data-group="this_week"] .status-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.kanban-column[data-theme="dates"][data-group="next_week"] .status-dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.kanban-column[data-theme="dates"][data-group="later"]    .status-dot { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); }
.kanban-column[data-theme="dates"][data-group="none"]     .status-dot { background: #6b7280; box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.18); }

/* V9.1: Drag affordances + drop targets. */
.kanban-card { user-select: none; }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.dragging {
    opacity: 0.45;
    transform: scale(0.98);
    cursor: grabbing;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
}
.kanban-column.drop-target {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.35);
}
.kanban-column.drop-target .kanban-column-body {
    background: rgba(251, 191, 36, 0.04);
}
.kanban-column-body {
    min-height: 80px;
}

/* Card chips row — used to surface secondary context (status, due
   date) when the active perspective doesn't already show it. */
.kanban-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Card chips for non-status perspectives so the user can still
   see the task's status (and assignee) at a glance. */
.kanban-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.kanban-card-status.status-pending     { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.kanban-card-status.status-in_progress { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.kanban-card-status.status-completed   { background: rgba(16, 185, 129, 0.12); color: #10b981; }

.tasks-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 0; /* Reset to proper alignment with page content */
}

/* ── Tasks Kanban Filter Bar ── */
.tasks-filter-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    margin-bottom: 8px;
}
.tasks-cat-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 48px), transparent 100%);
}
.tasks-cat-bar::-webkit-scrollbar { display: none; }
.tasks-priority-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tasks-priority-bar::-webkit-scrollbar { display: none; }
.tasks-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(240,234,216,0.65);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.tasks-filter-pill:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.20);
    color: #f0ead8;
}
.tasks-filter-pill.active {
    background: rgba(196,144,104,0.18);
    border-color: rgba(196,144,104,0.55);
    color: #C49068;
}
.tasks-filter-pill.priority-critical.active { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.45); color: #ef4444; }
.tasks-filter-pill.priority-high.active     { background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.45); color: #f97316; }
.tasks-filter-pill.priority-medium.active   { background: rgba(234,179,8,0.15); border-color: rgba(234,179,8,0.45); color: #eab308; }
.tasks-filter-pill.priority-low.active      { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.45); color: #22c55e; }
.tasks-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240,234,216,0.35);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 4px;
}

.category-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.category-widget {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.category-header {
    color: #f3f4f6;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding: 20px 24px 16px 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.category-header .expand-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.category-header.collapsed .expand-icon {
    transform: rotate(-90deg);
}

.category-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 24px 24px;
}

.task-card {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.task-card.expanded {
    border-color: rgba(251, 191, 36, 0.3);
}

.task-header {
    padding: 16px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.task-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.task-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.task-priority {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    min-width: 32px;
    text-align: center;
}

.task-main-info {
    flex: 1;
}

.task-name {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    flex: 1;
    min-width: 0;
}

.inline-dropdown {
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 8px;
    padding: 6px 12px;
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 28px;
    backdrop-filter: blur(10px);
    min-width: 100px;
}

.inline-dropdown:focus {
    outline: none;
    border-color: #fbbf24;
    background: rgba(31, 41, 55, 0.9);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.15);
}

.inline-dropdown:hover {
    border-color: #fbbf24;
    background: rgba(31, 41, 55, 0.9);
}



.task-assignee-dropdown .inline-dropdown {
    background-color: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
}

.task-hours-dropdown .inline-dropdown {
    background-color: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
}

.task-status-dropdown .inline-dropdown {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.task-status-dropdown .inline-dropdown option[value="pending"] {
    background-color: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.task-status-dropdown .inline-dropdown option[value="in_progress"] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-status-dropdown .inline-dropdown option[value="completed"] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.task-expand {
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-expand:hover {
    background: rgba(255, 255, 255, 0.1);
}

.task-description {
    color: #9ca3af;
    font-size: 16px;
    margin: 0 0 12px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}



.task-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-badge.pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-badge.in_progress {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.completed {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.expand-icon {
    color: #6b7280;
    font-size: 16px;
    transition: transform 0.3s ease;
}

.task-details {
    background: rgba(31, 41, 55, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
}

.task-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-item label {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.meta-item span {
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.task-description-text {
    color: #9ca3af !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

.assigned-info, .hours-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.change-assignment-btn, .change-hours-btn {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.change-assignment-btn:hover, .change-hours-btn:hover {
    background: rgba(251, 191, 36, 0.3);
    transform: translateY(-1px);
}

.status-select {
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    color: #e5e7eb;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-select:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.15);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(31, 41, 55, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.3s ease;
}

.progress-text {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sub-tasks {
    margin-bottom: 24px;
}

.sub-tasks h4 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sub-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}



.sub-task-item {
    margin-bottom: 8px;
}

.sub-task-hours {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sub-task-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
}



.sub-task-name {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    flex: 1;
    min-width: 0;
}

.sub-task-checkbox {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #fbbf24;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.1);
}

.sub-task-checkbox:checked {
    background-color: #fbbf24;
    border-color: #fbbf24;
}

.sub-task-checkbox:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
}

.sub-task-materials-inline {
    margin-left: 24px;
    margin-top: 8px;
}

.sub-task-materials-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.sub-task-material-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: 1px solid;
    /* Remove any default colors to ensure status colors are applied */
    background: transparent;
    color: inherit;
}

.sub-task-material-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Earth-tone status palette ─────────────────────────────────
   not_ordered  → terracotta / rust
   on_order     → golden amber / clay
   delivered    → sage / olive green
─────────────────────────────────────────────────────────── */
.sub-task-material-tag.sub-task-material-tag-not_ordered {
    background: rgba(185, 107, 74, 0.18) !important;
    color: #c9795a !important;
    border-color: rgba(185, 107, 74, 0.45) !important;
    font-weight: 600;
}

.sub-task-material-tag.sub-task-material-tag-not_ordered:hover {
    background: rgba(185, 107, 74, 0.28) !important;
    border-color: #c9795a !important;
    box-shadow: 0 0 8px rgba(185, 107, 74, 0.3);
}

.sub-task-material-tag.sub-task-material-tag-on_order {
    background: rgba(193, 156, 64, 0.18) !important;
    color: #c9a840 !important;
    border-color: rgba(193, 156, 64, 0.45) !important;
    font-weight: 600;
}

.sub-task-material-tag.sub-task-material-tag-on_order:hover {
    background: rgba(193, 156, 64, 0.28) !important;
    border-color: #c9a840 !important;
    box-shadow: 0 0 8px rgba(193, 156, 64, 0.3);
}

.sub-task-material-tag.sub-task-material-tag-delivered {
    background: rgba(110, 150, 88, 0.18) !important;
    color: #82aa60 !important;
    border-color: rgba(110, 150, 88, 0.45) !important;
    font-weight: 600;
}

.sub-task-material-tag.sub-task-material-tag-delivered:hover {
    background: rgba(110, 150, 88, 0.28) !important;
    border-color: #82aa60 !important;
    box-shadow: 0 0 8px rgba(110, 150, 88, 0.3);
}

.add-sub-task-material-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 4px 6px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-sub-task-material-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.sub-task-assignee-dropdown .inline-dropdown {
    background-color: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
}

.sub-task-hours-dropdown .inline-dropdown {
    background-color: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
}

.sub-task-status-dropdown .inline-dropdown {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.sub-task-status-dropdown .inline-dropdown option[value="pending"] {
    background-color: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.sub-task-status-dropdown .inline-dropdown option[value="in_progress"] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.sub-task-status-dropdown .inline-dropdown option[value="completed"] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sub-task-materials {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding: 8px 16px;
}

.sub-task-materials-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.sub-task-material-tag {
    background: rgba(251, 191, 36, 0.1);
    color: var(--color-yellow);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.add-sub-task-material-btn {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-sub-task-material-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--color-primary);
}

.materials-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.materials-header h4 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-material-btn {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-material-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Material Side Menu Styles */
.material-side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}

.material-side-menu-header h3 {
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.close-side-menu-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-side-menu-btn:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.material-details-content {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.material-identity-block {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.material-identity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 16px;
    flex-shrink: 0;
}

.material-identity-name {
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.material-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.material-status-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-status-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
    width: 100%;
    text-align: left;
}

.material-status-pill:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.material-status-pill.active-not_ordered {
    background: rgba(185, 107, 74, 0.14);
    border-color: rgba(185, 107, 74, 0.4);
}

.material-status-pill.active-on_order {
    background: rgba(193, 156, 64, 0.14);
    border-color: rgba(193, 156, 64, 0.4);
}

.material-status-pill.active-delivered {
    background: rgba(110, 150, 88, 0.14);
    border-color: rgba(110, 150, 88, 0.4);
}

.pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.pill-dot.filled {
    background: currentColor;
}

.pill-dot-not_ordered { color: #c9795a; }
.pill-dot-on_order    { color: #c9a840; }
.pill-dot-delivered   { color: #82aa60; }

.pill-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.material-status-pill.active-not_ordered .pill-label { color: #c9795a; font-weight: 600; }
.material-status-pill.active-on_order    .pill-label { color: #c9a840; font-weight: 600; }
.material-status-pill.active-delivered   .pill-label { color: #82aa60; font-weight: 600; }

.pill-check {
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.material-status-pill.active-not_ordered .pill-check,
.material-status-pill.active-on_order    .pill-check,
.material-status-pill.active-delivered   .pill-check { opacity: 1; }

.material-status-pill.active-not_ordered .pill-check { color: #c9795a; }
.material-status-pill.active-on_order    .pill-check { color: #c9a840; }
.material-status-pill.active-delivered   .pill-check { color: #82aa60; }

/* Rich detail panel — image hero */
.msd-hero-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    cursor: zoom-in;
}
.msd-hero-img:hover { opacity: 0.92; }

/* Meta grid — two-column key/value pairs */
.msd-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.msd-meta-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 10px 12px;
}
.msd-meta-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(240,234,216,0.45);
    margin-bottom: 4px;
}
.msd-meta-value {
    font-size: 13px;
    font-weight: 600;
    color: #f0ead8;
    line-height: 1.3;
    word-break: break-word;
}
.msd-meta-value.price { font-size: 16px; color: #f0ead8; }
.msd-meta-value.price-unit { font-size: 11px; font-weight: 400; color: rgba(240,234,216,0.5); margin-top: 1px; }

/* Spec / description text block */
.msd-spec-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(240,234,216,0.65);
}

/* Source link button */
.msd-source-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid rgba(196,144,104,0.35);
    background: rgba(196,144,104,0.08);
    color: #C49068;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.msd-source-link:hover {
    background: rgba(196,144,104,0.16);
    border-color: rgba(196,144,104,0.55);
}

.material-side-menu-actions {
    padding: 20px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
}

.material-action-btn {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.material-action-btn.edit-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.material-action-btn.edit-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.material-action-btn.remove-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.material-action-btn.remove-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* Project Indicator Styles */
.project-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 500;
    margin-top: 4px;
}

.project-indicator i {
    color: var(--color-yellow);
    font-size: 12px;
}

/* V9.1 Scope: title + project indicator stacked, matches 96px header height */
.scope-header-v8 {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    justify-content: center;
}

/* V9.1 Scope: subtitle under page title */
.scope-v8-subtitle {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    margin-top: 6px;
    max-width: 520px;
}

.task-materials-compact {
    margin-top: 16px;
}

.materials-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.material-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: 1px solid;
}

.material-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.material-tag-not_ordered {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.material-tag-not_ordered:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.material-tag-on_order {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

.material-tag-on_order:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
}

.material-tag-delivered {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.material-tag-delivered:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.empty-materials-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 12px;
    font-style: italic;
}

.empty-materials-compact i {
    font-size: 16px;
}

.material-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.material-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
    transform: translateY(-2px);
}

.material-icon {
    width: 40px;
    height: 40px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 16px;
}

.material-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.material-name {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-status {
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Material Status Colors — Earth tones */
.material-status-not_ordered { color: #c9795a; }
.material-status-on_order    { color: #c9a840; }
.material-status-delivered   { color: #82aa60; }

/* Material Card Status Colors */
.material-card.material-status-not_ordered {
    border-color: rgba(185, 107, 74, 0.3);
}
.material-card.material-status-not_ordered:hover {
    border-color: rgba(185, 107, 74, 0.5);
    background: rgba(185, 107, 74, 0.05);
}
.material-card.material-status-on_order {
    border-color: rgba(193, 156, 64, 0.3);
}
.material-card.material-status-on_order:hover {
    border-color: rgba(193, 156, 64, 0.5);
    background: rgba(193, 156, 64, 0.05);
}
.material-card.material-status-delivered {
    border-color: rgba(110, 150, 88, 0.3);
}
.material-card.material-status-delivered:hover {
    border-color: rgba(110, 150, 88, 0.5);
    background: rgba(110, 150, 88, 0.05);
}

/* Material Icon Status Colors */
.material-card.material-status-not_ordered .material-icon {
    background: rgba(185, 107, 74, 0.12);
    color: #c9795a;
}
.material-card.material-status-on_order .material-icon {
    background: rgba(193, 156, 64, 0.12);
    color: #c9a840;
}
.material-card.material-status-delivered .material-icon {
    background: rgba(110, 150, 88, 0.12);
    color: #82aa60;
}

.material-actions {
    display: flex;
    gap: 4px;
}

.material-action-btn {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.material-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.2);
}

.material-action-btn:first-child:hover {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

.material-action-btn:last-child:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.empty-materials {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #9ca3af;
}

.empty-materials i {
    font-size: 32px;
    margin-bottom: 12px;
    color: #6b7280;
}

.empty-materials p {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-material-btn-empty {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.add-material-btn-empty:hover {
    background: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Material Side Menu */
.material-side-menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: rgba(28, 28, 30, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.material-side-menu.active {
    right: 0;
}

.material-side-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.material-side-title {
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-side-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.material-side-close:hover {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.1);
}

.material-side-content {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.material-detail-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.material-detail-icon {
    width: 48px;
    height: 48px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 20px;
}

.material-detail-info {
    flex: 1;
}

.material-detail-name {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-detail-status {
    color: #10b981;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.material-detail-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.material-detail-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.material-detail-btn-danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.material-detail-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.task-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.task-action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
}

.task-action-btn.edit-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.task-action-btn.edit-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
    transform: translateY(-1px);
}

.task-action-btn.duplicate-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.task-action-btn.duplicate-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
    transform: translateY(-1px);
}

.task-action-btn.delete-btn {
    background: rgba(107, 114, 128, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.task-action-btn.delete-btn:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────
   V9.1 — Tasks page declutter.
   Flat black pill rows (no stroke): category → indented tasks →
   further-indented sub-tasks. Hover is a hair lighter black only.

   Preserves color coding (status & material chips), dropdowns.
   Scoped to .tasks-container list view only.
   ─────────────────────────────────────────────────────────────── */

.tasks-container .category-section { gap: 12px; }

.tasks-container .category-widget {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tasks-container .category-header {
    background: #000;
    border: none;
    outline: none;
    border-radius: 999px;
    /* Taller pill so the category strip reads as a primary anchor */
    padding: 24px 28px;
    min-height: 64px;
    font-size: 21px;
    letter-spacing: 1.4px;
    margin: 0;
    box-shadow: none;
    transition: background 0.18s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.tasks-container .category-header:hover {
    background: #0a0a0a;
}

/* Tasks sit inset under the category strip */
.tasks-container .category-tasks {
    padding: 0 0 0 24px;
    gap: 10px;
    margin-top: 4px;
}

.tasks-container .task-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tasks-container .task-card:hover {
    transform: none;
    box-shadow: none;
}

.tasks-container .task-card.expanded {
    border-color: transparent;
}

.tasks-container .task-header {
    background: #000;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 12px 20px;
    box-shadow: none;
    transition: background 0.18s ease;
}

.tasks-container .task-header:hover {
    background: #0a0a0a;
}

.tasks-container .task-card.expanded .task-header {
    background: #050505;
}

/* Sub-tasks + materials further inset than the task row */
.tasks-container .task-details {
    background: transparent;
    border-top: none;
    padding: 8px 8px 4px 28px;
}

.tasks-container .sub-tasks { margin-bottom: 16px; }

.tasks-container .sub-tasks h4 { margin-left: 4px; }

.tasks-container .sub-tasks-list { gap: 8px; }

.tasks-container .sub-task-row {
    background: #000;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 10px 18px;
    margin: 0;
    box-shadow: none;
    transition: background 0.18s ease;
}

.tasks-container .sub-task-row:hover {
    background: #0a0a0a;
}

.tasks-container .sub-task-materials-inline {
    margin-left: 42px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.tasks-container .task-actions {
    border-top: none;
    padding-top: 4px;
    margin-top: 14px;
}

/* ── V9.1 Tasks expand/collapse motion ──────────────────────────
   A single height/opacity/translate transition on the wrapper,
   a snappier chevron, a soft press-down on the pill, and a
   short staggered cascade for child task / sub-task pills. */

.tasks-container .category-tasks,
.tasks-container .task-details {
    will-change: max-height, opacity, transform;
}

.tasks-container .category-header,
.tasks-container .task-header,
.tasks-container .sub-task-row {
    transition: background 0.18s ease,
                transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.tasks-container .category-header:active,
.tasks-container .task-header:active {
    transform: scale(0.992);
    background: #0c0c0e;
}

.tasks-container .sub-task-row:active {
    transform: scale(0.994);
    background: #0c0c0e;
}

.tasks-container .category-header .expand-icon,
.tasks-container .task-header .expand-icon {
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes v91PillEnter {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.tasks-container .category-tasks.is-opening > .task-card {
    animation: v91PillEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tasks-container .category-tasks.is-opening > .task-card:nth-child(1)  { animation-delay:   0ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(2)  { animation-delay:  28ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(3)  { animation-delay:  54ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(4)  { animation-delay:  78ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(5)  { animation-delay: 100ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(6)  { animation-delay: 120ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(7)  { animation-delay: 138ms; }
.tasks-container .category-tasks.is-opening > .task-card:nth-child(n+8){ animation-delay: 154ms; }

.tasks-container .task-details.is-opening .sub-task-item {
    animation: v91PillEnter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tasks-container .task-details.is-opening .sub-task-item:nth-child(1) { animation-delay:   0ms; }
.tasks-container .task-details.is-opening .sub-task-item:nth-child(2) { animation-delay:  24ms; }
.tasks-container .task-details.is-opening .sub-task-item:nth-child(3) { animation-delay:  48ms; }
.tasks-container .task-details.is-opening .sub-task-item:nth-child(4) { animation-delay:  70ms; }
.tasks-container .task-details.is-opening .sub-task-item:nth-child(n+5) { animation-delay: 88ms; }

@media (prefers-reduced-motion: reduce) {
    .tasks-container .category-tasks.is-opening > .task-card,
    .tasks-container .task-details.is-opening .sub-task-item {
        animation: none !important;
    }
}

/* ── V9.1 Tasks tag bar (sticky second header) ──────────────────
   Sits directly above the tasks list and stays pinned under the
   main app header (96px) while scrolling. Multi-select status
   pills along the top row; a contractor bubble row reveals when
   any status pill is selected. Visual filter only — all logic
   lives in renderV91TagBar / v91TagFilterState. */

.v91-tasks-tag-bar {
    position: sticky;
    top: 96px;
    z-index: 49;
    margin: 0 -16px 12px;
    padding: 14px 16px 12px;
    background: linear-gradient(
        to bottom,
        var(--color-background) 0%,
        var(--color-background) 78%,
        rgba(10, 10, 10, 0.96) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v91-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.v91-tag-pill {
    background: #000;
    color: rgba(255, 255, 255, 0.78);
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.18s ease,
                color 0.18s ease,
                transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.v91-tag-pill .v91-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
}

.v91-tag-pill:hover {
    background: #0c0c0e;
    color: #fff;
}

.v91-tag-pill:active {
    transform: scale(0.97);
}

.v91-tag-pill.is-selected {
    color: #0a0a0a;
    background: #f5f5f7;
}

.v91-tag-pill.is-selected .v91-tag-dot { opacity: 1; }

/* Status-keyed accent dot colors (subtle visual scaffolding) */
.v91-tag-pill[data-tag="active"]      { color: #6ee7b7; }
.v91-tag-pill[data-tag="prepped"]     { color: #82aa60; }
.v91-tag-pill[data-tag="unprepped"]   { color: #c9795a; }
.v91-tag-pill[data-tag="inactive"]    { color: #94a3b8; }
.v91-tag-pill[data-tag="side"]        { color: #c9a840; }
.v91-tag-pill[data-tag="assigned"]    { color: #93c5fd; }
.v91-tag-pill[data-tag="unassigned"]  { color: #f87171; }
.v91-tag-pill.is-selected[data-tag] { color: #0a0a0a; }
.v91-tag-pill.is-selected[data-tag="active"]     { background: #6ee7b7; }
.v91-tag-pill.is-selected[data-tag="prepped"]    { background: #82aa60; color: #0a0a0a; }
.v91-tag-pill.is-selected[data-tag="unprepped"]  { background: #c9795a; }
.v91-tag-pill.is-selected[data-tag="inactive"]   { background: #cbd5e1; }
.v91-tag-pill.is-selected[data-tag="side"]       { background: #c9a840; }
.v91-tag-pill.is-selected[data-tag="assigned"]   { background: #93c5fd; }
.v91-tag-pill.is-selected[data-tag="unassigned"] { background: #f87171; }

.v91-contractor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 240ms ease,
                transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-height, opacity, transform;
}

.v91-contractor-row.is-open {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}

.v91-contractor-bubble {
    background: #000;
    color: rgba(255, 255, 255, 0.85);
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 7px 14px 7px 7px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.18s ease,
                color 0.18s ease,
                transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.v91-contractor-bubble:hover { background: #0c0c0e; color: #fff; }
.v91-contractor-bubble:active { transform: scale(0.96); }
.v91-contractor-bubble.is-selected {
    background: #f5f5f7;
    color: #0a0a0a;
}

.v91-contractor-bubble .v91-contractor-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.v91-contractor-bubble.is-selected .v91-contractor-avatar {
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.18);
}

.v91-contractor-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.5px;
    font-style: italic;
    padding: 4px 6px;
}

/* ── V9.1 hierarchy of black shades ───────────────────────────
   Category (already #000) → task pill one shade lighter →
   sub-task one shade lighter again. Hover bumps each up another
   tick. Same shape language; the depth is purely from value. */

.tasks-container .task-header {
    background: #0e0e12;
}
.tasks-container .task-header:hover {
    background: #16161c;
}
.tasks-container .task-card.expanded .task-header {
    background: #16161c;
}

.tasks-container .sub-task-row {
    background: #1c1c24;
}
.tasks-container .sub-task-row:hover {
    background: #24242d;
}

/* ── V9.1 hover-reveal action cluster ─────────────────────────
   In default state the pill is just [#priority] [name] [chevron].
   On hover (or focus-within when a select is open) the cluster
   fades in: status pill, hours-as-text, assignee chip OR a
   full-width scrolling row of contractor suggestion tags. The
   cluster animates max-width + opacity so the row keeps layout
   stable and the chevron pins to the right edge always. */

.tasks-container .task-row,
.tasks-container .sub-task-row {
    position: relative;
}

.tasks-container .task-name,
.tasks-container .sub-task-name {
    flex: 0 1 auto;
    min-width: 0;
}

.tasks-container .task-expand {
    margin-left: auto;
}

.tasks-container .v91-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease;
}

.tasks-container .task-card:hover .v91-actions,
.tasks-container .task-card:focus-within .v91-actions,
.tasks-container .sub-task-item:hover .v91-actions,
.tasks-container .sub-task-item:focus-within .v91-actions {
    max-width: 1400px;
    opacity: 1;
    pointer-events: auto;
}

.tasks-container .v91-actions > .task-status-dropdown,
.tasks-container .v91-actions > .sub-task-status-dropdown,
.tasks-container .v91-actions > .task-hours-dropdown,
.tasks-container .v91-actions > .sub-task-hours-dropdown,
.tasks-container .v91-actions > .task-assignee-dropdown,
.tasks-container .v91-actions > .sub-task-assignee-dropdown,
.tasks-container .v91-actions > .scope-avatars,
.tasks-container .v91-actions > .task-activate-btn,
.tasks-container .v91-actions > .task-deactivate-btn {
    flex-shrink: 0;
}

/* Hours dropdown styled to look like inline text — bigger weight,
   no border, no chevron icon. Stays a real <select> so the
   browser native dropdown still opens on click. */
.tasks-container .v91-actions .v91-hours-text .inline-dropdown {
    background: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    padding: 4px 4px;
    min-width: 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.2px;
}
.tasks-container .v91-actions .v91-hours-text .inline-dropdown:hover,
.tasks-container .v91-actions .v91-hours-text .inline-dropdown:focus {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    color: #fff;
}

/* Assigned chip: reuse the existing dropdown but soften it so it
   reads as a name chip rather than a panel control. */
.tasks-container .v91-actions .v91-assignee-chip .inline-dropdown {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    background-image: none;
    padding: 6px 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    min-width: 0;
}
.tasks-container .v91-actions .v91-assignee-chip .inline-dropdown:hover,
.tasks-container .v91-actions .v91-assignee-chip .inline-dropdown:focus {
    background: rgba(255, 255, 255, 0.10);
    border: none;
    box-shadow: none;
    color: #fff;
}

/* Unassigned: full-width horizontal scroll row of contractor
   suggestion tags. Edge fades on left/right via mask-image so
   tags read as gently appearing/disappearing into the gutters. */
.tasks-container .v91-actions .v91-assignee-suggestions {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 28px,
        #000 calc(100% - 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 28px,
        #000 calc(100% - 28px),
        transparent 100%
    );
    padding: 4px 18px;
}
.tasks-container .v91-actions .v91-assignee-suggestions::-webkit-scrollbar {
    display: none;
}

.tasks-container .v91-assignee-tag {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.tasks-container .v91-assignee-tag:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.tasks-container .v91-assignee-tag:active {
    transform: scale(0.96);
}
.tasks-container .v91-assignee-tag .v91-assignee-avatar {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

/* ── V9.1 sticky bar — top controls row (search + auto assign) ── */

.v91-tasks-tag-bar .v91-controls-row {
    flex-wrap: nowrap;
    width: 100%;
}

.v91-search {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    background: #000;
    border-radius: 999px;
    padding: 10px 16px 10px 42px;
    transition: background 0.18s ease;
}

.v91-search:hover { background: #0a0a0a; }
.v91-search:focus-within { background: #0c0c0e; }

.v91-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    pointer-events: none;
}

.v91-search-input {
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0;
}

.v91-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.v91-search-clear {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: none;
    outline: none;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    margin-left: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.v91-search.has-text .v91-search-clear {
    opacity: 1;
    pointer-events: auto;
}

.v91-search-clear:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.v91-search-clear:active { transform: scale(0.92); }

.v91-auto-assign {
    flex-shrink: 0;
    background: #000;
    color: rgba(255, 255, 255, 0.88);
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.v91-auto-assign:hover {
    background: #0c0c0e;
    color: #fff;
}

.v91-auto-assign:active { transform: scale(0.97); }
.v91-auto-assign i {
    color: #93c5fd;
    font-size: 12px;
}

/* Filter-hidden tasks / categories — collapse out of layout. */
.tasks-container .v91-hidden {
    display: none !important;
}

/* Lightweight toast for Auto Assign / similar feedback. */
.v91-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 12px);
    background: #000;
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.v91-toast.is-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.v91-toast.is-out {
    opacity: 0;
    transform: translate(-50%, -8px);
}

.add-task-button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.add-task-button:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

.filter-summary {
    background: rgba(31, 41, 55, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
}

.filter-summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-count {
    color: #9ca3af;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.clear-filters-btn {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.clear-filters-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

.summary-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-tag {
    background: var(--color-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

/* Materials View Styles */
.materials-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Materials Selection Notification Bar */
.materials-selection-bar {
    display: none;
    background: var(--color-background);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    margin: 0;
    box-shadow: none;
    backdrop-filter: none;
    position: fixed;
    top: 96px;
    left: 336px;
    right: 68px;
    z-index: 40;
    overflow: hidden;
}

.materials-selection-bar.show {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown 0.3s ease-out;
}

.materials-selection-bar::before {
    display: none;
}

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

/* Shimmer animation removed - no longer needed */

.selection-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9ca3af;
}

.selection-count {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    color: #9ca3af;
}

.selection-actions {
    display: flex;
    gap: 8px;
}

.selection-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 6px;
}

.selection-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f3f4f6;
    transform: translateY(-1px);
}

.selection-action-btn.danger {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 0.5);
}

.selection-action-btn.danger:hover {
    background: rgba(239, 68, 68, 1);
}

.clear-selection {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.clear-selection:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f3f4f6;
}

/* Responsive adjustments for notification bar */
@media (max-width: 1024px) {
    .materials-selection-bar {
        left: 336px;
        right: 36px;
    }
}

@media (max-width: 768px) {
    .materials-selection-bar {
        left: 16px;
        right: 16px;
        top: 80px;
    }
}

/* Materials Tab Buttons */
.materials-tab-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    justify-content: center;
    padding: 0 20px;
}

.materials-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 24px;
    color: #9ca3af;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    backdrop-filter: blur(10px);
    min-width: 120px;
    justify-content: center;
}

.materials-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f3f4f6;
    transform: translateY(-1px);
}

.materials-tab-btn.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: rgba(251, 191, 36, 0.5);
    color: #1f2937;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.materials-tab-btn.active:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}

.materials-tab-btn i {
    font-size: 16px;
}

/* Header Materials Tab Buttons */
.header-right .materials-tab-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-right .materials-tab-btn {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header-right .materials-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.header-right .materials-tab-btn.active:hover {
    background: white;
    border-color: white;
    color: black;
    transform: translateY(-1px);
}

.header-right .materials-tab-btn.active {
    background: white;
    border-color: white;
    color: black;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.header-right .materials-tab-btn i {
    font-size: 16px;
}

/* ============================================================
   Materials view — collapsing nav + single-row filter trail
   Replaces the old "Materials" h1. Tabs collapse to show only the
   active button by default; hover/focus expands the cluster. The
   filter trail to the right slides naturally and fades into the
   right edge if it overflows the header. Used by switchToMaterials().
   ============================================================ */
/* The default .header is fixed at 96px; the materials shell now fits
   in a single row but we still let the header auto-size for safety. */
.header:has(.materials-header-shell) {
    height: 96px;              /* match all other tab headers */
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;          /* let trail fade reach the actual edge */
    align-items: center;
    overflow: hidden;
}
.materials-header-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
}
.materials-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
}

/* ── Collapsing nav cluster ───────────────────────────────────
   Default: only the .active tab is visible. On hover / focus-within
   (or via .is-expanded for touch), every tab expands smoothly to
   full width. Buttons that are collapsed have max-width:0, no
   padding, and are unclickable so the cluster compresses cleanly.
   ─────────────────────────────────────────────────────────── */
.materials-tab-buttons.materials-tabs-v2 {
    display: inline-flex;
    gap: 0;
    background: rgba(17, 17, 17, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    padding: 4px;
    margin: 0;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 2;       /* sits above the trail's fade mask */
}
.materials-tab-buttons.materials-tabs-v2 .materials-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 7px 14px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240, 234, 216, 0.65);
    min-width: 0;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: none;
    transition: background 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease;
}
.materials-tab-buttons.materials-tabs-v2 .materials-tab-btn.active {
    background: #1A1A1A;
    border-color: rgba(255, 255, 255, 0.10);
    color: #C49068;
    box-shadow: none;
}
.materials-tab-buttons.materials-tabs-v2 .materials-tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 234, 216, 0.95);
    transform: none;
    box-shadow: none;
}
.materials-tab-buttons.materials-tabs-v2 .materials-tab-btn.active:hover {
    background: #1A1A1A;
    color: #C49068;
    transform: none;
    box-shadow: none;
}
.materials-tab-buttons.materials-tabs-v2 .materials-tab-btn i {
    font-size: 12px;
    opacity: 0.85;
    margin-right: 6px;
}

/* Category scroll rail — sits inline in the trail, scrolls horizontally */
.mat-cat-scroll {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 0;
    min-width: 80px;
    max-width: 440px;
    scrollbar-width: none;   /* Firefox */
    padding-bottom: 1px;     /* avoids clipping descenders */
    scroll-behavior: smooth;
}
.mat-cat-scroll::-webkit-scrollbar { display: none; }
/* Make the tag dropdown chip match the supplier/zoom chip look */
.mat-tag-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(17, 17, 17, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(240, 234, 216, 0.7);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mat-tag-select-chip.active {
    background: rgba(196, 144, 104, 0.16);
    border-color: rgba(196, 144, 104, 0.55);
    color: #C49068;
}
.mat-tag-select-chip i { font-size: 11px; opacity: 0.8; }
.mat-tag-select-chip select.chip-select {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 90px;
}
.mat-tag-select-chip select.chip-select option { color: #111; background: #fff; }

/* ── Filter trail — inline filters (no edge fade mask; scrolls if needed) ── */
.materials-header-trail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    padding-right: 8px;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.materials-header-trail::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────────────────────────
   V9.1 Materials top-right FAB cluster (liquid-glass horizontal
   morph). Each group is a single glass pill: a 38px circle when
   closed, expanding leftward in the same row to reveal its action
   items inline. Items emerge from the trigger outward, pushing
   the filter trail to the left.
   ────────────────────────────────────────────────────────────── */
.mat-fab-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding-right: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.mat-fab-group {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    transition:
        padding 0.46s cubic-bezier(0.34, 1.56, 0.64, 1),
        gap 0.46s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.3s ease;
}
/* Hover opens the pill; click toggles the persistent .is-open
   "frozen" state so it stays open after the mouse leaves. */
.mat-fab-group:hover,
.mat-fab-group:focus-within,
.mat-fab-group.is-open {
    padding-left: 6px;
    gap: 2px;
    background: rgba(28, 28, 30, 0.82);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Inline items list — sits to the LEFT of the trigger and grows
   horizontally as the pill morphs open. */
.mat-fab-items {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 100%;
    overflow: hidden;
}
.mat-fab-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: #f5f5f7;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    max-width: 0;
    opacity: 0;
    transform: translateX(8px) scale(0.92);
    pointer-events: none;
    overflow: hidden;
    transition:
        max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        padding 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.26s ease,
        transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.15s ease;
}
.mat-fab-item i {
    font-size: 12px;
    opacity: 0.78;
}
.mat-fab-item:hover {
    background: rgba(255, 255, 255, 0.10);
}
.mat-fab-item:active {
    background: rgba(255, 255, 255, 0.18);
}
.mat-fab-group:hover .mat-fab-item,
.mat-fab-group:focus-within .mat-fab-item,
.mat-fab-group.is-open .mat-fab-item {
    max-width: 220px;
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    padding: 0 12px;
}
/* Stagger items so they emerge from the trigger outward (right→left).
   Last child (closest to trigger) reveals first. */
.mat-fab-group[data-fab="add"]:hover .mat-fab-item:nth-child(2),
.mat-fab-group[data-fab="add"]:focus-within .mat-fab-item:nth-child(2),
.mat-fab-group[data-fab="add"].is-open .mat-fab-item:nth-child(2) {
    transition-delay: 0s;
}
.mat-fab-group[data-fab="add"]:hover .mat-fab-item:nth-child(1),
.mat-fab-group[data-fab="add"]:focus-within .mat-fab-item:nth-child(1),
.mat-fab-group[data-fab="add"].is-open .mat-fab-item:nth-child(1) {
    transition-delay: 0.06s;
}
.mat-fab-group[data-fab="share"]:hover .mat-fab-item:nth-child(3),
.mat-fab-group[data-fab="share"]:focus-within .mat-fab-item:nth-child(3),
.mat-fab-group[data-fab="share"].is-open .mat-fab-item:nth-child(3) {
    transition-delay: 0s;
}
.mat-fab-group[data-fab="share"]:hover .mat-fab-item:nth-child(2),
.mat-fab-group[data-fab="share"]:focus-within .mat-fab-item:nth-child(2),
.mat-fab-group[data-fab="share"].is-open .mat-fab-item:nth-child(2) {
    transition-delay: 0.06s;
}
.mat-fab-group[data-fab="share"]:hover .mat-fab-item:nth-child(1),
.mat-fab-group[data-fab="share"]:focus-within .mat-fab-item:nth-child(1),
.mat-fab-group[data-fab="share"].is-open .mat-fab-item:nth-child(1) {
    transition-delay: 0.12s;
}

/* Trigger circle — blends into the pill when group is open so the
   whole thing reads as one continuous glass blob. */
.mat-fab-trigger {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #f5f5f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.2s ease,
        background 0.2s ease;
}
.mat-fab-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
}
.mat-fab-trigger:active {
    transform: scale(0.94);
}
.mat-fab-group[data-fab="add"]:hover .mat-fab-trigger,
.mat-fab-group[data-fab="add"]:focus-within .mat-fab-trigger,
.mat-fab-group[data-fab="add"].is-open .mat-fab-trigger {
    transform: rotate(45deg);
    color: #C49068;
}
.mat-fab-group[data-fab="share"]:hover .mat-fab-trigger,
.mat-fab-group[data-fab="share"]:focus-within .mat-fab-trigger,
.mat-fab-group[data-fab="share"].is-open .mat-fab-trigger {
    color: #C49068;
}
/* When click-frozen, accent the pill border so the user can tell
   the menu is "pinned" open and won't collapse on mouse-leave. */
.mat-fab-group.is-open {
    border-color: rgba(196, 144, 104, 0.55);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 1px rgba(196, 144, 104, 0.25);
}

/* Inline cluster wrapping inside the trail — keeps groups tidy */
.trail-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.trail-group + .trail-group { margin-left: 4px; }

/* Schedule zoom buttons (1D / 3D / 7D / 14D / 1mo) — mirrors gantt-zoom-btn */
.materials-zoom-cluster {
    display: inline-flex;
    gap: 2px;
    background: rgba(17, 17, 17, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 13px;
    padding: 4px;
}
.materials-zoom-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240, 234, 216, 0.55);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.materials-zoom-btn:hover { color: rgba(240, 234, 216, 0.9); }
.materials-zoom-btn.active {
    background: #1A1A1A;
    border-color: rgba(255, 255, 255, 0.10);
    color: #C49068;
}

/* Filter chip rail (categories + tags + no-quantity + supplier) */
.materials-chip-rail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
/* chip-rail-label is no longer rendered; rule kept for legacy safety */
.materials-chip-rail .chip-rail-label,
.chip-rail-label {
    display: none;
}
.materials-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(17, 17, 17, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(240, 234, 216, 0.7);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.materials-zoom-cluster { flex-shrink: 0; }
.materials-chip:hover {
    background: rgba(28, 28, 28, 0.9);
    color: rgba(240, 234, 216, 0.95);
    border-color: rgba(255, 255, 255, 0.18);
}
.materials-chip .chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
.materials-chip i { font-size: 11px; opacity: 0.85; }
.materials-chip.active {
    background: rgba(196, 144, 104, 0.16);
    border-color: rgba(196, 144, 104, 0.55);
    color: #C49068;
}
.materials-chip.chip-warning.active {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.55);
    color: #f59e0b;
}
.materials-chip-vsep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.10);
    margin: 0 4px;
}
.materials-chip select.chip-select {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.materials-chip select.chip-select option { color: #111; background: #fff; }

/* ─── Kanban view (groups by material status) ─────────────── */
.materials-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 14px;
    width: 100%;
    padding-bottom: 24px;
}
@media (max-width: 1100px) { .materials-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .materials-kanban { grid-template-columns: 1fr; } }
.kanban-column {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 320px;
}
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kanban-column-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #f3f4f6;
    letter-spacing: 0.02em;
}
.kanban-status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
}
.kanban-status-dot.status-not_ordered    { background: #c9795a; }
.kanban-status-dot.status-on_order        { background: #c9a840; }
.kanban-status-dot.status-not_delivered   { background: #b8956a; }
.kanban-status-dot.status-delivered       { background: #82aa60; }

/* ── Kanban automation footer button ─────────────────────── */
.kanban-column-footer {
    margin-top: auto;          /* push to bottom of the flex column */
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.kanban-auto-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}
.kanban-auto-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--kb-glow, rgba(0,0,0,0.3));
}
.kanban-auto-btn:active { transform: translateY(0); }
.kanban-auto-btn i { font-size: 11px; }
/* Subtle animated shimmer on hover to signal "this triggers something" */
.kanban-auto-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0s;
}
.kanban-auto-btn:hover::after {
    transform: translateX(100%);
    transition: transform 0.5s ease;
}
/* Per-column accent colours */
.kanban-auto-btn.btn-measure {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.40);
    color: #c084fc;
    --kb-glow: rgba(168, 85, 247, 0.25);
}
.kanban-auto-btn.btn-order {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.40);
    color: #60a5fa;
    --kb-glow: rgba(59, 130, 246, 0.25);
}
.kanban-auto-btn.btn-schedule {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.40);
    color: #fbbf24;
    --kb-glow: rgba(245, 158, 11, 0.25);
}
.kanban-auto-btn.btn-notify {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.40);
    color: #4ade80;
    --kb-glow: rgba(34, 197, 94, 0.25);
}
/* Loading spinner state */
.kanban-auto-btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
}
.kanban-auto-btn.is-loading i { display: none; }
.kanban-auto-btn.is-loading::before {
    content: '';
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kbSpin 0.7s linear infinite;
    margin-right: 6px;
}
@keyframes kbSpin { to { transform: rotate(360deg); } }

/* ============================================================
   MATERIALS DOCUMENT COMPOSE VIEW
   Triggered by each kanban automation button. Replaces the
   materials list with a paper-style document preview, recipient
   selector, and message composer. A bottom-left back button
   (matches the gantt back button) returns to the Kanban view.
   ============================================================ */
.mat-doc-shell {
    position: relative;
    min-height: calc(100vh - 200px);
    padding: 24px 32px 120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1100px) {
    .mat-doc-shell {
        grid-template-columns: 1fr;
        padding: 20px 16px 140px;
    }
}
.mat-doc-canvas {
    background: #fafaf7;
    color: #111;
    border-radius: 14px;
    padding: 56px 64px 64px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.08),
        0 24px 60px rgba(0,0,0,.5),
        0 4px 10px rgba(0,0,0,.3);
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 920px;
    position: relative;
    overflow: hidden;
}
.mat-doc-canvas::before {
    /* subtle paper grain */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,.018) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
}
@media (max-width: 700px) { .mat-doc-canvas { padding: 32px 24px 40px; } }

.mat-doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 18px;
    margin-bottom: 22px;
}
.mat-doc-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mat-doc-brand-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111;
}
.mat-doc-brand-tag {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mat-doc-meta {
    text-align: right;
    font-size: 11.5px;
    color: #444;
    line-height: 1.5;
}
.mat-doc-meta strong { color: #111; }
.mat-doc-meta .mat-doc-num {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.04em;
}

.mat-doc-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
}
.mat-doc-subtitle {
    font-size: 13px;
    color: #555;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* Project / supplier / dates info grid */
.mat-doc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    background: #f1ede5;
    border: 1px solid #d8d2c6;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 28px;
}
.mat-doc-info-cell .label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 4px;
}
.mat-doc-info-cell .value {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

/* Materials table */
.mat-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-bottom: 24px;
}
.mat-doc-table thead th {
    background: #1a1a1a;
    color: #f5f0e6;
    text-align: left;
    padding: 10px 12px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mat-doc-table thead th:first-child { border-top-left-radius: 6px; }
.mat-doc-table thead th:last-child  { border-top-right-radius: 6px; text-align: right; }
.mat-doc-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5dfd2;
    color: #222;
    vertical-align: top;
}
.mat-doc-table tbody tr:nth-child(even) td { background: rgba(196,144,104,0.04); }
.mat-doc-table tbody td.col-num   { color: #888; font-family: 'SF Mono', monospace; width: 36px; }
.mat-doc-table tbody td.col-cat   { font-size: 11px; color: #666; }
.mat-doc-table tbody td.col-qty   { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.mat-doc-table tbody td.col-price { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.mat-doc-table tbody td.col-name  { font-weight: 600; color: #111; }
.mat-doc-table tbody td.col-name small {
    display: block;
    font-weight: 400;
    color: #777;
    font-size: 10.5px;
    margin-top: 2px;
}

.mat-doc-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    width: max-content;
    min-width: 240px;
    font-size: 12.5px;
    color: #333;
}
.mat-doc-totals .row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0;
}
.mat-doc-totals .row.grand {
    border-top: 2px solid #1a1a1a;
    padding-top: 10px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.mat-doc-footer-note {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid #e5dfd2;
    font-size: 11px;
    color: #777;
    line-height: 1.6;
}

/* ── Side panel ─────────────────────────────────────────── */
.mat-doc-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 4px;
}
@media (max-width: 1100px) {
    .mat-doc-side { position: relative; top: 0; max-height: none; }
}
.mat-doc-card {
    background: rgba(28,28,30,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 18px 16px;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.mat-doc-card h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(240,234,216,0.65);
    margin: 0 0 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mat-doc-card h4 i { color: #C49068; font-size: 12px; }

/* Recipients */
.mat-doc-recipients {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.mat-doc-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: background 0.15s ease;
}
.mat-doc-recipient:hover { background: rgba(255,255,255,0.07); }
.mat-doc-recipient.is-default {
    border-color: rgba(196,144,104,0.40);
    background: rgba(196,144,104,0.08);
}
.mat-doc-recipient .avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: #111;
    flex-shrink: 0;
}
.mat-doc-recipient .meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.mat-doc-recipient .meta .name {
    font-size: 12.5px;
    font-weight: 600;
    color: #f3f4f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mat-doc-recipient .meta .role {
    font-size: 10.5px;
    color: rgba(240,234,216,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mat-doc-recipient .pill-default {
    background: rgba(196,144,104,0.15);
    color: #C49068;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mat-doc-recipient .remove-btn {
    background: transparent;
    border: none;
    color: rgba(240,234,216,0.4);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.12s ease;
}
.mat-doc-recipient .remove-btn:hover {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}
.mat-doc-add-recipient {
    position: relative;
}
.mat-doc-add-recipient input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    padding: 9px 12px;
    color: #f3f4f6;
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.15s ease;
}
.mat-doc-add-recipient input:focus { border-color: rgba(196,144,104,0.55); }
.mat-doc-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    max-height: 240px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}
.mat-doc-suggestions.is-open { display: block; }
.mat-doc-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.12s;
}
.mat-doc-suggestion:hover { background: rgba(196,144,104,0.10); }
.mat-doc-suggestion .avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    color: #111;
}
.mat-doc-suggestion .info .name { font-size: 12px; font-weight: 600; color: #f3f4f6; }
.mat-doc-suggestion .info .email { font-size: 10.5px; color: rgba(240,234,216,0.55); }
.mat-doc-suggestion-empty { padding: 12px; font-size: 12px; color: rgba(240,234,216,0.5); text-align: center; }

/* Message composer */
.mat-doc-msg-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.mat-doc-msg-preset {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(240,234,216,0.75);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
}
.mat-doc-msg-preset:hover {
    background: rgba(196,144,104,0.10);
    border-color: rgba(196,144,104,0.40);
    color: #C49068;
}
.mat-doc-msg-preset.is-active {
    background: rgba(196,144,104,0.18);
    border-color: rgba(196,144,104,0.55);
    color: #C49068;
}
.mat-doc-msg-textarea {
    width: 100%;
    min-height: 110px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    padding: 11px 13px;
    color: #f3f4f6;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.mat-doc-msg-textarea:focus { border-color: rgba(196,144,104,0.55); }
.mat-doc-msg-meta {
    font-size: 10.5px;
    color: rgba(240,234,216,0.45);
    margin-top: 6px;
    text-align: right;
}

/* Document settings (channel, attach options) */
.mat-doc-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mat-doc-channel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(240,234,216,0.7);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mat-doc-channel-btn i { font-size: 14px; opacity: .8; }
.mat-doc-channel-btn:hover {
    background: rgba(196,144,104,0.08);
    border-color: rgba(196,144,104,0.30);
    color: #C49068;
}
.mat-doc-channel-btn.is-active {
    background: rgba(196,144,104,0.15);
    border-color: rgba(196,144,104,0.55);
    color: #C49068;
}

/* Footer action bar (back button left, send button right) */
.mat-doc-action-bar {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9990;
}
@media (max-width: 768px) { .mat-doc-action-bar { right: 16px; } }
.mat-doc-back-btn {
    position: fixed;
    bottom: 32px;
    left: 296px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.9);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px 11px 14px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    z-index: 9990;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.mat-doc-back-btn i { font-size: 12px; }
.mat-doc-back-btn:hover { background: rgba(20,20,20,.88); transform: translateY(-1px); }
@media (max-width: 768px) { .mat-doc-back-btn { left: 16px; } }

.mat-doc-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid rgba(196,144,104,.55);
    background: linear-gradient(135deg, #C49068 0%, #a87752 100%);
    color: #1a1410;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 22px rgba(196,144,104,.30);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.mat-doc-send-btn i { font-size: 12px; }
.mat-doc-send-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(196,144,104,.40); }
.mat-doc-send-btn:disabled,
.mat-doc-send-btn.is-loading { opacity: .6; cursor: not-allowed; transform: none; }
.mat-doc-send-btn.is-loading::before {
    content: '';
    width: 13px; height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kbSpin 0.7s linear infinite;
}
.mat-doc-send-btn.is-loading i { display: none; }

.mat-doc-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(240,234,216,.85);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    transition: background 0.15s ease;
}
.mat-doc-secondary-btn:hover { background: rgba(20,20,20,.88); }

/* Status badge in document header */
.mat-doc-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.mat-doc-action-badge.kind-measure  { background: rgba(168,85,247,.12); color: #7c3aed; border: 1px solid rgba(168,85,247,.30); }
.mat-doc-action-badge.kind-order    { background: rgba(59,130,246,.12); color: #2563eb; border: 1px solid rgba(59,130,246,.30); }
.mat-doc-action-badge.kind-schedule { background: rgba(245,158,11,.12); color: #d97706; border: 1px solid rgba(245,158,11,.30); }
.mat-doc-action-badge.kind-notify   { background: rgba(34,197,94,.12);  color: #15803d; border: 1px solid rgba(34,197,94,.30); }

.kanban-column-count {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(240, 234, 216, 0.85);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 360px);
}
.kanban-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.kanban-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}
.kanban-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 6px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(240, 234, 216, 0.55);
}
.kanban-card-meta .meta-cat {
    background: rgba(196, 144, 104, 0.12);
    color: #C49068;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.kanban-card-meta .meta-qty.is-zero { color: #ef4444; font-weight: 700; }
.kanban-card-meta .meta-cost { font-weight: 600; color: rgba(240, 234, 216, 0.8); }
.kanban-empty {
    color: rgba(240, 234, 216, 0.35);
    font-size: 12px;
    padding: 14px 8px;
    text-align: center;
    font-style: italic;
}

/* ─── Kanban drag-and-drop ──────────────────────────────────── */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.is-dragging {
    opacity: 0.4;
    transform: scale(0.97);
    cursor: grabbing;
}
.kanban-cards.drag-over {
    background: rgba(196, 144, 104, 0.07);
    border-radius: 10px;
    outline: 2px dashed rgba(196, 144, 104, 0.4);
    outline-offset: -2px;
}

/* ─── Kanban card image thumbnail ────────────────────────── */
.kanban-card-img {
    width: 100%;
    height: 88px;
    object-fit: cover;
    border-radius: 7px;
    margin-bottom: 8px;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}
.kanban-card-img:hover { opacity: 0.88; }

/* ─── Image lightbox ─────────────────────────────────────── */
#imgLightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#imgLightbox.open { display: flex; }
#imgLightbox img {
    max-width: min(90vw, 820px);
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    pointer-events: none;
    user-select: none;
}

/* ─── Full-width category + sub-tag filter bar ──────────────
   Sits above the material list / kanban / shop / etc.
   Sticky under the fixed 96px header, with the page bg color
   so scrolling rows pass behind it cleanly.
────────────────────────────────────────────────────────── */
.mat-filter-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* ── Category chip pills row — single line, horizontal scroll ── */
.mat-cat-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 14px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: none;
    mask-image: none;
    white-space: nowrap;
    min-height: 0;
}
.mat-cat-bar::-webkit-scrollbar { display: none; }
.mat-filter-dropdowns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
    width: 100%;
}
.mat-dd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 160px;
    max-width: 320px;
}
.mat-dd-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: rgba(240, 234, 216, 0.38);
}
.mat-dd-select {
    width: 100%;
    padding: 8px 28px 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(240, 234, 216, 0.9);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9d0d8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.mat-dd-select:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}
.mat-dd-select-multi {
    padding: 6px 8px;
    min-height: 38px;
    max-height: 108px;
    overflow-y: auto;
    background-image: none;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}
.mat-dd-select option {
    color: #111;
    background: #fff;
}
.mat-cat-bar-inner {
    display: contents; /* pills render directly in the flex mat-cat-bar row */
}
.mat-cat-bar-subs {
    display: none;
}
.mat-cat-back {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(240,234,216,0.75);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mat-cat-back:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
    color: #f0ead8;
}
.mat-cat-inline-title {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(196,144,104,0.95);
    margin-right: 4px;
}
.mat-subtag-empty {
    font-size: 11px;
    font-style: italic;
    color: rgba(240,234,216,0.35);
    padding: 6px 4px;
}
.mat-cat-bar::-webkit-scrollbar { display: none; }

/* Header trail: stage filter dropdown */
.materials-header-trail .trail-dd-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    min-width: 0;
}
.materials-header-trail .trail-dd-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(240, 234, 216, 0.35);
    white-space: nowrap;
}
.materials-chip.mat-stages-wrap {
    padding: 4px 8px 4px 10px;
    border-radius: 10px;
    max-width: 200px;
    align-items: flex-start;
}
.materials-chip.mat-stages-wrap select.mat-stages-multi {
    max-width: 170px;
    min-height: 44px;
    font-size: 11px;
    line-height: 1.25;
    background: transparent;
    border: none;
    padding: 4px 2px;
    margin: 0;
    color: inherit;
    outline: none;
    cursor: pointer;
}
.materials-chip.mat-stages-wrap select.mat-stages-multi option {
    color: #111;
    background: #fff;
}

.mat-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(240,234,216,0.65);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.mat-cat-pill:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.20);
    color: #f0ead8;
}
.mat-cat-pill.active {
    background: rgba(196,144,104,0.18);
    border-color: rgba(196,144,104,0.55);
    color: #C49068;
}
.mat-cat-pill .pill-count {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.55;
}

/* ── Row 2: sub-tags ── */
.mat-subtag-bar {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mat-subtag-bar::-webkit-scrollbar { display: none; }
.mat-subtag-bar.open {
    display: none !important;
}
.mat-subtag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(240,234,216,0.5);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mat-subtag-pill:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.16);
    color: #f0ead8;
}
.mat-subtag-pill.active {
    background: rgba(139,190,120,0.15);
    border-color: rgba(139,190,120,0.40);
    color: #8bbe78;
}
.mat-subtag-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(240,234,216,0.30);
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: 4px;
}

/* ─── Column-header filter buttons ─────────────────────────────── */
.col-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
}
.col-filter-btn:hover { background: rgba(255,255,255,0.07); color: #e5e7eb; }
.col-filter-btn.active { color: #C49068; }
.col-filter-btn .caret {
    font-size: 8px;
    opacity: 0.45;
    transition: transform 0.18s, opacity 0.18s;
    display: inline-block;
}
.col-filter-btn.open .caret  { transform: rotate(180deg); opacity: 0.85; }
.col-filter-btn.active .caret { opacity: 0.85; color: #C49068; }

.col-filter-popover {
    position: fixed;
    z-index: 10001;
    min-width: 196px;
    max-height: 290px;
    background: #18181f;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    display: none;
    flex-direction: column;
    padding: 6px 0;
}
.col-filter-popover.open { display: flex; }
.col-filter-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 12px;
    color: #c9d0d8;
    transition: background 0.12s;
    user-select: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}
.col-filter-item:hover { background: rgba(255,255,255,0.06); }
.col-filter-item.checked { color: #C49068; }
.col-filter-item .chk-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: all 0.15s;
}
.col-filter-item.checked .chk-icon {
    background: #C49068;
    border-color: #C49068;
    color: #fff;
}
.col-filter-count {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.38;
    font-weight: 500;
}
.col-filter-actions {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 7px 14px;
}
.col-filter-clear-btn {
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
}
.col-filter-clear-btn:hover { color: #f3f4f6; }

/* ─── View More categories popover ────────────────────────────── */
.mat-view-more-btn {
    flex-shrink: 0;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(240,234,216,0.5);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mat-view-more-btn:hover {
    background: rgba(255,255,255,0.07);
    color: #f0ead8;
    border-color: rgba(255,255,255,0.25);
}
.mat-view-more-btn.has-active {
    background: rgba(196,144,104,0.18);
    border-color: rgba(196,144,104,0.45);
    color: #C49068;
}
.mat-view-more-popover {
    position: fixed;
    z-index: 10001;
    min-width: 220px;
    max-height: 320px;
    background: #18181f;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.6);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    display: none;
    flex-direction: column;
    padding: 6px 0;
}
.mat-view-more-popover.open { display: flex; }
.mat-view-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #c9d0d8;
    transition: background 0.12s;
    user-select: none;
}
.mat-view-more-item:hover { background: rgba(255,255,255,0.06); }
.mat-view-more-item.active { color: #C49068; }
.mat-view-more-item .chk-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: all 0.15s;
}
.mat-view-more-item.active .chk-icon {
    background: #C49068;
    border-color: #C49068;
    color: #fff;
}
.mat-view-more-item-count {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.38;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1px 7px;
}

/* ─── Shop view (browse products by supplier) ─────────────── */
.materials-shop {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.shop-supplier-section {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}
.shop-supplier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.shop-supplier-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #f3f4f6;
}
.shop-supplier-name i { color: #C49068; }
.shop-supplier-count {
    font-size: 11px;
    color: rgba(240, 234, 216, 0.55);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 16px;
}
.shop-card {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.shop-card:hover {
    border-color: rgba(196, 144, 104, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}

/* Image area */
.shop-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(0,0,0,0.4);
    overflow: hidden;
    flex-shrink: 0;
}
.shop-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.shop-card:hover .shop-card-img-wrap img { transform: scale(1.04); }
.shop-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.14);
    font-size: 36px;
}
.shop-card-img-zoom {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.55);
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    padding: 4px 6px;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.shop-card:hover .shop-card-img-zoom { opacity: 1; }
.shop-card-status-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid;
}
.shop-badge-not_ordered  { background: rgba(185,107,74,0.85); border-color: #c9795a; color: #fff; }
.shop-badge-on_order     { background: rgba(193,156,64,0.85); border-color: #c9a840; color: #fff; }
.shop-badge-not_delivered{ background: rgba(184,149,106,0.85); border-color: #b8956a; color: #fff; }
.shop-badge-delivered    { background: rgba(110,150,88,0.85); border-color: #82aa60; color: #fff; }

/* Card body */
.shop-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.shop-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #f0ead8;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shop-card-spec {
    font-size: 11px;
    color: rgba(240, 234, 216, 0.5);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shop-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.shop-card-cat {
    background: rgba(196, 144, 104, 0.14);
    color: #C49068;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
}
.shop-card-qty {
    font-size: 10px;
    color: rgba(240,234,216,0.45);
    margin-left: auto;
}
.shop-card-qty.is-zero { color: #c9795a; font-weight: 700; }
.shop-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
}
.shop-card-price {
    font-size: 15px;
    font-weight: 800;
    color: #f0ead8;
    letter-spacing: -0.01em;
}
.shop-card-price-unit {
    font-size: 10px;
    font-weight: 500;
    color: rgba(240,234,216,0.45);
}
.shop-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid rgba(196,144,104,0.3);
    background: rgba(196,144,104,0.08);
    color: #C49068;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.shop-card-link:hover {
    background: rgba(196,144,104,0.18);
    border-color: rgba(196,144,104,0.55);
}

/* Supplier header — link badge */
.shop-supplier-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(240,234,216,0.5);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.shop-supplier-link:hover { color: #C49068; border-color: rgba(196,144,104,0.35); }

/* ─── Schedule view (timeline by zoom interval) ─────────────── */
.materials-schedule {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    width: 100%;
}
.schedule-zoom-info {
    font-size: 12px;
    color: rgba(240, 234, 216, 0.65);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.schedule-zoom-info .zoom-badge {
    background: rgba(196, 144, 104, 0.16);
    color: #C49068;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 10px;
    text-transform: uppercase;
}
.schedule-bucket {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 4px;
}
.schedule-bucket:first-of-type { border-top: 0; }
.schedule-bucket-head {
    font-size: 12px;
    font-weight: 700;
    color: #C49068;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.schedule-bucket-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.8fr 0.8fr;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    align-items: center;
    font-size: 12px;
    color: rgba(240, 234, 216, 0.85);
}
.schedule-bucket-row:last-child { border-bottom: 0; }
.schedule-bucket-row .sched-name { font-weight: 600; color: #f3f4f6; }
.schedule-bucket-row .sched-cat {
    background: rgba(196, 144, 104, 0.12);
    color: #C49068;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    display: inline-block;
}

/* ============================================================
   REDESIGNED Kits + Orders views
   Accordion cards with header-strip + inline expansion of the
   materials they contain. Lots of at-a-glance metrics: progress
   bar (kits), pipeline timeline (orders), payment/delivery pills,
   supplier chips, totals, etc. All consistent with the dark + amber
   gantt palette used elsewhere in the materials view.
   ============================================================ */
.mat-section-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding-bottom: 24px;
}

/* ── Top summary toolbar ─────────────────────────────────── */
.mat-section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(28, 28, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    flex-wrap: wrap;
}
.mat-section-stats {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.mat-section-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.mat-section-stat .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(240, 234, 216, 0.42);
    font-weight: 600;
    margin-bottom: 4px;
}
.mat-section-stat .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #f3f4f6;
    font-feature-settings: 'tnum';
}
.mat-section-stat .stat-value.amber { color: #C49068; }
.mat-section-stat .stat-value.green { color: #22c55e; }
.mat-section-stat .stat-value.muted { color: rgba(240, 234, 216, 0.65); }
.mat-section-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #C49068 0%, #A87246 100%);
    color: #1a1a1a;
    border: none;
    border-radius: 11px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.mat-section-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(196, 144, 104, 0.35);
}
.mat-section-cta i { font-size: 12px; }

/* ── Accordion card stack (used by Kits + Orders) ────────── */
.mat-card-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.mat-acc-card {
    background: rgba(28, 28, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mat-acc-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.mat-acc-card.is-selected {
    border-color: rgba(196, 144, 104, 0.55);
    background: rgba(196, 144, 104, 0.06);
}
.mat-acc-card.is-open { border-color: rgba(196, 144, 104, 0.30); }

.mat-acc-head {
    display: grid;
    grid-template-columns: 28px 44px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}
.mat-acc-head:hover { background: rgba(255, 255, 255, 0.025); }
.mat-acc-check {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.20);
    background: rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.mat-acc-check.is-on {
    background: #C49068;
    border-color: #C49068;
}
.mat-acc-check.is-on::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 9px;
    color: #1a1a1a;
}
.mat-acc-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
}
.mat-acc-titlewrap { min-width: 0; }
.mat-acc-title {
    font-size: 15px;
    font-weight: 700;
    color: #f3f4f6;
    line-height: 1.2;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mat-acc-num {
    font-size: 11px;
    font-weight: 600;
    color: rgba(240, 234, 216, 0.45);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.mat-acc-sub {
    font-size: 11px;
    color: rgba(240, 234, 216, 0.5);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mat-acc-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mat-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(240, 234, 216, 0.85);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.mat-metric-pill i { font-size: 10px; opacity: 0.7; }
.mat-metric-pill strong { color: #fff; }
.mat-metric-pill.cost {
    background: rgba(196, 144, 104, 0.14);
    border-color: rgba(196, 144, 104, 0.35);
    color: #C49068;
}
.mat-metric-pill.cost strong { color: #C49068; }
.mat-metric-pill.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.30);
    color: #4ade80;
}
.mat-metric-pill.warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.30);
    color: #fbbf24;
}
.mat-metric-pill.danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.30);
    color: #f87171;
}
.mat-metric-pill.info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.30);
    color: #60a5fa;
}

.mat-acc-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mat-icon-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(240, 234, 216, 0.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-size: 12px;
}
.mat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f3f4f6;
}
.mat-icon-btn.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.40);
    color: #f87171;
}
.mat-acc-chevron {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(240, 234, 216, 0.55);
    font-size: 11px;
    margin-left: 2px;
}
.mat-acc-card.is-open .mat-acc-chevron { transform: rotate(180deg); }

/* ── Progress bar (kits) ─────────────────────────────────── */
.mat-acc-progress {
    grid-column: 3 / 4;
    margin-top: 6px;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mat-acc-progress > .bar {
    height: 100%;
    background: linear-gradient(90deg, #C49068 0%, #22c55e 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.mat-acc-progress.empty > .bar { background: rgba(255, 255, 255, 0.10); }

/* ── Expanded body ──────────────────────────────────────── */
.mat-acc-body {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.20);
}
.mat-acc-card.is-open .mat-acc-body { display: block; }
.mat-acc-bodygrid {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) 2fr;
    gap: 14px;
    padding: 14px 16px 16px;
}
@media (max-width: 880px) { .mat-acc-bodygrid { grid-template-columns: 1fr; } }

.mat-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.mat-stat-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
}
.mat-stat-tile .label {
    font-size: 10px;
    color: rgba(240, 234, 216, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    font-weight: 600;
}
.mat-stat-tile .value {
    font-size: 16px;
    font-weight: 700;
    color: #f3f4f6;
}
.mat-stat-tile .value.amber { color: #C49068; }
.mat-stat-tile .value.green { color: #22c55e; }
.mat-stat-tile .value.danger { color: #f87171; }

/* ── Order status pipeline (Draft → Placed → … → Delivered) ── */
.mat-pipe {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
.mat-pipe-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 6px 4px;
    min-width: 0;
}
.mat-pipe-step::before {
    content: '';
    position: absolute;
    left: 0;
    right: 50%;
    top: 17px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 0;
}
.mat-pipe-step::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 0;
    top: 17px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 0;
}
.mat-pipe-step:first-child::before { display: none; }
.mat-pipe-step:last-child::after  { display: none; }
.mat-pipe-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(240, 234, 216, 0.40);
    position: relative;
    z-index: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mat-pipe-label {
    font-size: 10px;
    color: rgba(240, 234, 216, 0.45);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mat-pipe-step.done .mat-pipe-dot {
    background: #C49068;
    border-color: #C49068;
    color: #1a1a1a;
}
.mat-pipe-step.done ~ .mat-pipe-step::before,
.mat-pipe-step.done::after {
    background: rgba(196, 144, 104, 0.45);
}
.mat-pipe-step.current .mat-pipe-dot {
    background: #f3f4f6;
    border-color: #C49068;
    color: #C49068;
    box-shadow: 0 0 0 4px rgba(196, 144, 104, 0.18);
}
.mat-pipe-step.current .mat-pipe-label { color: #C49068; }

/* ── Materials sub-list inside an expanded card ─────────── */
.mat-sublist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 0 2px;
}
.mat-sublist-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(240, 234, 216, 0.55);
}
.mat-sublist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mat-subrow {
    display: grid;
    grid-template-columns: 32px 1fr 90px 80px 110px 36px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 9px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.mat-subrow:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.10); }
.mat-subrow .thumb {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(0,0,0,0.35);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.20);
    font-size: 11px;
}
.mat-subrow .name {
    font-size: 12px;
    font-weight: 600;
    color: #f3f4f6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mat-subrow .name .meta {
    display: block;
    font-weight: 500;
    font-size: 10px;
    color: rgba(240, 234, 216, 0.45);
    margin-top: 2px;
}
.mat-subrow .cat {
    background: rgba(196, 144, 104, 0.12);
    color: #C49068;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    justify-self: start;
    white-space: nowrap;
}
.mat-subrow .qty {
    font-size: 11px;
    color: rgba(240, 234, 216, 0.75);
    text-align: right;
    font-feature-settings: 'tnum';
}
.mat-subrow .qty.zero { color: #f87171; font-weight: 700; }
.mat-subrow .price {
    text-align: right;
    font-weight: 700;
    color: #fff;
    font-size: 12px;
    font-feature-settings: 'tnum';
}
.mat-subrow .price small { display: block; font-weight: 500; color: rgba(240,234,216,.45); font-size: 10px; margin-top: 2px; }
.mat-subrow .row-actions { display: inline-flex; justify-content: flex-end; }

.mat-empty-sub {
    padding: 18px;
    text-align: center;
    color: rgba(240, 234, 216, 0.40);
    font-size: 12px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 9px;
    border: 1px dashed rgba(255, 255, 255, 0.06);
}
.mat-empty-sub .add-link {
    display: inline-block;
    margin-top: 6px;
    color: #C49068;
    cursor: pointer;
    font-weight: 600;
    font-style: normal;
}
.mat-empty-sub .add-link:hover { text-decoration: underline; }

/* Empty state for the whole tab */
.mat-empty-block {
    padding: 60px 20px;
    text-align: center;
    background: rgba(28, 28, 30, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    color: rgba(240, 234, 216, 0.65);
}
.mat-empty-block i {
    font-size: 36px;
    color: rgba(196, 144, 104, 0.55);
    margin-bottom: 12px;
    display: block;
}
.mat-empty-block h3 { color: #f3f4f6; margin: 0 0 6px; font-weight: 700; }
.mat-empty-block p { margin: 0 0 18px; font-size: 13px; }

/* ============================================================
   V9.1 — Orders bulletin board. Each order is a paper-PDF
   thumbnail. Orders are grouped onto subtle "shelves" by
   status (Pending / Ordered / Paid / Delivered). Click a
   paper to open it in the OrderDocumentEditor overlay.
   ============================================================ */
.mat-orders-board {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    padding: 4px 0 24px;
}

/* Numbered chip row above the shelves — one chip per order. */
.mat-orders-numrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
}
.mat-orders-numrow.is-empty {
    padding: 14px 4px;
    color: rgba(240, 234, 216, 0.40);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-style: italic;
}
.mat-orders-numchip {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(240, 234, 216, 0.85);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    font-feature-settings: 'tnum';
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.mat-orders-numchip:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.mat-orders-numchip[data-status="pending"]   { border-left: 3px solid #d97706; }
.mat-orders-numchip[data-status="ordered"]   { border-left: 3px solid #2563eb; }
.mat-orders-numchip[data-status="paid"]      { border-left: 3px solid #16a34a; }
.mat-orders-numchip[data-status="delivered"] { border-left: 3px solid #C49068; }

.mat-orders-shelf { display: flex; flex-direction: column; gap: 12px; }
.mat-orders-shelf-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mat-orders-shelf-head .shelf-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(240, 234, 216, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.mat-orders-shelf-head .shelf-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(240, 234, 216, 0.45);
    font-feature-settings: 'tnum';
}
.mat-orders-shelf-head .shelf-spacer { flex: 1 1 auto; }
.mat-orders-shelf-head .shelf-total {
    font-size: 12px;
    font-weight: 700;
    color: rgba(240, 234, 216, 0.55);
    font-feature-settings: 'tnum';
}

/* Horizontal scroll row, exactly 8 paper docs per visible row */
.mat-orders-shelf-row {
    --paper-gap: 18px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 7 * var(--paper-gap)) / 8);
    gap: var(--paper-gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 18px;
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    scrollbar-width: thin;
}
.mat-orders-shelf-row::-webkit-scrollbar { height: 8px; }
.mat-orders-shelf-row::-webkit-scrollbar-track { background: transparent; }
.mat-orders-shelf-row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.mat-orders-shelf-row::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

@media (max-width: 1500px) {
    .mat-orders-shelf-row { grid-auto-columns: calc((100% - 5 * var(--paper-gap)) / 6); }
}
@media (max-width: 1100px) {
    .mat-orders-shelf-row { grid-auto-columns: calc((100% - 3 * var(--paper-gap)) / 4); }
}
@media (max-width: 720px) {
    .mat-orders-shelf-row { grid-auto-columns: calc((100% - 1 * var(--paper-gap)) / 2); }
}

.mat-orders-shelf-empty {
    padding: 18px 4px;
    color: rgba(240, 234, 216, 0.32);
    font-size: 12px;
    font-style: italic;
}

/* The paper-PDF thumbnail — looks like an actual document */
.mat-paper {
    position: relative;
    display: block;
    text-align: left;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: transparent;
    scroll-snap-align: start;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.mat-paper:hover { transform: translateY(-3px); }
.mat-paper:focus { outline: none; }
.mat-paper:focus-visible .mat-paper-sheet {
    box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 2px #C49068;
}
.mat-paper-sheet {
    position: relative;
    aspect-ratio: 8.5 / 11;
    background: #fafaf6;
    color: #1f2937;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 10px 24px rgba(0, 0, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.18s ease;
}
.mat-paper:hover .mat-paper-sheet {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 18px 36px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.40);
}
/* Folded top-right corner so it reads as a piece of paper */
.mat-paper-sheet::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 22px; height: 22px;
    background: linear-gradient(225deg, rgba(0,0,0,0.18) 50%, transparent 50%);
}
.mat-paper-sheet::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 22px; height: 22px;
    background: linear-gradient(225deg, #fafaf6 0%, #e7e3d9 50%, transparent 50%);
    transform-origin: top right;
}

/* Inner page contents */
.mat-paper-page {
    position: absolute; inset: 0;
    padding: 14px 14px 12px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    gap: 8px;
    font-feature-settings: 'tnum';
}
.mat-paper-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #1f2937;
}
.mat-paper-brand .brand-name {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #1f2937;
    text-transform: uppercase;
}
.mat-paper-brand .brand-num {
    font-size: 9px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.06em;
}
.mat-paper-doctype {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #111827;
    text-transform: uppercase;
    line-height: 1.05;
}
.mat-paper-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mat-paper-billto {
    font-size: 10px;
    color: #1f2937;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mat-paper-billto .billto-label {
    display: block;
    font-size: 8px;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 1px;
    text-transform: uppercase;
}
.mat-paper-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
    overflow: hidden;
    min-height: 0;
}
.mat-paper-lines .pl-row {
    display: grid;
    grid-template-columns: 1fr 22px 32px;
    gap: 6px;
    align-items: center;
    font-size: 9px;
    color: #1f2937;
    border-bottom: 1px dotted rgba(0,0,0,0.10);
    padding: 1px 0;
    line-height: 1.2;
}
.mat-paper-lines .pl-row .pl-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #1f2937;
}
.mat-paper-lines .pl-row .pl-qty {
    color: #6b7280;
    text-align: right;
    font-weight: 600;
}
.mat-paper-lines .pl-row .pl-price {
    color: #1f2937;
    text-align: right;
    font-weight: 700;
}
.mat-paper-lines .pl-more {
    font-size: 8px;
    color: #9ca3af;
    font-style: italic;
    padding-top: 2px;
}
.mat-paper-totalbox {
    background: #f3eee2;
    border-top: 1px solid rgba(0,0,0,0.10);
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mat-paper-totalbox .tb-label {
    font-size: 9px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.mat-paper-totalbox .tb-amount {
    font-size: 13px;
    font-weight: 800;
    color: #C49068;
    letter-spacing: -0.01em;
}
.mat-paper-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.mat-paper-status-pill {
    position: absolute;
    top: 9px;
    left: -3px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px 3px 10px;
    border-radius: 0 4px 4px 0;
    color: #fff;
    background: #6b7280;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.mat-paper[data-status="pending"]   .mat-paper-status-pill { background: #d97706; }
.mat-paper[data-status="ordered"]   .mat-paper-status-pill { background: #2563eb; }
.mat-paper[data-status="paid"]      .mat-paper-status-pill { background: #16a34a; }
.mat-paper[data-status="delivered"] .mat-paper-status-pill { background: #C49068; }

/* Caption under the paper */
.mat-paper-caption {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(240, 234, 216, 0.78);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mat-paper-caption .cap-sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(240, 234, 216, 0.42);
    margin-top: 2px;
}

/* ============================================================
   Order Document Editor — full-screen overlay containing a
   letter-sized paper sheet that the user can edit inline. Used
   by Orders today and (eventually) by the estimates flow.
   ============================================================ */
.docedit-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 10, 14, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 11000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.docedit-overlay.is-open { opacity: 1; }
.docedit-overlay[hidden] { display: none; }

.docedit-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(20, 22, 26, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}
.docedit-back {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(240, 234, 216, 0.85);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background 0.15s ease;
}
.docedit-back:hover { background: rgba(255, 255, 255, 0.10); }
.docedit-titlewrap { min-width: 0; flex: 1 1 280px; }
.docedit-title {
    font-size: 14px;
    font-weight: 700;
    color: #f3f4f6;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docedit-subtitle {
    font-size: 11px;
    color: rgba(240, 234, 216, 0.55);
    margin: 2px 0 0;
    font-weight: 500;
}
.docedit-status-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f3f4f6;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.docedit-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.docedit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f3f4f6;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.docedit-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
}
.docedit-btn.primary {
    background: linear-gradient(135deg, #C49068 0%, #A87246 100%);
    color: #1a1a1a;
    border-color: transparent;
}
.docedit-btn.primary:hover {
    box-shadow: 0 4px 14px rgba(196, 144, 104, 0.35);
}
.docedit-btn.danger {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.32);
    color: #fca5a5;
}
.docedit-btn.danger:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #fff;
}
.docedit-btn.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.34);
    color: #86efac;
}
.docedit-btn.success:hover {
    background: rgba(34, 197, 94, 0.20);
    color: #fff;
}

.docedit-canvas {
    flex: 1 1 auto;
    overflow: auto;
    padding: 32px 18px 64px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* The actual editable paper sheet (US Letter aspect-ish) */
.docedit-paper {
    width: min(820px, 100%);
    min-height: 1060px;
    background: #ffffff;
    color: #111827;
    border-radius: 14px;
    padding: 56px 64px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.55),
        0 6px 18px rgba(0,0,0,0.35);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.docedit-paper [contenteditable="true"]:focus {
    outline: 2px solid rgba(196, 144, 104, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
    background: rgba(196, 144, 104, 0.06);
}
.docedit-paper [contenteditable="true"] {
    outline-color: transparent;
    transition: background 0.12s ease;
}
.docedit-paper [contenteditable="true"]:hover {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
}

.doc-page-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 3px solid #111827;
}
.doc-page-header .doc-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #111827;
    text-transform: uppercase;
    line-height: 1;
}
.doc-page-header .doc-brand-sub {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.doc-page-header .doc-doctype {
    text-align: right;
}
.doc-page-header .doc-doctype .dt-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}
.doc-page-header .doc-doctype .dt-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-top: 4px;
    letter-spacing: 0.06em;
}

.doc-page-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.doc-page-meta .meta-cell .meta-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
}
.doc-page-meta .meta-cell .meta-value {
    font-size: 13px;
    color: #111827;
    font-weight: 600;
    line-height: 1.4;
}

.doc-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #1f2937;
}
.doc-items-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 10px 8px;
    border-bottom: 2px solid #111827;
}
.doc-items-table thead th.right { text-align: right; }
.doc-items-table tbody td {
    padding: 10px 8px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.doc-items-table tbody td.right {
    text-align: right;
    font-feature-settings: 'tnum';
}
.doc-items-table tbody tr:hover td { background: rgba(196, 144, 104, 0.05); }
.doc-items-table tbody tr.subgroup-row td {
    background: #f9f7f1;
    font-weight: 700;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 14px 8px 6px;
    border-bottom: 1px solid #e5e7eb;
}

.doc-totals-block {
    margin-left: auto;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.doc-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #4b5563;
    padding: 4px 0;
}
.doc-totals-row.grand {
    border-top: 2px solid #111827;
    padding-top: 10px;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}
.doc-totals-row .v { font-feature-settings: 'tnum'; }
.doc-totals-row.grand .v { color: #C49068; }

.doc-notes {
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}
.doc-notes .notes-label {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
}
.doc-notes .notes-value {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.55;
    min-height: 38px;
}
.doc-signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 18px;
}
.doc-signature .sig-block {
    border-top: 1px solid #111827;
    padding-top: 6px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-empty-items {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    font-size: 13px;
    padding: 24px;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
}

@media (max-width: 720px) {
    .docedit-canvas { padding: 16px 8px 32px; }
    .docedit-paper { padding: 28px 22px; min-height: auto; }
    .doc-page-header { grid-template-columns: 1fr; }
    .doc-page-header .doc-doctype { text-align: left; }
    .doc-page-meta { grid-template-columns: 1fr 1fr; }
    .doc-totals-block { min-width: 100%; }
}

/* Header Action Button */
.header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: var(--color-primary);
    color: white;
}

.header-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.header-action-btn.primary {
    background: var(--color-primary);
    color: white;
}

.header-action-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Header Filters */
.header-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-filters .filter-container {
    display: flex;
    align-items: center;
}

.header-filters .filter-select {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #f3f4f6;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header-filters .filter-select:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.header-filters .filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Order Widgets Styles */
.orders-widgets-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 100%;
    overflow-x: auto;
}

.order-widget {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.order-widget:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.order-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.order-widget-name {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
}

.order-widget-id {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.order-widget-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.order-widget-count {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
}

.order-widget-total {
    color: #fbbf24;
    font-size: 16px;
    font-weight: 600;
}

.order-widget-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-align: center;
}

.status-indicator.status-not_ordered {
    background: rgba(185, 107, 74, 0.8);
    border: 1px solid rgba(185, 107, 74, 0.6);
}
.status-indicator.status-on_order {
    background: rgba(193, 156, 64, 0.8);
    border: 1px solid rgba(193, 156, 64, 0.6);
}
.status-indicator.status-delivered {
    background: rgba(110, 150, 88, 0.8);
    border: 1px solid rgba(110, 150, 88, 0.6);
}

.view-more-widget {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.view-more-widget:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.view-more-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.view-more-content i {
    font-size: 20px;
    color: #a5b4fc;
}

.view-more-text {
    color: #a5b4fc;
    font-size: 12px;
    font-weight: 500;
}

/* Kit Cards Styles */
.kits-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kit-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.kit-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.kit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kit-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kit-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.kit-details h4 {
    margin: 0 0 4px 0;
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
}

.kit-count {
    color: #9ca3af;
    font-size: 16px;
    font-weight: 500;
}

.kit-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kit-total {
    color: #fbbf24;
    font-size: 18px;
    font-weight: 600;
}

.kit-manage-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kit-manage-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f3f4f6;
    transform: scale(1.05);
}

.kit-materials {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kit-material-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.kit-material-item .material-name {
    color: #f3f4f6;
    font-weight: 500;
    flex: 2;
}

.kit-material-item .material-quantity {
    color: #9ca3af;
    font-size: 16px;
    flex: 1;
    text-align: center;
}

        .kit-material-item .material-price {
    color: #10b981;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.order-material-detail .material-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-material-detail .price-per-unit {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.order-material-detail .price-total {
    font-size: 13px;
    color: #10b981;
    font-weight: 600;
}

.remove-from-kit-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.remove-from-kit-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

/* V6.0: Ultra-Premium Vision Pro Style - Kits Cards */
.kits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 24px;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1600px) {
    .kits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .kits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@keyframes kitCardAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kit-card-enhanced {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.095) 0%, 
        rgba(255, 255, 255, 0.025) 50%,
        rgba(255, 255, 255, 0.015) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    padding: 0 28px;
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    animation: kitCardAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 110px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.kit-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        var(--kit-color, #fbbf24) 50%,
        transparent 100%);
    opacity: 0.6;
}

.kit-card-enhanced::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    padding: 0.5px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.kit-card-enhanced:hover {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.14) 0%, 
        rgba(255, 255, 255, 0.045) 50%,
        rgba(255, 255, 255, 0.025) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-6px) scale(1.015);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 0 0 1.5px rgba(255, 255, 255, 0.1);
}

.kit-card-enhanced.selected {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.25) 0%, 
        rgba(139, 92, 246, 0.15) 50%,
        rgba(139, 92, 246, 0.08) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 
        0 12px 40px rgba(139, 92, 246, 0.4),
        0 4px 16px rgba(139, 92, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 0 2px rgba(139, 92, 246, 0.6);
    transform: translateY(-2px);
}

.kit-card-enhanced.selected::before {
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(139, 92, 246, 0.9) 50%,
        transparent 100%);
    opacity: 1;
    height: 3px;
}

.kit-select-area {
    display: none;
}

.kit-select-checkbox {
    display: none;
}

.kit-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-right: 90px;
    min-width: 0;
    width: 100%;
}

.kit-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.kit-icon {
    display: none;
}

.kit-details {
    flex: 1 1 auto;
    min-width: 0;
}

.kit-details h4 {
    margin: 0;
}

.kit-name {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.4px;
    line-height: 1.1;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.kit-description {
    display: none;
}

.kit-meta-info {
    display: flex;
    gap: 36px;
    align-items: center;
    flex-shrink: 0;
}

.kit-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    min-width: 80px;
}

.stat-label {
    font-size: 10px;
    color: rgba(156, 163, 175, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
}

.stat-value {
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: -0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.kit-total-cost {
    background: linear-gradient(135deg, #fde047 0%, #fbbf24 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 22px;
    font-weight: 700;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

.kit-actions {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kit-card-enhanced:hover .kit-actions {
    opacity: 1;
}

.kit-action-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.14) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.kit-action-btn.edit:hover {
    background: linear-gradient(145deg, 
        rgba(59, 130, 246, 0.5) 0%, 
        rgba(59, 130, 246, 0.35) 100%);
    border-color: rgba(59, 130, 246, 0.7);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 8px 24px rgba(59, 130, 246, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.kit-action-btn.delete:hover {
    background: linear-gradient(145deg, 
        rgba(239, 68, 68, 0.5) 0%, 
        rgba(239, 68, 68, 0.35) 100%);
    border-color: rgba(239, 68, 68, 0.7);
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 
        0 8px 24px rgba(239, 68, 68, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.section-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* V6.0: Ultra-Premium Vision Pro Style - Orders Cards */
.orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 28px;
    margin-top: 32px;
}

@keyframes orderCardAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.order-card-enhanced {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.095) 0%, 
        rgba(255, 255, 255, 0.025) 50%,
        rgba(255, 255, 255, 0.015) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 28px;
    padding: 36px;
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    overflow: visible;
    position: relative;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    animation: orderCardAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.order-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        #3b82f6 50%,
        transparent 100%);
    opacity: 0.6;
}

.order-card-enhanced::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 0.5px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.order-card-enhanced:hover {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.14) 0%, 
        rgba(255, 255, 255, 0.045) 50%,
        rgba(255, 255, 255, 0.025) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-6px) scale(1.015);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 0 0 1.5px rgba(255, 255, 255, 0.1);
}

.order-card-enhanced.selected {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.2) 0%, 
        rgba(139, 92, 246, 0.1) 50%,
        rgba(139, 92, 246, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 
        0 12px 40px rgba(139, 92, 246, 0.35),
        0 4px 16px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(139, 92, 246, 0.5);
}

.order-select-area {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 10;
}

.order-select-checkbox {
    width: 22px;
    height: 22px;
    accent-color: #60a5fa;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.order-card-enhanced:hover .order-select-checkbox {
    opacity: 1;
    transform: scale(1.1);
}

.order-content {
    flex: 1;
    padding-right: 50px;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.order-name {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.6px;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.order-number {
    font-size: 11px;
    color: rgba(156, 163, 175, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.order-status-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.order-status-badge {
    font-size: 10px;
    padding: 7px 14px;
    border-radius: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.order-status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 14px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.order-status-badge.status-draft {
    background: linear-gradient(135deg, 
        rgba(107, 114, 128, 0.35) 0%, 
        rgba(107, 114, 128, 0.25) 100%);
    color: #e5e7eb;
    border: 0.5px solid rgba(107, 114, 128, 0.5);
}

.order-status-badge.status-placed {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.4) 0%, 
        rgba(59, 130, 246, 0.3) 100%);
    color: #bfdbfe;
    border: 0.5px solid rgba(59, 130, 246, 0.6);
}

.order-status-badge.status-processing {
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.4) 0%, 
        rgba(245, 158, 11, 0.3) 100%);
    color: #fde68a;
    border: 0.5px solid rgba(245, 158, 11, 0.6);
}

.order-status-badge.status-shipped {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.4) 0%, 
        rgba(139, 92, 246, 0.3) 100%);
    color: #ddd6fe;
    border: 0.5px solid rgba(139, 92, 246, 0.6);
}

.order-status-badge.status-delivered {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.4) 0%, 
        rgba(16, 185, 129, 0.3) 100%);
    color: #a7f3d0;
    border: 0.5px solid rgba(16, 185, 129, 0.6);
}

.order-meta-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-top: 28px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

.order-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-total {
    background: linear-gradient(135deg, #fde047 0%, #fbbf24 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 32px;
    font-weight: 700;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

.payment-unpaid {
    color: #fca5a5;
    font-weight: 600;
    font-size: 17px;
    text-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.payment-partial {
    color: #fcd34d;
    font-weight: 600;
    font-size: 17px;
    text-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.payment-paid {
    color: #6ee7b7;
    font-weight: 600;
    font-size: 17px;
    text-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.delivery-pending {
    color: rgba(156, 163, 175, 0.9);
    font-weight: 500;
    font-size: 17px;
}

.delivery-in_transit {
    color: #93c5fd;
    font-weight: 600;
    font-size: 17px;
    text-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.delivery-delivered {
    color: #6ee7b7;
    font-weight: 600;
    font-size: 17px;
    text-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.order-actions {
    position: absolute;
    bottom: 36px;
    right: 36px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.order-card-enhanced:hover .order-actions {
    opacity: 1;
    transform: translateY(0);
}

.order-action-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.14) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.order-action-btn.edit:hover {
    background: linear-gradient(145deg, 
        rgba(59, 130, 246, 0.5) 0%, 
        rgba(59, 130, 246, 0.35) 100%);
    border-color: rgba(59, 130, 246, 0.7);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 8px 24px rgba(59, 130, 246, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.order-action-btn.delete:hover {
    background: linear-gradient(145deg, 
        rgba(239, 68, 68, 0.5) 0%, 
        rgba(239, 68, 68, 0.35) 100%);
    border-color: rgba(239, 68, 68, 0.7);
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 
        0 8px 24px rgba(239, 68, 68, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.materials-overview {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

/* Materials Filters */
.materials-filters {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(28, 28, 30, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin: 20px 0;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.materials-filters .filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.materials-filters .filter-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #f3f4f6;
    font-size: 16px;
    min-width: 140px;
    transition: all 0.3s ease;
}

.materials-filters .filter-select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.materials-filters .filter-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.materials-documents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.document-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    cursor: pointer;
    text-align: center;
}

.document-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.document-card.active {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.2);
}

.document-icon {
    width: 48px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #9ca3af;
    flex-shrink: 0;
    position: relative;
}

.document-icon.recommended {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.document-icon.order {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #6366f1;
}



.document-card.active .document-icon {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.document-title {
    font-size: 16px;
    font-weight: 600;
    color: #f3f4f6;
    line-height: 1.2;
}

.document-subtitle {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
}

.document-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}



.materials-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Compact Table Layout */
.materials-table {
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 100%;
}

.materials-table-header {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr 0.7fr 0.7fr 0.8fr 0.9fr 0.9fr 0.8fr;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.materials-table-row {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr 0.7fr 0.7fr 0.8fr 0.9fr 0.9fr 0.8fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.materials-table-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

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

.table-cell {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    font-size: 16px;
    min-width: 0;
    overflow: hidden;
}

.header-cell {
    font-weight: 600;
    color: #f3f4f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    padding: 12px 16px;
}

.material-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.material-name-compact {
    color: #f3f4f6;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.material-description-compact {
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.category-cell,
.supplier-cell,
.price-cell,
.quantity-cell,
.order-by-cell {
    color: #f3f4f6;
    font-weight: 500;
}

.supplier-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.supplier-name {
    color: #f3f4f6;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.supplier-link {
    color: #6366f1;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.supplier-link:hover {
    color: #818cf8;
    transform: scale(1.1);
}

.quantity-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-value {
    color: #f3f4f6;
    font-weight: 500;
}

.quantity-details {
    color: #6366f1;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.quantity-details:hover {
    opacity: 1;
}

.status-cell {
    justify-content: center;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

        .status-badge.status-not_ordered {
    background: rgba(75, 85, 99, 0.15);
    color: #d1d5db;
    border: 1px solid rgba(75, 85, 99, 0.3);
}

.status-badge.status-on_order {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-badge.status-not_delivered {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.status-delivered {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}





/* Legacy material card styles - kept for compatibility */
.material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.material-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

        .material-status-not_ordered {
    background: rgba(75, 85, 99, 0.15);
    color: #d1d5db;
    border: 1px solid rgba(75, 85, 99, 0.3);
}

.material-status-on_order {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.material-status-not_delivered {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.material-status-delivered {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.material-priority-badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-priority-high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.material-priority-medium {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.material-priority-low {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.material-content {
    margin-bottom: 20px;
}

.material-name {
    font-size: 20px;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-description {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Removed conflicting material-details class */

/* Removed conflicting detail-label and detail-value classes */

.material-notes {
    background: rgba(251, 191, 36, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    padding: 12px;
    color: #fbbf24;
    font-size: 16px;
    font-style: italic;
}

.material-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.material-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.material-action-btn.edit-btn {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.material-action-btn.edit-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: #6366f1;
}

.material-action-btn.status-btn {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.material-action-btn.status-btn:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
}

.material-action-btn.delete-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.material-action-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: #9ca3af;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 16px;
    margin-bottom: 24px;
}

.add-material-button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    backdrop-filter: blur(10px);
}

.add-material-button:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4);
}

.export-button {
    background: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.export-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.materials-export-section {
    display: flex;
    justify-content: center;
    padding: 32px 0;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fixed Bottom Action Bar */
.fixed-bottom-actions {
    position: fixed;
    bottom: 24px;
    left: 344px;
    right: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    padding: 16px 24px;
    background: rgba(28, 28, 30, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.fixed-bottom-actions.visible {
    opacity: 1;
    visibility: visible;
}

.bottom-actions-left {
    display: flex;
    align-items: center;
}

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

.bottom-action-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f3f4f6;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap;
    min-width: 140px;
    justify-content: center;
}

.bottom-action-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.bottom-action-btn.primary {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    border-color: rgba(251, 191, 36, 0.3);
}

.bottom-action-btn.primary:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4);
}

.bottom-action-btn.secondary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

.bottom-action-btn.secondary:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(79, 70, 229, 0.3) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

/* Order Summary Modal Styles */
.order-summary h3 {
    color: #f3f4f6;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

.order-details {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.order-stat {
    text-align: center;
    color: #d1d5db;
}

.order-stat strong {
    display: block;
    color: #f3f4f6;
    font-size: 18px;
    margin-bottom: 4px;
}

.order-status-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}

.status-item {
    display: flex;
    align-items: center;
}

/* Compact Materials Design */
.materials-compact {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    position: relative;
    box-shadow: none;
}

/* Ensure no spacing between material rows */
.materials-compact > * {
    margin: 0;
    padding: 0;
}

/* Force remove any potential spacing from flexbox */
.materials-compact {
    line-height: 1;
}

.materials-header {
    display: grid;
    grid-template-columns: 0.3fr 0.8fr 2.5fr 1fr 1.2fr 1fr 1fr 1fr 1fr 0.3fr;
    gap: 12px;
    padding: 6px 16px 6px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-weight: 600;
    color: #9ca3af;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-items: center;
    box-shadow: none;
}

/* V5.2: Perfect alignment for header columns */
.materials-header > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 20px;
    padding: 0;
    box-sizing: border-box;
}

.header-checkbox {
    justify-content: center;
    position: relative;
}

.header-checkbox::after {
    content: 'Click row to select';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.materials-header:hover .header-checkbox::after {
    opacity: 1;
}

.header-image {
    justify-content: center;
}

.header-category {
    justify-content: center;
}

.header-status {
    justify-content: center;
}

.header-quantity {
    justify-content: center;
}

.header-order {
    justify-content: center;
}

.header-expand {
    justify-content: center;
}

.material-row {
    display: grid;
    grid-template-columns: 0.3fr 0.8fr 2.5fr 1fr 1.2fr 1fr 1fr 1fr 1fr 0.3fr;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    align-items: center;
    border-bottom: none;
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
    user-select: none;
    border-radius: 4px;
    margin: 0;
    background: rgba(255, 255, 255, 0.02);
}

/* V5.2: Perfect alignment for material row columns */
.material-row > div {
    display: flex;
    align-items: center;
    min-height: 20px;
    padding: 0;
    box-sizing: border-box;
}

.material-checkbox {
    justify-content: center;
    align-items: center;
}

.material-select-checkbox {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid rgba(156, 163, 175, 0.5);
    background: rgba(156, 163, 175, 0.2);
}

.material-select-checkbox:checked {
    background-color: #9ca3af;
    border-color: #9ca3af;
}

.material-select-checkbox:hover {
    border-color: #d1d5db;
    background: rgba(156, 163, 175, 0.3);
}

.material-image {
    justify-content: center;
    align-items: center;
}

.material-image-placeholder {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: rgba(139, 92, 246, 0.6);
}

/* Product thumbnail in compact row */
.material-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2px;
}

/* Larger product image in expanded panel */
.profile-image-actual {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    background: transparent;
    padding: 8px;
    box-sizing: border-box;
}

/* Quick info chips below profile image in expanded view */
.material-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.material-quick-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
    white-space: nowrap;
}
.material-quick-chips .chip i {
    font-size: 11px;
    opacity: 0.85;
}
.material-quick-chips .chip-supplier { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.08); }
.material-quick-chips .chip-category { color: #93c5fd; border-color: rgba(59, 130, 246, 0.35);  background: rgba(59, 130, 246, 0.08);  }
.material-quick-chips .chip-price    { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.40);  background: rgba(16, 185, 129, 0.08);   font-weight: 600; }

.detail-item-wide {
    grid-column: 1 / -1 !important;
}

.material-category {
    justify-content: center;
}

.material-status {
    justify-content: center;
}

.material-quantity {
    justify-content: center;
}

.material-order {
    justify-content: center;
}

.expand-hint {
    justify-content: center;
}

.material-row:hover {
    border-left: 3px solid rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

/* When a dropdown is open within a row, freeze row hover/selection visuals */
.material-row .material-action-dropdown.show ~ *,
.material-row:has(.material-action-dropdown.show) {
    pointer-events: none;
}
.material-row:has(.material-action-dropdown.show) .material-action-dropdown,
.material-row:has(.material-action-dropdown.show) .material-action-dropdown * {
    pointer-events: auto;
}

.material-row.selected {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
    animation: selectPulse 0.3s ease-out;
}

.material-row.selected:hover {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: rgba(59, 130, 246, 0.8);
}

@keyframes selectPulse {
    0% {
        background: rgba(59, 130, 246, 0.05);
        transform: scale(1);
    }
    50% {
        background: rgba(59, 130, 246, 0.2);
        transform: scale(1.01);
    }
    100% {
        background: rgba(59, 130, 246, 0.1);
        transform: scale(1);
    }
}

/* No bottom borders on any rows */

/* Ensure no additional spacing between material rows */
.material-row + .material-row {
    margin-top: 0;
    padding-top: 0;
}

/* Remove any potential spacing from material row children */
.material-row > * {
    margin: 0;
}

/* Add subtle alternating row colors for visual separation without spacing */
.material-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

.material-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
}

/* Force remove any potential spacing issues */
.material-row {
    line-height: 1;
    vertical-align: top;
}

/* Column Styles */
.material-name {
    color: #f3f4f6;
    font-weight: 600;
    font-size: 16px;
    justify-content: flex-start;
    text-align: left;
}

.material-category {
    color: #9ca3af;
    font-size: 11px;
    background: rgba(99, 102, 241, 0.2);
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    text-align: center;
    white-space: nowrap;
}

.material-description {
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.3;
}

/* V5.2: Quantity Selector with +/- buttons */
.material-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-selector {
    display: flex;
    align-items: center;
    background: rgba(55, 65, 81, 1);
    border: 1px solid rgba(107, 114, 128, 0.4);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.quantity-btn {
    background: rgba(68, 50, 102, 1);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: white;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
}

.quantity-btn:hover {
    background: rgba(68, 50, 102, 0.9);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.quantity-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.quantity-btn.minus {
    border-radius: 8px 0 0 8px;
    border-right: 1px solid rgba(107, 114, 128, 0.2);
}

.quantity-btn.plus {
    border-radius: 0 8px 8px 0;
    border-left: 1px solid rgba(107, 114, 128, 0.2);
}

.quantity-input {
    background: rgba(17, 24, 39, 1);
    border: none;
    color: white;
    text-align: center;
    width: 60px;
    height: 28px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 8px;
    border-left: 1px solid rgba(107, 114, 128, 0.2);
    border-right: 1px solid rgba(107, 114, 128, 0.2);
}

.quantity-input:focus {
    outline: none;
    background: rgba(28, 28, 30, 1);
}

/* Remove spinner arrows from number input */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-input[type=number] {
    -moz-appearance: textfield;
}

/* V5.3: Enhanced Expanded row styles */
.material-row-expanded {
    background: #000000;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    padding: 24px;
    margin: 0 20px;
    border-radius: 0 0 12px 12px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
}

.material-row-expanded.show {
    max-height: 800px;
    opacity: 1;
    animation: expandSlide 0.3s ease-out;
}

@keyframes expandSlide {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        max-height: 800px;
        opacity: 1;
        transform: translateY(0);
    }
}

.expanded-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.expanded-header {
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding-bottom: 16px;
}

.expanded-title {
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.expanded-meta {
    display: flex;
    gap: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 13px;
}

.expanded-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.expanded-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
}

.section-title {
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.material-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
    max-width: 300px;
}

.image-placeholder {
    width: 80px;
    height: 80px;
    background: rgba(139, 92, 246, 0.1);
    border: 2px dashed rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-placeholder:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    color: rgba(139, 92, 246, 0.8);
}

.image-placeholder i {
    font-size: 20px;
    margin-bottom: 4px;
}

.image-placeholder span {
    font-size: 10px;
    text-align: center;
}

.kit-assignment {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kit-dropdown {
    background: rgba(28, 28, 30, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: #f3f4f6;
    padding: 8px 12px;
    font-size: 13px;
    min-width: 150px;
}

.kit-dropdown:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
}

.create-kit-btn {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.5) 0%, 
        rgba(139, 92, 246, 0.35) 100%);
    border: 0.5px solid rgba(139, 92, 246, 0.5);
    color: white;
    padding: 10px 18px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 4px 16px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.create-kit-btn:hover {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.7) 0%, 
        rgba(139, 92, 246, 0.5) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 24px rgba(139, 92, 246, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.create-kit-btn:active {
    transform: translateY(0) scale(1);
}

.expanded-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.action-btn {
    background: rgba(139, 92, 246, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn:hover {
    background: rgba(139, 92, 246, 1);
    transform: translateY(-1px);
}

.action-btn.primary {
    background: rgba(59, 130, 246, 0.8);
    border-color: rgba(59, 130, 246, 0.3);
}

.action-btn.primary:hover {
    background: rgba(59, 130, 246, 1);
}

.action-btn.danger {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 0.3);
}

.action-btn.danger:hover {
    background: rgba(239, 68, 68, 1);
}

.expanded-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    color: #f3f4f6;
    font-size: 13px;
    line-height: 1.4;
}

/* V5.2: Expand hint styling */
.expand-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.6);
    font-size: 12px;
    opacity: 0.7;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* V5.7: 3-Column Grid Layout - Images | Details | Kit Management */
.expanded-content {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 24px;
    padding: 20px;
    width: 100%;
}

/* Column 1: Images Only */
.column-1-images-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.material-profile-image {
    width: 100%;
    max-width: 280px;
}

.additional-images {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Column 2: Material Details */
.column-2-material-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Apple-Inspired Material Info Styling */
.material-info {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(20px);
}

.material-name {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.material-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.material-details-horizontal {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.detail-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

/* Column 3: Kit Management + Measurements */
.column-3-kit-measurements {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Material Profile Image */
.material-profile-image {
    display: flex;
    justify-content: center;
}

.profile-image-container {
    position: relative;
    width: 100%;
    height: 200px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-image-container:hover {
    transform: scale(1.02);
}

.profile-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.7);
    transition: all 0.3s ease;
}

.profile-image-placeholder:hover {
    border-color: rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
}

.profile-image-placeholder i {
    font-size: 48px;
    margin-bottom: 12px;
    color: rgba(139, 92, 246, 0.8);
}

.profile-image-placeholder span {
    font-size: 14px;
    text-align: center;
    font-weight: 500;
}

.image-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-action-btn {
    width: 36px;
    height: 36px;
    background: rgba(28, 28, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: rgba(139, 92, 246, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-action-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
    transform: scale(1.05);
}

/* Additional Images */
.additional-images {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.image-item {
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.image-item:hover {
    transform: scale(1.1);
}

.image-item.add-image {
    cursor: pointer;
}

.small-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 2px dashed rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.6);
    transition: all 0.2s ease;
}

.small-image-placeholder:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    color: rgba(139, 92, 246, 0.8);
}

.small-image-placeholder i {
    font-size: 24px;
}

.add-image .add-image-placeholder {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
    color: rgba(139, 92, 246, 0.8);
    cursor: pointer;
}

.add-image .add-image-placeholder:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.6);
    color: rgba(139, 92, 246, 1);
}

.add-image-placeholder i {
    font-size: 20px;
}

/* Material Information */
.material-info {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
}

.material-name {
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.material-description {
    color: #d1d5db;
    font-size: 11px;
    line-height: 1.2;
    margin: 0 0 6px 0;
}

.material-details-horizontal {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    color: #9ca3af;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.detail-value {
    color: #f3f4f6;
    font-size: 10px;
    font-weight: 500;
}

/* Right Side Styles */
.kit-management-section {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
}

.section-title {
    color: #f3f4f6;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.kit-management-btn {
    width: 100%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(59, 130, 246, 0.8));
    border: none;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.kit-management-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Kit Dropdown */
.kit-dropdown-section {
    background: rgba(28, 28, 30, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.kit-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.dropdown-title {
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 600;
}

.close-dropdown-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-dropdown-btn:hover {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.1);
}

.kit-options {
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.kit-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kit-option:last-child {
    border-bottom: none;
}

.kit-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.kit-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}

.kit-checkbox input[type="checkbox"]:checked + .checkmark {
    background: rgba(139, 92, 246, 0.8);
    border-color: rgba(139, 92, 246, 0.8);
}

.kit-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.kit-name {
    flex: 1;
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 500;
}

.view-kit-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.9);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-kit-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

.kit-dropdown-actions {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.create-new-kit-btn {
    width: 100%;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.9);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.create-new-kit-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

/* Measurements Section */
.measurements-section {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
}

.view-measurements-btn {
    width: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(16, 185, 129, 0.8));
    border: none;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.view-measurements-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Team/Contractors Tab Styles */
.team-container { padding: 24px; }
.team-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.filter-btn:hover {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(255, 255, 255, 0.9);
}
.filter-btn.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.8);
    color: rgba(59, 130, 246, 0.9);
}
.filter-btn i { font-size: 16px; }
.contractors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.contractor-card {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}
.contractor-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.contractor-card.selected {
    border-color: rgba(16, 185, 129, 0.8);
    background: rgba(16, 185, 129, 0.1);
}
.contractor-card-header {
    margin-bottom: 16px;
}
.contractor-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(59, 130, 246, 0.2);
    color: rgba(59, 130, 246, 0.9);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.contractor-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: rgba(255, 255, 255, 0.9);
}
.contractor-company {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}
.contractor-card-body {
    margin-bottom: 16px;
}
.contractor-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.info-item i {
    color: rgba(59, 130, 246, 0.8);
    width: 16px;
}
.contractor-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.skill-tag {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}
.skill-tag.more {
    background: rgba(59, 130, 246, 0.2);
    color: rgba(59, 130, 246, 0.9);
}
.contractor-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.btn-details, .btn-contact, .btn-documents, .btn-select {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(28, 28, 30, 0.8);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-details:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(59, 130, 246, 0.9);
}
.btn-contact:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: rgba(16, 185, 129, 0.9);
}
.btn-documents:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: rgba(239, 68, 68, 0.9);
}
.btn-select {
    grid-column: 1 / -1;
}
.btn-select:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: rgba(16, 185, 129, 0.9);
}
.btn-select.selected {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.8);
    color: rgba(16, 185, 129, 0.9);
}
.mass-contact-button {
    padding: 10px 20px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 8px;
    color: rgba(59, 130, 246, 0.9);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mass-contact-button:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.8);
}
.contractor-details-modal {
    max-width: 800px;
}
.contractor-details-section {
    margin-bottom: 32px;
}
.contractor-details-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.9);
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.details-grid div {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.details-grid strong {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 8px;
}
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stat-display {
    text-align: center;
    padding: 20px;
    background: rgba(28, 28, 30, 0.6);
    border-radius: 8px;
    margin-bottom: 16px;
}
.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: rgba(59, 130, 246, 0.9);
    margin-bottom: 4px;
}
.stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}
.hours-list, .payments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hours-item, .payment-item {
    padding: 12px;
    background: rgba(28, 28, 30, 0.6);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hours-desc, .payment-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}
.payment-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.payment-amount {
    font-size: 16px;
    font-weight: 600;
    color: rgba(16, 185, 129, 0.9);
}
.payment-method {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(28, 28, 30, 0.6);
    border-radius: 8px;
}
.document-item i {
    color: rgba(239, 68, 68, 0.8);
    font-size: 20px;
}
.document-item span {
    flex: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.btn-view-doc {
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 6px;
    color: rgba(59, 130, 246, 0.9);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-view-doc:hover {
    background: rgba(59, 130, 246, 0.3);
}
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.document-card {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.document-icon {
    text-align: center;
    font-size: 32px;
    color: rgba(239, 68, 68, 0.8);
}
.document-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.document-info p {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.document-info small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.no-data {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* My Team Section in Settings */
.my-team-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.9);
}
.team-members-list, .available-contractors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.team-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.team-member-info {
    flex: 1;
}
.team-member-info strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}
.team-member-category {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.2);
    color: rgba(59, 130, 246, 0.9);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}
.team-member-info small {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}
.btn-add-team, .btn-remove-team {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-add-team {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: rgba(16, 185, 129, 0.9);
}
.btn-add-team:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.8);
}
.btn-remove-team {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: rgba(239, 68, 68, 0.9);
}
.btn-remove-team:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.8);
}
.empty-state-small {
    text-align: center;
    padding: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    background: rgba(28, 28, 30, 0.4);
    border-radius: 8px;
}
.settings-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 24px;
}

/* =====================================================================
   SETTINGS PAGE — V3 (header-tab navigation, open layout)
   ===================================================================== */

/* Header adapts to settings tab bar — mirrors materials-tabs-v2 pattern */
.header:has(.settings-header-shell) {
    height: 96px;
    padding: 0 40px;
    align-items: center;
    overflow: hidden;
}
.settings-header-shell {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0;
}
.settings-tab-cluster {
    display: inline-flex;
    gap: 0;
    background: rgba(17,17,17,0.85);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 13px;
    padding: 4px;
    flex-shrink: 0;
}
.settings-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240,234,216,0.60);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.settings-tab-btn i {
    font-size: 12px;
    opacity: 0.80;
    margin-right: 6px;
}
.settings-tab-btn:hover {
    background: rgba(255,255,255,0.04);
    color: rgba(240,234,216,0.95);
}
.settings-tab-btn.active {
    background: #1A1A1A;
    border-color: rgba(255,255,255,0.10);
    color: #C49068;
}
.settings-tab-btn.active:hover {
    background: #1A1A1A;
    color: #C49068;
}
.settings-tab-btn .stb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    background: rgba(59,130,246,0.25);
    color: #93c5fd;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
}
.settings-tab-btn.active .stb-badge {
    background: rgba(196,144,104,0.25);
    color: #C49068;
}

/* Page-content: remove the 64px padding when settings is active */
.page-content:has(#settingsContent) {
    padding: 36px 48px;
}

/* Settings content area — open, no box */
.settings-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    min-height: 0;
    width: 100%;
}
.settings-content h2 {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-content h2 i {
    color: var(--color-primary);
    font-size: 16px;
}
.settings-section-subtitle {
    color: rgba(255,255,255,0.42);
    font-size: 13px;
    margin-bottom: 24px;
}

/* Settings overview cards */
.settings-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.settings-overview-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-overview-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,0.45);
    background: rgba(59,130,246,0.06);
}
.settings-overview-card .soc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(59,130,246,0.15);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.settings-overview-card .soc-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.settings-overview-card .soc-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.settings-overview-card .soc-stat {
    margin-top: auto;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.settings-overview-card .soc-stat strong {
    color: #fff;
    font-weight: 600;
}

/* =====================================================================
   ASSIGNMENTS WORKSPACE
   ===================================================================== */
.assignments-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}
.assignments-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    flex-wrap: wrap;
}
.assignments-toolbar .at-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.assignments-toolbar .at-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}
.assignments-toolbar .at-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
}
.assignments-toolbar .at-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(0,0,0,0.4);
}
.assignments-toolbar select {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.assignments-toolbar .at-mode {
    display: flex;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}
.assignments-toolbar .at-mode button {
    padding: 9px 14px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.assignments-toolbar .at-mode button.is-active {
    background: rgba(59,130,246,0.2);
    color: #93c5fd;
}
.assignments-toolbar .at-action {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.at-btn {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.at-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}
.at-btn.at-btn-danger {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.28);
    color: #fecaca;
}
.at-btn.at-btn-danger:hover {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.45);
    color: #fff;
}
.at-btn:disabled { opacity: .55; cursor: not-allowed; }
.at-btn.primary {
    background: rgba(59,130,246,0.2);
    border-color: rgba(59,130,246,0.5);
    color: #93c5fd;
}
.at-btn.primary:hover {
    background: rgba(59,130,246,0.3);
    border-color: rgba(59,130,246,0.8);
}
.at-btn.danger {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.4);
    color: #fca5a5;
}
.at-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Two-panel layout: members palette + scope tree */
.assignments-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    min-height: 600px;
}
@media (max-width: 1100px) {
    .assignments-grid { grid-template-columns: 1fr; }
}
.assign-panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.assign-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.assign-panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.assign-panel-header .panel-count {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* Team palette */
.team-palette-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 720px;
}
.team-palette-empty {
    text-align: center;
    padding: 30px 16px;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
}
.team-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
    position: relative;
}
.team-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
}
.team-card.is-active {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(96,165,250,0.10));
    border-color: rgba(59,130,246,0.6);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.3) inset;
}
.team-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.team-avatar.cat-gc { background: linear-gradient(135deg,#f59e0b,#dc2626); }
.team-avatar.cat-pm { background: linear-gradient(135deg,#3b82f6,#8b5cf6); }
.team-avatar.cat-investor { background: linear-gradient(135deg,#10b981,#059669); }
.team-avatar.cat-partner { background: linear-gradient(135deg,#ec4899,#8b5cf6); }
.team-card-body {
    flex: 1;
    min-width: 0;
}
.team-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-card-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.team-card-meta .meta-pill {
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    font-weight: 500;
}
.team-card-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
.team-card-stats .tcs-num {
    color: #93c5fd;
    font-weight: 600;
}
.team-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.team-card-skills .tc-skill {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(59,130,246,0.12);
    color: #93c5fd;
    border-radius: 6px;
}

/* Selected member context bar (sticky on scope panel) */
.selected-member-context {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(96,165,250,0.06));
    border-bottom: 1px solid rgba(59,130,246,0.25);
}
.selected-member-context .smc-info {
    flex: 1;
    min-width: 0;
}
.selected-member-context .smc-title {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.selected-member-context .smc-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.selected-member-context .smc-clear {
    font-size: 12px;
    color: #93c5fd;
    background: transparent;
    border: 1px solid rgba(59,130,246,0.4);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
}
.selected-member-context .smc-clear:hover {
    background: rgba(59,130,246,0.15);
}

/* Scope filter chips */
.scope-filter-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.15);
    flex-wrap: wrap;
}
.scope-filter-bar .sfb-chip {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.scope-filter-bar .sfb-chip:hover { background: rgba(255,255,255,0.08); }
.scope-filter-bar .sfb-chip.is-active {
    background: rgba(59,130,246,0.2);
    color: #93c5fd;
    border-color: rgba(59,130,246,0.5);
}
.scope-filter-bar .sfb-chip i { font-size: 10px; }

/* Similar items strip */
.similar-strip {
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(251,191,36,0.04));
    border-bottom: 1px solid rgba(245,158,11,0.2);
}
.similar-strip-head {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.similar-strip-head i { color: #fbbf24; }
.similar-strip-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.similar-card {
    min-width: 200px;
    max-width: 220px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.similar-card:hover {
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.08);
}
.similar-card .sc-type {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.similar-card .sc-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.similar-card .sc-foot {
    margin-top: 6px;
    font-size: 11px;
    color: #fbbf24;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Scope tree body */
.scope-tree-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 720px;
}
.scope-tree-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.45);
}
.scope-tree-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.scope-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
    transition: all 0.15s ease;
    position: relative;
}
.scope-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.scope-row.is-checked {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.4);
}
.scope-row.is-similar-match {
    box-shadow: 0 0 0 1px rgba(245,158,11,0.5) inset;
}
.scope-row.is-already-assigned {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.25);
}
.scope-row.depth-1 { margin-left: 28px; }
.scope-row.depth-2 { margin-left: 56px; }
.scope-row.depth-3 { margin-left: 84px; }

.scope-row .sr-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.scope-row .sr-toggle {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 11px;
    transition: transform 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.scope-row .sr-toggle:hover { color: #fff; background: rgba(255,255,255,0.06); }
.scope-row .sr-toggle.is-open { transform: rotate(90deg); }
.scope-row .sr-toggle.is-empty { visibility: hidden; }
.scope-row .sr-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.scope-row.type-category .sr-icon { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.scope-row.type-subcategory .sr-icon { background: rgba(59,130,246,0.18); color: #93c5fd; }
.scope-row.type-task .sr-icon { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.scope-row.type-subtask .sr-icon { background: rgba(245,158,11,0.18); color: #fcd34d; }

.scope-row .sr-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.scope-row .sr-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scope-row .sr-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    display: flex;
    gap: 8px;
    align-items: center;
}
.scope-row .sr-meta .sr-meta-pill {
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
}

/* Avatars stack on a scope row */
.scope-avatars {
    display: flex;
    align-items: center;
    margin-right: 6px;
}
.scope-avatars .sa-pill {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(59,130,246,0.25);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    border: 2px solid rgba(15,15,16,1);
    cursor: default;
    text-transform: uppercase;
}
.scope-avatars .sa-pill:first-child { margin-left: 0; }
.scope-avatars .sa-pill.more {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 9px;
}
.scope-avatars-empty {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    font-style: italic;
}

/* Quick assign buttons */
.scope-row .sr-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.scope-row .sr-assign-btn {
    padding: 5px 10px;
    background: rgba(59,130,246,0.18);
    border: 1px solid rgba(59,130,246,0.4);
    border-radius: 6px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.scope-row .sr-assign-btn:hover {
    background: rgba(59,130,246,0.3);
    border-color: rgba(59,130,246,0.7);
}
.scope-row .sr-assign-btn.is-assigned {
    background: rgba(16,185,129,0.18);
    border-color: rgba(16,185,129,0.5);
    color: #6ee7b7;
}
.scope-row .sr-assign-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.scope-row .sr-more-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    cursor: pointer;
    padding: 5px 8px;
}
.scope-row .sr-more-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

/* Bulk action bar */
.bulk-action-bar {
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.12));
    border: 1px solid rgba(59,130,246,0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
}
.bulk-action-bar .bab-text {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}
.bulk-action-bar .bab-text .bab-count {
    color: #93c5fd;
    font-weight: 700;
}
.bulk-action-bar .bab-actions {
    display: flex;
    gap: 8px;
}

/* Multi-assign dropdown */
.multi-assign-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(20,20,22,0.97);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    min-width: 260px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 8px;
}
.multi-assign-popover .map-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}
.multi-assign-popover .map-item:hover { background: rgba(255,255,255,0.06); }
.multi-assign-popover .map-item input { accent-color: var(--color-primary); }
.multi-assign-popover .map-empty {
    padding: 16px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}
.multi-assign-popover .map-foot {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* Notifications & appearance & generic settings rows */
.settings-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-form-row:last-child { border-bottom: none; }
.settings-form-row .sfr-info { flex: 1; }
.settings-form-row .sfr-label {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 4px;
}
.settings-form-row .sfr-help {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.toggle-switch.is-on { background: var(--color-primary); }
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.toggle-switch.is-on::after { transform: translateX(20px); }

/* Toast (lightweight) for assignment confirmations */
.assign-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background: rgba(20,20,22,0.95);
    border: 1px solid rgba(59,130,246,0.4);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 9999;
    animation: assignToastIn 0.2s ease forwards;
}
.assign-toast.success { border-color: rgba(16,185,129,0.5); }
.assign-toast.error { border-color: rgba(239,68,68,0.5); }
.assign-toast i { color: var(--color-primary); }
.assign-toast.success i { color: #10b981; }
.assign-toast.error i { color: #ef4444; }
@keyframes assignToastIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Stats header inside Assignments */
.assign-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.assign-stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.assign-stat-card .asc-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.assign-stat-card .asc-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.assign-stat-card .asc-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
}
.assign-stat-card.accent-blue .asc-value { color: #93c5fd; }
.assign-stat-card.accent-green .asc-value { color: #6ee7b7; }
.assign-stat-card.accent-orange .asc-value { color: #fcd34d; }
.assign-stat-card.accent-purple .asc-value { color: #c4b5fd; }
.assign-stat-card .asc-bar {
    height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.assign-stat-card .asc-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    transition: width .3s ease;
}

/* Member detail panel — appears under the selected-member-context bar */
.member-detail-strip {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 12px 16px;
}
.member-detail-strip .mds-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.member-detail-strip .mds-title {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.member-detail-strip .mds-title i { color: var(--color-success); }
.mds-clear-all {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.4);
    color: #fca5a5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}
.mds-clear-all:hover {
    background: rgba(239,68,68,0.15);
}
.mds-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 100px;
    overflow-y: auto;
}
.mds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 14px;
    font-size: 11px;
    color: #6ee7b7;
    max-width: 280px;
}
.mds-chip .mds-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.mds-chip .mds-chip-type {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.45);
}
.mds-chip .mds-chip-x {
    background: transparent;
    border: none;
    color: #6ee7b7;
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
    opacity: 0.65;
}
.mds-chip .mds-chip-x:hover { opacity: 1; }
.mds-empty {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-style: italic;
}

/* Highlight rows that match the search query */
.scope-row .sr-name mark {
    background: rgba(245,158,11,0.35);
    color: #fff;
    padding: 0 2px;
    border-radius: 3px;
}

/* Cascade modal */
.cascade-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: cmFadeIn 0.15s ease;
}
@keyframes cmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cascade-modal {
    width: 100%;
    max-width: 520px;
    background: #1a1a1c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: cmSlideIn 0.2s ease;
}
@keyframes cmSlideIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.cascade-modal-head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cascade-modal-head h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cascade-modal-head h3 i { color: var(--color-primary); }
.cascade-modal-head p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.cascade-modal-body {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cascade-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.cascade-option:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}
.cascade-option.is-selected {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.5);
}
.cascade-option input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.cascade-option .co-body { flex: 1; }
.cascade-option .co-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}
.cascade-option .co-help {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.cascade-option .co-count {
    font-size: 11px;
    color: #93c5fd;
    font-weight: 600;
}
.cascade-modal-foot {
    padding: 14px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}

/* Sticky scope header for long trees */
.scope-tree-body {
    scroll-behavior: smooth;
}
#scopePanelHead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(28,28,30,0.95);
    backdrop-filter: blur(10px);
}
.assign-panel { position: relative; }

/* Refresh / export buttons */
.at-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s;
}
.at-icon-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.at-icon-btn.is-spinning i { animation: aspin 0.8s linear infinite; }
@keyframes aspin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .settings-tab-cluster { overflow-x: auto; }
    .settings-tab-btn { padding: 6px 10px; font-size: 12px; }
    .settings-tab-btn i { display: none; }
    .page-content:has(#settingsContent) { padding: 20px 20px; }
}

/* ── Template Manager ─────────────────────────────────────────── */
.tm-header { padding: 0 0 20px; }
.tm-shell {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    height: calc(100vh - 96px - 92px);
    min-height: 500px;
    margin: 16px -48px -36px;
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.tm-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: rgba(10,10,10,0.6);
}
.tm-panel:last-child { border-right: none; }
.tm-ph {
    padding: 9px 11px 7px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    background: rgba(28,28,30,0.7);
}
.tm-ph-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tm-ph-title { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.tm-ph-count { font-size: 10px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 8px; }
.tm-srch { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 3px 7px; }
.tm-srch input { background: none; border: none; color: #fff; font-size: 12px; width: 100%; outline: none; }
.tm-srch input::placeholder { color: rgba(255,255,255,0.3); }
.tm-pb { flex: 1; overflow-y: auto; padding: 5px; }
.tm-pb::-webkit-scrollbar { width: 3px; }
.tm-pb::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.tm-pf { padding: 7px 5px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(28,28,30,0.7); flex-shrink: 0; }

/* mat filter bar */
.tm-filter-bar { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(28,28,30,0.7); flex-shrink: 0; }
.tm-filt-btn { font-size: 10px; padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: none; color: rgba(255,255,255,0.4); cursor: pointer; transition: all .1s; }
.tm-filt-btn:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.tm-filt-btn.active { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.25); }
.tm-filt-btn.linked.active { background: rgba(16,185,129,0.13); color: #10b981; border-color: rgba(16,185,129,0.3); }
.tm-filt-btn.unlinked.active { background: rgba(245,158,11,0.13); color: #f59e0b; border-color: rgba(245,158,11,0.3); }

/* category items */
.tm-ci { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 7px; cursor: pointer; transition: all .1s; margin-bottom: 1px; border: 1px solid transparent; }
.tm-ci:hover { background: rgba(255,255,255,0.05); }
.tm-ci.act { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); }
.tm-ci.act .tm-cn { color: var(--color-primary); }
.tm-cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tm-cn { font-size: 12px; font-weight: 500; flex: 1; }
.tm-cb { font-size: 9px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 8px; }
.tm-cpb { height: 2px; border-radius: 1px; background: rgba(255,255,255,0.1); margin-top: 3px; }
.tm-cpbf { height: 100%; border-radius: 1px; background: #10b981; }
.tm-cc { padding-left: 14px; }

/* category header in panels */
.tm-cat-hdr { padding: 9px 12px; background: rgba(59,130,246,0.07); border-bottom: 1px solid rgba(59,130,246,0.15); flex-shrink: 0; }
.tm-cat-hdr.mat { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.15); }
.tm-cat-hdr-name { font-size: 12px; font-weight: 600; color: var(--color-primary); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tm-cat-hdr.mat .tm-cat-hdr-name { color: #10b981; }
.tm-sw { width: 8px; height: 8px; border-radius: 50%; }
.tm-stats { display: flex; gap: 10px; margin-bottom: 4px; }
.tm-stat { font-size: 10px; color: rgba(255,255,255,0.45); }
.tm-stat span { color: rgba(255,255,255,0.85); }
.tm-tags-row { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.tm-tag { font-size: 10px; padding: 2px 7px; border-radius: 7px; display: inline-flex; align-items: center; gap: 3px; border: 1px solid transparent; }
.tm-tag-x { cursor: pointer; opacity: .4; background: none; border: none; color: inherit; font-size: 9px; padding: 0; }
.tm-tag-x:hover { opacity: 1; }
.tm-tag-add { font-size: 10px; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.2); padding: 2px 7px; border-radius: 7px; cursor: pointer; }
.tm-tag-picker { position: relative; display: inline-block; }
.tm-tag-dd { position: absolute; top: 100%; left: 0; margin-top: 3px; background: #1c1c1e; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 6px; min-width: 180px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: none; }
.tm-tag-dd.open { display: block; }
.tm-tag-dd-search { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 4px 7px; border-radius: 5px; font-size: 11px; outline: none; margin-bottom: 5px; }
.tm-tag-opt { display: flex; align-items: center; gap: 7px; padding: 4px 7px; border-radius: 5px; cursor: pointer; font-size: 11px; color: rgba(255,255,255,0.85); }
.tm-tag-opt:hover { background: rgba(255,255,255,0.06); }
.tm-tag-opt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tm-tag-dd-new { padding: 4px 7px; font-size: 11px; color: var(--color-primary); cursor: pointer; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 3px; padding-top: 7px; }
.tm-tag-dd-new:hover { background: rgba(255,255,255,0.05); }

/* task items */
.tm-ti { border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; margin-bottom: 5px; overflow: hidden; background: rgba(28,28,30,0.5); transition: border-color .12s; }
.tm-ti:hover { border-color: rgba(255,255,255,0.18); }
.tm-ti.dragging { opacity: .35; border-color: var(--color-primary); }
.tm-ti.drag-over-task { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.tm-ti.drop-target { border-color: #10b981 !important; box-shadow: 0 0 0 2px rgba(16,185,129,0.25) !important; background: rgba(16,185,129,0.05) !important; }
.tm-tr { display: flex; align-items: center; gap: 6px; padding: 7px 9px; }
.tm-dh { cursor: grab; color: rgba(255,255,255,0.2); font-size: 11px; user-select: none; flex-shrink: 0; opacity: 0; transition: opacity .1s; }
.tm-tr:hover .tm-dh, .tm-mr:hover .tm-dh { opacity: 1; }
.tm-dh:active { cursor: grabbing; }
.tm-eb { width: 15px; height: 15px; border-radius: 3px; background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; transition: all .12s; }
.tm-eb.op { background: var(--color-primary); color: #fff; }
.tm-ed { background: none; border: none; color: #fff; font-family: inherit; font-size: 12px; font-weight: 500; flex: 1; outline: none; border-radius: 3px; padding: 1px 3px; transition: background .1s; min-width: 0; }
.tm-ed:hover { background: rgba(255,255,255,0.05); }
.tm-ed:focus { background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px var(--color-primary); }
.tm-ed.sm { font-weight: 400; font-size: 11px; }
.tm-mins-w { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.tm-mins-i { width: 38px; background: rgba(255,255,255,0.05); border: 1px solid transparent; color: #f59e0b; font-size: 10px; padding: 2px 4px; border-radius: 3px; outline: none; text-align: right; }
.tm-mins-i:focus { border-color: #f59e0b; }
.tm-ml { font-size: 9px; color: rgba(255,255,255,0.35); }
.tm-ra { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.tm-tr:hover .tm-ra, .tm-mr:hover .tm-ra, .tm-sr:hover .tm-ra { opacity: 1; }
.tm-ab { width: 20px; height: 20px; border-radius: 3px; background: none; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; transition: all .1s; }
.tm-ab:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.2); }
.tm-ab.del:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.35); }
.tm-ab.cl:hover { background: rgba(124,92,255,0.15); color: #a78fff; border-color: rgba(124,92,255,0.35); }
.tm-link-badge { font-size: 9px; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.tm-link-badge.linked { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.25); }
.tm-link-badge.unlinked { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }

/* task body (subtasks + linked mats) */
.tm-tbody { border-top: 1px solid rgba(255,255,255,0.08); background: rgba(10,10,10,0.35); display: none; }
.tm-tbody.op { display: block; }
.tm-subs-section { border-bottom: 1px solid rgba(255,255,255,0.07); }
.tm-section-label { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 5px 9px 3px; }
.tm-sr { display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 26px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .1s; cursor: grab; }
.tm-sr:last-child { border-bottom: none; cursor: default; }
.tm-sr:hover { background: rgba(255,255,255,0.03); }
.tm-sr.dragging { opacity: .35; }
.tm-sr.drag-over { border-top: 2px solid var(--color-primary); }
.tm-sub-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.tm-qa { display: flex; align-items: center; gap: 5px; padding: 5px 9px; background: rgba(10,10,10,0.2); }
.tm-qa input { background: none; border: none; color: rgba(255,255,255,0.45); font-size: 11px; font-family: inherit; flex: 1; outline: none; }
.tm-qa input:focus { color: #fff; }
.tm-qa input::placeholder { color: rgba(255,255,255,0.2); }
.tm-qa-hint { font-size: 9px; color: rgba(255,255,255,0.2); }
.tm-linked-mat-row { display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 11px; transition: background .1s; }
.tm-linked-mat-row:last-child { border-bottom: none; }
.tm-linked-mat-row:hover { background: rgba(255,255,255,0.03); }
.tm-lm-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex-shrink: 0; }
.tm-lm-name { flex: 1; color: rgba(255,255,255,0.85); }
.tm-lm-unit { font-size: 10px; color: #10b981; background: rgba(16,185,129,0.1); padding: 1px 5px; border-radius: 5px; }
.tm-lm-cost { font-size: 10px; color: rgba(255,255,255,0.4); }
.tm-lm-unlink { opacity: 0; transition: opacity .1s; }
.tm-linked-mat-row:hover .tm-lm-unlink { opacity: 1; }
.tm-drop-zone { padding: 8px 9px; text-align: center; font-size: 10px; color: rgba(255,255,255,0.25); border: 1px dashed rgba(255,255,255,0.12); border-radius: 5px; margin: 6px 9px; transition: all .15s; }
.tm-drop-zone.active { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.05); }

/* material items */
.tm-mi { border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; margin-bottom: 4px; background: rgba(28,28,30,0.5); transition: all .12s; cursor: grab; }
.tm-mi:hover { border-color: rgba(255,255,255,0.18); }
.tm-mi.dragging { opacity: .35; border-color: #10b981; cursor: grabbing; }
.tm-mi.drag-over { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.tm-mi.linked-mat { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.04); }
.tm-mi.unlinked-mat { border-color: rgba(245,158,11,0.15); }
.tm-mr { display: flex; align-items: center; gap: 6px; padding: 7px 9px; }
.tm-mu { font-size: 10px; color: #10b981; background: rgba(16,185,129,0.1); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.tm-mc { font-size: 10px; color: rgba(255,255,255,0.4); }
.tm-msup { font-size: 10px; color: rgba(255,255,255,0.4); background: rgba(16,185,129,0.08); padding: 1px 5px; border-radius: 5px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* add forms */
.tm-add-form { background: rgba(10,10,10,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; padding: 10px; margin-bottom: 5px; display: none; }
.tm-add-form.open { display: block; }
.tm-af-title { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }
.tm-field { margin-bottom: 6px; }
.tm-field label { font-size: 10px; color: rgba(255,255,255,0.45); display: block; margin-bottom: 3px; }
.tm-field input, .tm-field select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 5px 8px; border-radius: 5px; font-family: inherit; font-size: 12px; outline: none; transition: border-color .12s; }
.tm-field input:focus, .tm-field select:focus { border-color: var(--color-primary); }
.tm-field input::placeholder { color: rgba(255,255,255,0.25); }
.tm-field select option { background: #1c1c1e; }
.tm-fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tm-fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.tm-form-actions { display: flex; gap: 5px; margin-top: 8px; }
.tm-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 500; border: none; cursor: pointer; transition: all .12s; }
.tm-btn-primary { background: var(--color-primary); color: #fff; }
.tm-btn-primary:hover { filter: brightness(1.1); }
.tm-btn-ghost { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.12); }
.tm-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
.tm-btn-success { background: #10b981; color: #0a0a0a; }
.tm-btn-success:hover { filter: brightness(1.1); }
.tm-btn-sm { padding: 3px 9px; font-size: 11px; }
.tm-btn-add { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.45); padding: 5px; border-radius: 5px; font-size: 11px; cursor: pointer; font-family: inherit; }
.tm-btn-add:hover { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
.tm-btn-add.g { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); color: #10b981; }
.tm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; text-align: center; }
.tm-empty-icon { font-size: 22px; opacity: .25; }
.tm-empty-text { font-size: 11px; color: rgba(255,255,255,0.35); }
.tm-loading { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 20px; color: rgba(255,255,255,0.4); font-size: 12px; }

/* clone modal (in-page overlay) */
.tm-clone-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 500; display: none; align-items: center; justify-content: center; }
.tm-clone-overlay.open { display: flex; }
.tm-clone-box { background: #1c1c1e; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 20px; width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.tm-clone-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.tm-clone-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.tm-clone-search { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 5px 9px; border-radius: 7px; font-size: 12px; outline: none; margin-bottom: 8px; }
.tm-clone-search:focus { border-color: var(--color-primary); }
.tm-clone-list { max-height: 180px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; margin-bottom: 14px; }
.tm-clone-opt { display: flex; align-items: center; gap: 7px; padding: 8px 10px; cursor: pointer; font-size: 12px; transition: background .1s; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tm-clone-opt:last-child { border-bottom: none; }
.tm-clone-opt:hover { background: rgba(255,255,255,0.05); }
.tm-clone-opt.sel { background: rgba(59,130,246,0.1); color: var(--color-primary); }
.tm-clone-opt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tm-clone-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* ── Data View (Settings → Data) ──────────────────────────────── */
.dv-shell {
    display: grid;
    grid-template-columns: 210px 1fr 310px;
    height: calc(100vh - 96px - 72px);
    min-height: 500px;
    margin: 0 -48px -36px;
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.dv-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: rgba(8,8,10,0.5);
}
.dv-panel:last-child { border-right: none; }

/* panel header */
.dv-ph { padding: 10px 12px 8px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; background: rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 7px; }
.dv-ph-row { display: flex; align-items: center; justify-content: space-between; }
.dv-ph-title { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.32); }
.dv-ph-count { font-size: 10px; color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.05); padding: 1px 7px; border-radius: 8px; }
.dv-search { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; padding: 5px 9px; transition: border-color .15s; }
.dv-search:focus-within { border-color: rgba(255,255,255,0.2); }
.dv-search i { color: rgba(255,255,255,0.22); font-size: 10px; flex-shrink: 0; }
.dv-search input { background: none; border: none; color: #fff; font-size: 12px; width: 100%; outline: none; }
.dv-search input::placeholder { color: rgba(255,255,255,0.22); }
.dv-pb { flex: 1; overflow-y: auto; padding: 6px; }
.dv-pb::-webkit-scrollbar { width: 3px; }
.dv-pb::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.dv-pf { padding: 8px 6px; border-top: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.25); flex-shrink: 0; }

/* filter bar */
.dv-filter-bar { display: flex; gap: 4px; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.25); flex-shrink: 0; }
.dv-filt { font-size: 10px; font-weight: 600; padding: 3px 11px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.09); background: none; color: rgba(255,255,255,0.38); cursor: pointer; transition: all .12s; letter-spacing: .04em; font-family: inherit; }
.dv-filt:hover { color: #fff; border-color: rgba(255,255,255,0.22); }
.dv-filt.active { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }
.dv-filt.linked.active { background: rgba(16,185,129,0.1); color: #10b981; border-color: rgba(16,185,129,0.28); }
.dv-filt.unlinked.active { background: rgba(245,158,11,0.08); color: #f59e0b; border-color: rgba(245,158,11,0.22); }

/* category strip at top of task/mat panels */
.dv-cat-strip { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; display: none; }
.dv-cat-strip.visible { display: block; }
.dv-cat-strip-name { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.dv-cat-strip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dv-cat-strip-stats { display: flex; gap: 14px; }
.dv-cat-strip-stat { font-size: 10px; color: rgba(255,255,255,0.38); }
.dv-cat-strip-stat b { color: rgba(255,255,255,0.8); font-weight: 600; }

/* category list items */
.dv-ci { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; cursor: pointer; transition: all .12s; margin-bottom: 1px; border: 1px solid transparent; }
.dv-ci:hover { background: rgba(255,255,255,0.04); }
.dv-ci.act { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.18); }
.dv-ci.act .dv-cn { color: #60a5fa; }
.dv-cdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dv-cn { font-size: 12px; font-weight: 500; flex: 1; color: rgba(255,255,255,0.75); }
.dv-cb { font-size: 9px; color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 6px; }
.dv-cpb { height: 2px; border-radius: 1px; background: rgba(255,255,255,0.07); margin-top: 4px; }
.dv-cpbf { height: 100%; border-radius: 1px; background: linear-gradient(90deg, #3b82f6, #10b981); }
.dv-cc { padding-left: 16px; }

/* ── Task hierarchy card ── */
.dv-task-card { border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; margin-bottom: 7px; background: rgba(255,255,255,0.022); transition: border-color .15s; overflow: hidden; }
.dv-task-card:hover { border-color: rgba(255,255,255,0.13); }
.dv-task-card.drag-over-task { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(59,130,246,0.18); }
.dv-task-card.drop-target { border-color: #10b981 !important; background: rgba(16,185,129,0.04) !important; }
.dv-task-card.dragging { opacity: .35; }
.dv-task-hdr { display: flex; align-items: center; gap: 6px; padding: 9px 10px; }
.dv-drag-h { cursor: grab; color: rgba(255,255,255,0.16); font-size: 12px; user-select: none; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.dv-task-hdr:hover .dv-drag-h { opacity: 1; }
.dv-expand-btn { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,0.05); border: none; color: rgba(255,255,255,0.35); cursor: pointer; font-size: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.dv-expand-btn.open { background: var(--color-primary); color: #fff; }
.dv-task-name-input { background: none; border: none; color: rgba(255,255,255,0.88); font-family: inherit; font-size: 13px; font-weight: 600; flex: 1; outline: none; border-radius: 4px; padding: 2px 4px; transition: background .12s; min-width: 0; }
.dv-task-name-input:hover { background: rgba(255,255,255,0.05); }
.dv-task-name-input:focus { background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px rgba(59,130,246,0.4); }
.dv-mat-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.22); white-space: nowrap; flex-shrink: 0; }
.dv-task-dur { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.dv-task-dur input { width: 34px; background: rgba(255,255,255,0.04); border: 1px solid transparent; color: #f59e0b; font-size: 10px; padding: 2px 3px; border-radius: 3px; outline: none; text-align: right; font-family: inherit; }
.dv-task-dur input:focus { border-color: rgba(245,158,11,0.5); }
.dv-task-dur span { font-size: 9px; color: rgba(255,255,255,0.28); }
.dv-task-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.dv-task-hdr:hover .dv-task-actions { opacity: 1; }
.dv-icon-btn { width: 22px; height: 22px; border-radius: 5px; background: none; border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.38); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; transition: all .12s; }
.dv-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); }
.dv-icon-btn.del:hover { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.28); }

/* task body */
.dv-task-body { display: none; border-top: 1px solid rgba(255,255,255,0.06); }
.dv-task-body.open { display: block; }

/* subtask rows */
.dv-subtask-list { padding: 3px 0 2px; }
.dv-subtask-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 26px; transition: background .1s; border-bottom: 1px solid rgba(255,255,255,0.04); }
.dv-subtask-row:last-child { border-bottom: none; }
.dv-subtask-row:hover { background: rgba(255,255,255,0.025); }
.dv-sub-connector { color: rgba(255,255,255,0.16); font-size: 11px; flex-shrink: 0; font-family: monospace; }
.dv-sub-name { background: none; border: none; color: rgba(255,255,255,0.68); font-family: inherit; font-size: 11px; flex: 1; outline: none; border-radius: 3px; padding: 1px 4px; min-width: 0; transition: background .1s; }
.dv-sub-name:hover { background: rgba(255,255,255,0.04); }
.dv-sub-name:focus { background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(59,130,246,0.35); }
.dv-sub-dur { display: flex; align-items: center; gap: 2px; }
.dv-sub-dur input { width: 30px; background: rgba(255,255,255,0.03); border: 1px solid transparent; color: #f59e0b; font-size: 9px; padding: 1px 3px; border-radius: 3px; outline: none; text-align: right; font-family: inherit; }
.dv-sub-dur input:focus { border-color: rgba(245,158,11,0.4); }
.dv-sub-dur span { font-size: 9px; color: rgba(255,255,255,0.22); }
.dv-sub-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .1s; }
.dv-subtask-row:hover .dv-sub-actions { opacity: 1; }
/* quick-add subtask */
.dv-sub-add-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 26px; opacity: .5; transition: opacity .12s; }
.dv-sub-add-row:focus-within { opacity: 1; }
.dv-sub-add-input { background: none; border: none; color: rgba(255,255,255,0.5); font-family: inherit; font-size: 11px; flex: 1; outline: none; }
.dv-sub-add-input::placeholder { color: rgba(255,255,255,0.2); }
.dv-sub-add-input:focus { color: rgba(255,255,255,0.85); }
.dv-qa-hint { font-size: 9px; color: rgba(255,255,255,0.16); }

/* material chips inside task */
.dv-chips-area { padding: 6px 10px 8px 26px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); min-height: 36px; }
.dv-mat-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(16,185,129,0.09); border: 1px solid rgba(16,185,129,0.2); border-radius: 20px; padding: 3px 8px 3px 6px; font-size: 11px; color: #10b981; transition: all .12s; }
.dv-mat-chip:hover { background: rgba(16,185,129,0.16); }
.dv-mat-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; flex-shrink: 0; }
.dv-mat-chip-name { color: rgba(255,255,255,0.82); font-weight: 500; }
.dv-mat-chip-unit { font-size: 9px; color: #10b981; font-weight: 700; }
.dv-mat-chip-cost { font-size: 9px; color: rgba(255,255,255,0.38); }
.dv-mat-chip-x { background: none; border: none; color: rgba(255,255,255,0.22); cursor: pointer; font-size: 11px; padding: 0; line-height: 1; transition: color .1s; }
.dv-mat-chip-x:hover { color: #ef4444; }
.dv-drop-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 20px; padding: 3px 10px; font-size: 10px; color: rgba(255,255,255,0.22); transition: all .15s; user-select: none; }
.dv-drop-pill.active { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.06); }

/* ── Materials database card ── */
.dv-mat-card { border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; margin-bottom: 6px; background: rgba(255,255,255,0.02); cursor: grab; transition: all .15s; overflow: hidden; }
.dv-mat-card:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); }
.dv-mat-card.dragging { opacity: .35; cursor: grabbing; border-color: #10b981; }
.dv-mat-card.drag-over-card { border-color: #10b981; box-shadow: 0 0 0 1px rgba(16,185,129,0.18); }
.dv-mat-card.is-linked { border-color: rgba(16,185,129,0.2); background: rgba(16,185,129,0.035); }
.dv-mat-card.is-unlinked { border-left: 3px solid rgba(245,158,11,0.35); }
.dv-mat-body { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.dv-mat-drag-h { color: rgba(255,255,255,0.16); font-size: 11px; user-select: none; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.dv-mat-card:hover .dv-mat-drag-h { opacity: 1; }
.dv-mat-info { flex: 1; min-width: 0; }
.dv-mat-name-ed { background: none; border: none; color: rgba(255,255,255,0.88); font-family: inherit; font-size: 12px; font-weight: 600; width: 100%; outline: none; border-radius: 3px; padding: 1px 3px; display: block; transition: background .1s; }
.dv-mat-name-ed:hover { background: rgba(255,255,255,0.04); }
.dv-mat-name-ed:focus { background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(59,130,246,0.35); }
.dv-mat-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.dv-mat-unit-ed { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.18); color: #10b981; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; outline: none; width: 50px; text-align: center; font-family: inherit; }
.dv-mat-unit-ed:focus { border-color: #10b981; background: rgba(16,185,129,0.14); }
.dv-mat-cost-wrap { display: flex; align-items: center; gap: 1px; }
.dv-mat-cost-sym { font-size: 10px; color: rgba(255,255,255,0.28); }
.dv-mat-cost-ed { background: none; border: none; color: rgba(255,255,255,0.42); font-size: 10px; font-family: inherit; width: 52px; outline: none; text-align: right; padding: 0; }
.dv-mat-cost-ed:focus { color: rgba(255,255,255,0.88); }
.dv-mat-supplier-badge { font-size: 9px; color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); padding: 1px 6px; border-radius: 5px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-mat-link-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; }
.dv-mat-link-badge.linked { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.22); }
.dv-mat-link-badge.unlinked { background: rgba(245,158,11,0.07); color: #f59e0b; border: 1px solid rgba(245,158,11,0.18); }
.dv-mat-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.dv-mat-card:hover .dv-mat-actions { opacity: 1; }

/* add forms */
.dv-add-form { background: rgba(10,10,10,0.5); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; padding: 12px; margin-bottom: 8px; display: none; }
.dv-add-form.open { display: block; }
.dv-af-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; }
.dv-field { margin-bottom: 7px; }
.dv-field label { font-size: 10px; color: rgba(255,255,255,0.38); display: block; margin-bottom: 3px; }
.dv-field input, .dv-field select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 6px 9px; border-radius: 6px; font-family: inherit; font-size: 12px; outline: none; transition: border-color .12s; }
.dv-field input:focus, .dv-field select:focus { border-color: var(--color-primary); }
.dv-field input::placeholder { color: rgba(255,255,255,0.18); }
.dv-field select option { background: #1c1c1e; }
.dv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dv-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.dv-form-actions { display: flex; gap: 6px; margin-top: 10px; }
.dv-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: all .12s; }
.dv-btn-primary { background: var(--color-primary); color: #fff; }
.dv-btn-primary:hover { filter: brightness(1.12); }
.dv-btn-success { background: #10b981; color: #0a0a0a; }
.dv-btn-success:hover { filter: brightness(1.1); }
.dv-btn-ghost { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.1); }
.dv-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
.dv-btn-sm { padding: 4px 10px; font-size: 11px; }
.dv-add-row-btn { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.32); padding: 6px; border-radius: 7px; font-size: 11px; cursor: pointer; font-family: inherit; transition: all .12s; }
.dv-add-row-btn:hover { color: #fff; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.dv-add-row-btn.green { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.18); color: #10b981; }
.dv-add-row-btn.green:hover { background: rgba(16,185,129,0.12); }
.dv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 40px 20px; text-align: center; }
.dv-empty-icon { font-size: 28px; opacity: .14; }
.dv-empty-text { font-size: 12px; color: rgba(255,255,255,0.28); line-height: 1.6; }
.dv-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: rgba(255,255,255,0.32); font-size: 12px; }

/* hint pill for drag instruction */
.dv-drag-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 3px 10px; margin-left: auto; }

/* clone modal */
.dv-clone-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 600; display: none; align-items: center; justify-content: center; }
.dv-clone-overlay.open { display: flex; }
.dv-clone-box { background: #1c1c1e; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 22px; width: 340px; box-shadow: 0 24px 64px rgba(0,0,0,0.75); }
.dv-clone-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.dv-clone-sub { font-size: 12px; color: rgba(255,255,255,0.38); margin-bottom: 14px; }
.dv-clone-search { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 12px; outline: none; margin-bottom: 9px; font-family: inherit; }
.dv-clone-search:focus { border-color: var(--color-primary); }
.dv-clone-list { max-height: 200px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; margin-bottom: 16px; }
.dv-clone-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 12px; transition: background .1s; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dv-clone-opt:last-child { border-bottom: none; }
.dv-clone-opt:hover { background: rgba(255,255,255,0.04); }
.dv-clone-opt.sel { background: rgba(59,130,246,0.09); color: var(--color-primary); }
.dv-clone-opt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dv-clone-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* ── Selection state + floating action bar ───────────────────── */
/* Selectable cards get a circular check on the left */
.dv-task-card .dv-sel-mark,
.dv-mat-card  .dv-sel-mark {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.02);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all .14s;
    position: relative;
}
.dv-task-card .dv-sel-mark:hover { border-color: rgba(59,130,246,0.6); background: rgba(59,130,246,0.1); }
.dv-mat-card  .dv-sel-mark:hover { border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.1); }
.dv-task-card .dv-sel-mark::after,
.dv-mat-card  .dv-sel-mark::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    opacity: 0; transition: opacity .12s;
}
.dv-task-card .dv-sel-mark::after { background: var(--color-primary); }
.dv-mat-card  .dv-sel-mark::after { background: #10b981; }
.dv-task-card.is-sel .dv-sel-mark { border-color: var(--color-primary); background: rgba(59,130,246,0.18); }
.dv-task-card.is-sel .dv-sel-mark::after { opacity: 1; }
.dv-mat-card.is-sel  .dv-sel-mark { border-color: #10b981; background: rgba(16,185,129,0.18); }
.dv-mat-card.is-sel  .dv-sel-mark::after { opacity: 1; }

.dv-task-card.is-sel { border-color: var(--color-primary) !important; box-shadow: 0 0 0 1px rgba(59,130,246,0.2), 0 4px 16px rgba(59,130,246,0.12); background: rgba(59,130,246,0.04); }
.dv-mat-card.is-sel  { border-color: #10b981 !important; box-shadow: 0 0 0 1px rgba(16,185,129,0.18), 0 4px 14px rgba(16,185,129,0.12); }

/* dim non-selected cards while in select mode */
.dv-shell.has-sel .dv-task-card:not(.is-sel),
.dv-shell.has-sel .dv-mat-card:not(.is-sel) { opacity: .55; }
.dv-shell.has-sel .dv-task-card:not(.is-sel):hover,
.dv-shell.has-sel .dv-mat-card:not(.is-sel):hover { opacity: 1; }

/* hover indicator on whole card during select mode */
.dv-task-card { cursor: pointer; }
.dv-mat-card  { cursor: pointer; }

/* Floating action bar */
.dv-fab {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #1c1c1e, #18181b);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 10px 12px 10px 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
    display: flex; align-items: center; gap: 14px;
    z-index: 500; opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
    max-width: 90vw;
}
.dv-fab.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dv-fab-counts { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.85); }
.dv-fab-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 11px; }
.dv-fab-pill.task { background: rgba(59,130,246,0.18); color: #60a5fa; border: 1px solid rgba(59,130,246,0.28); }
.dv-fab-pill.mat  { background: rgba(16,185,129,0.16); color: #10b981; border: 1px solid rgba(16,185,129,0.26); }
.dv-fab-pill.muted { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); border: 1px dashed rgba(255,255,255,0.12); font-weight: 500; }
.dv-fab-arrow { color: rgba(255,255,255,0.32); font-size: 12px; }
.dv-fab-info { font-size: 11px; color: rgba(255,255,255,0.42); }
.dv-fab-info b { color: #fff; font-weight: 600; }
.dv-fab-actions { display: flex; gap: 6px; }
.dv-fab-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 9px; font-family: inherit;
    font-size: 12px; font-weight: 600; cursor: pointer; border: none;
    transition: all .12s;
}
.dv-fab-btn.primary { background: linear-gradient(135deg, #3b82f6, #10b981); color: #fff; }
.dv-fab-btn.primary:hover { filter: brightness(1.15); transform: translateY(-1px); }
.dv-fab-btn.primary:disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.28); cursor: not-allowed; transform: none; filter: none; }
.dv-fab-btn.ghost { background: transparent; color: rgba(255,255,255,0.5); }
.dv-fab-btn.ghost:hover { color: #fff; background: rgba(255,255,255,0.05); }
@keyframes dv-pulse { 0%,100% { box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 6px rgba(59,130,246,0); } }
.dv-fab.ready { animation: dv-pulse 1.6s ease-in-out infinite; border-color: rgba(59,130,246,0.4); }

/* ── Sort + group bar inside materials panel ─────────────────── */
.dv-mat-controls { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.18); flex-shrink: 0; align-items: center; }
.dv-control { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); font-family: inherit; font-size: 10px; padding: 3px 8px 3px 9px; border-radius: 5px; cursor: pointer; outline: none; transition: all .12s; }
.dv-control:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.dv-control option { background: #1c1c1e; color: #fff; }
.dv-toggle-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); font-size: 10px; padding: 3px 8px; border-radius: 5px; cursor: pointer; transition: all .12s; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.dv-toggle-btn:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.dv-toggle-btn.on { background: rgba(124,92,255,0.14); color: #a78bfa; border-color: rgba(124,92,255,0.32); }
.dv-control-spacer { flex: 1; }
.dv-result-count { font-size: 10px; color: rgba(255,255,255,0.32); }

/* search input clear button */
.dv-search { position: relative; }
.dv-search-clear { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; opacity: 0; transition: opacity .12s; }
.dv-search.has-value .dv-search-clear { opacity: 1; }
.dv-search-clear:hover { color: #ef4444; }

/* highlighted match in name */
.dv-hl { background: rgba(245,158,11,0.22); color: #fbbf24; padding: 0 2px; border-radius: 2px; font-weight: 700; }

/* group header for materials */
.dv-grp-hdr { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 10px 4px 5px; border-bottom: 1px solid rgba(255,255,255,0.04); margin: 0 0 4px; }
.dv-grp-hdr-line { flex: 1; height: 1px; background: rgba(255,255,255,0.05); }
.dv-grp-hdr-count { color: rgba(255,255,255,0.32); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 10px; }

/* "browse all categories" toggle in mat panel */
.dv-browse-all-toggle { font-size: 9px; color: rgba(255,255,255,0.3); margin-left: auto; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: all .12s; user-select: none; }
.dv-browse-all-toggle:hover { color: #fff; background: rgba(255,255,255,0.05); }
.dv-browse-all-toggle.on { color: #a78bfa; background: rgba(124,92,255,0.1); }

/* show category badge on mat card when in browse-all mode */
.dv-mat-cat-tag { font-size: 9px; padding: 1px 6px; border-radius: 5px; color: #fff; font-weight: 600; flex-shrink: 0; }

/* keyboard hint */
.dv-kbd { display: inline-block; padding: 1px 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; font-size: 9px; font-family: monospace; color: rgba(255,255,255,0.6); margin: 0 1px; }

/* ── End Data View ─────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   Data View v2 (Settings → Data, redesigned)
   Layout:
     ┌───────────────────────────────────────────────────────┐
     │  Top: full-width pill rail (top-level categories)     │
     ├──────────────┬──────────────┬────────────────────────┤
     │   TASKS      │   MATERIALS  │   DETAILS (slide-in)   │
     │   (1fr)      │   (1fr)      │   (0fr → 1fr on open)  │
     └──────────────┴──────────────┴────────────────────────┘
────────────────────────────────────────────────────────────── */
.dv2-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px - 72px);
    min-height: 540px;
    margin: 0 -48px -36px;
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: rgba(8,8,10,0.5);
}

/* ── Top tag rail (full width, horizontal scroll) ────────────── */
.dv2-tag-rail {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(0,0,0,0.32);
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.dv2-tag-rail::-webkit-scrollbar { height: 6px; }
.dv2-tag-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }
.dv2-tag-rail::-webkit-scrollbar-track { background: transparent; }

.dv2-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.dv2-pill:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
}
.dv2-pill:active { transform: scale(0.97); }
.dv2-pill .dv2-pill-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
    flex-shrink: 0;
}
.dv2-pill .dv2-pill-count {
    font-size: 10px;
    color: rgba(255,255,255,0.42);
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 2px;
}
.dv2-pill.active {
    background: rgba(59,130,246,0.16);
    color: #fff;
    border-color: rgba(59,130,246,0.55);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.18);
}
.dv2-pill.active .dv2-pill-count {
    background: rgba(59,130,246,0.28);
    color: #cfe0ff;
}
.dv2-pill.dv2-pill-all {
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.dv2-pill.dv2-pill-all.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
}

/* ── Trio (Tasks | Materials | Details) ───────────────────────── */
.dv2-trio {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 0fr;
    overflow: hidden;
    transition: grid-template-columns .35s cubic-bezier(.4,0,.2,1);
    position: relative;
}
/* When details panel is open: 30/30/30 (col widths equal, all three visible). */
.dv2-trio.detail-open {
    grid-template-columns: 1fr 1fr 1fr;
}

.dv2-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: rgba(8,8,10,0.4);
    min-width: 0;
}
.dv2-col:last-child { border-right: none; }

.dv2-col-detail {
    background: rgba(14,14,18,0.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.dv2-trio.detail-open .dv2-col-detail {
    opacity: 1;
    pointer-events: auto;
}

/* Column header */
.dv2-col-head {
    flex-shrink: 0;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dv2-col-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.dv2-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dv2-col-count {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 600;
}
.dv2-col-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    padding: 6px 10px;
    transition: border-color .15s;
}
.dv2-col-search:focus-within { border-color: rgba(255,255,255,0.22); }
.dv2-col-search i { color: rgba(255,255,255,0.28); font-size: 11px; flex-shrink: 0; }
.dv2-col-search input {
    background: none; border: none; color: #fff;
    font-size: 12px; width: 100%; outline: none;
    font-family: inherit;
}
.dv2-col-search input::placeholder { color: rgba(255,255,255,0.24); }

/* Per-column basic filter chips */
.dv2-col-filters {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
}
/* Each row inside dv2-col-filters scrolls horizontally */
.dv2-filter-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dv2-filter-row::-webkit-scrollbar { display: none; }
.dv2-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .03em;
    transition: all .12s;
    white-space: nowrap;
}
.dv2-chip:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.06);
}
.dv2-chip.active {
    background: rgba(59,130,246,0.18);
    color: #fff;
    border-color: rgba(59,130,246,0.55);
}
.dv2-chip.linked.active {
    background: rgba(16,185,129,0.16);
    color: #34d399;
    border-color: rgba(16,185,129,0.5);
}
.dv2-chip.unlinked.active {
    background: rgba(245,158,11,0.14);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.45);
}
.dv2-chip-select {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    outline: none;
    font-family: inherit;
    cursor: pointer;
    max-width: 140px;
}
.dv2-chip-select:focus { border-color: rgba(59,130,246,0.55); }
.dv2-chip-select option { background: #1c1c1e; }

/* Column body */
.dv2-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.dv2-col-body::-webkit-scrollbar { width: 6px; }
.dv2-col-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

.dv2-col-foot {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.28);
}
.dv2-add-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.45);
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .12s;
}
.dv2-add-btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.04);
}
.dv2-add-btn.green {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.25);
    border-style: solid;
    color: #34d399;
}
.dv2-add-btn.green:hover {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.5);
}

/* Empty / loading states */
.dv2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}
.dv2-empty-icon {
    font-size: 36px;
    opacity: .14;
    color: #fff;
}
.dv2-empty-text {
    font-size: 12px;
    color: rgba(255,255,255,0.32);
    line-height: 1.6;
}
.dv2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: rgba(255,255,255,0.35);
    font-size: 12px;
}

/* ── Task card (mirrors main /tasks list look) ───────────────── */
.dv2-task-card {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 9px;
    overflow: hidden;
    transition: all .2s;
    cursor: pointer;
}
.dv2-task-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(34, 34, 38, 0.65);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.dv2-task-card.is-active {
    border-color: rgba(59,130,246,0.55);
    background: rgba(30, 38, 56, 0.6);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.25), 0 6px 18px rgba(59,130,246,0.18);
}
.dv2-task-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
}
.dv2-task-priority {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
    padding: 4px 9px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.dv2-task-name {
    flex: 1;
    min-width: 0;
    color: #f3f4f6;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dv2-task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dv2-task-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}
.dv2-task-pill.subs {
    background: rgba(124,92,255,0.12);
    color: #a78bfa;
    border-color: rgba(124,92,255,0.28);
}
.dv2-task-pill.mats {
    background: rgba(16,185,129,0.12);
    color: #34d399;
    border-color: rgba(16,185,129,0.28);
}
.dv2-task-pill.hrs {
    background: rgba(245,158,11,0.10);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.25);
}
.dv2-task-pill.cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dv2-task-pill.cat .dv2-cat-dot {
    width: 7px; height: 7px; border-radius: 50%;
}
/* ── Link mode overlay ───────────────────────────────────────── */
/* Applied to the whole trio when link mode is active */
.dv2-trio.link-mode-task .dv2-col-tasks,
.dv2-trio.link-mode-mat  .dv2-col-mats {
    /* source column: dimmed + non-interactive */
    opacity: .38;
    pointer-events: none;
    transition: opacity .2s;
}
.dv2-trio.link-mode-task .dv2-col-mats,
.dv2-trio.link-mode-mat  .dv2-col-tasks {
    /* target column: vivid + highlighted border */
    border: 2px solid rgba(99,102,241,.55);
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12), inset 0 0 0 1px rgba(99,102,241,.18);
    transition: border-color .2s, box-shadow .2s;
}
/* Detail panel collapses (hidden) during link mode */
.dv2-trio.link-mode-task .dv2-col-detail,
.dv2-trio.link-mode-mat  .dv2-col-detail {
    display: none;
}
/* Source column "Linking…" banner */
.dv2-link-mode-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.18));
    border-bottom: 1px solid rgba(99,102,241,.35);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #a5b4fc;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dv2-link-mode-banner .cancel-lm {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .12s;
}
.dv2-link-mode-banner .cancel-lm:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
/* Individual card pulses in target column to invite clicking */
.dv2-trio.link-mode-task .dv2-col-mats .dv2-mat-card,
.dv2-trio.link-mode-mat  .dv2-col-tasks .dv2-task-card {
    cursor: crosshair !important;
}
.dv2-trio.link-mode-task .dv2-col-mats .dv2-mat-card:hover,
.dv2-trio.link-mode-mat  .dv2-col-tasks .dv2-task-card:hover {
    border-color: rgba(99,102,241,.7) !important;
    background: rgba(99,102,241,.10) !important;
    transform: scale(1.015);
    transition: all .10s;
}
/* Link button on each card */
.dv2-link-btn {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.25);
    color: #818cf8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-family: inherit;
    transition: all .12s;
    margin-left: auto;
}
.dv2-link-btn:hover {
    background: rgba(99,102,241,.22);
    border-color: rgba(99,102,241,.55);
    color: #a5b4fc;
    transform: scale(1.1);
}
.dv2-link-btn.active {
    background: rgba(99,102,241,.35);
    border-color: #818cf8;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
/* Drag-to-link visual feedback */
.dv2-task-card.dv2-dragging,
.dv2-mat-card.dv2-dragging  {
    opacity: .45;
    transform: scale(.97);
    transition: opacity .1s, transform .1s;
}
.dv2-task-card.dv2-drop-target {
    border-color: rgba(16,185,129,.8) !important;
    background: rgba(16,185,129,.10) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.20);
    transform: scale(1.02);
    transition: all .10s;
}
.dv2-mat-card.dv2-drop-target {
    border-color: rgba(99,102,241,.8) !important;
    background: rgba(99,102,241,.10) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.20);
    transform: scale(1.02);
    transition: all .10s;
}

/* Expand chevron + subtask styling */
.dv2-task-block { margin-bottom: 9px; }
.dv2-task-block .dv2-task-card { margin-bottom: 0; }
.dv2-task-card.is-expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: rgba(255,255,255,0.04);
}
.dv2-task-expand {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    transition: all .12s;
    font-family: inherit;
}
.dv2-task-expand:hover {
    color: #fff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
}
.dv2-task-expand.open {
    background: rgba(59,130,246,0.18);
    color: #60a5fa;
    border-color: rgba(59,130,246,0.45);
}
.dv2-sub-list {
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 6px 6px 6px 26px;
    margin-bottom: 9px;
    margin-top: -1px;
}
.dv2-sub-card {
    background: rgba(28,28,30,0.45);
    border-radius: 10px;
    margin-bottom: 5px !important;
}
.dv2-sub-card:last-child { margin-bottom: 0 !important; }
.dv2-sub-card .dv2-task-row { padding: 9px 12px; }
.dv2-sub-card .dv2-task-name {
    font-size: 12px;
    color: rgba(243,244,246,0.92);
    font-weight: 500;
}
.dv2-sub-priority {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    font-size: 10px !important;
    min-width: 24px !important;
    padding: 3px 6px !important;
}
.dv2-sub-connector {
    color: rgba(255,255,255,0.22);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    margin-right: 2px;
    flex-shrink: 0;
}
.dv2-sub-empty {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    padding: 8px 4px;
    text-align: center;
    font-style: italic;
}
/* Override-marker pen icon next to overridden task names */
.dv2-ov-mark {
    font-size: 9px;
    color: #fbbf24;
    margin-left: 6px;
    opacity: .8;
}
.dv2-task-card.is-overridden { border-left: 3px solid rgba(251,191,36,0.55); }

/* ── Material card (mirrors main /materials row look) ───────── */
.dv2-mat-card {
    background: rgba(28, 28, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all .18s;
    cursor: pointer;
}
.dv2-mat-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(34, 34, 38, 0.6);
    transform: translateY(-1px);
}
.dv2-mat-card.is-active {
    border-color: rgba(16,185,129,0.55);
    background: rgba(20, 38, 32, 0.55);
    box-shadow: 0 0 0 1px rgba(16,185,129,0.22), 0 6px 16px rgba(16,185,129,0.15);
}
.dv2-mat-card.is-linked { border-left: 3px solid rgba(16,185,129,0.55); }
.dv2-mat-card.is-unlinked { border-left: 3px solid rgba(245,158,11,0.4); }
.dv2-mat-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
}
.dv2-mat-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #34d399;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.dv2-mat-thumb.has-img {
    background: #0f0f12;
    border-color: rgba(255,255,255,0.10);
}
.dv2-mat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.dv2-mat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
.dv2-mat-badge.sys {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.42);
    border: 1px solid rgba(255,255,255,0.10);
}
.dv2-mat-badge.user {
    background: rgba(124,92,255,0.10);
    color: #a78bfa;
    border: 1px solid rgba(124,92,255,0.30);
}
.dv2-mat-badge i { font-size: 8px; }
.dv2-mat-card.is-archived {
    opacity: .72;
    border-style: dashed;
}
/* Settings → Materials archive list */
.dv2-archived-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}
.dv2-archived-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dv2-archived-search {
    flex: 1;
    max-width: 380px;
    position: relative;
}
.dv2-archived-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    pointer-events: none;
}
.dv2-archived-search input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s;
}
.dv2-archived-search input:focus {
    border-color: rgba(99,102,241,0.5);
    background: rgba(255,255,255,0.06);
}
.dv2-archived-count {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
}
.dv2-archived-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dv2-archived-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}
.dv2-archived-row .dv2-mat-card {
    margin: 0;
    cursor: default;
    background: rgba(255,255,255,0.04);
}
.dv2-archived-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.dv2-mat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dv2-mat-name {
    color: #f3f4f6;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dv2-mat-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}
.dv2-mat-sub .dv2-mat-unit {
    background: rgba(16,185,129,0.10);
    color: #34d399;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(16,185,129,0.22);
}
.dv2-mat-sub .dv2-mat-cost {
    color: rgba(255,255,255,0.62);
    font-weight: 600;
}
.dv2-mat-sub .dv2-mat-supplier {
    color: rgba(255,255,255,0.48);
    background: rgba(255,255,255,0.04);
    padding: 1px 6px;
    border-radius: 4px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv2-mat-link-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    flex-shrink: 0;
}
.dv2-mat-link-pill.linked {
    background: rgba(16,185,129,0.14);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.3);
}
.dv2-mat-link-pill.unlinked {
    background: rgba(245,158,11,0.10);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.28);
}

/* ── Detail panel (right side) ───────────────────────────────── */
.dv2-detail-head {
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.32);
    display: flex;
    align-items: center;
    gap: 10px;
}
.dv2-detail-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dv2-detail-icon.task { background: rgba(59,130,246,0.18); color: #60a5fa; }
.dv2-detail-icon.mat  { background: rgba(16,185,129,0.18); color: #34d399; }
.dv2-detail-titles { flex: 1; min-width: 0; }
.dv2-detail-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
}
.dv2-detail-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dv2-detail-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
}
/* Material detail: hero image (top-left next to title). */
.dv2-detail-mat-hero {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    background: #0f0f12;
    border: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
    display: block;
}
.dv2-detail-mat-hero.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #34d399;
    font-size: 22px;
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.22);
}
.dv2-detail-toolbar {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
}
.dv2-detail-toolbar .dv2-detail-btn {
    flex: 0 1 auto;
    text-decoration: none;
}
.dv2-detail-readonly-banner {
    flex-shrink: 0;
    padding: 9px 14px;
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    line-height: 1.5;
}
.dv2-detail-readonly-banner i {
    color: rgba(255,255,255,0.42);
    margin-right: 5px;
}
.dv2-detail-readonly-banner b { color: rgba(255,255,255,0.85); font-weight: 600; }
.dv2-field-readonly input,
.dv2-field-readonly select,
.dv2-field-readonly textarea {
    opacity: .55;
    cursor: not-allowed;
    background: rgba(255,255,255,0.025) !important;
}
.dv2-field-readonly input:focus,
.dv2-field-readonly select:focus,
.dv2-field-readonly textarea:focus {
    border-color: rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.025) !important;
}
.dv2-detail-close {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all .12s;
}
.dv2-detail-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}
.dv2-detail-revert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(251,191,36,0.10);
    border: 1px solid rgba(251,191,36,0.35);
    color: #fbbf24;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    transition: all .12s;
}
.dv2-detail-revert:hover {
    background: rgba(251,191,36,0.20);
    border-color: rgba(251,191,36,0.6);
    color: #fde68a;
}
.dv2-field-ov {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    color: #fbbf24;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: .04em;
}
.dv2-field-ov i { font-size: 8px; }
.dv2-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.dv2-detail-body::-webkit-scrollbar { width: 6px; }
.dv2-detail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

.dv2-field {
    margin-bottom: 14px;
}
.dv2-field label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    margin-bottom: 5px;
}
.dv2-field input,
.dv2-field select,
.dv2-field textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    padding: 8px 11px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .12s;
}
.dv2-field input:focus,
.dv2-field select:focus,
.dv2-field textarea:focus {
    border-color: rgba(59,130,246,0.6);
    background: rgba(255,255,255,0.07);
}
.dv2-field textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
.dv2-field select option { background: #1c1c1e; }
.dv2-field-row {
    display: grid;
    gap: 10px;
}
.dv2-field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.dv2-field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.dv2-detail-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dv2-detail-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-bottom: 10px;
}
.dv2-detail-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dv2-detail-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
}
.dv2-detail-list-item .dv2-dli-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dv2-detail-list-item .dv2-dli-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}
.dv2-detail-list-item .dv2-dli-x {
    background: none;
    border: none;
    color: rgba(255,255,255,0.32);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    line-height: 1;
}
.dv2-detail-list-item .dv2-dli-x:hover { color: #ef4444; }
.dv2-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dv2-detail-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.78);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.dv2-detail-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
}
.dv2-detail-btn.danger {
    color: #f87171;
    border-color: rgba(239,68,68,0.28);
    background: rgba(239,68,68,0.06);
}
.dv2-detail-btn.danger:hover {
    color: #fff;
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.5);
}

/* Add-form panels (compact, in-body) */
.dv2-add-form {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    display: none;
}
.dv2-add-form.open { display: block; }
.dv2-add-form-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 9px;
}
.dv2-add-form-actions {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}
.dv2-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .12s;
}
.dv2-btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.dv2-btn.primary:hover { filter: brightness(1.12); }
.dv2-btn.success { background: #10b981; color: #0a0a0a; border-color: #10b981; }
.dv2-btn.success:hover { filter: brightness(1.1); }
.dv2-btn.ghost {
    background: transparent;
    color: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.12);
}
.dv2-btn.ghost:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.22);
}

/* Tag color swatches inside cards (top tag pill row mapping) */
.dv2-card-tag-strip {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.dv2-card-tag-strip .dv2-cts-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
}

/* Responsive: collapse details to overlay on narrow screens */
@media (max-width: 1100px) {
    .dv2-trio.detail-open {
        grid-template-columns: 1fr 1fr 1.4fr;
    }
}
@media (max-width: 900px) {
    .dv2-trio,
    .dv2-trio.detail-open {
        grid-template-columns: 1fr;
    }
    .dv2-trio .dv2-col { display: none; }
    .dv2-trio.show-tasks .dv2-col-tasks,
    .dv2-trio.show-mats  .dv2-col-mats,
    .dv2-trio.detail-open .dv2-col-detail { display: flex; }
}

/* ── End Data View v2 ──────────────────────────────────────────── */

/* ── End Template Manager ──────────────────────────────────────── */

/* Measurements Tab Styles */
.measurements-container { padding: 24px; }
.measurements-header { margin-bottom: 24px; }
.measurements-stats { display: flex; gap: 16px; }
.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.stat-item i { color: rgba(59, 130, 246, 0.8); }
.measurements-list { display: flex; flex-direction: column; gap: 24px; }
.measurement-task-group {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}
.task-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.task-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.task-header i { color: rgba(59, 130, 246, 0.8); }
.measurement-count {
    background: rgba(59, 130, 246, 0.2);
    color: rgba(59, 130, 246, 0.9);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.measurements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.measurement-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}
.measurement-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}
.measurement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.measurement-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.measurement-actions { display: flex; gap: 8px; }
.icon-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}
.measurement-body { display: flex; flex-direction: column; gap: 8px; }
.measurement-value { display: flex; align-items: baseline; gap: 8px; }
.measurement-value .value {
    font-size: 24px;
    font-weight: 700;
    color: rgba(59, 130, 246, 0.9);
}
.measurement-value .unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}
.measurement-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.measurement-meta { display: flex; gap: 12px; margin-top: 8px; }
.measurement-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.measurement-type i { color: rgba(16, 185, 129, 0.8); }
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}
.empty-state h3 {
    margin: 16px 0 8px;
    color: rgba(255, 255, 255, 0.7);
}

/* Side Menu Styles */
.side-menu {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: rgba(28, 28, 30, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.side-menu.active {
    right: 0;
}

.side-menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
}

.side-menu-title {
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.side-menu-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.side-menu-close:hover {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.1);
}

.side-menu-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 120px);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar Styling */
.side-menu-body::-webkit-scrollbar {
    width: 8px;
}

.side-menu-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.side-menu-body::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.6);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.side-menu-body::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.8);
}

/* Image Modal Styles */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-modal.show {
    display: flex;
    opacity: 1;
}

.image-modal-content {
    background: rgba(28, 28, 30, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    width: 600px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.image-modal.show .image-modal-content {
    transform: scale(1);
}

.image-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
}

.image-modal-title {
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.image-modal-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.image-modal-close:hover {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.1);
}

.image-modal-body {
    padding: 24px;
    min-height: 400px;
}

.image-display {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    min-height: 300px;
    width: 100%;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(28, 28, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.nav-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
    transform: translateY(-50%) scale(1.1);
}

.nav-prev {
    left: -50px;
}

.nav-next {
    right: -50px;
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-btn:disabled:hover {
    transform: translateY(-50%);
    background: rgba(28, 28, 30, 0.9);
    color: rgba(139, 92, 246, 0.8);
}

.modal-image-placeholder {
    width: 400px;
    height: 300px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.7);
    flex-shrink: 0;
    overflow: hidden;
}

.modal-image-placeholder i {
    font-size: 64px;
    margin-bottom: 16px;
    color: rgba(139, 92, 246, 0.8);
}

.modal-image-placeholder span {
    font-size: 16px;
    text-align: center;
    font-weight: 500;
}

.image-details {
    margin-top: 12px;
    text-align: center;
}

.image-details p {
    margin: 2px 0;
    font-size: 12px;
    color: rgba(139, 92, 246, 0.6);
    line-height: 1.2;
}

.image-info {
    text-align: center;
}

.image-info p {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.image-navigation {
    margin-bottom: 20px;
}

.image-thumbnails {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.thumbnail-item {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    color: rgba(139, 92, 246, 0.7);
}

.thumbnail-item:hover {
    border-color: rgba(139, 92, 246, 0.5);
    transform: scale(1.05);
}

.thumbnail-item.active {
    border-color: rgba(139, 92, 246, 0.8);
    background: rgba(139, 92, 246, 0.2);
}

.thumbnail-item i {
    font-size: 24px;
}

.thumbnail-item span {
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .expanded-content {
        flex-direction: column;
        gap: 20px;
    }

    .expanded-right {
        width: 100%;
    }

    .profile-image-container {
        width: 240px;
        height: 240px;
    }

    .additional-images {
        flex-wrap: wrap;
        justify-content: center;
    }

    .side-menu {
        width: 100%;
        max-width: none;
    }

    .side-menu-body {
        max-height: calc(100vh - 100px);
        padding: 16px;
    }
}

/* Side Menu Content Styles */
.kit-details-content,
.measurements-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 20px;
}

.kit-header h3,
.measurements-content h4 {
    color: #f3f4f6;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.kit-description {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.kit-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.info-label {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
}

.info-value {
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 600;
}

.status-in-progress {
    color: #fbbf24;
}

.status-planning {
    color: #60a5fa;
}

.status-ordered {
    color: #34d399;
}

.status-delivered {
    color: #10b981;
}

.kit-materials h4 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.materials-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.material-item i {
    color: rgba(139, 92, 246, 0.8);
    font-size: 14px;
}

.material-item span {
    color: #f3f4f6;
    font-size: 13px;
}

.kit-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary,
.btn-secondary {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(59, 130, 246, 0.8));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-secondary {
    background: rgba(139, 92, 246, 0.1);
    color: rgba(139, 92, 246, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.btn-secondary:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

/* Measurements Side Menu Content */
.measurements-overview {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.measurements-overview.compact {
    padding: 12px;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.overview-grid.compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.overview-grid.compact .overview-item {
    gap: 4px;
    padding: 8px;
}

.overview-item i {
    color: rgba(139, 92, 246, 0.8);
    font-size: 20px;
}

.overview-grid.compact .overview-item i {
    font-size: 16px;
}

.overview-label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overview-value {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
}

.overview-grid.compact .overview-value {
    font-size: 14px;
}

.measurements-details,
.room-measurements,
.measurement-notes {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.measurements-list {
    margin-top: 16px;
}

.notes-list {
    margin-top: 16px;
    margin-bottom: 20px;
}

.hero-image-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.main-image-container {
    position: relative;
    width: 200px;
    height: 200px;
}

.main-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.7);
    transition: all 0.3s ease;
}

.main-image-placeholder:hover {
    border-color: rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
}

.main-image-placeholder i {
    font-size: 32px;
    margin-bottom: 8px;
    color: rgba(139, 92, 246, 0.8);
}

.main-image-placeholder span {
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

.image-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.image-action-btn {
    width: 32px;
    height: 32px;
    background: rgba(28, 28, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: rgba(139, 92, 246, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-action-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
    transform: scale(1.05);
}

.hero-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 200px;
}

.hero-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.hero-status-badge.status-not_ordered {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.hero-status-badge.status-on_order {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.hero-status-badge.status-not_delivered {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.hero-status-badge.status-delivered {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.hero-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-amount {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
}

.price-unit {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.hero-quantity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quantity-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.quantity-value {
    font-size: 16px;
    font-weight: 600;
    color: #f3f4f6;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: auto;
}

.hero-action-btn {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    min-width: 140px;
    justify-content: center;
}

.hero-action-btn.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.hero-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.hero-action-btn.secondary {
    background: rgba(139, 92, 246, 0.1);
    color: rgba(139, 92, 246, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.hero-action-btn.secondary:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
    transform: translateY(-1px);
}

/* Material Details Grid */
.material-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.detail-card {
    background: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(139, 92, 246, 0.3);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.card-header i {
    color: rgba(139, 92, 246, 0.8);
    font-size: 16px;
}

.card-header h5 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.card-content {
    padding: 20px;
}

.description-text {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.specifications {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spec-label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value {
    color: #f3f4f6;
    font-size: 13px;
    font-weight: 500;
}

/* Enhanced Measurements Section */
.room-measurements-section,
.material-measurements-section,
.measurement-notes-section {
    margin-bottom: 24px;
}

.section-subtitle {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-subtitle i {
    color: rgba(139, 92, 246, 0.8);
    font-size: 14px;
}

/* Room Measurement Tags */
.room-measurements-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.room-measurement-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    color: rgba(139, 92, 246, 0.9);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.room-measurement-tag:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
}

.room-measurement-tag i {
    font-size: 10px;
}

.tag-label {
    font-weight: 600;
}

.tag-value {
    color: #f3f4f6;
}

.tag-unit {
    color: #9ca3af;
    font-size: 10px;
}

/* Material Measurements Grid */
.measurements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.measurement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.measurement-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(139, 92, 246, 0.2);
}

.measurement-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.measurement-edit-btn,
.measurement-delete-btn {
    width: 24px;
    height: 24px;
    background: rgba(28, 28, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    color: rgba(139, 92, 246, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.measurement-edit-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

.measurement-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.measurement-unit {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
}

/* Measurement Notes */
.measurement-notes-list {
    margin-bottom: 16px;
}

.no-notes {
    color: #9ca3af;
    font-style: italic;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px dashed rgba(139, 92, 246, 0.3);
}

.measurement-note-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.note-date {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
}

.note-actions {
    display: flex;
    gap: 6px;
}

.note-edit-btn,
.note-delete-btn {
    width: 24px;
    height: 24px;
    background: rgba(28, 28, 30, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    color: rgba(139, 92, 246, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.note-edit-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

.note-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.note-content {
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.5;
}

.note-measurements {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.note-measurements strong {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.note-measurement {
    display: inline-block;
    background: rgba(139, 92, 246, 0.1);
    color: rgba(139, 92, 246, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    margin: 2px 4px 2px 0;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Add Note Button */
.add-note-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.add-note-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

/* Measurement Actions */
.measurement-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.link-room-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: rgba(59, 130, 246, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.link-room-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    color: rgba(59, 130, 246, 1);
}

/* Add Measurement Button */
.add-measurement-btn {
    width: 28px;
    height: 28px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: rgba(139, 92, 246, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.add-measurement-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
    transform: scale(1.05);
}

/* Form Sections and Checkboxes */
.form-section {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-section h6 {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h6 i {
    color: rgba(139, 92, 246, 0.8);
}

.no-custom-measurements {
    color: #9ca3af;
    font-style: italic;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px dashed rgba(139, 92, 246, 0.3);
}

.custom-measurement-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
}

.remove-custom-measurement {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
}

.remove-custom-measurement:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.measurement-checkboxes,
.room-measurement-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: rgba(139, 92, 246, 0.8);
}

.checkbox-label {
    color: #d1d5db;
    font-size: 13px;
    cursor: pointer;
}

/* Button Styles */
.btn-danger {
    background: rgba(239, 68, 68, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: white;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 1);
}

.measurement-icon {
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.8);
}

.measurement-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.measurement-label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.measurement-value {
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 600;
}

.edit-measurements-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-measurements-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

/* Supplier Information */
.supplier-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.supplier-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #f3f4f6;
}

.supplier-name i {
    color: rgba(139, 92, 246, 0.8);
}

.supplier-website {
    margin-top: 8px;
}

.supplier-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(139, 92, 246, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.supplier-link:hover {
    color: rgba(139, 92, 246, 1);
}

.supplier-contact {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.contact-btn {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    flex: 1;
    justify-content: center;
}

.contact-btn.primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.contact-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.contact-btn.secondary {
    background: rgba(139, 92, 246, 0.1);
    color: rgba(139, 92, 246, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.contact-btn.secondary:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

/* Management Section */
.management-section {
    margin-bottom: 20px;
}

.management-section:last-child {
    margin-bottom: 0;
}

.management-section h6 {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.order-select,
.kit-select {
    background: rgba(28, 28, 30, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: #f3f4f6;
    padding: 8px 12px;
    font-size: 13px;
    width: 100%;
    margin-bottom: 8px;
}

.order-select:focus,
.kit-select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
}

.create-kit-btn {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.5) 0%, 
        rgba(139, 92, 246, 0.35) 100%);
    border: 0.5px solid rgba(139, 92, 246, 0.5);
    color: white;
    padding: 10px 18px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 4px 16px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.create-kit-btn:hover {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.7) 0%, 
        rgba(139, 92, 246, 0.5) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 24px rgba(139, 92, 246, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.create-kit-btn:active {
    transform: translateY(0) scale(1);
}

/* Image Gallery */
.image-gallery-section {
    margin-bottom: 32px;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.gallery-header h5 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-header h5 i {
    color: rgba(139, 92, 246, 0.8);
}

.add-image-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-image-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    max-width: 600px;
}

.gallery-item {
    aspect-ratio: 1;
}

.add-image-placeholder,
.gallery-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 2px dashed rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-image-placeholder:hover,
.gallery-image-placeholder:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    color: rgba(139, 92, 246, 0.8);
}

.add-image-placeholder i,
.gallery-image-placeholder i {
    font-size: 24px;
    margin-bottom: 4px;
}

.add-image-placeholder span,
.gallery-image-placeholder span {
    font-size: 10px;
    text-align: center;
    font-weight: 500;
}

/* Notes Section */
.notes-section {
    margin-bottom: 32px;
    background: rgba(28, 28, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.notes-header h5 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-header h5 i {
    color: rgba(139, 92, 246, 0.8);
}

.edit-notes-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.9);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.edit-notes-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
}

.notes-content {
    padding: 20px;
}

.notes-text {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Modal Form Styles */
.contact-supplier-form,
.quote-request-form,
.measurements-edit-form,
.notes-edit-form,
.image-upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.upload-area {
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    background: rgba(139, 92, 246, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-area:hover {
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(139, 92, 246, 0.1);
}

.upload-area i {
    font-size: 48px;
    color: rgba(139, 92, 246, 0.6);
    margin-bottom: 16px;
}

.upload-area p {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}

/* Supplier Details Modal */
.supplier-details-modal {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.supplier-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.supplier-logo {
    width: 60px;
    height: 60px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 92, 246, 0.8);
    font-size: 24px;
}

.supplier-info h3 {
    color: #f3f4f6;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.supplier-type {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}

.supplier-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.detail-label {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
}

.detail-value {
    color: #f3f4f6;
    font-size: 13px;
    font-weight: 500;
}

.supplier-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .material-hero {
        flex-direction: column;
        gap: 20px;
    }

    .hero-image-section {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions {
        margin-left: 0;
        flex-direction: row;
        justify-content: center;
    }

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

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

    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

.material-row:hover .expand-hint {
    opacity: 1;
    color: rgba(139, 92, 246, 0.8);
}

.expand-hint i {
    transition: opacity 0.2s ease;
}

.header-expand {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    opacity: 0.7;
}

.material-supplier {
    color: #9ca3af;
    font-size: 11px;
    justify-content: flex-start;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 4px;
}

        .material-price {
    color: #10b981;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    padding-right: 4px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.material-status,
.material-kit,
.material-order,
.material-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.supplier-link {
    color: #60a5fa;
    text-decoration: none;
}

.supplier-link:hover {
    color: #93c5fd;
}

/* Material Action Dropdowns */
.material-action-dropdown {
    position: relative;
    display: inline-block;
}

.material-action-tag {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-width: 60px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.material-action-tag:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Status-specific hover effects */
.material-action-tag.status-not_ordered:hover {
    background: rgba(75, 85, 99, 0.4);
    border-color: rgba(75, 85, 99, 0.6);
    color: #f3f4f6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.material-action-tag.status-on_order:hover {
    background: rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.6);
    color: #93c5fd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.material-action-tag.status-not_delivered:hover {
    background: rgba(245, 158, 11, 0.4);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fcd34d;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.material-action-tag.status-delivered:hover {
    background: rgba(16, 185, 129, 0.4);
    border-color: rgba(16, 185, 129, 0.6);
    color: #6ee7b7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Prevent hover effects when dropdown is open */
.material-action-dropdown.show .material-action-tag:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.material-action-tag.kit-tag {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.material-action-tag.kit-tag:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.4);
    color: #a7f3d0;
}

.material-action-tag.status-tag {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.material-action-tag.status-tag:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.4);
    color: #ddd6fe;
}

        .material-action-tag.status-not_ordered {
    background: rgba(75, 85, 99, 0.2);
    border-color: rgba(75, 85, 99, 0.3);
    color: #d1d5db;
}

.material-action-tag.status-not_ordered:hover {
    background: rgba(75, 85, 99, 0.4);
    border-color: rgba(75, 85, 99, 0.6);
    color: #f3f4f6;
}

.material-action-tag.status-on_order {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.material-action-tag.status-not_delivered {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.material-action-tag.status-delivered {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.material-action-tag.kit-tag.has-kits {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.material-action-tag.kit-tag.has-kits:hover {
    background: rgba(16, 185, 129, 0.4);
    border-color: rgba(16, 185, 129, 0.6);
    color: #34d399;
}

.material-action-tag.actions-tag {
    background: rgba(107, 114, 128, 0.3);
    border-color: rgba(107, 114, 128, 0.5);
    color: #d1d5db;
}

.material-action-tag.actions-tag:hover {
    background: rgba(75, 85, 99, 0.4);
    border-color: rgba(75, 85, 99, 0.6);
    color: #f3f4f6;
}

.material-action-tag.order-tag {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.material-action-tag.order-tag:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.material-action-dropdown-content {
    display: none;
    position: fixed;
    background: #1c1c1e;
    min-width: 160px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 100000;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    max-height: 300px;
    overflow-y: auto;
    opacity: 1;
    visibility: hidden;
    top: -9999px;
    left: -9999px;
}

.material-action-dropdown.show .material-action-dropdown-content {
    display: block !important;
    /* visibility managed via JS to avoid flash */
    opacity: 1 !important;
    background: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(0) !important;
    transition: none !important;
    background-color: #1c1c1e !important;
}

.material-action-dropdown-item {
    color: #ffffff;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    user-select: none;
}

.material-action-dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.material-action-dropdown-item:first-child {
    border-radius: 12px 12px 0 0;
}

.material-action-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #ffffff;
}

.material-action-dropdown-item.current {
    background: rgba(99, 102, 241, 0.3);
    color: #ffffff;
    font-weight: 600;
}

/* Row-specific interaction blocking when dropdown is open */
.material-row.dropdown-open {
    pointer-events: none;
}

.material-row.dropdown-open .material-action-dropdown,
.material-row.dropdown-open .material-action-dropdown * {
    pointer-events: auto;
}

/* Prevent hover effects on rows with open dropdowns */
.material-row.dropdown-open:hover {
    background: transparent !important;
    border-left-color: transparent !important;
    transform: none !important;
}

/* Ensure dropdowns appear instantly without transparency */
.material-action-dropdown-content {
    transition: none !important;
    animation: none !important;
}

/* Ensure dropdown content is hidden when not showing */
.material-action-dropdown:not(.show) .material-action-dropdown-content {
    display: none !important;
    visibility: hidden !important;
}

/* Measurements Task Modal Styles */
.measurements-task-info h3 {
    color: #f3f4f6;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.measurements-task-info .material-description {
    color: #9ca3af;
    font-size: 16px;
    margin-bottom: 24px;
}

.measurements-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.measurement-section h4 {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.measurement-section ul {
    color: #d1d5db;
    font-size: 16px;
    line-height: 1.6;
    padding-left: 20px;
}

.measurement-section li {
    margin-bottom: 4px;
}

/* Responsive adjustments for materials */
@media (max-width: 1200px) {
    .materials-table-header,
    .materials-table-row {
        grid-template-columns: 1.2fr 0.6fr 0.8fr 0.6fr 0.6fr 0.7fr 0.8fr 0.8fr;
    }
}

@media (max-width: 768px) {
    .materials-documents {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .document-card {
        padding: 12px;
        gap: 8px;
    }
    
    .document-icon {
        width: 40px;
        height: 48px;
        font-size: 16px;
    }
    
    .fixed-bottom-actions {
        bottom: 16px;
        padding: 12px 16px;
        gap: 12px;
    }
    
    .bottom-action-btn {
        padding: 10px 16px;
        font-size: 13px;
        min-width: 120px;
    }
    
    .materials-table {
        overflow-x: auto;
    }
    
    .materials-table-header,
    .materials-table-row {
        grid-template-columns: 1.2fr 0.8fr 1fr 0.7fr 0.7fr 0.8fr 0.9fr 0.9fr 0.8fr;
        gap: 8px;
    }
    
    .material-action-tag {
        font-size: 11px;
        padding: 4px 8px;
        min-width: 60px;
    }

    /* Compact Materials Mobile Styles */
    .materials-compact {
        padding: 8px;
        gap: 0;
    }
    
    .materials-header {
        display: none;
    }
    
    .material-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .material-row > div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .material-row > div::before {
        content: attr(data-label);
        font-weight: 600;
        color: #9ca3af;
        font-size: 11px;
        min-width: 80px;
        text-transform: uppercase;
    }

    .material-action-tag {
        font-size: 10px;
        padding: 3px 6px;
        min-width: 50px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Materials Filters Mobile Styles */
    .materials-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
        margin: 16px 0;
    }

    .materials-filters .filter-container {
        width: 100%;
    }

    .materials-filters .filter-select {
        width: 100%;
        min-width: unset;
        padding: 10px 12px;
        font-size: 16px;
    }

    /* Header Materials Tab Buttons Mobile Styles */
    .header-right .materials-tab-buttons {
        flex-direction: row;
        gap: 8px;
        padding: 0;
    }
    
    .header-right .materials-tab-btn {
        padding: 6px 12px;
        font-size: 12px;
        min-width: auto;
    }

    /* Header Action Button Mobile Styles */
    .header-action-btn {
        padding: 8px 16px;
        font-size: 13px;
        min-width: auto;
    }

    /* Header Filters Mobile Styles */
    .header-filters {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .header-filters .filter-select {
        min-width: unset;
        width: 100%;
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 12px;
    }

    /* Bottom Action Bar Mobile Styles */
    .fixed-bottom-actions {
        left: 16px;
        right: 16px;
        padding: 12px 16px;
        flex-direction: column;
        gap: 16px;
    }

    .bottom-actions-left,
    .bottom-actions-right {
        width: 100%;
        justify-content: center;
    }

    .bottom-actions-right {
        gap: 12px;
    }

    .bottom-action-btn {
        padding: 10px 16px;
        font-size: 13px;
        min-width: 120px;
    }
}

/* =====================================================================
   TIMELINE V2 — liquid-glass bubble canvas (scoped under .gantt-shell)
   Drill-hybrid: faint date axis + Matter.js pills with drill-down focus.
   ===================================================================== */
.gantt-shell {
    --g-bg:        #1C1C1E;
    --g-surface:   #000000;
    --g-track:     #141414;
    --g-row-hover: rgba(255,255,255,.025);
    --g-border:    rgba(255,255,255,.08);
    --g-accent:    #C49068;

    --g-status-complete:    #6A9E5A;
    --g-status-progress:    #C49068;
    --g-status-risk:        #C4A044;
    --g-status-blocked:     #C4562A;
    --g-status-planned:     #5A5248;
    --g-status-unconfirmed: #8A7848;

    position: relative;
    width: 100%;
    height: calc(100vh - 0px);
    background: var(--g-bg);
    color: rgba(255,255,255,.9);
    font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0 22px 22px;
}
.gantt-shell, .gantt-shell * { box-sizing: border-box; }
.gantt-shell button { font-family: inherit; }

/* ── Horizontal pan hint overlays (shown via .pan-*-avail on shell) ── */
.gantt-stage::before,
.gantt-stage::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 52px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gantt-stage::before {
    left: 0;
    background: linear-gradient(to right, rgba(28,28,30,.72) 0%, transparent 100%);
}
.gantt-stage::after {
    right: 0;
    background: linear-gradient(to left, rgba(28,28,30,.72) 0%, transparent 100%);
}
.gantt-shell.pan-left-avail  .gantt-stage::before { opacity: 1; }
.gantt-shell.pan-right-avail .gantt-stage::after  { opacity: 1; }

/* ── Toolbar (96px, single row, larger items) ─────────────────────── */
.gantt-toolbar {
    background: #000;
    border-bottom: 0.5px solid var(--g-border);
    padding: 14px 18px;
    height: 96px;                /* matches sidebar-project-area */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Slightly larger nav/zoom clusters to match the heftier theme tags */
.gantt-toolbar .gantt-cluster        { padding: 4px; border-radius: 13px; }
.gantt-toolbar .gantt-arrow-btn      { width: 32px; height: 32px; font-size: 12px; border-radius: 9px; }
.gantt-toolbar .gantt-month-label    { font-size: 13px; padding: 6px 13px; }
.gantt-toolbar .gantt-zoom-btn       { font-size: 13px; padding: 6px 13px; }
.gantt-toolbar .gantt-ai-btn         { font-size: 13px; padding: 7px 16px; border-radius: 11px; }

/* Push controls to the right of the theme tags */
.gantt-toolbar .gantt-cluster:first-of-type { margin-left: auto; }

/* Focus-theme tag pills (Labor / Materials / ALL / Measurements) */
.gantt-theme-tags {
    display: inline-flex;
    gap: 6px;
    background: #111;
    border: 0.5px solid rgba(255,255,255,.10);
    border-radius: 13px;
    padding: 4px;
}
.gantt-theme-tag {
    background: transparent;
    border: 0.5px solid transparent;
    border-radius: 9px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(240,234,216,0.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.gantt-theme-tag:hover { color: rgba(240,234,216,0.85); }
.gantt-theme-tag .gantt-theme-tag-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: 0.85;
}
.gantt-theme-tag.active {
    background: #1A1A1A;
    border-color: rgba(255,255,255,.10);
    color: #C49068;
}
.gantt-theme-tag.theme-labor.active        { color: #6090d0; }
.gantt-theme-tag.theme-materials.active    { color: #c9a96e; }
.gantt-theme-tag.theme-measurements.active { color: #6A9E5A; }
.gantt-theme-tag.theme-all.active          { color: #C49068; }

.gantt-theme-tags-meta { display: none; }

/* ── Filter bar (sits below toolbar, above date axis) ─────────────── */
.gantt-filter-bar {
    background: #0a0a0a;
    border-bottom: 0.5px solid var(--g-border);
    padding: 8px 18px;
    min-height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.gantt-filter-bar-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240,234,216,0.28);
    margin-right: 4px;
}
.gantt-filter {
    position: relative;
    display: inline-flex;
}
.gantt-filter-btn {
    background: #1e1e1a;
    border: 0.5px solid rgba(255,255,255,0.13);
    border-radius: 9px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    color: rgba(240,234,216,0.85);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gantt-filter-btn:hover { background: #25251f; border-color: rgba(255,255,255,0.20); }
.gantt-filter-btn .fa-chevron-down { font-size: 9px; opacity: 0.55; }
.gantt-filter-btn .gantt-filter-count {
    background: rgba(196,144,104,.22);
    color: #C49068;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 2px;
}
.gantt-filter.is-active .gantt-filter-btn {
    border-color: rgba(196,144,104,.50);
    color: #C49068;
}
.gantt-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    background: #1a1a16;
    border: 0.5px solid rgba(255,255,255,0.13);
    border-radius: 10px;
    padding: 5px;
    z-index: 32;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.gantt-filter.is-open .gantt-filter-menu { display: block; }
.gantt-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
    color: rgba(240,234,216,0.78);
    cursor: pointer;
    transition: background 0.12s ease;
}
.gantt-filter-option:hover { background: rgba(255,255,255,0.05); }
.gantt-filter-check {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}
.gantt-filter-option.is-selected .gantt-filter-check {
    background: #C49068;
    border-color: #C49068;
}
.gantt-filter-option.is-selected .gantt-filter-check::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 8px;
    color: #111110;
}
.gantt-filter-option .gantt-filter-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gantt-filter-option .gantt-filter-swatch {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.gantt-filter-clear {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(240,234,216,0.45);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.gantt-filter-clear:hover { color: rgba(240,234,216,0.85); background: rgba(255,255,255,0.05); }
.gantt-filter-clear[disabled] { opacity: 0.35; cursor: default; }
.gantt-filter-clear[disabled]:hover { background: transparent; color: rgba(240,234,216,0.45); }

/* Work-status dot on task pills (small indicator next to status dot) */
.gantt-work-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}

.gantt-cluster {
    background: #111;
    border: 0.5px solid rgba(255,255,255,.1);
    border-radius: 11px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.gantt-arrow-btn {
    width: 27px; height: 27px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0;
    transition: background 0.15s;
}
.gantt-arrow-btn:hover { background: rgba(255,255,255,.07); }
.gantt-month-label {
    background: rgba(196,144,104,.18);
    color: #C49068;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    padding: 4px 11px;
    margin: 0 2px;
}
.gantt-zoom-btn {
    background: transparent;
    color: rgba(255,255,255,.35);
    border: 0.5px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 11px;
    cursor: pointer;
}
.gantt-zoom-btn.active {
    background: #1A1A1A;
    color: #C49068;
    border: 0.5px solid rgba(255,255,255,.1);
}
.gantt-ai-btn {
    margin-left: auto;
    border: 0.5px solid #C49068;
    background: rgba(196,144,104,.15);
    color: #C49068;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    cursor: pointer;
}
.gantt-ai-btn:hover { background: rgba(196,144,104,.25); }
.gantt-grid-btn {
    background: transparent;
    color: rgba(255,255,255,.45);
    border: 0.5px solid rgba(255,255,255,.10);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, color .15s, border-color .15s;
}
.gantt-grid-btn:hover {
    color: rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.18);
}
.gantt-grid-btn.active {
    background: rgba(196,144,104,.12);
    color: #C49068;
    border-color: rgba(196,144,104,.45);
}

/* ── Date axis (faint horizontal guide) ───────────────────────────── */
/* Cells are absolutely positioned at the same column origin as the
   grid lines (no padding), so labels and grid always align. */
.gantt-axis {
    position: relative;
    flex-shrink: 0;
    height: 48px;                /* ~50% of the 96px header above */
    pointer-events: none;
    z-index: 6;
    opacity: 0.85;
    border-bottom: 0.5px solid rgba(255,255,255,.05);
    background: rgba(0,0,0,.45);
    overflow: hidden;
}
.gantt-axis-track {
    position: absolute;
    inset: 0;
    will-change: transform;
}
.gantt-axis-cell {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.62);
    letter-spacing: .02em;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-axis-cell.is-week {
    color: rgba(255,255,255,.82);
}
.gantt-axis-cell.is-month {
    color: #FFFFFF;
    font-weight: 600;
}
.gantt-axis-cell.is-today {
    color: #C49068;
}
/* Grid-on: paint vertical dividers on the axis at the same columns
   the grid lines mark in the stage below. Day weights are very faint
   so the axis still reads label-first; week & month boundaries get
   progressively stronger ticks to match the grid. */
.gantt-axis.has-grid .gantt-axis-cell {
    border-left: 1px solid rgba(255,255,255,.040);
}
.gantt-axis.has-grid .gantt-axis-cell.is-week {
    border-left: 1px solid rgba(255,255,255,.085);
}
.gantt-axis.has-grid .gantt-axis-cell.is-month {
    border-left: 1px solid rgba(255,255,255,.18);
}
.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(196,144,104,.45), rgba(196,144,104,0));
    pointer-events: none;
    z-index: 1;
    opacity: .7;
}

/* ── Subtle timeline grid (toggled by toolbar Grid button) ─────────
   Vertical lines mark days, weeks, and months. Colour weights are
   kept low so the grid never competes with the pills/text. */
.gantt-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    display: none;
}
.gantt-grid.is-on { display: block; }
.gantt-grid-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    will-change: transform;
}
.gantt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
}
.gantt-grid-line.day   { background: rgba(255,255,255,.020); }
.gantt-grid-line.week  { background: rgba(255,255,255,.045); }
.gantt-grid-line.month { background: rgba(255,255,255,.085); }

/* ── Physics stage (V2 bubble canvas) ─────────────────────────────── */
.gantt-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, rgba(196,144,104,.05), transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(92,122,74,.04), transparent 60%),
                var(--g-bg);
}
.gantt-pill-bubble {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: #000;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
    color: rgba(255,255,255,.92);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    will-change: transform, opacity;
    transition: border-color 0.18s ease, background 0.18s ease;
    z-index: 5;
}
.gantt-pill-bubble.kind-cat { font-size: 15px; }
.gantt-pill-bubble.kind-task { font-size: 13px; }

/* Focused cat/task parent: use the same 26px rounded rectangle as
   the tiled children so parent + children share a coherent shape. */
.gantt-pill-bubble.kind-cat.is-focused,
.gantt-pill-bubble.kind-task.is-focused { border-radius: 26px; }

/* ── Task cards: shared layout for tiled AND focused states ────── */
.gantt-pill-bubble.kind-task {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
    border-radius: 26px;
    transition: border-color 0.25s ease;
}
.gantt-pill-bubble.kind-task.is-expanded {
    border-color: rgba(255,255,255,.30);
}
/* Pinned state — brighter border + subtle inner glow so the user
   can see the menu is "stuck" (won't dismiss on cursor leave).
   Click the pill again (or backdrop) to unpin. */
.gantt-pill-bubble.is-pinned {
    border-color: rgba(255,255,255,.55) !important;
    box-shadow: 0 0 0 0.5px rgba(255,255,255,.20) inset, 0 6px 24px rgba(0,0,0,.45);
}
/* Inner content area: always overflow:visible so the absolute-positioned
   detail panel can extend beyond the pill in any view (tiled or focused).
   The card-head clips itself via border-radius on the pill. */
.gantt-pill-bubble.kind-task .gantt-pill-content {
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
}
.gantt-pill-bubble.kind-task .gantt-task-card-head {
    border-radius: inherit;
    overflow: hidden;
}

/* Tint bar — inset from rounded ends; works for any height */
.gantt-pill-bubble.kind-task .gantt-pill-tint {
    position: absolute;
    left: 9px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    height: auto;
    transform: none;
    border-radius: 2px;
    opacity: 0.85;
    pointer-events: none;
}

/* ── Card head — same 52px centered block for both states ──────── */
.gantt-task-card-head {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    box-sizing: border-box;
    position: relative;             /* anchor for inline pills overlay */
}

/* V9.1: Space-awareness — task / sub pills hide their centered text
   the moment the centered band would touch the absolute-positioned
   morph bubble row. Bubbles always take priority over text per spec.
   Classes are toggled dynamically by ganttUpdateMorphMode based on
   the LIVE measured morph-row width (no fixed magic thresholds).
   Applies to focused pills too: even a full-stage focused pill in
   is-pills mode has a labelled morph row that easily reaches 360px,
   which would crowd the centered title at narrow viewports. */
.gantt-pill-bubble.is-text-cramped .gantt-pill-meta {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin: 0;
    transition: opacity 0.15s ease;
}
.gantt-pill-bubble.is-text-clipped .gantt-pill-label,
.gantt-pill-bubble.is-text-clipped .gantt-work-dot {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}
/* Drop the title-row dot too at the tightest tier — only the
   morph circles remain so the pill reads as pure status surface. */
.gantt-pill-bubble.is-text-clipped .gantt-pill-title-row {
    justify-content: flex-start;
    gap: 0;
}
.gantt-pill-bubble.is-text-clipped .gantt-pill-dot {
    opacity: 0;
    visibility: hidden;
}
/* When a focused task pill goes clipped (extremely narrow stage),
   also hide the inline assignee/duration pill cluster so it never
   overlays the morph row. */
.gantt-pill-bubble.kind-task.is-text-clipped.is-focused .gantt-task-inline-pills {
    opacity: 0;
    visibility: hidden;
}

/* ── Inline category pills — only shown on the focused task pill,
     driven by ganttState.focusThemes (Labor / Materials / Measurements / ALL).
     Floats over the right edge of the focused task head — focused pills are
     timeline-wide so there's always room beside the centered title. */
.gantt-task-inline-pills {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
    align-items: center;
    gap: 6px;
    z-index: 6;
    max-width: 50%;                 /* never crowd the centered title */
    overflow: visible;
}
.gantt-pill-bubble.kind-task.is-focused .gantt-task-inline-pills {
    display: inline-flex;
}
/* Inverted (expanded) pill: pills inherit dark-on-light look automatically
   via td-pill rules; nothing extra needed here. */

/* Slightly tighter pill style when used inline on the task head */
.gantt-task-inline-pills .td-pill-btn {
    padding: 4px 9px;
    font-size: 11px;
    border-radius: 7px;
}
.gantt-task-inline-pills .td-pill-btn .td-avatar {
    width: 16px; height: 16px; font-size: 8px;
}
.gantt-task-inline-pills .td-pill-menu {
    top: calc(100% + 5px);
    right: 0;
    left: auto;                     /* anchor menus to right edge so they stay on-screen */
    min-width: 180px;
    z-index: 28;
}
/* Non-status inline pill (Measurements) — neutral chip styling */
.gantt-task-inline-pills .td-pill.measurements .td-pill-btn {
    background: rgba(106,158,90,.10);
    border-color: rgba(106,158,90,.40);
    color: #6A9E5A;
}
.gantt-task-inline-pills .td-pill.measurements .td-pill-dot { background: #6A9E5A; }


/* ── Morph progress buttons (FDMS) ─────────────────────────────────
   LEFT: one read-only automated work-status dot (.gtm-work-dot).
   RIGHT: up to 3 interactive traffic-light circles (.gtm-btn).
   When the host pill goes full-width / focused the row auto-morphs
   from circles into labelled pill chips (.is-pills). */
.gantt-task-morph-btns {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 8;
    pointer-events: auto;
}
/* Visual separator between work dot and the 3 FDMS circles */
.gtm-work-dot + .gtm-btn {
    margin-left: 4px;
}
.gantt-task-morph-btns.is-pills .gtm-work-dot + .gtm-btn {
    margin-left: 0;
}
/* ── Left automated work-status dot (read-only) ── */
.gtm-work-dot {
    --work-color: rgba(148,163,184,.7);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--work-color);
    border: 2px solid rgba(0,0,0,.45);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.16), 0 0 10px 2px var(--work-color);
    flex-shrink: 0;
    cursor: default;
    pointer-events: auto;
    transition:
        width        .30s cubic-bezier(.4,0,.2,1),
        height       .30s cubic-bezier(.4,0,.2,1),
        padding      .30s cubic-bezier(.4,0,.2,1),
        border-radius .30s cubic-bezier(.4,0,.2,1),
        background   .25s,
        box-shadow   .25s;
    order: -1;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.gtm-work-dot::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(255,255,255,.14);
    pointer-events: none;
    transition: opacity .20s;
}
/* Work dot label — hidden in circle mode, revealed in pill mode */
.gtm-work-dot .gtm-label {
    color: rgba(255,255,255,.95);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    display: inline-block;
    transition: opacity .18s ease, max-width .30s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.gantt-task-morph-btns.is-pills .gtm-work-dot {
    width: auto;
    height: 30px;
    border-radius: 15px;
    padding: 0 12px 0 8px;
    background: rgba(0,0,0,.60);
    border: 1.5px solid var(--work-color);
    box-shadow: 0 0 10px 2px var(--work-color);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}
.gantt-task-morph-btns.is-pills .gtm-work-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--work-color);
    box-shadow: 0 0 6px 1px var(--work-color);
    flex-shrink: 0;
}
.gantt-task-morph-btns.is-pills .gtm-work-dot::after { opacity: 0; }
.gantt-task-morph-btns.is-pills .gtm-work-dot .gtm-label {
    opacity: 1;
    max-width: 120px;
}
/* ── Interactive FDMS circles ── */
.gtm-btn {
    --morph-color: #888;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--morph-color);
    border: 2px solid rgba(0,0,0,.5);
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.4);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition:
        width   .30s cubic-bezier(.4,0,.2,1),
        height  .30s cubic-bezier(.4,0,.2,1),
        padding .30s cubic-bezier(.4,0,.2,1),
        border-radius .30s cubic-bezier(.4,0,.2,1),
        background .25s,
        box-shadow .15s,
        transform .15s;
}
.gtm-btn:hover {
    box-shadow: 0 0 0 3px rgba(255,255,255,.45);
    transform: scale(1.15);
}
.gtm-btn .gtm-label {
    color: rgba(255,255,255,.95);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity .18s ease, max-width .30s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
/* Icon inside each circle (visible when collapsed, hidden in pill mode) */
.gtm-icon {
    font-size: 7.5px;
    color: rgba(0,0,0,.65);
    position: absolute;
    pointer-events: none;
    transition: opacity .18s ease;
    line-height: 1;
}
.gantt-task-morph-btns.is-pills .gtm-icon { opacity: 0; }
/* ── Pill mode (circles → labelled chips) ── */
.gantt-task-morph-btns.is-pills .gtm-btn {
    width: auto;
    height: 26px;
    padding: 0 12px 0 8px;
    border-radius: 13px;
    background: rgba(0,0,0,.55);
    border: 1.5px solid var(--morph-color);
    box-shadow: none;
    gap: 7px;
}
.gantt-task-morph-btns.is-pills .gtm-btn::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--morph-color);
    flex-shrink: 0;
}
.gantt-task-morph-btns.is-pills .gtm-btn:hover {
    transform: none;
    background: rgba(0,0,0,.75);
}
.gantt-task-morph-btns.is-pills .gtm-btn .gtm-label {
    opacity: 1;
    max-width: 220px;
    color: var(--morph-color);
}
/* Active state */
.gtm-btn.is-active {
    box-shadow: 0 0 0 3px rgba(255,255,255,.70);
    transform: scale(1.15);
}
.gantt-task-morph-btns.is-pills .gtm-btn.is-active {
    background: var(--morph-color);
    box-shadow: none;
    transform: none;
}
.gantt-task-morph-btns.is-pills .gtm-btn.is-active::before {
    background: rgba(0,0,0,.55);
}
.gantt-task-morph-btns.is-pills .gtm-btn.is-active .gtm-label {
    color: rgba(0,0,0,.85);
}
/* Sub-task: same sizes as task pills */
.gantt-pill-bubble.kind-sub .gantt-task-morph-btns {
    right: 10px;
    gap: 6px;
}
/* Hide when pill is too narrow for even circles */
.gantt-pill-bubble:not(.has-morph-room) .gantt-task-morph-btns { display: none; }

/* ── DOT-CONSUMES-BUBBLE state ─────────────────────────────────────
   When the user hovers a single FDMS dot, that one dot expands to
   fill the entire pill bubble width — visually replacing the pill's
   label/meta with a full-size status selector chip for that section
   (Labor / Materials / Measurements). Other dots collapse out of
   sight. The pill content itself fades to a faint ghost so the
   focused selector reads clearly. */
.gantt-pill-bubble.is-dot-hovered {
    transition: background .18s ease;
}
.gantt-pill-bubble.is-dot-hovered .gantt-pill-content {
    opacity: 0.06;
    pointer-events: none;
    transition: opacity .18s ease;
}
.gantt-pill-bubble.is-dot-hovered .gantt-pill-shine,
.gantt-pill-bubble.is-dot-hovered .gantt-pill-tint {
    opacity: 0.18;
    transition: opacity .18s ease;
}
.gantt-pill-bubble.is-dot-hovered .gantt-task-morph-btns {
    position: absolute;
    inset: 4px;
    right: 4px;
    top: 4px;
    transform: none;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: 0;
    z-index: 10;
    pointer-events: auto;
}
/* Non-hovered dots and the work dot fade out + collapse so the
   hovered chip can take the full width without elbowing them. */
.gantt-pill-bubble.is-dot-hovered .gtm-work-dot,
.gantt-pill-bubble.is-dot-hovered .gtm-btn:not(.is-hovered) {
    opacity: 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity .14s ease,
        width   .22s cubic-bezier(.4,0,.2,1),
        padding .22s cubic-bezier(.4,0,.2,1),
        border-width .14s ease;
}
/* Consumed chip: dark glass + accent outline so traffic-light yellows
   never wash out; label always readable (fixes icon-only display:none). */
.gantt-pill-bubble.is-dot-hovered .gtm-btn.is-hovered {
    position: relative;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    border-radius: 999px;
    padding: 0 14px;
    background: linear-gradient(165deg, rgba(18,18,18,.97), rgba(10,10,10,.99));
    border: 2px solid var(--morph-color, #6090d0);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.55),
        0 4px 22px rgba(0,0,0,.45),
        0 0 24px color-mix(in srgb, var(--morph-color, #6090d0) 28%, transparent),
        inset 0 1px 0 rgba(255,255,255,.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transform: none;
    cursor: pointer;
    overflow: hidden;
    transition:
        width   .22s cubic-bezier(.4,0,.2,1),
        padding .22s cubic-bezier(.4,0,.2,1),
        border-radius .22s cubic-bezier(.4,0,.2,1),
        box-shadow .22s ease,
        background .22s ease;
}
.gantt-pill-bubble.is-dot-hovered .gtm-btn.is-hovered::before {
    display: none;
}
.gantt-pill-bubble.is-dot-hovered .gtm-btn.is-hovered .gtm-icon {
    position: static;
    opacity: 1;
    font-size: 14px;
    color: var(--morph-color, #6090d0);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--morph-color) 40%, transparent));
}
.gantt-pill-bubble.is-dot-hovered .gtm-btn.is-hovered .gtm-label {
    display: inline-block !important;
    opacity: 1 !important;
    max-width: min(300px, 72vw) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(240,234,216,.96) !important;
    font-size: 12.5px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: .015em;
    white-space: nowrap;
    pointer-events: none;
}
.gantt-pill-bubble.kind-sub.is-icon-only.is-dot-hovered .gtm-btn.is-hovered .gtm-label {
    display: inline-block !important;
}
.gantt-pill-bubble.is-dot-hovered .gantt-task-morph-btns.is-pills .gtm-btn.is-hovered .gtm-label {
    color: rgba(240,234,216,.96) !important;
}
/* On narrow sub-task pills (icon-only / tiny), the hovered dot still
   consumes the bubble — the parent overrides above already absolute-
   position the morph row, but reset the centring + shrink so the
   chip can fill width:100%. */
.gantt-pill-bubble.kind-sub.is-icon-only.is-dot-hovered .gantt-task-morph-btns,
.gantt-pill-bubble.kind-sub.is-tiny.is-dot-hovered      .gantt-task-morph-btns {
    position: absolute;
    inset: 3px;
    transform: none;
    justify-content: stretch;
    padding: 0;
}
.gantt-pill-bubble.kind-sub.is-tiny.is-dot-hovered .gtm-btn.is-hovered .gtm-label {
    font-size: 10px;
    letter-spacing: .04em;
}
.gantt-pill-bubble.kind-sub.is-tiny.is-dot-hovered .gtm-btn.is-hovered .gtm-icon {
    font-size: 11px;
}


/* ───────────────── Task detail dropdown (rich card) ──────────────────
   Wide popover anchored under the clicked task pill. Used for BOTH
   tiled (category-focus) and focused-task views. Content lives in
   .task-detail-card; outer .gantt-task-expand-panel handles position
   + reveal animation. */
.gantt-task-expand-panel {
    --td-shift-x: 0px;            /* JS-set horizontal correction to keep panel inside stage */
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(calc(-50% + var(--td-shift-x)));
    width: min(720px, 92vw);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 20;
    box-sizing: border-box;
}
.gantt-pill-bubble.kind-task.is-expanded,
.gantt-pill-bubble.kind-sub.is-expanded { z-index: 22; }
.gantt-pill-bubble.kind-task.is-expanded .gantt-task-expand-panel,
.gantt-pill-bubble.kind-sub.is-expanded  .gantt-task-expand-panel {
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

/* Caret connector — compensates for any panel shift so it always points at the pill */
.task-detail-caret {
    position: absolute;
    top: -8px;
    left: calc(50% - var(--td-shift-x));
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #000;
    border: 1px solid rgba(255,255,255,.13);
    border-right: none;
    border-bottom: none;
    z-index: 1;
}

/* Card shell — pure black to match the task pill bubble background.
   The pill body uses backgroundColor:#000 so the menu reads as one
   continuous surface flowing out of the pill instead of a separate
   panel hovering over it. */
.task-detail-card {
    position: relative;
    background: #000;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    color: rgba(240,234,216,0.85);
    font-family: inherit;
    text-align: left;
    cursor: default;
}

/* ── FDMS view switcher ──────────────────────────────────────────── */
.fdms-view { display: none; flex-direction: column; }
.gantt-task-expand-panel[data-fdms-view="status"]       .fdms-view-status       { display: flex; }
.gantt-task-expand-panel[data-fdms-view="material"]     .fdms-view-material     { display: flex; }
.gantt-task-expand-panel[data-fdms-view="measurements"] .fdms-view-measurements { display: flex; }

/* ── FDMS NAV TABS (top of the panel) ─────────────────────────────
   Three large pill-shape buttons that switch between Labor /
   Materials / Measurements views. Each button mirrors the colour of
   its matching FDMS dot and goes "active" when its view is open. */
.fdms-nav {
    display: flex;
    gap: 8px;
    padding: 12px 12px 10px;
    border-bottom: 0.5px solid rgba(255,255,255,.07);
    background: linear-gradient(to bottom, rgba(255,255,255,.018), transparent);
}
.fdms-nav-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    border: 1.5px solid rgba(255,255,255,.08);
    color: rgba(240,234,216,.55);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .12s ease;
    position: relative;
    overflow: hidden;
}
.fdms-nav-tab i {
    font-size: 12px;
    opacity: 0.85;
    flex-shrink: 0;
}
/* Per-tab colour vars kept for any future use (e.g. dots elsewhere),
   but no longer applied to borders, backgrounds, or glows. */
.fdms-nav-tab[data-fdms-nav="status"]       { --nav-color: #6090d0; }
.fdms-nav-tab[data-fdms-nav="material"]     { --nav-color: #c9a96e; }
.fdms-nav-tab[data-fdms-nav="measurements"] { --nav-color: #6A9E5A; }

/* ── Coloured dot that "drops in" from the pill circles above ───────
   The dot sits left of the icon inside each nav tab. --dot-color
   is the live traffic-light colour injected from JS (matches the
   circle on the pill that was just visible above the panel).

   Animation is SCOPED to .fdms-nav.is-anim so JS can retrigger it
   on every open by toggling that class off → reflow → on. */
@keyframes fdmsDotDrop {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: .72; }
}
/* Resting state — dot is present but invisible until .is-anim fires */
.fdms-nav-tab::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot-color, rgba(255,255,255,.35));
    flex-shrink: 0;
    opacity: .72;
    transform: translateY(0);
}
/* Only animate when .fdms-nav carries .is-anim (JS-toggled on open) */
.fdms-nav.is-anim .fdms-nav-tab::before {
    animation: fdmsDotDrop .30s cubic-bezier(.22,.68,0,1.2) both;
}
/* Stagger: dots land in quick succession without drawing attention */
.fdms-nav.is-anim .fdms-nav-tab:nth-child(1)::before { animation-delay: .04s; }
.fdms-nav.is-anim .fdms-nav-tab:nth-child(2)::before { animation-delay: .10s; }
.fdms-nav.is-anim .fdms-nav-tab:nth-child(3)::before { animation-delay: .16s; }

.fdms-nav-tab:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
    color: rgba(240,234,216,.85);
}
.fdms-nav-tab:hover::before { opacity: 1; }
/* Active: solid grey fill — consistent with other neutral tab groups
   in the app (Materials tab, List/Kanban selector, etc.). No glow. */
.fdms-nav-tab.is-active {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
    color: rgba(240,234,216,.95);
    box-shadow: none;
}
/* Active dot: full brightness + subtle glow in its own colour */
.fdms-nav-tab.is-active::before {
    opacity: 1;
    box-shadow: 0 0 5px 1px var(--dot-color, rgba(255,255,255,.3));
}
.fdms-nav-tab.is-active i { opacity: 1; }
/* Task sentence — readable summary at the top of every FDMS view.
   Replaces the old large "Labor / Materials / Measurements" title block.
   Format: "Name is [verb] on Task — Xd · Day Y" */
.fdms-task-sentence {
    padding: 14px 18px 13px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(240,234,216,.65);
    border-bottom: 0.5px solid rgba(255,255,255,.06);
    letter-spacing: .01em;
}
.fdms-task-sentence strong {
    font-weight: 600;
    color: rgba(240,234,216,.92);
}

/* Shared compact header (title + mini status) shown on all views */
.fdms-shared-header {
    padding: 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-bottom: 0.5px solid rgba(255,255,255,.06);
    padding-bottom: 11px;
}
.fdms-shared-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fdms-title-text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(240,234,216,.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fdms-shared-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(240,234,216,.38);
    padding-left: 28px;
}

/* Confirmation row (status view) */
.fdms-confirm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 0.5px solid rgba(255,255,255,.05);
    border-bottom: 0.5px solid rgba(255,255,255,.05);
}
.fdms-confirm-label {
    font-size: 11px;
    color: rgba(240,234,216,.40);
    display: flex;
    align-items: center;
    gap: 7px;
}
.fdms-confirm-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
}
.fdms-confirm-chip.confirmed {
    background: rgba(106,158,90,.12);
    color: #6A9E5A;
    border: 0.5px solid rgba(106,158,90,.35);
}
.fdms-confirm-chip.unconfirmed {
    background: rgba(196,144,104,.10);
    color: #C49068;
    border: 0.5px solid rgba(196,144,104,.35);
}

/* Materials view extras */
.fdms-mat-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.fdms-mat-info-item {
    font-size: 11px;
    color: rgba(240,234,216,.40);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Measurements view list (larger, cleaner) */
.fdms-measure-list .td-measure-row {
    padding: 8px 0;
    font-size: 12.5px;
    border-bottom: 0.5px solid rgba(255,255,255,.05);
}
.fdms-measure-list .td-measure-row:last-child { border-bottom: none; }
.fdms-measure-list .td-measure-row span:last-child {
    font-size: 13px;
    font-weight: 600;
    color: rgba(240,234,216,.9);
}
.td-measure-empty {
    font-size: 12px;
    color: rgba(240,234,216,.28);
    padding: 14px 0;
    text-align: center;
}

/* Toolbar with 4 dropdown pills */
.td-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 0.5px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}
.td-toolbar-meta {
    margin-left: auto;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240,234,216,0.28);
}

/* Dropdown pill base */
.td-pill {
    position: relative;
    display: inline-flex;
}
.td-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1e1e1a;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 9px 14px;
    color: rgba(240,234,216,0.95);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.td-pill-btn:hover  { background: #28281f; border-color: rgba(255,255,255,0.26); }
.td-pill-btn .fa-chevron-down { font-size: 10px; opacity: 0.5; margin-left: 3px; }
.td-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #111110;
    letter-spacing: 0.02em;
}
.td-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status pill colour variants — applied to .td-pill-btn via class */
.td-pill.status-pending      .td-pill-btn { background: rgba(201,169,110,.10); border-color: rgba(201,169,110,.40); color: #c9a96e; }
.td-pill.status-pending      .td-pill-dot { background: #c9a96e; }
.td-pill.status-in-progress  .td-pill-btn { background: rgba(96,144,208,.10); border-color: rgba(96,144,208,.40); color: #6090d0; }
.td-pill.status-in-progress  .td-pill-dot { background: #6090d0; }
.td-pill.status-complete     .td-pill-btn { background: rgba(106,158,90,.10); border-color: rgba(106,158,90,.40); color: #6A9E5A; }
.td-pill.status-complete     .td-pill-dot { background: #6A9E5A; }
.td-pill.status-at-risk      .td-pill-btn { background: rgba(196,144,104,.10); border-color: rgba(196,144,104,.40); color: #C49068; }
.td-pill.status-at-risk      .td-pill-dot { background: #C49068; }
.td-pill.status-blocked      .td-pill-btn { background: rgba(196,86,68,.10); border-color: rgba(196,86,68,.40); color: #C45644; }
.td-pill.status-blocked      .td-pill-dot { background: #C45644; }
.td-pill.status-on-hold      .td-pill-btn { background: rgba(155,116,170,.10); border-color: rgba(155,116,170,.40); color: #9b74aa; }
.td-pill.status-on-hold      .td-pill-dot { background: #9b74aa; }
.td-pill.status-not-started  .td-pill-btn { background: rgba(160,160,160,.08); border-color: rgba(160,160,160,.30); color: rgba(240,234,216,0.55); }
.td-pill.status-not-started  .td-pill-dot { background: rgba(240,234,216,0.45); }
.td-pill.status-cancelled    .td-pill-btn { background: rgba(80,80,80,.10); border-color: rgba(120,120,120,.30); color: rgba(240,234,216,0.40); }
.td-pill.status-cancelled    .td-pill-dot { background: rgba(240,234,216,0.35); }

/* Material status colour variants */
.td-pill.mat-not-ordered          .td-pill-btn { background: rgba(160,160,160,.08); border-color: rgba(160,160,160,.30); color: rgba(240,234,216,0.55); }
.td-pill.mat-not-ordered          .td-pill-dot { background: rgba(240,234,216,0.45); }
.td-pill.mat-on-order             .td-pill-btn { background: rgba(96,144,208,.10); border-color: rgba(96,144,208,.40); color: #6090d0; }
.td-pill.mat-on-order             .td-pill-dot { background: #6090d0; }
.td-pill.mat-at-risk              .td-pill-btn { background: rgba(196,144,104,.10); border-color: rgba(196,144,104,.40); color: #C49068; }
.td-pill.mat-at-risk              .td-pill-dot { background: #C49068; }
.td-pill.mat-delayed              .td-pill-btn { background: rgba(196,86,68,.10); border-color: rgba(196,86,68,.40); color: #C45644; }
.td-pill.mat-delayed              .td-pill-dot { background: #C45644; }
.td-pill.mat-on-hold              .td-pill-btn { background: rgba(155,116,170,.10); border-color: rgba(155,116,170,.40); color: #9b74aa; }
.td-pill.mat-on-hold              .td-pill-dot { background: #9b74aa; }
.td-pill.mat-partially-delivered  .td-pill-btn { background: rgba(201,169,110,.10); border-color: rgba(201,169,110,.40); color: #c9a96e; }
.td-pill.mat-partially-delivered  .td-pill-dot { background: #c9a96e; }
.td-pill.mat-delivered            .td-pill-btn { background: rgba(106,158,90,.10); border-color: rgba(106,158,90,.40); color: #6A9E5A; }
.td-pill.mat-delivered            .td-pill-dot { background: #6A9E5A; }

/* Open dropdown menu */
.td-pill-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: #1a1a16;
    border: 0.5px solid rgba(255,255,255,0.13);
    border-radius: 10px;
    padding: 5px;
    z-index: 30;
    display: none;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.td-pill.is-open .td-pill-menu { display: block; }
.td-pill-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
    color: rgba(240,234,216,0.78);
    cursor: pointer;
    transition: background 0.12s ease;
}
.td-pill-option:hover { background: rgba(255,255,255,0.05); }
.td-pill-option .td-pill-dot,
.td-pill-option .td-avatar { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.td-pill-option .td-avatar { width: 18px; height: 18px; font-size: 9px; color: #111110; }

/* Inline FDMS quick picker (circle click — not the full detail card) */
.gantt-fdms-quick-menu {
    position: fixed;
    min-width: 210px;
    max-width: min(340px, calc(100vw - 16px));
    max-height: min(70vh, 320px);
    overflow-y: auto;
    background: #000;
    border: 0.5px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 6px;
    z-index: 40000;
    box-shadow: 0 14px 44px rgba(0,0,0,.58);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.gantt-fdms-quick-head {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(240,234,216,.42);
    padding: 6px 10px 8px;
}
.gantt-fdms-quick-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(240,234,216,.9);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s ease;
}
.gantt-fdms-quick-opt:hover { background: rgba(255,255,255,.07); }
.gantt-fdms-quick-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gantt-fdms-quick-static,
.gantt-fdms-quick-empty {
    padding: 8px 11px;
    font-size: 12px;
    color: rgba(240,234,216,.58);
    line-height: 1.4;
}

/* Title area */
.td-title-row {
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid rgba(255,255,255,.06);
}
.td-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(240,234,216,0.92);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.td-title-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(240,234,216,0.45);
    flex-wrap: wrap;
}
.td-title-meta .td-avatar {
    width: 18px; height: 18px; font-size: 9px;
}
.td-title-meta-sep { opacity: 0.4; padding: 0 2px; }

/* Section blocks */
.td-section {
    padding: 14px 16px;
    border-bottom: 0.5px solid rgba(255,255,255,.06);
}
.td-section:last-child { border-bottom: none; }
.td-section-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240,234,216,0.28);
    margin-bottom: 11px;
}

/* Linked materials grid */
.td-materials-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.td-mat-tile {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 8px;
    background: #1a1a16;
    border: 0.5px solid rgba(255,255,255,0.06);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.18s ease;
}
.td-mat-tile:hover { border-color: rgba(255,255,255,0.18); }
.td-mat-tile svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.td-mat-tile-label {
    position: relative;
    z-index: 2;
    font-size: 9.5px;
    color: rgba(240,234,216,0.85);
    text-align: center;
    padding: 3px 4px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0));
    width: 100%;
    box-sizing: border-box;
    line-height: 1.15;
}
.td-mat-add {
    border: 0.75px dashed rgba(255,255,255,0.14);
    background: transparent;
    color: rgba(240,234,216,0.38);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
}
.td-mat-add:hover {
    border-color: rgba(255,255,255,0.30);
    color: rgba(240,234,216,0.65);
}
.td-mat-add i { font-size: 13px; }

/* Measurements list */
.td-measure-list {
    display: flex;
    flex-direction: column;
}
.td-measure-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 0.5px solid rgba(255,255,255,.04);
}
.td-measure-row:last-child { border-bottom: none; }
.td-measure-row > span:first-child {
    font-size: 13px;
    color: rgba(240,234,216,0.78);
}
.td-measure-row > span:last-child {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgba(240,234,216,0.65);
}

/* Action buttons row */
.td-actions-row {
    display: flex;
    gap: 10px;
    padding: 14px 16px 16px;
    border-top: 0.5px solid rgba(255,255,255,.06);
}
.td-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 0.5px solid rgba(255,255,255,0.13);
    background: transparent;
    color: rgba(240,234,216,0.85);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.td-action:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); }
.td-action i { font-size: 13px; }
.td-action-amber {
    border-color: rgba(201,169,110,0.55);
    color: #c9a96e;
}
.td-action-amber:hover {
    background: rgba(201,169,110,0.08);
    border-color: rgba(201,169,110,0.85);
}

/* ── Selected (expanded) task pill: inverted look ──
   Black-on-light to clearly mark it as the current focus, while
   the dropdown card below remains the usual dark card. */
.gantt-pill-bubble.kind-task.is-expanded {
    background: rgba(240,234,216,0.94) !important;
    border-color: rgba(240,234,216,0.94) !important;
}
.gantt-pill-bubble.kind-task.is-expanded .gantt-pill-label {
    color: #111110 !important;
    text-shadow: none !important;
}
.gantt-pill-bubble.kind-task.is-expanded .gantt-pill-meta {
    color: rgba(17,17,16,0.55) !important;
}
.gantt-pill-bubble.kind-task.is-expanded .gantt-pill-tint {
    background: rgba(0,0,0,0.30) !important;
    opacity: 0.6 !important;
}
/* Status dot keeps its colour but gets a subtle outline so it reads on light bg */
.gantt-pill-bubble.kind-task.is-expanded .gantt-pill-dot {
    box-shadow: 0 0 0 1px rgba(17,17,16,0.18);
}
/* Sub-tasks: solid black shell — same treatment as tasks/categories */
.gantt-pill-bubble.kind-sub {
    font-size: 11px;
    padding: 8px 14px;
    background: #000 !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: none;
    color: rgba(255,255,255,.92);
    cursor: default;
    z-index: 4;
}
/* ── Sub-task pills: same height/radius as task pills, slightly dimmer ─ */
.gantt-pill-bubble.kind-sub {
    border-radius: 26px;  /* matches task pill shape exactly */
}
.gantt-pill-bubble.kind-sub .gantt-pill-label {
    font-weight: 600;
    font-size: 12.5px;
    color: rgba(255,255,255,.95);
}
.gantt-pill-bubble.kind-sub .gantt-pill-dot {
    width: 7px;
    height: 7px;
}
.gantt-pill-bubble.kind-sub .gantt-pill-meta {
    font-size: 9px;
    font-weight: 400;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 1;
}
/* Sub-task detail overlay — same task-detail-card, fixed above the pill */
.gantt-sub-detail-overlay {
    pointer-events: auto;
    filter: drop-shadow(0 12px 40px rgba(0,0,0,.85));
}
/* Override the default hidden/collapsed state so the panel renders
   without needing an is-expanded class on a parent bubble. */
.gantt-sub-detail-overlay .gantt-task-expand-panel {
    position: static;
    transform: none;
    width: 100%;
    max-height: 70vh;
    height: auto;
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
    border-radius: 16px;
    pointer-events: auto;
}
/* The caret is flipped via inline style to point downward toward pill */
.gantt-sub-detail-overlay .task-detail-caret { display: block; }

/* ── Sub-task: icon-only mode for narrow pills ─────────────────────
   Triggered via JS (.is-icon-only) when the pill's base width can't
   accommodate label + meta. Hides the text and lets the FDMS status
   circles (.gantt-task-morph-btns) take over the centre of the pill,
   so the user still sees the status of every sub-task, no matter how
   short its duration. */
.gantt-pill-bubble.kind-sub.is-icon-only {
    padding: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.gantt-pill-bubble.kind-sub.is-icon-only .gantt-pill-content {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    display: none; /* defer to morph circles for status display */
}
/* Reposition the FDMS morph status circles so they sit centred inside
   the narrow pill (instead of clipped off the absolute right edge). */
.gantt-pill-bubble.kind-sub.is-icon-only .gantt-task-morph-btns {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    z-index: 9;
    box-sizing: border-box;
    pointer-events: auto;
}
.gantt-pill-bubble.kind-sub.is-icon-only .gtm-btn {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 6px 1px var(--morph-color);
}
.gantt-pill-bubble.kind-sub.is-icon-only .gtm-icon { display: none; }
.gantt-pill-bubble.kind-sub.is-icon-only .gtm-label { display: none; }
/* Hide the read-only work-status dot in the icon-only band — the
   three FDMS circles are the priority and the work dot would crowd
   them out at sub widths. (Restored when pill expands.) */
.gantt-pill-bubble.kind-sub.is-icon-only .gtm-work-dot { display: none; }

/* Tiny tier (<60px wide): all three status circles still survive
   (sub-tasks must always show their FDMS dots, no matter how small).
   They shrink + tighten so the row still fits inside SUB_MIN_W. */
.gantt-pill-bubble.kind-sub.is-tiny .gantt-task-morph-btns {
    gap: 2px;
    padding: 0 2px;
}
.gantt-pill-bubble.kind-sub.is-tiny .gtm-btn {
    width: 9px;
    height: 9px;
    border-width: 1px;
    box-shadow: 0 0 0 0.75px rgba(0,0,0,.55), 0 0 4px 0.5px var(--morph-color);
}
/* Even-narrower tier (~ <44px): drop to 7px so 3 dots + gaps fit
   inside ~25px of internal space (3×7 + 2×2 = 25). */
.gantt-pill-bubble.kind-sub.is-tiny.is-micro .gtm-btn {
    width: 7px;
    height: 7px;
    border-width: 0.75px;
}
.gantt-pill-bubble.kind-sub.is-tiny.is-micro .gantt-task-morph-btns {
    gap: 1.5px;
}

/* When the pill is fully expanded (rich panel open) OR has been
   animated to full-width (is-focused via click), it has plenty of
   room — opt back into the normal label/meta layout even if the
   is-icon-only class is still on the element. */
.gantt-pill-bubble.kind-sub.is-icon-only.is-expanded,
.gantt-pill-bubble.kind-sub.is-icon-only.is-focused {
    overflow: visible;
}
.gantt-pill-bubble.kind-sub.is-icon-only.is-expanded .gantt-pill-content,
.gantt-pill-bubble.kind-sub.is-icon-only.is-focused .gantt-pill-content {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}
.gantt-pill-bubble.kind-sub.is-icon-only.is-expanded .gantt-task-morph-btns,
.gantt-pill-bubble.kind-sub.is-icon-only.is-focused .gantt-task-morph-btns {
    position: absolute;
    top: 50%;
    right: 14px;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    display: inline-flex;
    justify-content: flex-end;
    padding: 0;
}
.gantt-pill-bubble.kind-sub.is-icon-only.is-focused .gtm-icon,
.gantt-pill-bubble.kind-sub.is-icon-only.is-expanded .gtm-icon {
    display: inline-block;
}
.gantt-pill-bubble.kind-sub.is-icon-only.is-focused .gantt-task-morph-btns.is-pills .gtm-label,
.gantt-pill-bubble.kind-sub.is-icon-only.is-expanded .gantt-task-morph-btns.is-pills .gtm-label {
    display: inline-block;
}
/* Tiny → focused: bring the hidden circles back when the pill expands. */
.gantt-pill-bubble.kind-sub.is-tiny.is-focused .gantt-task-morph-btns .gtm-btn,
.gantt-pill-bubble.kind-sub.is-tiny.is-expanded .gantt-task-morph-btns .gtm-btn {
    display: inline-flex;
}
.gantt-pill-bubble.kind-sub.is-tiny.is-focused .gtm-btn,
.gantt-pill-bubble.kind-sub.is-tiny.is-expanded .gtm-btn {
    width: 18px;
    height: 18px;
}

.gantt-pill-bubble.kind-sub .gantt-pill-tint {
    width: 3px;
    left: 10px;
    height: 50%;
    opacity: 0.70;
    background: rgba(255,255,255,.22) !important;
}
.gantt-pill-bubble.kind-cat:not(.is-focused):hover,
.gantt-pill-bubble.kind-task:not(.is-focused):hover {
    border-color: rgba(255,255,255,.24);
}
.gantt-pill-bubble.kind-cat.is-focused:hover,
.gantt-pill-bubble.kind-task.is-focused:hover {
    border-color: rgba(255,255,255,.55);
}
.gantt-pill-bubble.kind-sub:hover {
    border-color: rgba(255,255,255,.22);
}
.gantt-pill-bubble.is-focused {
    background: #000;
    border-color: rgba(255,255,255,.45);
    z-index: 7;
}
.gantt-pill-bubble.is-leaving {
    opacity: 0;
    pointer-events: none;
}
.gantt-pill-shine { display: none; }
.gantt-pill-tint {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    border-radius: 2px;
    opacity: 0.85;
    pointer-events: none;
}
.gantt-pill-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
.gantt-pill-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}
.gantt-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gantt-pill-label {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .005em;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.gantt-pill-meta {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.gantt-pill-sentence {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin: 8px 14px 0;
    max-width: 460px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .32s ease 0.05s, transform .32s ease 0.05s;
    white-space: normal;
}
.gantt-pill-bubble.is-focused .gantt-pill-sentence {
    opacity: 1;
    transform: translateY(0);
}
.gantt-pill-status-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease 0.18s, transform .35s ease 0.18s;
}
.gantt-pill-bubble.is-focused .gantt-pill-status-row {
    opacity: 1;
    transform: translateY(0);
}
.gantt-pill-status-opt {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.78);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gantt-pill-status-opt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.gantt-pill-status-opt:hover {
    background: rgba(255,255,255,.08);
}
.gantt-pill-status-opt.is-active {
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.gantt-pill-back {
    position: fixed;
    bottom: 88px;
    /* 280px sidebar + 16px breathing room */
    left: 296px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.9);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px 11px 14px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    z-index: 9990;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.gantt-pill-back.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.gantt-pill-back i { font-size: 12px; }
.gantt-pill-back:hover { background: rgba(20,20,20,.88); }
/* On mobile / narrow where sidebar collapses */
@media (max-width: 768px) {
    .gantt-pill-back { left: 16px; }
}

/* ── Projects overview button ─────────────────────────────────────── */
.gantt-projects-btn {
    position: fixed;
    bottom: 32px;
    left: 296px;
    background: rgba(0,0,0,.72);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(240,234,216,.75);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px 11px 14px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    z-index: 9989;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, color .15s;
    transform: translateY(4px);
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.gantt-projects-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.gantt-projects-btn:hover { background: rgba(20,20,20,.88); color: rgba(240,234,216,.95); }
.gantt-projects-btn i { font-size: 12px; }
@media (max-width: 768px) {
    .gantt-projects-btn { left: 16px; }
}

/* ── Project pills (projects-overview mode) ───────────────────────── */
.gantt-pill-bubble.kind-project {
    border-radius: 16px;
    cursor: pointer;
}
.gantt-pill-bubble.kind-project:hover .gantt-pill-tint {
    opacity: .18;
}
.gantt-pill-bubble.kind-project.is-current-project {
    border-color: rgba(255,255,255,.26) !important;
}
.gantt-proj-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}
.gantt-proj-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(240,234,216,.92);
    line-height: 1.2;
}
.gantt-proj-badge {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255,255,255,.10);
    border: 0.5px solid rgba(255,255,255,.15);
    border-radius: 4px;
    padding: 2px 6px;
    color: rgba(240,234,216,.55);
    margin-left: auto;
}
.gantt-proj-badge.active-badge {
    background: rgba(201,169,110,.15);
    border-color: rgba(201,169,110,.35);
    color: #c9a96e;
}
.gantt-proj-subtitle {
    font-size: 11px;
    color: rgba(240,234,216,.40);
    margin-bottom: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gantt-proj-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.gantt-proj-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--proj-color, #8B6B4A);
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.gantt-proj-meta {
    font-size: 10.5px;
    color: rgba(240,234,216,.35);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gantt-proj-status-chip {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}

/* (legacy tray styles removed in V2) */

/* Make page-content full bleed when timeline is active */
body.timeline-view .page-content {
    padding: 0;
    margin: 0;
    height: calc(100vh - 96px);
    overflow: hidden;
}
body.timeline-view .header { display: none; }
body.timeline-view .main-content {
    padding: 0;
    margin-left: 64px;
    min-height: 100vh;
}
body.timeline-view .main-content.sidebar-open {
    margin-left: 260px;
}

/* =================================================================
   Hiring CRM panel — drawer that overlays the team tab
   ================================================================= */
.hiring-crm-button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px;
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #f9fafb; font-weight: 600; font-size: 13px;
    border: 1px solid #1f2937; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.hiring-crm-button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17,24,39,.25); }
.hiring-crm-button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.crm-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.55);
    z-index: 9000; display: flex; justify-content: flex-end;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
}
.crm-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.crm-drawer {
    width: min(960px, 100vw); height: 100vh; background: #f8fafc;
    box-shadow: -12px 0 32px rgba(2,6,23,.25);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.crm-drawer-backdrop.open .crm-drawer { transform: translateX(0); }

.crm-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; background: #ffffff; border-bottom: 1px solid #e2e8f0;
}
.crm-drawer-header h2 {
    margin: 0; font-size: 18px; font-weight: 700; color: #0f172a;
    display: flex; align-items: center; gap: 10px;
}
.crm-drawer-header h2 i { color: #4f46e5; }
.crm-drawer-close {
    background: transparent; border: none; cursor: pointer;
    color: #64748b; font-size: 18px; padding: 8px; border-radius: 6px;
}
.crm-drawer-close:hover { background: #f1f5f9; color: #0f172a; }

.crm-drawer-body {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    display: flex; flex-direction: column; gap: 20px;
}

.crm-empty {
    padding: 32px; text-align: center; color: #64748b;
    background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 12px;
}
.crm-loading { color: #64748b; font-size: 14px; padding: 16px 0; }

.crm-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: #64748b; margin: 0 0 8px;
}

.crm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.crm-contractor-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 16px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-contractor-card:hover { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(79,70,229,.08); }
.crm-contractor-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.crm-contractor-card .name { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.crm-contractor-card .role { font-size: 12px; color: #64748b; margin: 2px 0 0; }
.crm-contractor-card .rate { font-size: 12px; color: #0f172a; font-weight: 600; }
.crm-contractor-card .meta { display: flex; gap: 14px; font-size: 12px; color: #475569; }
.crm-contractor-card .meta i { margin-right: 4px; color: #94a3b8; }

.crm-status-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
}
.crm-status-badge.draft    { background: #f1f5f9; color: #475569; }
.crm-status-badge.sent     { background: #dbeafe; color: #1e40af; }
.crm-status-badge.viewed   { background: #fef3c7; color: #92400e; }
.crm-status-badge.accepted { background: #d1fae5; color: #065f46; }
.crm-status-badge.none     { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; }
.crm-status-badge .pulse {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    animation: crmPulse 1.6s ease-in-out infinite;
}
@keyframes crmPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.crm-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: all .12s ease;
}
.crm-btn-primary    { background: #4f46e5; color: #fff; }
.crm-btn-primary:hover { background: #4338ca; }
.crm-btn-secondary  { background: #fff; color: #0f172a; border-color: #cbd5e1; }
.crm-btn-secondary:hover { background: #f8fafc; border-color: #94a3b8; }
.crm-btn-link       { background: transparent; color: #4f46e5; padding: 8px 0; }
.crm-btn-link:hover { color: #3730a3; text-decoration: underline; }
.crm-btn:disabled { opacity: .5; cursor: not-allowed; }

.crm-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.6);
    z-index: 9500; display: flex; align-items: center; justify-content: center;
    padding: 24px; opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.crm-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.crm-modal {
    background: #fff; border-radius: 14px; padding: 24px;
    width: min(440px, 100%);
    transform: scale(.97); transition: transform .15s ease;
    box-shadow: 0 25px 60px rgba(2,6,23,.4);
}
.crm-modal-backdrop.open .crm-modal { transform: scale(1); }
.crm-modal h3 { margin: 0 0 6px; font-size: 17px; color: #0f172a; }
.crm-modal p.subtle { margin: 0 0 18px; color: #64748b; font-size: 13px; }
.crm-modal label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.crm-modal select,
.crm-modal input[type="text"] {
    width: 100%; padding: 10px 12px; font-size: 14px;
    border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
}
.crm-modal select:focus { outline: 2px solid #6366f1; outline-offset: 1px; }
.crm-channel-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.crm-channel-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.crm-channel-row:hover { border-color: #c7d2fe; background: #f8fafc; }
.crm-channel-row input { width: 16px; height: 16px; }
.crm-channel-row .icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center; color: #fff; font-size: 13px;
}
.crm-channel-row .icon.sms   { background: #0ea5e9; }
.crm-channel-row .icon.email { background: #ef4444; }
.crm-channel-row .icon.slack { background: #4a154b; }
.crm-channel-row .label { font-size: 13px; font-weight: 600; color: #0f172a; }
.crm-channel-row .meta  { font-size: 12px; color: #64748b; }
.crm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.crm-toast-host {
    position: fixed; bottom: 24px; right: 24px; z-index: 10000;
    display: flex; flex-direction: column; gap: 10px;
}
.crm-toast {
    background: #0f172a; color: #f8fafc; padding: 12px 16px; border-radius: 10px;
    font-size: 13px; min-width: 240px; max-width: 380px;
    box-shadow: 0 12px 32px rgba(2,6,23,.35);
    animation: crmToastIn .2s ease both;
    display: flex; align-items: center; gap: 12px;
}
.crm-toast.success { background: #064e3b; }
.crm-toast.error   { background: #7f1d1d; }
.crm-toast .toast-action {
    margin-left: auto; color: #93c5fd; text-decoration: underline; font-weight: 600;
}
@keyframes crmToastIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.crm-loading-bar {
    height: 3px; background: linear-gradient(90deg, #4f46e5, #06b6d4, #4f46e5);
    background-size: 200% 100%; animation: crmLoadingBar 1.4s linear infinite;
    border-radius: 2px; margin-top: 10px;
}
@keyframes crmLoadingBar { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =================================================================
   Team tab — Kanban CRM (dark theme; everything edge-to-edge)
   Page bg matches the reference card; cards are pure black with a
   hairline border. Columns are not boxed — a thin vertical divider
   separates them so the open area reads as one canvas.
   ================================================================= */
body.team-view .header {
    padding: 0 32px;
    background: rgba(0,0,0,.92);
}
body.team-view .page-content {
    background: #1a1a1a;
    padding: 24px 32px;
}

/* Header: filter dropdown + board tabs (left), action buttons (right) */
.team-header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.team-header-right { display: flex; align-items: center; gap: 10px; }

/* Sticky filter bar — full-width horizontal strip that lives at the
   top of the team-view page, directly under the header. Mirrors the
   scope-nav filter pattern (one pill per tag, horizontal scroll). */
.crm-filter-bar {
    position: sticky; top: 0; z-index: 30;
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 10px 32px;
    margin: -24px -32px 16px;   /* span edge-to-edge, hug header */
    display: flex; flex-direction: column; gap: 6px;
}
/* Each pill row gets a tiny inline label (TRADES / CATEGORIES) so
   the two rows are distinguishable at a glance. The categories row
   is hidden by default and shown only after a trade is selected. */
.crm-filter-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 30px;
}
.crm-filter-row-label {
    flex-shrink: 0;
    font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.4);
    min-width: 80px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
.crm-filter-row[data-row="categories"] .crm-filter-pill.active {
    background: rgba(251,191,36,0.18); color: #fbbf24;
    border-color: rgba(251,191,36,0.55);
}
/* Slide-down reveal for the second row */
@keyframes crmCategoryRowIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.crm-filter-row[data-row="categories"] {
    animation: crmCategoryRowIn .18s ease-out;
}
.crm-filter-pills {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    padding: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.crm-filter-pills::-webkit-scrollbar { display: none; }
.crm-filter-pill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    font: 600 12.5px/1 inherit;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, transform .12s ease;
}
.crm-filter-pill:hover {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-primary);
    border-color: rgba(255,255,255,0.18);
}
.crm-filter-pill:active { transform: scale(0.96); }
.crm-filter-pill.active {
    background: #ffffff; color: #000000; border-color: #ffffff;
}
.crm-filter-pill.is-clear {
    border-style: dashed;
    background: transparent;
}
.crm-filter-pill.is-clear.active {
    background: rgba(255,255,255,0.92); border-style: solid;
}

body.team-view .crm-board-tabs {
    display: inline-flex; padding: 4px; gap: 4px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);
    border-radius: 10px;
}
body.team-view .crm-tab {
    padding: 7px 14px; border: none; background: transparent;
    font-size: 13px; font-weight: 600; color: var(--color-text-secondary);
    cursor: pointer; border-radius: 7px;
    transition: background .15s ease, color .15s ease;
}
body.team-view .crm-tab:hover { color: var(--color-text-primary); }
body.team-view .crm-tab.active {
    background: rgba(255,255,255,0.08); color: var(--color-text-primary);
}

body.team-view .crm-board-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--color-border); background: rgba(255,255,255,0.04);
    color: var(--color-text-primary); cursor: pointer; transition: all .12s ease;
}
body.team-view .crm-board-btn:hover { background: rgba(255,255,255,0.09); }
body.team-view .crm-board-btn.primary {
    background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.4);
    color: #fbbf24;
}
body.team-view .crm-board-btn.primary:hover { background: rgba(251,191,36,0.2); }
body.team-view .crm-actions-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #fbbf24; color: #1f2937; font-size: 11px; font-weight: 800;
}

/* Kanban canvas — fills the page area, columns are separated by a
   single hairline divider rather than being boxed. */
.crm-kanban-page { width: 100%; min-height: calc(100vh - 96px - 48px); }
.crm-kanban {
    display: grid; grid-auto-flow: column; gap: 0;
    grid-auto-columns: minmax(240px, 1fr);
    overflow-x: auto;
    min-height: calc(100vh - 96px - 48px);
}
.crm-col {
    display: flex; flex-direction: column;
    padding: 14px 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.crm-col:last-child { border-right: none; }

.crm-col-head {
    display: flex; align-items: center; gap: 8px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}
.crm-col-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--col-accent, #94a3b8);
}
.crm-col-label {
    font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--color-text-primary); flex: 1;
}
.crm-col-count {
    background: rgba(255,255,255,0.06); border: 1px solid var(--color-border);
    border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700;
    color: var(--color-text-secondary);
}
.crm-col-body {
    flex: 1; display: flex; flex-direction: column; gap: 10px;
    min-height: 120px;
    transition: background .15s ease, outline-color .15s ease;
    border-radius: 8px; outline: 2px dashed transparent; outline-offset: -4px;
}
.crm-col-body.drag-over {
    background: rgba(99,102,241,0.08);
    outline-color: rgba(99,102,241,0.5);
}
.crm-col-empty {
    display: grid; place-items: center; min-height: 80px;
    color: rgba(148,163,184,0.5); font-size: 12px; font-style: italic;
}

.crm-loading { color: var(--color-text-secondary); font-size: 14px; padding: 16px 0; }

/* Cards — pure black, hairline border, accent stripe on the left */
body.team-view .crm-card {
    background: #000000; border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--col-accent, #475569);
    border-radius: 10px; padding: 12px;
    cursor: grab; user-select: none;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
}
body.team-view .crm-card:hover {
    background: #050505; border-color: rgba(255,255,255,0.18);
    box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
body.team-view .crm-card.dragging { opacity: .35; cursor: grabbing; transform: scale(.98); }
body.team-view .crm-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

body.team-view .crm-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
body.team-view .crm-card-title {
    font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
body.team-view .crm-card-tag {
    background: rgba(255,255,255,0.06); color: var(--color-text-secondary);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
body.team-view .crm-card-meta {
    display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--color-text-secondary);
}
body.team-view .crm-card-meta i,
body.team-view .crm-card-foot i { color: rgba(148,163,184,0.6); margin-right: 4px; }
body.team-view .crm-card-foot {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    color: var(--color-text-secondary); flex-wrap: wrap;
}
body.team-view .crm-card-pill {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .4px;
}
body.team-view .crm-card-pill.warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
body.team-view .crm-card-pill.info { background: rgba(59,130,246,0.15); color: #60a5fa; }
body.team-view .crm-card-actions {
    display: flex; gap: 6px; margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px;
}
body.team-view .crm-mini-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; font-size: 11.5px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 7px;
    background: rgba(255,255,255,0.04); color: var(--color-text-secondary);
    cursor: pointer; transition: all .12s ease;
}
body.team-view .crm-mini-btn:hover {
    background: rgba(255,255,255,0.08); color: var(--color-text-primary);
    border-color: rgba(255,255,255,0.18);
}

/* Actions panel — dark variant */
body.team-view .crm-actions-panel {
    position: fixed; top: 0; right: 0; height: 100vh; z-index: 9100;
    width: min(420px, 100vw);
    background: #0a0a0a; border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -12px 0 32px rgba(0,0,0,.5);
    transform: translateX(100%); transition: transform .22s ease;
    display: flex; flex-direction: column;
}
body.team-view .crm-actions-panel.open { transform: translateX(0); }
body.team-view .crm-actions-panel header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.team-view .crm-actions-panel h3 { margin: 0; font-size: 15px; color: var(--color-text-primary); }
body.team-view .crm-actions-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--color-text-secondary); font-size: 16px; padding: 6px 8px; border-radius: 6px;
}
body.team-view .crm-actions-close:hover { background: rgba(255,255,255,0.06); color: var(--color-text-primary); }
body.team-view .crm-actions-list {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 8px;
}
body.team-view .crm-actions-section-title {
    margin: 8px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
body.team-view .crm-actions-section-title.muted { color: rgba(148,163,184,0.5); }
body.team-view .crm-action-row {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    background: #000000;
}
body.team-view .crm-action-row.done { background: rgba(255,255,255,0.02); opacity: .7; }
body.team-view .crm-action-kind {
    font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .4px;
    background: rgba(99,102,241,0.15); color: #a5b4fc; white-space: nowrap;
}
body.team-view .crm-action-kind.kind-request_availability { background: rgba(245,158,11,0.15); color: #fbbf24; }
body.team-view .crm-action-kind.kind-schedule             { background: rgba(59,130,246,0.15); color: #60a5fa; }
body.team-view .crm-action-kind.kind-request_estimate     { background: rgba(139,92,246,0.15); color: #c4b5fd; }
body.team-view .crm-action-kind.kind-send_confirmation    { background: rgba(16,185,129,0.15); color: #34d399; }
body.team-view .crm-action-meta { flex: 1; min-width: 0; }
body.team-view .crm-action-title { margin: 0; font-size: 13px; color: var(--color-text-primary); font-weight: 600; }
body.team-view .crm-action-sub   { margin: 2px 0 0; font-size: 11.5px; color: var(--color-text-secondary); }

/* Modal + toast — dark variants when team view is active */
body.team-view .crm-modal { background: #0a0a0a; color: var(--color-text-primary); }
body.team-view .crm-modal h3 { color: var(--color-text-primary); }
body.team-view .crm-modal p.subtle { color: var(--color-text-secondary); }
body.team-view .crm-modal label { color: var(--color-text-secondary); }
body.team-view .crm-modal select,
body.team-view .crm-modal input[type="text"] {
    background: #000; color: var(--color-text-primary);
    border: 1px solid rgba(255,255,255,0.1);
}
body.team-view .crm-btn-secondary { background: rgba(255,255,255,0.04); color: var(--color-text-primary); border-color: rgba(255,255,255,0.1); }
body.team-view .crm-btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ---- Section switcher buttons (active state) ---- */
body.team-view .crm-board-btn.active {
    background: rgba(99,102,241,0.16); border-color: rgba(99,102,241,0.5);
    color: #a5b4fc;
}
body.team-view .crm-board-btn.primary.active {
    background: rgba(251,191,36,0.22); border-color: rgba(251,191,36,0.6); color: #fde68a;
}
body.team-view .crm-board-chrome {
    display: flex; align-items: center; gap: 16px;
    flex: 1 1 auto; min-width: 0;
}

/* Empty/loading states inherit the dark canvas — no white box */
body.team-view .crm-empty {
    background: transparent; border: 1px dashed rgba(255,255,255,0.08);
    color: var(--color-text-secondary); border-radius: 10px;
    padding: 22px; text-align: center; font-size: 13px;
}
body.team-view .crm-empty strong { color: var(--color-text-primary); }
body.team-view .crm-loading { color: var(--color-text-secondary); }

/* ---- Section pane (shared shell for sync / actions / contact / scrape) ---- */
/* Section pane: full width, no card chrome — sections sit directly on
   the dark page so the open space is the canvas, not a box-in-a-box. */
.crm-section-pane {
    display: flex; flex-direction: column; gap: 22px;
    width: 100%; padding: 4px 4px 24px;
}
.crm-section-hero {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.crm-section-hero h1 {
    margin: 0; font-size: 22px; font-weight: 800; color: var(--color-text-primary);
    letter-spacing: -0.02em;
}
.crm-section-hero p {
    margin: 6px 0 0; color: var(--color-text-secondary); font-size: 13px;
    max-width: 720px; line-height: 1.55;
}
.crm-section-hero p code {
    background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px;
    font-size: 12px; color: #c7d2fe;
}
.crm-section-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    background: #fbbf24; color: #1f2937; border: none; cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.crm-section-cta:hover:not(:disabled) { background: #f59e0b; transform: translateY(-1px); }
.crm-section-cta:disabled { opacity: .5; cursor: not-allowed; }

/* Stats: numbers float on the page. Just a thin baseline keyline
   between each stat using border-right; no chrome around them. */
.crm-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.crm-stat {
    padding: 14px 20px 16px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.crm-stat:last-child { border-right: none; }
.crm-stat-value { font-size: 26px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.02em; }
.crm-stat-label { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary); }

/* Panels: header-only treatment — title + thin underline, content
   below sits directly on the page background. */
.crm-panel {
    display: flex; flex-direction: column; gap: 14px;
}
.crm-panel h3 {
    margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--color-text-secondary);
    padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.crm-panel-sub {
    margin: 0 0 10px; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5;
}
.crm-panel-sub code, .crm-contact-tag-help code {
    background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px;
    font-size: 11.5px; color: #c7d2fe;
}

.crm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05); border-radius: 10px;
}
.crm-list-row.done { opacity: .65; }
.crm-list-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-list-main { flex: 1; min-width: 0; }
.crm-list-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.crm-list-sub   { margin: 2px 0 0; font-size: 11.5px; color: var(--color-text-secondary); }
.crm-pill {
    font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .4px;
    background: rgba(255,255,255,0.06); color: var(--color-text-secondary);
}
.crm-pill.subtle { background: rgba(255,255,255,0.04); color: rgba(148,163,184,0.7); }

/* ---- Actions section: segmented filter + grouped lists ---- */
.crm-segmented {
    display: inline-flex; padding: 4px; gap: 4px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--color-border); border-radius: 10px;
}
.crm-segmented button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; font-size: 12.5px; font-weight: 600;
    border: none; background: transparent; color: var(--color-text-secondary);
    cursor: pointer; border-radius: 7px;
}
.crm-segmented button:hover { color: var(--color-text-primary); }
.crm-segmented button.active { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
.crm-segmented button span {
    background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700; color: var(--color-text-secondary);
}
/* Action groups: just a section heading + list. No card chrome. */
.crm-actions-group {
    display: flex; flex-direction: column; gap: 10px; padding: 4px 0 18px;
}
.crm-actions-group + .crm-actions-group { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px; }
.crm-actions-group > header { display: flex; align-items: center; gap: 10px; }

/* ---- Contact section: open two-column layout, divider not boxes ---- */
.crm-contact-layout {
    display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 32px;
    min-height: 460px;
}
@media (max-width: 920px) { .crm-contact-layout { grid-template-columns: 1fr; gap: 24px; } }
.crm-contact-recipients {
    display: flex; flex-direction: column; min-height: 420px; max-height: 70vh;
    border-right: 1px solid rgba(255,255,255,0.06); padding-right: 24px;
}
@media (max-width: 920px) {
    .crm-contact-recipients {
        border-right: none; padding-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 16px;
    }
}
.crm-contact-recipients-head {
    display: flex; align-items: center; gap: 8px; padding: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.crm-contact-recipients-head strong { font-size: 12px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; flex: 1; color: var(--color-text-secondary); }
.crm-contact-recipients-body { flex: 1; overflow-y: auto; padding: 8px 0 0; }
.crm-recipient-row {
    display: flex; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: background .12s ease, border-color .12s ease;
}
.crm-recipient-row:hover { background: rgba(255,255,255,0.04); }
.crm-recipient-row.on { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); }
.crm-recipient-row input { margin-top: 3px; }
.crm-recipient-name { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.crm-recipient-meta { margin: 2px 0 0; font-size: 11.5px; color: var(--color-text-secondary); }

.crm-contact-composer {
    display: flex; flex-direction: column; gap: 12px;
    padding: 0;
}
.crm-contact-composer label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.crm-contact-composer input[type="text"],
.crm-contact-composer textarea,
.crm-form-grid input,
.crm-form-row input,
#scrapeCsv {
    width: 100%; padding: 11px 14px; font-size: 13.5px;
    background: rgba(255,255,255,0.03); color: var(--color-text-primary);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; outline: none;
    font-family: inherit;
    transition: border-color .12s ease, background .12s ease;
}
.crm-contact-composer input:focus,
.crm-contact-composer textarea:focus,
.crm-form-grid input:focus,
.crm-form-row input:focus,
#scrapeCsv:focus { border-color: rgba(99,102,241,0.6); }
.crm-contact-composer textarea, #scrapeCsv {
    resize: vertical; line-height: 1.5;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.crm-channel-row-group { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-channel-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--color-text-secondary); cursor: pointer; transition: all .12s ease;
}
.crm-channel-chip input { display: none; }
.crm-channel-chip:hover { color: var(--color-text-primary); }
.crm-channel-chip.on {
    background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.5); color: #a5b4fc;
}
.crm-contact-tag-help {
    font-size: 11.5px; color: var(--color-text-secondary);
}

/* ---- Scrape section ---- */
.crm-scrape-tabs {
    display: inline-flex; padding: 4px; gap: 4px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--color-border); border-radius: 10px;
    align-self: flex-start;
}
.crm-scrape-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; font-size: 12.5px; font-weight: 600;
    border: none; background: transparent; color: var(--color-text-secondary);
    cursor: pointer; border-radius: 7px;
}
.crm-scrape-tab:hover { color: var(--color-text-primary); }
.crm-scrape-tab.active { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }

.crm-form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.crm-form-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.crm-form-row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.crm-form-actions {
    display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap;
}
#scrapeCsvPreviewArea { margin-top: 14px; }

/* ---- CRM Contacts Board ---- */
.crm-contacts-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
}
.crm-contacts-search-wrap {
    position: relative; flex: 1; min-width: 220px; max-width: 380px;
}
.crm-contacts-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-secondary); font-size: 13px; pointer-events: none;
}
.crm-contacts-search {
    width: 100%; padding: 9px 14px 9px 36px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);
    border-radius: 8px; color: var(--color-text-primary); font-size: 13px; outline: none;
    box-sizing: border-box; transition: border-color .15s;
}
.crm-contacts-search:focus { border-color: rgba(99,102,241,0.5); }
.crm-contacts-search::placeholder { color: var(--color-text-secondary); }
.crm-contacts-filter {
    padding: 9px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);
    border-radius: 8px; color: var(--color-text-primary); font-size: 13px; outline: none;
    cursor: pointer; transition: border-color .15s;
}
.crm-contacts-filter:focus { border-color: rgba(99,102,241,0.5); }

.crm-contacts-table { width: 100%; display: flex; flex-direction: column; gap: 0; }
.crm-contacts-thead, .crm-contacts-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 2fr 1.3fr 1.1fr 0.9fr 60px;
    gap: 10px; align-items: center;
    padding: 10px 14px;
}
.crm-contacts-thead {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px 10px 0 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.crm-contacts-row {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05); border-top: none;
    font-size: 13px; color: var(--color-text-primary);
    transition: background .12s;
}
.crm-contacts-row:last-child { border-radius: 0 0 10px 10px; }
.crm-contacts-row:hover { background: rgba(99,102,241,0.06); }

.crm-ct-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ct-name { display: flex; align-items: center; gap: 10px; }
.crm-ct-avatar {
    width: 30px; height: 30px; min-width: 30px;
    background: rgba(99,102,241,0.12); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #818cf8; font-size: 12px;
}
.crm-ct-name-text { font-weight: 600; font-size: 13px; }
.crm-ct-company { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.crm-ct-link { color: #818cf8; text-decoration: none; }
.crm-ct-link:hover { text-decoration: underline; }
.crm-ct-muted { color: var(--color-text-secondary); }
.crm-ct-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 8px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.crm-ct-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ── Selectable contacts row ──────────────────────────────────────
   Adds a leading checkbox column when the contacts board is in
   selection mode. We reuse the same grid as the default layout but
   bolt a 36px column on the front via the `.is-selectable` modifier
   on the parent table. */
.crm-contacts-table.is-selectable .crm-contacts-thead,
.crm-contacts-table.is-selectable .crm-contacts-row {
    grid-template-columns: 32px 2fr 1.2fr 2fr 1.3fr 1.1fr 0.9fr 60px;
}
.crm-ct-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.crm-ct-check:hover { border-color: rgba(255,255,255,0.55); }
.crm-ct-check:active { transform: scale(0.9); }
.crm-ct-check.is-checked {
    background: #ffffff; border-color: #ffffff;
}
.crm-ct-check.is-checked::after {
    content: '\f00c'; /* fa-check */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 10px; color: #000;
}
.crm-contacts-row.is-selected {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}
.crm-contacts-row.is-selected:hover { background: rgba(255,255,255,0.12); }

/* ── Team bottom action bar ──────────────────────────────────────
   Mirrors the scope bottom bar. Hidden by default; .team-view shows
   it when the Contacts subview is active. The Finalize button only
   appears when contractors are selected, signaled by .has-selection. */
.team-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    z-index: 9970;
    background: rgba(20,20,22,0.92);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0 32px;
    align-items: center; gap: 12px;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    transition: left 0.35s cubic-bezier(.4,0,.2,1);
}
body.team-view.team-bottom-active .team-bottom-bar { display: flex; }
body.team-view.team-bottom-active .main-content { padding-bottom: 64px; }
/* In assign-mode the assign view supplies its own footer CTA, so the
   global team bottom bar steps out of the way to keep the chrome
   focused on a single primary action. */
body.team-view.assign-mode .team-bottom-bar { display: none; }
body.team-view.assign-mode .main-content { padding-bottom: 0; }

/* ── Tasks ▸ Share bar ──────────────────────────────────────────
   A tall (180–220px) bottom panel that mirrors the team-bottom-bar
   visual language. It hosts a segmented Team/Favorites/Contacts
   switcher, category filter chips, the contractor/team list, and
   the Auto Assign / Manual Assign CTAs. Hidden by default; the
   [hidden] attribute does the toggling so we don't need a JS
   class flip. */
.share-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9971;
    display: flex; flex-direction: column;
    max-height: 60vh;
    background: rgba(18,18,20,0.97);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -10px 36px rgba(0,0,0,0.5);
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
    color: #fff;
}
.share-bar[hidden] { display: none; }
.share-bar.is-entering { transform: translateY(100%); }
.share-bar-head {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.share-bar-title {
    display: inline-flex; align-items: center; gap: 9px;
    font: 700 14px -apple-system, system-ui, sans-serif;
    color: #fff;
    letter-spacing: -0.01em;
    min-width: 200px;
}
.share-bar-title i { color: rgba(255,255,255,0.55); }
.share-segmented {
    position: relative;
    display: inline-flex; gap: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px; padding: 3px;
    margin-left: auto;
}
.share-seg-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 18px;
    border: none; background: transparent;
    color: rgba(255,255,255,0.55);
    font: 600 12.5px -apple-system, system-ui, sans-serif;
    border-radius: 999px;
    cursor: pointer;
    z-index: 1;
    transition: color .2s;
}
.share-seg-btn:hover { color: rgba(255,255,255,0.85); }
.share-seg-btn.active { color: #1d1d1f; }
/* Glider — the white pill that slides under the active button.
   Positioned absolutely; --glider-x and --glider-w are set by JS. */
.share-seg-glider {
    position: absolute;
    top: 3px; bottom: 3px;
    left: 0;
    border-radius: 999px;
    background: #fff;
    transform: translateX(var(--glider-x, 0));
    width: var(--glider-w, 0);
    transition: transform .26s cubic-bezier(.32,.72,0,1), width .26s;
    pointer-events: none;
}
.share-bar-close {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.share-bar-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.share-bar-cats {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow-x: auto;
    scrollbar-width: none;
}
.share-bar-cats::-webkit-scrollbar { display: none; }
.share-cat-chip {
    flex: 0 0 auto;
    font: 600 11px inherit; letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.share-cat-chip:hover { color: #fff; border-color: rgba(255,255,255,0.22); }
.share-cat-chip.is-active {
    background: #fbbf24; border-color: #fbbf24; color: #1f2937;
}

.share-bar-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 12px 24px 8px;
}
.share-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.share-list-empty {
    padding: 28px;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font: 500 13px inherit;
}
.share-card {
    display: grid;
    grid-template-columns: 22px 38px 1fr;
    align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.share-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
}
.share-card.is-selected {
    background: rgba(251,191,36,0.10);
    border-color: rgba(251,191,36,0.45);
}
.share-card.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.share-card.is-disabled:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
    transform: none;
}
.share-card-check {
    width: 18px; height: 18px;
    border: 1.5px solid rgba(255,255,255,0.32);
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
}
.share-card.is-selected .share-card-check {
    background: #fbbf24; border-color: #fbbf24;
}
.share-card.is-selected .share-card-check::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 10px; color: #1f2937;
}
.share-card-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(59,130,246,0.25));
    color: #c7d2fe;
    font: 700 13px inherit;
    display: flex; align-items: center; justify-content: center;
}
.share-card-name {
    font: 600 13px inherit; color: #fff;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}
.share-card-sub {
    display: flex; align-items: center; gap: 8px;
    margin-top: 3px;
    font: 500 11px inherit; color: rgba(255,255,255,0.5);
}
.share-card-sub .fav-star {
    color: #fbbf24; cursor: pointer;
}
.share-card-sub .fav-star.is-on { filter: drop-shadow(0 0 6px rgba(251,191,36,0.6)); }
.share-card-tag {
    font: 700 9px inherit; letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px; border-radius: 6px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
}

.share-bar-foot {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.22);
}
.share-bar-spacer { flex: 1; }
.share-quota {
    font: 600 12px -apple-system, system-ui, sans-serif;
    color: rgba(255,255,255,0.6);
}
.share-quota .qval { color: #fbbf24; font-weight: 800; }
.share-quota.is-over .qval { color: #ef4444; }

/* ── Tasks ▸ Manual Assign view ─────────────────────────────────
   Full-screen overlay (above the kanban) with a wide task header
   on top and a contractor/team list below. Slides in from below
   when activated by the share bar's "Manual Assign" CTA. */
.manual-assign-view {
    position: fixed; inset: 0;
    z-index: 9990;
    background: #0d0d0f;
    display: flex; flex-direction: column;
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    color: #fff;
}
.manual-assign-view[hidden] { display: none; }
.manual-assign-view.is-entering { transform: translateY(100%); }
.ma-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 36px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.ma-back {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.ma-back:hover { background: rgba(255,255,255,0.1); }
.ma-title { min-width: 0; }
.ma-eyebrow {
    font: 700 10px -apple-system, system-ui, sans-serif;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}
.ma-title h2 {
    margin: 4px 0 6px;
    font: 700 26px/1.2 -apple-system, system-ui, sans-serif;
    color: #fff;
    letter-spacing: -0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-meta {
    display: flex; gap: 10px;
    font: 500 12.5px inherit;
    color: rgba(255,255,255,0.55);
}
.ma-meta span {
    display: inline-flex; align-items: center; gap: 5px;
}
.ma-meta i { color: rgba(255,255,255,0.4); }
.ma-progress {
    font: 600 12px -apple-system, system-ui, sans-serif;
    color: rgba(255,255,255,0.55);
    text-align: right;
    min-width: 110px;
}
.ma-progress strong { color: #fff; font-weight: 800; }
.ma-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 24px 36px 32px;
}
.ma-section {
    margin-bottom: 28px;
}
.ma-section-title {
    display: flex; align-items: center; justify-content: space-between;
    font: 700 11px -apple-system, system-ui, sans-serif;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
}
.ma-section-title .ma-section-help {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
}
.ma-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.ma-foot {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 36px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.4);
}
.ma-quota {
    font: 600 12px -apple-system, system-ui, sans-serif;
    color: rgba(255,255,255,0.6);
}
.ma-quota .qval { color: #fbbf24; font-weight: 800; }
.ma-quota.is-over .qval { color: #ef4444; }

.team-bottom-bar .tbb-search-wrap {
    flex: 1; position: relative; max-width: 360px;
}
.team-bottom-bar .tbb-search-wrap input {
    width: 100%; height: 40px;
    padding: 0 14px 0 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    font: 500 14px -apple-system, system-ui, sans-serif;
    color: #fff; outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}
.team-bottom-bar .tbb-search-wrap input::placeholder { color: rgba(255,255,255,0.4); }
.team-bottom-bar .tbb-search-wrap input:focus {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.09);
}
.team-bottom-bar .tbb-search-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.45);
    font-size: 13px; pointer-events: none;
}
.team-bottom-bar .tbb-spacer { flex: 1; }
.team-bottom-bar .tbb-count {
    display: inline-flex; align-items: center; gap: 7px;
    color: rgba(255,255,255,0.7); font: 600 13px inherit;
    padding: 0 6px;
}
.team-bottom-bar .tbb-count strong {
    color: #fff;
    background: rgba(255,255,255,0.1);
    padding: 2px 9px; border-radius: 999px;
    font-weight: 700;
}
.team-bottom-bar .tbb-btn {
    height: 40px; padding: 0 18px;
    border-radius: 999px; border: none;
    font: 600 14px -apple-system, system-ui, sans-serif;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
}
.team-bottom-bar .tbb-btn:hover { opacity: 0.9; transform: scale(1.02); }
.team-bottom-bar .tbb-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.team-bottom-bar .tbb-btn.secondary {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
}
.team-bottom-bar .tbb-btn.secondary:hover { background: rgba(255,255,255,0.14); }
.team-bottom-bar .tbb-btn.primary {
    background: #ffffff; color: #000;
}
/* Finalize button is hidden until at least one contractor is selected */
.team-bottom-bar .tbb-btn.tbb-finalize { display: none; }
body.team-view.has-selection .team-bottom-bar .tbb-btn.tbb-finalize { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════════
   TEAM ▸ ASSIGN VIEW — 80/20 split that surfaces after the user
   clicks Finalize. Left rail shows the selected contractors as
   large cards (photo + name only). The right rail mimics
   Settings ▸ Data: a tag pill rail at the top, then a Tasks /
   Subtasks trio with multi-select and a "Generate Estimates" CTA.
   When that CTA is clicked, the layout shifts to 40/40/20 and a
   middle pane (Estimate confirmation) slides in.
   ═════════════════════════════════════════════════════════════════ */
.team-assign-shell {
    display: grid;
    grid-template-columns: 80fr 0fr 20fr;
    gap: 0;
    /* Header is 96px; the global team bottom bar is hidden in
       assign-mode so we get the full remaining viewport here. */
    height: calc(100vh - 96px);
    min-height: 540px;
    margin: -24px -32px 0;             /* edge-to-edge */
    background: #1a1a1a;
    transition: grid-template-columns .4s cubic-bezier(.4,0,.2,1),
                transform .42s cubic-bezier(.32,.72,.0,1.0);
    overflow: hidden;
    /* Slide-in: the shell starts off-screen on the right and
       translates into place. The .is-entering class is added on
       first paint, then removed in the next frame so CSS transitions
       the property change. */
    transform: translateX(0);
    will-change: transform;
}
.team-assign-shell.is-entering {
    transform: translateX(100%);
}
.team-assign-shell.is-leaving {
    transform: translateX(100%);
}
.team-assign-shell.estimate-open {
    grid-template-columns: 40fr 40fr 20fr;
}

.team-assign-pane {
    min-width: 0; min-height: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: #1a1a1a;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.team-assign-pane:last-child { border-right: none; }
.team-assign-pane-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.25);
}
.team-assign-pane-title {
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    display: inline-flex; align-items: center; gap: 8px;
}
.team-assign-pane-title .tap-count {
    font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
    letter-spacing: 0;
}
.team-assign-pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }

/* Contractor strip (left pane) */
.ta-contractor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
/* When estimate panel is open the contractor pane shrinks; tighten cards. */
.team-assign-shell.estimate-open .ta-contractor-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.ta-contractor-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    transition: transform .15s, border-color .15s, background .15s;
}
.ta-contractor-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    background: #161616;
}
.ta-contractor-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(59,130,246,0.25));
    display: flex; align-items: center; justify-content: center;
    color: #c7d2fe; font-size: 28px; font-weight: 700;
    margin-bottom: 12px;
    border: 2px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.ta-contractor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ta-contractor-name {
    font-size: 14px; font-weight: 600; color: #fff;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ta-contractor-role {
    margin-top: 4px;
    font-size: 11px; color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* Right pane: tag rail + task list (mirrors dv2 visual language but
   lives within the team page, so styles are scoped to .ta-assign).
   The tag pills are reused from the dv2 system. */
.ta-assign-tag-rail {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.3);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}
.ta-assign-tag-rail::-webkit-scrollbar { height: 5px; }
.ta-assign-tag-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.ta-assign-search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ta-assign-search-wrap {
    flex: 1; position: relative;
}
.ta-assign-search-wrap input {
    width: 100%; height: 34px;
    padding: 0 12px 0 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff; font-size: 12.5px; outline: none;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}
.ta-assign-search-wrap input:focus {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.08);
}
.ta-assign-search-wrap input::placeholder { color: rgba(255,255,255,0.32); }
.ta-assign-search-wrap i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: rgba(255,255,255,0.35);
}

.ta-assign-chip-row {
    display: flex; gap: 6px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ta-assign-chip-row::-webkit-scrollbar { display: none; }
.ta-assign-chip {
    flex: 0 0 auto;
    font-size: 10.5px; font-weight: 600;
    padding: 4px 11px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .03em;
    transition: all .12s;
    white-space: nowrap;
}
.ta-assign-chip:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
}
.ta-assign-chip.active {
    background: rgba(59,130,246,0.18);
    color: #fff;
    border-color: rgba(59,130,246,0.55);
}

.ta-assign-task-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.ta-assign-task {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.ta-assign-task:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
}
.ta-assign-task.is-selected {
    background: rgba(59,130,246,0.14);
    border-color: rgba(59,130,246,0.45);
}
.ta-assign-task-title {
    font-size: 12.5px; font-weight: 600; color: #fff;
    line-height: 1.35;
}
.ta-assign-task-cat {
    display: block;
    font-size: 10.5px; color: rgba(255,255,255,0.45);
    margin-top: 2px;
    font-weight: 500;
}
.ta-assign-task-meta {
    font-size: 10.5px; color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.ta-assign-task-meta .ta-sub-count {
    background: rgba(255,255,255,0.06);
    padding: 2px 7px; border-radius: 999px;
}
.ta-assign-subtasks {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-left: 28px;
    display: none;
    flex-direction: column;
    gap: 4px;
}
.ta-assign-task.is-expanded .ta-assign-subtasks { display: flex; }
.ta-assign-sub {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    font-size: 11.5px; color: rgba(255,255,255,0.7);
    border-radius: 7px;
    border: 1px dashed rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
    cursor: pointer;
}
.ta-assign-sub:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.ta-assign-sub.is-selected {
    background: rgba(59,130,246,0.10);
    border-color: rgba(59,130,246,0.4);
    border-style: solid;
    color: #fff;
}
.ta-assign-sub-check {
    width: 14px; height: 14px; border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,0.3);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ta-assign-sub.is-selected .ta-assign-sub-check {
    background: #fff; border-color: #fff;
}
.ta-assign-sub.is-selected .ta-assign-sub-check::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 8px; color: #000;
}

.ta-assign-task-check {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,0.3);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
}
.ta-assign-task.is-selected .ta-assign-task-check {
    background: #fff; border-color: #fff;
}
.ta-assign-task.is-selected .ta-assign-task-check::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 10px; color: #000;
}

.ta-assign-foot {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.25);
    display: flex; align-items: center; gap: 10px;
}
.ta-assign-foot .ta-foot-summary {
    flex: 1; font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 500;
}
.ta-assign-foot .ta-foot-summary strong { color: #fff; font-weight: 700; }
.ta-assign-generate-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #1f2937;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .08s;
    white-space: nowrap;
}
.ta-assign-generate-btn:hover { filter: brightness(1.1); }
.ta-assign-generate-btn:active { transform: scale(0.97); }
.ta-assign-generate-btn:disabled {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.35);
    cursor: not-allowed;
    filter: none;
}

/* Estimate confirmation pane (slides in between contractors and assign panel) */
.team-assign-shell .team-assign-pane.te-pane {
    background: #131316;
    border-right: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.team-assign-shell.estimate-open .team-assign-pane.te-pane {
    opacity: 1;
    pointer-events: auto;
}
.te-summary-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.te-summary-card h4 {
    margin: 0 0 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.te-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    font-size: 13px; color: #fff;
}
.te-summary-row:last-child { border-bottom: none; }
.te-summary-row .te-label { color: rgba(255,255,255,0.55); font-weight: 500; }
.te-summary-row .te-value { font-weight: 600; }
.te-pill-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.te-pill {
    font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.08);
}
.te-form-row {
    display: flex; flex-direction: column; gap: 5px;
    margin-bottom: 12px;
}
.te-form-row label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.te-form-row select,
.te-form-row input,
.te-form-row textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff; font-size: 13px;
    padding: 9px 12px;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}
.te-form-row select:focus,
.te-form-row input:focus,
.te-form-row textarea:focus {
    border-color: rgba(99,102,241,0.5);
    background: rgba(255,255,255,0.07);
}
.te-actions {
    position: sticky; bottom: 0;
    background: linear-gradient(to top, #131316 70%, transparent);
    padding: 14px 0 4px;
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 16px;
}
.te-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px;
    border-radius: 999px;
    font: 600 13px inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .15s, transform .08s, background .15s;
}
.te-btn.secondary {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-color: rgba(255,255,255,0.12);
}
.te-btn.secondary:hover { background: rgba(255,255,255,0.12); }
.te-btn.primary {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #04241a;
    font-weight: 700;
}
.te-btn.primary:hover { filter: brightness(1.08); }
.te-btn.primary:active { transform: scale(0.97); }

/* Header CTA when in assign mode — replaces contextual board buttons */
body.team-view.assign-mode .crm-board-tabs { display: none; }
body.team-view.assign-mode .team-header-left::before {
    content: 'Assign Contractors';
    font-size: 17px; font-weight: 700; color: #fff;
    letter-spacing: -0.2px;
}
body.team-view.assign-mode .crm-filter-bar { display: none; }

/* Back-to-contacts button shown in header during assign mode */
.ta-back-btn {
    display: none;
    align-items: center; gap: 6px;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    transition: background .15s;
}
body.team-view.assign-mode .ta-back-btn { display: inline-flex; }
.ta-back-btn:hover { background: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════════════════════════════════
   MARKETPLACE TAB — Distressed property discovery & deal calculator
   Design: dark, image-led cards with prominent financial stats and a
   detail drawer for the rehab/MAO calculator.
   ═════════════════════════════════════════════════════════════════ */
body.marketplace-view {
    background: #0a0a0a;
}
body.marketplace-view .page-content {
    padding: 0;
    background: #0a0a0a;
}
body.marketplace-view .header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(18px);
}

/* Header bar */
.mkt-header-left { display: flex; flex-direction: column; gap: 4px; }
.mkt-page-title {
    font-size: 26px; font-weight: 700; color: var(--color-text-primary);
    letter-spacing: -0.4px;
}
.mkt-page-subtitle {
    font-size: 13px; color: var(--color-text-secondary);
}
.mkt-header-right { display: flex; align-items: center; gap: 10px; }
.mkt-header-search {
    position: relative;
}
.mkt-header-search input {
    width: 280px;
    padding: 10px 14px 10px 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-primary);
    font-size: 13px;
    transition: border-color .15s ease, background .15s ease;
}
.mkt-header-search input::placeholder { color: rgba(148,163,184,0.7); }
.mkt-header-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255,255,255,0.06);
}
.mkt-header-search i {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 13px;
}
.mkt-sort-select {
    padding: 10px 32px 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%2394a3b8' d='M0 2l4 4 4-4z'/></svg>") no-repeat right 12px center / 8px;
    color: var(--color-text-primary);
    font-size: 13px;
    appearance: none;
    cursor: pointer;
}
.mkt-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}
.mkt-add-btn:hover { filter: brightness(1.1); }
.mkt-add-btn:active { transform: translateY(1px); }

/* Filter pill row */
.mkt-filter-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 24px;
    padding: 14px 32px;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
}
.mkt-filter-group {
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
}
.mkt-filter-label {
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: rgba(148,163,184,0.7);
    margin-right: 4px;
}
.mkt-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--color-text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.mkt-pill:hover {
    background: rgba(255,255,255,0.06);
    color: var(--color-text-primary);
    border-color: rgba(255,255,255,0.2);
}
.mkt-pill.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.mkt-pill .count {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
}
.mkt-pill.is-active .count {
    background: rgba(0,0,0,0.25);
}

/* Stats strip */
.mkt-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px 32px 4px;
}
.mkt-stat-card {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.mkt-stat-label {
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.mkt-stat-value {
    font-size: 22px; font-weight: 700; color: var(--color-text-primary);
    display: flex; align-items: baseline; gap: 8px;
}
.mkt-stat-trend {
    font-size: 11px; font-weight: 600;
    color: var(--color-success);
}
.mkt-stat-trend.down { color: var(--color-error); }

/* Property grid */
.mkt-grid-wrap { padding: 20px 32px 48px; }
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}
@media (max-width: 1100px) {
    .mkt-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Property card */
.mkt-card {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--color-card-bg);
    backdrop-filter: blur(14px);
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mkt-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 16px 36px rgba(0,0,0,0.4);
}

/* Card image / hero */
.mkt-card-hero {
    position: relative;
    height: 180px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.mkt-card-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.mkt-card-hero-house {
    font-size: 64px;
    color: rgba(255,255,255,0.18);
    position: relative; z-index: 1;
}
.mkt-card-badges {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
}
.mkt-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    color: #fff;
}
.mkt-status-badge[data-status="pre-foreclosure"] { background: rgba(239,68,68,0.85); }
.mkt-status-badge[data-status="auction"]         { background: rgba(245,158,11,0.9); }
.mkt-status-badge[data-status="reo"]             { background: rgba(99,102,241,0.9); }
.mkt-status-badge[data-status="lis-pendens"]     { background: rgba(220,38,38,0.85); }
.mkt-status-badge[data-status="vacant"]          { background: rgba(100,116,139,0.9); }
.mkt-priority-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    color: #1a1300;
    box-shadow: 0 4px 14px rgba(251,191,36,0.4);
    animation: mkt-pulse 2.4s ease-in-out infinite;
}
@keyframes mkt-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(251,191,36,0.4); }
    50%      { box-shadow: 0 4px 22px rgba(251,191,36,0.7); }
}

/* Card body */
.mkt-card-body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.mkt-card-address {
    font-size: 15px; font-weight: 700; color: var(--color-text-primary);
    line-height: 1.3;
}
.mkt-card-locality {
    font-size: 12px; color: var(--color-text-secondary);
}
.mkt-card-stats {
    display: flex; align-items: center; gap: 14px;
    font-size: 12px; color: var(--color-text-secondary);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 10px 0;
}
.mkt-card-stats span { display: inline-flex; align-items: center; gap: 5px; }
.mkt-card-stats i { color: var(--color-text-secondary); opacity: 0.7; font-size: 11px; }
.mkt-card-financials {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
}
.mkt-card-fin-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.mkt-card-fin-value {
    font-size: 15px; font-weight: 700; color: var(--color-text-primary);
}
.mkt-card-fin-value.equity { color: var(--color-success); }
.mkt-card-fin-value.muted  { color: var(--color-text-secondary); font-weight: 600; }

/* Card footer */
.mkt-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
    font-size: 12px;
    color: var(--color-text-secondary);
}
.mkt-card-footer .mkt-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-primary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mkt-card-footer .mkt-cta:hover {
    background: var(--color-primary); border-color: var(--color-primary);
}

/* Empty state */
.mkt-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--color-text-secondary);
}
.mkt-empty i {
    font-size: 38px; opacity: 0.5; margin-bottom: 12px;
}
.mkt-empty p { font-size: 14px; }

/* ── Detail drawer (right slide-in) ── */
.mkt-drawer-backdrop {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.mkt-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.mkt-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; z-index: 9100;
    width: min(560px, 100vw);
    background: #0a0a0a;
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -16px 0 40px rgba(0,0,0,0.55);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.mkt-drawer.open { transform: translateX(0); }

.mkt-drawer-head {
    position: relative;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mkt-drawer-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.mkt-drawer-close:hover {
    color: var(--color-text-primary);
    background: rgba(255,255,255,0.08);
}
.mkt-drawer-status-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.mkt-drawer-address {
    font-size: 22px; font-weight: 700; color: var(--color-text-primary);
    line-height: 1.25;
    padding-right: 40px;
}
.mkt-drawer-locality {
    font-size: 13px; color: var(--color-text-secondary);
    margin-top: 4px;
}
.mkt-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 20px 24px 32px;
    display: flex; flex-direction: column; gap: 24px;
}
.mkt-drawer-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 16px 18px;
}
.mkt-drawer-section h4 {
    margin: 0 0 12px;
    font-size: 12px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.mkt-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
}
.mkt-info-grid .label {
    font-size: 11px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.mkt-info-grid .value {
    font-size: 14px; font-weight: 600; color: var(--color-text-primary);
    word-break: break-word;
}
.mkt-info-grid .value.success { color: var(--color-success); }
.mkt-info-grid .value.warning { color: var(--color-warning); }
.mkt-info-grid .value.error   { color: var(--color-error); }

/* Rehab calculator */
.mkt-rehab-row {
    display: grid;
    grid-template-columns: 1.1fr 2fr 0.9fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mkt-rehab-row:last-child { border-bottom: none; }
.mkt-rehab-cat {
    font-size: 13px; font-weight: 600; color: var(--color-text-primary);
}
.mkt-rehab-segments {
    display: flex; gap: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 3px;
}
.mkt-rehab-seg {
    flex: 1;
    padding: 5px 6px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.mkt-rehab-seg:hover { color: var(--color-text-primary); }
.mkt-rehab-seg.active {
    background: var(--color-primary);
    color: #fff;
}
.mkt-rehab-seg[data-sev="major"].active     { background: var(--color-error); }
.mkt-rehab-seg[data-sev="moderate"].active  { background: var(--color-warning); color: #1a1300; }
.mkt-rehab-seg[data-sev="minor"].active     { background: var(--color-success); }
.mkt-rehab-seg[data-sev="none"].active      { background: rgba(148,163,184,0.4); color: var(--color-text-primary); }
.mkt-rehab-cost {
    text-align: right;
    font-size: 13px; font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.mkt-rehab-total {
    margin-top: 12px;
    padding: 14px 16px;
    background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(59,130,246,0.02));
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.mkt-rehab-total .label {
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.mkt-rehab-total .amount {
    font-size: 22px; font-weight: 800; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* MAO breakdown */
.mkt-mao-grid {
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
.mkt-mao-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 13px;
}
.mkt-mao-row.formula {
    font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.08);
}
.mkt-mao-row .val {
    font-weight: 700; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.mkt-mao-row .val.neg { color: var(--color-error); }
.mkt-mao-final {
    margin-top: 6px;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(16,185,129,0.18), rgba(16,185,129,0.04));
    border: 1px solid rgba(16,185,129,0.4);
    display: flex; align-items: center; justify-content: space-between;
}
.mkt-mao-final .label {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.mkt-mao-final .label small {
    font-size: 11px; color: rgba(148,163,184,0.7);
    text-transform: none; letter-spacing: 0; font-weight: 500;
}
.mkt-mao-final .amount {
    font-size: 28px; font-weight: 800; color: var(--color-success);
    font-variant-numeric: tabular-nums;
}
.mkt-suggested-range {
    margin-top: 10px; padding: 10px 14px;
    font-size: 12px; color: var(--color-text-secondary);
    text-align: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}
.mkt-suggested-range strong { color: var(--color-text-primary); }

/* Drawer footer actions */
.mkt-drawer-foot {
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 10px; flex-wrap: wrap;
    background: rgba(0,0,0,0.4);
}
.mkt-drawer-foot button {
    flex: 1;
    min-width: 130px;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.mkt-drawer-foot .btn-secondary {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-primary);
}
.mkt-drawer-foot .btn-secondary:hover { background: rgba(255,255,255,0.08); }
.mkt-drawer-foot .btn-primary {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.mkt-drawer-foot .btn-primary:hover { filter: brightness(1.1); }
.mkt-drawer-foot .btn-success {
    border: 1px solid var(--color-success);
    background: var(--color-success);
    color: #04190f;
}
.mkt-drawer-foot .btn-success:hover { filter: brightness(1.1); }

/* Mobile drawer */
@media (max-width: 768px) {
    .mkt-drawer { width: 100vw; }
    .mkt-grid-wrap { padding: 16px; }
    .mkt-stats-strip { padding: 16px 16px 4px; grid-template-columns: 1fr 1fr; }
    .mkt-filter-bar { padding: 12px 16px; gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD — Portfolio launchpad (Projects / Accounting / Marketplace / CRM)
   ═════════════════════════════════════════════════════════════════ */
body.dashboard-view { background: #0a0a0a; }
body.dashboard-view .page-content {
    padding: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(59,130,246,0.08), transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(168,85,247,0.06), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(16,185,129,0.05), transparent 50%),
        #0a0a0a;
}
body.dashboard-view .header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(18px);
}

.dash-header-left { display: flex; flex-direction: column; gap: 4px; }
.dash-greeting {
    font-size: 12px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.dash-page-title {
    font-size: 28px; font-weight: 700; color: var(--color-text-primary);
    letter-spacing: -0.5px;
}
.dash-header-right { display: flex; align-items: center; gap: 10px; }
.dash-range-select {
    padding: 9px 32px 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%2394a3b8' d='M0 2l4 4 4-4z'/></svg>") no-repeat right 12px center / 8px;
    color: var(--color-text-primary);
    font-size: 13px;
    appearance: none;
    cursor: pointer;
}
.dash-quick-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}
.dash-quick-btn:hover { filter: brightness(1.1); }

/* KPI strip */
.dash-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 28px 32px 12px;
}
.dash-kpi {
    position: relative;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    overflow: hidden;
}
.dash-kpi::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent, #3b82f6);
    opacity: .6;
}
.dash-kpi-label {
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.dash-kpi-label i { color: var(--accent, #3b82f6); font-size: 11px; }
.dash-kpi-value {
    font-size: 26px; font-weight: 800; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.dash-kpi-trend {
    margin-top: 6px;
    font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.dash-kpi-trend.up   { color: var(--color-success); }
.dash-kpi-trend.down { color: var(--color-error); }
.dash-kpi-trend.flat { color: var(--color-text-secondary); }

/* Launchpad grid */
.dash-launch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 18px 32px;
}
.dash-launch-card {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--color-card-bg);
    backdrop-filter: blur(14px);
    overflow: hidden;
    cursor: pointer;
    min-height: 260px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-launch-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.dash-launch-card .glow {
    position: absolute; top: -40%; right: -20%;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color, rgba(59,130,246,0.3)) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0.6;
}
.dash-launch-head {
    position: relative;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 14px;
}
.dash-launch-head-left {
    display: flex; align-items: center; gap: 14px;
}
.dash-launch-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent, #3b82f6);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 6px 16px var(--glow-color, rgba(59,130,246,0.35));
}
.dash-launch-title {
    font-size: 18px; font-weight: 700; color: var(--color-text-primary);
    line-height: 1.2; margin-bottom: 2px;
}
.dash-launch-subtitle {
    font-size: 12.5px; color: var(--color-text-secondary);
}
.dash-launch-arrow {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--color-text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dash-launch-card:hover .dash-launch-arrow {
    background: var(--accent, #3b82f6);
    color: #fff;
    transform: translate(2px, -2px);
}
.dash-launch-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
    padding: 8px 24px 18px;
}
.dash-launch-stat-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 3px;
}
.dash-launch-stat-value {
    font-size: 17px; font-weight: 700; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.dash-launch-body {
    position: relative;
    flex: 1;
    padding: 0 24px 18px;
    display: flex; flex-direction: column; gap: 8px;
}

/* Project chips inside launch card */
.dash-proj-chip {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 12.5px;
}
.dash-proj-chip-name {
    flex: 1;
    color: var(--color-text-primary); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-proj-chip-bar {
    width: 90px; height: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
}
.dash-proj-chip-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.dash-proj-chip-pct {
    color: var(--color-text-secondary); font-weight: 600;
    min-width: 36px; text-align: right; font-variant-numeric: tabular-nums;
}

/* Tiny bar chart inside accounting launch card */
.dash-mini-chart {
    display: flex; align-items: flex-end; gap: 4px;
    height: 60px; margin: 4px 0 0;
}
.dash-mini-chart-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--accent, #10b981), rgba(16,185,129,0.2));
    min-height: 4px;
}
.dash-mini-chart-axis {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font-size: 9.5px; color: rgba(148,163,184,0.6);
    font-weight: 600; letter-spacing: .5px;
}

/* Marketplace mini listing rows */
.dash-listing-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}
.dash-listing-thumb {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6); font-size: 14px;
    flex-shrink: 0;
}
.dash-listing-meta {
    flex: 1;
    min-width: 0;
}
.dash-listing-addr {
    font-size: 12.5px; font-weight: 600; color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-listing-sub {
    font-size: 10.5px; color: var(--color-text-secondary);
}
.dash-listing-flag {
    font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    color: #1a1300;
    flex-shrink: 0;
}

/* CRM funnel mini-viz */
.dash-funnel { display: flex; flex-direction: column; gap: 5px; }
.dash-funnel-row {
    display: grid;
    grid-template-columns: 110px 1fr 28px;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
}
.dash-funnel-label {
    color: var(--color-text-secondary); font-weight: 600;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.dash-funnel-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
}
.dash-funnel-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #a855f7, #c084fc);
}
.dash-funnel-count {
    text-align: right;
    color: var(--color-text-primary); font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Activity feed */
.dash-activity {
    margin: 8px 32px 48px;
    padding: 22px 24px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--color-card-bg);
    backdrop-filter: blur(14px);
}
.dash-activity h3 {
    margin: 0 0 14px;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.dash-activity-list {
    display: flex; flex-direction: column; gap: 4px;
}
.dash-activity-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.dash-activity-icon.ev-lead    { background: rgba(168,85,247,0.15); color: #c084fc; }
.dash-activity-icon.ev-offer   { background: rgba(59,130,246,0.15); color: #60a5fa; }
.dash-activity-icon.ev-payment { background: rgba(16,185,129,0.15); color: #34d399; }
.dash-activity-icon.ev-project { background: rgba(245,158,11,0.15); color: #fbbf24; }
.dash-activity-icon.ev-task    { background: rgba(148,163,184,0.15); color: #cbd5e1; }
.dash-activity-text {
    font-size: 13px; color: var(--color-text-primary);
    line-height: 1.4;
}
.dash-activity-text strong { font-weight: 700; }
.dash-activity-time {
    font-size: 11px; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .dash-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .dash-launch-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .dash-kpi-strip { padding: 18px 16px 8px; gap: 10px; }
    .dash-launch-grid { padding: 12px 16px; }
    .dash-activity { margin: 8px 16px 32px; padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNTING — Portfolio P&L & transactions
   ═════════════════════════════════════════════════════════════════ */
body.accounting-view { background: #0a0a0a; }
body.accounting-view .page-content { padding: 0; background: #0a0a0a; }
body.accounting-view .header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(18px);
}

.acc-page-title {
    font-size: 26px; font-weight: 700; color: var(--color-text-primary);
    letter-spacing: -0.4px;
}
.acc-subtitle {
    font-size: 13px; color: var(--color-text-secondary);
}

.acc-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 24px 32px 12px;
}
.acc-kpi {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.acc-kpi-label {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.acc-kpi-value {
    font-size: 24px; font-weight: 800; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.acc-kpi-value.profit  { color: var(--color-success); }
.acc-kpi-value.expense { color: var(--color-error); }
.acc-kpi-trend {
    margin-top: 6px;
    font-size: 11px; font-weight: 600;
}
.acc-kpi-trend.up   { color: var(--color-success); }
.acc-kpi-trend.down { color: var(--color-error); }

.acc-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    padding: 8px 32px 24px;
}
.acc-card {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--color-card-bg);
    backdrop-filter: blur(14px);
    padding: 20px 22px;
}
.acc-card h3 {
    margin: 0 0 16px;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
    display: flex; align-items: center; justify-content: space-between;
}

/* Monthly bar chart (CSS-only) */
.acc-chart-wrap {
    display: flex; flex-direction: column; gap: 14px;
}
.acc-chart-legend {
    display: flex; gap: 18px; align-items: center;
    font-size: 11px; color: var(--color-text-secondary);
}
.acc-legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
    margin-right: 6px; vertical-align: middle;
}
.acc-chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    align-items: end;
    height: 220px;
    padding: 8px 0;
}
.acc-chart-col {
    display: flex; flex-direction: column-reverse; align-items: stretch;
    gap: 2px;
    position: relative;
    height: 100%;
}
.acc-chart-bar {
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: filter .15s ease;
}
.acc-chart-bar.rev { background: linear-gradient(180deg, #3b82f6, rgba(59,130,246,0.4)); }
.acc-chart-bar.exp { background: linear-gradient(180deg, #ef4444, rgba(239,68,68,0.4)); }
.acc-chart-col:hover .acc-chart-bar { filter: brightness(1.15); }
.acc-chart-axis {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    margin-top: 6px;
    font-size: 10.5px; color: var(--color-text-secondary);
    text-align: center; font-weight: 600;
}

/* Deal P&L table */
.acc-deals-table {
    display: flex; flex-direction: column; gap: 1px;
}
.acc-deal-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.acc-deal-row:last-child { border-bottom: none; }
.acc-deal-name {
    font-size: 13px; font-weight: 600; color: var(--color-text-primary);
    line-height: 1.3;
}
.acc-deal-sub {
    font-size: 11px; color: var(--color-text-secondary);
}
.acc-deal-margin {
    font-size: 11px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.acc-deal-margin.high { color: var(--color-success); background: rgba(16,185,129,0.12); }
.acc-deal-margin.med  { color: var(--color-warning); background: rgba(245,158,11,0.12); }
.acc-deal-margin.low  { color: var(--color-error);   background: rgba(239,68,68,0.12); }
.acc-deal-profit {
    font-size: 14px; font-weight: 700; color: var(--color-success);
    font-variant-numeric: tabular-nums;
    min-width: 90px; text-align: right;
}
.acc-deal-profit.neg { color: var(--color-error); }

/* Transactions */
.acc-tx-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.acc-tx-row:last-child { border-bottom: none; }
.acc-tx-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.acc-tx-icon.income  { background: rgba(16,185,129,0.15); color: #34d399; }
.acc-tx-icon.expense { background: rgba(239,68,68,0.15);  color: #f87171; }
.acc-tx-desc {
    font-size: 13px; color: var(--color-text-primary); font-weight: 500;
}
.acc-tx-meta {
    font-size: 11px; color: var(--color-text-secondary);
}
.acc-tx-amt {
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.acc-tx-amt.income  { color: var(--color-success); }
.acc-tx-amt.expense { color: var(--color-error); }
.acc-tx-date {
    font-size: 11px; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 50px; text-align: right;
}

@media (max-width: 1100px) {
    .acc-grid { grid-template-columns: 1fr; }
    .acc-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVE DEALS CRM — Seller pipeline kanban + mass outreach
   ═════════════════════════════════════════════════════════════════ */
body.active-deals-view { background: #0a0a0a; }
body.active-deals-view .page-content { padding: 0; background: #0a0a0a; }
body.active-deals-view .header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(18px);
}

.ad-page-title {
    font-size: 26px; font-weight: 700; color: var(--color-text-primary);
}
.ad-page-subtitle {
    font-size: 13px; color: var(--color-text-secondary);
}
.ad-header-right { display: flex; align-items: center; gap: 10px; }
.ad-search {
    position: relative;
}
.ad-search input {
    width: 240px;
    padding: 9px 14px 9px 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-primary);
    font-size: 13px;
}
.ad-search input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.ad-search i {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary); font-size: 12px;
}
.ad-outreach-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.ad-outreach-btn:hover { filter: brightness(1.1); }

.ad-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 18px 32px 8px;
}
.ad-stat {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}
.ad-stat-label {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.ad-stat-value {
    font-size: 22px; font-weight: 800; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Kanban */
.ad-kanban {
    display: grid;
    grid-template-columns: repeat(7, minmax(260px, 1fr));
    gap: 12px;
    padding: 16px 32px 32px;
    overflow-x: auto;
}
.ad-col {
    display: flex; flex-direction: column;
    min-width: 0;
    min-height: 60vh;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
}
.ad-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ad-col-head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad-col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ad-stage-color, #94a3b8);
}
.ad-col-title {
    font-size: 12px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-col-count {
    font-size: 11px; font-weight: 700;
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 22px; text-align: center;
}
.ad-col-add {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: 1px dashed rgba(255,255,255,0.15);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 11px;
}
.ad-col-add:hover {
    color: var(--color-text-primary);
    border-color: rgba(255,255,255,0.3);
}
.ad-col-body {
    flex: 1;
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto;
}

/* Deal card */
.ad-card {
    position: relative;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(28,28,30,0.7);
    padding: 12px 12px 10px;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.ad-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.16);
}
.ad-card-addr {
    font-size: 13px; font-weight: 700; color: var(--color-text-primary);
    line-height: 1.3; margin-bottom: 2px;
}
.ad-card-loc {
    font-size: 11px; color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.ad-card-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.ad-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
}
.ad-tag.foreclosure { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.ad-tag.divorce     { background: rgba(168,85,247,0.15); color: #c4b5fd; }
.ad-tag.probate     { background: rgba(99,102,241,0.15); color: #a5b4fc; }
.ad-tag.vacant      { background: rgba(100,116,139,0.15); color: #cbd5e1; }
.ad-tag.relocation  { background: rgba(245,158,11,0.15); color: #fcd34d; }
.ad-tag.medical     { background: rgba(236,72,153,0.15); color: #f9a8d4; }
.ad-tag.tired       { background: rgba(20,184,166,0.15); color: #5eead4; }
.ad-tag.financial   { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.ad-tag.hot         { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #1a1300; }
.ad-card-owner {
    font-size: 11px; color: var(--color-text-secondary);
    display: flex; align-items: center; gap: 4px;
}
.ad-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ad-card-stage-time {
    font-size: 10.5px; color: var(--color-text-secondary);
}
.ad-card-stage-time.stale {
    color: var(--color-warning);
    font-weight: 700;
}
.ad-card-actions {
    display: flex; gap: 4px;
}
.ad-card-act-btn {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ad-card-act-btn:hover {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
    background: rgba(59,130,246,0.15);
}

/* Mass outreach drawer */
.ad-outreach-backdrop {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.ad-outreach-backdrop.open { opacity: 1; pointer-events: auto; }
.ad-outreach-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; z-index: 9100;
    width: min(580px, 100vw);
    background: #0a0a0a;
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -16px 0 40px rgba(0,0,0,0.55);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.ad-outreach-drawer.open { transform: translateX(0); }
.ad-outreach-head {
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: space-between;
}
.ad-outreach-head h3 {
    margin: 0; font-size: 17px; font-weight: 700;
    color: var(--color-text-primary);
}
.ad-outreach-head .close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.ad-outreach-head .close:hover { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
.ad-outreach-body {
    flex: 1; overflow-y: auto;
    padding: 20px 24px 24px;
    display: flex; flex-direction: column; gap: 18px;
}
.ad-channel-toggles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ad-channel {
    padding: 14px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--color-text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all .15s ease;
}
.ad-channel i { display: block; font-size: 18px; margin-bottom: 6px; }
.ad-channel:hover { color: var(--color-text-primary); }
.ad-channel.is-active {
    border-color: var(--color-primary);
    background: rgba(59,130,246,0.12);
    color: var(--color-text-primary);
}
.ad-field { display: flex; flex-direction: column; gap: 6px; }
.ad-field label {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.ad-field input, .ad-field textarea, .ad-field select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
.ad-field textarea { min-height: 140px; line-height: 1.5; }
.ad-field input:focus, .ad-field textarea:focus, .ad-field select:focus {
    outline: none; border-color: var(--color-primary);
}
.ad-recipients {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    min-height: 44px;
    max-height: 120px; overflow-y: auto;
}
.ad-recipient-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    border-radius: 999px;
    background: rgba(59,130,246,0.15);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,0.3);
}
.ad-recipient-chip .x {
    cursor: pointer; opacity: 0.6;
    font-size: 10px;
}
.ad-recipient-chip .x:hover { opacity: 1; }
.ad-template-hint {
    font-size: 11px; color: var(--color-text-secondary);
    font-style: italic;
}

.ad-outreach-foot {
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 10px;
    background: rgba(0,0,0,0.4);
}
.ad-outreach-foot button {
    flex: 1;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.ad-outreach-foot .cancel {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-primary);
}
.ad-outreach-foot .send {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* Deal detail drawer (re-uses marketplace drawer pattern) */
.ad-deal-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; z-index: 9100;
    width: min(540px, 100vw);
    background: #0a0a0a;
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -16px 0 40px rgba(0,0,0,0.55);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.ad-deal-drawer.open { transform: translateX(0); }
.ad-deal-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
.ad-deal-head .close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.ad-deal-head .close:hover { color: var(--color-text-primary); }
.ad-deal-head h2 {
    margin: 0; font-size: 20px; font-weight: 700;
    color: var(--color-text-primary);
    padding-right: 40px;
}
.ad-deal-head .loc {
    font-size: 13px; color: var(--color-text-secondary);
    margin-top: 4px;
}
.ad-deal-body {
    flex: 1; overflow-y: auto;
    padding: 18px 24px 24px;
    display: flex; flex-direction: column; gap: 18px;
}
.ad-deal-section {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.02);
}
.ad-deal-section h4 {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.ad-deal-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.ad-deal-grid .label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.ad-deal-grid .value {
    font-size: 13.5px; font-weight: 600; color: var(--color-text-primary);
}
.ad-stage-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.ad-stage-pick {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--color-text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all .12s ease;
}
.ad-stage-pick:hover { color: var(--color-text-primary); }
.ad-stage-pick.active {
    color: var(--color-text-primary);
    background: rgba(59,130,246,0.15);
    border-color: var(--color-primary);
}
.ad-deal-foot {
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 8px;
    background: rgba(0,0,0,0.4);
}
.ad-deal-foot button {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ad-deal-foot .secondary {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-primary);
}
.ad-deal-foot .primary {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

@media (max-width: 1100px) {
    .ad-stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ad-kanban { padding: 12px 16px; grid-template-columns: repeat(7, 80vw); }
    .ad-stats-strip { padding: 14px 16px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HUB SWITCHER — sub-nav strip shown on all portfolio hub views
   (Dashboard / Projects / Accounting / Marketplace / Active Deals)
   Lives at the top of .page-content. Sticky. Pill-style segments.
   ═════════════════════════════════════════════════════════════════ */
.hub-switcher {
    position: sticky;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 32px;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hub-switcher-segments {
    display: flex; align-items: center; gap: 4px;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}
.hub-seg {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    white-space: nowrap;
}
.hub-seg i { font-size: 12px; opacity: 0.85; }
.hub-seg:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.04); }
.hub-seg.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    color: var(--color-text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.hub-seg .hub-seg-badge {
    margin-left: 4px;
    font-size: 10.5px; font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: var(--color-text-secondary);
    min-width: 16px; text-align: center;
}
.hub-seg.active .hub-seg-badge {
    background: rgba(59,130,246,0.25);
    color: #93c5fd;
}
.hub-switcher-meta {
    display: flex; align-items: center; gap: 12px;
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}
.hub-switcher-meta i { color: rgba(148,163,184,0.7); margin-right: 4px; }
.hub-switcher-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--color-text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .12s ease;
}
.hub-switcher-back:hover {
    color: var(--color-text-primary);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}

/* When a hub view is active, lift the existing headers/strips off the sticky switcher */
body.dashboard-view  .dash-kpi-strip,
body.accounting-view .acc-kpi-strip,
body.active-deals-view .ad-stats-strip,
body.marketplace-view .mkt-stats-strip {
    padding-top: 18px;
}
body.marketplace-view .mkt-filter-bar { top: 60px; }

@media (max-width: 900px) {
    .hub-switcher { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
    .hub-switcher-meta { width: 100%; justify-content: space-between; }
    .hub-seg { padding: 6px 10px; font-size: 12px; }
    .hub-seg span.label-text { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   QUICK ACTIONS POPOVER — anchored to Dashboard quick-actions button
   ───────────────────────────────────────────────────────────────── */
.qa-popover {
    position: fixed;
    min-width: 260px;
    background: rgba(15,15,17,0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
    padding: 6px;
    z-index: 9200;
    opacity: 0; pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transition: opacity .14s ease, transform .14s ease;
}
.qa-popover.open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
}
.qa-section-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: rgba(148,163,184,0.7);
    padding: 8px 12px 6px;
}
.qa-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 13px; font-weight: 500;
    transition: background .12s ease;
}
.qa-item:hover { background: rgba(255,255,255,0.06); }
.qa-item-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.qa-item-icon.proj    { background: rgba(245,158,11,0.16); color: #fbbf24; }
.qa-item-icon.lead    { background: rgba(168,85,247,0.16); color: #c084fc; }
.qa-item-icon.comps   { background: rgba(59,130,246,0.16); color: #60a5fa; }
.qa-item-icon.outreach{ background: rgba(236,72,153,0.16); color: #f9a8d4; }
.qa-item-icon.export  { background: rgba(16,185,129,0.16); color: #34d399; }
.qa-item-meta {
    flex: 1;
    min-width: 0;
}
.qa-item-title {
    font-weight: 600; color: var(--color-text-primary);
    line-height: 1.2;
}
.qa-item-sub {
    font-size: 11px; color: var(--color-text-secondary);
    margin-top: 1px;
}
.qa-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 4px;
}
.qa-kbd {
    font-size: 10px; font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--color-text-secondary);
    font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
}

/* ─────────────────────────────────────────────────────────────────
   HUB VIEW FADE-IN — subtle transition when entering any hub view
   ───────────────────────────────────────────────────────────────── */
body.dashboard-view  .page-content > *,
body.accounting-view .page-content > *,
body.active-deals-view .page-content > *,
body.marketplace-view .page-content > * {
    animation: hubFadeUp .35s cubic-bezier(.22,.61,.36,1) both;
}
body.dashboard-view  .page-content > *:nth-child(2) { animation-delay: .04s; }
body.dashboard-view  .page-content > *:nth-child(3) { animation-delay: .08s; }
body.dashboard-view  .page-content > *:nth-child(4) { animation-delay: .12s; }
@keyframes hubFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Make Dashboard activity items feel clickable */
.dash-activity-item {
    border-radius: 8px;
    transition: background .12s ease;
}
.dash-activity-item.clickable { cursor: pointer; }
.dash-activity-item.clickable:hover { background: rgba(255,255,255,0.03); }

/* Project chips inside dashboard: clickable */
.dash-proj-chip {
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.dash-proj-chip:hover {
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.28);
}

/* ═══════════════════════════════════════════════════════════════════
   AUTOPILOT — multi-step renovation wizard
   Step 0: project list • 1: type • 2: scope • 3: measurements
   4: contractors • 5: materials • 6: overview
   ═════════════════════════════════════════════════════════════════ */
body.autopilot-view {
    background: #050608;
}
body.autopilot-view .page-content {
    padding: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(59,130,246,0.10), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(168,85,247,0.07), transparent 45%),
        radial-gradient(circle at 50% 110%, rgba(16,185,129,0.06), transparent 55%),
        #050608;
}
body.autopilot-view .header {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(8,8,10,0.7);
    backdrop-filter: blur(18px);
}
body.autopilot-view .page-content > * {
    animation: hubFadeUp .35s cubic-bezier(.22,.61,.36,1) both;
}

.ap-header-left { display: flex; flex-direction: column; gap: 4px; }
.ap-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--color-text-secondary);
    display: inline-flex; align-items: center; gap: 8px;
}
.ap-eyebrow i { color: var(--color-yellow); }
.ap-title {
    font-size: 26px; font-weight: 800; color: #fff;
    letter-spacing: -0.4px;
}
.ap-subtitle {
    font-size: 13px; color: var(--color-text-secondary);
    margin-top: 2px;
}
.ap-header-right { display: flex; align-items: center; gap: 10px; }

/* Stepper */
.ap-stepper {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 32px 0;
    flex-wrap: wrap;
}
.ap-step {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--color-text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.ap-step .ap-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 10px; font-weight: 700;
}
.ap-step.is-done {
    border-color: rgba(16,185,129,0.35);
    color: #d1fae5;
    background: rgba(16,185,129,0.08);
}
.ap-step.is-done .ap-step-num {
    background: var(--color-success);
}
.ap-step.is-active {
    border-color: rgba(59,130,246,0.45);
    color: #fff;
    background: rgba(59,130,246,0.12);
}
.ap-step.is-active .ap-step-num {
    background: var(--color-primary);
}
.ap-step.is-locked { opacity: .55; cursor: not-allowed; }
.ap-step-sep {
    width: 18px; height: 1px;
    background: rgba(255,255,255,0.1);
}

/* Generic surface card used across steps */
.ap-surface {
    margin: 18px 32px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    overflow: hidden;
}
.ap-surface-pad { padding: 22px 26px; }

/* ── Step 0: Projects list ── */
.ap-projects-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 32px 0;
}
.ap-search {
    position: relative;
    flex: 1; max-width: 380px;
}
.ap-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 13px;
    outline: none;
}
.ap-search i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-secondary); font-size: 13px;
}
.ap-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 18px 32px 32px;
}
.ap-project-card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.ap-project-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,0.32);
    background: linear-gradient(160deg, rgba(59,130,246,0.06), rgba(255,255,255,0.01));
}
.ap-project-card.is-add {
    align-items: center; justify-content: center;
    text-align: center;
    border: 1.5px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.02);
    min-height: 168px;
    color: var(--color-text-secondary);
}
.ap-project-card.is-add:hover {
    color: #fff;
    border-color: rgba(251,191,36,0.55);
    background: rgba(251,191,36,0.06);
}
.ap-project-card.is-add i {
    font-size: 26px; margin-bottom: 4px;
}
.ap-pcard-head {
    display: flex; align-items: center; justify-content: space-between;
}
.ap-pcard-type {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase;
    background: rgba(59,130,246,0.12);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,0.22);
}
.ap-pcard-type[data-type="new-construction"] {
    background: rgba(168,85,247,0.12); color: #d8b4fe; border-color: rgba(168,85,247,0.25);
}
.ap-pcard-type[data-type="job"] {
    background: rgba(16,185,129,0.12); color: #86efac; border-color: rgba(16,185,129,0.25);
}
.ap-pcard-stage {
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}
.ap-pcard-name {
    font-size: 16px; font-weight: 700; color: #fff;
    line-height: 1.3;
}
.ap-pcard-loc {
    font-size: 12px; color: var(--color-text-secondary);
}
.ap-pcard-meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.ap-pcard-stat-label {
    font-size: 9px; font-weight: 700; letter-spacing: .5px;
    color: var(--color-text-secondary); text-transform: uppercase;
}
.ap-pcard-stat-value {
    font-size: 13px; font-weight: 700; color: #fff;
}
.ap-pcard-progress {
    margin-top: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.ap-pcard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #60a5fa);
}
.ap-empty {
    margin: 24px 32px;
    padding: 40px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    text-align: center;
    color: var(--color-text-secondary);
}
.ap-empty i { font-size: 28px; color: var(--color-yellow); margin-bottom: 10px; }
.ap-empty h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; }

/* ── Step 1: Type picker ── */
.ap-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding: 0;
}
.ap-type-card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 26px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    cursor: pointer;
    transition: transform .14s, border-color .14s, background .14s;
    overflow: hidden;
}
.ap-type-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent, var(--color-primary));
    opacity: .8;
}
.ap-type-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent, var(--color-primary));
}
.ap-type-card.is-selected {
    border-color: var(--accent, var(--color-primary));
    box-shadow: 0 0 0 2px var(--accent, var(--color-primary)) inset, 0 12px 32px rgba(0,0,0,.35);
}
.ap-type-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: var(--accent, var(--color-primary));
    font-size: 20px;
}
.ap-type-name { font-size: 18px; font-weight: 800; color: #fff; }
.ap-type-desc { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; }
.ap-type-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ap-type-tag {
    font-size: 10px; font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--color-text-secondary);
    border: 1px solid rgba(255,255,255,0.06);
}

/* ── Step 2: Scope ─ embeds the real Scope tab bubble field ──
   Body has `scope-view scope-nav-open ap-scope-mode` while in this step,
   so the existing Scope CSS lays out the bubble field. These rules hide
   the original Add Project / Finalize Scope chrome and add ours. */
body.ap-scope-mode #scopeBarAddProject,
body.ap-scope-mode #scopeBarFinalize {
    display: none !important;
}
.ap-scope-chrome {
    position: fixed;
    top: 12px;
    left: 12px; right: 12px;
    z-index: 9985;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(20,20,22,0.78);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.45);
    transition: left .35s cubic-bezier(.4,0,.2,1);
}
body.scope-nav-open .ap-scope-chrome { left: 272px; }
.ap-scope-chrome-left,
.ap-scope-chrome-right {
    display: flex; align-items: center; gap: 8px;
}
.ap-scope-chrome-spacer { flex: 1; }
.ap-scope-chrome-stepper {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--color-text-secondary);
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.ap-scope-chrome-stepper b { color: #fff; font-weight: 800; }
.ap-scope-chrome-stepper i { color: var(--color-yellow); }
.ap-scope-chrome-count {
    font-size: 12px; font-weight: 700;
    color: #cfe1ff;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.22);
    white-space: nowrap;
}
.ap-scope-chrome-count.is-zero {
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
.ap-scope-chrome-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.ap-scope-chrome-btn:hover { background: rgba(255,255,255,0.1); }
.ap-scope-chrome-btn.is-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.ap-scope-chrome-btn.is-primary:hover { filter: brightness(1.1); }
.ap-scope-chrome-btn.is-primary:disabled {
    opacity: .45;
    filter: none;
    cursor: not-allowed;
}
.ap-scope-chrome-btn.is-icon { padding: 8px 10px; }
body.ap-scope-mode .scope-filter-tabs { top: 76px !important; }
body.ap-scope-mode .selection-counter { display: none !important; }
@media (max-width: 880px) {
    .ap-scope-chrome-stepper { display: none; }
}

/* ── Step 3: Measurements ── */
.ap-meas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ap-meas-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.ap-meas-card-head {
    display: flex; align-items: center; gap: 10px;
    color: var(--color-text-secondary);
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.ap-meas-card-head i {
    color: var(--accent, var(--color-primary));
    font-size: 14px;
}
.ap-meas-input-row {
    display: flex; align-items: center; gap: 10px;
}
.ap-meas-stepper-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff; font-size: 14px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ap-meas-stepper-btn:hover {
    border-color: var(--color-primary);
    background: rgba(59,130,246,0.08);
}
.ap-meas-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .12s;
}
.ap-meas-input:focus { border-color: var(--color-primary); }
.ap-meas-unit {
    font-size: 11px; color: var(--color-text-secondary);
}
.ap-meas-hint {
    font-size: 11px;
    color: var(--color-text-secondary);
    display: inline-flex; align-items: center; gap: 6px;
}
.ap-meas-hint i { color: var(--color-warning); }

/* ── Step 4: Contractors ── */
.ap-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
}
.ap-toggle-row-text {
    display: flex; flex-direction: column; gap: 2px;
}
.ap-toggle-row-title { font-size: 13px; font-weight: 700; color: #fff; }
.ap-toggle-row-sub { font-size: 11.5px; color: var(--color-text-secondary); }
.ap-toggle {
    position: relative;
    width: 42px; height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.ap-toggle::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.ap-toggle.is-on { background: var(--color-primary); }
.ap-toggle.is-on::after { transform: translateX(18px); }

.ap-cat-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    margin-bottom: 10px;
}
.ap-cat-icon {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: var(--accent, var(--color-primary));
    flex-shrink: 0;
}
.ap-cat-name { font-size: 13.5px; font-weight: 700; color: #fff; }
.ap-cat-meta { font-size: 11.5px; color: var(--color-text-secondary); }
.ap-cat-grow { flex: 1; min-width: 0; }
.ap-cat-pick {
    min-width: 200px;
    padding: 9px 32px 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%2394a3b8' d='M0 2l4 4 4-4z'/></svg>") no-repeat right 12px center / 8px;
    color: #fff;
    font-size: 12.5px;
    appearance: none;
    cursor: pointer;
}
.ap-cat-pick:focus { border-color: var(--color-primary); outline: none; }
.ap-cat-pick option { background: #18181b; color: #fff; }
.ap-cat-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(245,158,11,0.12);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,0.25);
}
.ap-cat-status.is-set {
    background: rgba(16,185,129,0.12);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.25);
}

/* Contractor cards (Step 4 — mirrors Team contacts screen) */
.ap-cat-section {
    margin-bottom: 22px;
}
.ap-cat-section-head {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
}
.ap-cat-section-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--accent, var(--color-primary));
}
.ap-cat-section-title { font-size: 13px; font-weight: 800; color: #fff; }
.ap-cat-section-meta {
    font-size: 11px; color: var(--color-text-secondary);
    margin-left: auto;
}
.ap-contractor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.ap-contractor-card {
    position: relative;
    display: flex; gap: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    cursor: pointer;
    transition: transform .14s, border-color .14s, background .14s;
}
.ap-contractor-card:hover {
    transform: translateY(-1px);
    border-color: rgba(59,130,246,0.32);
}
.ap-contractor-card.is-selected {
    border-color: var(--color-success);
    background: linear-gradient(160deg, rgba(16,185,129,0.10), rgba(255,255,255,0.01));
    box-shadow: 0 0 0 2px var(--color-success) inset, 0 8px 22px -10px rgba(16,185,129,0.5);
}
.ap-contractor-avatar {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    font-size: 13px;
    letter-spacing: .5px;
}
.ap-contractor-body { flex: 1; min-width: 0; }
.ap-contractor-name {
    font-size: 13.5px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-contractor-meta {
    font-size: 11.5px; color: var(--color-text-secondary);
    margin-top: 2px;
    display: flex; align-items: center; gap: 8px;
}
.ap-contractor-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 6px;
}
.ap-contractor-tag {
    font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--color-text-secondary);
    border: 1px solid rgba(255,255,255,0.06);
    text-transform: uppercase;
}
.ap-contractor-card.is-selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 10px; right: 12px;
    color: var(--color-success);
    font-size: 13px;
}

/* ── Step 5: Materials ── */
.ap-mat-table-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
}
.ap-mat-row {
    display: grid;
    grid-template-columns: 36px 1.6fr 1fr 100px 110px 110px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.015);
}
.ap-mat-row.is-head {
    background: rgba(255,255,255,0.04);
    font-size: 10px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--color-text-secondary);
}
.ap-mat-row:last-child { border-bottom: none; }
.ap-mat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
    color: var(--accent, var(--color-primary));
    font-size: 13px;
}
.ap-mat-name { font-size: 13px; font-weight: 700; color: #fff; }
.ap-mat-cat  { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.ap-mat-supplier { font-size: 12px; color: #cbd5e1; }
.ap-mat-qty-wrap {
    display: flex; align-items: center; gap: 6px;
}
.ap-mat-qty {
    width: 60px;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.ap-mat-unit { font-size: 11px; color: var(--color-text-secondary); }
.ap-mat-cost { text-align: right; font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ap-mat-action {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--color-text-secondary);
    font-size: 11px; font-weight: 700;
    cursor: pointer;
}
.ap-mat-action:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.ap-mat-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(59,130,246,0.06), rgba(168,85,247,0.04));
    border: 1px solid rgba(59,130,246,0.18);
}
.ap-mat-total-cell-label { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); letter-spacing: .5px; text-transform: uppercase; }
.ap-mat-total-cell-value { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* ── Step 6: Overview ── */
.ap-ov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.ap-ov-stat {
    position: relative;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    overflow: hidden;
}
.ap-ov-stat::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent, var(--color-primary));
    opacity: .7;
}
.ap-ov-stat-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.ap-ov-stat-label i { color: var(--accent, var(--color-primary)); }
.ap-ov-stat-value {
    font-size: 22px; font-weight: 800; color: #fff;
    font-variant-numeric: tabular-nums;
}
.ap-ov-stat-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; }
.ap-ov-section-h {
    font-size: 13px; font-weight: 800;
    letter-spacing: .4px;
    color: #fff;
    margin: 22px 0 10px;
    display: flex; align-items: center; gap: 8px;
}
.ap-ov-section-h i { color: var(--color-yellow); }
.ap-comp-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 110px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ap-comp-row:last-child { border-bottom: none; }
.ap-comp-row.is-head {
    background: rgba(255,255,255,0.03);
    font-size: 10px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--color-text-secondary);
}
.ap-comp-name { font-size: 13px; font-weight: 700; color: #fff; }
.ap-comp-meta { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.ap-comp-val { font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ap-comp-mini-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
}
.ap-arv-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(59,130,246,0.10));
    border: 1px solid rgba(16,185,129,0.28);
}
.ap-arv-banner-left { display: flex; flex-direction: column; gap: 2px; }
.ap-arv-banner-eyebrow {
    font-size: 10px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: #6ee7b7;
}
.ap-arv-banner-value {
    font-size: 32px; font-weight: 800; color: #fff;
    font-variant-numeric: tabular-nums;
}
.ap-arv-banner-sub {
    font-size: 12px; color: rgba(255,255,255,0.75);
}
.ap-arv-banner-right {
    text-align: right;
}
.ap-arv-profit-label {
    font-size: 10px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.ap-arv-profit-value {
    font-size: 22px; font-weight: 800; color: var(--color-success);
    font-variant-numeric: tabular-nums;
}

/* Footer action bar (Back / Continue) */
.ap-actions-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 32px 32px;
}
.ap-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .12s;
}
.ap-btn:hover { background: rgba(255,255,255,0.08); }
.ap-btn.is-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.ap-btn.is-primary:hover { filter: brightness(1.1); }
.ap-btn.is-success {
    background: var(--color-success);
    border-color: var(--color-success);
}
.ap-btn.is-success:hover { filter: brightness(1.1); }
.ap-btn:disabled {
    opacity: .45; cursor: not-allowed;
}
.ap-section-h {
    font-size: 18px; font-weight: 800; color: #fff;
    margin-bottom: 4px;
}
.ap-section-sub {
    font-size: 12.5px; color: var(--color-text-secondary);
    margin-bottom: 18px;
}

/* ──────────────────────────────────────────────────────────────────
   V9.1: LOGIN SCREEN
   Full-screen auth overlay shown until a Supabase session exists
   (or the user explicitly chooses "Continue as guest").
   ────────────────────────────────────────────────────────────────── */
body.is-locked .app-container,
body.is-locked #v8BootPill { display: none !important; }
body:not(.is-locked) .rp-login { display: none !important; }

.rp-login {
    position: fixed; inset: 0; z-index: 99998;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 700px at 18% -12%, rgba(59,130,246,0.20), transparent 60%),
        radial-gradient(900px 600px at 110% 110%, rgba(96,165,250,0.14), transparent 55%),
        linear-gradient(180deg, #050507 0%, #0a0a0c 100%);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: rpLoginFade 320ms cubic-bezier(.2,.7,.2,1);
}
@keyframes rpLoginFade { from { opacity: 0; } to { opacity: 1; } }

.rp-login__bg-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(closest-side at 50% 40%, #000 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side at 50% 40%, #000 55%, transparent 100%);
}

.rp-login__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(20, 20, 22, 0.72);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 32px 28px;
    box-shadow:
        0 24px 60px rgba(0,0,0,0.55),
        0 1px 0 rgba(255,255,255,0.06) inset;
    transform: translateY(0);
    animation: rpLoginPop 420ms cubic-bezier(.2,.7,.2,1);
}
@keyframes rpLoginPop {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.rp-login__brand {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
}
.rp-login__brand-mark {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
    color: #fff; font-size: 19px;
    box-shadow: 0 8px 22px rgba(59,130,246,0.45),
                0 1px 0 rgba(255,255,255,0.18) inset;
}
.rp-login__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.rp-login__brand-name { font-size: 15.5px; font-weight: 700; letter-spacing: 0.01em; }
.rp-login__brand-tag  { font-size: 11.5px; color: var(--color-text-secondary); }

.rp-login__title {
    font-size: 22px; font-weight: 700;
    margin: 4px 0 4px;
    letter-spacing: -0.01em;
}
.rp-login__subtitle {
    font-size: 13px; color: var(--color-text-secondary);
    margin-bottom: 22px;
}

.rp-login__tabs {
    display: grid; grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    position: relative;
}
.rp-login__tab {
    position: relative; z-index: 2;
    font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent; border: 0; cursor: pointer;
    padding: 9px 0; border-radius: 9px;
    transition: color .2s ease;
}
.rp-login__tab.is-active { color: #fff; }
.rp-login__tab-glider {
    position: absolute; top: 4px; bottom: 4px;
    width: calc(50% - 4px);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    transition: transform .26s cubic-bezier(.2,.7,.2,1);
    z-index: 1;
    left: 4px;
}
.rp-login__tabs[data-mode="signup"] .rp-login__tab-glider {
    transform: translateX(100%);
}

.rp-login__field { margin-bottom: 12px; }
.rp-login__label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.rp-login__input-wrap { position: relative; }
.rp-login__input-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 13px; pointer-events: none;
}
.rp-login__input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    padding: 12px 12px 12px 38px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    font-family: inherit;
}
.rp-login__input::placeholder { color: rgba(148,163,184,0.6); }
.rp-login__input:focus {
    outline: none;
    border-color: rgba(59,130,246,0.6);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}
.rp-login__input:disabled { opacity: .55; cursor: not-allowed; }

.rp-login__pw-toggle {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    background: transparent; border: 0;
    color: var(--color-text-secondary);
    cursor: pointer; padding: 6px 8px;
    border-radius: 6px;
    font-size: 12.5px;
}
.rp-login__pw-toggle:hover { color: #fff; background: rgba(255,255,255,0.06); }

.rp-login__row-between {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 0 18px;
    font-size: 12px;
}
.rp-login__remember {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-text-secondary);
    cursor: pointer; user-select: none;
}
.rp-login__remember input { accent-color: var(--color-primary); }
.rp-login__forgot {
    background: none; border: 0; padding: 0;
    color: var(--color-accent);
    cursor: pointer; font: inherit; font-size: 12px;
}
.rp-login__forgot:hover { text-decoration: underline; }

.rp-login__submit {
    width: 100%;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff; font: inherit; font-weight: 600; font-size: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 11px;
    padding: 12px 16px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 22px rgba(37,99,235,0.35),
                0 1px 0 rgba(255,255,255,0.18) inset;
    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.rp-login__submit:hover { filter: brightness(1.06); }
.rp-login__submit:active { transform: translateY(1px); }
.rp-login__submit:disabled {
    opacity: .65; cursor: not-allowed;
    filter: grayscale(.2);
}
.rp-login__spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rpLoginSpin .7s linear infinite;
}
@keyframes rpLoginSpin { to { transform: rotate(360deg); } }

.rp-login__divider {
    display: flex; align-items: center; gap: 10px;
    color: rgba(148,163,184,0.55);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    margin: 18px 0 14px;
}
.rp-login__divider::before,
.rp-login__divider::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.08);
}

.rp-login__guest {
    width: 100%;
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 11px;
    padding: 11px 14px;
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rp-login__guest:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.03);
}

.rp-login__msg {
    font-size: 12.5px; line-height: 1.45;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    display: none; align-items: flex-start; gap: 8px;
}
.rp-login__msg.is-visible { display: flex; }
.rp-login__msg.is-error {
    background: rgba(239,68,68,0.10);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,0.30);
}
.rp-login__msg.is-success {
    background: rgba(16,185,129,0.10);
    color: #bbf7d0;
    border: 1px solid rgba(16,185,129,0.30);
}
.rp-login__msg.is-info {
    background: rgba(59,130,246,0.10);
    color: #c7dbff;
    border: 1px solid rgba(59,130,246,0.30);
}

.rp-login__footer {
    margin-top: 22px;
    text-align: center;
    font-size: 11.5px; color: rgba(148,163,184,0.7);
    letter-spacing: 0.02em;
}

@media (max-width: 480px) {
    .rp-login__card { padding: 28px 22px 22px; border-radius: 16px; }
    .rp-login__title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V9.1: Light theme — toggled from Settings ▸ Appearance (Night mode off)
   html[data-theme="light"] …  Default / dark unchanged when attribute absent or "dark".
════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    color-scheme: light;
    --color-background: #ececf0;
    --color-card-bg: rgba(255, 255, 255, 0.92);
    --color-sidebar-bg: rgba(248, 248, 250, 0.98);
    --color-primary: #2563eb;
    --color-secondary: #64748b;
    --color-accent: #1d4ed8;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-error: #dc2626;
    --color-yellow: #b45309;
    --color-text-primary: #1c1c1e;
    --color-text-secondary: #48484a;
    --color-border: rgba(0, 0, 0, 0.10);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .sidebar.expanded {
    background: #f2f2f7;
    border-right-color: var(--color-border);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .sidebar.expanded {
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .sidebar.pinned {
    border-right-color: rgba(0, 0, 0, 0.16);
}

html[data-theme="light"] .nav-link {
    color: rgba(28, 28, 30, 0.45);
}
html[data-theme="light"] .nav-link:hover {
    color: rgba(28, 28, 30, 0.88);
}
html[data-theme="light"] .nav-link.active {
    color: #1d4ed8;
}

html[data-theme="light"] .project-selector-chevron {
    color: var(--color-text-secondary);
}

html[data-theme="light"] .header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--color-border);
}

html[data-theme="light"] body.scope-view {
    background: #d8d8e0;
}
html[data-theme="light"] body.scope-view.scope-nav-open .sidebar {
    background: #f2f2f7;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .scope-filter-tabs {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .scope-tab {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(235, 235, 240, 0.95);
    color: #1c1c1e;
}
html[data-theme="light"] .scope-tab:hover {
    background: rgba(220, 220, 228, 0.98);
    border-color: rgba(0, 0, 0, 0.16);
}
html[data-theme="light"] .scope-tab.is-reset {
    color: rgba(28, 28, 30, 0.45);
}
html[data-theme="light"] .scope-tab.is-reset:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .scope-bottom-bar {
    background: rgba(255, 255, 255, 0.96);
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .scope-bottom-bar .scope-search-wrap input {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: #1c1c1e;
}
html[data-theme="light"] .scope-bottom-bar .scope-search-wrap input:focus {
    border-color: rgba(0, 0, 0, 0.22);
    background: #fff;
}
html[data-theme="light"] .scope-bottom-bar .scope-search-wrap .scope-search-icon {
    color: rgba(28, 28, 30, 0.45);
}
html[data-theme="light"] .scope-bottom-bar .scope-bar-btn.secondary {
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
}
html[data-theme="light"] .scope-bottom-bar .scope-bar-btn.primary {
    background: #1c1c1e;
    color: #f5f5f7;
}

html[data-theme="light"] .scope-nav-toggle {
    background: rgba(255, 255, 255, 0.94);
    color: #1c1c1e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .scope-nav-toggle:hover {
    background: #fff;
}

html[data-theme="light"] .scope-bubble-physics-host,
html[data-theme="light"] .scope-matter-canvas {
    background: #dcdce2;
}

html[data-theme="light"] .team-bottom-bar {
    background: rgba(255, 255, 255, 0.96);
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .team-bottom-bar .tbb-search-wrap input {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: #1c1c1e;
}
html[data-theme="light"] .team-bottom-bar .tbb-search-wrap input::placeholder {
    color: rgba(28, 28, 30, 0.4);
}

html[data-theme="light"] .share-bar {
    background: rgba(255, 255, 255, 0.98);
    border-top-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.12);
    color: #1c1c1e;
}
html[data-theme="light"] .share-bar-head {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .share-bar-title {
    color: #1c1c1e;
}
html[data-theme="light"] .share-bar-title i {
    color: rgba(28, 28, 30, 0.5);
}
html[data-theme="light"] .share-segmented {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .share-seg-btn {
    color: rgba(28, 28, 30, 0.55);
}
html[data-theme="light"] .share-seg-btn:hover {
    color: rgba(28, 28, 30, 0.9);
}
html[data-theme="light"] .share-seg-btn.active {
    color: #1c1c1e;
}

html[data-theme="light"] .gantt-shell {
    --g-bg: #e8e8ec;
    --g-surface: #f5f5f7;
    --g-track: #dcdce2;
    --g-row-hover: rgba(0, 0, 0, 0.04);
    --g-border: rgba(0, 0, 0, 0.10);
    color: rgba(28, 28, 30, 0.92);
}

html[data-theme="light"] .modal-overlay.active {
    background: rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .modal {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        -10px 0 30px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .settings-tab-cluster {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .settings-tab-btn {
    color: rgba(28, 28, 30, 0.55);
}
html[data-theme="light"] .settings-tab-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(28, 28, 30, 0.95);
}
html[data-theme="light"] .settings-tab-btn.active {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.10);
    color: #b45309;
}

html[data-theme="light"] .settings-content h2 {
    color: rgba(28, 28, 30, 0.92);
}
html[data-theme="light"] .settings-section-subtitle {
    color: rgba(28, 28, 30, 0.5);
}
html[data-theme="light"] .settings-section-subtitle strong {
    color: #1c1c1e !important;
}

html[data-theme="light"] .settings-overview-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .settings-overview-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.06);
}
html[data-theme="light"] .settings-overview-card .soc-title {
    color: #1c1c1e;
}
html[data-theme="light"] .settings-overview-card .soc-desc {
    color: rgba(28, 28, 30, 0.55);
}
html[data-theme="light"] .settings-overview-card .soc-stat {
    color: rgba(28, 28, 30, 0.55);
    border-top-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .settings-overview-card .soc-stat strong {
    color: #1c1c1e;
}

html[data-theme="light"] .settings-form-row {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .settings-form-row .sfr-label {
    color: #1c1c1e;
}
html[data-theme="light"] .settings-form-row .sfr-help {
    color: rgba(28, 28, 30, 0.5);
}
html[data-theme="light"] .toggle-switch {
    background: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .profile-input {
    background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .profile-input:focus {
    background: #fff;
}

html[data-theme="light"] .assign-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(37, 99, 235, 0.35);
    color: #1c1c1e;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .rp-login {
    background:
        radial-gradient(1100px 700px at 18% -12%, rgba(59, 130, 246, 0.12), transparent 60%),
        radial-gradient(900px 600px at 110% 110%, rgba(96, 165, 250, 0.08), transparent 55%),
        linear-gradient(180deg, #f2f4f8 0%, #e8ecf4 100%);
    color: #1c1c1e;
}
html[data-theme="light"] .rp-login__bg-grid {
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}
html[data-theme="light"] .rp-login__card {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
html[data-theme="light"] .rp-login__tab {
    color: var(--color-text-secondary);
}
html[data-theme="light"] .rp-login__tab.is-active {
    color: #1c1c1e;
}
html[data-theme="light"] .rp-login__tabs {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .rp-login__tab-glider {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .rp-login__input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1c1c1e;
}
html[data-theme="light"] .rp-login__input::placeholder {
    color: rgba(72, 72, 74, 0.55);
}
html[data-theme="light"] .rp-login__input:focus {
    border-color: var(--color-primary);
    background: #fff;
}
html[data-theme="light"] .rp-login__input-icon {
    color: rgba(72, 72, 74, 0.55);
}
html[data-theme="light"] .rp-login__pw-toggle:hover {
    color: #1c1c1e;
    background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .rp-login__forgot {
    color: var(--color-primary);
}
html[data-theme="light"] .rp-login__divider {
    color: rgba(72, 72, 74, 0.55);
}
html[data-theme="light"] .rp-login__divider::before,
html[data-theme="light"] .rp-login__divider::after {
    background: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .rp-login__guest {
    color: var(--color-text-secondary);
    border-color: rgba(0, 0, 0, 0.14);
}
html[data-theme="light"] .rp-login__guest:hover {
    color: #1c1c1e;
    border-color: rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .rp-login__footer {
    color: rgba(72, 72, 74, 0.65);
}