/* Lean Planning - Custom Styles */

/* Visually-hidden live region — keeps aria-live content off-screen but readable to AT. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Beta version ribbon */
.beta-ribbon {
    position: fixed;
    top: 25px;
    right: -35px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    padding: 6px 40px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.beta-ribbon.hidden {
    opacity: 0;
}

/* Page-level progress overlay (see PageProgressService) */
.lp-main-content {
    position: relative;
}

.lp-page-progress {
    position: absolute;
    top: var(--mud-appbar-height, 48px);
    left: 0;
    right: 0;
    height: 4px;
    z-index: 10;
    pointer-events: none;
}

.lp-page-progress .mud-progress-linear {
    height: 4px;
    margin: 0;
}

/* MudDataGrid toolbars — enough height for button row + search row */
.mud-table-toolbar {
    min-height: 120px !important;
}

/* Override MudBlazor's secondary text to use theme colors */
.mud-secondary-text {
    color: #64748b !important; /* Light theme - matches theme's TextSecondary */
}

.mud-theme-dark .mud-secondary-text {
    color: #94a3b8 !important; /* Dark theme - matches theme's TextSecondary */
}

html,
body {
    font-family: "Inter", "IBM Plex Sans", "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LAYOUT OVERRIDES                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* App Bar */
html.theme-light .mud-appbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.theme-dark .mud-appbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Ensure MudDataGrid toolbars have proper top spacing */
.mud-table-toolbar {
    padding-top: 20px !important;
}

/* Sentence case for toolbar buttons (workspace rule: sentence case, not uppercase) */
.mud-table-toolbar .mud-button .mud-button-label {
    text-transform: none !important;
}

/* App Bar Styles */
.app-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.app-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.title-lean {
    color: var(--mud-palette-primary);
}

.title-planning {
    opacity: 0.8;
}

/* Logistics planned — filter row: long labels + flex row caused huge cross-axis height; grid + wrap fixes it */
.logistics-planned-filters {
    min-width: 0;
}

.logistics-planned-filters .mud-toggle-group {
    max-width: 100%;
    flex-wrap: wrap !important;
    row-gap: 0.25rem;
}

/* Tree View Styles */
.planning-tree {
    font-size: 0.875rem;
}

.tree-item {
    border-radius: 6px;
    margin: 1px 0;
    transition: background-color 0.15s ease;
    /* visible so MudMenu / popovers are not clipped (overflow-hidden hid dropdown content) */
    overflow: visible;
    max-width: 100%;
}

.tree-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.01);
}

.tree-item-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* Phase card — the only visible "card" in the hierarchy */
.phase-card {
    background: var(--mud-palette-surface);
    border-radius: 8px;
}

/* Subphase row — flat with a subtle bottom divider */
.subphase-row {
    /* border-bottom: 1px solid var(--mud-palette-divider); */
}

/* Work package row — fully transparent, no container */
.wp-row {
    background: transparent;
}

/* Activity Row Styles */
.activity-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 55px 55px 85px 60px 90px 32px;
    gap: 4px;
    align-items: center;
    padding: 6px 8px;
    padding-left: 16px;
    border-radius: 6px;
    margin: 2px 0;
    background-color: var(--mud-palette-surface);
    border: 1px solid transparent;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}

.activity-row:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-row.dragging {
    opacity: 0.5;
}

.progress-click-area {
    cursor: pointer;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    padding: 4px 0;
    flex-shrink: 0;
}

.progress-click-area:hover .mud-progress-linear {
    transform: scaleY(1.5);
}

.activity-row.is-critical {
    border-left: 3px solid var(--mud-palette-error);
}

.activity-row.is-milestone {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.1);
}

/* Progress bar track - always visible light gray line */
.activity-progress-track {
    width: 40px;
    min-width: 40px;
    min-height: 6px;
    cursor: pointer;
    position: relative;
}

.activity-progress-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--mud-palette-text-disabled);
    border-radius: 4px;
    pointer-events: none;
    z-index: 0;
}

.activity-progress-track .mud-progress-linear {
    position: relative;
    z-index: 1;
}

/* Activity highlight animation for navigation */
.activity-highlight,
.item-highlight {
    animation: activity-pulse 2s ease-out;
}

@keyframes activity-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), 0.7);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.2);
    }
    30% {
        box-shadow: 0 0 0 12px rgba(var(--mud-palette-primary-rgb), 0);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.3);
    }
    60% {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), 0);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-primary-rgb), 0);
        background-color: transparent;
    }
}

