/* ==========================================================================
   Levant System - brand layer
   --------------------------------------------------------------------------
   Loaded last, after theme.minc619.css and style.css, so it has the final say.
   The theme's own palette was recoloured in place; this file adds the design
   tokens, the navy chrome, and the component corrections the theme has no
   opinion about: table rhythm, numeric alignment, form control sizing.
   ========================================================================== */

:root {
    /* Brand */
    --ls-navy-900: #0b2239;
    --ls-navy-800: #12314c;
    --ls-navy-700: #1b4062;
    --ls-teal-700: #0f766e;
    --ls-teal-600: #0d9488;
    --ls-teal-500: #14b8a6;
    --ls-teal-400: #2dd4bf;
    --ls-teal-50:  #ecfdf7;

    /* Ink */
    --ls-ink-900: #0f172a;
    --ls-ink-700: #334155;
    --ls-ink-600: #475569;
    --ls-ink-400: #94a3b8;

    /* Surfaces */
    --ls-canvas:    #f4f6f8;
    --ls-surface:   #ffffff;
    --ls-line:      #e2e8f0;
    --ls-line-soft: #eef2f6;

    /* Semantic */
    --ls-success: #16a34a;
    --ls-warning: #d97706;
    --ls-danger:  #dc2626;
    --ls-info:    #0284c7;

    /* Shape */
    --ls-radius:    10px;
    --ls-radius-sm: 7px;
    --ls-shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --ls-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
}

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

/* The theme sizes almost everything in rem, so the root is the one knob that
   brings type, padding and control heights down together. 15px keeps body
   text at a comfortable 13px while tightening the whole layout. */
html {
    font-size: 15px;
}

body {
    background-color: var(--ls-canvas);
    color: var(--ls-ink-900);
    font-size: .875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.main {
    background-color: var(--ls-canvas);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ls-ink-900);
    letter-spacing: -.011em;
}

a { color: var(--ls-teal-600); }
a:hover { color: var(--ls-teal-700); }

/* One visible focus ring everywhere, instead of the theme's three. */
:focus-visible {
    outline: 2px solid var(--ls-teal-500);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sidebar - navy chrome
   -------------------------------------------------------------------------- */

.navbar-vertical-aside,
.navbar-vertical-aside .navbar-vertical-container,
.navbar-vertical-aside .navbar-vertical-footer {
    background-color: var(--ls-navy-900);
    border-right: 0;
}

/* The logo lockup sits on navy, so this strip must not stay bg-light. */
.navbar-vertical-aside .bg-light {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.navbar-vertical-aside .user-profile-section {
    border-bottom-color: rgba(255, 255, 255, .08) !important;
}

.navbar-vertical-aside .profile-name {
    color: #ffffff;
}

.navbar-vertical-aside .js-navbar-vertical-aside-toggle-invoker {
    color: #ffffff;
    opacity: .55;
    text-shadow: none;
}

.navbar-vertical-aside .js-navbar-vertical-aside-toggle-invoker:hover {
    opacity: 1;
    color: #ffffff;
}

/* Nav items */
.navbar-vertical-aside .navbar-vertical-content .nav-link {
    color: #a9bacd;
    border-radius: var(--ls-radius-sm);
    margin: 1px .625rem;
    padding: .5rem .75rem;
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.navbar-vertical-aside .navbar-vertical-content .nav-link .nav-icon {
    color: #7d93ab;
    font-size: 1.125rem;
}

.navbar-vertical-aside .navbar-vertical-content .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .06);
}

.navbar-vertical-aside .navbar-vertical-content .nav-link:hover .nav-icon {
    color: #ffffff;
}

/* Active: white text on a teal-tinted plate, with a rail down the left edge. */
.navbar-vertical-aside .navbar-vertical-content .nav-link.active,
.navbar-vertical-aside .navbar-vertical-content .active > .nav-link,
.navbar-vertical-aside .navbar-vertical-content .show > .nav-link {
    color: #ffffff;
    background-color: rgba(20, 184, 166, .16);
    position: relative;
}

.navbar-vertical-aside .navbar-vertical-content .nav-link.active .nav-icon,
.navbar-vertical-aside .navbar-vertical-content .active > .nav-link .nav-icon,
.navbar-vertical-aside .navbar-vertical-content .show > .nav-link .nav-icon {
    color: var(--ls-teal-400);
}

.navbar-vertical-aside .navbar-vertical-content > .navbar-nav > li > .nav-link.active::before,
.navbar-vertical-aside .navbar-vertical-content > .navbar-nav > li.active > .nav-link::before,
.navbar-vertical-aside .navbar-vertical-content > .navbar-nav > li.show > .nav-link::before {
    content: "";
    position: absolute;
    left: -.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: 0 3px 3px 0;
    background-color: var(--ls-teal-400);
}

/* Submenu. The indent has to stay at zero: the theme already pads the links
   and the bullet marks the level, and any extra clipped labels like
   "Pending reports" mid-word. */
.navbar-vertical-aside .nav-sub {
    padding-left: 0;
}

.navbar-vertical-aside .nav-sub .nav-link {
    padding-left: 1.75rem;
    padding-right: .5rem;
}

.navbar-vertical-aside .nav-sub .nav-link {
    color: #8ea3ba;
    font-weight: 400;
    font-size: .8125rem;
    padding-top: .375rem;
    padding-bottom: .375rem;
}

.navbar-vertical-aside .nav-sub .nav-link:hover {
    color: #ffffff;
}

.navbar-vertical-aside .nav-sub .nav-item.active > .nav-link {
    color: var(--ls-teal-400);
    background-color: transparent;
}

.navbar-vertical-aside .nav-indicator-icon {
    color: #4b6480;
    font-size: .5rem;
}

.navbar-vertical-aside .nav-sub .nav-item.active > .nav-link .nav-indicator-icon {
    color: var(--ls-teal-400);
}

.navbar-vertical-aside .nav-link-toggle::after {
    color: #7d93ab;
    opacity: .8;
}

/* The account dropdown is a light popover sitting on a dark panel. */
.navbar-vertical-aside .dropdown-menu {
    background-color: var(--ls-surface);
    border: 1px solid var(--ls-line);
    box-shadow: var(--ls-shadow-md);
}

.navbar-vertical-aside .dropdown-menu .dropdown-item {
    color: var(--ls-ink-700);
}

.navbar-vertical-aside .navbar-brand-logo {
    height: 30px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

#header.navbar {
    background-color: var(--ls-surface);
    border-bottom: 1px solid var(--ls-line);
    box-shadow: none;
}

#header .nav-link,
#header .topbar-link {
    color: var(--ls-ink-600);
}

