* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overscroll-behavior: contain;
}

/* =============================================================================
   THEME SYSTEM - CSS Custom Properties
   ============================================================================= */

:root {
    /* Default to terminal dark (existing theme) */
    --theme-bg: #0a0a0a;
    --theme-surface: #1a1a1a;
    --theme-surface-hover: #252525;
    --theme-text-primary: #e9edef;
    --theme-text-secondary: #8696a0;
    --theme-border: #333333;
    --theme-border-hover: #4a4a4a;
    --theme-primary: #25d366;
    --theme-primary-hover: #20ba5a;
    --theme-signal: #25d366;
}

/* Admiral Dark Theme */
[data-theme="admiral"][data-variant="dark"] {
    --theme-bg: #0D1B2A;
    --theme-surface: #1B263B;
    --theme-surface-hover: #243349;
    --theme-text-primary: #FFFFFF;
    --theme-text-secondary: #B0C4DE;
    --theme-border: #415A77;
    --theme-border-hover: #5A7A9A;
    --theme-primary: #3A86FF;
    --theme-primary-hover: #2E7AE6;
    --theme-signal: #CBA135;
}

/* Admiral Light Theme */
[data-theme="admiral"][data-variant="light"] {
    --theme-bg: #FFFFFF;
    --theme-surface: #F5F7FA;
    --theme-surface-hover: #E8EBF0;
    --theme-text-primary: #1B263B;
    --theme-text-secondary: #415A77;
    --theme-border: #C4D0E0;
    --theme-border-hover: #9FB0C7;
    --theme-primary: #3A86FF;
    --theme-primary-hover: #2E7AE6;
    --theme-signal: #CBA135;
}

/* Terminal Dark Theme */
[data-theme="terminal"][data-variant="dark"] {
    --theme-bg: #0a0a0a;
    --theme-surface: #1a1a1a;
    --theme-surface-hover: #252525;
    --theme-text-primary: #e9edef;
    --theme-text-secondary: #8696a0;
    --theme-border: #333333;
    --theme-border-hover: #4a4a4a;
    --theme-primary: #25d366;
    --theme-primary-hover: #20ba5a;
    --theme-signal: #25d366;
}

/* Terminal Light Theme */
[data-theme="terminal"][data-variant="light"] {
    --theme-bg: #FFFFFF;
    --theme-surface: #F5F5F5;
    --theme-surface-hover: #E8E8E8;
    --theme-text-primary: #1a1a1a;
    --theme-text-secondary: #4a4a4a;
    --theme-border: #D0D0D0;
    --theme-border-hover: #B0B0B0;
    --theme-primary: #25d366;
    --theme-primary-hover: #20ba5a;
    --theme-signal: #25d366;
}

/* Forge Dark Theme */
[data-theme="forge"][data-variant="dark"] {
    --theme-bg: #1C1917;
    --theme-surface: #292524;
    --theme-surface-hover: #3D3835;
    --theme-text-primary: #FAFAF9;
    --theme-text-secondary: #A8A29E;
    --theme-border: #44403C;
    --theme-border-hover: #57534E;
    --theme-primary: #EA580C;
    --theme-primary-hover: #C2410C;
    --theme-signal: #B87333;
}

/* Forge Light Theme */
[data-theme="forge"][data-variant="light"] {
    --theme-bg: #FAFAF9;
    --theme-surface: #F5F5F4;
    --theme-surface-hover: #E7E5E4;
    --theme-text-primary: #1C1917;
    --theme-text-secondary: #57534E;
    --theme-border: #D6D3D1;
    --theme-border-hover: #A8A29E;
    --theme-primary: #EA580C;
    --theme-primary-hover: #C2410C;
    --theme-signal: #B87333;
}

/* Sterling Dark Theme */
[data-theme="sterling"][data-variant="dark"] {
    --theme-bg: #111827;
    --theme-surface: #1F2937;
    --theme-surface-hover: #374151;
    --theme-text-primary: #F9FAFB;
    --theme-text-secondary: #9CA3AF;
    --theme-border: #374151;
    --theme-border-hover: #4B5563;
    --theme-primary: #6366F1;
    --theme-primary-hover: #4F46E5;
    --theme-signal: #9CA3AF;
}

/* Sterling Light Theme */
[data-theme="sterling"][data-variant="light"] {
    --theme-bg: #FFFFFF;
    --theme-surface: #F3F4F6;
    --theme-surface-hover: #E5E7EB;
    --theme-text-primary: #111827;
    --theme-text-secondary: #6B7280;
    --theme-border: #D1D5DB;
    --theme-border-hover: #9CA3AF;
    --theme-primary: #6366F1;
    --theme-primary-hover: #4F46E5;
    --theme-signal: #9CA3AF;
}

/* Midnight Dark Theme */
[data-theme="midnight"][data-variant="dark"] {
    --theme-bg: #13111C;
    --theme-surface: #1E1B2E;
    --theme-surface-hover: #2D2844;
    --theme-text-primary: #FAFAFA;
    --theme-text-secondary: #A1A1AA;
    --theme-border: #3F3A5A;
    --theme-border-hover: #524D73;
    --theme-primary: #A855F7;
    --theme-primary-hover: #9333EA;
    --theme-signal: #A78BFA;
}

/* Midnight Light Theme */
[data-theme="midnight"][data-variant="light"] {
    --theme-bg: #FAFAFA;
    --theme-surface: #F4F4F5;
    --theme-surface-hover: #E4E4E7;
    --theme-text-primary: #18181B;
    --theme-text-secondary: #71717A;
    --theme-border: #D4D4D8;
    --theme-border-hover: #A1A1AA;
    --theme-primary: #A855F7;
    --theme-primary-hover: #9333EA;
    --theme-signal: #A78BFA;
}

/* =============================================================================
   THEME SWITCHER COMPONENT
   ============================================================================= */

.theme-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--theme-border, #333);
    border-radius: 6px;
    background: var(--theme-surface, #1a1a1a);
    color: var(--theme-text-secondary, #8696a0);
    cursor: pointer;
    transition: all 0.15s ease;
}

.theme-btn:hover {
    border-color: var(--theme-border-hover, #4a4a4a);
    background: var(--theme-surface-hover, #252525);
    color: var(--theme-text-primary, #e9edef);
}

.theme-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 36px;
    min-width: 160px;
    padding: 4px;
    border: 1px solid var(--theme-border, #333);
    border-radius: 8px;
    background: var(--theme-surface, #1a1a1a);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.theme-option {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--theme-text-primary, #e9edef);
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.theme-option:hover {
    background: var(--theme-surface-hover, #252525);
}

.theme-option.active {
    background: rgba(37, 211, 102, 0.15);
    border-left: 2px solid var(--theme-signal, #25d366);
}

.theme-label {
    font-weight: 500;
    font-size: 13px;
}

.theme-desc {
    font-size: 11px;
    color: var(--theme-text-secondary, #8696a0);
    margin-top: 2px;
}

body {
    background-color: var(--theme-bg, #0a0a0a);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
    color: var(--theme-text-primary, #e9edef);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    height: 100vh;
    overflow: hidden;
}

/* Login Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #1a1a1a;
    padding: 32px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-content h2 {
    color: #e9edef;
    margin-bottom: 24px;
    font-size: 22px;
}

#username-input,
#password-input {
    width: 100%;
    background: #2a2a2a;
    color: #e9edef;
    border: 2px solid #374045;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
}

#username-input:focus,
#password-input:focus {
    border-color: #25d366;
}

#login-btn {
    width: 100%;
    background: #25d366;
    color: #111;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

#login-btn:hover {
    background: #20ba5a;
}

#login-btn:active {
    transform: scale(0.98);
}

/* Chat App */
#chat-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#chat-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: 12px 16px;
    border-bottom: 1px solid #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.header-content h1 {
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
    margin: 0;
}

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

#clear-btn, #delete-chat-btn {
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #374045;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

#clear-btn:hover, #delete-chat-btn:hover {
    background: #374045;
    border-color: #4a5559;
}

#clear-btn:active, #delete-chat-btn:active {
    transform: scale(0.95);
}

#delete-chat-btn {
    background: #3d1f1f;
    color: #ff6b6b;
    border-color: #5a2a2a;
}

#delete-chat-btn:hover {
    background: #5a2a2a;
    border-color: #ff6b6b;
    color: #fff;
}

#online-status {
    font-size: 13px;
    color: #25d366;
    display: flex;
    align-items: center;
}

/* Job Tabs */
#job-tabs-container {
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

#job-tabs-container::-webkit-scrollbar {
    height: 8px;
}

#job-tabs-container::-webkit-scrollbar-track {
    background: #0a0a0a;
}

#job-tabs-container::-webkit-scrollbar-thumb {
    background: #4a5559;
    border-radius: 4px;
}

#job-tabs-container::-webkit-scrollbar-thumb:hover {
    background: #5a6569;
}

#job-tabs {
    display: flex;
    padding: 0 8px;
    gap: 4px;
    min-width: min-content;
}

.job-tab {
    flex-shrink: 0;
    background: transparent;
    color: #8696a0;
    border: none;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    font-family: inherit;
}

.job-tab:hover {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.05);
}

.job-tab.active {
    color: #25d366;
    border-bottom-color: #25d366;
}

#add-job-btn {
    flex-shrink: 0;
    background: transparent;
    color: #25d366;
    border: 2px solid #25d366;
    padding: 8px 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 6px;
    font-family: inherit;
    margin-right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#add-job-btn:hover {
    background: #25d366;
    color: #111;
    transform: scale(1.05);
}

#add-job-btn:active {
    transform: scale(0.95);
}

/* Subcategory Bar */
#subcategory-bar {
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

#subcategory-bar::-webkit-scrollbar {
    height: 4px;
}

#subcategory-bar::-webkit-scrollbar-track {
    background: #0a0a0a;
}

#subcategory-bar::-webkit-scrollbar-thumb {
    background: #374045;
    border-radius: 2px;
}

#subcategory-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    min-width: min-content;
}

.subcategory-tab {
    background: #1f1f1f;
    color: #8696a0;
    border: 1px solid #374045;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 4px;
    font-family: inherit;
}

.subcategory-tab:hover {
    color: #e9edef;
    border-color: #4a5559;
    background: #2a2a2a;
}

.subcategory-tab.active {
    background: #25d366;
    color: #111;
    border-color: #25d366;
}

#add-fo-btn {
    background: transparent;
    color: #ff9800;
    border: 2px dashed #ff9800;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 4px;
    font-family: inherit;
}

#add-fo-btn:hover {
    background: #ff9800;
    color: #111;
    border-style: solid;
}

#add-fo-btn:active {
    transform: scale(0.95);
}

/* Individual Chats Bar */
#individual-chats-bar {
    background: #0d0d0d;
    border-bottom: 1px solid #2a2a2a;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

#individual-chats-bar::-webkit-scrollbar {
    height: 4px;
}

#individual-chats-bar::-webkit-scrollbar-track {
    background: #0a0a0a;
}

#individual-chats-bar::-webkit-scrollbar-thumb {
    background: #374045;
    border-radius: 2px;
}

#individual-chats {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 6px 12px;
    min-width: min-content;
}

.individual-chat-tab {
    flex-shrink: 0;
    background: #1a1a1a;
    color: #8696a0;
    border: 1px solid #2a2a2a;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 3px;
    font-family: inherit;
}

.individual-chat-tab:hover {
    color: #e9edef;
    border-color: #374045;
    background: #242424;
}

.individual-chat-tab.active {
    background: #ff9800;
    color: #111;
    border-color: #ff9800;
}

#add-chat-btn {
    flex-shrink: 0;
    background: transparent;
    color: #00bcd4;
    border: 1px dashed #00bcd4;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 3px;
    font-family: inherit;
}

#add-chat-btn:hover {
    background: #00bcd4;
    color: #111;
    border-style: solid;
}

#add-chat-btn:active {
    transform: scale(0.95);
}

#messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
    padding-bottom: 90px;
}

.message {
    display: flex;
    margin-bottom: 8px;
    animation: slideIn 0.2s ease-out;
}

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

.message-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 8px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.message-received .message-bubble {
    background: #1f1f1f;
    margin-right: auto;
    border-top-left-radius: 2px;
}

.message-sent .message-bubble {
    background: #005c4b;
    margin-left: auto;
    border-top-right-radius: 2px;
}

.message-username {
    color: #25d366;
    font-size: 7px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: lowercase;
}

.message-content {
    color: #e9edef;
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.message-time {
    font-size: 11px;
    color: #8696a0;
    text-align: right;
    margin-top: 4px;
}

.system-message {
    text-align: center;
    margin: 12px auto;
    padding: 6px 12px;
    background: #1a1a1a;
    border-radius: 8px;
    font-size: 12px;
    color: #8696a0;
    max-width: fit-content;
}

/* Color highlighting for parts of speech */
.noun {
    color: #4fc3f7;
    font-weight: 500;
}

.verb {
    color: #ff6b9d;
    font-weight: 500;
}

.adjective {
    color: #ffd54f;
    font-weight: 500;
}

.preposition {
    color: #81c784;
    font-weight: 500;
}

#input-container {
    background: #1a1a1a;
    padding: 8px 12px;
    border-top: 1px solid #2a2a2a;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#message-input {
    flex: 1;
    background: #2a2a2a;
    color: #e9edef;
    border: none;
    border-radius: 24px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#message-input::placeholder {
    color: #667781;
}

#message-input:focus {
    background: #323739;
}

#send-btn {
    background: #25d366;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #111;
    flex-shrink: 0;
}

#send-btn:hover {
    background: #20ba5a;
    transform: scale(1.05);
}

#send-btn:active {
    transform: scale(0.95);
}

#send-btn svg {
    transform: translateX(1px);
}

/* Scrollbar styling */
#messages::-webkit-scrollbar {
    width: 6px;
}

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

#messages::-webkit-scrollbar-thumb {
    background: #374045;
    border-radius: 3px;
}

/* ==================== PROBLEM-SOLUTION-REFLEX SYSTEM ==================== */

/* Problems Bar */
#problems-bar {
    background: #0d0d0d;
    border-bottom: 2px solid #c62828;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

#problems-bar::-webkit-scrollbar {
    height: 4px;
}

#problems-bar::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#problems-bar::-webkit-scrollbar-thumb {
    background: #c62828;
    border-radius: 2px;
}

#problems-list {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: min-content;
}

.problem-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a0a0a;
    border: 2px solid #c62828;
    border-radius: 20px;
    padding: 6px 12px;
    color: #ff6b6b;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    cursor: help;
}

.problem-pill:hover {
    background: #2a1212;
    border-color: #ff4444;
    transform: translateY(-1px);
}

.problem-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.solve-btn {
    background: #2e7d32;
    color: #fff;
    border: none;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.solve-btn:hover {
    background: #43a047;
    transform: scale(1.1);
}

.problem-creator {
    color: #8696a0;
    font-size: 10px;
    font-style: italic;
}

/* + Problem Button */
#add-problem-btn {
    background: transparent;
    color: #ff6b6b;
    border: 2px dashed #c62828;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border-radius: 6px;
    margin-left: auto;
}

#add-problem-btn:hover {
    background: #2a1212;
    border-color: #ff4444;
    color: #ff8888;
    transform: scale(1.05);
}

/* Reflex Popup */
.reflex-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

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

.reflex-content {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    text-align: center;
    animation: bounceIn 0.5s ease-out;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3);
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.reflex-stars {
    font-size: 48px;
    display: inline-block;
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.reflex-title {
    font-size: 42px;
    font-weight: 900;
    color: #ffd700;
    margin: 20px 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    display: inline-block;
    margin: 0 20px;
}

.reflex-definition {
    font-size: 14px;
    color: #b3e5fc;
    font-style: italic;
    margin: 20px 0 30px 0;
    line-height: 1.6;
}

.reflex-details {
    text-align: left;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.reflex-problem,
.reflex-solution {
    margin: 10px 0;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.5;
}

.reflex-problem strong,
.reflex-solution strong {
    color: #ffd700;
}


#messages::-webkit-scrollbar-thumb:hover {
    background: #4a5559;
}

/* Main Navigation */
#main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a1a;
    padding: 0 16px;
    height: 50px;
    flex-shrink: 0;
    border-bottom: 1px solid #2a2a2a;
}

