/* 
   DESIGN TOKENS - Synchronized with TAK Tock
   Twin UI Strategy: 100% Visual Parity
*/
:root {
    --primary: #FF7C4F;
    --primary-hover: #E56C28;
    --text-main: #555555;
    --text-light: #888888;
    --accent: #000000;
    --border: #DFE1E7;
    --bg-window: #F3F5FA;
    --bg-content: #FFFFFF;
    --sidebar-width: 260px;
    --sidebar-active-bg: #1A1A1A;
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --radius: 8px;
    --radius-sm: 4px;
}

/* Global Panning State */
html.panning-mode,
html.panning-mode body,
.panning-mode #pdf-viewer-container,
.panning-mode #canvas-wrapper,
.panning-mode canvas {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

html.panning-mode .symbols-layer,
html.panning-mode .measurements-layer,
html.panning-mode .markups-layer {
    pointer-events: none !important;
}

#pdf-viewer-container {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

html.panning-mode #pdf-viewer-container {
    scroll-behavior: auto !important;
}


.ui-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    filter: grayscale(1) !important;
}

/* Header Status Message (Centered) */
.header-status {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
    border: 1px solid var(--border);
    opacity: 1;
}

.header-status.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    pointer-events: none;
}

.header-status.success {
    background: #ecfdf5;
    color: #059669;
    border-color: #10b981;
}

.header-status.error {
    background: #fef2f2;
    color: #dc2626;
    border-color: #ef4444;
}

.header-status.info {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #0ea5e9;
}

.header-status svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/*
   FORCE ICON VISIBILITY
   Targeting Lucide SVGs with specific colors based on context
*/

/* Global App SVG Reset */
.takeoff-wp-app svg.lucide,
.takeoff-wp-app .btn-icon svg,
.takeoff-wp-app .tool-btn svg,
.takeoff-wp-app .sidebar-item svg {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.5px !important;
    fill: none !important;
    vertical-align: middle;
}

/* 1. Sidebar Icons - Should be White/Light on Dark Sidebar */
.sidebar .logo svg,
.sidebar .sidebar-item svg {
    stroke: #FFFFFF !important;
}

/* 2. Toolbar & Workspace Icons - Should be Dark Gray on Light Background */
.toolbar svg,
.header-pill svg,
.btn-icon svg,
.table-view svg {
    stroke: #444444 !important;
}

/* 3. Equipment & Brand Icons - Should be Primary Orange */
.properties-panel svg,
.eq-item i svg,
.eq-item svg {
    stroke: var(--primary) !important;
}

/* 4. Hover States */
.btn-icon:hover svg,
.sidebar-item:hover svg {
    stroke: var(--primary) !important;
}

/* 5. Special Fix for the Fit-to-Page circular button */
#zoom-fit svg {
    stroke: #444444 !important;
}

/* 6. CRITICAL OVERRIDE for Markup Bar & Property Toolbars (Fixes Invisible Icons) */
/* NOTE: Excludes .btn-confirm and .btn-primary which need WHITE icons */
#markup-bar button:not(.btn-confirm):not(.btn-primary):not(.active) svg,
#sub-toolbar button.btn-cancel:not(.active) svg,
#sub-toolbar button.btn-icon:not(.active) svg,
.is-visible button:not(.btn-confirm) svg,
#auto-takeoff-bar button.btn-cancel svg,
.markup-properties-bar button:not(.btn-confirm) svg {
    stroke: #333333 !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    min-width: 16px;
}

/* Dropdown text visibility */
#markup-line-style,
#markup-start-arrow,
#markup-end-arrow {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure dropdowns (Selects) are visible in WP */
#markup-bar select,
#markup-bar input {
    color: #333333 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #ccc !important;
    opacity: 1 !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

#markup-bar select option {
    color: #333333 !important;
    background-color: #FFFFFF !important;
    padding: 8px !important;
    font-size: 13px !important;
}

/* Opacity Input - proper width */
#markup-opacity {
    width: 60px !important;
    text-align: center !important;
}

/* Stroke Width Input - proper width */
#markup-stroke-width {
    width: 60px !important;
    text-align: center !important;
}

/* Line Style Dropdown - ensure content shows correctly */
#markup-line-style {
    min-width: 80px !important;
    font-family: Arial, sans-serif !important;
    padding-right: 24px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px !important;
}

/* Font Size Dropdown - proper width */
#markup-font-size {
    min-width: 70px !important;
    text-align: center !important;
    font-size: 13px !important;
    padding-right: 24px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px !important;
}

/* Arrow Dropdowns - ensure symbols show */
#markup-start-arrow,
#markup-end-arrow {
    min-width: 60px !important;
    text-align: center !important;
    font-size: 14px !important;
    padding-right: 20px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 8px !important;
}

/* Project Dropdown (Sidebar) - Fix visibility - MAXIMUM SPECIFICITY */
.takeoff-wp-app #project-select,
.sidebar #project-select,
#project-select {
    background: #2A2A2A !important;
    color: #FFFFFF !important;
    border: 1px solid #555 !important;
    border-radius: 6px !important;
    padding: 0 30px 0 12px !important;
    height: 44px !important;
    line-height: 42px !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    z-index: 2000 !important;
    /* Ensure clickable over sidebar bg */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AAAAAA' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.takeoff-wp-app #project-select option,
