/* ==========================================================================
   PHÒNG THÍ NGHIỆM SINH HỌC ẢO TƯƠNG TÁC (ULTRA-FAST 60FPS LIGHT UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
    --font-sans: 'Be Vietnam Pro', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --bg-app: #f1f5f9;
    --bg-panel: #ffffff;
    --bg-card: #f8fafc;
    --border-glass: #cbd5e1;
    --border-highlight: #0284c7;
    --text-main: #0f172a;
    --text-secondary: #1e293b;
    --text-muted: #475569;
    --shadow-glass: 0 4px 14px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

input, textarea, select, .selectable-text {
    user-select: text !important;
    -webkit-user-select: text !important;
}

body, button, input, select, textarea, svg, svg text {
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-app);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

.font-mono-tech {
    font-family: var(--font-mono);
}

/* ==========================================================================
   ULTRA-FAST LIGHT PANELS & CARDS (NO GPU BACKDROP-BLUR OVERDRAW)
   ========================================================================== */

.glass-panel {
    background: var(--bg-panel);
    border: 1px solid #dbe2ea;
    box-shadow: var(--shadow-glass);
}

.glass-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.glass-card:hover {
    border-color: #38bdf8;
}

/* ==========================================================================
   INTERACTIVE TOOL TRAY & ACTIVE STEP HIGHLIGHT (GPU COMPOSITED)
   ========================================================================== */

.tool-item {
    position: relative;
    cursor: grab;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    transition: transform 0.15s ease, border-color 0.15s ease;
    touch-action: none;
    will-change: transform;
}

.tool-item:hover {
    transform: translateY(-2px);
    border-color: #0284c7;
    background: #f0f9ff;
}

.tool-item:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.tool-active-glow {
    border-color: #0284c7 !important;
    border-width: 2.5px !important;
    background: linear-gradient(135deg, #e0f2fe 0%, #f3e8ff 100%) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.22);
}

.drop-zone-highlight {
    stroke: #0284c7 !important;
    stroke-width: 2.8px !important;
    stroke-dasharray: 7 4;
}

/* ==========================================================================
   MICROSCOPE VIEWPORT & BRIGHTFIELD OCULAR OPTICS
   ========================================================================== */

.microscope-viewport-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: #f1f5f9;
    contain: strict;
}

.microscope-ocular-mask {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 62%, rgba(30, 41, 59, 0.25) 75%, rgba(15, 23, 42, 0.78) 92%);
    z-index: 10;
}

/* ==========================================================================
   CUSTOM RANGE SLIDERS (LIGHT SCI-TECH STYLE)
   ========================================================================== */

input[type="range"].sci-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    outline: none;
    border: 1px solid #cbd5e1;
}

input[type="range"].sci-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0284c7;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

/* ==========================================================================
   STEP PROGRESS LIST (OLABS LIGHT TIMELINE)
   ========================================================================== */

.step-card {
    border-left: 3.5px solid transparent;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.step-card:hover {
    background: #f0f9ff;
}

.step-card.step-current {
    border-left-color: #0284c7;
    background: #e0f2fe;
}

.step-card.step-done {
    border-left-color: #059669;
    background: #f0fdf4;
}

/* ==========================================================================
   FLOATING DRAG GHOST
   ========================================================================== */

#drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18);
    will-change: left, top;
}

/* ==========================================================================
   CUSTOM SCROLLBARS
   ========================================================================== */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}

/* ==========================================================================
   PRINT STYLESHEET FOR OFFICIAL LAB REPORT PDF EXPORT
   ========================================================================== */

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
    }

    .no-print {
        display: none !important;
    }

    #printable-report-modal {
        position: static !important;
        display: block !important;
        background: #ffffff !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #printable-report-content {
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #000000 !important;
        max-width: 100% !important;
        padding: 10mm !important;
    }
}