/* ================================================================
   CONSOLIDATED STYLES - Sitelogic Application
   All styling combined into a single file.
   ================================================================ */

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

/* ================================================================
   SECTION 1: CORE DESIGN SYSTEM
   ================================================================ */

/* ==================== MACHINERY PAGE STYLES ==================== */
/* Concept 1: Compact List with Variation 1: Right-Aligned Buttons */

/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Primary Brand Colors */
    --primary-blue: #3458D5;
    --primary-blue-hover: #2a48b5;
    --brand: var(--primary-blue);
    --brand-light: #4a6ee0;
    --brand-subtle: rgba(52, 88, 213, 0.06);
    --brand-glow: rgba(52, 88, 213, 0.12);

    /* Semantic Colors */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-glow: rgba(16, 185, 129, 0.08);
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;

    /* Gray Scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Semantic Aliases */
    --text-gray: var(--gray-500);
    --text-dark: var(--gray-800);
    --border-color: var(--gray-200);
    --bg-light: #f8f9fb;
    --bg-page: #f5f5f7;
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;

    /* Shadows — softer, more modern */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);

    /* Border Radius — larger for modern feel */
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Transitions */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== DARK THEME VARIABLES ==================== */
/* Color System: Landing page dark aesthetic */
[data-theme="dark"] {
    /* Primary Brand — Softer blue for warm dark backgrounds */
    --primary-blue: #6b9eff;
    --primary-blue-hover: #89b4ff;
    --brand: var(--primary-blue);
    --brand-light: #5a8be6;
    --brand-subtle: rgba(107, 158, 255, 0.1);
    --brand-glow: rgba(107, 158, 255, 0.12);

    /* Semantic Colors — slightly muted for warm palette */
    --success: #34d399;
    --success-light: rgba(52, 211, 153, 0.12);
    --success-glow: rgba(52, 211, 153, 0.1);
    --warning: #f5c542;
    --warning-light: rgba(245, 197, 66, 0.12);
    --danger: #ef7b7b;
    --danger-light: rgba(239, 123, 123, 0.12);

    /* Gray Scale — Warm, Notion/Claude-inspired dark surfaces */
    --gray-50: #191919;     /* page bg */
    --gray-100: #202020;    /* surface, cards */
    --gray-200: #2e2e2e;    /* border-default */
    --gray-300: #3b3b3b;    /* border-emphasis */
    --gray-400: #5c5c5c;    /* fg-subtle */
    --gray-500: #8a8a8a;    /* fg-muted */
    --gray-600: #ababab;    /* fg-secondary */
    --gray-700: #d4d4d4;    /* fg-default */
    --gray-800: #e0e0e0;    /* fg-default */
    --gray-900: #eeeeee;    /* fg-on-emphasis */

    /* Semantic Aliases */
    --text-gray: #8a8a8a;
    --text-dark: #ececec;
    --border-color: rgba(255, 255, 255, 0.09);
    --bg-light: #202020;
    --bg-page: #191919;
    --bg-primary: #202020;
    --bg-secondary: #262626;

    /* Shadows — softer, less harsh */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    letter-spacing: -0.01em;
}

/* ==================== PAGE LAYOUT ==================== */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    padding-bottom: 5rem;
}

/* ==================== TABS ==================== */
.tabs-container {
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-gray);
    font-size: 0.938rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}

.tab:hover {
    color: var(--text-dark);
}

.tab.active {
    color: var(--text-dark);
    font-weight: 600;
    border-bottom: 2.5px solid var(--text-dark);
}

.tab-count {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--bg-light);
    border-radius: 12px;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.tab.active .tab-count {
    background: var(--text-dark);
    color: white;
}

/* ==================== FORM CARD (Desktop Container) ==================== */
.form-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
    .form-card {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        background: transparent;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .form-card {
        max-width: calc(100% - 32px);
    }
}

/* ==================== CARD COMPONENT ==================== */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.card--elevated {
    box-shadow: var(--shadow-md);
    border: none;
}

.card--flat {
    border: none;
    box-shadow: none;
    background: var(--bg-light);
}

.card__header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 var(--space-1) 0;
}

.card__subtitle {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin: 0;
}

.card__body {
    flex: 1;
}

.card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Dark mode */
[data-theme="dark"] .card {
    background: #202020;
    border-color: #2e2e2e;
}

[data-theme="dark"] .card--flat {
    background: #191919;
}

[data-theme="dark"] .card__header,
[data-theme="dark"] .card__footer {
    border-color: #2e2e2e;
}

/* ==================== SEARCH BAR ==================== */
.search-container {
    position: relative;
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    color: var(--text-dark);
    min-height: 48px;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.search-input::placeholder {
    color: var(--text-gray);
}

.search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    pointer-events: none;
}

/* ==================== TAB CONTENT ==================== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* ==================== MACHINERY CARDS (Monday.com Style) ==================== */
/* Machinery Grid Layout */
.machinery-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 600px) {
    .machinery-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .machinery-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Machinery Card - gallery/drawing blend */
.machinery-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.machinery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

/* Image at top of card (like sitelog gallery) */
.machinery-card-image-top {
    position: relative;
    overflow: hidden;
}

.machinery-card-image-top .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border-radius: 0;
    transition: opacity 0.2s;
}

.machinery-card-image-top .card-image:hover {
    opacity: 0.9;
    transform: none;
}

.machinery-card-no-image {
    width: 100%;
    height: 200px;
    background: var(--gray-100, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400, #9ca3af);
}

/* Status badges overlaid on image */
.machinery-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.machinery-card-badges .monday-pill {
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Card body (drawing-card style) */
.machinery-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.machinery-card-header {
    margin-bottom: 12px;
}

.machinery-card-type {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.machinery-card-number {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* Detail rows (drawing-card style) */
.machinery-card-details {
    flex: 1;
}

.machinery-card-detail {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.machinery-card-detail:last-child {
    border-bottom: none;
}

.machinery-card-label {
    font-weight: 500;
    color: var(--gray-400);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.machinery-card-value {
    font-weight: 500;
    color: var(--gray-800);
    text-align: right;
}

.machinery-highlight-green {
    color: #00c875;
}

/* Edit photo button on image */
.machinery-card-edit-photo {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.machinery-card-image-top:hover .machinery-card-edit-photo {
    opacity: 1;
}

.machinery-card-edit-photo:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Always show on no-image cards */
.machinery-card-image-top:has(.machinery-card-no-image) .machinery-card-edit-photo {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
    color: var(--gray-500);
}

.machinery-card-image-top:has(.machinery-card-no-image) .machinery-card-edit-photo:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Monday pills (shared) */
.monday-pill {
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.monday-pill.status-active {
    background: #e5f8ed;
    color: #00854d;
}

.monday-pill.status-inducted {
    background: #cce5ff;
    color: #0073ea;
}

.monday-pill.status-pending {
    background: #fff4e6;
    color: #ff6900;
}

.monday-pill.status-offhired {
    background: #f5f6f8;
    color: #676879;
}

/* Card Header Layout */
.card-header {
    margin-bottom: 1rem;
}

.card-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.card-number {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.card-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Action Buttons */
.card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--gray-100);
}

/* Legacy card inner layout (used by materials, cutting-sheets) */
.monday-card-inner {
    display: flex;
}

.monday-color-bar {
    width: 4px;
    flex-shrink: 0;
    border-radius: 4px 0 0 4px;
}

.monday-color-bar.status-active {
    background: #00c875;
}

.monday-color-bar.status-blue {
    background: var(--primary-blue);
}

.monday-color-bar.status-pending {
    background: #fdab3d;
}

.monday-color-bar.status-offhire {
    background: #676879;
}

.monday-content {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
}

.card-image-section {
    flex-shrink: 0;
}

.card-main-info {
    flex: 1;
    min-width: 0;
}

.card-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.card-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-info-label {
    font-size: 0.6875rem;
    color: var(--gray-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-info-value {
    font-size: 0.875rem;
    color: var(--text-dark);
    font-weight: 500;
}

.action-btn {
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: inherit;
}

.btn-inducted {
    background: #00c875;
    color: white;
}

.btn-inducted:hover {
    background: #00b067;
    transform: scale(1.02);
}

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

.btn-primary-blue:hover {
    background: var(--primary-blue-hover);
    transform: scale(1.02);
}

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

.btn-offhire:hover {
    background: var(--primary-blue-hover);
    transform: scale(1.02);
}

.btn-delete {
    background: white;
    color: #e44258;
    border: 1.5px solid #c5c7d0;
}

.btn-delete:hover {
    border-color: #e44258;
    background: #fff0f3;
}

/* Subtle icon-only delete button */
.btn-delete-icon {
    background: transparent;
    color: var(--gray-400);
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.btn-delete-icon:hover {
    background: var(--danger-light);
    color: var(--danger);
}

/* Small Remove Button for Settings */
.btn-remove {
    background: var(--danger-light);
    color: var(--danger);
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.813rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-remove:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: var(--danger);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

/* Toggle Pills for Settings */
.toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.813rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid var(--gray-200);
    background: var(--gray-100);
    color: var(--gray-500);
    user-select: none;
}

.toggle-pill:hover {
    background: var(--gray-200);
    border-color: var(--gray-300);
}

.toggle-pill.active {
    background: #dbeafe;
    color: var(--primary-blue);
    border-color: #3b82f6;
}

.toggle-pill.active:hover {
    background: #bfdbfe;
    border-color: #2563eb;
}

.toggle-pill.active::before {
    content: "✓";
    font-weight: 700;
    font-size: 0.75rem;
}

.pills-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.pills-label {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-right: 0.25rem;
}

/* Consistent Checkbox Styling */
input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
}

/* Checkbox Styling */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-blue);
    margin: 0;
}

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-dark);
}

.checkbox-label:hover {
    color: var(--primary-blue);
}

/* Responsive */
@media (max-width: 640px) {
    .card-actions {
        justify-content: stretch;
    }

    .action-btn {
        flex: 1;
        justify-content: center;
    }

    .machinery-card-image-top .card-image {
        height: 180px;
    }

    .machinery-card-no-image {
        height: 140px;
    }
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--gray-300);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.empty-state-text {
    font-size: 14px;
    color: var(--gray-500);
}

.empty-state svg {
    margin: 0 auto 16px;
    opacity: 0.5;
}

.empty-state h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.938rem;
}

/* ==================== LOADING SPINNER ==================== */
.loading-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 24px;
    color: var(--gray-500);
}

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

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

/* ==================== SKELETON LOADING ==================== */
/* Per-page skeleton primitives that reuse real container classes
   (.stock-item, .prestart-row, .drawing-card, .log-item) so each skeleton
   sits in the same visual envelope as the data that replaces it.
   Rule: skeleton = waiting for data; spinner = action in progress. */

.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;
}

.skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        var(--gray-100) 0%,
        var(--gray-200) 50%,
        var(--gray-100) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background: var(--gray-100); }
}

.skeleton-host { pointer-events: none; }

/* Line primitives */
.skeleton-line          { height: 12px; margin: 6px 0; width: 100%; }
.skeleton-line--lg      { height: 18px; }
.skeleton-line--sm      { height: 10px; }
.skeleton-line--w-25    { width: 25%; }
.skeleton-line--w-40    { width: 40%; }
.skeleton-line--w-50    { width: 50%; }
.skeleton-line--w-60    { width: 60%; }
.skeleton-line--w-75    { width: 75%; }

/* Stock row primitives (matches .stock-thumb, .stock-item-qty dimensions) */
.skeleton-stock-thumb { width: 50px; height: 50px; border-radius: 6px; flex-shrink: 0; }
.skeleton-stock-qty   { width: 50px; height: 24px; border-radius: 6px; flex-shrink: 0; }

/* Prestart row primitives */
.skeleton-prestart-id    { width: 80px; height: 14px; border-radius: 4px; margin-bottom: 6px; }
.skeleton-prestart-badge { width: 64px; height: 24px; border-radius: 12px; }
.skeleton-prestart-btn   { width: 80px; height: 32px; border-radius: 8px; }

/* Drawing card thumb (16:9 placeholder) */
.skeleton-drawing-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 12px; }

/* Generic badges / pills (log row, etc.) */
.skeleton-badge       { width: 80px; height: 22px; border-radius: 11px; display: inline-block; }
.skeleton-pill        { width: 60px; height: 18px; border-radius: 9px; display: inline-block; margin-right: 6px; }
.skeleton-log-actions { width: 90px; height: 32px; border-radius: 8px; }

/* Detail view (standalone *-view.html pages) */
.skeleton-detail__header {
    height: 64px;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
}
.skeleton-detail__section {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
}

/* ==================== FAB BUTTON ==================== */
.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35 0%, #f15a24 100%);
    color: white;
    border: none;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.5);
    transition: all 0.2s;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(255, 107, 53, 0.7);
    background: linear-gradient(135deg, #ff5722 0%, #e74c1c 100%);
}

.fab:active {
    transform: scale(1.05);
}

/* ==================== MODAL ==================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
    background: white;
    z-index: 1;
    border-radius: 16px 16px 0 0;
}

.modal-header-content {
    flex: 1;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin: 0;
    font-weight: 400;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: 1rem;
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--text-dark);
}

.modal-body {
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--gray-200);
    background: white;
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
}

.modal-footer-actions {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}


.form-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 6px;
    margin-bottom: 8px;
}

/* ==================== FORM STYLES ==================== */
.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f3f4f6;
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-group {
    margin-bottom: 1rem;
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-row .form-group {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.label-icon {
    display: none;
}

.optional-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--gray-100);
    color: var(--text-gray);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 100px;
    margin-left: 0.5rem;
}

.required-badge {
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 600;
}

.input-wrapper {
    position: relative;
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-dark);
    min-height: 48px;
    box-sizing: border-box;
}

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

.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    cursor: pointer;
    height: 48px;
    line-height: 1.7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

input[type="date"].form-input {
    height: 48px;
    padding: 0.625rem 1rem;
    line-height: 1.7;
}

.select-chevron {
    display: none;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.form-input::placeholder {
    color: var(--gray-400);
}

.form-help {
    color: var(--text-gray);
    font-size: 0.813rem;
    margin-top: 0;
    margin-bottom: 0.875rem;
    line-height: 1.5;
}

.btn-camera {
    width: 100%;
    padding: 1rem;
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    background: var(--gray-50);
    color: var(--primary-blue);
    font-size: 0.938rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.btn-camera:hover {
    background: white;
    border-color: var(--primary-blue);
    border-style: solid;
}

.camera-icon {
    width: 20px;
    height: 20px;
}

.btn-cancel {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    background: white;
    color: var(--text-dark);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.btn-cancel:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.btn-submit {
    flex: 2;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 10px;
    background: var(--primary-blue);
    color: white;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-submit:hover {
    background: var(--primary-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.3);
}

.btn-submit:active {
    transform: translateY(0);
}

/* Image preview in form */
.image-preview-container {
    position: relative;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-50);
}

.preview-image {
    width: 100%;
    display: block;
    max-height: 280px;
    object-fit: cover;
}

.preview-actions {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.preview-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: var(--text-dark);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.preview-btn:hover {
    background: var(--gray-50);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.preview-btn-remove {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

.preview-btn-remove:hover {
    border-color: #ef4444;
    background: var(--danger-light);
}

.preview-btn-retake {
    color: var(--primary-blue);
}

/* ==================== LIGHTBOX ==================== */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20001;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 28px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    line-height: 1;
    font-family: inherit;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* ==================== NOTIFICATIONS/TOASTS ==================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

.toast {
    background: #10b981;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
    min-width: 250px;
    max-width: 400px;
    font-size: 0.938rem;
}

.toast.error {
    background: #dc2626;
}

.toast.warning {
    background: #f59e0b;
}

.toast.info {
    background: #3b82f6;
}

/* ==================== STICKY FOOTER ==================== */
.sticky-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 1.5rem;
    padding: 1rem;
    background: white;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}

.sticky-footer-buttons {
    display: flex;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
}

.sticky-footer .btn {
    flex: 1;
}

/* Add padding to content when sticky footer is present */
.has-sticky-footer {
    padding-bottom: 6rem !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .page-container {
        padding: 16px;
        padding-bottom: 5rem;
    }

    .card-detail-label {
        min-width: 80px;
    }

    .fab {
        bottom: 1rem;
        right: 1rem;
    }
}

@media (max-width: 640px) {
    .tab {
        flex-shrink: 0;
    }
}

/* ==================== CUTTING SHEETS SPECIFIC STYLES ==================== */

/* Sheet Lists */
#sheetsList,
#searchResults,
#pipeSearchResults {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Upload Area */
.upload-area {
    background: white;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.upload-area:hover {
    border-color: var(--primary-blue);
    background: #f0f4f8;
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
}

.upload-area.dragging {
    border-color: var(--primary-blue);
    background: #dbeafe;
    border-style: solid;
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
}

/* File List Items */
.file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border: none;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.file-list-item:hover {
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

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

.file-name {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.813rem;
    color: var(--text-gray);
}

.file-remove {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-remove:hover {
    background: var(--danger-light);
}

/* Upload Button */
#uploadBtn {
    width: 100%;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: var(--primary-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
    font-family: inherit;
}

#uploadBtn:hover:not(:disabled) {
    background: var(--primary-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

#uploadBtn:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
    transform: none;
}

/* General Button Styles */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

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

.btn-primary:hover:not(:disabled) {
    background: var(--primary-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(52, 88, 213, 0.35);
}

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

.btn-primary:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

.btn-danger {
    background: var(--danger-light);
    color: var(--danger);
    border: none;
}

.btn-danger:hover:not(:disabled) {
    background: #fecaca; /* danger-light hover */
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger, #ef4444);
    border: 1.5px solid var(--danger, #ef4444);
}

.btn-danger-outline:hover:not(:disabled) {
    background: var(--danger-light, #fee2e2);
}

.btn-success {
    background: var(--success);
    color: white;
    border: none;
}

.btn-success:hover:not(:disabled) {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.btn-outline {
    background: white;
    color: var(--text-dark);
    border: 1.5px solid var(--gray-200);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: var(--brand-subtle);
    transform: translateY(-1px);
}

.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border: none;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gray-200);
    transform: translateY(-1px);
}

.btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 8px;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.btn-block {
    width: 100%;
    display: flex;
}

/* Progress Bar */
#uploadProgress {
    margin-top: 1.5rem;
}

#uploadProgress .progress-container {
    background: var(--border-color);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

#uploadProgress .progress-bar {
    background: linear-gradient(90deg, var(--brand-light), var(--brand));
    height: 100%;
    transition: width 0.3s;
}

#progressText {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Sheet Items */
.sheet-item {
    background: white;
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.sheet-item:hover {
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

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

.sheet-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-top: 0.5rem;
}

.sheet-meta > span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sheet-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

/* Sheet Action Buttons */
/* Sheet Action Buttons — uses standard .btn classes */

/* Pipe Cards */
.pipe-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.pipe-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.pipe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pipe-mark {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
}

.pipe-details {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-gray);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

.badge-green {
    background: var(--success-light);
    color: #065f46;
}

.badge-gray {
    background: var(--gray-100);
    color: var(--gray-700);
}

.badge-orange {
    background: #fed7aa;
    color: #9a3412;
}

.badge-red {
    background: var(--danger-light);
    color: #991b1b;
}

/* Empty State, Loading State, Spinner — see core definitions above */


.issue-item strong {
    color: #92400e;
    display: block;
    margin-bottom: 0.25rem;
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1rem;
}

table thead {
    background: var(--gray-50);
}

table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-500);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
}

table td {
    padding: 0.875rem 1rem;
    color: var(--text-dark);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
}

table tbody tr {
    transition: background 0.15s ease;
}

table tbody tr:hover {
    background: var(--gray-50);
}

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

/* Mobile Responsive for Cutting Sheets */
@media (max-width: 768px) {
    .upload-area {
        padding: 2rem 1rem;
    }
    
    .file-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .file-info {
        width: 100%;
    }
    
    .sheet-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .sheet-actions {
        flex-direction: column;
    }
    
    .sheet-actions button {
        width: 100%;
        justify-content: center;
    }
    
    /* Sticky footer for mobile - use fixed positioning */
    .sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        background: white;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        z-index: 100;
    }
    
    .sticky-footer-buttons {
        flex-direction: column;
    }
    
    .sticky-footer .btn {
        width: 100%;
    }
    
    .has-sticky-footer {
        padding-bottom: 8rem !important;
    }
    
}

/* Add these styles to your machinery-styles.css file */

/* Audits Container */
.audits-container {
    padding: 20px;
}

.audits-header {
    margin-bottom: 24px;
}

.audits-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.audits-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    line-height: 1.5;
}

/* Audit Card */
.audit-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 16px;
    align-items: start;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.audit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

/* Image Section */
.audit-image-section {
    width: 120px;
    height: 120px;
}

.audit-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    background: var(--gray-100);
}

.audit-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

/* Info Section */
.audit-info-section {
    flex: 1;
    min-width: 0;
}

.audit-machine-info {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.audit-machine-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.audit-machine-number {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
}

.audit-machine-model {
    font-size: 14px;
    color: var(--gray-500);
}

.audit-serial {
    font-size: 13px;
    color: var(--gray-500);
    font-family: 'Courier New', monospace;
}

.audit-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audit-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.audit-detail-row.audit-highlight {
    background: #f0fdf4;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 4px -12px;
}

.audit-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
}

.audit-value {
    font-size: 14px;
    color: var(--gray-800);
}

.audit-value-old {
    font-size: 14px;
    color: var(--gray-500);
    text-decoration: line-through;
}

.audit-value-new {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
}

/* Actions Section */
.audit-actions-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
}

.audit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.audit-btn-accept {
    background: var(--success);
    color: white;
}

.audit-btn-accept:hover {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.audit-btn-reject {
    background: var(--gray-100);
    color: var(--gray-500);
    border: 1px solid var(--gray-200);
}

.audit-btn-reject:hover {
    background: var(--danger-light);
    color: var(--danger);
    border-color: #fecaca;
}

.audit-btn:active {
    transform: translateY(0);
}

.audit-btn svg {
    width: 18px;
    height: 18px;
}

/* Error State */
.error-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--danger);
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .audit-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .audit-image-section {
        width: 100%;
        height: 200px;
    }
    
    .audit-card-image,
    .audit-card-image-placeholder {
        height: 200px;
    }
    
    .audit-actions-section {
        flex-direction: column;
        width: 100%;
    }
    
    .audit-btn {
        width: 100%;
    }
    
    .audit-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .audits-container {
        padding: 12px;
    }
    
    .audit-card {
        padding: 12px;
    }
    
    .audit-machine-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Add this to your machinery-styles.css file */

/* Tabs container with share button */

/* Share for Audit button */
.btn-share-audit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-share-audit:hover {
    background: linear-gradient(135deg, #5568d3 0%, #63397d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-share-audit:active {
    transform: translateY(0);
}

.btn-share-audit svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Mobile responsive */
@media (max-width: 768px) {
    
    .btn-share-audit {
        width: 100%;
        justify-content: center;
    }
    
    .btn-share-audit span {
        display: inline;
    }
}

@media (max-width: 480px) {
    .btn-share-audit span {
        display: none;
    }
    
    .btn-share-audit {
        padding: 10px;
        width: auto;
    }
}


/* ================================================================
   SECTION 2: HEADER OVERRIDES (disable legacy header)
   ================================================================ */

/* ==================== HEADER OVERRIDE ====================
   Disables ALL old header and breadcrumb styles from styles.css
   ========================================================= */

/* Hide old header completely */
.app > .header {
    display: none !important;
}

.header {
    all: unset !important;
    display: none !important;
}

.header-content {
    all: unset !important;
    display: none !important;
}

.header-logo {
    all: unset !important;
    display: none !important;
}

.header-text {
    all: unset !important;
    display: none !important;
}

.header h1,
.header h2 {
    all: unset !important;
    display: none !important;
}

/* Hide old breadcrumb completely */
.app > .breadcrumb-container {
    display: none !important;
}

.breadcrumb-container {
    all: unset !important;
    display: none !important;
}

/* Remove any global breadcrumb styles */
body .breadcrumb {
    all: unset !important;
}

/* Hide old project switcher */
.project-switcher-btn {
    display: none !important;
}

/* Ensure clean slate for new header */
#app-header {
    display: block;
}

#app-header * {
    box-sizing: border-box;
}


/* ================================================================
   SECTION 3: HEADER COMPONENT
   ================================================================ */

/* ==================== HEADER COMPONENT STYLES ==================== */
/* Clean & Minimal Design - EXACT MATCH */

/* ==================== MAIN HEADER CONTAINER ==================== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--gray-200);
}

/* ==================== HEADER TOP SECTION ==================== */
.header-top {
    background: transparent;
}

.header-content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
    max-width: 100%;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    flex: 1;
}

/* ==================== LOGO ==================== */
.header-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s;
    cursor: pointer;
}

.header-logo-link:hover {
    opacity: 0.8;
}

.header-logo-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.header-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* ==================== COMPANY NAME ==================== */
.header-company-name {
    color: var(--text-dark);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== PROJECT SELECTOR ==================== */
.header-project-selector {
    position: relative;
    flex-shrink: 0;
}

.project-selector-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.2s;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 0 1.25rem;
    border-radius: 10px;
    font-size: 0.938rem;
    font-weight: 500;
    max-width: 240px;
    min-width: 160px;
    height: 44px;
}

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

.project-name-display {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    transition: opacity 0.3s ease;
}