.sidebar #project-select option,
#project-select option {
    background: #2A2A2A !important;
    color: #FFFFFF !important;
    padding: 12px !important;
    font-size: 14px !important;
}

.takeoff-wp-app #project-select:focus,
.sidebar #project-select:focus,
#project-select:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(255, 124, 79, 0.3) !important;
}

body {
    background-color: var(--bg-window);
    color: var(--text-main);
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    background: var(--accent);
    color: #CCCCCC;
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid var(--border);
    transition: width 0.3s ease;
    flex-shrink: 0;
    z-index: 4000;
    /* [ANTIGRAVITY FIX] Ensure sidebar is above all overlays */
    position: relative;
}

.sidebar header {
    padding: 30px 25px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
}

.logo i {
    color: var(--primary);
}

.sidebar-content {
    flex: 1;
    overflow-y: hidden;
    padding: 15px 0;
}

.sidebar-section {
    margin-bottom: 2rem;
}

.sidebar-label {
    color: #444;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0 15px 5px 15px;
    letter-spacing: 1px;
}

.sidebar-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    border-left: 4px solid transparent;
    z-index: 4001;
    /* [ANTIGRAVITY FIX] Force above sidebar */
    position: relative;
}

.sidebar-item:hover {
    background: var(--sidebar-active-bg);
    color: #FFFFFF;
}

.sidebar-item.active {
    background: var(--sidebar-active-bg);
    color: #FFFFFF;
    border-left-color: var(--primary);
}

/* Sidebar Icon Buttons (Project Actions) */
.sidebar-icon-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #CCCCCC !important;
    border-radius: var(--radius) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    z-index: 4001 !important;
    /* [ANTIGRAVITY FIX] Force above sidebar */
    position: relative !important;
}

.sidebar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-2px);
}

.sidebar-icon-btn svg,
.sidebar-icon-btn i svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    display: block !important;
}

.sidebar-icon-btn:hover svg {
    stroke: var(--primary) !important;
}

/* Delete button specific styling */
.sidebar-icon-btn#delete-project-btn {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.sidebar-icon-btn#delete-project-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

/* Sync button enabled state - has new changes */
.sidebar-icon-btn.has-changes {
    animation: pulse-sync 2s infinite;
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #22c55e !important;
}

.sidebar-icon-btn.has-changes svg {
    stroke: #22c55e !important;
}

@keyframes pulse-sync {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

/* Login form placeholder colors - ensure gray */
#login-username::placeholder,
#login-password::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

/* Main Workspace Styling */
.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--bg-window);
}

.toolbar {
    height: 70px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    position: relative;
}

.header-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #FFF;
    padding: 0 12px;
    height: 44px;
    border-radius: 50px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.pill-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
}

.btn-icon:hover {
    color: var(--primary);
}

.btn-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
}

.symbols-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* Ensure on top */
    pointer-events: none;
    /* Let clicks pass to layers below */
    background: transparent;
}

.symbols-layer.placing {
    cursor: crosshair;
}

.placed-symbol {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--primary);
    border: 1.5px solid #666666;
    /* Gray Stroke for separation */
    border-radius: 50%;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    /* Depth: Halo + Shadow */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.placed-symbol:hover {
    /* Interaction: Elevation */
    transform: translate(-50%, -100%) scale(1.01);
    z-index: 150 !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

.placed-symbol.selected {
    background: #3b82f6 !important;
    border-color: #1e40af !important;
    z-index: 200 !important;
    /* Interaction: Glow + Pulse */
    animation: symbolPulse 2s infinite;
}

.placed-symbol.multi-selected {
    background: #60a5fa !important;
    border-color: #2563eb !important;
    z-index: 199 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4), 0 0 0 2px white;
}

@keyframes symbolPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7), 0 0 0 2px white;
        transform: translate(-50%, -100%) scale(1.0);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0), 0 0 0 2px white;
        transform: translate(-50%, -100%) scale(1.01);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 0 0 2px white;
        transform: translate(-50%, -100%) scale(1.0);
    }
}

.symbol-tag {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.5);
    color: #373a3c;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    cursor: move;
    border: 1px solid var(--border);
}

.symbol-tag .model {
    font-weight: bold;
    color: var(--primary);
}

.package-tag {
    position: absolute;
    /* top/left set by JS */
    background: rgba(255, 255, 255, 0.95);
    /* More opaque */
    color: #1e293b;
    /* Dark Slate */
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 800;
    /* Bolder */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Stronger, layered shadow for "floating" effect */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    cursor: move;
    /* Distinct Border: Primary Accent on Left or Bottom? Let's do a full border but colored */
    border: 1px solid var(--primary);
    border-left-width: 4px;
    /* Unique Left Accent */
    z-index: 150;
    /* Above symbols (100) and regular tags */
    transition: transform 0.1s;
}

