@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-300.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/backpack/brand/fonts/archivo-normal-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bb-dark-green: #00414A;
    --bb-green: #005662;
    --bb-light-green: #b1cbcf;
    --bb-orange: #F96300;
    --bb-gray: #A1A1A1;

    --tblr-primary: var(--bb-dark-green);
    --tblr-primary-rgb: 0, 65, 74;
    --tblr-primary-fg: #ffffff;

    --tblr-secondary: var(--bb-green);
    --tblr-secondary-rgb: 0, 86, 98;

    --bb-accent: var(--bb-light-green);

    --tblr-link-color: var(--bb-dark-green);
    --tblr-link-color-rgb: 0, 65, 74;
    --tblr-link-hover-color: var(--bb-green);

    --tblr-border-radius: 0.75rem;
    --tblr-border-radius-sm: 0.5rem;
    --tblr-border-radius-lg: 1rem;

    --tblr-font-sans-serif: "Archivo", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--tblr-font-sans-serif);
    letter-spacing: 0.1px;
}

.navbar-vertical.navbar {
    --tblr-navbar-bg: var(--bb-dark-green);
    background: var(--bb-dark-green) !important;
    border-right: 0;
}
.navbar-vertical .navbar-brand {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.navbar-vertical .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.78);
    border-radius: 0.6rem;
    margin: 1px 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-vertical .nav-item .nav-link:hover,
.navbar-vertical .nav-item .nav-link:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}
.navbar-vertical .nav-item .nav-link .nav-link-icon {
    color: inherit;
    opacity: 0.9;
}

.navbar-vertical .nav-item.bb-nav-heading {
    margin: 1.1rem 0.75rem 0.3rem;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-item .nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 3px 0 0 0 var(--bb-accent);
}

.btn {
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 1.15rem;
}
.btn-primary {
    --tblr-btn-bg: var(--bb-dark-green);
    --tblr-btn-border-color: var(--bb-dark-green);
    --tblr-btn-hover-bg: var(--bb-green);
    --tblr-btn-hover-border-color: var(--bb-green);
    --tblr-btn-active-bg: var(--bb-green);
}
.btn-secondary {
    --tblr-btn-bg: var(--bb-green);
    --tblr-btn-border-color: var(--bb-green);
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-bg: var(--bb-dark-green);
    --tblr-btn-hover-border-color: var(--bb-dark-green);
    --tblr-btn-hover-color: #ffffff;
}

.card {
    border-radius: 1rem;
    border: 1px solid rgba(0, 65, 74, 0.08);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 1px 3px rgba(16, 24, 40, 0.06);
}
.card .card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    font-weight: 700;
}

.form-control,
.form-select {
    border-radius: 0.7rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bb-light-green);
    box-shadow: 0 0 0 0.2rem rgba(0, 65, 74, 0.15);
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--bb-gray);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700;
}

.page-header .page-pretitle {
    color: var(--bb-gray);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.7rem;
    font-weight: 700;
}
.page-header .page-title {
    color: var(--bb-dark-green);
    font-weight: 700;
}
.breadcrumb {
    font-size: 0.82rem;
}
.breadcrumb .breadcrumb-item a {
    color: var(--bb-green);
    text-decoration: none;
}
.breadcrumb .breadcrumb-item.active {
    color: var(--bb-gray);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 0.6rem;
    border: 1px solid #e2e6e7;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--bb-light-green);
    box-shadow: 0 0 0 0.2rem rgba(0, 65, 74, 0.15);
}

.table.card-table {
    margin-bottom: 0;
}
.table-hover tbody tr:hover > * {
    background: rgba(0, 65, 74, 0.035);
}
.table td,
.table th {
    vertical-align: middle;
}

.table .btn-sm,
.table .btn.btn-link {
    border-radius: 0.55rem;
    font-weight: 600;
}

.page-item.active .page-link {
    background: var(--bb-dark-green);
    border-color: var(--bb-dark-green);
}
.page-link {
    color: var(--bb-dark-green);
    border-radius: 0.55rem;
    margin: 0 2px;
}
.page-link:hover {
    color: var(--bb-green);
    background: rgba(0, 65, 74, 0.06);
}

.backpack-filter,
.nav.filters .nav-item .nav-link {
    border-radius: 999px;
}

.form-group .form-label,
.form-group > label,
label.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bb-dark-green);
}

.form-group .text-danger,
.required label::after {
    color: var(--bb-green);
}

.form-group .form-text,
.form-group small.text-muted {
    color: var(--bb-gray);
}

.nav-tabs .nav-link.active {
    color: var(--bb-dark-green);
    border-bottom-color: var(--bb-dark-green);
    font-weight: 700;
}
.nav-tabs .nav-link {
    color: var(--bb-gray);
}

.card-footer .btn,
.form-buttons .btn,
.floating-save .btn {
    border-radius: 999px;
}
.card-footer .btn-default,
.form-buttons .btn-default {
    color: var(--bb-dark-green);
}

.page.page-center {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(0, 86, 98, 0.55), transparent 60%),
        linear-gradient(160deg, var(--bb-dark-green) 0%, #002b31 100%);
}

