/* ================================================================
   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 — Navy */
    --primary-blue: #1e3c72;
    --primary-blue-hover: #16305e;
    --brand: var(--primary-blue);
    --brand-light: #2a5298;
    --brand-subtle: rgba(30, 60, 114, 0.06);
    --brand-glow: rgba(30, 60, 114, 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;

    /* 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 — Light blue for dark backgrounds */
    --primary-blue: #58a6ff;
    --primary-blue-hover: #79b8ff;
    --brand: var(--primary-blue);
    --brand-light: #388bfd;
    --brand-subtle: rgba(56, 139, 253, 0.1);
    --brand-glow: rgba(56, 139, 253, 0.15);

    /* Semantic Colors — vibrant for dark backgrounds */
    --success: #34d399;
    --success-light: rgba(52, 211, 153, 0.12);
    --success-glow: rgba(52, 211, 153, 0.1);
    --warning: #fbbf24;
    --warning-light: rgba(251, 191, 36, 0.12);
    --danger: #f87171;
    --danger-light: rgba(248, 113, 113, 0.12);

    /* Gray Scale — Landing page inspired dark surfaces */
    --gray-50: #0a0a0b;     /* page bg */
    --gray-100: #111113;    /* surface, cards */
    --gray-200: #2a2a32;    /* border-default */
    --gray-300: #3a3a44;    /* border-emphasis */
    --gray-400: #55556a;    /* fg-subtle */
    --gray-500: #8888a0;    /* fg-muted */
    --gray-600: #b0b0c0;    /* fg-secondary */
    --gray-700: #e0e0e8;    /* fg-default */
    --gray-800: #e0e0e8;    /* fg-default */
    --gray-900: #f0f0f5;    /* fg-on-emphasis */

    /* Semantic Aliases */
    --text-gray: #8888a0;
    --text-dark: #f0f0f0;
    --border-color: rgba(255, 255, 255, 0.08);
    --bg-light: #111113;
    --bg-page: #0a0a0b;
    --bg-primary: #16161a;
    --bg-secondary: #1c1c21;

    /* Shadows — deeper with subtle glow */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

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(--primary-blue);
}

.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(--primary-blue);
    color: white;
}

/* ==================== 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: #2a4a7c;
    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); }
}

/* ==================== 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;
    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;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--gray-200);
    background: white;
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
}

/* ==================== 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: 1rem;
        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(30, 60, 114, 0.3);
}

.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-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-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 */
/* Legacy sheet-actions button styles removed — now uses action-btn order-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;
}

.header-logo-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: -100% 0;
    animation: logoShine 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes logoShine {
    0%, 80%, 100% { background-position: -100% 0; }
    30% { background-position: 200% 0; }
}

/* ==================== 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(--primary-blue);
    font-weight: 500;
}

.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):     #0a0a0b
 * Surface (cards):      #16161a
 * Hover:                #1c2128
 * Active/pressed:       #1c1c21
 * Border:               #2a2a32
 * Border muted:         #1c1c21
 * Text primary:         #e0e0e8
 * Text secondary:       #b0b0c0
 * Text muted:           #8888a0
 * Text subtle:          #55556a
 * Accent:               #58a6ff (blue)
 * Success:              #34d399
 * Warning:              #fbbf24
 * Danger:               #f87171
 *
 * Dark-mode SVG arrow for selects:
 *   stroke=%238888a0  (URL-encoded #8888a0)
 */

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

[data-theme="dark"] body {
    background: #0a0a0b;
    color: #e0e0e8;
}

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

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

[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: #e0e0e8;
}

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

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

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

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

[data-theme="dark"] .header-dropdown {
    background: #16161a;
    border-color: #2a2a32;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5);
}

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

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

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

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

[data-theme="dark"] .header-dropdown-item-danger:hover {
    background: rgba(248, 81, 73, 0.1);
    color: #f87171;
}

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

