/* Authenticated dashboard foundation. */
:root {
    --ninput-canvas: #f3f7f7;
    --ninput-surface: #ffffff;
    --ninput-surface-muted: #eaf2f1;
    --ninput-border: #d5e3e1;
    --ninput-text: #1d3439;
    --ninput-text-muted: #607477;
    --ninput-teal-700: #116b68;
    --ninput-teal-100: #d8ece9;
    --ninput-slate-800: #203b43;
    --ninput-shadow: 0 8px 20px rgba(29, 52, 57, 0.08);
}

#navbar-main {
    background-color: var(--ninput-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ninput-border);
    box-shadow: none;
    color: var(--ninput-slate-800);
}

#navbar-main .nav-link,
#navbar-main .dashboard-page-label,
#navbar-main .dashboard-page-label .h4 {
    color: var(--ninput-slate-800);
}

#sidenav-main {
    background-color: var(--ninput-teal-700) !important;
    background-image: none !important;
    border: 0;
    box-shadow: 0 8px 20px rgba(29, 52, 57, 0.16);
}

#sidenav-main .navbar-brand,
#sidenav-main .navbar-heading,
#sidenav-main .nav-link,
#sidenav-main .nav-link > i,
#sidenav-main .nav-link .nav-link-text {
    color: #fff !important;
}

#sidenav-main .sidebar-logo-full svg g,
#sidenav-main .sidebar-logo-mini svg g {
    fill: #fff;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link:hover,
#sidenav-main .navbar-nav > .nav-item > .nav-link:focus,
#sidenav-main .navbar-nav > .nav-item > .nav-link.active {
    background-color: #0c5957;
    background-image: none !important;
    color: #fff;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active .icon {
    background: var(--ninput-surface-muted);
    background-image: none !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active .icon,
#sidenav-main .navbar-nav > .nav-item > .nav-link.active .icon i {
    color: var(--ninput-teal-700) !important;
}

#sidenav-main hr {
    border-color: rgba(255, 255, 255, 0.2);
}

.main-content {
    background: var(--ninput-canvas);
    min-height: 100vh;
}

.dashboard-avatar {
    align-items: center;
    background: var(--ninput-teal-700);
    color: #fff;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    /* The authenticated sidebar already supplies the mobile header controls. */
    #sidenav-main + .main-content > #navbar-main {
        display: none !important;
    }

    [dir="rtl"] #sidenav-main .dashboard-avatar {
        background-color: #fff;
        color: var(--ninput-teal-700);
    }

    /* The standard dashboard stacks its stat cards on phones. Keep the header
       tight and place the charts after it instead of overlapping its padding. */
    [dir="rtl"] .dashboard-standard-header {
        padding-bottom: 1.5rem !important;
    }

    [dir="rtl"] .dashboard-standard-header .card-stats {
        margin-bottom: 1rem !important;
    }

    [dir="rtl"] .dashboard-standard-content {
        margin-top: 1rem !important;
    }
}

.system-status-list {
    display: grid;
    gap: 1rem;
}

.system-status-item {
    margin: 0;
    max-width: 40rem;
    width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ninput-teal-100);
    outline-offset: 2px;
}

/* Pure SaaS dashboard workspace. Scoped to avoid changing the standard dashboard. */
.dashboard-pure {
    --ninput-canvas: #f3f7f7;
    --ninput-surface: #ffffff;
    --ninput-surface-muted: #eaf2f1;
    --ninput-border: #d5e3e1;
    --ninput-text: #1d3439;
    --ninput-text-muted: #607477;
    --ninput-teal-700: #116b68;
    --ninput-teal-100: #d8ece9;
    --ninput-slate-800: #203b43;
    --ninput-shadow: 0 8px 20px rgba(29, 52, 57, 0.08);
}

.dashboard-pure {
    background: var(--ninput-canvas);
    color: var(--ninput-text);
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* The shared authenticated navigation sits outside the dashboard markup. */
body:has(.dashboard-pure) #navbar-main {
    background-color: var(--ninput-surface);
    background-image: none;
    border-bottom: 1px solid var(--ninput-border);
    color: var(--ninput-slate-800);
}

body:has(.dashboard-pure) #navbar-main .nav-link,
body:has(.dashboard-pure) #navbar-main .dashboard-page-label,
body:has(.dashboard-pure) #navbar-main .dashboard-page-label .h4 {
    color: var(--ninput-slate-800);
}

body:has(.dashboard-pure) #sidenav-main .navbar-nav .nav-link > i {
    color: var(--ninput-teal-700) !important;
}