.nav-left {
    display: flex;
    gap: 16px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
    touch-action: pan-x;
}

.nav-left::-webkit-scrollbar {
    display: none;
}

.nav-btn {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    padding: 0 12px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-btn:hover {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.05);
}

.nav-btn.active {
    color: #25d366;
    border-bottom-color: #25d366;
}

.nav-right {
    display: flex;
    align-items: center;
}

/* Main Views */
.main-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Factory Orders View */
#factory-orders-view {
    padding: 20px;
    background: #0a0a0a;
}

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

.view-header h1 {
    font-size: 24px;
    color: #e9edef;
}

.action-btn {
    background: #25d366;
    color: #111;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}

.action-btn:hover {
    background: #20ba5a;
}

#fo-list-container {
    flex: 1;
    overflow-y: auto;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
}

#fo-table {
    width: 100%;
    border-collapse: collapse;
    color: #e9edef;
}

#fo-table th,
#fo-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #2a2a2a;
}

#fo-table th {
    background: #2a2a2a;
    color: #8696a0;
    font-weight: 600;
    font-size: 13px;
    position: sticky;
    top: 0;
}

#fo-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

#fo-table td {
    font-size: 14px;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.pending { background: #4a5559; color: #e9edef; }
.status-badge.active { background: #25d366; color: #111; }
.status-badge.hold { background: #c62828; color: #fff; }
.status-badge.complete { background: #2e7d32; color: #fff; }
.status-badge.shipped { background: #027eb5; color: #fff; }

.chat-link-btn {
    background: #2a2a2a;
    color: #25d366;
    border: 1px solid #25d366;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-link-btn:hover {
    background: #25d366;
    color: #111;
}

/* Resources View */
.sub-nav {
    display: flex;
    gap: 10px;
    background: #1a1a1a;
    padding: 4px;
    border-radius: 6px;
}

.sub-nav-btn {
    background: none;
    border: none;
    color: #8696a0;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.sub-nav-btn:hover:not(.active) {
    color: #e9edef;
    background: #2a2a2a;
}

.sub-nav-btn.active {
    background: #00a884;
    color: #fff;
}

.control-bar {
    padding: 16px 0;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 16px;
}

.job-select {
    background: #1a1a1a;
    color: #e9edef;
    border: 1px solid #2a2a2a;
    padding: 8px;
    border-radius: 4px;
    min-width: 200px;
}

#resources-content {
    display: flex;
    gap: 20px;
    height: calc(100vh - 180px);
}

.resource-column {
    flex: 1;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
}

.section-header {
    padding: 12px 16px;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h3 {
    font-size: 16px;
    color: #e9edef;
}

.small-btn {
    background: #2a2a2a;
    color: #25d366;
    border: 1px solid #25d366;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.small-btn:hover {
    background: #25d366;
    color: #111;
}

.resource-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.resource-card {
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.resource-card h4 {
    color: #25d366;
    font-size: 14px;
    margin-bottom: 4px;
}

.resource-card .meta {
    color: #8696a0;
    font-size: 12px;
    margin-bottom: 8px;
}

.resource-card .details {
    font-size: 13px;
    color: #e9edef;
}

.modal-input {
    width: 100%;
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #374045;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

#vendors-table {
    width: 100%;
    border-collapse: collapse;
    color: #e9edef;
}

#vendors-table th,
#vendors-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #2a2a2a;
}

#vendors-table th {
    background: #2a2a2a;
    color: #8696a0;
}

/* GIS Rooms Styles */
.gis-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    overflow-x: auto;
    padding-bottom: 5px;
}

.gis-tab-btn {
    background: #2a2a2a;
    color: #8696a0;
    border: none;
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.gis-tab-btn:hover {
    background: #333;
    color: #e9edef;
}

.gis-tab-btn.active {
    background: #25d366;
    color: #111;
    font-weight: bold;
}

.gis-tab-content {
    display: none;
    padding: 10px 0;
}

.gis-tab-content.active {
    display: block;
}

.gis-tab-content h3 {
    color: #25d366;
    margin: 15px 0 10px 0;
    font-size: 1.1em;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 12px;
    color: #8696a0;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #444;
    color: #e9edef;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #6b7c85;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00a884;
    background: #333;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #3a3a3a;
}

.keep-open-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    color: #8696a0;
    font-size: 13px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.keep-open-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00a884;
    cursor: pointer;
}

.keep-open-label:hover {
    color: #e9edef;
}
.cancel-btn {
    padding: 10px 20px;
    background: #3a3a3a;
    border: none;
    border-radius: 4px;
    color: #e9edef;
    cursor: pointer;
    font-size: 14px;
}

.cancel-btn:hover {
    background: #4a4a4a;
}

.save-btn {
    padding: 10px 20px;
    background: #00a884;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.save-btn:hover {
    background: #00c49a;
}

.checkbox-group {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #e9edef;
    font-size: 14px;
}

#gis-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#gis-table th,
#gis-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #333;
}

#gis-table th {
    color: #8696a0;
    font-weight: normal;
    font-size: 13px;
}

#gis-table td {
    color: #e9edef;
}

#gis-table tr:hover {
    background: #1a1a1a;
}

.action-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #8696a0;
    padding: 4px;
    border-radius: 4px;
}

.action-icon-btn:hover {
    background: #333;
    color: #e9edef;
}

.edit-btn:hover { color: #25d366; }
.delete-btn:hover { color: #ef5350; }

/* ==================== PROJECTS VIEW ==================== */

#projects-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Project List View */
#project-list-view {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#project-cards-container { /* Converted to flex in vertical list section below */ }

.project-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.project-card:hover {
    border-color: #25d366;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.1);
}

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

.project-card-name {
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
    margin: 0;
}

.project-card-code {
    background: #2a2a2a;
    color: #8696a0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.project-card-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.project-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8696a0;
    font-size: 13px;
}

.project-stat-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.project-card-badges {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.project-badge-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #111;
}

.project-badge-preview.finish { background: #4fc3f7; border-radius: 50%; }
.project-badge-preview.fixture { background: #ff9800; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.project-badge-preview.equip { background: #9c27b0; }
.project-badge-preview.buyout { background: #4caf50; border-radius: 6px; }

/* Project Detail View */
#project-detail-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.project-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.back-btn {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.back-btn:hover {
    background: #2a2a2a;
    color: #e9edef;
}

.project-detail-header h2 {
    font-size: 20px;
    color: #e9edef;
    margin: 0;
}

/* Project Sub-tabs */
#project-subtabs {
    display: flex;
    gap: 4px;
    padding: 8px 20px;
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    flex-shrink: 0;
}

#project-subtabs::-webkit-scrollbar {
    height: 4px;
}

#project-subtabs::-webkit-scrollbar-track {
    background: #141414;
}

#project-subtabs::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 2px;
}

#project-subtabs::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

.project-subtab {
    background: transparent;
    border: none;
    color: #8696a0;
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.project-subtab:hover {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.05);
}

.project-subtab.active {
    color: #25d366;
    border-bottom-color: #25d366;
}

/* Project Tab Content */
.project-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0; /* Required for flex children to scroll */
}

/* Chat Tab Adjustments */
#project-chat-tab {
    position: relative;
}

#project-chat-tab #messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
    padding-bottom: 70px;
}

#project-chat-tab #input-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Badges Tab */
#project-badges-tab {
    padding: 20px;
    overflow-y: auto;
}

/* Specifications Sub-tabs */
.specs-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
}

.specs-subtab {
    background: transparent;
    color: #8696a0;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.specs-subtab:hover {
    color: #e9edef;
    background: #2a2a2a;
}

.specs-subtab.active {
    background: #2a5298;
    color: #fff;
}

.specs-subtab-content {
    /* default visible */
}

/* Hardware Drawings List */
.hardware-drawings-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hardware-item {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
}

.hardware-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #222;
    cursor: pointer;
    transition: background 0.15s;
}

.hardware-item-header:hover {
    background: #2a2a2a;
}

.hardware-badge-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a5298;
    border-radius: 6px;
    font-size: 18px;
}

.hardware-item-info {
    flex: 1;
}

.hardware-item-code {
    font-size: 14px;
    font-weight: 600;
    color: #e9edef;
}

.hardware-item-spec {
    font-size: 12px;
    color: #8696a0;
    margin-top: 2px;
}

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

.hardware-link-btn {
    background: #2a2a2a;
    color: #8696a0;
    border: 1px solid #444;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.hardware-link-btn:hover {
    background: #333;
    color: #e9edef;
}

.hardware-item-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid #333;
}

.hardware-item-count .count-value {
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
}

.hardware-item-count .count-label {
    font-size: 10px;
    color: #8696a0;
    text-transform: uppercase;
}

.hardware-item-arrow {
    font-size: 24px;
    color: #666;
    padding-left: 8px;
}

.hardware-item-header:hover .hardware-item-arrow {
    color: #e9edef;
}

.hardware-drawings {
    padding: 12px 16px;
}

.hardware-drawings-empty {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.hardware-drawing-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #1e1e1e;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.hardware-drawing-item:hover {
    background: #252525;
}

.hardware-drawing-item:last-child {
    margin-bottom: 0;
}

.hardware-drawing-icon {
    font-size: 20px;
}

.hardware-drawing-info {
    flex: 1;
}

.hardware-drawing-name {
    font-size: 13px;
    color: #e9edef;
}

.hardware-drawing-meta {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.hardware-drawing-unlink {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s;
}

.hardware-drawing-item:hover .hardware-drawing-unlink {
    opacity: 1;
}

.hardware-drawing-unlink:hover {
    color: #f44336;
}

.hardware-drawings-loading,
.hardware-drawings-error {
    padding: 20px;
    text-align: center;
    font-size: 13px;
}

.hardware-drawings-loading {
    color: #8696a0;
}

.hardware-drawings-error {
    color: #f44336;
}

.hardware-drawing-actions {
    display: flex;
    gap: 6px;
}

.hardware-preview-btn,
.hardware-unlink-btn {
    background: #2a2a2a;
    color: #8696a0;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.hardware-preview-btn:hover {
    background: #2196F3;
    color: #fff;
    border-color: #2196F3;
}

.hardware-unlink-btn:hover {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
}

.hardware-drawing-meta span {
    display: inline-block;
    color: #8696a0;
    background: #2a2a2a;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 4px;
}

.hardware-link-type {
    background: #2a5298 !important;
    color: #fff !important;
}

/* Link Drawing Modal */
.link-drawing-option {
    padding: 12px;
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
    transition: background 0.15s;
}

.link-drawing-option:hover {
    background: #252525;
}

.link-drawing-option.selected {
    background: #2a5298;
}

.link-drawing-option.selected .link-drawing-name {
    color: #fff;
}

.link-drawing-option.selected .link-drawing-meta span {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.link-drawing-info {
    flex: 1;
}

.link-drawing-name {
    font-size: 13px;
    color: #e9edef;
    margin-bottom: 4px;
}

.link-drawing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
}

.link-drawing-meta span {
    color: #8696a0;
    background: #2a2a2a;
    padding: 2px 6px;
    border-radius: 3px;
}

.link-drawing-room {
    background: #1e7e34 !important;
    color: #fff !important;
}

.link-drawing-type {
    background: #6c757d !important;
    color: #fff !important;
}

/* Hardware Badge Selection Modal */
.hw-badge-list {
    max-height: 400px;
    overflow-y: auto;
}

.hw-badge-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
    transition: background 0.15s;
}

.hw-badge-option:hover {
    background: #252525;
}

.hw-badge-option.selected {
    background: #2a5298;
}

.hw-badge-option.selected .hw-badge-code {
    color: #fff;
}

.hw-badge-option.selected .hw-badge-spec {
    color: rgba(255,255,255,0.8);
}

.hw-badge-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.hw-badge-info {
    flex: 1;
    min-width: 0;
}

.hw-badge-code {
    font-size: 14px;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 2px;
}

.hw-badge-spec {
    font-size: 12px;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hw-no-badges {
    padding: 24px;
    text-align: center;
    color: #8696a0;
}

/* Room Badges Modal */
.room-badges-modal-content {
    width: 500px;
    max-width: 90vw;
    max-height: 80vh;
}

.room-badges-toolbar {
    margin-bottom: 16px;
}

.room-badges-list {
    max-height: 400px;
    overflow-y: auto;
}

.room-badges-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8696a0;
}

.room-badges-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.room-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.15s;
}

.room-badge-item:hover {
    background: #252525;
}

.room-badge-icon {
    font-size: 24px;
    color: #22c55e;
    width: 32px;
    text-align: center;
}

.room-badge-info {
    flex: 1;
    min-width: 0;
}

.room-badge-code {
    font-size: 14px;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 2px;
}

.room-badge-spec {
    font-size: 12px;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-badge-notes {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    font-style: italic;
}

.room-badge-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.room-badge-qty {
    background: #2a5298;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.room-badge-area {
    background: #2a2a2a;
    color: #8696a0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.room-badge-actions {
    opacity: 0;
    transition: opacity 0.15s;
}

.room-badge-item:hover .room-badge-actions {
    opacity: 1;
}

.room-badge-remove-btn {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
}

.room-badge-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Assign Badge Modal */
.assign-badge-modal-content {
    width: 450px;
    max-width: 90vw;
}

.assign-badge-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: #1a1a1a;
}

/* Location Card Badges Button */
.location-badges-btn {
    background: none !important;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}

.location-badges-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Hardware Drawings Modal - Split Pane (reuses drawings styles) */
.drawings-modal-content {
    width: 90vw;
    max-width: 1200px;
    height: 80vh;
    max-height: 80vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.drawings-modal-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    gap: 16px;
}

.drawings-modal-header h2 {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

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

.drawings-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.drawings-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.drawings-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8696a0;
}

.drawings-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.drawing-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #1e1e1e;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.drawing-list-item:hover {
    background: #252525;
}

.drawing-list-item.selected {
    background: #2a5298;
}

.drawing-list-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.drawing-list-info {
    flex: 1;
    min-width: 0;
}

.drawing-list-name {
    font-size: 13px;
    color: #e9edef;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawing-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
}

.drawing-list-meta span,
.drawing-meta-room,
.drawing-meta-type,
.drawing-meta-sheet {
    padding: 2px 6px;
    border-radius: 3px;
    background: #2a2a2a;
    color: #8696a0;
}

.drawing-meta-room {
    background: #1e7e34 !important;
    color: #fff !important;
}

.drawing-list-item.selected .drawing-list-name {
    color: #fff;
}

.drawing-list-item.selected .drawing-list-meta span {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.drawings-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    background: #222;
}

.preview-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.drawings-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.drawings-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #1a1a1a;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

.preview-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-nav-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #e9edef;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.15s;
}

.preview-nav-btn:hover:not(:disabled) {
    background: #333;
}

.preview-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.preview-drawing-name {
    font-size: 13px;
    color: #e9edef;
}

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

.preview-action-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #e9edef;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}

.preview-action-btn:hover {
    background: #333;
}

.hardware-unlink-preview-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.badges-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

#badges-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.badge-category-section {
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    overflow: hidden;
}

.badge-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
}

/* SVG Badge Shape Icons - matches AutoCAD block shapes EXACTLY */
.badge-category-shape {
    width: 32px;
    height: 22px;
    color: #22c55e;
    flex-shrink: 0;
}

.badge-category-shape.badge-category-fixture {
    width: 36px;
}

.badge-shape-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.badge-shape-icon {
    width: 65px;
    height: 32px;
    color: #22c55e;
}

/* Shape-specific sizing to match AutoCAD proportions */
.badge-shape-icon.badge-shape-finish {
    width: 65px;
    height: 40px;
}

.badge-shape-icon.badge-shape-fixture {
    width: 75px;
    height: 36px;
}

.badge-shape-icon.badge-shape-equip {
    width: 65px;
    height: 34px;
}

.badge-shape-icon.badge-shape-buyout {
    width: 65px;
    height: 34px;
}

.badge-shape-icon.badge-shape-small {
    transform: scale(0.85);
}

/* Legacy icon styles (kept for backwards compatibility) */
.badge-category-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-weight: 700;
    font-size: 12px;
}

