/*!
 * OptimaGrid App Layout - Management console
 * -----------------------------------------------------------------------------
 * OptimaGrid Web Management. Authored in-house to replace the commercial
 * Color Admin theme bundle. Reproduces the application shell the Management
 * console uses: fixed top header, a collapsible left sidebar with a vertical
 * navigation menu (minify + mobile slide-in), the content area, the loading
 * splash, scroll-to-top and the shared Bootstrap component refinements.
 *
 * Layout variant: fixed header + left sidebar (body: #app.app). Light theme
 * only; dark mode and theme switching are intentionally omitted. Depends on
 * stock Bootstrap 5.x + optimagrid.brand.css.
 */

/* ============================================================================
 * 0. Shell design tokens (light values from the previous theme)
 * ========================================================================== */
:root {
    --app-theme: #1f6bff;
    --app-theme-rgb: 31,107,255;
    --app-theme-color: #FFFFFF;

    --app-header-bg: #FFFFFF;
    --app-header-color: #212837;
    --app-header-input-bg: #ebeef4;
    --app-header-box-shadow: 0 6px 6px rgba(var(--app-theme-rgb), 0.1);
    --app-header-height: 3.75rem;

    --app-sidebar-width: 15rem;
    --app-sidebar-minified-width: 4.0625rem;
    --app-sidebar-border-color: #dae0ec;
    --app-sidebar-content-mobile-bg: #FFFFFF;
    --app-sidebar-mobile-backdrop-bg: rgba(33, 40, 55, 0.5);
    --app-sidebar-menu-link-color: #3c4e71;
    --app-sidebar-menu-link-hover-bg: rgba(201, 210, 227, 0.5);
    --app-sidebar-menu-link-active-color: #1f6bff;
    --app-sidebar-menu-link-active-bg: transparent;
    --app-sidebar-menu-header-color: #657eae;

    --app-component-muted-color: #a8b6d1;
}

/* ============================================================================
 * 1. App shell + content
 * ========================================================================== */
.app { padding-top: var(--app-header-height); }
.app.app-without-header { padding-top: 0; }
.app.app-full-height { height: 100%; }

.app-content {
    padding: 1.875rem 3.125rem;
    position: relative;
    min-height: 100%;
    margin-left: var(--app-sidebar-width);
}
.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-sidebar-minified .app-content { margin-left: var(--app-sidebar-minified-width); }
.app-full-width .app-content { margin: 0; }

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

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

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

.app-header .desktop-toggler {
    height: var(--app-header-height);
    width: var(--app-sidebar-minified-width);
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 991.98px) { .app-header .desktop-toggler { display: none; } }
.app-header .desktop-toggler .menu-toggler { width: var(--app-sidebar-minified-width); height: var(--app-header-height); padding: 0 1.25rem; }
.app-header .desktop-toggler .menu-toggler:hover { opacity: .5; }

/* Mobile toggler */
.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(--app-header-height);
}
.app-header .menu-toggler .bar { display: block; background: var(--app-header-color); height: .125rem; border-radius: .1875rem; }
.app-header .menu-toggler .bar + .bar { margin-top: .25rem; }

/* Header menu (right cluster: notification / profile) */
.app-header .menu { flex: 1; display: flex; align-items: center; }
/* The (empty) search form is a flexible spacer that pushes the notification /
   profile items to the right edge of the header. */
.app-header .menu .menu-search { flex: 1 1 auto; position: relative; }
.app-header .menu .menu-item { position: relative; }
.app-header .menu .menu-item .menu-link {
    height: var(--app-header-height);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--app-header-color);
    display: flex;
    align-items: center;
}
@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;
    background: var(--app-theme);
    color: var(--app-theme-color);
    font-weight: 600;
    font-size: .75rem;
    padding: 0 .375rem;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
}
.app-header .menu .menu-item .menu-img,
.app-header .menu .menu-item .menu-img-text {
    height: 2.25rem;
    width: 2.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-header .menu .menu-item .menu-img + .menu-text,
.app-header .menu .menu-item .menu-img-text + .menu-text { margin-left: .5rem; }
.app-header .menu .menu-item .menu-img.online:before,
.app-header .menu .menu-item .menu-img-text.online:before {
    content: "";
    position: absolute;
    width: .5rem;
    height: .5rem;
    bottom: .125rem;
    right: .125rem;
    background-color: var(--bs-teal);
    border-radius: .5rem;
}
.app-header .menu .menu-item .menu-img-text {
    background: var(--bs-light);
    color: var(--app-header-color);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2.25rem;
}

/* ============================================================================
 * 3. Sidebar
 * ========================================================================== */
.app-sidebar {
    position: fixed;
    top: var(--app-header-height);
    bottom: 0;
    left: 0;
    width: var(--app-sidebar-width);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--app-sidebar-border-color);
    background: var(--app-header-bg);
}
.app-sidebar .app-sidebar-content {
    padding: .625rem 0;
    flex: 1;
    overflow-y: auto;      /* native scroll replaces the previous theme's custom scrollbar */
    overflow-x: hidden;
}
.app-sidebar .app-sidebar-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    display: none;
}

@media (max-width: 991.98px) {
    .app-sidebar { top: 0; z-index: 1130; left: calc(-1 * var(--app-sidebar-width)); border-right: none; }
    .app-sidebar .app-sidebar-content { background-color: var(--app-sidebar-content-mobile-bg); position: relative; z-index: 1010; width: var(--app-sidebar-width); }
}