.chevron-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ==================== HEADER ACTIONS (right-side button group) ==================== */
.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ==================== THREE-DOT MENU ==================== */
.header-menu-wrapper {
    position: relative;
}

.header-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    color: var(--text-gray);
    padding: 0;
    border-radius: 10px;
    width: 44px;
    height: 44px;
}

.header-menu-btn:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.header-menu-btn:active {
    transform: scale(0.92);
}

.header-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 1000;
    animation: dropdownFadeIn 0.15s ease;
}

.header-dropdown.active {
    display: block;
}

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

.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
    text-decoration: none;
    line-height: 1;
}

.header-dropdown-item:hover {
    background: var(--bg-light);
}

.header-dropdown-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-gray);
}

.header-dropdown-item:hover .header-dropdown-icon {
    color: var(--primary-blue);
}

.header-dropdown-divider {
    height: 1px;
    background: var(--gray-100);
    margin: 4px 0;
}

.header-dropdown-item-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.header-dropdown-item-danger:hover .header-dropdown-icon {
    color: #dc2626;
}

/* Theme label & icon toggling */
.theme-icon-dark,
.theme-label-dark {
    display: none;
}

.theme-icon-light,
.theme-label-light {
    display: block;
}

[data-theme="dark"] .theme-icon-dark,
[data-theme="dark"] .theme-label-dark {
    display: block;
}

[data-theme="dark"] .theme-icon-light,
[data-theme="dark"] .theme-label-light {
    display: none;
}

/* ==================== BREADCRUMBS ==================== */
.header-breadcrumb {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem; /* Ensures proper vertical alignment */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray);
    line-height: 1.25rem; /* Match parent line height */
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}

.breadcrumb-item:first-child {
    margin-left: 0; /* Ensure first item has no left margin */
    padding-left: 0; /* Ensure first item has no left padding */
}

.breadcrumb-item a {
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.25rem; /* Consistent line height */
}

.breadcrumb-item a:hover {
    color: var(--primary-blue);
}

.breadcrumb-item.active {
    color: var(--text-dark);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--text-gray);
    user-select: none;
    line-height: 1.25rem; /* Match for alignment */
}

.breadcrumb-icon {
    width: 14px; /* EXACT size from original */
    height: 14px; /* EXACT size from original */
    flex-shrink: 0;
    display: block; /* Ensures no inline spacing issues */
    margin: 0; /* No margin */
    padding: 0; /* No padding */
}

/* ==================== PROJECT MODAL ==================== */
.project-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.project-modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.project-modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 540px;
    max-height: 80vh;
    min-height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: slideUpModal 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* View containers for slide transitions */
.project-list-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 400px;
    background: white;
    border-radius: 16px;
}

.project-create-view {
    display: none;
    flex-direction: column;
    width: 100%;
    min-height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-radius: 16px;
    z-index: 1;
}

