/* ==========================================================================
   Custom theme layer: Paper/Graphite (Bootstrap 5 + Hope UI)
   Goal: enforce palette + admin dashboard concept (soft surfaces, calm contrast,
   clear hierarchy). Insert after vendor CSS.
   ========================================================================== */

/* -----------------------------
   A11y: do NOT nuke focus styles
   ----------------------------- */
:focus { outline: none; }
:focus-visible{
  outline: 2px solid rgba(var(--bs-primary-rgb), .35);
  outline-offset: 2px;
}

/* -----------------------------
   Tokens (Light)
   ----------------------------- */
:root,
[data-bs-theme="light"]{
  --bs-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-heading-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /* Brand palette (given) */
  --bs-primary: #3A4750;                 /* Cadet Blue */
  --bs-primary-rgb: 58, 71, 80;

  --bs-secondary: #313841;               /* High Tide */
  --bs-secondary-rgb: 49, 56, 65;

  --bs-brand-accent: #EA9216;            /* Yam (brand accent) */
  --bs-brand-accent-rgb: 234, 146, 22;
  --bs-brand-accent-bg: #FBE6D2;
  --bs-brand-accent-border: #F2C28F;
  --bs-brand-accent-contrast: #1F242B;

  /* Keep warning semantic (do not bind to Yam) */
  --bs-warning: #F16A1B;
  --bs-warning-rgb: 241, 106, 27;
  --bs-info: #637786;
  --bs-info-rgb: 99, 119, 134;

  /* Neutrals / surfaces (concept) */
  --bs-body-bg: #EEEEEE;                 /* Pebble */
  --bs-body-bg-rgb: 238, 238, 238;

  --bs-body-color: #1F242B;
  --bs-body-color-rgb: 31, 36, 43;
  --bs-heading-color: #313841;

  --bs-secondary-color: #5F6974;
  --bs-tertiary-color: #7A8591;

  /* Surfaces: cards/inputs/topbar */
  --bs-tertiary-bg: #F7F5F2;             /* soft panel */
  --bs-tertiary-bg-rgb: 247, 245, 242;

  --bs-card-bg: #F7F5F2;
  --bs-card-cap-bg: rgba(0,0,0,0);
  --bs-secondary-bg: #E4E7EA;
  --bs-secondary-bg-rgb: 228, 231, 234;

  /* Borders */
  --bs-border-color: #CDD3D8;
  --bs-border-color-translucent: rgba(31,36,43,.10);

  /* Links */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-secondary);

  /* Radius: closer to references */
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-xxl: 1.5rem;

  /* Focus ring */
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
  --bs-focus-ring-width: .25rem;

  /* Shadows: quieter, “paper” */
  --bs-box-shadow-sm: 0 .25rem .75rem rgba(17,24,39,.06);
  --bs-box-shadow: 0 .5rem 1.5rem rgba(17,24,39,.08);
  --bs-box-shadow-lg: 0 .75rem 2.25rem rgba(17,24,39,.10);
}

/* -----------------------------
   Tokens (Dark)
   ----------------------------- */
[data-bs-theme="dark"]{
  --bs-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-heading-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /* Keep brand hues identical; change surfaces/contrast */
  --bs-primary: #3A4750;
  --bs-primary-rgb: 58, 71, 80;

  --bs-secondary: #313841;
  --bs-secondary-rgb: 49, 56, 65;

  --bs-brand-accent: #EA9216;
  --bs-brand-accent-rgb: 234, 146, 22;
  --bs-brand-accent-bg: #3A2812;
  --bs-brand-accent-border: #7A4B12;
  --bs-brand-accent-contrast: #0B0F14;

  --bs-warning: #F16A1B;
  --bs-warning-rgb: 241, 106, 27;
  --bs-info: #72889A;
  --bs-info-rgb: 114, 136, 154;

  /* Dark neutrals */
  --bs-body-bg: #12171D;
  --bs-body-bg-rgb: 18, 23, 29;

  --bs-tertiary-bg: #1B2129;
  --bs-tertiary-bg-rgb: 27, 33, 41;

  --bs-card-bg: #1B2129;
  --bs-secondary-bg: #202833;
  --bs-secondary-bg-rgb: 32, 40, 51;

  --bs-heading-color: #E9E5DD;
  --bs-body-color: #D1D7DE;

  --bs-secondary-color: rgba(233,229,221,.72);
  --bs-tertiary-color: rgba(233,229,221,.54);

  --bs-border-color: #2A333D;
  --bs-border-color-translucent: rgba(233,229,221,.12);

  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .30);

  --bs-box-shadow-sm: 0 .25rem .75rem rgba(0,0,0,.35);
  --bs-box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.40);
  --bs-box-shadow-lg: 0 .75rem 2.25rem rgba(0,0,0,.45);
}

/* ==========================================================================
   Global typography / transitions
   ========================================================================== */
h1,h2,h3,h4,h5,h6{ font-family: var(--bs-heading-font-family); }

a{
  color: var(--bs-link-color);
  transition: color 400ms ease, background 400ms ease;
}

body{
  transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
  background:
    radial-gradient(circle at top right, rgba(var(--bs-brand-accent-rgb), .06), transparent 26%),
    radial-gradient(circle at left center, rgba(var(--bs-primary-rgb), .07), transparent 32%),
    var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ==========================================================================
   Scrollbars (soft, consistent)
   ========================================================================== */
.iq-scroller-effect ::-webkit-scrollbar{ width:5px; height:5px; border-radius:20px; }
.iq-scroller-effect ::-webkit-scrollbar-track{ background: var(--bs-body-bg); border-radius:20px; }
.iq-scroller-effect ::-webkit-scrollbar-thumb{
  background: var(--bs-border-color);
  border-radius: 20px;
  transition: all 400ms ease;
  cursor: pointer;
}
.iq-scroller-effect ::-webkit-scrollbar-thumb:hover{ background: var(--bs-tertiary-bg); }

/* ==========================================================================
   Core “paper card” baseline (matches references)
   ========================================================================== */
.card{
  background: var(--bs-card-bg);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow-sm);
}
[data-bs-theme="dark"] .card{
  box-shadow: 0 .625rem 1.875rem rgba(255,255,255,.03);
}

/* Card header/footer keep clean */
.card-header,
.card-footer{
  background: transparent;
  border-color: var(--bs-border-color);
}

/* Utility block inside cards */
.card .iq-dashed-border{
  padding: 1.5rem;
  border-radius: var(--bs-border-radius-lg);
  border: 1px dashed color-mix(in srgb, var(--bs-border-color) 85%, transparent);
}

/* ==========================================================================
   Buttons: keep Bootstrap semantics + add Accent button
   ========================================================================== */