/* Dependency item hover effect */
.dependency-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-not-started {
    background-color: #e5e7eb;
    color: #374151;
}
.status-in-progress {
    background-color: #dbeafe;
    color: #1d4ed8;
}
.status-completed {
    background-color: #d1fae5;
    color: #047857;
}
.status-on-hold {
    background-color: #fef3c7;
    color: #b45309;
}
.status-cancelled {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* Gantt two-panel layout */
.gantt-wrapper {
    --gantt-task-panel-width: 280px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 300px);
    overflow: hidden;
}

.gantt-header-row {
    display: flex;
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
    z-index: 10;
}

.gantt-task-panel-header {
    width: var(--gantt-task-panel-width);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.75rem;
    border-right: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.gantt-timeline-header-scroll {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.gantt-body-row {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.gantt-task-panel-body {
    width: var(--gantt-task-panel-width);
    flex-shrink: 0;
    overflow: hidden;
    border-right: 1px solid var(--mud-palette-divider);
}

.gantt-task-row {
    display: flex;
    align-items: center;
    height: 36px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background-color 0.15s ease;
}

.gantt-task-row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.018);
}

.mud-dark .gantt-task-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.025);
}

.gantt-task-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.gantt-task-row.selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.gantt-task-id-col {
    width: 40px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.gantt-wrapper.gantt-wide-panel {
    --gantt-task-panel-width: 520px;
}

.gantt-task-dur-col {
    width: 60px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    padding-right: 6px;
}

.gantt-task-date-col {
    width: 80px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
    padding-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-task-name-col {
    flex: 1;
    font-size: 0.8125rem;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gantt-swimlane-row {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 8px;
    font-weight: 600;
    font-size: 0.8125rem;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.gantt-splitter {
    width: 6px;
    cursor: col-resize;
    background-color: transparent;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    z-index: 5;
}

.gantt-splitter:hover,
.gantt-splitter.active {
    background-color: var(--mud-palette-primary);
}

.gantt-timeline-panel {
    flex: 1;
    overflow: auto;
    min-width: 0;
}

/* Alternating row stripes behind the absolutely-positioned bars.
   36px rows → stripes of 0/36/72px repeat perfectly aligned with the task panel. */
.gantt-timeline-rows {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 36px,
        rgba(0, 0, 0, 0.018) 36px,
        rgba(0, 0, 0, 0.018) 72px
    );
}

.mud-dark .gantt-timeline-rows {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 36px,
        rgba(255, 255, 255, 0.025) 36px,
        rgba(255, 255, 255, 0.025) 72px
    );
}

/* Fine horizontal grid lines at every row boundary */
.gantt-timeline-rows::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 35px,
        var(--mud-palette-divider) 35px,
        var(--mud-palette-divider) 36px
    );
    z-index: 0;
}

/* Gantt-like Timeline */
.timeline-container {
    position: relative;
}

.timeline-header {
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.timeline-month-row {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-divider);
    height: 20px;
}

.timeline-month-label {
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 4px;
    border-right: 1px solid var(--mud-palette-divider);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.timeline-week-row {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-divider);
    height: 20px;
}

.timeline-week-label {
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0 3px;
    border-right: 1px solid var(--mud-palette-divider);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.timeline-week-label.timeline-week-start-border {
    border-left: 1px solid var(--mud-palette-divider);
}

.timeline-week-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
}

.timeline-day-row {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-divider);
    min-height: 46px;
}

.timeline-day {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 2px 1px;
}

.timeline-day-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 100%;
    min-width: 0;
}

.timeline-day-stack-triple {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.timeline-day-dow,
.timeline-day-num,
.timeline-day-mon {
    font-size: 0.6rem;
    line-height: 1.05;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-day-num {
    font-size: 0.7rem;
    line-height: 1.1;
    padding: 1px 0;
}

.timeline-day.weekend {
    background-color: rgba(0, 0, 0, 0.04);
}

.timeline-day.today {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.timeline-bar {
    height: 24px;
    border-radius: 4px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.timeline-bar:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.timeline-bar.clickable {
    cursor: pointer;
}

.timeline-bar.clickable:hover {
    transform: scale(1.02);
}

.timeline-bar.baseline {
    height: 6px;
    bottom: 0;
    opacity: 0.6;
    border: 1px dashed rgba(0, 0, 0, 0.3);
}

.timeline-bar.dragging {
    opacity: 0.6;
    cursor: grabbing;
}

/* Resize handles for timeline bars */
.resize-handle {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 8px;
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

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

.resize-handle.resize-left {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    border-radius: 4px 0 0 4px;
}

.resize-handle.resize-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.5), transparent);
    border-radius: 0 4px 4px 0;
}

/* Active resize/drag state */
.timeline-bar.dragging {
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.02);
}

.timeline-bar.dragging .resize-handle {
    opacity: 1;
}

/* Resize handle hover state */
.resize-handle:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    width: 10px !important;
}