.package-tag:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--primary);
}

/* Icon Mode Specifics */
/* Icon Mode Specifics */
.placed-symbol.has-icon {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    /* Separation for PNGs using drop-shadow (Halo + Stroke simulation) */
    filter: drop-shadow(0 0 1.5px white) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}

.placed-symbol.has-icon:hover {
    filter: drop-shadow(0 0 2px white) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4)) scale(1.05);
}

.placed-symbol.has-icon.selected {
    filter: drop-shadow(0 0 2px white) drop-shadow(0 0 10px #3b82f6);
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0% {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px #3b82f6);
        transform: translate(-50%, -100%) scale(1.0);
    }

    50% {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 20px #3b82f6);
        transform: translate(-50%, -100%) scale(1.01);
    }

    100% {
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px #3b82f6);
        transform: translate(-50%, -100%) scale(1.0);
    }
}

/* [SMART MARKUP] P0 Snap Indicator Animation */
@keyframes pulse-snap {
    0% {
        box-shadow: 0 0 10px rgba(22, 163, 74, 0.6);
        transform: translate(-50%, -50%) scale(1.0);
    }

    50% {
        box-shadow: 0 0 20px rgba(22, 163, 74, 0.8);
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        box-shadow: 0 0 10px rgba(22, 163, 74, 0.6);
        transform: translate(-50%, -50%) scale(1.0);
    }
}

.placed-symbol.has-icon.multi-selected img {
    filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px #3b82f6) !important;
}

.placement-ghost {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
    z-index: 1001;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(30%) brightness(1.2);
}

.placement-ghost img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.canvas-container {
    flex: 1;
    overflow: auto;
    display: block;
    /* Simpler than flex for scroll-based zoom */
    padding: 200px;
    /* Large area to allow panning in all directions */
    position: relative;
    background: #E2E8F0;
    overscroll-behavior: contain;
    scroll-behavior: auto !important;
}

.canvas-wrapper {
    position: relative;
    box-shadow: var(--shadow-md);
    background: white;
    margin: 0;
    padding: 0;
    /* Ensure no padding on wrapper */
    user-select: none;
    -webkit-user-select: none;
}

#pdf-canvas {
    display: block;
    /* Remove inline descender gap */
    width: 100%;
    height: 100%;
}

.markups-layer,
.symbols-layer {
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    transform: none;
    position: absolute;
    pointer-events: none !important;
    /* Let clicks pass to canvas */
    width: 100%;
    height: 100%;
}

/* [DBLCLICK-FIX] Measurements layer must NOT use !important so children can receive clicks */
.measurements-layer {
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    transform: none;
    position: absolute;
    pointer-events: none;
    /* Children with pointer-events: auto (labels, handles) will still receive events */
    width: 100%;
    height: 100%;
}

/* [ANTIGRAVITY FIX] Force Markups to be Interactivity Targets */
.box-markup {
    pointer-events: auto !important;
    z-index: 50 !important;
    /* Ensure above layer and symbols but below tools/menus */
    cursor: pointer;
}

.markup-element,
.measurement-label,
.measurement-hit,
.measurement-handle,
.placed-symbol {
    pointer-events: auto !important;
    /* Override parent none */
    /* Re-enable for objects */
}

.markup-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border: 1px solid #3b82f6;
    border-radius: 50%;
    z-index: 2000;
    pointer-events: auto;
    cursor: move;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.markup-handle:hover {
    background: #3b82f6;
}

/* Ensure SVG contents are clickable for selection */
.markup-element svg,
.markup-element path,
.markup-element rect,
.markup-element circle,
.markup-element polyline,
.markup-element polygon {
    pointer-events: visiblePainted;
    fill: transparent;
    /* Assuming fill is transparent for hit testing unless filled */
}

.markup-element text {
    pointer-events: auto;
}

/* Modal Styling */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    /* [ANTIGRAVITY FIX] Maximum Z-Index for Modals */
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-overlay>.modal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    background: white !important;
    width: 90% !important;
    max-width: 450px !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: var(--shadow-md) !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}

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

.modal h2 {
    font-size: 24px;
}

.modal h3 {
    font-size: 20px;
}

.modal h2,
.modal h3 {
    font-weight: 700;
    color: var(--accent);
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
}

input[type="text"]::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

input[type="text"],
input[type="file"],
select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

input[type="text"]:focus {
    border-color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: white;
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 12px 25px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #F8F9FA;
    border-color: var(--text-light);
}

/* Properties Panel */
.properties-panel {
    width: 320px;
    background: white;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    /* Ensure no padding overrides */
    margin: 0 !important;
    /* Ensure no margin overrides (User Request) */
    position: relative;
    z-index: 200;
    /* Above canvas layers (symbols-layer is z-index: 100) */
}

.equipment-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    /* No Padding */
}

