/**
 * Global theme UI — solid --primary-color from layout/dynamic.php
 * Cards/panels: no outer border; table cells use default gray borders
 */

:root {
    --theme-primary: var(--primary-color, #007bff);
    --table-border-default: #dee2e6;
    --form-border-default: #ced4da;
}

/* ——— Tab header: actions (Import CSV, Add, etc.) on the right ——— */
.tabs-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    margin-bottom: 0;
    border-bottom: 2px solid var(--theme-primary) !important;
    background: #f6f6f6;
    padding: 10px 15px 10px 10px;
    overflow: visible;
}

.tabs-header-bar > .nav-tabs {
    flex: 1 1 auto;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0;
    border-bottom: none;
    float: none;
}

.tabs-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px 6px 0;
}

.tabs-header-actions .btn {
    margin: 0;
}

.tabs-header-actions .tabs-header-action-form {
    display: inline-block;
    margin: 0;
}

/* Branch messaging: branch label + name/dropdown on one row in tab bar */
.tabs-header-actions .branch-messaging-toolbar {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 34px;
}

.branch-messaging-toolbar__label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin: 0;
    padding: 0;
}

.branch-messaging-toolbar__name {
    font-size: 13px;
    color: var(--theme-primary, #007bff);
    margin: 0;
}

.branch-messaging-toolbar .form-control,
.branch-messaging-toolbar .select2-container {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 !important;
    width: 220px !important;
    max-width: 220px;
}

.branch-messaging-toolbar .select2-container .select2-selection--single {
    height: 34px;
    line-height: 32px;
}

.branch-messaging-toolbar .select2-container .select2-selection__rendered {
    line-height: 32px;
    padding-left: 8px;
}

html.dark .branch-messaging-toolbar__label {
    color: #adbac7;
}

/* Legacy tab rows (nav-tabs direct child of tabs-custom, no tabs-header-bar) */
.panel .tabs-custom > ul.nav-tabs,
.tabs-custom > ul.nav-tabs {
    margin: 0 !important;
    padding: 10px 15px 10px 10px;
    background: #f6f6f6;
    border-bottom: 2px solid var(--theme-primary) !important;
}

html.dark .panel .tabs-custom > ul.nav-tabs,
html.dark .tabs-custom > ul.nav-tabs {
    background: #363636;
    border-bottom-color: var(--theme-primary) !important;
}

/* ——— HR (solid theme) ——— */
hr:not(.meal-step-divider),
hr.solid-spc {
    border-top: 1px solid var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    opacity: 1;
}

/* Page title bar — theme hr inside header strip (not floating in content) */
.content-body > .page-header {
    position: relative;
    overflow: hidden;
}

.content-body > .page-header h2 {
    border-bottom: none !important;
}

.content-body > .page-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--theme-primary);
}

/* ——— Filter panels: no top line (hr-like border above Filter) ——— */
.app-filter-panel,
.meal-filter-panel,
.branch-filter-panel,
section.panel.app-filter-panel,
section.panel.panel-filter-first,
section.panel:has(> .app-filter-panel:first-child),
section.panel:has(> .branch-filter-panel:first-child) {
    border-top: none !important;
}

.app-filter-panel,
.meal-filter-panel,
.branch-filter-panel,
section.panel.app-filter-panel,
section.panel.meal-filter-panel {
    margin-bottom: 15px !important;
    border: none !important;
    box-shadow: none;
    background: #fdfdfd;
}

/* Filter inside a parent panel — gap before list/content below */
section.panel > .app-filter-panel,
section.panel > .branch-filter-panel {
    margin-bottom: 15px !important;
}

.app-filter-panel + .panel-heading,
.branch-filter-panel + .panel-heading,
.app-filter-panel + .tabs-custom,
.branch-filter-panel + .tabs-custom,
.app-filter-panel + .panel-body:not(.meal-filter-body),
.branch-filter-panel + .panel-body {
    margin-top: 15px;
}

/* Standalone filter section + next content section */
section.panel.app-filter-panel + section.panel,
section.panel.meal-filter-panel + section.panel,
.meal-filter-panel + section.meal-main-panel {
    margin-top: 0;
}

.app-filter-panel > .panel-heading,
.meal-filter-panel > .panel-heading,
.branch-filter-panel > .panel-heading,
section.panel.app-filter-panel > .panel-heading,
section.panel.meal-filter-panel > .panel-heading {
    border-top: none !important;
    background: #f6f6f6;
    padding: 12px 15px;
    margin-bottom: 0;
}