/* Primary: calmer (not loud). Keep Bootstrap behavior, just refine shape/shadow. */
.btn{
  border-radius: var(--bs-border-radius-lg);
}
.btn:focus-visible{
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.btn-primary{
  box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .15);
}
.btn-primary:hover{
  box-shadow: 0 .35rem 1rem rgba(var(--bs-primary-rgb), .18);
}

/* Accent: brand highlight (Yam). */
.btn-accent{
  --_bg: var(--bs-brand-accent);
  --_bd: color-mix(in srgb, var(--bs-brand-accent) 80%, #000 20%);
  --_tx: #1F242B;

  color: var(--_tx);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 .35rem 1rem rgba(var(--bs-brand-accent-rgb), .22);
}
.btn-accent:hover{
  color: var(--_tx);
  background: color-mix(in srgb, var(--bs-brand-accent) 92%, #000 8%);
  border-color: color-mix(in srgb, var(--bs-brand-accent) 70%, #000 30%);
}
.btn-accent:active{
  background: color-mix(in srgb, var(--bs-brand-accent) 86%, #000 14%);
}
.btn-accent:focus-visible{
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-brand-accent-rgb), .25);
}

/* Ghost button: neutral hover */
.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--bs-body-color);
}
.btn-ghost:hover{
  background: rgba(var(--bs-primary-rgb), 0.06);
  border-color: transparent;
  color: var(--bs-primary);
}
.btn-ghost:active{ background: rgba(var(--bs-primary-rgb), 0.10); }

/* ==========================================================================
   Badges: soft chips like references
   ========================================================================== */
.badge{
  border-radius: 999px;
}
.badge.rounded-pill{ padding: .45em .65em; }

.badge-soft-primary{
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .10);
  border: 1px solid rgba(var(--bs-primary-rgb), .12);
}
.badge-soft-warning{
  color: var(--bs-warning-text-emphasis);
  background: var(--bs-warning-bg-subtle);
  border: 1px solid var(--bs-warning-border-subtle);
}
.badge-soft-accent{
  color: var(--bs-brand-accent-contrast);
  background: var(--bs-brand-accent-bg);
  border: 1px solid var(--bs-brand-accent-border);
}

/* ==========================================================================
   Forms / Inputs: “pill-ish”, soft background blocks
   ========================================================================== */
.form-control,
.form-select,
.input-group-text{
  border-radius: var(--bs-border-radius-lg);
  border-color: var(--bs-border-color);
}

.form-control,
.form-select{
  background-color: var(--bs-tertiary-bg);
}

.form-control::placeholder,
.form-select::placeholder{ color: var(--bs-tertiary-color); }

