/* =========================================================
   BAGEL STATION OPERATIONS SHELL
   Cashier, Kitchen, Manager, Admin and Employee-facing areas
========================================================= */

.bs-operations-app {
    min-height: 100vh;
    color: var(--bs-ink, #332116);
    background:
        radial-gradient(circle at 8% 5%, rgba(212,162,63,.10), transparent 25%),
        linear-gradient(180deg, #fbf3e3 0%, #f1ddba 100%);
}

.bs-operations-shell {
    display: flex;
    min-height: 100vh;
}

.bs-operations-sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 268px;
    height: 100vh;
    overflow-y: auto;
    color: #fff8e9;
    background:
        linear-gradient(180deg, #2f1e13 0%, #24150d 100%);
    border-right: 3px solid var(--bs-gold-500, #d4a23f);
    box-shadow: 10px 0 28px rgba(47,30,19,.20);
}

.bs-operations-brand {
    display: flex;
    align-items: center;
    min-height: 94px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(212,162,63,.32);
}

.bs-operations-brand a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

.bs-operations-brand svg {
    color: var(--bs-gold-500, #d4a23f);
}

.bs-operations-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.bs-operations-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 70px;
    padding: 10px 26px;
    border-bottom: 1px solid rgba(74,46,29,.16);
    background: rgba(255,248,233,.96);
    box-shadow: 0 8px 22px rgba(71,42,19,.09);
    backdrop-filter: blur(10px);
}

.bs-operations-content {
    flex: 1;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 28px;
}

.bs-operations-footer {
    padding: 14px 28px;
    border-top: 1px solid rgba(74,46,29,.15);
    color: var(--bs-muted, #715744);
    background: rgba(255,248,233,.75);
    font-size: .86rem;
}

.bs-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.bs-page-title {
    margin: 0;
    color: var(--bs-brown-900, #2f1e13);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.bs-page-kicker {
    margin-bottom: 6px;
    color: var(--bs-gold-700, #a8751f);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.bs-operations-app .card,
.bs-operations-app .modal-content,
.bs-operations-app .dropdown-menu {
    border: 1px solid rgba(154,106,36,.28);
    border-radius: 12px;
    background: rgba(255,250,240,.97);
    box-shadow: 0 14px 32px rgba(71,42,19,.12);
}

.bs-operations-app .card-header,
.bs-operations-app .modal-header {
    color: #fff8e9;
    background: var(--bs-brown-800, #3a2417);
    border-bottom: 3px solid var(--bs-gold-500, #d4a23f);
}

.bs-operations-app .card-body,
.bs-operations-app .modal-body {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.bs-operations-app .card-title,
.bs-operations-app .modal-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    letter-spacing: -.01em;
}

.ops-account-menu {
    position: relative;
}

.ops-account-menu::after {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 22px;
    content: "";
}

.ops-account-trigger {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .65rem;
    text-decoration: none;
    white-space: nowrap;
}

.ops-account-dropdown {
    position: fixed !important;
    top: var(--bs-topbar-height, 78px) !important;
    right: 26px !important;
    left: auto !important;
    transform: none !important;
    z-index: 1600;
    min-width: 28rem;
    margin-top: 0;
    padding: .45rem;
}

.ops-account-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border-radius: .5rem;
}

.ops-account-dropdown .dropdown-item i {
    width: 1.1rem;
    color: var(--bs-gold-700, #a8751f);
    text-align: center;
}

/* Bootstrap handles click/touch; these rules add mouse and keyboard hover behavior. */
.ops-account-menu:hover > .dropdown-menu,
.ops-account-menu:focus-within > .dropdown-menu,
.ops-account-dropdown.show {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
}

.bs-operations-app .card-footer,
.bs-operations-app .modal-footer {
    padding: .9rem clamp(1rem, 2vw, 1.35rem);
    border-top: 1px solid rgba(154,106,36,.2);
    background: rgba(244,228,195,.35);
}

.bs-operations-app .modal-content {
    overflow: hidden;
}

.bs-operations-app .modal-header {
    padding: 1rem 1.25rem;
}

.bs-operations-app .modal-backdrop.show {
    opacity: .58;
}

@media (max-width: 575.98px) {
    .bs-operations-app .modal-dialog {
        margin: .75rem;
    }

    .bs-operations-app .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.bs-operations-app .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(212,162,63,.07);
    --bs-table-hover-bg: rgba(212,162,63,.12);
    color: var(--bs-ink, #332116);
}

.bs-operations-app .table thead th {
    color: #fff8e9;
    background: var(--bs-brown-800, #3a2417);
    border-color: rgba(255,255,255,.12);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bs-operations-app .form-control,
.bs-operations-app .form-select {
    min-height: 44px;
    border: 1px solid rgba(74,46,29,.25);
    border-radius: 8px;
    color: var(--bs-ink, #332116);
    background: #fffdf8;
}

.bs-operations-app .form-control:focus,
.bs-operations-app .form-select:focus {
    border-color: var(--bs-gold-700, #a8751f);
    box-shadow: 0 0 0 .22rem rgba(212,162,63,.17);
}

.bs-operations-app .btn-primary {
    border-color: #94651f;
    color: #2b190d;
    background: linear-gradient(180deg, #e2b14d, #c58c2d);
    font-weight: 800;
}

.bs-operations-app .btn-primary:hover,
.bs-operations-app .btn-primary:focus {
    border-color: #805515;
    color: #211208;
    background: linear-gradient(180deg, #edc466, #d49a32);
}

.bs-operations-app .btn-outline-primary {
    border-color: var(--bs-brown-800, #3a2417);
    color: var(--bs-brown-800, #3a2417);
    font-weight: 800;
}

.bs-operations-app .btn-outline-primary:hover {
    color: #fff8e9;
    background: var(--bs-brown-800, #3a2417);
}

.bs-operations-app .badge.bg-primary {
    color: #2b190d !important;
    background: var(--bs-gold-500, #d4a23f) !important;
}

@media (max-width: 980px) {
    .bs-operations-sidebar {
        flex-basis: 220px;
    }

    .bs-operations-content {
        padding: 20px;
    }
}

@media (max-width: 760px) {
    .bs-operations-shell {
        display: block;
    }

    .bs-operations-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 3px solid var(--bs-gold-500, #d4a23f);
    }

    .bs-operations-brand {
        min-height: 72px;
    }

    .bs-operations-topbar {
        position: relative;
    }

    .bs-operations-content {
        padding: 16px;
    }

    .bs-page-header {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   SIDEBAR FLYOUT CORRECTION
   Keep submenus directly to the right without scrolling the sidebar.
========================================================= */

.bs-operations-sidebar {
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.bs-operations-sidebar .nav-group {
    position: relative;
}

.bs-operations-sidebar .nav-flyout {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    min-width: 250px;
    max-width: min(340px, calc(100vw - 300px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: .65rem 0;
    border: 1px solid rgba(212,162,63,.38);
    border-left: 3px solid var(--bs-gold-500, #d4a23f);
    border-radius: 0 10px 10px 0;
    color: #fff8e9;
    background:
        linear-gradient(180deg, #3a2417 0%, #2f1e13 100%);
    box-shadow: 12px 12px 30px rgba(0,0,0,.30);
    z-index: 2000;
}

.bs-operations-sidebar .nav-group.is-flyout-open > .nav-flyout {
    display: block;
}

.bs-operations-sidebar .nav-group:hover > .nav-main-item,
.bs-operations-sidebar .nav-group:focus-within > .nav-main-item,
.bs-operations-sidebar .nav-group.is-flyout-open > .nav-main-item {
    color: #fff;
    background: rgba(212,162,63,.14);
    border-left-color: var(--bs-gold-500, #d4a23f);
}

.bs-operations-sidebar .nav-flyout h6 {
    margin: 0 0 .4rem;
    padding: .2rem 1rem .55rem;
    border-bottom: 1px solid rgba(212,162,63,.22);
    color: var(--bs-gold-300, #e3bc69);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.bs-operations-sidebar .nav-flyout .nav-link {
    display: block;
    padding: .62rem 1rem;
    color: #fff8e9;
    white-space: nowrap;
}

.equipment-image-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.equipment-image-card { overflow:hidden; border:1px solid rgba(74,46,29,.18); border-radius:10px; background:#fffaf0; }
.equipment-image-preview { position:relative; display:block; width:100%; height:150px; padding:0; overflow:hidden; border:0; background:#eee4d4; cursor:zoom-in; }
.equipment-image-preview img { width:100%; height:100%; object-fit:cover; transition:transform .18s ease; }
.equipment-image-preview:hover img,.equipment-image-preview:focus-visible img { transform:scale(1.04); }
.equipment-image-preview:focus-visible { outline:3px solid var(--bs-gold-500,#d4a23f); outline-offset:-3px; }
.equipment-image-primary { position:absolute; top:.5rem; left:.5rem; }
.equipment-image-modal-body { display:flex; align-items:center; justify-content:center; min-height:240px; padding:.5rem; background:#181410; }
.equipment-image-modal-body img { display:block; max-width:100%; max-height:80vh; object-fit:contain; }
.equipment-product-website-frame { display:block; width:100%; height:min(75vh,850px); border:0; background:#fff; }
.bs-operations-app > #equipmentImageModal,
.bs-operations-app > #equipmentProductWebsiteModal,
.bs-operations-app > #editEquipmentImageModal,
.bs-operations-app > #editEquipmentProductWebsiteModal { z-index:11050; }
.bs-operations-app.equipment-modal-open > .modal-backdrop { z-index:11040; }

.bs-operations-sidebar .nav-flyout .nav-link:hover,
.bs-operations-sidebar .nav-flyout .nav-link:focus {
    color: #fff;
    background: rgba(212,162,63,.16);
}

/* Disable the older pure-CSS hover display. JavaScript controls placement. */
.bs-operations-sidebar .nav-group:hover .nav-flyout,
.bs-operations-sidebar .nav-group:focus-within .nav-flyout {
    display: none;
}

.bs-operations-sidebar .nav-group.is-flyout-open > .nav-flyout {
    display: block;
}

@media (max-width: 760px) {
    .bs-operations-sidebar {
        overflow: visible;
    }

    .bs-operations-sidebar .nav-flyout {
        position: static;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        border: 0;
        border-top: 1px solid rgba(212,162,63,.25);
        border-radius: 0;
        box-shadow: none;
    }
}


/* =========================================================
   PHASE 4B — BRANDED OPERATIONAL SHELL
========================================================= */

:root {
    --bs-sidebar-width: 340px;
    --bs-sidebar-collapsed-width: 88px;
    --bs-topbar-height: 78px;
}

.bs-operations-sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--bs-sidebar-width);
    width: var(--bs-sidebar-width);
    min-width: var(--bs-sidebar-width);
    max-width: var(--bs-sidebar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    color: #fff8e9;
    background:
        radial-gradient(circle at 20% 0%, rgba(212,162,63,.15), transparent 22%),
        linear-gradient(180deg, #2f1e13 0%, #24150d 100%);
    border-right: 3px solid var(--bs-gold-500, #d4a23f);
    box-shadow: 12px 0 34px rgba(47,30,19,.24);
}

.bs-operations-brand {
    min-height: 118px;
    padding: 22px 24px;
    align-items: center;
    border-bottom: 1px solid rgba(212,162,63,.30);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}

.bs-brand-lockup {
    width: 100%;
}

.bs-operations-brand a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    color: #fff8e9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.46rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.bs-operations-brand svg,
.bs-operations-brand img {
    flex: 0 0 auto;
}


.bs-operations-sidebar .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 12px;
}

.bs-operations-sidebar .nav-group {
    position: relative;
    margin-bottom: 6px;
}

.bs-operations-sidebar .nav-main-item,
.bs-operations-sidebar .sidebar-nav > .nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 9px;
    color: rgba(255,248,233,.88);
    background: transparent;
    font-size: .94rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.bs-operations-sidebar .nav-main-item svg,
.bs-operations-sidebar .sidebar-nav > .nav-link svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--bs-gold-500, #d4a23f);
}

.bs-operations-sidebar .nav-main-item:hover,
.bs-operations-sidebar .nav-main-item:focus,
.bs-operations-sidebar .sidebar-nav > .nav-link:hover,
.bs-operations-sidebar .sidebar-nav > .nav-link:focus,
.bs-operations-sidebar .nav-link.active {
    color: #fff;
    background: rgba(212,162,63,.13);
    border-color: rgba(212,162,63,.26);
    border-left-color: var(--bs-gold-500, #d4a23f);
    transform: translateX(2px);
}

.bs-operations-sidebar .nav-caret {
    margin-left: auto;
    color: var(--bs-gold-300, #e3bc69);
    transition: transform .18s ease;
}

.bs-breadcrumb-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 1rem;
}

.bs-breadcrumb-row .bs-admin-breadcrumbs {
    min-width: 0;
    margin-bottom: 0;
}

.bs-breadcrumb-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    max-width: 100%;
    margin-left: auto;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.bs-breadcrumb-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.bs-admin-breadcrumbs {
    margin-bottom: 1rem;
    font-size: .82rem;
    font-weight: 700;
}

@media(max-width:700px){.bs-breadcrumb-row{align-items:flex-start;flex-wrap:wrap}.bs-breadcrumb-row .bs-breadcrumb-actions{margin-left:auto}}

.bs-admin-breadcrumbs .breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-neutral-400, #9b9488);
    --bs-breadcrumb-item-active-color: var(--bs-neutral-600, #625e57);
}

.bs-admin-breadcrumbs a {
    color: var(--bs-brown-700, #674226);
    text-decoration: none;
}

.bs-admin-breadcrumbs a:hover,
.bs-admin-breadcrumbs a:focus-visible {
    color: var(--bs-gold-700, #9b6d19);
    text-decoration: underline;
}

.bs-navigation-hub { display: grid; gap: 20px; }
.bs-navigation-hub__hero { padding: 24px; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#2f1e13,#765033); box-shadow: 0 14px 34px rgba(47,30,19,.18); }
.bs-navigation-hub__hero > span { color: #f2d18b; font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.bs-navigation-hub__hero h1 { margin: 4px 0 6px; color: #fff; }
.bs-navigation-hub__hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.84); }
.bs-navigation-hub__groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.bs-navigation-hub__group { padding: 18px; border: 1px solid rgba(154,106,36,.22); border-radius: 15px; background: #fffdf8; box-shadow: 0 9px 22px rgba(74,46,29,.07); }
.bs-navigation-hub__group h2 { margin: 0 0 12px; color: #4a2e1d; font-size: 1.05rem; }
.bs-navigation-hub__links { display: grid; gap: 8px; }
.bs-navigation-hub__links a { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid rgba(154,106,36,.18); border-radius: 9px; color: #4a2e1d; background: #fff8eb; text-decoration: none; }
.bs-navigation-hub__links a:hover,.bs-navigation-hub__links a:focus-visible { border-color: #a8751f; background: #f7e5bd; }
.bs-navigation-hub__links a span { color: #a8751f; font-size: 1.2rem; }
@media(max-width:800px){.bs-navigation-hub__groups{grid-template-columns:1fr}}

.bs-operations-sidebar .nav-group.is-flyout-open .nav-caret {
    transform: rotate(90deg);
}



.bs-operations-main {
    flex: 1 1 auto;
    min-width: 0;
    width: calc(100% - var(--bs-sidebar-width));
}

.bs-operations-topbar {
    min-height: var(--bs-topbar-height);
    padding: 10px 26px;
    justify-content: space-between;
    gap: 20px;
}

.bs-topbar-title {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.05;
}

.bs-topbar-kicker {
    margin-bottom: 4px;
    color: var(--bs-gold-700, #a8751f);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bs-topbar-title strong {
    overflow: hidden;
    color: var(--bs-brown-900, #2f1e13);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.bs-operations-content {
    max-width: 1800px;
    padding: 30px;
}

.bs-operations-app .card {
    overflow: hidden;
    border-radius: 14px;
}

.bs-operations-app .card-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    letter-spacing: .02em;
}

.bs-operations-app .btn {
    min-height: 42px;
    border-radius: 8px;
}

.bs-operations-app .btn-sm {
    min-height: 34px;
}

.bs-operations-app .table-responsive {
    border: 1px solid rgba(154,106,36,.20);
    border-radius: 10px;
    background: rgba(255,250,240,.90);
}

.bs-operations-app .alert {
    border-radius: 10px;
    border-width: 1px;
}

.bs-operations-app .pagination .page-link {
    color: var(--bs-brown-800, #3a2417);
    border-color: rgba(74,46,29,.18);
    background: #fffaf0;
}

.bs-operations-app .pagination .page-item.active .page-link {
    color: #2b190d;
    border-color: var(--bs-gold-700, #a8751f);
    background: var(--bs-gold-500, #d4a23f);
}

/* Flyouts start exactly at the full branded sidebar width. */
.bs-operations-sidebar .nav-flyout {
    min-width: 280px;
    max-width: min(380px, calc(100vw - var(--bs-sidebar-width) - 24px));
    border-radius: 0 12px 12px 0;
}

/* Wide desktops get additional content breathing room. */
@media (min-width: 1500px) {
    .bs-operations-content {
        padding: 34px 40px;
    }
}

@media (max-width: 1180px) {
    :root {
        --bs-sidebar-width: 300px;
    }

    .bs-operations-brand a {
        font-size: 1.28rem;
    }

    .bs-brand-subtitle {
        padding-left: 38px;
    }
}

@media (max-width: 900px) {
    :root {
        --bs-sidebar-width: 250px;
    }

    .bs-operations-brand {
        min-height: 96px;
        padding: 18px;
    }

    .bs-operations-brand a {
        font-size: 1.05rem;
    }

    .bs-brand-subtitle {
        display: none;
    }

    .bs-operations-sidebar .nav-main-item,
    .bs-operations-sidebar .sidebar-nav > .nav-link {
        padding-inline: 12px;
    }
}

@media (max-width: 760px) {
    :root {
        --bs-sidebar-width: 100%;
    }

    .bs-operations-sidebar {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
    }

    .bs-operations-main {
        width: 100%;
    }

    .bs-operations-topbar {
        position: relative;
        align-items: flex-start;
        flex-direction: column;
    }

    .bs-topbar-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* =========================================================
   SIDEBAR VERTICAL AUTO-WIDTH
   Width is measured from the widest visible menu description.
========================================================= */

:root {
    --bs-sidebar-width: 340px;
}

/* Keep every navigation entry in one vertical column. */
.bs-operations-sidebar .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
}

.bs-operations-sidebar .sidebar-nav > *,
.bs-operations-sidebar .nav-group {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* The measured CSS variable controls the whole rail and content offset. */
.bs-operations-sidebar {
    flex: 0 0 var(--bs-sidebar-width) !important;
    width: var(--bs-sidebar-width) !important;
    min-width: var(--bs-sidebar-width) !important;
    max-width: var(--bs-sidebar-width) !important;
}

/* Never wrap the brand or any main navigation description. */
.bs-operations-brand,
.bs-operations-brand a,
.bs-operations-sidebar .nav-main-item,
.bs-operations-sidebar .sidebar-nav > .nav-link {
    white-space: nowrap !important;
}

.bs-operations-sidebar .nav-main-item,
.bs-operations-sidebar .sidebar-nav > .nav-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100%;
    min-width: max-content;
}

.bs-operations-sidebar .nav-main-item > span:not(.nav-caret),
.bs-operations-sidebar .sidebar-nav > .nav-link > span:not(.nav-caret) {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.bs-operations-main {
    width: calc(100% - var(--bs-sidebar-width)) !important;
}

/* Flyouts begin precisely where the dynamically-sized sidebar ends. */
.bs-operations-sidebar .nav-flyout {
    left: var(--bs-sidebar-width);
}

/* Desktop width guardrails. The script chooses a value inside this range. */
@media (min-width: 761px) {
    .bs-operations-sidebar {
        --bs-sidebar-min-width: 300px;
        --bs-sidebar-max-width: 460px;
    }
}

/* Mobile returns to a full-width stacked navigation. */
@media (max-width: 760px) {
    :root {
        --bs-sidebar-width: 100%;
    }

    .bs-operations-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .bs-operations-main {
        width: 100% !important;
    }

    .bs-operations-sidebar .nav-main-item,
    .bs-operations-sidebar .sidebar-nav > .nav-link {
        min-width: 0;
        white-space: normal !important;
    }
}


/* =========================================================
   AUTHORITATIVE VERTICAL SIDEBAR LAYOUT
========================================================= */

.bs-operations-sidebar {
    display: flex !important;
    flex-direction: column !important;
}

.bs-operations-sidebar .sidebar-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 12px !important;
}

.bs-operations-sidebar .sidebar-nav > .nav-group {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 0 6px !important;
}

.bs-operations-sidebar .nav-main-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 54px !important;
    white-space: nowrap !important;
}

.bs-operations-sidebar .nav-main-item > span:not(.nav-caret) {
    display: block !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}

.bs-operations-sidebar .nav-flyout {
    flex: none !important;
}

/* Prevent Bootstrap or legacy rules from turning the navigation horizontal. */
.bs-operations-sidebar .sidebar-nav,
.bs-operations-sidebar .sidebar-nav.nav,
.bs-operations-sidebar .sidebar-nav.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0;
}

@media (max-width: 760px) {
    .bs-operations-sidebar .sidebar-nav {
        flex-direction: column !important;
    }

    .bs-operations-sidebar .sidebar-nav > .nav-group {
        width: 100% !important;
    }
}


/* =========================================================
   MINIMUM-WIDTH SIDEBAR
   The rail is only as wide as its widest nonwrapping label.
========================================================= */

:root {
    --bs-sidebar-width: 260px;
}

@media (min-width: 761px) {
    .bs-operations-sidebar {
        --bs-sidebar-min-width: 230px;
        --bs-sidebar-max-width: 420px;
    }
}

/* Eliminate unnecessary horizontal space inside the rail. */
.bs-operations-brand {
    padding-right: 16px !important;
    padding-left: 16px !important;
}

.bs-operations-sidebar .sidebar-nav {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.bs-operations-sidebar .nav-main-item,
.bs-operations-sidebar .sidebar-nav > .nav-link {
    gap: 10px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

/* Let the text determine the required width without wrapping. */
.bs-operations-brand a,
.bs-operations-sidebar .nav-main-item,
.bs-operations-sidebar .sidebar-nav > .nav-link {
    width: max-content;
    min-width: 100%;
    max-width: none;
    white-space: nowrap !important;
}

.bs-operations-sidebar .nav-main-item > span:not(.nav-caret),
.bs-operations-sidebar .sidebar-nav > .nav-link > span:not(.nav-caret) {
    flex: 0 0 auto;
    min-width: max-content !important;
    white-space: nowrap !important;
}

/* Keep the caret tight against the text rather than reserving a large gap. */
.bs-operations-sidebar .nav-caret {
    margin-left: 8px !important;
}

/* The dynamically measured value remains authoritative. */
.bs-operations-sidebar {
    flex-basis: var(--bs-sidebar-width) !important;
    width: var(--bs-sidebar-width) !important;
    min-width: var(--bs-sidebar-width) !important;
    max-width: var(--bs-sidebar-width) !important;
}

.bs-operations-main {
    width: calc(100% - var(--bs-sidebar-width)) !important;
}


/* =========================================================
   CLEAN SIDEBAR BRANDING
========================================================= */

.bs-operations-brand {
    min-height: 86px !important;
    padding: 16px !important;
    border-bottom: 2px solid rgba(212,162,63,.40) !important;
}

.bs-brand-lockup {
    width: auto;
    max-width: 100%;
}

.bs-operations-brand a {
    gap: 12px !important;
    width: max-content !important;
    min-width: 0 !important;
    font-size: 1.28rem !important;
    letter-spacing: .06em !important;
}

.bs-operations-sidebar .sidebar-nav {
    flex: 1 1 auto;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* The menu now uses all remaining sidebar space. */
.bs-operations-sidebar {
    justify-content: flex-start;
}


/* =========================================================
   SIDEBAR FLYOUT TOP-LAYER FIX
========================================================= */

/*
 * Give the sidebar its own high-priority stacking context. A flyout cannot
 * escape a lower ancestor stacking context merely by assigning itself a large
 * z-index.
 */
.bs-operations-sidebar {
    z-index: 10000 !important;
    isolation: isolate;
}

/* Keep the application content and sticky top bar below sidebar flyouts. */
.bs-operations-main {
    position: relative;
    z-index: 1;
}

.bs-operations-topbar {
    z-index: 100 !important;
}

.bs-operations-content,
.bs-operations-footer {
    position: relative;
    z-index: 1;
}

/* Force every submenu above cards, grids, dropdowns and sticky page controls. */
.bs-operations-sidebar .nav-flyout {
    z-index: 10020 !important;
    isolation: isolate;
}

/* Keep the selected parent item above the sidebar background. */
.bs-operations-sidebar .nav-group.is-flyout-open {
    z-index: 10010;
}

/*
 * Some third-party grids and controls create their own high z-index layers.
 * Normalize those layers beneath the navigation flyout.
 */
.bs-operations-main .dropdown-menu,
.bs-operations-main .popover,
.bs-operations-main .tooltip,
.bs-operations-main .dx-overlay-wrapper,
.bs-operations-main .dx-popup-wrapper,
.bs-operations-main .dx-dropdowneditor-overlay,
.bs-operations-main .dataTables_wrapper {
    z-index: 1500;
}

/* Mobile submenus are inline and do not need the desktop overlay stack. */
@media (max-width: 760px) {
    .bs-operations-sidebar {
        z-index: auto !important;
        isolation: auto;
    }

    .bs-operations-sidebar .nav-flyout,
    .bs-operations-sidebar .nav-group.is-flyout-open {
        z-index: auto !important;
        isolation: auto;
    }
}

/* Enterprise navigation hierarchy */
.bs-operations-sidebar .nav-main-item svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bs-operations-sidebar .nav-caret { margin-left: auto; font-size: 1.35rem; line-height: 1; opacity: .65; transition: transform .18s ease, opacity .18s ease; }
.bs-operations-sidebar .nav-group.is-flyout-open .nav-caret { transform: translateX(3px); opacity: 1; }
.bs-operations-sidebar .nav-flyout--wide { width: min(660px, calc(100vw - var(--bs-sidebar-width, 340px) - 24px)); max-width: 660px; }
.bs-operations-sidebar .nav-flyout--two-column { width: min(540px, calc(100vw - var(--bs-sidebar-width, 340px) - 24px)); max-width: 540px; }
.bs-operations-sidebar .nav-flyout-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .5rem; padding: .15rem .65rem .35rem; }
.bs-operations-sidebar .nav-flyout-links .nav-link { white-space: normal; border-radius: 7px; }
.bs-operations-sidebar .nav-flyout-grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: .65rem; padding: .25rem .75rem .75rem; }
.bs-operations-sidebar .nav-flyout-grid--category-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bs-operations-sidebar .nav-flyout-grid--operations {
    grid-template-columns: repeat(2,minmax(230px,1fr));
    grid-template-areas:
        "menu equipment"
        "inventory inventory";
}
.bs-operations-sidebar .nav-flyout-grid--operations > .nav-flyout-section--menu-configuration { grid-area: menu; }
.bs-operations-sidebar .nav-flyout-grid--operations > .nav-flyout-section--equipment { grid-area: equipment; }
.bs-operations-sidebar .nav-flyout-grid--operations > .nav-flyout-section--inventory { grid-area: inventory; }
.bs-operations-sidebar .nav-flyout-grid--administration { grid-template-columns: minmax(0,1.4fr) minmax(190px,.8fr); align-items: start; align-content: start; }
.bs-operations-sidebar .nav-flyout-grid--administration > .nav-flyout-section { align-self: start; justify-self: stretch; margin-top: 0; }
.bs-operations-sidebar .nav-flyout-column { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.bs-operations-sidebar .nav-flyout-grid--category-columns .nav-flyout-section { width: 100%; min-width: 0; }
.bs-operations-sidebar .nav-flyout-grid--category-columns .nav-link { white-space: normal; }
.bs-operations-sidebar .nav-section-links--two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: min-content; align-items: start; align-content: start; gap: .1rem .35rem; }
.bs-operations-sidebar .nav-section-links--two-column .nav-link { align-self: start; width: 100%; white-space: normal; border-radius: 7px; }
.bs-operations-sidebar .nav-flyout-section { padding: .45rem; border: 1px solid rgba(212,162,63,.14); border-radius: 9px; background: rgba(255,255,255,.025); }
.bs-operations-sidebar .nav-section-label { display: block; padding: .25rem .55rem .4rem; color: var(--bs-gold-300,#e3bc69); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1100px) { .bs-operations-sidebar .nav-flyout--wide { width: min(520px, calc(100vw - var(--bs-sidebar-width,300px) - 20px)); } .bs-operations-sidebar .nav-flyout-grid { grid-template-columns: 1fr; } .bs-operations-sidebar .nav-flyout-grid--category-columns,.bs-operations-sidebar .nav-flyout-grid--operations { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .bs-operations-sidebar .nav-flyout-grid { display:block; padding:0; } .bs-operations-sidebar .nav-flyout-section { border:0; border-radius:0; background:transparent; } .bs-operations-sidebar .nav-flyout-links { grid-template-columns:repeat(2,minmax(0,1fr)); padding:.25rem; } .ops-account-dropdown { right:.5rem !important; min-width:min(28rem,calc(100vw - 1rem)); } }

/* =========================================================
   ENTERPRISE APPLICATION SHELL + ROUTE-AWARE PAGE HERO
========================================================= */
.ops-brand-logo { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
.bs-operations-brand a > span { display:flex; flex-direction:column; line-height:1.05; }
.bs-operations-brand a strong { font-size:1.02rem; letter-spacing:.04em; }
.bs-operations-brand a small { margin-top:5px; color:#d9b766; font:700 .58rem/1.2 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }

.bs-operations-topbar { justify-content:space-between; gap:22px; }
.ops-topbar-search { display:flex; align-items:center; gap:10px; flex:1; max-width:620px; min-height:42px; padding:0 14px; border:1px solid rgba(74,46,29,.18); border-radius:999px; background:#fffdf8; color:#8b725f; }
.ops-topbar-search input { width:100%; border:0; outline:0; background:transparent; color:#332116; }
.ops-topbar-tools { display:flex; align-items:center; gap:14px; }
.ops-icon-button { position:relative; width:42px; height:42px; border:1px solid rgba(74,46,29,.17); border-radius:50%; background:#fffaf0; color:#3a2417; }
.ops-notification-dot { position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:#c58c2d; box-shadow:0 0 0 2px #fffaf0; }

.ops-page-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,34%); min-height:245px; overflow:hidden; margin-bottom:0; border:1px solid rgba(154,106,36,.32); border-radius:18px 18px 0 0; color:#fff9ec; background:linear-gradient(118deg,#28170e 0%,#4a2e1d 58%,#6f4b27 100%); box-shadow:0 18px 42px rgba(66,38,20,.18); isolation:isolate; }
.ops-page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(90deg,rgba(35,19,11,.98) 0%,rgba(48,28,17,.91) 48%,rgba(48,28,17,.42) 100%),var(--ops-hero-image); background-size:cover; background-position:center; opacity:.55; }
.ops-page-hero__overlay { position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 20% 10%,rgba(225,178,78,.20),transparent 35%),linear-gradient(135deg,transparent 55%,rgba(212,162,63,.18)); }
.ops-page-hero__content { display:flex; flex-direction:column; justify-content:center; padding:30px 34px; z-index:1; }
.ops-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:22px; color:#e7c982; font-size:.72rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
.ops-breadcrumb a { color:#fff2ca; text-decoration:none; }
.ops-breadcrumb strong { color:#fff; }
.ops-page-hero__heading { display:flex; align-items:flex-start; gap:18px; }
.ops-page-hero__icon { display:grid; flex:0 0 58px; width:58px; height:58px; place-items:center; border:1px solid rgba(255,232,170,.45); border-radius:15px; color:#2b190d; background:linear-gradient(145deg,#f2c969,#c98e2d); box-shadow:0 10px 24px rgba(0,0,0,.25); font-size:1.65rem; }
.ops-page-hero__kicker { margin-bottom:6px; color:#e7c982; font-size:.72rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.ops-page-hero h1 { margin:0; color:#fffaf0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,3.4vw,3.45rem); font-weight:900; line-height:.98; letter-spacing:-.025em; text-shadow:0 4px 16px rgba(0,0,0,.30); }
.ops-page-hero p { max-width:760px; margin:14px 0 0; color:#f6e8ca; font-size:1rem; line-height:1.55; }
.ops-page-hero__art { position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.ops-page-hero__art::before { content:""; position:absolute; inset:12% 8% -18%; border-radius:50% 50% 0 0; background:radial-gradient(circle,rgba(230,187,92,.25),transparent 65%); }
.ops-page-hero__art img { position:relative; width:92%; height:90%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 16px 20px rgba(0,0,0,.38)); }
.ops-page-hero--compact { min-height:190px; }
.ops-page-hero--compact .ops-page-hero__content { padding-block:24px; }

.ops-command-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; margin-bottom:26px; padding:10px 16px 10px 24px; border:1px solid rgba(154,106,36,.27); border-top:0; border-radius:0 0 16px 16px; background:rgba(255,250,240,.98); box-shadow:0 13px 30px rgba(71,42,19,.10); }
.ops-command-bar__context { display:flex; align-items:baseline; gap:10px; min-width:0; }
.ops-command-bar__module { color:#9b6b20; font-size:.68rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.ops-command-bar__page { overflow:hidden; color:#3a2417; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.ops-command-bar__actions { display:flex; align-items:center; gap:7px; }
.ops-command { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 13px; border:1px solid rgba(74,46,29,.18); border-radius:9px; color:#3a2417; background:#fffdf8; font-size:.78rem; font-weight:850; text-decoration:none; cursor:pointer; }
.ops-command:hover { color:#2a180d; border-color:#b98228; background:#fff4d8; }
.ops-command--primary { border-color:#9a671b; color:#26170c; background:linear-gradient(180deg,#e6b852,#c98e2d); }
.ops-page-body { min-width:0; }
.bs-operations-footer {
  position:fixed;
  right:0;
  bottom:0;
  left:var(--bs-sidebar-width,260px);
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:34px;
  padding:6px 28px;
  flex-wrap:wrap;
  border-top:1px solid rgba(74,46,29,.2);
  background:#f8ead0;
  box-shadow:0 -6px 18px rgba(71,42,19,.1);
}
.bs-operations-content { padding-bottom:54px !important; }
.bs-operations-footer a { color:#79531e; }
.bs-app-version { font-family:monospace; font-size:.78rem; opacity:.65; }

@media print {
  .bs-operations-sidebar,.bs-operations-topbar,.ops-command-bar,.bs-operations-footer { display:none !important; }
  .bs-operations-content { max-width:none; padding:0; }
  .ops-page-hero { min-height:150px; box-shadow:none; }
}
@media (max-width:980px) {
  .ops-page-hero { grid-template-columns:1fr 220px; }
  .ops-topbar-search { max-width:420px; }
}
@media (max-width:760px) {
  .bs-operations-footer { left:0; min-height:42px; padding:6px 12px; gap:4px 12px; }
  .bs-operations-content { padding-bottom:62px !important; }
  .ops-topbar-search { display:none; }
  .ops-page-hero { display:block; min-height:0; }
  .ops-page-hero__art { display:none; }
  .ops-page-hero__content { padding:24px 20px; }
  .ops-page-hero__heading { gap:12px; }
  .ops-page-hero__icon { flex-basis:46px; width:46px; height:46px; font-size:1.2rem; }
  .ops-command-bar { align-items:stretch; flex-direction:column; padding:12px; }
  .ops-command-bar__actions { overflow-x:auto; }
  .ops-command { flex:0 0 auto; }
}


/* Standardize every submenu section: top-align each column and keep
   normal compact line spacing between all submenu options. */
.bs-operations-sidebar .nav-flyout-grid {
    align-items: start;
}

.bs-operations-sidebar .nav-flyout-section {
    align-self: start;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
}

.bs-operations-sidebar .nav-flyout .nav-link {
    margin: 0;
    min-height: 0;
    padding-top: .48rem;
    padding-bottom: .48rem;
    line-height: 1.25;
}

/* The desktop rail is measured from its longest nonwrapping top-level menu
   item. The logo fills that resulting width and no longer influences it. */
:root {
    --bs-sidebar-width: 190px;
}

@media (min-width: 761px) {
    .bs-operations-sidebar {
        --bs-sidebar-min-width: 150px;
        --bs-sidebar-max-width: 320px;
    }

    .bs-operations-brand {
        min-height: 0 !important;
        padding: 0 !important;
    }

    .bs-operations-brand a {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        line-height: 0 !important;
    }

    .bs-operations-brand .ops-brand-logo {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 760px) {
    :root {
        --bs-sidebar-width: 100%;
    }

    .bs-operations-brand a {
        justify-content: center;
        width: 100% !important;
    }

    .bs-operations-brand .ops-brand-logo {
        width: min(240px, 72vw);
        height: auto;
    }
}