html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* =====================================================
   Bilingual / RTL support
   ===================================================== */

/* Arabic font — applied when html[dir=rtl].
   Fallback chain ensures Arabic glyphs always render even if Cairo (Google Fonts)
   fails to load in a restricted-network environment. */
[dir="rtl"] body,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .btn,
[dir="rtl"] label,
[dir="rtl"] th,
[dir="rtl"] td {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* English font — applied when html[dir=ltr] (or no dir) */
[dir="ltr"] body,
[dir="ltr"] .form-control,
[dir="ltr"] .form-select,
[dir="ltr"] .btn,
[dir="ltr"] label,
[dir="ltr"] th,
[dir="ltr"] td {
  font-family: 'Inter', sans-serif;
}

/* RTL text alignment */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left  !important; }

/* Sidebar / drawer — logical inset */
[dir="rtl"] .drawer.drawer-start {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
[dir="rtl"] .drawer.drawer-end {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

/* Input group icon positioning */
[dir="rtl"] .position-relative .position-absolute.ms-4 {
  inset-inline-start: 1rem;
  inset-inline-end: auto;
}

/* Toast / alert direction */
[dir="rtl"] .toast-container {
  inset-inline-start: 1rem;
  inset-inline-end: auto;
}

/* Form validation icons — flip for RTL */
[dir="rtl"] .form-control.is-valid,
[dir="rtl"] .form-control.is-invalid {
  background-position: left calc(0.375em + 0.1875rem) center;
  padding-inline-end: calc(1.5em + 0.75rem);
  padding-inline-start: 0.75rem;
}

/* Table cell alignment */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
  text-align: right;
}

/* Breadcrumb separator — RTL reverses the slash and its spacing */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  float: inline-end;
  padding-inline-end: 0.5rem;
  padding-inline-start: 0;
}

/* Dropdown menu alignment */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* Modal header close button */
[dir="rtl"] .modal-header .btn-close {
  margin-inline-start: auto;
  margin-inline-end: -0.5rem;
}

/* Swiper RTL (already supported natively via dir attribute, kept for override safety) */
[dir="rtl"] .swiper-wrapper {
  flex-direction: row-reverse;
}

/* Language switcher button styling */
.lang-switcher {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  transition: background-color 0.2s;
}
.lang-switcher:hover {
  background-color: rgba(255,255,255,0.1);
}

/* =====================================================
   ACTVET Portal — Enhanced Design System
   ===================================================== */

:root {
  --act-gold:      #ac8440;
  --act-gold-dark: #916d31;
  --act-gold-glow: rgba(172,132,64,.15);
  --act-sidebar:   #1c1407;
  --act-body-bg:   #f4f6fb;
  --act-border:    #e6e8f0;
  --act-text:      #1a1d2e;
  --act-muted:     #8b91a8;
  --act-success:   #3dc98a;
  --act-shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --act-shadow-lg: 0 8px 32px rgba(0,0,0,.14);
}

/* ── Page body background ── */
#kt_app_content { background: var(--act-body-bg); }
.app-footer {
  border-top: 1px solid var(--act-border) !important;
  background: #fff !important;
}