/* Mobile slide-in / out */
.app-sidebar-mobile-toggled .app-sidebar { animation: appSidebarMobileSlideIn .1s ease; left: 0; }
.app-sidebar-mobile-toggled .app-sidebar-mobile-backdrop { display: block; background: var(--app-sidebar-mobile-backdrop-bg); animation: appSidebarMobileBackdrop .2s ease; }
.app-sidebar-mobile-closed .app-sidebar { animation: appSidebarMobileSlideOut .1s ease; left: calc(-1 * var(--app-sidebar-width)); }
.app-sidebar-mobile-closed .app-sidebar-mobile-backdrop { display: block; background: 0 0; animation: appSidebarMobileRemoveBackdrop .2s ease; }

/* ============================================================================
 * 4. Sidebar vertical menu
 * ========================================================================== */
.app-sidebar .menu { min-height: 100%; display: flex; flex-direction: column; }
.app-sidebar .menu .menu-header {
    margin: .5rem 1.25rem;
    font-size: .7875rem;
    font-weight: 600;
    color: var(--app-sidebar-menu-header-color);
}
.app-sidebar .menu .menu-divider { margin: 8px 1.25rem; height: 1px; background: var(--app-sidebar-border-color); }
.app-sidebar .menu .menu-item { padding: 0 .625rem; }
.app-sidebar .menu .menu-item .menu-link {
    padding: .375rem .625rem;
    line-height: 1.25rem;
    text-decoration: none;
    color: var(--app-sidebar-menu-link-color);
    display: flex;
    align-items: center;
    border-radius: 6px;
}
.app-sidebar .menu .menu-item .menu-link:hover { background: var(--app-sidebar-menu-link-hover-bg); }
.app-sidebar .menu .menu-item .menu-icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-sidebar .menu .menu-item .menu-icon + .menu-text { margin-left: .625rem; }
.app-sidebar .menu .menu-item .menu-text { flex: 1; }
.app-sidebar .menu .menu-item .menu-caret { opacity: .75; margin-left: auto; transition: transform .15s linear; }
.app-sidebar .menu .menu-item.expand > .menu-link .menu-caret { transform: rotate(90deg); }

.app-sidebar .menu .menu-item .menu-submenu { display: none; padding-bottom: .625rem; padding-left: 1.25rem; }
.app-sidebar .menu .menu-item .menu-submenu .menu-item { padding-right: 0; }
.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link { padding: .25rem .625rem; }
/* Server-rendered active branch starts open; click-expansion is driven by JS
   (slideToggle) so the .expand class only rotates the caret, it must NOT force
   the submenu open or slideToggle would read it as already-open and close it. */
.app-sidebar .menu .menu-item.active > .menu-submenu { display: block; }
.app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link {
    color: var(--app-sidebar-menu-link-active-color);
    font-weight: 600;
    background: var(--app-sidebar-menu-link-active-bg);
}

/* Minified sidebar (desktop collapse to icons) */
.app-sidebar-minified .app-sidebar { width: var(--app-sidebar-minified-width); }
.app-sidebar-minified .app-sidebar .menu-item { position: relative; padding: .1875rem .75rem; }
.app-sidebar-minified .app-sidebar .menu-item .menu-link .menu-icon { margin-left: auto; margin-right: auto; }
.app-sidebar-minified .app-sidebar .menu-submenu,
.app-sidebar-minified .app-sidebar .menu-text { display: none !important; }
.app-sidebar-minified .app-sidebar .menu-header {
    margin-left: .3125rem;
    margin-right: .3125rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar-minified .app-sidebar .menu-caret {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: 3px;
    transform: rotate(-90deg);
}

@keyframes appSidebarMobileSlideIn { from { left: -15rem; } to { left: 0; } }
@keyframes appSidebarMobileSlideOut { from { left: 0; } to { left: -15rem; } }
@keyframes appSidebarMobileBackdrop { from { background: 0 0; } to { background: var(--app-sidebar-mobile-backdrop-bg); } }
@keyframes appSidebarMobileRemoveBackdrop { from { background: var(--app-sidebar-mobile-backdrop-bg); } to { background: 0 0; } }

/* Caret glyph (Font Awesome) used inside menu carets */
.caret { font-family: "Font Awesome 6 Free", FontAwesome !important; font-weight: 900; font-style: normal; }
.caret:before { content: "\f0d7"; }

/* ============================================================================
 * 4b. Sign-in pages: compact large controls
 * Stock Bootstrap's .form-control-lg / .btn-lg (1.25rem) render larger than the
 * previous theme did on the login/auth screens. Bring them back to a 1rem scale
 * (matches the original) for the elements inside .login-content.
 * ========================================================================== */
.login-content .form-control-lg,
.login-content .form-select-lg { font-size: 1rem; }
.login-content .btn-lg { font-size: 1rem; }

/* ============================================================================
 * 5. Full-screen loading splash
 * ========================================================================== */
.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; } }

/* ============================================================================
 * 6. 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; } }

/* ============================================================================
 * 7. 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; }

/* ============================================================================
 * 8. Bootstrap component adjustments (shared with the Portal theme)
 * ========================================================================== */
.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 {
    --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; }

.table > :not(caption) > * > * { padding-left: .75rem; padding-right: .75rem; }

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;
}