/*!
 * OptimaGrid App Layout
 * -----------------------------------------------------------------------------
 * OptimaGrid Web Portal. Authored in-house to replace the commercial
 * Color Admin theme bundle. Reproduces the application shell the Portal uses:
 * the fixed top header (brand + user/notification/tenant menus), the horizontal
 * top navigation bar with hover sub-menus, the scroll-to-top button and the
 * notification dropdown. Depends on stock Bootstrap 5.3 + optimagrid.brand.css.
 *
 * Layout variant: top navigation, no sidebar (body class
 * "app app-with-top-nav app-without-sidebar"). Light theme only.
 */

/* ============================================================================
 * 1. App shell
 * ========================================================================== */
.app {
    padding-top: 3.75rem; /* clears the fixed header */
}

.app-content {
    padding: 1.875rem 3.125rem;
    position: relative;
    min-height: 100%;
    margin-left: 15rem;
}
.app-content > .container,
.app-content > .container-fluid,
.app-content > .container-lg,
.app-content > .container-md,
.app-content > .container-sm,
.app-content > .container-xl,
.app-content > .container-xxl {
    padding-left: 0;
    padding-right: 0;
}
.app.app-without-sidebar .app-content { margin-left: 0; }
.app.app-full-width .app-content { margin: 0; }

@media (min-width: 992px) {
    /* header (3.75rem) + top-nav (2.875rem) */
    .app-with-top-nav { padding-top: 6.625rem; }
    .app-with-top-nav .app-header { box-shadow: none; }
}

@media (max-width: 991.98px) {
    .app-content { padding: 1.25rem; margin-left: 0; }
}

/* ============================================================================
 * 2. Header
 * ========================================================================== */
.app-header {
    --bs-app-header-bg: #FFFFFF;
    --bs-app-header-color: #212837;
    --bs-app-header-box-shadow: 0 6px 6px rgba(var(--bs-theme-rgb), 0.1);
    --bs-app-header-zindex: 1030;
    --bs-app-header-height: 3.75rem;
    --bs-app-header-brand-width: 15rem;
    --bs-app-header-brand-color: #212837;
    --bs-app-header-menu-label-bg: var(--bs-theme);
    --bs-app-header-menu-label-color: var(--bs-theme-color);
    --bs-app-header-menu-link-padding-y: 1.25rem;
    --bs-app-header-menu-link-padding-x: 1.25rem;
    --bs-app-header-menu-img-height: 2.25rem;
    --bs-app-header-menu-img-width: 2.25rem;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow .2s linear;
    z-index: var(--bs-app-header-zindex);
    height: var(--bs-app-header-height);
    background-color: var(--bs-app-header-bg);
    box-shadow: var(--bs-app-header-box-shadow);
}
@media (max-width: 991.98px) {
    .app-header { padding: 0 .75rem; }
}

/* Brand */
.app-header .brand {
    display: flex;
    align-items: center;
    width: var(--bs-app-header-brand-width);
    height: var(--bs-app-header-height);
}
.app-header .brand img { max-height: 100%; max-width: 100%; }
.app-header .brand .brand-logo {
    font-size: 1.25rem;
    text-decoration: none;
    width: 100%;
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    font-weight: 600;
    height: var(--bs-app-header-height);
    color: var(--bs-app-header-brand-color);
}
@media (max-width: 991.98px) { .app-header .brand { width: auto; } }
@media (max-width: 767.98px) { .app-header .brand { display: none; } }

/* Mobile toggler (hamburger) */
.app-header .mobile-toggler { display: none; margin-right: auto; }
@media (max-width: 991.98px) { .app-header .mobile-toggler { display: block; margin-right: .75rem; } }
@media (max-width: 767.98px) { .app-header .mobile-toggler { margin-right: 0; } }
.app-header .menu-toggler {
    position: relative;
    border: none;
    background: 0 0;
    width: 2.8125rem;
    display: block;
    outline: 0;
    padding: 0 .75rem;
    margin: 0;
    height: var(--bs-app-header-height);
}
.app-header .menu-toggler .bar {
    display: block;
    height: .125rem;
    border-radius: .1875rem;
    background: var(--bs-app-header-color);
}
.app-header .menu-toggler .bar + .bar { margin-top: .25rem; }