.project-list-view.slide-out-up {
    animation: slideOutUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.project-list-view.slide-in-down {
    animation: slideInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.project-create-view.slide-in-up {
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.project-create-view.slide-out-down {
    animation: slideOutDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.project-modal-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

.project-modal-header-content {
    flex: 1;
}

.project-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.project-modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin: 0;
    font-weight: 400;
}

.project-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 1rem;
}

.project-modal-close:hover {
    background: var(--gray-100);
    color: var(--primary-blue);
}

.project-modal-search-section {
    position: relative;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.project-search-icon {
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    pointer-events: none;
}

.project-modal-search {
    width: 100%;
    height: 48px;
    padding: 0 1rem 0 2.75rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    color: var(--text-dark);
    transition: all 0.2s;
}

.project-modal-search:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.project-modal-search::placeholder {
    color: var(--gray-400);
}

.project-modal-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}

/* Create form specific body */
.project-create-view .project-modal-body {
    padding: 1.5rem 2rem 2rem;
}

.project-modal-item {
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.938rem;
    color: var(--text-dark);
    border-radius: 8px;
    margin-bottom: 0.25rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    font-weight: 500;
}

.project-modal-item:hover {
    background: var(--gray-50);
}

.project-modal-item.selected {
    background: var(--primary-blue);
    color: white;
    font-weight: 600;
}

.project-modal-item.hidden {
    display: none;
}

.project-check-icon {
    width: 20px;
    height: 20px;
    color: white;
    flex-shrink: 0;
}

.project-modal-footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.project-create-footer {
    display: flex;
    gap: 0.75rem;
}

.project-modal-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.project-modal-btn-new {
    background: white;
    color: var(--primary-blue);
    border: 1.5px solid var(--primary-blue);
}

.project-modal-btn-new:hover {
    background: #f0f4f8;
    transform: translateY(-1px);
}

.project-modal-btn-back {
    flex: 1;
    background: white;
    color: var(--text-dark);
    border: 1.5px solid var(--gray-200);
}

.project-modal-btn-back:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.project-modal-btn-create {
    flex: 2;
    background: var(--primary-blue);
    color: white;
}

.project-modal-btn-create:hover {
    background: var(--primary-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25);
}

@media (max-width: 480px) {
    .project-modal-btn {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
}

/* Form styles for create project */
.project-create-view .form-group {
    margin-bottom: 1.5rem;
}

.project-create-view .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
}

.project-create-view .label-icon {
    flex-shrink: 0;
    color: var(--text-gray);
}

.project-create-view .required-badge {
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 600;
}

.project-create-view .form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    color: var(--text-dark);
    transition: all 0.2s;
}

.project-create-view .form-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.project-create-view .form-input::placeholder {
    color: var(--gray-400);
}

.project-create-view .form-help {
    color: var(--text-gray);
    font-size: 0.813rem;
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 639px) {
    .header-company-name {
        display: none;
    }
    
    .header-menu-btn {
        width: 36px;
        height: 36px;
    }

    .project-selector-btn {
        min-width: 120px;
        max-width: 180px;
    }

    /* Ensure breadcrumb aligns with logo on mobile */
    .header-content-wrapper {
        padding: 1rem 1rem;
        gap: 0.5rem;
    }
    
    .header-breadcrumb {
        padding: 0.75rem 1rem; /* Match header padding on mobile */
    }
}

@media (min-width: 640px) {
    .logout-text {
        display: inline;
    }
}

/* ==================== MOBILE FULL-SCREEN MODAL ==================== */

@media (max-width: 768px) {
    .project-modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .project-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .project-list-view,
    .project-create-view {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    .project-modal-header {
        flex-shrink: 0 !important;
    }

    .project-modal-search-section {
        flex-shrink: 0 !important;
    }

    .project-modal-footer {
        flex-shrink: 0 !important;
    }

    .project-modal-body {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
    
    /* Prevent keyboard from opening on modal open */
    .project-modal-search {
        font-size: 16px !important; /* Prevents iOS zoom */
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Prevent zoom on focus on iOS (all screen sizes) */
.project-modal-search {
    font-size: 16px !important;
}

/* ==================== SMART SORT DIVIDER ==================== */

.project-list-divider {
    margin: 0.75rem auto;
    height: 1px;
    background: var(--gray-200);
    width: 80%;
    max-width: 300px;
}

/* Mobile divider */
@media (max-width: 768px) {
    .project-list-divider {
        margin: 1rem auto;
        width: 85%;
    }
}

/* ==================== DARK THEME OVERRIDES ==================== */
/*
 * GitHub Dark Default Color System
 * https://primer.style/primitives/stacks/color/dark
 *
 * Canvas (page bg):     #191919
 * Surface (cards):      #202020
 * Hover:                #262626
 * Active/pressed:       #262626
 * Border:               #2e2e2e
 * Border muted:         #262626
 * Text primary:         #e0e0e0
 * Text secondary:       #ababab
 * Text muted:           #8a8a8a
 * Text subtle:          #5c5c5c
 * Accent:               #6b9eff (blue)
 * Success:              #34d399
 * Warning:              #fbbf24
 * Danger:               #ef7b7b
 *
 * Dark-mode SVG arrow for selects:
 *   stroke=%238a8a8a  (URL-encoded muted gray)
 */

/* ---- Base ---- */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background: #191919;
    color: #e0e0e0;
}

[data-theme="dark"] .app {
    background: #191919;
}

/* ---- Header ---- */
[data-theme="dark"] .app-header {
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .header-top {
    background: transparent;
}

[data-theme="dark"] .header-logo-wrapper {
    background: transparent;
    border-radius: 10px;
}

[data-theme="dark"] .header-logo-wrapper.has-png-logo {
    background: white;
}

[data-theme="dark"] .header-company-name {
    color: #e0e0e0;
}

[data-theme="dark"] .project-selector-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .project-selector-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #6b9eff;
    color: #6b9eff;
}

[data-theme="dark"] .header-menu-btn {
    color: #8a8a8a;
}

[data-theme="dark"] .header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #6b9eff;
}

[data-theme="dark"] .header-dropdown {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .header-dropdown-item {
    color: #e0e0e0;
}

[data-theme="dark"] .header-dropdown-item:hover {
    background: #262626;
}

[data-theme="dark"] .header-dropdown-icon {
    color: #8a8a8a;
}

[data-theme="dark"] .header-dropdown-divider {
    background: #2e2e2e;
}

[data-theme="dark"] .header-dropdown-item-danger:hover {
    background: rgba(239, 123, 123, 0.1);
    color: #ef7b7b;
}

[data-theme="dark"] .header-dropdown-item-danger:hover .header-dropdown-icon {
    color: #ef7b7b;
}

[data-theme="dark"] .header-breadcrumb {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* ---- Forms & Inputs ---- */
[data-theme="dark"] .search-input,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .issue-comment,
[data-theme="dark"] .item-row input,
[data-theme="dark"] .pipe-row input,
[data-theme="dark"] .prompt-textarea,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] #ai-prompt-textarea,
[data-theme="dark"] .dynamic-field-wrapper textarea,
[data-theme="dark"] .add-location-section input,
[data-theme="dark"] .login-code-input {
    background: #191919;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .issue-comment:focus,
[data-theme="dark"] .issue-type-select:focus,
[data-theme="dark"] .prompt-textarea:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] #ai-prompt-textarea:focus,
[data-theme="dark"] .dynamic-field-wrapper textarea:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .search-input::placeholder,
[data-theme="dark"] .prompt-textarea::placeholder,
[data-theme="dark"] .form-textarea::placeholder,
[data-theme="dark"] #ai-prompt-textarea::placeholder,
[data-theme="dark"] .dynamic-field-wrapper textarea::placeholder {
    color: #5c5c5c;
}

[data-theme="dark"] .form-section {
    border-bottom-color: #2e2e2e !important;
}

/* Selects — use background shorthand to prevent double arrow */
[data-theme="dark"] .form-select {
    background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .form-select:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

[data-theme="dark"] .issue-type-select {
    background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .filter-select {
    background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] select option {
    background: #202020;
    color: #e0e0e0;
}

/* Drawings filter dark mode */
[data-theme="dark"] .drawings-filter {
    background: #202020;
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .drawings-filter select {
    background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .drawings-filter select:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

/* Action modal dark mode */
[data-theme="dark"] .action-modal-body input[type="date"],
[data-theme="dark"] .action-modal-body select,
[data-theme="dark"] .action-modal-body textarea {
    background: #191919;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .action-modal-body select {
    background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}

[data-theme="dark"] .action-modal-body input:focus,
[data-theme="dark"] .action-modal-body select:focus,
[data-theme="dark"] .action-modal-body textarea:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

[data-theme="dark"] .action-modal-body label {
    color: #ababab;
}

[data-theme="dark"] .form-group label {
    color: #ababab;
}

/* Preview form elements */
[data-theme="dark"] .preview-form {
    background: #191919;
    --preview-text-primary: #e0e0e0;
    --preview-text-secondary: #8a8a8a;
    --preview-background: #191919;
}

[data-theme="dark"] .preview-input-field,
[data-theme="dark"] .preview-radio-option,
[data-theme="dark"] .preview-checkbox-option,
[data-theme="dark"] .preview-upload-area {
    background: #191919;
    border-color: #2e2e2e;
    color: #e0e0e0;
}

/* ---- Cards (Surface) ---- */
[data-theme="dark"] .selection-card,
[data-theme="dark"] .machinery-card,
[data-theme="dark"] .sheet-item,
[data-theme="dark"] .pipe-card,
[data-theme="dark"] .file-list-item,
[data-theme="dark"] .audit-card,
[data-theme="dark"] .location-item,
[data-theme="dark"] .history-card,
[data-theme="dark"] .sf-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .store-card,
[data-theme="dark"] .match-card,
[data-theme="dark"] .completion-card,
[data-theme="dark"] .register-item,
[data-theme="dark"] .setup-card,
[data-theme="dark"] .zone-card,
[data-theme="dark"] .test-card,
[data-theme="dark"] .drawing-card,
[data-theme="dark"] .swms-task-item,
[data-theme="dark"] .gallery-item,
[data-theme="dark"] .search-result-item {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: none;
}

[data-theme="dark"] .selection-card:hover,
[data-theme="dark"] .machinery-card:hover,
[data-theme="dark"] .sheet-item:hover,
[data-theme="dark"] .pipe-card:hover,
[data-theme="dark"] .file-list-item:hover,
[data-theme="dark"] .audit-card:hover,
[data-theme="dark"] .action-card:hover,
[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .drawing-card:hover,
[data-theme="dark"] .gallery-item:hover,
[data-theme="dark"] .location-item:hover,
[data-theme="dark"] .store-card:hover,
[data-theme="dark"] .match-card:hover,
[data-theme="dark"] .register-item:hover,
[data-theme="dark"] .zone-card:hover,
[data-theme="dark"] .test-card:hover,
[data-theme="dark"] .setup-card:hover,
[data-theme="dark"] .completion-card:hover,
[data-theme="dark"] .history-card:hover {
    background: #2a2a2a;
    border-color: #3b3b3b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ---- Containers / Sections (Surface) ---- */
[data-theme="dark"] .panel {
    background: #202020;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .panel-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #e0e0e0;
}

[data-theme="dark"] .panel-body {
    background: #202020;
}

[data-theme="dark"] .items-section {
    border-color: #2e2e2e;
    background: #191919;
}

[data-theme="dark"] .items-header {
    color: #e0e0e0;
}

[data-theme="dark"] .prestarts-list,
[data-theme="dark"] .itps-list,
[data-theme="dark"] .stock-list,
[data-theme="dark"] .workers-table,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .email-group,
[data-theme="dark"] .email-group-content,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .logs-card,
[data-theme="dark"] .progress-dashboard,
[data-theme="dark"] .completed-meta-item,
[data-theme="dark"] .upload-section,
[data-theme="dark"] .filter-section,
[data-theme="dark"] .prompt-section,
[data-theme="dark"] .preview-section,
[data-theme="dark"] .preview-form-header,
[data-theme="dark"] .preview-form-title,
[data-theme="dark"] .preview-signatures,
[data-theme="dark"] .preview-signatures-toggle,
[data-theme="dark"] .week-header,
[data-theme="dark"] .stat,
[data-theme="dark"] .issue-modal-pipe-info {
    background: #202020;
    color: #e0e0e0;
}

[data-theme="dark"] .email-preview {
    background: #262626;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .stat-label {
    color: #8a8a8a;
}

/* Dark mode: editable preview elements */
[data-theme="dark"] .preview-editable:hover {
    background: rgba(107, 158, 255, 0.08);
    outline-color: rgba(107, 158, 255, 0.3);
}

[data-theme="dark"] .preview-inline-input {
    background: #191919;
    border-color: #5a8be6;
    color: #e0e0e0;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

[data-theme="dark"] .preview-delete-section-btn,
[data-theme="dark"] .preview-delete-field-btn {
    color: #8a8a8a;
}

[data-theme="dark"] .preview-delete-section-btn:hover,
[data-theme="dark"] .preview-delete-field-btn:hover {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

/* ---- Prestart-row / History rows (used by prestarts, access register, ITPs) ---- */
[data-theme="dark"] .prestart-row {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .prestart-row:hover {
    background: #262626;
}

[data-theme="dark"] .prestart-date .date-main {
    color: #e0e0e0;
}

[data-theme="dark"] .prestart-date .date-time {
    color: #8a8a8a;
}

[data-theme="dark"] .prestart-signatures {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

/* ---- Entry rows (access register entries modal) ---- */
[data-theme="dark"] .entry-row {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .entry-num {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

[data-theme="dark"] .entry-sig {
    background: #191919;
    border-color: #2e2e2e;
}

/* ---- Asset register accordion dark mode ---- */
[data-theme="dark"] .register-accordion {
    border-bottom-color: #2e2e2e;
    background: var(--bg-primary);
}

[data-theme="dark"] .register-accordion .prestart-row:hover {
    background: #262626;
}

[data-theme="dark"] .register-entries {
    background: #191919;
}

[data-theme="dark"] .register-entry-card {
    background: var(--bg-secondary, #1e1e1e);
    border-bottom-color: #262626;
}

[data-theme="dark"] .register-entry-card:hover {
    background: #262626;
}

[data-theme="dark"] .register-entry-name {
    color: #e0e0e0;
}

[data-theme="dark"] .register-entry-meta {
    color: #8a8a8a;
}

[data-theme="dark"] .register-entry-times {
    color: #c0c0c0;
}

[data-theme="dark"] .register-time-sep {
    color: #3b3b3b;
}

[data-theme="dark"] .register-noout {
    color: #6b6b6b;
}

[data-theme="dark"] .register-entry-chevron {
    color: #5c5c5c;
}

[data-theme="dark"] .register-entry-card:hover .register-entry-chevron {
    color: #8a8a8a;
}

[data-theme="dark"] .asset-category-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #8a8a8a;
}

[data-theme="dark"] .register-empty-assets {
    color: #5c5c5c;
}

[data-theme="dark"] .accordion-chevron {
    color: #5c5c5c;
}

[data-theme="dark"] .location-freq-label {
    color: #5c5c5c;
}

[data-theme="dark"] .register-entry-thumb {
    border-color: #2e2e2e;
}

[data-theme="dark"] .register-comment-highlight {
    color: #ef7b7b;
}

[data-theme="dark"] .settings-row {
    background: #191919;
}

/* ---- Modals (Surface + border + shadow for elevation) ---- */
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .project-modal-overlay,
[data-theme="dark"] .issue-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-dialog,
[data-theme="dark"] .issue-modal,
[data-theme="dark"] .ai-prompt-modal-content,
[data-theme="dark"] .action-modal,
[data-theme="dark"] #finishModal .modal-content {
    background: #202020;
    border: 1px solid #2e2e2e;
    overflow: hidden;
}

[data-theme="dark"] .project-modal-content {
    background: #202020;
    border: 1px solid #2e2e2e;
    overflow: hidden;
}

[data-theme="dark"] .project-list-view,
[data-theme="dark"] .project-create-view {
    background: #202020;
    border: none;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-actions,
[data-theme="dark"] .signature-modal-footer,
[data-theme="dark"] .ai-prompt-modal-footer,
[data-theme="dark"] .project-modal-header,
[data-theme="dark"] .project-modal-footer {
    background: #202020;
    border-color: #2e2e2e;
}

/* Project Modal */
[data-theme="dark"] .project-modal-search {
    background: #191919;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .project-modal-search:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

[data-theme="dark"] .project-modal-item {
    color: #e0e0e0;
}

[data-theme="dark"] .project-modal-item:hover {
    background: #262626;
}

[data-theme="dark"] .project-modal-item.selected {
    background: rgba(107, 158, 255, 0.1);
    color: #6b9eff;
}

[data-theme="dark"] .project-modal-btn-new {
    background: transparent;
    color: #6b9eff;
    border-color: #6b9eff;
}

[data-theme="dark"] .project-modal-btn-new:hover {
    background: rgba(107, 158, 255, 0.1);
}

[data-theme="dark"] .project-modal-btn-back {
    background: transparent;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .project-modal-btn-back:hover {
    background: #262626;
}

[data-theme="dark"] .project-modal-btn-create:hover {
    box-shadow: 0 4px 16px rgba(107, 158, 255, 0.3);
}

[data-theme="dark"] .project-create-view .form-input {
    background: #191919;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .project-create-view .form-help {
    color: #8a8a8a;
}

/* Issue modal */
[data-theme="dark"] .issue-modal-header {
    background: rgba(239, 123, 123, 0.1);
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .issue-modal-header h3 {
    color: #ef7b7b;
}

[data-theme="dark"] .issue-modal-close:hover {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

[data-theme="dark"] .issue-modal-pipe-info strong {
    color: #e0e0e0;
}

/* Dark theme - Duplicate File Modal */
[data-theme="dark"] .duplicate-modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .duplicate-modal {
    background: #191919;
    border: 1px solid #2e2e2e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .duplicate-modal-header {
    background: rgba(251, 191, 36, 0.1);
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .duplicate-modal-header h3 {
    color: #fbbf24;
}

[data-theme="dark"] .duplicate-modal-close:hover {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .duplicate-modal-description {
    color: #8a8a8a;
}

[data-theme="dark"] .duplicate-file-item {
    background: #202020;
    border-color: #2e2e2e;
}

[data-theme="dark"] .duplicate-file-name {
    color: #e0e0e0;
}

[data-theme="dark"] .duplicate-modal-footer {
    border-top-color: #2e2e2e;
}

[data-theme="dark"] .btn-duplicate-cancel {
    background: #2e2e2e;
    color: #e0e0e0;
    border-color: #3e3e3e !important;
}

[data-theme="dark"] .btn-duplicate-cancel:hover {
    background: #3e3e3e;
}

/* ---- Dropdowns (Surface + border + shadow) ---- */
[data-theme="dark"] .action-dropdown,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .bulk-actions-dropdown,
[data-theme="dark"] .sf-card .dropdown-menu {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .action-dropdown-item,
[data-theme="dark"] .dropdown-menu button,
[data-theme="dark"] .dropdown-menu a,
[data-theme="dark"] .menu-item {
    background: transparent;
    color: #e0e0e0;
    border-bottom-color: #262626;
}

[data-theme="dark"] .action-dropdown-item:hover,
[data-theme="dark"] .dropdown-menu button:hover,
[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .menu-item:hover {
    background: #262626;
}

[data-theme="dark"] .action-dropdown-item:active,
[data-theme="dark"] .menu-item:active {
    background: #262626;
}

[data-theme="dark"] .action-dropdown-item.delete:hover,
[data-theme="dark"] .menu-item.danger:hover {
    background: rgba(239, 123, 123, 0.1);
    color: #ef7b7b;
}

[data-theme="dark"] .action-menu-btn {
    color: #8a8a8a;
}

[data-theme="dark"] .action-menu-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #6b9eff;
}

/* ---- Buttons ---- */
[data-theme="dark"] .btn-cancel,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-modal-cancel,
[data-theme="dark"] .btn-back,
[data-theme="dark"] .btn-reset,
[data-theme="dark"] #loadMoreBtn {
    background: #202020;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .btn-cancel:hover,
[data-theme="dark"] .btn-outline:hover:not(:disabled),
[data-theme="dark"] .btn-modal-cancel:hover,
[data-theme="dark"] .btn-back:hover,
[data-theme="dark"] .btn-reset:hover,
[data-theme="dark"] #loadMoreBtn:hover {
    background: #262626;
    border-color: #3b3b3b;
}

[data-theme="dark"] .btn-delete {
    background: transparent;
    color: #ef7b7b;
    border-color: #2e2e2e;
}

[data-theme="dark"] .btn-delete:hover {
    border-color: #ef7b7b;
    background: rgba(239, 123, 123, 0.1);
}

[data-theme="dark"] .btn-camera,
[data-theme="dark"] .btn-camera-icon,
[data-theme="dark"] .btn-add-item,
[data-theme="dark"] .btn-select-drawings,
[data-theme="dark"] .btn-delete-zone {
    background: #202020;
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .btn-camera:hover,
[data-theme="dark"] .btn-add-item:hover,
[data-theme="dark"] .btn-select-drawings:hover {
    background: #262626;
    border-color: #6b9eff;
}

[data-theme="dark"] .report-issue-btn {
    background: #202020;
    border-color: #ef7b7b;
    color: #ef7b7b;
}

[data-theme="dark"] .report-issue-btn:hover {
    background: rgba(239, 123, 123, 0.1);
}

[data-theme="dark"] .btn-danger:hover {
    background: rgba(239, 123, 123, 0.1);
    color: #ef7b7b;
}

[data-theme="dark"] .btn-danger-outline {
    color: #ef7b7b;
    border-color: #ef7b7b;
}

[data-theme="dark"] .btn-danger-outline:hover:not(:disabled) {
    background: rgba(239, 123, 123, 0.1);
}

[data-theme="dark"] .btn-remove:hover,
[data-theme="dark"] .btn-remove-item:hover,
[data-theme="dark"] .delete-btn:hover {
    background: rgba(239, 123, 123, 0.15);
    border-color: #ef7b7b;
}

[data-theme="dark"] .btn-remove-item {
    color: #8a8a8a;
}

[data-theme="dark"] .btn-remove-item:hover {
    color: #ef7b7b;
    background: rgba(239, 123, 123, 0.1);
}

[data-theme="dark"] .btn-add-item {
    color: #8a8a8a;
}

[data-theme="dark"] .btn-add-item:hover {
    color: #e0e0e0;
    background: #262626;
}

/* Sheet action buttons */
[data-theme="dark"] .sheet-actions button,
[data-theme="dark"] button[onclick*="viewSheet"],
[data-theme="dark"] button[onclick*="downloadSheet"] {
    background: transparent;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .sheet-actions button:hover,
[data-theme="dark"] button[onclick*="viewSheet"]:hover,
[data-theme="dark"] button[onclick*="downloadSheet"]:hover {
    background: #262626;
    border-color: #6b9eff;
    color: #6b9eff;
}

/* Photo preview actions */
[data-theme="dark"] .photo-preview-actions button {
    background: #202020;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

/* Drawing chips */
[data-theme="dark"] .drawing-chip {
    background: #202020;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .drawing-chip-category {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

/* Form card menu trigger */
[data-theme="dark"] .sf-card .menu-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #6b9eff;
}

[data-theme="dark"] .sf-card-title:hover {
    color: #6b9eff;
}

/* ---- Upload Area ---- */
[data-theme="dark"] .upload-area {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: none;
}

[data-theme="dark"] .upload-area:hover {
    border-color: #6b9eff;
    background: rgba(107, 158, 255, 0.04);
}

[data-theme="dark"] .upload-area.dragging,
[data-theme="dark"] .upload-zone.dragging {
    border-color: #6b9eff;
    background: rgba(107, 158, 255, 0.1);
}

/* ---- Tables ---- */
[data-theme="dark"] table {
    background: #202020;
}

[data-theme="dark"] table thead {
    background: #202020;
}

[data-theme="dark"] table th {
    border-bottom-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] table td {
    border-bottom-color: #262626;
    color: #e0e0e0;
}

[data-theme="dark"] table tbody tr:hover {
    background: #262626;
}

[data-theme="dark"] .workers-table th.sortable.active {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

/* ---- Sticky Footer ---- */
[data-theme="dark"] .sticky-footer {
    background: #191919;
    border-top-color: #2e2e2e;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

/* ---- Image Preview ---- */
[data-theme="dark"] .image-preview-container {
    background: #191919;
    border-color: #2e2e2e;
}

[data-theme="dark"] .preview-btn {
    background: #202020;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .preview-btn:hover {
    background: #262626;
    border-color: #3b3b3b;
}

[data-theme="dark"] .preview-btn-remove {
    background: rgba(239, 123, 123, 0.1);
    color: #ef7b7b;
    border-color: rgba(239, 123, 123, 0.2);
}

[data-theme="dark"] .preview-btn-remove:hover {
    background: rgba(239, 123, 123, 0.15);
}

/* ---- Landing Page ---- */
/* ---- Status Badges & Pills ---- */
[data-theme="dark"] .monday-pill.status-active {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .monday-pill.status-inducted {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

[data-theme="dark"] .monday-pill.status-pending {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .monday-pill.status-offhired {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

[data-theme="dark"] .card-number {
    color: var(--text-dark);
}

[data-theme="dark"] .card-actions {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .card-info-label {
    color: var(--gray-500);
}

/* ---- Badges ---- */
[data-theme="dark"] .badge-blue,
[data-theme="dark"] .badge-dwg {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

[data-theme="dark"] .badge-green,
[data-theme="dark"] .badge-img {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .badge-orange {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .badge-red,
[data-theme="dark"] .badge-pdf {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

[data-theme="dark"] .badge-success {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .badge-missing {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

[data-theme="dark"] .badge-warning {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .badge-muted {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

[data-theme="dark"] .badge-gray {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

/* Delivery badges */
[data-theme="dark"] .delivery-today {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .delivery-tomorrow {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

[data-theme="dark"] .delivery-past {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .delivery-future {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

/* Status badges */
[data-theme="dark"] .status-badge {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

/* Category badges */
[data-theme="dark"] .category-badge {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

[data-theme="dark"] .category-badge.safety,
[data-theme="dark"] .category-badge.hazard {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

[data-theme="dark"] .category-badge.quality {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

[data-theme="dark"] .category-badge.environmental {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .category-badge.general {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

/* Preset badges */
[data-theme="dark"] .preset-badge {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

[data-theme="dark"] .preset-badge.custom {
    background: rgba(110, 118, 129, 0.15);
    color: #8a8a8a;
}

/* Action card badges */
[data-theme="dark"] .action-card-badge.open {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

[data-theme="dark"] .action-card-badge.closed {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

/* Age badges */
[data-theme="dark"] .age-badge.age-fresh {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .age-badge.age-warning {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .age-badge.age-critical {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

/* Risk badges */
[data-theme="dark"] .risk-badge.high {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

[data-theme="dark"] .risk-badge.medium {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .risk-badge.low {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

/* Test status */
[data-theme="dark"] .test-status.pending {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .test-status.completed {
    color: #34d399;
}

/* ---- Toggle Pills ---- */
[data-theme="dark"] .toggle-pill {
    background: #202020;
    border-color: #2e2e2e;
    color: #8a8a8a;
}

[data-theme="dark"] .toggle-pill:hover {
    background: #262626;
    border-color: #3b3b3b;
}

[data-theme="dark"] .toggle-pill.active {
    background: rgba(107, 158, 255, 0.1);
    color: #6b9eff;
    border-color: #6b9eff;
}

/* ---- Orders ---- */
[data-theme="dark"] .order {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .order-crew {
    color: #e0e0e0;
}

[data-theme="dark"] .order-date {
    color: #8a8a8a;
}

[data-theme="dark"] .order-items {
    background: #191919;
    border-color: #2e2e2e;
}

[data-theme="dark"] .order-notes {
    background: rgba(187, 128, 9, 0.1);
    border-left-color: #fbbf24;
    color: #fbbf24;
}

[data-theme="dark"] .order-items tr.missing-item {
    background: rgba(239, 123, 123, 0.06);
}

[data-theme="dark"] .order-items tr.missing-item td {
    color: #ef7b7b;
}

[data-theme="dark"] .order-items input[type="checkbox"] {
    accent-color: #ef7b7b;
}

/* ---- Alerts / Info Blocks ---- */
[data-theme="dark"] .alert-success {
    background: rgba(63, 185, 80, 0.1);
    color: #34d399;
    border-color: rgba(63, 185, 80, 0.3);
}

[data-theme="dark"] .alert-success::before {
    background: #238636;
}

[data-theme="dark"] .success-message {
    background: rgba(63, 185, 80, 0.1);
    border-color: rgba(63, 185, 80, 0.3);
    color: #34d399;
}

[data-theme="dark"] .error-message {
    background: rgba(239, 123, 123, 0.1);
    border-color: rgba(239, 123, 123, 0.3);
    color: #ef7b7b;
}

[data-theme="dark"] .result-success {
    background: var(--brand-subtle);
    border-color: var(--brand-light);
    color: var(--brand);
}

[data-theme="dark"] .result-error {
    background: rgba(239, 123, 123, 0.1);
    border-color: rgba(239, 123, 123, 0.3);
    color: #ef7b7b;
}

[data-theme="dark"] .resolution-info {
    background: rgba(63, 185, 80, 0.1);
    border-color: rgba(63, 185, 80, 0.3);
    color: #34d399;
}

[data-theme="dark"] .issue-item {
    background: rgba(187, 128, 9, 0.08);
    border-left-color: #fbbf24;
}

[data-theme="dark"] .issue-item strong {
    color: #fbbf24;
}

[data-theme="dark"] .auto-order-info {
    background: rgba(107, 158, 255, 0.08);
    border-color: #6b9eff;
    color: #6b9eff;
}

[data-theme="dark"] .countdown-timer {
    color: #6b9eff;
}

/* Danger zone */
[data-theme="dark"] .settings-section.danger-zone {
    background: rgba(239, 123, 123, 0.06);
    border-color: rgba(239, 123, 123, 0.2);
}

/* ITP row dark mode — match prestart-row styling */
[data-theme="dark"] .itp-row {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .itp-row:hover {
    background: #262626;
}

[data-theme="dark"] .itp-info .info-main {
    color: #e0e0e0;
}

[data-theme="dark"] .itp-info .info-meta {
    color: #8a8a8a;
}

[data-theme="dark"] .itp-signatures,
[data-theme="dark"] .itp-submissions {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

/* Locked / warning states */
[data-theme="dark"] .itp-row.is-locked {
    background: rgba(187, 128, 9, 0.08);
}

[data-theme="dark"] .locked-badge {
    background: rgba(187, 128, 9, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .stock-item.qty-changed {
    background: rgba(187, 128, 9, 0.1);
}

[data-theme="dark"] .stock-item.weekend {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .stock-item.weekend:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mobile-item-missing {
    background: rgba(187, 128, 9, 0.1);
}

/* Drawings selector */
[data-theme="dark"] .drawings-selector {
    background: rgba(107, 158, 255, 0.06);
    border-color: rgba(107, 158, 255, 0.2);
}

/* Match confidence */
[data-theme="dark"] .match-confidence {
    color: #34d399;
}

/* ---- Audit ---- */
[data-theme="dark"] .audit-detail-row.audit-highlight {
    background: rgba(63, 185, 80, 0.06);
}

[data-theme="dark"] .audit-card-image-placeholder {
    background: linear-gradient(135deg, #202020, #262626);
}

/* ---- Week Nav ---- */
[data-theme="dark"] .week-nav-btn {
    background: #202020;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .week-nav-btn:hover {
    background: #262626;
}

[data-theme="dark"] .period-segments {
    background: #2e2e2e;
}

[data-theme="dark"] .period-segment {
    color: var(--gray-500);
}

[data-theme="dark"] .period-segment:hover {
    color: var(--gray-300);
    background: #3b3b3b;
}

[data-theme="dark"] .period-segment.active {
    background: #3b3b3b;
    color: var(--primary-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Login Page ---- */
[data-theme="dark"] .login-container {
    background: #191919;
}

[data-theme="dark"] .login-box {
    background: #202020;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .login-mode-toggle {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .login-mode-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
}

/* ---- Rich Text Editors ---- */
[data-theme="dark"] .ql-container,
[data-theme="dark"] .ql-editor {
    background: #191919 !important;
    color: #e0e0e0 !important;
    border-color: #2e2e2e !important;
}

[data-theme="dark"] .ql-toolbar {
    background: #202020 !important;
    border-color: #2e2e2e !important;
}

[data-theme="dark"] .ql-toolbar .ql-stroke {
    stroke: #8a8a8a !important;
}

[data-theme="dark"] .ql-toolbar .ql-fill {
    fill: #8a8a8a !important;
}

[data-theme="dark"] .ql-toolbar .ql-picker-label {
    color: #8a8a8a !important;
}

[data-theme="dark"] .ql-toolbar button:hover .ql-stroke {
    stroke: #6b9eff !important;
}

[data-theme="dark"] .ql-toolbar button:hover .ql-fill {
    fill: #6b9eff !important;
}

[data-theme="dark"] .tox-tinymce {
    border-color: #2e2e2e !important;
}

[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__overflow,
[data-theme="dark"] .tox .tox-toolbar__primary {
    background: #202020 !important;
}

[data-theme="dark"] .stock-item.weekend.qty-changed {
    background: rgba(255, 255, 255, 0.08);
}

/* ---- Quill editor white !important overrides ---- */
[data-theme="dark"] .ql-editor,
[data-theme="dark"] .ql-container {
    background: #191919 !important;
}

[data-theme="dark"] .ql-toolbar {
    background: #202020 !important;
}

/* ---- Toolbar backgrounds !important ---- */
[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__overflow,
[data-theme="dark"] .tox .tox-toolbar__primary {
    background: #202020 !important;
}

/* ---- Drawing chip (re-asserted) ---- */
[data-theme="dark"] .drawing-chip {
    background: #202020;
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .drawing-chip-remove:hover {
    color: #ef7b7b;
}

/* ---- Checkbox & Radio — force dark native rendering ---- */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    color-scheme: dark;
    accent-color: #6b9eff;
}

/* ---- Tabs ---- */
[data-theme="dark"] .tabs-container {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .tab {
    color: #8a8a8a;
}

[data-theme="dark"] .tab:hover {
    color: #ababab;
}

[data-theme="dark"] .tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

[data-theme="dark"] .tab-count {
    background: #262626;
    color: #8a8a8a;
}

[data-theme="dark"] .tab.active .tab-count {
    background: #ffffff;
    color: #191919;
}

/* ---- Timesheets: stock-item rows ---- */
[data-theme="dark"] .stock-item {
    border-bottom-color: #262626;
}

[data-theme="dark"] .stock-item:hover {
    background: #262626;
}

[data-theme="dark"] .stock-item-name {
    color: #e0e0e0;
}

[data-theme="dark"] .stock-item-category {
    color: #8a8a8a;
}

[data-theme="dark"] .stock-item-qty {
    color: #6b9eff;
}

[data-theme="dark"] .stock-item-qty-editable:hover {
    background: #262626;
}

[data-theme="dark"] .stock-qty-input {
    background: #191919;
    color: #e0e0e0;
    border-color: #6b9eff;
}

/* Date icon & employee avatar */
[data-theme="dark"] .date-icon {
    background: linear-gradient(135deg, #3b3b3b 0%, #2e2e2e 100%);
    color: #e0e0e0;
}

[data-theme="dark"] .stock-item.weekend .date-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #9e6a03 100%);
    color: #ffffff;
}

[data-theme="dark"] .employee-avatar {
    background: linear-gradient(135deg, #3b3b3b 0%, #2e2e2e 100%);
    color: #e0e0e0;
}

/* Payroll row */
[data-theme="dark"] .payroll-row .payroll-hours,
[data-theme="dark"] .payroll-row .payroll-amount {
    color: #ababab;
}

[data-theme="dark"] .payroll-row.payroll-total {
    background: #202020;
    border-top-color: #2e2e2e;
}

[data-theme="dark"] .payroll-accordion {
    border-bottom-color: #262626;
}

[data-theme="dark"] .payroll-accordion.has-projects .payroll-row:hover {
    background: #262626;
}

[data-theme="dark"] .payroll-projects {
    background: #191919;
}

[data-theme="dark"] .accordion-chevron {
    color: #8a8a8a;
}

[data-theme="dark"] .payroll-warning {
    color: #fbbf24;
}

/* Project table */
[data-theme="dark"] .project-table th {
    color: #8a8a8a;
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .project-table td {
    color: #ababab;
    border-bottom-color: #262626;
}

[data-theme="dark"] .daily-breakdown .day-header td {
    background: #202020;
    border-bottom-color: #2e2e2e;
}

/* Week total */
[data-theme="dark"] .week-dates {
    color: #e0e0e0;
}

/* ---- Onboarding: project tags (purple/indigo pills) ---- */
[data-theme="dark"] .project-tag {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

[data-theme="dark"] .linked-project-tag {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

[data-theme="dark"] .linked-project-tag button {
    color: #a5b4fc;
}

/* Worker name/email text */
[data-theme="dark"] .worker-name {
    color: #e0e0e0;
}

[data-theme="dark"] .worker-email {
    color: #8a8a8a;
}

/* Detail section (modal) */
[data-theme="dark"] .detail-section-title {
    color: #8a8a8a;
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .detail-label {
    color: #8a8a8a;
}

[data-theme="dark"] .detail-value {
    color: #e0e0e0;
}

/* Share modal */
[data-theme="dark"] .share-url-input {
    background: #191919;
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .modal-title {
    color: #e0e0e0;
}

[data-theme="dark"] .modal-close {
    color: #8a8a8a;
}

[data-theme="dark"] .modal-close:hover {
    color: #e0e0e0;
}

[data-theme="dark"] .regenerate-link button {
    color: #8a8a8a;
}

[data-theme="dark"] .regenerate-link button:hover {
    color: #e0e0e0;
}

/* Empty & loading states */
[data-theme="dark"] .empty-state-icon {
    color: #3b3b3b;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
    background-size: 200% 100%;
}
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .skeleton-detail__section {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .empty-state-title {
    color: #ababab;
}

[data-theme="dark"] .empty-state-text,
[data-theme="dark"] .loading-state {
    color: #8a8a8a;
}

[data-theme="dark"] .not-setup-message h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .not-setup-message p {
    color: #8a8a8a;
}

/* ---- Cutting Sheets: source sheet info box ---- */
[data-theme="dark"] .pipe-source-info {
    background: rgba(107, 158, 255, 0.08) !important;
    border-left-color: #6b9eff !important;
}

[data-theme="dark"] .pipe-source-info .pipe-source-label {
    color: #6b9eff !important;
}

[data-theme="dark"] .pipe-source-info .pipe-source-filename {
    color: #ababab !important;
}

[data-theme="dark"] .pipe-source-info .pipe-source-meta {
    color: #6b9eff !important;
}

/* Badge overrides for onboarding page variants */
[data-theme="dark"] .badge-success {
    background: rgba(63, 185, 80, 0.15);
    color: #34d399;
}

[data-theme="dark"] .badge-danger {
    background: rgba(239, 123, 123, 0.15);
    color: #ef7b7b;
}

/* ---- Import buttons (Paste List / Scan List) ---- */
[data-theme="dark"] .btn-import {
    background: #202020;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .btn-import:hover {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .items-import-divider::before,
[data-theme="dark"] .items-import-divider::after {
    background: #2e2e2e;
}

[data-theme="dark"] .items-import-divider span {
    color: #6b7280;
}

/* ---- Drawing card details (white dividers) ---- */
[data-theme="dark"] .drawing-card-detail {
    border-bottom-color: #262626;
}

[data-theme="dark"] .drawing-card-label {
    color: #8a8a8a;
}

[data-theme="dark"] .drawing-card-value {
    color: #e0e0e0;
}

[data-theme="dark"] .drawing-card-name {
    color: #e0e0e0;
}

/* ---- Machinery card details (dark theme) ---- */
[data-theme="dark"] .machinery-card-detail {
    border-bottom-color: #262626;
}

[data-theme="dark"] .machinery-card-label {
    color: #8a8a8a;
}

[data-theme="dark"] .machinery-card-value {
    color: #e0e0e0;
}

[data-theme="dark"] .machinery-card-number {
    color: #e0e0e0;
}

[data-theme="dark"] .machinery-card-type {
    color: #8a8a8a;
}

[data-theme="dark"] .machinery-card-no-image {
    background: #262626;
    color: #3b3b3b;
}

[data-theme="dark"] .machinery-card-image-top:has(.machinery-card-no-image) .machinery-card-edit-photo {
    background: rgba(255, 255, 255, 0.1);
    color: #8a8a8a;
}

[data-theme="dark"] .machinery-card-image-top:has(.machinery-card-no-image) .machinery-card-edit-photo:hover {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .legend-total {
    color: #6b9eff;
}


[data-theme="dark"] .legend-header {
    border-top-color: #262626;
}

[data-theme="dark"] .legend-section {
    border-top: 1px solid #262626;
}

[data-theme="dark"] .resolution-notes {
    color: #34d399;
}

/* ---- Outlet items (cutting sheets) — fix unreadable text ---- */
[data-theme="dark"] .pipe-outlet-item span {
    color: #d2a8ff !important;
}

[data-theme="dark"] .pipe-outlets-info .pipe-outlets-label {
    color: #d2a8ff !important;
}

/* ---- Category badge (drawings page top bar) ---- */
[data-theme="dark"] .category-badge .card-menu .menu-trigger {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Filter section and filter-row ---- */
[data-theme="dark"] .filter-row {
    border-color: #2e2e2e;
}

[data-theme="dark"] .filter-label {
    color: #e0e0e0;
}

/* ---- Inline-style overrides (for elements with hardcoded inline styles) ---- */

/* Prestarts: signature name input & labels */
[data-theme="dark"] .name-input {
    background: #191919 !important;
    color: #e0e0e0 !important;
    border-color: #2e2e2e !important;
}

[data-theme="dark"] .name-input:focus {
    border-color: #6b9eff !important;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15) !important;
}

[data-theme="dark"] .attendee-item label {
    color: #ababab !important;
}

/* Prestarts: SWMS add form */
[data-theme="dark"] #swmsAddForm {
    background: #202020 !important;
    border-color: #2e2e2e !important;
}

/* Signature canvas containers */
[data-theme="dark"] .signature-canvas-container,
[data-theme="dark"] [style*="border"][style*="f9fafb"],
[data-theme="dark"] [style*="border"][style*="e5e7eb"] {
    background: #191919 !important;
    border-color: #2e2e2e !important;
}

/* Cutting sheets: outlets section */
[data-theme="dark"] .pipe-outlets-info {
    background: rgba(163, 113, 247, 0.08) !important;
    border-left-color: #a371f7 !important;
}

[data-theme="dark"] .pipe-outlets-info .pipe-outlets-label {
    color: #a371f7 !important;
}

[data-theme="dark"] .pipe-outlet-item {
    background: #202020 !important;
    color: #e0e0e0 !important;
}

/* Cutting sheets: outlet items inside search results (inline-styled divs) */
[data-theme="dark"] .pipe-outlets-info [style*="background: white"] {
    background: #202020 !important;
}

[data-theme="dark"] .pipe-outlets-info [style*="color: #6b21a8"] {
    color: #a371f7 !important;
}

[data-theme="dark"] .pipe-outlets-info [style*="color: #7e22ce"] {
    color: #a371f7 !important;
}

/* Cutting sheets: source sheet info box in search results */
[data-theme="dark"] [style*="background: #eff6ff"] {
    background: rgba(107, 158, 255, 0.08) !important;
    border-left-color: #5a8be6 !important;
}

[data-theme="dark"] [style*="color: #1e40af"] {
    color: #5a8be6 !important;
}

[data-theme="dark"] [style*="color: #1e3a8a"] {
    color: #6b9eff !important;
}

[data-theme="dark"] [style*="color: #3b82f6"] {
    color: #6b9eff !important;
}

/* Cutting sheets: import summary */
[data-theme="dark"] .import-summary {
    background: #202020 !important;
    color: #8a8a8a !important;
}

/* Settings page inline backgrounds */
[data-theme="dark"] .settings-row[style*="f0fdf4"] {
    background: rgba(63, 185, 80, 0.08) !important;
}

[data-theme="dark"] .settings-row[style*="f3f4f6"] {
    background: #202020 !important;
}

/* Materials page: scheduled badge inline */
[data-theme="dark"] .monday-pill[style*="e5f8ed"],
[data-theme="dark"] .monday-pill[style*="e8f0fe"] {
    background: rgba(107, 158, 255, 0.15) !important;
    color: #6b9eff !important;
}

/* Materials page: order items table/list with inline background: white */
[data-theme="dark"] .desktop-items-table {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .desktop-items-table table {
    border-color: var(--border-color);
}

[data-theme="dark"] .desktop-items-table thead {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .desktop-items-table td {
    border-color: var(--border-color);
}

[data-theme="dark"] .mobile-items-list {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .mobile-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .mobile-item-missing {
    background: rgba(187, 128, 9, 0.15) !important;
}

/* Materials page: missing items row inline bg */
[data-theme="dark"] .order-items tr.missing-item,
[data-theme="dark"] tr.missing-item {
    background: rgba(187, 128, 9, 0.15) !important;
}

/* ---- Email group header (materials page) ---- */
[data-theme="dark"] .email-group-header:hover,
[data-theme="dark"] .email-group.expanded .email-group-header {
    background: rgba(107, 158, 255, 0.1);
}

/* ---- Signature modals (prestarts, toolbox-talks) ---- */
[data-theme="dark"] .signature-modal-content {
    background: #202020 !important;
    border: 1px solid #2e2e2e;
}

[data-theme="dark"] .signature-modal-header {
    border-bottom-color: #2e2e2e !important;
}

[data-theme="dark"] .signature-modal-footer {
    border-top-color: #2e2e2e !important;
}

[data-theme="dark"] .signature-canvas-wrapper {
    border-color: #2e2e2e !important;
    background: #191919 !important;
}

[data-theme="dark"] .signature-image {
    background: #202020 !important;
    border-color: #2e2e2e !important;
}

/* ---- Pressure tests: finish modal header ---- */
[data-theme="dark"] .finish-modal-header {
    background: #202020 !important;
    border-bottom-color: #2e2e2e !important;
}

/* ---- Pressure tests: lightbox close button ---- */
[data-theme="dark"] .lightbox-close-btn {
    background: #262626 !important;
    color: #e0e0e0 !important;
}

/* ---- Cutting sheets: detail modal ---- */
[data-theme="dark"] .cutting-sheet-modal-content {
    background: #202020 !important;
    border: 1px solid #2e2e2e;
}


/* ---- Stores: inline white buttons ---- */
[data-theme="dark"] .btn.btn-outline[style*="background: white"] {
    background: #262626 !important;
    color: #e0e0e0 !important;
    border-color: #2e2e2e !important;
}

/* ---- Materials: clear missing items button ---- */
[data-theme="dark"] .btn.btn-outline.btn-sm[style*="background: white"] {
    background: transparent !important;
    color: #ef7b7b !important;
    border-color: #ef7b7b !important;
}

/* ---- Generic inline style overrides for dark mode ---- */
/* Light gray backgrounds used in info boxes, status banners, etc. */
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"] {
    background: #202020 !important;
}

[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f9fafb"] {
    background: #202020 !important;
}

[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background: #202020 !important;
}

[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#e5e7eb"] {
    background: #262626 !important;
}

[data-theme="dark"] [style*="background: #fff;"],
[data-theme="dark"] [style*="background: #fff "],
[data-theme="dark"] [style*="background:#fff;"] {
    background: #202020 !important;
}

/* Inline dark text colors */
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#4b5563"] {
    color: #8a8a8a !important;
}

[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"] {
    color: #e0e0e0 !important;
}

[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"] {
    color: #ababab !important;
}

[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"] {
    color: #8a8a8a !important;
}

/* Inline light borders */
[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"] {
    border-bottom-color: #2e2e2e !important;
}

[data-theme="dark"] [style*="border-top: 1px solid #e5e7eb"] {
    border-top-color: #2e2e2e !important;
}

[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] {
    border-color: #2e2e2e !important;
}

[data-theme="dark"] [style*="border: 2px solid #e5e7eb"] {
    border-color: #2e2e2e !important;
}

[data-theme="dark"] [style*="border: 2px solid #e9ecef"] {
    border-color: #2e2e2e !important;
}

[data-theme="dark"] [style*="border-bottom: 1px solid #e9ecef"] {
    border-bottom-color: #2e2e2e !important;
}

/* Inline background: white on non-QR elements */
[data-theme="dark"] [style*="background: white"]:not(#waQRCode):not(#tsWaQRCode) {
    background: #202020 !important;
}

/* Green success backgrounds */
[data-theme="dark"] [style*="background: #f0fdf4"] {
    background: rgba(63, 185, 80, 0.1) !important;
}

[data-theme="dark"] [style*="border: 1px solid #bbf7d0"] {
    border-color: rgba(63, 185, 80, 0.3) !important;
}

[data-theme="dark"] [style*="color: #166534"] {
    color: #34d399 !important;
}

/* QR code containers must stay white for scannability */
[data-theme="dark"] #waQRCode,
[data-theme="dark"] #tsWaQRCode {
    background: white !important;
}

/* Diagnostics table inline backgrounds */
[data-theme="dark"] tr[style*="background: #f3f4f6"] {
    background: #202020 !important;
}

[data-theme="dark"] tr[style*="background: #f3f4f6"] th {
    color: #e0e0e0 !important;
}

/* Materials: backorder pill inline style */
[data-theme="dark"] .monday-pill[style*="fff4e6"] {
    background: rgba(232, 89, 12, 0.15) !important;
    color: #f0883e !important;
}

/* Materials: missing item inline bg */
[data-theme="dark"] tr[style*="background: #fff4e6"],
[data-theme="dark"] [style*="background: #fff4e6"] {
    background: rgba(187, 128, 9, 0.15) !important;
}

/* Cutting sheets: inline white background on outlet items */
[data-theme="dark"] [style*="background: white"][style*="border-radius: 4px"] {
    background: #202020 !important;
}

/* Settings: WhatsApp test chat area */
[data-theme="dark"] #waTestChat {
    background: #191919 !important;
    border-color: #2e2e2e !important;
}

/* Settings: dcfce7 green background (success) */
[data-theme="dark"] [style*="background: #dcfce7"] {
    background: rgba(63, 185, 80, 0.15) !important;
    color: #34d399 !important;
}

/* ---- Dividers ---- */
[data-theme="dark"] .project-list-divider {
    background: #2e2e2e;
}

/* ---- Category badges (pipe issues) ---- */
[data-theme="dark"] .category-badge.pipe_issue { background: rgba(239, 123, 123, 0.15); color: #ef7b7b; }
[data-theme="dark"] .category-badge.design_issue { background: rgba(88, 166, 255, 0.15); color: #6b9eff; }
[data-theme="dark"] .category-badge.incomplete_design { background: rgba(210, 153, 34, 0.15); color: #fbbf24; }
[data-theme="dark"] .category-badge.missing_measurements { background: rgba(188, 140, 255, 0.15); color: #bc8cff; }
[data-theme="dark"] .category-badge.drawing_issue { background: rgba(63, 185, 80, 0.15); color: #34d399; }

/* ---- Status badges (smart forms) ---- */
[data-theme="dark"] .status-badge.draft { background: rgba(139, 148, 158, 0.15); color: #8a8a8a; }
[data-theme="dark"] .status-badge.not_submitted { background: rgba(139, 148, 158, 0.15); color: #8a8a8a; }
[data-theme="dark"] .status-badge.submitted { background: rgba(210, 153, 34, 0.15); color: #fbbf24; }
[data-theme="dark"] .status-badge.approved { background: rgba(63, 185, 80, 0.15); color: #34d399; }

/* ---- Draft items (smart forms) ---- */
[data-theme="dark"] .draft-item:hover {
    background-color: #202020;
}

/* ---- Modal close button ---- */
[data-theme="dark"] .modal-close-btn:hover {
    background-color: #262626;
    color: #e0e0e0;
}


/* ==================== DARK MODE SUPPORT (Legacy - prefers-color-scheme) ==================== */

@media (prefers-color-scheme: dark) {
    .project-list-divider {
        background: linear-gradient(to right, transparent, #2e2e2e 20%, #2e2e2e 80%, transparent);
    }

    .project-list-divider::after {
        background: #3b3b3b;
    }
}


/* ================================================================
   SECTION 4: LEGACY STYLES (non-conflicting)
   Used by pipes page and shared components
   ================================================================ */

/* App container */
.app {
    max-width: 100%;
    min-height: 100vh;
    background: white;
    margin: 0 auto;
}

/* Container & Layout (pipes page) */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 20px;
}

@media (max-width: 1200px) {
    .layout { 
        grid-template-columns: 1fr;
    }
    
    #rightPanel {
        display: none !important;
    }
}

@media (min-width: 1201px) {
    #leftPanel .tabs .tab:first-child {
        display: none;
    }
}

/* Panel styles */
.panel {
    background: white;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.panel-header {
    background: var(--gray-50);
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-dark);
}

.panel-body {
    padding: 20px;
}

/* Items section */
.items-section {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px;
    background: var(--gray-50);
    margin-bottom: 16px;
    overflow: hidden;
}

.items-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.item-row {
    display: grid;
    grid-template-columns: 1fr 60px 36px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: start;
}

.item-row input {
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    height: 48px;
    min-width: 0;
    transition: border-color 0.3s ease;
}

.item-row input.item-qty {
    text-align: center;
    padding: 12px 4px;
}

.item-row input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Pipe row */
.pipe-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 48px;
    gap: 8px;
    margin-bottom: 8px;
    align-items: start;
}

.pipe-row input {
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    height: 48px;
    min-width: 0;
    transition: border-color 0.3s ease;
}

.pipe-row input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

@media (max-width: 768px) {
    .pipe-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pipe-row .btn-icon {
        grid-column: 1;
        width: 100%;
    }
}

/* Action buttons grid */
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

/* Orders */
.orders-container {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}

.order {
    border-bottom: 1px solid #e9ecef;
    padding: 20px;
}

.order:last-child {
    border-bottom: none;
}

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

.order-crew {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.order-date {
    font-size: 12px;
    color: #6c757d;
}

.order-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.order-items {
    background: #fafafa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
}

.order-items table {
    width: 100%;
    font-size: 13px;
}

.order-items td {
    padding: 4px 8px;
}

.order-items td:first-child {
    padding-left: 0;
}

.order-items td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--text-dark);
    padding-right: 0;
}

.order-items td.checkbox-cell {
    width: 30px;
    text-align: center;
    padding: 4px;
}

.order-items input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #dc3545;
}

.order-items tr.missing-item {
    background: #fff5f5;
}

.order-items tr.missing-item td {
    color: #dc3545;
}

.order-notes {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #856404;
}

.order-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.empty {
    text-align: center;
    padding: 40px;
    color: var(--gray-400);
}

/* Legacy badge variants */
.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-delivery {
    margin-left: 4px;
}

.badge-missing {
    background: #f8d7da;
    color: #721c24;
    margin-left: 4px;
}

.delivery-today {
    background: #fff3cd;
    color: #856404;
}

.delivery-tomorrow {
    background: #cfe2ff;
    color: #084298;
}

.delivery-past {
    background: #d1e7dd;
    color: #0f5132;
}

.delivery-future {
    background: #e2e3e5;
    color: #41464b;
}

/* Email preview */
.email-preview {
    background: var(--bg-light, #fafafa);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 6px;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark, #333);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 12px;
}

/* Alert */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #c3e6cb;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success::before {
    content: "\2713";
    background: #28a745;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

/* Stats */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat {
    background: #fafafa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Auto order info */
.auto-order-info {
    background: #e3f2fd;
    border: 2px solid var(--primary-blue);
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.auto-order-message {
    font-weight: 600;
    margin-bottom: 4px;
}

.countdown-timer {
    font-size: 12px;
    color: #6b9eff;
    font-weight: 500;
}



/* ================================================================
   SECTION 6: PAGE-SPECIFIC STYLES
   Extracted from inline <style> blocks
   ================================================================ */

/* --- Login Page --- */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 44px;
    max-width: 420px;
    width: 100%;
    border: 1px solid var(--gray-100);
}

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo img {
    max-width: 180px;
    height: auto;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--gray-900);
    text-align: center;
    margin-bottom: 10px;
}

.login-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    text-align: center;
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    height: 48px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--gray-800);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.login-button {
    width: 100%;
    padding: 12px 20px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.login-button:hover:not(:disabled) {
    background: var(--brand-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(52, 88, 213, 0.25);
}

.login-button:active:not(:disabled) {
    transform: translateY(0);
}

.login-button:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

/* Login mode toggle */
.login-mode-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--gray-100);
    padding: 4px;
    border-radius: 12px;
}

.login-mode-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--gray-500);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-mode-btn.active {
    background: white;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
}

/* Login code input */
.login-code-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-family: 'Courier New', monospace;
}

/* Login help text */
.login-help-text {
    color: var(--gray-500);
    font-size: 13px;
    margin: 0 0 12px 0;
}

/* Login secondary button (use different email) */
.login-link-btn {
    width: 100%;
    margin-top: 12px;
    background: transparent;
    color: var(--gray-500);
    border: none;
    padding: 12px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition);
}

.login-link-btn:hover {
    color: var(--gray-700);
}

/* Login logo text */
.login-logo-text {
    margin-top: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.login-logo svg {
    width: 80px;
    height: 80px;
}

.success-message {
    background: var(--success-light);
    border: 1px solid #34d399;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
}

.error-message {
    background: var(--danger-light);
    border: 1px solid #ef4444;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
}

/* Full-screen loading overlay for successful login */
.login-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gray-100);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.login-loading-overlay.active {
    display: flex;
}

.login-loading-logo {
    animation: bounce 1s ease-in-out infinite;
}

.login-loading-text {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.info-text {
    font-size: 13px;
    color: var(--gray-500);
    text-align: center;
    margin-top: 20px;
}

/* --- Landing Page --- */

/* Monday.com Style for Landing Page (with theme blue) */
.landing-page {
    padding: 2.5rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.landing-container {
    width: 100%;
}

/* Hide content until access check completes */
.selection-cards {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.selection-cards.loaded {
    opacity: 1;
}

.selection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.selection-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.selection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.selection-card:active {
    transform: translateY(-1px);
}

.card-badge {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.badge-text {
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.card-description {
    font-size: 0.813rem;
    color: var(--text-gray);
    line-height: 1.5;
    flex: 1;
}

.card-button {
    display: none;
}

@media (max-width: 768px) {
    .landing-page {
        padding: 1rem;
    }

    .selection-cards {
        grid-template-columns: 1fr;
    }
}

/* --- Cutting Sheets --- */

/* Responsive table styling */
@media (max-width: 768px) {
    table {
        font-size: 14px;
    }
    
    table th,
    table td {
        padding: 8px !important;
    }
    
    table button {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
}

/* Badge for unread count */
.badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    font-weight: 600;
}

/* File upload area */
.upload-area {
    border: 2px dashed var(--gray-200);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s;
}

.upload-area:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.upload-area.dragging {
    border-color: #3b82f6;
    background: #dbeafe;
}

/* File list */
.file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    margin-bottom: 8px;
}

.file-list-item:hover {
    background: var(--gray-50);
}

/* Progress bar */
.progress-container {
    background: var(--gray-100);
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    margin: 16px 0;
}

.progress-bar {
    background: var(--brand);
    height: 100%;
    width: 0%;
    transition: width 0.3s;
}

/* Results styling */
.result-success {
    background: var(--brand-subtle);
    border: 1px solid var(--brand-light);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    color: var(--brand);
}

.result-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

/* Pipe card */
.pipe-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.pipe-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

.badge-green {
    background: var(--success-light);
    color: #065f46;
}

.badge-gray {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* Report Issue Button */
.report-issue-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #ef4444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.report-issue-btn:hover {
    background: #fef2f2;
}

/* Report Issue Modal */
.issue-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.issue-modal-overlay.open {
    display: flex;
}

.issue-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.issue-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    background: #fef2f2;
    border-radius: 12px 12px 0 0;
}

.issue-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.issue-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: 4px;
}

.issue-modal-close:hover {
    background: var(--danger-light);
    color: #991b1b;
}

.issue-modal-body {
    padding: 20px;
}

.issue-modal-pipe-info {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #4b5563;
}

.issue-modal-pipe-info strong {
    color: var(--gray-800);
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .issue-modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .issue-modal {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .issue-modal-header {
        flex-shrink: 0 !important;
    }

    .issue-modal-body {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

.issue-type-select {
    width: 100%;
    height: 48px;
    padding: 0 2.5rem 0 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    margin-bottom: 12px;
    background: white;
    color: var(--text-dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 0.2s;
}

.issue-comment {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.938rem;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    color: var(--text-dark);
    background: white;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.issue-comment:focus,
.issue-type-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.submit-issue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.submit-issue-btn:hover {
    background: #dc2626;
}

.submit-issue-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
}

/* ==================== DUPLICATE FILE MODAL ==================== */

.duplicate-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.duplicate-modal-overlay.open {
    display: flex;
}

.duplicate-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.duplicate-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    background: #fef3c7;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.duplicate-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.duplicate-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: 4px;
}

.duplicate-modal-close:hover {
    background: #fde68a;
    color: #92400e;
}

.duplicate-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.duplicate-modal-description {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
}

.duplicate-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.duplicate-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    gap: 12px;
}

.duplicate-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    word-break: break-all;
    min-width: 0;
    flex: 1;
}

.duplicate-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.duplicate-modal-footer button {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.btn-duplicate-cancel {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db !important;
}

.btn-duplicate-cancel:hover {
    background: #e5e7eb;
}

.btn-duplicate-replace {
    background: #dc2626;
    color: white;
}

.btn-duplicate-replace:hover {
    background: #b91c1c;
}

.btn-duplicate-skip {
    background: #374151;
    color: white;
}

.btn-duplicate-skip:hover {
    background: #1f2937;
}

@media (max-width: 768px) {
    .duplicate-modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .duplicate-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .duplicate-modal-header {
        border-radius: 0;
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    .duplicate-modal-body {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .duplicate-modal-footer {
        flex-wrap: wrap;
    }

    .duplicate-modal-footer button {
        flex: 1;
        min-width: 0;
    }
}

/* --- Prestarts --- */

/* Fix double borders between form sections */
.form-section {
    border-bottom: 1px solid var(--gray-200) !important;
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}

.form-section + .form-section {
    padding-top: 24px !important;
    border-top: none !important;
}

.form-section:last-child {
    border-bottom: none !important;
}

/* Quill Editor - White Background */
.ql-container {
    background: white !important;
}

.ql-editor {
    background: white !important;
}

.ql-toolbar {
    background: white !important;
}

/* Overflow Menu - Three Dots */
.action-menu-container {
    position: relative;
    flex-shrink: 0;
    width: 32px;
}

.action-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray, #8a8a8a);
    width: 32px;
    height: 32px;
}

.action-menu-btn:active {
    transform: scale(0.95);
}

.action-menu-btn:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.action-menu-btn svg {
    width: 18px;
    height: 18px;
}

/* Dropdown Menu */
.action-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    padding: 6px;
    z-index: 1000;
    display: none;
    animation: dropdownFadeIn 0.15s ease;
}

.action-dropdown.active {
    display: block;
}

.action-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s ease;
    line-height: 1;
}

.action-dropdown-item:hover {
    background: var(--bg-light);
}

.action-dropdown-item:active {
    background: var(--gray-100);
}

.action-dropdown-item.delete:hover {
    background: #fef2f2;
    color: var(--danger);
}

.action-dropdown-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-gray);
}

.action-dropdown-item:hover svg {
    color: var(--primary-blue);
}

.action-dropdown-item.delete:hover svg {
    color: var(--danger);
}

/* Ensure location items have proper flex layout */
.location-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.location-item label {
    flex: 1 !important;
    min-width: 0 !important;
}

/* TinyMCE customization */
.tox-tinymce {
    border: 2px solid var(--gray-200) !important;
    border-radius: 8px !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    background: #f8f9fa !important;
}

/* Location checkboxes */
.location-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s;
}

.location-item:hover {
    border-color: var(--primary-blue);
    background: var(--gray-50);
}

.location-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.location-item label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-700);
}

.location-item .delete-location {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.location-item .delete-location:hover {
    background: #fee;
}

/* Add location section */
.add-location-section {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 1rem;
}

.add-location-section input {
    flex: 1;
    min-height: 44px;
}

.add-location-section .btn {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Delete template button */
.delete-template-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    margin-top: 12px;
}

.delete-template-btn:hover {
    background: #dc2626;
}

/* Mobile responsive history */
.history-desktop-view {
    display: block;
}

.history-mobile-view {
    display: none;
}

@media (max-width: 768px) {
    .history-desktop-view {
        display: none;
    }
    
    .history-mobile-view {
        display: block;
    }
}

.history-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}

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

/* New Responsive Prestart List */
.prestarts-list {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.register-card-list {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.prestart-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
}

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

.prestart-row:hover {
    background: var(--gray-50);
}

.prestart-date .date-main {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 2px;
}

.prestart-date .date-time {
    font-size: 14px;
    color: var(--gray-500);
}

.prestart-signatures {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

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

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .prestart-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "date signatures"
            "actions actions";
        gap: 12px;
        align-items: start;
    }
    
    .prestart-date {
        grid-area: date;
    }
    
    .prestart-signatures {
        grid-area: signatures;
        align-self: start;
    }
    
    .prestart-actions {
        grid-area: actions;
        width: 100%;
    }
    
    .prestart-actions button {
        flex: 1;
    }
}

/* ---- Entry rows (used in access register entries modal) ---- */
.entry-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

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

.entry-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

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

.entry-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.entry-meta {
    font-size: 13px;
    color: var(--text-gray);
}

.entry-sig {
    width: 60px;
    height: 30px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--gray-50);
    padding: 2px;
}

/* ---- Asset Register Accordion ---- */
.register-accordion {
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: var(--bg-primary, white);
}

.register-accordion:first-child {
    border-radius: 8px 8px 0 0;
}

.register-accordion:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.register-accordion:only-child {
    border-radius: 8px;
}

.register-accordion .prestart-row {
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: none;
}

.register-accordion .prestart-row:hover {
    background: var(--gray-50, #f9fafb);
}

.register-accordion .prestart-date {
    flex: 1;
    min-width: 0;
}

.accordion-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--gray-400);
}

.register-accordion.expanded .accordion-chevron {
    transform: rotate(180deg);
}

.register-entries {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--gray-50, #f9fafb);
    padding: 0 1rem;
}

.register-accordion.expanded .register-entries {
    max-height: 4000px;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.register-accordion.expanded {
    background: var(--bg-primary, white);
}

/* Flush rows inside a .prestarts-list card — match the access
   register's visual rhythm: 14/16 padding, full-width hairline
   divider between rows, no per-row border-radius. Scoped via the
   direct-child selector so nested .register-entry-card uses inside
   other pages (e.g. access register's expanded entries) are not
   affected. */
.prestarts-list > .register-entry-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0;
}

.prestarts-list > .register-entry-card:last-child {
    border-bottom: none;
}

.register-card-list > .register-entry-card {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0;
}

.register-card-list > .register-entry-card:last-child {
    border-bottom: none;
}

[data-theme="dark"] .prestarts-list > .register-entry-card {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .register-card-list > .register-entry-card {
    background: var(--bg-secondary, #1e1e1e);
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .register-entry-info {
    color: var(--text-dark, #e5e5e5);
}

[data-theme="dark"] .register-entry-name {
    color: var(--text-dark, #e5e5e5);
}

[data-theme="dark"] .register-entry-meta {
    color: var(--text-gray, #8a8a8a);
}

/* ── Register sections (per-location / per-group cards) ──
   Each section = simple title label + its own .prestarts-list card
   below. Headers sit OUTSIDE the card, matching the cutting-sheets
   section-header pattern. Gmail-like vertical rhythm between
   sections and between a header and its table. */
.register-sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 8px;
}

.register-section {
    display: block;
}

.register-section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 2px;
}

.register-section-header-text {
    flex: 1;
    min-width: 0;
}

.register-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    margin: 0 0 2px;
    line-height: 1.25;
}

.register-section-subtitle {
    font-size: 13px;
    color: var(--gray-500, #6b7280);
    margin: 0;
    line-height: 1.3;
}

[data-theme="dark"] .register-section-title {
    color: #e0e0e0;
}

[data-theme="dark"] .register-section-subtitle {
    color: #8a8a8a;
}

/* Needs-inspection section (overdue assets pinned at top of Log) */
.register-section--needs-attention .register-section-title {
    color: var(--danger, #ef4444);
}

[data-theme="dark"] .register-section--needs-attention .register-section-title {
    color: #f87171;
}

/* Entry card */
.register-entry-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.register-entry-card:hover {
    background: var(--gray-100, #f3f4f6);
}

.register-entry-card:last-child {
    border-bottom: none;
}

.register-entry-info {
    flex: 1;
    min-width: 0;
}

.register-entry-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-800, #1f2937);
    line-height: 1.4;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.register-entry-meta {
    font-size: 13px;
    color: var(--gray-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.register-entry-meta .form-link {
    color: var(--primary-blue);
}

.register-entry-right {
    flex-shrink: 0;
    text-align: right;
}

.register-entry-times {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700, #374151);
    white-space: nowrap;
}

.register-time-sep {
    margin: 0 4px;
    color: var(--gray-300, #d1d5db);
}

.register-noout {
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    color: var(--gray-400, #9ca3af);
}

.register-entry-photos {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.register-entry-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--gray-200, #e5e7eb);
    transition: opacity 0.15s, transform 0.15s;
}

.register-entry-thumb:hover {
    opacity: 0.85;
    transform: scale(1.04);
}

.device-flag {
    color: #d97706;
    font-size: 11px;
    font-weight: 500;
    background: rgba(217, 119, 6, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.register-entry-thumb-wrap {
    position: relative;
    cursor: pointer;
}

.register-entry-photo-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Asset entry chevron */
.register-entry-chevron {
    flex-shrink: 0;
    color: var(--gray-400, #9ca3af);
    transition: color 0.15s;
}

.register-entry-card:hover .register-entry-chevron {
    color: var(--gray-600, #4b5563);
}

/* Asset status badges */
.asset-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.5;
}

.asset-badge--overdue {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.asset-badge--due-soon {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.asset-badge--pass {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success, #10b981);
}

.asset-badge--fail {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger, #ef4444);
}

.asset-badge--neutral {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-500, #6b7280);
}

/* ── Log entry row refinements (data-density pass) ── */

/* Small asset ID chip — replaces the weak "(P13456)" grey parens */
.register-id-chip {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-600, #4b5563);
    background: var(--gray-100, #f3f4f6);
    padding: 1px 7px;
    border-radius: 4px;
    line-height: 1.6;
    white-space: nowrap;
}

[data-theme="dark"] .register-id-chip {
    color: #c9c9c9;
    background: #2a2a2a;
}

/* Make the whole log row interactive when an inspection URL exists */
.register-entry-card--interactive {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.register-entry-card--interactive:hover {
    background: var(--gray-100, #f3f4f6);
}

.register-entry-card--interactive:hover .register-entry-chevron {
    color: var(--primary-blue);
}

[data-theme="dark"] .register-entry-card--interactive:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Right column: stack badge above time for better alignment */
.register-entry-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Log header count badge (replaces ambiguous "✓ N" pill) ── */
.log-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.log-count-badge--pass {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success, #10b981);
}

.log-count-badge--fail {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger, #ef4444);
}

.log-count-badge--neutral {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-600, #4b5563);
}

.log-count-badge-sep {
    opacity: 0.5;
    margin: 0 2px;
    font-weight: 400;
}

[data-theme="dark"] .log-count-badge--neutral {
    background: #2a2a2a;
    color: #c9c9c9;
}

/* Category pill */
.asset-category-pill {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-500, #6b7280);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Empty assets placeholder */
.register-empty-assets {
    text-align: center;
    padding: 24px 16px;
    color: var(--gray-400);
    font-size: 13px;
}

/* Location frequency label */
.location-freq-label {
    font-weight: 400;
    font-size: 12px;
    color: var(--gray-400);
}

/* Log form link */
.register-form-link {
    font-size: 11px;
    padding: 4px 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}

/* Log comment highlight */
.register-comment-highlight {
    color: var(--danger, #ef4444);
}

/* ── Asset Status Dots (inline on asset cards) ── */
.asset-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.asset-status-dot--ok {
    background: var(--success, #10b981);
}

.asset-status-dot--due-soon {
    background: var(--warning, #f59e0b);
}

.asset-status-dot--overdue {
    background: var(--danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.asset-status-dot--none {
    background: var(--gray-300, #d1d5db);
}

/* ── Register KPI Summary Strip ── */
.register-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}

.register-kpi-tile {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.register-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray, #8a8a8a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.register-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark, #111827);
    line-height: 1.1;
}

.register-kpi-tile--danger .register-kpi-value {
    color: var(--danger, #ef4444);
}

.register-kpi-tile--warning .register-kpi-value {
    color: var(--warning, #f59e0b);
}

[data-theme="dark"] .register-kpi-tile {
    background: #191919;
    border-color: #2e2e2e;
}

[data-theme="dark"] .register-kpi-label {
    color: #8a8a8a;
}

[data-theme="dark"] .register-kpi-value {
    color: #e0e0e0;
}

@media (max-width: 600px) {
    .register-kpi-strip {
        gap: 8px;
    }
    .register-kpi-tile {
        padding: 10px 12px;
    }
    .register-kpi-value {
        font-size: 20px;
    }
    .register-kpi-label {
        font-size: 11px;
    }
}

/* ── Register Toolbar (search) ── */
.register-toolbar {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 20px;
    align-items: stretch;
}

.register-toolbar-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: var(--bg-primary, #ffffff);
    border: 1.5px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark, #111827);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.register-toolbar-action:hover,
.register-toolbar-action.active {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.register-toolbar-action svg {
    flex-shrink: 0;
}

[data-theme="dark"] .register-toolbar-action {
    background: #191919;
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .register-toolbar-action:hover,
[data-theme="dark"] .register-toolbar-action.active {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.register-search-wrapper {
    flex: 1;
    position: relative;
}

.register-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.register-search-input {
    padding-left: 40px !important;
    padding-right: 36px !important;
}

.register-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-200);
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.15s;
}

.register-search-clear:hover {
    background: var(--gray-300);
    color: var(--gray-800);
}

/* ── Overdue badge on accordion header ── */
.location-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #ef4444);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Add Asset footer button inside accordion ── */
/* ── Search highlight ── */
.search-no-results {
    text-align: center;
    padding: 32px 16px;
    color: var(--gray-400);
    font-size: 14px;
}

.search-no-results svg {
    display: block;
    margin: 0 auto 12px;
    color: var(--gray-300);
}

/* ── Dark mode for new elements ── */
[data-theme="dark"] .asset-status-dot--none {
    background: #3b3b3b;
}

[data-theme="dark"] .asset-status-dot--overdue {
    box-shadow: 0 0 0 3px rgba(239, 123, 123, 0.15);
}

[data-theme="dark"] .register-search-icon {
    color: #5c5c5c;
}

[data-theme="dark"] .register-search-clear {
    background: #2e2e2e;
    color: #8a8a8a;
}

[data-theme="dark"] .register-search-clear:hover {
    background: #3b3b3b;
    color: #c0c0c0;
}

[data-theme="dark"] .location-overdue-badge {
    background: rgba(239, 123, 123, 0.12);
    color: #ef7b7b;
}

[data-theme="dark"] .search-no-results {
    color: #5c5c5c;
}

/* ── Lightbox (register) ── */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: lightboxFadeIn 0.2s ease;
}

.lightbox-overlay.active {
    display: flex;
}

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

.lightbox-img {
    max-width: 88%;
    max-height: 80vh;
    border-radius: 8px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.15s;
}

.lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 32px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
    z-index: 2;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

.lightbox-label {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* AI Loading Overlay */
#ai-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 8px;
}

.ai-loading-content {
    text-align: center;
}

.ai-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

.ai-loading-text {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.ai-loading-subtext {
    font-size: 13px;
    color: var(--gray-500);
}

/* AI Prompt Modal Styles */
#ai-prompt-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ai-prompt-modal-content {
    background: white;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-prompt-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-prompt-modal-header h3 {
    margin: 0;
    color: var(--gray-800);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-prompt-modal-header h3 svg {
    color: var(--primary-blue);
}

.ai-prompt-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--gray-500);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-prompt-modal-close:hover {
    color: var(--gray-800);
}

.ai-prompt-modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.ai-prompt-modal-body label {
    display: block;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.ai-prompt-modal-body p {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

#ai-prompt-textarea {
    width: 100%;
    height: 150px;
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
    background: white;
    color: var(--text-dark);
}

#ai-prompt-textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.ai-prompt-modal-footer {
    padding: 20px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    #ai-prompt-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .ai-prompt-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .ai-prompt-modal-header {
        flex-shrink: 0 !important;
    }

    .ai-prompt-modal-body {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ai-prompt-modal-footer {
        flex-shrink: 0 !important;
    }
}

/* Quill AI button styling */
.ql-ai-pdf, .ql-ai-settings {
    cursor: pointer !important;
}

.ql-ai-pdf:hover, .ql-ai-settings:hover {
    color: var(--primary-blue) !important;
}

.ql-ai-pdf svg, .ql-ai-settings svg {
    vertical-align: middle;
}

/* SWMS Task Checkboxes */
.swms-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s;
}

.swms-task-item.high-risk {
    border-left: 4px solid #dc2626;
}

.swms-task-item.medium-risk {
    border-left: 4px solid #f59e0b;
}

.swms-task-item.low-risk {
    border-left: 4px solid #10b981;
}

.swms-task-item:hover {
    background: var(--gray-50);
    border-color: var(--primary-blue);
}

.swms-task-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.swms-task-item label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.risk-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.risk-badge.high {
    background: var(--danger-light);
    color: #991b1b;
}

.risk-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.risk-badge.low {
    background: var(--success-light);
    color: #065f46;
}

/* --- Smart Forms / ITPs --- */

/* Fix double borders between form sections */
.form-section {
    border-bottom: 1px solid var(--gray-200) !important;
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}

.form-section + .form-section {
    padding-top: 24px !important;
    border-top: none !important;
}

.form-section:last-child {
    border-bottom: none !important;
}

/* Prompt Section */
.prompt-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.prompt-section.form-card {
    max-width: none;
}

.prompt-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 12px;
    background: white;
    color: var(--text-dark);
}

.prompt-textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.prompt-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.prompt-actions .action-btn {
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 0.938rem;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.prompt-actions .action-btn:hover {
    transform: translateY(-1px);
}

.prompt-actions .btn.btn-primary:hover {
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.3);
}

.prompt-actions .action-btn:active {
    transform: translateY(0);
}

/* Preview Section */
.preview-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.preview-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-content {
    border: 2px dashed var(--gray-200);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-400);
}

.preview-content.has-content {
    border: 1px solid var(--gray-200);
    padding: 0;
    text-align: left;
}

/* ==========================================
   PREVIEW FORM STYLES - Match itp-view.html
   ========================================== */

/* Preview Design System */
.preview-form {
    --preview-primary: #1e40af;
    --preview-text-primary: #1f2937;
    --preview-text-secondary: #6b7280;
    --preview-border: var(--gray-200);
    --preview-background: #f9fafb;
    --preview-danger: #dc2626;
    background: var(--preview-background);
    border-radius: 8px;
    overflow: hidden;
}

/* Preview Header */
.preview-form-header {
    background: white;
    border-bottom: 1px solid var(--preview-border);
    padding: 16px;
}

.preview-form-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.preview-form-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.preview-form-company {
    font-size: 16px;
    font-weight: 600;
    color: var(--preview-text-primary);
}

/* Preview Page Title */
.preview-form-title {
    background: white;
    padding: 24px 16px;
    border-bottom: 1px solid var(--preview-border);
}

.preview-form-title h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--preview-text-primary);
    margin: 0 0 4px 0;
}

.preview-form-subtitle {
    font-size: 14px;
    color: var(--preview-text-secondary);
}

/* Preview Section */
.preview-section {
    background: white;
    border-bottom: 1px solid var(--preview-border);
    padding: 24px 16px;
}

.preview-section:last-child {
    border-bottom: none;
}

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

.preview-section-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--preview-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

/* Delete section button - hidden by default, shown on hover */
.preview-delete-section-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--preview-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.preview-section:hover .preview-delete-section-btn {
    opacity: 1;
}

.preview-delete-section-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Delete field button */
.preview-field-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.preview-field-header-row .preview-field-label {
    flex: 1;
    margin-bottom: 12px;
}

.preview-delete-field-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--preview-text-secondary);
    cursor: pointer;
    opacity: 0;
    flex-shrink: 0;
    margin-top: 1px;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.preview-field-item:hover > .preview-field-header-row > .preview-delete-field-btn {
    opacity: 1;
}

.preview-delete-field-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Editable elements - click to edit */
.preview-editable {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.preview-editable:hover {
    background: rgba(59, 130, 246, 0.06);
    outline: 1px dashed rgba(59, 130, 246, 0.3);
    outline-offset: 2px;
}

.preview-editable.editing {
    background: transparent;
    outline: none;
}

/* Inline text input for editing */
.preview-inline-input {
    width: 100%;
    border: 1.5px solid #3b82f6;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Preview Field Item */
.preview-field-item {
    margin-bottom: 24px;
}

.preview-field-item:last-child {
    margin-bottom: 0;
}

.preview-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--preview-text-primary);
}

.preview-field-label .required {
    color: var(--preview-danger);
}

.preview-field-help {
    font-size: 13px;
    color: var(--preview-text-secondary);
    margin-bottom: 12px;
}

/* Preview Input Field */
.preview-input-field {
    width: 100%;
    padding: 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background: white;
    color: var(--preview-text-secondary);
}

.preview-input-field:disabled {
    background: var(--gray-100);
    border-color: var(--gray-200);
    cursor: not-allowed;
}

textarea.preview-input-field {
    resize: vertical;
    min-height: 80px;
}

/* Preview Radio/Checkbox Groups */
.preview-radio-group, .preview-checkbox-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.preview-radio-option, .preview-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: not-allowed;
    padding: 10px 16px;
    background: #fafbfc;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    opacity: 0.7;
}

.preview-radio-option input, .preview-checkbox-option input {
    width: 20px;
    height: 20px;
    accent-color: var(--preview-primary);
}

.preview-radio-option span, .preview-checkbox-option span {
    font-size: 15px;
    color: var(--preview-text-primary);
}

/* Preview Upload Area */
.preview-upload-area {
    border: 2px dashed #9ca3af;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    color: var(--preview-text-secondary);
    background: #fafbfc;
}

.preview-upload-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
}

/* Preview Signatures Section */
.preview-signatures {
    background: white;
    padding: 16px;
}

.preview-signatures-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border: 1px solid var(--preview-border);
    border-radius: 4px;
}

.preview-signatures-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--preview-text-primary);
}

.preview-signatures-badge {
    background: var(--preview-primary);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

/* ITP Forms List - matches prestarts-list styling */
.itps-list {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.itp-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
}

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

.itp-row:hover {
    background: var(--gray-50);
}

.itp-info .info-main {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 2px;
}

.itp-info .info-meta {
    font-size: 14px;
    color: var(--gray-500);
}

.itp-submissions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.itp-signatures {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

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

/* Mobile responsive for ITP list */
@media (max-width: 768px) {
    .itp-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "info badge"
            "actions actions";
        gap: 12px;
        align-items: start;
    }
    
    .itp-info {
        grid-area: info;
    }
    
    .itp-submissions,
    .itp-signatures {
        grid-area: badge;
        align-self: start;
    }
    
    .itp-actions {
        grid-area: actions;
        width: 100%;
    }
    
    .itp-actions button {
        flex: 1;
    }
}

/* Locked state */
.itp-row.is-locked {
    background: #fffbeb;
}

.locked-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    margin-left: 8px;
    text-transform: uppercase;
}

/* Smart Form Cards Grid */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.sf-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--gray-200);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.sf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

/* Smart form card 3-dot menu */
.sf-card .card-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.sf-card .menu-trigger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
}

.sf-card .menu-trigger:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.sf-card .menu-trigger svg {
    width: 18px;
    height: 18px;
}

.sf-card .dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    padding: 6px;
    z-index: 1000;
    display: none;
    animation: dropdownFadeIn 0.15s ease;
}

.sf-card .dropdown-menu.active {
    display: block;
}

.sf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.sf-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--primary-blue) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.sf-card-badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.sf-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.sf-card-description {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0 0 12px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-card-meta {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-400);
    margin-bottom: 16px;
}

.sf-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sf-card-actions .btn {
    flex: 1;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-danger {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.btn-danger:hover {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
}

@media (max-width: 768px) {
    .forms-grid {
        grid-template-columns: 1fr;
    }
    
    .sf-card-actions {
        flex-direction: column;
    }
    
    .sf-card-actions .btn {
        width: 100%;
    }
}

/* Drawings Selector */
.drawings-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 16px;
}

.drawings-checkbox:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.drawings-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-blue);
    flex-shrink: 0;
}

.drawings-checkbox-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
}

.drawings-checkbox-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.drawings-selector {
    margin-top: 12px;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
}

.drawings-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.drawings-selector-title {
    font-size: 14px;
    font-weight: 600;
    color: #0369a1;
}

.btn-select-drawings {
    padding: 8px 16px;
    background: white;
    border: 1px solid #0369a1;
    color: #0369a1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-select-drawings:hover {
    background: #0369a1;
    color: white;
}

.selected-drawings-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.drawing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    font-size: 13px;
    color: var(--gray-700);
}

.drawing-chip-category {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-blue);
    background: #e0f2fe;
    padding: 2px 6px;
    border-radius: 4px;
}

.drawing-chip-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.drawing-chip-remove:hover {
    color: #ef4444;
}

.no-drawings-selected {
    color: var(--gray-500);
    font-size: 13px;
    font-style: italic;
}

/* Drawings Modal */
.drawings-modal .modal-content {
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.drawings-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.drawings-filter {
    padding: 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.drawings-filter select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    color: var(--text-dark);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    height: 48px;
    transition: all 0.2s;
}

.drawings-filter select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.drawings-list-modal {
    padding: 8px;
}

.drawing-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.drawing-item:hover {
    background: var(--gray-100);
}

.drawing-item.selected {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.drawing-item-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.drawing-item.selected .drawing-item-checkbox {
    background: #3b82f6;
    border-color: #3b82f6;
}

.drawing-item-info {
    flex: 1;
    min-width: 0;
}

.drawing-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    word-break: break-word;
    line-height: 1.4;
}

.drawing-item-category {
    font-size: 12px;
    color: var(--gray-500);
}

.sf-card-drawings {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.sf-card-drawings svg {
    color: var(--primary-blue);
}

.sf-card-drawings span {
    font-size: 12px;
    color: var(--gray-500);
}

/* Card Menu - 3 Dot Menu */
.card-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.menu-trigger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.2s;
}

.menu-trigger:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.menu-trigger svg {
    width: 18px;
    height: 18px;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    padding: 6px;
    z-index: 1000;
    display: none;
    animation: dropdownFadeIn 0.15s ease;
}

.dropdown-menu.active {
    display: block;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    background: none;
    width: 100%;
    text-align: left;
    border-radius: 8px;
    transition: background 0.15s ease;
    line-height: 1;
}

.menu-item:hover {
    background: var(--bg-light);
}

.menu-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-gray);
    flex-shrink: 0;
}

.menu-item:hover svg {
    color: var(--primary-blue);
}

.menu-item.danger {
    color: var(--danger);
}

.menu-item.danger svg {
    color: var(--danger);
}

.menu-item.danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.menu-item.danger:hover svg {
    color: #dc2626;
}

.menu-item .toggle-indicator {
    margin-left: auto;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.menu-item .toggle-indicator.on {
    background: #dcfce7;
    color: #16a34a;
}

.menu-item .toggle-indicator.off {
    background: var(--gray-100);
    color: var(--gray-500);
}

.menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

.info-drawing {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--primary-blue);
}

.info-drawing svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-drawing span {
    line-height: 1.4;
}

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-200);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn-primary .loading-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* Mobile Modal - Full Screen */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-start;
        padding: 0;
    }

    .modal-content {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        max-width: none;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        flex-shrink: 0;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        flex-shrink: 0;
        border-top: 2px solid var(--gray-200);
    }
}

/* Ensure save modal can scroll on all screen sizes */
#saveModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#saveModal .modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

/* Draft Items */
.draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    transition: background-color 0.15s;
}

.draft-item:hover {
    background-color: #f9fafb;
}

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

.draft-info {
    flex: 1;
}

.draft-title {
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.draft-subtitle {
    font-size: 13px;
    color: var(--gray-500);
}

.draft-delete-btn {
    display: inline;
    border: none;
    background: none;
    color: #ef4444;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-top: 6px;
}

.draft-delete-btn:hover {
    text-decoration: underline;
}

.draft-item > svg {
    color: var(--gray-400);
    flex-shrink: 0;
}

/* Make form card title look clickable */
.sf-card-title {
    transition: color 0.15s;
}

.sf-card-title:hover {
    color: #1e40af;
}

/* Modal close button */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: var(--gray-500);
    padding: 4px 12px;
    border-radius: 8px;
    transition: background-color 0.15s, color 0.15s;
}

.modal-close-btn:hover {
    background-color: #f3f4f6;
    color: var(--gray-800);
}

/* Drafts modal desktop */
.drafts-modal-content {
    max-width: 480px;
}

/* Drafts modal - mobile full screen */
@media (max-width: 640px) {
    #drafts-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }

    #drafts-modal .drafts-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #drafts-modal .modal-header {
        padding: 16px 20px;
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    #drafts-modal .modal-body {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #drafts-modal #drafts-list {
        max-height: none;
    }

    #drafts-modal .modal-footer {
        flex-shrink: 0 !important;
        padding: 16px 20px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .modal-close-btn {
        font-size: 36px;
        padding: 8px 16px;
        min-width: 48px;
        min-height: 48px;
    }
}

/* --- Toolbox Talks --- */

/* Form sections styling */
.form-section {
    border-bottom: 1px solid var(--gray-200) !important;
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}

.form-section + .form-section {
    padding-top: 24px !important;
    border-top: none !important;
}

.form-section:last-child {
    border-bottom: none !important;
}

/* Dynamic field styling */
.dynamic-field-container {
    margin-bottom: 12px;
}

.dynamic-field-wrapper {
    position: relative;
}

.dynamic-field-wrapper textarea {
    width: 100%;
    padding: 12px 50px 12px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    background: white;
    color: var(--text-dark);
}

.dynamic-field-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.remove-field-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-field-btn {
    width: 100%;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* History responsive layout */
.prestarts-list {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.prestart-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
    align-items: center;
}

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

.prestart-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-main {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
}

.date-time {
    font-size: 13px;
    color: var(--gray-500);
}

.prestart-signatures {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.prestart-row:hover {
    background: var(--gray-50);
}

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

@media (max-width: 768px) {
    .prestart-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date signatures"
            "actions actions";
    }
    
    .prestart-date {
        grid-area: date;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .prestart-signatures {
        grid-area: signatures;
        white-space: nowrap;
    }
    .prestart-actions {
        grid-area: actions;
        width: 100%;
    }
    
    .prestart-actions button {
        flex: 1;
    }
}

#loadMoreBtn {
    width: 100%;
    padding: 12px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 6px;
    color: var(--gray-800);
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
}

/* --- Site Log --- */

/* Textarea styling to match form-input */
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.938rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-family: inherit;
    transition: all 0.2s;
    resize: vertical;
    min-height: 100px;
    background: white;
    color: var(--text-dark);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.form-textarea::placeholder {
    color: var(--gray-400);
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-item-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.photo-item-remove:hover {
    background: rgba(239, 68, 68, 0.9);
    transform: scale(1.1);
}

.photo-item-remove svg {
    width: 16px;
    height: 16px;
}

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

/* Gallery Grid Styles */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery-item {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: white;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.gallery-item-info {
    padding: 12px;
}

.gallery-item-location {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: 4px;
}

.gallery-item-description {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.4;
}

.gallery-item-date {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 8px;
}

.gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-400);
}

.gallery-empty svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    opacity: 0.5;
}

/* Action Toggle */
.action-toggle-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.action-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.action-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.action-toggle input:checked + .toggle-slider {
    background-color: #ef4444;
}

.action-toggle input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.action-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-text {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 14px;
}

.toggle-help {
    font-size: 12px;
    color: var(--gray-500);
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 0 2.5rem 0 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 0.938rem;
    font-family: inherit;
    color: var(--text-dark);
    background: white;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    height: 40px;
    min-width: 160px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Actions List */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.action-card.closed {
    opacity: 0.7;
}

/* Overdue card indicator */
.action-card.overdue {
    border-color: #dc2626;
}

.action-card-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.action-card-info {
    flex: 1;
    min-width: 0;
}

.action-card-location {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 6px 0;
    word-break: break-word;
    line-height: 1.4;
    padding-right: 32px;
}

.action-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.action-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.action-card-badge.open {
    background: #fef2f2;
    color: #991b1b;
}

.action-card-badge.closed {
    background: #f0fdf4;
    color: #166534;
}

/* Age badges */
.age-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.age-badge.age-fresh {
    background: #f0fdf4;
    color: #166534;
}

.age-badge.age-warning {
    background: #fef3c7;
    color: #92400e;
}

.age-badge.age-critical {
    background: #fef2f2;
    color: #991b1b;
}

.action-card-description {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
    white-space: pre-wrap;
}

/* Card detail rows (like drawings) */
.action-card-detail {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
}

.action-card-detail:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.action-card-label {
    font-weight: 500;
    color: var(--gray-400);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.action-card-value {
    font-weight: 500;
    color: var(--gray-800);
    text-align: right;
}

.action-card-value.due-overdue {
    color: var(--danger);
}

.action-card-value.due-today {
    color: #d97706;
}

.action-card-value.due-soon {
    color: #d97706;
}

.action-card-value.photo-link {
    color: var(--primary-blue);
    cursor: pointer;
}

.action-card-value.photo-link:hover {
    text-decoration: underline;
}

/* 3-dot menu */
.card-menu {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 10;
}

.menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

/* Resolution info for closed actions */
.resolution-info {
    background: #f0fdf4;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
    border: 1px solid #bbf7d0;
}

.resolution-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #166534;
    margin-bottom: 6px;
}

.resolution-notes {
    font-size: 13px;
    color: #15803d;
    white-space: pre-wrap;
}

/* Category badge in meta */
.category-badge {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.category-badge.pipe_issue { background: #fef2f2; color: #991b1b; }
.category-badge.design_issue { background: #eff6ff; color: #1e40af; }
.category-badge.incomplete_design { background: #fefce8; color: #854d0e; }
.category-badge.missing_measurements { background: #fdf4ff; color: #86198f; }
.category-badge.drawing_issue { background: #f0fdf4; color: #166534; }
.category-badge.general { background: #f3f4f6; color: #374151; }

/* Action modals */
.action-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.action-modal-overlay.open {
    display: flex;
}

.action-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.action-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.action-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
}

.action-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: 4px;
}

.action-modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.action-modal-body {
    padding: 20px;
}

.action-modal-body label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.action-modal-body input[type="date"],
.action-modal-body select,
.action-modal-body textarea {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    color: var(--text-dark);
    background: white;
    margin-bottom: 16px;
    transition: all 0.2s;
}

.action-modal-body select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 2.5rem 0 1rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.action-modal-body textarea {
    height: 100px;
    padding: 12px;
    resize: vertical;
    font-family: inherit;
}

.action-modal-body input:focus,
.action-modal-body select:focus,
.action-modal-body textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.action-modal-buttons {
    display: flex;
    gap: 10px;
}

.action-modal-buttons button {
    flex: 1;
    height: 44px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel {
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-modal-cancel:hover {
    background: var(--gray-100);
}

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

.btn-modal-primary:hover {
    background: var(--primary-blue-hover);
}

.btn-modal-success {
    background: #16a34a;
    border: none;
    color: white;
}

.btn-modal-success:hover {
    background: #15803d;
}

@media (max-width: 768px) {
    .action-modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .action-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .action-modal-header {
        flex-shrink: 0;
    }

    .action-modal-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .action-modal-body textarea {
        flex: 1;
        min-height: 120px;
    }

    .action-modal-buttons {
        margin-top: auto;
        padding-top: 16px;
    }
}

.action-count {
    background: #ef4444 !important;
    color: white !important;
}

/* --- Timesheets --- */

/* ==================== SORTLY-STYLE LIST VIEW ==================== */
/* COPIED EXACTLY FROM stores.html */

.stock-list {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.stock-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.75rem;
    transition: background 0.15s;
}

.stock-item:hover {
    background: var(--gray-50);
}

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

.stock-thumb {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
}

.stock-thumb-placeholder {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stock-item-info {
    flex: 1;
    min-width: 0;
}

.stock-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-item-category {
    font-size: 0.8125rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-item-qty {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
}

.stock-item-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.stock-icon-btn {
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stock-icon-btn:hover {
    background: var(--gray-200);
    color: var(--primary-blue);
}

.stock-icon-btn.delete:hover {
    background: var(--danger-light);
    color: var(--danger);
}

/* WhatsApp safety-group member indicator (also a wa.me message shortcut) */
.stock-icon-btn.whatsapp {
    color: #25D366;
}

.stock-icon-btn.whatsapp:hover {
    background: rgba(37, 211, 102, 0.12);
    color: #1da851;
}

/* Stock Take - Editable Quantity */
.stock-item-qty-editable {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.15s;
    user-select: none;
}

.stock-item-qty-editable:hover {
    background: var(--gray-200);
}

.stock-qty-input {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    width: 80px;
    text-align: right;
    border: 2px solid var(--primary-blue);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    outline: none;
}

.stock-qty-input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.stock-item.qty-changed {
    background: #fef3c7;
}

/* Sticky Footer for Stock Take */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 2px solid var(--gray-200);
    padding: 1rem;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.sticky-footer-buttons {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* Add padding to tab content when footer is visible */
.tab-content.has-sticky-footer {
    padding-bottom: 80px;
}

@media (max-width: 768px) {
    .stock-item {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }
    
    .stock-thumb,
    .stock-thumb-placeholder {
        width: 44px;
        height: 44px;
    }
    
    .stock-item-name {
        font-size: 0.875rem;
    }
    
    .stock-item-category {
        font-size: 0.75rem;
    }
    
    .stock-item-qty {
        font-size: 1.25rem;
        min-width: 45px;
    }
    
    .stock-icon-btn {
        padding: 0.375rem;
    }
    
    .stock-qty-input {
        font-size: 1.125rem;
        width: 70px;
    }
    
    .sticky-footer-buttons {
        flex-direction: column;
    }
    
    .sticky-footer-buttons .btn {
        width: 100%;
    }
}

/* ==================== MODAL MOBILE FULL SCREEN ==================== */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .modal-header {
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        padding: 1rem !important;
        align-items: center !important;
    }

    .modal-footer {
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        padding: 0.75rem 1rem !important;
    }

    .modal-body {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }
}

/* ==================== TIMESHEET-SPECIFIC (minimal additions) ==================== */

/* Date icon - styled version of stock-thumb-placeholder */
.date-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

.stock-item.weekend .date-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stock-item.weekend {
    background: var(--gray-50, #f9fafb);
}

.stock-item.weekend:hover {
    background: var(--gray-100, #f3f4f6);
}

.stock-item.weekend.qty-changed {
    background: var(--gray-100, #f3f4f6);
}

/* Employee avatar - circular version */
.employee-avatar {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    overflow: hidden;
}

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

.employee-avatar i {
    font-size: 2.6rem;
    margin-top: 16px;
    color: white;
}

/* Employee photo upload */
.employee-photo-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employee-photo-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 3.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.employee-photo-preview i {
    font-size: 4rem;
    margin-top: 24px;
    color: white;
}

.employee-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Week header */
.week-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.week-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.week-nav-btn {
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.week-nav-btn:hover:not(:disabled) {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.week-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.week-dates {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    min-width: 120px;
    text-align: center;
}

.period-segments {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 2px;
}

.period-segment {
    padding: 0.5rem 0.875rem;
    border: none;
    background: transparent;
    color: var(--gray-600);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    border-radius: 6px;
}

.period-segment:hover {
    color: var(--gray-800);
    background: var(--gray-200);
}

.period-segment.active {
    background: white;
    color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Keep week-total for potential future use */
.week-total {
    text-align: right;
}

.week-total-label {
    font-size: 0.75rem;
    opacity: 0.8;
}

.week-total-hours {
    font-size: 1.5rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .week-header {
        padding: 0.75rem 1rem;
    }
    
    .date-icon,
    .employee-avatar {
        width: 44px;
        height: 44px;
    }
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.status-badge.draft { background: #f3f4f6; color: #6b7280; }
.status-badge.not_submitted { background: #f3f4f6; color: #6b7280; }
.status-badge.submitted { background: #fef3c7; color: #92400e; }
.status-badge.approved { background: #d1fae5; color: #166534; }

.preset-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.preset-badge.standard { background: #dbeafe; color: #1e40af; }
.preset-badge.casual { background: #fef3c7; color: #92400e; }
.preset-badge.flat_rate { background: #f3e8ff; color: #7c3aed; }
.preset-badge.custom { background: #f3f4f6; color: #374151; }

/* Payroll row - subdued accounting style */
.payroll-row .payroll-hours {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--gray-700);
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
}

.payroll-row .payroll-amount {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--gray-700);
    min-width: 90px;
    text-align: right;
    flex-shrink: 0;
}

.payroll-row.payroll-total {
    background: var(--gray-50);
    border-top: 2px solid var(--gray-200);
}

.payroll-row.payroll-total .stock-item-name,
.payroll-row.payroll-total .payroll-hours,
.payroll-row.payroll-total .payroll-amount {
    font-weight: 600;
}

.payroll-row .stock-item-name {
    margin-bottom: 0;
}

.payroll-warning {
    font-size: 0.75rem;
    color: #d97706;
    margin-top: 0.125rem;
}

/* Admin employee filter dropdown */
.employee-filter {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.employee-filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}

.employee-filter-select-wrapper {
    position: relative;
    flex: 1;
}

.employee-filter-select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 6px;
    background-color: white;
    font-size: 0.875rem;
    color: var(--gray-900);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.employee-filter-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.employee-filter-chevron {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gray-400);
}

/* Cross-project hours display */
.cross-project-hours {
    font-size: 0.75rem;
    color: #5a8be6;
    margin-top: 0.125rem;
    line-height: 1.3;
}

/* Project split row in labor costs */
.project-split td {
    border-bottom: none !important;
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

/* Dark theme support */
[data-theme="dark"] .employee-filter {
    background: #191919;
    border-color: #2e2e2e;
}

[data-theme="dark"] .employee-filter-label {
    color: #8a8a8a;
}

[data-theme="dark"] .employee-filter-select {
    background-color: #191919;
    color: #e0e0e0;
    border-color: #2e2e2e;
}

[data-theme="dark"] .employee-filter-select:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 3px rgba(107, 158, 255, 0.15);
}

[data-theme="dark"] .employee-filter-chevron {
    color: #8a8a8a;
}

[data-theme="dark"] .cross-project-hours {
    color: #6b9eff;
}

/* ==================== LEAVE & EXPENSE ENTRY STYLES ==================== */

/* Day container - wraps the day row + any leave/expense sub-entries */
.day-container {
    border-bottom: 1px solid #f0f0f0;
}

.day-container:last-child {
    border-bottom: none;
}

.day-container.weekend {
    background: var(--gray-50, #f9fafb);
}

.day-container.summary-container {
    padding: 0;
}

.day-container.summary-container > .stock-item {
    padding-bottom: 0.75rem;
}

.day-container.summary-container:has(.weekly-summary-breakdown) > .stock-item {
    padding-bottom: 0.25rem;
}

.day-container > .stock-item {
    border-bottom: none;
}

/* On-leave day row - leave type transforms the day row inline */
.stock-item.on-leave {
    transition: background 0.2s;
}

.stock-item.on-leave .entry-delete-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Leave type badge in day row name */
.entry-type-badge[class*="leave-badge-"] {
    color: white;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Leave type row backgrounds (light) */
.stock-item.leave-sick { background: #fef2f2; }
.stock-item.leave-rdo { background: #eff6ff; }
.stock-item.leave-personal { background: #f5f3ff; }
.stock-item.leave-annual { background: #f0fdf4; }
.stock-item.leave-long_service { background: #faf5ff; }
.stock-item.leave-compassionate { background: #fff1f2; }
.stock-item.leave-parental { background: #f0fdfa; }
.stock-item.leave-workers_comp { background: #fff7ed; }
.stock-item.leave-tafe { background: #ecfeff; }
.stock-item.leave-unpaid { background: #f9fafb; }

/* Leave type badge colors */
.leave-badge-sick { background: #dc2626; }
.leave-badge-rdo { background: #2563eb; }
.leave-badge-personal { background: #7c3aed; }
.leave-badge-annual { background: #16a34a; }
.leave-badge-tafe { background: #0891b2; }
.leave-badge-unpaid { background: #6b7280; }

/* Leave type hours colors */
.leave-hours-sick { color: #dc2626; }
.leave-hours-rdo { color: #2563eb; }
.leave-hours-personal { color: #7c3aed; }
.leave-hours-annual { color: #16a34a; }
.leave-hours-tafe { color: #0891b2; }
.leave-hours-unpaid { color: #6b7280; }

/* Individual entry row (expense sub-entries) */
.entry-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.5rem;
    margin-left: calc(50px + 0.75rem); /* align with content after date-icon */
    margin-right: 1rem; /* match stock-item right padding */
    border-radius: 6px;
    transition: background 0.15s;
}

.entry-row:first-of-type {
    margin-top: 0;
}

.entry-row:last-child {
    margin-bottom: 0.5rem;
}

.entry-row:hover {
    filter: brightness(0.97);
}

/* Expense line item - compact row below day entry */
.expense-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    margin: 0 0.75rem 0.375rem 0.75rem;
    border-radius: 6px;
    background: var(--gray-50, #f5f5f4);
    cursor: pointer;
    transition: background 0.15s;
}

.expense-line-item:first-of-type {
    margin-top: 0.125rem;
}

.expense-line-item:last-of-type {
    margin-bottom: 0.625rem;
}

.expense-line-item:hover {
    background: var(--gray-100, #e7e5e4);
}

.expense-line-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.expense-line-desc {
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.expense-view-image {
    font-size: 0.75rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}

.expense-view-image:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.expense-line-amount {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #d97706;
    white-space: nowrap;
    padding-left: 0.75rem;
    flex-shrink: 0;
    text-align: right;
}

/* Entry type badge - small coloured label */
.entry-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.entry-type-expense {
    background: #d97706;
    color: white;
}

.entry-info-spacer {
    flex: 1;
}

/* (expense description now uses stock-item-category) */

.entry-expense-amount {
    color: #d97706 !important;
}

.entry-receipt-icon {
    font-size: 0.875rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

/* (expense rows now use stock-item layout, no special spacer needed) */

/* Delete button on entry row - matches width of .add-entry-btn-inline */
.entry-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    transition: all 0.15s;
}

.entry-delete-btn:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Inline add entry + button */
.add-entry-btn-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-entry-btn-inline svg {
    width: 22px;
    height: 22px;
    transition: transform 0.25s ease;
}

.add-entry-btn-inline:hover {
    color: #6b7280;
    background: #f3f4f6;
}

.add-entry-btn-inline:active {
    transform: scale(0.9);
}

.add-entry-btn-inline.active {
    color: #3b82f6;
    background: #eff6ff;
}

.add-entry-btn-inline.active svg {
    transform: rotate(45deg);
}

/* Entry picker dropdown */
.entry-picker-dropdown {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 10001;
    padding: 0.375rem;
    min-width: 180px;
    max-height: 320px;
    max-height: min(320px, 60dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    transform-origin: top right;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.entry-picker-dropdown.open {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.entry-picker-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: #374151;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, transform 0.1s;
    text-align: left;
}

.entry-picker-option:hover:not(:disabled) {
    background: #f3f4f6;
}

.entry-picker-option:active:not(:disabled) {
    transform: scale(0.97);
}

.entry-picker-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

.entry-picker-added {
    margin-left: auto;
    font-size: 0.6875rem;
    color: #9ca3af;
}

.entry-picker-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
    .entry-picker-option {
        padding: 0.75rem;
        font-size: 1rem;
    }
}

/* Weekly summary breakdown */
.weekly-summary-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 1rem 0.75rem calc(1rem + 50px + 0.75rem);
}

.summary-tag {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: #e5e7eb;
    color: #374151;
}

/* Receipt upload area */
.receipt-upload-area {
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

/* Expense modal - compact, no wasted vertical space */
#expenseModal .modal-content {
    max-height: none;
    height: auto;
}

#expenseModal .modal-body {
    flex: 0 1 auto;
    padding: 1.25rem 2rem;
}

#expenseModal .modal-header {
    padding: 1.5rem 2rem 1rem;
}

#expenseModal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

#expenseModal .modal-footer .btn-delete {
    margin-right: auto;
}

@media (max-width: 768px) {
    #expenseModal .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    #expenseModal .modal-body {
        flex: 1 1 auto;
        padding: 1rem !important;
    }

    #expenseModal .modal-header {
        padding: 1.25rem 1rem 0.75rem;
    }

    #expenseModal .modal-footer {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .entry-row {
        margin-left: calc(44px + 0.5rem);
        margin-right: 0.75rem;
        padding: 0.25rem 0.375rem;
        gap: 0.375rem;
    }

    .entry-delete-btn {
        width: 40px;
    }

    .entry-receipt-icon {
        width: 40px;
    }

    .weekly-summary-breakdown {
        padding-left: calc(0.75rem + 44px + 0.5rem);
    }

    .entry-type-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    .expense-line-item {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .expense-line-desc {
        max-width: 120px;
    }
}

/* Dark theme support for leave/expense */
/* Dark mode: leave type row backgrounds */
[data-theme="dark"] .stock-item.leave-sick { background: rgba(220, 38, 38, 0.1); }
[data-theme="dark"] .stock-item.leave-rdo { background: rgba(37, 99, 235, 0.1); }
[data-theme="dark"] .stock-item.leave-personal { background: rgba(124, 58, 237, 0.1); }
[data-theme="dark"] .stock-item.leave-annual { background: rgba(22, 163, 74, 0.1); }
[data-theme="dark"] .stock-item.leave-long_service { background: rgba(147, 51, 234, 0.1); }
[data-theme="dark"] .stock-item.leave-compassionate { background: rgba(225, 29, 72, 0.1); }
[data-theme="dark"] .stock-item.leave-parental { background: rgba(13, 148, 136, 0.1); }
[data-theme="dark"] .stock-item.leave-workers_comp { background: rgba(234, 88, 12, 0.1); }
[data-theme="dark"] .stock-item.leave-tafe { background: rgba(8, 145, 178, 0.1); }
[data-theme="dark"] .stock-item.leave-unpaid { background: rgba(107, 114, 128, 0.1); }

/* Dark mode: leave hours colors (brighter for readability) */
[data-theme="dark"] .leave-hours-sick { color: #ef7b7b; }
[data-theme="dark"] .leave-hours-rdo { color: #60a5fa; }
[data-theme="dark"] .leave-hours-personal { color: #a78bfa; }
[data-theme="dark"] .leave-hours-annual { color: #4ade80; }
[data-theme="dark"] .leave-hours-tafe { color: #22d3ee; }
[data-theme="dark"] .leave-hours-unpaid { color: #9ca3af; }

/* Dark mode: leave badge colors (brighter) */
[data-theme="dark"] .leave-badge-sick { background: #ef4444; }
[data-theme="dark"] .leave-badge-rdo { background: #3b82f6; }
[data-theme="dark"] .leave-badge-personal { background: #8b5cf6; }
[data-theme="dark"] .leave-badge-annual { background: #22c55e; }
[data-theme="dark"] .leave-badge-tafe { background: #06b6d4; }
[data-theme="dark"] .leave-badge-unpaid { background: #9ca3af; }

[data-theme="dark"] .day-container {
    border-bottom-color: #2e2e2e;
}

[data-theme="dark"] .day-container.weekend {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .expense-line-item {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .expense-line-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .expense-line-desc {
    color: #8a8a8a;
}

[data-theme="dark"] .expense-view-image {
    color: #6b9eff;
}

[data-theme="dark"] .expense-view-image:hover {
    color: #a5b4fc;
}

[data-theme="dark"] .expense-line-amount {
    color: #f59e0b;
}

[data-theme="dark"] .add-entry-btn-inline {
    color: #8a8a8a;
}

[data-theme="dark"] .add-entry-btn-inline:hover {
    color: #e0e0e0;
    background: #262626;
}

[data-theme="dark"] .add-entry-btn-inline.active {
    color: #6b9eff;
    background: #1c2d41;
}

[data-theme="dark"] .entry-picker-dropdown {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .entry-picker-option {
    color: #e0e0e0;
}

[data-theme="dark"] .entry-picker-option:hover:not(:disabled) {
    background: #262626;
}

[data-theme="dark"] .entry-picker-divider {
    background: #2e2e2e;
}

[data-theme="dark"] .entry-delete-btn {
    color: #8a8a8a;
}

[data-theme="dark"] .entry-delete-btn:hover {
    color: #ef7b7b;
    background: #3d1c1e;
}

[data-theme="dark"] .summary-tag {
    background: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .receipt-upload-area {
    border-color: #2e2e2e;
}


/* Payroll accordion */
.payroll-accordion {
    border-bottom: 1px solid #f3f4f6;
}

.payroll-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

.export-link {
    font-size: 0.875rem;
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.export-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.export-link svg {
    width: 14px;
    height: 14px;
}

.export-coming-soon {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-left: 1rem;
    font-style: italic;
}

.payroll-accordion.has-projects .payroll-row {
    cursor: pointer;
}

.payroll-accordion.has-projects .payroll-row:hover {
    background: var(--gray-50);
}

/* Overtime highlight — same colour as standard hover */
.payroll-accordion.has-overtime .payroll-row {
    background: var(--gray-50);
}

.payroll-accordion.has-overtime .payroll-row:hover {
    background: #f3f4f6;
}

[data-theme="dark"] .payroll-accordion.has-overtime .payroll-row {
    background: #262626;
}

[data-theme="dark"] .payroll-accordion.has-overtime .payroll-row:hover {
    background: #333333;
}

.accordion-chevron {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
    transition: transform 0.2s;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.accordion-chevron.hidden {
    visibility: hidden;
}

.payroll-accordion.expanded .accordion-chevron {
    transform: rotate(90deg);
}

.payroll-projects {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1rem 0 calc(16px + 0.75rem + 50px + 1rem);
    background: var(--gray-50);
}

.payroll-accordion.expanded .payroll-projects {
    max-height: 800px;
    padding: 0.5rem 1rem 0.75rem calc(16px + 0.75rem + 50px + 1rem);
}

.project-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.project-table th {
    text-align: left;
    padding: 0.375rem 0.5rem;
    color: var(--gray-500);
    font-weight: 500;
    border-bottom: 1px solid var(--gray-200);
}

.project-table th:last-child {
    text-align: right;
}

.project-table td {
    padding: 0.375rem 0.5rem;
    color: var(--gray-700);
    border-bottom: 1px solid #f3f4f6;
}

.project-table td:last-child {
    text-align: right;
    font-weight: 500;
}

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

/* Daily breakdown styling - fixed column widths for alignment */
.daily-breakdown {
    table-layout: fixed;
}

.daily-breakdown th:nth-child(1),
.daily-breakdown td:nth-child(1) {
    width: 35%;
}

.daily-breakdown th:nth-child(2),
.daily-breakdown td:nth-child(2) {
    width: 25%;
}

.daily-breakdown th:nth-child(3),
.daily-breakdown td:nth-child(3) {
    width: 20%;
}

.daily-breakdown th:nth-child(4),
.daily-breakdown td:nth-child(4) {
    width: 20%;
}

.daily-breakdown .day-header td {
    background: var(--gray-100);
    padding-top: 0.625rem;
    border-bottom: 1px solid var(--gray-200);
}

.daily-breakdown .day-header:first-child td {
    padding-top: 0.375rem;
}

.daily-breakdown .day-detail td {
    padding-left: 1.5rem;
}

/* Mobile styles for daily breakdown */
@media (max-width: 640px) {
    .payroll-projects {
        padding: 0 0.5rem 0 1rem;
    }
    
    .payroll-accordion.expanded .payroll-projects {
        padding: 0.5rem 0.5rem 0.75rem 1rem;
    }
    
    .project-table {
        font-size: 0.75rem;
    }
    
    .project-table th,
    .project-table td {
        padding: 0.25rem 0.25rem;
    }
    
    /* Hide Rate column on mobile */
    .project-table th:nth-child(3),
    .project-table td:nth-child(3) {
        display: none;
    }
    
    .daily-breakdown .day-detail td {
        padding-left: 1rem;
    }
    
    .daily-breakdown .day-header td {
        padding-top: 0.5rem;
    }
}

/* Not setup message */
.not-setup-message {
    text-align: center;
    padding: 3rem 1rem;
}

.not-setup-message svg {
    width: 64px;
    height: 64px;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.not-setup-message h3 {
    font-size: 1.125rem;
    color: var(--gray-800);
    margin: 0 0 0.5rem 0;
}

.not-setup-message p {
    color: var(--gray-500);
    margin: 0;
}

/* ==================== SETTINGS TAB STYLES ==================== */
/* Core settings styles defined in SETTINGS PAGE STYLES section below */

.settings-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .settings-section {
        padding: 1rem;
    }
    
    .settings-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Stores --- */
/* Stock list styles shared with Timesheets (see Timesheets section above) */

/* ==================== STORE-SPECIFIC STYLES ==================== */
/* Store-specific card styling */
.store-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--gray-200);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.store-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.store-card-inner {
    display: flex;
}

.store-color-bar {
    width: 6px;
    flex-shrink: 0;
    background: var(--primary-blue);
}

.store-content {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
}

.store-image-section {
    flex-shrink: 0;
}

.store-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.2s;
}

.store-image:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.store-image-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-main-info {
    flex: 1;
    min-width: 0;
}

.store-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.875rem;
}

.store-title-group {
    flex: 1;
}

.store-item-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.store-category {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.store-qty-badge {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 1.125rem;
    font-weight: 700;
    background: #e5f8ed;
    color: #00854d;
    white-space: nowrap;
}

.store-notes {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-bottom: 0.875rem;
    line-height: 1.5;
}

.store-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Match cards */
.match-card {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.match-section-label {
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.match-item-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.938rem;
    margin-bottom: 0.25rem;
}

.match-details {
    font-size: 0.813rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.match-confidence {
    padding: 0.625rem;
    background: var(--success-light);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #065f46;
    margin-bottom: 0.875rem;
}

/* Toast animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .store-content {
        flex-direction: column;
    }
    
    .store-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .store-qty-badge {
        align-self: flex-start;
    }
    
    .store-actions {
        flex-direction: column;
    }
    
    .store-actions button {
        width: 100%;
    }
    
    .match-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Project info box */
.project-info-box {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.project-info-title {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.938rem;
}

.project-info-content {
    font-size: 0.813rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* --- Settings --- */

/* ==================== SETTINGS PAGE STYLES ==================== */

.settings-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-section {
    background: white;
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.settings-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.settings-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 0.25rem 0;
}

.settings-subtitle {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
}

.order-number-preview {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--primary, #1e3c72);
    padding: 8px 12px;
    background: var(--gray-50, #f9fafb);
    border-radius: 8px;
    border: 1px solid var(--gray-200, #e5e7eb);
}

/* Form Styles — see core definitions above. Only page-specific overrides below. */

.form-select.danger {
    border-color: #fca5a5;
}

.form-select.danger:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

[data-theme="dark"] .form-select.danger {
    border-color: rgba(239, 123, 123, 0.4);
}

[data-theme="dark"] .form-select.danger:focus {
    border-color: #ef7b7b;
    box-shadow: 0 0 0 3px rgba(239, 123, 123, 0.15);
}

/* Settings Row (for dynamic lists) */
.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
}

.settings-row-2col {
    grid-template-columns: 1fr auto;
}

/* btn-remove defined in core section above */

.btn-remove:hover {
    background: #fecaca; /* danger-light hover */
}

/* Pills for toggles */
.pills-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.pills-label {
    font-size: 12px;
    color: var(--gray-500);
}

.toggle-pill {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s;
}

.toggle-pill.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.toggle-pill:hover:not(.active) {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* Add Button Row */
.add-button-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 8px;
}

/* action-btn, btn-primary, btn-outline defined in core section above */

/* Save Footer */
.save-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .settings-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .settings-row input,
    .settings-row select,
    .settings-row button {
        width: 100%;
    }
    
    .settings-header {
        flex-direction: column;
    }
    
    .add-button-row {
        flex-direction: column;
    }
    
    .add-button-row button {
        width: 100%;
        justify-content: center;
    }
    
    .save-footer {
        flex-direction: column;
    }
    
    .save-footer button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .settings-section {
        padding: 1rem;
        border-radius: 0;
    }
    
    .form-input {
        font-size: 16px !important; /* Prevent zoom on mobile */
    }
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #059669;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}

[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
    background-color: #059669;
}

[data-theme="dark"] .toggle-slider {
    background-color: #3b3b3b;
}

/* Settings: Danger Zone */
.settings-section.danger-zone {
    border: 2px solid #fecaca;
    background: #fef2f2;
}

.settings-section.danger-zone .settings-title {
    color: var(--danger);
}

.settings-section.danger-zone .form-label {
    color: var(--danger);
}

.btn-danger-solid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}

.btn-danger-solid:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* Settings: Helper text */
.settings-help-text {
    color: var(--gray-500);
    font-size: 13px;
    margin-bottom: 12px;
}

/* Settings: Input row with button */
.settings-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.settings-input-row .form-input,
.settings-input-row .form-select {
    flex: 1;
    min-width: 200px;
}

/* Settings: Logo preview */
.logo-preview {
    width: 64px;
    height: 64px;
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    overflow: hidden;
}

/* --- Onboarding --- */

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.action-bar-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.search-filter-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.workers-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.workers-table th {
    background: var(--bg-secondary);
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    border-bottom: 1px solid var(--border-color);
}

.workers-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.workers-table th.sortable:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.workers-table th.sortable.active {
    background: #dbeafe;
    color: #1e3c72;
}

.workers-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
}

.workers-table tr:hover {
    background: var(--bg-secondary);
    cursor: pointer;
}

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

.workers-card-list {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.worker-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.worker-card:last-child {
    border-bottom: none;
}

.worker-card:hover {
    background: var(--bg-secondary);
}

.worker-card-main {
    flex: 1;
    min-width: 0;
}

.worker-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.worker-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px;
}

.meta-dot {
    font-size: 14px;
    line-height: 1;
    opacity: 0.5;
}

.worker-card-details {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.worker-card-licenses {
    flex-shrink: 0;
}

.worker-name {
    font-weight: 600;
    color: var(--gray-800);
}

.worker-email {
    color: var(--gray-500);
    font-size: 13px;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success {
    background: #dcfce7;
    color: #16a34a;
}

.badge-warning {
    background: #fef3c7;
    color: #d97706;
}

.badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.badge-muted {
    background: #f1f5f9;
    color: var(--gray-500);
}

.project-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.project-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #dbeafe;
    color: #1e3c72;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 48px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.share-btn:hover {
    background: var(--brand-light);
}


.detail-section {
    margin-bottom: 24px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

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

.detail-item {
    margin-bottom: 8px;
}

.detail-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 2px;
}

.detail-value {
    font-size: 14px;
    color: var(--gray-800);
    font-weight: 500;
}

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.attachment-item {
    text-align: center;
}

.attachment-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: transform 0.2s;
}

.attachment-img:hover {
    transform: scale(1.05);
}

.attachment-label {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 4px;
}

.project-link-section {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.linked-project-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #dbeafe;
    color: #1e3c72;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.linked-project-tag button {
    background: none;
    border: none;
    color: #1e3c72;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
}

.linked-project-tag button:hover {
    opacity: 1;
}

/* Builder Copy Panel */
.builder-copy-panel {
    padding: 4px 0;
}

.builder-copy-section {
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.builder-copy-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.builder-copy-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}

.builder-copy-all-btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    background: #2563eb;
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.builder-copy-all-btn:hover {
    background: #1d4ed8;
}

.builder-copy-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 0.15s;
    gap: 12px;
}

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

.builder-copy-row:hover {
    background: var(--gray-50);
}

.builder-copy-row.copied {
    background: #dcfce7;
}

.builder-bookmarklet-link {
    display: inline-block;
    padding: 8px 20px;
    background: #1e293b;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    border: 2px dashed #475569;
}

.builder-bookmarklet-link:hover {
    background: #334155;
}

.builder-copy-label {
    width: 200px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 500;
}

.builder-copy-value {
    flex: 1;
    font-size: 14px;
    color: var(--gray-800);
    font-weight: 500;
}

.builder-copy-icon {
    flex-shrink: 0;
    color: var(--gray-400);
    display: flex;
    align-items: center;
}

.builder-copy-row:hover .builder-copy-icon {
    color: var(--primary);
}

.builder-copy-row.copied .builder-copy-icon {
    color: #16a34a;
}

[data-theme="dark"] .builder-copy-section {
    border-color: var(--gray-700);
}

[data-theme="dark"] .builder-copy-section-header {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .builder-copy-row {
    border-color: var(--gray-800);
}

[data-theme="dark"] .builder-copy-row:hover {
    background: var(--gray-800);
}

[data-theme="dark"] .builder-copy-row.copied {
    background: #14532d;
}

@media (max-width: 600px) {
    .builder-copy-label {
        width: 120px;
        font-size: 11px;
    }
    .builder-copy-value {
        font-size: 13px;
    }
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gray-50);
}

.delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--danger-light);
    color: var(--danger);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.delete-btn:hover {
    background: #fecaca; /* danger-light hover */
}

/* Image Modal */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 11000;
    padding: 20px;
    cursor: pointer;
}

.image-modal img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 32px;
    cursor: pointer;
    z-index: 2001;
}

/* Share Modal */
.share-modal-content {
    max-width: 500px;
}

.share-url-box {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.share-url-input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    background: var(--gray-50);
}

.copy-btn {
    padding: 12px 20px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
}

.copy-btn:hover {
    background: var(--brand-light);
}

.regenerate-link {
    margin-top: 16px;
    text-align: center;
}

.regenerate-link button {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

.regenerate-link button:hover {
    color: var(--gray-800);
}

/* Responsive */
@media (max-width: 768px) {
    .workers-table {
        display: block;
        overflow-x: auto;
    }
    
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-bar-buttons {
        width: 100%;
    }
    
    .share-btn {
        flex: 1;
        justify-content: center;
    }

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

/* --- Materials --- */

/* Mobile Form Page (full page for mobile) */
/* Date input styling - ensure consistent appearance */
input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
}

/* Date icon in input-wrapper — hidden, native date picker provides its own */
.input-wrapper .date-icon {
    display: none;
}

/* Date input — ensure calendar icon is visible (appearance:none hides it on mobile) */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
    display: block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
    background-size: 18px 18px;
}

/* Edge date input */
input[type="date"]::-ms-clear,
input[type="date"]::-ms-reveal {
    display: none;
}

/* Remove margin-top from tables in order cards */
.machinery-card table {
    margin-top: 0;
}

/* Quantity badge styling */
.qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 10px;
    background: var(--primary-blue);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 12px;
}

/* Mobile items list styling */
.mobile-item {
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

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

.mobile-item-missing {
    background: var(--warning-light);
    margin: 0 -14px;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 6px;
}

/* Show desktop table by default, hide mobile list */
.desktop-items-table {
    display: block;
}

.mobile-items-list {
    display: none !important;
}

/* New Tab Styles */
.new-order-container {
    /* Layout handled by .form-card */
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions button {
        width: 100%;
    }
}

/* Items List Styles */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.item-row {
    display: grid;
    grid-template-columns: 1fr 60px 36px;
    gap: 8px;
    align-items: center;
}

.item-qty {
    width: 100%;
    text-align: center;
}

.btn-remove-item {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: #9ca3af;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn-remove-item:hover {
    color: #dc2626;
    background: #fef2f2;
}

.btn-add-item {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #9ca3af;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-add-item:hover {
    color: #6b7280;
    background: #f3f4f6;
}

.btn-add-item:active {
    transform: scale(0.9);
}

.items-import-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.items-import-divider::before,
.items-import-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e2e8f0);
}

.items-import-divider span {
    font-size: 0.75rem;
    color: var(--text-gray, #8a8a8a);
    text-transform: lowercase;
}

.items-import-bar {
    display: flex;
    gap: 8px;
}

.btn-import {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.625rem 1rem;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    color: var(--text-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.btn-import:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.btn-import:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-import.loading {
    pointer-events: none;
}

.btn-import.loading svg,
.btn-import.loading .btn-import-label {
    display: none;
}

.btn-import .dot-loader {
    display: none;
}

.btn-import.loading .dot-loader {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dot-loader span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    animation: dotBounce 1.2s ease-in-out infinite;
}

.dot-loader span:nth-child(2) { animation-delay: 0.15s; }
.dot-loader span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotBounce {
    0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.3); }
}

/* Email Accordion Styles */
.email-groups-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.email-group {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    background: white;
}

.email-group.expanded {
    border-color: var(--primary-blue);
    box-shadow: 0 2px 8px rgba(0, 115, 234, 0.1);
}

.email-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-light);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.email-group-header:hover {
    background: #e8f0fe;
}

.email-group.expanded .email-group-header {
    background: #e8f0fe;
    border-bottom: 1px solid var(--border-color);
}

.email-group-content {
    padding: 16px;
    background: white;
}

/* Email preview styling */
.email-preview {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.email-info-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.email-info-label {
    font-weight: 600;
    color: var(--text-gray);
    min-width: 40px;
}

.email-info-value {
    color: var(--text-dark);
}

/* ============================================================
   ORDERS PAGE — Layout, Cards, Tables, Buttons
   ============================================================ */

/* Grid: single column for text-heavy order cards */
.orders-list {
    grid-template-columns: 1fr !important;
    gap: 14px;
}

/* --- Order Card — elevated, distinct from generic machinery-card --- */
.order-card {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.order-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.order-card-body {
    padding: 1.375rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* --- Spacing inside order cards --- */
.order-card .card-header {
    margin-bottom: 1rem;
}

.order-card .card-number {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.order-card .card-title-group {
    gap: 0.5rem;
}

.order-card .card-info-grid {
    margin-bottom: 1.125rem;
    gap: 1rem;
}

.order-card .card-info-label {
    font-size: 0.6875rem;
    color: var(--gray-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-card .card-info-value {
    font-size: 0.875rem;
    font-weight: 500;
}

.order-card .card-actions {
    margin-top: 1.125rem;
    padding-top: 1rem;
    border-top: none;
}

/* Show divider only when notes or attachments precede the actions */
.order-notes ~ .card-actions,
.order-user-attachments[style*="block"] ~ .card-actions {
    border-top: 1px solid var(--border-color);
}

/* --- Items table inside cards --- */
.order-card .desktop-items-table {
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
}

.order-card .desktop-items-table table {
    border-collapse: collapse;
}

.order-card .desktop-items-table thead {
    background: transparent;
}

.order-card .desktop-items-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.6875rem;
    color: var(--gray-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
}

.order-card .desktop-items-table tbody tr:first-child td {
    border-top: 1px solid var(--border-color);
}

.order-card .desktop-items-table tbody tr + tr td {
    border-top: 1px solid var(--border-color);
}

.order-card .desktop-items-table td {
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--text-dark);
    border: none;
    vertical-align: middle;
}

.order-card .desktop-items-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Missing item row */
.order-card .desktop-items-table tr.missing-item {
    background: var(--warning-light);
}

/* --- Mobile items list inside cards --- */
.order-card .mobile-items-list {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 4px 14px;
    border: none;
}

/* Notes section */
.order-notes {
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-top: 0.875rem;
}

.order-notes-label {
    font-size: 0.6875rem;
    color: var(--gray-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.order-notes-value {
    font-size: 0.875rem;
    color: var(--text-dark);
    line-height: 1.5;
}

/* --- Dark mode: order card overrides --- */
[data-theme="dark"] .order-card {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: none;
}

[data-theme="dark"] .order-card:hover {
    background: #2a2a2a;
    border-color: #3b3b3b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .order-card .desktop-items-table {
    background: rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .order-card .desktop-items-table thead th {
    color: var(--gray-500);
}

[data-theme="dark"] .order-card .desktop-items-table tbody tr + tr td,
[data-theme="dark"] .order-card .desktop-items-table tbody tr:first-child td {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .order-card .mobile-items-list {
    background: rgba(255, 255, 255, 0.025);
    border-color: transparent;
}

[data-theme="dark"] .order-notes {
    background: rgba(255, 255, 255, 0.025);
}

/* --- Supplier pills --- */
.monday-pill.supplier-storeroom {
    background: #e5f8ed;
    color: #00854d;
}

.monday-pill.supplier-external {
    background: #e8f0fe;
    color: #0073ea;
}

[data-theme="dark"] .monday-pill.supplier-storeroom {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

[data-theme="dark"] .monday-pill.supplier-external {
    background: rgba(107, 158, 255, 0.15);
    color: #6b9eff;
}

/* --- Table header & cell classes (replaces inline styles) --- */
.order-card .desktop-items-table .order-th-missing {
    width: 100px;
}

.order-card .desktop-items-table .order-th-qty {
    width: 70px;
    text-align: right;
}

.order-card .desktop-items-table .order-td-missing {
    width: 100px;
    text-align: center;
}

.order-card .desktop-items-table .order-qty-cell {
    text-align: right;
}

.missing-header-short {
    display: none;
}

.missing-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    accent-color: var(--primary-blue);
}

.reordered-badge {
    font-size: 0.6875rem;
    color: var(--success);
    cursor: pointer;
    font-weight: 500;
}

/* --- Mobile item layout --- */
.mobile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 10px;
}

.mobile-item-checkbox {
    flex-shrink: 0;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-item-checkbox .missing-checkbox {
    width: 18px;
    height: 18px;
}

.mobile-item-name {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.order-qty-mobile {
    flex-shrink: 0;
}

/* --- Attachments --- */
.order-user-attachments {
    margin-top: 0.875rem;
}

.order-attachments-label {
    font-size: 0.6875rem;
    color: var(--gray-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.order-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.order-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--primary-blue);
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.order-attachment-chip:hover {
    background: var(--gray-200);
}

[data-theme="dark"] .order-attachment-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    color: var(--primary-blue);
}

[data-theme="dark"] .order-attachment-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Supplier Replies Section */
.order-replies-section {
    margin-top: 0.875rem;
}

.replies-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-blue);
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    user-select: none;
    transition: background 0.15s ease;
}

.replies-toggle:hover {
    background: var(--gray-200);
}

.replies-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.order-replies-section.expanded .replies-chevron {
    transform: rotate(90deg);
}

.replies-content {
    display: none;
    padding: 8px 0 0;
}

.order-replies-section.expanded .replies-content {
    display: block;
}

.reply-item {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 6px;
    border-left: 3px solid var(--primary-blue);
}

.reply-item:last-child {
    margin-bottom: 0;
}

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

.reply-from {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.reply-date {
    font-size: 0.6875rem;
    color: var(--gray-400);
    white-space: nowrap;
}

.reply-body {
    font-size: 0.8125rem;
    color: var(--text-dark);
    line-height: 1.5;
    white-space: pre-line;
    margin-top: 6px;
}

.reply-body-html {
    font-size: 0.8125rem;
    color: var(--text-dark);
    line-height: 1.5;
    margin-top: 6px;
    overflow-x: auto;
    display: block;
}

.reply-body-html img {
    max-width: 100%;
    height: auto;
}

.reply-body-html a {
    color: var(--primary-blue);
}

.reply-body-html table {
    max-width: 100%;
    border-collapse: collapse;
}

.reply-body-html td,
.reply-body-html th {
    padding: 4px 8px;
}

[data-theme="dark"] .replies-toggle {
    background: rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .replies-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .reply-item {
    background: rgba(255, 255, 255, 0.025);
}

/* ============================================================
   Communications thread (enterprise email-chain view)
   Outbound order email + supplier replies, with parsed summary
   chips and the attachments that arrived with each message.
   ============================================================ */

/* Toggle header */
.comm-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.comm-toggle:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.comm-toggle-label {
    flex: 1;
}

.comm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--brand-subtle);
    color: var(--primary-blue);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* Thread container */
.comm-thread {
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    overflow: hidden;
}

/* Individual message row */
.comm-message {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.comm-message + .comm-message {
    border-top: 1px solid var(--border-color);
}

.comm-message--out {
    background: var(--bg-light);
}

/* Avatar */
.comm-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--brand-subtle);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.comm-avatar--out {
    background: var(--gray-200);
    color: var(--gray-600);
}

/* Message body container */
.comm-bubble {
    flex: 1;
    min-width: 0;
}

.comm-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.comm-sender {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-date {
    font-size: 0.6875rem;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
}

.comm-subject {
    font-size: 0.8125rem;
    color: var(--text-gray);
    line-height: 1.4;
}

/* Parsed summary chips (price / availability) */
.comm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 8px;
}

.comm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    line-height: 1.4;
}

.comm-chip--price {
    background: var(--success-light);
    color: #047857;
}

.comm-chip--avail {
    background: var(--brand-subtle);
    color: var(--primary-blue);
}

/* Message text */
.comm-body {
    font-size: 0.8125rem;
    color: var(--text-dark);
    line-height: 1.55;
    white-space: pre-line;
    word-break: break-word;
}

.comm-body--empty {
    color: var(--gray-400);
    font-style: italic;
}

/* Per-message attachments */
.comm-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Dark theme */
[data-theme="dark"] .comm-toggle {
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--border-color);
}

[data-theme="dark"] .comm-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .comm-thread {
    background: rgba(255, 255, 255, 0.015);
    border-color: var(--border-color);
}

[data-theme="dark"] .comm-message--out {
    background: rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .comm-avatar--out {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-gray);
}

[data-theme="dark"] .comm-chip--price {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* Quote supplier sections */
.quote-suppliers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0.875rem;
}

.quote-supplier-section {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
}

.quote-supplier-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quote-supplier-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.quote-supplier-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.quote-supplier-price {
    font-size: 0.875rem;
    color: var(--text-dark);
}

.quote-supplier-actions {
    flex-shrink: 0;
}

.reply-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.quote-supplier-section .order-replies-section {
    margin-top: 10px;
}

[data-theme="dark"] .quote-supplier-section {
    border-color: var(--border-color);
}

/* Show divider when replies section is visible */
.order-replies-section[style*="block"] ~ .card-actions {
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    /* Adjust search container margins */
    .search-container {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Offset search icon to account for container padding */
    .search-container > .search-icon {
        left: calc(18px + 16px);
    }
    
    /* Adjust tabs container margins */
    .tabs-container {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Switch from table to list on mobile */
    .desktop-items-table {
        display: none !important;
    }
    
    .mobile-items-list {
        display: block !important;
    }
    
    /* More compact cards on mobile */
    .machinery-card {
        border-radius: 6px !important;
    }

    .order-card {
        border-radius: 12px !important;
    }

    .order-card-body {
        padding: 1rem 1.125rem !important;
    }

    .machinery-card-body {
        padding: 12px !important;
    }

    /* More compact action buttons on mobile */
    .card-actions {
        gap: 6px;
        margin-top: 12px;
    }

    .btn-edit,
    .btn-delete {
        font-size: 0.8125rem;
        padding: 8px 12px;
    }
    
    .item-row {
        grid-template-columns: 1fr 56px 36px;
        gap: 6px;
    }
    
    .email-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .email-group-header > div:last-child {
        width: 100%;
    }
    
    .email-group-header .btn {
        width: 100%;
    }
    
    /* Smaller form inputs on mobile */
    .form-input,
    .form-select {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Make buttons more touch-friendly */
    .btn-submit,
    .btn-cancel {
        min-height: 48px;
        font-size: 16px;
    }
}

/* --- Audit Logs --- */

.page-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;
}

.filter-card, .logs-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

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

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Gallery toolbar - penetration register */
.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.gallery-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.875rem;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.gallery-filter-toggle:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.gallery-filter-toggle.active {
    border-color: var(--primary-blue);
    background: var(--bg-light);
    color: var(--primary-blue);
}

.gallery-filter-chevron {
    transition: transform 0.2s;
}

.gallery-filter-toggle.active .gallery-filter-chevron {
    transform: rotate(180deg);
}

.filter-count-badge {
    background: var(--primary-blue);
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Filter panel (collapsible) */
.gallery-filter-panel {
    display: none;
    background: white;
    border-radius: 8px;
    border: 1.5px solid var(--gray-200);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gallery-filter-panel.open {
    display: block;
}

.gallery-filter-inputs {
    display: flex;
    gap: 12px;
}

.gallery-filter-inputs .filter-group {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.gallery-filter-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

@media (max-width: 480px) {
    .gallery-filter-inputs {
        flex-direction: column;
    }
}

/* Dark mode */
[data-theme="dark"] .gallery-filter-toggle {
    background: #202020;
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .gallery-filter-toggle:hover,
[data-theme="dark"] .gallery-filter-toggle.active {
    border-color: #5a8be6;
    color: #6b9eff;
    background: rgba(107, 158, 255, 0.08);
}

[data-theme="dark"] .gallery-filter-panel {
    background: #202020;
    border-color: #2e2e2e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.button-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.logs-card {
    padding: 0;
    overflow: hidden;
}

.logs-header {
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logs-title {
    font-size: 16px;
    font-weight: 600;
}

.logs-count {
    font-size: 13px;
    color: var(--gray-500);
}

.log-item {
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
}

.log-item:hover {
    background: var(--gray-50);
}

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

.log-header-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.log-timestamp {
    font-size: 13px;
    color: var(--gray-500);
}

.log-title {
    font-size: 15px;
    font-weight: 600;
}

.log-category {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--gray-100);
    color: var(--gray-500);
    text-transform: uppercase;
    font-weight: 600;
}

.log-description {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.log-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--gray-500);
}

.empty-state, div.loading {
    padding: 40px;
    text-align: center;
    color: var(--gray-500);
}


.detail-section {
    margin-bottom: 20px;
}

.detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.detail-value {
    font-size: 14px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 6px;
}

pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
}

@media (max-width: 768px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
    
    .log-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .log-actions {
        justify-self: start;
    }
}

/* --- Penetration Register --- */

/* ==================== DESIGN TOKENS (see :root at top of file) ==================== */

/* ==================== PROGRESS DASHBOARD ==================== */
.progress-dashboard {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.progress-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-light));
}

.progress-dashboard.all-complete::before {
    background: linear-gradient(90deg, var(--success), #34d399);
}

.progress-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.progress-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.progress-headline-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    letter-spacing: -1px;
}

.progress-dashboard.all-complete .progress-headline-number {
    color: var(--success);
}

.progress-headline-label {
    font-size: 14px;
    color: var(--gray-500);
    font-weight: 500;
}

.progress-fraction {
    text-align: right;
}

.progress-fraction-numbers {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
}

.progress-fraction-numbers .divider {
    color: var(--gray-300);
    margin: 0 2px;
    font-weight: 400;
}

.progress-fraction-label {
    font-size: 11px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.progress-bar-container {
    position: relative;
    margin-bottom: 20px;
}

.progress-bar-track {
    width: 100%;
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand), var(--brand-light));
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-bar-fill.complete {
    background: linear-gradient(90deg, var(--success), #34d399);
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.zone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zone-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.zone-chip:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}

.zone-chip-letter {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 14px;
    color: white;
    background: var(--brand);
    flex-shrink: 0;
}

.zone-chip-detail {
    line-height: 1.2;
}

.zone-chip-stat {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
}

.zone-chip-name {
    font-size: 11px;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* ==================== SEARCH ==================== */
/* Note: Main .search-input styles are defined in Section 1 (line ~203).
   .search-box is kept for any JS-generated search containers. */

.search-box {
    position: relative;
    margin-bottom: 16px;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.search-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--gray-400);
}

.search-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--gray-300);
}

.search-empty-text {
    font-size: 14px;
    line-height: 1.5;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}

.search-result-item:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow), var(--shadow-md);
    transform: translateY(-1px);
}

.search-result-item:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.search-result-id {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.search-result-zone {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-pill.pending {
    background: var(--warning-light);
    color: var(--warning);
}

.status-pill.complete {
    background: var(--success-light);
    color: var(--success);
}

.status-pill .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-pill.pending .status-dot {
    background: var(--warning);
}

.status-pill.complete .status-dot {
    background: var(--success);
}

/* ==================== COMPLETION CARD ==================== */
.completion-card {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.completion-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--brand-subtle);
    border-bottom: 1px solid var(--gray-200);
}

.completion-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.completion-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: white;
    flex-shrink: 0;
}

.completion-card-icon svg {
    width: 22px;
    height: 22px;
}

.completion-card-id {
    font-size: 22px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: 2px;
    line-height: 1.2;
}

.completion-card-zone {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 500;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-back:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.completion-card-body {
    padding: 24px;
}

/* Completed state */
.completed-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.completed-photo-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-100);
    cursor: pointer;
}

.completed-photo-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    pointer-events: none;
}

.completed-photo {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

.completed-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.completed-meta-item {
    background: white;
    padding: 14px 16px;
}

.completed-meta-item.full-width {
    grid-column: 1 / -1;
}

.completed-meta-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    margin-bottom: 4px;
}

.completed-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
}

.btn-reset {
    width: 100%;
    height: 44px;
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-500);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-reset:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-light);
}

/* Photo capture */
.photo-capture-area {
    margin-bottom: 24px;
}

.photo-preview {
    position: relative;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-100);
    display: none;
    box-shadow: var(--shadow-md);
}

.photo-preview img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    display: block;
}

.photo-preview-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    backdrop-filter: blur(8px);
}

.photo-preview-remove:hover {
    background: rgba(220, 38, 38, 0.9);
    transform: scale(1.1);
}

.btn-camera {
    width: 100%;
    padding: 32px 24px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    color: var(--gray-500);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-camera:hover {
    border-color: var(--brand);
    background: var(--brand-subtle);
    color: var(--brand);
}

.btn-camera:active {
    transform: scale(0.98);
}

.btn-camera-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

.btn-camera:hover .btn-camera-icon {
    background: var(--brand);
    color: white;
    box-shadow: var(--shadow-lg);
}

.btn-camera-icon svg {
    width: 24px;
    height: 24px;
}

.btn-camera-text {
    font-size: 15px;
    font-weight: 600;
}

.btn-camera-hint {
    font-size: 12px;
    color: var(--danger);
    font-weight: 500;
}

.btn-complete {
    width: 100%;
    height: 54px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.btn-complete:hover:not(:disabled) {
    background: #047857;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
}

.btn-complete:active:not(:disabled) {
    transform: translateY(0);
}

.btn-complete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==================== REGISTER TAB ==================== */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.register-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.register-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.register-item:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    transform: translateX(2px);
}

.register-item.is-complete {
    border-left: 3px solid var(--success);
}

.register-item-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.register-item-id {
    font-weight: 700;
    font-size: 14px;
    color: var(--gray-900);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    min-width: 48px;
}

.register-item-zone {
    font-size: 12px;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.register-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.register-item-date {
    font-size: 11px;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}

.register-item-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

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

.status-dot-sm.pending {
    background: var(--warning);
    box-shadow: 0 0 0 3px var(--warning-light);
}

.status-dot-sm.complete {
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-light);
}

.register-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--gray-400);
}

.register-empty svg {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: var(--gray-300);
}

.register-empty p {
    margin: 0 0 4px;
}

.register-empty .empty-sub {
    font-size: 13px;
    color: var(--gray-400);
}

/* ==================== SETUP TAB ==================== */
.setup-container {
    max-width: 600px;
    margin: 0 auto;
}

.setup-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.setup-card-header {
    padding: 18px 24px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.setup-card-header svg {
    color: var(--brand);
}

.setup-card-body {
    padding: 24px;
}

/* Pen register setup form overrides */
.setup-card-body .form-group {
    margin-bottom: 18px;
}

.setup-card-body .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.required-badge {
    color: var(--danger);
    font-weight: 700;
}

.form-input::placeholder {
    color: var(--gray-400);
}

.form-input.input-zone-letter {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 2px;
    text-align: center;
    max-width: 72px;
}

.setup-card-body .form-row {
    display: flex;
    gap: 12px;
}

.setup-card-body .form-row .form-group {
    flex: 1;
}

.form-preview {
    padding: 14px 16px;
    background: var(--brand-subtle);
    border: 1px solid rgba(52, 88, 213, 0.12);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 500;
}

.setup-container .btn-primary {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(52, 88, 213, 0.2);
}

.section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px 0;
}

.zones-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zone-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.zone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.zone-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.zone-card-letter {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 22px;
    color: white;
    background: var(--brand);
    flex-shrink: 0;
}

.zone-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.zone-card-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zone-card-range {
    font-size: 12px;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.zone-card-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.zone-card-stat {
    text-align: right;
}

.zone-card-stat-number {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-800);
    line-height: 1;
}

.zone-card-stat-label {
    font-size: 10px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 3px;
}

.zone-mini-bar {
    width: 48px;
    height: 4px;
    background: var(--gray-100);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.zone-mini-bar-fill {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.btn-delete-zone {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-400);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-delete-zone:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-light);
}

/* ==================== LIGHTBOX ==================== */
.pen-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.pen-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pen-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pen-lightbox-img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
}

.pen-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.pen-lightbox-info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 60px 20px 24px;
    z-index: 10000;
    color: white;
    pointer-events: none;
}

.pen-lightbox-info-inner {
    max-width: 800px;
    margin: 0 auto;
}

.pen-lightbox-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 599px) {
    .zone-chips {
        gap: 6px;
    }
    
    .zone-chip {
        padding: 6px 10px 6px 6px;
    }
    
    .zone-chip-letter {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .filter-bar {
        flex-direction: column;
    }
    
    .filter-select {
        width: 100%;
    }
    
    .completion-card-header {
        padding: 16px 18px;
    }
    
    .completion-card-body {
        padding: 18px;
    }
    
    .completed-meta-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-headline-number {
        font-size: 28px;
    }
    
    .zone-card {
        padding: 14px 16px;
    }
    
    .zone-card-letter {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* --- Pressure Tests --- */

/* Additional pressure testing specific styles */
.test-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.test-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.test-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.test-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.test-status.completed {
    background: var(--success-light);
    color: #065f46;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.photo-item {
    position: relative;
    cursor: pointer;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
    transition: all 0.2s;
}

.photo-item:hover {
    transform: scale(1.05);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(52, 88, 213, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Test details grid */
.test-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.test-detail-item {
    padding: 12px;
    background: var(--gray-50);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.test-detail-label {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.test-detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
}

/* Photo preview in form */
.photo-preview-container {
    position: relative;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-50);
    margin-top: 12px;
}

.photo-preview-container img {
    width: 100%;
    display: block;
    max-height: 300px;
    object-fit: contain;
}

.photo-preview-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

.photo-preview-actions button {
    padding: 6px 12px;
    font-size: 13px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Test actions */
.test-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.test-actions button {
    flex: 1;
}

/* Finish Modal - max-width on desktop */
#finishModal .modal-content {
    max-width: 600px;
}

/* --- Drawings --- */

/* ==============================================
   CONSISTENT SPACING SYSTEM
   Base unit: 16px
   Scale: 8px, 12px, 16px, 20px, 24px, 32px
   ============================================== */

/* Upload Section */
.upload-section {
    background: white;
    padding: 24px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 900px;
}

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

.upload-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.upload-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    margin: 4px 0 0 0;
}

.upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.upload-zone:hover {
    border-color: var(--primary-blue);
    background: var(--bg-secondary);
}

.upload-zone.dragging {
    border-color: var(--primary-blue);
    background: var(--bg-secondary);
}

.upload-zone-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    color: var(--gray-400);
}

.upload-zone-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
}

.upload-zone-hint {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}
    font-size: 12px;
    color: var(--gray-400);
    margin: 8px 0 0 0;
}

/* File List */
.file-list {
    margin-top: 16px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 6px;
    margin-bottom: 8px;
}

.file-item:last-child {
    margin-bottom: 0;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.file-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
}

.file-details {
    flex: 1;
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    margin: 0 0 4px 0;
}

.file-size {
    font-size: 12px;
    color: var(--gray-500);
    margin: 0;
}

.file-progress {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.file-progress-bar {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s;
}

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

/* btn-remove defined in Settings section above */

/* Drawings Container */
.drawings-container {
    margin: 0;
}

/* Filter Section */
.filter-section {
    background: white;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 20px;
    border: 1px solid var(--gray-100);
}

.filter-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    max-width: 400px;
}

.filter-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

/* select-chevron and input-wrapper overrides removed — core .form-select handles chevron via background-image */

.btn-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-sort:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-sort:active {
    transform: translateY(0);
}

.btn-sort svg {
    flex-shrink: 0;
}

/* Bulk Actions Menu */
.bulk-actions-menu {
    position: relative;
    margin-left: auto;
}

/* Match height to form-select dropdown for perfect alignment */
.bulk-actions-trigger {
    background: none;
    border: 1px solid var(--gray-300);
    padding: 0;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.2s;
    flex-shrink: 0;
    box-sizing: border-box !important;
}

.bulk-actions-trigger:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.bulk-actions-trigger svg {
    width: 20px;
    height: 20px;
}

.bulk-actions-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    padding: 6px;
    z-index: 1000;
    display: none;
    animation: dropdownFadeIn 0.15s ease;
}

.bulk-actions-dropdown.active {
    display: block;
}

.bulk-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-radius: 8px;
    transition: background 0.15s ease;
    line-height: 1;
}

.bulk-action-item:hover {
    background: var(--bg-light);
}

.bulk-action-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-gray);
    flex-shrink: 0;
}

.bulk-action-item:hover svg {
    color: var(--primary-blue);
}

.bulk-action-item .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-200);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (max-width: 599px) {
    .filter-section {
        padding: 16px;
    }
    
    .filter-row {
        /* Keep horizontal layout on mobile */
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
    }
    
    .filter-group {
        flex: 1;
        max-width: none;
        min-width: 0; /* Allow shrinking */
    }
    
    .filter-label {
        font-size: 13px; /* Slightly smaller on mobile */
        margin-bottom: 6px;
    }
    
    /* form-select height handled by core definition */
    
    .bulk-actions-menu {
        flex-shrink: 0; /* Don't shrink the menu button */
    }
    
    /* Mobile button height - LOCKED */
    .bulk-actions-trigger {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        line-height: 48px !important;
    }
    
    .btn-sort {
        width: 100%;
        justify-content: center;
    }
}

/* Category Badge */
.category-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 12px 12px;
    border-radius: 16px 16px 0 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: -16px -16px 12px -16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    position: relative;
}

/* Category label - clickable to rename */
.category-label {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.category-label:hover {
    border-bottom-color: currentColor;
}

/* Inline category edit input */
.category-edit-input {
    background: white;
    color: #1f2937;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    outline: none;
    width: 60%;
    min-width: 100px;
}
.category-edit-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .category-edit-input {
    background: #202020;
    color: #e0e0e0;
    border-color: #3b3b3b;
}
[data-theme="dark"] .category-edit-input:focus {
    border-color: #6b9eff;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.25);
}

/* Hide table - using cards everywhere */
.drawings-table {
    display: none;
}

/* Card Grid Layout - Responsive */
.drawings-cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Drawings toolbar: search fills the row, 3-dot menu sits beside it */
.gallery-toolbar .search-container {
    flex: 1;
    margin-bottom: 0;
}

.gallery-toolbar {
    gap: 8px;
}

/* Categorization progress indicator (drawings gallery) */
.cat-progress {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px));
    background: var(--bg-primary, #fff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 14px 16px;
    z-index: 100000;
}
.cat-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.cat-progress-spinner {
    width: 18px;
    height: 18px;
    margin: 0;          /* override global .spinner "margin: 0 auto 1rem" */
    border-width: 2px;
    flex-shrink: 0;
}
.cat-progress-text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-dark, #1f2937);
}
.cat-progress-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--gray-200, #e5e7eb);
    overflow: hidden;
}
/* Indeterminate bar: a segment sliding left→right (single call, no % known) */
.cat-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    border-radius: 999px;
    background: var(--primary-blue, #3b82f6);
    animation: catProgressSlide 1.2s ease-in-out infinite;
}
@keyframes catProgressSlide {
    0%   { left: -35%; }
    100% { left: 100%; }
}
[data-theme="dark"] .cat-progress {
    background: #1a1a1a;
    border-color: #2e2e2e;
}
[data-theme="dark"] .cat-progress-text { color: #e0e0e0; }
[data-theme="dark"] .cat-progress-bar { background: #2e2e2e; }

/* Grouped (collapsible) category view for the drawings gallery */
.drawings-grouped {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    cursor: pointer;
    padding: 8px 2px;
    margin: 0;
    font: inherit;
    color: var(--text-dark, #1f2937);
    text-align: left;
}

.category-section-chevron {
    transform: rotate(90deg);
    transition: transform 0.15s ease;
    color: var(--text-gray, #6b7280);
    flex-shrink: 0;
}

.category-section.collapsed .category-section-chevron {
    transform: rotate(0deg);
}

.category-section-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.category-section-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-gray, #6b7280);
    background: var(--gray-100, #f3f4f6);
    border-radius: 999px;
    padding: 1px 8px;
}

.category-section-cards {
    margin-top: 14px;
}

.category-section.collapsed .category-section-cards {
    display: none;
}

[data-theme="dark"] .category-section-header {
    border-color: #2e2e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .category-section-count {
    background: #262626;
    color: #9ca3af;
}

/* Card Styles */
.drawing-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

.drawing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.drawing-card-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.drawing-card-info {
    flex: 1;
    min-width: 0;
}

.drawing-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 6px 0;
    word-break: break-word;
    line-height: 1.4;
}

.drawing-card-name-link {
    cursor: pointer;
    color: var(--primary-blue);
    transition: color 0.2s;
}

.drawing-card-name-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.drawing-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.drawing-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin: 0;
}

.drawing-card-detail {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.drawing-card-detail:first-of-type {
    padding-top: 0;
}

.drawing-card-detail:last-of-type {
    border-bottom: none;
}

.drawing-card-label {
    font-weight: 500;
    color: var(--gray-400);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.drawing-card-value {
    font-weight: 500;
    color: var(--gray-800);
    margin: 0;
    text-align: right;
}

/* Legend Items Display */
.legend-section {
    margin-top: 12px;
}

.legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.legend-header:hover {
    opacity: 0.7;
}

.legend-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-chevron {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
    transition: transform 0.2s;
}

.legend-section.expanded .legend-chevron {
    transform: rotate(90deg);
}

.legend-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legend-total {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
}


.legend-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.legend-section.expanded .legend-content {
    max-height: 1000px;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.legend-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 13px;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: 4px;
}

.legend-item-description {
    flex: 1;
    color: var(--gray-700);
    line-height: 1.4;
}

.legend-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    white-space: nowrap;
}

.legend-item-qty {
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
}

.legend-item-ordered {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.legend-item-ordered .legend-item-description {
    color: #15803d;
}

.legend-item-ordered .legend-item-qty {
    color: #15803d;
}

.legend-ordered-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    padding: 2px 7px;
    border-radius: 10px;
}

.legend-ordered-badge svg {
    stroke: #16a34a;
}

[data-theme="dark"] .legend-item-ordered {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.25);
}

[data-theme="dark"] .legend-item-ordered .legend-item-description {
    color: #4ade80;
}

[data-theme="dark"] .legend-item-ordered .legend-item-qty {
    color: #4ade80;
}

[data-theme="dark"] .legend-ordered-badge {
    color: #4ade80;
    background: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .legend-ordered-badge svg {
    stroke: #4ade80;
}

.legend-empty {
    font-size: 13px;
    color: var(--gray-400);
    text-align: center;
    padding: 12px;
    font-style: italic;
}

.legend-extracting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--gray-500);
}

.legend-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-200);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Legend Order Mode */
.legend-order-mode .legend-content {
    border-top: 1px solid var(--gray-200);
}

.legend-item-selectable {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-item-selectable:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.legend-item-selectable:active {
    background-color: rgba(0, 0, 0, 0.08);
}

.legend-order-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
    margin: 0;
}

.legend-order-actions {
    display: flex;
    padding: 10px 12px;
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
}

.legend-order-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
}

.legend-order-cancel-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    background: white;
    color: var(--gray-600, #4b5563);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.legend-order-cancel-btn:hover {
    background-color: var(--gray-50, #f9fafb);
}

.legend-order-submit-btn {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.legend-order-submit-btn:hover {
    background: #2563eb;
}

.legend-order-submit-btn svg {
    stroke: white;
}

[data-theme="dark"] .legend-item-selectable:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .legend-order-cancel-btn {
    background: var(--gray-700, #374151);
    border-color: var(--gray-600, #4b5563);
    color: var(--gray-300, #d1d5db);
}

[data-theme="dark"] .legend-order-cancel-btn:hover {
    background: var(--gray-600, #4b5563);
}

[data-theme="dark"] .legend-order-actions {
    border-top-color: var(--gray-600, #4b5563);
}

[data-theme="dark"] .legend-order-mode .legend-content {
    border-top-color: var(--gray-600, #4b5563);
}

/* Dropdown Menu Styles - Drawing Cards */
.drawing-card .card-menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    z-index: 10;
}

/* If no category badge, position at top */
.drawing-card:not(:has(.category-badge)) .card-menu {
    top: 16px;
    transform: none;
}

.drawing-card .menu-trigger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.2s;
}

.drawing-card .menu-trigger:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.drawing-card .menu-trigger svg {
    width: 18px;
    height: 18px;
}

/* Menu trigger for cards without category badge */
.drawing-card:not(:has(.category-badge)) .menu-trigger {
    color: var(--gray-500);
}

.drawing-card:not(:has(.category-badge)) .menu-trigger:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.drawing-card:not(:has(.category-badge)) .menu-trigger svg {
    filter: none;
}

/* Dropdown menu and menu-item styles are defined in the generic card menu section above */

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-pdf {
    background: var(--danger-light);
    color: #991b1b;
}

.badge-dwg {
    background: #dbeafe;
    color: #1e40af;
}

.badge-img {
    background: var(--success-light);
    color: #065f46;
}

/* Companion classes for alternate empty-state markup */
.empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--gray-300);
}

.empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 8px 0;
}

.empty-text {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

.loading-state p {
    margin: 0;
}

/* Responsive Grid Breakpoints */

/* Large Desktop: 5 columns (1600px+) */
@media (min-width: 1600px) {
    .drawings-cards {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* form-select height handled by core definition */
    
    .bulk-actions-trigger {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* Desktop: 4 columns (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .drawings-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* form-select height handled by core definition */
    
    .bulk-actions-trigger {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* Medium Desktop: 3 columns (900px - 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
    .drawings-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* form-select height handled by core definition */
    
    .bulk-actions-trigger {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* Tablet: 2 columns (600px - 899px) */
@media (min-width: 600px) and (max-width: 899px) {
    .drawings-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* form-select height handled by core definition */
    
    .bulk-actions-trigger {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* Mobile Responsive */
@media (max-width: 599px) {
    /* Single column on mobile */
    .drawings-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Upload Section - Mobile */
    .upload-section {
        padding: 16px;
        margin: 0 auto;
    }
    
    .upload-header {
        margin-bottom: 12px;
    }
    
    .upload-title {
        font-size: 16px;
    }
    
    .upload-subtitle {
        font-size: 13px;
    }
    
    .upload-zone {
        padding: 24px 16px;
    }
    
    .upload-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    
    .upload-text {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .upload-hint {
        font-size: 12px;
    }
    
    .upload-limit {
        font-size: 11px;
        margin-top: 4px;
    }
    
    /* File List - Mobile */
    .file-list {
        margin-top: 12px;
    }
    
    .file-item {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .file-name {
        margin-bottom: 2px;
    }
    
    .file-progress {
        margin-top: 6px;
    }
    
    /* Drawings Container - Mobile */
    .drawings-container {
        margin: 0;
    }
    
    /* Card adjustments for mobile */
    .drawing-card {
        padding: 16px;
    }
    
    .drawing-card-name {
        font-size: 15px;
    }

    /* Legend Order Mode - Mobile */
    .legend-item-selectable {
        padding: 10px;
        gap: 10px;
    }

    .legend-order-checkbox {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .legend-order-actions {
        padding: 12px;
    }

    .legend-order-cancel-btn {
        padding: 10px 12px;
        font-size: 14px;
    }

    .legend-order-submit-btn {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    /* Empty state - mobile */
    .empty-state {
        padding: 32px 16px;
    }
    
    .empty-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }
    
    .empty-title {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .empty-text {
        font-size: 13px;
    }
    
    /* Loading state - mobile */
    .loading-state {
        padding: 24px 16px;
    }
}

/* ==================== SIGNATURE & PASTE MODAL MOBILE ==================== */
@media (max-width: 768px) {
    /* Signature modals (toolbox-talks, prestarts) - match project selector pattern */
    .signature-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

}

/* Request Hours button (inline on employee rows) */

/* ==================== DRAWING OVERLAY ==================== */
.drawing-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 10000;
    flex-direction: column;
}

.drawing-overlay-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    background: rgba(0, 0, 0, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
    flex-shrink: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.drawing-overlay-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.drawing-overlay-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.drawing-overlay-close-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.drawing-overlay-close-btn:active {
    transform: scale(0.92);
}

.drawing-overlay-title {
    color: white;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.drawing-overlay-topbar-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.drawing-zoom-controls {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.drawing-zoom-btn {
    background: none;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.drawing-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.drawing-zoom-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.drawing-zoom-level {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 4px;
    cursor: pointer;
    transition: color 0.15s ease;
    user-select: none;
}

.drawing-zoom-level:hover {
    color: white;
}

.drawing-overlay-confirm-btn {
    display: none;
    background: #16a34a;
    color: white;
    border: none;
    padding: 0 22px;
    height: 38px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.drawing-overlay-confirm-btn:hover {
    background: #15803d;
}

.drawing-overlay-confirm-btn:active {
    transform: scale(0.96);
}

.drawing-overlay-hint {
    text-align: center;
    padding: 8px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.drawing-map-container {
    flex: 1;
    background: #1a1a1a;
    position: relative;
}

.drawing-map-container .leaflet-control-zoom,
.leaflet-control-zoom {
    display: none !important;
}

.drawing-overlay-mobile-bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6), transparent);
    z-index: 1000;
    flex-shrink: 0;
    gap: 10px;
    align-items: stretch;
}

/* ================================================================
   IMAGE LIGHTBOX
   ================================================================ */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
}

.lightbox__close {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 10001;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    font-size: 28px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    width: 48px;
    height: 48px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav--prev {
    left: var(--space-5);
}

.lightbox__nav--next {
    right: var(--space-5);
}

.lightbox__image-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox__image {
    max-width: 90vw;
    max-height: 90vh;
    display: block;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.lightbox__info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px var(--space-5) var(--space-5);
    z-index: 10000;
    color: white;
    pointer-events: none;
}

.lightbox__info-inner {
    max-width: 800px;
    margin: 0 auto;
}

.lightbox__description {
    font-size: 16px;
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.lightbox__date {
    font-size: 14px;
    opacity: 0.9;
}

/* ================================================================
   SIGNATURE MODAL
   ================================================================ */

.signature-canvas-wrapper {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    overflow: hidden;
}

.signature-canvas {
    width: 100%;
    height: 200px;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.signature-image {
    display: none;
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-primary);
    padding: var(--space-1);
}

.signature-modal-content {
    max-width: 600px;
}

.signature-modal-footer {
    justify-content: flex-end;
}

/* ================================================================
   PROGRAM PAGE
   ================================================================ */

.file-info-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.file-info-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-info-size {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.file-info-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    color: var(--gray-400);
}

.file-info-col {
    flex: 1;
    min-width: 0;
}

/* Program modal */
.program-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.program-modal__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.program-modal__subtitle {
    font-size: 0.8125rem;
    color: var(--text-gray);
    margin-top: 2px;
}

.program-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    color: var(--text-gray);
}

.program-modal__tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--space-5);
}

.program-modal__tab {
    padding: 10px var(--space-4);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.program-modal__tab--active {
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
    font-weight: 600;
}

.program-modal__body {
    overflow-y: auto;
    flex: 1;
}

.program-modal__tab-content {
    padding: var(--space-5);
}

/* Table section (inside program modal) */
.table-section {
    margin-bottom: var(--space-5);
}

.table-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-1);
}

.table-section__badge {
    background: var(--brand);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.table-section__meta {
    font-size: 11px;
    color: var(--gray-400);
}

.table-section__scroll {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.table-section__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.table-section__th {
    padding: var(--space-2) 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--gray-50);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.table-section__td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--text-dark);
    white-space: nowrap;
}

.table-section__td--notes {
    padding: 6px 10px;
    border-bottom: 1px solid var(--gray-100);
    white-space: normal;
    min-width: 150px;
    max-width: 250px;
}

.table-section__row--alt {
    background: var(--gray-50);
}

/* ================================================================
   STATUS / EMPTY / LOADING
   ================================================================ */

.status-center {
    text-align: center;
    padding: var(--space-10) var(--space-5);
    color: var(--text-gray);
    font-size: 0.875rem;
}

.status-center__heading {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.status-center__sub {
    font-size: 0.875rem;
}

.status-error {
    text-align: center;
    padding: var(--space-10);
}

.status-error__heading {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--danger);
}

.status-error__message {
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
    color: var(--text-gray);
}

/* ================================================================
   MARKDOWN RENDERED CONTENT
   ================================================================ */

.md-heading { margin: 0 0 4px; font-weight: 600; }
.md-h1 { margin: var(--space-4) 0 var(--space-2); font-size: 1.125rem; font-weight: 700; }
.md-h2 { margin: var(--space-4) 0 6px; font-size: 1rem; }
.md-h3 { margin: 14px 0 6px; font-size: 0.938rem; }
.md-h4 { margin: var(--space-3) 0 var(--space-1); font-size: 0.875rem; }
.md-h5 { margin: var(--space-3) 0 var(--space-1); font-size: 0.8125rem; }
.md-h6 { margin: var(--space-3) 0 var(--space-1); font-size: 0.8125rem; }

.md-table-wrap { overflow-x: auto; margin: var(--space-2) 0; }
.md-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.md-th { padding: 6px 8px; text-align: left; font-weight: 600; background: var(--gray-50); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
.md-td { padding: 5px 8px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
[data-theme="dark"] .md-th { background: #202020; border-bottom-color: var(--gray-200); }

/* ================================================================
   UTILITY CLASSES
   Atomic utilities for layout, spacing, and text.
   Use these instead of inline styles.
   ================================================================ */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing - Margin */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }

/* Spacing - Padding */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }

/* Text */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-gray { color: var(--text-gray); }
.text-dark { color: var(--text-dark); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Width/Height */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Whitespace */
.whitespace-nowrap { white-space: nowrap; }

/* Position */
.relative { position: relative; }
.inset-0 { inset: 0; }

/* Border Radius */
.rounded-full { border-radius: var(--radius-full); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Object Fit */
.object-contain { object-fit: contain; }

/* ============================================================================
   PURCHASES MODULE STYLES
   ============================================================================ */

/* Form Section Divider */
.form-section-divider {
  display: flex;
  align-items: center;
  margin: 24px 0 16px;
}

.form-section-divider::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
  margin-right: 12px;
}

.form-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
  margin-left: 12px;
}

.form-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Empty States */
.empty-text {
  text-align: center;
  color: var(--text-gray);
  padding: 24px;
}

/* Badge Colors */
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.badge-teal { background: rgba(13, 148, 136, 0.1); color: #0d9488; }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }


/* ==================== TEAM CALENDAR ==================== */

/* Day row */
.tc-day-subtitle {
    font-size: 0.8125rem;
}

.tc-day-hours {
    color: var(--success);
    cursor: default;
}

/* Booking line items */
.tc-booking--other {
    opacity: 0.7;
}

.tc-resource-badge,
.tc-project-badge {
    color: white;
}

.tc-resource-badge.tc-badge--current {
    background: var(--brand);
}

.tc-resource-badge.tc-badge--other {
    background: var(--gray-500);
}

.tc-project-badge.tc-badge--current {
    background: var(--success);
}

.tc-project-badge.tc-badge--other {
    background: var(--gray-400);
}

/* Resource picker dot */
.tc-picker-dot {
    background: var(--brand);
}

/* Disabled configure button on the Resources tab */
.tc-config-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tc-week-summary {
    margin-top: 1rem;
    background: var(--gray-50);
    border-top: 2px solid var(--gray-200);
    border-bottom: none;
    padding: 1rem 1.25rem 1.25rem;
}

.tc-week-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tc-week-summary-title {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.tc-week-summary-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark, #111827);
    letter-spacing: -0.01em;
}

.tc-week-summary-range {
    font-size: 0.8125rem;
    color: var(--gray-500, #6b7280);
}

.tc-week-summary-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.tc-week-summary-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success, #059669);
    line-height: 1;
}

.tc-week-summary-total-unit {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500, #6b7280);
}

.tc-week-summary-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.tc-week-summary-stat {
    background: white;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tc-week-summary-stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark, #111827);
    line-height: 1;
}

.tc-week-summary-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    line-height: 1.3;
}

@media (max-width: 380px) {
    .tc-week-summary-stats {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .tc-week-summary {
    background: #191919;
    border-top-color: #2e2e2e;
}

[data-theme="dark"] .tc-week-summary-label {
    color: #e0e0e0;
}

[data-theme="dark"] .tc-week-summary-range,
[data-theme="dark"] .tc-week-summary-total-unit,
[data-theme="dark"] .tc-week-summary-stat-label {
    color: #8a8a8a;
}

[data-theme="dark"] .tc-week-summary-stat {
    background: #1f1f1f;
    border-color: #2e2e2e;
}

[data-theme="dark"] .tc-week-summary-stat-value {
    color: #e0e0e0;
}