.form-control:focus,
.form-select:focus{
  background-color: var(--bs-tertiary-bg);
  border-color: rgba(var(--bs-primary-rgb), .35);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-control:disabled,
.form-select:disabled{ background-color: rgba(var(--bs-black-rgb), .03); }
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled{ background-color: rgba(var(--bs-white-rgb), .04); }

/* Topbar search (Hope UI pattern) */
.nav .search-input.input-group .input-group-text,
.nav .search-input.input-group .form-control{
  background-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .nav .search-input.input-group .input-group-text,
[data-bs-theme="dark"] .nav .search-input.input-group .form-control{
  background-color: rgba(var(--bs-white-rgb), .03);
}

/* ==========================================================================
   Tables: clean header band + consistent padding
   ========================================================================== */
.table thead th{
  color: var(--bs-secondary-color);
  font-weight: 600;
  background-color: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}
.table > :not(caption) > * > *{
  padding-top: .65rem;
  padding-bottom: .65rem;
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .table thead tr th{
  background-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(even)>*{
  --bs-table-accent-bg: var(--bs-body-bg);
}

/* Pricing table fixes (kept from your file) */
.pricing .table thead tr{ background-color: unset; }
.pricing .table th{
  border-top: none;
  border-bottom: 1px solid var(--bs-border-color);
}
.pricing .table td{ border-top: none !important; }
.pricing .table tr{ border-bottom: 1px solid var(--bs-border-color); }

/* ==========================================================================
   Dropdown / Popover / Tooltip: soft border + rounded
   ========================================================================== */
.dropdown-menu,
.popover{
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius-lg);
}
.tooltip-inner{ border-radius: var(--bs-border-radius); }

/* ==========================================================================
   Alerts / Toasts
   ========================================================================== */
.alert{
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}
.toast{
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius-lg);
}

/* ==========================================================================
   Pagination / Breadcrumb: subtle hover
   ========================================================================== */
.page-link{
  border-radius: .65rem;
}
.page-link:hover{
  background: rgba(var(--bs-primary-rgb), 0.06);
  color: var(--bs-primary);
}
.breadcrumb{
  --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
}

/* ==========================================================================
   Modals / Offcanvas: “floating sheet”
   ========================================================================== */
.modal-content,
.offcanvas{
  border-radius: var(--bs-border-radius-xxl);
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  background: var(--bs-card-bg);
}
.modal-header,
.modal-footer{ border-color: var(--bs-border-color); }

/* ==========================================================================
   Sidebar: calm, readable (Hope UI selectors preserved)
   ========================================================================== */
.sidebar.sidebar-default .nav-link:not(.static-item){
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius-lg);
}
.sidebar.sidebar-default .nav-link:not(.static-item) i,
.sidebar.sidebar-default .nav-link:not(.static-item) svg{
  opacity: .72;
}
.sidebar.sidebar-default .nav-link:not(.static-item).active,
.sidebar.sidebar-default .nav-link:not(.static-item):hover{
  background: rgba(var(--bs-primary-rgb), .06);
}
.sidebar.sidebar-default .nav-link:not(.static-item).active i,
.sidebar.sidebar-default .nav-link:not(.static-item).active svg,
.sidebar.sidebar-default .nav-link:not(.static-item):hover i,
.sidebar.sidebar-default .nav-link:not(.static-item):hover svg{
  opacity: 1;
}

/* Mobile offcanvas background (kept from your file, corrected to use tokens) */
@media(max-width: 1199.98px){
  .mobile-offcanvas{
    background: color-mix(in srgb, var(--bs-secondary) 75%, #000 25%);
    backdrop-filter: blur(.5rem);
  }
}

/* ==========================================================================
   Nav glass (dark) + charts tooltips (kept, aligned)
   ========================================================================== */
[data-bs-theme="dark"] .iq-navbar.nav-glass{
  background: rgba(var(--bs-tertiary-bg-rgb), .5);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .iq-navbar.nav-glass .nav{
  background: rgba(var(--bs-black-rgb), 0);
}

[data-bs-theme="dark"] .apexcharts-theme-light .apexcharts-tooltip{
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .apexcharts-theme-light .apexcharts-tooltip .apexcharts-tooltip-title{
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .apexcharts-title-text{ fill: var(--bs-white); }
[data-bs-theme="dark"] .apexcharts-yaxis-title .apexcharts-text.apexcharts-yaxis-title-text{ fill: var(--bs-white); }

/* ==========================================================================
   Your original structural styles (kept) — minimal edits to align tokens
   ========================================================================== */
.iq-slider{ overflow:hidden; overflow-x:auto; }
hr{ margin:1rem 0; color:inherit; background-color:currentColor; border:0; opacity:.25; }

.sign-bg{ position:absolute; left:0; top:0; }
.sign-bg.sign-bg-right{ left:auto; right:0; }

.gradient-main{ height:100%; width:100%; object-fit:cover; }

.login-bottom{ margin-top:-12.5rem; }
@media(min-width: 1400px){ .auth-card{ padding:0 6.25rem; } }
@media(max-width: 575.98px){
  .login-header{ height:12.5rem !important; }
  .login-bottom{ margin-top:-6.25rem; }
}

.card .card-body .grid-flow-col{ grid-auto-flow:column; }

.card .card-body .iq-icon-box-2{
  height:36px; width:36px; min-width:36px; line-height:36px;
  text-align:center; font-size:1rem; text-decoration:none;
  border-radius: .75rem;
}

.card .card-body .iq-media-group-1 .iq-media-1{ margin-left:-1.25rem; position:relative; z-index:0; }
.card .card-body .iq-media-group-1 .iq-media-1:hover{ z-index:9; }
.card .card-body .iq-media-group-1 .iq-media-1 img{ border:2px solid var(--bs-border-color); }
.card .card-body .iq-media-group-1 .iq-media-1:first-child{ margin-left:0; }
.card .card-body .iq-media-group-1 .iq-media.border{ border:2px solid var(--bs-border-color); }

.card .card-body .iq-media-1{
  display:inline-flex;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  border-radius:.5rem;
}
.card .card-body .iq-media-1:hover{ text-decoration:none; }

.prc-box{
  background: rgba(var(--bs-primary-rgb), .08);
  padding:15px;
  position:relative;
  border-radius: var(--bs-border-radius);
  cursor:pointer;
  transition: 500ms ease-in-out;
  border: 1px solid rgba(var(--bs-primary-rgb), .10);
}
.type{
  position:absolute;
  background: var(--bs-primary);
  padding:9px 25px;
  color: var(--bs-white);
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  font-weight:500;
  border-radius: 999px;
}
.type:before,
.type:after{ display:none; }

.prc-box.active{
  background: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .35);
}
.prc-box.active .h3{ color: var(--bs-white); }
.prc-box.active .type{
  transition: 500ms ease-in-out;
  background: rgba(var(--bs-white-rgb), .14);
  color: var(--bs-white);
}

.prc-wrap{ border-bottom:none !important; }

.table tbody tr td.child-cell.active{ color: var(--bs-primary); stroke: var(--bs-primary); }

.line-around{ border-bottom:1px solid var(--bs-border-color); text-align:center; line-height:.1em; }
.line-around .line-around-1{ background: var(--bs-card-bg); padding:0 18px; }

.iq-single-card{
  border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}
@media(max-width: 767.98px){
  .iq-single-card{
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
  }
}

.iq-star-inserted .iq-star-inserted-1.col{ padding-right:unset; }
.iq-star-inserted .iq-star-inserted-2{ z-index:2; }
.iq-star-inserted .iq-star-inserted-2.col{ padding:unset; }
.iq-star-inserted .iq-star-inserted-2.col .card{ height:100%; }
.iq-star-inserted .iq-star-inserted-3.col{ padding-left:unset; }
@media(max-width: 991.98px){
  .iq-star-inserted .card.my-5{ margin:unset !important; margin-bottom:2rem !important; }
  .iq-star-inserted .iq-star-inserted-1.col{ padding-right:calc(var(--bs-gutter-x)/2); }
  .iq-star-inserted .iq-star-inserted-2.col{
    padding-right:calc(var(--bs-gutter-x)/2);
    padding-left:calc(var(--bs-gutter-x)/2);
  }
  .iq-star-inserted .iq-star-inserted-2.col .card{ height:unset; margin-bottom:2rem !important; }
  .iq-star-inserted .iq-star-inserted-3.col{ padding-left:calc(var(--bs-gutter-x)/2); }
}

.body-class-1{ scroll-behavior:smooth; }

/* Hero (kept) */
.main-img .container{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  color: var(--bs-white);
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
}
.main-img .container h1{
  margin:0;
  font-size:4.375rem;
  color: var(--bs-white);
}
.main-img .container h1 span{ padding:.375rem .875rem; display:inline-block; }

.bd-heading-1 .bd-example{ margin-top:1rem; }
.bd-heading-1 .bd-example:first-child{ margin-top:0rem; }

.bd-cheatsheet{ margin-top:-2rem; }
.bd-cheatsheet section article .card.iq-document-card{ padding:1.5rem; }
.bd-cheatsheet section article .card.iq-document-card .tab-content pre.language-markup{ margin:unset; }

.bd-aside.card.iq-document-card{ padding:1.5rem; margin-top:-2rem; }
.bd-aside a{
  padding:.25rem .5rem;
  margin-top:.125rem;
  margin-left:.25rem;
  color: rgba(var(--bs-body-color-rgb), 0.95);
  text-decoration:none;
  border-radius: .5rem;
}
.bd-aside a:hover,
.bd-aside a:focus{ background-color: rgba(var(--bs-primary-rgb), 0.1); }
.bd-aside .active{
  font-weight:600;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}
.bd-aside .btn{
  padding:.25rem .5rem;
  font-weight:600;
  color: var(--bs-secondary-color);
  border:0;
  border-radius: .5rem;
}
.bd-aside .btn .right-icon{ transition: transform .35s ease; }
.bd-aside .btn:hover,
.bd-aside .btn:focus{
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}
.bd-aside .btn[aria-expanded=true] .right-icon{ transform:rotate(90deg); }

.scrollspy-example{
  position:relative;
  height:12.5rem;
  margin-top:.5rem;
  overflow:auto;
}

[id=modal] .bd-example .btn,
[id=buttons] .bd-example .btn,
[id=tooltips] .bd-example .btn,
[id=popovers] .bd-example .btn,
[id=dropdowns] .bd-example .btn-group,
[id=dropdowns] .bd-example .dropdown,
[id=dropdowns] .bd-example .dropup,
[id=dropdowns] .bd-example .dropend,
[id=dropdowns] .bd-example .dropstart{ margin-top:.5rem; }

@media(min-width: 1200px){
  .body-class-1{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr 4fr 1fr;
    grid-template-rows:auto;
  }
  .bd-aside.sticky-xl-top{ top:2rem !important; z-index:2; }

  .bd-header{
    position:fixed; top:0; right:0; left:0; z-index:1030;
    grid-column:1/span 3;
  }

  .bd-cheatsheet,
  .bd-cheatsheet section,
  .bd-cheatsheet article{
    display:grid;
    gap:2rem;
    grid-template-columns:3fr 1fr;
    grid-column:span 2/span 2;
    grid-template-rows:auto;
  }

  .bd-aside{ grid-area:1/1; scroll-margin-top:4rem; }
  .bd-cheatsheet section,
  .bd-cheatsheet section>.iq-side-content{ top:2rem; scroll-margin-top:0; }

  .bd-cheatsheet article,
  .bd-cheatsheet .bd-heading{
    top:calc(7.2rem + 2rem);
    scroll-margin-top:calc(7.8rem + 2rem);
  }

  .bd-cheatsheet .bd-heading{ z-index:1; order:2; }
  .bd-cheatsheet .bd-heading .card{ margin-bottom:0; }
  .bd-cheatsheet article .iq-document-card{ margin-bottom:unset; }
  .bd-cheatsheet article .iq-document-card.iq-doc-head{ margin-top:-6.8rem; }
}

@media(min-width: 768px) and (max-width: 1199.98px){
  .mobile-offcanvas{ width:40% !important; }
}
@media(max-width: 767.98px){
  .main-img .container h1{ font-size:3.125rem; }
}
@media(max-width: 1199.98px){
  .header .container{ max-width:unset !important; }
  aside.mobile-offcanvas{ margin-top:unset !important; }
  aside.mobile-offcanvas .offcanvas-header{ display:block; }
  .body-class-1{ padding:unset; }
  .body-class-1.container{ max-width:unset; }
  #content .iq-side-content .card{ margin-top:1.25rem; }

  .mobile-offcanvas{
    visibility:hidden;
    transform:translateX(-100%);
    border-radius:0;
    display:block;
    position:fixed;
    top:0; left:0;
    height:100vh;
    z-index:1200;
    width:75%;
    overflow-y:scroll;
    overflow-x:hidden;
    transition:visibility .3s ease-in-out, transform .3s ease-in-out;
  }
  .mobile-offcanvas.show{
    visibility:visible;
    transform:translateY(0);
  }
  .mobile-offcanvas .container,
  .mobile-offcanvas .container-fluid{ display:block; }
}

@media(min-width: 1200px){
  .bd-aside.card.iq-document-card,
  .bd-cheatsheet{ margin-top:-3rem; }
  aside.mobile-offcanvas .offcanvas-header{ display:none; }
  .bd-cheatsheet section .iq-side-content{ grid-column-end:3; }
  .bd-cheatsheet section .iq-side-content .card{ margin-bottom:0; }
}

body.offcanvas-active{ overflow:hidden; }
body.uikit .btn-download{ display:none; }

/* Screen darken (kept) */
.uisheet.screen-darken{
  height:100%;
  width:0%;
  z-index:30;
  position:fixed;
  top:0; right:0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(var(--bs-white-rgb), .6);
  transition: opacity .2s linear, visibility .2s, width 2s ease-in;
}
.uisheet.screen-darken.active{
  z-index:10;
  transition: opacity .3s ease, width 0s;
  opacity:1;
  width:100%;
  visibility:visible;
}

#back-to-top{ display:inline !important; }
#back-to-top .top{ bottom:1.563rem; right:1.563rem; z-index:999; }

.middle{ display:inline !important; }
.middle .mid-menu{
  position:fixed;
  top:9.375rem;
  left:0rem;
  z-index:999;
  text-align:center;
  cursor:pointer;
  background: var(--bs-primary);
  color: var(--bs-white);
  padding:.2rem;
  border-radius:0 1rem 1rem 0;
}
.top-1{ top:1rem; }

/* Lists scrollbar (kept, aligned) */
.elem-list{ max-height:calc(80vh + 4rem); overflow:auto; }
.elem-list::-webkit-scrollbar{ width:4px; height:4px; border-radius:10px; }
.elem-list::-webkit-scrollbar-track{ background: var(--bs-body-bg); border-radius:10px; }
.elem-list::-webkit-scrollbar-thumb{
  background: rgba(var(--bs-black-rgb), .2);
  border-radius:10px;
  transition:all 400ms ease;
  cursor:pointer;
}
.elem-list::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--bs-black-rgb), .2);
}

/* Dark-mode compatibility helpers (kept from your file, safer defaults) */
[data-bs-theme="dark"] .border-white{ border-color: var(--bs-border-color) !important; }
[data-bs-theme="dark"] .text-dark{ color: var(--bs-white) !important; }
[data-bs-theme="dark"] .text-black{ color: var(--bs-white) !important; }
[data-bs-theme="dark"] .bg-white{ background: var(--bs-gray-900) !important; }
[data-bs-theme="dark"] .bg-light{ background: var(--bs-body-bg) !important; }

[data-bs-theme="dark"] .table thead tr th{ background-color: var(--bs-body-bg); }

[data-bs-theme="dark"] .iq-product-tracker .iq-tracker-position-0.active::before{
  box-shadow:
    0 0 0 3px var(--bs-body-bg),
    0 0 0 5px var(--bs-primary);
}
[data-bs-theme="dark"] .sing-img{ filter: invert(1); }


/* ------------------------- НОВОЕ --------------------------- */
/* ==========================================================================
   Sidebar: force dark surface + keep accent for active/hover markers
   ========================================================================== */

:root{
  /* Sidebar tokens (единый источник правды) */
  --ds-sidebar-bg: #1E232C;                 /* тёмная подложка */
  --ds-sidebar-border: #2C3340;
  --ds-sidebar-text: rgba(231,235,240,.78);
  --ds-sidebar-text-strong: #E7EBF0;
  --ds-sidebar-hover: rgba(234,146,22,.10); /* hover от Yam, но очень мягко */
  --ds-sidebar-active-bg: rgba(234,146,22,.14);
  --ds-sidebar-active-border: rgba(234,146,22,.35);
  --ds-sidebar-item-radius: .7rem;
  --ds-sidebar-item-height: 2.75rem;
}

/* Панель */
.sidebar.sidebar-base{
  background: var(--ds-sidebar-bg) !important;
  border-right: 1px solid var(--ds-sidebar-border) !important;
  box-shadow: 8px 0 28px rgba(13,18,24,.08);
}

/* Заголовок/бренд */
.sidebar .sidebar-header,
.sidebar .sidebar-footer{
  background: transparent !important;
  border-color: var(--ds-sidebar-border) !important;
}
.sidebar .logo-title{
  color: var(--ds-sidebar-text-strong) !important;
}

.logo-title{
  line-height: 1;
}

.logo-title__main,
.logo-title__online{
  display: block;
}

.logo-title__main{
  letter-spacing: -0.03em;
}

.logo-title__online{
  margin-top: 0.2rem;
  color: rgba(231,235,240,.58);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Stable navigation grid: icon, label and chevron never affect each other. */
.sidebar.sidebar-base .sidebar-header{
  min-height: 4.5rem;
  padding: 0 1rem;
}

.sidebar.sidebar-base .navbar-brand{
  min-width: 0;
  padding: .85rem 0;
}

.sidebar.sidebar-base .navbar-brand .logo-main{
  display: none;
}

.sidebar.sidebar-base .navbar-brand .logo-title{
  margin-left: 0;
}

.sidebar.sidebar-base .sidebar-toggle{
  top: 1.1rem;
  right: -.7rem;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  place-items: center;
  color: var(--ds-sidebar-text-strong);
  background: #2a323d;
  border: 1px solid rgba(231,235,240,.28);
  box-shadow: 0 4px 12px rgba(13,18,24,.22);
}

.sidebar.sidebar-base .sidebar-toggle svg{
  width: .9rem;
  height: .9rem;
}

.sidebar.sidebar-base .sidebar-body{
  padding: .35rem .75rem 1rem;
}

.sidebar.sidebar-base .sidebar-list,
.sidebar.sidebar-base .iq-main-menu{
  width: 100%;
}

.sidebar.sidebar-base .nav-item:not(.static-item){
  margin-top: .18rem;
  padding-left: 0;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item){
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 1rem;
  align-items: center;
  min-height: var(--ds-sidebar-item-height);
  margin: 0;
  padding: .55rem .8rem !important;
  column-gap: .75rem;
  border: 1px solid transparent;
  border-radius: var(--ds-sidebar-item-radius) !important;
  font-size: .91rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item) > .icon{
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item) > .icon svg{
  width: 1rem;
  height: 1rem;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item) > .item-name{
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item) > .right-icon{
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  opacity: .7;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item) > .right-icon svg{
  width: .9rem;
  height: .9rem;
}

.sidebar.sidebar-base .nav-item .nav-link:not(.static-item):not(:has(.right-icon)){
  grid-template-columns: 1.25rem minmax(0, 1fr);
}

.sidebar.sidebar-base .nav-item.static-item{
  margin: 1.05rem 0 .3rem;
  padding: 0 .8rem;
}

.sidebar.sidebar-base .nav-item.static-item:first-child{
  margin-top: .35rem;
}

.sidebar.sidebar-base .nav-item .nav-link.static-item{
  min-height: auto;
  margin: 0;
  padding: 0 !important;
}

.sidebar.sidebar-base .nav-item.static-item .default-icon{
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
}

.sidebar.sidebar-base hr.hr-horizontal{
  margin: .85rem .8rem;
}

/* Пункты меню */
.sidebar.sidebar-default .nav-link:not(.static-item){
  color: var(--ds-sidebar-text) !important;
}
.sidebar.sidebar-default .nav-link:not(.static-item) .item-name{
  color: inherit !important;
}
.sidebar.sidebar-default .nav-link:not(.static-item) i,
.sidebar.sidebar-default .nav-link:not(.static-item) svg{
  color: inherit !important;
  opacity: 1 !important;
}

/* Hover */
.sidebar.sidebar-default .nav-link:not(.static-item):hover{
  background: var(--ds-sidebar-hover) !important;
  color: var(--ds-sidebar-text-strong) !important;
}

/* Active */
.sidebar.sidebar-default .nav-link:not(.static-item).active{
  background: var(--ds-sidebar-active-bg) !important;
  color: var(--ds-sidebar-text-strong) !important;
  border: 1px solid var(--ds-sidebar-active-border) !important;
  box-shadow: inset 3px 0 0 rgba(234,146,22,.72) !important;
}

/* Подменю */
.sidebar .sub-nav{
  margin: .25rem 0 .45rem 1.4rem;
  padding: .15rem 0 .15rem .55rem;
  border-left: 1px solid rgba(231,235,240,.13);
}
.sidebar.sidebar-base .sub-nav .nav-item{
  margin: .08rem 0;
  padding-left: 0;
}
.sidebar.sidebar-base .sub-nav .nav-link:not(.static-item){
  min-height: 2.35rem;
  padding: .42rem .65rem !important;
  column-gap: .65rem;
  border-radius: .58rem !important;
  font-size: .86rem;
}
.sidebar .sub-nav .nav-link{
  color: rgba(231,235,240,.70) !important;
}
.sidebar.sidebar-default .sub-nav .nav-link:not(.static-item).active{
  color: var(--ds-sidebar-text-strong) !important;
  background: rgba(234,146,22,.09) !important;
  border-color: rgba(234,146,22,.18) !important;
  box-shadow: inset 2px 0 0 rgba(234,146,22,.62) !important;
}

/* Static sections */
.sidebar .static-item .default-icon{
  color: rgba(231,235,240,.55) !important;
}

/* Divider */
.sidebar hr.hr-horizontal{
  border-color: rgba(231,235,240,.10) !important;
  opacity: 1 !important;
}


.text-accent{ color: var(--bs-brand-accent) !important; }
.bg-accent-subtle{ background: var(--bs-brand-accent-bg) !important; }
.border-accent{ border-color: var(--bs-brand-accent-border) !important; }




/* ==========================================================================
   Brand Accent utilities (Yam) — 4 класса: btn/text/bg/border
   ВАЖНО: #EA9216 + белый текст НЕ проходит контраст (≈2.44).
   Поэтому для кнопок с белым текстом используем "accent-strong" (затемнённый Yam).
   ========================================================================== */

/* 1) Токены (единые для light/dark) */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"]{
  /* исходный Yam уже есть: --bs-brand-accent */

  /* Yam для кнопок под белый текст (≈ #A4660F при 70/30) */
  --bs-brand-accent-strong: color-mix(in srgb, var(--bs-brand-accent) 70%, #000 30%);
  --bs-brand-accent-strong-rgb: 164, 102, 15;

  /* состояния */
  --bs-brand-accent-strong-hover: color-mix(in srgb, var(--bs-brand-accent) 74%, #000 26%);
  --bs-brand-accent-strong-active: color-mix(in srgb, var(--bs-brand-accent) 66%, #000 34%);

  /* обводка (чуть темнее фона) */
  --bs-brand-accent-strong-border: color-mix(in srgb, var(--bs-brand-accent-strong) 78%, #000 22%);
}

/* 2) РОВНО 4 класса */

/* A) КНОПКА: бренд-акцент с белым текстом */
.btn-brand{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-brand-accent-strong);
  --bs-btn-border-color: var(--bs-brand-accent-strong-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-brand-accent-strong-hover);
  --bs-btn-hover-border-color: var(--bs-brand-accent-strong-border);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-brand-accent-strong-active);
  --bs-btn-active-border-color: var(--bs-brand-accent-strong-border);
  --bs-btn-focus-shadow-rgb: var(--bs-brand-accent-strong-rgb);
}

/* B) ТЕКСТ: бренд-акцент (для заголовков/меток/иконок) */
.text-brand{ color: var(--bs-brand-accent) !important; }

/* C) ФОН: мягкая подложка бренда (чипы/блоки/плашки) */
.bg-brand-subtle{ background: var(--bs-brand-accent-bg) !important; }

/* D) ГРАНИЦА: бренд-акцент */
.border-brand{ border-color: var(--bs-brand-accent-border) !important; }

/* ==========================================================================
   Final dashboard alignment: palette fidelity + sticky stability
   ========================================================================== */

/* 60/30/10 palette distribution:
   60% Pebble on page background and light surfaces,
   30% Cadet Blue / High Tide on structural chrome,
   10% Yam only for emphasis. */
:root,
[data-bs-theme="light"]{
  --bs-body-bg: #EEEEEE;
  --bs-body-bg-rgb: 238, 238, 238;
  --bs-tertiary-bg: #F2EFEB;
  --bs-tertiary-bg-rgb: 242, 239, 235;
  --bs-card-bg: #F4F1ED;
  --bs-secondary-bg: #E2E5E8;
  --bs-secondary-bg-rgb: 226, 229, 232;
  --bs-border-color: #C8CFD5;
  --bs-border-color-translucent: rgba(49,56,65,.12);
  --bs-body-color: #262D35;
  --bs-heading-color: #313841;
  --bs-secondary-color: #5E6974;
  --bs-tertiary-color: #78838E;
}

[data-bs-theme="dark"]{
  --bs-body-bg: #151B22;
  --bs-body-bg-rgb: 21, 27, 34;
  --bs-tertiary-bg: #1D252E;
  --bs-tertiary-bg-rgb: 29, 37, 46;
  --bs-card-bg: #1F2730;
  --bs-secondary-bg: #26303A;
  --bs-secondary-bg-rgb: 38, 48, 58;
  --bs-border-color: #303A45;
  --bs-border-color-translucent: rgba(238,238,238,.11);
  --bs-body-color: #D8DDE3;
  --bs-heading-color: #EEEEEE;
  --bs-secondary-color: rgba(238,238,238,.72);
  --bs-tertiary-color: rgba(238,238,238,.56);
}

body{
  background:
    radial-gradient(circle at top right, rgba(var(--bs-brand-accent-rgb), .035), transparent 24%),
    radial-gradient(circle at left top, rgba(var(--bs-primary-rgb), .06), transparent 30%),
    var(--bs-body-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] body{
  background:
    radial-gradient(circle at top right, rgba(var(--bs-brand-accent-rgb), .05), transparent 24%),
    radial-gradient(circle at left top, rgba(var(--bs-primary-rgb), .11), transparent 34%),
    var(--bs-body-bg);
}

.iq-navbar,
.iq-navbar .nav,
.iq-navbar .navbar-collapse:not(.offcanvas-collapse),
.dropdown-menu,
.popover,
.offcanvas,
.modal-content{
  background: var(--bs-card-bg);
}

.iq-navbar{
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: none;
}

.iq-navbar .nav{
  border: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="light"] .iq-navbar .nav{
  background: rgba(255,255,255,.52);
}

[data-bs-theme="dark"] .iq-navbar .nav{
  background: rgba(31,39,48,.72);
}

.card,
.form-control,
.form-select,
.input-group-text,
.table thead th{
  background-color: var(--bs-card-bg);
}

.form-control,
.form-select,
.input-group-text{
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.table thead th{
  color: var(--bs-secondary-color);
}

.badge,
.rounded-pill{
  border-color: var(--bs-border-color);
}

/* Keep sidebar firmly in the dark structural 30% zone in both themes. */
.sidebar.sidebar-base{
  background: #1F2630 !important;
  border-right: 1px solid #2D3641 !important;
  z-index: 1050;
}

/* Fix scroll jump: vendor JS toggles fixed positioning + adds content padding.
   We keep the header sticky at all times so layout never reflows on scroll. */
.iq-navbar.navs-sticky,
.iq-navbar.navs-sticky.menu-sticky{
  position: sticky !important;
  top: 0;
  inset-inline: auto;
  width: 100% !important;
}

.main-content .content-inner.navbar-sticky-space{
  padding-top: 0 !important;
}

.navs-sticky.menu-sticky + .iq-navbar-header{
  margin-top: 0 !important;
}

@media(min-width: 1200px){
  .sidebar + .main-content .iq-navbar.navs-sticky,
  .sidebar + .main-content .iq-navbar.navs-sticky.menu-sticky,
  .sidebar.sidebar-boxed + .main-content .navs-sticky,
  .sidebar.sidebar-boxed + .main-content .navs-sticky.menu-sticky,
  .sidebar.sidebar-mini + .main-content .iq-navbar.navs-sticky.menu-sticky,
  .sidebar.sidebar-mini.sidebar-boxed + .main-content .iq-navbar.navs-sticky.menu-sticky{
    width: 100% !important;
  }
}

/* ==========================================================================
   Sidebar IA + alignment refinement
   ========================================================================== */

.sidebar .sidebar-list{
  padding: .4rem .7rem 1rem;
}

.sidebar .iq-main-menu{
  display: flex;
  flex-direction: column;
  gap: .28rem;
}

.sidebar-base .nav-item{
  margin-top: 0;
}

.sidebar-base .nav-item:not(.static-item){
  padding-left: 0;
}

.sidebar-base .nav-item .nav-link{
  min-height: 2.9rem;
  padding: .72rem .9rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  line-height: 1.1;
}

.sidebar-base .nav-item .nav-link .icon{
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 1.25rem;
}

.sidebar-base .nav-item .nav-link .item-name{
  margin-left: .95rem;
  font-size: .95rem;
  line-height: 1.2;
}

.sidebar-base .nav-item .nav-link .right-icon{
  margin-left: .75rem;
  flex: 0 0 auto;
}

.sidebar-base .nav-item.static-item{
  margin-top: .55rem;
}

.sidebar-base .nav-item .nav-link.static-item{
  min-height: auto;
  margin-bottom: .1rem;
  padding: .4rem .95rem .2rem;
}

.sidebar-base .nav-item.static-item .default-icon{
  font-size: .68rem;
  letter-spacing: .22rem;
  opacity: .84;
}

.sidebar .hr-horizontal{
  margin: .5rem .2rem;
  border-color: rgba(231,235,240,.08) !important;
}

.sidebar .sub-nav{
  margin-top: .15rem;
  padding-top: .1rem;
}

.sidebar .sub-nav .nav-link{
  min-height: 2.5rem;
  padding: .58rem .85rem .58rem 2.85rem;
}

.sidebar .sub-nav .nav-link .item-name{
  margin-left: .85rem;
  font-size: .91rem;
}

.sidebar .nav-link .badge{
  margin-left: auto;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .sidebar-list{
  padding-inline: .45rem;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item.static-item{
  display: none;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item:not(.static-item){
  padding-left: 0;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link{
  justify-content: center;
  padding: .5rem 0;
  min-height: 3rem;
  display: flex;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .icon{
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  margin: 0 auto;
  border-radius: .9rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .right-icon,
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .badge,
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .sub-nav{
  display: none !important;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .hr-horizontal{
  margin: .55rem .45rem;
}

/* ==========================================================================
   Sidebar icon rendering hardening
   Fix: keep SVG icons visible in normal and mini sidebar states.
   ========================================================================== */

.sidebar .nav-link .icon,
.sidebar .nav-link .right-icon{
  color: inherit;
  line-height: 0;
  vertical-align: middle;
  transform: translateZ(0);
}

.sidebar .nav-link .icon svg{
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  flex: 0 0 auto;
  color: currentColor !important;
  fill: currentColor;
  opacity: 1 !important;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform: none !important;
}

.sidebar .nav-link .right-icon svg{
  width: 1rem;
  height: 1rem;
  display: block;
  flex: 0 0 auto;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  opacity: .92 !important;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform: none;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link{
  align-items: center;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .icon{
  color: var(--ds-sidebar-text-strong) !important;
  background: transparent;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .icon svg{
  width: 1.2rem;
  height: 1.2rem;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link.active .icon,
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:hover .icon{
  color: var(--ds-sidebar-text-strong) !important;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .icon *,
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link .icon svg *{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sidebar collapse: keep the panel and page moving as one short animation. */
.sidebar.sidebar-base{
  --sidebar-transition-duration: 220ms;
}

.sidebar.sidebar-base,
.sidebar.sidebar-base + .main-content,
.sidebar.sidebar-base .navbar-brand .logo-title,
.sidebar.sidebar-base .nav-item .nav-link:not(.static-item) span{
  transition-duration: 220ms !important;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1) !important;
}

/* Mini state: the active surface belongs to the button and stays square. */
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item){
  box-sizing: border-box;
  width: 2.75rem !important;
  min-width: 2.75rem;
  max-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  margin-inline: auto;
  padding: 0 !important;
  border-radius: .7rem !important;
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr;
  place-items: center;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item form{
  display: flex !important;
  justify-content: center;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item) > .item-name,
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item) > .right-icon,
.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item) > .badge{
  display: none !important;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item) > .icon{
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  border-radius: inherit;
}

.sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item).active{
  box-shadow: inset 3px 0 0 rgba(234,146,22,.82) !important;
}

/* ==========================================================================
   Theme system hardening: semantic app tokens + Bootstrap utility bridge
   ========================================================================== */

:root,
[data-bs-theme="light"]{
  color-scheme: light;

  --app-bg: var(--bs-body-bg);
  --app-surface: var(--bs-card-bg);
  --app-surface-2: var(--bs-tertiary-bg);
  --app-surface-3: var(--bs-secondary-bg);
  --app-surface-hover: rgba(var(--bs-primary-rgb), .055);

  --app-text: var(--bs-body-color);
  --app-text-muted: var(--bs-secondary-color);
  --app-text-soft: var(--bs-tertiary-color);

  --app-border: var(--bs-border-color);
  --app-border-soft: var(--bs-border-color-translucent);

  --app-input-bg: var(--bs-tertiary-bg);
  --app-input-text: var(--bs-body-color);
  --app-input-border: var(--bs-border-color);
  --app-placeholder: var(--bs-tertiary-color);

  --app-card-bg: var(--bs-card-bg);
  --app-dropdown-bg: var(--bs-card-bg);
  --app-modal-bg: var(--bs-card-bg);
  --app-table-bg: var(--bs-card-bg);
  --app-table-head-bg: var(--bs-tertiary-bg);
  --app-table-hover-bg: rgba(var(--bs-primary-rgb), .055);

  --app-skeleton-bg: rgba(58, 71, 80, .10);
  --app-skeleton-highlight: rgba(255,255,255,.62);
}

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

  --app-bg: #151B22;
  --app-surface: #1F2730;
  --app-surface-2: #1D252E;
  --app-surface-3: #26303A;
  --app-surface-hover: rgba(238,238,238,.055);

  --app-text: #D8DDE3;
  --app-text-muted: rgba(238,238,238,.74);
  --app-text-soft: rgba(238,238,238,.58);

  --app-border: #303A45;
  --app-border-soft: rgba(238,238,238,.11);

  --app-input-bg: #1D252E;
  --app-input-text: #E4E8ED;
  --app-input-border: #3A4652;
  --app-placeholder: rgba(238,238,238,.56);

  --app-card-bg: #1F2730;
  --app-dropdown-bg: #202832;
  --app-modal-bg: #202832;
  --app-table-bg: #1F2730;
  --app-table-head-bg: #26303A;
  --app-table-hover-bg: rgba(238,238,238,.055);

  --app-skeleton-bg: rgba(255,255,255,.08);
  --app-skeleton-highlight: rgba(255,255,255,.14);

  --bs-light: var(--app-surface-3);
  --bs-light-rgb: 38, 48, 58;
  --bs-dark: #E4E8ED;
  --bs-dark-rgb: 228, 232, 237;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-text-muted);
  --bs-tertiary-color: var(--app-text-soft);
  --bs-card-bg: var(--app-card-bg);
  --bs-card-color: var(--app-text);
  --bs-card-border-color: var(--app-border);
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: var(--app-border-soft);
  --bs-emphasis-color: #F0F3F6;
  --bs-emphasis-color-rgb: 240, 243, 246;
}

html,
body,
#app,
.main-content,
.content-inner,
.section,
.page-content{
  background-color: var(--app-bg);
  color: var(--app-text);
}

.app-surface,
.bg-app-surface{
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

.app-surface-2,
.bg-app-surface-2{
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

.text-app-muted{ color: var(--app-text-muted) !important; }
.text-app-soft{ color: var(--app-text-soft) !important; }

.text-muted,
.text-secondary,
.text-body-secondary,
.small.text-muted,
.small.text-secondary{
  color: var(--app-text-muted) !important;
}

.text-body,
.text-reset{
  color: var(--app-text) !important;
}

.card,
.list-group,
.list-group-item,
.accordion,
.accordion-item,
.accordion-button,
.modal-content,
.offcanvas,
.dropdown-menu,
.popover,
.toast{
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

.accordion-button:not(.collapsed),
.dropdown-item:hover,
.dropdown-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus{
  background-color: var(--app-surface-hover);
  color: var(--app-text);
}

.dropdown-item,
.dropdown-header,
.popover-body,
.popover-header,
.modal-header,
.modal-body,
.modal-footer,
.offcanvas-header,
.offcanvas-body{
  color: var(--app-text);
  border-color: var(--app-border);
}

.dropdown-divider{ border-color: var(--app-border); }

.form-control,
.form-select,
.form-check-input,
.input-group-text{
  background-color: var(--app-input-bg);
  color: var(--app-input-text);
  border-color: var(--app-input-border);
}

.form-control::placeholder,
textarea.form-control::placeholder{
  color: var(--app-placeholder);
  opacity: 1;
}

.form-control:focus,
.form-select:focus{
  background-color: var(--app-input-bg);
  color: var(--app-input-text);
  border-color: rgba(var(--bs-primary-rgb), .45);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled{
  background-color: var(--app-surface-3);
  color: var(--app-text-soft);
  border-color: var(--app-border);
  opacity: 1;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--app-input-text);
  box-shadow: 0 0 0 1000px var(--app-input-bg) inset;
  caret-color: var(--app-input-text);
}

.table{
  --bs-table-bg: var(--app-table-bg);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-surface-2);
  --bs-table-striped-color: var(--app-text);
  --bs-table-hover-bg: var(--app-table-hover-bg);
  --bs-table-hover-color: var(--app-text);
  color: var(--app-text);
  border-color: var(--app-border);
}

.table-light,
.table > thead,
.table thead th{
  --bs-table-bg: var(--app-table-head-bg);
  --bs-table-color: var(--app-text-muted);
  background-color: var(--app-table-head-bg) !important;
  color: var(--app-text-muted) !important;
  border-color: var(--app-border) !important;
}

.page-link{
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

.page-item.disabled .page-link{
  background-color: var(--app-surface-2);
  color: var(--app-text-soft);
  border-color: var(--app-border);
}

.btn-light,
.btn-outline-dark{
  --bs-btn-color: var(--app-text);
  --bs-btn-bg: var(--app-surface-2);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-3);
  --bs-btn-hover-border-color: var(--app-border);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-3);
  --bs-btn-active-border-color: var(--app-border);
}

.btn-outline-secondary{
  --bs-btn-color: var(--app-text-muted);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-3);
  --bs-btn-hover-border-color: var(--app-border);
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: var(--app-surface-3);
  --bs-btn-active-border-color: var(--app-border);
  --bs-btn-disabled-color: var(--app-text-soft);
  --bs-btn-disabled-border-color: var(--app-border);
}

[data-bs-theme="dark"] .btn-outline-primary{
  --bs-btn-color: #9DB7FF;
  --bs-btn-border-color: rgba(157, 183, 255, .42);
  --bs-btn-hover-color: #111820;
  --bs-btn-hover-bg: #9DB7FF;
  --bs-btn-hover-border-color: #9DB7FF;
  --bs-btn-active-color: #111820;
  --bs-btn-active-bg: #9DB7FF;
  --bs-btn-active-border-color: #9DB7FF;
  --bs-btn-disabled-color: rgba(157, 183, 255, .58);
  --bs-btn-disabled-border-color: rgba(157, 183, 255, .24);
  opacity: 1;
}

[data-bs-theme="dark"] .btn-outline-secondary{
  --bs-btn-color: #B8C2CE;
  --bs-btn-border-color: #44515F;
  --bs-btn-hover-color: #F1F4F7;
  --bs-btn-hover-bg: #303A45;
  --bs-btn-hover-border-color: #566574;
  --bs-btn-active-color: #F1F4F7;
  --bs-btn-active-bg: #35404C;
  --bs-btn-active-border-color: #5D6B7A;
  --bs-btn-disabled-color: rgba(184, 194, 206, .58);
  --bs-btn-disabled-border-color: rgba(184, 194, 206, .24);
  opacity: 1;
}

.btn-dark{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 84%, #000 16%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 76%, #000 24%);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn{
  opacity: 1;
}

[data-bs-theme="dark"] .btn:disabled,
[data-bs-theme="dark"] .btn.disabled,
[data-bs-theme="dark"] fieldset:disabled .btn{
  color: var(--app-text-soft);
  border-color: rgba(184, 194, 206, .24);
}

.text-bg-light,
.badge.bg-light,
.alert-light,
.bg-light,
.bg-white{
  background-color: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

.text-dark,
.text-black{
  color: var(--app-text) !important;
}

.border-light{
  border-color: var(--app-border) !important;
}

.shadow,
.shadow-sm,
.shadow-lg{
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.ratio.bg-light,
.order-card-media,
.order-card-media--empty{
  background-color: var(--app-surface-2) !important;
}

.skeleton,
.skeleton-line,
.skeleton-avatar,
.skeleton-circle,
.skeleton-chip{
  background: var(--app-skeleton-bg);
}

.skeleton::after,
.skeleton-line::after,
.skeleton-avatar::after,
.skeleton-circle::after,
.skeleton-chip::after{
  background: linear-gradient(90deg, transparent, var(--app-skeleton-highlight), transparent);
}

.skeleton-card{
  background: var(--app-surface);
  border-color: var(--app-border);
}

.modal .btn-close,
.offcanvas .btn-close{
  filter: none;
}

[data-bs-theme="dark"] .modal .btn-close,
[data-bs-theme="dark"] .offcanvas .btn-close{
  filter: invert(1) grayscale(100%);
}

[data-bs-theme="dark"] .navbar-light,
[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-bs-theme="dark"] .iq-navbar,
[data-bs-theme="dark"] .iq-navbar .nav-link,
[data-bs-theme="dark"] .iq-navbar .dropdown-toggle{
  color: var(--app-text) !important;
}

svg:not([fill]),
svg [fill="black"],
svg [fill="#000"],
svg [fill="#000000"]{
  fill: currentColor;
}

svg [stroke="black"],
svg [stroke="#000"],
svg [stroke="#000000"]{
  stroke: currentColor;
}

/* Page-level dark patches for inline page styles loaded after the global layer. */
[data-bs-theme="dark"] .payment-status--paid,
[data-bs-theme="dark"] .order-status-pill--active,
[data-bs-theme="dark"] .support-status--open{
  color: #75D99F;
}

[data-bs-theme="dark"] .payment-status--pending,
[data-bs-theme="dark"] .order-status-pill--draft{
  color: #F5C866;
}

[data-bs-theme="dark"] .payment-status--failed{
  color: #F28B97;
}