.badge-category-icon.finish { background: #4fc3f7; border-radius: 50%; }
.badge-category-icon.fixture { background: #ff9800; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.badge-category-icon.equip { background: #9c27b0; border-radius: 4px; }
.badge-category-icon.buyout { background: #4caf50; border-radius: 8px; }

.badge-category-name {
    font-size: 14px;
    font-weight: 600;
    color: #e9edef;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-category-count {
    color: #8696a0;
    font-size: 13px;
    margin-left: auto;
}

.badge-items {
    display: flex;
    flex-direction: column;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #2a2a2a;
    transition: background 0.2s;
}

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

.badge-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Legacy badge-code style (kept for backwards compatibility) */
.badge-code {
    min-width: 60px;
    font-weight: 700;
    color: #22c55e;
    font-size: 14px;
}

.badge-spec {
    flex: 1;
    color: #e9edef;
    font-size: 14px;
    line-height: 1.4;
}

.badge-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.badge-item:hover .badge-actions {
    opacity: 1;
}

.badge-action-btn {
    background: #2a2a2a;
    border: none;
    color: #8696a0;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.badge-action-btn:hover {
    background: #374045;
    color: #e9edef;
}

.badge-action-btn.delete:hover {
    background: #5a2a2a;
    color: #ff6b6b;
}

.badge-edit-btn {
    width: 32px;
    height: 32px;
    opacity: 0.5;
    flex-shrink: 0;
}

.badge-view-btn {
    width: 32px;
    height: 32px;
    opacity: 0.5;
    flex-shrink: 0;
}

.badge-view-btn:hover {
    opacity: 1;
    background: #1a472a;
    color: #22c55e;
}

/* Item Provenance Status Indicator */
.item-provenance-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.item-provenance-empty {
    background: #2a2a2a;
    color: #6b7280;
}

.item-provenance-complete {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.item-provenance-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.item-provenance-required {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.item-provenance-partial {
    background: #2a2a2a;
    color: #8696a0;
    font-size: 11px;
}

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

.badge-item:hover .badge-edit-btn {
    opacity: 1;
}

.badges-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8696a0;
}

.badges-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.badges-empty p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* ==================== MILLWORK ITEMS ==================== */

.items-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.items-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.items-summary-stat {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.items-summary-stat .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #22c55e;
}

.items-summary-stat .stat-label {
    font-size: 11px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#items-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.items-category-section {
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    overflow: hidden;
}

.items-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
}

.items-category-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
}

.items-category-icon.casework { background: #3b82f6; }
.items-category-icon.door { background: #f59e0b; }
.items-category-icon.ceiling { background: #8b5cf6; }
.items-category-icon.wall_panel { background: #10b981; }

.items-category-name {
    font-size: 14px;
    font-weight: 600;
    color: #e9edef;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.items-category-count {
    font-size: 12px;
    color: #8696a0;
    margin-left: auto;
}

.items-category-items {
    padding: 8px;
}

/* Location groups within categories */
.category-locations {
    padding: 8px 12px 12px;
}

.location-group {
    margin-bottom: 16px;
}

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

.location-header {
    font-size: 12px;
    font-weight: 600;
    color: #8696a0;
    padding: 8px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-header .item-count {
    font-weight: 400;
    color: #666;
}

/* Material and finish inline tags */
.item-materials-tag,
.item-finishes-tag {
    font-size: 11px;
    color: #8696a0;
    margin-left: 8px;
}

.item-materials-tag {
    color: #3b82f6;
}

.item-finishes-tag {
    color: #f59e0b;
}

/* Category icon styling */
.category-icon {
    width: 20px;
    height: 20px;
    color: #22c55e;
    flex-shrink: 0;
}

/* Summary stats grid */
.summary-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.summary-stats .stat {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.summary-stats .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #22c55e;
}

.summary-stats .stat-label {
    font-size: 11px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.category-chip {
    background: #2a2a2a;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 11px;
    color: #8696a0;
}

.item-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #0f0f0f;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.item-card:hover {
    background: #1f1f1f;
}

.item-card:last-child {
    margin-bottom: 0;
}

.item-badge {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
    min-width: 50px;
    text-align: center;
}

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

.item-name {
    font-size: 14px;
    font-weight: 500;
    color: #e9edef;
    margin-bottom: 4px;
}

.item-type {
    font-size: 12px;
    color: #8696a0;
    margin-bottom: 4px;
}

.item-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #666;
}

.item-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.item-card:hover .item-actions {
    opacity: 1;
}

.item-action-btn {
    background: #2a2a2a;
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11px;
    color: #8696a0;
    cursor: pointer;
}

.item-action-btn:hover {
    background: #333;
    color: #e9edef;
}

.items-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8696a0;
}

.items-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.items-empty p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* Item Detail Modal */
.item-detail-section {
    margin-bottom: 20px;
}

.item-detail-section h4 {
    font-size: 12px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 4px;
}

.item-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.item-detail-chip {
    background: #2a2a2a;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    color: #e9edef;
}

.item-detail-chip .chip-label {
    color: #8696a0;
    margin-right: 4px;
}

/* Project Actions & More Menu */
.project-detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
}

.project-detail-header h2 {
    flex: 1;
    margin: 0;
    color: #e9edef;
}

.project-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.more-menu {
    position: relative;
}

.more-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 120px;
    overflow: hidden;
}

.more-menu-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    color: #e9edef;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.more-menu-dropdown button:hover {
    background: #3a3a3a;
}

.more-menu-dropdown button.danger {
    color: #e53935;
}

.more-menu-dropdown button.danger:hover {
    background: #3a2020;
}

/* Overview Tab */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.overview-section {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 20px;
}

.overview-section h3 {
    color: #25d366;
    margin-bottom: 15px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overview-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: flex;
    gap: 10px;
}

.info-label {
    color: #8696a0;
    min-width: 100px;
    font-size: 13px;
}

.info-row span:last-child {
    color: #e9edef;
    font-size: 14px;
}

.overview-notes {
    color: #e9edef;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Rooms Tab */
.rooms-toolbar {
    padding: 15px 20px;
    border-bottom: 1px solid #2a2a2a;
}

.rooms-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.room-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: border-color 0.2s;
}

.room-card:hover {
    border-color: #25d366;
}

.room-drag-handle {
    color: #666;
    cursor: grab;
    font-size: 16px;
}

.room-info {
    flex: 1;
}

.room-name {
    font-weight: 600;
    color: #e9edef;
    font-size: 15px;
}

.room-code {
    color: #8696a0;
    font-size: 13px;
    margin-top: 2px;
}

.room-sheets {
    color: #666;
    font-size: 12px;
    margin-top: 4px;
}

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

.room-actions button {
    padding: 6px 12px;
    background: #2a2a2a;
    border: none;
    border-radius: 6px;
    color: #e9edef;
    font-size: 12px;
    cursor: pointer;
}

.room-actions button:hover {
    background: #3a3a3a;
}

.room-actions button.danger:hover {
    background: #3a2020;
    color: #e53935;
}

.rooms-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8696a0;
}

.rooms-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Build Hierarchy */
.build-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hierarchy-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a2a;
}

.hierarchy-actions .action-btn.secondary {
    background: #2a2a2a;
    color: #8696a0;
}

.hierarchy-actions .action-btn.secondary:hover {
    background: #3a3a3a;
}

.hierarchy-floor {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.hierarchy-floor.unassigned {
    border-color: #5a4a00;
}

.hierarchy-floor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    background: #222;
    transition: background 0.2s;
}

.hierarchy-floor-header:hover {
    background: #282828;
}

.hierarchy-expand-icon {
    color: #8696a0;
    font-size: 10px;
    width: 14px;
}

.hierarchy-floor-name {
    font-weight: 600;
    color: #e9edef;
    font-size: 14px;
    flex: 1;
}

.hierarchy-count {
    font-size: 12px;
    color: #8696a0;
    padding: 2px 10px;
    background: #2a2a2a;
    border-radius: 10px;
}

.hierarchy-floor-content {
    padding: 0 8px 8px 8px;
}

.hierarchy-room {
    background: #222;
    border-radius: 6px;
    margin-top: 8px;
    overflow: hidden;
}

.hierarchy-room-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.hierarchy-room-header:hover {
    background: #2a2a2a;
}

.hierarchy-room-code {
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    font-size: 12px;
    color: #25d366;
    background: rgba(37, 211, 102, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.hierarchy-room-name {
    font-weight: 500;
    color: #e9edef;
    font-size: 13px;
    flex: 1;
}

.hierarchy-room-content {
    padding: 0 10px 10px 10px;
}

.hierarchy-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hierarchy-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 4px;
    font-size: 12px;
    transition: background 0.2s;
}

.hierarchy-item:hover {
    background: #252525;
}

.hierarchy-item-badge {
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    font-size: 11px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}

.hierarchy-item-name {
    flex: 1;
    color: #e9edef;
}

.hierarchy-item-type {
    color: #8696a0;
    font-size: 11px;
    padding: 2px 6px;
    background: #2a2a2a;
    border-radius: 4px;
}

.hierarchy-item-sheet {
    color: #8696a0;
    font-size: 11px;
}

.hierarchy-item-qty {
    color: #25d366;
    font-weight: 600;
    font-size: 11px;
}

.hierarchy-empty {
    padding: 16px;
    text-align: center;
    color: #666;
    font-size: 12px;
    font-style: italic;
}

/* ==================== Location Hierarchy Tab ==================== */

.locations-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #2a2a2a;
    background: #111;
}

.locations-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    color: #8696a0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.breadcrumb-item.active {
    color: #e9edef;
    font-weight: 600;
}

.breadcrumb-item.clickable {
    cursor: pointer;
}

.breadcrumb-item.clickable:hover {
    background: #2a2a2a;
    color: #e9edef;
}

.breadcrumb-separator {
    color: #666;
    font-size: 14px;
}

.locations-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.locations-actions .action-btn.secondary {
    background: #2a2a2a;
    color: #e9edef;
}

.locations-actions .action-btn.secondary:hover {
    background: #3a3a3a;
}

.back-icon {
    font-size: 16px;
    margin-right: 4px;
}

.locations-list {
    padding: 20px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.locations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #8696a0;
}

.locations-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.locations-empty p {
    margin: 0;
    font-size: 14px;
}

/* Location Cards - Vertical List (consistent with project list) */
.location-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.location-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.location-card:hover {
    background: #1f1f1f;
    border-color: #25d366;
}

.location-card.wall {
    border-left: 3px solid #4a9eff;
}

.location-card.ceiling {
    border-left: 3px solid #a855f7;
}

.location-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.location-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-card-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: #2a2a2a;
    color: #8696a0;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.location-card-subtitle {
    font-size: 12px;
    color: #8696a0;
}

.location-card-stats {
    display: flex;
    gap: 24px;
    margin-left: auto;
}

.location-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 50px;
}

.location-card-stat .stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
}

.location-card-stat .stat-label {
    font-size: 10px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.location-card-arrow {
    font-size: 24px;
    color: #666;
    transition: all 0.2s;
    margin-left: 16px;
}

.location-card:hover .location-card-arrow {
    color: #25d366;
    transform: translateX(4px);
}

/* Location card actions */
.location-card-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.location-card:hover .location-card-actions {
    opacity: 1;
}

.location-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.location-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.location-delete-btn:hover {
    background: rgba(244, 67, 54, 0.2);
}

/* Location Items List */
.location-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.location-item:hover {
    background: #222;
}

.location-item-badge {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    background: #2a2a2a;
    color: #4a9eff;
    padding: 4px 10px;
    border-radius: 4px;
    min-width: 60px;
    text-align: center;
}

.location-item-name {
    flex: 1;
    font-size: 14px;
    color: #e9edef;
}

.location-item-type {
    font-size: 12px;
    color: #8696a0;
    background: #222;
    padding: 2px 8px;
    border-radius: 4px;
}

.location-item-qty {
    font-size: 13px;
    font-weight: 600;
    color: #25d366;
}

/* Team Tab */
.team-toolbar {
    padding: 15px 20px;
    border-bottom: 1px solid #2a2a2a;
}

.team-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.org-group {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
}

.org-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #222;
    border-bottom: 1px solid #2a2a2a;
}

.org-title {
    font-weight: 600;
    color: #e9edef;
    font-size: 14px;
}

.org-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #2a2a2a;
    color: #8696a0;
    border-radius: 10px;
}

.org-contacts {
    display: flex;
    flex-direction: column;
}

.contact-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    border-bottom: 1px solid #2a2a2a;
    transition: background-color 0.2s;
}

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

.contact-card:hover {
    background: #222;
}

.contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #e9edef;
    font-size: 14px;
    flex-shrink: 0;
}

.contact-avatar.primary {
    background: #25d366;
    color: #111;
}

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

.contact-name {
    font-weight: 600;
    color: #e9edef;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.contact-name .primary-badge {
    font-size: 10px;
    padding: 1px 6px;
    background: #25d366;
    color: #111;
    border-radius: 8px;
    font-weight: 600;
}

.contact-role {
    color: #8696a0;
    font-size: 12px;
    margin-top: 2px;
}

.contact-details {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.contact-detail {
    color: #8696a0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-detail a {
    color: #25d366;
    text-decoration: none;
}

.contact-detail a:hover {
    text-decoration: underline;
}

.contact-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.contact-card:hover .contact-actions {
    opacity: 1;
}

.contact-actions button {
    padding: 5px 10px;
    background: #2a2a2a;
    border: none;
    border-radius: 4px;
    color: #e9edef;
    font-size: 11px;
    cursor: pointer;
}

.contact-actions button:hover {
    background: #3a3a3a;
}

.contact-actions button.danger:hover {
    background: #3a2020;
    color: #e53935;
}

.team-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8696a0;
}

.team-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-badge.active {
    background: rgba(37, 211, 102, 0.2);
    color: #25d366;
}

