/* bedrock-server-manager/bedrock_server_manager/web/static/css/layout.css */
/**
 * Main Page Layout and Component Styles
 *
 * Defines the primary two-column layout (sidebar + main content),
 * styles for the sidebar navigation links, rules for showing/hiding
 * content sections based on navigation, and the layout/styling for
 * server status cards displayed on the dashboard. Includes responsive
 * adjustments for different screen sizes.
 */

/* ==========================================================================
   Page Layout Container (Sidebar + Main Content)
   ========================================================================== */

.page-layout {
    display: flex; /* Use flexbox for sidebar/content arrangement */
    gap: 20px; /* Space between sidebar and main content */
    margin-top: 20px; /* Space below the header/server selection section */
    /* Align items at the start (top) if they have different heights */
    align-items: flex-start;
}

/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */

.sidebar-nav {
    /* Flex properties: Don't grow, don't shrink, fixed base width */
    flex: 0 0 220px;
    background-color: var(--sidebar-background-color); /* Slightly different background */
    border: 1px solid var(--sidebar-border-color);
    padding: 15px 0; /* Vertical padding only */
    border-radius: 0; /* Sharp corners */
    /* Adjust height automatically based on content */
    height: fit-content; /* Or use 'min-height' if needed */
    box-sizing: border-box; /* Include padding/border in width */
    /* Consider position: sticky for fixed sidebar on scroll if needed */
    /* position: sticky; top: 20px; */
}

/* Individual navigation links */
.nav-link {
    display: flex; /* Align icon (if added) and text */
    align-items: center;
    padding: 10px 20px; /* Spacing inside link */
    color: var(--sidebar-link-text-color); /* Default text color */
    text-decoration: none;
    font-weight: 600; /* Semi-bold */
    /* Indicator space: Transparent border initially */
    border-left: 3px solid transparent;
    /* Smooth transitions for hover/active states */
    transition: background-color 0.15s ease, border-left-color 0.15s ease, color 0.15s ease;
    white-space: nowrap; /* Prevent text wrapping */
    font-size: 0.95em;
    box-sizing: border-box;
}

.nav-item {
    position: relative;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding-left: 20px;
}

/* Space for potential future icons */
.nav-link i {
    margin-right: 10px;
    width: 1.2em; /* Fixed width for alignment */
    text-align: center;
    flex-shrink: 0; /* Prevent icon shrinking */
}

/* Hover state for navigation links */
.nav-link:hover {
    background-color: var(--sidebar-link-hover-background-color); /* Slightly darker background on hover */
    color: var(--sidebar-link-hover-text-color); /* Brighter text */
}

/* Active state for the currently selected navigation link */
.nav-link.active {
    background-color: var(--sidebar-link-active-background-color); /* Different background for active */
    color: var(--sidebar-link-hover-text-color);
    /* Green indicator border */
    border-left-color: var(--sidebar-link-active-border-color);
}

/* Optional visual separator within the navigation */
.nav-separator {
    border: none; /* Reset default */
    border-top: 1px solid var(--border-color); /* Horizontal line */
    margin: 15px 10px; /* Vertical margin, reduced horizontal margin */
}

/* Special button styling within the navigation panel */
/* Note: Base styles and hover/active states are primarily defined in buttons.css */
.nav-action-button {
    /* Layout within sidebar */
    display: block; /* Make it take full width */
    margin: 15px 15px 5px 15px; /* Margins within sidebar */
    width: auto; /* Adjust width automatically */
    /* Specific padding/text alignment if needed (uses defaults from buttons.css otherwise) */
    /* padding-top: 8px; */
    /* padding-bottom: 8px; */
    /* text-align: center; */
    /* font-weight: bold; */
    /* Colors and left border handled by buttons.css */
}
/* Adjust icon spacing if icons are used */
.nav-action-button i {
    margin-right: 8px;
}


/* ==========================================================================
   Main Content Area & Sections
   ========================================================================== */

.main-content {
    flex-grow: 1; /* Allow main content to take up remaining horizontal space */
    min-width: 0; /* Crucial for flex items containing block elements */
                  /* Prevents content from overflowing its container if it's too wide */
    box-sizing: border-box;
}