#header .nav-link:hover,
#header .topbar-link:hover {
    color: var(--ls-teal-600);
}

#header .search--form-group {
    position: relative;
}

#header .search--form-group .form-control {
    min-width: 17rem;
    background-color: var(--ls-canvas);
    border: 1px solid var(--ls-line);
    border-radius: 999px;
    padding-left: 2.25rem;
    height: 2.25rem;
}

#header .search--form-group .form-control:focus {
    background-color: var(--ls-surface);
    border-color: var(--ls-teal-500);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
}

#header .search--form-group .btn {
    position: absolute;
    left: .25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--ls-ink-400);
    padding: .25rem .5rem;
}

#header #search-results {
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow-md);
    overflow-y: auto;
    max-height: 20rem;
    z-index: 1000;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    background-color: var(--ls-surface);
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}

.card-header {
    border-bottom: 1px solid var(--ls-line-soft);
    padding: .75rem 1rem;
    background-color: transparent;
}

.card-body {
    padding: 1rem;
}

.card-header .card-header-title,
.card-header h5,
.card-header h6 {
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: 0;
}

.card-footer {
    border-top: 1px solid var(--ls-line-soft);
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--ls-radius-sm);
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn-primary {
    background-color: var(--ls-teal-600);
    border-color: var(--ls-teal-600);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ls-teal-700);
    border-color: var(--ls-teal-700);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .3);
}

/* Secondary actions are outlined, so they never compete with the primary one. */
.btn-outline-primary,
.btn-secondary {
    color: var(--ls-ink-700);
    border-color: var(--ls-line);
    background-color: var(--ls-surface);
}

.btn-outline-primary:hover {
    background-color: var(--ls-teal-50);
    border-color: var(--ls-teal-500);
    color: var(--ls-teal-700);
}

.btn-secondary:hover {
    background-color: var(--ls-canvas);
    border-color: #cbd5e1;
    color: var(--ls-ink-900);
}