[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,
[data-theme="dark"] .legacy-page .form-row input,
[data-theme="dark"] .legacy-page .form-row select,
[data-theme="dark"] .legacy-page .form-row textarea {
    background: #0a0a0b;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[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: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 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: #55556a;
}

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

/* Selects — use background shorthand to prevent double arrow */
[data-theme="dark"] .form-select {
    background: #0a0a0b 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='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .form-select:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

[data-theme="dark"] .issue-type-select {
    background: #0a0a0b 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='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .filter-select {
    background: #0a0a0b 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='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .mapping-select {
    background: #0a0a0b 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='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] select option {
    background: #16161a;
    color: #e0e0e8;
}

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

[data-theme="dark"] .drawings-filter select {
    background: #0a0a0b 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='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .drawings-filter select:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 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: #0a0a0b;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .action-modal-body select {
    background: #0a0a0b 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='%238888a0' 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: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

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

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

/* Preview form elements */
[data-theme="dark"] .preview-form {
    background: #0a0a0b;
    --preview-text-primary: #e0e0e8;
    --preview-text-secondary: #8888a0;
    --preview-background: #0a0a0b;
}

[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: #0a0a0b;
    border-color: #2a2a32;
    color: #e0e0e8;
}

/* ---- 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"] .form-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: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    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: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ---- Containers / Sections (Surface) ---- */
[data-theme="dark"] .panel {
    background: #16161a;
    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: #e0e0e8;
}

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

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

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

[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"] .email-preview,
[data-theme="dark"] .issue-modal-pipe-info {
    background: #16161a;
    color: #e0e0e8;
}

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

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

[data-theme="dark"] .preview-inline-input {
    background: #0a0a0b;
    border-color: #388bfd;
    color: #e0e0e8;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

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

[data-theme="dark"] .preview-delete-section-btn:hover,
[data-theme="dark"] .preview-delete-field-btn:hover {
    background: rgba(248, 81, 73, 0.15);
    color: #f87171;
}

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

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

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

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

[data-theme="dark"] .prestart-signatures {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

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

[data-theme="dark"] .entry-num {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

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

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

/* ---- Modals (Surface + border + shadow for elevation) ---- */
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .project-modal-overlay,
[data-theme="dark"] .issue-modal-overlay,
[data-theme="dark"] .modal {
    background: rgba(1, 4, 9, 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 > div {
    background: #16161a;
    border: 1px solid #2a2a32;
    overflow: hidden;
}

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

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

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .modal-actions,
[data-theme="dark"] .project-modal-header,
[data-theme="dark"] .project-modal-footer {
    background: #16161a;
    border-color: #2a2a32;
}

/* Project Modal */
[data-theme="dark"] .project-modal-search {
    background: #0a0a0b;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .project-modal-search:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

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

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

[data-theme="dark"] .project-modal-item.selected {
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
}

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

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

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

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

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

[data-theme="dark"] .project-create-view .form-input {
    background: #0a0a0b;
    color: #e0e0e8;
    border-color: #2a2a32;
}

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

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

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

[data-theme="dark"] .issue-modal-close:hover {
    background: rgba(248, 81, 73, 0.15);
    color: #f87171;
}

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

/* Replacement modal dark theme */
[data-theme="dark"] .order-replacement-btn {
    background: #16161a;
    border-color: #58a6ff;
    color: #58a6ff;
}

[data-theme="dark"] .order-replacement-btn:hover {
    background: rgba(56, 139, 253, 0.1);
}

[data-theme="dark"] .replacement-modal-overlay {
    background: rgba(1, 4, 9, 0.75);
    backdrop-filter: blur(4px);
}

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

[data-theme="dark"] .replacement-modal-header {
    background: rgba(56, 139, 253, 0.1);
    border-bottom-color: #2a2a32;
}

[data-theme="dark"] .replacement-modal-header h3 {
    color: #58a6ff;
}

[data-theme="dark"] .replacement-modal-close:hover {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

[data-theme="dark"] .replacement-modal-pipe-info {
    background: #16161a;
    color: #8888a0;
}

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

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

[data-theme="dark"] .replacement-comment {
    background: #0a0a0b;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .replacement-comment:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

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

[data-theme="dark"] .replacement-compare-table th {
    background: #16161a;
    color: #e0e0e8;
    border-bottom-color: #2a2a32;
}

[data-theme="dark"] .replacement-compare-table td {
    color: #8888a0;
    border-bottom-color: #1c1c21;
}

[data-theme="dark"] .replacement-compare-table tr.replacement-changed td {
    background: rgba(210, 153, 34, 0.1);
}

[data-theme="dark"] .replacement-changed-badge {
    background: rgba(210, 153, 34, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .replacement-result-header {
    color: #34d399;
}

[data-theme="dark"] .replacement-spinner {
    border-color: #2a2a32;
    border-top-color: #58a6ff;
}

/* ---- Dropdowns (Surface + border + shadow) ---- */
[data-theme="dark"] .action-dropdown,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .bulk-actions-dropdown,
[data-theme="dark"] .form-card .dropdown-menu {
    background: #16161a;
    border-color: #2a2a32;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 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: #e0e0e8;
    border-bottom-color: #1c1c21;
}

[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: #1c2128;
}

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

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

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

[data-theme="dark"] .action-menu-btn:hover {
    background: #1c2128;
    color: #b0b0c0;
}

/* ---- 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: #16161a;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[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: #1c2128;
    border-color: #3a3a44;
}

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

[data-theme="dark"] .btn-delete:hover {
    border-color: #f87171;
    background: rgba(248, 81, 73, 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: #16161a;
    border-color: #2a2a32;
    color: #e0e0e8;
}

[data-theme="dark"] .btn-camera:hover,
[data-theme="dark"] .btn-add-item:hover,
[data-theme="dark"] .btn-select-drawings:hover {
    background: #1c2128;
    border-color: #58a6ff;
}

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

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

[data-theme="dark"] .btn-danger:hover {
    background: rgba(248, 81, 73, 0.1);
    color: #f87171;
}

[data-theme="dark"] .btn-remove:hover,
[data-theme="dark"] .btn-remove-item:hover,
[data-theme="dark"] .delete-btn:hover {
    background: rgba(248, 81, 73, 0.15);
    border-color: #f87171;
}

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

[data-theme="dark"] .sheet-actions button:hover,
[data-theme="dark"] button[onclick*="viewSheet"]:hover,
[data-theme="dark"] button[onclick*="downloadSheet"]:hover {
    background: #1c2128;
    border-color: #58a6ff;
    color: #58a6ff;
}

/* Photo preview actions */
[data-theme="dark"] .photo-preview-actions button {
    background: #16161a;
    color: #e0e0e8;
    border-color: #2a2a32;
}

/* Drawing chips */
[data-theme="dark"] .drawing-chip {
    background: #16161a;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .drawing-chip-category {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

/* Form card menu trigger */
[data-theme="dark"] .form-card .menu-trigger:hover {
    background: #1c2128;
    color: #b0b0c0;
}

[data-theme="dark"] .form-card-title:hover {
    color: #58a6ff;
}

/* Legacy page buttons */
[data-theme="dark"] .legacy-page .btn-secondary {
    background: #1c2128;
    color: #e0e0e8;
}

[data-theme="dark"] .legacy-page .btn-secondary:hover {
    background: #1c1c21;
}

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

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

[data-theme="dark"] .upload-area:hover {
    border-color: #58a6ff;
    background: rgba(56, 139, 253, 0.04);
}

[data-theme="dark"] .upload-area.dragging,
[data-theme="dark"] .upload-zone.dragging {
    border-color: #58a6ff;
    background: rgba(56, 139, 253, 0.1);
}

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

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

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

[data-theme="dark"] table td {
    border-bottom-color: #1c1c21;
    color: #e0e0e8;
}

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

[data-theme="dark"] .workers-table th.sortable.active {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

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

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

[data-theme="dark"] .preview-btn {
    background: #16161a;
    color: #e0e0e8;
    border-color: #2a2a32;
}

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

[data-theme="dark"] .preview-btn-remove {
    background: rgba(248, 81, 73, 0.1);
    color: #f87171;
    border-color: rgba(248, 81, 73, 0.2);
}

[data-theme="dark"] .preview-btn-remove:hover {
    background: rgba(248, 81, 73, 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(56, 139, 253, 0.15);
    color: #58a6ff;
}

[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: #8888a0;
}

[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(56, 139, 253, 0.15);
    color: #58a6ff;
}

[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(248, 81, 73, 0.15);
    color: #f87171;
}

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

[data-theme="dark"] .badge-missing {
    background: rgba(248, 81, 73, 0.15);
    color: #f87171;
}

[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: #8888a0;
}

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

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

[data-theme="dark"] .delivery-tomorrow {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

[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: #8888a0;
}

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

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

[data-theme="dark"] .category-badge.safety,
[data-theme="dark"] .category-badge.hazard {
    background: rgba(248, 81, 73, 0.15);
    color: #f87171;
}

[data-theme="dark"] .category-badge.quality {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

[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: #8888a0;
}

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

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

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

[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(248, 81, 73, 0.15);
    color: #f87171;
}

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

[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: #16161a;
    border-color: #2a2a32;
    color: #8888a0;
}

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

[data-theme="dark"] .toggle-pill.active {
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
    border-color: #58a6ff;
}

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

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

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

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

[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(248, 81, 73, 0.06);
}

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

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

/* ---- 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(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.3);
    color: #f87171;
}

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

[data-theme="dark"] .result-error {
    background: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.3);
    color: #f87171;
}

[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(56, 139, 253, 0.08);
    border-color: #58a6ff;
    color: #58a6ff;
}

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

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

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

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

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

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

[data-theme="dark"] .itp-signatures,
[data-theme="dark"] .itp-submissions {
    background: rgba(56, 139, 253, 0.15);
    color: #58a6ff;
}

/* 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(56, 139, 253, 0.06);
    border-color: rgba(56, 139, 253, 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, #16161a, #1c2128);
}

/* ---- Week Nav ---- */
[data-theme="dark"] .week-nav-btn {
    background: #16161a;
    color: #e0e0e8;
    border-color: #2a2a32;
}

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

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

[data-theme="dark"] .login-box {
    background: #16161a;
    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: #e0e0e8;
}

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

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

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

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

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

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

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

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

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

/* ---- Legacy Page ---- */
[data-theme="dark"] body.legacy-page {
    background-color: #0a0a0b;
}

[data-theme="dark"] .legacy-page .tabs {
    background: #16161a;
    border-bottom-color: #2a2a32;
}

[data-theme="dark"] .legacy-page .tab {
    color: #8888a0;
    border-bottom-color: transparent;
}

[data-theme="dark"] .legacy-page .tab.active {
    background: #1c2128;
    color: #58a6ff;
    border-bottom-color: #58a6ff;
}

[data-theme="dark"] .legacy-page .tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.03);
    color: #b0b0c0;
}

[data-theme="dark"] .legacy-page .breadcrumb-container {
    background: #16161a;
    border-bottom-color: #2a2a32;
}

[data-theme="dark"] .legacy-page .breadcrumb,
[data-theme="dark"] .legacy-page .breadcrumb-item {
    color: #8888a0;
}

[data-theme="dark"] .legacy-page .breadcrumb-separator {
    color: #3a3a44;
}

[data-theme="dark"] .legacy-page .breadcrumb-item.active {
    color: #e0e0e8;
}

[data-theme="dark"] .legacy-page .header {
    background: linear-gradient(135deg, #16161a 0%, #1c2128 100%);
}

[data-theme="dark"] .legacy-page .header-logo {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .legacy-page .panel {
    border-color: #2a2a32;
}

[data-theme="dark"] .legacy-page .modal-header {
    border-bottom-color: #2a2a32;
}

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

[data-theme="dark"] .legacy-page .form-row label {
    color: #b0b0c0;
}

/* ---- Text color overrides for hardcoded light-mode text ---- */
[data-theme="dark"] .items-header,
[data-theme="dark"] .order-crew,
[data-theme="dark"] .panel-header,
[data-theme="dark"] .legacy-page .form-row label,
[data-theme="dark"] .action-dropdown-item,
[data-theme="dark"] .action-card-description {
    color: #e0e0e8;
}

[data-theme="dark"] .order-date,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .issue-modal-pipe-info,
[data-theme="dark"] .action-menu-btn {
    color: #8888a0;
}

/* ---- Hardcoded border overrides ---- */
[data-theme="dark"] .item-row input,
[data-theme="dark"] .pipe-row input,
[data-theme="dark"] .order,
[data-theme="dark"] .order-items,
[data-theme="dark"] .email-preview,
[data-theme="dark"] .stat,
[data-theme="dark"] .items-section,
[data-theme="dark"] .action-dropdown,
[data-theme="dark"] .prompt-textarea,
[data-theme="dark"] .legacy-page .breadcrumb-container,
[data-theme="dark"] .legacy-page .tabs,
[data-theme="dark"] .legacy-page .form-row textarea,
[data-theme="dark"] .legacy-page .form-row input,
[data-theme="dark"] .legacy-page .form-row select {
    border-color: #2a2a32;
}

/* ---- Progress bar ---- */
[data-theme="dark"] .progress-container {
    background: #1c1c21;
}

/* ---- File Icon ---- */
[data-theme="dark"] .file-icon {
    background: #58a6ff;
}

/* ---- Scrollbar ---- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0a0a0b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2a2a32;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3a3a44;
}

/* Firefox scrollbar */
[data-theme="dark"] * {
    scrollbar-color: #2a2a32 #0a0a0b;
}

/* ---- Delete location ---- */
[data-theme="dark"] .location-item .delete-location:hover {
    background: rgba(248, 81, 73, 0.15);
}

/* ---- Legacy page buttons ---- */
[data-theme="dark"] .legacy-page .btn-add {
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
}

[data-theme="dark"] .legacy-page .btn-remove {
    background: rgba(248, 81, 73, 0.1);
    color: #f87171;
}

[data-theme="dark"] .legacy-page .btn-remove:hover {
    background: rgba(248, 81, 73, 0.2);
}

[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: #0a0a0b !important;
}

[data-theme="dark"] .ql-toolbar {
    background: #16161a !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: #16161a !important;
}

/* ---- Drawing chip (re-asserted) ---- */
[data-theme="dark"] .drawing-chip {
    background: #16161a;
    border-color: #2a2a32;
    color: #e0e0e8;
}

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

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

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

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

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

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

[data-theme="dark"] .tab-count {
    background: #1c1c21;
    color: #8888a0;
}

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

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

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

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

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

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

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

[data-theme="dark"] .stock-qty-input {
    background: #0a0a0b;
    color: #e0e0e8;
    border-color: #58a6ff;
}

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

[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, #3a3a44 0%, #2a2a32 100%);
    color: #e0e0e8;
}

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

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

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

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

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

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

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

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

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

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

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

/* ---- 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: #e0e0e8;
}

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

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

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

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

/* Share modal */
[data-theme="dark"] .share-url-input {
    background: #0a0a0b;
    border-color: #2a2a32;
    color: #e0e0e8;
}

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

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

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

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

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

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

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

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

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

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

/* ---- Timesheets: Xero & Settings ---- */
[data-theme="dark"] .xero-connection-box {
    background: #16161a;
    border-color: #2a2a32;
}

[data-theme="dark"] .xero-org-name {
    color: #e0e0e8;
}

[data-theme="dark"] .xero-org-details {
    color: #8888a0;
}

[data-theme="dark"] .mapping-item {
    border-bottom-color: #1c1c21;
}

[data-theme="dark"] .mapping-local-name {
    color: #e0e0e8;
}

[data-theme="dark"] .mapping-local-email {
    color: #8888a0;
}

[data-theme="dark"] .mapping-arrow {
    color: #3a3a44;
}

[data-theme="dark"] .sync-history-item {
    border-bottom-color: #1c1c21;
}

/* ---- Cutting Sheets: source sheet info box ---- */
[data-theme="dark"] .pipe-source-info {
    background: rgba(56, 139, 253, 0.08) !important;
    border-left-color: #58a6ff !important;
}

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

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

[data-theme="dark"] .pipe-source-info .pipe-source-meta {
    color: #58a6ff !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(248, 81, 73, 0.15);
    color: #f87171;
}

/* ---- Paste Items button ---- */
[data-theme="dark"] .btn-paste-items {
    background: rgba(56, 139, 253, 0.1);
    border-color: #388bfd;
    color: #58a6ff;
}

[data-theme="dark"] .btn-paste-items:hover {
    background: #388bfd;
    color: #ffffff;
}

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

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

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

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

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

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

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

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

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

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

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

[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: #58a6ff;
}


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

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

[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: #2a2a32;
}

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

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

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

[data-theme="dark"] .name-input:focus {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15) !important;
}

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

/* Prestarts: SWMS add form */
[data-theme="dark"] #swmsAddForm {
    background: #16161a !important;
    border-color: #2a2a32 !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: #0a0a0b !important;
    border-color: #2a2a32 !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: #16161a !important;
    color: #e0e0e8 !important;
}

/* Cutting sheets: outlet items inside search results (inline-styled divs) */
[data-theme="dark"] .pipe-outlets-info [style*="background: white"] {
    background: #16161a !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(56, 139, 253, 0.08) !important;
    border-left-color: #388bfd !important;
}

[data-theme="dark"] [style*="color: #1e40af"] {
    color: #388bfd !important;
}

[data-theme="dark"] [style*="color: #1e3a8a"] {
    color: #58a6ff !important;
}

[data-theme="dark"] [style*="color: #3b82f6"] {
    color: #58a6ff !important;
}

/* Cutting sheets: import summary */
[data-theme="dark"] .import-summary {
    background: #16161a !important;
    color: #8888a0 !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: #16161a !important;
}

/* Materials page: scheduled badge inline */
[data-theme="dark"] .monday-pill[style*="e5f8ed"],
[data-theme="dark"] .monday-pill[style*="e8f0fe"] {
    background: rgba(56, 139, 253, 0.15) !important;
    color: #58a6ff !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;
}

/* Materials page: paste modal (dynamically created) */
[data-theme="dark"] .paste-modal-content {
    background: #16161a !important;
    border: 1px solid #2a2a32;
}

[data-theme="dark"] .paste-modal-cancel {
    background: #1c1c21 !important;
    color: #e0e0e8 !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] .paste-modal-content textarea {
    background: #0a0a0b !important;
    color: #e0e0e8 !important;
    border-color: #2a2a32 !important;
}

/* ---- Email group header (materials page) ---- */
[data-theme="dark"] .email-group-header:hover,
[data-theme="dark"] .email-group.expanded .email-group-header {
    background: rgba(56, 139, 253, 0.1);
}

/* ---- Signature modals (prestarts, toolbox-talks) ---- */
[data-theme="dark"] .signature-modal-content {
    background: #16161a !important;
    border: 1px solid #2a2a32;
}

[data-theme="dark"] .signature-modal-header {
    border-bottom-color: #2a2a32 !important;
}

[data-theme="dark"] .signature-modal-footer {
    border-top-color: #2a2a32 !important;
}

[data-theme="dark"] .signature-canvas-wrapper {
    border-color: #2a2a32 !important;
    background: #0a0a0b !important;
}

[data-theme="dark"] .signature-image {
    background: #16161a !important;
    border-color: #2a2a32 !important;
}

/* ---- Pressure tests: finish modal header ---- */
[data-theme="dark"] .finish-modal-header {
    background: #16161a !important;
    border-bottom-color: #2a2a32 !important;
}

/* ---- Pressure tests: lightbox close button ---- */
[data-theme="dark"] .lightbox-close-btn {
    background: #1c1c21 !important;
    color: #e0e0e8 !important;
}

/* ---- Cutting sheets: detail modal ---- */
[data-theme="dark"] .cutting-sheet-modal-content {
    background: #16161a !important;
    border: 1px solid #2a2a32;
}


/* ---- Stores: inline white buttons ---- */
[data-theme="dark"] .btn.btn-outline[style*="background: white"] {
    background: #1c1c21 !important;
    color: #e0e0e8 !important;
    border-color: #2a2a32 !important;
}

/* ---- Materials: clear missing items button ---- */
[data-theme="dark"] .btn.btn-outline.btn-sm[style*="background: white"] {
    background: transparent !important;
    color: #f87171 !important;
    border-color: #f87171 !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: #16161a !important;
}

[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f9fafb"] {
    background: #16161a !important;
}

[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background: #16161a !important;
}

[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#e5e7eb"] {
    background: #1c1c21 !important;
}

[data-theme="dark"] [style*="background: #fff;"],
[data-theme="dark"] [style*="background: #fff "],
[data-theme="dark"] [style*="background:#fff;"] {
    background: #16161a !important;
}

/* Inline dark text colors */
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#4b5563"] {
    color: #8888a0 !important;
}

[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"] {
    color: #e0e0e8 !important;
}

[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"] {
    color: #b0b0c0 !important;
}

[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"] {
    color: #8888a0 !important;
}

/* Inline light borders */
[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"] {
    border-bottom-color: #2a2a32 !important;
}

[data-theme="dark"] [style*="border-top: 1px solid #e5e7eb"] {
    border-top-color: #2a2a32 !important;
}

[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] {
    border-color: #2a2a32 !important;
}

[data-theme="dark"] [style*="border: 2px solid #e5e7eb"] {
    border-color: #2a2a32 !important;
}

[data-theme="dark"] [style*="border: 2px solid #e9ecef"] {
    border-color: #2a2a32 !important;
}

[data-theme="dark"] [style*="border-bottom: 1px solid #e9ecef"] {
    border-bottom-color: #2a2a32 !important;
}

/* Inline background: white on non-QR elements */
[data-theme="dark"] [style*="background: white"]:not(#waQRCode):not(#tsWaQRCode) {
    background: #16161a !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: #16161a !important;
}

[data-theme="dark"] tr[style*="background: #f3f4f6"] th {
    color: #e0e0e8 !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: #16161a !important;
}

/* Settings: WhatsApp test chat area */
[data-theme="dark"] #waTestChat {
    background: #0a0a0b !important;
    border-color: #2a2a32 !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: #2a2a32;
}

/* ---- Category badges (pipe issues) ---- */
[data-theme="dark"] .category-badge.pipe_issue { background: rgba(248, 81, 73, 0.15); color: #f87171; }
[data-theme="dark"] .category-badge.design_issue { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
[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: #8888a0; }
[data-theme="dark"] .status-badge.not_submitted { background: rgba(139, 148, 158, 0.15); color: #8888a0; }
[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: #16161a;
}

/* ---- Modal close button ---- */
[data-theme="dark"] .modal-close-btn:hover {
    background-color: #1c1c21;
    color: #e0e0e8;
}


/* ==================== DARK MODE SUPPORT (Legacy - prefers-color-scheme) ==================== */

@media (prefers-color-scheme: dark) {
    .project-list-divider {
        background: linear-gradient(to right, transparent, #2a2a32 20%, #2a2a32 80%, transparent);
    }

    .project-list-divider::after {
        background: #3a3a44;
    }
}


/* ================================================================
   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 70px 48px;
    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;
}

/* Legacy modal system */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-dialog {
    background: white;
    border-radius: 8px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Email preview */
.email-preview {
    background: #fafafa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    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: #58a6ff;
    font-weight: 500;
}


/* ================================================================
   SECTION 5: LEGACY PAGE STYLES (scoped to .legacy-page)
   For pipes.html which uses the old UI system
   ================================================================ */

/* === LEGACY PAGE OVERRIDES (pipes.html) === */
/* These styles apply only to pages with class="legacy-page" on body */

body.legacy-page {
    background-color: #f5f5f5;
}

.legacy-page .header {
    all: revert;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--brand-light) 100%);
    color: white;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: block !important;
}

.legacy-page .header-content {
    all: revert;
    max-width: 1600px;
    margin: 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.legacy-page .header-logo {
    all: revert;
    height: 60px;
    width: auto;
    object-fit: contain;
    background: white;
    padding: 8px;
    border-radius: 8px;
    display: block !important;
}

.legacy-page .header-text {
    all: revert;
    display: flex !important;
    flex-direction: column;
    text-align: center;
}

.legacy-page .header h1 {
    all: revert;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: white;
    display: block !important;
}

.legacy-page .header h2 {
    all: revert;
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    color: white;
    display: block !important;
}

.legacy-page .breadcrumb-container {
    all: revert;
    display: block !important;
    padding: 10px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.legacy-page .breadcrumb {
    all: revert;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}

.legacy-page .breadcrumb-item {
    color: #6c757d;
}

.legacy-page .breadcrumb-separator {
    color: #adb5bd;
}

.legacy-page .breadcrumb-item.active {
    color: #495057;
    font-weight: 600;
}

.legacy-page .btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px;
}

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

.legacy-page .btn-primary:hover {
    background: #58a6ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}

.legacy-page .btn-success {
    background: #28a745;
    color: white;
}

.legacy-page .btn-success:hover {
    background: #218838;
}

.legacy-page .btn-secondary {
    background: #6c757d;
    color: white;
}

.legacy-page .btn-secondary:hover {
    background: #5a6268;
}

.legacy-page .btn-outline {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.legacy-page .btn-outline:hover {
    background: var(--primary-blue);
    color: white;
}

.legacy-page .btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legacy-page .btn-block {
    width: 100%;
}

.legacy-page .btn-add {
    background: #e3f2fd;
    color: var(--primary-blue);
    border: 2px dashed var(--primary-blue);
    margin-top: 4px;
}

.legacy-page .btn-add:hover {
    background: #bbdefb;
}

.legacy-page .btn-remove {
    background: #f8d7da;
    color: #dc3545;
}

.legacy-page .btn-remove:hover {
    background: #f5c6cb;
}

.legacy-page .tabs {
    display: flex;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.legacy-page .tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    height: 48px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.legacy-page .tab.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
    background: white;
}

.legacy-page .form-row {
    margin-bottom: 16px;
}

.legacy-page .form-row label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.legacy-page .form-row input,
.legacy-page .form-row select,
.legacy-page .form-row textarea {
    width: 100%;
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    height: 48px;
    color: var(--text-dark);
    background: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.2s;
}

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

.legacy-page .form-row select {
    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;
    padding-right: 36px;
}

.legacy-page .form-row textarea {
    resize: vertical;
    min-height: 80px;
    height: auto;
}

.legacy-page .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.legacy-page .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.legacy-page .modal-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.legacy-page .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-400);
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.legacy-page .modal-close:hover {
    background: var(--gray-100);
    color: #4b5563;
}

.legacy-page .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.legacy-page .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: #f8f9fa;
}

/* Legacy page mobile responsive */
@media (max-width: 768px) {
    .legacy-page .header {
        padding: 15px 10px;
    }
    .legacy-page .header h1 {
        font-size: 20px;
    }
    .legacy-page .header h2 {
        font-size: 16px;
    }
    .legacy-page .container {
        padding: 0;
    }
    .legacy-page .layout {
        gap: 0;
    }
    .legacy-page .panel {
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #e9ecef;
    }
    .legacy-page .panel-body {
        padding: 15px 10px;
    }
    .legacy-page .panel-header {
        padding: 12px 10px;
    }
    .legacy-page .form-row {
        margin-bottom: 14px;
    }
    .legacy-page .items-section {
        padding: 10px;
        margin-bottom: 14px;
        border-radius: 6px;
    }
    .legacy-page .item-row {
        grid-template-columns: 1fr 55px 44px;
        gap: 4px;
    }
    .legacy-page .item-row input {
        font-size: 13px;
        padding: 10px 6px;
    }
    .legacy-page .item-row input.item-qty {
        padding: 10px 2px;
    }
    .legacy-page .btn-icon {
        width: 44px;
        height: 48px;
    }
    .legacy-page .action-buttons {
        flex-direction: column;
    }
    .legacy-page .stat-grid {
        gap: 8px;
    }
    .legacy-page .order-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .legacy-page .order-date {
        font-size: 11px;
    }
    .legacy-page .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .legacy-page .tab {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 13px;
    }
    .legacy-page .modal {
        padding: 0;
    }
    .legacy-page .modal-dialog {
        max-width: 100%;
        border-radius: 0;
    }
    .legacy-page .modal-header {
        padding: 12px 10px;
    }
    .legacy-page .modal-header h3 {
        font-size: 16px;
    }
    .legacy-page .modal-body {
        padding: 15px 10px;
    }
    .legacy-page .modal-footer {
        padding: 12px 10px;
        flex-wrap: wrap;
    }
    .legacy-page .order {
        padding: 15px 10px;
    }
    .legacy-page .order-items table {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .legacy-page .header {
        padding: 12px 10px;
    }
    .legacy-page .header-content {
        gap: 12px;
    }
    .legacy-page .header-logo {
        height: 40px;
    }
    .legacy-page .header h1 {
        font-size: 16px;
    }
    .legacy-page .header h2 {
        font-size: 13px;
    }
    .legacy-page .container {
        padding: 0;
    }
    .legacy-page .panel {
        border-radius: 0;
    }
    .legacy-page .panel-header {
        padding: 15px 10px;
        font-size: 14px;
    }
    .legacy-page .panel-body {
        padding: 15px 10px;
    }
    .legacy-page .items-section {
        padding: 10px;
    }
    .legacy-page .item-row {
        grid-template-columns: 1fr 48px 44px;
        gap: 4px;
    }
    .legacy-page .item-row input {
        font-size: 13px;
        padding: 10px 4px;
    }
    .legacy-page .item-row input.item-qty {
        padding: 10px 2px;
        font-size: 12px;
    }
    .legacy-page .btn-icon {
        width: 44px;
        height: 48px;
    }
    .legacy-page .form-row input,
    .legacy-page .form-row select,
    .legacy-page .form-row textarea {
        font-size: 13px;
    }
    .legacy-page .btn {
        font-size: 13px;
        padding: 12px;
    }
    .legacy-page .stat-value {
        font-size: 20px;
    }
    .legacy-page .stat-label {
        font-size: 10px;
    }
    .legacy-page .order {
        padding: 12px 10px;
    }
    .legacy-page .order-crew {
        font-size: 14px;
    }
    .legacy-page .order-type {
        font-size: 10px;
        padding: 2px 6px;
    }
    .legacy-page .order-items {
        padding: 10px;
    }
    .legacy-page .order-items table {
        font-size: 11px;
    }
    .legacy-page .order-items td {
        padding: 3px 6px;
    }
    .legacy-page .order-notes {
        font-size: 12px;
        padding: 8px 10px;
    }
    .legacy-page .modal-footer .btn {
        flex: 1;
        min-width: 0;
    }
    .legacy-page .modal-dialog {
        border-radius: 0;
    }
    .legacy-page .modal-header {
        padding: 12px 10px;
    }
    .legacy-page .modal-body {
        padding: 15px 10px;
    }
    .legacy-page .modal-footer {
        padding: 12px 10px;
    }
}


/* ================================================================
   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(30, 60, 114, 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;
    }

    .issue-modal {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .issue-modal-header {
        border-radius: 0;
        flex-shrink: 0;
    }

    .issue-modal-body {
        flex: 1;
        overflow-y: auto;
        -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;
}

/* Order Replacement Button */
.order-replacement-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: white;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.order-replacement-btn:hover {
    background: #eff6ff;
}

/* Order Replacement Modal */
.replacement-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;
}

.replacement-modal-overlay.open {
    display: flex;
}

.replacement-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.replacement-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    background: #eff6ff;
    border-radius: 12px 12px 0 0;
}

.replacement-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
}

.replacement-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: 4px;
}

.replacement-modal-close:hover {
    background: #dbeafe;
    color: #1e40af;
}

.replacement-modal-body {
    padding: 20px;
}

.replacement-modal-pipe-info {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #4b5563;
}

.replacement-modal-pipe-info strong {
    color: var(--gray-800);
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}

.replacement-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.replacement-comment {
    width: 100%;
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 12px;
    background: white;
    color: var(--text-dark);
}

.replacement-comment:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.submit-replacement-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.submit-replacement-btn:hover {
    background: #1d4ed8;
}

.submit-replacement-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
}

.replacement-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: replacementSpin 0.8s linear infinite;
    margin: 0 auto;
}

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

.replacement-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: #166534;
    margin-bottom: 12px;
}

.replacement-preview {
    margin-bottom: 12px;
}

.replacement-summary {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #166534;
    margin-bottom: 12px;
}

.replacement-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.replacement-compare-table th {
    text-align: left;
    padding: 8px 10px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
}

.replacement-compare-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
}

.replacement-compare-table tr.replacement-changed td {
    background: #fefce8;
}

.replacement-changed-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #d97706;
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.download-replacement-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.download-replacement-btn:hover {
    background: #047857;
}

.download-replacement-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
}

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

    .replacement-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .replacement-modal-header {
        border-radius: 0;
        flex-shrink: 0;
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    .replacement-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .replacement-compare-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .replacement-comment {
        font-size: 16px;
    }
}

/* --- 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: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    width: 32px;
    height: 32px;
}

.action-menu-btn:active {
    transform: scale(0.95);
}

.action-menu-btn:hover {
    background: #f1f5f9;
    color: var(--gray-500);
}

.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: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

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

.action-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--gray-100);
}

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

.action-dropdown-item:hover {
    background: var(--gray-50);
}

.action-dropdown-item:active {
    background: var(--gray-100);
}

.action-dropdown-item.delete:hover {
    background: #fef2f2;
    color: var(--danger);
}

.action-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 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: 8px;
    margin-bottom: 12px;
}

.add-location-section input {
    flex: 1;
}

/* 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);
}

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

/* 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;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    overflow: auto;
}

.ai-prompt-modal-content {
    background: white;
    margin: 50px auto;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

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

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

@media (max-width: 768px) {
    #ai-prompt-modal {
        padding: 0;
    }

    .ai-prompt-modal-content {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .ai-prompt-modal-header {
        flex-shrink: 0;
    }

    .ai-prompt-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ai-prompt-modal-footer {
        flex-shrink: 0;
    }
}

/* 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-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: #3b82f6;
}

.prompt-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Preview Section */
.preview-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 400px;
}

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

/* Form Cards Grid */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

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

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

/* Form card 3-dot menu - scoped to prevent override by other card menus */
.form-card .card-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.form-card .menu-trigger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
}

.form-card .menu-trigger:hover {
    background: #f3f4f6;
    color: #374151;
}

.form-card .menu-trigger svg {
    width: 18px;
    height: 18px;
}

.form-card .dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 180px;
    z-index: 1000;
    display: none;
}

.form-card .dropdown-menu.active {
    display: block;
}

.form-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

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

.form-card-badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.form-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

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

.form-card-meta {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-400);
    margin-bottom: 16px;
}

.form-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.form-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;
    }
    
    .form-card-actions {
        flex-direction: column;
    }
    
    .form-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);
}

.form-card-drawings {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.form-card-drawings svg {
    color: var(--primary-blue);
}

.form-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: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.2s;
}

.menu-trigger:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.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: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 180px;
    z-index: 1000;
    display: none;
}

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

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--gray-700);
    font-size: 14px;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.15s;
}

.menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.menu-item:hover {
    background: var(--gray-100);
}

.menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.menu-item.danger {
    color: var(--danger);
}

.menu-item.danger svg {
    color: var(--danger);
}

.menu-item.danger:hover {
    background: var(--danger-light);
}

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

/* Mobile Modal - Full Screen */
@media (max-width: 768px) {
    .modal {
        align-items: flex-start;
        padding: 0;
    }

    .modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        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 */
.form-card-title {
    transition: color 0.15s;
}

.form-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;
    }
    
    #drafts-modal .drafts-modal-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw !important;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    
    #drafts-modal .modal-header {
        padding: 16px 20px;
        padding-top: calc(16px + env(safe-area-inset-top));
    }
    
    #drafts-modal .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #drafts-modal #drafts-list {
        max-height: none;
    }
    
    #drafts-modal .modal-footer {
        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; }
    .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-trigger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.2s;
}