/* ── Header: user trigger (name + avatar) ── */
.act-user-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px; cursor: pointer;
  transition: background 0.15s;
  border: 1.5px solid transparent;
}
.act-user-trigger:hover { background: var(--act-body-bg); border-color: var(--act-border); }
.act-hdr-avatar {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--act-gold) 0%, #c9993f 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(172,132,64,.35);
  overflow: hidden;
  font-family: 'Inter', 'Cairo', sans-serif;
}
.act-hdr-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.act-hdr-avatar-lg { width: 46px; height: 46px; font-size: 16px; border-radius: 10px; }
.act-hdr-user-info { min-width: 0; max-width: 160px; }
.act-hdr-user-name { font-size: 12.5px; font-weight: 700; color: var(--act-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-hdr-user-role { font-size: 10.5px; color: var(--act-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Header: compact height (overrides Metronic's 74px default) ──
   Reducing to 55px desktop / 50px mobile keeps the wrapper margin-top
   in sync and prevents the fixed header from covering body cards. */
@media (min-width: 992px) {
  :root {
    --bs-app-header-height: 55px !important;
    --bs-app-header-height-actual: 55px !important;
  }
}
@media (max-width: 991.98px) {
  :root {
    --bs-app-header-height: 50px !important;
  }
}

/* ── Header: always opaque so content never shows through ── */
.app-header {
  background-color: #ffffff !important;
  box-shadow: var(--act-shadow-sm) !important;
}
[data-bs-theme="dark"] .app-header {
  background-color: #1c1c2e !important;
  box-shadow: 0 1px 0 var(--act-border) !important;
}

/* ── Header: reduce heading font-size to fit compact height ── */
#kt_app_header_wrapper .page-heading {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* ── Sidebar logo: constrain to compact header height ── */
#kt_app_sidebar_logo .app-sidebar-logo-default {
  height: 40px !important;
  width: auto !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
}

/* ── Language toggle pill ── */
.act-lang-toggle {
  display: flex; align-items: center; gap: 0;
  background: var(--act-body-bg);
  border: 1.5px solid var(--act-border);
  border-radius: 20px;
  padding: 0 2px;
  height: 32px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: 'Inter', 'Cairo', sans-serif;
}
.act-lang-toggle:hover {
  border-color: var(--act-gold);
  box-shadow: 0 0 0 3px rgba(172,132,64,.1);
}
.act-lang-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px;
  border-radius: 18px;
  font-size: 11.5px; font-weight: 600;
  color: var(--act-muted);
  padding: 0 6px;
  transition: background 0.15s, color 0.15s;
  letter-spacing: .3px;
}
.act-lang-seg.act-lang-active {
  background: var(--act-gold);
  color: #fff;
}
.act-lang-divider {
  width: 1px; height: 14px;
  background: var(--act-border);
  flex-shrink: 0;
}

/* =====================================================
   RTL — Icon Font Protection
   KeenIcons .path1/.path2 spans have NO explicit font-family
   on their ::before pseudo-elements — they rely on inheritance
   from the parent .ki-duotone element (font-family:keenicons-duotone).
   Any direct CSS rule targeting <span> that uses !important will
   break this inheritance chain and cause empty-square glyphs.
   These rules restore the correct icon font in RTL mode and
   ensure icon containers always render left-to-right internally.
   ===================================================== */

/* Force icon containers to LTR regardless of document direction.
   .ki-duotone already has direction:ltr in plugins.bundle.css,
   but explicit enforcement here guards against specificity battles. */
[dir="rtl"] .ki-duotone,
[dir="rtl"] .ki-outline,
[dir="rtl"] .ki-solid,
[dir="rtl"] [class*=" ki-"],
[dir="rtl"] [class^="ki-"] {
  direction: ltr !important;
}

/* Restore icon font on duotone path spans.
   Any upstream rule that sets font-family !important on <span>
   will be overridden here for icon path spans specifically. */
[dir="rtl"] .ki-duotone .path1,
[dir="rtl"] .ki-duotone .path2,
[dir="rtl"] .ki-duotone .path3,
[dir="rtl"] .ki-duotone .path4,
[dir="rtl"] .ki-duotone .path5,
[dir="rtl"] .ki-duotone .path6,
[dir="rtl"] .ki-duotone .path7,
[dir="rtl"] .ki-duotone .path8,
[dir="rtl"] .ki-duotone .path9,
[dir="rtl"] .ki-duotone .path10 {
  font-family: keenicons-duotone !important;
  direction: ltr !important;
}

/* path2 uses position:absolute;left:0 — protect in RTL */
[dir="rtl"] .ki-duotone .path2::before,
[dir="rtl"] .ki-duotone .path3::before,
[dir="rtl"] .ki-duotone .path4::before,
[dir="rtl"] .ki-duotone .path5::before {
  left: 0 !important;
  right: auto !important;
}

/* Outline & solid icon pseudo-elements */
[dir="rtl"] .ki-outline::before {
  font-family: keenicons-outline !important;
  direction: ltr !important;
}
[dir="rtl"] .ki-solid::before {
  font-family: keenicons-solid !important;
  direction: ltr !important;
}

/* =====================================================
   RTL — Layout & Component Fixes
   ===================================================== */

/* ── Sidebar: collapse-toggle arrow direction ──────── */
/* Handled in section 14 with proper LTR/RTL logic — no override here. */

/* ── Sidebar: RTL position ───────────────────────────
   Metronic hard-codes `left: 0` on .app-sidebar.
   In RTL the sidebar must sit on the right side.    */
[dir="rtl"] .app-sidebar {
  left:  auto !important;
  right: 0    !important;
}

/* ── App-wrapper: cancel Metronic's physical margin-left ──
   _Layout.cshtml sets margin-inline-start (= margin-right
   in RTL) to reserve space beside the right-side sidebar.
   Metronic's own margin-left would add a duplicate left
   indent, so we zero it.                             */
[dir="rtl"] [data-kt-app-sidebar-fixed="true"] .app-wrapper {
  margin-left: 0 !important;
}

/* ── App-header: cancel Metronic's physical left offset ──
   _Layout.cshtml sets inset-inline-start (= right in RTL)
   so the header clears the right-side sidebar.
   Metronic's left: sidebar-width would also push the header
   from the left, squeezing it — cancel it here.     */
[dir="rtl"] [data-kt-app-header-fixed="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] .app-header,
[dir="rtl"] [data-kt-app-header-fixed="true"][data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] .app-header {
  left: 0 !important;
}

/* ── Sidebar logo: border separates logo from sidebar body ── */
/* border-inline-end is already used in the HTML style attribute — no CSS needed */

/* ── Header user trigger: swap inline padding ─────── */
[dir="rtl"] .act-user-trigger {
  padding-inline-start: 8px;
  padding-inline-end:   4px;
}

/* ── Header user dropdown: avatar spacing ────────── */
/* .me-5 on .symbol is Bootstrap logical — already flips in RTL */

/* ── Header breadcrumb separator ────────────────── */
/* Separator uses a neutral bullet <span> (not ::before pseudo-element)
   so no CSS direction fix needed — it is direction-neutral. */

/* ── Header dropdown menus ──────────────────────── */
/* data-kt-menu-placement is set conditionally in Razor (_Header.cshtml)
   so the submenu already opens on the correct side per language. */

/* ── App-navbar items: Bootstrap logical spacing ── */
/* ms-* / me-* / ps-* / pe-* are Bootstrap 5 logical utilities —
   they automatically flip in RTL via margin-inline-start/end.
   No additional override is needed. */

/* ── Footer ─────────────────────────────────────── */
[dir="rtl"] .app-footer .text-gray-900 {
  text-align: right;
}

/* ── Tables: header text alignment ─────────────── */
/* Already covered above by [dir="rtl"] .table th/td rule */

/* ── DataTables: pagination direction ───────────── */
[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
  float: inline-start;
}
[dir="rtl"] .dataTables_wrapper .dataTables_info {
  float: inline-end;
}
[dir="rtl"] .dataTables_wrapper .dataTables_filter,
[dir="rtl"] .dataTables_wrapper .dataTables_length {
  float: inline-end;
  text-align: end;
}

/* ── Select / dropdown arrow: flip background-position ── */
[dir="rtl"] .form-select {
  background-position: left 0.75rem center;
  padding-inline-start: 2.25rem;
  padding-inline-end:   0.75rem;
}

/* ── Input group icons inside position-relative wrappers ── */
[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .form-select:not(:first-child) {
  border-start-start-radius: var(--bs-border-radius) !important;
  border-end-start-radius:   var(--bs-border-radius) !important;
  border-start-end-radius:   0 !important;
  border-end-end-radius:     0 !important;
}
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .form-select:not(:last-child) {
  border-start-end-radius:   var(--bs-border-radius) !important;
  border-end-end-radius:     var(--bs-border-radius) !important;
  border-start-start-radius: 0 !important;
  border-end-start-radius:   0 !important;
}

/* ── Card / panel header actions ────────────────── */
/* Bootstrap logical classes handle this; no override needed */

/* ── Notification toasts ─────────────────────────── */
/* Already covered by [dir="rtl"] .toast-container rule above */

/* ── Sidebar menu arrow (expand/collapse) ─────────── */
/* Metronic's .menu-arrow rotates with CSS transition.
   In RTL the initial direction should be mirrored. */
[dir="rtl"] .menu-arrow {
  transform: rotate(180deg);
}
[dir="rtl"] .menu-item.show > .menu-link .menu-arrow {
  transform: rotate(270deg);
}

/* ── Sidebar submenu indentation ────────────────── */
/* .menu-sub-indention uses padding-inline-start in Metronic v3+;
   override only if the theme uses physical padding-left. */
[dir="rtl"] .menu-sub-indention .menu-sub:not(.menu-sub-dropdown) {
  padding-inline-start: 1.5rem;
  padding-inline-end:   0;
}

/* ── Reduced-motion safety ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [dir="rtl"] #act_sidebar_toggle i {
    transition: none;
  }
}

/* =====================================================
   Dark Mode — ACTVET Portal custom overrides
   Metronic 8 + Bootstrap 5.3 handle all framework
   components (tables, cards, forms, modals, dropdowns,
   inputs, badges, pagination, etc.) natively when
   [data-bs-theme="dark"] is set on <html>.

   These rules cover only the custom act-* additions
   that Metronic does not know about.
   ===================================================== */

/* ── 1. Swap custom palette variables ─────────────────
   Because most act-* components reference these tokens,
   they automatically gain dark colours at zero extra cost. */
[data-bs-theme="dark"] {
  --act-body-bg:   #151521;          /* page & content area bg   */
  --act-border:    #2d2d3f;          /* all borders               */
  --act-text:      #cdcfe5;          /* primary text              */
  --act-muted:     #787ea6;          /* secondary / muted text    */
  --act-shadow-sm: 0 1px 4px rgba(0,0,0,.30);
  --act-shadow-lg: 0 8px 32px rgba(0,0,0,.55);
  --act-gold-glow: rgba(172,132,64,.10);
}

/* ── 2. Footer ─────────────────────────────────────────
   .app-footer has background:#fff !important hard-coded;
   must override explicitly — CSS variables can't reach it. */
[data-bs-theme="dark"] .app-footer {
  background:         #1c1c2e !important;
  border-top-color:   var(--act-border) !important;
}
[data-bs-theme="dark"] .app-footer .text-gray-900,
[data-bs-theme="dark"] .app-footer .text-gray-800,
[data-bs-theme="dark"] .app-footer a {
  color: var(--act-text) !important;
}
[data-bs-theme="dark"] .app-footer .text-muted {
  color: var(--act-muted) !important;
}

/* ── 3. Header shadow: replace light drop-shadow ───── */
[data-bs-theme="dark"] .app-header {
  box-shadow: 0 1px 0 var(--act-border) !important;
}

/* ── 4. Language toggle pill ──────────────────────── */
/* background and border already reference --act-body-bg /
   --act-border via CSS variables — they auto-darken.
   Only the divider line needs an explicit override.    */
[data-bs-theme="dark"] .act-lang-divider {
  background: var(--act-border);
}

/* ── 5. RTL footer text alignment — already in place ─ */
/* [dir="rtl"] .app-footer .text-gray-900 { text-align:right }
   is above; no additional dark-mode rule needed.       */

/* =====================================================
   RTL — Icon Alignment & Spacing
   Additional per-component icon placement fixes for RTL.
   ===================================================== */

/* ── Input-group icon positioning ─────────────────────
   The existing rule above covers .position-absolute.ms-4
   via inset-inline-start. This supplements it for any
   icon using physical left: 0 that needs to move to right. */
[dir="rtl"] .input-group-text:first-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--bs-border-radius);
  border-end-end-radius: var(--bs-border-radius);
}
[dir="rtl"] .input-group-text:last-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: var(--bs-border-radius);
  border-end-start-radius: var(--bs-border-radius);
}

/* ── Buttons: icons before text in DOM appear on the
   correct visual side for both directions because
   Bootstrap flex reverses in RTL. No re-ordering needed. */

/* ── DataTables sort icons ────────────────────────────
   DataTables renders sort arrows via ::before/::after on <th>.
   In RTL mode, align them to the start (right) of the header. */
[dir="rtl"] table.dataTable thead .sorting::before,
[dir="rtl"] table.dataTable thead .sorting_asc::before,
[dir="rtl"] table.dataTable thead .sorting_desc::before,
[dir="rtl"] table.dataTable thead .sorting_asc_disabled::before,
[dir="rtl"] table.dataTable thead .sorting_desc_disabled::before {
  right: auto !important;
  left: 0.5rem !important;
}
[dir="rtl"] table.dataTable thead .sorting::after,
[dir="rtl"] table.dataTable thead .sorting_asc::after,
[dir="rtl"] table.dataTable thead .sorting_desc::after,
[dir="rtl"] table.dataTable thead .sorting_asc_disabled::after,
[dir="rtl"] table.dataTable thead .sorting_desc_disabled::after {
  right: auto !important;
  left: 0 !important;
}

/* ── DataTables: column headers padding (room for sort icon) */
[dir="rtl"] table.dataTable thead th {
  padding-right: 0.75rem !important;
  padding-left: 1.5rem !important;
}

/* ── Metronic notice/alert icons ──────────────────────
   .notice uses flex; icon (first child) appears on the
   visual start. With dir=rtl this is the right side — correct. */

/* ── Card header actions ──────────────────────────────
   .card-toolbar is a flex row; with dir=rtl the toolbar
   items naturally move to the left side. No override needed. */

/* ── Sidebar: ensure icon and text spacing is correct ── */
[dir="rtl"] .menu-icon {
  margin-inline-end: 0.5rem;
  margin-inline-start: 0;
}
[dir="rtl"] .menu-title {
  text-align: right;
}

/* ── Breadcrumb bullet separator: keep neutral appearance ── */
[dir="rtl"] .breadcrumb-item .bullet {
  display: inline-block;
}

/* ── Notification / badge: pin to correct corner ─────── */
[dir="rtl"] .badge-circle,
[dir="rtl"] .position-absolute.translate-middle {
  right: auto;
  left: 0;
}

/* ── SVG icon flipping: directional SVG arrows (chevrons,
   pagination prev/next) should mirror in RTL.
   Non-directional SVGs (logos, status icons) should not.
   Apply .svg-rtl-flip class manually to directional SVGs. */
[dir="rtl"] .svg-rtl-flip {
  transform: scaleX(-1);
}

/* ── Chevron / caret icons used for expand in cards ── */
[dir="rtl"] .ki-duotone.ki-arrow-right,
[dir="rtl"] .ki-outline.ki-arrow-right,
[dir="rtl"] .ki-duotone.ki-arrow-left,
[dir="rtl"] .ki-outline.ki-arrow-left,
[dir="rtl"] .ki-duotone.ki-double-right,
[dir="rtl"] .ki-outline.ki-double-right,
[dir="rtl"] .ki-duotone.ki-double-left,
[dir="rtl"] .ki-outline.ki-double-left,
[dir="rtl"] .ki-duotone.ki-black-left,
[dir="rtl"] .ki-outline.ki-black-left,
[dir="rtl"] .ki-duotone.ki-black-right,
[dir="rtl"] .ki-outline.ki-black-right,
[dir="rtl"] .ki-duotone.ki-black-left-line,
[dir="rtl"] .ki-outline.ki-black-left-line,
[dir="rtl"] .ki-duotone.ki-black-right-line,
[dir="rtl"] .ki-outline.ki-black-right-line,
[dir="rtl"] .ki-duotone.ki-left,
[dir="rtl"] .ki-outline.ki-left,
[dir="rtl"] .ki-duotone.ki-right,
[dir="rtl"] .ki-outline.ki-right {
  transform: scaleX(-1);
}

/* Sidebar toggle rotation is fully handled in section 14 with
   direction-aware LTR/RTL rules — no override needed here. */

/* ── Select arrow: already in the RTL Layout section above ─ */

/* ── Validation icons inside .form-control ─────────── */
[dir="rtl"] .form-control:not(.is-valid):not(.is-invalid) {
  background-position: right 0.75rem center;
}

/* ── Spinner / loading icon (dir-neutral, no transform) ─── */
/* .spinner-border and .spinner-grow are direction-neutral — no fix needed */

/* =====================================================
   ACTVET Portal — Sidebar Design v2
   Key changes from v1:
   · Deeper blue-black background (#12141c / #0d0f17)
   · Icon pill — each icon sits in a 34×34 rounded box
     that lights up differently on hover / open / active
   · Section labels get a gold hairline divider
   · Three-tier text hierarchy: dim → mid → bright
   · Active icon glows with box-shadow
   · Metronic JS handles accordion fully — no display override
   ===================================================== */

/* ── 1. Sidebar container ─────────────────────────────── */
#kt_app_sidebar {
  background: linear-gradient(160deg, #2a1e09 0%, #1c1407 55%, #221809 100%) !important;
  border-inline-end: 1px solid rgba(172, 132, 64, 0.12) !important;
  box-shadow: 2px 0 28px rgba(0, 0, 0, 0.55) !important;
  width: 265px !important;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── 2. Logo strip ────────────────────────────────────── */
#kt_app_sidebar_logo {
  background: #ffffff !important;
  border-bottom: 1px solid #e6e8f0 !important;
  border-inline-end: none !important;
  padding-inline-start: 16px !important;
  padding-inline-end: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo image sizes */
#kt_app_sidebar_logo .app-sidebar-logo-default {
  height: 36px !important;
  width: auto !important;
  object-fit: contain;
  display: inline-block !important;
}
#kt_app_sidebar_logo .app-sidebar-logo-minimize {
  display: none !important;
  height: 28px !important;
  width: auto !important;
  object-fit: contain;
}

/* Swap to mini-logo when collapsed; hover removes minimize attr so full logo restores naturally */
body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_logo .app-sidebar-logo-default {
  display: none !important;
}
body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_logo .app-sidebar-logo-minimize {
  display: inline-block !important;
}

/* ── 3. Sidebar toggle button ─────────────────────────── */
#act_sidebar_toggle {
  background: #c8941e !important;
  border: 2px solid #e0ac3c !important;
  box-shadow: 0 2px 8px rgba(200, 148, 30, 0.55) !important;
  width: 26px !important;
  height: 26px !important;
  z-index: 300 !important;
}
#act_sidebar_toggle:hover {
  background: #e0ac3c !important;
  box-shadow: 0 3px 12px rgba(200, 148, 30, 0.75) !important;
  transform: scale(1.08);
}
#act_sidebar_toggle i,
#act_sidebar_toggle i::before {
  color: #ffffff !important;
  font-size: 0.85rem !important;
}