.status-badge.on_hold {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.status-badge.completed {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

.status-badge.cancelled {
    background: rgba(229, 57, 53, 0.2);
    color: #e53935;
}

/* ===== SHEETS TAB ===== */

.sheets-toolbar {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid #2a2a2a;
}

.sheets-list {
    padding: 15px 20px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.sheet-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #2a2a2a;
    transition: background 0.2s, border-color 0.2s;
}

.sheet-row:hover {
    background: #222;
    border-color: #374045;
}

.sheet-row.is-column {
    margin-left: 40px;
    background: #151515;
    border-left: 3px solid #374045;
}

.sheet-number {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 16px;
    font-weight: bold;
    color: #25d366;
    min-width: 60px;
    padding-right: 16px;
}

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

.sheet-name {
    font-size: 14px;
    color: #e9edef;
    font-weight: 500;
}

.sheet-room {
    font-size: 12px;
    color: #8696a0;
}

.sheet-room::before {
    content: 'TITLE: ';
    color: #666;
}

.sheet-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.sheet-scale {
    font-size: 12px;
    color: #8696a0;
    background: #2a2a2a;
    padding: 4px 8px;
    border-radius: 4px;
}

.sheet-revision {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #374045;
    padding: 4px 10px;
    border-radius: 12px;
}

.sheet-revision.has-revision {
    background: #2196f3;
}

.sheet-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.sheet-actions button {
    background: transparent;
    border: none;
    color: #8696a0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}

.sheet-actions button:hover {
    background: #2a2a2a;
    color: #e9edef;
}

.sheet-actions button.danger:hover {
    background: rgba(229, 57, 53, 0.2);
    color: #e53935;
}

.sheets-empty {
    text-align: center;
    padding: 60px 20px;
    color: #8696a0;
}

.sheets-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.sheets-info-bar {
    padding: 10px 20px;
    background: #151515;
    border-bottom: 1px solid #2a2a2a;
    font-size: 13px;
    color: #8696a0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sheets-total {
    font-weight: 500;
}

/* ==================== VERTICAL PROJECT LIST ==================== */
#project-cards-container,
#samples-job-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    padding-bottom: 20px;
}

/* Samples View Scrolling */
#samples-job-list-view,
#samples-job-detail-view {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Samples Filter Buttons */
.samples-filters .filter-btn {
    background: #2a2a2a;
    color: #e9edef;
    border: 2px solid #3a3a3a;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.samples-filters .filter-btn:hover {
    background: #3a3a3a;
    border-color: #4a4a4a;
}

.samples-filters .filter-btn.active {
    background: #25d366;
    color: #111;
    border-color: #25d366;
}

.samples-filters .filter-btn[data-type="Veneer"] {
    border-color: #8B4513;
}
.samples-filters .filter-btn[data-type="Veneer"].active {
    background: #8B4513;
    border-color: #8B4513;
    color: #fff;
}

.samples-filters .filter-btn[data-type="Paint"] {
    border-color: #4169E1;
}
.samples-filters .filter-btn[data-type="Paint"].active {
    background: #4169E1;
    border-color: #4169E1;
    color: #fff;
}

.samples-filters .filter-btn[data-type="Upholstery"] {
    border-color: #9370DB;
}
.samples-filters .filter-btn[data-type="Upholstery"].active {
    background: #9370DB;
    border-color: #9370DB;
    color: #fff;
}

.samples-filters .filter-btn[data-type="Laminate"] {
    border-color: #20B2AA;
}
.samples-filters .filter-btn[data-type="Laminate"].active {
    background: #20B2AA;
    border-color: #20B2AA;
    color: #111;
}

/* Project Filter Toggles */
.project-filter-toggles {
    display: flex;
    gap: 4px;
    background: #1a1a1a;
    padding: 4px;
    border-radius: 8px;
}

.filter-toggle {
    background: transparent;
    border: none;
    color: #8696a0;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-toggle:hover {
    color: #e9edef;
    background: #2a2a2a;
}

.filter-toggle.active {
    background: #25d366;
    color: #111;
}

.project-row {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.project-row:hover {
    border-color: #25d366;
    background: #1f1f1f;
}

/* Archived project styling */
.project-row.archived {
    opacity: 0.6;
    border-color: #3a3a3a;
}

.project-row.archived:hover {
    opacity: 0.8;
    border-color: #5a5a5a;
}

.project-row.archived .project-row-code {
    background: #5a5a5a;
}

.project-archived-badge {
    background: #5a5a5a;
    color: #aaa;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

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

.project-row-code {
    background: #25d366;
    color: #111;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    text-transform: uppercase;
}

.project-row-name {
    font-size: 20px;
    font-weight: 600;
    color: #e9edef;
    margin: 0;
}

.project-row-address {
    color: #8696a0;
    font-size: 14px;
    margin-left: auto;
}

.project-row-address a {
    color: #25d366;
    text-decoration: none;
}

.project-row-address a:hover {
    text-decoration: underline;
}

.project-row-status {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: capitalize;
}

.project-row-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    padding-left: 98px; /* Align with name after code */
}

.project-row-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-row-field {
    font-size: 13px;
    color: #8696a0;
}

.project-row-field .field-label {
    color: #5a6a74;
    font-weight: 500;
    margin-right: 8px;
}

.project-row-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a6a74;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.project-row:hover .project-row-arrow {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
    color: #25d366;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .project-row-details {
        grid-template-columns: 1fr;
        padding-left: 0;
        margin-top: 8px;
    }
    
    .project-row-header {
        flex-wrap: wrap;
    }
    
    .project-row-name {
        font-size: 16px;
        width: 100%;
        order: -1;
        margin-bottom: 8px;
    }
}
/* ==================== COURIER STYLES ==================== */
.courier-sub-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.courier-sub-nav button {
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
}

.courier-sub-nav button.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.courier-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface-color);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
}

.courier-row-status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  min-width: 80px;
  text-align: center;
}