.menu-trigger:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.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: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 160px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all 0.2s ease;
}

.dropdown-menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--gray-700);
    font-size: 14px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.15s;
}

.menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.menu-item:hover {
    background: var(--gray-100);
}

.menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
}

.menu-item.danger {
    color: var(--danger);
}

.menu-item.danger svg {
    color: var(--danger);
}

.menu-item.danger:hover {
    background: var(--danger-light);
}

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

/* 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;
        margin: 0 !important;
        align-items: flex-start !important;
    }

    .modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

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

    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }

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

/* ==================== 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;
}

/* Week header */
.week-header {
    display: flex;
    justify-content: center;
    align-items: center;
    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;
}

/* 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: #388bfd;
    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: #0a0a0b;
    border-color: #2a2a32;
}

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

[data-theme="dark"] .employee-filter-select {
    background-color: #0a0a0b;
    color: #e0e0e8;
    border-color: #2a2a32;
}

[data-theme="dark"] .employee-filter-select:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

[data-theme="dark"] .employee-filter-chevron {
    color: #8888a0;
}

[data-theme="dark"] .cross-project-hours {
    color: #58a6ff;
}

/* ==================== 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-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: 1000;
    padding: 0.375rem;
    min-width: 180px;
    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;
}

/* 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-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: #f87171; }
[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: #2a2a32;
}

[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: #8888a0;
}

[data-theme="dark"] .expense-view-image {
    color: #58a6ff;
}

[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: #8888a0;
}

[data-theme="dark"] .add-entry-btn-inline:hover {
    color: #e0e0e8;
    background: #1c1c21;
}

[data-theme="dark"] .add-entry-btn-inline.active {
    color: #58a6ff;
    background: #1c2d41;
}

[data-theme="dark"] .entry-picker-dropdown {
    background: #16161a;
    border-color: #2a2a32;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .entry-picker-option {
    color: #e0e0e8;
}

[data-theme="dark"] .entry-picker-option:hover:not(:disabled) {
    background: #1c1c21;
}

[data-theme="dark"] .entry-picker-divider {
    background: #2a2a32;
}

[data-theme="dark"] .entry-delete-btn {
    color: #8888a0;
}

[data-theme="dark"] .entry-delete-btn:hover {
    color: #f87171;
    background: #3d1c1e;
}

[data-theme="dark"] .summary-tag {
    background: #2a2a32;
    color: #e0e0e8;
}

[data-theme="dark"] .receipt-upload-area {
    border-color: #2a2a32;
}


/* 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);
}

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

/* Xero Connection Box */
.xero-connection-box {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 1.25rem;
}

