/* ==========================================================================
   📑 Microsoft Edge PDF Viewer Styling
   Exact replica of Microsoft Edge dark modern PDF reading environment
   ========================================================================== */

.edge-pdf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: #1f1f1f;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #f1f1f1;
}

body.edge-pdf-open {
    overflow: hidden !important;
}

.edge-pdf-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Edge Top Toolbar */
.edge-toolbar {
    height: 48px;
    background: #2b2b2b;
    border-bottom: 1px solid #3c3c3c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 100;
    user-select: none;
}

.edge-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.edge-doc-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e1e1e1;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 8px;
}

.edge-page-nav {
    display: flex;
    align-items: center;
    background: #1f1f1f;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 2px 4px;
    gap: 2px;
}

.edge-page-box {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #cccccc;
}

.edge-page-box input {
    width: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #ffffff;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    outline: none;
}

.edge-page-box input:focus {
    background: #333333;
    border-color: #0078d4;
}

.edge-tool-btn, .edge-tool-btn-sm {
    background: transparent;
    border: 1px solid transparent;
    color: #e1e1e1;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.edge-tool-btn:hover, .edge-tool-btn-sm:hover {
    background: #3a3a3a;
    border-color: #4f4f4f;
}

.edge-tool-btn.is-active {
    background: #0078d4 !important;
    color: #ffffff !important;
    border-color: #108bf2 !important;
}

.edge-tool-btn-sm {
    padding: 2px 5px;
    font-size: 0.7rem;
}

.edge-btn-close:hover {
    background: #c42b1c !important;
    color: #ffffff !important;
}

.edge-zoom-controls {
    display: flex;
    align-items: center;
    background: #1f1f1f;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 1px 4px;
}

.edge-zoom-level {
    font-size: 0.78rem;
    font-weight: 700;
    color: #cccccc;
    min-width: 44px;
    text-align: center;
}

.edge-divider {
    width: 1px;
    height: 22px;
    background: #444444;
    margin: 0 4px;
}

.edge-tool-item {
    position: relative;
}

/* Tool Dropdowns (Palette & Settings) */
.edge-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #2b2b2b;
    border: 1px solid #444444;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
    min-width: 170px;
}

.edge-dropdown.is-open {
    display: flex;
}

.edge-palette-label {
    font-size: 0.75rem;
    color: #aaaaaa;
    font-weight: 600;
}

.edge-palette-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.edge-color-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.edge-color-circle:hover {
    transform: scale(1.15);
}

.edge-color-circle.is-active {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px #0078d4;
}

.edge-slider {
    width: 100%;
    accent-color: #0078d4;
    cursor: pointer;
}

/* Main Viewer Stage */
.edge-viewer-stage {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    background: #333333;
}

/* Thumbnails Sidebar */
.edge-thumbnails-sidebar {
    width: 0;
    min-width: 0;
    background: #252525;
    border-left: 1px solid #3c3c3c;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s ease;
    z-index: 90;
}

.edge-thumbnails-sidebar.is-open {
    width: 180px;
    min-width: 180px;
}

.edge-sidebar-header {
    padding: 10px 12px;
    border-bottom: 1px solid #3c3c3c;
    font-size: 0.8rem;
    font-weight: 700;
    color: #cccccc;
}

.edge-sidebar-thumbs-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
}

.edge-thumb-item {
    background: #1f1f1f;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.edge-thumb-item:hover {
    border-color: #555555;
}

.edge-thumb-item.is-active {
    border-color: #0078d4;
    background: #2c3848;
}

.edge-thumb-canvas {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.edge-thumb-label {
    font-size: 0.72rem;
    color: #aaaaaa;
    font-weight: 700;
}

/* Scrollable Document Area */
.edge-document-scroll-view {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background: #333333;
    padding: 24px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.edge-pages-viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.edge-pages-viewport[data-active-tool="draw"],
.edge-pages-viewport[data-active-tool="highlight"] {
    cursor: crosshair;
}

.edge-pages-viewport[data-active-tool="eraser"] {
    cursor: cell;
}

.edge-pages-viewport[data-active-tool="text"] {
    cursor: text;
}

.edge-pdf-page-container {
    position: relative;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    border-radius: 2px;
    overflow: hidden;
    user-select: none;
}

.edge-pdf-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.edge-pdf-draw-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    z-index: 10;
}

/* Loading & Spinner */
.edge-pdf-loading-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    padding: 20px;
}

.edge-pdf-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: #0078d4;
    border-radius: 50%;
    animation: edgeSpin 0.8s linear infinite;
}

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