/* Progress Bar in Timeline */
.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px 0 0 4px;
}

/* Dependency Lines */
.dependency-line {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1.5;
    fill: none;
    marker-end: url(#arrow);
}

/* S-Curve Chart */
.scurve-chart {
    width: 100%;
    overflow: hidden;
}

.scurve-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
    color: var(--mud-palette-text-primary);
}

.scurve-chart .chart-text {
    fill: var(--mud-palette-text-primary);
}

.scurve-chart .chart-text-secondary {
    fill: var(--mud-palette-text-secondary);
}

.scurve-chart .chart-grid {
    stroke: var(--mud-palette-lines-default);
}

.scurve-chart .chart-legend-bg {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-lines-default);
}

.chart-line-planned {
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
    fill: none;
}

.chart-line-actual {
    stroke: var(--mud-palette-success);
    stroke-width: 2;
    fill: none;
}

.chart-line-baseline {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    fill: none;
}

/* Lookahead Grid */
.lookahead-grid {
    display: grid;
    gap: 1px;
    background-color: var(--mud-palette-divider);
}

.lookahead-cell {
    background-color: var(--mud-palette-surface);
    padding: 8px;
    min-height: 60px;
}

.lookahead-cell.header {
    font-weight: 600;
    background-color: var(--mud-palette-background);
}

.lookahead-cell.week-header {
    text-align: center;
}

/* Readiness Indicators */
.readiness-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.readiness-ready {
    background-color: #10b981;
}
.readiness-partial {
    background-color: #f59e0b;
}
.readiness-not-ready {
    background-color: #ef4444;
}
.readiness-blocked {
    background-color: #6b7280;
}

/* Conflict Panel */
.conflict-card {
    border-left: 4px solid;
    margin-bottom: 8px;
}

.conflict-low {
    border-color: #6b7280;
}
.conflict-medium {
    border-color: #f59e0b;
}
.conflict-high {
    border-color: #ef4444;
}
.conflict-critical {
    border-color: #7c3aed;
}

/* Quick Add Buttons - Only show on direct header row hover */
.quick-add-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Show menu only when hovering on the specific header row */
.tree-item-header:hover .quick-add-btn {
    opacity: 1;
}

/* Activity grouping header — a visible sub-section inside a Work Package at Large/Huge depth.
   Styled lighter than the WP header so the nesting reads at a glance, but still a real row
   so users can rename/delete/add-task via its own kebab. */
.activity-header {
    padding: 2px 4px;
    border-left: 2px solid var(--mud-palette-divider);
    margin-left: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
}
.activity-task-list {
    border-left: 2px solid var(--mud-palette-divider);
    margin-left: 4px;
}

/* Dialog Styles */
.add-item-dialog {
    min-width: 400px;
}

/* Date Picker Responsive Styles */
.full-width-picker {
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .activity-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .timeline-container {
        display: none;
    }

    .mud-dialog-content {
        padding: 12px !important;
    }
}

/* Print Styles */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider {
        display: none !important;
    }

    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Animation for loading states */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
    border-radius: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Weekend cell styling in lookahead */
.lookahead-cell.weekend {
    background-color: rgba(0, 0, 0, 0.04);
}

.lookahead-cell.today {
    border: 2px solid var(--mud-palette-primary);
}

/* Zone tree item styles */
.zone-item {
    margin-bottom: 2px;
}

/* Alert notification styles */
.alert-notification-menu .mud-menu-list {
    padding: 0 !important;
}

/* Dependency matrix styles - additional to page styles */
.dependency-cell-hover {
    transition: background-color 0.15s ease;
}

/* Commitment chip animations */
.commitment-chip {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Constraint priority badges */
.constraint-p1 {
    border-left: 4px solid var(--mud-palette-error) !important;
}
.constraint-p2 {
    border-left: 4px solid var(--mud-palette-warning) !important;
}
.constraint-p3 {
    border-left: 4px solid var(--mud-palette-info) !important;
}
.constraint-p4 {
    border-left: 4px solid var(--mud-palette-dark) !important;
}

/* Material requirement delivery status indicators */
.delivery-pending {
    color: var(--mud-palette-info);
}
.delivery-delayed {
    color: var(--mud-palette-error);
}
.delivery-partial {
    color: var(--mud-palette-warning);
}
.delivery-complete {
    color: var(--mud-palette-success);
}

/* Timeline critical path */
.timeline-bar.critical {
    box-shadow: 0 0 0 2px var(--mud-palette-error);
}

.timeline-bar.milestone {
    width: 24px !important;
    height: 24px;
    transform: rotate(45deg);
    border-radius: 0;
}

/* Project card hover effects */
.project-card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Drag and drop states */
.tree-item.dragging {
    opacity: 0.5;
}

.tree-item.drag-over {
    border-color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-primary-hover) !important;
}