.page-center .navbar-brand {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.page-center .navbar-brand::after {
    content: "Super Admin";
    display: block;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.page-center .card {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: saturate(1.05);
}
.page-center .card .card-body {
    padding: 2.25rem;
}
.page-center .card-title,
.page-center .h2 {
    color: var(--bb-dark-green);
}

.page-center .btn-primary {
    width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--bb-dark-green);
}

.bb-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0;
}
.bb-eyebrow {
    color: var(--bb-gray);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.7rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}
.bb-page-title {
    color: var(--bb-dark-green);
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0;
}
.bb-page-sub {
    color: var(--bb-gray);
    font-size: 0.92rem;
    margin: 0.3rem 0 0;
}
.bb-page-sub b { color: var(--bb-dark-green); }

.bb-panel {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 65, 74, 0.08);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    overflow: hidden;
}
.bb-panel .bb-table { margin: 0; width: 100%; border-collapse: collapse; }
.bb-panel .bb-table thead th {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    color: var(--bb-gray);
    font-weight: 700;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e8ebec;
    background: #fbfcfc;
}
.bb-panel .bb-table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e8ebec;
    vertical-align: middle;
}
.bb-panel .bb-table tbody tr:last-child td { border-bottom: 0; }
.bb-panel .bb-table tbody tr:hover td { background: rgba(0, 65, 74, 0.035); }
.bb-panel .bb-table .bb-strong { font-weight: 600; color: var(--bb-dark-green); }
.bb-num { font-variant-numeric: tabular-nums; }