/* ——— Filter + card headers: full-width theme hr (2px, no side gaps) ——— */
.panel > .panel-heading:not(.panel-heading-transparent),
.panel-default > .panel-heading:not(.panel-heading-transparent),
.app-filter-panel > .panel-heading,
.meal-filter-panel > .panel-heading,
.branch-filter-panel > .panel-heading,
section.panel > .panel-heading:not(.panel-heading-transparent),
section.panel > .app-filter-panel > .panel-heading,
section.panel > .branch-filter-panel > .panel-heading {
    border-bottom: none !important;
    position: relative;
    border-radius: 0 !important;
    background: #f6f6f6;
    padding: 12px 15px;
    margin-bottom: 0;
}

.panel > .panel-heading:not(.panel-heading-transparent)::after,
.panel-default > .panel-heading:not(.panel-heading-transparent)::after,
.app-filter-panel > .panel-heading::after,
.meal-filter-panel > .panel-heading::after,
.branch-filter-panel > .panel-heading::after,
section.panel > .panel-heading:not(.panel-heading-transparent)::after,
section.panel > .app-filter-panel > .panel-heading::after,
section.panel > .branch-filter-panel > .panel-heading::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--theme-primary);
}

.panel,
.panel-default,
.app-filter-panel.panel,
.meal-filter-panel,
.branch-filter-panel,
section.panel.app-filter-panel,
section.panel.meal-filter-panel {
    overflow: hidden;
}

/* No theme hr line immediately above a filter block */
.app-filter-panel::before,
.meal-filter-panel::before,
.branch-filter-panel::before,
section.panel.panel-filter-first::before {
    display: none !important;
    content: none !important;
}

/* ——— Cards / panels: no outer theme border ——— */
.panel,
.panel-default,
.panel-bordered,
.panel-custom,
.panel-highlight,
.meal-row-item.panel,
.well {
    border: none !important;
    box-shadow: none;
}

.panel > .panel-footer,
.panel-default > .panel-footer,
.panel-custom .panel-footer-custom {
    border-top: none !important;
}

/* ——— Tables: inner cells = default gray only ——— */
.table-bordered {
    border: 1px solid var(--table-border-default) !important;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border: 1px solid var(--table-border-default) !important;
}

.table > thead > tr > th {
    border-bottom: 1px solid var(--table-border-default) !important;
}

/* ——— Forms: default border, solid theme on focus ——— */
.form-control,
select.form-control,
textarea.form-control,
.input-group-addon,
.select2-container--bootstrap .select2-selection {
    border: 1px solid var(--form-border-default) !important;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
    border: 1px solid var(--theme-primary) !important;
    box-shadow: none !important;
    outline: 0;
}

/* ——— Action icon buttons — theme (add, download, stock, etc.) ——— */
.btn-default.btn-circle.icon,
a.btn-default.btn-circle.icon,
button.btn-default.btn-circle.icon,
.btn-circle.btn-default.icon,
.btn.btn-circle.btn-default.icon {
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
    background-color: #fff !important;
}

.btn-default.btn-circle.icon i,
a.btn-default.btn-circle.icon i,
button.btn-default.btn-circle.icon i,
.btn-circle.btn-default.icon i {
    color: inherit !important;
}

.btn-default.btn-circle.icon:hover,
.btn-default.btn-circle.icon:focus,
a.btn-default.btn-circle.icon:hover,
a.btn-default.btn-circle.icon:focus,
button.btn-default.btn-circle.icon:hover,
button.btn-default.btn-circle.icon:focus,
.btn-circle.btn-default.icon:hover,
.btn-circle.btn-default.icon:focus {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
}

.btn-default.btn-circle.icon:hover i,
.btn-default.btn-circle.icon:focus i {
    color: #fff !important;
}

.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info),
a.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info) {
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
    background-color: #fff !important;
    min-width: auto;
    height: auto;
    padding: 5px 12px;
}

.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):hover,
.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):focus,
a.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):hover,
a.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):focus {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
}

/* Labeled table actions (Permission, Regenerate Sidebar on role list) */
.btn-default.btn-sm.role-action-btn,
a.btn-default.btn-sm.role-action-btn,
.btn-default.btn-sm.role-permission-btn,
a.btn-default.btn-sm.role-permission-btn {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
}

.btn-default.btn-sm.role-action-btn:hover,
a.btn-default.btn-sm.role-action-btn:hover,
.btn-default.btn-sm.role-permission-btn:hover,
a.btn-default.btn-sm.role-permission-btn:hover {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
    border: 1px solid var(--theme-primary) !important;
}