.dashboard-pure__header {
    background: var(--ninput-slate-800);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.dashboard-pure__header-inner {
    display: grid;
    gap: 1.5rem;
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.dashboard-pure__heading {
    max-width: 52rem;
}

.dashboard-pure__title {
    color: inherit;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.dashboard-pure__module-summary:empty,
.dashboard-pure__module-slot:empty {
    display: none;
}

.dashboard-pure__module-summary {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.dashboard-pure__workspace {
    display: grid;
    gap: 1.5rem;
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.dashboard-pure__module-slot {
    min-width: 0;
}

.dashboard-pure__module-slot > .row,
.dashboard-pure__module-summary > .row {
    row-gap: 1.25rem;
}

.dashboard-pure__workspace .card,
.dashboard-pure__module-summary .card {
    background: var(--ninput-surface);
    border: 1px solid var(--ninput-border);
    border-radius: 0.7rem;
    box-shadow: var(--ninput-shadow);
    color: var(--ninput-text);
    height: 100%;
    overflow: hidden;
}

.dashboard-pure__workspace .card-header,
.dashboard-pure__module-summary .card-header {
    background: var(--ninput-surface) !important;
    border-bottom: 1px solid var(--ninput-border);
    padding: 1.25rem;
}

.dashboard-pure__workspace .card-body,
.dashboard-pure__module-summary .card-body {
    padding: 1.25rem;
}

.dashboard-pure__workspace .card-title,
.dashboard-pure__module-summary .card-title {
    color: var(--ninput-text);
}

.dashboard-pure__workspace .text-muted,
.dashboard-pure__module-summary .text-muted {
    color: var(--ninput-text-muted) !important;
}

.dashboard-pure__workspace .btn-primary,
.dashboard-pure__module-summary .btn-primary {
    background: var(--ninput-teal-700);
    border-color: var(--ninput-teal-700);
}

.dashboard-pure__workspace .btn-primary:hover,
.dashboard-pure__workspace .btn-primary:focus,
.dashboard-pure__module-summary .btn-primary:hover,
.dashboard-pure__module-summary .btn-primary:focus {
    background: #0c5957;
    border-color: #0c5957;
}

.dashboard-pure a:focus-visible,
.dashboard-pure button:focus-visible,
.dashboard-pure input:focus-visible,
.dashboard-pure select:focus-visible,
.dashboard-pure textarea:focus-visible {
    outline: 3px solid var(--ninput-teal-100);
    outline-offset: 2px;
}

html[dir="rtl"] .dashboard-pure {
    font-family: Cairo, sans-serif;
}

@media (max-width: 767.98px) {
    .dashboard-pure__header-inner {
        gap: 1.25rem;
        padding-block: 1.25rem;
    }

    .dashboard-pure__workspace .card-header,
    .dashboard-pure__module-summary .card-header,
    .dashboard-pure__workspace .card-body,
    .dashboard-pure__module-summary .card-body {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-pure *,
    .dashboard-pure *::before,
    .dashboard-pure *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    #navbar-main *,
    #navbar-main *::before,
    #navbar-main *::after,
    #sidenav-main *,
    #sidenav-main *::before,
    #sidenav-main *::after,
    .main-content *,
    .main-content *::before,
    .main-content *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Final legacy-header override for authenticated pages only. */
body:has(#logout-form) .main-content > .header.bg-gradient-primary {
    background-color: var(--ninput-teal-700) !important;
    background-image: none !important;
    color: #fff;
}

body:has(#logout-form) .main-content > .header.bg-gradient-primary :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: #fff;
}

body:has(#logout-form) .main-content > .header.bg-gradient-primary .card {
    background-color: var(--ninput-surface);
    border-color: var(--ninput-border);
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content > .header.bg-gradient-primary .card :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--ninput-text);
}

/* Flatten legacy dashboard cards without changing the chart markup or hooks. */
body:has(#logout-form) .main-content .card.bg-gradient-default {
    background-color: var(--ninput-slate-800) !important;
    background-image: none !important;
}

/* Keep wide data tables scrollable inside their established responsive wrapper. */
body:has(#logout-form) .main-content .table-responsive {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Shared visual language for authenticated standard pages. */
body:has(#logout-form) .main-content {
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content > .header {
    background-color: var(--ninput-slate-800) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

body:has(#logout-form) .main-content .card {
    background-color: var(--ninput-surface);
    border: 1px solid var(--ninput-border);
    border-radius: 0.7rem;
    box-shadow: var(--ninput-shadow);
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content .card-header,
body:has(#logout-form) .main-content .card-footer {
    background-color: var(--ninput-surface) !important;
    border-color: var(--ninput-border);
}

body:has(#logout-form) .main-content .card-title,
body:has(#logout-form) .main-content .card-header :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content .btn-primary,
body:has(#logout-form) .main-content .btn-info,
body:has(#logout-form) .main-content .btn-success {
    background-color: var(--ninput-teal-700) !important;
    border-color: var(--ninput-teal-700) !important;
    box-shadow: none;
    color: #fff !important;
}

body:has(#logout-form) .main-content .btn-primary:hover,
body:has(#logout-form) .main-content .btn-primary:focus,
body:has(#logout-form) .main-content .btn-info:hover,
body:has(#logout-form) .main-content .btn-info:focus,
body:has(#logout-form) .main-content .btn-success:hover,
body:has(#logout-form) .main-content .btn-success:focus {
    background-color: #0c5957 !important;
    border-color: #0c5957 !important;
}

body:has(#logout-form) .main-content .btn-secondary,
body:has(#logout-form) .main-content .btn-outline-secondary {
    border-color: #71858a;
    color: var(--ninput-slate-800);
}

body:has(#logout-form) .main-content .btn-outline-primary,
body:has(#logout-form) .main-content .btn-outline-info,
body:has(#logout-form) .main-content .btn-outline-success {
    border-color: var(--ninput-teal-700);
    color: var(--ninput-teal-700);
}

body:has(#logout-form) .main-content .btn-outline-primary:hover,
body:has(#logout-form) .main-content .btn-outline-primary:focus,
body:has(#logout-form) .main-content .btn-outline-info:hover,
body:has(#logout-form) .main-content .btn-outline-info:focus,
body:has(#logout-form) .main-content .btn-outline-success:hover,
body:has(#logout-form) .main-content .btn-outline-success:focus {
    background-color: var(--ninput-teal-700);
    border-color: var(--ninput-teal-700);
    color: #fff;
}

body:has(#logout-form) .main-content .btn-danger,
body:has(#logout-form) .main-content .btn-outline-danger {
    border-color: #bd3d3a !important;
    color: #fff !important;
}

body:has(#logout-form) .main-content .btn-danger,
body:has(#logout-form) .main-content .btn-outline-danger:hover,
body:has(#logout-form) .main-content .btn-outline-danger:focus {
    background-color: #bd3d3a !important;
}

body:has(#logout-form) .main-content .form-control,
body:has(#logout-form) .main-content .custom-select,
body:has(#logout-form) .main-content .input-group-text,
body:has(#logout-form) .main-content .select2-container--default .select2-selection--single,
body:has(#logout-form) .main-content .select2-container--default .select2-selection--multiple {
    background-color: var(--ninput-surface);
    border-color: var(--ninput-border);
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content .form-control:focus,
body:has(#logout-form) .main-content .custom-select:focus,
body:has(#logout-form) .main-content .select2-container--default.select2-container--focus .select2-selection--multiple,
body:has(#logout-form) .main-content .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ninput-teal-700) !important;
    box-shadow: 0 0 0 0.2rem rgba(17, 107, 104, 0.16) !important;
}

body:has(#logout-form) .main-content .select2-container--default .select2-selection--single {
    min-height: 2.75rem;
}

body:has(#logout-form) .main-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ninput-text);
    line-height: 2.65rem;
}

body:has(#logout-form) .main-content .select2-dropdown,
body:has(#logout-form) .main-content .dropdown-menu {
    background-color: var(--ninput-surface);
    border-color: var(--ninput-border);
    box-shadow: var(--ninput-shadow);
}

body:has(#logout-form) .select2-dropdown {
    background-color: var(--ninput-surface);
    border-color: var(--ninput-border);
    box-shadow: var(--ninput-shadow);
}

body:has(#logout-form) .main-content .dropdown-item {
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content .dropdown-item:hover,
body:has(#logout-form) .main-content .dropdown-item:focus,
body:has(#logout-form) .main-content .dropdown-item.active {
    background-color: var(--ninput-teal-100);
    color: var(--ninput-slate-800);
}

body:has(#logout-form) .main-content .table {
    color: var(--ninput-text);
}

body:has(#logout-form) .main-content .table thead th,
body:has(#logout-form) .main-content .thead-light th {
    background-color: var(--ninput-surface-muted);
    border-color: var(--ninput-border);
    color: var(--ninput-slate-800);
}

body:has(#logout-form) .main-content .table td,
body:has(#logout-form) .main-content .table th {
    border-color: var(--ninput-border);
}

body:has(#logout-form) .main-content .table tbody tr:hover {
    background-color: #f7fbfa;
}

body:has(#logout-form) .main-content .badge-success,
body:has(#logout-form) .main-content .badge-info,
body:has(#logout-form) .main-content .badge-primary {
    background-color: var(--ninput-teal-700);
    color: #fff;
}

body:has(#logout-form) .main-content .badge-warning {
    background-color: #e6a23c;
    color: #24363b;
}

body:has(#logout-form) .main-content .badge-danger {
    background-color: #bd3d3a;
    color: #fff;
}

body:has(#logout-form) .main-content .page-link {
    background-color: var(--ninput-surface);
    border-color: var(--ninput-border);
    color: var(--ninput-teal-700);
}

body:has(#logout-form) .main-content .page-item.active .page-link,
body:has(#logout-form) .main-content .page-link:hover,
body:has(#logout-form) .main-content .page-link:focus {
    background-color: var(--ninput-teal-700);
    border-color: var(--ninput-teal-700);
    box-shadow: 0 0 0 0.2rem rgba(17, 107, 104, 0.16);
    color: #fff;
}

/* Restaurants action area: document-flow layout avoids overlap with the page heading. */
body:has(#logout-form) .restaurant-index__hero {
    background-color: var(--ninput-slate-800);
    block-size: 1.5rem;
}

body:has(#logout-form) .restaurant-index__container {
    margin-top: 0;
    padding-top: 1.5rem;
}

.restaurant-index__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.restaurant-index__heading {
    flex: 1 1 12rem;
    min-width: 0;
}

.restaurant-index__actions {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.restaurant-index__action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 2.75rem;
}

.restaurant-index__filter-toggle {
    inline-size: 2.75rem;
}

.restaurant-index__filters {
    flex-basis: 100%;
    margin-block-start: 0.25rem;
}

.restaurant-index__filter-field {
    max-inline-size: 22rem;
}

html[dir="rtl"] .restaurant-index__actions {
    justify-content: flex-start;
}

@media (max-width: 767.98px) {
    body:has(#logout-form) #navbar-main {
        min-height: 4rem;
        padding-block: 0.5rem;
    }

    body:has(#logout-form) #navbar-main :is(.nav-link, .navbar-toggler, .dropdown-toggle) {
        align-items: center;
        display: inline-flex;
        min-height: 2.75rem;
    }

    body:has(#logout-form) .restaurant-index__container {
        padding-top: 1rem;
    }

    .restaurant-index__header {
        align-items: stretch;
    }

    .restaurant-index__heading,
    .restaurant-index__actions {
        flex-basis: 100%;
    }

    .restaurant-index__actions {
        justify-content: stretch;
    }

    .restaurant-index__action:not(.restaurant-index__filter-toggle) {
        flex: 1 1 8rem;
    }

    .restaurant-index__filter-toggle {
        flex: 0 0 2.75rem;
    }

    .restaurant-index__filter-field {
        max-inline-size: none;
    }
}

@media (max-width: 575.98px) {
    body:has(#logout-form) {
        overflow-x: hidden;
    }

    /* Legacy change-log embeds retain their content width without widening the dashboard. */
    body:has(#logout-form) .main-content iframe {
        max-width: 100%;
        width: 100%;
    }

    body:has(#logout-form) .main-content .row > [class*="col"],
    body:has(#logout-form) .main-content .card,
    body:has(#logout-form) .main-content .card-header,
    body:has(#logout-form) .main-content .card-body {
        min-width: 0;
    }

    body:has(#logout-form) .main-content .card-header,
    body:has(#logout-form) .main-content .card-body {
        overflow-wrap: anywhere;
    }

    .system-status-item {
        max-width: none;
    }
}

/* Keep Argon's mobile collapse surface aligned with the authenticated sidebar. */
@media (max-width: 767.98px) {
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main:is(.show, .collapsing) {
        background-color: var(--ninput-teal-700) !important;
        background-image: none !important;
        color: #fff;
    }

    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .navbar-collapse-header {
        background-color: var(--ninput-teal-700);
        border-bottom-color: rgba(255, 255, 255, 0.35);
    }

    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link .nav-link-text,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link > i,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link > .ni,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link > .fa,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link > .fas,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link > .far,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link > .fab,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .nav-link[data-toggle="collapse"]::after {
        color: #fff !important;
    }

    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .collapse-brand svg,
    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .collapse-brand svg * {
        fill: #fff !important;
    }

    body:has(#logout-form) #sidenav-main #sidenav-collapse-main .collapse-close .navbar-toggler span {
        background-color: #fff;
    }
}