/**
 * Webclient Dashboard Styles (dashboard-webclient.css)
 * 
 * WEBCLIENT-SPECIFIC: Dashboard panel styles for Golden Layout integration.
 * 
 * KOB PRINCIPLES COMPLIANCE:
 * - Imports shared dashboard-components.css (DRY with BeipMU dashboard)
 *   → Provides: color variables, damage blocks, pool dots, tilt icons
 * - Uses CSS variables from ansi_colors.css (loaded before this file)
 * - Contains webclient-specific styling and GoldenLayout fixes
 * 
 * LOAD ORDER (in base.html):
 * 1. webclient.css - Evennia default (sets #input { position: fixed })
 * 2. goldenlayout.css - GoldenLayout styles  
 * 3. custom.css - General customizations
 * 4. ansi_colors.css - Game color palette
 * 5. dashboard-webclient.css - THIS FILE (overrides previous)
 *    └── @imports dashboard-components.css (shared colors + components)
 * 
 * For BeipMU-specific dashboard, see:
 * - website/css/dashboard-beipmu.css
 * 
 * KEY FIX: Evennia's goldenlayout.js removes #prompt and #inputcontrol 
 * from the #input div, but leaves #input itself with position:fixed.
 * GoldenLayout creates its own input pane inside #main-sub.
 * We neutralize the empty #input div so it doesn't interfere.
 */

/* Import shared dashboard components and color variables
 * Same file used by BeipMU dashboard - SINGLE SOURCE OF TRUTH
 */
@import url('/static/website/css/dashboard-components.css');

/* NOTE: dashboard-beipmu.css NOT imported - it has global body/html styles
 * that conflict with webclient. Character block styles defined locally below.
 */

/* =========================================
   GoldenLayout Layout Fix
   
   Problem: webclient.css sets #input { position: fixed; bottom: 0; width: 100%; }
   When goldenlayout.js runs, it removes #input's children (#prompt, #inputcontrol)
   but the #input div remains, potentially taking up space or blocking interactions.
   
   Solution: Override #input to be invisible and non-blocking when empty.
   GoldenLayout creates its own input component in #main-sub.
   ========================================= */

/* Reset #input - GoldenLayout manages input panes via its own components */
#input {
    position: static !important;
    /* Remove fixed positioning */
    height: 0 !important;
    /* Collapse when children removed */
    width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Let GoldenLayout's goldenlayout.css handle #main and #main-sub sizing */
/* Do NOT override width/height here - GoldenLayout uses absolute positioning */

/* =========================================
   Dashboard Component Styling (for GoldenLayout)
   ========================================= */

/* Dashboard content container (inside GoldenLayout panel) */
#dashboard-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--dashboard-text);
    background: var(--dashboard-bg);
}

/* =========================================
   Header (if needed)
   ========================================= */

#dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--character-header-bg);
    border-bottom: 1px solid var(--dashboard-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

#dashboard-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-tertiary, #ffe4b3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#dashboard-toggle {
    background: none;
    border: 1px solid var(--color-secondary, #99ffcc);
    color: var(--color-secondary, #99ffcc);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s ease;
}

#dashboard-toggle:hover {
    background: var(--color-secondary, #99ffcc);
    color: var(--dashboard-bg);
}

/* =========================================
   Content Area
   ========================================= */

#dashboard-content {
    padding: 10px;
}

#dashboard-content section {
    margin-bottom: 12px;
    padding-bottom: 0;
}

#dashboard-content section:last-child {
    margin-bottom: 0;
}

/* Room section: no bottom border since weather-section follows with description */
#room-section {
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: none;
}

/* Weather section: styled like BeipMU's weather-description-section */
#weather-section {
    background: var(--character-header-bg);
    margin: 0 -10px 12px -10px;
    padding: 8px 10px;
}

#dashboard-content h4,
#dashboard-content h6,
.section-header {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Empty list messages - centered italic like BeipMU */
.empty-list {
    color: #666;
    text-align: center;
    font-style: italic;
    font-size: 13px;
    margin: 0;
}

/* NPCs and Objects inline lists - centered */
#npcs-list,
#objects-list {
    text-align: center;
    font-size: 14px;
    color: #ccc;
}

.npc-entry,
.object-entry {
    /* Inline comma-separated entries */
}

/* =========================================
   Room Section - GRID LAYOUT matching BeipMU
   ========================================= */

/* Grid layout: room name + weather icons on row 1, location spans row 2 */
.room-header-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: start;
}

