/* Use a dark theme for the entire page */
:root {
    --top-bar-height: 56px; /* Bootstrap's default navbar height */
    --sidebar-width: 215px;
    --control-padding: 1rem;
}

/* Ensure the page takes up the full screen and no more */
html, body {
    height: 100vh;
    overflow: hidden;
    background-color: #212529; /* Dark background */
}

/* 1. Static Top Bar */
.top-bar {
    height: var(--top-bar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* On top of everything */
}

/* 2. Collapsible Left Toolbar (Sidebar) */
.sidebar {
    position: fixed;
    top: var(--top-bar-height); /* Align with top of the page */
    left: calc(var(--sidebar-width) * -1); /* Start hidden off-screen */
    width: var(--sidebar-width);
    height: 350px;
    background-color: #212529; /* Dark background */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1020; /* Below top bar, above canvas */
    transition: left 0.3s ease-in-out;
    overflow-y: auto; /* Allow item list to scroll */
}

/* This class will be toggled with JavaScript */
.sidebar.is-open {
    left: 0; /* Slide in */
}

/* 3. Main Canvas Area */
#canvas-container {
    position: fixed;
    top: var(--top-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    /* This will be our "default" dark mode background for the canvas */
    background-color: #1a1a1a; 
    cursor: grab; /* Default cursor for panning */
}

/* We'll add this class with JS for the inverted light mode */
#canvas-container.light-mode {
    background-color: #ffffff;
}

/* 4. On-Screen Canvas Controls */
.controls-bottom-left {
    position: fixed;
    bottom: var(--control-padding);
    left: var(--control-padding);
    z-index: 1000;
    
    /* --- MODIFIED --- */
    /* Match the right controls for vertical stacking */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* This creates the space between Undo/Redo */
}

.controls-bottom-right {
    position: fixed;
    bottom: var(--control-padding);
    right: var(--control-padding);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between buttons */
}

/* Style the control buttons */
.btn-control {
    font-size: 1.25rem;
    width: 50px;
    height: 50px;
    line-height: 1.5;
}

/* Desktop Responsive: When the screen is wide, pin the menu open */
@media (min-width: 992px) {
    .sidebar {
        left: 0; /* Always open */
    }

    #canvas-container {
        left: var(--sidebar-width); /* Make room for the open sidebar */
    }

    /* Hide the mobile menu toggle button on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* --- New Sidebar Item Styles --- */

.sidebar-item {
    /* RESTORED: Compact vertical padding */
    padding: 0.465rem 0rem; 
    cursor: grab;
    user-select: none;
    
    /* Crucial: Ensure no stray default borders are applied to the element itself */
    border-top: none;
    border-bottom: none;
}

/* Apply the dividing line to ALL items EXCEPT the last one */
.sidebar-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-item:active {
    cursor: grabbing;
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-item-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- New Sidebar Height for Mobile --- */

@media (max-width: 575.98px) { /* Extra small devices (Bootstrap's xs/mobile portrait) */
    .btn-control {
        font-size: 1rem;
        width: 40px;
        height: 40px;
    }

    /* Reduce space between controls on small screens */
    .controls-bottom-right, 
    .controls-bottom-left {
        gap: 0.25rem;
    }
}

/* --- NEW STYLES FOR ALLIANCE MODALS --- */

/* Make the color picker in the edit modal larger */
#allianceColorInput {
    width: 100%;
    height: 50px;
    cursor: pointer;
}

/* Make the alliance list in the config modal scrollable if it gets too long */
#alliance-list-group {
    max-height: 40vh;
    overflow-y: auto;
}

@media (min-width: 768px) {
  #layout-title {
    font-size: 1.5rem !important; 
  }
}