.eq-item {
    padding: 8px 12px;
    background: #F8F9FA;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.eq-item .item-actions {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

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

.item-actions .btn-icon svg {
    width: 14px;
    height: 14px;
}

.eq-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.eq-item.active {
    border-color: var(--primary);
    background-color: rgba(255, 124, 79, 0.05);
    box-shadow: 0 0 0 1px var(--primary);
}

.eq-item i {
    color: var(--primary);
    /* Icon color */
}

/* Adjusted per user feedback */
.library-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
}

.library-header h3 {
    margin: 0 !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}



.library-header #add-equipment {
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

.library-header #add-equipment svg {
    width: 24px !important;
    height: 24px !important;
    stroke: var(--primary) !important;
}

/* Table View Styling */
.table-view {
    height: 320px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-main);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
}

.table-view.collapsed {
    height: 57px;
}

.table-header {
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

.table-header h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
}

.table-search {
    margin-bottom: 0 !important;
}

.table-search input {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    width: 200px;
    background: #fff;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.count-badge {
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
}

.table-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    text-align: left;
    padding: 15px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 2px solid var(--border);
    z-index: 20;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.05em;
}

td {
    padding: 0 15px;
    height: 64px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

tr:hover {
    background: rgba(255, 124, 79, 0.08);
}

.table-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    border-bottom: none;
}

.table-cell-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-cell-icon svg {
    color: var(--primary) !important;
    stroke: var(--primary) !important;
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    vertical-align: initial !important;
}

.table-actions .btn-icon {
    width: 32px !important;
    height: 32px !important;
}

.table-actions .btn-icon svg {
    width: 16px !important;
    height: 16px !important;
}

/* Using var(--primary) with opacity */

tr.selected {
    background: rgba(255, 124, 79, 0.15);
    color: var(--primary);
}

/* Selection Box */
.selection-box {
    position: absolute;
    border: 1px dashed #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    pointer-events: none;
    z-index: 20;
}

/* Capture Box for Auto Take-off */
.capture-box {
    position: absolute;
    border: 2px solid var(--primary);
    background: rgba(255, 124, 79, 0.1);
    pointer-events: none;
    z-index: 99999;
}

/* Sheet Zone Indicator - Permanent highlight for extracted headers */
.sheet-zone-indicator {
    position: absolute;
    border: 2px dashed #9333ea;
    /* Purple for OCR tools */
    background: rgba(147, 51, 234, 0.05);
    pointer-events: none;
    z-index: 55;
}

.symbols-layer.capturing {
    cursor: crosshair !important;
}

/* Ghost Symbols for Previewing Matches */
.ghost-symbol {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px dashed var(--primary);
    background: rgba(255, 124, 79, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

@keyframes pulse-ghost {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.4;
    }
}

/* Context Menu */
.context-menu {
    position: fixed;
    min-width: 150px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 4px 0;
    z-index: 3000;
}

.context-menu li {
    padding: 10px 15px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.1s;
}

.context-menu li:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.hidden {
    display: none !important;
}

/* Toolbar Integration for Auto Take-off */
#auto-takeoff-bar {
    animation: fadeIn 0.3s ease;
    margin-left: 15px;
    background: transparent;
    /* Ensure no fixed positioning interferes */
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    /* Remove floating shadow */
    border: none !important;
    /* Inline style might override, but let's try */
}

#auto-takeoff-bar.hidden {
    display: none !important;
}

#sub-toolbar {
    background: #f8fafc;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 200px;
    opacity: 1;
    overflow: visible;
    /* Changed from hidden to allow dropdowns */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 45;
    position: relative;
    /* REQUIRED for z-index to work */
}

.markup-tool-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

#sub-toolbar.is-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    pointer-events: none !important;
}


.scan-ref-preview {
    width: 42px;
    height: 42px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.scan-ref-preview:hover {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 124, 79, 0.1);
}

.scan-ref-preview.capturing {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 124, 79, 0.2);
    animation: pulse-ref 1.5s infinite ease-in-out;
}

@keyframes pulse-ref {
    0% {
        transform: scale(1);
        border-color: var(--primary);
    }

    50% {
        transform: scale(1.05);
        border-color: #ff5722;
    }

    100% {
        transform: scale(1);
        border-color: var(--primary);
    }
}

.scan-ref-preview canvas,
.scan-ref-preview img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}



.operation-bar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 10px 30px;
    width: 100%;
    max-width: 1200px;
}

.op-stat {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.op-label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 4px;
}

.op-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.op-setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.op-setting input,
.op-setting select {
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    background: white;
    outline: none;
}

.op-setting input:focus,
.op-setting select:focus,
.auth-form-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(255, 124, 79, 0.2);
}

.op-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* CSS for Library Toggle Pills */
.pill-btn {
    border: 1px solid #e2e8f0;
    background: white;
    padding: 4px 12px;
    border-radius: 9999px;
    /* Pill shape */
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.pill-btn:hover {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

.pill-btn.active {
    background: #FF7C4F;
    /* TAKO Primary Orange */
    color: white;
    border-color: #FF7C4F;
    font-weight: 500;
}

.btn-confirm {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    height: 36px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

/* Force white icons on orange/primary buttons - MAXIMUM SPECIFICITY */
.btn-confirm svg,
.btn-confirm i svg,
.btn-confirm i,
.btn-confirm [data-lucide],
.btn-primary svg,
.btn-primary i svg,
.btn-primary i,
.btn-primary [data-lucide],
#calibrate-scale-btn svg,
#calibrate-scale-btn i,
#apply-auto svg,
#apply-auto i,
#run-sheet-reader svg,
#run-sheet-reader i {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    fill: none !important;
}

.btn-confirm:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 124, 79, 0.3);
}

