:root { --optimat-control-bg: rgba(255,255,255,.92); --optimat-control-border: rgba(148,163,184,.24); }
html[data-bs-theme="dark"] { --optimat-control-bg: rgba(15,23,42,.92); --optimat-control-border: rgba(148,163,184,.18); }
.app-ui-controls{display:flex;align-items:center;gap:.5rem}
.app-ui-controls-floating{position:fixed;top:1rem;inset-inline-end:1rem;z-index:1055;padding:.4rem;border-radius:999px;background:var(--optimat-control-bg);backdrop-filter:blur(10px);border:1px solid var(--optimat-control-border);box-shadow:0 .75rem 2rem rgba(15,23,42,.08)}
.icon-btn{border-radius:14px}
html[data-bs-theme="dark"] body{background-color:#0f172a;color:#e5e7eb}
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .app-card,
html[data-bs-theme="dark"] .login-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .plan-card,
html[data-bs-theme="dark"] .staff-sidebar,
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .dropdown-menu {background-color:#111827 !important;color:#e5e7eb !important;border-color:rgba(148,163,184,.18) !important}
html[data-bs-theme="dark"] .table{--bs-table-bg:transparent;--bs-table-color:#e5e7eb;--bs-table-border-color:rgba(148,163,184,.16)}
html[data-bs-theme="dark"] .text-muted,html[data-bs-theme="dark"] .small.text-muted{color:#94a3b8 !important}
html[data-bs-theme="dark"] .btn-light,html[data-bs-theme="dark"] .bg-light,html[data-bs-theme="dark"] .bg-light-subtle,html[data-bs-theme="dark"] .table thead th{background-color:#1f2937 !important;color:#e5e7eb !important}
html[data-bs-theme="dark"] .form-control,html[data-bs-theme="dark"] .form-select,html[data-bs-theme="dark"] .input-group-text{background-color:#0f172a;color:#e5e7eb;border-color:#334155}
html[data-bs-theme="dark"] .nav-link.active, html[data-bs-theme="dark"] .nav-link:hover{background-color:#1e293b;color:#93c5fd}
html[data-bs-theme="dark"] .dropdown-item{color:#e5e7eb}
html[data-bs-theme="dark"] .dropdown-item:hover{background-color:#1e293b;color:#fff}
html[data-bs-theme="dark"] .app-topbar,html[data-bs-theme="dark"] .app-sidebar{background-color:#111827 !important}
html[data-bs-theme="dark"] .sidebar-nav-link,html[data-bs-theme="dark"] .sidebar-group-toggle{color:#e5e7eb !important}
html[data-bs-theme="dark"] .sidebar-nav-link.active,html[data-bs-theme="dark"] .sidebar-group-toggle.active-group{background-color:#1e293b !important;color:#93c5fd !important}
html[data-bs-theme="dark"] .topbar-business-chip,html[data-bs-theme="dark"] .readonly-box,html[data-bs-theme="dark"] .plan-mini{background-color:#0f172a !important;border-color:#334155 !important}


@media (min-width: 992px) {
  html[dir="ltr"] .app-sidebar {
    right: auto !important;
    left: 0 !important;
  }

  html[dir="ltr"] .app-main {
    margin-right: 0 !important;
    margin-left: var(--sidebar-width) !important;
  }

  html[dir="ltr"] body.sidebar-collapsed .app-main {
    margin-right: 0 !important;
    margin-left: var(--sidebar-collapsed-width) !important;
  }
}

html[dir="ltr"] .dropdown-menu-end {
  --bs-position: end;
}

html[dir="ltr"] .sidebar-nav-link.active::before {
  right: auto;
  left: .35rem;
}


/* OPTIMAT global dark-mode and theme control hardening v2.8 */
.app-ui-controls,
.app-ui-controls * {
  pointer-events: auto;
}
.app-ui-controls {
  position: relative;
  z-index: 1600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.app-ui-controls .dropdown-menu {
  z-index: 1700;
}
html[data-bs-theme="dark"] {
  --bs-body-bg: #0b1220;
  --bs-body-color: #e5e7eb;
  --bs-secondary-color: #a7b4c8;
  --bs-tertiary-bg: #111827;
  --bs-border-color: #334155;
  --optimat-surface: #111827;
  --optimat-surface-2: #0f172a;
  --optimat-border: #334155;
  --optimat-text: #e5e7eb;
  --optimat-muted: #a7b4c8;
}
html[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 24%),
    radial-gradient(circle at bottom left, rgba(14,165,233,.10), transparent 20%),
    #0b1220 !important;
  color: #e5e7eb !important;
}
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .app-card,
html[data-bs-theme="dark"] .customer-card,
html[data-bs-theme="dark"] .customer-profile-card,
html[data-bs-theme="dark"] .customers-panel,
html[data-bs-theme="dark"] .app-page-header,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .list-group-item {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .app-topbar,
html[data-bs-theme="dark"] .app-sidebar,
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .topbar-brand-chip,
html[data-bs-theme="dark"] .topbar-business-chip,
html[data-bs-theme="dark"] .topbar-clock-chip,
html[data-bs-theme="dark"] .topbar-quick-btn,
html[data-bs-theme="dark"] .readonly-box,
html[data-bs-theme="dark"] .bg-white {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .fw-bold.text-dark,
html[data-bs-theme="dark"] .business-title,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 {
  color: #f8fafc !important;
}
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .small.text-muted,
html[data-bs-theme="dark"] .app-page-subtitle,
html[data-bs-theme="dark"] .business-subtitle {
  color: #a7b4c8 !important;
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] input {
  background-color: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .form-control::placeholder {
  color: #7f8ea3 !important;
}
html[data-bs-theme="dark"] .table {
  --bs-table-bg: #111827;
  --bs-table-color: #e5e7eb;
  --bs-table-border-color: #334155;
  --bs-table-striped-bg: #0f172a;
  --bs-table-striped-color: #e5e7eb;
  --bs-table-hover-bg: #1e293b;
  --bs-table-hover-color: #ffffff;
}
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-light-subtle,
html[data-bs-theme="dark"] .btn-light {
  background-color: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .dropdown-item {
  color: #e5e7eb !important;
}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus,
html[data-bs-theme="dark"] .dropdown-item.active {
  background-color: #1e293b !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .nav-tabs,
html[data-bs-theme="dark"] .nav-pills {
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .nav-link {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .nav-link.active,
html[data-bs-theme="dark"] .nav-link:hover,
html[data-bs-theme="dark"] .sidebar-nav-link.active,
html[data-bs-theme="dark"] .sidebar-group-toggle.active-group {
  background: #1e293b !important;
  color: #93c5fd !important;
}
html[data-bs-theme="dark"] .btn-outline-dark {
  color: #e5e7eb !important;
  border-color: #64748b !important;
}
html[data-bs-theme="dark"] .btn-outline-dark:hover {
  color: #0f172a !important;
  background: #e5e7eb !important;
}
html[data-bs-theme="dark"] .modal-backdrop {
  background-color: #020617 !important;
}

/* =========================================================
   OPTIMAT Design System v3.6 - Theme-safe surfaces
   Purpose: one reliable contrast system for light/dark modes
   ========================================================= */
:root,
html[data-bs-theme="light"]{
  --app-bg:#f6f8fc;
  --app-bg-soft:#eef4ff;
  --app-surface:#ffffff;
  --app-surface-soft:#f8fafc;
  --app-surface-hover:#eef4ff;
  --app-text:#0f172a;
  --app-heading:#020617;
  --app-muted:#64748b;
  --app-border:#dbe4f0;
  --app-border-strong:#cbd5e1;
  --app-primary:#2563eb;
  --app-primary-soft:rgba(37,99,235,.12);
  --app-success:#16a34a;
  --app-danger:#dc2626;
  --app-warning:#d97706;
  --app-shadow:0 18px 45px rgba(15,23,42,.07);
  --bs-body-bg:var(--app-bg);
  --bs-body-color:var(--app-text);
  --bs-border-color:var(--app-border);
}
html[data-bs-theme="dark"]{
  --app-bg:#08111f;
  --app-bg-soft:#0f172a;
  --app-surface:#111827;
  --app-surface-soft:#162033;
  --app-surface-hover:#1e293b;
  --app-text:#eaf2ff;
  --app-heading:#f8fbff;
  --app-muted:#a7b4c8;
  --app-border:#334155;
  --app-border-strong:#475569;
  --app-primary:#60a5fa;
  --app-primary-soft:rgba(96,165,250,.18);
  --app-success:#4ade80;
  --app-danger:#f87171;
  --app-warning:#fbbf24;
  --app-shadow:0 24px 70px rgba(0,0,0,.38);
  --bs-body-bg:var(--app-bg);
  --bs-body-color:var(--app-text);
  --bs-border-color:var(--app-border);
}
html[data-bs-theme="dark"] body{
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.14), transparent 26%),
    radial-gradient(circle at bottom left, rgba(14,165,233,.08), transparent 22%),
    var(--app-bg) !important;
  color:var(--app-text)!important;
}
html[data-bs-theme="light"] body{background:var(--app-bg)!important;color:var(--app-text)!important;}

/* Generic surfaces */
.app-main,.app-content,.page-content,.content-wrapper{color:var(--app-text)}
.card,.app-card,.stat-card,.metric-card,.panel,.box,.customer-card,.customer-profile-card,.customers-panel,.supplier-card,.opt-card,.modal-content,.dropdown-menu,.offcanvas,.list-group-item{
  background:var(--app-surface)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
}
.card-header,.card-footer,.table thead th,.bg-light,.bg-light-subtle,.readonly-box,.topbar-business-chip,.topbar-clock-chip,.topbar-brand-chip,.topbar-quick-btn{
  background:var(--app-surface-soft)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
}
.shadow-sm,.shadow,.app-card,.card{box-shadow:var(--app-shadow)}
h1,h2,h3,h4,h5,h6,.page-title,.app-page-title,.business-title,.fw-bold,.fw-semibold,strong{color:var(--app-heading)!important;}
.text-muted,.app-page-subtitle,.business-subtitle,.small.text-muted,.form-text{color:var(--app-muted)!important;}
.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--app-border)!important;}

/* Forms */
.form-control,.form-select,.input-group-text,textarea,input[type="text"],input[type="email"],input[type="number"],input[type="search"],input[type="password"],input[type="tel"],input[type="date"],input[type="datetime-local"]{
  background-color:var(--app-surface)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border-strong)!important;
}
.form-control:focus,.form-select:focus,textarea:focus,input:focus{
  background-color:var(--app-surface)!important;
  color:var(--app-text)!important;
  border-color:var(--app-primary)!important;
  box-shadow:0 0 0 .22rem var(--app-primary-soft)!important;
}
.form-control::placeholder,textarea::placeholder{color:var(--app-muted)!important;opacity:.85;}
.form-check-input{border-color:var(--app-border-strong)!important;}
.form-check-input:checked{background-color:var(--app-primary)!important;border-color:var(--app-primary)!important;}

/* Tables */
.table{
  --bs-table-bg:var(--app-surface);
  --bs-table-color:var(--app-text);
  --bs-table-border-color:var(--app-border);
  --bs-table-striped-bg:var(--app-surface-soft);
  --bs-table-striped-color:var(--app-text);
  --bs-table-hover-bg:var(--app-surface-hover);
  --bs-table-hover-color:var(--app-heading);
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
}
.table td,.table th{border-color:var(--app-border)!important;color:var(--app-text)!important;}

/* Buttons and menus */
.btn-light,.btn-outline-light{background:var(--app-surface-soft)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;}
.btn-outline-dark{color:var(--app-text)!important;border-color:var(--app-border-strong)!important;}
.btn-outline-dark:hover,.btn-light:hover{background:var(--app-surface-hover)!important;color:var(--app-heading)!important;}
.dropdown-item{color:var(--app-text)!important;}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active{background:var(--app-surface-hover)!important;color:var(--app-heading)!important;}
.badge.text-bg-light{background:var(--app-surface-soft)!important;color:var(--app-text)!important;border:1px solid var(--app-border)!important;}

/* Sidebar/topbar */
.app-topbar,.app-sidebar,.staff-sidebar,.navbar{background:var(--app-surface)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;}
.sidebar-nav-link,.sidebar-group-toggle,.nav-link{color:var(--app-text)!important;}
.sidebar-nav-link.active,.sidebar-nav-link:hover,.sidebar-group-toggle.active-group,.sidebar-group-toggle:hover,.nav-pills .nav-link.active,.nav-tabs .nav-link.active{
  background:var(--app-primary-soft)!important;
  color:var(--app-primary)!important;
  border-color:var(--app-border)!important;
}

/* Theme control must always be clickable */
.app-ui-controls,.app-ui-controls *{pointer-events:auto!important;}
.app-ui-controls{z-index:3000!important;}

/* Customer pages hardening */
.customer-card,.customer-profile-card,.customer-summary-card,.customer-details-card,.customers-list,.customers-panel,
.customer-tabs,.customer-tab-content,.customer-doc-card,.customer-note-card{
  background:var(--app-surface)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
}
.customer-card:hover,.customer-card.active,.customer-row:hover{background:var(--app-surface-hover)!important;}

/* OPTIMAT Ads runtime display - enforced */
.optimat-ad{box-sizing:border-box;border:1px solid rgba(148,163,184,.24);display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--app-surface,#fff);color:var(--app-text,#0f172a);box-shadow:var(--app-shadow,0 18px 45px rgba(15,23,42,.10));overflow:hidden}
.optimat-ad-img{width:54px;height:54px;object-fit:cover;border-radius:16px;flex:0 0 auto;background:rgba(148,163,184,.18)}
.optimat-ad-copy{min-width:0;flex:1}.optimat-ad-copy .fw-bold{color:inherit!important}.optimat-ad-banner{margin:0 0 1rem 0}.optimat-ad-side,.optimat-ad-floating{position:fixed!important}.optimat-ad-side{max-width:min(380px,92vw)}.optimat-ad-floating{max-width:min(420px,92vw)}.optimat-ad-modal{position:fixed!important;inset:0!important;display:none!important;align-items:center!important;justify-content:center!important;background:rgba(15,23,42,.50)!important;padding:1rem!important}.optimat-ad-modal-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;max-width:min(520px,94vw);border:1px solid rgba(148,163,184,.22)}
.optimat-ad .optimat-ad-close{display:none!important}
html[data-bs-theme="dark"] .optimat-ad,html[data-bs-theme="dark"] .optimat-ad-modal-card{border-color:#475569!important;box-shadow:0 24px 80px rgba(0,0,0,.48)!important}
@media(max-width:768px){.optimat-ad-side,.optimat-ad-floating{width:calc(100vw - 24px)!important;left:12px!important;right:auto!important;transform:none!important}.optimat-ad-img{width:42px;height:42px}}

/* OPTIMAT high contrast design-system finishing */
html[data-bs-theme="dark"] .alert{background:#111827!important;color:#eaf2ff!important;border-color:#475569!important}
html[data-bs-theme="dark"] .btn-primary{background:#3b82f6!important;border-color:#3b82f6!important;color:#fff!important}
html[data-bs-theme="dark"] .btn-outline-primary{color:#93c5fd!important;border-color:#3b82f6!important}
html[data-bs-theme="dark"] .btn-outline-primary:hover{background:#1d4ed8!important;color:#fff!important}
html[data-bs-theme="dark"] a:not(.btn):not(.nav-link){color:#93c5fd}
html[data-bs-theme="dark"] code,html[data-bs-theme="dark"] pre{background:#0f172a!important;color:#eaf2ff!important;border-color:#334155!important}


/* =========================================================
   OPTIMAT Design System + Fixed Sidebar v3.9
   ========================================================= */
:root,html[data-bs-theme="light"]{
  --app-bg:var(--app-bg,#f6f8fc);
  --app-surface:var(--app-surface,#fff);
  --app-surface-soft:var(--app-surface-soft,#f8fafc);
  --app-text:var(--app-text,#0f172a);
  --app-heading:var(--app-heading,#020617);
  --app-muted:var(--app-muted,#64748b);
  --app-border:var(--app-border,#dbe4f0);
  --app-primary:var(--app-primary,#2563eb);
  --app-secondary:var(--app-secondary,#06b6d4);
  --app-card-radius:var(--app-card-radius,22px);
  --app-card-radius-sm:var(--app-card-radius-sm,16px);
  --app-shadow:var(--app-shadow,0 18px 45px rgba(15,23,42,.08));
  --app-shadow-sm:var(--app-shadow-sm,0 10px 26px rgba(15,23,42,.06));
  --sidebar-bg:var(--sidebar-bg,rgba(255,255,255,.92));
}
html[data-bs-theme="dark"]{
  --bs-body-bg:var(--app-bg,#08111f)!important;
  --bs-body-color:var(--app-text,#eaf2ff)!important;
  --bs-border-color:var(--app-border,#334155)!important;
}
body{background:var(--app-bg)!important;color:var(--app-text)!important;}
.card,.app-card,.stat-card,.metric-card,.panel,.box,.customer-card,.customer-profile-card,.customers-panel,.supplier-card,.opt-card,.modal-content,.dropdown-menu,.offcanvas,.list-group-item,.design-card,.design-hero{
  background:var(--app-surface)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;border-radius:var(--app-card-radius);
}
.card,.app-card,.stat-card,.metric-card,.panel,.box,.design-card{box-shadow:var(--app-shadow-sm)}
.text-muted,.app-muted,.small.text-muted{color:var(--app-muted)!important}.text-dark{color:var(--app-heading)!important}h1,h2,h3,h4,h5,h6,.fw-bold{color:inherit}
.form-control,.form-select,.input-group-text,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]){background:var(--app-surface)!important;color:var(--app-text)!important;border-color:var(--app-border)!important}.form-control::placeholder{color:var(--app-muted)!important;opacity:.85}.form-check-input{border-color:var(--app-border)}
.table{--bs-table-bg:var(--app-surface);--bs-table-color:var(--app-text);--bs-table-border-color:var(--app-border);--bs-table-striped-bg:var(--app-surface-soft);--bs-table-striped-color:var(--app-text);--bs-table-hover-bg:var(--app-surface-soft);--bs-table-hover-color:var(--app-text);color:var(--app-text)!important}.table thead th{background:var(--app-surface-soft)!important;color:var(--app-heading)!important;border-color:var(--app-border)!important}
.btn-primary{--bs-btn-bg:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary);--bs-btn-hover-border-color:var(--app-primary)}.btn-outline-primary{--bs-btn-color:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary);--bs-btn-hover-border-color:var(--app-primary)}
.btn-light,.bg-light,.bg-light-subtle{background:var(--app-surface-soft)!important;color:var(--app-text)!important;border-color:var(--app-border)!important}.dropdown-item{color:var(--app-text)!important}.dropdown-item:hover,.dropdown-item:focus{background:var(--app-surface-soft)!important;color:var(--app-heading)!important}
.app-topbar,.staff-topbar{background:var(--app-surface)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;box-shadow:0 1px 0 var(--app-border)}
.app-sidebar,.staff-sidebar{background:var(--sidebar-bg)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;backdrop-filter:blur(18px);box-shadow:var(--app-shadow-sm)}
.sidebar-nav-link,.sidebar-group-toggle,.staff-nav .nav-link{color:var(--app-text)!important}.sidebar-nav-link:hover,.sidebar-group-toggle:hover,.staff-nav .nav-link:hover{background:var(--app-surface-soft)!important;color:var(--app-heading)!important}.sidebar-nav-link.active,.staff-nav .nav-link.active{background:var(--app-primary)!important;color:#fff!important}.sidebar-nav-link.active .sidebar-icon,.staff-nav .nav-link.active i{color:#fff!important}
.optimat-ad{background:var(--app-surface);color:var(--app-text);border-color:var(--app-border);z-index:1250}.optimat-ad-floating,.optimat-ad-side{position:fixed!important}.optimat-ad-close{display:none!important}
@media (min-width: 992px){
  .staff-shell{display:block!important;min-height:100vh}.staff-sidebar{position:fixed!important;top:0!important;bottom:0!important;right:0!important;width:280px!important;height:100vh!important;overflow-y:auto!important;z-index:1040!important}.staff-main{min-width:0!important;margin-right:280px!important}.staff-topbar{position:sticky!important;top:0!important;z-index:1030!important}.staff-main>main{max-width:100%;overflow-x:hidden}
  html[dir="ltr"] .staff-sidebar{right:auto!important;left:0!important}html[dir="ltr"] .staff-main{margin-right:0!important;margin-left:280px!important}
  .app-sidebar{position:fixed!important;top:0!important;bottom:0!important;right:0!important;width:var(--sidebar-width,292px)!important;height:100vh!important;z-index:1040!important}.app-main{margin-right:var(--sidebar-width,292px)!important;min-width:0!important}.app-topbar{position:sticky!important;top:0!important;z-index:1030!important}.app-sidebar .offcanvas-body,.sidebar-scroll{max-height:calc(100vh - var(--topbar-height,80px));overflow-y:auto!important}body.sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed-width,84px)!important}body.sidebar-collapsed .app-main{margin-right:var(--sidebar-collapsed-width,84px)!important}
  html[dir="ltr"] .app-sidebar{right:auto!important;left:0!important}html[dir="ltr"] .app-main{margin-right:0!important;margin-left:var(--sidebar-width,292px)!important}html[dir="ltr"] body.sidebar-collapsed .app-main{margin-left:var(--sidebar-collapsed-width,84px)!important;margin-right:0!important}
}
@media (max-width: 991.98px){.staff-main{margin:0!important}.staff-sidebar{display:none!important}.app-main{margin:0!important}}
html[data-bs-theme="dark"] body{background:radial-gradient(circle at top right,rgba(96,165,250,.13),transparent 25%),radial-gradient(circle at bottom left,rgba(6,182,212,.08),transparent 22%),var(--app-bg)!important}html[data-bs-theme="dark"] .alert-info{--bs-alert-bg:rgba(96,165,250,.14);--bs-alert-border-color:rgba(96,165,250,.28);--bs-alert-color:#dbeafe}html[data-bs-theme="dark"] .alert-warning{--bs-alert-bg:rgba(251,191,36,.14);--bs-alert-border-color:rgba(251,191,36,.32);--bs-alert-color:#fef3c7}html[data-bs-theme="dark"] .alert-success{--bs-alert-bg:rgba(74,222,128,.13);--bs-alert-border-color:rgba(74,222,128,.30);--bs-alert-color:#dcfce7}html[data-bs-theme="dark"] .alert-danger{--bs-alert-bg:rgba(248,113,113,.14);--bs-alert-border-color:rgba(248,113,113,.30);--bs-alert-color:#fee2e2}

/* OPTIMAT v4.3 - professional fixed sidebar, compact icon mode */
@media (min-width: 992px){
  .staff-shell{display:block!important;min-height:100vh!important;}
  .staff-sidebar{position:fixed!important;top:0!important;bottom:0!important;right:0!important;width:280px!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:1040!important;padding:1rem!important;border-inline-end:1px solid var(--app-border)!important;background:color-mix(in srgb,var(--app-surface,#fff) 92%,transparent)!important;backdrop-filter:blur(18px)!important;transition:width .22s ease,box-shadow .22s ease!important;}
  .staff-main{min-width:0!important;margin-right:280px!important;transition:margin .22s ease!important;}
  html[dir="ltr"] .staff-sidebar{right:auto!important;left:0!important;} html[dir="ltr"] .staff-main{margin-right:0!important;margin-left:280px!important;}
  .staff-sidebar-toggle{width:44px;height:44px;border-radius:16px;border:1px solid var(--app-border)!important;background:var(--app-surface-soft,#f8fafc)!important;color:var(--app-text,#0f172a)!important;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.85rem;box-shadow:var(--app-shadow-sm,0 10px 26px rgba(15,23,42,.06));}
  .staff-brand,.staff-app-link,.staff-nav .nav-link,.staff-user-chip{transition:all .2s ease!important;}
  .staff-nav .nav-link{min-height:46px;border-radius:16px!important;padding:.72rem .9rem!important;gap:.75rem!important;white-space:nowrap!important;overflow:hidden!important;}
  .staff-nav .nav-link i{min-width:22px!important;text-align:center!important;font-size:1.08rem!important;}
  .staff-brand-logo,.staff-avatar{flex:0 0 auto!important;}
  body.staff-sidebar-compact .staff-sidebar{width:84px!important;box-shadow:0 16px 38px rgba(15,23,42,.10)!important;}
  body.staff-sidebar-compact .staff-main{margin-right:84px!important;}
  html[dir="ltr"] body.staff-sidebar-compact .staff-main{margin-left:84px!important;margin-right:0!important;}
  body.staff-sidebar-compact .staff-sidebar:hover{width:280px!important;box-shadow:0 24px 70px rgba(15,23,42,.18)!important;}
  body.staff-sidebar-compact .staff-brand-title,body.staff-sidebar-compact .staff-brand-sub,body.staff-sidebar-compact .staff-bottom .fw-bold,body.staff-sidebar-compact .staff-bottom .small{opacity:0!important;width:0!important;max-width:0!important;overflow:hidden!important;display:inline-block!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-brand-title,body.staff-sidebar-compact .staff-sidebar:hover .staff-brand-sub,body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .fw-bold,body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .small{opacity:1!important;width:auto!important;max-width:180px!important;}
  body.staff-sidebar-compact .staff-nav .nav-link{font-size:0!important;justify-content:center!important;padding:.72rem!important;}
  body.staff-sidebar-compact .staff-nav .nav-link i{font-size:1.18rem!important;margin:0!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-nav .nav-link{font-size:.92rem!important;justify-content:flex-start!important;padding:.72rem .9rem!important;}
  body.staff-sidebar-compact .staff-bottom .staff-app-link{justify-content:center!important;padding:.75rem!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .staff-app-link{justify-content:flex-start!important;padding:.85rem 1rem!important;}
  body.staff-sidebar-compact .staff-brand{justify-content:center!important;gap:0!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-brand{justify-content:flex-start!important;gap:.9rem!important;}
}
@media (max-width: 991.98px){.staff-sidebar-toggle{display:none!important;}}

/* OPTIMAT v4.3 - professional fixed sidebar, compact icon mode */
@media (min-width: 992px){
  .staff-shell{display:block!important;min-height:100vh!important;}
  .staff-sidebar{position:fixed!important;top:0!important;bottom:0!important;right:0!important;width:280px!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:1040!important;padding:1rem!important;border-inline-end:1px solid var(--app-border)!important;background:color-mix(in srgb,var(--app-surface,#fff) 92%,transparent)!important;backdrop-filter:blur(18px)!important;transition:width .22s ease,box-shadow .22s ease!important;}
  .staff-main{min-width:0!important;margin-right:280px!important;transition:margin .22s ease!important;}
  html[dir="ltr"] .staff-sidebar{right:auto!important;left:0!important;} html[dir="ltr"] .staff-main{margin-right:0!important;margin-left:280px!important;}
  .staff-sidebar-toggle{width:44px;height:44px;border-radius:16px;border:1px solid var(--app-border)!important;background:var(--app-surface-soft,#f8fafc)!important;color:var(--app-text,#0f172a)!important;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.85rem;box-shadow:var(--app-shadow-sm,0 10px 26px rgba(15,23,42,.06));}
  .staff-brand,.staff-app-link,.staff-nav .nav-link,.staff-user-chip{transition:all .2s ease!important;}
  .staff-nav .nav-link{min-height:46px;border-radius:16px!important;padding:.72rem .9rem!important;gap:.75rem!important;white-space:nowrap!important;overflow:hidden!important;}
  .staff-nav .nav-link i{min-width:22px!important;text-align:center!important;font-size:1.08rem!important;}
  .staff-brand-logo,.staff-avatar{flex:0 0 auto!important;}
  body.staff-sidebar-compact .staff-sidebar{width:84px!important;box-shadow:0 16px 38px rgba(15,23,42,.10)!important;}
  body.staff-sidebar-compact .staff-main{margin-right:84px!important;}
  html[dir="ltr"] body.staff-sidebar-compact .staff-main{margin-left:84px!important;margin-right:0!important;}
  body.staff-sidebar-compact .staff-sidebar:hover{width:280px!important;box-shadow:0 24px 70px rgba(15,23,42,.18)!important;}
  body.staff-sidebar-compact .staff-brand-title,body.staff-sidebar-compact .staff-brand-sub,body.staff-sidebar-compact .staff-bottom .fw-bold,body.staff-sidebar-compact .staff-bottom .small{opacity:0!important;width:0!important;max-width:0!important;overflow:hidden!important;display:inline-block!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-brand-title,body.staff-sidebar-compact .staff-sidebar:hover .staff-brand-sub,body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .fw-bold,body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .small{opacity:1!important;width:auto!important;max-width:180px!important;}
  body.staff-sidebar-compact .staff-nav .nav-link{font-size:0!important;justify-content:center!important;padding:.72rem!important;}
  body.staff-sidebar-compact .staff-nav .nav-link i{font-size:1.18rem!important;margin:0!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-nav .nav-link{font-size:.92rem!important;justify-content:flex-start!important;padding:.72rem .9rem!important;}
  body.staff-sidebar-compact .staff-bottom .staff-app-link{justify-content:center!important;padding:.75rem!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .staff-app-link{justify-content:flex-start!important;padding:.85rem 1rem!important;}
  body.staff-sidebar-compact .staff-brand{justify-content:center!important;gap:0!important;}
  body.staff-sidebar-compact .staff-sidebar:hover .staff-brand{justify-content:flex-start!important;gap:.9rem!important;}
}
@media (max-width: 991.98px){.staff-sidebar-toggle{display:none!important;}}

/* =========================================================
   OPTIMAT v4.4 - Global Design System + Sidebar hardening
   ========================================================= */
:root,html[data-bs-theme="light"]{--opt-bg:#f6f8fc;--opt-surface:#ffffff;--opt-surface-2:#f8fafc;--opt-surface-3:#eef4ff;--opt-text:#0f172a;--opt-heading:#020617;--opt-muted:#64748b;--opt-border:#dbe4f0;--opt-border-strong:#cbd5e1;--opt-primary:#2563eb;--opt-primary-2:#0ea5e9;--opt-success:#16a34a;--opt-warning:#d97706;--opt-danger:#dc2626;--opt-info:#0284c7;--opt-sidebar-icon:#334155;--opt-sidebar-icon-muted:#475569;--opt-shadow:0 18px 45px rgba(15,23,42,.08);--opt-shadow-sm:0 10px 25px rgba(15,23,42,.06);--opt-radius:18px;--opt-radius-sm:14px;color-scheme:light}
html[data-bs-theme="dark"]{--opt-bg:#07111f;--opt-surface:#101b2d;--opt-surface-2:#16243a;--opt-surface-3:#1e3354;--opt-text:#eef6ff;--opt-heading:#fff;--opt-muted:#b8c6da;--opt-border:#3d506d;--opt-border-strong:#556b8a;--opt-primary:#60a5fa;--opt-primary-2:#38bdf8;--opt-success:#4ade80;--opt-warning:#fbbf24;--opt-danger:#fb7185;--opt-info:#67e8f9;--opt-sidebar-icon:#dbeafe;--opt-sidebar-icon-muted:#cbd5e1;--opt-shadow:0 22px 60px rgba(0,0,0,.48);--opt-shadow-sm:0 12px 34px rgba(0,0,0,.36);color-scheme:dark}
html[data-bs-theme] body{background:var(--opt-bg)!important;color:var(--opt-text)!important}html[data-bs-theme="dark"] body{background:radial-gradient(circle at 100% 0,rgba(96,165,250,.16),transparent 26%),radial-gradient(circle at 0 100%,rgba(56,189,248,.10),transparent 24%),var(--opt-bg)!important}
.card,.app-card,.stat-card,.metric-card,.panel,.box,.tile,.widget,.section-card,.exam-card,.examination-card,.test-card,.patient-card,.customer-card,.supplier-card,.customer-profile-card,.customers-panel,.readonly-box,.info-box,.summary-card,.modal-content,.dropdown-menu,.offcanvas,.list-group-item,.accordion-item,.app-page-header,.page-card,.content-card,.design-card,.health-card{color:var(--opt-text)!important;border-color:var(--opt-border)!important;}
.bg-white,.bg-light,.bg-light-subtle,.table-light,.surface,.surface-soft,.app-surface,.app-section{background:var(--opt-surface-2)!important;color:var(--opt-text)!important;border-color:var(--opt-border)!important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.fw-bold,.fw-semibold,.page-title,.card-title,.section-title{color:var(--opt-heading)!important}.text-muted,.small.text-muted,.form-text,.help-text,.page-subtitle,.app-page-subtitle,.text-secondary{color:var(--opt-muted)!important}.text-dark{color:var(--opt-heading)!important}.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--opt-border)!important}hr{border-color:var(--opt-border)!important;opacity:1}
.form-control,.form-select,.input-group-text,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select{background-color:var(--opt-surface)!important;color:var(--opt-text)!important;border-color:var(--opt-border-strong)!important}.form-control:focus,.form-select:focus,textarea:focus,input:focus,select:focus{border-color:var(--opt-primary)!important;box-shadow:0 0 0 .22rem color-mix(in srgb,var(--opt-primary) 22%,transparent)!important}.form-control::placeholder,textarea::placeholder{color:var(--opt-muted)!important;opacity:.88}.form-check-input{background-color:var(--opt-surface)!important;border-color:var(--opt-border-strong)!important}.form-check-input:checked{background-color:var(--opt-primary)!important;border-color:var(--opt-primary)!important}
.table{--bs-table-bg:var(--opt-surface)!important;--bs-table-color:var(--opt-text)!important;--bs-table-border-color:var(--opt-border)!important;--bs-table-striped-bg:var(--opt-surface-2)!important;--bs-table-striped-color:var(--opt-text)!important;--bs-table-hover-bg:var(--opt-surface-3)!important;--bs-table-hover-color:var(--opt-heading)!important;color:var(--opt-text)!important}.table thead th,.table thead td{background:var(--opt-surface-2)!important;color:var(--opt-heading)!important;border-color:var(--opt-border)!important}.table tbody td,.table tbody th{border-color:var(--opt-border)!important}
.btn-primary{--bs-btn-bg:var(--opt-primary);--bs-btn-border-color:var(--opt-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--opt-primary) 82%,#000);--bs-btn-hover-border-color:color-mix(in srgb,var(--opt-primary) 82%,#000);--bs-btn-color:#fff}.btn-light,.btn-outline-light{background:var(--opt-surface-2)!important;color:var(--opt-text)!important;border-color:var(--opt-border)!important}.btn-outline-dark{color:var(--opt-text)!important;border-color:var(--opt-border-strong)!important}.btn-outline-dark:hover{background:var(--opt-surface-3)!important;color:var(--opt-heading)!important}a:not(.btn):not(.nav-link):not(.dropdown-item){color:var(--opt-primary)}.badge.text-bg-light{background:var(--opt-surface-2)!important;color:var(--opt-text)!important;border:1px solid var(--opt-border)!important}
.alert{border-color:var(--opt-border)!important}.alert-info{background:color-mix(in srgb,var(--opt-info) 14%,var(--opt-surface))!important;color:var(--opt-heading)!important}.alert-success{background:color-mix(in srgb,var(--opt-success) 14%,var(--opt-surface))!important;color:var(--opt-heading)!important}.alert-warning{background:color-mix(in srgb,var(--opt-warning) 18%,var(--opt-surface))!important;color:var(--opt-heading)!important}.alert-danger{background:color-mix(in srgb,var(--opt-danger) 16%,var(--opt-surface))!important;color:var(--opt-heading)!important}
.nav-tabs,.nav-pills,.accordion{border-color:var(--opt-border)!important}.nav-link{color:var(--opt-muted)!important}.nav-link:hover{color:var(--opt-heading)!important;background:var(--opt-surface-2)!important}.nav-link.active{color:#fff!important;background:var(--opt-primary)!important;border-color:var(--opt-primary)!important}.accordion-button{background:var(--opt-surface)!important;color:var(--opt-heading)!important;box-shadow:none!important}.accordion-button:not(.collapsed){background:var(--opt-surface-2)!important;color:var(--opt-heading)!important}html[data-bs-theme="dark"] .accordion-button::after{filter:invert(1) brightness(1.4)}
.app-sidebar .bi,.staff-sidebar .bi,.sidebar-icon,.sidebar-group-icon,.staff-nav .nav-link i{color:var(--opt-sidebar-icon)!important;opacity:.96!important}.app-sidebar .sidebar-nav-link:not(.active):hover .bi,.app-sidebar .sidebar-group-toggle:not(.active-group):hover .bi,.staff-sidebar .staff-nav .nav-link:not(.active):hover i{color:var(--opt-heading)!important}.app-sidebar .sidebar-nav-link.active .bi,.app-sidebar .sidebar-group-toggle.active-group .bi,.staff-sidebar .staff-nav .nav-link.active i{color:#fff!important}html[data-bs-theme="dark"] .app-sidebar .sidebar-nav-link:not(.active):hover .bi,html[data-bs-theme="dark"] .app-sidebar .sidebar-group-toggle:not(.active-group):hover .bi,html[data-bs-theme="dark"] .staff-sidebar .staff-nav .nav-link:not(.active):hover i{color:#fff!important}
@media (min-width:992px){.app-sidebar,.staff-sidebar{position:fixed!important;top:0!important;bottom:0!important;right:0!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:1040!important;background:color-mix(in srgb,var(--opt-surface) 94%,transparent)!important;color:var(--opt-text)!important;border-color:var(--opt-border)!important;backdrop-filter:blur(18px);box-shadow:var(--opt-shadow-sm)!important;transition:width .22s ease,box-shadow .22s ease!important}.app-main,.staff-main{transition:margin .22s ease!important;min-width:0!important}.staff-sidebar{width:280px!important;padding:1rem!important}.staff-main{margin-right:280px!important}html[dir="ltr"] .staff-sidebar{right:auto!important;left:0!important}html[dir="ltr"] .staff-main{margin-right:0!important;margin-left:280px!important}.staff-sidebar-toggle{width:44px!important;height:44px!important;border-radius:15px!important;border:1px solid var(--opt-border)!important;background:var(--opt-surface-2)!important;color:var(--opt-text)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin-bottom:.75rem!important;box-shadow:var(--opt-shadow-sm)!important}.staff-brand,.staff-app-link,.staff-nav .nav-link{transition:all .2s ease!important}.staff-nav .nav-link{min-height:46px!important;border-radius:16px!important;padding:.72rem .92rem!important;gap:.75rem!important;white-space:nowrap!important;overflow:hidden!important}.staff-nav .nav-link i{min-width:22px!important;text-align:center!important;font-size:1.12rem!important}body.staff-sidebar-compact .staff-sidebar{width:84px!important}body.staff-sidebar-compact .staff-main{margin-right:84px!important}html[dir="ltr"] body.staff-sidebar-compact .staff-main{margin-left:84px!important;margin-right:0!important}body.staff-sidebar-compact .staff-sidebar:hover{width:280px!important;box-shadow:var(--opt-shadow)!important}body.staff-sidebar-compact .staff-brand-title,body.staff-sidebar-compact .staff-brand-sub,body.staff-sidebar-compact .staff-bottom .fw-bold,body.staff-sidebar-compact .staff-bottom .small{opacity:0!important;width:0!important;max-width:0!important;overflow:hidden!important;white-space:nowrap!important;display:inline-block!important}body.staff-sidebar-compact .staff-sidebar:hover .staff-brand-title,body.staff-sidebar-compact .staff-sidebar:hover .staff-brand-sub,body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .fw-bold,body.staff-sidebar-compact .staff-sidebar:hover .staff-bottom .small{opacity:1!important;width:auto!important;max-width:190px!important}body.staff-sidebar-compact .staff-nav .nav-link{font-size:0!important;justify-content:center!important;padding:.72rem!important}body.staff-sidebar-compact .staff-nav .nav-link i{font-size:1.2rem!important;margin:0!important}body.staff-sidebar-compact .staff-sidebar:hover .staff-nav .nav-link{font-size:.94rem!important;justify-content:flex-start!important;padding:.72rem .92rem!important}body.sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed-width,86px)!important}body.sidebar-collapsed .app-main{margin-right:var(--sidebar-collapsed-width,86px)!important}body.sidebar-collapsed .app-sidebar:hover,body.sidebar-collapsed .app-sidebar.is-hover-expanded{width:var(--sidebar-width,292px)!important;box-shadow:var(--opt-shadow)!important}body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-label,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-title,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-header-text,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-chevron,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-text,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-role-chip,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-subtitle,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-meta,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-bottom-meta,body.sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer-text{opacity:0!important;visibility:hidden!important;width:0!important;max-width:0!important;overflow:hidden!important}body.sidebar-collapsed .app-sidebar:hover .sidebar-label,body.sidebar-collapsed .app-sidebar:hover .sidebar-group-title,body.sidebar-collapsed .app-sidebar:hover .sidebar-header-text,body.sidebar-collapsed .app-sidebar:hover .sidebar-chevron,body.sidebar-collapsed .app-sidebar:hover .sidebar-profile-text,body.sidebar-collapsed .app-sidebar:hover .sidebar-role-chip,body.sidebar-collapsed .app-sidebar:hover .sidebar-subtitle,body.sidebar-collapsed .app-sidebar:hover .sidebar-meta,body.sidebar-collapsed .app-sidebar:hover .sidebar-bottom-meta,body.sidebar-collapsed .app-sidebar:hover .sidebar-app-footer-text{opacity:1!important;visibility:visible!important;width:auto!important;max-width:240px!important}}
@media(max-width:991.98px){.staff-sidebar-toggle{display:none!important}.staff-main,.app-main{margin:0!important}}
.app-sidebar,.staff-sidebar,.table-responsive,.modal-body{scrollbar-width:thin;scrollbar-color:var(--opt-border-strong) transparent}.app-sidebar::-webkit-scrollbar,.staff-sidebar::-webkit-scrollbar,.table-responsive::-webkit-scrollbar{width:8px;height:8px}.app-sidebar::-webkit-scrollbar-thumb,.staff-sidebar::-webkit-scrollbar-thumb,.table-responsive::-webkit-scrollbar-thumb{background:var(--opt-border-strong);border-radius:999px}

/* =========================================================
   OPTIMAT SaaS Pro UI Shell v5.8 - final safe overrides
   Purpose: fixed RTL shell, clean sidebar, real theme contrast.
   ========================================================= */
:root{
  --sidebar-width:292px;
  --sidebar-collapsed-width:86px;
  --staff-sidebar-width:280px;
  --app-header-height:64px;
  --app-content-padding:24px;
  --sidebar-item-height:48px;
  --sidebar-footer-logo-width:168px;
}
html,body{min-height:100%;background:var(--app-bg,#f6f8fc)!important;color:var(--app-text,#0f172a)!important;overflow-x:hidden!important;}
body[data-app-area="app"],body[data-app-area="staff"]{background:var(--app-bg,#f6f8fc)!important;}
/* Universal cards/forms/tables contrast */
.card,.modal-content,.dropdown-menu,.list-group-item,.accordion-item,.tab-pane-card,
.design-card,.design-hero,.staff-topbar,.app-topbar,.topbar-brand-chip,.topbar-business-chip,
.sidebar-profile-card,.sidebar-app-footer,.staff-app-link,.table-responsive,.filter-card,.summary-card{
  background:var(--app-surface,#fff)!important;color:var(--app-text,#0f172a)!important;border-color:var(--app-border,#dbe4f0)!important;
}
.text-muted,.small.text-muted,.form-text{color:var(--app-muted,#64748b)!important;}
.form-control,.form-select,input,select,textarea{background:var(--app-surface,#fff)!important;color:var(--app-text,#0f172a)!important;border-color:var(--app-border,#dbe4f0)!important;}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:var(--app-muted,#64748b)!important;opacity:.86;}
.table{--bs-table-bg:transparent!important;--bs-table-color:var(--app-text,#0f172a)!important;--bs-table-border-color:var(--app-border,#dbe4f0)!important;color:var(--app-text,#0f172a)!important;}
.table th,.table td{color:var(--app-text,#0f172a)!important;border-color:var(--app-border,#dbe4f0)!important;}
.btn-primary{background:var(--app-primary,#2563eb)!important;border-color:var(--app-primary,#2563eb)!important;color:#fff!important;}
.btn-outline-primary{color:var(--app-primary,#2563eb)!important;border-color:var(--app-primary,#2563eb)!important;}
.btn-outline-primary:hover{background:var(--app-primary,#2563eb)!important;color:#fff!important;}
/* APP shell */
@media (min-width:992px){
  body[data-app-area="app"] .app-shell{display:block!important;min-height:100vh!important;background:var(--app-bg,#f6f8fc)!important;}
  body[data-app-area="app"] .app-sidebar{position:fixed!important;top:0!important;right:0!important;width:var(--sidebar-width)!important;height:100vh!important;max-height:100vh!important;display:flex!important;flex-direction:column!important;background:var(--sidebar-bg,var(--app-surface,#fff))!important;border-left:1px solid var(--app-border,#dbe4f0)!important;border-right:0!important;box-shadow:0 18px 48px rgba(15,23,42,.08)!important;overflow:visible!important;z-index:1040!important;transition:width .22s ease, box-shadow .22s ease!important;}
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar{left:0!important;right:auto!important;border-right:1px solid var(--app-border,#dbe4f0)!important;border-left:0!important;}
  body[data-app-area="app"] .app-sidebar .offcanvas-body{height:calc(100vh - 86px)!important;min-height:0!important;display:flex!important;flex-direction:column!important;padding:14px 14px 12px!important;overflow:hidden!important;}
  body[data-app-area="app"] .app-sidebar .offcanvas-header{height:86px!important;min-height:86px!important;padding:14px!important;border-bottom:1px solid var(--app-border,#dbe4f0)!important;background:transparent!important;}
  body[data-app-area="app"] .sidebar-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-inline-end:3px!important;}
  body[data-app-area="app"] .sidebar-bottom-zone{flex:0 0 auto!important;margin-top:auto!important;padding-top:12px!important;border-top:1px solid var(--app-border,#dbe4f0)!important;background:transparent!important;}
  body[data-app-area="app"] .app-main{margin-right:var(--sidebar-width)!important;margin-left:0!important;min-height:100vh!important;width:auto!important;display:flex!important;flex-direction:column!important;background:var(--app-bg,#f6f8fc)!important;transition:margin .22s ease!important;PADDING-TOP: var(--optimat-app-header-height);}
  html[dir="ltr"] body[data-app-area="app"] .app-main{margin-left:var(--sidebar-width)!important;margin-right:0!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed-width)!important;overflow:visible!important;}
  body[data-app-area="app"].sidebar-collapsed .app-main{margin-right:var(--sidebar-collapsed-width)!important;}
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-main{margin-left:var(--sidebar-collapsed-width)!important;margin-right:0!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar.is-hover-expanded{width:var(--sidebar-width)!important;box-shadow:0 24px 72px rgba(15,23,42,.18)!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-header-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-profile-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-label,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-group-title,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-chevron,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-app-footer-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-role-chip,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-subtitle,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-meta,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-bottom-meta{display:none!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-profile-card{justify-content:center!important;padding:10px!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-group .accordion-collapse{display:none!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-group-toggle,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-nav-link,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(.is-hover-expanded) .sidebar-app-link{width:56px!important;height:56px!important;min-height:56px!important;padding:0!important;margin-inline:auto!important;justify-content:center!important;}
  body[data-app-area="app"] .sidebar-toggle-desktop{position:absolute!important;top:76px!important;left:-15px!important;width:30px!important;height:30px!important;border-radius:50%!important;padding:0!important;z-index:3000!important;background:var(--app-surface,#fff)!important;border:1px solid var(--app-border,#dbe4f0)!important;color:var(--app-text,#0f172a)!important;box-shadow:0 10px 24px rgba(15,23,42,.12)!important;}
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop{right:-15px!important;left:auto!important;}
}
/* APP sidebar typography/links */
body[data-app-area="app"] .sidebar-group{border:0!important;background:transparent!important;margin-bottom:8px!important;}
body[data-app-area="app"] .sidebar-group-toggle,
body[data-app-area="app"] .sidebar-nav-link,
body[data-app-area="app"] .sidebar-app-link{min-height:var(--sidebar-item-height)!important;border:0!important;border-radius:14px!important;background:transparent!important;color:var(--app-text,#0f172a)!important;font-weight:750!important;display:flex!important;align-items:center!important;gap:12px!important;box-shadow:none!important;}
body[data-app-area="app"] .sidebar-group-toggle:hover,
body[data-app-area="app"] .sidebar-nav-link:hover,
body[data-app-area="app"] .sidebar-app-link:hover{background:color-mix(in srgb,var(--app-primary,#2563eb) 9%,transparent)!important;color:var(--app-text,#0f172a)!important;transform:none!important;}
body[data-app-area="app"] .sidebar-group-toggle.active-group,
body[data-app-area="app"] .sidebar-nav-link.active{background:color-mix(in srgb,var(--app-primary,#2563eb) 14%,transparent)!important;color:var(--app-primary,#2563eb)!important;box-shadow:inset 3px 0 0 var(--app-primary,#2563eb)!important;}
body[data-app-area="app"] .sidebar-group-icon,
body[data-app-area="app"] .sidebar-icon{color:#334155!important;opacity:1!important;filter:none!important;}
html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-icon,
html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-icon{color:#e2e8f0!important;}
body[data-app-area="app"] .sidebar-group-toggle.active-group .sidebar-group-icon,
body[data-app-area="app"] .sidebar-nav-link.active .sidebar-icon{color:var(--app-primary,#2563eb)!important;}
body[data-app-area="app"] .sidebar-app-footer{padding:10px 0 0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
body[data-app-area="app"] .sidebar-app-link{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:10px!important;background:transparent!important;border:0!important;}
body[data-app-area="app"] .sidebar-app-link .app-brand-logo{width:var(--sidebar-footer-logo-width)!important;height:auto!important;max-width:100%!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;}
body[data-app-area="app"] .sidebar-app-link .app-brand-logo img{width:100%!important;height:auto!important;object-fit:contain!important;border-radius:0!important;}
body[data-app-area="app"] .sidebar-app-footer-text{margin-top:4px!important;text-align:center!important;color:var(--app-muted,#64748b)!important;}
/* APP topbar compact */
body[data-app-area="app"] .app-topbar{height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;background:var(--app-surface,#fff)!important;border-bottom:1px solid var(--app-border,#dbe4f0)!important;padding:0!important;box-shadow:none!important;}
body[data-app-area="app"] .app-topbar>.container-fluid{height:100%!important;flex-wrap:nowrap!important;padding-inline:18px!important;gap:12px!important;}
body[data-app-area="app"] .topbar-brand-chip{height:46px!important;min-width:160px!important;background:var(--app-surface,#fff)!important;}
body[data-app-area="app"] .topbar-brand-chip img{width:82px!important;height:34px!important;object-fit:contain!important;border-radius:0!important;}
body[data-app-area="app"] .topbar-brand-chip span.fw-bold{display:none!important;}
body[data-app-area="app"] .topbar-search{height:44px!important;max-width:360px!important;min-width:240px!important;flex-wrap:nowrap!important;background:var(--app-surface,#fff)!important;border:1px solid var(--app-border,#dbe4f0)!important;border-radius:16px!important;overflow:hidden!important;}
body[data-app-area="app"] .topbar-search .form-control,body[data-app-area="app"] .topbar-search .input-group-text{height:42px!important;border:0!important;box-shadow:none!important;background:transparent!important;}
body[data-app-area="app"] .app-content{padding:var(--app-content-padding)!important;}
/* STAFF shell */
body:not([data-app-area="app"]) .staff-shell,body[data-app-area="staff"] .staff-shell{display:grid!important;grid-template-columns:var(--staff-sidebar-width) minmax(0,1fr)!important;min-height:100vh!important;background:var(--app-bg,#f6f8fc)!important;align-items:stretch!important;}
body:not([data-app-area="app"]) .staff-sidebar,body[data-app-area="staff"] .staff-sidebar{position:sticky!important;top:0!important;height:100vh!important;max-height:100vh!important;background:var(--sidebar-bg,var(--app-surface,#fff))!important;color:var(--app-text,#0f172a)!important;border-inline-end:1px solid var(--app-border,#dbe4f0)!important;padding:14px!important;display:flex!important;flex-direction:column!important;gap:12px!important;overflow:hidden!important;box-shadow:0 18px 48px rgba(15,23,42,.08)!important;}
body:not([data-app-area="app"]) .staff-main,body[data-app-area="staff"] .staff-main{min-width:0!important;min-height:100vh!important;margin:0!important;background:var(--app-bg,#f6f8fc)!important;}
body:not([data-app-area="app"]) .staff-main main,body[data-app-area="staff"] .staff-main main{padding:var(--app-content-padding)!important;margin:0!important;}
body:not([data-app-area="app"]) .staff-topbar,body[data-app-area="staff"] .staff-topbar{height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;padding:0 18px!important;background:var(--app-surface,#fff)!important;border-bottom:1px solid var(--app-border,#dbe4f0)!important;box-shadow:none!important;}
body:not([data-app-area="app"]) .staff-nav,body[data-app-area="staff"] .staff-nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-inline-end:2px!important;gap:5px!important;}
body:not([data-app-area="app"]) .staff-nav .nav-link,body[data-app-area="staff"] .staff-nav .nav-link{min-height:var(--sidebar-item-height)!important;border-radius:14px!important;color:var(--app-text,#0f172a)!important;background:transparent!important;}
body:not([data-app-area="app"]) .staff-nav .nav-link i,body[data-app-area="staff"] .staff-nav .nav-link i{color:#334155!important;}
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-nav .nav-link i,html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-nav .nav-link i{color:#e2e8f0!important;}
body:not([data-app-area="app"]) .staff-nav .nav-link.active,body:not([data-app-area="app"]) .staff-nav .nav-link:hover,body[data-app-area="staff"] .staff-nav .nav-link.active,body[data-app-area="staff"] .staff-nav .nav-link:hover{background:color-mix(in srgb,var(--app-primary,#2563eb) 13%,transparent)!important;color:var(--app-primary,#2563eb)!important;}
body:not([data-app-area="app"]) .staff-bottom,body[data-app-area="staff"] .staff-bottom{margin-top:auto!important;border-top:1px solid var(--app-border,#dbe4f0)!important;padding-top:12px!important;}
body:not([data-app-area="app"]) .staff-app-link,body[data-app-area="staff"] .staff-app-link{flex-direction:column!important;text-align:center!important;background:transparent!important;border:0!important;box-shadow:none!important;}
body:not([data-app-area="app"]) .staff-app-link img,body[data-app-area="staff"] .staff-app-link img{width:var(--sidebar-footer-logo-width)!important;height:auto!important;border-radius:0!important;object-fit:contain!important;}
body.staff-sidebar-compact .staff-shell{grid-template-columns:86px minmax(0,1fr)!important;}
body.staff-sidebar-compact .staff-sidebar{width:86px!important;padding-inline:10px!important;overflow:visible!important;}
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-brand-title,
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-brand-sub,
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-nav .nav-link:not(i),
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-nav .nav-link span,
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-app-link div{display:none!important;}
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-nav .nav-link{justify-content:center!important;width:56px!important;height:56px!important;margin-inline:auto!important;padding:0!important;}
body.staff-sidebar-compact .staff-sidebar:hover{width:var(--staff-sidebar-width)!important;box-shadow:0 24px 72px rgba(15,23,42,.18)!important;}
body.staff-sidebar-compact .staff-sidebar-toggle{position:absolute!important;top:76px!important;left:-15px!important;z-index:3000!important;}
/* Staff compact label fix */
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-nav .nav-link{display:flex!important;}
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-nav .nav-label,
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-brand-title,
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-brand-sub,
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-app-link div{display:none!important;}
body.staff-sidebar-compact .staff-sidebar:hover .staff-nav .nav-label{display:inline!important;}
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-brand{justify-content:center!important;}
body.staff-sidebar-compact .staff-sidebar:not(:hover) .staff-brand-logo{margin-inline:auto!important;}


/* =========================================================
   OPTIMAT STAFF Sidebar targeted fix v8.4
   Scope: STAFF only. Does not change APP sidebar.
   Fixes: huge footer logo, compact icon mode, sticky header,
   and reliable vertical layout without page breakage.
   ========================================================= */
@media (min-width: 992px) {
  body.staff-ui,
  body[data-app-area="staff"] {
    overflow-x: hidden !important;
  }

  body.staff-ui .staff-shell,
  body[data-app-area="staff"] .staff-shell,
  body:not([data-app-area="app"]) .staff-shell {
    display: grid !important;
    grid-template-columns: var(--staff-sidebar-width, 280px) minmax(0, 1fr) !important;
    min-height: 100vh !important;
    align-items: stretch !important;
    background: var(--app-bg, #f6f8fc) !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-shell,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-shell,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-shell {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }

  body.staff-ui .staff-sidebar,
  body[data-app-area="staff"] .staff-sidebar,
  body:not([data-app-area="app"]) .staff-sidebar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    width: var(--staff-sidebar-width, 280px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 14px !important;
    background: var(--sidebar-bg, var(--app-surface, #fff)) !important;
    color: var(--app-text, #0f172a) !important;
    border-inline-end: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .075) !important;
    z-index: 1040 !important;
  }

  body.staff-ui .staff-main,
  body[data-app-area="staff"] .staff-main,
  body:not([data-app-area="app"]) .staff-main {
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    background: var(--app-bg, #f6f8fc) !important;
  }

  body.staff-ui .staff-main main,
  body[data-app-area="staff"] .staff-main main,
  body:not([data-app-area="app"]) .staff-main main {
    margin: 0 !important;
    padding: var(--app-content-padding, 24px) !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.staff-ui .staff-topbar,
  body[data-app-area="staff"] .staff-topbar,
  body:not([data-app-area="app"]) .staff-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    height: var(--app-header-height, 60px) !important;
    min-height: var(--app-header-height, 60px) !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    background: var(--app-surface, #fff) !important;
    border-bottom: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: none !important;
  }

  body.staff-ui .staff-topbar > .d-flex,
  body[data-app-area="staff"] .staff-topbar > .d-flex,
  body:not([data-app-area="app"]) .staff-topbar > .d-flex {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  body.staff-ui .staff-nav,
  body[data-app-area="staff"] .staff-nav,
  body:not([data-app-area="app"]) .staff-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-inline-end: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    scrollbar-width: thin !important;
  }

  body.staff-ui .staff-bottom,
  body[data-app-area="staff"] .staff-bottom,
  body:not([data-app-area="app"]) .staff-bottom {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--app-border, #dbe4f0) !important;
    background: transparent !important;
  }

  body.staff-ui .staff-footer-brand,
  body[data-app-area="staff"] .staff-footer-brand,
  body:not([data-app-area="app"]) .staff-footer-brand,
  body.staff-ui .staff-app-link,
  body[data-app-area="staff"] .staff-app-link,
  body:not([data-app-area="app"]) .staff-app-link {
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 6px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--app-text, #0f172a) !important;
    overflow: hidden !important;
  }

  body.staff-ui .staff-footer-logo,
  body[data-app-area="staff"] .staff-footer-logo,
  body:not([data-app-area="app"]) .staff-footer-logo,
  body.staff-ui .staff-app-link img,
  body[data-app-area="staff"] .staff-app-link img,
  body:not([data-app-area="app"]) .staff-app-link img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.staff-ui .staff-footer-copy,
  body[data-app-area="staff"] .staff-footer-copy,
  body:not([data-app-area="app"]) .staff-footer-copy,
  body.staff-ui .staff-bottom .small,
  body[data-app-area="staff"] .staff-bottom .small,
  body:not([data-app-area="app"]) .staff-bottom .small {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: var(--app-muted, #64748b) !important;
    max-width: 180px !important;
  }

  body.staff-ui .staff-nav .nav-link,
  body[data-app-area="staff"] .staff-nav .nav-link,
  body:not([data-app-area="app"]) .staff-nav .nav-link {
    min-height: var(--sidebar-item-height, 48px) !important;
    border-radius: 14px !important;
    padding: .72rem .92rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: var(--app-text, #0f172a) !important;
    background: transparent !important;
    font-weight: 750 !important;
  }

  body.staff-ui .staff-nav .nav-link i,
  body[data-app-area="staff"] .staff-nav .nav-link i,
  body:not([data-app-area="app"]) .staff-nav .nav-link i {
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    text-align: center !important;
    font-size: 1.12rem !important;
    color: #334155 !important;
  }

  html[data-bs-theme="dark"] body.staff-ui .staff-nav .nav-link i,
  html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-nav .nav-link i,
  html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-nav .nav-link i {
    color: #e2e8f0 !important;
  }

  body.staff-ui .staff-nav .nav-link.active,
  body.staff-ui .staff-nav .nav-link:hover,
  body[data-app-area="staff"] .staff-nav .nav-link.active,
  body[data-app-area="staff"] .staff-nav .nav-link:hover,
  body:not([data-app-area="app"]) .staff-nav .nav-link.active,
  body:not([data-app-area="app"]) .staff-nav .nav-link:hover {
    background: color-mix(in srgb, var(--app-primary, #2563eb) 13%, transparent) !important;
    color: var(--app-primary, #2563eb) !important;
  }

  body.staff-ui .staff-nav .nav-link.active i,
  body.staff-ui .staff-nav .nav-link:hover i,
  body[data-app-area="staff"] .staff-nav .nav-link.active i,
  body[data-app-area="staff"] .staff-nav .nav-link:hover i,
  body:not([data-app-area="app"]) .staff-nav .nav-link.active i,
  body:not([data-app-area="app"]) .staff-nav .nav-link:hover i {
    color: var(--app-primary, #2563eb) !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-sidebar,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar {
    width: 86px !important;
    padding-inline: 10px !important;
    overflow: visible !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-sidebar:hover,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:hover,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:hover {
    width: var(--staff-sidebar-width, 280px) !important;
    box-shadow: 0 24px 72px rgba(15,23,42,.18) !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-brand-title,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-brand-sub,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-label,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-copy,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-brand-title,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-brand-sub,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-label,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-copy,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-brand-title,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-brand-sub,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-label,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-copy {
    display: none !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link {
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin-inline: auto !important;
    font-size: 0 !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link i {
    font-size: 1.18rem !important;
    margin: 0 !important;
  }

  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link img,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link img,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link img {
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  body.staff-ui .staff-sidebar-toggle,
  body[data-app-area="staff"] .staff-sidebar-toggle,
  body:not([data-app-area="app"]) .staff-sidebar-toggle {
    position: absolute !important;
    top: 76px !important;
    inset-inline-end: -15px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    z-index: 3000 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--app-surface, #fff) !important;
    color: var(--app-text, #0f172a) !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.13) !important;
  }
}

/* =========================================================
   OPTIMAT Shell Precision Fix v9.7
   Final overrides for APP + STAFF sidebar/topbar stability.
   ========================================================= */
:root{
  --sidebar-width:292px;
  --sidebar-collapsed-width:86px;
  --staff-sidebar-width:280px;
  --staff-sidebar-collapsed-width:86px;
  --app-header-height:64px;
  --app-content-padding:24px;
  --sidebar-logo-full-width:120px;
  --sidebar-logo-icon-size:44px;
  --topbar-search-width:360px;
  --topbar-brand-logo-width:92px;
}
html,body{min-height:100%;overflow-x:hidden!important;}

/* Topbar logo + search: logo appears before the search in RTL */
body[data-app-area="app"] .app-topbar,
body[data-app-area="staff"] .staff-topbar,
body.staff-ui .staff-topbar,
body:not([data-app-area="app"]) .staff-topbar{overflow:visible!important;}
body[data-app-area="app"] .app-topbar>.container-fluid,
body[data-app-area="staff"] .staff-topbar,
body.staff-ui .staff-topbar,
body:not([data-app-area="app"]) .staff-topbar{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:10px!important;min-width:0!important;}
body[data-app-area="app"] .topbar-brand-chip,
body[data-app-area="staff"] .topbar-brand-chip,
body.staff-ui .topbar-brand-chip,
body:not([data-app-area="app"]) .topbar-brand-chip{order:-20!important;flex:0 0 auto!important;height:48px!important;min-width:108px!important;max-width:148px!important;padding:6px 10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:1px solid var(--app-border,#dbe4f0)!important;border-radius:16px!important;background:var(--app-surface,#fff)!important;box-shadow:none!important;overflow:hidden!important;white-space:nowrap!important;}
body[data-app-area="app"] .topbar-brand-chip img,
body[data-app-area="staff"] .topbar-brand-chip img,
body.staff-ui .topbar-brand-chip img,
body:not([data-app-area="app"]) .topbar-brand-chip img{width:var(--topbar-brand-logo-width)!important;max-width:var(--topbar-brand-logo-width)!important;height:36px!important;max-height:36px!important;object-fit:contain!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;}
body[data-app-area="app"] .topbar-search,
body[data-app-area="staff"] .topbar-search,
body.staff-ui .topbar-search,
body:not([data-app-area="app"]) .topbar-search{order:-19!important;flex:0 1 var(--topbar-search-width)!important;width:var(--topbar-search-width)!important;max-width:min(var(--topbar-search-width),32vw)!important;min-width:230px!important;height:48px!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;border:1px solid var(--app-border,#dbe4f0)!important;border-radius:16px!important;background:var(--app-surface,#fff)!important;overflow:hidden!important;box-shadow:none!important;}
body[data-app-area="app"] .topbar-search .form-control,body[data-app-area="app"] .topbar-search .input-group-text,
body[data-app-area="staff"] .topbar-search .form-control,body[data-app-area="staff"] .topbar-search .input-group-text,
body.staff-ui .topbar-search .form-control,body.staff-ui .topbar-search .input-group-text,
body:not([data-app-area="app"]) .topbar-search .form-control,body:not([data-app-area="app"]) .topbar-search .input-group-text{height:46px!important;border:0!important;background:transparent!important;box-shadow:none!important;white-space:nowrap!important;}
body[data-app-area="app"] .topbar-search .form-control,
body[data-app-area="staff"] .topbar-search .form-control,
body.staff-ui .topbar-search .form-control,
body:not([data-app-area="app"]) .topbar-search .form-control{min-width:0!important;}

@media (min-width:992px){
  /* APP fixed layout */
  body[data-app-area="app"] .app-shell{display:block!important;min-height:100vh!important;background:var(--app-bg,#f6f8fc)!important;overflow:visible!important;}
  body[data-app-area="app"] .app-sidebar{position:fixed!important;inset-block:0!important;inset-inline-start:0!important;inset-inline-end:auto!important;width:var(--sidebar-width)!important;height:100dvh!important;max-height:100dvh!important;z-index:1040!important;display:flex!important;flex-direction:column!important;overflow:visible!important;background:var(--sidebar-bg,var(--app-surface,#fff))!important;border-inline-end:1px solid var(--app-border,#dbe4f0)!important;border-inline-start:0!important;box-shadow:0 18px 48px rgba(15,23,42,.08)!important;transition:width .22s ease,box-shadow .22s ease!important;}
  body[data-app-area="app"] .app-sidebar .offcanvas-header{flex:0 0 auto!important;min-height:86px!important;}
  body[data-app-area="app"] .app-sidebar .offcanvas-body{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  body[data-app-area="app"] .sidebar-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;}
  body[data-app-area="app"] .sidebar-bottom-zone,body[data-app-area="app"] .sidebar-app-footer{flex:0 0 auto!important;margin-top:auto!important;overflow:visible!important;}
  body[data-app-area="app"] .app-main{margin-inline-start:var(--sidebar-width)!important;margin-inline-end:0!important;min-height:100vh!important;min-width:0!important;width:auto!important;background:var(--app-bg,#f6f8fc)!important;transition:margin .22s ease!important;PADDING-TOP: var(--optimat-app-header-height);}
  body[data-app-area="app"] .app-topbar{position:fixed!important;top:0!important;inset-inline-start:var(--sidebar-width)!important;inset-inline-end:0!important;height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;z-index:1035!important;background:var(--app-surface,#fff)!important;border-bottom:1px solid var(--app-border,#dbe4f0)!important;box-shadow:none!important;}
  body[data-app-area="app"] .app-content{padding:var(--app-content-padding)!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed-width)!important;}
  body[data-app-area="app"].sidebar-collapsed .app-main{margin-inline-start:var(--sidebar-collapsed-width)!important;}
  body[data-app-area="app"].sidebar-collapsed .app-topbar{inset-inline-start:var(--sidebar-collapsed-width)!important;}
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:hover,body[data-app-area="app"].sidebar-collapsed .app-sidebar.is-hover-expanded{width:var(--sidebar-width)!important;z-index:1060!important;box-shadow:0 24px 72px rgba(15,23,42,.18)!important;}

  /* STAFF fixed layout: avoids sticky/grid/wrap conflicts */
  body[data-app-area="staff"] .staff-shell,body.staff-ui .staff-shell,body:not([data-app-area="app"]) .staff-shell{display:block!important;min-height:100vh!important;background:var(--app-bg,#f6f8fc)!important;overflow:visible!important;}
  body[data-app-area="staff"] .staff-sidebar,body.staff-ui .staff-sidebar,body:not([data-app-area="app"]) .staff-sidebar{position:fixed!important;inset-block:0!important;inset-inline-start:0!important;inset-inline-end:auto!important;width:var(--staff-sidebar-width)!important;height:100dvh!important;max-height:100dvh!important;z-index:1040!important;padding:14px!important;display:flex!important;flex-direction:column!important;gap:12px!important;overflow:visible!important;background:var(--sidebar-bg,var(--app-surface,#fff))!important;color:var(--app-text,#0f172a)!important;border-inline-end:1px solid var(--app-border,#dbe4f0)!important;border-inline-start:0!important;box-shadow:0 18px 48px rgba(15,23,42,.08)!important;transition:width .22s ease,box-shadow .22s ease!important;}
  body[data-app-area="staff"] .staff-main,body.staff-ui .staff-main,body:not([data-app-area="app"]) .staff-main{margin-inline-start:var(--staff-sidebar-width)!important;margin-inline-end:0!important;padding-block-start:var(--app-header-height)!important;min-width:0!important;min-height:100vh!important;background:var(--app-bg,#f6f8fc)!important;transition:margin .22s ease!important;}
  body[data-app-area="staff"] .staff-topbar,body.staff-ui .staff-topbar,body:not([data-app-area="app"]) .staff-topbar{position:fixed!important;top:0!important;inset-inline-start:var(--staff-sidebar-width)!important;inset-inline-end:0!important;height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;z-index:1035!important;padding:0 16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;overflow:visible!important;background:var(--app-surface,#fff)!important;border-bottom:1px solid var(--app-border,#dbe4f0)!important;box-shadow:none!important;transition:inset .22s ease!important;}
  body[data-app-area="staff"] .staff-topbar>*,body.staff-ui .staff-topbar>*,body:not([data-app-area="app"]) .staff-topbar>*,body[data-app-area="staff"] .staff-topbar .d-flex,body.staff-ui .staff-topbar .d-flex,body:not([data-app-area="app"]) .staff-topbar .d-flex{min-width:0!important;flex-wrap:nowrap!important;}
  body[data-app-area="staff"] .staff-main main,body.staff-ui .staff-main main,body:not([data-app-area="app"]) .staff-main main{padding:var(--app-content-padding)!important;margin:0!important;max-width:100%!important;overflow-x:hidden!important;}
  body[data-app-area="staff"] .staff-nav,body.staff-ui .staff-nav,body:not([data-app-area="app"]) .staff-nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;display:flex!important;flex-direction:column!important;flex-wrap: nowrap;gap:5px!important;padding-inline-end:2px!important;scrollbar-width:thin!important;}
  body[data-app-area="staff"] .staff-bottom,body.staff-ui .staff-bottom,body:not([data-app-area="app"]) .staff-bottom{flex:0 0 auto!important;margin-top:auto!important;overflow:visible!important;}
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar,body.staff-sidebar-compact.staff-ui .staff-sidebar,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar{width:var(--staff-sidebar-collapsed-width)!important;padding-inline:10px!important;}
  body.staff-sidebar-compact[data-app-area="staff"] .staff-main,body.staff-sidebar-compact.staff-ui .staff-main,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-main{margin-inline-start:var(--staff-sidebar-collapsed-width)!important;}
  body.staff-sidebar-compact[data-app-area="staff"] .staff-topbar,body.staff-sidebar-compact.staff-ui .staff-topbar,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-topbar{inset-inline-start:var(--staff-sidebar-collapsed-width)!important;}
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:hover,body.staff-sidebar-compact.staff-ui .staff-sidebar:hover,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:hover{width:var(--staff-sidebar-width)!important;z-index:1060!important;box-shadow:0 24px 72px rgba(15,23,42,.18)!important;}
}

/* STAFF nav: no wrapping, icons visible in compact */
body[data-app-area="staff"] .staff-nav .nav-link,body.staff-ui .staff-nav .nav-link,body:not([data-app-area="app"]) .staff-nav .nav-link{min-height:48px!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;flex-wrap:nowrap!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border-radius:14px!important;padding:.72rem .92rem!important;line-height:1.2!important;font-weight:750!important;}
body[data-app-area="staff"] .staff-nav .nav-link i,body.staff-ui .staff-nav .nav-link i,body:not([data-app-area="app"]) .staff-nav .nav-link i{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 22px!important;width:22px!important;min-width:22px!important;height:22px!important;margin:0!important;font-size:1.15rem!important;opacity:1!important;visibility:visible!important;color:#334155!important;}
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-nav .nav-link i,html[data-bs-theme="dark"] body.staff-ui .staff-nav .nav-link i,html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-nav .nav-link i{color:#e2e8f0!important;}
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link{width:56px!important;min-width:56px!important;height:56px!important;min-height:56px!important;padding:0!important;margin-inline:auto!important;justify-content:center!important;gap:0!important;font-size:0!important;text-indent:0!important;}
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link i,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link i,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link i{flex:0 0 24px!important;width:24px!important;min-width:24px!important;height:24px!important;font-size:1.22rem!important;opacity:1!important;visibility:visible!important;}
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-label,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-label,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-label,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-brand-title,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-brand-title,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-brand-title,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-brand-sub,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-brand-sub,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-brand-sub,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-copy,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-copy,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-copy,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-bottom .small,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-bottom .small,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-bottom .small{display:none!important;}

/* APP compact user/profile avatar must remain visible */
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-card,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-user,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-user-chip{width:56px!important;min-width:56px!important;min-height:56px!important;height:auto!important;margin-inline:auto!important;padding:6px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-card img,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-avatar,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .user-avatar,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .profile-avatar,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .avatar{display:block!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;border-radius:16px!important;object-fit:cover!important;opacity:1!important;visibility:visible!important;overflow:hidden!important;}

/* Footer sidebar logo: closed = cropped app icon, open = full logo */
body[data-app-area="app"] .sidebar-app-link .app-brand-logo,body[data-app-area="app"] .sidebar-app-link .app-brand-logo img,body[data-app-area="app"] .sidebar-footer-logo,body[data-app-area="app"] .sidebar-footer-logo img,body[data-app-area="staff"] .staff-footer-logo,body.staff-ui .staff-footer-logo,body:not([data-app-area="app"]) .staff-footer-logo,body[data-app-area="staff"] .staff-app-link img,body.staff-ui .staff-app-link img,body:not([data-app-area="app"]) .staff-app-link img{width:var(--sidebar-logo-full-width)!important;max-width:var(--sidebar-logo-full-width)!important;height:auto!important;max-height:54px!important;object-fit:contain!important;object-position:center center!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link{width:56px!important;min-width:56px!important;height:56px!important;min-height:56px!important;padding:6px!important;margin-inline:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo{width:var(--sidebar-logo-icon-size)!important;min-width:var(--sidebar-logo-icon-size)!important;height:var(--sidebar-logo-icon-size)!important;max-height:var(--sidebar-logo-icon-size)!important;overflow:hidden!important;display:block!important;}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo img,body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo img,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo img,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo img,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo img,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link img,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link img,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link img{width:120px!important;max-width:none!important;height:44px!important;max-height:44px!important;object-fit:cover!important;object-position:left center!important;border-radius:0!important;}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer-text,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link div,body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link div,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link div{display:none!important;}

/* Toggle button: arrow only, correct RTL/LTR direction */
body[data-app-area="app"] .sidebar-toggle-desktop,body[data-app-area="staff"] .staff-sidebar-toggle,body.staff-ui .staff-sidebar-toggle,body:not([data-app-area="app"]) .staff-sidebar-toggle{position:absolute!important;top:76px!important;inset-inline-end:-15px!important;inset-inline-start:auto!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;margin:0!important;z-index:3000!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;border:1px solid var(--app-border,#dbe4f0)!important;background:var(--app-surface,#fff)!important;color:var(--app-text,#0f172a)!important;box-shadow:0 10px 24px rgba(15,23,42,.13)!important;overflow:hidden!important;font-size:0!important;line-height:1!important;}
body[data-app-area="app"] .sidebar-toggle-desktop>*,body[data-app-area="staff"] .staff-sidebar-toggle>*,body.staff-ui .staff-sidebar-toggle>*,body:not([data-app-area="app"]) .staff-sidebar-toggle>*{display:none!important;}
body[data-app-area="app"] .sidebar-toggle-desktop::before,body[data-app-area="staff"] .staff-sidebar-toggle::before,body.staff-ui .staff-sidebar-toggle::before,body:not([data-app-area="app"]) .staff-sidebar-toggle::before{content:"›";display:block!important;font-size:24px!important;font-weight:800!important;line-height:24px!important;transform:translateY(-1px);}
body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar-toggle::before,body.staff-sidebar-compact.staff-ui .staff-sidebar-toggle::before,body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar-toggle::before{content:"‹";}
html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop::before,html[dir="ltr"] body[data-app-area="staff"] .staff-sidebar-toggle::before,html[dir="ltr"] body.staff-ui .staff-sidebar-toggle::before,html[dir="ltr"] body:not([data-app-area="app"]) .staff-sidebar-toggle::before{content:"‹";}
html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,html[dir="ltr"] body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar-toggle::before,html[dir="ltr"] body.staff-sidebar-compact.staff-ui .staff-sidebar-toggle::before,html[dir="ltr"] body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar-toggle::before{content:"›";}

@media (max-width:991.98px){
  body[data-app-area="app"] .app-main,body[data-app-area="staff"] .staff-main,body.staff-ui .staff-main,body:not([data-app-area="app"]) .staff-main{margin:0!important;padding-block-start:0!important;}
  body[data-app-area="app"] .app-topbar,body[data-app-area="staff"] .staff-topbar,body.staff-ui .staff-topbar,body:not([data-app-area="app"]) .staff-topbar{position:sticky!important;top:0!important;inset-inline-start:auto!important;inset-inline-end:auto!important;z-index:1035!important;}
  body[data-app-area="app"] .topbar-search,body[data-app-area="staff"] .topbar-search,body.staff-ui .topbar-search,body:not([data-app-area="app"]) .topbar-search{min-width:0!important;max-width:100%!important;flex:1 1 auto!important;}
}

/* =========================================================
   OPTIMAT Shell Precision Fix v9.8
   Scope-safe final patch for RTL arrows, STAFF compact icons,
   and APP sidebar visual parity with STAFF without changing HTML.
   ========================================================= */
:root{
  --sidebar-width:292px;
  --sidebar-collapsed-width:86px;
  --staff-sidebar-width:280px;
  --staff-sidebar-collapsed-width:86px;
  --app-header-height:64px;
  --sidebar-toggle-size:30px;
  --sidebar-item-size:56px;
  --sidebar-icon-size:24px;
  --sidebar-footer-logo-full:120px;
  --sidebar-footer-logo-icon:44px;
}

/* 1) Toggle arrows: keep LTR behavior as-is; flip only under RTL. */
body[data-app-area="app"] .sidebar-toggle-desktop::before,
body[data-app-area="staff"] .staff-sidebar-toggle::before,
body.staff-ui .staff-sidebar-toggle::before,
body:not([data-app-area="app"]) .staff-sidebar-toggle::before{
  content:"‹" !important;
  display:block !important;
  font-size:24px !important;
  font-weight:800 !important;
  line-height:24px !important;
  transform:translateY(-1px) !important;
}
body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar-toggle::before,
body.staff-sidebar-compact.staff-ui .staff-sidebar-toggle::before,
body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar-toggle::before{
  content:"›" !important;
}
html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
html[dir="rtl"] body[data-app-area="staff"] .staff-sidebar-toggle::before,
html[dir="rtl"] body.staff-ui .staff-sidebar-toggle::before,
html[dir="rtl"] body:not([data-app-area="app"]) .staff-sidebar-toggle::before{
  content:"›" !important;
}
html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
html[dir="rtl"] body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar-toggle::before,
html[dir="rtl"] body.staff-sidebar-compact.staff-ui .staff-sidebar-toggle::before,
html[dir="rtl"] body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar-toggle::before{
  content:"‹" !important;
}

/* 2) Shared toggle position and clean button body. */
body[data-app-area="app"] .sidebar-toggle-desktop,
body[data-app-area="staff"] .staff-sidebar-toggle,
body.staff-ui .staff-sidebar-toggle,
body:not([data-app-area="app"]) .staff-sidebar-toggle{
  position:absolute !important;
  top:76px !important;
  inset-inline-end:-15px !important;
  inset-inline-start:auto !important;
  width:var(--sidebar-toggle-size) !important;
  min-width:var(--sidebar-toggle-size) !important;
  height:var(--sidebar-toggle-size) !important;
  min-height:var(--sidebar-toggle-size) !important;
  padding:0 !important;
  margin:0 !important;
  z-index:4000 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid var(--app-border,#dbe4f0) !important;
  background:var(--app-surface,#fff) !important;
  color:var(--app-text,#0f172a) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.13) !important;
  overflow:hidden !important;
  font-size:0 !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}
body[data-app-area="app"] .sidebar-toggle-desktop > *,
body[data-app-area="staff"] .staff-sidebar-toggle > *,
body.staff-ui .staff-sidebar-toggle > *,
body:not([data-app-area="app"]) .staff-sidebar-toggle > *{
  display:none !important;
}

/* 3) STAFF compact mode: never hide the nav items or icons. Hide labels only. */
@media (min-width:992px){
  body.staff-sidebar-compact[data-app-area="staff"] .staff-shell,
  body.staff-sidebar-compact.staff-ui .staff-shell,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-shell{
    display:block !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar,
  body.staff-sidebar-compact.staff-ui .staff-sidebar,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    width:var(--staff-sidebar-collapsed-width) !important;
    min-width:var(--staff-sidebar-collapsed-width) !important;
    max-width:var(--staff-sidebar-collapsed-width) !important;
    overflow:visible !important;
    padding:14px 10px !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:hover,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:hover,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:hover{
    width:var(--staff-sidebar-width) !important;
    min-width:var(--staff-sidebar-width) !important;
    max-width:var(--staff-sidebar-width) !important;
    box-shadow:0 24px 72px rgba(15,23,42,.18) !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-main,
  body.staff-sidebar-compact.staff-ui .staff-main,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-main{
    margin-inline-start:var(--staff-sidebar-collapsed-width) !important;
    margin-inline-end:0 !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-topbar,
  body.staff-sidebar-compact.staff-ui .staff-topbar,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-topbar{
    inset-inline-start:var(--staff-sidebar-collapsed-width) !important;
    inset-inline-end:0 !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:hover ~ .staff-main,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:hover ~ .staff-main,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:hover ~ .staff-main{
    margin-inline-start:var(--staff-sidebar-collapsed-width) !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-nav,
  body.staff-sidebar-compact.staff-ui .staff-nav,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link:not(i),
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link:not(i),
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link:not(i){
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    width:var(--sidebar-item-size) !important;
    min-width:var(--sidebar-item-size) !important;
    height:var(--sidebar-item-size) !important;
    min-height:var(--sidebar-item-size) !important;
    padding:0 !important;
    margin-inline:auto !important;
    overflow:visible !important;
    font-size:0 !important;
    line-height:1 !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link .bi,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link .bi,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link .bi{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 var(--sidebar-icon-size) !important;
    width:var(--sidebar-icon-size) !important;
    min-width:var(--sidebar-icon-size) !important;
    height:var(--sidebar-icon-size) !important;
    min-height:var(--sidebar-icon-size) !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    font-size:1.22rem !important;
    line-height:1 !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-label,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-label,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-label,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-brand-title,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-brand-title,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-brand-title,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-brand-sub,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-brand-sub,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-brand-sub,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-copy,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-copy,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-copy,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-bottom .small,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-bottom .small,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-bottom .small{
    display:none !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:hover .staff-nav .nav-link,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:hover .staff-nav .nav-link,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:hover .staff-nav .nav-link{
    display:flex !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:48px !important;
    padding:.72rem .92rem !important;
    font-size:.94rem !important;
    overflow:hidden !important;
  }
}

/* 4) APP sidebar gets STAFF-like shell styling, while keeping its groups/cards/accordion structure. */
@media (min-width:992px){
  body[data-app-area="app"] .app-sidebar{
    width:var(--sidebar-width) !important;
    min-width:var(--sidebar-width) !important;
    max-width:var(--sidebar-width) !important;
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    background:var(--sidebar-bg,var(--app-surface,#fff)) !important;
    border-inline-end:1px solid var(--app-border,#dbe4f0) !important;
    box-shadow:0 18px 48px rgba(15,23,42,.08) !important;
    overflow:visible !important;
  }
  body[data-app-area="app"] .app-sidebar .offcanvas-header{
    height:auto !important;
    min-height:62px !important;
    padding:0 0 12px !important;
    border-bottom:1px solid var(--app-border,#dbe4f0) !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    overflow:visible !important;
  }
  body[data-app-area="app"] .app-sidebar .offcanvas-body{
    height:auto !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    overflow:hidden !important;
  }
  body[data-app-area="app"] .sidebar-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-inline-end:2px !important;
  }
  body[data-app-area="app"] .sidebar-group-toggle,
  body[data-app-area="app"] .sidebar-nav-link,
  body[data-app-area="app"] .sidebar-app-link{
    min-height:48px !important;
    border-radius:14px !important;
    padding:.72rem .92rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.75rem !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    color:var(--app-text,#0f172a) !important;
    background:transparent !important;
    font-weight:750 !important;
    border:0 !important;
    box-shadow:none !important;
  }
  body[data-app-area="app"] .sidebar-group-toggle:hover,
  body[data-app-area="app"] .sidebar-nav-link:hover,
  body[data-app-area="app"] .sidebar-app-link:hover,
  body[data-app-area="app"] .sidebar-group-toggle.active-group,
  body[data-app-area="app"] .sidebar-nav-link.active{
    background:color-mix(in srgb,var(--app-primary,#2563eb) 13%,transparent) !important;
    color:var(--app-primary,#2563eb) !important;
  }
  body[data-app-area="app"] .sidebar-group-icon,
  body[data-app-area="app"] .sidebar-icon,
  body[data-app-area="app"] .sidebar-nav-link i,
  body[data-app-area="app"] .sidebar-group-toggle i,
  body[data-app-area="app"] .sidebar-nav-link .bi,
  body[data-app-area="app"] .sidebar-group-toggle .bi{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 22px !important;
    width:22px !important;
    min-width:22px !important;
    height:22px !important;
    min-height:22px !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    font-size:1.12rem !important;
    color:#334155 !important;
  }
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-icon,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-icon,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-nav-link i,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-toggle i,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-nav-link .bi,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-toggle .bi{
    color:#e2e8f0 !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded){
    width:var(--sidebar-collapsed-width) !important;
    min-width:var(--sidebar-collapsed-width) !important;
    max-width:var(--sidebar-collapsed-width) !important;
    padding-inline:10px !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:hover,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar.is-hover-expanded{
    width:var(--sidebar-width) !important;
    min-width:var(--sidebar-width) !important;
    max-width:var(--sidebar-width) !important;
    padding-inline:14px !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:var(--sidebar-item-size) !important;
    min-width:var(--sidebar-item-size) !important;
    height:var(--sidebar-item-size) !important;
    min-height:var(--sidebar-item-size) !important;
    padding:0 !important;
    margin-inline:auto !important;
    overflow:visible !important;
    font-size:0 !important;
    line-height:1 !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link i,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle i,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link .bi,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle .bi{
    display:inline-flex !important;
    flex:0 0 var(--sidebar-icon-size) !important;
    width:var(--sidebar-icon-size) !important;
    min-width:var(--sidebar-icon-size) !important;
    height:var(--sidebar-icon-size) !important;
    min-height:var(--sidebar-icon-size) !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    font-size:1.22rem !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-label,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-title,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-chevron,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-header-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-role-chip,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-subtitle,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-meta,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-bottom-meta,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer-text{
    display:none !important;
  }
}

/* 5) User avatar in compact APP mode must always remain visible. */
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-card,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-user,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-user-chip{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--sidebar-item-size) !important;
  min-width:var(--sidebar-item-size) !important;
  min-height:var(--sidebar-item-size) !important;
  padding:6px !important;
  margin-inline:auto !important;
  overflow:visible !important;
}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-card img,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-avatar,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .user-avatar,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .profile-avatar,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .avatar{
  display:block !important;
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:16px !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* 6) Footer logo behavior: collapsed = app icon crop, expanded/hover = full logo. */
body[data-app-area="app"] .sidebar-app-link .app-brand-logo,
body[data-app-area="app"] .sidebar-footer-logo,
body[data-app-area="staff"] .staff-footer-logo,
body.staff-ui .staff-footer-logo,
body:not([data-app-area="app"]) .staff-footer-logo{
  width:var(--sidebar-footer-logo-full) !important;
  max-width:var(--sidebar-footer-logo-full) !important;
  height:auto !important;
  max-height:54px !important;
  overflow:visible !important;
}
body[data-app-area="app"] .sidebar-app-link .app-brand-logo img,
body[data-app-area="app"] .sidebar-footer-logo img,
body[data-app-area="staff"] .staff-footer-logo img,
body.staff-ui .staff-footer-logo img,
body:not([data-app-area="app"]) .staff-footer-logo img,
body[data-app-area="staff"] .staff-app-link img,
body.staff-ui .staff-app-link img,
body:not([data-app-area="app"]) .staff-app-link img{
  width:var(--sidebar-footer-logo-full) !important;
  max-width:var(--sidebar-footer-logo-full) !important;
  height:auto !important;
  max-height:54px !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo,
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo,
body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo,
body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo{
  width:var(--sidebar-footer-logo-icon) !important;
  min-width:var(--sidebar-footer-logo-icon) !important;
  max-width:var(--sidebar-footer-logo-icon) !important;
  height:var(--sidebar-footer-logo-icon) !important;
  min-height:var(--sidebar-footer-logo-icon) !important;
  max-height:var(--sidebar-footer-logo-icon) !important;
  overflow:hidden !important;
  display:block !important;
}
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo img,
body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo img,
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo img,
body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo img,
body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo img,
body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link img,
body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link img,
body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link img{
  width:120px !important;
  max-width:none !important;
  height:44px !important;
  max-height:44px !important;
  object-fit:cover !important;
  object-position:left center !important;
}
html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo img,
html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo img,
html[dir="rtl"] body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo img,
html[dir="rtl"] body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo img,
html[dir="rtl"] body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo img,
html[dir="rtl"] body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link img,
html[dir="rtl"] body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link img,
html[dir="rtl"] body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link img{
  object-position:right center !important;
}

/* 7) No topbar/sidebar wrapping in STAFF. */
body[data-app-area="staff"] .staff-topbar,
body.staff-ui .staff-topbar,
body:not([data-app-area="app"]) .staff-topbar,
body[data-app-area="staff"] .staff-topbar > *,
body.staff-ui .staff-topbar > *,
body:not([data-app-area="app"]) .staff-topbar > *,
body[data-app-area="staff"] .staff-brand,
body.staff-ui .staff-brand,
body:not([data-app-area="app"]) .staff-brand{
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  min-width:0 !important;
}

/* =========================================================
   OPTIMAT v5.9 - APP/STAFF sidebar final parity fix
   Scope: CSS-only safe override. No HTML/logic changes.
   Fixes: RTL arrow direction, APP toggle placement, APP sidebar
   visual parity with STAFF, compact icons, small user chip,
   footer logo behavior, and no sidebar card shadows.
   ========================================================= */
@media (min-width: 992px) {
  :root {
    --optimat-sidebar-full: var(--sidebar-width, 292px);
    --optimat-sidebar-compact: var(--sidebar-collapsed-width, 86px);
    --optimat-staff-sidebar-full: var(--staff-sidebar-width, 280px);
    --optimat-sidebar-item: 56px;
    --optimat-sidebar-icon: 22px;
    --optimat-sidebar-logo-full: 120px;
    --optimat-sidebar-logo-icon: 44px;
  }

  /* ---------- 1) APP toggle button: same placement/style as STAFF ---------- */
  body[data-app-area="app"] .app-sidebar {
    overflow: visible !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop,
  body[data-app-area="staff"] .staff-sidebar-toggle,
  body.staff-ui .staff-sidebar-toggle,
  body:not([data-app-area="app"]) .staff-sidebar-toggle {
    position: absolute !important;
    top: 76px !important;
    bottom: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: -15px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    z-index: 3000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--app-surface, #fff) !important;
    color: var(--app-text, #0f172a) !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .13) !important;
    overflow: visible !important;
    line-height: 1 !important;
    font-size: 0 !important;
  }

  /* Hide the old icon/text inside the toggle and draw a deterministic arrow. */
  body[data-app-area="app"] .sidebar-toggle-desktop > *,
  body[data-app-area="staff"] .staff-sidebar-toggle > *,
  body.staff-ui .staff-sidebar-toggle > *,
  body:not([data-app-area="app"]) .staff-sidebar-toggle > * {
    display: none !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop::before,
  body[data-app-area="staff"] .staff-sidebar-toggle::before,
  body.staff-ui .staff-sidebar-toggle::before,
  body:not([data-app-area="app"]) .staff-sidebar-toggle::before {
    display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--app-text, #0f172a) !important;
    transform: translateY(-1px) !important;
  }

  /* LTR stays natural: left sidebar. Open = close left, collapsed = open right. */
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html[dir="ltr"] body[data-app-area="staff"] .staff-sidebar-toggle::before,
  html[dir="ltr"] body.staff-ui .staff-sidebar-toggle::before,
  html[dir="ltr"] body:not([data-app-area="app"]) .staff-sidebar-toggle::before {
    content: "‹" !important;
  }
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html[dir="ltr"] body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar-toggle::before,
  html[dir="ltr"] body.staff-sidebar-compact.staff-ui .staff-sidebar-toggle::before,
  html[dir="ltr"] body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar-toggle::before {
    content: "›" !important;
  }

  /* RTL only is flipped: right sidebar. Open = close right, collapsed = open left. */
  html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html[dir="rtl"] body[data-app-area="staff"] .staff-sidebar-toggle::before,
  html[dir="rtl"] body.staff-ui .staff-sidebar-toggle::before,
  html[dir="rtl"] body:not([data-app-area="app"]) .staff-sidebar-toggle::before {
    content: "›" !important;
  }
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html[dir="rtl"] body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar-toggle::before,
  html[dir="rtl"] body.staff-sidebar-compact.staff-ui .staff-sidebar-toggle::before,
  html[dir="rtl"] body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar-toggle::before {
    content: "‹" !important;
  }

  /* ---------- 2) Remove business/logo header from APP sidebar; business stays in topbar ---------- */
  body[data-app-area="app"] .app-sidebar .offcanvas-header {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  body[data-app-area="app"] .app-sidebar .offcanvas-header > :not(.sidebar-toggle-desktop) {
    display: none !important;
  }
  body[data-app-area="app"] .app-sidebar .offcanvas-body {
    height: 100vh !important;
    min-height: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Topbar brand/logo + search: brand first, then search. */
  body[data-app-area="app"] .app-topbar > .container-fluid {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  body[data-app-area="app"] .app-topbar .topbar-brand-chip {
    order: 10 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
  }
  body[data-app-area="app"] .app-topbar .topbar-search {
    order: 20 !important;
    flex: 0 1 420px !important;
    max-width: 420px !important;
  }

  /* ---------- 3) APP sidebar visual parity with STAFF ---------- */
  body[data-app-area="app"] .app-sidebar {
    width: var(--optimat-sidebar-full) !important;
    min-width: var(--optimat-sidebar-full) !important;
    max-width: var(--optimat-sidebar-full) !important;
    padding: 0 !important;
    background: var(--sidebar-bg, var(--app-surface, #fff)) !important;
    color: var(--app-text, #0f172a) !important;
    border-left: 1px solid var(--app-border, #dbe4f0) !important;
    border-right: 0 !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .075) !important;
  }
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar {
    border-right: 1px solid var(--app-border, #dbe4f0) !important;
    border-left: 0 !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) {
    width: var(--optimat-sidebar-compact) !important;
    min-width: var(--optimat-sidebar-compact) !important;
    max-width: var(--optimat-sidebar-compact) !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:hover,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar.is-hover-expanded {
    width: var(--optimat-sidebar-full) !important;
    min-width: var(--optimat-sidebar-full) !important;
    max-width: var(--optimat-sidebar-full) !important;
    box-shadow: 0 24px 72px rgba(15, 23, 42, .18) !important;
  }

  body[data-app-area="app"] .sidebar-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-inline-end: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    scrollbar-width: thin !important;
  }

  /* Remove card shadows/boxes from APP sidebar tabs/accordion. */
  body[data-app-area="app"] .app-sidebar .accordion,
  body[data-app-area="app"] .app-sidebar .accordion-item,
  body[data-app-area="app"] .app-sidebar .sidebar-group,
  body[data-app-area="app"] .app-sidebar .sidebar-profile-card,
  body[data-app-area="app"] .app-sidebar .sidebar-app-footer,
  body[data-app-area="app"] .app-sidebar .sidebar-app-link,
  body[data-app-area="app"] .app-sidebar .sidebar-nav-link,
  body[data-app-area="app"] .app-sidebar .sidebar-group-toggle {
    box-shadow: none !important;
  }

  body[data-app-area="app"] .app-sidebar .accordion,
  body[data-app-area="app"] .app-sidebar .accordion-item,
  body[data-app-area="app"] .app-sidebar .sidebar-group {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  body[data-app-area="app"] .sidebar-group-toggle,
  body[data-app-area="app"] .sidebar-nav-link {
    min-height: var(--sidebar-item-height, 48px) !important;
    height: auto !important;
    border-radius: 14px !important;
    padding: .72rem .92rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: var(--app-text, #0f172a) !important;
    background: transparent !important;
    font-weight: 750 !important;
    border: 0 !important;
  }
  body[data-app-area="app"] .sidebar-group-toggle:hover,
  body[data-app-area="app"] .sidebar-nav-link:hover,
  body[data-app-area="app"] .sidebar-group-toggle.active-group,
  body[data-app-area="app"] .sidebar-nav-link.active {
    background: color-mix(in srgb, var(--app-primary, #2563eb) 13%, transparent) !important;
    color: var(--app-primary, #2563eb) !important;
  }

  body[data-app-area="app"] .sidebar-group-icon,
  body[data-app-area="app"] .sidebar-icon,
  body[data-app-area="app"] .sidebar-nav-link i,
  body[data-app-area="app"] .sidebar-group-toggle i,
  body[data-app-area="app"] .sidebar-nav-link .bi,
  body[data-app-area="app"] .sidebar-group-toggle .bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--optimat-sidebar-icon) !important;
    width: var(--optimat-sidebar-icon) !important;
    min-width: var(--optimat-sidebar-icon) !important;
    height: var(--optimat-sidebar-icon) !important;
    min-height: var(--optimat-sidebar-icon) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.12rem !important;
    color: #334155 !important;
  }
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-icon,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-icon,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-nav-link i,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-toggle i,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-nav-link .bi,
  html[data-bs-theme="dark"] body[data-app-area="app"] .sidebar-group-toggle .bi {
    color: #e2e8f0 !important;
  }

  /* Compact APP nav: icons stay visible, labels disappear. */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link {
    justify-content: center !important;
    width: var(--optimat-sidebar-item) !important;
    min-width: var(--optimat-sidebar-item) !important;
    height: var(--optimat-sidebar-item) !important;
    min-height: var(--optimat-sidebar-item) !important;
    padding: 0 !important;
    margin-inline: auto !important;
    font-size: 0 !important;
    overflow: visible !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link i,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle i,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link .bi,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle .bi {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 0 0 var(--optimat-sidebar-icon) !important;
    width: var(--optimat-sidebar-icon) !important;
    min-width: var(--optimat-sidebar-icon) !important;
    height: var(--optimat-sidebar-icon) !important;
    min-height: var(--optimat-sidebar-icon) !important;
    font-size: 1.18rem !important;
    margin: 0 !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-label,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-title,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-chevron,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-subtitle,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-meta,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-bottom-meta {
    display: none !important;
  }

  /* ---------- 4) APP user area: small, not a big business card ---------- */
  body[data-app-area="app"] .sidebar-profile-card,
  body[data-app-area="app"] .sidebar-user,
  body[data-app-area="app"] .sidebar-user-chip {
    flex: 0 0 auto !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    border-radius: 18px !important;
    background: var(--app-surface-soft, #f8fafc) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  body[data-app-area="app"] .sidebar-profile-card img,
  body[data-app-area="app"] .sidebar-avatar,
  body[data-app-area="app"] .user-avatar,
  body[data-app-area="app"] .profile-avatar,
  body[data-app-area="app"] .avatar {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-card,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-user,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-user-chip {
    width: var(--optimat-sidebar-item) !important;
    min-width: var(--optimat-sidebar-item) !important;
    height: var(--optimat-sidebar-item) !important;
    min-height: var(--optimat-sidebar-item) !important;
    padding: 6px !important;
    margin: 0 auto 10px !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-profile-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-role-chip,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-header-text {
    display: none !important;
  }

  /* ---------- 5) Footer: exactly staff-like, full logo open, icon crop closed ---------- */
  body[data-app-area="app"] .sidebar-bottom-zone,
  body[data-app-area="app"] .sidebar-app-footer,
  body[data-app-area="staff"] .staff-bottom,
  body.staff-ui .staff-bottom,
  body:not([data-app-area="app"]) .staff-bottom {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--app-border, #dbe4f0) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-app-area="app"] .sidebar-app-link,
  body[data-app-area="staff"] .staff-app-link,
  body.staff-ui .staff-app-link,
  body:not([data-app-area="app"]) .staff-app-link {
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 6px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--app-text, #0f172a) !important;
    overflow: hidden !important;
  }
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo,
  body[data-app-area="app"] .sidebar-footer-logo,
  body[data-app-area="staff"] .staff-footer-logo,
  body.staff-ui .staff-footer-logo,
  body:not([data-app-area="app"]) .staff-footer-logo {
    width: var(--optimat-sidebar-logo-full) !important;
    max-width: var(--optimat-sidebar-logo-full) !important;
    height: auto !important;
    max-height: 54px !important;
    overflow: visible !important;
    display: block !important;
    margin-inline: auto !important;
  }
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo img,
  body[data-app-area="app"] .sidebar-footer-logo img,
  body[data-app-area="app"] .sidebar-app-link img,
  body[data-app-area="staff"] .staff-footer-logo img,
  body.staff-ui .staff-footer-logo img,
  body:not([data-app-area="app"]) .staff-footer-logo img,
  body[data-app-area="staff"] .staff-app-link img,
  body.staff-ui .staff-app-link img,
  body:not([data-app-area="app"]) .staff-app-link img {
    width: var(--optimat-sidebar-logo-full) !important;
    max-width: var(--optimat-sidebar-logo-full) !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link div,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link span,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link div,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link div,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link div {
    display: none !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo {
    width: var(--optimat-sidebar-logo-icon) !important;
    min-width: var(--optimat-sidebar-logo-icon) !important;
    max-width: var(--optimat-sidebar-logo-icon) !important;
    height: var(--optimat-sidebar-logo-icon) !important;
    min-height: var(--optimat-sidebar-logo-icon) !important;
    max-height: var(--optimat-sidebar-logo-icon) !important;
    overflow: hidden !important;
    display: block !important;
    border-radius: 0 !important;
  }
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo img,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo img,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link img,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-footer-logo img,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-footer-logo img,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-footer-logo img,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-app-link img,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-app-link img,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-app-link img {
    width: 120px !important;
    max-width: none !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: cover !important;
    object-position: left center !important;
    border-radius: 0 !important;
  }

  /* ---------- 6) STAFF compact icons hardening ---------- */
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: var(--optimat-sidebar-item) !important;
    height: var(--optimat-sidebar-item) !important;
    min-height: var(--optimat-sidebar-item) !important;
    padding: 0 !important;
    margin-inline: auto !important;
    font-size: 0 !important;
    overflow: visible !important;
  }
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link i,
  body.staff-sidebar-compact[data-app-area="staff"] .staff-sidebar:not(:hover) .staff-nav .nav-link .bi,
  body.staff-sidebar-compact.staff-ui .staff-sidebar:not(:hover) .staff-nav .nav-link .bi,
  body.staff-sidebar-compact:not([data-app-area="app"]) .staff-sidebar:not(:hover) .staff-nav .nav-link .bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--optimat-sidebar-icon) !important;
    width: var(--optimat-sidebar-icon) !important;
    min-width: var(--optimat-sidebar-icon) !important;
    height: var(--optimat-sidebar-icon) !important;
    min-height: var(--optimat-sidebar-icon) !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================================
   OPTIMAT v6.0 - APP sidebar precision repair
   Scope: final CSS-only override, APP-safe.
   Fixes: store logo in topbar, RTL toggle direction, APP toggle
   placement, hidden accordion chevrons in compact mode,
   and footer logo/icon behavior without cropping glitches.
   ========================================================= */
@media (min-width: 992px) {
  :root {
    --optimat-app-sidebar-open: var(--sidebar-width, 292px);
    --optimat-app-sidebar-closed: var(--sidebar-collapsed-width, 86px);
    --optimat-toggle-size: 30px;
    --optimat-topbar-store-logo-width: 118px;
    --optimat-topbar-store-chip-width: 228px;
    --optimat-footer-logo-width: 120px;
    --optimat-footer-icon-size: 44px;
  }

  /* ---------- A) Store logo/name belongs in the topbar and must look full again ---------- */
  body[data-app-area="app"] .app-topbar .topbar-brand-chip,
  body[data-app-area="app"] .app-topbar .business-brand-chip,
  body[data-app-area="app"] .app-topbar .store-brand-chip {
    order: 10 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: var(--optimat-topbar-store-chip-width) !important;
    height: 48px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: var(--app-surface, #fff) !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: none !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip img,
  body[data-app-area="app"] .app-topbar .business-brand-chip img,
  body[data-app-area="app"] .app-topbar .store-brand-chip img {
    width: var(--optimat-topbar-store-logo-width) !important;
    max-width: var(--optimat-topbar-store-logo-width) !important;
    height: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip span,
  body[data-app-area="app"] .app-topbar .topbar-brand-chip .fw-bold,
  body[data-app-area="app"] .app-topbar .business-brand-chip span,
  body[data-app-area="app"] .app-topbar .store-brand-chip span {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-search {
    order: 20 !important;
    flex: 0 1 420px !important;
    max-width: 420px !important;
    min-width: 250px !important;
  }

  /* ---------- B) APP toggle: fixed to the sidebar edge, exactly like STAFF, not in footer ---------- */
  body[data-app-area="app"] .sidebar-toggle-desktop {
    position: fixed !important;
    top: 76px !important;
    bottom: auto !important;
    width: var(--optimat-toggle-size) !important;
    min-width: var(--optimat-toggle-size) !important;
    height: var(--optimat-toggle-size) !important;
    min-height: var(--optimat-toggle-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    background: var(--app-surface, #fff) !important;
    color: var(--app-text, #0f172a) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .13) !important;
    overflow: hidden !important;
    line-height: 1 !important;
    font-size: 0 !important;
    transform: none !important;
  }

  /* Sidebar is on inline-start. In RTL this is right, in LTR this is left. */
  html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"] .sidebar-toggle-desktop {
    right: calc(var(--optimat-app-sidebar-open) - 15px) !important;
    left: auto !important;
  }
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop {
    right: calc(var(--optimat-app-sidebar-closed) - 15px) !important;
    left: auto !important;
  }
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop {
    left: calc(var(--optimat-app-sidebar-open) - 15px) !important;
    right: auto !important;
  }
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop {
    left: calc(var(--optimat-app-sidebar-closed) - 15px) !important;
    right: auto !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop > * {
    display: none !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop::before {
    display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--app-text, #0f172a) !important;
    transform: translateY(-1px) !important;
  }

  /* English was correct; keep its behavior. */
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop::before {
    content: "‹" !important;
  }
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before {
    content: "›" !important;
  }

  /* RTL correction requested: open state shows close direction, closed state shows open direction. */
  html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html:not([dir="ltr"]) body[data-app-area="app"] .sidebar-toggle-desktop::before {
    content: "‹" !important;
  }
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before {
    content: "›" !important;
  }

  /* ---------- C) Compact APP: never show accordion/card chevrons while closed ---------- */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-chevron,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-button::after,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle::after,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [data-bs-toggle="collapse"]::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-chevron-down,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-chevron-up,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-chevron-left,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-chevron-right,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-caret-down,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-caret-up,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-caret-left,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .bi-caret-right {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  /* Keep the real module icons visible in compact mode. */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link > i:not(.bi-chevron-down):not(.bi-chevron-up):not(.bi-chevron-left):not(.bi-chevron-right):not(.bi-caret-down):not(.bi-caret-up):not(.bi-caret-left):not(.bi-caret-right),
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle > i:not(.bi-chevron-down):not(.bi-chevron-up):not(.bi-chevron-left):not(.bi-chevron-right):not(.bi-caret-down):not(.bi-caret-up):not(.bi-caret-left):not(.bi-caret-right) {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ---------- D) Footer logo: full logo when open, icon when closed, no ugly crop ---------- */
  body[data-app-area="app"] .sidebar-app-footer,
  body[data-app-area="app"] .sidebar-bottom-zone {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--app-border, #dbe4f0) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body[data-app-area="app"] .sidebar-app-link {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* Full logo classes, including the existing app-brand-logo wrapper. */
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo,
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo-full,
  body[data-app-area="app"] .sidebar-app-link .sidebar-footer-logo,
  body[data-app-area="app"] .sidebar-footer-logo,
  body[data-app-area="app"] .sidebar-footer-full-logo {
    display: block !important;
    width: var(--optimat-footer-logo-width) !important;
    max-width: var(--optimat-footer-logo-width) !important;
    height: auto !important;
    max-height: 54px !important;
    overflow: visible !important;
    margin-inline: auto !important;
  }

  body[data-app-area="app"] .sidebar-app-link .app-brand-logo img,
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo-full img,
  body[data-app-area="app"] .sidebar-app-link .sidebar-footer-logo img,
  body[data-app-area="app"] .sidebar-footer-logo img,
  body[data-app-area="app"] .sidebar-footer-full-logo img,
  body[data-app-area="app"] .sidebar-app-link > img {
    display: block !important;
    width: var(--optimat-footer-logo-width) !important;
    max-width: var(--optimat-footer-logo-width) !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Optional icon element support. If the HTML has an icon, use it only when closed. */
  body[data-app-area="app"] .sidebar-app-link .app-brand-icon,
  body[data-app-area="app"] .sidebar-app-link .sidebar-footer-icon,
  body[data-app-area="app"] .sidebar-app-link .footer-icon-logo,
  body[data-app-area="app"] .sidebar-footer-icon {
    display: none !important;
    width: var(--optimat-footer-icon-size) !important;
    max-width: var(--optimat-footer-icon-size) !important;
    height: var(--optimat-footer-icon-size) !important;
    max-height: var(--optimat-footer-icon-size) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-inline: auto !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-logo-full,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .sidebar-footer-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-full-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer-text,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link div,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link span {
    display: none !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .app-brand-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .sidebar-footer-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link .footer-icon-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-icon {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* If there is only one image and no separate icon element, show it contained, not cropped. */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link:not(:has(.app-brand-icon)):not(:has(.sidebar-footer-icon)):not(:has(.footer-icon-logo)) > img {
    display: block !important;
    width: var(--optimat-footer-icon-size) !important;
    max-width: var(--optimat-footer-icon-size) !important;
    height: var(--optimat-footer-icon-size) !important;
    max-height: var(--optimat-footer-icon-size) !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================================
   OPTIMAT v6.1 - APP focused final repair
   Scope: only the reported APP/sidebar/header issues.
   Does not change page content or module logic.
   ========================================================= */
@media (min-width: 992px) {
  :root {
    --optimat-app-sidebar-open: var(--sidebar-width, 292px);
    --optimat-app-sidebar-closed: var(--sidebar-collapsed-width, 86px);
    --optimat-app-header-height: var(--app-header-height, 64px);
    --optimat-app-toggle-size: 30px;
    --optimat-app-footer-logo-width: 112px;
    --optimat-app-footer-logo-height: 34px;
  }

  /* 1) Topbar: stop the logo/search area from wrapping again. */
  body[data-app-area="app"] .app-topbar {
    height: var(--optimat-app-header-height) !important;
    min-height: var(--optimat-app-header-height) !important;
    max-height: var(--optimat-app-header-height) !important;
    overflow: visible !important;
  }

  body[data-app-area="app"] .app-topbar > .container,
  body[data-app-area="app"] .app-topbar > .container-fluid,
  body[data-app-area="app"] .app-topbar .container,
  body[data-app-area="app"] .app-topbar .container-fluid {
    height: var(--optimat-app-header-height) !important;
    min-height: var(--optimat-app-header-height) !important;
    max-height: var(--optimat-app-header-height) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip,
  body[data-app-area="app"] .app-topbar .business-brand-chip,
  body[data-app-area="app"] .app-topbar .store-brand-chip {
    order: 10 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 176px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 5px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip img,
  body[data-app-area="app"] .app-topbar .business-brand-chip img,
  body[data-app-area="app"] .app-topbar .store-brand-chip img {
    flex: 0 0 auto !important;
    width: 96px !important;
    max-width: 96px !important;
    height: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-search {
    order: 20 !important;
    flex: 0 1 370px !important;
    width: 370px !important;
    max-width: min(370px, 28vw) !important;
    min-width: 220px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-search .form-control,
  body[data-app-area="app"] .app-topbar .topbar-search input,
  body[data-app-area="app"] .app-topbar .topbar-search .input-group-text {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* 2) APP sidebar toggle: same physical placement as staff and always visible. */
  body[data-app-area="app"] .sidebar-toggle-desktop,
  body[data-app-area="app"] .app-sidebar .sidebar-toggle-desktop {
    position: fixed !important;
    top: 76px !important;
    bottom: auto !important;
    width: var(--optimat-app-toggle-size) !important;
    min-width: var(--optimat-app-toggle-size) !important;
    height: var(--optimat-app-toggle-size) !important;
    min-height: var(--optimat-app-toggle-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9000 !important;
    background: var(--app-surface, #fff) !important;
    color: var(--app-text, #0f172a) !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.13) !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"] .sidebar-toggle-desktop {
    right: calc(var(--optimat-app-sidebar-open) - 15px) !important;
    left: auto !important;
  }
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop {
    right: calc(var(--optimat-app-sidebar-closed) - 15px) !important;
    left: auto !important;
  }
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop {
    left: calc(var(--optimat-app-sidebar-open) - 15px) !important;
    right: auto !important;
  }
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop {
    left: calc(var(--optimat-app-sidebar-closed) - 15px) !important;
    right: auto !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop > * {
    display: none !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop::before {
    display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--app-text, #0f172a) !important;
    transform: translateY(-1px) !important;
  }

  /* LTR remains as it was: open=collapse left, closed=open right. */
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop::before { content: "‹" !important; }
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before { content: "›" !important; }

  /* RTL only: open=collapse right, closed=open left. */
  html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html:not([dir="ltr"]) body[data-app-area="app"] .sidebar-toggle-desktop::before { content: "›" !important; }
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before { content: "‹" !important; }

  /* 3) Compact APP: hide ONLY accordion/category arrows; keep the real module icons. */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-chevron,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .collapse-indicator,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .toggle-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .toggle-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [class*="chevron"],
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [class*="caret"],
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle::after,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [data-bs-toggle="collapse"]::after,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-button::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link > i:not([class*="chevron"]):not([class*="caret"]),
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle > i:first-child,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link > svg:first-child,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle > svg:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
  }

  /* 4) Footer like staff: compact, no large card/space stealing. */
  body[data-app-area="app"] .sidebar-bottom-zone,
  body[data-app-area="app"] .sidebar-app-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--app-border, #dbe4f0) !important;
    background: transparent !important;
    box-shadow: none !important;
    max-height: 94px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"] .sidebar-app-link {
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    gap: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"] .sidebar-app-link .app-brand-logo,
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo-full,
  body[data-app-area="app"] .sidebar-app-link .sidebar-footer-logo,
  body[data-app-area="app"] .sidebar-footer-logo,
  body[data-app-area="app"] .sidebar-footer-full-logo,
  body[data-app-area="app"] .sidebar-app-link > img {
    display: block !important;
    width: var(--optimat-app-footer-logo-width) !important;
    max-width: var(--optimat-app-footer-logo-width) !important;
    height: auto !important;
    max-height: var(--optimat-app-footer-logo-height) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-inline: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-app-area="app"] .sidebar-app-link .app-brand-logo img,
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo-full img,
  body[data-app-area="app"] .sidebar-app-link .sidebar-footer-logo img,
  body[data-app-area="app"] .sidebar-footer-logo img,
  body[data-app-area="app"] .sidebar-footer-full-logo img {
    display: block !important;
    width: var(--optimat-app-footer-logo-width) !important;
    max-width: var(--optimat-app-footer-logo-width) !important;
    height: auto !important;
    max-height: var(--optimat-app-footer-logo-height) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-inline: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-app-area="app"] .sidebar-app-footer-text,
  body[data-app-area="app"] .sidebar-app-link div,
  body[data-app-area="app"] .sidebar-app-link span {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    color: var(--app-muted, #64748b) !important;
    max-width: 160px !important;
  }

  /* In closed APP sidebar: bottom logo is hidden; no footer icon is forced there. */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-bottom-zone,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer {
    max-height: 24px !important;
    padding-top: 8px !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-link *,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-full-logo,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-footer-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  body[data-app-area="app"] .app-topbar .topbar-search {
    flex-basis: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 180px !important;
  }
  body[data-app-area="app"] .app-topbar .topbar-brand-chip,
  body[data-app-area="app"] .app-topbar .business-brand-chip,
  body[data-app-area="app"] .app-topbar .store-brand-chip {
    max-width: 136px !important;
    min-width: 104px !important;
  }
  body[data-app-area="app"] .app-topbar .topbar-brand-chip img,
  body[data-app-area="app"] .app-topbar .business-brand-chip img,
  body[data-app-area="app"] .app-topbar .store-brand-chip img {
    width: 82px !important;
    max-width: 82px !important;
  }
}

/* =========================================================
   OPTIMAT v8.0 - surgical restore
   Purpose:
   1) Keep STAFF behavior from the previous working version.
   2) Fix APP sidebar toggle visibility and placement like STAFF.
   3) Prevent APP topbar brand/search wrapping.
   4) Keep APP compact sidebar clean: no accordion chevrons, footer hidden.
   ========================================================= */
@media (min-width: 992px) {
  :root {
    --optimat-app-sidebar-width-v8: var(--sidebar-width, 292px);
    --optimat-app-sidebar-collapsed-v8: var(--sidebar-collapsed-width, 86px);
    --optimat-sidebar-toggle-size-v8: 30px;
    --optimat-footer-logo-width-v8: 120px;
    --optimat-footer-logo-height-v8: 48px;
  }

  /* ---------- APP topbar: logo + search must stay in one row ---------- */
  body[data-app-area="app"] .app-topbar,
  body[data-app-area="app"] .app-topbar > .container-fluid,
  body[data-app-area="app"] .app-topbar .navbar,
  body[data-app-area="app"] .app-topbar .topbar-inner,
  body[data-app-area="app"] .app-topbar .topbar-center,
  body[data-app-area="app"] .app-topbar .topbar-search-wrap,
  body[data-app-area="app"] .app-topbar .topbar-brand-search {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip,
  body[data-app-area="app"] .app-topbar .business-brand-chip,
  body[data-app-area="app"] .app-topbar .store-brand-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 138px !important;
    max-width: 178px !important;
    height: 46px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip img,
  body[data-app-area="app"] .app-topbar .business-brand-chip img,
  body[data-app-area="app"] .app-topbar .store-brand-chip img {
    display: block !important;
    width: auto !important;
    max-width: 104px !important;
    height: auto !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip .fw-bold,
  body[data-app-area="app"] .app-topbar .business-brand-chip .fw-bold,
  body[data-app-area="app"] .app-topbar .store-brand-chip .fw-bold {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-search,
  body[data-app-area="app"] .app-topbar form.topbar-search,
  body[data-app-area="app"] .app-topbar .app-search,
  body[data-app-area="app"] .app-topbar .global-search,
  body[data-app-area="app"] .app-topbar .search-box,
  body[data-app-area="app"] .app-topbar .input-group.topbar-search {
    flex: 0 1 420px !important;
    width: min(420px, 34vw) !important;
    min-width: 240px !important;
    max-width: 420px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-search .form-control,
  body[data-app-area="app"] .app-topbar .topbar-search input,
  body[data-app-area="app"] .app-topbar .topbar-search .input-group-text,
  body[data-app-area="app"] .app-topbar .app-search input,
  body[data-app-area="app"] .app-topbar .global-search input,
  body[data-app-area="app"] .app-topbar .search-box input {
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    white-space: nowrap !important;
  }

  /* ---------- STAFF topbar: keep one row, do not restyle the sidebar/toggle ---------- */
  body[data-app-area="staff"] .staff-topbar,
  body.staff-ui .staff-topbar,
  body:not([data-app-area="app"]) .staff-topbar,
  body[data-app-area="staff"] .staff-topbar > *,
  body.staff-ui .staff-topbar > *,
  body:not([data-app-area="app"]) .staff-topbar > * {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  body[data-app-area="staff"] .staff-topbar .topbar-search,
  body.staff-ui .staff-topbar .topbar-search,
  body:not([data-app-area="app"]) .staff-topbar .topbar-search {
    flex: 0 1 420px !important;
    min-width: 220px !important;
    max-width: 420px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* ---------- APP sidebar shell: same physical behavior as STAFF ---------- */
  body[data-app-area="app"] .app-shell {
    display: block !important;
    min-height: 100vh !important;
  }

  body[data-app-area="app"] .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: 0 !important;
    width: var(--optimat-app-sidebar-width-v8) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    z-index: 1040 !important;
    transition: width .22s ease, box-shadow .22s ease !important;
  }

  html[dir="ltr"] body[data-app-area="app"] .app-sidebar {
    left: 0 !important;
    right: auto !important;
  }

  body[data-app-area="app"] .app-main {
    margin-right: var(--optimat-app-sidebar-width-v8) !important;
    margin-left: 0 !important;
    transition: margin .22s ease !important;
  }

  html[dir="ltr"] body[data-app-area="app"] .app-main {
    margin-left: var(--optimat-app-sidebar-width-v8) !important;
    margin-right: 0 !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar {
    width: var(--optimat-app-sidebar-collapsed-v8) !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-main {
    margin-right: var(--optimat-app-sidebar-collapsed-v8) !important;
  }

  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-main {
    margin-left: var(--optimat-app-sidebar-collapsed-v8) !important;
    margin-right: 0 !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:hover,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar.is-hover-expanded {
    width: var(--optimat-app-sidebar-width-v8) !important;
    box-shadow: 0 24px 72px rgba(15,23,42,.18) !important;
  }

  /* ---------- APP sidebar toggle: visible, exactly on the sidebar edge like STAFF ---------- */
  body[data-app-area="app"] .sidebar-toggle-desktop,
  body[data-app-area="app"] .app-sidebar .sidebar-toggle-desktop,
  body[data-app-area="app"] .app-sidebar .sidebar-toggle,
  body[data-app-area="app"] .app-sidebar .app-sidebar-toggle,
  body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle {
    width: var(--optimat-sidebar-toggle-size-v8) !important;
    min-width: var(--optimat-sidebar-toggle-size-v8) !important;
    max-width: var(--optimat-sidebar-toggle-size-v8) !important;
    height: var(--optimat-sidebar-toggle-size-v8) !important;
    min-height: var(--optimat-sidebar-toggle-size-v8) !important;
    max-height: var(--optimat-sidebar-toggle-size-v8) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9000 !important;
    background: var(--app-surface, #fff) !important;
    color: var(--app-text, #0f172a) !important;
    border: 1px solid var(--app-border, #dbe4f0) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.13) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  /* When the toggle is inside the sidebar, this is the exact STAFF-style placement. */
  body[data-app-area="app"] .app-sidebar .sidebar-toggle-desktop,
  body[data-app-area="app"] .app-sidebar .sidebar-toggle,
  body[data-app-area="app"] .app-sidebar .app-sidebar-toggle,
  body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle {
    position: absolute !important;
    top: 76px !important;
    inset-inline-end: -15px !important;
    inset-inline-start: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Fallback if the toggle is rendered outside .app-sidebar. */
  body[data-app-area="app"] > .sidebar-toggle-desktop,
  body[data-app-area="app"] .app-shell > .sidebar-toggle-desktop,
  body[data-app-area="app"] .app-main > .sidebar-toggle-desktop {
    position: fixed !important;
    top: 76px !important;
    bottom: auto !important;
    transform: none !important;
  }

  html[dir="rtl"] body[data-app-area="app"] > .sidebar-toggle-desktop,
  html[dir="rtl"] body[data-app-area="app"] .app-shell > .sidebar-toggle-desktop,
  html[dir="rtl"] body[data-app-area="app"] .app-main > .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"] > .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-shell > .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-main > .sidebar-toggle-desktop {
    right: calc(var(--optimat-app-sidebar-width-v8) - 15px) !important;
    left: auto !important;
  }

  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed > .sidebar-toggle-desktop,
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-shell > .sidebar-toggle-desktop,
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-main > .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed > .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .app-shell > .sidebar-toggle-desktop,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .app-main > .sidebar-toggle-desktop {
    right: calc(var(--optimat-app-sidebar-collapsed-v8) - 15px) !important;
    left: auto !important;
  }

  html[dir="ltr"] body[data-app-area="app"] > .sidebar-toggle-desktop,
  html[dir="ltr"] body[data-app-area="app"] .app-shell > .sidebar-toggle-desktop,
  html[dir="ltr"] body[data-app-area="app"] .app-main > .sidebar-toggle-desktop {
    left: calc(var(--optimat-app-sidebar-width-v8) - 15px) !important;
    right: auto !important;
  }

  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed > .sidebar-toggle-desktop,
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-shell > .sidebar-toggle-desktop,
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-main > .sidebar-toggle-desktop {
    left: calc(var(--optimat-app-sidebar-collapsed-v8) - 15px) !important;
    right: auto !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop > *,
  body[data-app-area="app"] .app-sidebar .sidebar-toggle > *,
  body[data-app-area="app"] .app-sidebar .app-sidebar-toggle > *,
  body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle > * {
    display: none !important;
  }

  body[data-app-area="app"] .sidebar-toggle-desktop::before,
  body[data-app-area="app"] .app-sidebar .sidebar-toggle::before,
  body[data-app-area="app"] .app-sidebar .app-sidebar-toggle::before,
  body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle::before {
    display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--app-text, #0f172a) !important;
    transform: translateY(-1px) !important;
  }

  /* LTR behavior stays normal. */
  html[dir="ltr"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar .sidebar-toggle::before,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar .app-sidebar-toggle::before,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle::before {
    content: "‹" !important;
  }

  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-sidebar .sidebar-toggle::before,
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-sidebar .app-sidebar-toggle::before,
  html[dir="ltr"] body[data-app-area="app"].sidebar-collapsed .app-sidebar .sidebar-collapse-toggle::before {
    content: "›" !important;
  }

  /* RTL only is flipped. */
  html[dir="rtl"] body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html[dir="rtl"] body[data-app-area="app"] .app-sidebar .sidebar-toggle::before,
  html[dir="rtl"] body[data-app-area="app"] .app-sidebar .app-sidebar-toggle::before,
  html[dir="rtl"] body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle::before,
  html:not([dir="ltr"]) body[data-app-area="app"] .sidebar-toggle-desktop::before,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar .sidebar-toggle::before,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar .app-sidebar-toggle::before,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar .sidebar-collapse-toggle::before {
    content: "›" !important;
  }

  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-sidebar .sidebar-toggle::before,
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-sidebar .app-sidebar-toggle::before,
  html[dir="rtl"] body[data-app-area="app"].sidebar-collapsed .app-sidebar .sidebar-collapse-toggle::before,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .sidebar-toggle-desktop::before,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .app-sidebar .sidebar-toggle::before,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .app-sidebar .app-sidebar-toggle::before,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-collapsed .app-sidebar .sidebar-collapse-toggle::before {
    content: "‹" !important;
  }

  /* ---------- APP compact mode: keep real icons, hide accordion arrows ---------- */
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-chevron,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .collapse-indicator,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .toggle-arrow,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .toggle-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [class*="chevron"],
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [class*="caret"],
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle::after,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) [data-bs-toggle="collapse"]::after,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .accordion-button::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-icon,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link > i:not([class*="chevron"]):not([class*="caret"]),
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle > i:first-child,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-nav-link > svg:first-child,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-group-toggle > svg:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 1.18rem !important;
    margin: 0 !important;
  }

  /* ---------- APP footer: compact like STAFF, hidden when sidebar is closed ---------- */
  body[data-app-area="app"] .sidebar-bottom-zone,
  body[data-app-area="app"] .sidebar-app-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--app-border, #dbe4f0) !important;
    background: transparent !important;
    box-shadow: none !important;
    max-height: 84px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"] .sidebar-app-link {
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    padding: 4px 4px !important;
    margin: 0 !important;
    gap: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body[data-app-area="app"] .sidebar-app-link img,
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo,
  body[data-app-area="app"] .sidebar-app-link .app-brand-logo img,
  body[data-app-area="app"] .sidebar-footer-logo,
  body[data-app-area="app"] .sidebar-footer-logo img,
  body[data-app-area="app"] .sidebar-footer-full-logo,
  body[data-app-area="app"] .sidebar-footer-full-logo img {
    display: block !important;
    width: var(--optimat-footer-logo-width-v8) !important;
    max-width: var(--optimat-footer-logo-width-v8) !important;
    height: auto !important;
    max-height: var(--optimat-footer-logo-height-v8) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-inline: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body[data-app-area="app"] .sidebar-app-footer-text,
  body[data-app-area="app"] .sidebar-app-link div,
  body[data-app-area="app"] .sidebar-app-link span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    color: var(--app-muted, #64748b) !important;
    max-width: 150px !important;
    text-align: center !important;
  }

  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-bottom-zone,
  body[data-app-area="app"].sidebar-collapsed .app-sidebar:not(:hover):not(.is-hover-expanded) .sidebar-app-footer {
    display: none !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body[data-app-area="app"] .app-topbar .topbar-search,
  body[data-app-area="app"] .app-topbar form.topbar-search,
  body[data-app-area="app"] .app-topbar .app-search,
  body[data-app-area="app"] .app-topbar .global-search,
  body[data-app-area="app"] .app-topbar .search-box {
    flex: 0 1 320px !important;
    width: min(320px, 30vw) !important;
    min-width: 190px !important;
    max-width: 320px !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip,
  body[data-app-area="app"] .app-topbar .business-brand-chip,
  body[data-app-area="app"] .app-topbar .store-brand-chip {
    min-width: 112px !important;
    max-width: 142px !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip img,
  body[data-app-area="app"] .app-topbar .business-brand-chip img,
  body[data-app-area="app"] .app-topbar .store-brand-chip img {
    max-width: 82px !important;
  }
}

/* =========================================================
   OPTIMAT FORM / MODAL SAFE PATCH
   Source restored from uploaded app-ui.css/app-ui (2).css.
   Purpose: do not let ad/backdrop layers block regular app forms.
   ========================================================= */

/* Bootstrap defaults should control modal stack. Do not raise backdrop above the modal. */
.modal {
  pointer-events: auto;
}
.modal.show {
  display: block;
}
.modal-dialog,
.modal-content,
.modal input,
.modal select,
.modal textarea,
.modal button,
.modal .btn,
.modal .form-control,
.modal .form-select {
  pointer-events: auto !important;
}

/* Bootstrap backdrop may darken the page, but must not capture clicks above the modal. */
.modal-backdrop {
  pointer-events: none !important;
}

/* Ad modal is hidden by default. It becomes active ONLY when explicitly visible. */
.optimat-ad-modal {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.optimat-ad-modal.is-visible,
.optimat-ad-modal.show,
.optimat-ad-modal[data-visible="1"] {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.optimat-ad-modal.is-visible .optimat-ad-modal-card,
.optimat-ad-modal.show .optimat-ad-modal-card,
.optimat-ad-modal[data-visible="1"] .optimat-ad-modal-card,
.optimat-ad-modal.is-visible .optimat-ad-close,
.optimat-ad-modal.show .optimat-ad-close,
.optimat-ad-modal[data-visible="1"] .optimat-ad-close {
  pointer-events: auto !important;
}

/* Non-visible ad/floating/backdrop elements must never block form editing. */
.optimat-ad-backdrop:not(.show):not(.is-visible),
.optimat-floating-backdrop:not(.show):not(.is-visible) {
  display: none !important;
  pointer-events: none !important;
}

/* Keep normal pages fully editable. */
body:not(.modal-open) input,
body:not(.modal-open) select,
body:not(.modal-open) textarea,
body:not(.modal-open) button,
body:not(.modal-open) .form-control,
body:not(.modal-open) .form-select {
  pointer-events: auto !important;
}

/* =========================================================
   OPTIMAT MODAL / BACKDROP CLICK FIX
   Purpose: prevent hidden modal/backdrop/ad layers from blocking forms
   ========================================================= */

/* מודאל פתוח חייב להיות מעל שכבת הרקע */
.modal {
  z-index: 1065 !important;
}

.modal.show {
  display: block !important;
  pointer-events: auto !important;
}

.modal-dialog,
.modal-content,
.modal input,
.modal select,
.modal textarea,
.modal button,
.modal .btn,
.modal form {
  pointer-events: auto !important;
}

/* backdrop לא יחסום קליקים על הטופס */
.modal-backdrop {
  z-index: 1050 !important;
  pointer-events: none !important;
}

/* אם אין מודאל פתוח — שלא יישאר בלוק שחוסם את כל המסך */
body:not(.modal-open) .modal-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* מודאלים סגורים לא חוסמים כלום */
.modal:not(.show) {
  display: none !important;
  pointer-events: none !important;
}

/* שכבות פרסום / overlay שלא פעילות לא חוסמות טפסים */
.optimat-ad-modal:not(.show),
.optimat-ad-modal:not(.is-visible),
.optimat-ad-backdrop:not(.show),
.optimat-floating-backdrop:not(.show),
.optimat-modal-backdrop:not(.show) {
  pointer-events: none !important;
}

/* ברירת מחדל: שכבות פרסום לא חוסמות את העמוד */
.optimat-ad-modal,
.optimat-ad-backdrop,
.optimat-floating-backdrop,
.optimat-modal-backdrop {
  pointer-events: none !important;
}

/* רק אם הפרסום באמת פתוח — התוכן שלו מקבל קליקים */
.optimat-ad-modal.show,
.optimat-ad-modal.show *,
.optimat-ad-modal.is-visible,
.optimat-ad-modal.is-visible * {
  pointer-events: auto !important;
}

/* טפסים רגילים באפליקציה תמיד ניתנים לעריכה */
input,
select,
textarea,
button,
.form-control,
.form-select,
.btn {
  pointer-events: auto;
}

/* END OPTIMAT MODAL / BACKDROP CLICK FIX */
/* END OPTIMAT FORM / MODAL SAFE PATCH */

/*
 * OPTIMAT / POSMAT responsive shell patch v78
 * Scope: sidebar + header responsiveness only.
 * No business logic, no colors/theme redesign, no page-content styling.
 * Load AFTER app-ui.css / staff-ui.css.
 */

:root{
  --opt-shell-sidebar-open: 288px;
  --opt-shell-sidebar-collapsed: 76px;
  --opt-shell-topbar-h: 64px;
  --opt-shell-mobile-breakpoint: 991.98px;
}

/* ---------- בסיס: למנוע גלישה אופקית בריספונסיביות ---------- */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.app-shell,
.staff-shell,
.app-layout,
.staff-layout,
.app-main,
.staff-main,
.app-content,
.staff-content{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Header: הידוק רספונסיבי בלבד ---------- */
.app-header,
.staff-header,
.app-topbar,
.staff-topbar,
.optimat-app-header,
.optimat-staff-header{
  position:sticky;
  top:0;
  z-index:1030;
  min-height:var(--opt-shell-topbar-h);
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:.5rem;
  overflow:visible;
}

.app-header > *,
.staff-header > *,
.app-topbar > *,
.staff-topbar > *,
.optimat-app-header > *,
.optimat-staff-header > *{
  min-width:0;
}

.app-header .app-search,
.staff-header .staff-search,
.app-topbar .app-search,
.staff-topbar .staff-search,
.app-header form[role="search"],
.staff-header form[role="search"],
.app-topbar form[role="search"],
.staff-topbar form[role="search"],
.app-header .search-box,
.staff-header .search-box,
.app-topbar .search-box,
.staff-topbar .search-box{
  min-width:0 !important;
  max-width:100% !important;
  flex:1 1 280px;
}

.app-header input[type="search"],
.staff-header input[type="search"],
.app-topbar input[type="search"],
.staff-topbar input[type="search"]{
  min-width:0 !important;
  width:100% !important;
}

.app-header .header-actions,
.staff-header .header-actions,
.app-topbar .header-actions,
.staff-topbar .header-actions,
.app-header .app-header-actions,
.staff-header .staff-header-actions,
.app-topbar .app-header-actions,
.staff-topbar .staff-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:0;
  max-width:100%;
}

/* לוגו/זהות עסק לא ישברו את ההידר */
.app-header .brand,
.staff-header .brand,
.app-topbar .brand,
.staff-topbar .brand,
.app-header .business-brand,
.staff-header .business-brand,
.app-topbar .business-brand,
.staff-topbar .business-brand,
.app-header .app-brand,
.staff-header .staff-brand,
.app-topbar .app-brand,
.staff-topbar .staff-brand{
  min-width:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}

.app-header img,
.staff-header img,
.app-topbar img,
.staff-topbar img{
  max-height:42px;
  width:auto;
  object-fit:contain;
}

/* ---------- Sidebar: מצב דסקטופ רגיל/מצומצם ---------- */
.app-sidebar,
.staff-sidebar,
.optimat-sidebar{
  box-sizing:border-box;
  max-width:min(var(--opt-shell-sidebar-open), 92vw);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  z-index:1040;
}

/* בדסקטופ: הסיידבר לא אמור לדחוף/להסתיר תוכן בצורה לא יציבה */
@media (min-width:992px){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    height:100dvh;
    max-height:100dvh;
  }

  /* תמיכה בשמות מצבים נפוצים בלי לשנות JS קיים */
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-collapsed .staff-sidebar,
  body.app-sidebar-collapsed .app-sidebar,
  body.staff-sidebar-collapsed .staff-sidebar,
  .sidebar-collapsed .app-sidebar,
  .sidebar-collapsed .staff-sidebar,
  .app-shell.sidebar-collapsed .app-sidebar,
  .staff-shell.sidebar-collapsed .staff-sidebar,
  .app-shell.is-sidebar-collapsed .app-sidebar,
  .staff-shell.is-sidebar-collapsed .staff-sidebar,
  [data-sidebar-state="collapsed"] .app-sidebar,
  [data-sidebar-state="collapsed"] .staff-sidebar{
    width:var(--opt-shell-sidebar-collapsed) !important;
    min-width:var(--opt-shell-sidebar-collapsed) !important;
    max-width:var(--opt-shell-sidebar-collapsed) !important;
  }

  body.sidebar-collapsed .app-sidebar .nav-text,
  body.sidebar-collapsed .staff-sidebar .nav-text,
  body.app-sidebar-collapsed .app-sidebar .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar .nav-text,
  .sidebar-collapsed .app-sidebar .nav-text,
  .sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar .nav-text,
  body.sidebar-collapsed .app-sidebar .menu-text,
  body.sidebar-collapsed .staff-sidebar .menu-text,
  body.sidebar-collapsed .app-sidebar .sidebar-label,
  body.sidebar-collapsed .staff-sidebar .sidebar-label{
    opacity:0;
    visibility:hidden;
    width:0;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
  }

  /* אייקונים נשארים גלויים במצב מצומצם */
  .app-sidebar .bi,
  .staff-sidebar .bi,
  .optimat-sidebar .bi,
  .app-sidebar svg,
  .staff-sidebar svg,
  .optimat-sidebar svg{
    flex:0 0 auto;
    min-width:1.25rem;
  }

  /* hover על מצומצם: מתרחב מעל התוכן בלי לשבור grid */
  body.sidebar-collapsed .app-sidebar:hover,
  body.sidebar-collapsed .staff-sidebar:hover,
  body.app-sidebar-collapsed .app-sidebar:hover,
  body.staff-sidebar-collapsed .staff-sidebar:hover,
  .sidebar-collapsed .app-sidebar:hover,
  .sidebar-collapsed .staff-sidebar:hover,
  .app-shell.sidebar-collapsed .app-sidebar:hover,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover,
  [data-sidebar-state="collapsed"] .app-sidebar:hover,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover{
    width:var(--opt-shell-sidebar-open) !important;
    min-width:var(--opt-shell-sidebar-open) !important;
    max-width:min(var(--opt-shell-sidebar-open), 92vw) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18);
  }

  body.sidebar-collapsed .app-sidebar:hover .nav-text,
  body.sidebar-collapsed .staff-sidebar:hover .nav-text,
  body.app-sidebar-collapsed .app-sidebar:hover .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar:hover .nav-text,
  .sidebar-collapsed .app-sidebar:hover .nav-text,
  .sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover .nav-text,
  body.sidebar-collapsed .app-sidebar:hover .menu-text,
  body.sidebar-collapsed .staff-sidebar:hover .menu-text,
  body.sidebar-collapsed .app-sidebar:hover .sidebar-label,
  body.sidebar-collapsed .staff-sidebar:hover .sidebar-label{
    opacity:1;
    visibility:visible;
    width:auto;
    max-width:180px;
  }
}

/* ---------- טווח ביניים: לא לתת להידר להישבר ---------- */
@media (max-width:1199.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.4rem;
    padding-inline:.75rem !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:190px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"]{
    flex-basis:220px;
  }
}

/* ---------- מובייל וטאבלט: sidebar כ-overlay, header קומפקטי ---------- */
@media (max-width:991.98px){
  :root{ --opt-shell-topbar-h:58px; }

  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    min-height:var(--opt-shell-topbar-h);
    padding:.45rem .65rem !important;
    flex-wrap:nowrap !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:145px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    flex:1 1 auto;
    max-width:calc(100vw - 250px) !important;
  }

  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    width:min(86vw, 320px) !important;
    min-width:0 !important;
    max-width:min(86vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%);
    transition:transform .22s ease;
    box-shadow:-18px 0 42px rgba(15,23,42,.22);
  }

  body.sidebar-open .app-sidebar,
  body.sidebar-open .staff-sidebar,
  body.app-sidebar-open .app-sidebar,
  body.staff-sidebar-open .staff-sidebar,
  .sidebar-open .app-sidebar,
  .sidebar-open .staff-sidebar,
  .app-shell.sidebar-open .app-sidebar,
  .staff-shell.sidebar-open .staff-sidebar,
  .app-shell.is-sidebar-open .app-sidebar,
  .staff-shell.is-sidebar-open .staff-sidebar,
  [data-sidebar-state="open"] .app-sidebar,
  [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] .app-sidebar,
  html[dir="ltr"] .staff-sidebar,
  html[dir="ltr"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%);
  }

  html[dir="ltr"] body.sidebar-open .app-sidebar,
  html[dir="ltr"] body.sidebar-open .staff-sidebar,
  html[dir="ltr"] body.app-sidebar-open .app-sidebar,
  html[dir="ltr"] body.staff-sidebar-open .staff-sidebar,
  html[dir="ltr"] .sidebar-open .app-sidebar,
  html[dir="ltr"] .sidebar-open .staff-sidebar,
  html[dir="ltr"] .app-shell.sidebar-open .app-sidebar,
  html[dir="ltr"] .staff-shell.sidebar-open .staff-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .app-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    margin-inline:0 !important;
    padding-inline:.75rem !important;
    width:100% !important;
  }
}

/* ---------- מובייל צר: פחות טקסט בהידר, בלי שבירת שורה ---------- */
@media (max-width:767.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.3rem;
  }
 .topbar-brand-chip{height:46px!important;min-width:100px!important;background:var(--app-surface,#fff)!important;}
  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    max-width:calc(100vw - 180px) !important;
  }

  .app-header .btn span,
  .staff-header .btn span,
  .app-topbar .btn span,
  .staff-topbar .btn span,
  .app-header .button-label,
  .staff-header .button-label,
  .app-topbar .button-label,
  .staff-topbar .button-label{
    max-width:0;
    opacity:0;
    overflow:hidden;
    display:inline-block;
    white-space:nowrap;
  }

  .app-header .btn,
  .staff-header .btn,
  .app-topbar .btn,
  .staff-topbar .btn{
    min-width:40px;
    min-height:40px;
    padding-inline:.55rem !important;
  }

  .app-header img,
  .staff-header img,
  .app-topbar img,
  .staff-topbar img{
    max-height:36px;
  }
}

@media (max-width:575.98px){
  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:112px;
  }
.topbar-brand-chip{height:46px!important;min-width:100px!important;background:var(--app-surface,#fff)!important;}
 
 .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    display:none !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    padding-inline:.55rem !important;
  }
}

/* נגישות: בלי אנימציות למשתמשים שמעדיפים פחות תנועה */
@media (prefers-reduced-motion: reduce){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    transition:none !important;
  }
}

/* ---------- v78 mobile overlay click-layer fix: backdrop below sidebar, sidebar always clickable ---------- */
@media (max-width:991.98px){
  /* הסיידבר חייב להיות מעל שכבת הרקע/החשכה, אחרת אי אפשר ללחוץ עליו במובייל */
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    z-index:1075 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }

  /* שכבת רקע של הסיידבר: מתחת לסיידבר, מעל התוכן */
 .sidebar-backdrop,
  .app-sidebar-backdrop,
  .staff-sidebar-backdrop,
  .optimat-sidebar-backdrop,
  .mobile-sidebar-backdrop,
  .layout-backdrop,
  .app-layout-backdrop,
  .staff-layout-backdrop,
  .offcanvas-backdrop{
    z-index:0 !important;
  }

  /* אם קיימת שכבת רקע פנימית בתוך ה-shell, שלא תכסה את הסיידבר עצמו */
  .app-shell .sidebar-backdrop,
  .staff-shell .sidebar-backdrop,
  .app-shell .app-sidebar-backdrop,
  .staff-shell .staff-sidebar-backdrop,
  .app-shell .layout-backdrop,
  .staff-shell .layout-backdrop{
    pointer-events:auto !important;
  }

  /* כל מה שבתוך הסיידבר נשאר לחיץ ונגיש */
  .app-sidebar *,
  .staff-sidebar *,
  .optimat-sidebar *{
    pointer-events:auto;
  }

  /* כפתור פתיחה/סגירה והידר מעל התוכן, אך מתחת לסיידבר פתוח */
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    z-index:1050 !important;
  }

  /* מונע מצב שבו אלמנט תוכן שקיבל z-index גבוה מכסה את הסיידבר במובייל */
  body.sidebar-open .app-main,
  body.sidebar-open .staff-main,
  body.sidebar-open .app-content,
  body.sidebar-open .staff-content,
  body.app-sidebar-open .app-main,
  body.app-sidebar-open .app-content,
  body.staff-sidebar-open .staff-main,
  body.staff-sidebar-open .staff-content,
  .app-shell.sidebar-open .app-main,
  .app-shell.sidebar-open .app-content,
  .staff-shell.sidebar-open .staff-main,
  .staff-shell.sidebar-open .staff-content,
  .app-shell.is-sidebar-open .app-main,
  .app-shell.is-sidebar-open .app-content,
  .staff-shell.is-sidebar-open .staff-main,
  .staff-shell.is-sidebar-open .staff-content,
  [data-sidebar-state="open"] .app-main,
  [data-sidebar-state="open"] .app-content,
  [data-sidebar-state="open"] .staff-main,
  [data-sidebar-state="open"] .staff-content{
    position:relative;
    z-index:1;
  }

  /* נגישות טאצ׳: פריטי ניווט לא יהיו קטנים מדי במובייל */
  .app-sidebar a,
  .staff-sidebar a,
  .optimat-sidebar a,
  .app-sidebar button,
  .staff-sidebar button,
  .optimat-sidebar button,
  .app-sidebar [role="button"],
  .staff-sidebar [role="button"],
  .optimat-sidebar [role="button"]{
    min-height:42px;
  }

  /* פוקוס ברור במקלדת בלי שינוי עיצוב רגיל */
  .app-sidebar a:focus-visible,
  .staff-sidebar a:focus-visible,
  .optimat-sidebar a:focus-visible,
  .app-sidebar button:focus-visible,
  .staff-sidebar button:focus-visible,
  .optimat-sidebar button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
  }
}
/*
 * OPTIMAT / POSMAT responsive shell patch v81
 * Scope: sidebar + header responsiveness only.
 * No business logic, no colors/theme redesign, no page-content styling.
 * Load AFTER app-ui.css / staff-ui.css.
 */

:root{
  --opt-shell-sidebar-open: 288px;
  --opt-shell-sidebar-collapsed: 76px;
  --opt-shell-topbar-h: 64px;
  --opt-shell-mobile-breakpoint: 991.98px;
}

/* ---------- בסיס: למנוע גלישה אופקית בריספונסיביות ---------- */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.app-shell,
.staff-shell,
.app-layout,
.staff-layout,
.app-main,
.staff-main,
.app-content,
.staff-content{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Header: הידוק רספונסיבי בלבד ---------- */
.app-header,
.staff-header,
.app-topbar,
.staff-topbar,
.optimat-app-header,
.optimat-staff-header{
  position:sticky;
  top:0;
  z-index:1030;
  min-height:var(--opt-shell-topbar-h);
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:.5rem;
  overflow:visible;
}

.app-header > *,
.staff-header > *,
.app-topbar > *,
.staff-topbar > *,
.optimat-app-header > *,
.optimat-staff-header > *{
  min-width:0;
}

.app-header .app-search,
.staff-header .staff-search,
.app-topbar .app-search,
.staff-topbar .staff-search,
.app-header form[role="search"],
.staff-header form[role="search"],
.app-topbar form[role="search"],
.staff-topbar form[role="search"],
.app-header .search-box,
.staff-header .search-box,
.app-topbar .search-box,
.staff-topbar .search-box{
  min-width:0 !important;
  max-width:100% !important;
  flex:1 1 280px;
}

.app-header input[type="search"],
.staff-header input[type="search"],
.app-topbar input[type="search"],
.staff-topbar input[type="search"]{
  min-width:0 !important;
  width:100% !important;
}

.app-header .header-actions,
.staff-header .header-actions,
.app-topbar .header-actions,
.staff-topbar .header-actions,
.app-header .app-header-actions,
.staff-header .staff-header-actions,
.app-topbar .app-header-actions,
.staff-topbar .staff-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:0;
  max-width:100%;
}

/* לוגו/זהות עסק לא ישברו את ההידר */
.app-header .brand,
.staff-header .brand,
.app-topbar .brand,
.staff-topbar .brand,
.app-header .business-brand,
.staff-header .business-brand,
.app-topbar .business-brand,
.staff-topbar .business-brand,
.app-header .app-brand,
.staff-header .staff-brand,
.app-topbar .app-brand,
.staff-topbar .staff-brand{
  min-width:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}

.app-header img,
.staff-header img,
.app-topbar img,
.staff-topbar img{
  max-height:42px;
  width:auto;
  object-fit:contain;
}

/* ---------- Sidebar: מצב דסקטופ רגיל/מצומצם ---------- */
.app-sidebar,
.staff-sidebar,
.optimat-sidebar{
  box-sizing:border-box;
  max-width:min(var(--opt-shell-sidebar-open), 92vw);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  z-index:1040;
}

/* בדסקטופ: הסיידבר לא אמור לדחוף/להסתיר תוכן בצורה לא יציבה */
@media (min-width:992px){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    height:100dvh;
    max-height:100dvh;
  }

  /* תמיכה בשמות מצבים נפוצים בלי לשנות JS קיים */
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-collapsed .staff-sidebar,
  body.app-sidebar-collapsed .app-sidebar,
  body.staff-sidebar-collapsed .staff-sidebar,
  .sidebar-collapsed .app-sidebar,
  .sidebar-collapsed .staff-sidebar,
  .app-shell.sidebar-collapsed .app-sidebar,
  .staff-shell.sidebar-collapsed .staff-sidebar,
  .app-shell.is-sidebar-collapsed .app-sidebar,
  .staff-shell.is-sidebar-collapsed .staff-sidebar,
  [data-sidebar-state="collapsed"] .app-sidebar,
  [data-sidebar-state="collapsed"] .staff-sidebar{
    width:var(--opt-shell-sidebar-collapsed) !important;
    min-width:var(--opt-shell-sidebar-collapsed) !important;
    max-width:var(--opt-shell-sidebar-collapsed) !important;
  }

  body.sidebar-collapsed .app-sidebar .nav-text,
  body.sidebar-collapsed .staff-sidebar .nav-text,
  body.app-sidebar-collapsed .app-sidebar .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar .nav-text,
  .sidebar-collapsed .app-sidebar .nav-text,
  .sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar .nav-text,
  body.sidebar-collapsed .app-sidebar .menu-text,
  body.sidebar-collapsed .staff-sidebar .menu-text,
  body.sidebar-collapsed .app-sidebar .sidebar-label,
  body.sidebar-collapsed .staff-sidebar .sidebar-label{
    opacity:0;
    visibility:hidden;
    width:0;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
  }

  /* אייקונים נשארים גלויים במצב מצומצם */
  .app-sidebar .bi,
  .staff-sidebar .bi,
  .optimat-sidebar .bi,
  .app-sidebar svg,
  .staff-sidebar svg,
  .optimat-sidebar svg{
    flex:0 0 auto;
    min-width:1.25rem;
  }

  /* hover על מצומצם: מתרחב מעל התוכן בלי לשבור grid */
  body.sidebar-collapsed .app-sidebar:hover,
  body.sidebar-collapsed .staff-sidebar:hover,
  body.app-sidebar-collapsed .app-sidebar:hover,
  body.staff-sidebar-collapsed .staff-sidebar:hover,
  .sidebar-collapsed .app-sidebar:hover,
  .sidebar-collapsed .staff-sidebar:hover,
  .app-shell.sidebar-collapsed .app-sidebar:hover,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover,
  [data-sidebar-state="collapsed"] .app-sidebar:hover,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover{
    width:var(--opt-shell-sidebar-open) !important;
    min-width:var(--opt-shell-sidebar-open) !important;
    max-width:min(var(--opt-shell-sidebar-open), 92vw) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18);
  }

  body.sidebar-collapsed .app-sidebar:hover .nav-text,
  body.sidebar-collapsed .staff-sidebar:hover .nav-text,
  body.app-sidebar-collapsed .app-sidebar:hover .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar:hover .nav-text,
  .sidebar-collapsed .app-sidebar:hover .nav-text,
  .sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover .nav-text,
  body.sidebar-collapsed .app-sidebar:hover .menu-text,
  body.sidebar-collapsed .staff-sidebar:hover .menu-text,
  body.sidebar-collapsed .app-sidebar:hover .sidebar-label,
  body.sidebar-collapsed .staff-sidebar:hover .sidebar-label{
    opacity:1;
    visibility:visible;
    width:auto;
    max-width:180px;
  }
}

/* ---------- טווח ביניים: לא לתת להידר להישבר ---------- */
@media (max-width:1199.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.4rem;
    padding-inline:.75rem !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:190px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"]{
    flex-basis:220px;
  }
}

/* ---------- מובייל וטאבלט: sidebar כ-overlay, header קומפקטי ---------- */
@media (max-width:991.98px){
  :root{ --opt-shell-topbar-h:58px; }

  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    min-height:var(--opt-shell-topbar-h);
    padding:.45rem .65rem !important;
    flex-wrap:nowrap !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:145px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    flex:1 1 auto;
    max-width:calc(100vw - 250px) !important;
  }

  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    width:min(86vw, 320px) !important;
    min-width:0 !important;
    max-width:min(86vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%);
    transition:transform .22s ease;
    box-shadow:-18px 0 42px rgba(15,23,42,.22);
  }

  body.sidebar-open .app-sidebar,
  body.sidebar-open .staff-sidebar,
  body.app-sidebar-open .app-sidebar,
  body.staff-sidebar-open .staff-sidebar,
  .sidebar-open .app-sidebar,
  .sidebar-open .staff-sidebar,
  .app-shell.sidebar-open .app-sidebar,
  .staff-shell.sidebar-open .staff-sidebar,
  .app-shell.is-sidebar-open .app-sidebar,
  .staff-shell.is-sidebar-open .staff-sidebar,
  [data-sidebar-state="open"] .app-sidebar,
  [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] .app-sidebar,
  html[dir="ltr"] .staff-sidebar,
  html[dir="ltr"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%);
  }

  html[dir="ltr"] body.sidebar-open .app-sidebar,
  html[dir="ltr"] body.sidebar-open .staff-sidebar,
  html[dir="ltr"] body.app-sidebar-open .app-sidebar,
  html[dir="ltr"] body.staff-sidebar-open .staff-sidebar,
  html[dir="ltr"] .sidebar-open .app-sidebar,
  html[dir="ltr"] .sidebar-open .staff-sidebar,
  html[dir="ltr"] .app-shell.sidebar-open .app-sidebar,
  html[dir="ltr"] .staff-shell.sidebar-open .staff-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .app-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    margin-inline:0 !important;
    padding-inline:.75rem !important;
    width:100% !important;
  }
}

/* ---------- מובייל צר: פחות טקסט בהידר, בלי שבירת שורה ---------- */
@media (max-width:767.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.3rem;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    max-width:calc(100vw - 180px) !important;
  }

  .app-header .btn span,
  .staff-header .btn span,
  .app-topbar .btn span,
  .staff-topbar .btn span,
  .app-header .button-label,
  .staff-header .button-label,
  .app-topbar .button-label,
  .staff-topbar .button-label{
    max-width:0;
    opacity:0;
    overflow:hidden;
    display:inline-block;
    white-space:nowrap;
  }

  .app-header .btn,
  .staff-header .btn,
  .app-topbar .btn,
  .staff-topbar .btn{
    min-width:40px;
    min-height:40px;
    padding-inline:.55rem !important;
  }

  .app-header img,
  .staff-header img,
  .app-topbar img,
  .staff-topbar img{
    max-height:36px;
  }
}

@media (max-width:575.98px){
  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:112px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    display:none !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    padding-inline:.55rem !important;
  }
}

/* נגישות: בלי אנימציות למשתמשים שמעדיפים פחות תנועה */
@media (prefers-reduced-motion: reduce){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    transition:none !important;
  }
}

/* ---------- v78 mobile overlay click-layer fix: backdrop below sidebar, sidebar always clickable ---------- */
@media (max-width:991.98px){
  /* הסיידבר חייב להיות מעל שכבת הרקע/החשכה, אחרת אי אפשר ללחוץ עליו במובייל */
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    z-index:1075 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }

  /* שכבת רקע של הסיידבר: מתחת לסיידבר, מעל התוכן */
  .sidebar-backdrop,
  .app-sidebar-backdrop,
  .staff-sidebar-backdrop,
  .optimat-sidebar-backdrop,
  .mobile-sidebar-backdrop,
  .layout-backdrop,
  .app-layout-backdrop,
  .staff-layout-backdrop,
  .offcanvas-backdrop{
    z-index:1060 !important;
  }

  /* אם קיימת שכבת רקע פנימית בתוך ה-shell, שלא תכסה את הסיידבר עצמו */
  .app-shell .sidebar-backdrop,
  .staff-shell .sidebar-backdrop,
  .app-shell .app-sidebar-backdrop,
  .staff-shell .staff-sidebar-backdrop,
  .app-shell .layout-backdrop,
  .staff-shell .layout-backdrop{
    pointer-events:auto !important;
  }

  /* כל מה שבתוך הסיידבר נשאר לחיץ ונגיש */
  .app-sidebar *,
  .staff-sidebar *,
  .optimat-sidebar *{
    pointer-events:auto;
  }

  /* כפתור פתיחה/סגירה והידר מעל התוכן, אך מתחת לסיידבר פתוח */
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    z-index:1050 !important;
  }

  /* מונע מצב שבו אלמנט תוכן שקיבל z-index גבוה מכסה את הסיידבר במובייל */
  body.sidebar-open .app-main,
  body.sidebar-open .staff-main,
  body.sidebar-open .app-content,
  body.sidebar-open .staff-content,
  body.app-sidebar-open .app-main,
  body.app-sidebar-open .app-content,
  body.staff-sidebar-open .staff-main,
  body.staff-sidebar-open .staff-content,
  .app-shell.sidebar-open .app-main,
  .app-shell.sidebar-open .app-content,
  .staff-shell.sidebar-open .staff-main,
  .staff-shell.sidebar-open .staff-content,
  .app-shell.is-sidebar-open .app-main,
  .app-shell.is-sidebar-open .app-content,
  .staff-shell.is-sidebar-open .staff-main,
  .staff-shell.is-sidebar-open .staff-content,
  [data-sidebar-state="open"] .app-main,
  [data-sidebar-state="open"] .app-content,
  [data-sidebar-state="open"] .staff-main,
  [data-sidebar-state="open"] .staff-content{
    position:relative;
    z-index:1;
  }

  /* נגישות טאצ׳: פריטי ניווט לא יהיו קטנים מדי במובייל */
  .app-sidebar a,
  .staff-sidebar a,
  .optimat-sidebar a,
  .app-sidebar button,
  .staff-sidebar button,
  .optimat-sidebar button,
  .app-sidebar [role="button"],
  .staff-sidebar [role="button"],
  .optimat-sidebar [role="button"]{
    min-height:42px;
  }

  /* פוקוס ברור במקלדת בלי שינוי עיצוב רגיל */
  .app-sidebar a:focus-visible,
  .staff-sidebar a:focus-visible,
  .optimat-sidebar a:focus-visible,
  .app-sidebar button:focus-visible,
  .staff-sidebar button:focus-visible,
  .optimat-sidebar button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
  }
}


/* ---------- v79 HARD mobile sidebar backdrop fix ----------
   Problem seen in hamburger mobile mode: a dark backdrop/overlay can sit above
   the sidebar and steal pointer/touch events. This block is intentionally loaded
   LAST and does not change page/content design. */
@media (max-width:991.98px){
  /* Always put the real navigation panel at the absolute top of the mobile stack. */
  body[data-app-area] .app-sidebar,
  body[data-app-area] .staff-sidebar,
  body[data-app-area] .optimat-sidebar,
  .app-shell .app-sidebar,
  .staff-shell .staff-sidebar,
  .app-layout .app-sidebar,
  .staff-layout .staff-sidebar,
  aside.app-sidebar,
  aside.staff-sidebar,
  nav.app-sidebar,
  nav.staff-sidebar{
    position:fixed !important;
    z-index:2147483600 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    isolation:isolate !important;
  }

  /* Everything inside the sidebar must remain clickable/tappable. */
  body[data-app-area] .app-sidebar,
  body[data-app-area] .app-sidebar *,
  body[data-app-area] .staff-sidebar,
  body[data-app-area] .staff-sidebar *,
  body[data-app-area] .optimat-sidebar,
  body[data-app-area] .optimat-sidebar *{
    pointer-events:auto !important;
  }

  /* Real backdrop elements: keep the dark visual layer, but never let it steal clicks.
     We intentionally exclude real Bootstrap modals via body.modal-open below. */
  body:not(.modal-open) .sidebar-backdrop,
  body:not(.modal-open) .app-sidebar-backdrop,
  body:not(.modal-open) .staff-sidebar-backdrop,
  body:not(.modal-open) .optimat-sidebar-backdrop,
  body:not(.modal-open) .mobile-sidebar-backdrop,
  body:not(.modal-open) .layout-backdrop,
  body:not(.modal-open) .app-layout-backdrop,
  body:not(.modal-open) .staff-layout-backdrop,
  body:not(.modal-open) .drawer-backdrop,
  body:not(.modal-open) .menu-backdrop,
  body:not(.modal-open) .nav-backdrop,
  body:not(.modal-open) .sidebar-overlay,
  body:not(.modal-open) .app-sidebar-overlay,
  body:not(.modal-open) .mobile-sidebar-overlay,
  body:not(.modal-open) .layout-overlay,
  body:not(.modal-open) .offcanvas-backdrop:not(.modal-backdrop){
    z-index:0 !important;
    pointer-events:none !important;
  }

  /* Pseudo backdrops are common in custom shells. These are the usual reason
     z-index alone does not solve the issue. */
  body:not(.modal-open) .app-shell::before,
  body:not(.modal-open) .app-shell::after,
  body:not(.modal-open) .staff-shell::before,
  body:not(.modal-open) .staff-shell::after,
  body:not(.modal-open) .app-layout::before,
  body:not(.modal-open) .app-layout::after,
  body:not(.modal-open) .staff-layout::before,
  body:not(.modal-open) .staff-layout::after{
    pointer-events:none !important;
  }

  /* If the shell itself got a high z-index/transform, force the sidebar above it. */
  body:not(.modal-open) .app-shell,
  body:not(.modal-open) .staff-shell,
  body:not(.modal-open) .app-layout,
  body:not(.modal-open) .staff-layout{
    isolation:auto !important;
  }

  /* Hamburger / close buttons should stay tappable as well. */
  .app-sidebar-toggle,
  .staff-sidebar-toggle,
  .sidebar-toggle,
  .hamburger,
  [data-sidebar-toggle],
  [data-bs-toggle="offcanvas"]{
    position:relative;
    z-index:2147483650 !important;
    pointer-events:auto !important;
  }
}

/* OPTIMAT / POSMAT / BIZMAT - Global floating system messages v77
   Load once in the global layout, not in a specific page. */
:root{
  --optimat-floating-notice-top: calc(var(--app-header-height, var(--staff-header-height, 72px)) + 18px);
  --optimat-floating-notice-left: 22px;
  --optimat-floating-notice-width: min(410px, calc(100vw - 44px));
  --optimat-floating-notice-z: 2147483000;
}

.optimat-floating-notices{
  position:fixed!important;
  top:var(--optimat-floating-notice-top)!important;
  left:var(--optimat-floating-notice-left)!important;
  width:var(--optimat-floating-notice-width)!important;
  max-height:calc(100vh - var(--optimat-floating-notice-top) - 18px)!important;
  z-index:var(--optimat-floating-notice-z)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  pointer-events:none!important;
  direction:rtl!important;
}

.optimat-floating-notices .optimat-floating-notice,
.optimat-floating-notice.is-free-position{
  width:100%!important;
  max-width:min(410px, calc(100vw - 16px))!important;
  margin:0!important;
  padding:13px 44px 13px 46px!important;
  border-radius:18px!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:rgba(255,255,255,.96)!important;
  color:#0f172a!important;
  box-shadow:0 18px 46px rgba(15,23,42,.15)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  font-weight:700!important;
  line-height:1.55!important;
  pointer-events:auto!important;
  cursor:grab!important;
  user-select:none!important;
  touch-action:none!important;
  overflow:hidden!important;
  animation:optimatFloatingNoticeIn .18s ease-out both;
  box-sizing:border-box!important;
  direction:rtl!important;
}

.optimat-floating-notices .optimat-floating-notice{
  position:relative!important;
}

.optimat-floating-notice.is-free-position{
  position:fixed!important;
}

.optimat-floating-notices .optimat-floating-notice:active,
.optimat-floating-notice.is-free-position:active{
  cursor:grabbing!important;
}

.optimat-floating-notices .optimat-floating-notice.alert-success,
.optimat-floating-notice.is-free-position.alert-success,
.optimat-floating-notice.is-success{
  background:rgba(240,253,244,.97)!important;
  border-color:rgba(34,197,94,.30)!important;
  color:#166534!important;
}

.optimat-floating-notices .optimat-floating-notice.alert-danger,
.optimat-floating-notice.is-free-position.alert-danger,
.optimat-floating-notices .optimat-floating-notice.alert-error,
.optimat-floating-notice.is-free-position.alert-error,
.optimat-floating-notice.is-error{
  background:rgba(254,242,242,.97)!important;
  border-color:rgba(239,68,68,.32)!important;
  color:#991b1b!important;
}

.optimat-floating-notices .optimat-floating-notice.alert-warning,
.optimat-floating-notice.is-free-position.alert-warning,
.optimat-floating-notice.is-warning{
  background:rgba(255,251,235,.97)!important;
  border-color:rgba(245,158,11,.32)!important;
  color:#92400e!important;
}

.optimat-floating-notices .optimat-floating-notice.alert-info,
.optimat-floating-notice.is-free-position.alert-info,
.optimat-floating-notice.is-info{
  background:rgba(239,246,255,.97)!important;
  border-color:rgba(59,130,246,.30)!important;
  color:#1e40af!important;
}

.optimat-floating-notices .optimat-floating-notice::before,
.optimat-floating-notice.is-free-position::before{
  content:'⋮⋮';
  position:absolute!important;
  inset-inline-start:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:rgba(100,116,139,.72)!important;
  font-weight:900!important;
  letter-spacing:-2px!important;
  font-size:16px!important;
  line-height:1!important;
}

.optimat-floating-notices .optimat-floating-close,
.optimat-floating-notice.is-free-position .optimat-floating-close{
  position:absolute!important;
  inset-inline-end:10px!important;
  top:10px!important;
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  border:1px solid rgba(100,116,139,.18)!important;
  background:rgba(255,255,255,.76)!important;
  color:currentColor!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  font-size:17px!important;
  line-height:1!important;
  cursor:pointer!important;
  opacity:.78!important;
  z-index:2!important;
}

.optimat-floating-notices .optimat-floating-close:hover,
.optimat-floating-notice.is-free-position .optimat-floating-close:hover{
  opacity:1!important;
  background:#fff!important;
}

.optimat-floating-notices .optimat-floating-notice.is-dragging,
.optimat-floating-notice.is-free-position.is-dragging{
  opacity:.96!important;
  box-shadow:0 22px 60px rgba(15,23,42,.22)!important;
  transition:none!important;
  animation:none!important;
}

.optimat-floating-notices .optimat-floating-notice.is-closing,
.optimat-floating-notice.is-free-position.is-closing{
  animation:optimatFloatingNoticeOut .15s ease-in both!important;
}

.optimat-floating-notices .optimat-floating-notice.is-hidden,
.optimat-floating-notice.is-free-position.is-hidden{
  display:none!important;
}

.optimat-floating-tray{
  position:fixed!important;
  left:22px!important;
  bottom:22px!important;
  min-width:126px!important;
  height:42px!important;
  border:1px solid rgba(59,130,246,.28)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.97)!important;
  color:#1d4ed8!important;
  z-index:2147483001!important;
  box-shadow:0 16px 42px rgba(15,23,42,.17)!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:0 14px!important;
  font-weight:800!important;
  cursor:pointer!important;
  direction:rtl!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

.optimat-floating-tray.is-visible{
  display:inline-flex!important;
}

.optimat-floating-tray-icon{
  font-size:16px!important;
  line-height:1!important;
}

.optimat-floating-tray-count{
  min-width:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#2563eb!important;
  color:#fff!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  line-height:1!important;
}

@keyframes optimatFloatingNoticeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes optimatFloatingNoticeOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-8px)}
}

@media (max-width:768px){
  :root{
    --optimat-floating-notice-left:14px;
    --optimat-floating-notice-width:calc(100vw - 28px);
  }
  .optimat-floating-notices{
    top:auto!important;
    bottom:74px!important;
    max-height:45vh!important;
  }
  .optimat-floating-tray{
    left:14px!important;
    right:14px!important;
    bottom:16px!important;
    width:auto!important;
  }
}


/* v77: הודעות מערכת מותאמות יותר למסכים קטנים */
@media (max-width:992px){
  :root{
    --optimat-floating-notice-top: calc(var(--app-header-height, var(--staff-header-height, 62px)) + 10px);
    --optimat-floating-notice-left: 16px;
    --optimat-floating-notice-width: min(360px, calc(100vw - 32px));
  }

  .optimat-floating-notices .optimat-floating-notice,
  .optimat-floating-notice.is-free-position{
    max-width:min(360px, calc(100vw - 20px))!important;
    padding:11px 40px 11px 40px!important;
    border-radius:16px!important;
    font-size:.9rem!important;
    line-height:1.48!important;
  }
}

@media (max-width:768px){
  :root{
    --optimat-floating-notice-left:12px;
    --optimat-floating-notice-width:calc(100vw - 24px);
  }

  .optimat-floating-notices{
    bottom:68px!important;
    max-height:42vh!important;
    gap:8px!important;
  }

  .optimat-floating-notices .optimat-floating-notice,
  .optimat-floating-notice.is-free-position{
    max-width:calc(100vw - 18px)!important;
    padding:9px 36px 9px 36px!important;
    border-radius:14px!important;
    font-size:.82rem!important;
    line-height:1.42!important;
    box-shadow:0 12px 30px rgba(15,23,42,.14)!important;
  }

  .optimat-floating-notices .optimat-floating-close,
  .optimat-floating-notice.is-free-position .optimat-floating-close{
    width:22px!important;
    height:22px!important;
    top:8px!important;
    inset-inline-end:8px!important;
    font-size:15px!important;
  }

  .optimat-floating-notices .optimat-floating-notice::before,
  .optimat-floating-notice.is-free-position::before{
    inset-inline-start:9px!important;
    font-size:14px!important;
  }

  .optimat-floating-tray{
    min-width:0!important;
    height:38px!important;
    bottom:12px!important;
    padding:0 12px!important;
    font-size:.86rem!important;
  }

  .optimat-floating-tray-count{
    min-width:20px!important;
    height:20px!important;
    font-size:11px!important;
  }
}

@media (max-width:420px){
  .optimat-floating-notices .optimat-floating-notice,
  .optimat-floating-notice.is-free-position{
    max-width:calc(100vw - 14px)!important;
    padding:8px 34px 8px 32px!important;
    border-radius:13px!important;
    font-size:.78rem!important;
    line-height:1.38!important;
  }
}
/*
 * OPTIMAT / POSMAT responsive shell patch v82
 * Scope: sidebar + header responsiveness only.
 * No business logic, no colors/theme redesign, no page-content styling.
 * Load AFTER app-ui.css / staff-ui.css.
 */

:root{
  --opt-shell-sidebar-open: 288px;
  --opt-shell-sidebar-collapsed: 76px;
  --opt-shell-topbar-h: 64px;
  --opt-shell-mobile-breakpoint: 991.98px;
}

/* ---------- בסיס: למנוע גלישה אופקית בריספונסיביות ---------- */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.app-shell,
.staff-shell,
.app-layout,
.staff-layout,
.app-main,
.staff-main,
.app-content,
.staff-content{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Header: הידוק רספונסיבי בלבד ---------- */
.app-header,
.staff-header,
.app-topbar,
.staff-topbar,
.optimat-app-header,
.optimat-staff-header{
  position:sticky;
  top:0;
  z-index:1030;
  min-height:var(--opt-shell-topbar-h);
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:.5rem;
  overflow:visible;
}

.app-header > *,
.staff-header > *,
.app-topbar > *,
.staff-topbar > *,
.optimat-app-header > *,
.optimat-staff-header > *{
  min-width:0;
}

.app-header .app-search,
.staff-header .staff-search,
.app-topbar .app-search,
.staff-topbar .staff-search,
.app-header form[role="search"],
.staff-header form[role="search"],
.app-topbar form[role="search"],
.staff-topbar form[role="search"],
.app-header .search-box,
.staff-header .search-box,
.app-topbar .search-box,
.staff-topbar .search-box{
  min-width:0 !important;
  max-width:100% !important;
  flex:1 1 280px;
}

.app-header input[type="search"],
.staff-header input[type="search"],
.app-topbar input[type="search"],
.staff-topbar input[type="search"]{
  min-width:0 !important;
  width:100% !important;
}

.app-header .header-actions,
.staff-header .header-actions,
.app-topbar .header-actions,
.staff-topbar .header-actions,
.app-header .app-header-actions,
.staff-header .staff-header-actions,
.app-topbar .app-header-actions,
.staff-topbar .staff-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:0;
  max-width:100%;
}

/* לוגו/זהות עסק לא ישברו את ההידר */
.app-header .brand,
.staff-header .brand,
.app-topbar .brand,
.staff-topbar .brand,
.app-header .business-brand,
.staff-header .business-brand,
.app-topbar .business-brand,
.staff-topbar .business-brand,
.app-header .app-brand,
.staff-header .staff-brand,
.app-topbar .app-brand,
.staff-topbar .staff-brand{
  min-width:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}

.app-header img,
.staff-header img,
.app-topbar img,
.staff-topbar img{
  max-height:42px;
  width:auto;
  object-fit:contain;
}

/* ---------- Sidebar: מצב דסקטופ רגיל/מצומצם ---------- */
.app-sidebar,
.staff-sidebar,
.optimat-sidebar{
  box-sizing:border-box;
  max-width:min(var(--opt-shell-sidebar-open), 92vw);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  z-index:1040;
}

/* בדסקטופ: הסיידבר לא אמור לדחוף/להסתיר תוכן בצורה לא יציבה */
@media (min-width:992px){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    height:100dvh;
    max-height:100dvh;
  }

  /* תמיכה בשמות מצבים נפוצים בלי לשנות JS קיים */
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-collapsed .staff-sidebar,
  body.app-sidebar-collapsed .app-sidebar,
  body.staff-sidebar-collapsed .staff-sidebar,
  .sidebar-collapsed .app-sidebar,
  .sidebar-collapsed .staff-sidebar,
  .app-shell.sidebar-collapsed .app-sidebar,
  .staff-shell.sidebar-collapsed .staff-sidebar,
  .app-shell.is-sidebar-collapsed .app-sidebar,
  .staff-shell.is-sidebar-collapsed .staff-sidebar,
  [data-sidebar-state="collapsed"] .app-sidebar,
  [data-sidebar-state="collapsed"] .staff-sidebar{
    width:var(--opt-shell-sidebar-collapsed) !important;
    min-width:var(--opt-shell-sidebar-collapsed) !important;
    max-width:var(--opt-shell-sidebar-collapsed) !important;
  }

  body.sidebar-collapsed .app-sidebar .nav-text,
  body.sidebar-collapsed .staff-sidebar .nav-text,
  body.app-sidebar-collapsed .app-sidebar .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar .nav-text,
  .sidebar-collapsed .app-sidebar .nav-text,
  .sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar .nav-text,
  body.sidebar-collapsed .app-sidebar .menu-text,
  body.sidebar-collapsed .staff-sidebar .menu-text,
  body.sidebar-collapsed .app-sidebar .sidebar-label,
  body.sidebar-collapsed .staff-sidebar .sidebar-label{
    opacity:0;
    visibility:hidden;
    width:0;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
  }

  /* אייקונים נשארים גלויים במצב מצומצם */
  .app-sidebar .bi,
  .staff-sidebar .bi,
  .optimat-sidebar .bi,
  .app-sidebar svg,
  .staff-sidebar svg,
  .optimat-sidebar svg{
    flex:0 0 auto;
    min-width:1.25rem;
  }

  /* hover על מצומצם: מתרחב מעל התוכן בלי לשבור grid */
  body.sidebar-collapsed .app-sidebar:hover,
  body.sidebar-collapsed .staff-sidebar:hover,
  body.app-sidebar-collapsed .app-sidebar:hover,
  body.staff-sidebar-collapsed .staff-sidebar:hover,
  .sidebar-collapsed .app-sidebar:hover,
  .sidebar-collapsed .staff-sidebar:hover,
  .app-shell.sidebar-collapsed .app-sidebar:hover,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover,
  [data-sidebar-state="collapsed"] .app-sidebar:hover,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover{
    width:var(--opt-shell-sidebar-open) !important;
    min-width:var(--opt-shell-sidebar-open) !important;
    max-width:min(var(--opt-shell-sidebar-open), 92vw) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18);
  }

  body.sidebar-collapsed .app-sidebar:hover .nav-text,
  body.sidebar-collapsed .staff-sidebar:hover .nav-text,
  body.app-sidebar-collapsed .app-sidebar:hover .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar:hover .nav-text,
  .sidebar-collapsed .app-sidebar:hover .nav-text,
  .sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover .nav-text,
  body.sidebar-collapsed .app-sidebar:hover .menu-text,
  body.sidebar-collapsed .staff-sidebar:hover .menu-text,
  body.sidebar-collapsed .app-sidebar:hover .sidebar-label,
  body.sidebar-collapsed .staff-sidebar:hover .sidebar-label{
    opacity:1;
    visibility:visible;
    width:auto;
    max-width:180px;
  }
}

/* ---------- טווח ביניים: לא לתת להידר להישבר ---------- */
@media (max-width:1199.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.4rem;
    padding-inline:.75rem !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:190px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"]{
    flex-basis:220px;
  }
}

/* ---------- מובייל וטאבלט: sidebar כ-overlay, header קומפקטי ---------- */
@media (max-width:991.98px){
  :root{ --opt-shell-topbar-h:58px; }

  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    min-height:var(--opt-shell-topbar-h);
    padding:.45rem .65rem !important;
    flex-wrap:nowrap !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:145px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    flex:1 1 auto;
    max-width:calc(100vw - 250px) !important;
  }

  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    width:min(86vw, 320px) !important;
    min-width:0 !important;
    max-width:min(86vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%);
    transition:transform .22s ease;
    box-shadow:-18px 0 42px rgba(15,23,42,.22);
  }

  body.sidebar-open .app-sidebar,
  body.sidebar-open .staff-sidebar,
  body.app-sidebar-open .app-sidebar,
  body.staff-sidebar-open .staff-sidebar,
  .sidebar-open .app-sidebar,
  .sidebar-open .staff-sidebar,
  .app-shell.sidebar-open .app-sidebar,
  .staff-shell.sidebar-open .staff-sidebar,
  .app-shell.is-sidebar-open .app-sidebar,
  .staff-shell.is-sidebar-open .staff-sidebar,
  [data-sidebar-state="open"] .app-sidebar,
  [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] .app-sidebar,
  html[dir="ltr"] .staff-sidebar,
  html[dir="ltr"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%);
  }

  html[dir="ltr"] body.sidebar-open .app-sidebar,
  html[dir="ltr"] body.sidebar-open .staff-sidebar,
  html[dir="ltr"] body.app-sidebar-open .app-sidebar,
  html[dir="ltr"] body.staff-sidebar-open .staff-sidebar,
  html[dir="ltr"] .sidebar-open .app-sidebar,
  html[dir="ltr"] .sidebar-open .staff-sidebar,
  html[dir="ltr"] .app-shell.sidebar-open .app-sidebar,
  html[dir="ltr"] .staff-shell.sidebar-open .staff-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .app-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    margin-inline:0 !important;
    padding-inline:.75rem !important;
    width:100% !important;
  }
}

/* ---------- מובייל צר: פחות טקסט בהידר, בלי שבירת שורה ---------- */
@media (max-width:767.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.3rem;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    max-width:calc(100vw - 180px) !important;
  }

  .app-header .btn span,
  .staff-header .btn span,
  .app-topbar .btn span,
  .staff-topbar .btn span,
  .app-header .button-label,
  .staff-header .button-label,
  .app-topbar .button-label,
  .staff-topbar .button-label{
    max-width:0;
    opacity:0;
    overflow:hidden;
    display:inline-block;
    white-space:nowrap;
  }

  .app-header .btn,
  .staff-header .btn,
  .app-topbar .btn,
  .staff-topbar .btn{
    min-width:40px;
    min-height:40px;
    padding-inline:.55rem !important;
  }

  .app-header img,
  .staff-header img,
  .app-topbar img,
  .staff-topbar img{
    max-height:36px;
  }
}

@media (max-width:575.98px){
  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:112px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    display:none !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    padding-inline:.55rem !important;
  }
}

/* נגישות: בלי אנימציות למשתמשים שמעדיפים פחות תנועה */
@media (prefers-reduced-motion: reduce){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    transition:none !important;
  }
}

/* ---------- v78 mobile overlay click-layer fix: backdrop below sidebar, sidebar always clickable ---------- */
@media (max-width:991.98px){
  /* הסיידבר חייב להיות מעל שכבת הרקע/החשכה, אחרת אי אפשר ללחוץ עליו במובייל */
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    z-index:1075 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }

  /* שכבת רקע של הסיידבר: מתחת לסיידבר, מעל התוכן */
  .sidebar-backdrop,
  .app-sidebar-backdrop,
  .staff-sidebar-backdrop,
  .optimat-sidebar-backdrop,
  .mobile-sidebar-backdrop,
  .layout-backdrop,
  .app-layout-backdrop,
  .staff-layout-backdrop,
  .offcanvas-backdrop{
    z-index:1060 !important;
  }

  /* אם קיימת שכבת רקע פנימית בתוך ה-shell, שלא תכסה את הסיידבר עצמו */
  .app-shell .sidebar-backdrop,
  .staff-shell .sidebar-backdrop,
  .app-shell .app-sidebar-backdrop,
  .staff-shell .staff-sidebar-backdrop,
  .app-shell .layout-backdrop,
  .staff-shell .layout-backdrop{
    pointer-events:auto !important;
  }

  /* כל מה שבתוך הסיידבר נשאר לחיץ ונגיש */
  .app-sidebar *,
  .staff-sidebar *,
  .optimat-sidebar *{
    pointer-events:auto;
  }

  /* כפתור פתיחה/סגירה והידר מעל התוכן, אך מתחת לסיידבר פתוח */
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    z-index:1050 !important;
  }

  /* מונע מצב שבו אלמנט תוכן שקיבל z-index גבוה מכסה את הסיידבר במובייל */
  body.sidebar-open .app-main,
  body.sidebar-open .staff-main,
  body.sidebar-open .app-content,
  body.sidebar-open .staff-content,
  body.app-sidebar-open .app-main,
  body.app-sidebar-open .app-content,
  body.staff-sidebar-open .staff-main,
  body.staff-sidebar-open .staff-content,
  .app-shell.sidebar-open .app-main,
  .app-shell.sidebar-open .app-content,
  .staff-shell.sidebar-open .staff-main,
  .staff-shell.sidebar-open .staff-content,
  .app-shell.is-sidebar-open .app-main,
  .app-shell.is-sidebar-open .app-content,
  .staff-shell.is-sidebar-open .staff-main,
  .staff-shell.is-sidebar-open .staff-content,
  [data-sidebar-state="open"] .app-main,
  [data-sidebar-state="open"] .app-content,
  [data-sidebar-state="open"] .staff-main,
  [data-sidebar-state="open"] .staff-content{
    position:relative;
    z-index:1;
  }

  /* נגישות טאצ׳: פריטי ניווט לא יהיו קטנים מדי במובייל */
  .app-sidebar a,
  .staff-sidebar a,
  .optimat-sidebar a,
  .app-sidebar button,
  .staff-sidebar button,
  .optimat-sidebar button,
  .app-sidebar [role="button"],
  .staff-sidebar [role="button"],
  .optimat-sidebar [role="button"]{
    min-height:42px;
  }

  /* פוקוס ברור במקלדת בלי שינוי עיצוב רגיל */
  .app-sidebar a:focus-visible,
  .staff-sidebar a:focus-visible,
  .optimat-sidebar a:focus-visible,
  .app-sidebar button:focus-visible,
  .staff-sidebar button:focus-visible,
  .optimat-sidebar button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
  }
}


/* ---------- v79 HARD mobile sidebar backdrop fix ----------
   Problem seen in hamburger mobile mode: a dark backdrop/overlay can sit above
   the sidebar and steal pointer/touch events. This block is intentionally loaded
   LAST and does not change page/content design. */
@media (max-width:991.98px){
  /* Always put the real navigation panel at the absolute top of the mobile stack. */
  body[data-app-area] .app-sidebar,
  body[data-app-area] .staff-sidebar,
  body[data-app-area] .optimat-sidebar,
  .app-shell .app-sidebar,
  .staff-shell .staff-sidebar,
  .app-layout .app-sidebar,
  .staff-layout .staff-sidebar,
  aside.app-sidebar,
  aside.staff-sidebar,
  nav.app-sidebar,
  nav.staff-sidebar{
    position:fixed !important;
    z-index:2147483600 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    isolation:isolate !important;
  }

  /* Everything inside the sidebar must remain clickable/tappable. */
  body[data-app-area] .app-sidebar,
  body[data-app-area] .app-sidebar *,
  body[data-app-area] .staff-sidebar,
  body[data-app-area] .staff-sidebar *,
  body[data-app-area] .optimat-sidebar,
  body[data-app-area] .optimat-sidebar *{
    pointer-events:auto !important;
  }

  /* Real backdrop elements: keep the dark visual layer, but never let it steal clicks.
     We intentionally exclude real Bootstrap modals via body.modal-open below. */
  body:not(.modal-open) .sidebar-backdrop,
  body:not(.modal-open) .app-sidebar-backdrop,
  body:not(.modal-open) .staff-sidebar-backdrop,
  body:not(.modal-open) .optimat-sidebar-backdrop,
  body:not(.modal-open) .mobile-sidebar-backdrop,
  body:not(.modal-open) .layout-backdrop,
  body:not(.modal-open) .app-layout-backdrop,
  body:not(.modal-open) .staff-layout-backdrop,
  body:not(.modal-open) .drawer-backdrop,
  body:not(.modal-open) .menu-backdrop,
  body:not(.modal-open) .nav-backdrop,
  body:not(.modal-open) .sidebar-overlay,
  body:not(.modal-open) .app-sidebar-overlay,
  body:not(.modal-open) .mobile-sidebar-overlay,
  body:not(.modal-open) .layout-overlay,
  body:not(.modal-open) .offcanvas-backdrop:not(.modal-backdrop){
    z-index:2147483000 !important;
    pointer-events:none !important;
  }

  /* Pseudo backdrops are common in custom shells. These are the usual reason
     z-index alone does not solve the issue. */
  body:not(.modal-open) .app-shell::before,
  body:not(.modal-open) .app-shell::after,
  body:not(.modal-open) .staff-shell::before,
  body:not(.modal-open) .staff-shell::after,
  body:not(.modal-open) .app-layout::before,
  body:not(.modal-open) .app-layout::after,
  body:not(.modal-open) .staff-layout::before,
  body:not(.modal-open) .staff-layout::after{
    pointer-events:none !important;
  }

  /* If the shell itself got a high z-index/transform, force the sidebar above it. */
  body:not(.modal-open) .app-shell,
  body:not(.modal-open) .staff-shell,
  body:not(.modal-open) .app-layout,
  body:not(.modal-open) .staff-layout{
    isolation:auto !important;
  }

  /* Hamburger / close buttons should stay tappable as well. */
  .app-sidebar-toggle,
  .staff-sidebar-toggle,
  .sidebar-toggle,
  .hamburger,
  [data-sidebar-toggle],
  [data-bs-toggle="offcanvas"]{
    position:relative;
    z-index:2147483650 !important;
    pointer-events:auto !important;
  }
}


/* ---------- v81: mobile user icon visibility + hamburger ergonomics ---------- */
/* תיקון ממוקד: ב-v79 הוסתרו span-ים בתוך כפתורים במובייל, וזה הסתיר גם את app-user-avatar. */
@media (max-width:767.98px){
  body[data-app-area="app"] .app-topbar .btn .app-user-avatar,
  body[data-app-area="app"] .app-header .btn .app-user-avatar,
  body[data-app-area="app"] .optimat-app-header .btn .app-user-avatar,
  body[data-app-area="app"] .topbar-user-avatar{
    display:inline-flex !important;
    max-width:none !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    color:#fff !important;
    font-size:.88rem !important;
    line-height:1 !important;
  }

  body[data-app-area="app"] .app-topbar .btn.icon-btn,
  body[data-app-area="app"] .app-header .btn.icon-btn{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* במובייל RTL ההמבורגר נשאר קרוב לפתיחת הסיידבר ובצד הנוח להפעלה. */
@media (max-width:991.98px){
  body[data-app-area="app"] .app-topbar [data-bs-target="#appSidebar"],
  body[data-app-area="app"] .app-header [data-bs-target="#appSidebar"]{
    order:-20 !important;
    flex:0 0 auto !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip{
    order:-10 !important;
    flex:0 1 auto !important;
  }
}


/* =========================================================
   OPTIMAT v82 - precision responsive breakpoints
   Scope: header + sidebar responsiveness only.
   Goal: no clipped buttons at intermediate widths.
   ========================================================= */

:root{
  --opt-shell-compact-actions-break: 1399.98px;
  --opt-shell-overlay-sidebar-break: 1199.98px;
}

/* Header flex safety: every inner row may shrink instead of cutting buttons */
body[data-app-area="app"] .app-topbar > .container-fluid{
  min-width:0 !important;
  max-width:100% !important;
  gap:.55rem !important;
}

body[data-app-area="app"] .app-topbar > .container-fluid > .d-flex:first-child{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:visible !important;
}

body[data-app-area="app"] .app-topbar > .container-fluid > .d-flex:last-child{
  min-width:0 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
}

body[data-app-area="app"] .topbar-search{
  min-width:0 !important;
  flex:1 1 360px !important;
  width:auto !important;
  max-width:min(520px, 34vw) !important;
}

body[data-app-area="app"] .topbar-brand-chip{
  min-width:0 !important;
  flex:0 1 auto !important;
  max-width:260px !important;
}

body[data-app-area="app"] .topbar-business-chip{
  min-width:0 !important;
  max-width:190px !important;
}

body[data-app-area="app"] .app-topbar .icon-btn,
body[data-app-area="app"] .app-topbar .topbar-quick-btn{
  flex:0 0 auto !important;
}

/* Large laptop / devtools width:
   move quick actions into the user menu before the header starts clipping */
@media (max-width:1399.98px){
  body[data-app-area="app"] .topbar-business-chip{
    display:none !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-quick-btn,
  body[data-app-area="app"] .app-topbar .topbar-action-form,
  body[data-app-area="app"] .app-topbar .topbar-clock-chip{
    display:none !important;
  }

  body[data-app-area="app"] .topbar-compact-actions{
    display:block !important;
  }

  body[data-app-area="app"] .topbar-search{
    max-width:min(420px, 38vw) !important;
    flex-basis:280px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:220px !important;
  }
}

/* Mid screens:
   use icon-only identity + keep search flexible */
@media (max-width:1299.98px){
  body[data-app-area="app"] .topbar-search{
    max-width:min(360px, 34vw) !important;
    flex-basis:220px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:150px !important;
    padding-inline:.65rem !important;
  }

  body[data-app-area="app"] .topbar-brand-chip .topbar-brand-text{
    max-width:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    display:inline-block !important;
    white-space:nowrap !important;
  }
}

/* Tablet / narrow laptop:
   switch sidebar to mobile-like overlay earlier, so content/header do not fight for width */
@media (max-width:1199.98px){
  body[data-app-area="app"] .app-sidebar,
  body[data-app-area="app"] .staff-sidebar,
  body[data-app-area="app"] .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    width:min(86vw, 320px) !important;
    min-width:0 !important;
    max-width:min(86vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%) !important;
    transition:transform .22s ease !important;
    box-shadow:-18px 0 42px rgba(15,23,42,.22) !important;
    z-index:1075 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }

  html[dir="ltr"] body[data-app-area="app"] .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .staff-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%) !important;
    box-shadow:18px 0 42px rgba(15,23,42,.22) !important;
  }

  body[data-app-area="app"].sidebar-open .app-sidebar,
  body[data-app-area="app"].app-sidebar-open .app-sidebar,
  body[data-app-area="app"] .app-shell.sidebar-open .app-sidebar,
  body[data-app-area="app"] .app-shell.is-sidebar-open .app-sidebar,
  body[data-app-area="app"] .app-sidebar.show,
  body[data-app-area="app"] .offcanvas.show.app-sidebar,
  body[data-app-area="app"] [data-sidebar-state="open"] .app-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] body[data-app-area="app"].sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"].app-sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.is-sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar.show,
  html[dir="ltr"] body[data-app-area="app"] .offcanvas.show.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] [data-sidebar-state="open"] .app-sidebar{
    transform:translateX(0) !important;
  }

  body[data-app-area="app"] .app-main,
  body[data-app-area="app"] .app-content{
    margin-inline:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  body[data-app-area="app"] #sidebarToggleDesktop,
  body[data-app-area="app"] .app-sidebar-toggle,
  body[data-app-area="app"] .sidebar-toggle-desktop{
    display:none !important;
  }

  body[data-app-area="app"] .app-topbar .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"],
  body[data-app-area="app"] .app-header .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"]{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    order:-30 !important;
  }

  body[data-app-area="app"] .app-topbar .dropdown-menu{
    max-height:calc(100dvh - 82px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }

  .sidebar-backdrop,
  .app-sidebar-backdrop,
  .staff-sidebar-backdrop,
  .optimat-sidebar-backdrop,
  .mobile-sidebar-backdrop,
  .layout-backdrop,
  .app-layout-backdrop,
  .staff-layout-backdrop,
  .offcanvas-backdrop{
    z-index:1060 !important;
  }
}

/* Narrow tablet: preserve the most important controls only */
@media (max-width:1099.98px){
  body[data-app-area="app"] .topbar-search{
    max-width:min(300px, 32vw) !important;
    flex-basis:180px !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    padding-inline:.65rem !important;
  }
}

/* Phone landscape / small tablets */
@media (max-width:899.98px){
  body[data-app-area="app"] .topbar-search{
    max-width:min(240px, 30vw) !important;
    flex-basis:150px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:116px !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    gap:.35rem !important;
  }
}

/* Small phone:
   keep header icon-only and avoid any clipped labels */
@media (max-width:575.98px){
  body[data-app-area="app"] .topbar-search{
    display:none !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:82px !important;
    min-width:0 !important;
    padding-inline:.45rem !important;
  }

  body[data-app-area="app"] .topbar-brand-chip img{
    max-width:62px !important;
    max-height:32px !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    padding-inline:.5rem !important;
    gap:.28rem !important;
  }

  body[data-app-area="app"] .app-topbar .dropdown-menu{
    max-width:calc(100vw - 18px) !important;
    min-width:min(300px, calc(100vw - 18px)) !important;
  }
}

/* Extra narrow: still no horizontal clipping */
@media (max-width:420px){
  body[data-app-area="app"] .topbar-brand-chip{
    max-width:70px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip img{
    max-width:54px !important;
  }

  body[data-app-area="app"] .app-topbar .icon-btn,
  body[data-app-area="app"] .app-header .icon-btn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }

  body[data-app-area="app"] .app-topbar .btn .app-user-avatar{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
  }
}
/*
 * OPTIMAT / POSMAT responsive shell patch v83
 * Scope: sidebar + header responsiveness only.
 * No business logic, no colors/theme redesign, no page-content styling.
 * Load AFTER app-ui.css / staff-ui.css.
 */

:root{
  --opt-shell-sidebar-open: 288px;
  --opt-shell-sidebar-collapsed: 76px;
  --opt-shell-topbar-h: 64px;
  --opt-shell-mobile-breakpoint: 991.98px;
}

/* ---------- בסיס: למנוע גלישה אופקית בריספונסיביות ---------- */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.app-shell,
.staff-shell,
.app-layout,
.staff-layout,
.app-main,
.staff-main,
.app-content,
.staff-content{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Header: הידוק רספונסיבי בלבד ---------- */
.app-header,
.staff-header,
.app-topbar,
.staff-topbar,
.optimat-app-header,
.optimat-staff-header{
  position:sticky;
  top:0;
  z-index:1030;
  min-height:var(--opt-shell-topbar-h);
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:.5rem;
  overflow:visible;
}

.app-header > *,
.staff-header > *,
.app-topbar > *,
.staff-topbar > *,
.optimat-app-header > *,
.optimat-staff-header > *{
  min-width:0;
}

.app-header .app-search,
.staff-header .staff-search,
.app-topbar .app-search,
.staff-topbar .staff-search,
.app-header form[role="search"],
.staff-header form[role="search"],
.app-topbar form[role="search"],
.staff-topbar form[role="search"],
.app-header .search-box,
.staff-header .search-box,
.app-topbar .search-box,
.staff-topbar .search-box{
  min-width:0 !important;
  max-width:100% !important;
  flex:1 1 280px;
}

.app-header input[type="search"],
.staff-header input[type="search"],
.app-topbar input[type="search"],
.staff-topbar input[type="search"]{
  min-width:0 !important;
  width:100% !important;
}

.app-header .header-actions,
.staff-header .header-actions,
.app-topbar .header-actions,
.staff-topbar .header-actions,
.app-header .app-header-actions,
.staff-header .staff-header-actions,
.app-topbar .app-header-actions,
.staff-topbar .staff-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:0;
  max-width:100%;
}

/* לוגו/זהות עסק לא ישברו את ההידר */
.app-header .brand,
.staff-header .brand,
.app-topbar .brand,
.staff-topbar .brand,
.app-header .business-brand,
.staff-header .business-brand,
.app-topbar .business-brand,
.staff-topbar .business-brand,
.app-header .app-brand,
.staff-header .staff-brand,
.app-topbar .app-brand,
.staff-topbar .staff-brand{
  min-width:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}

.app-header img,
.staff-header img,
.app-topbar img,
.staff-topbar img{
  max-height:42px;
  width:auto;
  object-fit:contain;
}

/* ---------- Sidebar: מצב דסקטופ רגיל/מצומצם ---------- */
.app-sidebar,
.staff-sidebar,
.optimat-sidebar{
  box-sizing:border-box;
  max-width:min(var(--opt-shell-sidebar-open), 92vw);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  z-index:1040;
}

/* בדסקטופ: הסיידבר לא אמור לדחוף/להסתיר תוכן בצורה לא יציבה */
@media (min-width:992px){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    height:100dvh;
    max-height:100dvh;
  }

  /* תמיכה בשמות מצבים נפוצים בלי לשנות JS קיים */
  body.sidebar-collapsed .app-sidebar,
  body.sidebar-collapsed .staff-sidebar,
  body.app-sidebar-collapsed .app-sidebar,
  body.staff-sidebar-collapsed .staff-sidebar,
  .sidebar-collapsed .app-sidebar,
  .sidebar-collapsed .staff-sidebar,
  .app-shell.sidebar-collapsed .app-sidebar,
  .staff-shell.sidebar-collapsed .staff-sidebar,
  .app-shell.is-sidebar-collapsed .app-sidebar,
  .staff-shell.is-sidebar-collapsed .staff-sidebar,
  [data-sidebar-state="collapsed"] .app-sidebar,
  [data-sidebar-state="collapsed"] .staff-sidebar{
    width:var(--opt-shell-sidebar-collapsed) !important;
    min-width:var(--opt-shell-sidebar-collapsed) !important;
    max-width:var(--opt-shell-sidebar-collapsed) !important;
  }

  body.sidebar-collapsed .app-sidebar .nav-text,
  body.sidebar-collapsed .staff-sidebar .nav-text,
  body.app-sidebar-collapsed .app-sidebar .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar .nav-text,
  .sidebar-collapsed .app-sidebar .nav-text,
  .sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar .nav-text,
  body.sidebar-collapsed .app-sidebar .menu-text,
  body.sidebar-collapsed .staff-sidebar .menu-text,
  body.sidebar-collapsed .app-sidebar .sidebar-label,
  body.sidebar-collapsed .staff-sidebar .sidebar-label{
    opacity:0;
    visibility:hidden;
    width:0;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
  }

  /* אייקונים נשארים גלויים במצב מצומצם */
  .app-sidebar .bi,
  .staff-sidebar .bi,
  .optimat-sidebar .bi,
  .app-sidebar svg,
  .staff-sidebar svg,
  .optimat-sidebar svg{
    flex:0 0 auto;
    min-width:1.25rem;
  }

  /* hover על מצומצם: מתרחב מעל התוכן בלי לשבור grid */
  body.sidebar-collapsed .app-sidebar:hover,
  body.sidebar-collapsed .staff-sidebar:hover,
  body.app-sidebar-collapsed .app-sidebar:hover,
  body.staff-sidebar-collapsed .staff-sidebar:hover,
  .sidebar-collapsed .app-sidebar:hover,
  .sidebar-collapsed .staff-sidebar:hover,
  .app-shell.sidebar-collapsed .app-sidebar:hover,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover,
  [data-sidebar-state="collapsed"] .app-sidebar:hover,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover{
    width:var(--opt-shell-sidebar-open) !important;
    min-width:var(--opt-shell-sidebar-open) !important;
    max-width:min(var(--opt-shell-sidebar-open), 92vw) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18);
  }

  body.sidebar-collapsed .app-sidebar:hover .nav-text,
  body.sidebar-collapsed .staff-sidebar:hover .nav-text,
  body.app-sidebar-collapsed .app-sidebar:hover .nav-text,
  body.staff-sidebar-collapsed .staff-sidebar:hover .nav-text,
  .sidebar-collapsed .app-sidebar:hover .nav-text,
  .sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.sidebar-collapsed .staff-sidebar:hover .nav-text,
  .app-shell.is-sidebar-collapsed .app-sidebar:hover .nav-text,
  .staff-shell.is-sidebar-collapsed .staff-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .app-sidebar:hover .nav-text,
  [data-sidebar-state="collapsed"] .staff-sidebar:hover .nav-text,
  body.sidebar-collapsed .app-sidebar:hover .menu-text,
  body.sidebar-collapsed .staff-sidebar:hover .menu-text,
  body.sidebar-collapsed .app-sidebar:hover .sidebar-label,
  body.sidebar-collapsed .staff-sidebar:hover .sidebar-label{
    opacity:1;
    visibility:visible;
    width:auto;
    max-width:180px;
  }
}

/* ---------- טווח ביניים: לא לתת להידר להישבר ---------- */
@media (max-width:1199.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.4rem;
    padding-inline:.75rem !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:190px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"]{
    flex-basis:220px;
  }
}

/* ---------- מובייל וטאבלט: sidebar כ-overlay, header קומפקטי ---------- */
@media (max-width:991.98px){
  :root{ --opt-shell-topbar-h:58px; }

  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    min-height:var(--opt-shell-topbar-h);
    padding:.45rem .65rem !important;
    flex-wrap:nowrap !important;
  }

  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:145px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    flex:1 1 auto;
    max-width:calc(100vw - 250px) !important;
  }

  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    width:min(86vw, 320px) !important;
    min-width:0 !important;
    max-width:min(86vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%);
    transition:transform .22s ease;
    box-shadow:-18px 0 42px rgba(15,23,42,.22);
  }

  body.sidebar-open .app-sidebar,
  body.sidebar-open .staff-sidebar,
  body.app-sidebar-open .app-sidebar,
  body.staff-sidebar-open .staff-sidebar,
  .sidebar-open .app-sidebar,
  .sidebar-open .staff-sidebar,
  .app-shell.sidebar-open .app-sidebar,
  .staff-shell.sidebar-open .staff-sidebar,
  .app-shell.is-sidebar-open .app-sidebar,
  .staff-shell.is-sidebar-open .staff-sidebar,
  [data-sidebar-state="open"] .app-sidebar,
  [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] .app-sidebar,
  html[dir="ltr"] .staff-sidebar,
  html[dir="ltr"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%);
  }

  html[dir="ltr"] body.sidebar-open .app-sidebar,
  html[dir="ltr"] body.sidebar-open .staff-sidebar,
  html[dir="ltr"] body.app-sidebar-open .app-sidebar,
  html[dir="ltr"] body.staff-sidebar-open .staff-sidebar,
  html[dir="ltr"] .sidebar-open .app-sidebar,
  html[dir="ltr"] .sidebar-open .staff-sidebar,
  html[dir="ltr"] .app-shell.sidebar-open .app-sidebar,
  html[dir="ltr"] .staff-shell.sidebar-open .staff-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .app-sidebar,
  html[dir="ltr"] [data-sidebar-state="open"] .staff-sidebar{
    transform:translateX(0) !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    margin-inline:0 !important;
    padding-inline:.75rem !important;
    width:100% !important;
  }
}

/* ---------- מובייל צר: פחות טקסט בהידר, בלי שבירת שורה ---------- */
@media (max-width:767.98px){
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    gap:.3rem;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    max-width:calc(100vw - 180px) !important;
  }

  .app-header .btn span,
  .staff-header .btn span,
  .app-topbar .btn span,
  .staff-topbar .btn span,
  .app-header .button-label,
  .staff-header .button-label,
  .app-topbar .button-label,
  .staff-topbar .button-label{
    max-width:0;
    opacity:0;
    overflow:hidden;
    display:inline-block;
    white-space:nowrap;
  }

  .app-header .btn,
  .staff-header .btn,
  .app-topbar .btn,
  .staff-topbar .btn{
    min-width:40px;
    min-height:40px;
    padding-inline:.55rem !important;
  }

  .app-header img,
  .staff-header img,
  .app-topbar img,
  .staff-topbar img{
    max-height:36px;
  }
}

@media (max-width:575.98px){
  .app-header .brand,
  .staff-header .brand,
  .app-topbar .brand,
  .staff-topbar .brand,
  .app-header .business-brand,
  .staff-header .business-brand,
  .app-topbar .business-brand,
  .staff-topbar .business-brand,
  .app-header .app-brand,
  .staff-header .staff-brand,
  .app-topbar .app-brand,
  .staff-topbar .staff-brand{
    max-width:112px;
  }

  .app-header .app-search,
  .staff-header .staff-search,
  .app-topbar .app-search,
  .staff-topbar .staff-search,
  .app-header form[role="search"],
  .staff-header form[role="search"],
  .app-topbar form[role="search"],
  .staff-topbar form[role="search"],
  .app-header .search-box,
  .staff-header .search-box,
  .app-topbar .search-box,
  .staff-topbar .search-box{
    display:none !important;
  }

  .app-main,
  .staff-main,
  .app-content,
  .staff-content{
    padding-inline:.55rem !important;
  }
}

/* נגישות: בלי אנימציות למשתמשים שמעדיפים פחות תנועה */
@media (prefers-reduced-motion: reduce){
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    transition:none !important;
  }
}

/* ---------- v78 mobile overlay click-layer fix: backdrop below sidebar, sidebar always clickable ---------- */
@media (max-width:991.98px){
  /* הסיידבר חייב להיות מעל שכבת הרקע/החשכה, אחרת אי אפשר ללחוץ עליו במובייל */
  .app-sidebar,
  .staff-sidebar,
  .optimat-sidebar{
    z-index:1075 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }

  /* שכבת רקע של הסיידבר: מתחת לסיידבר, מעל התוכן */
  .sidebar-backdrop,
  .app-sidebar-backdrop,
  .staff-sidebar-backdrop,
  .optimat-sidebar-backdrop,
  .mobile-sidebar-backdrop,
  .layout-backdrop,
  .app-layout-backdrop,
  .staff-layout-backdrop,
  .offcanvas-backdrop{
    z-index:1060 !important;
  }

  /* אם קיימת שכבת רקע פנימית בתוך ה-shell, שלא תכסה את הסיידבר עצמו */
  .app-shell .sidebar-backdrop,
  .staff-shell .sidebar-backdrop,
  .app-shell .app-sidebar-backdrop,
  .staff-shell .staff-sidebar-backdrop,
  .app-shell .layout-backdrop,
  .staff-shell .layout-backdrop{
    pointer-events:auto !important;
  }

  /* כל מה שבתוך הסיידבר נשאר לחיץ ונגיש */
  .app-sidebar *,
  .staff-sidebar *,
  .optimat-sidebar *{
    pointer-events:auto;
  }

  /* כפתור פתיחה/סגירה והידר מעל התוכן, אך מתחת לסיידבר פתוח */
  .app-header,
  .staff-header,
  .app-topbar,
  .staff-topbar,
  .optimat-app-header,
  .optimat-staff-header{
    z-index:1050 !important;
  }

  /* מונע מצב שבו אלמנט תוכן שקיבל z-index גבוה מכסה את הסיידבר במובייל */
  body.sidebar-open .app-main,
  body.sidebar-open .staff-main,
  body.sidebar-open .app-content,
  body.sidebar-open .staff-content,
  body.app-sidebar-open .app-main,
  body.app-sidebar-open .app-content,
  body.staff-sidebar-open .staff-main,
  body.staff-sidebar-open .staff-content,
  .app-shell.sidebar-open .app-main,
  .app-shell.sidebar-open .app-content,
  .staff-shell.sidebar-open .staff-main,
  .staff-shell.sidebar-open .staff-content,
  .app-shell.is-sidebar-open .app-main,
  .app-shell.is-sidebar-open .app-content,
  .staff-shell.is-sidebar-open .staff-main,
  .staff-shell.is-sidebar-open .staff-content,
  [data-sidebar-state="open"] .app-main,
  [data-sidebar-state="open"] .app-content,
  [data-sidebar-state="open"] .staff-main,
  [data-sidebar-state="open"] .staff-content{
    position:relative;
    z-index:1;
  }

  /* נגישות טאצ׳: פריטי ניווט לא יהיו קטנים מדי במובייל */
  .app-sidebar a,
  .staff-sidebar a,
  .optimat-sidebar a,
  .app-sidebar button,
  .staff-sidebar button,
  .optimat-sidebar button,
  .app-sidebar [role="button"],
  .staff-sidebar [role="button"],
  .optimat-sidebar [role="button"]{
    min-height:42px;
  }

  /* פוקוס ברור במקלדת בלי שינוי עיצוב רגיל */
  .app-sidebar a:focus-visible,
  .staff-sidebar a:focus-visible,
  .optimat-sidebar a:focus-visible,
  .app-sidebar button:focus-visible,
  .staff-sidebar button:focus-visible,
  .optimat-sidebar button:focus-visible{
    outline:2px solid currentColor;
    outline-offset:2px;
  }
}


/* ---------- v79 HARD mobile sidebar backdrop fix ----------
   Problem seen in hamburger mobile mode: a dark backdrop/overlay can sit above
   the sidebar and steal pointer/touch events. This block is intentionally loaded
   LAST and does not change page/content design. */
@media (max-width:991.98px){
  /* Always put the real navigation panel at the absolute top of the mobile stack. */
  body[data-app-area] .app-sidebar,
  body[data-app-area] .staff-sidebar,
  body[data-app-area] .optimat-sidebar,
  .app-shell .app-sidebar,
  .staff-shell .staff-sidebar,
  .app-layout .app-sidebar,
  .staff-layout .staff-sidebar,
  aside.app-sidebar,
  aside.staff-sidebar,
  nav.app-sidebar,
  nav.staff-sidebar{
    position:fixed !important;
    z-index:2147483600 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    isolation:isolate !important;
  }

  /* Everything inside the sidebar must remain clickable/tappable. */
  body[data-app-area] .app-sidebar,
  body[data-app-area] .app-sidebar *,
  body[data-app-area] .staff-sidebar,
  body[data-app-area] .staff-sidebar *,
  body[data-app-area] .optimat-sidebar,
  body[data-app-area] .optimat-sidebar *{
    pointer-events:auto !important;
  }

  /* Real backdrop elements: keep the dark visual layer, but never let it steal clicks.
     We intentionally exclude real Bootstrap modals via body.modal-open below. */
  body:not(.modal-open) .sidebar-backdrop,
  body:not(.modal-open) .app-sidebar-backdrop,
  body:not(.modal-open) .staff-sidebar-backdrop,
  body:not(.modal-open) .optimat-sidebar-backdrop,
  body:not(.modal-open) .mobile-sidebar-backdrop,
  body:not(.modal-open) .layout-backdrop,
  body:not(.modal-open) .app-layout-backdrop,
  body:not(.modal-open) .staff-layout-backdrop,
  body:not(.modal-open) .drawer-backdrop,
  body:not(.modal-open) .menu-backdrop,
  body:not(.modal-open) .nav-backdrop,
  body:not(.modal-open) .sidebar-overlay,
  body:not(.modal-open) .app-sidebar-overlay,
  body:not(.modal-open) .mobile-sidebar-overlay,
  body:not(.modal-open) .layout-overlay,
  body:not(.modal-open) .offcanvas-backdrop:not(.modal-backdrop){
    z-index:2147483000 !important;
    pointer-events:none !important;
  }

  /* Pseudo backdrops are common in custom shells. These are the usual reason
     z-index alone does not solve the issue. */
  body:not(.modal-open) .app-shell::before,
  body:not(.modal-open) .app-shell::after,
  body:not(.modal-open) .staff-shell::before,
  body:not(.modal-open) .staff-shell::after,
  body:not(.modal-open) .app-layout::before,
  body:not(.modal-open) .app-layout::after,
  body:not(.modal-open) .staff-layout::before,
  body:not(.modal-open) .staff-layout::after{
    pointer-events:none !important;
  }

  /* If the shell itself got a high z-index/transform, force the sidebar above it. */
  body:not(.modal-open) .app-shell,
  body:not(.modal-open) .staff-shell,
  body:not(.modal-open) .app-layout,
  body:not(.modal-open) .staff-layout{
    isolation:auto !important;
  }

  /* Hamburger / close buttons should stay tappable as well. */
  .app-sidebar-toggle,
  .staff-sidebar-toggle,
  .sidebar-toggle,
  .hamburger,
  [data-sidebar-toggle],
  [data-bs-toggle="offcanvas"]{
    position:relative;
    z-index:2147483650 !important;
    pointer-events:auto !important;
  }
}


/* ---------- v81: mobile user icon visibility + hamburger ergonomics ---------- */
/* תיקון ממוקד: ב-v79 הוסתרו span-ים בתוך כפתורים במובייל, וזה הסתיר גם את app-user-avatar. */
@media (max-width:767.98px){
  body[data-app-area="app"] .app-topbar .btn .app-user-avatar,
  body[data-app-area="app"] .app-header .btn .app-user-avatar,
  body[data-app-area="app"] .optimat-app-header .btn .app-user-avatar,
  body[data-app-area="app"] .topbar-user-avatar{
    display:inline-flex !important;
    max-width:none !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    color:#fff !important;
    font-size:.88rem !important;
    line-height:1 !important;
  }

  body[data-app-area="app"] .app-topbar .btn.icon-btn,
  body[data-app-area="app"] .app-header .btn.icon-btn{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* במובייל RTL ההמבורגר נשאר קרוב לפתיחת הסיידבר ובצד הנוח להפעלה. */
@media (max-width:991.98px){
  body[data-app-area="app"] .app-topbar [data-bs-target="#appSidebar"],
  body[data-app-area="app"] .app-header [data-bs-target="#appSidebar"]{
    order:-20 !important;
    flex:0 0 auto !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-brand-chip{
    order:-10 !important;
    flex:0 1 auto !important;
  }
}


/* =========================================================
   OPTIMAT v82 - precision responsive breakpoints
   Scope: header + sidebar responsiveness only.
   Goal: no clipped buttons at intermediate widths.
   ========================================================= */

:root{
  --opt-shell-compact-actions-break: 1399.98px;
  --opt-shell-overlay-sidebar-break: 1199.98px;
}

/* Header flex safety: every inner row may shrink instead of cutting buttons */
body[data-app-area="app"] .app-topbar > .container-fluid{
  min-width:0 !important;
  max-width:100% !important;
  gap:.55rem !important;
}

body[data-app-area="app"] .app-topbar > .container-fluid > .d-flex:first-child{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:visible !important;
}

body[data-app-area="app"] .app-topbar > .container-fluid > .d-flex:last-child{
  min-width:0 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
}

body[data-app-area="app"] .topbar-search{
  min-width:0 !important;
  flex:1 1 360px !important;
  width:auto !important;
  max-width:min(520px, 34vw) !important;
}

body[data-app-area="app"] .topbar-brand-chip{
  min-width:0 !important;
  flex:0 1 auto !important;
  max-width:260px !important;
}

body[data-app-area="app"] .topbar-business-chip{
  min-width:0 !important;
  max-width:190px !important;
}

body[data-app-area="app"] .app-topbar .icon-btn,
body[data-app-area="app"] .app-topbar .topbar-quick-btn{
  flex:0 0 auto !important;
}

/* Large laptop / devtools width:
   move quick actions into the user menu before the header starts clipping */
@media (max-width:1399.98px){
  body[data-app-area="app"] .topbar-business-chip{
    display:none !important;
  }

  body[data-app-area="app"] .app-topbar .topbar-quick-btn,
  body[data-app-area="app"] .app-topbar .topbar-action-form,
  body[data-app-area="app"] .app-topbar .topbar-clock-chip{
    display:none !important;
  }

  body[data-app-area="app"] .topbar-compact-actions{
    display:block !important;
  }

  body[data-app-area="app"] .topbar-search{
    max-width:min(420px, 38vw) !important;
    flex-basis:280px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:220px !important;
  }
}

/* Mid screens:
   use icon-only identity + keep search flexible */
@media (max-width:1299.98px){
  body[data-app-area="app"] .topbar-search{
    max-width:min(360px, 34vw) !important;
    flex-basis:220px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:150px !important;
    padding-inline:.65rem !important;
  }

  body[data-app-area="app"] .topbar-brand-chip .topbar-brand-text{
    max-width:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    display:inline-block !important;
    white-space:nowrap !important;
  }
}

/* Tablet / narrow laptop:
   switch sidebar to mobile-like overlay earlier, so content/header do not fight for width */
@media (max-width:1199.98px){
  body[data-app-area="app"] .app-sidebar,
  body[data-app-area="app"] .staff-sidebar,
  body[data-app-area="app"] .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    width:min(86vw, 320px) !important;
    min-width:0 !important;
    max-width:min(86vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%) !important;
    transition:transform .22s ease !important;
    box-shadow:-18px 0 42px rgba(15,23,42,.22) !important;
    z-index:1075 !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
  }

  html[dir="ltr"] body[data-app-area="app"] .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .staff-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%) !important;
    box-shadow:18px 0 42px rgba(15,23,42,.22) !important;
  }

  body[data-app-area="app"].sidebar-open .app-sidebar,
  body[data-app-area="app"].app-sidebar-open .app-sidebar,
  body[data-app-area="app"] .app-shell.sidebar-open .app-sidebar,
  body[data-app-area="app"] .app-shell.is-sidebar-open .app-sidebar,
  body[data-app-area="app"] .app-sidebar.show,
  body[data-app-area="app"] .offcanvas.show.app-sidebar,
  body[data-app-area="app"] [data-sidebar-state="open"] .app-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] body[data-app-area="app"].sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"].app-sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.is-sidebar-open .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar.show,
  html[dir="ltr"] body[data-app-area="app"] .offcanvas.show.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] [data-sidebar-state="open"] .app-sidebar{
    transform:translateX(0) !important;
  }

  body[data-app-area="app"] .app-main,
  body[data-app-area="app"] .app-content{
    margin-inline:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  body[data-app-area="app"] #sidebarToggleDesktop,
  body[data-app-area="app"] .app-sidebar-toggle,
  body[data-app-area="app"] .sidebar-toggle-desktop{
    display:none !important;
  }

  body[data-app-area="app"] .app-topbar .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"],
  body[data-app-area="app"] .app-header .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"]{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    order:-30 !important;
  }

  body[data-app-area="app"] .app-topbar .dropdown-menu{
    max-height:calc(100dvh - 82px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }

  .sidebar-backdrop,
  .app-sidebar-backdrop,
  .staff-sidebar-backdrop,
  .optimat-sidebar-backdrop,
  .mobile-sidebar-backdrop,
  .layout-backdrop,
  .app-layout-backdrop,
  .staff-layout-backdrop,
  .offcanvas-backdrop{
    z-index:1060 !important;
  }
}

/* Narrow tablet: preserve the most important controls only */
@media (max-width:1099.98px){
  body[data-app-area="app"] .topbar-search{
    max-width:min(300px, 32vw) !important;
    flex-basis:180px !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    padding-inline:.65rem !important;
  }
}

/* Phone landscape / small tablets */
@media (max-width:899.98px){
  body[data-app-area="app"] .topbar-search{
    max-width:min(240px, 30vw) !important;
    flex-basis:150px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:116px !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    gap:.35rem !important;
  }
}

/* Small phone:
   keep header icon-only and avoid any clipped labels */
@media (max-width:575.98px){
  body[data-app-area="app"] .topbar-search{
    display:none !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    max-width:82px !important;
    min-width:0 !important;
    padding-inline:.45rem !important;
  }

  body[data-app-area="app"] .topbar-brand-chip img{
    max-width:62px !important;
    max-height:32px !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    padding-inline:.5rem !important;
    gap:.28rem !important;
  }

  body[data-app-area="app"] .app-topbar .dropdown-menu{
    max-width:calc(100vw - 18px) !important;
    min-width:min(300px, calc(100vw - 18px)) !important;
  }
}

/* Extra narrow: still no horizontal clipping */
@media (max-width:420px){
  body[data-app-area="app"] .topbar-brand-chip{
    max-width:70px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip img{
    max-width:54px !important;
  }

  body[data-app-area="app"] .app-topbar .icon-btn,
  body[data-app-area="app"] .app-header .icon-btn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }

  body[data-app-area="app"] .app-topbar .btn .app-user-avatar{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
  }
}


/* =========================================================
   OPTIMAT v83 - exact intermediate-size shell behavior
   Scope: responsive header/sidebar only.
   ========================================================= */

/* User requested: this backdrop must never sit above the app/sidebar. */
body:not(.modal-open) .offcanvas-backdrop:not(.modal-backdrop){
  z-index:0 !important;
  pointer-events:none !important;
}

/* Switch to mobile-like/offcanvas sidebar earlier.
   1200 was still too late for the widths shown in the videos. */
@media (max-width:1279.98px){
  body[data-app-area="app"]{
    overflow-x:hidden !important;
  }

  body[data-app-area="app"] .app-shell{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  body[data-app-area="app"] .app-main,
  body[data-app-area="app"] .app-content{
    margin-inline:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body[data-app-area="app"] #appSidebar.app-sidebar,
  body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  body[data-app-area="app"] .app-sidebar,
  body[data-app-area="app"] .optimat-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-end:0 !important;
    inset-inline-start:auto !important;
    width:min(84vw, 320px) !important;
    min-width:0 !important;
    max-width:min(84vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%) !important;
    transition:transform .22s ease !important;
    box-shadow:-18px 0 42px rgba(15,23,42,.22) !important;
    z-index:1075 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    overscroll-behavior:contain !important;
  }

  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .optimat-sidebar{
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    transform:translateX(-105%) !important;
    box-shadow:18px 0 42px rgba(15,23,42,.22) !important;
  }

  body[data-app-area="app"] #appSidebar.app-sidebar.show,
  body[data-app-area="app"] #appSidebar.app-sidebar.showing,
  body[data-app-area="app"].sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"].app-sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"] .app-shell.sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"] .app-shell.is-sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"] [data-sidebar-state="open"] #appSidebar.app-sidebar{
    transform:translateX(0) !important;
  }

  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar.show,
  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar.showing,
  html[dir="ltr"] body[data-app-area="app"].sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"].app-sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.is-sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] [data-sidebar-state="open"] #appSidebar.app-sidebar{
    transform:translateX(0) !important;
  }

  /* The desktop edge toggle is wrong in this range; only the hamburger should control the sidebar. */
  body[data-app-area="app"] #sidebarToggleDesktop,
  body[data-app-area="app"] .app-sidebar-toggle,
  body[data-app-area="app"] .sidebar-toggle-desktop{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Force hamburger visible earlier than Bootstrap's d-lg-none breakpoint. */
  body[data-app-area="app"] .app-topbar .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"],
  body[data-app-area="app"] .app-header .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"],
  body[data-app-area="app"] .optimat-app-header .btn.icon-btn.d-lg-none[data-bs-target="#appSidebar"]{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    order:-40 !important;
    position:relative !important;
    z-index:5 !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:.45rem !important;
    min-width:0 !important;
    max-width:100% !important;
    padding-inline:.75rem !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid > .d-flex:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid > .d-flex:last-child{
    flex:0 0 auto !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  body[data-app-area="app"] .topbar-business-chip,
  body[data-app-area="app"] .topbar-quick-btn,
  body[data-app-area="app"] .topbar-action-form,
  body[data-app-area="app"] .topbar-clock-chip{
    display:none !important;
  }

  body[data-app-area="app"] .topbar-compact-actions{
    display:block !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    flex:0 1 150px !important;
    max-width:150px !important;
    min-width:0 !important;
    padding-inline:.65rem !important;
  }

  body[data-app-area="app"] .topbar-brand-chip .topbar-brand-text{
    max-width:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    display:inline-block !important;
    white-space:nowrap !important;
  }

  body[data-app-area="app"] .topbar-search{
    min-width:0 !important;
    width:auto !important;
    flex:1 1 220px !important;
    max-width:min(380px, 34vw) !important;
  }

  /* Backdrop/overlay is no longer the click layer; JS closes by clicking the exposed page area. */
  body[data-app-area="app"] .offcanvas-backdrop,
  body[data-app-area="app"] .sidebar-backdrop,
  body[data-app-area="app"] .app-sidebar-backdrop,
  body[data-app-area="app"] .mobile-sidebar-backdrop,
  body[data-app-area="app"] .layout-backdrop,
  body[data-app-area="app"] .app-layout-backdrop{
    z-index:0 !important;
    pointer-events:none !important;
  }
}

/* The exact width shown in the screenshot: keep sidebar compact and leave a usable background click area. */
@media (max-width:575.98px){
  body[data-app-area="app"] #appSidebar.app-sidebar,
  body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  body[data-app-area="app"] .app-sidebar,
  body[data-app-area="app"] .optimat-sidebar{
    width:min(82vw, 300px) !important;
    max-width:min(82vw, 300px) !important;
  }

  body[data-app-area="app"] .app-topbar > .container-fluid{
    padding-inline:.45rem !important;
    gap:.25rem !important;
  }

  body[data-app-area="app"] .topbar-brand-chip{
    flex-basis:70px !important;
    max-width:70px !important;
  }

  body[data-app-area="app"] .topbar-brand-chip img{
    max-width:56px !important;
    max-height:31px !important;
  }

  body[data-app-area="app"] .app-topbar .icon-btn,
  body[data-app-area="app"] .app-header .icon-btn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
}

@media (max-width:420px){
  body[data-app-area="app"] #appSidebar.app-sidebar,
  body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  body[data-app-area="app"] .app-sidebar,
  body[data-app-area="app"] .optimat-sidebar{
    width:min(84vw, 292px) !important;
    max-width:min(84vw, 292px) !important;
  }
}

/* =========================================================
   OPTIMAT v84 - RTL physical-side + transparent clickable backdrop fix
   Scope: app mobile / intermediate offcanvas sidebar only.

   Why:
   - In RTL, inset-inline-end:0 means LEFT, not RIGHT.
     The sidebar therefore opened on the wrong side in Hebrew.
   - A backdrop with pointer-events:none cannot close the sidebar on outside click.
     We keep it transparent and below the sidebar, but clickable.
   ========================================================= */

@media (max-width:1279.98px){
  /* Hebrew / RTL: the app sidebar must be physically on the RIGHT side. */
  html:not([dir="ltr"]) body[data-app-area="app"] #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .optimat-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .app-sidebar.offcanvas-lg,
  body[data-app-area="app"]:not([dir="ltr"]) .app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .optimat-sidebar{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    right:0 !important;
    left:auto !important;
    inset-inline-start:auto !important;
    inset-inline-end:auto !important;
    width:min(84vw, 320px) !important;
    min-width:0 !important;
    max-width:min(84vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(105%) !important;
    transition:transform .22s ease !important;
    box-shadow:-18px 0 42px rgba(15,23,42,.22) !important;
    z-index:1075 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    overscroll-behavior:contain !important;
  }

  html:not([dir="ltr"]) body[data-app-area="app"] #appSidebar.app-sidebar.show,
  html:not([dir="ltr"]) body[data-app-area="app"] #appSidebar.app-sidebar.showing,
  html:not([dir="ltr"]) body[data-app-area="app"].sidebar-open #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"].app-sidebar-open #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-shell.sidebar-open #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-shell.is-sidebar-open #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] [data-sidebar-state="open"] #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) #appSidebar.app-sidebar.show,
  body[data-app-area="app"]:not([dir="ltr"]) #appSidebar.app-sidebar.showing,
  body[data-app-area="app"]:not([dir="ltr"]).sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]).app-sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .app-shell.sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .app-shell.is-sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) [data-sidebar-state="open"] #appSidebar.app-sidebar{
    transform:translateX(0) !important;
  }

  /* English / LTR: keep the mirrored behavior on the LEFT side. */
  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .optimat-sidebar,
  body[data-app-area="app"][dir="ltr"] #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] .app-sidebar.offcanvas-lg,
  body[data-app-area="app"][dir="ltr"] .app-sidebar,
  body[data-app-area="app"][dir="ltr"] .optimat-sidebar{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:auto !important;
    inset-inline-start:auto !important;
    inset-inline-end:auto !important;
    width:min(84vw, 320px) !important;
    min-width:0 !important;
    max-width:min(84vw, 320px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    box-shadow:18px 0 42px rgba(15,23,42,.22) !important;
    z-index:1075 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    touch-action:pan-y !important;
    overscroll-behavior:contain !important;
  }

  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar.show,
  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar.showing,
  html[dir="ltr"] body[data-app-area="app"].sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"].app-sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-shell.is-sidebar-open #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] [data-sidebar-state="open"] #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] #appSidebar.app-sidebar.show,
  body[data-app-area="app"][dir="ltr"] #appSidebar.app-sidebar.showing,
  body[data-app-area="app"][dir="ltr"].sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"].app-sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] .app-shell.sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] .app-shell.is-sidebar-open #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] [data-sidebar-state="open"] #appSidebar.app-sidebar{
    transform:translateX(0) !important;
  }

  /* The backdrop is now an invisible click layer:
     below sidebar, above page, so outside-click closes without visually ruining the UI. */
  body[data-app-area="app"]:not(.modal-open) .offcanvas-backdrop:not(.modal-backdrop),
  body[data-app-area="app"]:not(.modal-open) .sidebar-backdrop,
  body[data-app-area="app"]:not(.modal-open) .app-sidebar-backdrop,
  body[data-app-area="app"]:not(.modal-open) .mobile-sidebar-backdrop,
  body[data-app-area="app"]:not(.modal-open) .layout-backdrop,
  body[data-app-area="app"]:not(.modal-open) .app-layout-backdrop{
    z-index:1060 !important;
    pointer-events:auto !important;
    opacity:0 !important;
    background:transparent !important;
  }

  body[data-app-area="app"] #appSidebar.app-sidebar *,
  body[data-app-area="app"] .app-sidebar *,
  body[data-app-area="app"] .optimat-sidebar *{
    pointer-events:auto !important;
  }
}

@media (max-width:575.98px){
  html:not([dir="ltr"]) body[data-app-area="app"] #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .optimat-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .app-sidebar.offcanvas-lg,
  body[data-app-area="app"]:not([dir="ltr"]) .app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .optimat-sidebar,
  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .optimat-sidebar,
  body[data-app-area="app"][dir="ltr"] #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] .app-sidebar.offcanvas-lg,
  body[data-app-area="app"][dir="ltr"] .app-sidebar,
  body[data-app-area="app"][dir="ltr"] .optimat-sidebar{
    width:min(82vw, 300px) !important;
    max-width:min(82vw, 300px) !important;
  }
}

@media (max-width:420px){
  html:not([dir="ltr"]) body[data-app-area="app"] #appSidebar.app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html:not([dir="ltr"]) body[data-app-area="app"] .app-sidebar,
  html:not([dir="ltr"]) body[data-app-area="app"] .optimat-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) #appSidebar.app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .app-sidebar.offcanvas-lg,
  body[data-app-area="app"]:not([dir="ltr"]) .app-sidebar,
  body[data-app-area="app"]:not([dir="ltr"]) .optimat-sidebar,
  html[dir="ltr"] body[data-app-area="app"] #appSidebar.app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar.offcanvas-lg,
  html[dir="ltr"] body[data-app-area="app"] .app-sidebar,
  html[dir="ltr"] body[data-app-area="app"] .optimat-sidebar,
  body[data-app-area="app"][dir="ltr"] #appSidebar.app-sidebar,
  body[data-app-area="app"][dir="ltr"] .app-sidebar.offcanvas-lg,
  body[data-app-area="app"][dir="ltr"] .app-sidebar,
  body[data-app-area="app"][dir="ltr"] .optimat-sidebar{
    width:min(84vw, 292px) !important;
    max-width:min(84vw, 292px) !important;
  }
}
@media (max-width: 1280px){
  body[data-app-area="app"].optimat-sidebar-overlay-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.32);
    z-index:1045;
    pointer-events:none;
    opacity:1;
  }

  body[data-app-area="app"].optimat-sidebar-overlay-open .app-sidebar{
    z-index:1055 !important;
  }

  body[data-app-area="app"].optimat-sidebar-overlay-open .app-topbar{
    z-index:1035 !important;
  }
}
/* =========================================================
   OPTIMAT v11.5 - Bootstrap/System Theme Neutralizer
   Scope: colors only. Does not change layout, spacing, sidebar,
   responsiveness, sizes, or business logic.

   Purpose:
   Older app-ui.css sections contain hardcoded dark colors with
   !important. This final layer normalizes the visible UI back to
   Bootstrap/system variables so Design System values from layout.php
   become the single source of truth.
   ========================================================= */

html[data-bs-theme="light"],
html[data-bs-theme="dark"]{
  --app-bg: var(--bs-body-bg, var(--staff-bg, #f6f8fc));
  --app-text: var(--bs-body-color, var(--staff-text, #0f172a));
  --app-heading: var(--bs-heading-color, var(--staff-heading, var(--app-text)));
  --app-muted: var(--bs-secondary-color, var(--staff-muted, #64748b));
  --app-border: var(--bs-border-color, var(--staff-border, #dbe4f0));
  --app-border-strong: var(--bs-border-color, var(--staff-border, #cbd5e1));
  --app-surface: var(--bs-card-bg, var(--staff-surface, var(--bs-body-bg)));
  --app-surface-soft: var(--bs-tertiary-bg, var(--staff-surface-soft, var(--bs-secondary-bg)));
  --app-surface-hover: var(--bs-secondary-bg, var(--staff-surface-hover, var(--bs-tertiary-bg)));

  --opt-bg: var(--app-bg);
  --opt-text: var(--app-text);
  --opt-heading: var(--app-heading);
  --opt-muted: var(--app-muted);
  --opt-border: var(--app-border);
  --opt-border-strong: var(--app-border-strong);
  --opt-surface: var(--app-surface);
  --opt-surface-2: var(--app-surface-soft);
  --opt-surface-3: var(--app-surface-hover);

  --optimat-surface: var(--app-surface);
  --optimat-surface-2: var(--app-surface-soft);
  --optimat-border: var(--app-border);
  --optimat-text: var(--app-text);
}

html[data-bs-theme="dark"]{
  color-scheme: dark;

  --bs-heading-color: var(--staff-heading-dark, var(--staff-text-dark, var(--bs-body-color)));
  --bs-link-color: var(--staff-primary, var(--bs-primary));
  --bs-link-hover-color: var(--staff-secondary, var(--bs-info));

  --bs-card-bg: var(--staff-surface-dark, var(--bs-tertiary-bg));
  --bs-card-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-card-border-color: var(--staff-border-dark, var(--bs-border-color));

  --bs-dropdown-bg: var(--staff-surface-dark, var(--bs-tertiary-bg));
  --bs-dropdown-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-dropdown-link-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-dropdown-link-hover-color: var(--staff-heading-dark, var(--bs-heading-color));
  --bs-dropdown-link-hover-bg: var(--staff-surface-soft-dark, var(--bs-secondary-bg));
  --bs-dropdown-border-color: var(--staff-border-dark, var(--bs-border-color));

  --bs-modal-bg: var(--staff-surface-dark, var(--bs-tertiary-bg));
  --bs-modal-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-modal-border-color: var(--staff-border-dark, var(--bs-border-color));

  --bs-table-bg: var(--staff-surface-dark, var(--bs-card-bg));
  --bs-table-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-table-border-color: var(--staff-border-dark, var(--bs-border-color));
  --bs-table-striped-bg: var(--staff-surface-soft-dark, var(--bs-tertiary-bg));
  --bs-table-striped-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-table-hover-bg: var(--staff-surface-soft-dark, var(--bs-secondary-bg));
  --bs-table-hover-color: var(--staff-heading-dark, var(--bs-heading-color));

  --bs-form-control-bg: var(--staff-input-bg-dark, var(--staff-surface-dark, var(--bs-body-bg)));
  --bs-form-control-color: var(--staff-text-dark, var(--bs-body-color));
  --bs-form-control-border-color: var(--staff-border-dark, var(--bs-border-color));
}

/* Page background: use Bootstrap variables, not hardcoded dark colors. */
html[data-bs-theme="light"] body,
html[data-bs-theme="dark"] body,
html[data-bs-theme="light"] body[data-app-area="app"],
html[data-bs-theme="dark"] body[data-app-area="app"],
html[data-bs-theme="light"] body[data-app-area="staff"],
html[data-bs-theme="dark"] body[data-app-area="staff"],
html[data-bs-theme="light"] body.staff-ui,
html[data-bs-theme="dark"] body.staff-ui{
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Bootstrap/system surfaces. */
html[data-bs-theme="light"] .card,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="light"] .app-card,
html[data-bs-theme="dark"] .app-card,
html[data-bs-theme="light"] .stat-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="light"] .metric-card,
html[data-bs-theme="dark"] .metric-card,
html[data-bs-theme="light"] .panel,
html[data-bs-theme="dark"] .panel,
html[data-bs-theme="light"] .box,
html[data-bs-theme="dark"] .box,
html[data-bs-theme="light"] .customer-card,
html[data-bs-theme="dark"] .customer-card,
html[data-bs-theme="light"] .customer-profile-card,
html[data-bs-theme="dark"] .customer-profile-card,
html[data-bs-theme="light"] .customers-panel,
html[data-bs-theme="dark"] .customers-panel,
html[data-bs-theme="light"] .supplier-card,
html[data-bs-theme="dark"] .supplier-card,
html[data-bs-theme="light"] .opt-card,
html[data-bs-theme="dark"] .opt-card,
html[data-bs-theme="light"] .page-card,
html[data-bs-theme="dark"] .page-card,
html[data-bs-theme="light"] .content-card,
html[data-bs-theme="dark"] .content-card,
html[data-bs-theme="light"] .section-card,
html[data-bs-theme="dark"] .section-card,
html[data-bs-theme="light"] .summary-card,
html[data-bs-theme="dark"] .summary-card,
html[data-bs-theme="light"] .filter-card,
html[data-bs-theme="dark"] .filter-card,
html[data-bs-theme="light"] .design-card,
html[data-bs-theme="dark"] .design-card,
html[data-bs-theme="light"] .design-hero,
html[data-bs-theme="dark"] .design-hero,
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="light"] .dropdown-menu,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="light"] .offcanvas,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="light"] .list-group-item,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="light"] .accordion-item,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="light"] .app-page-header,
html[data-bs-theme="dark"] .app-page-header,
html[data-bs-theme="light"] .readonly-box,
html[data-bs-theme="dark"] .readonly-box,
html[data-bs-theme="light"] .info-box,
html[data-bs-theme="dark"] .info-box{
  background: var(--bs-card-bg, var(--app-surface)) !important;
  color: var(--bs-card-color, var(--bs-body-color)) !important;
  border-color: var(--bs-card-border-color, var(--bs-border-color)) !important;
}

/* Header/sidebar surfaces should also be system driven. */
html[data-bs-theme="light"] .app-topbar,
html[data-bs-theme="dark"] .app-topbar,
html[data-bs-theme="light"] .staff-topbar,
html[data-bs-theme="dark"] .staff-topbar,
html[data-bs-theme="light"] .app-sidebar,
html[data-bs-theme="dark"] .app-sidebar,
html[data-bs-theme="light"] .staff-sidebar,
html[data-bs-theme="dark"] .staff-sidebar,
html[data-bs-theme="light"] .navbar,
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="light"] .topbar-brand-chip,
html[data-bs-theme="dark"] .topbar-brand-chip,
html[data-bs-theme="light"] .topbar-business-chip,
html[data-bs-theme="dark"] .topbar-business-chip,
html[data-bs-theme="light"] .topbar-clock-chip,
html[data-bs-theme="dark"] .topbar-clock-chip,
html[data-bs-theme="light"] .topbar-quick-btn,
html[data-bs-theme="dark"] .topbar-quick-btn,
html[data-bs-theme="light"] .sidebar-profile-card,
html[data-bs-theme="dark"] .sidebar-profile-card,
html[data-bs-theme="light"] .sidebar-app-footer,
html[data-bs-theme="dark"] .sidebar-app-footer,
html[data-bs-theme="light"] .staff-app-link,
html[data-bs-theme="dark"] .staff-app-link{
  background: var(--bs-card-bg, var(--app-surface)) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="light"] .bg-light,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="light"] .bg-light-subtle,
html[data-bs-theme="dark"] .bg-light-subtle,
html[data-bs-theme="light"] .card-header,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="light"] .card-footer,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="light"] .table thead th,
html[data-bs-theme="dark"] .table thead th{
  background: var(--bs-tertiary-bg, var(--app-surface-soft)) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Forms. */
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="light"] .input-group-text,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="light"] textarea,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-bs-theme="light"] select,
html[data-bs-theme="dark"] select{
  background-color: var(--bs-form-control-bg, var(--bs-body-bg)) !important;
  color: var(--bs-form-control-color, var(--bs-body-color)) !important;
  border-color: var(--bs-form-control-border-color, var(--bs-border-color)) !important;
}

html[data-bs-theme="light"] .form-control::placeholder,
html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="light"] textarea::placeholder,
html[data-bs-theme="dark"] textarea::placeholder,
html[data-bs-theme="light"] input::placeholder,
html[data-bs-theme="dark"] input::placeholder{
  color: var(--bs-secondary-color, var(--app-muted)) !important;
  opacity: .86 !important;
}

html[data-bs-theme="light"] .form-check-input,
html[data-bs-theme="dark"] .form-check-input{
  background-color: var(--bs-form-control-bg, var(--bs-body-bg)) !important;
  border-color: var(--bs-form-control-border-color, var(--bs-border-color)) !important;
}

html[data-bs-theme="light"] .form-check-input:checked,
html[data-bs-theme="dark"] .form-check-input:checked{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Tables. */
html[data-bs-theme="light"] .table,
html[data-bs-theme="dark"] .table{
  --bs-table-bg: var(--bs-table-bg, var(--bs-card-bg));
  --bs-table-color: var(--bs-table-color, var(--bs-body-color));
  --bs-table-border-color: var(--bs-table-border-color, var(--bs-border-color));
  --bs-table-striped-bg: var(--bs-table-striped-bg, var(--bs-tertiary-bg));
  --bs-table-striped-color: var(--bs-table-striped-color, var(--bs-body-color));
  --bs-table-hover-bg: var(--bs-table-hover-bg, var(--bs-secondary-bg));
  --bs-table-hover-color: var(--bs-table-hover-color, var(--bs-heading-color));
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

html[data-bs-theme="light"] .table td,
html[data-bs-theme="dark"] .table td,
html[data-bs-theme="light"] .table th,
html[data-bs-theme="dark"] .table th{
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

/* Text helpers. */
html[data-bs-theme="light"] .text-muted,
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="light"] .small.text-muted,
html[data-bs-theme="dark"] .small.text-muted,
html[data-bs-theme="light"] .form-text,
html[data-bs-theme="dark"] .form-text,
html[data-bs-theme="light"] .app-page-subtitle,
html[data-bs-theme="dark"] .app-page-subtitle,
html[data-bs-theme="light"] .business-subtitle,
html[data-bs-theme="dark"] .business-subtitle{
  color: var(--bs-secondary-color, var(--app-muted)) !important;
}

html[data-bs-theme="light"] h1,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="light"] h2,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="light"] h3,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="light"] h4,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="light"] h5,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="light"] h6,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="light"] .text-dark,
html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="light"] .fw-bold.text-dark,
html[data-bs-theme="dark"] .fw-bold.text-dark,
html[data-bs-theme="light"] .business-title,
html[data-bs-theme="dark"] .business-title{
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

html[data-bs-theme="light"] .border,
html[data-bs-theme="dark"] .border,
html[data-bs-theme="light"] .border-top,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="light"] .border-bottom,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="light"] .border-start,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="light"] .border-end,
html[data-bs-theme="dark"] .border-end,
html[data-bs-theme="light"] hr,
html[data-bs-theme="dark"] hr{
  border-color: var(--bs-border-color) !important;
  opacity: 1 !important;
}

/* Dropdowns. */
html[data-bs-theme="light"] .dropdown-menu,
html[data-bs-theme="dark"] .dropdown-menu{
  --bs-dropdown-bg: var(--bs-dropdown-bg, var(--bs-card-bg));
  --bs-dropdown-color: var(--bs-dropdown-color, var(--bs-body-color));
  --bs-dropdown-link-color: var(--bs-dropdown-link-color, var(--bs-body-color));
  --bs-dropdown-link-hover-bg: var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg));
  --bs-dropdown-link-hover-color: var(--bs-dropdown-link-hover-color, var(--bs-heading-color));
  --bs-dropdown-border-color: var(--bs-dropdown-border-color, var(--bs-border-color));
}

html[data-bs-theme="light"] .dropdown-item,
html[data-bs-theme="dark"] .dropdown-item{
  color: var(--bs-dropdown-link-color) !important;
}

html[data-bs-theme="light"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:focus,
html[data-bs-theme="dark"] .dropdown-item:focus,
html[data-bs-theme="light"] .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-item.active{
  background: var(--bs-dropdown-link-hover-bg) !important;
  color: var(--bs-dropdown-link-hover-color) !important;
}

/* Buttons that older CSS forced to dark hardcoded colors. */
html[data-bs-theme="light"] .btn-light,
html[data-bs-theme="dark"] .btn-light,
html[data-bs-theme="light"] .btn-outline-light,
html[data-bs-theme="dark"] .btn-outline-light{
  background: var(--bs-tertiary-bg, var(--app-surface-soft)) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="light"] .btn-outline-dark,
html[data-bs-theme="dark"] .btn-outline-dark{
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="light"] .btn-outline-dark:hover,
html[data-bs-theme="dark"] .btn-outline-dark:hover,
html[data-bs-theme="light"] .btn-light:hover,
html[data-bs-theme="dark"] .btn-light:hover{
  background: var(--bs-secondary-bg, var(--app-surface-hover)) !important;
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
}

/* Nav/sidebar active states use system primary instead of fixed blues. */
html[data-bs-theme="light"] .nav-link,
html[data-bs-theme="dark"] .nav-link,
html[data-bs-theme="light"] .sidebar-nav-link,
html[data-bs-theme="dark"] .sidebar-nav-link,
html[data-bs-theme="light"] .sidebar-group-toggle,
html[data-bs-theme="dark"] .sidebar-group-toggle,
html[data-bs-theme="light"] .staff-nav .nav-link,
html[data-bs-theme="dark"] .staff-nav .nav-link{
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="light"] .nav-link.active,
html[data-bs-theme="dark"] .nav-link.active,
html[data-bs-theme="light"] .nav-link:hover,
html[data-bs-theme="dark"] .nav-link:hover,
html[data-bs-theme="light"] .sidebar-nav-link.active,
html[data-bs-theme="dark"] .sidebar-nav-link.active,
html[data-bs-theme="light"] .sidebar-nav-link:hover,
html[data-bs-theme="dark"] .sidebar-nav-link:hover,
html[data-bs-theme="light"] .sidebar-group-toggle.active-group,
html[data-bs-theme="dark"] .sidebar-group-toggle.active-group,
html[data-bs-theme="light"] .sidebar-group-toggle:hover,
html[data-bs-theme="dark"] .sidebar-group-toggle:hover,
html[data-bs-theme="light"] .staff-nav .nav-link.active,
html[data-bs-theme="dark"] .staff-nav .nav-link.active,
html[data-bs-theme="light"] .staff-nav .nav-link:hover,
html[data-bs-theme="dark"] .staff-nav .nav-link:hover{
  background: color-mix(in srgb, var(--bs-primary) 13%, transparent) !important;
  color: var(--bs-primary) !important;
}

/* Alerts/code use Bootstrap/system variables instead of fixed dark palette. */
html[data-bs-theme="light"] .alert,
html[data-bs-theme="dark"] .alert{
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="light"] code,
html[data-bs-theme="dark"] code,
html[data-bs-theme="light"] pre,
html[data-bs-theme="dark"] pre{
  background: var(--bs-tertiary-bg, var(--app-surface-soft)) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* OPTIMAT v11.6 note: theme variables are now initialized before CSS in layout_FROM_36_NO_FLICKER_THEME_ENGINE_v116.php, preventing first-paint color jumps. */


/* =========================================================
   OPTIMAT v12.1 - System Border Normalizer
   Scope: STAFF first. Uses theme variables from layout/app_settings.
   Does not change spacing, responsive behavior, or sidebar layout.
   ========================================================= */
:root{
  --theme-border-default: var(--staff-border, var(--app-border, var(--bs-border-color, #dbe4f0)));
  --theme-border-soft: var(--staff-border-soft, var(--theme-border-default));
  --theme-border-strong: var(--staff-border-strong, var(--theme-border-default));
  --theme-card-border: var(--staff-card-border, var(--theme-border-default));
  --theme-section-border: var(--staff-section-border, var(--theme-border-default));
  --theme-input-border: var(--staff-input-border, var(--theme-border-strong));
  --theme-table-border: var(--staff-table-border, var(--theme-border-default));
}
html[data-bs-theme="dark"]{
  --theme-border-default: var(--staff-border, var(--app-border, var(--bs-border-color, #334155)));
  --theme-border-soft: var(--staff-border-soft, var(--theme-border-default));
  --theme-border-strong: var(--staff-border-strong, var(--theme-border-default));
  --theme-card-border: var(--staff-card-border, var(--theme-border-default));
  --theme-section-border: var(--staff-section-border, var(--theme-border-default));
  --theme-input-border: var(--staff-input-border, var(--theme-border-strong));
  --theme-table-border: var(--staff-table-border, var(--theme-border-default));
}
body.staff-ui[data-app-area="staff"] :where(.border){border-color:var(--theme-border-default)!important;}
body.staff-ui[data-app-area="staff"] :where(hr,.dropdown-divider,.vr){border-color:var(--theme-border-soft)!important;opacity:1!important;}
body.staff-ui[data-app-area="staff"] :where(.form-control,.form-select,.input-group-text,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select){border-color:var(--theme-input-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.form-control:focus,.form-select:focus,textarea:focus,input:focus,select:focus){border-color:var(--app-primary,var(--bs-primary,#2563eb))!important;box-shadow:0 0 0 .22rem color-mix(in srgb,var(--app-primary,var(--bs-primary,#2563eb)) 18%,transparent)!important;}
body.staff-ui[data-app-area="staff"] :where(.table,.table-responsive){border-color:var(--theme-table-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.table th,.table td,.table thead th,.table tbody td){border-color:var(--theme-table-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.card,.app-card,.stat-card,.metric-card,.summary-card,.customer-card,.supplier-card,.ticket-card,.thread-card,.message-card,.design-card,.ods-field,.ods-preview-card):not(.border-0):not(.no-theme-border){border:1px solid var(--theme-card-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.page-card,.section-card,.content-card,.filter-card,.panel,.widget,.settings-panel,.customers-panel,.messages-panel,.message-list,.message-detail,.conversation-panel,.support-panel,.app-page-header,.ods-panel,.ods-hero,.ods-toolbar,.ods-preview):not(.border-0):not(.no-theme-border){border:1px solid var(--theme-section-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.modal-content,.dropdown-menu,.offcanvas,.list-group-item,.accordion-item,.tab-pane-card):not(.border-0):not(.no-theme-border){border-color:var(--theme-card-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.staff-topbar,.staff-sidebar,.staff-brand,.staff-bottom,.staff-app-link,.topbar-brand-chip,.topbar-business-chip):not(.border-0):not(.no-theme-border){border-color:var(--theme-section-border)!important;}
body.staff-ui[data-app-area="staff"] :where(.nav-tabs,.nav-tabs .nav-link,.nav-pills .nav-link){border-color:var(--theme-border-soft)!important;}
body.staff-ui[data-app-area="staff"] :where(.badge.text-bg-light,.btn-light,.bg-light,.bg-light-subtle,.readonly-box):not(.border-0):not(.no-theme-border){border-color:var(--theme-border-soft)!important;}
body.staff-ui[data-app-area="staff"] :where(.no-theme-border,.border-0){border:0!important;}


/* =========================================================
   OPTIMAT v13.0 - STRICT Bootstrap dark-mode paint normalizer
   Purpose: no light islands in dark mode. Bootstrap variables are
   the paint source; brand/active UI can still use --bs-primary.
   ========================================================= */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"]{
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .staff-shell,
  .staff-main,
  .staff-main > main,
  main,
  .app-content,
  .page-content,
  .content-wrapper
){
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .staff-topbar,
  .app-topbar,
  .navbar,
  .topbar-brand-chip,
  .topbar-business-chip,
  .topbar-clock-chip,
  .topbar-quick-btn
):not(.ods-btn):not(.no-theme-surface){
  background: var(--staff-header-bg, var(--bs-card-bg)) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--theme-section-border, var(--bs-border-color)) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .staff-sidebar,
  .app-sidebar
):not(.no-theme-surface){
  background: var(--staff-sidebar-bg-source, var(--bs-card-bg)) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--theme-section-border, var(--bs-border-color)) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .card,
  .app-card,
  .stat-card,
  .metric-card,
  .summary-card,
  .customer-card,
  .supplier-card,
  .ticket-card,
  .thread-card,
  .message-card,
  .design-card,
  .page-card,
  .section-card,
  .content-card,
  .filter-card,
  .panel,
  .widget,
  .settings-panel,
  .customers-panel,
  .messages-panel,
  .message-list,
  .message-detail,
  .conversation-panel,
  .support-panel,
  .app-page-header,
  .readonly-box,
  .modal-content,
  .dropdown-menu,
  .offcanvas,
  .list-group-item,
  .accordion-item,
  .tab-pane-card,
  .table-responsive
):not(.no-theme-surface):not(.ods-card):not(.ods-field):not(.ods-preview-shell){
  background: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--theme-card-border, var(--bs-card-border-color, var(--bs-border-color))) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .bg-white,
  .bg-light,
  .bg-light-subtle,
  .table-light,
  .card-header,
  .card-footer,
  .accordion-button,
  .list-group-item-action:hover
):not(.brand-surface):not(.no-theme-surface){
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .form-control,
  .form-select,
  .input-group-text,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select
){
  background: var(--bs-form-control-bg, var(--bs-body-bg)) !important;
  color: var(--bs-form-control-color, var(--bs-body-color)) !important;
  border-color: var(--theme-input-border, var(--bs-border-color)) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(.form-control::placeholder, textarea::placeholder){
  color: var(--bs-secondary-color) !important;
  opacity: .82 !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(.table){
  --bs-table-bg: var(--bs-card-bg) !important;
  --bs-table-color: var(--bs-body-color) !important;
  --bs-table-border-color: var(--theme-table-border, var(--bs-border-color)) !important;
  --bs-table-striped-bg: var(--bs-tertiary-bg) !important;
  --bs-table-hover-bg: var(--bs-secondary-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}
html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(.table th,.table td){
  background-color: transparent !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}
html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(.table thead th){
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-heading-color) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(
  .text-dark,
  .fw-bold,
  .fw-semibold,
  h1,h2,h3,h4,h5,h6,
  .page-title,
  .card-title,
  .section-title
){
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
}
html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(.text-muted,.small.text-muted,.form-text,.help-text,.page-subtitle,.app-page-subtitle,.text-secondary){
  color: var(--bs-secondary-color) !important;
}

html[data-bs-theme="dark"] body.staff-ui[data-app-area="staff"] :where(.btn-primary,.active-brand,.brand-surface,.nav-link.active,.staff-nav .nav-link.active){
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
/* STAFF sidebar collapse toggle icon visibility only */
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle{
  background: var(--bs-card-bg, #111827) !important;
  border-color: var(--bs-border-color, #475569) !important;
  color: var(--bs-body-color, #e5e7eb) !important;
}

html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle::before,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle::before,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle::before{
  color: var(--bs-body-color, #e5e7eb) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle i,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle i,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle i{
  color: var(--bs-body-color, #e5e7eb) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* STAFF sidebar collapse toggle - dark hover visibility only */
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:hover,
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:focus,
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:active,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:hover,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:focus,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:active,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:hover,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:focus,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:active{
  background: var(--bs-tertiary-bg, #1f2937) !important;
  border-color: var(--bs-border-color, #475569) !important;
  color: var(--bs-body-color, #e5e7eb) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}

html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:hover::before,
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:focus::before,
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:active::before,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:hover::before,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:focus::before,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:active::before,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:hover::before,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:focus::before,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:active::before{
  color: var(--bs-body-color, #e5e7eb) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:hover i,
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:focus i,
html[data-bs-theme="dark"] body[data-app-area="staff"] .staff-sidebar-toggle:active i,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:hover i,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:focus i,
html[data-bs-theme="dark"] body.staff-ui .staff-sidebar-toggle:active i,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:hover i,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:focus i,
html[data-bs-theme="dark"] body:not([data-app-area="app"]) .staff-sidebar-toggle:active i{
  color: var(--bs-body-color, #e5e7eb) !important;
  opacity: 1 !important;
  visibility: visible !important;
}