/* =========================
   PAGE LAYOUT
========================= */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }
}

main {
    flex: 1;
    background-color: #F5F7FA;
}

/* =========================
   SIDEBAR
========================= */

/* Outer wrapper used for resizing / layout (targets the element with id like #sidebar-1)
   Keep the existing `.sidebar` class on the inner nav (WebsiteNavBar) so collapsing logic and styling remain.
*/
.sidebar-outer {
    background-color: #F5F7FA;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.09);
    z-index: 100;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Ensure inner `.sidebar` (the nav component) fills the wrapper so the layout pushes main content. */
@media (min-width: 641px) {
    .sidebar-outer {
        width: 250px;
        height: 100vh;
        position: relative;
        top: 0;
    }

    /* make inner nav fill the outer wrapper (prevents inner .sidebar from forcing its own fixed width) */
    .sidebar {
        width: 100%;
        height: 100%;
    }
}

/* Collapsed state styling applied by JS (class: is-collapsed on the outer wrapper)
   The collapsed width should be a bit larger than icon size so items remain usable.
*/
@media (min-width: 641px) {
    .sidebar-outer.is-collapsed {
        width: 80px !important;
    }

    /* compact the inner layout: hide text, center icons */
    .sidebar-outer.is-collapsed .nav-item-row {
        justify-content: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .sidebar-outer.is-collapsed .nav-item-text,
    .sidebar-outer.is-collapsed .nav-subsection-title strong,
    .sidebar-outer.is-collapsed .badge,
    .sidebar-outer.is-collapsed .navbar-brand {
        display: none;
    }

    .sidebar-outer.is-collapsed .nav-scrollable {
        padding: 0.25rem;
    }

    /* keep column icons visible and aligned */
    .sidebar-outer.is-collapsed .column-row {
        padding-left: 0; /* avoid indentation in compact mode */
        justify-content: center;
    }
}

/* =========================
   TOP ROW
========================= */

.top-row {
    display: flex;
    align-items: center;
    background: #2a3b57;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.09);
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .top-row {
        height: 2.54rem;
        display: flex;
        align-items: center;
        background: #2a3b57;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.09);
    }
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: 'Avenir Serif Libre', cursive;
}

/* =========================
   NAVBAR TOGGLER
========================= */

.navbar-toggler {
    background-color: transparent;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }
}

/* =========================
   NAV CONTENT
========================= */

/* Mobile collapse logic */
.nav-scrollable.collapsed {
    display: none;
}

.nav-scrollable.expanded {
    display: block;
}

/* Desktop always visible */
@media (min-width: 641px) {
    .nav-scrollable {
        display: block !important;
    }
}

/* =========================
   NAV ITEMS
========================= */

.cursor-pointer {
    cursor: pointer;
}

.database-nav { 
    font-size: 0.9rem;
    color: #333;
}

.nav-scrollable {
     flex: 1 1 auto;        /* take remaining vertical space inside .sidebar */
     min-height: 0;         /* allow flex item to shrink so overflow can scroll */
     padding: 0.2rem 0rem;
     overflow-y: auto;      /* enable vertical scrolling for tall menus */
     overflow-x: hidden;
}

.nav-section-title {
    padding-right: 0.25rem;
    padding: 0.2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.nav-section-text {
    font-size: 1.05rem;
}

/* Remove top margin from the first section title (e.g., DATASETS) */
nav .nav-section-title:first-of-type {
    margin-top: 0;
}

.nav-dataset-border{
    border-bottom: 1px solid #ddd;
}

.nav-subsection{
    padding-left: 0.5rem;
}

.nav-subsection-title {
    font-size: 0.9rem;
}

.nav-item-row {
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background-color 0.12s ease-in-out;
}

    .nav-item-row:hover {
        background: rgba(0, 0, 0, 0.04);
        color: inherit;
    }

.nav-item-row-editing {
    cursor: default;
}

.nav-item-row-editing:hover {
    background: transparent;
}

.nav-item-text {
    font-size: 0.85rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-center-under-icon {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0% !important;
    transform: translateX(-87%) !important;
    right: auto !important;
}

.dropdown-center-under-icon.open-upwards {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
}

.dropdown-menu.show.dropdown-center-under-icon {
    z-index: 1200;
}


input.form-control-sm {
    font-size: 0.85rem;
}

.dataset-name {
    font-size: 0.9rem;
}
/* =========================
   COLUMN ITEMS
========================= */

.column-row {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: #6c757d;
    padding-left: 1.5rem;
    padding-right: 1rem;
    min-width: 0;
}

.column-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* =========================
   SCROLLBAR
========================= */

.nav-scrollable::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}

.sidebar-action-btn {
    width: 100%;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-row {
    background-color: #F5F7FA;
}

/* keep existing .sidebar styles for the inner nav component (collapsing, visuals) */
.sidebar {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* splitter styling used by the resizer script */
.sidebar-splitter {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin-top: 5.2rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .sidebar-splitter.resizing {
        background: rgba(128, 128, 128, 0.35);
    }

.noselect {
    user-select: none;
}

.sidebar-splitter:hover {
    background: rgba(128, 128, 128, 0.2);
}

/* Base primary button */
.btn-primary {
    background-color: #2a3b57 !important;
    border-color: #2a3b57 !important;
}

    /* Hover */
    .btn-primary:hover {
        background-color: #233247 !important;
        border-color: #233247 !important;
    }

    /* Active / pressed */
    .btn-primary:active,
    .btn-primary.active,
    .btn-check:checked + .btn-primary {
        background-color: #1d2a3c !important;
        border-color: #1d2a3c !important;
    }

    /* Disabled */
    .btn-primary:disabled,
    .btn-primary.disabled {
        background-color: #2a3b57 !important;
        border-color: #2a3b57 !important;
        opacity: 0.65;
    }

/* Base warning button */
.btn-warning {
    background-color: #ffef61 !important;
    border-color: #ffef61 !important;
    color: #212529 !important;
}

    /* Hover */
    .btn-warning:hover {
        background-color: #f3e653 !important;
        border-color: #f3e653 !important;
        color: #212529 !important;
    }

    /* Active / pressed */
    .btn-warning:active,
    .btn-warning.active,
    .btn-check:checked + .btn-warning {
        background-color: #e2d64a !important;
        border-color: #e2d64a !important;
        color: #212529 !important;
    }

    /* Disabled */
    .btn-warning:disabled,
    .btn-warning.disabled {
        background-color: #ffef61 !important;
        border-color: #ffef61 !important;
        color: #212529 !important;
        opacity: 0.65;
    }

/* Base success button */
.btn-success {
    background-color: #1b8c19 !important;
    border-color: #1b8c19 !important;
    color: #fff !important;
}

    /* Hover */
    .btn-success:hover {
        background-color: #167415 !important;
        border-color: #167415 !important;
        color: #fff !important;
    }

    /* Active / pressed */
    .btn-success:active,
    .btn-success.active,
    .btn-check:checked + .btn-success {
        background-color: #125e11 !important;
        border-color: #125e11 !important;
        color: #fff !important;
    }

    /* Disabled */
    .btn-success:disabled,
    .btn-success.disabled {
        background-color: #1b8c19 !important;
        border-color: #1b8c19 !important;
        color: #fff !important;
        opacity: 0.65;
    }

/* Base outline primary */
.btn-outline-primary {
    color: #2a3b57 !important;
    border-color: #2a3b57 !important;
}

    /* Hover */
    .btn-outline-primary:hover {
        background-color: #2a3b57 !important;
        border-color: #2a3b57 !important;
        color: #fff !important;
    }

    /* Active / pressed */
    .btn-outline-primary:active,
    .btn-outline-primary.active,
    .btn-check:checked + .btn-outline-primary {
        background-color: #233247 !important;
        border-color: #233247 !important;
        color: #fff !important;
    }

    /* Disabled */
    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        color: #2a3b57 !important;
        border-color: #2a3b57 !important;
        opacity: 0.65;
    }

/* Base outline warning */
.btn-outline-warning {
    color: #ffef61 !important;
    border-color: #ffef61 !important;
    background-color: transparent !important;
}

    /* Hover */
    .btn-outline-warning:hover {
        background-color: #ffef61 !important;
        border-color: #ffef61 !important;
        color: #212529 !important;
    }

/* Base outline success */
.btn-outline-success {
    color: #1b8c19 !important;
    border-color: #1b8c19 !important;
}

    .btn-outline-success:hover {
        background-color: #1b8c19 !important;
        border-color: #1b8c19 !important;
        color: #fff !important;
    }

    .btn-outline-success:active,
    .btn-outline-success.active,
    .btn-check:checked + .btn-outline-success {
        background-color: #167415 !important;
        border-color: #167415 !important;
        color: #fff !important;
    }

    .btn-outline-success:disabled,
    .btn-outline-success.disabled {
        color: #1b8c19 !important;
        border-color: #1b8c19 !important;
        opacity: 0.65;
    }

    /* Active / pressed */
    .btn-outline-warning:active,
    .btn-outline-warning.active,
    .btn-check:checked + .btn-outline-warning {
        background-color: #f3e653 !important;
        border-color: #f3e653 !important;
        color: #212529 !important;
    }

    /* Focus ring */
    .btn-outline-warning:focus,
    .btn-outline-warning:focus-visible {
        box-shadow: 0 0 0 0.25rem rgba(255, 239, 97, 0.5) !important;
    }

    /* Disabled */
    .btn-outline-warning:disabled,
    .btn-outline-warning.disabled {
        color: #ffef61 !important;
        border-color: #ffef61 !important;
        background-color: transparent !important;
        opacity: 0.65;
    }

.insert-query-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--bs-primary);
    border: none;
    background: transparent;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insert-query-btn:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}

.nav-item-row:hover .insert-query-btn {
    opacity: 0.7;
}

.insert-query-btn i {
    font-size: 16px;
}

.spinner-blue{
    color: #2a3b57 !important;
}

.dataset-select-wrapper {
    flex: 1;
    min-width: 0; /* REQUIRED for ellipsis */
}

.dataset-select {
    width: 100%;
    max-width: 260px;
}

.dataset-action-btn {
    padding: 0.25rem 0.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-section-title {
    padding-right: 0.25rem;
}

.saved-query-rename-inline {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.saved-query-rename-inline-input {
    padding-block: 0.1rem;
    font-size: 0.8rem;
    height: 1.6rem;
}

.saved-query-rename-icon {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 0.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #198754; /* default to success color, override via utility if needed */
}

.saved-query-rename-icon:hover {
    opacity: 0.8;
}

.cancel-query-rename-icon {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 0.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff3030;
}

.cancel-query-rename-icon:hover {
    opacity: 0.8;
}