.xero-connected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.xero-connected-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.xero-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--success-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xero-status-icon.connected {
    background: var(--success-light);
    color: var(--success);
}

.xero-status-icon.disconnected {
    background: var(--danger-light);
    color: var(--danger);
}

.xero-org-name {
    font-weight: 600;
    color: var(--gray-800);
}

.xero-org-details {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.xero-not-connected {
    text-align: center;
    padding: 1rem;
}

.xero-not-connected p {
    color: var(--gray-500);
    margin: 0 0 1rem 0;
}

/* Employee Mapping */
.mapping-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.75rem;
}

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

.mapping-local {
    flex: 1;
    min-width: 0;
}

.mapping-local-name {
    font-weight: 600;
    color: var(--gray-800);
}

.mapping-local-email {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.mapping-arrow {
    color: var(--gray-400);
    flex-shrink: 0;
}

.mapping-xero {
    flex: 1;
    min-width: 0;
}

.mapping-select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.875rem;
    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;
    transition: all 0.2s;
}

.mapping-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.mapping-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.mapping-status.linked {
    color: var(--success);
}

.mapping-status.unlinked {
    color: var(--gray-400);
}

/* Sync History */
.sync-history-list {
    max-height: 300px;
    overflow-y: auto;
}

.sync-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}

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

