/**
 * Canvas-Based UI Scaling System
 *
 * Scale UI elements with the canvas using transform: scale()
 */

:root {
    /* Set by CanvasScaler.js */
    --canvas-scale: 1;
    --canvas-width: 1600px;
    --canvas-height: 900px;
    --canvas-left: 0px;
    --canvas-top: 0px;
}

/* Canvas letterboxing/pillarboxing background */
body {
    background: #000000 !important;
}

/* Game canvas - positioned by CanvasScaler */
#gameCanvas {
    display: block !important;
    cursor: crosshair;
    position: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* UI container - scale everything inside */
#ui {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: 1600px !important;
    height: 900px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
    pointer-events: none !important;
    z-index: 100 !important;
    overflow: visible !important;
}

#ui * {
    pointer-events: auto;
}

/* Fix position:fixed elements inside #ui */
#ui #gameTitle,
#ui #cullingDebugBtn {
    position: absolute !important;
}

#ui #gameTitle {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/*
 * Elements appended to body (outside #ui)
 * These need transform: scale() applied individually
 */

/* Radial HUD - centered and scaled */
#radialHUD {
    /* Center by offsetting by half the HUD size (600px / 2 = 300px) */
    left: calc(var(--canvas-left) + var(--canvas-width) / 2 - 300px) !important;
    top: calc(var(--canvas-top) + var(--canvas-height) / 2 - 300px) !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: center !important;
}

/* Object Tab Bar - bottom of canvas */
#object-tab-bar {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: bottom left !important;
    /* JavaScript in ObjectTabBar.js sets left, bottom, and width */
}

/* Objective Completed Notification - center bottom */
.objective-completed-notification {
    position: fixed !important;
    left: 50% !important;
    bottom: calc((100vh - var(--canvas-top) - var(--canvas-height)) + 20px * var(--canvas-scale)) !important;
    transform: translateX(-50%) scale(var(--canvas-scale)) !important;
    transform-origin: bottom center !important;
    z-index: 7000 !important;
    animation: objective-slide-in 0.3s ease-out !important;
    width: 250px !important;
    box-sizing: border-box !important;
}

@keyframes objective-slide-in {
    0% { transform: translateX(-50%) translateY(100%) scale(var(--canvas-scale)); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0) scale(var(--canvas-scale)); opacity: 1; }
}

/* Info Plate - floating object info */
.info-plate,
#infoPlate {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
}

/* Controls container - dock to canvas top-right */
#controls {
    position: fixed !important;
    top: calc(var(--canvas-top) + 20px) !important;
    right: calc((100vw - var(--canvas-left) - var(--canvas-width)) + 20px) !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top right !important;
}

/* Object Grid - manila tabs list */
#objectGrid {
    /* Remove transform since parent #controls handles it */
    transform: none !important;
    /* Fix max-height to stay within canvas bounds */
    max-height: calc((var(--canvas-height) / var(--canvas-scale)) - 200px) !important;
}

/* Object hover info text - ensure proper scaling and prevent overflow */
.object-name,
.object-distance,
.object-type {
    font-size: 11px !important; /* Base size, will scale with parent transform */
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: hidden !important; /* Hide overflow */
    text-overflow: ellipsis !important; /* Show ... for overflow */
}

.object-name {
    font-size: 12px !important; /* Slightly larger for name */
}

/* HUD Notifications - bottom center of canvas */
.notification.hud-notification {
    position: fixed !important;
    left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
    bottom: calc(var(--canvas-top) + 20px * var(--canvas-scale)) !important;
    transform: translateX(-50%) scale(var(--canvas-scale)) !important;
    transform-origin: bottom center !important;
    z-index: 1000 !important;
    white-space: nowrap !important;
    max-width: none !important;
}

/* Debug Menu - centered modal */
.debug-menu,
#debugMenu {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: var(--canvas-width) !important;
    height: var(--canvas-height) !important;
    /* display controlled by JavaScript - starts as display: none */
    align-items: center !important;
    justify-content: center !important;
}

.debug-backdrop {
    width: 100% !important;
    height: 100% !important;
}

.debug-panel {
    width: 600px !important;
    max-width: 600px !important;
    max-height: 800px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: center center !important;
    position: relative !important;
}

/* Mission Tracker - top right */
#mission-tracker-ui {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top right !important;
    right: calc((100vw - var(--canvas-left) - var(--canvas-width)) + 20px * var(--canvas-scale)) !important;
    top: calc(var(--canvas-top) + 80px * var(--canvas-scale)) !important;
}

/* Resource Tracking HUD - top right */
#resourceTrackingHUD,
.resource-tracking-hud {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top right !important;
    right: calc((100vw - var(--canvas-left) - var(--canvas-width)) + 20px * var(--canvas-scale)) !important;
    /* top position handled by JavaScript in ResourceTrackingHUD.js */
}

/* Station Modal - PATTERN 2: Full-canvas overlay */
#stationModal,
.station-modal {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: 1600px !important;
    height: 900px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
}

/* Cargo Panel */
#cargoPanel {
    transform: translate(-50%, -50%) scale(var(--canvas-scale)) !important;
    transform-origin: center !important;
    left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
    top: calc(var(--canvas-top) + var(--canvas-height) / 2) !important;
}

/* Inventory Panel */
#inventoryPanel {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: center !important;
    left: calc(50% + var(--canvas-left)) !important;
    top: calc(50% + var(--canvas-top)) !important;
}

/* Ship Fitting Modal */
#ship-fitting-modal {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: center !important;
    left: calc(50% + var(--canvas-left)) !important;
    top: calc(50% + var(--canvas-top)) !important;
}

