/* 
 * extended-windows.css
 * Styling for extended server information windows with themed tabs
 * Updated to match main container styling
 * PROPERLY FIXED: Correct z-index hierarchy based on project analysis
 */

/* Ensure main container has positioning for absolute children */
.main-container {
    position: relative;
}

/* Extended window wrapper - positioned relative to server options */
.extended-window-wrapper {
    position: absolute;
    width: 200px;
    height: 228px;
    z-index: 4; /* Just below server containers (z-index: 5) */
    pointer-events: none; /* Allow clicks to pass through the wrapper to elements below */
}

/* Left extended window - positioned behind the vanilla server container */
.left-extended-window {
    left: calc(50% - 461px); /* Precise positioning */
    top: calc(50% - 13px); /* Precise vertical alignment */
}

/* Right extended window - positioned behind the hardcore server container */
.right-extended-window {
    right: calc(50% - 461px); /* Precise positioning */
    top: calc(50% - 13px); /* Precise vertical alignment */
}

/* Extended window base styles */
.extended-window {
    position: absolute;
    width: 200px;
    height: 228px;
    background: linear-gradient(to bottom, #010101, #414141);
    border-radius: 10px 0 0 10px; /* Rounded only on left side for vanilla */
    overflow: visible; /* Changed to visible so buttons can stick out */
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease; /* Removed opacity transition */
    opacity: 0;
    pointer-events: auto; /* Make the window itself clickable */
    z-index: 4; /* Just below server containers (z-index: 5) */
}

/* Left extended window sliding from right to left */
.left-extended-window .extended-window {
    transform: translateX(100%);
}

.left-extended-window .extended-window.visible {
    transform: translateX(0);
    opacity: 1;
    z-index: 4; /* Stay just below server containers */
}

/* Right-side extended window (for hardcore) */
.extended-window-right {
    border-radius: 0 10px 10px 0; /* Rounded only on right side */
}

/* Right extended window sliding from left to right */
.right-extended-window .extended-window-right {
    transform: translateX(-100%);
}

.right-extended-window .extended-window-right.visible {
    transform: translateX(0);
    opacity: 1;
    z-index: 4; /* Stay just below server containers */
}

/* Runes pattern overlay for extended windows */
.extended-window .runes-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/runes-pattern.webp');
    background-size: 300px 300px;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.05;
    filter: invert(1);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
}

/* Double layer strokes for extended window - matching main containers */
.extended-window::before, .extended-window::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* First stroke layer for extended window (1px, inner gradient) - ALWAYS ANIMATED */
.extended-window::before {
    border: 1px solid transparent;
    background: linear-gradient(90deg, #414141, #ff8800, #414141) border-box;
    background-size: 300% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
    animation: borderGradient 6s ease infinite;
    box-shadow: 0 0 10px 2px rgba(255, 136, 0, 0.3);
}

/* Second stroke layer for extended window (2px, outer gradient) */
.extended-window::after {
    border: 2px solid transparent;
    background: linear-gradient(to bottom, #010101, #414141) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    opacity: 1;
}

/* TAB STYLING - Container */
.window-tab-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500; /* Above extended windows (400) but below server containers (5) - WAIT, that's wrong! */
    z-index: 600; /* Above server containers to be clickable */
}

/* Improved tab button styling */
.window-tab {
    position: absolute;
    width: 30px;
    height: 80px;
    background: linear-gradient(to bottom, #010101, #414141); /* Match window gradient */
    border: 1px solid transparent; /* For gradient border */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.7);
    z-index: 6; /* Above server containers (z-index: 5) to be clickable */
    pointer-events: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible;
}

/* Left tab styling */
.window-tab-left {
    border-radius: 5px 0 0 5px;
}

/* Right tab styling */
.window-tab-right {
    border-radius: 0 5px 5px 0;
}

/* Animated gradient border for tabs - same as the windows */
.window-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(90deg, #414141, #ff8800, #414141) border-box;
    background-size: 300% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
    animation: borderGradient 6s ease infinite; /* Same animation as other elements */
    box-shadow: 0 0 8px 1px rgba(255, 136, 0, 0.3);
}

/* Button hover effect */
.window-tab:hover {
    box-shadow: 0 0 15px 5px rgba(255, 136, 0, 0.4);
}

/* Button hover glow effect */
.window-tab:hover::after {
    opacity: 0.7;
}

/* Button glow overlay */
.window-tab::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 136, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 70%
    );
    border-radius: inherit;
    opacity: 0.3;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