.sync-status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sync-status-badge.success {
    background: var(--success-light);
    color: var(--success);
}

.sync-status-badge.error {
    background: var(--danger-light);
    color: var(--danger);
}

/* Xero Sync Button on Labor Tab */
.xero-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #13B5EA;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.xero-sync-btn:hover {
    background: #0ea5e9;
}

.xero-sync-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
}

.xero-sync-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .settings-section {
        padding: 1rem;
    }
    
    .settings-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .xero-connected {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .mapping-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .mapping-arrow {
        transform: rotate(90deg);
        align-self: center;
    }
    
    .mapping-xero {
        width: 100%;
    }
}

/* --- 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;
}

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

/* 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(248, 81, 73, 0.4);
}

[data-theme="dark"] .form-select.danger:focus {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 81, 73, 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);
}

/* 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;
}

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

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 16px;
    max-width: 800px;
    margin: 20px auto;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-800);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--gray-500);
    padding: 4px;
    line-height: 1;
}

.modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.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: 2000;
    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;
    }
    
    .modal {
        padding: 0;
    }
    
    .modal-content {
        margin: 0;
        max-height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }

    .modal-body {
        max-height: calc(100vh - 140px);
    }
    
    .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 {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.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) {
    .new-order-container {
        padding: 0;
        max-width: none;
    }
    
    .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 auto auto;
    gap: 8px;
    align-items: center;
}

.item-name {
    grid-column: 1 / 2;
}

.item-qty {
    width: 70px;
}

.btn-remove-item {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-light);
    color: #dc3545;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-remove-item:hover {
    background: #fecaca; /* danger-light hover */
    transform: scale(1.05);
}

