/*
 * Titan's page shell on top of Tabler (MIT): the sidebar, topbar, page header
 * and footer, and the few helper classes the pages use that Tabler doesn't
 * have (font sizes, avatar initials). Page-specific styles live in
 * servermon.css.
 */

:root {
    --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --tblr-sidebar-width: 15rem;
}

/* ---- sidebar --------------------------------------------------------- */
.sm-sidebar .navbar-brand { padding: .75rem 0; }
.sm-sidebar .navbar-nav .nav-link { padding-top: .45rem; padding-bottom: .45rem; }
.sm-sidebar .nav-link-icon i { font-size: 1.15rem; line-height: 1; }
.sm-sidebar .nav-link .badge { margin-inline-start: auto; }
.sm-menu-title {
    padding: 1rem 1rem .35rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: color-mix(in oklab, var(--tblr-navbar-color, #fff) 55%, transparent);
}
.sm-sidebar .sm-fleet-mini { padding: .5rem 1rem .25rem; color: color-mix(in oklab, var(--tblr-navbar-color, #fff) 80%, transparent); }
@media (min-width: 992px) {
    .sm-sidebar .navbar-collapse { overflow-y: auto; }
}

/* ---- topbar ---------------------------------------------------------- */
.sm-topbar { min-height: 3.5rem; }
/* Tabler hides a top navbar beside the sidebar; Titan keeps its topbar. */
html[data-bs-navbar-position=vertical] .page:has(> .navbar-vertical) > header.navbar.sm-topbar:not(.navbar-vertical) { display: flex; }
.sm-logo img { height: 32px !important; width: auto !important; }
.sm-topbar .sm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1.15rem; color: inherit; }
.sm-topbar .sm-search { max-width: 22rem; }
.sm-bell-count { position: absolute; top: 2px; right: 0; font-size: 10px; padding: 2px 5px; line-height: 1; color: #fff; }
.sm-bell-menu { width: 22rem; max-width: 92vw; }
.sm-bell-list { max-height: 22rem; overflow-y: auto; }

/* ---- page header, body and footer -------------------------------------- */
.page-body { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.page-title-box { margin-bottom: 1.25rem; }
.page-title-box h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: .15rem; line-height: 1.4; }
.page-body .card { margin-bottom: 1.25rem; }
.footer { font-size: .8125rem; }

/* ---- helpers the pages use ------------------------------------------ */
.font-size-11 { font-size: 11px !important; }
.font-size-12 { font-size: 12px !important; }
.font-size-13 { font-size: 13px !important; }
.font-size-14 { font-size: 14px !important; }
.font-size-15 { font-size: 15px !important; }
.font-size-16 { font-size: 16px !important; }
.font-size-18 { font-size: 18px !important; }
.font-size-20 { font-size: 20px !important; }
.font-size-22 { font-size: 22px !important; }
.font-size-24 { font-size: 24px !important; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }

/* Initials / icon circles: a sized box with an .avatar-title inside. */
.avatar-xs:not(.avatar) { width: 2rem; height: 2rem; flex-shrink: 0; }
.avatar-sm:not(.avatar) { width: 3rem; height: 3rem; flex-shrink: 0; }
.avatar-md:not(.avatar) { width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.avatar-lg:not(.avatar) { width: 6rem; height: 6rem; flex-shrink: 0; }
.avatar-title { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-weight: 500; }

/* Solid badges and circles keep white text (Tabler tints them otherwise). */
.badge:is(.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary, .bg-dark):not([class*="bg-opacity"]):not([class*="text-"]) { color: #fff; }

.nav-tabs-custom { margin-bottom: 1rem; }
.btn-soft-primary { background: var(--tblr-primary-lt); color: var(--tblr-primary); border-color: transparent; }
.btn-soft-primary:hover { background: var(--tblr-primary); color: #fff; }
.dropdown-menu-lg { min-width: 20rem; }
.table > thead > tr > th { white-space: nowrap; }

/* ---- dark theme: neutral buttons and table heads stay dark ------------- */
[data-bs-theme=dark] .btn-light { background-color: rgba(255, 255, 255, .06); color: var(--tblr-body-color); border-color: var(--tblr-border-color); }
[data-bs-theme=dark] .btn-light:hover, [data-bs-theme=dark] .btn-light:focus, [data-bs-theme=dark] .btn-light.active { background-color: rgba(255, 255, 255, .12); color: var(--tblr-body-color); }
[data-bs-theme=dark] .table-light { --tblr-table-bg: var(--tblr-bg-surface-secondary); --tblr-table-color: var(--tblr-body-color); --tblr-table-border-color: var(--tblr-border-color); }

/* ---- Select2 (searchable pickers) in Tabler's form style, both themes ---- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
    min-height: calc(1.4285714286em + 1.125rem + 2px);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tblr-body-color); line-height: calc(1.4285714286em + 1.125rem); padding-left: .75rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.4285714286em + 1.125rem); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tblr-secondary); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--tblr-primary); }
.select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--tblr-bg-surface-secondary); opacity: .75; }
.select2-dropdown { background-color: var(--tblr-bg-surface); border-color: var(--tblr-border-color); color: var(--tblr-body-color); }
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)); color: var(--tblr-body-color); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--tblr-primary); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--tblr-bg-surface-secondary); }
.sm-login-logo img { height: 56px !important; width: auto !important; }