.bb-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.28rem 0.55rem;
    border-radius: 0.5rem;
    color: var(--bb-dark-green);
    cursor: pointer;
    white-space: nowrap;
}
.bb-action:hover { background: rgba(0, 65, 74, 0.06); color: var(--bb-green); }
.bb-action.is-positive { color: #1c7c3b; }
.bb-action.is-positive:hover { background: rgba(28, 124, 59, 0.08); color: #1c7c3b; }
.bb-action.is-danger { color: #c0392b; }
.bb-action.is-danger:hover { background: rgba(192, 57, 43, 0.07); color: #c0392b; }

/* Sidebar account dropdown + color-mode switcher */
.navbar-vertical .navbar-nav .nav-item.dropdown > .nav-link {
    border-radius: 0.7rem;
    padding: 0.5rem 0.7rem;
    margin: 0 0.25rem;
    transition: background-color 0.15s ease;
}
.navbar-vertical .navbar-nav .nav-item.dropdown > .nav-link:hover {
    background: rgba(255, 255, 255, 0.10);
}
.navbar-vertical .avatar { border-radius: 0.6rem; }
.navbar-vertical .nav-link[data-bs-theme-value],
.navbar-vertical [data-bs-toggle="dropdown"] .ti { border-radius: 0.5rem; }
.navbar-vertical .dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    padding: 0.4rem;
}
.navbar-vertical .dropdown-menu .dropdown-item {
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-weight: 500;
}
.navbar-vertical .dropdown-menu .dropdown-item:hover {
    background: rgba(0, 65, 74, 0.08);
    color: var(--bb-dark-green);
}
.navbar-vertical .dropdown-menu .dropdown-item.text-danger:hover,
.navbar-vertical .dropdown-menu a[href*="logout"]:hover {
    background: rgba(192, 57, 43, 0.10);
    color: #c0392b;
}

/* ========================= Dark mode ========================= */
[data-bs-theme="dark"] {
    --tblr-primary: var(--bb-light-green);
    --tblr-primary-rgb: 177, 203, 207;
    --tblr-link-color: var(--bb-light-green);
    --tblr-link-color-rgb: 177, 203, 207;
    --tblr-link-hover-color: #cfe0e2;
}
[data-bs-theme="dark"] .btn-primary {
    --tblr-btn-bg: var(--bb-green);
    --tblr-btn-border-color: var(--bb-green);
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-bg: var(--bb-dark-green);
    --tblr-btn-hover-border-color: var(--bb-dark-green);
    --tblr-btn-hover-color: #ffffff;
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bb-panel {
    background: #16211f;
    border-color: rgba(255, 255, 255, 0.08);
    color: #d7e0df;
}
[data-bs-theme="dark"] .bb-page-title,
[data-bs-theme="dark"] .page-header .page-title { color: var(--bb-light-green); }
[data-bs-theme="dark"] .bb-page-sub b { color: var(--bb-light-green); }
[data-bs-theme="dark"] .bb-panel .bb-table thead th {
    background: #111b1a;
    color: #8fa3a2;
    border-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .bb-panel .bb-table tbody td { border-color: rgba(255, 255, 255, 0.06); }
[data-bs-theme="dark"] .bb-panel .bb-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
[data-bs-theme="dark"] .bb-panel .bb-table .bb-strong { color: var(--bb-light-green); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #0f1817;
    border-color: rgba(255, 255, 255, 0.10);
    color: #d7e0df;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bb-green);
    box-shadow: 0 0 0 0.2rem rgba(177, 203, 207, 0.12);
}
[data-bs-theme="dark"] .bb-action { color: var(--bb-light-green); }
[data-bs-theme="dark"] .bb-action:hover { background: rgba(255, 255, 255, 0.06); color: #cfe0e2; }
[data-bs-theme="dark"] .page-item.active .page-link {
    background: var(--bb-green);
    border-color: var(--bb-green);
}
[data-bs-theme="dark"] .page-link { color: var(--bb-light-green); }

/* ============================================================
   Top banner (custom 'beachbeds' layout)
   Account menu + light/dark switcher moved out of the sidebar
   and into a top bar spanning the content column.
   ============================================================ */

/* The account dropdown + color-mode buttons now live in .bb-topbar, so
   hide the copies that theme-tabler still renders inside the sidebar. */
.navbar-vertical .nav-item.dropdown.pe-3 { display: none !important; }
.navbar-vertical [class*="show-theme-"] { display: none !important; }

.bb-topbar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 65, 74, 0.08);
    min-height: 3.75rem;
    padding-block: 0.35rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.bb-topbar .container-fluid {
    display: flex;
    align-items: center;
}
.bb-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Color-mode switch buttons: tint to the brand on the light banner. */
.bb-topbar button[class*="show-theme-"] {
    color: var(--bb-dark-green) !important;
    padding: 0.4rem 0.55rem;
}
.bb-topbar button[class*="show-theme-"]:hover {
    color: var(--bb-green) !important;
}

/* Account dropdown inside the banner. */
.bb-topbar .nav-item.dropdown > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bb-dark-green);
    border-radius: 0.6rem;
    padding: 0.3rem 0.45rem;
    transition: background-color 0.15s ease;
}
.bb-topbar .nav-item.dropdown > .nav-link:hover {
    background: rgba(0, 65, 74, 0.06);
}
.bb-topbar .dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    padding: 0.4rem;
}
.bb-topbar .dropdown-menu .dropdown-item {
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-weight: 500;
}
.bb-topbar .dropdown-menu .dropdown-item:hover {
    background: rgba(0, 65, 74, 0.08);
    color: var(--bb-dark-green);
}
.bb-topbar .dropdown-menu a[href*="logout"]:hover {
    background: rgba(192, 57, 43, 0.10);
    color: #c0392b;
}

/* Dark mode for the banner. */
[data-bs-theme="dark"] .bb-topbar {
    background: #16211f;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .bb-topbar button[class*="show-theme-"],
[data-bs-theme="dark"] .bb-topbar .nav-item.dropdown > .nav-link {
    color: var(--bb-light-green) !important;
}
[data-bs-theme="dark"] .bb-topbar .nav-item.dropdown > .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ============ beachbeds layout: top banner (account + switcher) ============ */
/* The account menu + color switcher now live in .bb-topbar, so hide the
   duplicate copies the sidebar still renders (menu items aren't dropdowns). */
.navbar-vertical .nav-item.dropdown { display: none !important; }

.bb-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e8ebec;
    min-height: 56px;
    padding: 0;
}
.bb-topbar > .container-fluid {
    display: flex;
    align-items: center;
    min-height: 56px;
}
.bb-topbar-actions { gap: 0.4rem; align-items: center; }
.bb-topbar .nav-link { color: var(--bb-dark-green); }
.bb-topbar .nav-item.dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
}
.bb-topbar .nav-item.dropdown > .nav-link:hover { background: rgba(0, 65, 74, 0.06); }
.bb-topbar .avatar { border-radius: 0.6rem; }
.bb-topbar .dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
    padding: 0.4rem;
}
.bb-topbar .dropdown-menu .dropdown-item {
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-weight: 500;
}
.bb-topbar .dropdown-menu .dropdown-item:hover {
    background: rgba(0, 65, 74, 0.08);
    color: var(--bb-dark-green);
}
.bb-topbar .dropdown-menu a[href*="logout"]:hover,
.bb-topbar .dropdown-menu .dropdown-item.text-danger:hover {
    background: rgba(192, 57, 43, 0.10);
    color: #c0392b;
}
[data-bs-theme="dark"] .bb-topbar { background: #111b1a; border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .bb-topbar .nav-link { color: var(--bb-light-green); }
[data-bs-theme="dark"] .bb-topbar .nav-item.dropdown > .nav-link:hover { background: rgba(255, 255, 255, 0.06); }

/* Banner account = just the avatar icon; name/role text hidden (click for menu) */
.bb-topbar .nav-item.dropdown > .nav-link > .d-none,
.bb-topbar .nav-item.dropdown > .nav-link > div:not(.avatar),
.bb-topbar .nav-item.dropdown > .nav-link > span:not(.avatar) { display: none !important; }
.bb-topbar .nav-item.dropdown > .nav-link { padding: 0.2rem; gap: 0; }
.bb-topbar .nav-item.dropdown > .nav-link::after { display: none; }
.bb-topbar .nav-item.dropdown > .nav-link:hover .avatar { box-shadow: 0 0 0 2px rgba(0, 65, 74, 0.25); }
/* Compact color-mode switcher */
.bb-topbar .nav-item .nav-link svg,
.bb-topbar .nav-item .nav-link i { font-size: 1.05rem; }