#room-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--dashboard-text);
    line-height: 1.3;
}

#weather-icons-inline {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

#room-location {
    grid-column: 1 / span 2;
    grid-row: 2;
    font-size: 11px;
    color: var(--color-primary, #a4bcdb);
    margin-top: 2px;
}

/* =========================================
   Weather Icons - ALIGNED with BeipMU
   ========================================= */

.weather-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.weather-icons i {
    color: var(--dashboard-text);
    opacity: 0.85;
    cursor: help;
    transition: opacity 0.2s ease;
}

.weather-icons i:hover {
    opacity: 1;
}

#weather-description {
    font-size: 12px;
    color: var(--color-primary, #a4bcdb);
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

/* Tilt icon in weather row - MATCHES BeipMU inline tilt styling */
#tilt-icon-inline {
    color: #ff6b6b;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: none;
    /* Hidden by default, shown when tilts active */
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#tilt-icon-inline i {
    color: inherit;
}

#tilt-icon-inline img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   Character List - ALIGNED with BeipMU
   ========================================= */

.character-entry {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    gap: 8px;
    background: var(--character-bg);
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background 0.2s ease;
}

.character-entry:hover {
    background: var(--character-content-bg);
}

.char-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--character-header-bg);
    object-fit: cover;
    flex-shrink: 0;
}

/* Character name - MATCHES BeipMU .character-name */
.char-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dashboard-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Character block full layout - ALIGNED with BeipMU */
.character-block {
    background: var(--character-bg);
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 10px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: start;
    /* Enable positioning for background icon */
    position: relative;
    overflow: hidden;
    /* Minimum height to give SVG icon room (matches BeipMU visual) */
    min-height: 80px;
}