/* Individual content sections linked from the sidebar */
.content-section {
    display: none; /* Hide all sections by default */
    background-color: var(--sidebar-background-color); /* Match sidebar background */
    border: 1px solid var(--sidebar-border-color);
    padding: 20px 25px; /* Inner spacing */
    border-radius: 0;
    box-sizing: border-box;
    /* Add margin if separation between sections is desired when visible */
    /* margin-bottom: 20px; */
}

/* Style for the currently active/visible content section */
.content-section.active {
    display: block; /* Show the active section */
}

/* Default heading style within content sections */
.content-section h2 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 20px; /* Space below heading */
    padding-bottom: 15px; /* Space above border */
    border-bottom: 1px solid var(--sidebar-border-color); /* Separator line */
    font-size: 1.6em; /* Section heading size */
    font-weight: 600;
    color: var(--text-color);
    text-shadow: none; /* Ensure no text shadow */
}

/* ==========================================================================
   Server Card List (Dashboard)
   ========================================================================== */

/* Grid container for server status cards */
.server-card-list {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
    display: grid;
    /* Responsive grid columns: Fill with columns >= 300px */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px; /* Gap between cards */
    box-sizing: border-box;
}

/* Individual server status card */
.server-card {
    background-color: var(--server-card-background-color); /* Card background */
    border: 1px solid var(--server-card-border-color);
    justify-content: space-between;
    padding: 10px; /* Reduced padding */
    border-radius: 0;
    display: flex; /* Use flexbox for internal layout */
    align-items: center; /* Vertically align items */
    gap: 10px; /* Space between thumbnail, info, actions */
    transition: background-color 0.15s ease; /* Subtle hover effect (optional) */
    overflow: hidden; /* Prevent content spilling out */
    box-sizing: border-box;
}
/* Optional: Slight hover effect */
/* Consider disabling on touch devices if :hover causes issues */
.server-card:hover {
     background-color: var(--server-card-hover-background-color);
}

/* Thumbnail area for world icon */
.server-card-thumbnail {
    flex-shrink: 0; /* Prevent shrinking */
    width: 50px;
    height: 50px;
    background-color: #333; /* Placeholder background */
    border: 1px solid #555;
    display: flex; /* Center icon within */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Clip image */
    border-radius: 0;
}

/* World icon image itself */
.world-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
}
/* Specific styling for the default icon (favicon.ico) */
.world-icon-img.default {
    object-fit: contain; /* Scale down to fit without cropping */
    width: auto;
    height: auto;
    max-width: 80%; /* Limit size within thumbnail */
    max-height: 80%;
    /* Preserve pixels for blocky icons */
    image-rendering: pixelated;
    image-rendering: crisp-edges; /* Wider browser support */
}

/* Container for server name, status, version */
.server-card-info {
    flex-grow: 1; /* Take available space */
    line-height: 1.4;
    min-width: 0; /* Allow text to shrink and wrap/ellipsis */
}