.courier-row-status.pending { background: #fef3c7; color: #92400e; }
.courier-row-status.dispatched { background: #dbeafe; color: #1e40af; }
.courier-row-status.delivered { background: #d1fae5; color: #065f46; }
.courier-row-status.cancelled { background: #fee2e2; color: #991b1b; }

.courier-row-main {
  flex: 1;
}

.courier-route {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.courier-arrow { color: var(--text-muted); }

.courier-details {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.courier-row-date {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 120px;
}

.courier-row-flags {
  display: flex;
  gap: 0.25rem;
}

.flag {
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
}

.flag.fragile { background: #fce7f3; color: #9d174d; }
.flag.oversized { background: #fef3c7; color: #92400e; }
.flag.signature { background: #e0e7ff; color: #3730a3; }

.address-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface-color);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
}

.address-type-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 80px;
  text-align: center;
}

.address-type-badge.client { background: #dbeafe; color: #1e40af; }
.address-type-badge.contractor { background: #d1fae5; color: #065f46; }
.address-type-badge.vendor { background: #fef3c7; color: #92400e; }
.address-type-badge.job-site { background: #e0e7ff; color: #3730a3; }
.address-type-badge.shop { background: #f3f4f6; color: #374151; }

.address-main { flex: 1; }
.address-name { font-weight: 500; }
.address-detail { font-size: 0.85rem; color: var(--text-muted); }

.delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.delete-btn:hover { color: #ef4444; }

.courier-list { padding: 1rem; }

/* Modal large for shipments */
.modal-large .modal-content {
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row .form-group { flex: 1; }

.form-section {
  background: var(--surface-color);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}

.form-section h4 {
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkbox-row {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Modal grid layout for courier */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.modal-section {
  background: var(--bg-color);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.modal-section h3 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-large {
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.control-bar {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

/* Sub-nav improvements */
.sub-nav {
  display: flex;
  gap: 0.5rem;
}

#directory-view .sub-nav-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  color: #8696a0;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

#directory-view .sub-nav-btn.active {
  background: #00a884 !important;
  color: #fff !important;
}

#directory-view .sub-nav-btn:hover:not(.active) {
  background: #2a2a2a;
  color: #e9edef;
}

/* Modal Action Buttons */
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.primary-btn {
    flex: 1;
    background: #25d366;
    color: #111;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.primary-btn:hover {
    background: #20ba5a;
}

.secondary-btn {
    flex: 1;
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #444;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.secondary-btn:hover {
    background: #374045;
}

/* Category Mode */
#category-mode-btn.active {
    background: #00a884;
    color: #fff;
    border-color: #00a884;
}

.category-mode-active .category-buttons {
    display: flex !important;
}

.category-buttons {
    display: none;
    gap: 4px;
    flex-wrap: wrap;
}

.category-btn {
    padding: 2px 6px;
    font-size: 10px;
    border: 1px solid #444;
    border-radius: 3px;
    background: #2a2a2a;
    color: #8696a0;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.category-btn:hover {
    background: #374045;
    color: #e9edef;
}

.category-btn.active {
    background: #00a884;
    color: #fff;
    border-color: #00a884;
}

.category-btn[data-type="CLIENT"] { border-left: 3px solid #4CAF50; }
.category-btn[data-type="CONTRACTOR"] { border-left: 3px solid #2196F3; }
.category-btn[data-type="SUBCONTRACTOR"] { border-left: 3px solid #9C27B0; }
.category-btn[data-type="VENDOR"] { border-left: 3px solid #FF9800; }
.category-btn[data-type="INSTALLER"] { border-left: 3px solid #8BC34A; }
.category-btn[data-type="ENGINEERING"] { border-left: 3px solid #03A9F4; }
.category-btn[data-type="DESIGN_AUTHORITY"] { border-left: 3px solid #E91E63; }
.category-btn[data-type="INTERNAL"] { border-left: 3px solid #00BCD4; }
.category-btn[data-type="OTHER"] { border-left: 3px solid #607D8B; }
.category-btn[data-type="UNKNOWN"] { border-left: 3px solid #9E9E9E; }

.category-btn[data-type="CLIENT"].active { background: #4CAF50; border-color: #4CAF50; }
.category-btn[data-type="CONTRACTOR"].active { background: #2196F3; border-color: #2196F3; }
.category-btn[data-type="SUBCONTRACTOR"].active { background: #9C27B0; border-color: #9C27B0; }
.category-btn[data-type="VENDOR"].active { background: #FF9800; border-color: #FF9800; color: #111; }
.category-btn[data-type="INSTALLER"].active { background: #8BC34A; border-color: #8BC34A; color: #111; }
.category-btn[data-type="ENGINEERING"].active { background: #03A9F4; border-color: #03A9F4; }
.category-btn[data-type="DESIGN_AUTHORITY"].active { background: #E91E63; border-color: #E91E63; }
.category-btn[data-type="INTERNAL"].active { background: #00BCD4; border-color: #00BCD4; }
.category-btn[data-type="OTHER"].active { background: #607D8B; border-color: #607D8B; }
.category-btn[data-type="UNKNOWN"].active { background: #9E9E9E; border-color: #9E9E9E; }

/* Add category button */
.category-btn.add-category-btn {
    border-left: 3px solid #666;
    color: #888;
    font-weight: bold;
    font-size: 14px;
}

.category-btn.add-category-btn:hover {
    background: #444;
    color: #fff;
}

/* Category mode row styling */
.category-mode-active #organizations-table tbody tr {
    cursor: default;
}

.category-mode-active #organizations-table tbody tr:hover {
    background: #252525;
}

/* Category cell - compact in normal mode, expand in category mode */
.org-row-category-cell {
    min-width: auto;
    width: auto;
}

.category-mode-active .org-row-category-cell {
    min-width: 280px;
}

/* Address Group Headers */
.address-group-header {
    font-size: 12px;
    font-weight: 600;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px 6px 16px;
    margin-top: 8px;
    border-top: 1px solid #2a2a2a;
}

.address-group-header:first-child {
    margin-top: 0;
    border-top: none;
}
/* Delete button icon */
.delete-btn::before {
    content: '';
}
/* Form Labels */
.form-label {
    display: block;
    color: #8696a0;
    font-size: 12px;
    margin-bottom: 4px;
    margin-top: 8px;
}

.form-label:first-child {
    margin-top: 0;
}

/* Checkbox styling in modal */
.modal-section label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
}

.modal-section input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #25d366;
}

/* Email output styling */
#email-output {
    background: #1a1a1a;
    color: #e9edef;
    border: 1px solid #2a2a2a;
    font-size: 13px;
    line-height: 1.5;
}
/* Pull to Refresh */
.pull-to-refresh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #1a1a1a, transparent);
    transform: translateY(-100%);
    transition: transform 0.2s ease-out;
    z-index: 9999;
    pointer-events: none;
}

.pull-to-refresh.visible {
    transform: translateY(0);
}

.pull-to-refresh-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #3b82f6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: none;
}

.pull-to-refresh.refreshing .pull-to-refresh-spinner {
    animation: spin 0.8s linear infinite;
}

.pull-to-refresh-text {
    color: #94a3b8;
    font-size: 13px;
    margin-left: 10px;
}

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

/* ==================== INTAKE SYSTEM ==================== */
#project-intake-tab {
    padding: 16px;
}

.intake-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 16px;
}

.intake-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Required for flex children to scroll */
}

.intake-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.intake-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

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

.intake-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    padding: 16px;
}

.intake-item.promoted {
    opacity: 0.6;
    border-color: #25d366;
}

.intake-item.rejected {
    opacity: 0.4;
    border-color: #ff4444;
}

.intake-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.intake-side-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 8px;
}

.intake-side-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
}

.intake-ai-badge {
    font-size: 10px;
    background: #333;
    color: #888;
    padding: 2px 8px;
    border-radius: 4px;
}

.intake-corrected-badge {
    font-size: 10px;
    background: #25d366;
    color: #111;
    padding: 2px 8px;
    border-radius: 4px;
}

.intake-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.intake-field-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
}

.intake-field-value {
    font-size: 14px;
    color: #e9edef;
    padding: 8px;
    background: #111;
    border-radius: 4px;
    min-height: 20px;
}

.intake-field-input {
    font-size: 14px;
    color: #e9edef;
    padding: 8px;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    min-height: 20px;
}

.intake-field-input:focus {
    border-color: #25d366;
    outline: none;
}

.intake-item-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #2a2a2a;
    margin-top: 8px;
}

.intake-item-actions button {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.intake-item-actions .promote-btn {
    background: #25d366;
    color: #111;
}

.intake-item-actions .reject-btn {
    background: #2a2a2a;
    color: #888;
}

.intake-type-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.intake-type-badge.badge { background: #22c55e; color: #111; }
.intake-type-badge.room { background: #3b82f6; color: #fff; }
.intake-type-badge.sheet { background: #a855f7; color: #fff; }
.intake-type-badge.contact { background: #f59e0b; color: #111; }

.intake-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.intake-status-badge.pending { background: #333; color: #888; }
.intake-status-badge.promoted { background: #25d366; color: #111; }
.intake-status-badge.rejected { background: #ff4444; color: #fff; }

.intake-item-header {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 8px;
}

.intake-item-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.intake-item-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #25d366;
}

/* ==================== CONTRACT TAB ==================== */

.contract-toolbar {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    align-items: center;
}

.contract-summary {
    padding: 16px;
    background: #111;
    border-bottom: 1px solid #2a2a2a;
}

.contract-summary-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.contract-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: #1a1a1a;
    border-radius: 8px;
    min-width: 80px;
}

.contract-stat .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #e9edef;
}

.contract-stat .stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    margin-top: 4px;
}

.contract-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.contract-type-group {
    margin-bottom: 20px;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.contract-type-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #222;
    border-bottom: 1px solid #333;
}

.contract-type-code {
    font-weight: 700;
    font-size: 14px;
    color: #25d366;
    min-width: 50px;
}

.contract-type-name {
    color: #aaa;
    font-size: 13px;
    flex: 1;
}

.contract-type-count {
    background: #333;
    color: #888;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.contract-type-docs {
    padding: 8px;
}

.contract-doc-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    margin: 4px 0;
    background: #111;
    border-radius: 6px;
    transition: background 0.2s;
}

.contract-doc-item:hover {
    background: #1a1a1a;
}

.contract-doc-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.contract-doc-number {
    font-weight: 600;
    color: #e9edef;
    font-family: monospace;
    min-width: 60px;
}

.contract-doc-subject {
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.contract-linked-badge {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.contract-doc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.contract-doc-date {
    color: #666;
    min-width: 80px;
}

.contract-doc-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
}

.contract-doc-status.status-open {
    background: #f59e0b22;
    color: #f59e0b;
}

.contract-doc-status.status-responded {
    background: #3b82f622;
    color: #3b82f6;
}

.contract-doc-status.status-closed {
    background: #22c55e22;
    color: #22c55e;
}

.contract-doc-affects {
    color: #666;
    font-size: 11px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contract-doc-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.contract-doc-item:hover .contract-doc-actions {
    opacity: 1;
}

/* Empty state for contract list */
#contract-list .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #666;
}

#contract-list .empty-state p {
    margin: 8px 0;
}

#contract-list .empty-state-hint {
    font-size: 13px;
    color: #555;
}

/* ==================== OPERATIONS TAB ==================== */

.operations-toolbar {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    align-items: center;
}

.operations-summary {
    padding: 16px;
    background: #111;
    border-bottom: 1px solid #2a2a2a;
}

.operations-summary-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ops-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: #1a1a1a;
    border-radius: 8px;
    min-width: 80px;
}

.ops-stat .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #e9edef;
}

.ops-stat .stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    margin-top: 4px;
}

.operations-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.ops-section {
    margin-bottom: 20px;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.ops-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #222;
    border-bottom: 1px solid #333;
}

.ops-section-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #e9edef;
    margin: 0;
}

.ops-section-count {
    background: #333;
    color: #888;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.ops-section-content {
    padding: 8px;
}

.ops-item {
    padding: 12px;
    margin: 4px 0;
    background: #111;
    border-radius: 6px;
    transition: background 0.2s;
}

.ops-item:hover {
    background: #161616;
}

.ops-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ops-item-date {
    font-weight: 500;
    color: #888;
    min-width: 80px;
    font-family: monospace;
}

.ops-item-type, .ops-insp-type, .ops-coord-type {
    background: #333;
    color: #ccc;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: capitalize;
}

.ops-item-by {
    color: #888;
    font-size: 13px;
}

.ops-item-room {
    color: #e9edef;
    font-weight: 500;
}

.ops-item-detail {
    color: #888;
    font-size: 13px;
    margin-top: 6px;
}

.ops-item-meta {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

.ops-item-findings {
    margin-top: 8px;
    padding: 8px;
    background: #0a0a0a;
    border-radius: 4px;
    font-size: 12px;
    color: #999;
}

.ops-flag {
    background: #f59e0b22;
    color: #f59e0b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.ops-trade-type {
    background: #3b82f622;
    color: #3b82f6;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: capitalize;
}

.ops-company {
    color: #e9edef;
    font-weight: 500;
}

.ops-trade-name {
    color: #888;
    font-size: 13px;
}

.ops-empty {
    text-align: center;
    padding: 24px;
    color: #666;
    font-size: 13px;
}

/* Operations Status Classes */
.ops-item-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: capitalize;
    font-weight: 500;
}

.status-scheduled {
    background: #3b82f622;
    color: #3b82f6;
}

.status-inprogress {
    background: #f59e0b22;
    color: #f59e0b;
}

.status-completed {
    background: #22c55e22;
    color: #22c55e;
}

.status-delayed {
    background: #ef444422;
    color: #ef4444;
}

.status-pending {
    background: #33333388;
    color: #888;
}

/* Operations Result Classes */
.ops-item-result {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: capitalize;
    font-weight: 500;
}

.result-pass {
    background: #22c55e22;
    color: #22c55e;
}

.result-fail {
    background: #ef444422;
    color: #ef4444;
}

.result-conditional {
    background: #f59e0b22;
    color: #f59e0b;
}

.result-pending {
    background: #33333388;
    color: #888;
}

/* ==================== PROCUREMENT VIEW ==================== */
/* Main container styles in "Scroll Fix" section at ~line 8865 */

.procurement-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
}

.procurement-summary .summary-card {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.procurement-summary .summary-value {
    display: block;
    font-size: 28px;
    font-weight: 600;
    color: #25d366;
    margin-bottom: 4px;
}

.procurement-summary .summary-label {
    font-size: 12px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.procurement-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.procurement-list .empty-state {
    color: #666;
    text-align: center;
    padding: 40px;
    font-style: italic;
}

/* Procurement item cards */
.procurement-item {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.procurement-item-info {
    flex: 1;
}

.procurement-item-name {
    font-weight: 500;
    color: #e9edef;
    margin-bottom: 4px;
}

.procurement-item-meta {
    font-size: 12px;
    color: #8696a0;
}

.procurement-item-status {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
}

.procurement-item-actions {
    display: flex;
    gap: 8px;
    margin-left: 16px;
}

/* Responsive procurement grid */
@media (max-width: 768px) {
    .procurement-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .procurement-summary .summary-value {
        font-size: 22px;
    }
}

/* ==================== ROOM DRAWINGS STYLES ==================== */

/* Drawing Sections */
.drawing-section {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #2a2a2a;
}

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

.drawing-section-icon {
    font-size: 18px;
    margin-right: 8px;
}

.drawing-section-title {
    font-weight: 600;
    color: #e9edef;
    font-size: 15px;
}

.drawing-section-count {
    color: #8696a0;
    font-size: 13px;
    margin-left: 8px;
}

.drawing-section-desc {
    font-size: 12px;
    color: #8696a0;
    margin-bottom: 12px;
}

/* Drawing List */
.drawing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawing-empty {
    color: #6b7c85;
    font-style: italic;
    font-size: 13px;
    padding: 8px 0;
}

/* Drawing Item */
.drawing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    border-radius: 6px;
    padding: 12px;
    transition: background 0.2s;
}

.drawing-item:hover {
    background: #333;
}

.drawing-item-icon {
    font-size: 20px;
    width: 24px;
    flex-shrink: 0;
}

.drawing-item-info {
    flex: 1;
    min-width: 0;
}

.drawing-item-name {
    font-weight: 500;
    color: #e9edef;
    margin-bottom: 4px;
}

.drawing-item-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #8696a0;
}

.drawing-item-meta span {
    display: inline-block;
}

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

/* Icon Button for drawings */
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Location Card Action Button */
.location-card-action {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #e9edef;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s;
}

.location-card-action:hover {
    background: #3a3a3a;
    border-color: #25d366;
}

/* Location Modal Field Groups */
.location-fields {
    margin-bottom: 15px;
}

.location-fields label {
    display: block;
    margin-bottom: 5px;
    color: #8696a0;
    font-size: 13px;
}

.location-fields input,
.location-fields select {
    width: 100%;
    padding: 10px;
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #444;
    border-radius: 6px;
    margin-bottom: 10px;
}

.location-fields input:focus,
.location-fields select:focus {
    border-color: #25d366;
    outline: none;
}

/* Action Button Small Variant */
.action-btn.small {
    padding: 6px 12px;
    font-size: 12px;
}

/* Room Drawings Modal - Split Pane Layout */
.drawings-split-pane {
    width: 95vw !important;
    max-width: 1400px !important;
    height: 85vh;
    max-height: 85vh !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Fullscreen mode */
.drawings-split-pane.fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0;
}

.drawings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

.drawings-header h2 {
    margin: 0;
    font-size: 18px;
}

.drawings-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawings-fullscreen-btn {
    background: #2a2a2a;
    border: none;
    color: #8696a0;
    font-size: 18px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1;
}

.drawings-fullscreen-btn:hover {
    background: #333;
    color: #e9edef;
}

.drawings-close-btn {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.drawings-close-btn:hover {
    color: #e9edef;
}

.drawings-split-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.drawings-list-pane {
    width: 350px;
    min-width: 200px;
    max-width: 800px;
    overflow-y: auto;
    background: #1a1a1a;
    flex-shrink: 0;
}

/* Resizable divider between list and preview */
.drawings-resize-handle {
    width: 6px;
    background: #333;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
}

.drawings-resize-handle:hover,
.drawings-resize-handle.dragging {
    background: #25d366;
}

.drawings-list-toolbar {
    padding: 12px;
    border-bottom: 1px solid #333;
}

.drawings-toolbar-btn {
    width: 100%;
    background: #2a2a2a;
    border: 1px dashed #444;
    color: #8696a0;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.drawings-toolbar-btn:hover {
    background: #333;
    border-color: #25d366;
    color: #e9edef;
}

.drawings-toolbar-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.drawings-view-toggle {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #8696a0;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.drawings-view-toggle:hover {
    background: #333;
    color: #e9edef;
}

.drawings-view-toggle.active {
    background: #25d366;
    color: #111;
    border-color: #25d366;
}

/* Compact list view (no thumbnails) */
.drawing-list-item.compact {
    padding: 6px 12px;
}

.drawing-list-item.compact .drawing-thumbnail,
.drawing-list-item.compact .drawing-thumbnail-placeholder {
    display: none;
}

/* Footer navigation */
.drawings-footer-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.drawings-nav-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #8696a0;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.drawings-nav-btn:hover {
    background: #333;
    color: #e9edef;
}

.drawings-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#room-drawings-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

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

.drawings-action-btn {
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #444;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.drawings-action-btn:hover {
    background: #333;
    border-color: #666;
}

.drawings-action-btn.drawings-delete {
    color: #f44336;
    border-color: #f44336;
}

.drawings-action-btn.drawings-delete:hover {
    background: #f44336;
    color: #fff;
}

/* Move Mode Button */
.drawings-action-btn.drawings-move-mode {
    background: #2196F3;
    border-color: #2196F3;
}

.drawings-action-btn.drawings-move-mode:hover {
    background: #1976D2;
}

.drawings-action-btn.drawings-move-mode.active {
    background: #f44336;
    border-color: #f44336;
}

/* Move Location Panel */
.drawings-move-location-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: rgba(33, 150, 243, 0.15);
    border-left: 3px solid #2196F3;
}

.drawings-location-select {
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #444;
    padding: 8px 12px;
    border-radius: 4px;
    min-width: 200px;
    font-size: 14px;
}

.drawings-location-select:focus {
    border-color: #2196F3;
    outline: none;
}

.drawings-location-select optgroup {
    background: #333;
    color: #2196F3;
    font-weight: 600;
}

.drawings-location-select option {
    background: #2a2a2a;
    color: #e9edef;
    padding: 4px;
}

.drawings-location-select option:disabled {
    color: #666;
    font-style: italic;
}

/* Move Mode Active State for List */
#udm-list.move-mode-active {
    border: 2px dashed #2196F3;
    background: rgba(33, 150, 243, 0.05);
}

#udm-list.move-mode-active::before {
    content: 'Select a drawing, then choose destination';
    display: block;
    text-align: center;
    padding: 8px;
    background: #2196F3;
    color: white;
    font-size: 12px;
    font-weight: 500;
    margin: -12px -12px 12px -12px;
}

/* Quick Move Buttons */
.drawings-move-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #1a1a1a;
    border-top: 1px solid #333;
    flex-wrap: wrap;
}

.drawings-move-buttons .move-label {
    color: #8aa;
    font-size: 12px;
    font-weight: 500;
    margin-right: 4px;
}

.drawings-move-buttons .move-btn {
    background: #2a2a2a;
    color: #ccc;
    border: 1px solid #444;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.drawings-move-buttons .move-btn:hover {
    background: #3a3a3a;
    border-color: #666;
    color: #fff;
}

.drawings-move-buttons .move-btn.current {
    background: #2a5298;
    border-color: #4a7bc8;
    color: #fff;
    cursor: default;
}

.drawings-move-buttons .move-btn.current::after {
    content: ' ✓';
    font-size: 10px;
}

/* Location Picker for moving drawings between rooms */
.drawings-location-picker {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px;
    z-index: 1000;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.location-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #8696a0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.location-picker-close {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}

.location-picker-close:hover {
    color: #fff;
}

.location-picker-select {
    width: 100%;
    padding: 10px;
    background: #1a1a1a;
    color: #e9edef;
    border: 1px solid #444;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
}

.location-picker-select optgroup {
    color: #8696a0;
    font-weight: bold;
}

.location-picker-select option {
    color: #e9edef;
    padding: 8px;
}

.drawings-preview-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #222;
    position: relative;
    overflow: hidden;
}

.drawings-preview-pane iframe {
    pointer-events: auto;
    touch-action: auto;
}

/* Preview zoom controls */
.preview-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(30, 30, 30, 0.9);
    border-radius: 6px;
    border: 1px solid #444;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.preview-zoom-controls .zoom-btn {
    width: 32px;
    height: 32px;
    background: #333;
    color: #e9edef;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.preview-zoom-controls .zoom-btn:hover {
    background: #444;
    border-color: #666;
}

.preview-zoom-controls .zoom-btn:active {
    background: #555;
}

.preview-zoom-controls .zoom-level {
    min-width: 50px;
    text-align: center;
    color: #e9edef;
    font-size: 13px;
    font-weight: 500;
}

/* Frame container for zoom/pan */
.preview-frame-container {
    flex: 1;
    overflow: auto;
    position: relative;
}

.preview-frame-container iframe {
    transform-origin: 0 0;
    transition: transform 0.1s ease-out;
}

.drawings-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.preview-placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.drawings-preview-placeholder p {
    margin: 0;
    font-size: 14px;
}

.drawings-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: none;
}

.drawings-preview-frame.active {
    display: block;
}

.drawings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #333;
    background: #1a1a1a;
    flex-shrink: 0;
}

.drawings-selected-label {
    color: #8696a0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.drawings-bluebeam-btn {
    background: #2196F3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.drawings-bluebeam-btn:hover {
    background: #1976D2;
}

/* Drawing list item in split view - compact */
.drawing-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
}

.drawing-list-item:hover {
    background: #2a2a2a;
}

.drawing-list-item.selected {
    background: #25d366;
    color: #111;
}

.drawing-list-item.selected .drawing-list-meta {
    color: #333;
}

.drawing-list-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* Drawing thumbnail preview */
.drawing-thumbnail {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 1px solid #444;
    border-radius: 4px;
    background: #1a1a1a;
    pointer-events: none;
    overflow: hidden;
}

.drawing-thumbnail-placeholder {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 1px solid #444;
    border-radius: 4px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.drawing-list-item.selected .drawing-thumbnail {
    border-color: #111;
}

.drawing-list-item.selected .drawing-thumbnail-placeholder {
    border-color: #111;
    background: rgba(0,0,0,0.2);
}

.drawing-list-info {
    flex: 1;
    min-width: 0;
}

.drawing-list-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawing-list-meta {
    font-size: 11px;
    color: #8696a0;
    margin-top: 2px;
}

/* Drawing list item actions */
.drawing-list-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    margin-left: 8px;
}

.drawing-list-item:hover .drawing-list-actions,
.drawing-list-item.selected .drawing-list-actions {
    opacity: 1;
}

.drawing-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}

.drawing-edit-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Drawing type section headers - compact with collapsible */
.drawing-type-section {
    margin-bottom: 16px;
}

.drawing-type-section.collapsed {
    margin-bottom: 8px;
}

.drawing-type-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #e0e6eb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #333;
    margin-bottom: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s ease;
}

.drawing-type-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.drawing-type-section.collapsed .drawing-type-header {
    border-bottom-color: transparent;
    margin-bottom: 0;
}

.drawing-collapse-icon {
    font-size: 10px;
    color: #aab;
    width: 12px;
    text-align: center;
    transition: transform 0.15s ease;
}

.drawing-type-content {
    /* Animation placeholder if needed */
}

.drawing-type-count {
    background: #3a3a3a;
    color: #e0e6eb;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: normal;
    margin-left: auto;
}

/* Sub-category styling (e.g., Buyout under Production) */
.drawing-type-section.sub-category {
    margin-left: 16px;
    border-left: 2px solid #333;
    padding-left: 12px;
}

.drawing-type-section.sub-category .drawing-type-header {
    font-size: 11px;
}

.drawing-type-section.sub-category .drawing-collapse-icon {
    font-size: 9px;
}

/* Empty category styling */
.drawing-type-section.empty .drawing-type-header {
    opacity: 0.7;
}

.drawing-type-count.zero {
    background: #2a2a2a;
    color: #888;
}

.drawing-type-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: #777;
    font-style: italic;
}

/* Drawing group headers (DESIGN, PRODUCTION, DELIVERY) */
.drawing-group-header {
    font-size: 10px;
    font-weight: 700;
    color: #9aa;
    letter-spacing: 1.5px;
    padding: 12px 0 6px 0;
    margin-top: 8px;
    border-top: 1px solid #333;
}

.drawing-group-header:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Drawing Modal */
#drawing-modal .modal-content {
    max-width: 500px;
}

/* ==================== AWMAC TAB ==================== */

.awmac-toolbar {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

.awmac-list {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
}

/* Category Styles */
.awmac-category {
    margin-bottom: 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
}

.awmac-category.collapsed {
    margin-bottom: 8px;
}

.awmac-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #1e1e1e;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s;
}

.awmac-category-header:hover {
    background: #252525;
}

.awmac-collapse-icon {
    font-size: 10px;
    color: #8696a0;
    width: 14px;
}

.awmac-category-name {
    font-size: 13px;
    font-weight: 600;
    color: #e9edef;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.awmac-category-count {
    background: #333;
    color: #8696a0;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.awmac-category-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Drawing Chain Styles */
.awmac-chain {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.awmac-chain.expanded {
    border-color: #25d366;
}

.awmac-chain-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #252525;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.awmac-chain-header:hover {
    background: #2a2a2a;
}

.awmac-chain-toggle {
    font-size: 10px;
    color: #8696a0;
    width: 14px;
}

.awmac-chain-name {
    font-size: 12px;
    font-weight: 500;
    color: #e9edef;
    flex: 1;
}

.awmac-chain-count {
    font-size: 11px;
    color: #25d366;
}

.awmac-chain-latest {
    padding: 8px 12px;
}

.awmac-chain-history {
    border-top: 1px solid #333;
    padding: 8px 12px;
    background: #1a1a1a;
}

.awmac-history-label {
    font-size: 10px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Document Card Styles */
.awmac-doc-card {
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s;
}

.awmac-doc-card:hover {
    border-color: #444;
    background: #282828;
}

.awmac-doc-card.latest {
    border-color: #25d366;
    background: #1a2a1e;
}

.awmac-doc-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.awmac-doc-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.awmac-doc-info {
    flex: 1;
    min-width: 0;
}

.awmac-doc-name {
    font-size: 12px;
    color: #e9edef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.awmac-doc-meta {
    font-size: 10px;
    color: #8696a0;
    margin-top: 2px;
}

.awmac-latest-badge {
    background: #25d366;
    color: #111;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.awmac-doc-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.awmac-doc-actions button {
    background: #333;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}

.awmac-doc-actions button:hover {
    background: #444;
}
/* ==================== DOCUMENTS GENERATOR ==================== */

.documents-container {
    padding: 15px;
}

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

.template-category h4 {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.template-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 10px;
}

.template-card:hover {
    background: #252525;
    border-color: #444;
}

.template-card.selected {
    background: #1a472a;
    border-color: #25d366;
}

.template-card-featured {
    background: linear-gradient(135deg, #0f3460 0%, #1a472a 100%);
    border-color: #25d366;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2);
}

.template-card-featured:hover {
    background: linear-gradient(135deg, #0f3460 0%, #1d5631 100%);
    border-color: #2de370;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.template-icon {
    font-size: 28px;
    flex-shrink: 0;
}

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

.template-name {
    font-weight: 600;
    color: #e9edef;
    margin-bottom: 4px;
}

.template-desc {
    font-size: 12px;
    color: #8696a0;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-type {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    background: #2a2a2a;
    color: #8696a0;
    border-radius: 3px;
    text-transform: uppercase;
}

/* ==================== DOCUMENTS VIEW STYLES ==================== */

#documents-view {
    padding: 20px;
    background: #0a0a0a;
}

.view-header-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Summary Row */
.docs-summary-row {
    display: flex;
    gap: 16px;
    padding: 16px 0 20px 0;
}

.docs-summary-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
    min-width: 100px;
}

.docs-summary-value {
    font-size: 28px;
    font-weight: 700;
    color: #e9edef;
    display: block;
    margin-bottom: 4px;
}

.docs-summary-value.accent {
    color: #25d366;
}

.docs-summary-value.danger {
    color: #e74c3c;
}

.docs-summary-label {
    font-size: 12px;
    color: #8696a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filter Bar */
.docs-filter-bar {
    display: flex;
    gap: 8px;
    padding-bottom: 16px;
    flex-wrap: wrap;
}

/* Ledger Container */
.docs-ledger-container {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.docs-ledger-container .data-table {
    width: 100%;
}

/* Templates Container */
.docs-templates-container {
    padding: 0;
}

.section-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-title {
    font-size: 16px;
    color: #e9edef;
    margin: 0 0 8px 0;
}

.empty-subtitle {
    font-size: 13px;
    color: #8696a0;
    margin: 0;
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 40px;
}

.loading-state p {
    margin-top: 12px;
    color: #8696a0;
}

.loading-text {
    color: #8696a0;
}

.empty-message {
    color: #8696a0;
    grid-column: 1 / -1;
}

/* Template Form Panel */
.template-form-panel {
    margin-top: 24px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 24px;
    border-radius: 8px;
}

.form-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
}

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

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #e9edef;
    font-size: 14px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    background: #0a0a0a;
    color: #e9edef;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

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

.form-input::placeholder,
.form-textarea::placeholder {
    color: #6a6a6a;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #25d366;
}

.form-select:focus {
    outline: none;
    border-color: #25d366;
}

/* Dropdown option styling - critical for dark theme visibility */
.form-select option {
    background: #1a1a1a;
    color: #e9edef;
    padding: 8px;
}

.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background: #2a3942;
    color: #e9edef;
}

/* Static value display - used when form field is read-only/pre-determined */
.form-static-value {
    width: 100%;
    padding: 10px 12px;
    background: #0a0a0a;
    color: #e9edef;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.form-actions,
.modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.modal-actions > button {
    flex: 1;
}

.form-hint {
    font-size: 11px;
    opacity: 0.7;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-full-width {
    grid-column: span 2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    margin-top: 24px;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #25d366;
}

.form-row-unequal {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    margin-bottom: 15px;
}

.form-label-uppercase {
    display: block;
    color: #8696a0;
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.category-btn {
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}

.category-btn-hardware { background: #f57c00; }
.category-btn-contract { background: #2196F3; }
.category-btn-awmac { background: #9c27b0; }
.category-btn-doors { background: #795548; }

.scroll-list {
    flex: 1;
    overflow-y: auto;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    min-height: 200px;
    max-height: 300px;
}

.secondary-btn {
    background: #2a2a2a;
    color: #e9edef;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.secondary-btn:hover {
    background: #3a3a3a;
    border-color: #4a4a4a;
}

/* Generated Document Panel */
.generated-doc-panel {
    margin-top: 24px;
    padding-bottom: 40px;
}

.document-preview-box {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 20px;
    border-radius: 8px;
}

/* ==================== DIRECTORY STYLES ==================== */

.org-type-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.org-type-badge.type-client {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
}

.org-type-badge.type-contractor {
    background: rgba(234, 88, 12, 0.15);
    color: #fb923c;
}

.org-type-badge.type-subcontractor {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.org-type-badge.type-vendor {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.org-type-badge.type-design_authority {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
}

.org-type-badge.type-internal {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.org-type-badge.type-installer {
    background: rgba(139, 195, 74, 0.15);
    color: #8BC34A;
}

.org-type-badge.type-other {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.org-type-badge.type-unknown {
    background: rgba(158, 158, 158, 0.15);
    color: #9E9E9E;
}

.org-type-badge.type-engineering {
    background: rgba(3, 169, 244, 0.15);
    color: #03A9F4;
}

#directory-view .control-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 20px;
    align-items: center;
    justify-content: flex-start;
}

#directory-view .control-bar .action-btn {
    margin-left: auto;
}

#directory-view .search-input {
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #e9edef;
}

#directory-view .filter-select {
    padding: 8px 12px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #e9edef;
}

#directory-view .icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#directory-view .icon-btn:hover {
    opacity: 1;
}

/* Directory tables scrollability - main rules at line ~8658 */
/* Scrollbar styling */
#organizations-list-container,
#contacts-list-container {
    border-radius: 8px;
    background: #1e1e1e;
}

#organizations-list-container::-webkit-scrollbar,
#contacts-list-container::-webkit-scrollbar {
    width: 8px;
}

#organizations-list-container::-webkit-scrollbar-track,
#contacts-list-container::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#organizations-list-container::-webkit-scrollbar-thumb,
#contacts-list-container::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

#organizations-list-container::-webkit-scrollbar-thumb:hover,
#contacts-list-container::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Alpha selector styling */
#orgs-alpha-selector,
#contacts-alpha-selector {
    background: #1a1a1a;
    border-radius: 6px;
    padding: 4px 2px;
    margin-top: 0;
}

#orgs-alpha-selector button,
#contacts-alpha-selector button {
    width: 32px !important;
    height: 28px !important;
    font-size: 16px !important;
    font-weight: 500;
    color: #8696a0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#orgs-alpha-selector button:hover,
#contacts-alpha-selector button:hover {
    background: #333;
    color: #e9edef;
}

#orgs-alpha-selector button.active,
#contacts-alpha-selector button.active {
    background: #00a884;
    color: white;
}

/* Alpha selector scrollbar - match directory style */
#orgs-alpha-selector::-webkit-scrollbar,
#contacts-alpha-selector::-webkit-scrollbar {
    width: 4px;
}

#orgs-alpha-selector::-webkit-scrollbar-track,
#contacts-alpha-selector::-webkit-scrollbar-track {
    background: transparent;
}

#orgs-alpha-selector::-webkit-scrollbar-thumb,
#contacts-alpha-selector::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 2px;
}

#orgs-alpha-selector::-webkit-scrollbar-thumb:hover,
#contacts-alpha-selector::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#directory-view .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #1e1e1e;
}

#directory-view .data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

#directory-view .data-table th {
    background: #2a2a2a;
    padding: 12px 15px;
    text-align: left;
    font-weight: 500;
    color: #8696a0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #3a3a3a;
}

#directory-view .data-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #2a2a2a;
    color: #e9edef;
    font-size: 13px;
}

/* Checkbox column (first column) - compact */
#directory-view .data-table td:first-child {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
    padding: 6px 4px;
    text-align: center;
}

/* Name column (second column) - show full name, wrap if needed */
#directory-view .data-table td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
    min-width: 180px;
}

/* Type column (third column) - compact badge display */
#directory-view .data-table td:nth-child(3) {
    white-space: nowrap;
}

/* Other columns (4+) - truncate with ellipsis */
#directory-view .data-table td:nth-child(n+4) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

#directory-view .data-table th {
    padding: 8px 10px;
}