.btn-add-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: white;
    border: 1.5px dashed var(--border-color);
    border-radius: 6px;
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-item:hover {
    background: var(--bg-light);
    border-color: var(--primary-blue);
}

.btn-paste-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #e8f0fe;
    border: 1.5px solid var(--primary-blue);
    border-radius: 6px;
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

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

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

.btn-paste-items.loading {
    position: relative;
    color: transparent;
}

.btn-paste-items.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-blue);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn-paste-items.loading:hover::after {
    border-color: white;
    border-top-color: transparent;
}

/* 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;
}

/* --- Order Action Buttons — pill-shaped, refined --- */
.order-btn-delete {
    background: transparent;
    color: var(--gray-400);
    border: 1px solid transparent;
}

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

.order-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-dark);
    border: 1px solid transparent;
}

.order-btn-secondary:hover {
    background: var(--gray-200);
}

.order-btn-primary {
    background: var(--primary-blue);
    color: white;
    border: 1px solid transparent;
}

.order-btn-primary:hover {
    background: var(--primary-blue-hover);
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);
}

/* --- Dark mode: order card overrides --- */
[data-theme="dark"] .order-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

[data-theme="dark"] .order-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[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);
}

[data-theme="dark"] .order-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .order-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .order-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(88, 166, 255, 0.15);
}