.btn-cancel {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: #e2e8f0;
    color: #dc2626;
}

#scan-threshold-input {
    outline: none;
    transition: border-color 0.2s;
}

#scan-threshold-input:focus {
    border-color: var(--primary) !important;
}

/* Remove arrows for cleaner look in header */
#scan-threshold-input::-webkit-outer-spin-button,
#scan-threshold-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#scan-threshold-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Toggle Group for Scan Scope */
.toggle-group {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;
    display: flex;
    gap: 2px;
}

.toggle-group .toggle-btn {
    border: none;
    background: transparent;
    color: #64748b;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.toggle-group .toggle-btn.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Properties Panel (Right Sidebar) - Re-added */
/* Properties Panel (Right Sidebar) - Re-added (Merged with above) */
/* .properties-panel definition merged into line 919 */

.properties-panel h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure Tool Toolbar inside Panel looks good */
.properties-panel .tool-toolbar {
    margin-bottom: 20px;
    justify-content: center;
    background: transparent;
    padding: 20px 0 0 0;
    /* Top padding only, 0 side padding */
    box-shadow: none;
    border: none;
}

.library-header {
    padding: 0;
    /* No padding */
}

.search-container {
    padding: 0;
    /* No padding */
    margin: 0 20px 20px 20px;
}

/* End of sidebar icon logic */

/* Financial Summary Panel */
/* Financial Summary Panel */
.financial-summary {
    margin-top: auto;
    width: 100%;
    padding: 10px 0 0 0;
    /* Removed side padding to let total row be full width */
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.financial-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    padding: 0 20px 10px 20px;
}

.financial-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
}

.financial-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

.financial-label {
    color: #6b7280;
    font-weight: 500;
}

.financial-value {
    font-weight: 600;
    color: var(--text-main);
}

.financial-row.subtotal-row {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}

.financial-row.subtotal-row .financial-label,
.financial-row.subtotal-row .financial-value {
    font-weight: 600;
    color: var(--text-main);
}

.financial-row.total-row {
    background: var(--primary);
    margin: 8px 0 0 0;
    /* Full width naturally now parent has 0 padding */
    padding: 15px 20px;
    border-radius: 0;
}

.financial-row.total-row .financial-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 14px;
}

.financial-row.total-row .financial-value {
    color: white;
    font-weight: 800;
    font-size: 14px;
}

/* --- LAYERS CONTROL UI --- */
/* --- FLOATING TOOLS CONTAINER --- */
#floating-tools {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.floating-control-group {
    position: relative;
    display: flex;
    align-items: center;
}

#layers-toggle-btn,
#sheets-toggle-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

#layers-toggle-btn:hover,
#sheets-toggle-btn:hover {
    background: #f8fafc;
    color: var(--primary);
    transform: scale(1.05);
}

/* Floating Tools specific overrides */
#sheets-toggle-btn.active,
#layers-toggle-btn.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

#sheets-toggle-btn.active svg,
#sheets-toggle-btn.active i,
#sheets-toggle-btn.active [data-lucide],
#layers-toggle-btn.active svg,
#layers-toggle-btn.active i,
#layers-toggle-btn.active [data-lucide] {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    fill: none !important;
}

/* Ensure hover state remains consistent */
#sheets-toggle-btn:hover,
#layers-toggle-btn:hover {
    transform: scale(1.05);
}

#layers-toggle-btn.active,
#sheets-toggle-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.floating-panel {
    position: absolute;
    left: 58px;
    top: 0;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    z-index: 1500;
    /* Ensure above all canvas layers */
    min-width: 240px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.floating-panel.hidden {
    display: none !important;
}

.sheet-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 13px;
    border: 1px solid transparent;
}

.sheet-item:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.sheet-item.active {
    background: rgba(255, 124, 79, 0.08);
    color: var(--primary);
    border-color: rgba(255, 124, 79, 0.2);
    font-weight: 600;
}






/* --- MEASUREMENT RENDERING IMPROVEMENTS --- */
.measurement-leader-line {
    position: absolute;
    background: #ef4444;
    pointer-events: none;
    opacity: 0.5;
}

.measurement-tick {
    position: absolute;
    background: #ef4444;
    width: 2px;
    height: 12px;
    z-index: 105;
    pointer-events: none;
}

.layer-toggle {
    transition: all 0.2s ease;
}

.layer-toggle.active {
    color: var(--primary) !important;
}

.layer-toggle:hover {
    transform: scale(1.1);
}

.measurement-line.temporary {
    border: 1px dashed #3b82f6 !important;
    background: none !important;
}

.measurement-item:hover {
    background: #f8fafc !important;
}