/* Activity drag-and-drop placeholder */
.activity-drop-placeholder {
    height: 36px;
    padding: 6px 8px;
    margin: 2px 0;
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 6px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.drag-handle {
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.activity-row:hover .drag-handle {
    opacity: 0.5;
}

.activity-row:hover .drag-handle:hover {
    opacity: 1;
}

.activity-row.dragging .drag-handle {
    cursor: grabbing;
    opacity: 1;
}

/* Cursor pointer for inline editing */
.cursor-pointer {
    cursor: pointer;
}

.hover-underline:hover {
    text-decoration: underline;
}

.delivery-row .row-action-delete {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.delivery-row:hover .row-action-delete {
    opacity: 1;
}

/* Empty state actionable prompts */
.empty-state-actionable {
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.empty-state-actionable:hover {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* Alert severity backgrounds */
.alert-critical {
    background-color: rgba(239, 68, 68, 0.1) !important;
}
.alert-error {
    background-color: rgba(239, 68, 68, 0.08) !important;
}
.alert-warning {
    background-color: rgba(245, 158, 11, 0.08) !important;
}
.alert-info {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

/* Activity Status Strips - Color-coded left border */
.activity-row {
    position: relative;
    padding-left: 20px !important; /* Make room for status strip */
}

.activity-status-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 4px 0 0 4px;
}

.status-strip-not-started {
    background: var(--mud-palette-text-secondary);
}

.status-strip-in-progress {
    background: var(--mud-palette-info);
}

.status-strip-completed {
    background: var(--mud-palette-success);
}

.status-strip-blocked {
    background: var(--mud-palette-warning);
}

.status-strip-critical {
    background: var(--mud-palette-error);
    animation: pulse-critical 2s infinite;
}

@keyframes pulse-critical {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Swipe gesture visual feedback */
.activity-row.swiping-right {
    background-color: rgba(var(--mud-palette-success-rgb), 0.1);
    transform: translateX(10px);
}

.activity-row.swiping-left {
    background-color: rgba(var(--mud-palette-info-rgb), 0.1);
    transform: translateX(-10px);
}

/* Mobile touch feedback */
@media (max-width: 768px) {
    .activity-row {
        touch-action: pan-y;
        transition:
            transform 0.15s ease,
            background-color 0.15s ease;
    }

    .activity-row::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        opacity: 0;
        transition: opacity 0.15s ease;
    }
}

/* Dependency lines in tree view */
.dependency-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 6px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    border-radius: 10px;
}

.dependency-indicator .mud-icon {
    font-size: 0.875rem;
}

/* Health score indicator */
.health-score {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
}

.health-excellent {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
}
.health-good {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
}
.health-fair {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}
.health-poor {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #b91c1c;
}

/* Sparkline mini-charts */
.sparkline-container {
    display: inline-flex;
    align-items: flex-end;
    height: 24px;
    gap: 1px;
}

.sparkline-bar {
    width: 3px;
    background: var(--mud-palette-primary);
    border-radius: 1px;
    transition: height 0.3s ease;
}

.sparkline-bar.current {
    background: var(--mud-palette-info);
}

/* Resource utilization bars */
.utilization-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-gray-lighter);
    overflow: hidden;
}

.utilization-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.utilization-bar-fill.low {
    background: #10b981;
}
.utilization-bar-fill.medium {
    background: #f59e0b;
}
.utilization-bar-fill.high {
    background: #ef4444;
}

/* Quick log floating button */
.quick-log-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Celebration animation for milestones */
@keyframes celebrate {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.milestone-complete {
    animation: celebrate 0.6s ease-in-out;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 9999;
    animation: confetti-fall 3s ease-in-out forwards;
}

/* Due this week widget */
.due-this-week-widget {
    border-radius: 12px;
    overflow: hidden;
}

.due-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background-color 0.15s ease;
}

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

.due-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.due-item.overdue {
    background-color: rgba(239, 68, 68, 0.05);
    border-left: 3px solid #ef4444;
}

.due-item.due-today {
    background-color: rgba(245, 158, 11, 0.05);
    border-left: 3px solid #f59e0b;
}

/* Timeline swimlanes */
.swimlane {
    border-bottom: 2px solid var(--mud-palette-divider);
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.swimlane-header {
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Learn more links */
.learn-more-link {
    font-size: 0.75rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.learn-more-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Weekend warning badge */
.weekend-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* Conflict resolution suggestion cards */
.resolution-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.resolution-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resolution-card.recommended {
    border-color: var(--mud-palette-success);
    background: rgba(16, 185, 129, 0.05);
}

/* Resource check-in/out status */
.resource-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.resource-status-badge.checked-in {
    background: #d1fae5;
    color: #047857;
}

.resource-status-badge.checked-out {
    background: #e5e7eb;
    color: #6b7280;
}

/* Photo attachment thumbnail */
.photo-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--mud-palette-divider);
    transition: transform 0.2s ease;
}

.photo-thumbnail:hover {
    transform: scale(1.1);
    z-index: 10;
}

/* Photo upload area */
.photo-upload-area {
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.photo-upload-area:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

/* Daily checklist styles */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.checklist-item.checked {
    background: rgba(16, 185, 129, 0.1);
    text-decoration: line-through;
    opacity: 0.7;
}

.checklist-item:hover:not(.checked) {
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

/* Drag and Drop Styles for Configuration */
.activity-status-row {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.activity-status-row:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.activity-status-row:active {
    cursor: grabbing !important;
}

.mud-drop-zone {
    min-height: 100px;
}

.mud-drop-item-preview {
    opacity: 0.6;
    border: 2px dashed var(--mud-palette-primary) !important;
}

/* Attachment drop zone styles */
.drop-zone {
    transition: all 0.2s ease;
}

.drop-zone:hover {
    border-color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
}

.drop-zone-active {
    border-color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    transform: scale(1.01);
}

/* File upload drop zone container */
.file-drop-container {
    position: relative;
    display: block;
    cursor: pointer;
}

.file-drop-container .file-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.file-drop-container .mud-paper {
    transition: all 0.2s ease;
    border-color: var(--mud-palette-divider);
}

.file-drop-container:hover .mud-paper {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.file-drop-container.drag-over .mud-paper {
    border-color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.2);
}

/* Planning Page View Toggle - compact list/timeline switcher */
.view-toggle {
    flex-shrink: 0;
}

.view-toggle .mud-toggle-item {
    padding: 4px 10px !important;
    min-width: unset !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BADGE OVERFLOW FIXES - Prevent badges from being clipped                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* AppBar - Allow badge to overflow */
.mud-appbar {
    overflow: visible !important;
}

.mud-appbar .mud-toolbar {
    overflow: visible !important;
}

/* Tab panels - Allow badge on tabs to overflow */
.mud-tabs {
    overflow: visible !important;
}

.mud-tabs-header {
    overflow: visible !important;
}

.mud-tabs-tabbar {
    overflow: visible !important;
}

.mud-tab {
    overflow: visible !important;
}

/* MudTabPanel renders BadgeData as a MudBadge with Overlap=true + Origin=TopRight,
   which by default puts the pill half outside the tab edge so it visually floats in
   the gap between tabs (looks "outside the tab"). Anchor it inside the tab corner
   instead. !important is needed to win against MudBlazor's own transform. */
.mud-tabs .mud-tab .mud-badge.mud-badge-overlap {
    transform: none !important;
    inset-inline-start: auto !important;
    inset-inline-end: 6px !important;
    inset-block-start: 6px !important;
    inset-block-end: auto !important;
}

/* Some MudBlazor versions still use right/top rather than logical insets — cover both. */
.mud-tabs .mud-tab .mud-badge.mud-badge-overlap.mud-badge-origin-top-right {
    right: 6px !important;
    top: 6px !important;
}

/* Reserve a little padding on the right edge of badged tabs so the badge can't
   crash into the tab label, especially on narrow tab widths. */
.mud-tabs .mud-tab:has(.mud-badge.mud-badge-overlap) {
    padding-right: 36px !important;
}

/* Navigation drawer badges - Allow badges to overflow horizontally */
.mud-appbar {
    overflow: visible !important;
}

.mud-appbar .mud-toolbar {
    overflow: visible !important;
}

/* Navigation menu - Remove scrollbar from nested sub-menus */
.mud-nav-group .mud-navmenu {
    max-height: none !important;
}

/* Badge positioning */
.mud-badge {
    overflow: visible !important;
}

.mud-badge-root {
    overflow: visible !important;
} /* ═══════════════════════════════════════════════════════════════════════════ */
/* GOOGLE PLACES AUTOCOMPLETE                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Take Photo / Camera capture dialog - fit content correctly */
.camera-capture-dialog .mud-dialog-content {
    padding: 16px 24px;
    overflow: visible;
}

.camera-capture-dialog .camera-container {
    min-width: 0;
    max-width: 100%;
}

/* Hide the "powered by Google" attribution in the address autocomplete dropdown */
.pac-container:after {
    background-image: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HELP CENTER STYLING                                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Help content markdown rendering - uses MudBlazor CSS variables for theming */
.help-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

.help-content h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 0;
    color: var(--mud-palette-text-primary);
}

.help-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 0.5rem;
}

.help-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--mud-palette-text-primary);
}

.help-content p {
    margin-bottom: 1rem;
    color: var(--mud-palette-text-primary);
}

.help-content ul,
.help-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--mud-palette-text-primary);
}

.help-content li {
    margin-bottom: 0.5rem;
}

.help-content strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.help-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.help-content a:hover {
    text-decoration: underline;
}

/* Code styling */
.help-content code {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    color: var(--mud-palette-text-primary);
}

.help-content pre {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.help-content pre code {
    background: none;
    border: none;
    padding: 0;
}

/* Blockquote styling */
.help-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Table styling */
.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.help-content th,
.help-content td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.5rem;
    text-align: left;
}

.help-content th {
    background-color: var(--mud-palette-surface);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.help-content td {
    color: var(--mud-palette-text-primary);
}

/* Image styling */
.help-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Horizontal rule */
.help-content hr {
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    margin: 1.5rem 0;
}

/* ── Snackbar undo countdown bar ── */
.snackbar-countdown {
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    overflow: hidden;
}

.snackbar-countdown-fill {
    height: 100%;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    animation: snackbar-countdown 5s linear forwards;
}

@keyframes snackbar-countdown {
    from { width: 100%; }
    to { width: 0%; }
}

/* Issue tracker — board + preview drawer (GitHub-style) */
.issues-board {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: flex-start;
}

.issues-board-column {
    flex: 0 0 280px;
    max-width: 320px;
    min-height: 120px;
}

/* Issue board — visible drop zones (idle + MudBlazor drag classes) */
.issues-board .issues-board-dropzone.mud-drop-zone {
    min-height: 180px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.mud-theme-dark .issues-board .issues-board-dropzone.mud-drop-zone {
    background-color: rgba(255, 255, 255, 0.04);
}

.issues-board .board-zone-can-drop {
    border-color: var(--mud-palette-primary) !important;
    border-style: solid !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb), 0.35);
}

.issues-board .board-zone-no-drop {
    border-color: var(--mud-palette-error) !important;
    border-style: dashed !important;
    background-color: rgba(var(--mud-palette-error-rgb), 0.08) !important;
    opacity: 0.92;
}

.issue-board-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.issue-board-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mud-theme-dark .issue-board-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.lp-issue-drawer.mud-drawer,
.lp-issue-drawer.mud-drawer--open {
    width: min(900px, 100vw) !important;
    max-width: 100vw !important;
}

/* Issue detail drawer — two-row toolbar */
.issue-detail-toolbar .issue-detail-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(100%, 28rem);
}

.issue-toolbar-title-block {
    flex: 1 1 12rem;
    min-width: 0;
    justify-content: flex-start;
}

.issue-toolbar-row1-end {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.issue-toolbar-row-secondary {
    row-gap: 0.5rem;
}

.issue-toolbar-row2-actions {
    min-width: 0;
    align-items: center;
}

/* Match heights and icon scale between close split and edit groups (outlined small) */
.issue-detail-toolbar .issue-toolbar-row-secondary .issue-toolbar-row2-btn-group.mud-button-group-root {
    align-self: center;
}

.issue-detail-toolbar .issue-toolbar-row-secondary .issue-toolbar-row2-btn-group.mud-button-group-root .mud-button-root,
.issue-detail-toolbar .issue-toolbar-row-secondary .issue-toolbar-row2-btn-group.mud-button-group-root .mud-icon-button-root {
    min-height: 30px;
}

.issue-detail-toolbar .issue-toolbar-row-secondary .issue-toolbar-row2-btn-group .mud-icon-root {
    font-size: 1.125rem !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
}

.issue-detail-toolbar .issue-toolbar-row-secondary .issue-toolbar-row2-btn-group .mud-icon-root svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

.issue-toolbar-pill.mud-button-root,
.issue-toolbar-pill .mud-button-label {
    text-transform: none;
}

.issue-toolbar-pill.mud-button-root {
    border-radius: 9999px;
    padding-left: 14px;
    padding-right: 10px;
}

.issue-toolbar-text-btn.mud-button-root,
.issue-toolbar-text-btn .mud-button-label {
    text-transform: none;
}

.issue-toolbar-pill-chip.mud-chip {
    border-radius: 9999px;
}

@media (max-width: 600px) {
    .issue-detail-toolbar .issue-toolbar-row-primary {
        flex-direction: column;
        align-items: stretch !important;
    }

    .issue-detail-toolbar .issue-toolbar-title-block {
        width: 100%;
    }

    .issue-detail-toolbar .issue-toolbar-row1-end {
        width: 100%;
        justify-content: flex-start;
    }

    .issue-detail-toolbar .issue-toolbar-drawer-close {
        margin-left: auto;
    }

    .issue-detail-toolbar .issue-toolbar-row-secondary {
        flex-direction: column;
        align-items: stretch !important;
    }

    .issue-detail-toolbar .issue-toolbar-row2-actions {
        justify-content: flex-end;
    }

    .issue-detail-toolbar .issue-toolbar-close-split {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-end;
    }

    .issue-detail-toolbar .issue-toolbar-row2-edit-group {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Issue board — drag handle visible on card hover (MudDropContainer) */
.issue-board-card .issue-board-drag-handle {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.issue-board-card:hover .issue-board-drag-handle {
    opacity: 1;
}

/* Subtle in-flight indicator while the server confirms a status change. */
.issue-board-card {
    position: relative;
}

.issue-board-card--in-flight {
    opacity: 0.75;
    pointer-events: none;
}

.issue-board-card-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px !important;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Issue attachment thumbnail cards */
.issue-thumb-card {
    width: 140px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.issue-thumb-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.issue-thumb-card-visual {
    position: relative;
    cursor: pointer;
}

.issue-thumb-card-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 255, 255, 0.92) !important;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.issue-thumb-card:hover .issue-thumb-card-delete,
.issue-thumb-card-delete:focus-visible {
    opacity: 1;
}

.issue-thumb-card-visual img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.issue-thumb-card-sm {
    width: 100px;
}

.issue-thumb-card-sm .issue-thumb-card-visual img {
    height: 72px;
}

.issue-thumb-label {
    display: block;
    padding: 4px 6px;
    max-width: 100%;
    font-size: 0.75rem;
    cursor: pointer;
}

/* GitHub-style issue / comment attachment strip. The strip is rendered inside a
   MudFileUpload's ActivatorContent; the hidden native <input type="file"> is stretched
   across the strip (see .issue-attachment-upload-input) so clicking anywhere opens the
   OS file picker and drag-and-drop targets the input directly. */
.issue-attachment-upload {
    position: relative;
    width: 100%;
}

.issue-attachment-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
}

.issue-attachment-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.issue-attachment-strip:hover {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.drop-zone-active.issue-attachment-strip {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* Comment-draft strip: tinted amber so users notice files are pending
   and won't persist until "Add comment" is clicked. */
.issue-attachment-strip--draft {
    border-color: var(--mud-palette-warning);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.04);
}

.issue-attachment-strip--draft:hover {
    border-color: var(--mud-palette-warning-darken);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.1);
}

.drop-zone-active.issue-attachment-strip--draft {
    border-color: var(--mud-palette-warning-darken);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.15);
}

/* Fullscreen inline-preview dialog (PDF / plain text / CSV / JSON / XML):
   make the iframe fill the dialog body. */
.issue-inline-preview-frame {
    width: 100%;
    height: calc(100vh - 140px);
    min-height: 400px;
    background-color: var(--mud-palette-surface);
    border-radius: 4px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MATERIALS PAGE — FROZEN (STICKY) COLUMNS                                    */
/* Hierarchy (expand/collapse) column + Name column stay pinned while the grid */
/* scrolls sideways. Uses positional (:nth-child) selectors because            */
/* MudBlazor's HierarchyColumn does not reliably forward CellClass.            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* First cell: hierarchy toggle (>) */
.materials-frozen-grid table > thead > tr > th:nth-child(1),
.materials-frozen-grid table > tbody > tr > td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* Second cell: Material name */
.materials-frozen-grid table > thead > tr > th:nth-child(2),
.materials-frozen-grid table > tbody > tr > td:nth-child(2) {
    position: sticky;
    left: 48px;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    min-width: 260px;
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}

/* Header cells must sit above body cells when both are sticky */
.materials-frozen-grid table > thead > tr > th:nth-child(1),
.materials-frozen-grid table > thead > tr > th:nth-child(2) {
    z-index: 3;
    background-color: var(--mud-palette-background-gray);
}

/* Preserve hover tint on pinned cells.
   `--mud-palette-table-hover` is semi-transparent (rgba overlay) so using it
   as background-color would let the scrolling columns bleed through the
   frozen pane. Layer it on top of the opaque surface color via background-image
   so the base stays solid and the tint reads correctly. */
.materials-frozen-grid table > tbody > tr:hover > td:nth-child(1),
.materials-frozen-grid table > tbody > tr:hover > td:nth-child(2) {
    background-color: var(--mud-palette-surface);
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}

/* Dark theme shadow is slightly stronger */
.mud-theme-dark .materials-frozen-grid table > tbody > tr > td:nth-child(2),
.mud-theme-dark .materials-frozen-grid table > thead > tr > th:nth-child(2) {
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.45);
}

/* Expanded child rows + group rows span the full width via colspan —
   don't pin those cells, otherwise they collapse to 48/260px and overlap the
   frozen columns.                                                              */
.materials-frozen-grid table > tbody > tr > td[colspan] {
    position: static !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
}

/* Group header — keep both MudBlazor's native expand button and the label
   pinned to the left of the scroll container so the toggle + text stay visible
   while the row scrolls horizontally. We stick the INNER elements (not the td)
   because the colspan td fights with MudBlazor's sticky-column nth-child rules.
   The expander sits at left:0 and the label offsets by its width (~32px). */
.materials-frozen-grid td.mud-datagrid-group .mud-table-row-expander {
    position: sticky;
    left: 4px;
    background-color: var(--mud-palette-background-gray);
    z-index: 2;
}

.materials-frozen-grid td.mud-datagrid-group .materials-group-label {
    position: sticky;
    left: 36px;
    display: inline-flex;
    align-items: center;
    padding-right: 12px;
    background-color: var(--mud-palette-background-gray);
    z-index: 1;
}

/* Expanded-material child panel: "Per-area breakdown" + "Requirements".
   Shrink tables to content width so narrow 2-3-column datasets don't stretch
   across 1600px of grid width creating huge gaps. Nowrap on numeric cells
   keeps values on one line; the name column takes remaining slack. */
/* Subtle tint on the entire expanded child cell so it reads as a distinct
   "drawer" beneath the parent material row, while the inner tables stay on
   the brighter surface color and pop against this background. */
.materials-frozen-grid td.mud-table-child-content {
    background-color: var(--mud-palette-background-gray) !important;
}

.materials-frozen-grid .mud-table-body > tr:hover > td.mud-table-child-content {
    background-color: var(--mud-palette-gray-light) !important;
}

.materials-child-panel {
    padding: 8px 16px 10px 40px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.8125rem;
}

.materials-child-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.materials-child-table,
.materials-child-table .mud-table-container,
.materials-child-table table {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    background-color: var(--mud-palette-surface) !important;
    font-size: 0.8125rem;
}

.materials-child-table {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Inline-block on the wrapper makes the whole MudSimpleTable shrink-wrap to
   its content instead of stretching to the section's full width. */
.materials-child-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.materials-child-table th,
.materials-child-table td {
    white-space: nowrap;
    padding: 2px 12px !important;
    line-height: 1.35;
    height: auto !important;
}

.materials-child-table th {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

.materials-child-table th.col-num,
.materials-child-table td.col-num {
    text-align: right;
}

.materials-child-table th.col-name,
.materials-child-table td.col-name {
    min-width: 180px !important;
    white-space: normal;
}

.materials-child-table .mud-typography-body2 {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.materials-child-table .mud-typography-caption {
    font-size: 0.6875rem;
    line-height: 1.2;
}

.materials-child-table .mud-chip-size-small {
    height: 18px;
    font-size: 0.6875rem;
}

/* The nested MudSimpleTables inside an expanded material row are descendants
   of .materials-frozen-grid, so the freeze-col rules above (which use a
   descendant combinator on `table`) also pin their first/second cells and
   clamp them to 48/260px. Reset all that here so the inner tables flow
   normally. */
.materials-child-panel table > thead > tr > th,
.materials-child-panel table > tbody > tr > td {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Delivery workflow dialogs: shared shell for schedule, receive, and actual route forms. */
.delivery-workflow-dialog .mud-dialog-title {
    padding-bottom: 8px;
}

.delivery-workflow-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delivery-workflow-title-row,
.delivery-workflow-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.delivery-workflow-summary {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.delivery-workflow-content {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 4px;
}

.delivery-workflow-section {
    padding: 16px;
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
}

.delivery-workflow-section + .delivery-workflow-section {
    margin-top: 12px;
}

.delivery-workflow-form-grid {
    display: grid;
    gap: 12px;
}

.delivery-workflow-form-grid .delivery-workflow-section {
    margin-top: 0;
}

.delivery-workflow-section-wide {
    grid-column: 1 / -1;
}

.delivery-workflow-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.delivery-workflow-table-scroll {
    overflow-x: auto;
}

.delivery-workflow-table-scroll table {
    min-width: 720px;
}

.delivery-workflow-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.delivery-workflow-actions .delivery-workflow-back {
    margin-right: auto;
}

.delivery-workflow-stepper .mud-stepper-content {
    min-width: 0;
}

@media (min-width: 960px) {
    .delivery-workflow-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .delivery-workflow-content {
        max-height: calc(100vh - 180px);
    }

    .delivery-workflow-section {
        padding: 12px;
    }
}