/* Header menu (right-aligned user / notifications / tenant / language) */
.app-header .menu {
    flex: 1;
    display: flex;
    align-items: center;
}
.app-header .menu .menu-item { position: relative; }
.app-header .menu .menu-item .menu-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: var(--bs-app-header-menu-link-padding-y) var(--bs-app-header-menu-link-padding-x);
    height: var(--bs-app-header-height);
    color: var(--bs-app-header-color);
}
@media (max-width: 767.98px) {
    .app-header .menu .menu-item .menu-link { padding: 1rem; }
}
.app-header .menu .menu-item .menu-icon { font-size: 1.25rem; }
.app-header .menu .menu-item .menu-text { font-weight: 600; }
.app-header .menu .menu-item .menu-label {
    position: absolute;
    top: .625rem;
    right: .65rem;
    padding: 0 .375rem;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: var(--bs-app-header-menu-label-bg);
    color: var(--bs-app-header-menu-label-color);
    font-weight: 600;
    font-size: 0.765625rem;
}
.app-header .menu .menu-item .menu-img,
.app-header .menu .menu-item .menu-img-text {
    height: var(--bs-app-header-menu-img-height);
    width: var(--bs-app-header-menu-img-width);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-header .menu .menu-item .menu-img + .menu-text { margin-left: .5rem; }
.app-header .menu .menu-item .menu-img.online:before {
    content: "";
    position: absolute;
    width: .5rem;
    height: .5rem;
    bottom: .125rem;
    right: .125rem;
    background-color: var(--bs-teal);
    border-radius: .5rem;
}

/* ============================================================================
 * 3. Top navigation bar
 * ========================================================================== */
.app-top-nav {
    --bs-app-top-nav-bg: #FFFFFF;
    --bs-app-top-nav-box-shadow: 0 6px 6px rgba(var(--bs-theme-rgb), 0.1);
    --bs-app-top-nav-menu-link-color: #4d6593;
    --bs-app-top-nav-menu-link-hover-color: #212837;
    --bs-app-top-nav-menu-link-active-color: var(--bs-theme);
    --bs-app-top-nav-menu-submenu-bg: #FFFFFF;

    background: var(--bs-app-top-nav-bg);
    left: 0;
    right: 0;
    z-index: 1020;
    box-shadow: var(--bs-app-top-nav-box-shadow);
}
@media (min-width: 992px) {
    .app-top-nav { top: 3.75rem; position: fixed; height: 2.875rem; }
    .app-top-nav .menu { display: flex; flex-wrap: nowrap; align-items: center; }
    .app-with-top-nav .app-top-nav { top: 3.75rem; }
    .app-top-nav .menu > .menu-item.has-sub:hover > .menu-submenu { display: block; }
}
@media (max-width: 991.98px) {
    .app-top-nav { display: none; }
    .app-top-nav .menu { display: block; margin: 0 !important; padding: .75rem 0; }
}

.app-top-nav .menu .menu-item { position: relative; }
.app-top-nav .menu .menu-item .menu-link {
    text-decoration: none;
    position: relative;
    padding: .75rem 1rem;
    color: var(--bs-app-top-nav-menu-link-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .app-top-nav .menu .menu-item .menu-link { padding-top: .5rem; padding-bottom: .5rem; }
}
.app-top-nav .menu .menu-item .menu-link .menu-icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .75rem;
}
.app-top-nav .menu .menu-item .menu-link .menu-caret { margin: -.3125rem 0 -.3125rem .75rem; opacity: .5; }
.app-top-nav .menu .menu-item .menu-link .menu-text { flex: 1; }
.app-top-nav .menu .menu-item .menu-link:focus,
.app-top-nav .menu .menu-item .menu-link:hover {
    color: var(--bs-app-top-nav-menu-link-hover-color);
}
.app-top-nav .menu .menu-item.active > .menu-link {
    color: var(--bs-app-top-nav-menu-link-active-color);
    font-weight: 600;
}

/* Sub-menus */
.app-top-nav .menu .menu-item .menu-submenu {
    background: var(--bs-app-top-nav-menu-submenu-bg);
    display: none;
    padding: .5rem 0;
    min-width: 12.5rem;
}
@media (min-width: 992px) {
    .app-top-nav .menu .menu-item .menu-submenu {
        position: absolute;
        left: 0;
        max-height: calc(100vh - 6.625rem);
        box-shadow: var(--bs-app-top-nav-box-shadow);
    }
}
@media (max-width: 991.98px) {
    .app-top-nav .menu .menu-item .menu-submenu { padding: 0 0 .5rem 2rem; }
}
.app-top-nav .menu .menu-item .menu-submenu .menu-item { position: relative; }
.app-top-nav .menu .menu-item .menu-submenu .menu-item .menu-link { padding: .25rem 1rem; }
/* Expanded state toggled by optimagrid.app.js for click/touch */
.app-top-nav .menu .menu-item.has-sub.expand > .menu-submenu { display: block; }

/* Prev / next scroll controls */
.app-top-nav .menu .menu-item.menu-control { position: absolute; top: 0; margin: 0; z-index: 10; }
@media (max-width: 991.98px) { .app-top-nav .menu .menu-item.menu-control { display: none !important; } }
.app-top-nav .menu .menu-item.menu-control > .menu-link {
    padding: 0;
    text-align: center;
    width: 2.875rem;
    height: 2.875rem;
    background: var(--bs-app-top-nav-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bs-app-top-nav-menu-link-color);
}
.app-top-nav .menu .menu-item.menu-control > .menu-link i { font-size: 1.125rem; }
.app-top-nav .menu .menu-item.menu-control > .menu-link:focus,
.app-top-nav .menu .menu-item.menu-control > .menu-link:hover {
    color: var(--bs-app-top-nav-menu-link-hover-color);
}
.app-top-nav .menu .menu-item.menu-control.menu-control-start { left: -3.75rem; }
.app-top-nav .menu .menu-item.menu-control.menu-control-start > .menu-link { box-shadow: 12px 0 10px -10px rgba(0,0,0,.5); }
.app-top-nav .menu .menu-item.menu-control.menu-control-start.show { left: 0; animation: topMenuControlSlideInLeft .2s; }
.app-top-nav .menu .menu-item.menu-control.menu-control-end { right: -3.75rem; }
.app-top-nav .menu .menu-item.menu-control.menu-control-end > .menu-link { box-shadow: -12px 0 10px -10px rgba(0,0,0,.5); }
.app-top-nav .menu .menu-item.menu-control.menu-control-end.show { right: 0; animation: topMenuControlSlideInRight .2s; }

@keyframes topMenuControlSlideInLeft { from { left: -3.125rem; } to { left: 0; } }
@keyframes topMenuControlSlideInRight { from { right: -3.125rem; } to { right: 0; } }

/* ============================================================================
 * 4. Scroll-to-top button
 * ========================================================================== */
.btn-scroll-top {
    position: fixed;
    bottom: 1.875rem;
    right: 1.875rem;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(60,78,113,.75);
    color: #fff;
    text-align: center;
    text-decoration: none;
    z-index: 1030;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s linear, visibility .2s linear;
}
.btn-scroll-top.show { opacity: 1; visibility: visible; }
.btn-scroll-top:hover { background: var(--bs-theme); color: var(--bs-theme-color); text-decoration: none; }
@media (max-width: 767.98px) { .btn-scroll-top { bottom: 1.25rem; right: 1.25rem; } }

/* ============================================================================
 * 5. Notification dropdown
 * ========================================================================== */
.dropdown-menu.dropdown-notification {
    --bs-dropdown-notification-border-color: #dae0ec;
    min-width: 320px;
}
.dropdown-menu.dropdown-notification .dropdown-notification-item {
    padding: 10px 1rem;
    text-decoration: none;
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-dropdown-notification-border-color);
    border-bottom: 1px solid var(--bs-dropdown-notification-border-color);
    display: flex;
    align-items: center;
}
.dropdown-menu.dropdown-notification .dropdown-notification-item + .dropdown-notification-item { margin-top: -1px; }
.dropdown-menu.dropdown-notification .dropdown-notification-item:hover { background: var(--bs-tertiary-bg); }
.dropdown-menu.dropdown-notification .dropdown-notification-item .dropdown-notification-info { flex: 1; }
.dropdown-menu.dropdown-notification .dropdown-notification-item .dropdown-notification-info .title + .time { margin-top: 5px; }
.dropdown-menu.dropdown-notification .dropdown-notification-item .dropdown-notification-info .time {
    font-size: 12px;
    color: rgba(var(--bs-body-color-rgb),.5);
}
.dropdown-menu.dropdown-notification .dropdown-notification-item .dropdown-notification-info + .dropdown-notification-arrow { padding-left: 1rem; }
.dropdown-menu.dropdown-notification .dropdown-notification-item .dropdown-notification-arrow { color: rgba(var(--bs-body-color-rgb),.25); }