.filter-overlay-panel {
    position: fixed;
    top: calc(var(--top-bar-height) + 1rem);
    right: 1rem;
    width: 250px; /* You can adjust this width */
    max-height: 400px; /* You can adjust this height */
    background-color: #2b3035; /* Matches your dark theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem; /* Bootstrap's default */
    z-index: 1025; /* Above canvas, below top bar */
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* This class will be toggled by JS */
.filter-overlay-panel.hidden {
    display: none;
}

.filter-overlay-panel.position-left {
    top: auto;
    right: auto;
    bottom: var(--control-padding);
    left: calc(var(--control-padding) + 50px + 0.5rem); /* 1rem padding + 50px button + 0.5rem gap */
}

.filter-overlay-panel.position-bottom-right {
    top: auto;
    right: calc(var(--control-padding) + 50px + 0.5rem);
    bottom: var(--control-padding);
}

.filter-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-overlay-title {
    margin-bottom: 0;
    font-size: 1.1rem;
}

.filter-list-container {
    overflow-y: auto;
    padding: 0.5rem;
}

.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    user-select: none;
    color: #f8f9fa; /* Light text */
}

.filter-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.filter-item-label {
    font-size: 0.9rem;
    /* Prevent text from breaking state icon to new line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}

.filter-item-state {
    font-size: 1.1rem;
    flex-shrink: 0; /* Don't let the icon shrink */
}

/* --- State Visuals (Uses Bootstrap Icons) --- */

/* State: Visible */
.filter-item[data-state="visible"] {
    opacity: 1;
}
.filter-item[data-state="visible"] .filter-item-state::before {
    content: "\F341"; /* Bootstrap Icon: bi-eye-fill */
    font-family: "bootstrap-icons";
    color: #198754; /* Green */
}

/* State: Transparent */
.filter-item[data-state="transparent"] {
    opacity: 0.7;
}
.filter-item[data-state="transparent"] .filter-item-state::before {
    content: "\F253"; /* Bootstrap Icon: bi-circle-half */
    font-family: "bootstrap-icons";
    color: #ffc107; /* Yellow */
}

/* State: Hidden */
.filter-item[data-state="hidden"] {
    opacity: 0.5;
    text-decoration: line-through;
}
.filter-item[data-state="hidden"] .filter-item-state::before {
    content: "\F340"; /* Bootstrap Icon: bi-eye-slash-fill */
    font-family: "bootstrap-icons";
    color: #dc3545; /* Red */
}

/* --- Fix for Long Layout Title (v5) --- */

/* 1. Force all navbar items onto a single line and add gaps */
.top-bar .container-fluid {
    flex-wrap: nowrap;  /* Force single line */
    align-items: center; /* Vertical alignment */
    gap: 1rem;          /* Add 1rem gaps between hamburger, title, and right-icons */
}

/* 2. Tell the center brand (with 'mx-auto') 
      that it is allowed to shrink */
.top-bar .navbar-brand.mx-auto {
    flex-shrink: 1; /* Allow this container to shrink */
    min-width: 0;   /* CRITICAL: Allow shrinking below content size */
    
    /* Override the 'gap' for the auto-margin to work */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Tell the title text *inside* the brand 
      to truncate with '...' */
#layout-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Fix for Landscape Mobile Controls --- */
@media (max-height: 450px) {
    
    /* 1. Make buttons smaller */
    .btn-control {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* 2. Reduce gap between buttons */
    .controls-bottom-left,
    .controls-bottom-right {
        gap: 0.25rem; /* Tighter gap */
    }

    /* 3. Pull containers closer to the corner */
    .controls-bottom-left {
        bottom: 0.5rem;
        left: 0.5rem;
    }
    .controls-bottom-right {
        bottom: 0.5rem;
        right: 0.5rem;
    }

    /* 4. Adjust filter overlay panels to match */
    .filter-overlay-panel.position-left {
        bottom: 0.5rem; /* Match container */
        left: calc(0.5rem + 36px + 0.25rem); /* calc(new-padding + new-button-width + new-gap) */
    }

    .filter-overlay-panel.position-bottom-right {
        bottom: 0.5rem; /* Match container */
        right: calc(0.5rem + 36px + 0.25rem); /* calc(new-padding + new-button-width + new-gap) */
    }
}