.measurement-item .btn-icon:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    opacity: 1 !important;
}

/* Sheet List Icon Fix */
.sheet-item i {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
}

/* Cancel Button Icon Color Fix */
/* Cancel/Secondary Button Styling */
button.btn-cancel {
    color: #000000 !important;
}

button.btn-cancel i,
button.btn-cancel svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

button.btn-cancel:hover {
    color: #dc2626 !important;
}

button.btn-cancel:hover i,
button.btn-cancel:hover svg {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
}

/* Fix Sheet Reader Buttons Width & Layout */
#set-sheet-number-btn,
#set-sheet-name-btn {
    white-space: nowrap !important;
    min-width: 140px;
    /* Wide enough for "Sh. Number" */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

/* Phase 1: Page Loading Skeleton */
.page-loading-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(248, 250, 252, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
}

.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Centered PDF Loading Overlay */
.pdf-loading-overlay {
    position: absolute;
    top: 70px;
    /* Below Toolbar */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(243, 245, 250, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none !important;
    /* Allow scroll/zoom through overlay */
    transition: opacity 0.2s ease;
}

.pdf-loading-overlay.hidden {
    display: none !important;
    opacity: 0;
}

.pdf-loading-box {
    background: white;
    padding: 24px 48px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border);
    animation: slideUp 0.3s ease-out;
    pointer-events: auto;
    /* Only the box blocks clicks, not the whole overlay */
}

.pdf-loading-box span {
    font-weight: 700;
    color: var(--accent);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.loading-spinner {
    width: 32px !important;
    height: 32px !important;
    color: var(--primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Expanded Markup Toolbar */
#markup-bar {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 8px 16px;
    gap: 8px;
}

.markup-tools-row {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping in the bar */
    gap: 4px;
    width: auto;
    align-items: center;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.markup-tool-item,
.measure-tool-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 4px;
    /* Square-ish for sub-tools */
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.markup-tool-item:hover,
.measure-tool-item:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.markup-tool-item.active,
.measure-tool-item.active {
    background: #e0f2fe;
    color: var(--primary);
    border-color: #bae6fd;
}

/* Force icons in sub-tools to follow the color logic and override any theme styles */
.takeoff-wp-app .markup-tool-item i,
.takeoff-wp-app .measure-tool-item i,
.takeoff-wp-app button.markup-tool-item i,
.takeoff-wp-app button.measure-tool-item i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.takeoff-wp-app .markup-tool-item i svg,
.takeoff-wp-app .measure-tool-item i svg,
.takeoff-wp-app .markup-tool-item svg,
.takeoff-wp-app .measure-tool-item svg,
.takeoff-wp-app button.markup-tool-item svg,
.takeoff-wp-app button.measure-tool-item svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0 !important;
    stroke: #475569 !important;
    /* Dark gray for visibility (Inactive) */
    stroke-width: 2.2px !important;
    fill: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Active Tool: Orange Background + White Icon */
.takeoff-wp-app .markup-tool-item.active,
.takeoff-wp-app .measure-tool-item.active,
.takeoff-wp-app button[class*="markup-tool-item"].active,
.takeoff-wp-app button[class*="measure-tool-item"].active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 10px rgba(255, 124, 79, 0.3) !important;
}

/* Ensure the SVG inside the active item is forced to WHITE */
.takeoff-wp-app .markup-tool-item.active svg,
.takeoff-wp-app .measure-tool-item.active svg,
.takeoff-wp-app button[class*="markup-tool-item"].active svg,
.takeoff-wp-app button[class*="measure-tool-item"].active svg,
.takeoff-wp-app .markup-tool-item.active i svg,
.takeoff-wp-app .measure-tool-item.active i svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    fill: none !important;
    opacity: 1 !important;
}

/* Hover state improvement */
.takeoff-wp-app .markup-tool-item:hover i svg,
.takeoff-wp-app .measure-tool-item:hover i svg {
    stroke: var(--primary) !important;
}

.markup-properties {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Main Tool Buttons (Select, Place, Scan, etc) - Orange/Circular */
.tool-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-main);
    margin: 0 4px;
    /* Horizontal spacing */
}

.tool-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tool-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 5px rgba(255, 124, 79, 0.3);
}

.tool-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 15px;
    border-bottom: 1px solid var(--border);
    justify-content: center;
}

.markup-tool-btn:hover,
.markup-tool-btn.active {
    background: #f0f9ff;
    border-color: var(--primary);
    color: var(--primary);
}

.markup-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: 4px;
    padding: 4px;
    z-index: 1000;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.markup-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-main);
}

.markup-dropdown-item:hover,
.markup-dropdown-item.active {
    background: #f0f9ff;
    color: var(--primary);
}

#markup-bar {
    overflow: visible !important;
}

.markup-properties {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.prop-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    user-select: none;
}

.prop-color-picker {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.prop-color-picker:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.prop-color-picker:active {
    transform: scale(0.95);
}

.prop-input-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: white;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.prop-input-group:hover {
    border-color: #cbd5e1;
}

.prop-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(255, 124, 79, 0.1);
}