/* ── 4. Section heading label + hairline divider ──────── */
.app-sidebar .menu-heading,
.app-sidebar .menu-content .menu-heading {
  color: rgba(200, 148, 30, 0.45) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
}
/* Flex row so the hairline line can fill remaining space */
.app-sidebar .menu-item.pt-5 .menu-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-inline: 12px !important;
}
.app-sidebar .menu-item.pt-5 .menu-content::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(200, 148, 30, 0.14);
  border-radius: 1px;
}

/* ── 5. Menu link base ────────────────────────────────── */
.app-sidebar .menu-link {
  border-radius: 8px !important;
  margin-block: 1px !important;
  margin-inline: 6px !important;
  padding: 5px 8px !important;
  gap: 0 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
}

/* ── 6. Icon pill ─────────────────────────────────────── */
.app-sidebar .menu-link .menu-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin-inline-end: 8px !important;
  margin-inline-start: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(172, 132, 64, 0.10) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .act-menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: rgba(255, 240, 210, 0.60) !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  transition: color 0.18s ease !important;
}

/* ── 7. Title ─────────────────────────────────────────── */
.app-sidebar .menu-title {
  color: rgba(255, 240, 210, 0.60) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  flex: 1 !important;
  transition: color 0.18s ease !important;
}

/* ── 8. Arrow ─────────────────────────────────────────── */
.app-sidebar .menu-arrow {
  color: rgba(255, 240, 210, 0.22) !important;
  transition: color 0.18s ease !important;
}