/* ——— Edit action — always warning ——— */
.btn-warning.btn-circle.icon,
a.btn-warning.btn-circle.icon,
button.btn-warning.btn-circle.icon,
.btn-action-edit.btn-circle.icon,
[class*="btn-edit"].btn-circle.icon,
.btn-default.btn-circle.icon:has(.fa-pen-nib),
.btn-default.btn-circle.icon:has(.fa-pen),
.btn-default.btn-circle.icon:has(.fa-pencil-alt),
a.btn-default.btn-circle.icon:has(.fa-pen-nib),
button.btn-default.btn-circle.icon:has(.fa-pen-nib) {
    color: var(--warning-color, #f0ad4e) !important;
    border: 1px solid var(--warning-color, #f0ad4e) !important;
    background-color: #fff !important;
}

.btn-warning.btn-circle.icon i,
.btn-action-edit.btn-circle.icon i,
[class*="btn-edit"].btn-circle.icon i,
.btn-default.btn-circle.icon:has(.fa-pen-nib) i,
.btn-default.btn-circle.icon:has(.fa-pen) i {
    color: inherit !important;
}

.btn-warning.btn-circle.icon:hover,
.btn-warning.btn-circle.icon:focus,
.btn-action-edit.btn-circle.icon:hover,
[class*="btn-edit"].btn-circle.icon:hover,
.btn-default.btn-circle.icon:has(.fa-pen-nib):hover,
a.btn-default.btn-circle.icon:has(.fa-pen-nib):hover,
button.btn-default.btn-circle.icon:has(.fa-pen-nib):hover {
    color: #fff !important;
    background-color: var(--warning-color, #ec971f) !important;
    border-color: var(--warning-color, #ec971f) !important;
}

.btn-warning.btn-circle.icon:hover i,
.btn-default.btn-circle.icon:has(.fa-pen-nib):hover i {
    color: #fff !important;
}

/* ——— View action — always info ——— */
.btn-info.btn-circle.icon,
a.btn-info.btn-circle.icon,
button.btn-info.btn-circle.icon,
.btn-action-view.btn-circle.icon,
.btn-default.btn-circle.icon:has(.fa-eye),
a.btn-default.btn-circle.icon:has(.fa-eye),
button.btn-default.btn-circle.icon:has(.fa-eye) {
    color: var(--info-color, #5bc0de) !important;
    border: 1px solid var(--info-color, #5bc0de) !important;
    background-color: #fff !important;
}

.btn-info.btn-circle.icon i,
.btn-action-view.btn-circle.icon i,
.btn-default.btn-circle.icon:has(.fa-eye) i {
    color: inherit !important;
}

.btn-info.btn-circle.icon:hover,
.btn-info.btn-circle.icon:focus,
.btn-action-view.btn-circle.icon:hover,
.btn-default.btn-circle.icon:has(.fa-eye):hover,
a.btn-default.btn-circle.icon:has(.fa-eye):hover {
    color: #fff !important;
    background-color: var(--info-color, #46b8da) !important;
    border-color: var(--info-color, #46b8da) !important;
}

.btn-info.btn-circle.icon:hover i,
.btn-default.btn-circle.icon:has(.fa-eye):hover i {
    color: #fff !important;
}

/* ——— Delete — always solid danger ——— */
.btn-danger,
.btn-danger.btn-circle,
.btn-danger.btn-circle.icon,
a.btn-danger,
a.btn-danger.btn-circle.icon,
button.btn-danger,
button.btn-danger.btn-circle.icon,
.btn-del-sup,
.btn-delete,
[class*="btn-del-"] {
    background-color: var(--danger-color, #d9534f) !important;
    border: 1px solid var(--danger-color, #d9534f) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.btn-circle.icon:hover,
.btn-danger.btn-circle.icon:focus,
a.btn-danger:hover,
button.btn-danger:hover {
    background-color: var(--danger-color, #c9302c) !important;
    border: 1px solid var(--danger-color, #c9302c) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.btn-danger i,
.btn-danger.btn-circle.icon i {
    color: #fff !important;
}

/* ——— Dark mode ——— */
html.dark {
    --table-border-default: #495057;
    --form-border-default: #495057;
}

html.dark hr,
html.dark hr.solid-spc {
    border-top-color: var(--theme-primary) !important;
}

html.dark .panel,
html.dark .panel-default,
html.dark .well,
html.dark .meal-row-item.panel {
    border: none !important;
}

html.dark .panel > .panel-heading:not(.panel-heading-transparent)::after,
html.dark .app-filter-panel > .panel-heading::after,
html.dark .meal-filter-panel > .panel-heading::after,
html.dark .branch-filter-panel > .panel-heading::after {
    background-color: var(--theme-primary);
}

html.dark .table-bordered {
    border-color: var(--table-border-default) !important;
}

html.dark .table-bordered > thead > tr > th,
html.dark .table-bordered > tbody > tr > td {
    border-color: var(--table-border-default) !important;
}

html.dark .form-control,
html.dark .select2-container--bootstrap .select2-selection {
    border-color: var(--form-border-default) !important;
}

html.dark .form-control:focus,
html.dark .select2-container--bootstrap.select2-container--focus .select2-selection {
    border-color: var(--theme-primary) !important;
}

html.dark .btn-default.btn-circle.icon {
    background-color: transparent !important;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

html.dark .btn-default.btn-circle:not(.icon):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info),
html.dark a.btn-default.btn-circle:not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info),
html.dark .btn-default.btn-sm.role-action-btn,
html.dark a.btn-default.btn-sm.role-action-btn,
html.dark .btn-default.btn-sm.role-permission-btn,
html.dark a.btn-default.btn-sm.role-permission-btn {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

html.dark .btn-default.btn-circle:not(.icon):not(.btn-danger):hover,
html.dark a.btn-default.btn-circle:not(.btn-danger):hover,
html.dark .btn-default.btn-sm.role-action-btn:hover,
html.dark a.btn-default.btn-sm.role-action-btn:hover,
html.dark .btn-default.btn-sm.role-permission-btn:hover,
html.dark a.btn-default.btn-sm.role-permission-btn:hover {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
    border-color: var(--theme-primary) !important;
}

html.dark .btn-default.btn-circle.icon:hover {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
}

html.dark .btn-default.btn-circle.icon:has(.fa-pen-nib),
html.dark [class*="btn-edit"].btn-circle.icon,
html.dark .btn-warning.btn-circle.icon {
    color: var(--warning-color, #f0ad4e) !important;
    border-color: var(--warning-color, #f0ad4e) !important;
}

html.dark .btn-default.btn-circle.icon:has(.fa-pen-nib):hover,
html.dark .btn-warning.btn-circle.icon:hover {
    background-color: var(--warning-color, #ec971f) !important;
    color: #fff !important;
}

html.dark .btn-default.btn-circle.icon:has(.fa-eye),
html.dark .btn-info.btn-circle.icon {
    color: var(--info-color, #5bc0de) !important;
    border-color: var(--info-color, #5bc0de) !important;
}

html.dark .btn-default.btn-circle.icon:has(.fa-eye):hover,
html.dark .btn-info.btn-circle.icon:hover {
    background-color: var(--info-color, #46b8da) !important;
    color: #fff !important;
}

html.dark .btn-danger,
html.dark .btn-danger:hover,
html.dark .btn-danger.btn-circle.icon {
    background-color: var(--danger-color, #d9534f) !important;
    border-color: var(--danger-color, #d9534f) !important;
    color: #fff !important;
}

/* ——— Panel heading buttons: solid (override faint custom-style.css) ——— */
.panel-heading .btn-primary,
.panel-heading .btn-primary.btn-xs,
.panel-heading .btn-add-meal-after,
.nav-tabs .btn-primary {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.panel-heading .btn-primary i,
.panel-heading .btn-primary.btn-xs i,
.panel-heading .btn-add-meal-after i,
.nav-tabs .btn-primary i {
    color: #fff !important;
}

.panel-heading .btn-primary:hover,
.panel-heading .btn-primary:focus,
.panel-heading .btn-primary.btn-xs:hover,
.panel-heading .btn-add-meal-after:hover,
.nav-tabs .btn-primary:hover {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
    opacity: 0.9 !important;
    filter: brightness(0.95);
}

.panel-heading .btn-danger,
.panel-heading .btn-danger.btn-xs,
.panel-heading .btn-remove-meal-row,
.nav-tabs .btn-danger {
    background-color: var(--danger-color, #dc3545) !important;
    border: 1px solid var(--danger-color, #dc3545) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.panel-heading .btn-danger i,
.panel-heading .btn-danger.btn-xs i,
.panel-heading .btn-remove-meal-row i,
.nav-tabs .btn-danger i {
    color: #fff !important;
}

.panel-heading .btn-danger:hover,
.panel-heading .btn-danger:focus,
.panel-heading .btn-danger.btn-xs:hover,
.panel-heading .btn-remove-meal-row:hover,
.nav-tabs .btn-danger:hover {
    background-color: var(--danger-color, #c9302c) !important;
    border-color: var(--danger-color, #c9302c) !important;
    color: #fff !important;
    opacity: 1 !important;
}

html.dark .panel-heading .btn-primary,
html.dark .panel-heading .btn-add-meal-after,
html.dark .nav-tabs .btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

html.dark .panel-heading .btn-primary i,
html.dark .panel-heading .btn-add-meal-after i {
    color: #fff !important;
}

html.dark .panel-heading .btn-danger,
html.dark .panel-heading .btn-remove-meal-row,
html.dark .nav-tabs .btn-danger {
    background-color: var(--danger-color, #dc3545) !important;
    border-color: var(--danger-color, #dc3545) !important;
    color: #fff !important;
}

html.dark .panel-heading .btn-danger i,
html.dark .panel-heading .btn-remove-meal-row i {
    color: #fff !important;
}

/* Meal create row actions — extra specificity */
.meal-create-simple .meal-row-item > .panel-heading .meal-row-head-actions .btn-add-meal-after {
    min-width: 28px;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

.meal-create-simple .meal-row-item > .panel-heading .meal-row-head-actions .btn-add-meal-after i {
    color: #fff !important;
}

.meal-create-simple .meal-row-item > .panel-heading .meal-row-head-actions .btn-remove-meal-row {
    min-width: 28px;
    background-color: var(--danger-color, #dc3545) !important;
    border-color: var(--danger-color, #dc3545) !important;
    color: #fff !important;
}

.meal-create-simple .meal-row-item > .panel-heading .meal-row-head-actions .btn-remove-meal-row i {
    color: #fff !important;
}

/* ——— Sidebar / page header — theme primary from Settings ——— */
.page-header h2 {
    color: var(--theme-primary) !important;
}

/* Icons default to sidebar-text — only active/hover states override to primary (see below) */
html.dark .sidebar-left .nav-main li a i,
html.dark ul.nav-main li a i,
html.dark .sidebar-left .nav-main .nav-parent > a:after,
html.dark ul.nav-main li.nav-parent > a:after {
    color: var(--primary-color, var(--theme-primary)) !important;
}

ul.nav-main li.nav-parent > a:after,
.sidebar-left .nav-main .nav-parent > a:after {
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 20px !important;
    line-height: 1 !important;
}

/* Active & hover nav items — primary color */
.sidebar-left .nav-main > li > a:hover,
.sidebar-left .nav-main > li > a:focus,
.sidebar-left .nav-main > li.nav-active > a,
.sidebar-left .nav-main .nav-children li a:hover,
.sidebar-left .nav-main .nav-children li a:focus,
.sidebar-left .nav-main .nav-children li.nav-active > a,
ul.nav-main > li > a:hover,
ul.nav-main > li > a:focus,
ul.nav-main > li.nav-active > a,
ul.nav-main li .nav-children li.nav-active > a,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a,
.nav-main li.nav-active > a,
.nav-main li.nav-active > a i,
html.dark .nav-main li.nav-active > a,
html.dark .nav-main li.nav-expanded > a,
html.dark .nav-main li.nav-active > a i,
html.dark .nav-main li.nav-expanded > a i,
html.dark ul.nav-main li .nav-children li.nav-active > a,
/* Expanded parent item blue only in dark mode */
html.dark .sidebar-left .nav-main > li.nav-expanded > a,
html.dark ul.nav-main > li.nav-expanded > a {
    color: var(--primary-color, var(--theme-primary)) !important;
}

/* Sub-menu active items: theme color (dark mode only — light mode handled by dynamic.php) */
html.dark .sidebar-left .nav-main li.nav-parent.nav-expanded > ul.nav-children > li > a,
html.dark .sidebar-left .nav-main li.nav-parent.nav-expanded > ul.nav-children > li > a span,
html.dark ul.nav-main li.nav-parent.nav-expanded > ul.nav-children > li > a,
html.dark ul.nav-main li.nav-parent.nav-expanded > ul.nav-children > li > a span,
html.dark .sidebar-left .nav-main li.nav-parent.nav-expanded > ul.nav-children > li > a i,
html.dark ul.nav-main li.nav-parent.nav-expanded > ul.nav-children > li > a i {
    color: var(--primary-color, var(--theme-primary)) !important;
}

ul.nav-main > li.nav-active > a,
ul.nav-main > li.nav-expanded > a,
html.dark ul.nav-main > li.nav-active > a,
html.sidebar-light ul.nav-main > li.nav-active > a,
.sidebar-left .nav-main > li.nav-active > a,
html.dark .sidebar-left .nav-main > li.nav-active > a {
    box-shadow: 2px 0 0 var(--primary-color, var(--theme-primary)) inset !important;
}

html.sidebar-light:not(.dark) ul.nav-main > li > a:hover,
html.sidebar-light:not(.dark) ul.nav-main > li > a:focus,
ul.nav-main > li.nav-active > a:hover,
ul.nav-main > li.nav-active > a:focus {
    color: var(--primary-color, var(--theme-primary)) !important;
}

/* Header: flex layout + centered sidebar toggle */
.header {
    display: flex;
    align-items: stretch;
}

.header .logo-env,
.header .header-left,
.header .header-right {
    float: none;
}

.header .header-left {
    display: flex;
    align-items: center;
}

.header .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.header .header-left .header-menu,
.header .header-left .header-menu > li {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
}

.header .header-left .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.header .header-left .sidebar-toggle i {
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 18px;
}

html.dark .panel-heading,
.panel-heading {
    border-bottom-color: transparent !important;
}

html.dark .panel > .panel-heading:not(.panel-heading-transparent)::after,
html.dark .panel-default > .panel-heading:not(.panel-heading-transparent)::after,
html.dark .app-filter-panel > .panel-heading::after {
    background-color: var(--theme-primary) !important;
}

html.dark .panel .tabs-custom > .tabs-header-bar,
html.dark .tabs-custom > .tabs-header-bar {
    border-bottom: 2px solid var(--theme-primary) !important;
    background: #363636;
}

html.dark .app-filter-panel > .panel-heading,
html.dark section.panel.app-filter-panel > .panel-heading {
    background: #363636;
}

html.dark .panel > .panel-heading:not(.panel-heading-transparent) {
    background: #363636;
}

html.dark section.panel.app-filter-panel {
    background: #323232;
}

/* ——— Tabs: active underline + notch use theme (not var(--theme-primary) / var(--theme-primary)) ——— */
.tabs-custom .nav-tabs > li > a:after,
.tabs-custom .nav-tabs > li.active > a:after,
.tabs-custom .nav-tabs > li:hover > a:after,
.nav-tabs > li > a:after {
    background: var(--theme-primary) !important;
    background-color: var(--theme-primary) !important;
}

.tabs-custom .nav-tabs > li.active > a:before,
.nav-tabs > li.active > a:before {
    background: var(--theme-primary) !important;
    background-color: var(--theme-primary) !important;
}

.tabs-custom .nav-tabs > li.active > a,
.tabs-custom .nav-tabs > li.active > a:hover,
.tabs-custom .nav-tabs > li.active > a:focus,
.tabs-header-bar .nav-tabs > li.active > a,
.tabs-header-bar .nav-tabs > li.active > a:hover,
.tabs-header-bar .nav-tabs > li.active > a:focus {
    background: var(--theme-primary) !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

.tabs-custom .nav-tabs > li.active > a i,
.tabs-custom .nav-tabs > li.active > a span,
.tabs-header-bar .nav-tabs > li.active > a i,
.tabs-header-bar .nav-tabs > li.active > a span {
    color: #fff !important;
}

.tabs-custom .nav-tabs > li:not(.active) > a,
.tabs-header-bar .nav-tabs > li:not(.active) > a {
    background: transparent !important;
    color: #666 !important;
}

html.dark .tabs-custom .nav-tabs > li > a:after,
html.dark .tabs-custom .nav-tabs > li.active > a:before {
    background: var(--theme-primary) !important;
    background-color: var(--theme-primary) !important;
}

html.dark .tabs-custom .nav-tabs > li.active > a,
html.dark .tabs-header-bar .nav-tabs > li.active > a {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

html.dark .nav-tabs li.active a,
html.dark .nav-tabs li.active a:hover,
html.dark .nav-tabs li.active a:focus {
    color: var(--theme-primary) !important;
}

html.dark .tabs-custom .nav-tabs > li.active > a,
.tabs-custom .nav-tabs > li.active > a {
    border-top-color: var(--theme-primary) !important;
}

/* ——— Bootstrap / skin helpers → theme primary (replaces legacy #5956ea) ——— */
.text-primary,
a.text-primary {
    color: var(--theme-primary) !important;
}

.bg-primary,
.label-primary,
.badge-primary,
.alert-primary,
.progress-bar-primary,
.panel-primary > .panel-heading {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.btn-primary:hover {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    filter: brightness(0.92);
}

.border-primary,
.panel-primary {
    border-color: var(--theme-primary) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-primary) !important;
}

/* ==========================================================================
   FoodExl brand UI — shared page chrome
   Appended last so it settles the look of panels, tables, forms, buttons,
   badges and pagination across every page, matching the login/dashboard:
   hairline borders, 14px radius, ink primary, amber for accents.
   ========================================================================== */

/* ——— Panels / cards ——— */
.panel,
.panel-default,
.panel-bordered,
.panel-custom,
.meal-row-item.panel,
.well {
    background: #ffffff;
    border: 1px solid #e6eaf2 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(28, 20, 17, 0.04) !important;
}

/* Panel header: a hairline instead of a grey bar plus a heavy primary rule */
.panel > .panel-heading:not(.panel-heading-transparent),
.panel-default > .panel-heading:not(.panel-heading-transparent),
.app-filter-panel > .panel-heading,
.meal-filter-panel > .panel-heading,
.branch-filter-panel > .panel-heading,
section.panel > .panel-heading:not(.panel-heading-transparent),
section.panel > .app-filter-panel > .panel-heading,
section.panel > .branch-filter-panel > .panel-heading {
    background: #ffffff !important;
    border-bottom: 1px solid #eef1f7 !important;
    padding: 16px 20px !important;
    border-radius: 14px 14px 0 0 !important;
}

.panel > .panel-heading:not(.panel-heading-transparent)::after,
.panel-default > .panel-heading:not(.panel-heading-transparent)::after,
.app-filter-panel > .panel-heading::after,
.meal-filter-panel > .panel-heading::after,
.branch-filter-panel > .panel-heading::after,
section.panel > .panel-heading:not(.panel-heading-transparent)::after,
section.panel > .app-filter-panel > .panel-heading::after,
section.panel > .branch-filter-panel > .panel-heading::after {
    display: none !important;
}

.panel-heading .panel-title,
.panel-heading h1, .panel-heading h2, .panel-heading h3,
.panel-heading h4, .panel-heading h5 {
    color: #14203a !important;
    font-weight: 600 !important;
}

.panel-heading .panel-title i,
.panel-heading > i {
    color: var(--brand-amber, #fab116) !important;
}

.panel-body { padding: 20px !important; }

/* ——— Tables: horizontal rules only ——— */
.table > thead > tr > th,
.table-bordered > thead > tr > th {
    background: #f7f9fc !important;
    color: #6b7793 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #e6eaf2 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 14px !important;
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td {
    border-left: none !important;
    border-right: none !important;
}

.table > tbody > tr > td {
    border-top: none !important;
    border-bottom: 1px solid #f0f3f8 !important;
    padding: 13px 14px !important;
    color: #33415c;
    vertical-align: middle !important;
}

.table > tbody > tr:last-child > td { border-bottom: none !important; }

.table > tbody > tr:hover > td {
    background: #f8fafd !important;
}

/* ——— Form controls: same language as the login inputs ——— */
.form-control,
select.form-control,
textarea.form-control,
.input-group-addon,
.select2-container--bootstrap .select2-selection {
    border: 1px solid #dfe4ee !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #14203a;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-ink-rgb, 43, 33, 28), 0.12) !important;
}

.input-group-addon {
    background: #f4f6fb !important;
    color: var(--theme-primary) !important;
}

/* ——— Input groups ———
   The blanket 10px radius above is applied to .form-control and
   .input-group-addon alike, which turns each half of a group into its own
   rounded pill — so an icon addon and its field read as two detached boxes.
   Inside a group only the outer corners should be rounded, and the touching
   borders collapsed, so the pair reads as one control. */
.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn > .btn,
.input-group > .select2-container--bootstrap .select2-selection {
    border-radius: 0 !important;
}

.input-group > .form-control:first-child,
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.input-group > .form-control:last-child,
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* Bootstrap 3 lays a group out as table cells, so neighbouring borders sit side
   by side and show as a 2px seam. Drop the duplicate on the later element. */
.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child) {
    border-left: 0 !important;
}

/* Keep the addon attached to the field when the field takes focus, instead of
   the border colour changing on only one half of the control. */
.input-group:focus-within > .input-group-addon,
.input-group:focus-within > .form-control {
    border-color: var(--theme-primary) !important;
}

label, .control-label {
    color: #33415c !important;
    font-weight: 600 !important;
}

/* The rule above is !important, so without a dark counterpart every form label
   in the app stayed near-black ink on the dark surface and read as unlabelled
   fields. */
html.dark label,
html.dark .control-label {
    color: #cbd5e1 !important;
}

/* ——— Buttons ——— */
.btn {
    border-radius: 9px !important;
    font-weight: 600 !important;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn-primary {
    box-shadow: 0 6px 14px -8px rgba(var(--brand-ink-rgb, 43, 33, 28), 0.7) !important;
}

.btn-primary:hover { transform: translateY(-1px); }

.btn-default {
    background: #ffffff !important;
    border: 1px solid #dfe4ee !important;
    color: #33415c !important;
}

.btn-default:hover {
    background: #f5f7fc !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

/* ——— Badges / labels: tinted pills, not saturated blobs ——— */
.badge, .label {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.01em;
}

.badge-success, .label-success { background: rgba(22, 143, 91, 0.12) !important; color: #157a4d !important; }
.badge-danger,  .label-danger  { background: rgba(214, 47, 71, 0.12) !important; color: #c62a44 !important; }
.badge-warning, .label-warning { background: rgba(var(--brand-amber-rgb, 250, 177, 22), 0.18) !important; color: var(--brand-amber-deep, #b47c05) !important; }
.badge-info,    .label-info    { background: rgba(var(--brand-ink-rgb, 43, 33, 28), 0.10) !important; color: var(--theme-primary) !important; }
.badge-primary, .label-primary { background: rgba(var(--brand-ink-rgb, 43, 33, 28), 0.10) !important; color: var(--theme-primary) !important; }

/* ——— DataTables chrome ——— */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #e6eaf2 !important;
    color: #33415c !important;
    margin-left: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f7fc !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dfe4ee !important;
    border-radius: 9px !important;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_info { color: #6b7793 !important; }

/* ——— Page title bar ——— */
.page-header, .breadcrumbs, .page-title-bar {
    border-bottom: 1px solid #e9edf5;
}

/* ——— Dark mode ——— */
html.dark .panel,
html.dark .panel-default,
html.dark .panel-bordered,
html.dark .panel-custom,
html.dark .well {
    background: #1c1c24 !important;
    border-color: #2a2a38 !important;
}

html.dark .panel > .panel-heading:not(.panel-heading-transparent),
html.dark .panel-default > .panel-heading:not(.panel-heading-transparent) {
    background: #1c1c24 !important;
    border-bottom-color: #2a2a38 !important;
}

html.dark .panel-heading .panel-title,
html.dark .panel-heading h3,
html.dark .panel-heading h4 { color: #e6edf3 !important; }

html.dark .table > thead > tr > th {
    background: #16161d !important;
    color: #8f9bb1 !important;
    border-bottom-color: #2a2a38 !important;
}

html.dark .table > tbody > tr > td {
    border-bottom-color: #26262f !important;
    color: #cbd5e1;
}

html.dark .table > tbody > tr:hover > td { background: #22222b !important; }

html.dark .form-control,
html.dark select.form-control,
html.dark textarea.form-control {
    border-color: #2f2f3d !important;
    background: #13131a !important;
    color: #e6edf3 !important;
}

html.dark .btn-default {
    background: #22222b !important;
    border-color: #2f2f3d !important;
    color: #cbd5e1 !important;
}

/* DataTables chrome in dark mode — the muted greys set above are too dim
   on a dark ground. */
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_length,
html.dark .dataTables_wrapper .dataTables_length label,
html.dark .dataTables_wrapper .dataTables_filter,
html.dark .dataTables_wrapper .dataTables_filter label {
    color: #a8b3c7 !important;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
    background: #13131a !important;
    border-color: #2f2f3d !important;
    color: #e6edf3 !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-color: #2f2f3d !important;
    color: #cbd5e1 !important;
}

/* Thumbnail placeholder — used where a record has no image yet. The shared
   default.png assets under uploads/images are near-white, so at thumbnail size
   in a white table cell they read as a broken or missing image. */
.thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--brand-ink-rgb, 43, 33, 28), 0.08);
    color: var(--brand-ink, #2b211c);
    font-size: 15px;
    border: 1px solid #e6eaf2;
}

html.dark .thumb-placeholder {
    background: rgba(126, 162, 238, 0.14);
    border-color: #2f2f3d;
    color: #9ec0ff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Alerts — one standard size
   ---------------------------------------------------------------------------
   SweetAlert gives a toast width:auto, so every flash message came out a
   different width: a short "Saved" as a narrow chip, "The configuration has
   been updated" nearly twice as wide. Fixing the width makes the corner alert
   land in the same place at the same size every time, whatever it says.
   ───────────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast {
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    align-items: center;
}

.swal2-popup.swal2-toast .swal2-title {
    /* A long message wraps inside the fixed width instead of widening it. */
    text-align: left;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
    font-size: 14px;
    margin: 0;
}

.swal2-popup.swal2-toast .swal2-header {
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.swal2-popup.swal2-toast .swal2-content {
    text-align: left;
    font-size: 13px;
}

.swal2-popup.swal2-toast .swal2-actions {
    margin: 8px 0 0;
}

/* Modal dialogs: the same width whether they carry one line or five. */
.swal2-popup:not(.swal2-toast) {
    width: 32em;
    max-width: calc(100vw - 32px);
}

html.dark .swal2-popup.swal2-toast {
    background: #1b1b22;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html.dark .swal2-popup.swal2-toast .swal2-title,
html.dark .swal2-popup.swal2-toast .swal2-content {
    color: #e6edf3;
}

/* Clear the fixed header — a top-end toast used to land on top of the user
   menu, so a save confirmation covered the very control that was just used. */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right,
.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-left {
    padding-top: 74px;
}