.btn-success { background-color: var(--ls-success); border-color: var(--ls-success); }
.btn-danger  { background-color: var(--ls-danger);  border-color: var(--ls-danger); }
.btn-info    { background-color: var(--ls-info);    border-color: var(--ls-info); }
.btn-warning { background-color: var(--ls-warning); border-color: var(--ls-warning); color: #ffffff; }

.btn-ghost-primary { color: var(--ls-teal-600); }
.btn-ghost-primary:hover { background-color: var(--ls-teal-50); color: var(--ls-teal-700); }
.btn-ghost-danger { color: var(--ls-danger); }
.btn-ghost-danger:hover { background-color: #fef2f2; color: #b91c1c; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
.custom-select {
    border-color: var(--ls-line);
    border-radius: var(--ls-radius-sm);
    color: var(--ls-ink-900);
    min-height: 2.375rem;
    padding: .375rem .75rem;
    font-size: .875rem;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--ls-teal-500);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
}

.form-control::placeholder {
    color: var(--ls-ink-400);
}

.input-label,
.form-label,
.col-form-label {
    color: var(--ls-ink-700);
    font-size: .8125rem;
    font-weight: 500;
    margin-bottom: .375rem;
}

/* A select whose own text is clipped is unusable. Leave room for the caret. */
select.form-control,
select.custom-select {
    padding-right: 2rem;
}

.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single {
    height: 2.375rem;
    border-color: var(--ls-line);
    border-radius: var(--ls-radius-sm);
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4;
    padding-left: .75rem;
    color: var(--ls-ink-900);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.25rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ls-teal-500);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
}

.select2-dropdown {
    border-color: var(--ls-line);
    border-radius: var(--ls-radius-sm);
    box-shadow: var(--ls-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ls-teal-600);
}

/* Colour alone should not carry the "required" meaning. */
.input-label-secondary.text-danger,
label .text-danger {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
    color: var(--ls-ink-900);
    margin-bottom: 0;
}

.table thead th {
    background-color: #fafbfc;
    border-bottom: 1px solid var(--ls-line);
    border-top: 0;
    color: var(--ls-ink-600);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .5rem .875rem;
    white-space: nowrap;
}

.table tbody td {
    border-top: 1px solid var(--ls-line-soft);
    padding: .5rem .875rem;
    vertical-align: middle;
    font-size: .875rem;
}

.table tbody tr:hover {
    background-color: #fafbfc;
}

.table-borderless thead th,
.table-borderless tbody td {
    border: 0;
}

/* Figures only line up when the digits share a width. */
.table td.text-right,
.table th.text-right,
.ls-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* "120,800 LBP" must not wrap between the figure and its currency. */
.table td.text-right,
.ls-num {
    white-space: nowrap;
}

/* A table wider than its card scrolls inside the card, never the page. */
.table-responsive {
    border-radius: 0 0 var(--ls-radius) var(--ls-radius);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .01em;
    padding: .3125rem .5rem;
}