/* Resource Discovery UI - PATTERN 2: Full-canvas overlay */
#resourceDiscoveryUI,
.resource-discovery-ui {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: 1600px !important;
    height: 900px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
}

/* Debug Menu */
.debug-menu {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
    left: calc(var(--canvas-left) + 20px * var(--canvas-scale)) !important;
    top: calc(var(--canvas-top) + 60px * var(--canvas-scale)) !important;
}

/* Notifications from HUDManager/InventoryUI - handled above at line 105 */

/* Universe Welcome Panel - fills canvas bounds */
#universe-welcome-panel {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1600px !important;
    height: 900px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
}

/* Consciousness Awakening Panel - fills canvas bounds */
#consciousness-awakening-panel {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1600px !important;
    height: 900px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
}

/* Quantum Help Overlay - centered and scaled */
#quantum-help-overlay {
    position: fixed !important;
    left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
    top: calc(var(--canvas-top) + var(--canvas-height) / 2) !important;
    transform: translate(-50%, -50%) scale(var(--canvas-scale)) !important;
}

/* Debug Menu - scaled */
#debugMenu,
.debug-menu {
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: center !important;
    left: calc(50% + var(--canvas-left)) !important;
    top: calc(50% + var(--canvas-top)) !important;
}

/* Generic modals and overlays */
.modal,
.overlay {
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: var(--canvas-width) !important;
    height: var(--canvas-height) !important;
}

/* Loading screen */
#loadingScreen {
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: var(--canvas-width) !important;
    height: var(--canvas-height) !important;
}

/*
 * ============================================================================
 * CANVAS SCALING PATTERNS - How to make UI elements scale properly
 * ============================================================================
 *
 * PATTERN 1: CENTERED MODAL (small panels centered on canvas)
 * ----------------------------------------------------------------------------
 * Use for: Popups, modals, dialogs that should be centered
 * Examples: player-guidance-panel, universe-intro-hud
 *
 * CSS (add rule below):
 *   #your-element-id {
 *       transform: translate(-50%, -50%) scale(var(--canvas-scale)) !important;
 *       left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
 *       top: calc(var(--canvas-top) + var(--canvas-height) / 2) !important;
 *   }
 *
 * JavaScript inline styles:
 *   - REMOVE: top, left, transform (CSS handles positioning/scaling)
 *   - KEEP: position: fixed
 *   - KEEP: width (use fixed px, NOT max-width, vw, vh, clamp, etc.)
 *   - ADD: box-sizing: border-box
 *
 * ----------------------------------------------------------------------------
 * PATTERN 2: FULL-CANVAS OVERLAY (fills entire canvas area)
 * ----------------------------------------------------------------------------
 * Use for: Full-screen overlays, background panels
 * Examples: universe-welcome-panel, consciousness-awakening-panel, stationModal
 *
 * CSS (add rule below):
 *   #your-element-id {
 *       position: fixed !important;
 *       left: var(--canvas-left) !important;
 *       top: var(--canvas-top) !important;
 *       width: 1600px !important;
 *       height: 900px !important;
 *       transform: scale(var(--canvas-scale)) !important;
 *       transform-origin: top left !important;
 *   }
 *
 * JavaScript inline styles:
 *   - REMOVE: position, top, left, width, height, transform (CSS handles all)
 *   - REPLACE responsive units (vw, vh, clamp) with fixed px values
 *
 * ----------------------------------------------------------------------------
 * PATTERN 3: CORNER/EDGE ANCHORED (positioned at canvas edges)
 * ----------------------------------------------------------------------------
 * Use for: HUD elements anchored to corners/edges
 * Examples: mission-tracker-ui (top-right), debug-menu (top-left)
 *
 * CSS (add rule below):
 *   #your-element-id {
 *       transform: scale(var(--canvas-scale)) !important;
 *       transform-origin: top left !important;  /* or top right, etc. */
 *       left: calc(var(--canvas-left) + 20px * var(--canvas-scale)) !important;
 *       top: calc(var(--canvas-top) + 60px * var(--canvas-scale)) !important;
 *   }
 *
 * For right-aligned:
 *       transform-origin: top right !important;
 *       right: calc((100vw - var(--canvas-left) - var(--canvas-width)) + 20px * var(--canvas-scale)) !important;
 *
 * ============================================================================
 */

/* Player Guidance Panel - override inline styles for canvas scaling */
#player-guidance-panel {
    position: fixed !important;
    left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
    top: calc(var(--canvas-top) + var(--canvas-height) / 2) !important;
    transform: translate(-50%, -50%) scale(var(--canvas-scale)) !important;
}

/* Universe Intro HUD - centered and scaled */
#universe-intro-hud {
    transform: translate(-50%, -50%) scale(var(--canvas-scale)) !important;
    left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
    top: calc(var(--canvas-top) + var(--canvas-height) / 2) !important;
}

/* Awakening Confirmation Panel - full canvas overlay with centered content */
#awakening-confirmation-panel {
    position: fixed !important;
    left: var(--canvas-left) !important;
    top: var(--canvas-top) !important;
    width: 1600px !important;
    height: 900px !important;
    transform: scale(var(--canvas-scale)) !important;
    transform-origin: top left !important;
}

/* Skills Window - draggable modal (same pattern as cargo panel) */
#skillWindow {
    transform: translate(-50%, -50%) scale(var(--canvas-scale)) !important;
    transform-origin: center !important;
    left: calc(var(--canvas-left) + var(--canvas-width) / 2) !important;
    top: calc(var(--canvas-top) + var(--canvas-height) / 2) !important;
}