/* ── 9. Bullet dot (sub-items in _MenuItems) ──────────── */
.app-sidebar .menu-bullet {
  width: 20px !important;
  min-width: 20px !important;
  margin-inline-end: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-sidebar .menu-bullet .bullet {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(172, 132, 64, 0.35) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

/* ── 10. Hover ────────────────────────────────────────── */
.app-sidebar .menu-item:not(.here):not(.show) > .menu-link:hover {
  background: rgba(172, 132, 64, 0.10) !important;
  box-shadow: none !important;
}
.app-sidebar .menu-item:not(.here):not(.show) > .menu-link:hover .menu-icon {
  background: rgba(172, 132, 64, 0.20) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here):not(.show) > .menu-link:hover .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here):not(.show) > .menu-link:hover .act-menu-icon i {
  color: #e0ac3c !important;
}
.app-sidebar .menu-item:not(.here):not(.show) > .menu-link:hover .menu-title {
  color: rgba(255, 240, 210, 0.90) !important;
}
.app-sidebar .menu-item:not(.here):not(.show) > .menu-link:hover .menu-arrow {
  color: #c8941e !important;
}
.app-sidebar .menu-item:not(.here):not(.show) > .menu-link:hover .menu-bullet .bullet {
  background: #c8941e !important;
}

/* ── 11. Open accordion parent (.show) ───────────────── */
.app-sidebar .menu-item.show > .menu-link {
  background: rgba(172, 132, 64, 0.08) !important;
  box-shadow: none !important;
}
.app-sidebar .menu-item.show > .menu-link .menu-icon {
  background: rgba(172, 132, 64, 0.18) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .act-menu-icon i {
  color: #e0ac3c !important;
}
.app-sidebar .menu-item.show > .menu-link .menu-title {
  color: rgba(255, 240, 210, 0.88) !important;
  font-weight: 600 !important;
}
.app-sidebar .menu-item.show > .menu-link .menu-arrow {
  color: #c8941e !important;
}

/* ── 12. Active / current page (.here) ───────────────── */
.app-sidebar .menu-item.here > .menu-link {
  background: rgba(200, 148, 30, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 148, 30, 0.22) !important;
}
.app-sidebar .menu-item.here > .menu-link .menu-icon {
  background: rgba(200, 148, 30, 0.24) !important;
  box-shadow: 0 0 14px rgba(200, 148, 30, 0.22) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .act-menu-icon i {
  color: #e0ac3c !important;
}
.app-sidebar .menu-item.here > .menu-link .menu-title {
  color: #ecd88a !important;
  font-weight: 700 !important;
}
.app-sidebar .menu-item.here > .menu-link .menu-bullet .bullet {
  background: #e0ac3c !important;
  box-shadow: 0 0 6px rgba(224, 172, 60, 0.55) !important;
  transform: scale(1.5) !important;
}

/* Gold left-border active indicator — offset matches margin-inline: 6px */
.app-sidebar .menu-item.here > .menu-link::before {
  content: '';
  position: absolute;
  inset-inline-start: -6px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, #e0ac3c 0%, #c8941e 100%);
  border-radius: 0 3px 3px 0;
}
[dir="rtl"] .app-sidebar .menu-item.here > .menu-link::before {
  border-radius: 3px 0 0 3px;
}

/* ── 13. Submenu container ────────────────────────────── */
/* Metronic JS owns show/hide — no display override here */
.app-sidebar .menu-sub-accordion {
  background: transparent !important;
  padding-inline-start: 2px !important;
  border-inline-start: 1px solid rgba(200, 148, 30, 0.12) !important;
  margin-inline-start: 20px !important;
  margin-block: 1px !important;
  overflow: hidden !important;
}

/* ── 14. Collapsed sidebar (custom JS toggle, body[data-kt-app-sidebar-minimize="on"]) ──
   During hover-expand the JS removes data-kt-app-sidebar-minimize from body so none of
   these rules apply — Metronic's hiding CSS is also gone, so the menu renders naturally.
   The JS pins header/wrapper at 75 px via inline !important to prevent layout shift. ─── */

/* Sidebar CSS width — JS inline !important overrides this during hover-expand */
body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar {
  width: 75px !important;
}

/* Sidebar overlay z-index during hover (minimize attr is absent; hovering attr is present) */
body[data-kt-app-sidebar-hovering="on"] #kt_app_sidebar {
  z-index: 110 !important;
}

/* Toggle chevron — direction-aware rotation
   Icon is ki-black-left-line  (‹ points left by default)

   LTR (sidebar on left):
     expanded  → ‹  no rotation  (points toward sidebar left edge = "collapse")
     collapsed → ›  rotate 180°  (points right = "expand")

   RTL (sidebar on right):
     expanded  → ›  rotate 180°  (points toward sidebar right edge = "collapse")
     collapsed → ‹  no rotation  (points left toward content = "expand")
*/
#act_sidebar_toggle i {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
}
body[data-kt-app-sidebar-minimize="on"] #act_sidebar_toggle i {
  transform: rotate(180deg);
}
[dir="rtl"] #act_sidebar_toggle i {
  transform: rotate(180deg) !important;
}
[dir="rtl"] body[data-kt-app-sidebar-minimize="on"] #act_sidebar_toggle i {
  transform: rotate(0deg) !important;
}