/* Tab text styling */
.tab-text {
    color: #ff8800; /* Amber color to match theme */
    font-family: 'ValheimFont', Arial, sans-serif;
    font-size: 12px;
    transform: rotate(90deg);
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    font-weight: bold;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 3;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Tab text hover effect */
.window-tab:hover .tab-text {
    color: #ffaa33;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.7),
                 0 2px 3px rgba(0, 0, 0, 0.9);
}

/* Background texture for buttons */
.window-tab .runes-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/runes-pattern.webp');
    background-size: 300px 300px;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.05;
    filter: invert(1);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* Server settings content styling - UPDATED to match theme */
.server-settings-content {
    padding: 10px;
    color: #fff;
    font-family: 'ValheimFont', Arial, sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* Settings title (very compact, still visible) */
.settings-title {
    font-size: 15px; /* Slightly larger from 14px */
    text-align: center;
    padding: 2px 0;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ff8800; /* Theme color */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    /* Removed border-bottom that created the orange divider */
    position: relative;
}

/* Main settings area (dark theme with orange accent) */
.settings-list {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(40, 40, 40, 0.9) 100%);
    border: 1px solid rgba(255, 136, 0, 0.2);
    border-radius: 5px;
    padding: 4px 6px;
    flex-grow: 1;
    position: relative;
    overflow: auto;
    font-size: 11px; /* Size now matches setting names and values */
    color: #ccc;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 
                0 0 8px rgba(255, 136, 0, 0.1);
}

/* Add subtle glow to the settings list */
.settings-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(255, 136, 0, 0.1) 0%, 
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0) 80%,
        rgba(255, 136, 0, 0.05) 100%);
    border-radius: 5px;
    pointer-events: none;
}

/* Settings row - minimal spacing */
.setting-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px; /* Minimal space between rows */
    padding: 1px 0; /* Minimal padding */
    position: relative;
}

/* Setting name */
.setting-name {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px; /* Increased from 10px */
}

/* Setting value */
.setting-value {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px; /* Increased from 10px */
    color: #ff8800; /* Theme color */
}

/* Tooltip container - appears on hover */
.tooltip-container {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ff8800;
    font-size: 12px;
    max-width: 300px;
    z-index: 1000; /* Very high to be above everything */
    pointer-events: none;
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: Arial, sans-serif;
    text-shadow: none;
    text-transform: none;
    font-weight: normal;
    letter-spacing: normal;
}

/* Thunderstore button (updated to match theme) */
.thunderstore-button {
    display: block;
    width: 100%;
    background: linear-gradient(to bottom, #222222, #333333);
    color: #ff8800;
    text-align: center;
    padding: 5px 0; /* Slightly increased from 4px */
    font-size: 13px; /* Increased from 12px */
    font-weight: bold;
    border-radius: 5px;
    margin-top: 3px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 136, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    position: relative;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Add animated border to button */
.thunderstore-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, #414141, #ff8800, #414141) border-box;
    background-size: 300% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: borderGradient 6s ease infinite;
}

/* Button hover effect */
.thunderstore-button:hover {
    color: #ffaa33;
    background: linear-gradient(to bottom, #333333, #444444);
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.3);
    transform: translateY(-2px);
}

/* Button active effect */
.thunderstore-button:active {
    background: linear-gradient(to bottom, #111111, #222222);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transform: translateY(1px);
}

/* Setting highlight when hovering */
.setting-row:hover {
    background: rgba(255, 136, 0, 0.1); /* Theme-colored highlight */
    border-radius: 2px;
    cursor: help;
}

/* Responsive design for extended windows */
@media screen and (max-width: 768px) {
    /* Hide all extended windows and tabs on mobile devices and tablets */
    .extended-window-wrapper,
    .window-tab-container .window-tab {
        display: none !important;
    }
    
    /* Hide any open tooltips */
    .tooltip-container {
        display: none !important;
    }
}