/* --- 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(56, 139, 253, 0.15);
    color: #58a6ff;
}

/* --- 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;
    all: initial;
    display: block;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-dark);
    line-height: 1.5;
}

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

/* 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) {
    /* Reduce side margins to 16px for more horizontal space */
    .page-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 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 on mobile: description takes remainder, qty and delete side-by-side (same width) */
    .item-row {
        grid-template-columns: 1fr 70px 70px;
        gap: 8px;
    }
    
    .item-name {
        width: 100%;
    }
    
    .item-qty {
        width: 70px;
    }
    
    .btn-remove-item {
        width: 70px;
        height: 48px;  /* Match input height */
    }
    
    .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%;
    }
    
    /* Modal adjustments for mobile */
    .modal-content {
        margin: 0;
        max-height: 100vh;
        max-width: 100vw !important;
        width: 100vw;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid var(--border-color);
        z-index: 10;
    }

    .modal-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        border-bottom: 1px solid var(--border-color);
    }

    /* Reduce padding in modal body on mobile */
    .modal-body {
        padding: 16px !important;
    }
    
    /* 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;
    }
    
    .modal-footer {
        padding: 12px 16px !important;
        gap: 8px;
    }
}

/* --- 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: #16161a;
    border-color: #2a2a32;
    color: #e0e0e8;
}

[data-theme="dark"] .gallery-filter-toggle:hover,
[data-theme="dark"] .gallery-filter-toggle.active {
    border-color: #388bfd;
    color: #58a6ff;
    background: rgba(56, 139, 253, 0.08);
}

[data-theme="dark"] .gallery-filter-panel {
    background: #16161a;
    border-color: #2a2a32;
    box-shadow: 0 1px 3px rgba(1, 4, 9, 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, .loading {
    padding: 40px;
    text-align: center;
    color: var(--gray-500);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    overflow: auto;
}

.modal-content {
    background: white;
    margin: 50px auto;
    max-width: 700px;
    border-radius: 12px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow: auto;
}

.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(30, 60, 114, 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(30, 60, 114, 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(30, 60, 114, 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 Responsive Styling */
#finishModal > div {
    background: white;
    margin: 0;
    max-width: 100%;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    height: 100%;
    overflow-y: auto;
}