/* Remove scroll-container horizontal margins so 75px is fully usable */
body[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_menu_scroll {
  margin-inline: 0 !important;
}

/* Collapsed icon: left-aligned with padding, no centering */
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-link {
  margin-inline: 0 !important;
  padding: 6px 8px !important;
}
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-link .menu-icon,
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-link .act-menu-icon {
  margin-inline-start: 8px !important;
  margin-inline-end: 0 !important;
  flex-shrink: 0;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: rgba(172, 132, 64, 0.14) !important;
  border-radius: 8px !important;
}

/* Icon colour in collapsed state — must beat Metronic's dark-sidebar specificity */
body[data-kt-app-sidebar-minimize="on"][data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .act-menu-icon i,
body[data-kt-app-sidebar-minimize="on"][data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: rgba(255, 240, 210, 0.75) !important;
  font-size: 1.4rem !important;
}

/* Hide text labels, arrows, and bullet dots */
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-title,
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-arrow,
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-bullet {
  display: none !important;
}

/* Hide open submenus — only top-level icons visible */
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-sub-accordion {
  display: none !important;
}

/* Section label: shrink padding, hide text */
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-item.pt-5 {
  padding-top: 8px !important;
}
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-item.pt-5 .menu-heading {
  display: none !important;
}
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-item.pt-5 .menu-content {
  padding-inline: 16px !important;
  gap: 0 !important;
}

/* Active indicator inside the narrower sidebar */
body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-item.here > .menu-link::before {
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  border-radius: 0 3px 3px 0;
}

/* Layout shift — header/wrapper at 75 px when collapsed.
   During hover the minimize attr is absent so these don't apply;
   JS pins them at 75 px via inline !important instead. */
@media (min-width: 992px) {
  body[data-kt-app-sidebar-minimize="on"] .app-header {
    inset-inline-start: 75px !important;
  }
  body[data-kt-app-sidebar-minimize="on"] .app-wrapper {
    margin-inline-start: 75px !important;
  }
}

/* Smooth transitions */
.app-header {
  transition: inset-inline-start 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.app-wrapper {
  transition: margin-inline-start 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── 15. Scrollbar ────────────────────────────────────── */
#kt_app_sidebar_menu_scroll::-webkit-scrollbar { width: 3px; }
#kt_app_sidebar_menu_scroll::-webkit-scrollbar-track { background: transparent; }
#kt_app_sidebar_menu_scroll::-webkit-scrollbar-thumb {
  background: rgba(200, 148, 30, 0.20);
  border-radius: 3px;
}
#kt_app_sidebar_menu_scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 148, 30, 0.40);
}

/* ── 16. Sidebar logout footer ────────────────────────── */
.act-sidebar-footer {
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

#act-logout-form { margin: 0; }

.act-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: start;
  transition: background 0.18s ease;
}
.act-logout-btn:hover {
  background: rgba(220, 53, 69, 0.12);
}
.act-logout-btn:hover .act-logout-icon {
  background: rgba(220, 53, 69, 0.20);
}
.act-logout-btn:hover .act-logout-icon i,
.act-logout-btn:hover .act-logout-label {
  color: #ff6b7a !important;
}

.act-logout-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.18s ease;
  flex-shrink: 0;
}
/* Override Metronic dark-sidebar base icon color */
.act-logout-icon i {
  color: #9ba4c7 !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  transition: color 0.18s ease !important;
}

.act-logout-label {
  color: #9ba4c7;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.18s ease;
}

/* Collapsed state */
body.act-sb-collapsed .act-sidebar-footer {
  padding: 10px 4px 14px;
}
body.act-sb-collapsed .act-logout-btn {
  justify-content: center;
  padding: 8px 4px;
  gap: 0;
}
body.act-sb-collapsed .act-logout-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
}
body.act-sb-collapsed .act-logout-icon i {
  color: #c8d0f0 !important;
  font-size: 1.4rem !important;
}
body.act-sb-collapsed .act-logout-label {
  display: none;
}