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

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

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

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

:root {
    /* Primary Brand Colors */
    --primary-blue: #1e3c72;
    --primary-blue-hover: #162d54;
    --brand: var(--primary-blue);
    --brand-light: #2a5298;
    --brand-subtle: #eef2f9;
    --brand-glow: rgba(30, 60, 114, 0.08);

    /* Semantic Colors */
    --success: #059669;
    --success-light: #d1fae5;
    --success-glow: rgba(5, 150, 105, 0.08);
    --warning: #d97706;
    --warning-light: #fef3c7;
    --danger: #dc2626;
    --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-700);
    --border-color: var(--gray-200);
    --bg-light: #f8f9fb;
    --bg-page: #fafbfc;
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

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

/* ==================== DARK THEME VARIABLES ==================== */
/* Color System: GitHub Dark Default (https://primer.style/primitives) */
[data-theme="dark"] {
    /* Primary Brand — GitHub accent-fg */
    --primary-blue: #58a6ff;
    --primary-blue-hover: #79c0ff;
    --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 — GitHub Dark equivalents */
    --success: #3fb950;
    --success-light: rgba(63, 185, 80, 0.15);
    --success-glow: rgba(63, 185, 80, 0.1);
    --warning: #d29922;
    --warning-light: rgba(187, 128, 9, 0.15);
    --danger: #f85149;
    --danger-light: rgba(248, 81, 73, 0.15);

    /* Gray Scale — GitHub Dark Default surfaces & text */
    --gray-50: #0d1117;     /* canvas-default (page bg, input bg) */
    --gray-100: #161b22;    /* canvas-subtle (surface, cards) */
    --gray-200: #30363d;    /* border-default */
    --gray-300: #484f58;    /* border-emphasis */
    --gray-400: #6e7681;    /* fg-subtle */
    --gray-500: #8b949e;    /* fg-muted */
    --gray-600: #c9d1d9;    /* fg-secondary (inverted scale) */
    --gray-700: #e6edf3;    /* fg-default */
    --gray-800: #e6edf3;    /* fg-default */
    --gray-900: #f0f6fc;    /* fg-on-emphasis */

    /* Semantic Aliases */
    --text-gray: #8b949e;
    --text-dark: #e6edf3;
    --border-color: #30363d;
    --bg-light: #161b22;
    --bg-page: #0d1117;
    --bg-primary: #161b22;
    --bg-secondary: #21262d;

    /* Shadows — deeper for dark mode */
    --shadow-sm: 0 1px 3px rgba(1, 4, 9, 0.3), 0 1px 2px rgba(1, 4, 9, 0.2);
    --shadow-md: 0 4px 12px rgba(1, 4, 9, 0.4);
    --shadow-lg: 0 8px 24px rgba(1, 4, 9, 0.45);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

/* ==================== TABS ==================== */
.tabs-container {
    border-bottom: 2px solid var(--border-color);
    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;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}

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

.tab.active {
    color: var(--primary-blue);
    border-bottom: 3px 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: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    color: var(--text-dark);
    min-height: 48px;
    box-sizing: border-box;
    transition: all 0.2s;
}

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

.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-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.machinery-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

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

/* Color Bar & Inner Container */
.monday-card-inner {
    display: flex;
}

.monday-color-bar {
    width: 6px;
    flex-shrink: 0;
}

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

/* Card Content */
.monday-content {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
}

/* Image Section */
.card-image-section {
    flex-shrink: 0;
}

.card-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.card-image:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.card-image-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

/* Main Info Section */
.card-main-info {
    flex: 1;
    min-width: 0;
}

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

.card-title-group {
    flex: 1;
}

.card-type {
    font-size: 0.75rem;
    color: var(--text-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.card-number {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

/* Status Pills */
.card-status-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-end;
}

.monday-pill {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

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

/* Info Grid */
.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.688rem;
    color: var(--text-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.card-info-value.highlight-green {
    color: #00c875;
}

.card-info-value.highlight-red {
    color: #e44258;
}

/* Action Buttons */
.card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-btn {
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    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.75rem;
    border-radius: 6px;
    font-size: 0.813rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    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) {
    .monday-content {
        flex-direction: column;
    }

    .card-info-grid {
        grid-template-columns: 1fr;
    }

    .card-actions {
        justify-content: stretch;
    }

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

/* ==================== 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.6);
    backdrop-filter: blur(2px);
    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(--primary-blue);
    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: 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;
}

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

.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: 4px;
    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: 8px;
    font-size: 0.938rem;
    font-family: inherit;
    background: white;
    transition: all 0.2s;
    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 3px rgba(30, 58, 95, 0.08);
}

.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: 8px;
    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.2s;
    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: 8px;
    background: white;
    color: var(--text-dark);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    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: 8px;
    background: var(--primary-blue);
    color: white;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    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 12px rgba(30, 58, 95, 0.25);
}

.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,
#analysisList {
    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: 8px;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    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 12px rgba(30, 60, 114, 0.25);
}

.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: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: var(--bg-light);
}

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

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

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

#uploadProgress > div:first-child {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

#progressText {
    color: var(--text-dark);
    font-weight: 500;
}

#progressPercentage {
    color: var(--text-gray);
}

#uploadProgress > div:nth-child(2) {
    background: var(--border-color);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

#progressBar {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    height: 100%;
    transition: width 0.3s;
}

/* Sheet/Analysis Items */
.sheet-item,
.analysis-item {
    background: white;
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    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);
    cursor: pointer;
}

.sheet-item:hover,
.analysis-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(--primary-blue);
    margin-bottom: 0.25rem;
}

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

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

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

/* Sheet Action Buttons */
.sheet-actions button,
button[onclick*="viewSheet"],
button[onclick*="downloadSheet"],
button[onclick*="deleteSheet"],
button[onclick*="viewAnalysis"] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: white;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.sheet-actions button:hover,
button[onclick*="viewSheet"]:hover,
button[onclick*="downloadSheet"]:hover,
button[onclick*="viewAnalysis"]:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: var(--gray-50);
}

button[onclick*="deleteSheet"] {
    color: #ef4444;
    border-color: #fecaca;
}

button[onclick*="deleteSheet"]:hover {
    background: var(--danger-light);
    border-color: #ef4444;
}

/* Pipe Cards */
.pipe-card {
    background: white;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    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);
    cursor: pointer;
}

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

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

.pipe-mark {
    font-weight: 600;
    color: var(--primary-blue);
    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 */

/* Analysis Specific */
.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.analysis-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-blue);
}

.analysis-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

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

.analysis-status.warning {
    background: #fed7aa;
    color: #9a3412;
}

.analysis-status.error {
    background: var(--danger-light);
    color: #991b1b;
}

.issue-item {
    padding: 1rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.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: 8px;
    overflow: hidden;
    margin-top: 1rem;
}

table thead {
    background: var(--bg-light);
}

table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

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

table tbody tr:hover {
    background: var(--bg-light);
}

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;
    }
    
    .analysis-header {
        flex-direction: column;
        gap: 1rem;
    }
}