#directory-view .data-table td.address-cell {
    max-width: 220px;
    font-size: 12px;
    color: #8696a0;
}

#directory-view .data-table tbody tr:hover {
    background: #2a2a2a;
}

#directory-view .data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Organization type filter buttons */
.org-type-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 600px;
}

.org-type-filter-btn {
    padding: 6px 12px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    color: #8696a0;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.org-type-filter-btn:hover {
    background: #3a3a3a;
    color: #e9edef;
}

.org-type-filter-btn.active {
    background: #00a884;
    border-color: #00a884;
    color: #fff;
}

/* Organization Contacts Section in Modal */
.org-contacts-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #3a3a3a;
}

.org-contacts-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.org-contacts-section .section-header label {
    font-weight: 600;
    color: #e9edef;
}

.add-contact-link {
    background: none;
    border: 1px solid #00a884;
    color: #00a884;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.add-contact-link:hover {
    background: #00a884;
    color: #fff;
}

.org-contacts-list {
    max-height: 200px;
    overflow-y: auto;
}

.org-contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #2a2a2a;
    border-radius: 4px;
    margin-bottom: 6px;
}

.org-contact-item:last-child {
    margin-bottom: 0;
}

.org-contact-info {
    flex: 1;
}

.org-contact-name {
    font-weight: 500;
    color: #e9edef;
    font-size: 13px;
}

.org-contact-details {
    font-size: 11px;
    color: #8696a0;
    margin-top: 2px;
}

.org-contact-actions {
    display: flex;
    gap: 5px;
}

.org-contact-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
}

.org-contact-actions button:hover {
    opacity: 1;
}

/* Secondary action button */
.action-btn.secondary {
    background: #3a3a3a;
    color: #e9edef;
}

.action-btn.secondary:hover {
    background: #4a4a4a;
}

/* Duplicates Modal */
.duplicate-group {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.duplicate-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3a3a3a;
}

.duplicate-group-name {
    font-weight: 600;
    color: #e9edef;
    font-size: 14px;
}

.duplicate-group-stats {
    font-size: 12px;
    color: #8696a0;
}

.duplicate-org-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #1e1e1e;
    border-radius: 4px;
    margin-bottom: 6px;
    gap: 10px;
}

.duplicate-org-item:last-child {
    margin-bottom: 0;
}

.duplicate-org-radio {
    accent-color: #00a884;
}

.duplicate-org-info {
    flex: 1;
}

.duplicate-org-name {
    font-weight: 500;
    color: #e9edef;
    font-size: 13px;
}

.duplicate-org-details {
    font-size: 11px;
    color: #8696a0;
    margin-top: 2px;
}

.duplicate-org-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #00a884;
    color: #fff;
    border-radius: 3px;
}

.merge-group-btn {
    padding: 6px 12px;
    background: #00a884;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.merge-group-btn:hover {
    background: #00c49a;
}

.merge-group-btn:disabled {
    background: #3a3a3a;
    cursor: not-allowed;
}

/* =============================================================================
   CONTACT QUICK ACTIONS MENU
   ============================================================================= */

.quick-actions-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-actions-menu {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 16px;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.quick-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border);
}

.quick-actions-contact-info {
    flex: 1;
}

.quick-actions-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 4px;
}

.quick-actions-org {
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.quick-actions-title {
    font-size: 11px;
    color: var(--theme-text-secondary);
    font-style: italic;
}

.quick-actions-close {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 18px;
    line-height: 1;
}

.quick-actions-close:hover {
    color: var(--theme-text-primary);
}

.quick-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--theme-surface-hover);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--theme-text-primary);
    font-size: 13px;
    text-align: left;
    transition: all 0.15s ease;
}

.quick-action-btn:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

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

.quick-action-btn:disabled:hover {
    background: var(--theme-surface-hover);
    border-color: var(--theme-border);
    color: var(--theme-text-secondary);
}

.quick-action-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.quick-action-text {
    display: flex;
    flex-direction: column;
}

.quick-action-label {
    font-weight: 500;
}

.quick-action-value {
    font-size: 11px;
    color: var(--theme-text-secondary);
    margin-top: 2px;
}

.quick-action-btn:hover .quick-action-value {
    color: rgba(255, 255, 255, 0.8);
}

/* Contact row clickable */
#contacts-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

#contacts-table tbody tr:hover {
    background: var(--theme-surface-hover);
}

/* Copied toast notification */
.copy-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 2000;
    animation: toastFade 2s ease forwards;
}

@keyframes toastFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* =============================================================================
   ORGANIZATION TREE VIEW - Expandable contacts
   ============================================================================= */

/* Organization row styling */
.org-row {
    cursor: default;
    transition: background 0.15s ease;
}

.org-row.has-contacts {
    cursor: pointer;
}

.org-row.has-contacts:hover {
    background: var(--theme-surface-hover);
}

.org-row.expanded {
    background: var(--theme-surface-hover);
    border-left: 3px solid var(--theme-primary);
}

/* Expand/collapse icon */
.org-expand-icon {
    display: inline-block;
    width: 16px;
    margin-right: 6px;
    font-size: 10px;
    color: var(--theme-text-secondary);
    transition: transform 0.15s ease;
}

.org-row.has-contacts .org-expand-icon {
    color: var(--theme-primary);
}

/* Contact count badge */
.contact-count-badge {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--theme-surface-hover);
    color: var(--theme-text-secondary);
}

.contact-count-badge.has-contacts {
    background: var(--theme-primary);
    color: #fff;
    font-weight: 600;
}

/* Contact tree rows */
.contact-tree-row {
    background: rgba(var(--theme-primary-rgb, 37, 211, 102), 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
}

.contact-tree-row:hover {
    background: rgba(var(--theme-primary-rgb, 37, 211, 102), 0.12);
}

.contact-tree-cell {
    padding: 4px 12px !important;
    font-size: 13px;
    color: var(--theme-text-secondary);
    border-bottom: 1px solid var(--theme-border);
}

.contact-tree-name {
    color: var(--theme-text-primary);
    font-weight: 500;
}

.contact-tree-title {
    color: var(--theme-text-secondary);
    font-weight: 400;
    font-size: 12px;
}

.tree-indent {
    color: var(--theme-border);
    font-family: monospace;
    margin-right: 4px;
    -webkit-user-select: none;
    user-select: none;
}

.contact-tree-email {
    color: var(--theme-primary);
}

.contact-tree-loading,
.contact-tree-error {
    padding: 12px 20px;
    text-align: center;
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.contact-tree-error {
    color: #ff6b6b;
}

/* Tree action buttons */
.contact-tree-actions {
    text-align: right;
}

.tree-action-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.contact-tree-row:hover .tree-action-btn {
    opacity: 1;
}

.tree-action-btn:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* ==========================================
   Drawing Management Panel Styles
   ========================================== */

.dm-modal-content {
    width: 800px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
    border-radius: 12px;
}

.dm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    background: #252525;
    border-radius: 12px 12px 0 0;
}

.dm-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #e9edef;
}

.dm-close-btn {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.dm-close-btn:hover {
    color: #e9edef;
}

.dm-tabs {
    display: flex;
    gap: 0;
    background: #2a2a2a;
    border-bottom: 1px solid #333;
}

.dm-tab {
    flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #8696a0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.dm-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e9edef;
}

.dm-tab.active {
    color: #2196F3;
    border-bottom-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
}

.dm-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 400px;
}

.dm-loading,
.dm-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #8696a0;
    gap: 8px;
}

.dm-error {
    color: #f44336;
}

.dm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #8696a0;
    text-align: center;
}

.dm-empty-small {
    color: #666;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.dm-help-text {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* Form Styles */
.dm-form-section {
    margin-bottom: 24px;
}

.dm-form-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: #8696a0;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dm-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.dm-form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-form-field.dm-small {
    flex: 0 0 100px;
}

.dm-form-field.dm-full-width {
    flex: 1 0 100%;
}

.dm-form-field label {
    font-size: 12px;
    color: #8696a0;
    font-weight: 500;
}

.dm-form-field input,
.dm-form-field select {
    padding: 10px 12px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    color: #e9edef;
    font-size: 14px;
    transition: border-color 0.15s;
}

.dm-form-field input:focus,
.dm-form-field select:focus {
    outline: none;
    border-color: #2196F3;
}

.dm-form-field input::placeholder {
    color: #555;
}

.dm-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #333;
}

/* Buttons */
.dm-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #444;
    background: #2a2a2a;
    color: #e9edef;
}