.badge-soft-primary   { background-color: var(--ls-teal-50); color: var(--ls-teal-700); }
.badge-soft-success   { background-color: #ecfdf3;           color: #15803d; }
.badge-soft-danger    { background-color: #fef2f2;           color: #b91c1c; }
.badge-soft-warning   { background-color: #fffbeb;           color: #b45309; }
.badge-soft-info      { background-color: #eff6ff;           color: #1d4ed8; }
.badge-soft-secondary { background-color: #f1f5f9;           color: var(--ls-ink-600); }

.bg-primary { background-color: var(--ls-teal-600) !important; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .125rem;
}

.page-subtitle {
    color: var(--ls-ink-600);
    font-size: .875rem;
    margin-bottom: 0;
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: .25rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--ls-ink-400);
    font-size: .8125rem;
}

.breadcrumb-item.active {
    color: var(--ls-ink-600);
}

/* --------------------------------------------------------------------------
   Pagination, modals, alerts
   -------------------------------------------------------------------------- */

.page-link {
    color: var(--ls-ink-600);
    border-color: var(--ls-line);
}

.page-item.active .page-link {
    background-color: var(--ls-teal-600);
    border-color: var(--ls-teal-600);
    color: #ffffff;
}

.modal-content {
    border: 0;
    border-radius: var(--ls-radius);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .12);
}

.modal-header { border-bottom: 1px solid var(--ls-line-soft); }
.modal-footer { border-top: 1px solid var(--ls-line-soft); }

.alert { border-radius: var(--ls-radius-sm); border: 1px solid transparent; }

hr { border-top-color: var(--ls-line-soft); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.text-primary { color: var(--ls-teal-600) !important; }
.text-muted   { color: var(--ls-ink-400) !important; }
.text-dark    { color: var(--ls-ink-900) !important; }
.title-color  { color: var(--ls-ink-900) !important; }

.border,
.border-top,
.border-bottom,
.border-left,
.border-right { border-color: var(--ls-line) !important; }


/* --------------------------------------------------------------------------
   Visit form
   -------------------------------------------------------------------------- */

/* The procedure rows were laid out on the 12-column grid, which gave the
   category select 8% of the width and clipped its own placeholder. A named
   grid sizes each control to what it has to hold, and the header row shares
   the definition so the two cannot drift out of alignment. */
.title-table-add-test,
#gold-content .row_parent,
#content-to-copy .row_parent {
    display: grid;
    grid-template-columns: 1.5fr 2.4fr 1fr 2.6fr 1.4fr 1fr 4.5rem;
    gap: .5rem;
    align-items: center;
    width: 100%;
    margin: 0;
}

/* Neutralise the Bootstrap column widths still on the children. */
.title-table-add-test > div,
#gold-content .row_parent > div,
#content-to-copy .row_parent > div {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

.title-table-add-test {
    color: var(--ls-ink-600);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ls-line);
    margin-bottom: .5rem;
}

#gold-content .parent_item_list,
#content-to-copy .parent_item_list {
    padding: 0;
}

#gold-content .parent_item_list > div,
#content-to-copy .parent_item_list > div {
    width: 100%;
    padding: 0;
}

/* Separator between the procedure rows and the totals. */
.line {
    height: 1px;
    background: var(--ls-line);
    margin: 1.25rem 0 1rem;
    width: 100%;
}

/* Totals strip: wraps instead of squeezing seven inputs onto one line. */
.list-invoice-visit {
    display: flex;
    flex-wrap: wrap;
}

/* Read-only totals read as output, not as fields awaiting input. */
.list-invoice-visit input[readonly] {
    background: var(--ls-canvas) !important;
    color: var(--ls-ink-600);
    cursor: default;
}

/* Date and visit id sit inline; they still need a visible field. */
.row-group {
    align-items: center;
}

.row-group input {
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-radius-sm);
    padding: .375rem .625rem;
    width: 11rem;
}

/* Matches for an existing patient land here. Empty, it should look like a
   waiting area rather than an input someone forgot to fill in. */
.old-patient-container {
    background: var(--ls-canvas);
    border-style: dashed;
    height: auto;
    min-height: 6.5rem;
    max-height: 12rem;
    overflow-y: auto;
    padding: .5rem;
}

.old-patient-container:empty::before {
    content: attr(data-empty-text);
    color: var(--ls-ink-400);
    font-size: .8125rem;
    display: block;
    padding: .25rem;
}

/* Informational, not an alarm: the previous dashed red read as an error. */
.ls-last-visit {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--ls-teal-50);
    border: 1px solid #b9e6de;
    border-radius: var(--ls-radius);
    color: var(--ls-ink-700);
    font-size: .875rem;
    padding: .5rem .875rem;
}

@media (max-width: 991.98px) {
    .title-table-add-test { display: none; }

    #gold-content .row_parent,
    #content-to-copy .row_parent {
        grid-template-columns: 1fr 1fr;
    }
}

/* An input group in a narrow column wraps its suffix onto a second line,
   which reads as a stray button under the field. */
.input-group {
    flex-wrap: nowrap;
}

.input-group > .form-control {
    min-width: 0;
}

.input-group-text {
    background: var(--ls-canvas);
    border-color: var(--ls-line);
    color: var(--ls-ink-600);
    font-size: .75rem;
    padding: 0 .5rem;
}

/* Native selects draw their caret over the text; reserve room for it. */
select.form-control,
select.custom-select {
    padding-right: 1.5rem;
}



/* "Add doctor" is a helper next to the select, not a success action. */
#add_new_doctor,
#add_new_address {
    background: var(--ls-surface);
    border: 1px solid var(--ls-line);
    color: var(--ls-ink-600);
    flex: none;
}