.prop-input-group input {
    border: none;
    width: 48px;
    text-align: center;
    padding: 4px 2px;
    height: 28px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    outline: none;
    background: transparent;
}

.prop-input-group .unit {
    background: #f1f5f9;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    line-height: 28px;
    border-left: 1px solid var(--border);
    text-transform: lowercase;
}

.prop-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 8px;
    opacity: 0.6;
}

select {
    padding: 0 24px 0 10px;
    height: 28px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

select:hover {
    border-color: #cbd5e1;
}

select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(255, 124, 79, 0.1);
}

/* Markup Alignment/Flip Groups */
.markup-settings-group {
    display: flex;
    align-items: center;
    gap: 2px;
    border-left: 1px solid var(--border);
    padding-left: 6px;
    margin-left: 6px;
}

.markup-settings-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: white;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.markup-settings-btn:hover {
    background: #f1f5f9;
    color: var(--primary);
    border-color: var(--primary);
}

.markup-settings-btn svg {
    width: 11px;
    height: 11px;
}

.hidden {
    display: none !important;
}

.markup-tool-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Markups Layer - Overlay for drawing markups */
.markups-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    pointer-events: none !important;
    background: transparent;
}

/* Measurements Layer */
.measurements-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 85;
    pointer-events: none !important;
    background: transparent;
}

/* Markup Elements */
.markup-element {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
}

.markup-element:hover {
    filter: brightness(1.1);
}

.markup-svg {
    overflow: visible;
}

/* Markup Dropdown Styles */
.markup-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 160px;
    padding: 4px;
    margin-top: 4px;
}

.markup-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    font-size: 13px;
}

.markup-dropdown-item:hover {
    background: #f1f5f9;
}

.markup-dropdown-item.active {
    background: var(--primary);
    color: white;
}

.markup-dropdown-item.active svg {
    stroke: white;
}

/* Markup Handles */
.markup-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 1px solid #3b82f6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: move;
    z-index: 100;
    /* Handles above SVG elements */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.markup-handle:hover {
    background: #3b82f6;
    border-color: #2563eb;
    transform: translate(-50%, -50%) scale(1.2);
}

.markup-element {
    z-index: 50;
    /* Base markup below handles */
}

/* Markup Group Selection */
.markup-group-selection {
    position: absolute;
    border: 1px dashed #3b82f6;
    pointer-events: none;
    z-index: 95;
    background: transparent;
}

.group-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border: 1px solid #ffffff;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, background 0.1s ease;
}

.group-handle:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background: #2563eb;
}

/* Crosshair Cursor for Drawing */
.drawing-cursor,
.drawing-cursor * {
    cursor: crosshair !important;
}

/* Rotation Handle */
.rotation-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #10b981;
    border: 2px solid #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    pointer-events: auto;
    cursor: move;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s ease, background 0.1s ease;
}

.rotation-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
    background: #059669;
}

.rotation-handle:active {
    cursor: move;
}

/* Rotation Line */
.rotation-line {
    position: absolute;
    width: 1px;
    background: #3b82f6;
    transform: translateX(-50%);
    z-index: 99;
    pointer-events: none;
}

/* Handle animations */
.markup-handle {
    transition: transform 0.1s ease, background 0.1s ease;
}

/* Hide selection artifacts during transformation */
.transforming-mode .selection-box,
.transforming-mode .markup-selection-box,
.transforming-mode #selection-box,
.transforming-mode div[style*='orange'],
.transforming-mode div[style*='red'],
.transforming-mode div[style*='rgb(255,'] {
    display: none !important;
}

#history-list::-webkit-scrollbar {
    width: 6px;
}

#history-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#history-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#history-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- PROJECT TREE VIEW --- */
.tree-section {
    margin-bottom: 2px;
}

.tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    user-select: none;
    transition: all 0.2s;
}

.tree-header:hover {
    background: #f1f5f9;
    color: var(--primary);
}

.tree-header .chevron,
.financial-header .chevron {
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.2s;
    color: #94a3b8;
    order: 3;
    /* Move to right in flex if needed, but justify-content should handle it */
    transform: rotate(0deg);
}

.tree-header.collapsed .chevron,
.financial-header.collapsed .chevron {
    transform: rotate(0deg);
}

.tree-header:not(.collapsed) .chevron,
.financial-header:not(.collapsed) .chevron {
    transform: rotate(180deg);
}

.tree-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
    margin-left: 18px;
}

.tree-content.expanded {
    grid-template-rows: 1fr;
    margin-bottom: 8px;
}

.tree-content-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Remove the old .tree-content.hidden since we use grid expansion now */
.tree-content.hidden {
    display: none;
}

.tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #334155;
    transition: all 0.2s;
    margin: 1px 0;
}

.tree-item:hover {
    background: #f1f5f9;
}

.tree-item.selected {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    font-weight: 600;
    border-left: 3px solid #3b82f6;
    padding-left: 7px;
}

.tree-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.tree-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: var(--primary);
    flex-shrink: 0;
}