/* 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: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 16px;
    align-items: start;
    transition: all 0.2s;
}

.audit-card:hover {
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 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: white;
    border-bottom: 2px solid var(--border-color);
}

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

.header-content-wrapper {
    display: flex;
    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: 0.875rem;
    text-decoration: none;
    transition: opacity 0.2s;
    cursor: pointer;
}

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

.header-logo-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-logo-wrapper.has-png-logo {
    background: white;
    padding: 4px;
}

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

.header-logo-svg {
    width: 100%;
    height: 100%;
}

/* ==================== COMPANY NAME ==================== */
.header-company-name {
    color: var(--primary-blue);
    font-size: 1rem;
    font-weight: 600;
    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(--primary-blue);
    padding: 0 1.25rem;
    border-radius: 8px;
    font-size: 0.938rem;
    font-weight: 500;
    max-width: 240px;
    min-width: 160px;
    height: 48px;
}

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

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

.header-theme-btn:hover {
    background: var(--bg-light);
    color: #f59e0b;
}

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

.theme-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.header-theme-btn:hover .theme-icon {
    transform: rotate(15deg);
}

/* Show sun icon by default (light mode), hide moon */
.theme-icon-dark {
    display: none;
}

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

/* In dark mode, show moon icon, hide sun */
[data-theme="dark"] .theme-icon-dark {
    display: block;
}

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