/* Desktop: centered modal with rounded corners */
@media (min-width: 769px) {
    #finishModal > div {
        margin: 50px auto;
        max-width: 600px;
        border-radius: 12px;
        height: auto;
        max-height: calc(100vh - 100px);
    }
}

/* --- 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: 8px;
    padding: 32px 24px;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.2s;
}

.upload-zone:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.upload-zone.dragging {
    border-color: #3b82f6;
    background: #dbeafe;
}

.upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: var(--gray-400);
}

.upload-text {
    font-size: 16px;
    color: var(--gray-700);
    margin: 0 0 8px 0;
}

.upload-hint {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

.upload-limit {
    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: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all 0.2s ease;
}

.bulk-actions-dropdown.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.bulk-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--gray-700);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.15s;
}

.bulk-action-item:first-child {
    border-radius: 8px 8px 0 0;
}

.bulk-action-item:last-child {
    border-radius: 0 0 8px 8px;
}

.bulk-action-item:hover {
    background: var(--gray-100);
}

.bulk-action-item svg {
    width: 18px;
    height: 18px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.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: 12px 12px 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: #16161a;
    color: #e0e0e8;
    border-color: #3a3a44;
}
[data-theme="dark"] .category-edit-input:focus {
    border-color: #58a6ff;
    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));
}

/* 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: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: all 0.2s;
}

.drawing-card .menu-trigger:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.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(--gray-100);
    color: var(--gray-700);
}

.drawing-card:not(:has(.category-badge)) .menu-trigger svg {
    filter: none;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 160px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all 0.2s ease;
}

.dropdown-menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--gray-700);
    font-size: 14px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.15s;
}

.menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.menu-item:hover {
    background: var(--gray-100);
}

.menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
}

.menu-item.danger {
    color: var(--danger);
}

.menu-item.danger svg {
    color: var(--danger);
}

.menu-item.danger:hover {
    background: var(--danger-light);
}

.menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

/* 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) - override inline styles */
    .signature-modal-content {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .signature-modal-header {
        flex-shrink: 0;
    }

    .signature-modal-footer {
        flex-shrink: 0;
        margin-top: auto;
    }

    /* Paste modal (materials page) - override inline styles */
    .paste-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Request Hours button (inline on employee rows) */