/* ============================================================================
 * 6. Full-screen loading splash (used by the login / auth pages)
 * ========================================================================== */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 22, 24, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.app-loader .app-loader-circle {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    border-top-color: var(--bs-theme);
    animation: app-loader-spin 1s infinite linear;
}
.app-loader .app-loader-text {
    font-size: 0.625rem;
    letter-spacing: 0.25rem;
    color: rgba(255, 255, 255, 0.75);
    margin-inline-start: 0.625rem;
}
.app-loader.fading { opacity: 0; animation: app-loader-fade-out 0.2s ease; }
.app-loader.loaded { display: none; }
.app-loader.loaded .app-loader-circle { animation: none; }

@keyframes app-loader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes app-loader-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================================
 * 7. Bootstrap component adjustments (restore the previous theme's look)
 * ========================================================================== */

/* --- Nav tabs -------------------------------------------------------------
 * Stock Bootstrap colours idle tab links with the link colour (blue), so they
 * read as hyperlinks. The previous theme used a muted body colour so they read
 * as tabs. The active tab also blends into the white card body. */
.nav {
    --bs-nav-link-color: rgba(var(--bs-body-color-rgb), .5);
    --bs-nav-link-hover-color: rgba(var(--bs-body-color-rgb), .75);
}
.card .card-body .nav-tabs .nav-item .nav-link.active,
.card .card-body .nav-tabs .nav-item.show .nav-link {
    background: var(--bs-component-bg);
    border-bottom-color: var(--bs-component-bg);
}

/* --- Breadcrumb -----------------------------------------------------------
 * Bold, compact, muted separators; links undecorated until hover (stock leaves
 * them as underlined blue anchors). */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
    --bs-breadcrumb-item-padding-x: .5rem;
    --bs-breadcrumb-item-active-color: var(--bs-tertiary-color);
    font-size: .765625rem;
    font-weight: 600;
}
.breadcrumb .breadcrumb-item a { text-decoration: none; }
.breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }

/* --- Tables ---------------------------------------------------------------
 * Slightly relaxed horizontal cell padding (stock is .5rem). */
.table > :not(caption) > * > * { padding-left: .75rem; padding-right: .75rem; }

/* --- DataTables (dt-bootstrap5): header sort carets ----------------------
 * Reproduce the Font Awesome sort indicators the previous theme rendered, so
 * the header keeps its sortable "feel". */
body .dt-bootstrap5 .dataTable thead > tr > th .dt-column-order:before,
body .dt-bootstrap5 .dataTable thead > tr > td .dt-column-order:before { display: none; }
body .dt-bootstrap5 .dataTable thead > tr > th .dt-column-order:after,
body .dt-bootstrap5 .dataTable thead > tr > td .dt-column-order:after {
    opacity: 1;
    color: rgba(var(--bs-body-color-rgb), .15);
    top: 0;
    bottom: 0;
    font-size: .875rem;
    display: flex;
    align-items: center;
    font-family: "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900;
}
body .dt-bootstrap5 .dataTable thead > tr > th.dt-orderable-asc.dt-orderable-desc .dt-column-order:after,
body .dt-bootstrap5 .dataTable thead > tr > td.dt-orderable-asc.dt-orderable-desc .dt-column-order:after { content: "\f0dc"; }
body .dt-bootstrap5 .dataTable thead > tr > th.dt-ordering-asc .dt-column-order:after,
body .dt-bootstrap5 .dataTable thead > tr > td.dt-ordering-asc .dt-column-order:after { content: "\f0de"; color: var(--bs-theme); }
body .dt-bootstrap5 .dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
body .dt-bootstrap5 .dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after { content: "\f0dd"; color: var(--bs-theme); }
body .dt-bootstrap5 .dt-paging .pagination {
    --bs-pagination-padding-x: .5rem;
    --bs-pagination-padding-y: .25rem;
    --bs-pagination-border-radius: 3px;
    justify-content: flex-end;
    font-size: .765625rem;
}