/* ==================== LOGOUT BUTTON ==================== */
.header-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-gray);
    padding: 0 1rem;
    border-radius: 8px;
    font-size: 0.938rem;
    font-weight: 500;
    line-height: 1;
    height: 48px;
}

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

.logout-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.logout-text {
    display: none;
    line-height: 1;
}

/* ==================== BREADCRUMBS ==================== */
.header-breadcrumb {
    padding: 0.75rem 1.5rem; /* EXACT padding from original */
    border-top: 1px solid var(--border-color);
    background: #edf0f5;
}

.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(--primary-blue);
    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(--primary-blue);
    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;
    }
    
    .logout-icon {
        width: 24px;
        height: 24px;
    }
    
    .header-logout-btn {
        padding: 0; /* Remove padding on mobile so icon fills space */
    }
    
    .project-selector-btn {
        min-width: 120px;
        max-width: 180px;
    }
    
    /* Ensure breadcrumb aligns with logo on mobile */
    .header-content-wrapper {
        padding: 1rem 1rem; /* Reduce padding on mobile */
    }
    
    .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;
    }
    
    .project-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .project-list-view,
    .project-create-view {
        height: 100vh !important;
        max-height: 100vh !important;
    }
    
    .project-modal-body {
        max-height: calc(100vh - 280px) !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):     #0d1117
 * Surface (cards):      #161b22
 * Hover:                #1c2128
 * Active/pressed:       #21262d
 * Border:               #30363d
 * Border muted:         #21262d
 * Text primary:         #e6edf3
 * Text secondary:       #c9d1d9
 * Text muted:           #8b949e
 * Text subtle:          #6e7681
 * Accent:               #58a6ff
 * Success:              #3fb950
 * Warning:              #d29922
 * Danger:               #f85149
 *
 * Dark-mode SVG arrow for selects:
 *   stroke=%238b949e  (URL-encoded #8b949e)
 */

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

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

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

/* ---- Header ---- */
[data-theme="dark"] .app-header {
    background: #0d1117;
    border-bottom-color: #30363d;
}

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

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

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

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

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

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

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

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

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

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

[data-theme="dark"] .header-breadcrumb {
    background: #0d1117;
    border-top-color: #30363d;
}

/* ---- 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: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}

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

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

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

[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: #0d1117 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='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: #e6edf3;
    border-color: #30363d;
}

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

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

[data-theme="dark"] select option {
    background: #161b22;
    color: #e6edf3;
}

/* Drawings filter dark mode */
[data-theme="dark"] .drawings-filter {
    background: #161b22;
    border-bottom-color: #30363d;
}

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

[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: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}

[data-theme="dark"] .action-modal-body select {
    background: #0d1117 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='%238b949e' 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: #c9d1d9;
}

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

/* Preview form elements */
[data-theme="dark"] .preview-form {
    background: #0d1117;
    --preview-text-primary: #e6edf3;
    --preview-text-secondary: #8b949e;
    --preview-background: #0d1117;
}

[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: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

/* ---- Cards (Surface) ---- */
[data-theme="dark"] .machinery-card,
[data-theme="dark"] .sheet-item,
[data-theme="dark"] .analysis-item,
[data-theme="dark"] .pipe-card,
[data-theme="dark"] .file-list-item,
[data-theme="dark"] .audit-card,
[data-theme="dark"] .selection-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,
[data-theme="dark"] .landing-link {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 1px 3px rgba(1, 4, 9, 0.3);
}

[data-theme="dark"] .machinery-card:hover,
[data-theme="dark"] .sheet-item:hover,
[data-theme="dark"] .analysis-item:hover,
[data-theme="dark"] .pipe-card:hover,
[data-theme="dark"] .file-list-item:hover,
[data-theme="dark"] .audit-card:hover,
[data-theme="dark"] .selection-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"] .landing-link: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: #1c2128;
    border-color: #484f58;
    box-shadow: 0 4px 16px rgba(1, 4, 9, 0.4);
}

/* ---- Containers / Sections (Surface) ---- */
[data-theme="dark"] .panel {
    background: #161b22;
    box-shadow: 0 1px 3px rgba(1, 4, 9, 0.3);
}

[data-theme="dark"] .panel-header {
    background: #161b22;
    border-bottom-color: #30363d;
    color: #e6edf3;
}

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

[data-theme="dark"] .items-section {
    border-color: #30363d;
    background: #0d1117;
}

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

[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"] .generate-emails-container,
[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: #161b22;
    color: #e6edf3;
}

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

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

/* ---- 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: #161b22;
    border: 1px solid #30363d;
    overflow: hidden;
}

[data-theme="dark"] .project-modal-content {
    background: #161b22;
    border: 1px solid #30363d;
    overflow: hidden;
}

[data-theme="dark"] .project-list-view,
[data-theme="dark"] .project-create-view {
    background: #161b22;
    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: #161b22;
    border-color: #30363d;
}

/* Project Modal */
[data-theme="dark"] .project-modal-search {
    background: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}

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

[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: #e6edf3;
    border-color: #30363d;
}

[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: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}

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

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

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

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

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

/* Replacement modal dark theme */
[data-theme="dark"] .order-replacement-btn {
    background: #161b22;
    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: #0d1117;
    border: 1px solid #30363d;
    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: #30363d;
}

[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: #161b22;
    color: #8b949e;
}

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

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

[data-theme="dark"] .replacement-comment {
    background: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}

[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: #3fb950;
    color: #3fb950;
}

[data-theme="dark"] .replacement-compare-table th {
    background: #161b22;
    color: #e6edf3;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .replacement-compare-table td {
    color: #8b949e;
    border-bottom-color: #21262d;
}

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

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

[data-theme="dark"] .replacement-spinner {
    border-color: #30363d;
    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: #161b22;
    border-color: #30363d;
    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: #e6edf3;
    border-bottom-color: #21262d;
}

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

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

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

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

/* ---- 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: #161b22;
    color: #e6edf3;
    border-color: #30363d;
}

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

[data-theme="dark"] .btn-delete {
    background: transparent;
    color: #f85149;
    border-color: #30363d;
}

[data-theme="dark"] .btn-delete:hover {
    border-color: #f85149;
    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: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

[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: #161b22;
    border-color: #f85149;
    color: #f85149;
}

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

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

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

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

/* Photo preview actions */
[data-theme="dark"] .photo-preview-actions button {
    background: #161b22;
    color: #e6edf3;
    border-color: #30363d;
}

/* Drawing chips */
[data-theme="dark"] .drawing-chip {
    background: #161b22;
    color: #e6edf3;
    border-color: #30363d;
}

[data-theme="dark"] .drawing-chip-category {
    background: rgba(163, 113, 247, 0.1);
    color: #a371f7;
}

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

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

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

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

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

/* ---- Upload Area ---- */
[data-theme="dark"] .upload-area {
    background: #161b22;
    border-color: #30363d;
    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: #161b22;
}

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

[data-theme="dark"] table th {
    border-bottom-color: #30363d;
    color: #e6edf3;
}

[data-theme="dark"] table td {
    border-bottom-color: #21262d;
    color: #e6edf3;
}

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

[data-theme="dark"] .workers-table th.sortable:hover {
    background: #1c2128;
}

[data-theme="dark"] .workers-table td {
    border-bottom-color: #21262d;
}

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

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

[data-theme="dark"] .preview-btn {
    background: #161b22;
    color: #e6edf3;
    border-color: #30363d;
}

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

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

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

/* ---- Landing Page ---- */
[data-theme="dark"] .landing-link:hover {
    background: #1c2128;
    border-color: #58a6ff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Toggle Pills ---- */
[data-theme="dark"] .toggle-pill {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

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

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

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

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

[data-theme="dark"] .order-items {
    background: #0d1117;
    border-color: #30363d;
}

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

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

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

/* ---- Alerts / Info Blocks ---- */
[data-theme="dark"] .alert-success {
    background: rgba(63, 185, 80, 0.1);
    color: #3fb950;
    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: #3fb950;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- 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, #161b22, #1c2128);
}

/* ---- Week Nav ---- */
[data-theme="dark"] .week-nav-btn {
    background: #161b22;
    color: #e6edf3;
    border-color: #30363d;
}

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

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

[data-theme="dark"] .login-box {
    background: #161b22;
    box-shadow: 0 8px 32px rgba(1, 4, 9, 0.5);
    border: 1px solid #30363d;
}

[data-theme="dark"] .login-mode-toggle {
    background: #0d1117;
}

[data-theme="dark"] .login-mode-btn.active {
    background: #1c2128;
}

/* ---- Rich Text Editors ---- */
[data-theme="dark"] .ql-container,
[data-theme="dark"] .ql-editor {
    background: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .ql-toolbar {
    background: #161b22 !important;
    border-color: #30363d !important;
}

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

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

[data-theme="dark"] .ql-toolbar .ql-picker-label {
    color: #8b949e !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: #30363d !important;
}

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

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

[data-theme="dark"] .legacy-page .tabs {
    background: #161b22;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .legacy-page .tab {
    color: #8b949e;
    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: #c9d1d9;
}

[data-theme="dark"] .legacy-page .breadcrumb-container {
    background: #161b22;
    border-bottom-color: #30363d;
}

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

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

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

[data-theme="dark"] .legacy-page .header {
    background: linear-gradient(135deg, #161b22 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: #30363d;
}

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

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

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

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

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

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

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

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

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

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

/* Firefox scrollbar */
[data-theme="dark"] * {
    scrollbar-color: #30363d #0d1117;
}

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

[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(187, 128, 9, 0.15);
}

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

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

/* ---- Drawing chip (re-asserted) ---- */
[data-theme="dark"] .drawing-chip {
    background: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

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

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

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

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

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

[data-theme="dark"] .tab-count {
    background: #21262d;
    color: #8b949e;
}

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

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

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

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

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

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

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

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

/* Date icon & employee avatar */
[data-theme="dark"] .date-icon {
    background: linear-gradient(135deg, #484f58 0%, #30363d 100%);
    color: #e6edf3;
}

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

[data-theme="dark"] .employee-avatar {
    background: linear-gradient(135deg, #484f58 0%, #30363d 100%);
    color: #e6edf3;
}

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

[data-theme="dark"] .payroll-row.payroll-total {
    background: #161b22;
    border-top-color: #30363d;
}

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

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

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

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

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

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

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

[data-theme="dark"] .daily-breakdown .day-header td {
    background: #161b22;
    border-bottom-color: #30363d;
}

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

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

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

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

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

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

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

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

/* Share modal */
[data-theme="dark"] .share-url-input {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

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

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

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

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

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

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

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

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

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

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

/* ---- Timesheets: Xero & Settings ---- */
[data-theme="dark"] .xero-connection-box {
    background: #161b22;
    border-color: #30363d;
}

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

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

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

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

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

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

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

/* ---- 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: #c9d1d9 !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: #3fb950;
}

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

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

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

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

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

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

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

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

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

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

/* ---- General: override any remaining light box-shadows on dark surfaces ---- */
[data-theme="dark"] .drawing-card {
    box-shadow: 0 1px 3px rgba(1, 4, 9, 0.3);
}

[data-theme="dark"] .drawing-card:hover {
    box-shadow: 0 4px 12px rgba(1, 4, 9, 0.4);
}

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

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

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

/* Prestarts: signature name input & labels */
[data-theme="dark"] .name-input {
    background: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !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: #c9d1d9 !important;
}

/* Prestarts: SWMS add form */
[data-theme="dark"] #swmsAddForm {
    background: #161b22 !important;
    border-color: #30363d !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: #0d1117 !important;
    border-color: #30363d !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: #161b22 !important;
    color: #e6edf3 !important;
}

/* Cutting sheets: import summary */
[data-theme="dark"] .import-summary {
    background: #161b22 !important;
    color: #8b949e !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: #161b22 !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: #0d1117 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .desktop-items-table table {
    border-color: #30363d;
}

[data-theme="dark"] .desktop-items-table td {
    border-color: #21262d;
}

[data-theme="dark"] .mobile-items-list {
    background: #0d1117 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .mobile-item {
    border-bottom-color: #21262d;
}

[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: #161b22 !important;
    border: 1px solid #30363d;
}

[data-theme="dark"] .paste-modal-cancel {
    background: #21262d !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .paste-modal-content textarea {
    background: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !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: #161b22 !important;
    border: 1px solid #30363d;
}

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

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

[data-theme="dark"] .signature-canvas-wrapper {
    border-color: #30363d !important;
    background: #0d1117 !important;
}

[data-theme="dark"] .signature-image {
    background: #161b22 !important;
    border-color: #30363d !important;
}

/* ---- Pressure tests: finish modal header ---- */
[data-theme="dark"] .finish-modal-header {
    background: #161b22 !important;
    border-bottom-color: #30363d !important;
}

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

/* ---- Cutting sheets: detail modal ---- */
[data-theme="dark"] .cutting-sheet-modal-content {
    background: #161b22 !important;
    border: 1px solid #30363d;
}

/* ---- Cutting sheets: analysis modal ---- */
[data-theme="dark"] .analysis-modal-content {
    background: #161b22 !important;
    border: 1px solid #30363d;
}

[data-theme="dark"] .analysis-modal-header {
    border-bottom-color: #30363d !important;
}

[data-theme="dark"] .analysis-issue-critical {
    background: rgba(248, 81, 73, 0.1) !important;
    border-left-color: #f85149 !important;
}

[data-theme="dark"] .analysis-issue-critical div {
    color: #ffa198 !important;
}

[data-theme="dark"] .analysis-issue-high {
    background: rgba(210, 153, 34, 0.1) !important;
    border-left-color: #d29922 !important;
}

[data-theme="dark"] .analysis-issue-high div {
    color: #e3b341 !important;
}

[data-theme="dark"] .analysis-issue-medium {
    background: rgba(139, 148, 158, 0.1) !important;
    border-left-color: #8b949e !important;
}

[data-theme="dark"] .analysis-issue-medium div {
    color: #c9d1d9 !important;
}

/* ---- Stores: inline white buttons ---- */
[data-theme="dark"] .btn.btn-outline[style*="background: white"] {
    background: #21262d !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

/* ---- Materials: clear missing items button ---- */
[data-theme="dark"] .btn.btn-outline.btn-sm[style*="background: white"] {
    background: transparent !important;
    color: #f85149 !important;
    border-color: #f85149 !important;
}

/* ---- Dividers ---- */
[data-theme="dark"] .project-list-divider {
    background: #30363d;
}

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

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

    .project-list-divider::after {
        background: #484f58;
    }
}


/* ================================================================
   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: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.panel-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 2px solid #e9ecef;
    font-weight: 700;
    font-size: 16px;
    color: #495057;
}

.panel-body {
    padding: 20px;
}

/* Items section */
.items-section {
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    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(--primary-blue);
    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(--primary-blue);
}

/* Auto order info */
.auto-order-info {
    background: #e3f2fd;
    border: 2px solid var(--primary-blue);
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.auto-order-message {
    font-weight: 600;
    margin-bottom: 4px;
}

.countdown-timer {
    font-size: 12px;
    color: #2a5298;
    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: #2a5298;
    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-100);
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 40px;
    max-width: 400px;
    width: 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;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-family: inherit;
    height: 48px;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
    -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 3px var(--brand-glow);
}

.login-button {
    width: 100%;
    padding: 12px 20px;
    background: var(--primary-blue);
    color: white;
    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;
    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 4px 12px rgba(30, 60, 114, 0.3);
}

.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: 8px;
    margin-bottom: 20px;
    background: var(--gray-100);
    padding: 4px;
    border-radius: 8px;
}

.login-mode-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--gray-500);
    transition: all var(--transition);
}

.login-mode-btn.active {
    background: white;
    color: var(--primary-blue);
    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;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
}

.error-message {
    background: var(--danger-light);
    border: 1px solid #ef4444;
    color: #991b1b;
    padding: 12px;
    border-radius: 6px;
    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: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.landing-container {
    width: 100%;
}

.landing-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 1rem;
}

/* Hide content until access check completes */
.landing-links,
.selection-cards {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.landing-links.loaded,
.selection-cards.loaded {
    opacity: 1;
}

.landing-links {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.landing-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: white;
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    border: 1.5px solid var(--gray-200);
    transition: all 0.2s;
}

.landing-link:hover {
    border-color: var(--primary-blue);
    background: #fafbfc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.selection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.selection-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-left: 4px solid var(--gray-200);
}

.selection-card[data-color="blue"] {
    border-left-color: #3b82f6;
}

.selection-card[data-color="purple"] {
    border-left-color: #8b5cf6;
}

.selection-card[data-color="orange"] {
    border-left-color: #f59e0b;
}

.selection-card[data-color="red"] {
    border-left-color: #ef4444;
}

.selection-card[data-color="green"] {
    border-left-color: #10b981;
}

.selection-card[data-color="teal"] {
    border-left-color: #14b8a6;
}

.selection-card[data-color="indigo"] {
    border-left-color: #6366f1;
}

.selection-card[data-color="pink"] {
    border-left-color: #ec4899;
}

.selection-card[data-color="cyan"] {
    border-left-color: #06b6d4;
}

.selection-card[data-color="amber"] {
    border-left-color: #f59e0b;
}

.selection-card[data-color="violet"] {
    border-left-color: #8b5cf6;
}

.selection-card[data-color="lime"] {
    border-left-color: #22c55e;
}

.selection-card[data-color="rose"] {
    border-left-color: #f43f5e;
}

.selection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-badge {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-text {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.card-description {
    font-size: 0.875rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.card-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 0.875rem;
}

.arrow {
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.selection-card:hover .arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .landing-page {
        padding: 1rem;
    }
    
    .landing-title {
        font-size: 1.5rem;
    }
    
    .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: #3b82f6;
    height: 100%;
    width: 0%;
    transition: width 0.3s;
}

/* Results styling */
.result-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.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: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.pipe-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

/* Badge */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.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: 640px) {
    .issue-modal-overlay {
        padding: 0;
    }
    
    .issue-modal {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .issue-modal-header {
        border-radius: 0;
    }
}

.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: 640px) {
    .replacement-modal-overlay {
        padding: 0;
    }

    .replacement-modal {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .replacement-modal-header {
        border-radius: 0;
    }
}

/* --- Prestarts --- */

/* Fix double borders between form sections */
.form-section {
    border-bottom: 1px solid var(--gray-200) !important;
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}

.form-section + .form-section {
    padding-top: 24px !important;
    border-top: none !important;
}

.form-section:last-child {
    border-bottom: none !important;
}

/* Quill Editor - White Background */
.ql-container {
    background: white !important;
}

.ql-editor {
    background: white !important;
}

.ql-toolbar {
    background: white !important;
}

/* Overflow Menu - Three Dots */
.action-menu-container {
    position: relative;
    flex-shrink: 0;
    width: 32px;
}

.action-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 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: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border: 2px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

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

/* 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 {
    font-size: 12px;
    font-weight: 600;
    color: var(--preview-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* 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: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
}

.form-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* 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, #8b5cf6 0%, #6d28d9 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: #8b5cf6;
    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: #8b5cf6;
    background: #f3e8ff;
    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 #f3f4f6;
}

.form-card-drawings svg {
    color: #8b5cf6;
}

.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: #8b5cf6;
}

.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%;
        max-height: 100vh;
        max-width: none;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

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

    .modal-footer {
        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: 8px;
    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;
}

.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: 8px;
    padding: 16px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

.action-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-300);
}

.action-card.closed {
    opacity: 0.7;
}

/* Overdue card border */
.action-card.overdue {
    border-left: 4px solid #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 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.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: 640px) {
    .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-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .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(--primary-blue);
    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(--primary-blue);
    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;
        max-height: 100vh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

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

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

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

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

.stock-item.weekend:hover {
    background: #fef3c7;
}

.stock-item.weekend.qty-changed {
    background: #fde68a;
}

/* 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.5rem;
    border-radius: 4px;
    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.375rem;
    border-radius: 4px;
    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: #6366f1;
    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: #0d1117;
    border-color: #30363d;
}

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

[data-theme="dark"] .employee-filter-select {
    background-color: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}

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

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

/* 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 */
.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 ==================== */
.settings-container {
    padding: 1rem;
}

.settings-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.settings-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

/* 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: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

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

.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(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: white;
}

.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: 800px;
    margin: 0 auto;
}

.settings-section {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.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: #f85149;
    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: space-between;
    align-items: flex-start;
    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;
    padding-top: 1rem;
    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: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.workers-table th {
    background: var(--gray-50);
    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(--gray-200);
}

.workers-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.workers-table th.sortable:hover {
    background: #f1f5f9;
    color: var(--gray-600);
}

.workers-table th.sortable.active {
    background: #e0e7ff;
    color: #4338ca;
}

.workers-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}

.workers-table tr:hover {
    background: var(--gray-50);
    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: #e0e7ff;
    color: #4338ca;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    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: #e0e7ff;
    color: #4338ca;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.linked-project-tag button {
    background: none;
    border: none;
    color: #4338ca;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
}

.linked-project-tag button:hover {
    opacity: 1;
}

.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 — use native browser calendar picker */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* 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 #f0f0f0;
    position: relative;
}

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

.mobile-item-missing {
    background: #fff4e6;
    margin: 0 -12px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 4px;
}

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

/* Generate Emails Button */
.generate-emails-container {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-page);
    padding: 16px 0;
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
    z-index: 10;
}

.generate-emails-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 12px 24px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.generate-emails-btn:hover {
    background: #005bb5;
    box-shadow: 0 4px 12px rgba(0, 115, 234, 0.3);
}

.generate-emails-btn svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .generate-emails-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        background: white;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        margin-top: 0;
    }
    
    .generate-emails-btn {
        max-width: none;
    }
    
    /* Add padding to list so content isn't hidden behind fixed button */
    #pendingList {
        padding-bottom: 80px;
    }
}

@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 - no padding, green bar is flush */
    .machinery-card {
        padding: 0 !important;
        margin-bottom: 12px;
        border-radius: 6px !important;
        overflow: hidden;
    }
    
    /* Content gets 16px padding (same as page margins) */
    .monday-content {
        padding: 16px !important;
    }
    
    /* Card inner should not have border radius to allow bar to flow */
    .monday-card-inner {
        border-radius: 0 !important;
    }
    
    /* Green bar flows into card corners */
    .monday-color-bar {
        border-radius: 6px 0 0 6px !important;
    }
    
    .card-info-grid {
        gap: 8px;
    }
    
    .card-info-item {
        padding: 8px 0;
    }
    
    /* Reduce special notes padding */
    .monday-content > div:last-child {
        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: 600;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.filter-card, .logs-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

.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: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.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: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.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: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
}

.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(--brand);
    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: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.zone-card:hover {
    box-shadow: var(--shadow-md);
    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: 8px;
    padding: 20px;
    margin-bottom: 16px;
    border: 2px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.test-card:hover {
    border-color: var(--primary-blue);
}

.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;
    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: 120px;
    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: 600px;
    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: 768px) {
    #finishModal > div {
        margin: 50px auto;
        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: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
}

.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: 6px 6px 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: #161b22;
    color: #e6edf3;
    border-color: #484f58;
}
[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: 8px;
    padding: 16px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
}

.drawing-card:hover {
    box-shadow: 0 4px 6px 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;
    justify-content: space-between;
    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;
}

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

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