/* Server name heading */
.server-card-info h3 {
    margin: 0 0 3px 0; /* Tight spacing */
    font-size: 1.05em; /* Slightly larger than body */
    color: var(--server-card-info-label-color);
    /* Prevent long names breaking layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Paragraphs for status/version info */
.server-card-info p {
    margin: 0;
    font-size: 0.85em;
    color: var(--server-card-info-text-color);
}

/* Label part of status/version lines */
.server-card-info .info-label {
    font-weight: 600;
    color: var(--server-card-info-label-color);
}
/* Specific coloring for status text */
/* Use classes on the span containing the status text */
.server-card-info .status-text.status-running { color: var(--primary-button-background-color); } /* Light Green */
.server-card-info .status-text.status-stopped { color: var(--danger-button-background-color); } /* Light Red */
.server-card-info .status-text.status-starting,
.server-card-info .status-text.status-stopping,
.server-card-info .status-text.status-restarting,
.server-card-info .status-text.status-updating { color: var(--message-warning-border-color); } /* Orange */
.server-card-info .status-text.status-installed { color: var(--sidebar-link-active-border-color); } /* Light Blue */
.server-card-info .status-text.status-unknown,
.server-card-info .status-text.status-error { color: var(--danger-button-border-color); } /* Lighter Red for Error/Unknown */


/* Container for action buttons on the card */
.server-card-actions {
    flex-shrink: 0; /* Prevent shrinking */
    display: flex;
    flex-direction: row; /* Keep horizontal layout */
    gap: 5px; /* Spacing between buttons */
    align-items: center;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: flex-end; /* Align buttons to the right */
}
/* Sizing/margin for buttons within cards (defined in buttons.css) */


/* --- "No Servers Found" Message --- */
.no-servers-message {
    padding: 25px;
    text-align: center;
    font-style: italic;
    color: var(--text-color);
    background-color: var(--container-background-color); /* Slightly different background */
    border: 1px dashed var(--border-color); /* Dashed border to indicate placeholder */
    border-radius: 0;
    /* Ensure it spans grid columns if used within .server-card-list */
    grid-column: 1 / -1;
}


/* ==========================================================================
   Responsive Adjustments for Layout
   ========================================================================== */

@media (max-width: 900px) { /* Breakpoint for stacking sidebar */
    .page-layout {
        flex-direction: column; /* Stack sidebar and content vertically */
        gap: 15px;
        margin-top: 15px;
    }

/* Dropdown Menu for Server Card */
.dropdown-menu {
    position: relative; /* This is the anchor for the dropdown content */
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px; /* Add some padding for easier clicking */
    line-height: 1;
}

.dropdown-content {
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    position: absolute;
    right: 0; /* Align to the right of the dropdown-menu container */
    top: 100%; /* Position it below the button */
    background-color: var(--background-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100; /* High z-index to be safe */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

/* This class is toggled by JS to show the dropdown */
.dropdown-content.show {
    visibility: visible;
    opacity: 1;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: var(--accent-color);
}


    .sidebar-nav {
        flex-basis: auto; /* Reset fixed basis */
        width: 100%;      /* Take full width */
        display: flex;    /* Layout links horizontally */
        overflow-x: auto; /* Enable horizontal scrolling for nav links */
        padding: 5px 0;   /* Adjust vertical padding */
        border-left: none;
        border-right: none;
        border-top: 1px solid #555; /* Add top border when stacked */
        border-bottom: 1px solid #555; /* Add bottom border too */
        height: auto;     /* Let height be determined by content */
        /* order: 1; */ /* Optional: Visually place below main content */
    }

    /* Adjust nav links for horizontal layout */
    .nav-link {
        flex-shrink: 0; /* Prevent links shrinking */
        border-left: none; /* Remove vertical indicator */
        border-bottom: 3px solid transparent; /* Use bottom border indicator */
        padding: 8px 15px; /* Adjust padding */
        margin: 0 2px; /* Small gap between links */
    }
    /* Active state indicator for horizontal nav */
    .nav-link.active {
        border-left-color: transparent; /* Ensure no left border */
        border-bottom-color: var(--sidebar-link-active-border-color); /* Highlight bottom */
        background-color: var(--sidebar-link-active-background-color); /* Slightly different active bg */
    }

    .nav-separator { display: none; } /* Hide vertical separators */

    /* Adjust nav action button for horizontal layout */
    .nav-action-button {
        margin: 0 5px; /* Align with other links */
        border-left: none;
        border-bottom: 3px solid var(--sidebar-link-active-border-color); /* Match active style */
        flex-shrink: 0; /* Prevent shrinking */
        padding: 6px 12px; /* Adjust padding */
        display: inline-block; /* Make inline */
        width: auto; /* Reset width */
    }

    .main-content {
       /* order: 0; */ /* Optional: Ensure it appears first visually */
    }

    .content-section {
        padding: 15px; /* Reduce padding */
    }

     .server-card-list {
         /* Grid might naturally become single column, or force it */
         grid-template-columns: 1fr;
         gap: 10px;
     }
}

@media (max-width: 480px) { /* Mobile phones */
    .content-section {
         padding: 12px;
     }
      .content-section h2 {
         font-size: 1.4em; /* Smaller section headings */
         margin-bottom: 15px;
         padding-bottom: 10px;
     }
     /* Adjust server card fonts */
     .server-card-info h3 { font-size: 1em; }
     .server-card-info p { font-size: 0.8em; }
     .server-card-actions { justify-content: center; } /* Center buttons on small screens */
}

.footer {
    text-align: center;
}

.footer a {
    color: var(--text-color);
    text-decoration: none;
}

    .footer a:hover {
        color: var(--text-color);
        text-decoration: underline;
    }

.user-info {
    margin-bottom: 10px;
}

.user-info span {
    margin-right: 10px;
}