.dm-btn:hover {
    background: #3a3a3a;
    border-color: #555;
}

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

.dm-btn-primary {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.dm-btn-primary:hover {
    background: #1976D2;
    border-color: #1976D2;
}

.dm-btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    background: #2a2a2a;
    border: 1px solid #444;
    color: #ccc;
    cursor: pointer;
    transition: all 0.15s;
}

.dm-btn-small:hover {
    background: #3a3a3a;
    border-color: #666;
    color: #fff;
}

.dm-btn-back {
    background: none;
    border: none;
    color: #2196F3;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    margin-right: 12px;
}

.dm-btn-back:hover {
    color: #64B5F6;
}

/* Section Header */
.dm-section-header {
    margin-bottom: 16px;
}

.dm-section-header h3,
.dm-section-header h4 {
    margin: 0 0 4px 0;
    color: #e9edef;
    font-size: 16px;
}

/* Table Styles */
.dm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dm-table th {
    text-align: left;
    padding: 10px 12px;
    background: #2a2a2a;
    color: #8696a0;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #333;
}

.dm-table td {
    padding: 12px;
    border-bottom: 1px solid #333;
    color: #e9edef;
}

.dm-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.dm-table .dm-description {
    color: #8696a0;
    font-size: 13px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-series-counter {
    font-family: monospace;
    background: #333;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.dm-series-actions {
    margin-top: 16px;
}

/* Add Series Form */
.dm-add-series-form,
.dm-add-set-form {
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.dm-add-series-form h4,
.dm-add-set-form h4 {
    margin: 0 0 12px 0;
    color: #2196F3;
    font-size: 14px;
}

/* Sets Tab */
.dm-sets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.dm-set-card {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.15s;
}

.dm-set-card:hover {
    border-color: #666;
    background: #333;
}

.dm-set-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.dm-set-name {
    font-size: 16px;
    font-weight: 500;
    color: #e9edef;
}

.dm-set-type {
    font-size: 11px;
    padding: 3px 8px;
    background: #2196F3;
    color: #fff;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.dm-set-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #8696a0;
    margin-bottom: 8px;
}

.dm-issued {
    color: #4CAF50;
}

.dm-draft {
    color: #ff9800;
}

.dm-set-description {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}

.dm-set-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #444;
}

.dm-sets-actions {
    margin-top: 20px;
}

/* Set Detail View */
.dm-set-detail {
    max-width: 600px;
}

.dm-detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.dm-detail-header h3 {
    margin: 0;
    font-size: 20px;
    color: #e9edef;
    flex: 1;
}

.dm-detail-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #8696a0;
    margin-bottom: 12px;
}

.dm-detail-desc {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
}

.dm-set-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-set-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #2a2a2a;
    border-radius: 6px;
}

.dm-set-item:hover {
    background: #333;
}

.dm-item-order {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #444;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: #999;
}

.dm-item-name {
    flex: 1;
    color: #e9edef;
    font-size: 14px;
}

.dm-item-number {
    font-family: monospace;
    color: #8696a0;
    font-size: 13px;
}

.dm-item-rev {
    color: #666;
    font-size: 12px;
}

.dm-remove-item {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0;
    transition: all 0.15s;
}

.dm-set-item:hover .dm-remove-item {
    opacity: 1;
}

.dm-remove-item:hover {
    color: #f44336;
}

.dm-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #333;
}

/* Properties Display (Read-Only) */
.dm-properties-display {
    max-width: 700px;
}

.dm-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(33, 150, 243, 0.15);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #8696a0;
}

.dm-info-icon {
    font-size: 16px;
}

.dm-link-btn {
    background: none;
    border: none;
    color: #2196F3;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.dm-link-btn:hover {
    color: #64B5F6;
}

.dm-display-section {
    margin-bottom: 24px;
}

.dm-display-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: #8696a0;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

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

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

.dm-display-item.dm-full-width {
    grid-column: 1 / -1;
}

.dm-display-item label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dm-display-value {
    font-size: 15px;
    color: #e9edef;
    padding: 8px 12px;
    background: #2a2a2a;
    border-radius: 6px;
    border: 1px solid #333;
}

.dm-display-link {
    font-size: 14px;
    color: #2196F3;
    text-decoration: none;
    padding: 8px 12px;
    background: #2a2a2a;
    border-radius: 6px;
    border: 1px solid #333;
    display: inline-block;
}

.dm-display-link:hover {
    color: #64B5F6;
    border-color: #2196F3;
}

.dm-status-badge {
    text-transform: capitalize;
}

.dm-notes-box {
    padding: 12px 16px;
    background: #2a2a2a;
    border-radius: 6px;
    border: 1px solid #333;
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* =============================================================================
   SCROLL BEHAVIOR STANDARDS
   =============================================================================

   IMPORTANT: These rules ensure all views and modals remain scrollable when
   content exceeds viewport dimensions. Apply these patterns consistently.

   RULES FOR NEW COMPONENTS:

   1. MODALS:
      - Always set max-height: 90vh (or less) on .modal-content
      - Always add overflow-y: auto to scrollable content areas
      - Use display: flex; flex-direction: column for proper layout
      - Add padding to account for safe areas on mobile

   2. PAGE VIEWS (.main-view):
      - Parent has overflow: hidden (to contain scroll)
      - Content area should have overflow-y: auto
      - Use flex: 1; min-height: 0 for proper flex scrolling

   3. DATA TABLES:
      - Wrap in a container with overflow-y: auto and max-height
      - Use position: sticky on thead for fixed headers

   4. ZOOM CONSIDERATIONS:
      - Never use fixed heights without scroll fallback
      - Test at 150% zoom to verify scroll behavior
      - Use max-height with viewport units (vh) not fixed px

   ============================================================================= */

/* Global Modal Scroll Fix - Ensures all modals are scrollable */
.modal {
    overflow-y: auto;
    padding: 20px;
}

.modal-content {
    max-height: calc(90vh - 40px);
    overflow-y: auto;
    margin: auto;
}

/* Organization Modal - Specific scroll fix */
#org-modal .modal-content {
    max-height: calc(90vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#org-modal #org-form {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Directory Contact Modal - Specific scroll fix */
#dir-contact-modal .modal-content {
    max-height: calc(90vh - 40px);
    overflow-y: auto;
}

/* Directory View - Ensure table area scrolls */
#directory-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#directory-view .view-header {
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 20px 20px 16px;
}

#directory-view .control-bar {
    flex-shrink: 0;
}

#directory-orgs-section,
#directory-contacts-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#directory-orgs-section .table-container,
#directory-contacts-section .table-container {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Ensure orgs-count doesn't break flex layout */
#orgs-count,
#contacts-count {
    flex-shrink: 0;
    padding: 8px 20px 4px;
}

/* Alpha selector - scroll independently */
#orgs-alpha-selector,
#contacts-alpha-selector {
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 100%;
}

/* List containers - scroll independently */
#organizations-list-container,
#contacts-list-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Samples View - Scroll fix */
#samples-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#samples-view .samples-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

#samples-job-list-view,
#samples-job-detail-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Generic scroll container utility class */
.scroll-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* =============================================================================
   COMPREHENSIVE SCROLL FIX - ALL VIEWS

   Pattern: Every view needs this chain for scrolling to work:
   1. Parent: display: flex; flex-direction: column; min-height: 0; overflow: hidden;
   2. Header: flex-shrink: 0; (prevents header from shrinking)
   3. Content: flex: 1; min-height: 0; overflow-y: auto; (scrollable area)

   DO NOT use padding on flex parents - move padding to content wrapper.
   ============================================================================= */

/* Factory Orders View - Scroll Fix */
#factory-orders-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;  /* Remove padding from flex parent */
    background: #0a0a0a;
}

#factory-orders-view .view-header {
    flex-shrink: 0;
    padding: 20px 20px 0;
}

#fo-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 20px;
}

/* Resources View - Scroll Fix */
#resources-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#resources-view .view-header {
    flex-shrink: 0;
}

#job-resources-section,
#shop-resources-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#resources-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 20px;
    padding: 0 20px 20px;
}

.resource-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.resource-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

#vendors-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#vendors-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Courier View - Scroll Fix */
#courier-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#courier-view .view-header {
    flex-shrink: 0;
}

#shipments-section,
#addresses-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#shipments-section .control-bar,
#addresses-section .control-bar {
    flex-shrink: 0;
}

.courier-list,
#shipments-list,
#addresses-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
}

/* Procurement View - Scroll Fix */
#procurement-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#procurement-view .view-header {
    flex-shrink: 0;
}

.procurement-summary {
    flex-shrink: 0;
}

/* Procurement sections (Materials, Quotes, PO) */
#materials-section,
#quotes-section,
#po-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.procurement-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

/* Documents View - Scroll Fix */
#documents-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;  /* Remove padding from flex parent */
    background: #0a0a0a;
}

#documents-view .view-header {
    flex-shrink: 0;
    padding: 20px 20px 0;
}

/* Summary and filters are fixed at top */
#documents-summary,
#documents-filters {
    flex-shrink: 0;
    padding: 0 20px;
}

/* Actual section IDs from HTML: docs-templates-section, docs-ledger-section */
#docs-templates-section,
#docs-ledger-section,
.docs-templates-container,
.docs-ledger-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 20px;
}

/* Document Creator iframe */
.document-creator-iframe {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 200px);
    border: none;
    flex: 1;
}

#docs-templates-section {
    padding: 0;
    overflow: hidden;
}

/* Staging iframe */
.staging-iframe {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 120px);
    border: none;
    flex: 1;
}

#staging-view {
    padding: 0;
    overflow: hidden;
}
/* Template cards container */
.template-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding-bottom: 20px;
}

/* Document generator section */
.document-generator {
    flex-shrink: 0;
    margin-top: 20px;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 8px;
}

/* Prevent body scroll when modal is open (optional) */
body.modal-open {
    overflow: hidden;
}

/* Responsive scroll fixes for small screens / high zoom */
@media screen and (max-height: 600px) {
    .modal-content {
        max-height: calc(95vh - 20px);
    }

    .modal {
        padding: 10px;
    }
}

/* High zoom level fixes (150%+) */
@media screen and (max-width: 960px) {
    .modal-content {
        max-height: calc(95vh - 20px);
        width: 95%;
    }

    #org-modal .modal-content,
    #dir-contact-modal .modal-content {
        max-width: 95vw;
    }
}

/* =============================================================================
   VERIFIED FILTER & CHECKBOX STYLES
   ============================================================================= */

/* Verified filter button group */
.verified-filter-group {
    display: flex;
    gap: 2px;
    background: #2a2a2a;
    padding: 2px;
    border-radius: 4px;
    border: 1px solid #3a3a3a;
}

.verified-filter-group .filter-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #8696a0;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.verified-filter-group .filter-btn:hover {
    background: #3a3a3a;
    color: #e9edef;
}

.verified-filter-group .filter-btn.active {
    background: #25d366;
    color: #111;
    font-weight: 500;
}

/* Verified checkbox in table */
.verified-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #25d366;
}

.verified-checkbox:checked {
    opacity: 1;
}

.verified-checkbox:not(:checked) {
    opacity: 0.6;
}

/* Verified indicator badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.verified-badge.verified {
    background: rgba(37, 211, 102, 0.2);
    color: #25d366;
}

.verified-badge.unverified {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

/* =============================================================================
   ITEM VIEW - Single item document management modal
   ============================================================================= */

.item-view-content {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.item-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid var(--theme-border);
}

.item-view-header-left {
    flex: 1;
}

.item-view-header-left h2 {
    color: var(--theme-text-primary);
    font-size: 20px;
    margin-bottom: 4px;
}

.item-view-breadcrumb {
    color: var(--theme-text-secondary);
    font-size: 13px;
}

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

.item-view-status-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.item-view-status-summary .status-indicator {
    font-size: 18px;
}

.item-view-status-summary .status-text {
    color: var(--theme-text-secondary);
}

.item-view-close-btn {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
}

.item-view-close-btn:hover {
    color: var(--theme-text-primary);
}

.item-view-loading,
.item-view-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--theme-text-secondary);
}

.item-view-error {
    color: #ef4444;
}

.item-view-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Current Drawing Panel */
.item-view-current-panel {
    background: var(--theme-surface);
    border-radius: 8px;
    padding: 16px;
}

.item-view-current-panel h3 {
    color: var(--theme-text-primary);
    font-size: 14px;
    margin-bottom: 12px;
}

.current-drawing-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--theme-bg);
    border-radius: 6px;
    border: 1px dashed var(--theme-border);
}

.current-drawing-placeholder .placeholder-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.current-drawing-placeholder p {
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.current-drawing-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--theme-bg);
    border-radius: 6px;
    border: 1px solid var(--theme-border);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.current-drawing-card:hover {
    border-color: var(--theme-primary);
}

.current-drawing-icon {
    font-size: 24px;
}

.current-drawing-info {
    flex: 1;
    min-width: 0;
}

.current-drawing-name {
    color: var(--theme-text-primary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-drawing-revision,
.current-drawing-sheet {
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.current-drawing-action {
    color: var(--theme-primary);
}

/* Document Slots Panel */
.item-view-slots-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-view-slots-panel h3 {
    color: var(--theme-text-primary);
    font-size: 14px;
}

.item-view-slots {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slots-empty {
    text-align: center;
    padding: 40px;
    color: var(--theme-text-secondary);
}

/* Slot Category */
.slot-category {
    background: var(--theme-surface);
    border-radius: 8px;
    overflow: hidden;
}

.slot-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--theme-surface-hover);
}

.slot-category-header h4 {
    color: var(--theme-text-primary);
    font-size: 13px;
    font-weight: 500;
}

.slot-category-count {
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.slot-category-slots {
    display: flex;
    flex-direction: column;
}

/* Individual Slot */
.slot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border);
}

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

.slot-indicator {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

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

.slot-name {
    color: var(--theme-text-primary);
    font-size: 13px;
    font-weight: 500;
}

.slot-document {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.slot-document-name {
    color: var(--theme-primary);
    font-size: 12px;
}

.slot-document-revision,
.slot-document-type {
    color: var(--theme-text-secondary);
    font-size: 11px;
}

.slot-external .slot-document-name {
    color: var(--theme-text-secondary);
}

.slot-waiting {
    margin-top: 4px;
}

.slot-waiting-label {
    color: #f59e0b;
    font-size: 11px;
}

.slot-waiting-text {
    color: var(--theme-text-secondary);
    font-size: 12px;
    margin-left: 4px;
}

.slot-waiting-since {
    color: var(--theme-text-secondary);
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.7;
}

.slot-hold {
    margin-top: 4px;
}

/* Drag and Drop States */
.slot-item:not(.slot-complete) {
    transition: all 0.15s ease;
}

.slot-item.slot-drag-over {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.slot-item.slot-drag-over .slot-name::after {
    content: ' — Drop to link';
    color: #10b981;
    font-weight: normal;
    font-size: 11px;
}

.slot-item.slot-uploading {
    opacity: 0.6;
    pointer-events: none;
}

.slot-item.slot-uploading .slot-name::after {
    content: ' — Uploading...';
    color: var(--theme-primary);
    font-weight: normal;
    font-size: 11px;
}

/* Empty slot drop zone styling */
.slot-item:not(.slot-complete) .slot-empty-text {
    color: var(--theme-text-secondary);
    font-size: 12px;
    font-style: italic;
}

.slot-hold-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
}

.slot-hold-reason {
    color: var(--theme-text-secondary);
    font-size: 12px;
    margin-left: 4px;
}

.slot-empty-text {
    color: var(--theme-text-secondary);
    font-size: 12px;
    margin-top: 4px;
}

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

.slot-action-btn {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.slot-action-btn:hover {
    background: var(--theme-surface-hover);
    color: var(--theme-text-primary);
}

.slot-action-btn.active {
    color: #f59e0b;
}

/* =============================================================================
   ROOM VIEW - Room items overview modal
   ============================================================================= */

.room-view-content {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.room-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid var(--theme-border);
}

.room-view-header-left {
    flex: 1;
}

.room-view-header-left h2 {
    color: var(--theme-text-primary);
    font-size: 20px;
    margin-bottom: 4px;
}

.room-view-breadcrumb {
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.room-view-close-btn {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
}

.room-view-close-btn:hover {
    color: var(--theme-text-primary);
}

.room-view-loading,
.room-view-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--theme-text-secondary);
}

.room-view-error {
    color: #ef4444;
}

.room-view-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--theme-border);
}

.room-view-summary {
    display: flex;
    gap: 16px;
}

.summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-value {
    font-size: 24px;
    font-weight: 600;
}

.summary-label {
    color: var(--theme-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
}

.room-view-filters {
    display: flex;
    gap: 4px;
}

.filter-btn {
    background: none;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover {
    border-color: var(--theme-border-hover);
    color: var(--theme-text-primary);
}

.filter-btn.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: white;
}

.room-view-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.room-view-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.items-empty {
    text-align: center;
    padding: 40px;
    color: var(--theme-text-secondary);
}

/* Surface Group */
.surface-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.surface-header {
    color: var(--theme-text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 4px;
}

.surface-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Item Card */
.item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--theme-surface);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.item-card:hover {
    background: var(--theme-surface-hover);
}

.item-card-status {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 14px;
}

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

.item-card-name {
    color: var(--theme-text-primary);
    font-size: 14px;
    font-weight: 500;
}

.item-card-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.item-badge,
.item-type,
.item-sheet {
    color: var(--theme-text-secondary);
    font-size: 11px;
    background: var(--theme-bg);
    padding: 2px 6px;
    border-radius: 4px;
}

.item-card-summary {
    color: var(--theme-text-secondary);
    font-size: 12px;
    margin-top: 4px;
}

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

.item-action-btn {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.item-action-btn:hover {
    background: var(--theme-surface);
    color: var(--theme-text-primary);
}

.item-open-btn {
    color: var(--theme-primary);
}

/* =============================================================================
   GIS SPECIFICATIONS TAB
   ============================================================================= */

/* GIS Header */
.gis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-border);
}

.gis-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gis-grade-badge {
    padding: 4px 12px;
    background: var(--theme-primary);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.gis-grade-badge.economy {
    background: #6b7280;
}

.gis-grade-badge.custom {
    background: #3b82f6;
}

.gis-grade-badge.premium {
    background: #8b5cf6;
}

.gis-sections-summary {
    color: var(--theme-text-secondary);
    font-size: 13px;
}

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

/* GIS Areas List */
.gis-areas-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* GIS Area Card */
.gis-area-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    overflow: hidden;
}

.gis-area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--theme-bg);
    border-bottom: 1px solid var(--theme-border);
}