/* Background SVG icon - MATCHED to BeipMU full character block */
.character-block.has-bg-icon::before {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -15px;
    transform: rotate(var(--bg-icon-rotation, 20deg));
    transform-origin: center center;
    /* Increased from 80px to 120px to match BeipMU visual scale */
    width: 120px;
    height: 120px;
    background-image: var(--bg-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

/* Ensure content stays above background icon */
.character-block>* {
    position: relative;
    z-index: 1;
}

.char-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.char-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-label {
    font-size: 10px;
    color: var(--color-primary, #a4bcdb);
    width: 22px;
    flex-shrink: 0;
}

/* =========================================
   Sidebar-Specific Overrides
   Base component styles from dashboard-components.css
   ========================================= */

/* Tighter spacing for 300px sidebar */
#dashboard-sidebar .inline-damage-blocks {
    gap: 2px;
}

/* Smaller tilt icons for sidebar */
#dashboard-sidebar .tilt-icon {
    width: 20px;
    height: 20px;
}

/* =========================================
   Tilt and Condition Badges - ALIGNED with BeipMU .tilt-icon
   Uses same gradient border treatment as dashboard-components.css
   ========================================= */

.tilt-badge,
.condition-badge {
    /* Match BeipMU tilt-icon sizing */
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    cursor: help;

    /* Match BeipMU gradient border styling */
    background: var(--tilt-icon-bg, #000000);
    border-radius: 4px;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--tilt-icon-bg, #000000), var(--tilt-icon-bg, #000000)),
        var(--tilt-icon-border, linear-gradient(135deg, #99ffcc, #ff88cc));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-sizing: border-box;
}

/* SVG/image icons inside badges - match BeipMU */
.tilt-badge img,
.condition-badge img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* Make SVG white like BeipMU */
}

/* Bootstrap icons inside badges */
.tilt-badge i,
.condition-badge i {
    color: var(--tilt-icon-fill, #fff);
    font-size: 12px;
}

/* Positive tilt - green-tinted gradient */
.tilt-badge.positive {
    background-image: linear-gradient(var(--tilt-icon-bg, #000000), var(--tilt-icon-bg, #000000)),
        linear-gradient(135deg, var(--color-secondary, #99ffcc), #66cc99);
}

/* Negative tilt - red-tinted gradient */
.tilt-badge.negative {
    background-image: linear-gradient(var(--tilt-icon-bg, #000000), var(--tilt-icon-bg, #000000)),
        linear-gradient(135deg, #ff6666, #cc3333);
}

/* Condition badges - dashed border style like BeipMU */
.condition-badge {
    border-style: dashed;
}

.condition-badge.positive {
    background-image: linear-gradient(var(--tilt-icon-bg, #000000), var(--tilt-icon-bg, #000000)),
        linear-gradient(135deg, var(--color-secondary, #99ffcc), #66cc99);
}

.condition-badge.negative {
    background-image: linear-gradient(var(--tilt-icon-bg, #000000), var(--tilt-icon-bg, #000000)),
        linear-gradient(135deg, #ff6666, #cc3333);
}

/* =========================================
   Condition Track (vertical column below tilt track in character blocks)
   Matches BeipMU structure for consistency
   ========================================= */

.condition-track {
    display: flex;
    flex-direction: column;
    /* Stack vertically first */
    flex-wrap: wrap;
    /* Wrap to new columns when height is reached */
    align-items: flex-start;
    /* Align icons to start (left) */
    align-content: flex-start;
    /* Align wrapped columns to start */
    gap: 4px;
    /* Gap between items */
    max-height: calc(3 * 25px + 2 * 4px);
    /* Match tilt-track max-height: 3 icons (25px each) + 2 gaps (4px each) = 83px */
    width: auto;
    /* Auto width based on content */
    min-width: fit-content;
    /* Minimum width to fit icons */
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    margin-left: 6px;
    /* Space between tilt track and condition track (side by side) */
    position: relative;
    z-index: 1;
    /* Ensure proper layering */
}

/* Condition icons - diamond-half Bootstrap icons */
.condition-track .condition-icon {
    flex: 0 0 14px;
    /* Fixed width, don't grow or shrink */
    width: 14px;
    height: 14px;
    font-size: 14px;
    /* Bootstrap icon size */
    line-height: 1;
    color: var(--tilt-icon-fill, #fff);
    /* Match tilt icon color */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    /* Ensure proper layering with tilt-track */
}

/* Hide empty condition-track containers */
.condition-track:empty {
    display: none;
}

/* =========================================
   Objects List
   ========================================= */

.object-entry {
    padding: 4px 0;
    font-size: 12px;
    color: var(--dashboard-text);
}

.obj-name {
    margin-left: 4px;
}

.empty-list {
    font-size: 11px;
    color: var(--color-primary, #a4bcdb);
    font-style: italic;
}

/* =========================================
   Ambience
   ========================================= */

.ambience-msg {
    font-size: 11px;
    font-style: italic;
    color: var(--color-primary, #a4bcdb);
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    line-height: 1.4;
}

/* =========================================
   GoldenLayout Dashboard Panel
   When dashboard is a proper GoldenLayout component
   ========================================= */

.dashboard-panel {
    background: var(--dashboard-bg);
    color: var(--dashboard-text);
    overflow-y: auto;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    height: 100%;
}

.dashboard-panel #dashboard-content {
    padding: 10px;
}

.dashboard-panel section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dashboard-border);
}

.dashboard-panel section:last-child {
    border-bottom: none;
}

/* Room section in GoldenLayout panel */
.dashboard-panel #room-section {
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: none;
}

/* Weather section in GoldenLayout panel */
.dashboard-panel #weather-section {
    background: var(--character-header-bg);
    margin: 0 -10px 15px -10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--dashboard-border);
}

.dashboard-panel h4 {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary, #a4bcdb);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   Scrollbar Styling
   ========================================= */

#dashboard-sidebar::-webkit-scrollbar {
    width: 6px;
}

#dashboard-sidebar::-webkit-scrollbar-track {
    background: var(--dashboard-bg);
}

#dashboard-sidebar::-webkit-scrollbar-thumb {
    background: var(--dashboard-border);
    border-radius: 3px;
}

#dashboard-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary, #99ffcc);
}

/* =========================================
   Responsive Design
   ========================================= */

@media (max-width: 900px) {
    :root {
        --sidebar-width: 250px;
    }
}

@media (max-width: 700px) {
    :root {
        /* Bottom drawer mode - full width */
        --sidebar-width: 0px;
    }

    /* Convert to bottom drawer on narrow screens */
    #dashboard-sidebar {
        width: 100%;
        height: auto;
        max-height: 40vh;
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        border-left: none;
        border-top: 2px solid var(--dashboard-border);
    }

    #dashboard-sidebar.collapsed {
        width: 100%;
        height: 40px;
    }

    /* Reset margins for bottom drawer mode */
    #clientwrapper,
    #messagewindow,
    .main-content,
    #main,
    .lm_goldenlayout {
        margin-right: 0 !important;
        right: 0 !important;
    }
}