/* ═══════════════════════════════════════════════════════════════════════════════
   CLINICALRIS BESPOKE DIAGNOSTIC WORKSTATION THEME
   Obsidian Glassmorphic Design System (Tailored for GSDF Diagnostic Parity)
   ═══════════════════════════════════════════════════════════════════════════════ */

:root,
.dark,
html,
body {
    /* --- ClinicalRIS Core Palette --- */
    --ui-primary: #6366f1;
    --ui-primary-main: #6366f1;
    --ui-primary-active: #4f46e5;
    --ui-primary-light: #818cf8;
    --ui-primary-dark: #3730a3;
    --ui-sky-blue: #6366f1;
    --text-primary-active: #ffffff;

    /* --- Override stock OHIF Tailwind HSL variables with ClinicalRIS Palette --- */
    --highlight: 239 84% 67% !important; /* #6366f1 Indigo */
    --primary: 239 84% 67% !important;
    --primary-foreground: 0 0% 100% !important;
    --secondary: 258 90% 66% !important; /* #8b5cf6 Purple */
    --secondary-foreground: 0 0% 100% !important;
    --ring: 239 84% 67% !important;
    --background: 222 84% 4.9% !important; /* #020617 Obsidian */
    --card: 224 71% 4% !important; /* #090d16 */
    --popover: 224 71% 4% !important;
    --popover-foreground: 210 40% 98% !important;
    --accent: 239 84% 67% !important;
    --accent-foreground: 0 0% 100% !important;

    /* --- Deep Obsidian Backgrounds --- */
    --brand-primary: #6366f1;
    --brand-secondary: #8b5cf6;
    --color-medical-blue: #6366f1;
    --color-medical-blue-dark: #3730a3;
    --color-medical-blue-light: #818cf8;
    --active-color: #6366f1;
    --hover-color: #4f46e5;

    /* Theme Tokens */
    --cris-bg-base: #000000;
    --cris-bg-surface: #020617;
    --cris-bg-card: #090d16;
    --cris-bg-hover: rgba(99, 102, 241, 0.12);
    --cris-border-subtle: rgba(255, 255, 255, 0.08);
    --cris-border-glow: rgba(99, 102, 241, 0.5);
    --cris-accent-indigo: #6366f1;
    --cris-accent-purple: #8b5cf6;
    --cris-text-main: #f8fafc;
    --cris-text-muted: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE APP & SURFACE STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */

#root,
body {
    background-color: #000000 !important;
    color: var(--cris-text-main) !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Text Selection */
::selection {
    background-color: rgba(99, 102, 241, 0.45);
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER & TOP WORKSTATION BAR
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Top header glassmorphism */
header,
nav,
.bg-secondary-dark,
[data-cy="header"] {
    background: #020617 !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Patient Header Info Banner */
[data-cy="patient-info"] {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    border-radius: 8px !important;
    padding: 3px 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOLBAR & BUTTON STYLING (Bespoke Diagnostic Workstation Aesthetics)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Toolbar Container & Smooth Overflow Scrolling */
@media (min-width: 769px) {
    header div.flex-1.overflow-x-auto,
    nav div.flex-1.overflow-x-auto {
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    header div.flex-1.overflow-x-auto::-webkit-scrollbar,
    nav div.flex-1.overflow-x-auto::-webkit-scrollbar {
        display: none !important;
    }
}

/* Landscape Phone & Compact Viewport Optimization */
@media (max-height: 500px) {
    header,
    nav,
    [data-cy="header"] {
        height: 40px !important;
    }
    header button,
    nav button {
        height: 32px !important;
        min-height: 32px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Toolbar Segmented Bar */
.toolbar,
[data-cy="toolbar"],
div[class*="toolbar"] {
    background: transparent !important;
}

/* Individual Toolbar Buttons */
button[class*="ToolbarButton"],
[data-cy*="tool-button"],
[data-tool] button,
[data-cy*="split-button"] button,
div[role="button"][class*="toolbar"] {
    border-radius: 8px !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(15, 23, 42, 0.45) !important;
}

button[class*="ToolbarButton"]:hover,
[data-cy*="tool-button"]:hover,
[data-tool] button:hover,
[data-cy*="split-button"] button:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3) !important;
}

/* Layout Selector Button & Popover Trigger */
#Layout,
[data-cy="Layout"],
[data-tool="Layout"],
[data-cy="layout-button"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#Layout button,
[data-cy="Layout"] button,
[data-tool="Layout"] button,
[data-cy="layout-button"] button,
button#tool-button-Layout {
    border-radius: 8px !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#Layout button:hover,
[data-cy="Layout"] button:hover,
[data-tool="Layout"] button:hover,
[data-cy="layout-button"] button:hover,
button#tool-button-Layout:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3) !important;
}

/* Tool Layout SVG icon: bright and crisp */
#Layout svg,
[data-cy="Layout"] svg,
[data-tool="Layout"] svg,
[data-cy="layout-button"] svg,
svg[id="tool-layout"],
g[id="tool-layout"] {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* Active Tool Button - Vibrant Clinical Indigo Glow */
button[class*="ToolbarButton"][class*="active"],
button[class*="ToolbarButton"][aria-pressed="true"],
[data-cy*="tool-button"][class*="active"],
[data-active="true"] button,
[data-tool][data-active="true"] button,
button.bg-highlight,
[class*="bg-primary-dark"][class*="text-primary-light"] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(139, 92, 246, 0.35)) !important;
    border: 1.5px solid #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.5) !important;
}

/* Dropdown Content - Sleek Obsidian Card */
[role="menu"],
div[data-radix-popper-content-wrapper] [role="menu"] {
    background: #090d16 !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 12px !important;
}

[role="menuitem"] {
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
}

[role="menuitem"]:hover,
[role="menuitem"][data-highlighted] {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SERIES THUMBNAIL PANEL (Clean Dark Modality Cards)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Left Sidebar Container */
[data-panel-id="viewerLayoutResizableLeftPanel"],
[data-cy="study-browser-panel"],
.study-browser {
    background: #020617 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Series Card Tile */
[data-cy="study-browser-thumbnail"],
div[class*="Thumbnail-module"] {
    background: #090d16 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    margin: 4px 6px 8px 6px !important;
    transition: all 0.2s ease !important;
}

[data-cy="study-browser-thumbnail"]:hover,
div[class*="Thumbnail-module"]:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: #0e1322 !important;
}

/* Active / Selected Series Card */
[data-cy="study-browser-thumbnail"][class*="active"],
div[class*="Thumbnail-module"][class*="active"],
[data-cy="study-browser-thumbnail"].border-primary-light {
    border: 1.5px solid #6366f1 !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3) !important;
    background: #0f1629 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VIEWPORT & DIAGNOSTIC HUD OVERLAY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Viewport Containers */
[data-cy="viewport-grid"] {
    background: #000000 !important;
}

/* Active Viewport Border */
.viewport-wrapper.border-primary-light,
div[class*="viewport"][class*="active"],
div[class*="border-primary"] {
    border: 1.5px solid #6366f1 !important;
}

/* Viewport Corner HUD Overlay Text */
[data-cy="viewport-overlay"],
.viewport-overlay,
div[class*="ViewportOverlay"] {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.01em !important;
    color: #94a3b8 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

/* Crisp White for Values (e.g. Slice, Zoom, W/L) */
[data-cy="viewport-overlay"] span,
.viewport-overlay span {
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */

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

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

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 3px;
    border: 1px solid #000000;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   HIDE GENERIC OHIF BRANDING & UNWANTED STOCK ARTIFACTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hide any residual default OHIF text and dialogs */
a[href*="ohif.org"],
[data-cy="investigational-use-badge"],
[data-cy="confirm-and-hide-button"],
[data-cy="ohif-logo"],
div:has(> [data-cy="confirm-and-hide-button"]),
div:has(> * > [id*="Investigational"]),
div[id*="Investigational"],
div[id*="investigational"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Toast alert anti-flash */
.Toastify__toast {
    animation: clinicalrisToastFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes clinicalrisToastFadeIn {
    0% { opacity: 0; visibility: hidden; }
    50% { opacity: 0; visibility: hidden; }
    100% { opacity: 1; visibility: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE & DESKTOP VIEWPORT SCROLLBAR (CT/MRI SLICE SCRUBBER)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Vertical Slice Scrollbar Container */
[data-cy="image-scrollbar"],
div[class*="ImageScrollbar-module"],
div[class*="imageScrollbar"] {
    z-index: 45 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
}

/* Scrollbar Track */
[data-cy="image-scrollbar"] > div,
div[class*="ImageScrollbar-module"] > div {
    background: rgba(15, 23, 42, 0.6) !important;
    border-radius: 4px !important;
}

/* Scrollbar Handle / Thumb - Glowing ClinicalRIS Indigo/Purple */
[data-cy="image-scrollbar"] [class*="thumb"],
[data-cy="image-scrollbar"] div[style*="position: absolute"],
div[class*="ImageScrollbar-module"] [class*="thumb"],
div[class*="ImageScrollbar-module"] div[style*="border-radius"] {
    background: linear-gradient(180deg, #6366f1, #8b5cf6) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6), 0 0 2px rgba(255, 255, 255, 0.8) !important;
    transition: opacity 0.15s ease, background 0.15s ease !important;
}

/* Mobile & Touch Device Scrubber Expansion (36px Hit Target) */
@media (max-width: 1024px), (pointer: coarse) {
    [data-cy="image-scrollbar"],
    div[class*="ImageScrollbar-module"],
    div[class*="imageScrollbar"] {
        width: 36px !important;
        right: 2px !important;
    }

    [data-cy="image-scrollbar"] [class*="thumb"],
    div[class*="ImageScrollbar-module"] [class*="thumb"] {
        width: 8px !important;
        margin: 0 auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE VIEWPORT OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Prevent any horizontal screen spillover on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Clean 2-Row Structured Mobile Workstation Header */
    header,
    nav {
        height: auto !important;
        background: #020617 !important;
    }

    /* 2-Row Mobile Structured Toolbar Styling (Zero Overlapping) */
    [data-cy="mobile-2row-toolbar"] {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    [data-cy="mobile-2row-toolbar"] .grid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        align-items: center !important;
        justify-items: center !important;
    }

    /* Mobile Tool Buttons: Perfect 40px touch targets, centered icons */
    [data-cy="mobile-2row-toolbar"] button,
    [data-cy="mobile-2row-toolbar"] [data-cy*="tool-button"],
    [data-cy="mobile-2row-toolbar"] button[class*="ToolbarButton"] {
        width: 100% !important;
        max-width: 68px !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 4px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    [data-cy="mobile-2row-toolbar"] #Layout,
    [data-cy="mobile-2row-toolbar"] [data-cy="Layout"],
    [data-cy="mobile-2row-toolbar"] [data-tool="Layout"],
    [data-cy="mobile-2row-toolbar"] [data-cy="layout-button"] {
        width: 100% !important;
        max-width: 68px !important;
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [data-cy="mobile-2row-toolbar"] #Layout button,
    [data-cy="mobile-2row-toolbar"] [data-cy="Layout"] button,
    [data-cy="mobile-2row-toolbar"] [data-tool="Layout"] button,
    [data-cy="mobile-2row-toolbar"] [data-cy="layout-button"] button,
    [data-cy="mobile-2row-toolbar"] button#tool-button-Layout {
        width: 100% !important;
        max-width: 68px !important;
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 6px !important;
        box-sizing: border-box !important;
    }

    /* Mobile Split Button Container (MeasurementTools & MoreTools) */
    [data-cy="mobile-2row-toolbar"] [data-cy*="split-button"],
    [data-cy="mobile-2row-toolbar"] div:has(> button[aria-haspopup="true"]) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 72px !important;
    }

    /* Split button primary tool: 65% width */
    [data-cy="mobile-2row-toolbar"] [data-cy*="split-button"] > button:first-child {
        flex: 1 1 auto !important;
        min-width: 36px !important;
        max-width: 48px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Split button dropdown chevron: 35% width */
    [data-cy="mobile-2row-toolbar"] [data-cy*="split-button"] > button:last-child {
        flex: 0 0 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        padding: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* Floating Dropdown Menus: Always on top, high z-index, zero clipping */
    [role="menu"],
    div[data-radix-popper-content-wrapper] {
        z-index: 9999 !important;
    }

    [data-cy="viewport-grid"] {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Single viewport on mobile: full screen height */
    [data-cy="viewport-grid"] > div:only-child {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        flex: 1 1 100% !important;
        border-bottom: none !important;
    }

    /* Multi-viewport grids on mobile: stack smoothly */
    [data-cy="viewport-grid"] > div:not(:only-child) {
        position: relative !important;
        width: 100% !important;
        height: 380px !important;
        min-height: 380px !important;
        border-bottom: 2px solid #000 !important;
    }
}