.tree-item-icon i {
    width: 12px !important;
    height: 12px !important;
}

.tree-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-item-sublabel {
    font-size: 9px;
    color: #94a3b8;
    margin-left: 5px;
}

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

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

.tree-badge {
    font-size: 10px;
    background: #e2e8f0;
    color: #64748b;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
}

.financial-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

.financial-content-wrapper.expanded {
    grid-template-rows: 1fr;
    padding-top: 10px;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.financial-content-inner {
    min-height: 0;
}







/* FINAL ROBUST ICON STYLING - TARGETS SVG DIRECTLY */
.symbols-layer .placed-symbol.has-icon {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.symbols-layer .placed-symbol.has-icon img,
.symbols-layer .placed-symbol.has-icon svg,
.symbols-layer .placed-symbol.has-icon i svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
    /* 4-way Orange Stroke for silhouette + Drop Shadow */
    filter: drop-shadow(1px 0 0 #f97316) drop-shadow(-1px 0 0 #f97316) drop-shadow(0 1px 0 #f97316) drop-shadow(0 -1px 0 #f97316) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
    transition: all 0.2s ease !important;
}

/* Selected State - Intense Blue Glow */
.symbols-layer .placed-symbol.has-icon.selected img,
.symbols-layer .placed-symbol.has-icon.selected svg,
.symbols-layer .placed-symbol.has-icon.selected i svg {
    transform: scale(1.1) translate(-5px, -5px) !important;
    /* Move back slightly to stay centered if scale behaves weirdly */
    transform: scale(1.1) !important;
    /* Blue Glow + Black Silhouette */
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 4px #3b82f6) drop-shadow(0 0 12px rgba(59, 130, 246, 0.8)) !important;
}

/* Ensure SVG icon color is white by default (so black stroke is visible) */
.symbols-layer .placed-symbol.has-icon svg {
    color: white !important;
    stroke: white !important;
    fill: none !important;
}

/* --- SELECTION HIGHIGHTER (PACKAGES) --- */
.selection-highlighter {
    pointer-events: none;
    z-index: 50;
    transition: all 0.3s ease;
}

.selection-highlighter.package-selected {
    border: 2.5px solid #16a34a !important;
    background-color: transparent !important;
    animation: package-breath 2.5s infinite ease-in-out;
}

.selection-highlighter.multi-selected-box {
    border: 2.5px solid #3b82f6 !important;
    background-color: transparent !important;
    animation: multi-breath 2.5s infinite ease-in-out;
}

@keyframes package-breath {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4), inset 0 0 0 0 rgba(22, 163, 74, 0.1);
        border-color: #16a34a;
    }

    50% {
        box-shadow: 0 0 20px 5px rgba(22, 163, 74, 0.2), inset 0 0 10px rgba(22, 163, 74, 0.05);
        border-color: #22c55e;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4), inset 0 0 0 0 rgba(22, 163, 74, 0.1);
        border-color: #16a34a;
    }
}

@keyframes multi-breath {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4), inset 0 0 0 0 rgba(59, 130, 246, 0.1);
        border-color: #3b82f6;
    }

    50% {
        box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.2), inset 0 0 10px rgba(59, 130, 246, 0.05);
        border-color: #60a5fa;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4), inset 0 0 0 0 rgba(59, 130, 246, 0.1);
        border-color: #3b82f6;
    }
}

/* --- MEASUREMENT ENHANCEMENTS --- */

/* Enhanced Measurement & Markup Handles with Smart Hit Area */
.measurement-handle,
.markup-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: transparent;
    z-index: 1000;
    cursor: move;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    /* Perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visual Dot */
.measurement-handle::after,
.markup-handle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 2px;
    transition: transform 0.15s ease-out, background 0.15s ease-out, border-radius 0.15s ease-out;
}

.measurement-handle:hover::after,
.markup-handle:hover::after {
    transform: scale(1.4);
    background: #3b82f6;
    border-radius: 50%;
    border-color: white;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* Snapping Indicator */
.snapping-indicator {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none !important;
    z-index: 2000;
    transform: translate(-50%, -50%);
}

.snapping-indicator::before,
.snapping-indicator::after {
    content: '';
    position: absolute;
    background: var(--primary);
    opacity: 0.6;
}

/* Crosshair lines */
.snapping-indicator::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}

.snapping-indicator::after {
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
}

.snapping-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(255, 124, 79, 0.3);
}

/* Magnifier / Loupe Style */
.tako-magnifier {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 3px solid #333;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    background: white;
    display: none;
}

.tako-magnifier canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#measurement-scale-info {
    display: none !important;
}

/* PDF Loading Overlay (Fix for Blocking Issue) */
.pdf-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    /* Below Modals (3000) but above content */
    pointer-events: all;
}

.pdf-loading-overlay.hidden {
    display: none !important;
    pointer-events: none !important;
}

.pdf-loading-box {
    background: white;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    color: var(--text-main);
    border: 1px solid var(--border);
}

.loading-spinner {
    animation: spin 1s linear infinite;
    color: var(--primary);
    width: 32px;
    height: 32px;
}