.gis-area-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gis-area-number {
    background: var(--theme-primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
}

.gis-area-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

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

.gis-area-actions button {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.15s ease;
}

.gis-area-actions button:hover {
    background: var(--theme-surface-hover);
    color: var(--theme-text-primary);
}

.gis-area-actions button.delete:hover {
    color: #ef4444;
}

/* GIS Area Content */
.gis-area-content {
    padding: 16px;
}

.gis-area-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border);
}

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

.gis-meta-label {
    font-size: 11px;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
}

.gis-meta-value {
    font-size: 13px;
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* GIS Spec Sections */
.gis-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.gis-spec-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gis-spec-btn:hover {
    border-color: var(--theme-primary);
    background: var(--theme-surface-hover);
}

.gis-spec-btn.has-data {
    border-color: var(--theme-primary);
    background: rgba(37, 211, 102, 0.1);
}

.gis-spec-btn .spec-icon {
    font-size: 18px;
}

.gis-spec-btn .spec-name {
    font-size: 11px;
    color: var(--theme-text-secondary);
    text-align: center;
    line-height: 1.2;
}

.gis-spec-btn.has-data .spec-name {
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* GIS Casework Section */
.gis-casework-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
}

.gis-casework-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gis-casework-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.gis-add-casework-btn {
    padding: 4px 10px;
    background: var(--theme-surface-hover);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    color: var(--theme-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gis-add-casework-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

/* Casework Cards */
.gis-casework-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gis-casework-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
}

.gis-casework-exposure {
    padding: 4px 8px;
    background: var(--theme-surface-hover);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-primary);
    min-width: 100px;
    text-align: center;
}

.gis-casework-exposure.exposed-interiors {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.gis-casework-exposure.exposed-exteriors {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.gis-casework-exposure.semi-exposed {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.gis-casework-exposure.concealed {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.gis-casework-exposure.drawer-box {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
}

.gis-casework-details {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.gis-casework-detail {
    display: flex;
    gap: 4px;
}

.gis-casework-detail strong {
    color: var(--theme-text-primary);
}

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

.gis-casework-actions button {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.15s ease;
}

.gis-casework-actions button:hover {
    background: var(--theme-surface-hover);
    color: var(--theme-text-primary);
}

.gis-casework-actions button.delete:hover {
    color: #ef4444;
}

/* GIS Empty State */
.gis-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.gis-empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.gis-empty-state h3 {
    color: var(--theme-text-primary);
    font-size: 16px;
    margin-bottom: 8px;
}

.gis-empty-state p {
    color: var(--theme-text-secondary);
    font-size: 13px;
    max-width: 300px;
}

/* GIS Modal Form Styles */
.gis-form-section {
    margin-bottom: 20px;
}

.gis-form-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--theme-border);
}

.gis-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.gis-form-row.single {
    grid-template-columns: 1fr;
}

.gis-form-row.triple {
    grid-template-columns: repeat(3, 1fr);
}

/* GIS Cover Page Specific */
.gis-cover-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
    background: var(--theme-bg);
    border-radius: 8px;
    margin-bottom: 16px;
}

.gis-cover-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gis-cover-field label {
    font-size: 11px;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
}

.gis-cover-field span {
    font-size: 14px;
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* =====================================
   PLASTIC LAMINATE INVENTORY
   ===================================== */

#laminate-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#laminate-section .laminate-controls {
    flex-shrink: 0;
}

.laminate-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================================
   LAMINATE GRID - CSS Grid layout matching Shop View
   Columns: Sample | Category | Manufacturer | Code | Name | Size | Qty | Loc
   ============================================================================ */
.laminate-row {
    display: grid;
    grid-template-columns: 64px 90px 130px 100px 1fr 70px 50px 60px;
    gap: 0 12px;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--theme-border);
    border-left: 4px solid var(--theme-text-primary);
}

.laminate-row:hover {
    background: var(--theme-bg-secondary);
}

.laminate-row.low-stock {
    background: rgba(231, 76, 60, 0.1);
    border-left-color: #e74c3c;
}

/* Header row - sticky */
`.lam-header {
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 600;
    font-size: 12px;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--theme-bg-secondary, #1a1a1a);
    border-bottom: 2px solid var(--theme-text-primary);
    border-left: 4px solid transparent;
    padding: 10px;
}

.lam-header:hover {
    background: var(--theme-bg-secondary);
}

/* Right-align Size, Qty, Location headers */
.lam-header .lam-size,
.lam-header .lam-qty,
.lam-header .lam-loc {
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
    
}

.lam-cat {
    font-size: 13px;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lam-maker {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

.lam-code {
    font-weight: 700;
    font-size: 14px;
    color: var(--theme-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lam-code-link {
    width: 100px;
    font-weight: 700;
    color: var(--theme-accent);
    text-decoration: none;
    display: inline-block;
}

.lam-code-link:hover {
    text-decoration: underline;
}

.lam-code-link::after {
    content: ' ↗';
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s;
}

.lam-code-link:hover::after {
    opacity: 0.7;
}

.lam-name {
    font-size: 14px;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lam-size {
    font-size: 14px;
    color: var(--theme-text-secondary);
    text-align: right;
}

/* Maker button - click to edit entry */
.lam-maker-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--theme-text-primary);
}

.lam-maker-btn:hover {
    background: var(--theme-accent);
    color: white;
    border-color: var(--theme-accent);
}

/* Qty button - click to quick edit quantity */
.lam-qty-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    background: transparent;
    border: 2px solid var(--theme-text-primary);
    cursor: pointer;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.lam-qty-btn:hover {
    border-color: var(--theme-accent);
    background: var(--theme-bg-secondary);
}

.lam-qty-btn.low-stock {
    border-color: #e74c3c;
    color: #e74c3c;
}

.lam-qty {
    width: 70px;
    text-align: center;
    font-weight: 500;
}

.lam-loc {
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

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

.low-tag {
    color: #e74c3c;
    font-weight: 600;
    font-size: 11px;
}

.btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--theme-border);
    background: var(--theme-bg);
    border-radius: 4px;
    cursor: pointer;
}

.btn-sm:hover {
    background: var(--theme-bg-secondary);
}

.btn-sm.btn-del {
    color: #e74c3c;
}

/* Danger button for delete actions */
.btn-danger {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-right: auto;
}

.btn-danger:hover {
    background: #c0392b;
}

`.lam-header {
    font-weight: 600;
    font-size: 12px;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    background: var(--theme-bg-secondary, #1a1a1a);`
    border-bottom: 2px solid var(--theme-border);
}

.lam-header:hover {
    background: var(--theme-bg-secondary);
}

/* Thumbnail column */
.lam-thumb {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lam-thumb-cell {
    width: 40px;
    height: 40px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--theme-bg-secondary);
}

.lam-thumb-cell:hover {
    border-color: var(--theme-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lam-thumb-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lam-capture-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px dashed var(--theme-border);
    border-radius: 4px;
    background: var(--theme-bg);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lam-capture-btn:hover {
    border-color: var(--theme-accent);
    background: var(--theme-bg-secondary);
}

.lam-capture-btn.capturing {
    opacity: 0.6;
    pointer-events: none;
}

/* Laminate Lightbox */
.laminate-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.laminate-lightbox-content {
    background: var(--theme-bg);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
}

.laminate-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--theme-bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-primary);
    z-index: 1;
}

.laminate-lightbox-close:hover {
    background: var(--theme-bg-tertiary);
}

.laminate-lightbox-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #f5f5f5;
    border-radius: 12px 12px 0 0;
}

.laminate-lightbox-info {
    padding: 20px;
}

.laminate-lightbox-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.laminate-lightbox-subtitle {
    color: var(--theme-text-secondary);
    margin-bottom: 16px;
}

.laminate-lightbox-link {
    display: block;
    color: var(--theme-accent);
    text-decoration: none;
    margin-bottom: 16px;
    word-break: break-all;
}

.laminate-lightbox-link:hover {
    text-decoration: underline;
}

.laminate-lightbox-actions {
    display: flex;
    gap: 12px;
}

.laminate-lightbox-actions button {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    background: var(--theme-bg);
    color: var(--theme-text-primary);
}

.laminate-lightbox-actions button:hover {
    background: var(--theme-bg-secondary);
}

.laminate-lightbox-actions button.primary {
    background: var(--theme-accent);
    color: white;
    border-color: var(--theme-accent);
}

.laminate-lightbox-actions button.primary:hover {
    opacity: 0.9;
}

.laminate-card {
    background: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s;
}

.laminate-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.laminate-card.low-stock {
    border-left: 4px solid #e74c3c;
}

.laminate-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.laminate-manufacturer {
    font-weight: 600;
    color: var(--theme-text-primary);
    text-transform: uppercase;
    font-size: 12px;
    background: var(--theme-bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.laminate-pattern {
    font-weight: 700;
    color: var(--theme-accent);
    font-size: 14px;
}

.low-stock-badge {
    font-size: 11px;
    color: #e74c3c;
    font-weight: 600;
    margin-left: auto;
}

.laminate-name {
    font-size: 15px;
    color: var(--theme-text-primary);
    font-weight: 500;
}

.laminate-details {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--theme-text-secondary);
}

.laminate-inventory {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--theme-text-secondary);
    padding: 8px 0;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
}

.laminate-qty strong {
    color: var(--theme-text-primary);
    font-size: 16px;
}

.laminate-location {
    font-size: 12px;
    color: var(--theme-text-tertiary);
}

.laminate-job {
    font-size: 12px;
    color: var(--theme-accent);
    font-style: italic;
}

.laminate-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.btn-small {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.btn-small.btn-edit {
    background: var(--theme-accent);
    color: white;
}

.btn-small.btn-edit:hover {
    background: var(--theme-accent-hover);
}

.btn-small.btn-qty {
    background: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
}

.btn-small.btn-qty:hover {
    background: var(--theme-border);
}

.btn-small.btn-delete {
    background: transparent;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.btn-small.btn-delete:hover {
    background: #e74c3c;
    color: white;
}

/* Sheet size preset buttons */
.sheet-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.sheet-preset-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--theme-text-primary);
    transition: all 0.2s;
}

.sheet-preset-btn:hover,
.sheet-preset-btn.active {
    background: var(--theme-accent);
    color: white;
    border-color: var(--theme-accent);
}

/* ======================================
   LAMINATE MODAL - Mobile Optimized
   ====================================== */

.laminate-modal-content {
    max-width: 400px;
    width: 90%;
    text-align: left;
    display: block;  /* Ensure block layout, not flex */
}

.laminate-modal-content h2 {
    text-align: center;
    margin-bottom: 20px;
}

.laminate-modal-content .form-group {
    margin-bottom: 16px;
}

.laminate-modal-content .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.laminate-modal-content .form-actions button {
    flex: 1;
    padding: 12px;
}

.laminate-modal-content .form-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.laminate-modal-content .form-input,
.laminate-modal-content .form-select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 12px;
    min-height: 44px; /* Touch-friendly */
}

/* Sheet size presets container */
.sheet-size-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sheet-size-presets .sheet-preset-btn {
    flex: 1;
    min-width: 60px;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 500;
}

/* Size input row */
.laminate-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.laminate-size-row .form-input {
    flex: 1;
    text-align: center;
}

.laminate-size-row .size-separator {
    color: var(--theme-text-secondary);
    font-size: 18px;
    font-weight: 300;
}

/* Mobile breakpoint */
@media screen and (max-width: 480px) {
    .laminate-modal-content {
        width: 95%;
        padding: 20px;
        max-width: none;
        margin: 10px;
    }

    .laminate-modal-content .form-input,
    .laminate-modal-content .form-select {
        font-size: 16px;
        padding: 14px;
    }

    .sheet-size-presets .sheet-preset-btn {
        padding: 12px 8px;
    }

    .laminate-modal-content .form-actions {
        flex-direction: column;
        gap: 10px;
    }

    .laminate-modal-content .form-actions button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
}

/* Laminate section control bar - stacked layout */
.laminate-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    align-items: center;
}

.laminate-controls .action-btn {
    flex: 0 0 auto;
}

.laminate-controls .form-select {
    width: auto;
    min-width: 120px;
}

.laminate-controls .form-input {
    flex: 1;
    min-width: 150px;
    max-width: 250px;
}

/* Shop View button - opens standalone laminate page */
.shop-view-btn {
    background: #25d366;
    color: #111;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}

.shop-view-btn:hover {
    background: #20ba5a;
}

@media screen and (max-width: 600px) {
    .laminate-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .laminate-controls .action-btn,
    .laminate-controls .form-select,
    .laminate-controls .form-input {
        width: 100%;
        max-width: none;
    }
}

/* Laminate section header */
#laminate-section .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--theme-border);
    flex-wrap: wrap;
}

/* Empty state */
.laminate-grid .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--theme-text-tertiary);
    font-size: 14px;
}

/* Detect Chrome autofill via animation */
@keyframes onAutoFillStart {
  from { opacity: 1; }
  to { opacity: 1; }
}

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}


/* Category Filter Pills (Resources View) */
.category-pills {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid #3a3a3a;
}

.category-pill {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #4a5568;
  color: #e9edef;
  cursor: pointer;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.15s ease;
}

.category-pill:hover {
  background: rgba(255, 255, 255, 0.1);
}

.category-pill.active {
  background: #e9edef;
  color: #0a0a0a;
  border-color: #e9edef;
}

.category-pill.projects {
  border-color: #4ade80;
  color: #4ade80;
}

.category-pill.projects.active {
  background: #4ade80;
  color: #0a0a0a;
}


/* Assignment Tags (Resources Laminate View) */
.lam-assignments {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 12px 8px;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lam-assignment-tag {
  padding: 3px 8px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: #4ade80;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* Auth checking state - prevents login flash on back navigation */
body.auth-checking #login-modal {
  display: none !important;
}
body.auth-checking::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary, #0f172a);
  z-index: 9999;
}
body.auth-checking::after {
  content: 'Authenticating...';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-secondary, #94a3b8);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  z-index: 10000;
}