#add_new_doctor:hover,
#add_new_address:hover {
    background: var(--ls-teal-50);
    border-color: var(--ls-teal-500);
    color: var(--ls-teal-700);
}

/* Age is three fields in a quarter of a row; the browser's number spinners
   cost more width here than they are worth. */
.ls-age-group { gap: .25rem !important; }

.ls-age-group input[type="number"] {
    -moz-appearance: textfield;
    padding-left: .5rem;
    padding-right: .25rem;
}

.ls-age-group input[type="number"]::-webkit-inner-spin-button,
.ls-age-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ls-age-group .input-group-text {
    padding: 0 .375rem;
    font-size: .6875rem;
}

/* --------------------------------------------------------------------------
   Density
   -------------------------------------------------------------------------- */

.ls-stat__value {
    font-size: 1.25rem;
}

.card-header .card-header-title,
.card-header h5,
.card-header h6 {
    font-size: .875rem;
}

.h3, h3 { font-size: 1.25rem; }
.h2, h2 { font-size: 1.375rem; }

.btn {
    padding: .375rem .75rem;
    font-size: .875rem;
}

.btn-sm {
    padding: .25rem .5rem;
    font-size: .8125rem;
}

.content.container-fluid {
    padding-top: 1.25rem;
}

/* Row actions set the height of every table row, so they are sized to the
   text beside them rather than to a default touch target. */
.btn.btn-icon.btn-sm {
    width: 1.75rem;
    height: 1.75rem;
    min-height: 0;
    padding: 0;
    font-size: .875rem;
}

.table td .d-flex.gap-2 {
    gap: .25rem !important;
}

/* --------------------------------------------------------------------------
   Sidebar scrolling
   --------------------------------------------------------------------------
   The panel is fixed to the viewport but its children were laid out at their
   natural height, so on a short window the content ran 113px past the bottom
   with overflow visible: the last nav items were cut off and unreachable.
   The column now flexes -- brand and account stay put, the nav scrolls in
   whatever height is left.
   -------------------------------------------------------------------------- */

.navbar-vertical-aside .navbar-vertical-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.navbar-vertical-aside .navbar-vertical-footer-offset {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
}

.navbar-vertical-aside .navbar-vertical-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: .75rem;
}

/* A full-width scrollbar would cut the navy panel in half. */
.navbar-vertical-aside .navbar-vertical-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.navbar-vertical-aside .navbar-vertical-content::-webkit-scrollbar {
    width: 4px;
}

.navbar-vertical-aside .navbar-vertical-content::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-vertical-aside .navbar-vertical-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 2px;
}

.navbar-vertical-aside .navbar-vertical-content:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
}

/* --------------------------------------------------------------------------
   Collapsed sidebar
   --------------------------------------------------------------------------
   79px of rail. Everything in it has to be centred and nothing may assume the
   full width: the account name and role badge are hidden by the theme helper
   on the markup, and what remains is centred here.
   -------------------------------------------------------------------------- */

.navbar-vertical-aside-mini-mode .navbar-vertical-aside .bg-light,
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .user-profile-section {
    justify-content: center;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-dropdown-account-wrapper {
    justify-content: center;
    gap: 0 !important;
}

/* The block carries Bootstrap's d-md-block, whose !important outranks the
   theme's own mini-mode helper, so the hide has to match it. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .user-profile-section .media-body {
    display: none !important;
}

/* The brand anchor is 75% wide for the full lockup; in the rail it must not
   reserve width it cannot use. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-brand {
    width: auto !important;
}

/* The dropdown caret has nothing to sit beside once the name is hidden. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .dropdown-toggle::after,
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .dropdown-toggle-left-arrow::before {
    display: none;
}

/* The account dropdown is anchored to a 79px rail, so let it out of it. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-dropdown-account {
    min-width: 15rem;
}

/* The blade renders the active section's submenu with an inline display:block
   so it is open on load. In the rail that inline style pins the flyout open
   over the page content, so it is closed here and revealed on hover, which is
   what the collapsed mode is meant to do. :focus-within keeps it reachable
   from the keyboard. */
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-vertical-content .nav-sub {
    display: none !important;
}

.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-vertical-content
    .navbar-vertical-aside-has-menu:hover > .nav-sub,
.navbar-vertical-aside-mini-mode .navbar-vertical-aside .navbar-vertical-content
    .navbar-vertical-aside-has-menu:focus-within > .nav-sub {
    display: block !important;
}