/* ==========================================================================
   INFINITY JOURNEY - MODERN ENTERPRISE CRM THEME
   Strict 17-Color Palette Specification:
     Primary blue        : #113D80
     Main text           : #131B2E
     Secondary text      : #434655
     Muted text          : #737686
     Borders             : #C3C6D7
     White surface       : #FFFFFF
     Light background    : #F2F3FF
     Highlight background: #EAEDFF
     Success green       : #059669
     Success light bg    : #D1FAE5
     Error red           : #BA1A1A
     Error light bg      : #FEE2E2
     Warning amber       : #F59E0B
     Warning light bg    : #FEF3C7
     Purple accent       : #6B38D4
     Pink accent         : #DB2777
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root,
[data-theme="light"],
[data-theme="dark"] {
  /* --- DESKTOP SIDEBAR SIZING CONSTANTS --- */
  --sidebar-width: 240px !important;
  --sidebar-collapsed-width: 48px !important;

  /* --- EXACT BRAND COLOR TOKENS --- */
  --ij-primary: #113D80;
  --ij-primary-hover: #0D2E60;
  --ij-primary-active: #092147;
  --ij-main-text: #131B2E;
  --ij-secondary-text: #434655;
  --ij-muted-text: #737686;
  --ij-border: #C3C6D7;
  --ij-surface-white: #FFFFFF;
  --ij-bg-light: #F2F3FF;
  --ij-bg-highlight: #EAEDFF;

  --ij-success-green: #059669;
  --ij-success-light: #D1FAE5;
  --ij-error-red: #BA1A1A;
  --ij-error-light: #FEE2E2;
  --ij-warning-amber: #F59E0B;
  --ij-warning-light: #FEF3C7;

  --ij-purple-accent: #6B38D4;
  --ij-pink-accent: #DB2777;

  /* --- FRAPPE v16 CORE CSS VARIABLES OVERRIDE --- */
  --font-stack: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --primary: var(--ij-primary);
  --primary-color: var(--ij-primary);
  --primary-hover: var(--ij-primary-hover);
  --primary-active: var(--ij-primary-active);
  
  --blue-50: var(--ij-bg-highlight);
  --blue-100: var(--ij-bg-light);
  --blue-200: #D8DEFA;
  --blue-500: var(--ij-primary);
  --blue-600: var(--ij-primary);
  --blue-700: var(--ij-primary-hover);
  --blue-800: var(--ij-primary-active);

  --text-color: var(--ij-main-text);
  --text-muted: var(--ij-secondary-text);
  --text-light: var(--ij-muted-text);
  --heading-color: var(--ij-main-text);
  --link-color: var(--ij-primary);

  --border-color: var(--ij-border);
  --dark-border-color: var(--ij-border);
  --outline-gray-1: var(--ij-border);
  --outline-gray-2: var(--ij-border);

  --bg-color: var(--ij-bg-light);
  --fg-color: var(--ij-surface-white);
  --surface-base: var(--ij-surface-white);
  --surface-sidebar: #0C1E3C;
  --desk-sidebar-bg: #0C1E3C;
  --surface-elevation-1: var(--ij-surface-white);
  --surface-elevation-2: var(--ij-surface-white);
  --surface-elevation-3: var(--ij-surface-white);

  --surface-gray-1: var(--ij-bg-light);
  --surface-gray-2: var(--ij-bg-highlight);
  --surface-gray-3: var(--ij-bg-highlight);

  --ink-gray-9: var(--ij-main-text);
  --ink-gray-8: var(--ij-main-text);
  --ink-gray-7: var(--ij-secondary-text);
  --ink-gray-6: var(--ij-secondary-text);
  --ink-gray-5: var(--ij-muted-text);
  --ink-gray-4: var(--ij-muted-text);

  --navbar-bg: var(--ij-surface-white);
  --control-bg: var(--ij-surface-white);
  --modal-bg: var(--ij-surface-white);
  --card-bg: var(--ij-surface-white);
  --awesomplete-hover-bg: var(--ij-bg-highlight);
  --fg-hover-color: var(--ij-bg-highlight);
  --dropdown-hover-bg: var(--ij-bg-highlight);
  --dropdown-hover-color: var(--ij-primary);

  --green-500: var(--ij-success-green);
  --green-600: var(--ij-success-green);
  --green-50: var(--ij-success-light);
  --green-100: var(--ij-success-light);

  --red-500: var(--ij-error-red);
  --red-600: var(--ij-error-red);
  --red-50: var(--ij-error-light);
  --red-100: var(--ij-error-light);

  --amber-500: var(--ij-warning-amber);
  --amber-600: var(--ij-warning-amber);
  --amber-50: var(--ij-warning-light);
  --amber-100: var(--ij-warning-light);
  --yellow-500: var(--ij-warning-amber);
  --yellow-50: var(--ij-warning-light);

  --radius: 6px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & INTERACTIVE FOUNDATIONS
   ========================================================================== */
body {
  font-family: var(--font-stack) !important;
  color: var(--ij-main-text) !important;
  background-color: var(--ij-bg-light) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .page-title, .title-text {
  color: var(--ij-main-text) !important;
  font-family: var(--font-stack) !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}

a {
  color: var(--ij-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--ij-primary-hover);
  text-decoration: underline;
}

.text-primary {
  color: var(--ij-primary) !important;
}

/* ==========================================================================
   DESK NAVBAR (Modern Top Chrome)
   ========================================================================== */
.navbar {
  position: relative;
  background: var(--ij-surface-white) !important;
  border-bottom: 1px solid var(--ij-border) !important;
  box-shadow: 0 1px 3px rgba(17, 61, 128, 0.05) !important;
}

.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--ij-primary) 0%, #1d52a2 40%, var(--ij-purple-accent) 75%, var(--ij-pink-accent) 100%);
  z-index: 1050;
}

.navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  text-decoration: none !important;
}

.navbar-brand .infinity-nav-logo {
  height: auto !important;
  max-height: 30px !important;
  max-width: 210px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.navbar-brand:hover .infinity-nav-logo {
  opacity: 0.92 !important;
  transform: translateY(-0.5px);
}

@media (max-width: 768px) {
  .navbar .navbar-brand {
    padding: 0 8px !important;
  }
  .navbar-brand .infinity-nav-logo {
    max-height: 24px !important;
    max-width: 140px !important;
  }
}

/* Modern Pill-Shaped Command Search Bar */
.search-bar,
.navbar .search-bar,
.desktop-search-wrapper.search-bar,
.search-widget-wrapper.search-bar,
#small-search-button.search-bar,
.standard-items-section .search-bar {
  border-radius: 22px !important;
  background: var(--ij-surface-white) !important;
  border: 1.5px solid var(--ij-border) !important;
  padding: 4px 12px 4px 14px !important;
  min-height: 36px !important;
  max-width: 320px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-shadow: 0 1px 4px rgba(17, 61, 128, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

#small-search-button.search-bar.hidden {
  display: inline-flex !important;
}

.search-bar:hover,
#small-search-button.search-bar:hover,
.navbar .search-bar:hover {
  border-color: var(--ij-primary) !important;
  box-shadow: 0 2px 8px rgba(17, 61, 128, 0.08) !important;
}

.search-bar:focus-within,
.navbar .search-bar:focus-within,
#small-search-button.search-bar:focus {
  border-color: var(--ij-primary) !important;
  box-shadow: 0 0 0 3.5px rgba(17, 61, 128, 0.14), 0 4px 14px rgba(17, 61, 128, 0.08) !important;
  background: var(--ij-surface-white) !important;
}

.search-bar input,
.navbar .search-bar input {
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  color: var(--ij-main-text) !important;
  font-family: var(--font-stack) !important;
  font-weight: 500 !important;
  padding-left: 6px !important;
}

.search-bar input::placeholder,
.navbar .search-bar input::placeholder,
.search-bar .search-placeholder {
  color: var(--ij-muted-text) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.search-bar .search-icon svg,
.navbar .search-bar svg,
#small-search-button .search-icon svg {
  stroke: var(--ij-primary) !important;
  width: 15px !important;
  height: 15px !important;
}

.search-kbd-hint kbd {
  background: rgba(17, 61, 128, 0.08) !important;
  color: var(--ij-primary) !important;
  border: 1px solid rgba(17, 61, 128, 0.2) !important;
  border-radius: 5px !important;
  padding: 2px 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  white-space: nowrap;
}

/* ==========================================================================
   AWESOMEBAR MODAL / GLOBAL SEARCH COMMAND PALETTE
   Consistent with ERPNext Global Search Clean Modal Design
   ========================================================================== */

/* 1. Modal Dialog & Card Container */
.modal:has(#navbar-search) .modal-dialog,
.modal:has(.navbar-modal-wrapper) .modal-dialog,
.modal.awesomebar-modal .modal-dialog {
  max-width: 640px !important;
  margin: 70px auto 0 auto !important;
}

.modal:has(#navbar-search) .modal-content,
.modal:has(.navbar-modal-wrapper) .modal-content,
.modal.awesomebar-modal .modal-content {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--ij-border) !important;
  box-shadow: 0 20px 45px rgba(17, 61, 128, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  background: var(--ij-surface-white) !important;
}

.modal:has(#navbar-search) .modal-header,
.modal:has(.navbar-modal-wrapper) .modal-header,
.modal.awesomebar-modal .modal-header {
  display: none !important;
}

.modal:has(#navbar-search) .modal-body,
.modal:has(.navbar-modal-wrapper) .modal-body,
.modal.awesomebar-modal .modal-body {
  padding: 0 !important;
  background: var(--ij-surface-white) !important;
}

/* 2. Search Modal Header Wrapper */
.navbar-modal-wrapper,
.modal .navbar-modal-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
  background: var(--ij-surface-white) !important;
}

.navbar-modal-wrapper .modal-divider,
.modal:has(#navbar-search) .modal-divider,
.modal.awesomebar-modal .modal-divider {
  display: none !important;
}

.navbar-modal-wrapper .awesomplete,
.modal:has(#navbar-search) .awesomplete,
.modal:has(.navbar-modal-wrapper) .awesomplete,
.modal.awesomebar-modal .awesomplete {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}

/* 3. Input Row & Integrated Search Icon */
.navbar-modal-wrapper .awesomebar-input-row,
.modal:has(#navbar-search) .awesomebar-input-row,
.modal:has(.navbar-modal-wrapper) .awesomebar-input-row,
.modal.awesomebar-modal .awesomebar-input-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 16px !important;
  min-height: 52px !important;
  height: 52px !important;
  border-bottom: 1px solid var(--ij-border) !important;
  background: var(--ij-surface-white) !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.navbar-modal-wrapper .awesomebar-search-icon,
.modal:has(#navbar-search) .awesomebar-search-icon,
.modal:has(.navbar-modal-wrapper) .awesomebar-search-icon,
.modal.awesomebar-modal .awesomebar-search-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  color: var(--ij-secondary-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-modal-wrapper .awesomebar-search-icon svg,
.modal:has(#navbar-search) .awesomebar-search-icon svg,
.modal:has(.navbar-modal-wrapper) .awesomebar-search-icon svg,
.modal.awesomebar-modal .awesomebar-search-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--ij-secondary-text) !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* 4. Search Input Field */
.navbar-modal-wrapper #navbar-search,
.modal:has(#navbar-search) #navbar-search,
.modal:has(.navbar-modal-wrapper) #navbar-search,
.modal.awesomebar-modal #navbar-search,
.awesomebar-input-row #navbar-search,
input#navbar-search.form-control {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ij-main-text) !important;
  font-family: var(--font-stack) !important;
}

.navbar-modal-wrapper #navbar-search:focus,
.modal:has(#navbar-search) #navbar-search:focus,
.modal:has(.navbar-modal-wrapper) #navbar-search:focus,
.modal.awesomebar-modal #navbar-search:focus,
.awesomebar-input-row #navbar-search:focus,
input#navbar-search.form-control:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.navbar-modal-wrapper #navbar-search::placeholder,
.modal:has(#navbar-search) #navbar-search::placeholder,
.modal:has(.navbar-modal-wrapper) #navbar-search::placeholder,
.modal.awesomebar-modal #navbar-search::placeholder,
input#navbar-search.form-control::placeholder {
  color: var(--ij-muted-text) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
}

/* 5. Results List (Override generic .awesomplete > ul / listbox inside modal) */
.navbar-modal-wrapper .awesomplete > ul,
.navbar-modal-wrapper .awesomplete > [role="listbox"],
.modal:has(#navbar-search) .awesomplete > ul,
.modal:has(#navbar-search) .awesomplete > [role="listbox"],
.modal:has(.navbar-modal-wrapper) .awesomplete > ul,
.modal:has(.navbar-modal-wrapper) .awesomplete > [role="listbox"],
.modal.awesomebar-modal .awesomplete > ul,
.modal.awesomebar-modal .awesomplete > [role="listbox"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  position: static !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  width: 100% !important;
  display: block !important;
  list-style: none !important;
  left: 0 !important;
  top: auto !important;
}

.navbar-modal-wrapper .awesomplete > ul[hidden],
.navbar-modal-wrapper .awesomplete > [role="listbox"][hidden],
.modal:has(#navbar-search) .awesomplete > ul[hidden],
.modal:has(#navbar-search) .awesomplete > [role="listbox"][hidden],
.modal.awesomebar-modal .awesomplete > ul[hidden],
.modal.awesomebar-modal .awesomplete > [role="listbox"][hidden] {
  display: none !important;
}

/* 6. Result List Items */
.navbar-modal-wrapper .awesomplete > ul > li,
.navbar-modal-wrapper .awesomplete > [role="listbox"] > li,
.navbar-modal-wrapper .awesomplete > [role="listbox"] > [role="option"],
.modal:has(#navbar-search) .awesomplete > ul > li,
.modal:has(#navbar-search) .awesomplete > [role="listbox"] > li,
.modal:has(#navbar-search) .awesomplete > [role="listbox"] > [role="option"],
.modal.awesomebar-modal .awesomplete > ul > li,
.modal.awesomebar-modal .awesomplete > [role="listbox"] > [role="option"] {
  padding: 9px 14px !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ij-main-text) !important;
  cursor: pointer !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}

.navbar-modal-wrapper .awesomplete > ul > li > a,
.navbar-modal-wrapper .awesomplete > [role="listbox"] > li > a,
.modal:has(#navbar-search) .awesomplete > ul > li > a,
.modal:has(#navbar-search) .awesomplete > [role="listbox"] > li > a,
.modal.awesomebar-modal .awesomplete > ul > li > a {
  display: block !important;
  width: 100% !important;
  color: inherit !important;
  text-decoration: none !important;
}

.navbar-modal-wrapper .awesomplete .text-muted,
.modal:has(#navbar-search) .awesomplete .text-muted,
.modal.awesomebar-modal .awesomplete .text-muted {
  font-size: 12px !important;
  color: var(--ij-muted-text) !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}

.navbar-modal-wrapper .awesomplete > ul > li[aria-selected="true"],
.navbar-modal-wrapper .awesomplete > ul > li:hover,
.navbar-modal-wrapper .awesomplete > [role="listbox"] > li[aria-selected="true"],
.navbar-modal-wrapper .awesomplete > [role="listbox"] > li:hover,
.navbar-modal-wrapper .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"],
.navbar-modal-wrapper .awesomplete > [role="listbox"] > [role="option"]:hover,
.modal:has(#navbar-search) .awesomplete > ul > li[aria-selected="true"],
.modal:has(#navbar-search) .awesomplete > ul > li:hover,
.modal:has(#navbar-search) .awesomplete > [role="listbox"] > li[aria-selected="true"],
.modal:has(#navbar-search) .awesomplete > [role="listbox"] > li:hover,
.modal.awesomebar-modal .awesomplete > ul > li[aria-selected="true"],
.modal.awesomebar-modal .awesomplete > ul > li:hover {
  background-color: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
  font-weight: 600 !important;
}

.navbar-modal-wrapper .awesomplete mark,
.modal:has(#navbar-search) .awesomplete mark,
.modal.awesomebar-modal .awesomplete mark {
  background: transparent !important;
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

/* 7. Modal Footer / Shortcut Hints */
.modal:has(#navbar-search) .modal-footer,
.modal:has(.navbar-modal-wrapper) .modal-footer,
.modal:has(#navbar-search) .cool-awesomebar-modal-footer,
.modal.awesomebar-modal .modal-footer,
.cool-awesomebar-modal-footer {
  border-top: 1px solid var(--ij-border) !important;
  background: #F8FAFC !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 44px !important;
}

.cool-awesomebar-modal-footer .awesomebar-modal-footer,
.modal:has(#navbar-search) .awesomebar-modal-footer,
.modal.awesomebar-modal .awesomebar-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cool-awesomebar-modal-footer .help-navigation,
.modal:has(#navbar-search) .help-navigation,
.modal.awesomebar-modal .help-navigation {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cool-awesomebar-modal-footer .help-item-navigate,
.modal:has(#navbar-search) .help-item-navigate,
.modal.awesomebar-modal .help-item-navigate {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.cool-awesomebar-modal-footer .help-item,
.modal:has(#navbar-search) .help-item,
.modal.awesomebar-modal .help-item,
.cool-awesomebar-modal-footer kbd,
.modal:has(#navbar-search) kbd,
.modal.awesomebar-modal kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cool-awesomebar-modal-footer .help-item svg,
.modal:has(#navbar-search) .help-item svg,
.modal.awesomebar-modal .help-item svg {
  width: 11px !important;
  height: 11px !important;
  stroke: #334155 !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* Streamlined Iconography & Quick Actions */
.navbar .nav-link,
.navbar .btn-reset {
  color: var(--ij-secondary-text) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar .nav-link:hover,
.navbar .btn-reset:hover {
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
}

.navbar .nav-link svg,
.navbar .btn-reset svg {
  stroke: var(--ij-secondary-text) !important;
  width: 17px !important;
  height: 17px !important;
  transition: stroke 0.15s ease, transform 0.15s ease !important;
}

.navbar .nav-link:hover svg,
.navbar .btn-reset:hover svg {
  stroke: var(--ij-primary) !important;
  transform: scale(1.05);
}

/* Custom Alert & Notification Badge Pills */
.notifications-badge,
.notification-badge,
.unread-badge,
.badge-danger,
.badge-alert,
.notification-count {
  background: var(--ij-pink-accent) !important; /* #DB2777 - Official Palette Pink */
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 1.5px 6px !important;
  min-width: 18px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(219, 39, 119, 0.45) !important;
  border: 1.5px solid var(--ij-surface-white) !important;
}

/* ==========================================================================
   DOMINANT BRAND SIDEBAR (Deep Midnight Sapphire Transformation)
   ========================================================================== */
/* Hide the confusing ERPNext dock/rail column so the sidebar is cleanly on the left */
.dock,
.dock-container,
.app-rail,
.app-rail-host {
  display: none !important;
}

@media (min-width: 768px) {
  .body-sidebar-container {
    background: #164687 !important;
    left: 0 !important;
  }

  .body-sidebar {
    background: #164687 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 2px 0 16px rgba(12, 30, 60, 0.15) !important;
    padding-top: 6px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }
}

/* ==========================================================================
   SIDEBAR BRAND HEADER (Placed Directly on Sidebar, No Box/Border)
   ========================================================================== */
.body-sidebar .sidebar-header,
.body-sidebar .shell-header,
.body-sidebar-container .sidebar-header,
.body-sidebar-container .shell-header,
a.sidebar-header,
a.shell-header {
  order: -999 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 10px 10px 10px 10px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 none transparent !important;
  border-top: 0 none transparent !important;
  border-bottom: 0 none transparent !important;
  border-left: 0 none transparent !important;
  border-right: 0 none transparent !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: opacity 0.2s ease !important;
  box-sizing: border-box !important;
}

.body-sidebar .sidebar-header:hover,
.body-sidebar .shell-header:hover,
a.sidebar-header:hover {
  background: transparent !important;
  border: 0 none transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.body-sidebar .sidebar-header .header-logo,
.sidebar-header .header-logo,
.body-sidebar .sidebar-header .title-container,
.sidebar-header .title-container,
.body-sidebar .sidebar-header .drop-icon,
.sidebar-header .drop-icon,
.body-sidebar .sidebar-header button.drop-icon {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure any dropdown menus from sidebar header are completely suppressed */
.menu:has([data-name="all-apps"]),
.menu:has([data-name="edit-sidebar"]),
[role="menu"]:has([data-name="all-apps"]),
[role="menu"]:has([data-name="edit-sidebar"]),
.dropdown-menu:has([data-name="all-apps"]),
[data-name="all-apps"],
[data-name="edit-sidebar"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   1. WHITE LOGO CARD (Active when logo is placed - matches user screenshot)
   ========================================================================== */
.infinity-sidebar-brand-top.has-uploaded-logo,
.infinity-sidebar-brand.has-uploaded-logo,
.body-sidebar .sidebar-header .infinity-sidebar-brand-top.has-uploaded-logo,
.body-sidebar .sidebar-header .infinity-sidebar-brand.has-uploaded-logo,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand-top.has-uploaded-logo,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand.has-uploaded-logo,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand-top.has-uploaded-logo,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand.has-uploaded-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  overflow: visible !important;
  min-height: 64px !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.infinity-sidebar-brand-top.has-uploaded-logo:hover,
.infinity-sidebar-brand.has-uploaded-logo:hover,
.body-sidebar .sidebar-header .infinity-sidebar-brand-top.has-uploaded-logo:hover,
.body-sidebar .sidebar-header .infinity-sidebar-brand.has-uploaded-logo:hover,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand-top.has-uploaded-logo:hover,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand.has-uploaded-logo:hover,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand-top.has-uploaded-logo:hover,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand.has-uploaded-logo:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.10) !important;
}

/* Logo image centered cleanly inside the white card */
.infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon-top,
.infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon,
.infinity-brand-icon-top,
.infinity-brand-icon {
  width: 100% !important;
  min-width: unset !important;
  max-width: 155px !important;
  height: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
  flex-shrink: 0 !important;
  filter: none !important;
  transition: transform 0.2s ease !important;
}

.body-sidebar .sidebar-header:hover .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon-top,
.body-sidebar .sidebar-header:hover .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon {
  transform: scale(1.02) !important;
  filter: none !important;
}

/* ==========================================================================
   2. TEXT-ONLY BRAND BOX (Active when logo is removed - glassmorphic style)
   ========================================================================== */
.infinity-sidebar-brand-top,
.infinity-sidebar-brand,
.infinity-sidebar-brand-top.has-text-only,
.infinity-sidebar-brand.has-text-only,
.body-sidebar .sidebar-header .infinity-sidebar-brand-top,
.body-sidebar .sidebar-header .infinity-sidebar-brand,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand-top,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand-top,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  overflow: visible !important;
  min-height: 44px !important;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.infinity-sidebar-brand-top.has-text-only:hover,
.infinity-sidebar-brand.has-text-only:hover,
.infinity-sidebar-brand-top:hover,
.infinity-sidebar-brand:hover,
.body-sidebar .sidebar-header .infinity-sidebar-brand-top:hover,
.body-sidebar .sidebar-header .infinity-sidebar-brand:hover,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand-top:hover,
.body-sidebar-container .sidebar-header .infinity-sidebar-brand:hover,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand-top:hover,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

.infinity-brand-info-top,
.infinity-brand-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  width: 100% !important;
  overflow: visible !important;
}

.infinity-brand-name-top,
.infinity-brand-name {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.infinity-brand-tagline-top,
.infinity-brand-tagline {
  font-size: 8px !important;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78) !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

.infinity-brand-monogram {
  display: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
}

.body-sidebar-container:not(.expanded) .infinity-sidebar-brand.has-text-only .infinity-brand-monogram,
body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-brand.has-text-only .infinity-brand-monogram {
  display: block !important;
}

/* Brand header card, matching the Team button treatment */
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand-top,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand {
  box-sizing: border-box !important;
  padding: 6px 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand-top:hover,
.body-sidebar-container .body-sidebar .sidebar-header .infinity-sidebar-brand:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}
/* Note: Responsive 3-tier sidebar rules (Desktop Full, Mobile Icon Rail, Extra-Small Hidden Under Toggle) are consolidated definitively below */

/* ==========================================================================
   SIDEBAR NAVIGATION ITEMS (White Active Pill & Crisp Icons)
   ========================================================================== */
.body-sidebar .standard-sidebar-item,
.standard-sidebar-item {
  margin: 1.5px 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.body-sidebar .standard-sidebar-item .item-anchor,
.standard-sidebar-item .item-anchor {
  padding: 6px 10px !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  background: transparent !important;
}

.body-sidebar .standard-sidebar-item .sidebar-item-label,
.standard-sidebar-item .sidebar-item-label {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: color 0.15s ease !important;
}

.body-sidebar .standard-sidebar-item .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item .sidebar-item-icon use,
.standard-sidebar-item .sidebar-item-icon svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke-width: 2px !important;
  width: 18px !important;
  height: 18px !important;
  transition: stroke 0.15s ease !important;
}

.body-sidebar .standard-sidebar-item .sidebar-item-icon svg.es-solid,
.body-sidebar .standard-sidebar-item .sidebar-item-icon svg.es-solid use {
  fill: #FFFFFF !important;
}

/* Inactive Hover State (Translucent White Pill) */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(.selected):hover,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(.selected):has(a:not(.section-break)):hover,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(.selected) .item-anchor:hover,
.standard-sidebar-item:not(.active-sidebar):not(.selected):hover,
.standard-sidebar-item:not(.active-sidebar):not(.selected) .item-anchor:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .item-anchor,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-label,
.standard-sidebar-item:not(.active-sidebar):not(.selected):hover .item-anchor,
.standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-label {
  color: #FFFFFF !important;
  background: transparent !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-icon svg,
.standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-icon svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Active / Selected State: Solid White Pill Card with Blue Indicator Dot */
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .standard-sidebar-item.active,
.body-sidebar .active-sidebar,
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item,
.standard-sidebar-item.selected,
.standard-sidebar-item.active,
.standard-sidebar-item.active-sidebar {
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.selected .item-anchor,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active .item-anchor,
.body-sidebar .standard-sidebar-item.active .sidebar-item-label,
.body-sidebar .active-sidebar .item-anchor,
.body-sidebar .active-sidebar .sidebar-item-label,
.standard-sidebar-item.selected .item-anchor,
.standard-sidebar-item.active .item-anchor {
  color: #164687 !important;
  font-weight: 700 !important;
  background: transparent !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon use,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-icon use,
.body-sidebar .standard-sidebar-item.active .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.active .sidebar-item-icon use,
.body-sidebar .active-sidebar .sidebar-item-icon svg,
.body-sidebar .active-sidebar .sidebar-item-icon use,
.standard-sidebar-item.selected .sidebar-item-icon svg,
.standard-sidebar-item.active .sidebar-item-icon svg {
  stroke: #164687 !important;
  color: #164687 !important;
  stroke-width: 2.2px !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg.es-solid,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg.es-solid use {
  fill: #164687 !important;
}

/* Active Hover State (Stays Solid White Pill) */
.body-sidebar .standard-sidebar-item.active-sidebar:hover,
.body-sidebar .standard-sidebar-item.selected:hover,
.standard-sidebar-item.active-sidebar:hover {
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar:hover .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar:hover .sidebar-item-label {
  color: #164687 !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar:hover .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.active-sidebar:hover .sidebar-item-icon use {
  stroke: #164687 !important;
  color: #164687 !important;
}

/* A collapsed section (e.g. Masters) that contains the open page gets the white pill but not the
   .active-sidebar class itself, so its label, icon and arrow kept the sidebar's white text and
   vanished on the white pill. Give that pill the same dark-blue content as any selected item. */
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item .item-anchor,
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item .sidebar-item-label,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .item-anchor,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .sidebar-item-label,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:hover .sidebar-item-label,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .selected) > .standard-sidebar-item .sidebar-item-label,
.body-sidebar .section-item.active-sidebar .sidebar-item-label,
.body-sidebar .section-item.active-sidebar > .standard-sidebar-item .sidebar-item-label {
  color: #164687 !important;
  font-weight: 700 !important;
  background: transparent !important;
}

.body-sidebar .sidebar-item-container.active > .standard-sidebar-item .sidebar-item-icon svg,
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item .sidebar-item-icon use,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .sidebar-item-icon svg,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .sidebar-item-icon use,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .sidebar-item-control svg,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item .sidebar-item-control use {
  stroke: #164687 !important;
  color: #164687 !important;
}

/* Hovering that pill used to switch it to the translucent "inactive hover" look: dark blue text on a
   dim background. It stays a solid white pill, like an open item. */
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:hover,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:not(.active-sidebar):not(.selected):hover {
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
  border-radius: 10px !important;
}

.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .item-anchor,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-label {
  color: #164687 !important;
}

.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-icon svg,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:not(.active-sidebar):not(.selected):hover .sidebar-item-icon use,
.body-sidebar .sidebar-item-container:has(> .nested-container.hidden .active-sidebar) > .standard-sidebar-item:hover .sidebar-item-control svg {
  stroke: #164687 !important;
  color: #164687 !important;
}

/* Active Indicator Dot on Far Right */
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor::after,
.body-sidebar .standard-sidebar-item.selected .item-anchor::after,
.body-sidebar .standard-sidebar-item.active .item-anchor::after,
.standard-sidebar-item.selected .item-anchor::after,
.standard-sidebar-item.active .item-anchor::after {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  background: #164687 !important;
  border-radius: 50% !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Hide dot if item already has a suffix badge */
.body-sidebar .standard-sidebar-item.active-sidebar:has(.sidebar-item-suffix) .item-anchor::after,
.body-sidebar .standard-sidebar-item.selected:has(.sidebar-item-suffix) .item-anchor::after {
  display: none !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-control {
  display: none !important;
}

/* Nested Items (Child Lists, Reports) */
.body-sidebar .nested-container {
  border-left: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  margin-left: 20px !important;
  padding-left: 6px !important;
}

.body-sidebar .nested-container .standard-sidebar-item {
  margin: 2px 8px !important;
  background: transparent !important;
}

.body-sidebar .nested-container .standard-sidebar-item .item-anchor {
  padding: 6px 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  background: transparent !important;
}

.body-sidebar .nested-container .standard-sidebar-item .sidebar-item-label {
  color: rgba(255, 255, 255, 0.85) !important;
}

.body-sidebar .nested-container .standard-sidebar-item:hover,
.body-sidebar .nested-container .standard-sidebar-item:hover .item-anchor {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
}

.body-sidebar .nested-container .standard-sidebar-item:hover .item-anchor,
.body-sidebar .nested-container .standard-sidebar-item:hover .sidebar-item-label {
  color: #FFFFFF !important;
}

.body-sidebar .nested-container .standard-sidebar-item.active-sidebar,
.body-sidebar .nested-container .standard-sidebar-item.selected,
.body-sidebar .nested-container .standard-sidebar-item.active {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.body-sidebar .nested-container .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar .nested-container .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .nested-container .standard-sidebar-item.selected .item-anchor,
.body-sidebar .nested-container .standard-sidebar-item.selected .sidebar-item-label {
  color: #164687 !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* Sidebar Count Badges & Suffix Pills matching screenshot */
.body-sidebar .sidebar-item-suffix,
.body-sidebar .sidebar-item-count,
.sidebar-item-suffix,
.sidebar-item-count {
  background: #EEF2FF !important;
  color: #164687 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  border: none !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.body-sidebar .sidebar-item-suffix.badge-new {
  background: #EEF2FF !important;
  color: #164687 !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

.body-sidebar .sidebar-item-suffix.badge-deals {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.body-sidebar .sidebar-item-suffix.badge-whatsapp,
.badge-whatsapp {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.body-sidebar .sidebar-item-suffix.badge-urgent,
.badge-urgent {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.body-sidebar .sidebar-item-suffix.badge-restricted {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.02em !important;
}

.body-sidebar .sidebar-item-dot-admin {
  width: 7px !important;
  height: 7px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 50% !important;
  margin-left: auto !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Thin Divider Rule (Above Settings / Admin) */
.body-sidebar .divider,
.body-sidebar .sidebar-section-divider,
.body-sidebar .standard-sidebar-section:has(+ .standard-sidebar-section),
.body-sidebar hr {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  margin: 18px 14px 14px 14px !important;
  display: block !important;
  height: 0 !important;
}

/* Completely suppress dividers immediately following the brand header or team attendance */
.body-sidebar .sidebar-header + .divider,
.body-sidebar .shell-header + .divider,
.body-sidebar .sidebar-header + hr,
.body-sidebar .infinity-sidebar-attendance + .divider,
.body-sidebar .infinity-sidebar-team-btn + .divider,
.body-sidebar .infinity-sidebar-attendance + hr,
.body-sidebar .infinity-sidebar-team-btn + hr {
  display: none !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sidebar Team Availability Button (Replaces Check-In/Check-Out) */
.infinity-sidebar-attendance {
  order: -990 !important;
  flex-shrink: 0 !important;
  margin: 0 10px 10px 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* Sidebar Standard Items Band (Search & Notifications) */
.body-sidebar .standard-items-band {
  order: -980 !important;
  flex-shrink: 0 !important;
}

.body-sidebar .infinity-sidebar-team-btn,
.infinity-sidebar-attendance .infinity-sidebar-team-btn,
button.infinity-sidebar-team-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.body-sidebar .infinity-sidebar-team-btn:hover,
.infinity-sidebar-attendance .infinity-sidebar-team-btn:hover,
button.infinity-sidebar-team-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px) !important;
}

.body-sidebar .infinity-sidebar-team-btn:active,
.infinity-sidebar-attendance .infinity-sidebar-team-btn:active,
button.infinity-sidebar-team-btn:active {
  transform: translateY(0) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.infinity-sidebar-team-btn .infinity-team-btn-icon {
  width: 15px !important;
  height: 15px !important;
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke-width: 2 !important;
  margin-right: 7px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.infinity-sidebar-team-btn .infinity-sidebar-team-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}

.infinity-sidebar-attendance .infinity-sidebar-toggle-btn {
  display: none !important;
}

/* Sidebar Section Breaks & Drop Icons (Grouping & Collapse/Expand) */
.body-sidebar .sidebar-item-control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
}

.body-sidebar .sidebar-item-control .drop-icon,
.body-sidebar .sidebar-item-control button.drop-icon {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  opacity: 0.8 !important;
  background: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
  cursor: pointer !important;
}

.body-sidebar .sidebar-item-control .drop-icon:hover {
  opacity: 1 !important;
}

.body-sidebar .sidebar-item-control .drop-icon svg,
.sidebar-item-control .drop-icon svg,
.sidebar-item-control svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(255, 255, 255, 0.85) !important;
  fill: none !important;
  transition: stroke 0.15s ease;
}

.body-sidebar .standard-sidebar-item:hover .sidebar-item-control .drop-icon svg {
  stroke: #FFFFFF !important;
}

/* Sidebar Section Item Styling */
.body-sidebar .section-item {
  margin-top: 14px !important;
  margin-bottom: 2px !important;
}

.body-sidebar .section-break,
.body-sidebar .section-item .standard-sidebar-item {
  background: transparent !important;
  box-shadow: none !important;
}

.body-sidebar .section-break .sidebar-item-label,
.body-sidebar .section-item .sidebar-item-label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}

/* Completely suppress Settings and its nested items in top sidebar stream */
.body-sidebar-top [item-name="Settings"],
.body-sidebar-top [item-name="settings"],
.body-sidebar-top [item-name="CRM Settings"],
.body-sidebar-top [item-name="crm settings"],
.body-sidebar-top [item-name="SMS Settings"],
.body-sidebar-top [item-name="sms settings"],
.body-sidebar-top .section-item:has([item-name="Settings"]),
.body-sidebar-top .section-item:has([item-name="settings"]),
.body-sidebar-top .moved-to-bottom {
  display: none !important;
}

.body-sidebar .promotional-banners {
  display: none !important;
}

/* Ensure body-sidebar-top occupies full flex space with tight vertical padding (no dead 40px gap) */
.body-sidebar .body-sidebar-top,
.body-sidebar-top {
  order: 0 !important;
  padding: 2px 4px 4px 4px !important;
  margin-bottom: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   USER PROFILE CARD (Bottom White Elevated Card)
   ========================================================================== */
.body-sidebar-bottom {
  order: 999 !important;
  padding: 2px 0 6px 0 !important;
  background: transparent !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

.body-sidebar-bottom .sidebar-bottom-divider {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  margin: 4px 12px !important;
  display: block !important;
  height: 0 !important;
}

/* ==========================================================================
   Bottom Sidebar: Dedicated User Profile Card & 3-Dot Dropdown Menu
   ========================================================================== */
.body-sidebar-bottom .dropdown-navbar-user {
  position: relative !important;
  margin-top: auto !important;
  padding: 6px 8px 8px 8px !important;
}

.body-sidebar-bottom .sidebar-bottom-actions,
.body-sidebar-bottom .sidebar-bottom-divider,
.body-sidebar-container .sidebar-bottom-actions,
.body-sidebar-container .sidebar-bottom-divider,
.body-sidebar-bottom .dropdown-navbar-user > .dropdown-menu,
.body-sidebar-bottom .dropdown-navbar-user > .menu,
.body-sidebar-bottom .dropdown-navbar-user > [role="menu"]:not(#infinity-user-menu),
.es-menu:has(a[href*="logout"]),
.es-menu:has(a[href*="/api/method/logout"]),
.es-menu:has(a[href*="private"]),
.es-menu:has(a[href*="/desk/private"]),
.es-menu:has([data-name="workspace-selector"]),
.es-menu:has([data-name="my-space"]),
.es-menu:has([data-name="reload"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
}

/* User Card 3-Dot Dropdown Popup Menu */
.infinity-user-dropdown-menu {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 8px !important;
  right: 8px !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.28), 0 4px 12px -2px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 5px !important;
  z-index: 10050 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.infinity-user-dropdown-menu.open {
  display: flex !important;
  animation: infinityMenuSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes infinityMenuSlideUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.infinity-user-dropdown-menu .infinity-menu-divider {
  height: 1px !important;
  background-color: #E2E8F0 !important;
  margin: 3px 0 !important;
  border: none !important;
}

.infinity-user-dropdown-menu .infinity-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.infinity-user-dropdown-menu .infinity-menu-item:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

.infinity-user-dropdown-menu .infinity-menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: #64748B !important;
  flex-shrink: 0 !important;
}

.infinity-user-dropdown-menu .infinity-menu-item:hover .infinity-menu-icon {
  color: #0F172A !important;
}

/* Logout specific styling */
.infinity-user-dropdown-menu .infinity-menu-logout:hover {
  background-color: #FEF2F2 !important;
  color: #DC2626 !important;
}

.infinity-user-dropdown-menu .infinity-menu-logout:hover .infinity-menu-icon {
  color: #DC2626 !important;
}

.body-sidebar-bottom .dropdown-navbar-user {
  margin-top: 1px !important;
  padding: 0 8px !important;
}

.body-sidebar-bottom .sidebar-user-button {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 5px 10px !important;
  margin: 2px 0 4px 0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.2s ease !important;
  cursor: default !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.body-sidebar-bottom .sidebar-user-button:hover {
  background: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14) !important;
  transform: none !important;
}

.body-sidebar-bottom .sidebar-user-button > div:first-child {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.body-sidebar-bottom .sidebar-user-button .avatar {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}

.body-sidebar-bottom .sidebar-user-button .avatar img {
  border-radius: 50% !important;
}

/* Green Online Status Dot on User Avatar */
.body-sidebar-bottom .sidebar-user-button > div:first-child::after,
.body-sidebar-bottom .sidebar-user-button .avatar::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 10px !important;
  height: 10px !important;
  background: #10B981 !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50% !important;
  display: block !important;
  z-index: 5 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.body-sidebar-bottom .avatar-name-email {
  margin-left: 10px !important;
  flex: 1 !important;
  overflow: hidden !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.body-sidebar-bottom .avatar-name-email span:first-child {
  color: #131B2E !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.body-sidebar-bottom .avatar-name-email span:last-child {
  color: #737686 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

/* Three dots icon button on right of user card */
.body-sidebar-bottom .sidebar-user-button::after {
  content: none !important;
  display: none !important;
}

.body-sidebar-bottom .sidebar-user-button .sidebar-user-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  color: #737686 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  user-select: none !important;
}

.body-sidebar-bottom .sidebar-user-button .sidebar-user-more-btn:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: #0F172A !important;
}

/* ==========================================================================
   SIDEBAR COLLAPSE / EXPAND ARROW BUTTON (Edge Floating Disc)
   ========================================================================== */
.sidebar-collapse-arrow {
  position: absolute !important;
  top: 20px !important;  /* Positioned at top right of sidebar, level with brand logo */
  left: calc(var(--sidebar-width) - 12px) !important;  /* Centered on the sidebar border */
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  color: #164687 !important;
  z-index: 1050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0.95 !important;
  pointer-events: auto !important;
  transition: opacity 0.2s ease, left 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, background 0.15s ease !important;
}

.sidebar-collapse-arrow:hover {
  opacity: 1 !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28) !important;
  transform: scale(1.08) !important;
}

.sidebar-collapse-arrow svg {
  width: 12px !important;
  height: 12px !important;
  stroke: currentColor !important;
  fill: none !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/*
 * The arrow is driven solely by .body-sidebar-container.expanded, the same
 * class frappe.ui.Sidebar uses. body.sidebar-collapsed is written alongside it
 * but can lag during navigation, so it must not control the icon.
 */
.body-sidebar-container:not(.expanded) .sidebar-collapse-arrow {
  left: calc(var(--sidebar-collapsed-width) - 12px) !important; /* Centered on the rail border */
  opacity: 0.95 !important;
}

.body-sidebar-container:not(.expanded) .sidebar-collapse-arrow svg {
  transform: rotate(180deg) !important; /* Points right to expand */
}

/* Sidebar Edge (clickable resize border along entire height).
   This strip, with its resize-style pointer, is the only desktop collapse control. */
.sidebar-edge {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 10px !important;
  left: calc(var(--sidebar-width) - 5px) !important;
  z-index: 1045 !important;
  cursor: w-resize !important;
  pointer-events: auto !important;
}

.body-sidebar-container:not(.expanded) .sidebar-edge {
  left: calc(var(--sidebar-collapsed-width) - 5px) !important;
  cursor: e-resize !important;
}

/* The white round arrow disc is removed on every screen size: the edge strip above replaces it. */
.sidebar-collapse-arrow {
  display: none !important;
}

/* On mobile / small screens, hide the collapse arrow disc and edge */
@media (max-width: 767.98px) {
  .sidebar-collapse-arrow,
  .sidebar-edge {
    display: none !important;
  }
}

/* ==========================================================================
   UNIFIED 3-TIER RESPONSIVE SIDEBAR SYSTEM
   Tier 1 (>= 768px): Larger Screens / Desktop -> Full Sidebar (240px) or Collapsed (48px)
   Tier 2 (360px - 767.98px): Mobile View -> Icon-Only Rail (48px)
   Tier 3 (< 360px): Ultra-Small Mobile -> Completely Hidden Under Toggle
   Drawer (< 768px when .drawer-open): Slide-Out Drawer Overlay with Dark Backdrop
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIER 1: LARGER SCREENS / DESKTOP (>= 768px) - EXPANDABLE & COLLAPSIBLE SIDEBAR
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Desktop Sidebar Container (Base) */
  .body-sidebar-container {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #164687 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Desktop Body Sidebar (Base) */
  .body-sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: #164687 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 2px 0 16px rgba(12, 30, 60, 0.15) !important;
    padding-top: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Default / Expanded Desktop State (240px) */
  .body-sidebar-container.expanded {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }

  .body-sidebar-container.expanded .body-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }

  /* Full Brand Header (Expanded) */
  .body-sidebar-container.expanded .sidebar-header {
    width: 100% !important;
    margin: 10px 0 10px 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .body-sidebar-container.expanded .infinity-sidebar-brand.has-uploaded-logo {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    min-height: 64px !important;
  }

  .body-sidebar-container.expanded .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon-top,
  .body-sidebar-container.expanded .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon {
    width: 100% !important;
    max-width: 155px !important;
    height: auto !important;
    max-height: 52px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
  }

  .body-sidebar-container.expanded .infinity-brand-info-top,
  .body-sidebar-container.expanded .infinity-brand-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .body-sidebar-container.expanded .infinity-brand-name-top,
  .body-sidebar-container.expanded .infinity-brand-name {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em !important;
  }

  .body-sidebar-container.expanded .infinity-brand-tagline-top,
  .body-sidebar-container.expanded .infinity-brand-tagline {
    display: block !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
  }

  /* Full Team Attendance Button (Expanded) */
  .body-sidebar-container.expanded .infinity-sidebar-attendance {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    margin: 2px 0 5px 0 !important;
    display: flex !important;
  }

  .body-sidebar-container.expanded .infinity-sidebar-team-btn {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 7px !important;
  }

  .body-sidebar-container.expanded .infinity-sidebar-team-btn .infinity-team-btn-icon {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  .body-sidebar-container.expanded .infinity-sidebar-team-label {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
  }

  .body-sidebar-container.expanded .infinity-sidebar-team-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    margin-left: auto !important;
  }

  /* Full Navigation Items (Expanded) */
  .body-sidebar-container.expanded .standard-sidebar-item {
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    margin: 1.5px 8px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: block !important;
  }

  .body-sidebar-container.expanded .standard-sidebar-item .item-anchor {
    width: 100% !important;
    height: auto !important;
    min-height: 32px !important;
    max-height: unset !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-label {
    display: inline-block !important;
    width: auto !important;
    max-width: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
  }

  /* Active Item in Full Sidebar: Solid White Pill Card */
  .body-sidebar-container.expanded .standard-sidebar-item.active-sidebar,
  .body-sidebar-container.expanded .standard-sidebar-item.selected,
  .body-sidebar-container.expanded .standard-sidebar-item.active {
    background: #FFFFFF !important;
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(10, 25, 50, 0.18) !important;
    margin: 1.5px 8px !important;
    padding: 0 !important;
  }

  .body-sidebar-container.expanded .standard-sidebar-item.active-sidebar .sidebar-item-label,
  .body-sidebar-container.expanded .standard-sidebar-item.selected .sidebar-item-label,
  .body-sidebar-container.expanded .standard-sidebar-item.active .sidebar-item-label {
    color: #164687 !important;
    font-weight: 700 !important;
  }

  .body-sidebar-container.expanded .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
  .body-sidebar-container.expanded .standard-sidebar-item.selected .sidebar-item-icon svg,
  .body-sidebar-container.expanded .standard-sidebar-item.active .sidebar-item-icon svg {
    stroke: #164687 !important;
    color: #164687 !important;
  }

  /* Active indicator dot on right of active pill */
  .body-sidebar-container.expanded .standard-sidebar-item.active-sidebar .item-anchor::after,
  .body-sidebar-container.expanded .standard-sidebar-item.selected .item-anchor::after,
  .body-sidebar-container.expanded .standard-sidebar-item.active .item-anchor::after {
    content: "" !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #164687 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Suffix badge / count */
  .body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-suffix,
  .body-sidebar-container.expanded .standard-sidebar-item .sidebar-item-count {
    display: inline-flex !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* User Profile Card (Expanded) */

  .body-sidebar-container.expanded .dropdown-navbar-user {
    width: 100% !important;
    padding: 0 8px 4px 8px !important;
    display: flex !important;
  }

  .body-sidebar-container.expanded .sidebar-user-button {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 5px 10px !important;
    margin: 2px 0 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container.expanded .sidebar-user-button .avatar {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }

  .body-sidebar-container.expanded .avatar-name-email {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: left !important;
    margin-left: 8px !important;
  }

  .body-sidebar-container.expanded .sidebar-user-button::after {
    display: none !important;
    content: none !important;
  }

  /* Sidebar toggle button in page header on desktop */
  .page-title .sidebar-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    margin-right: 8px !important;
    color: #164687 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .page-title .sidebar-toggle-btn:hover {
    background: rgba(22, 70, 135, 0.08) !important;
    color: #0d2e5c !important;
  }

  .page-title .sidebar-toggle-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
  }

  /* Hide drawer overlay on desktop */
  .body-sidebar-container .overlay {
    display: none !important;
  }

  /* ==========================================================================
     COLLAPSED DESKTOP STATE (48px Icon Rail)
     Applies when .body-sidebar-container:not(.expanded) OR body.sidebar-collapsed
     Placed at the end of the media query to ensure final cascade precedence
     ========================================================================== */
  .body-sidebar-container:not(.expanded),
  body.sidebar-collapsed .body-sidebar-container {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  .body-sidebar-container:not(.expanded) .body-sidebar,
  body.sidebar-collapsed .body-sidebar-container .body-sidebar {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Collapsed desktop header */
  .body-sidebar-container:not(.expanded) .sidebar-header,
  body.sidebar-collapsed .body-sidebar-container .sidebar-header {
    width: 48px !important;
    margin: 6px auto !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-sidebar-brand.has-uploaded-logo,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-brand.has-uploaded-logo {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 9px !important;
    padding: 3px !important;
    margin: 0 auto !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon-top,
  .body-sidebar-container:not(.expanded) .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon-top,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon {
    max-width: 28px !important;
    max-height: 28px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-brand-info-top,
  .body-sidebar-container:not(.expanded) .infinity-brand-info,
  .body-sidebar-container:not(.expanded) .sidebar-header .title-container,
  .body-sidebar-container:not(.expanded) .sidebar-header .drop-icon,
  body.sidebar-collapsed .body-sidebar-container .infinity-brand-info-top,
  body.sidebar-collapsed .body-sidebar-container .infinity-brand-info {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Attendance button in collapsed desktop mode */
  .body-sidebar-container:not(.expanded) .infinity-sidebar-attendance,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-attendance {
    width: 48px !important;
    padding: 0 !important;
    margin: 4px auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-sidebar-team-btn,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-team-btn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-sidebar-team-btn .infinity-team-btn-icon,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-team-btn .infinity-team-btn-icon {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-sidebar-team-label,
  .body-sidebar-container:not(.expanded) .infinity-sidebar-team-dot,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-team-label,
  body.sidebar-collapsed .body-sidebar-container .infinity-sidebar-team-dot {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Sidebar items in collapsed desktop mode */
  .body-sidebar-container:not(.expanded) .standard-sidebar-item,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item {
    margin: 3px auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.expanded) .standard-sidebar-item .item-anchor,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item .item-anchor {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container:not(.expanded) .standard-sidebar-item .sidebar-item-icon,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item .sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.expanded) .sidebar-item-label,
  .body-sidebar-container:not(.expanded) .sidebar-item-suffix,
  .body-sidebar-container:not(.expanded) .sidebar-item-count,
  .body-sidebar-container:not(.expanded) .sidebar-item-dot-admin,
  .body-sidebar-container:not(.expanded) .sidebar-toggle-chevron,
  .body-sidebar-container:not(.expanded) .nested-container,
  body.sidebar-collapsed .body-sidebar-container .sidebar-item-label,
  body.sidebar-collapsed .body-sidebar-container .sidebar-item-suffix,
  body.sidebar-collapsed .body-sidebar-container .sidebar-item-count,
  body.sidebar-collapsed .body-sidebar-container .sidebar-item-dot-admin,
  body.sidebar-collapsed .body-sidebar-container .sidebar-toggle-chevron,
  body.sidebar-collapsed .body-sidebar-container .nested-container {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Active item in collapsed desktop mode */
  .body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar,
  .body-sidebar-container:not(.expanded) .standard-sidebar-item.selected,
  .body-sidebar-container:not(.expanded) .standard-sidebar-item.active,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item.active-sidebar,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item.selected,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item.active {
    background: #FFFFFF !important;
    width: 36px !important;
    height: 36px !important;
    margin: 3px auto !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container:not(.expanded) .standard-sidebar-item.active-sidebar .item-anchor::after,
  .body-sidebar-container:not(.expanded) .standard-sidebar-item.selected .item-anchor::after,
  .body-sidebar-container:not(.expanded) .standard-sidebar-item.active .item-anchor::after,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item.active-sidebar .item-anchor::after,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item.selected .item-anchor::after,
  body.sidebar-collapsed .body-sidebar-container .standard-sidebar-item.active .item-anchor::after {
    display: none !important;
    content: none !important;
  }

  /* User profile card in collapsed desktop mode */
  .body-sidebar-container:not(.expanded) .dropdown-navbar-user,
  body.sidebar-collapsed .body-sidebar-container .dropdown-navbar-user {
    width: 48px !important;
    margin: 4px auto 8px auto !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .body-sidebar-container:not(.expanded) .sidebar-user-button,
  body.sidebar-collapsed .body-sidebar-container .sidebar-user-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container:not(.expanded) .sidebar-user-button .avatar,
  body.sidebar-collapsed .body-sidebar-container .sidebar-user-button .avatar {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
  }

  .body-sidebar-container:not(.expanded) .avatar-name-email,
  .body-sidebar-container:not(.expanded) .sidebar-user-more-btn,
  body.sidebar-collapsed .body-sidebar-container .avatar-name-email,
  body.sidebar-collapsed .body-sidebar-container .sidebar-user-more-btn {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .body-sidebar-container:not(.expanded) .infinity-user-dropdown-menu,
  body.sidebar-collapsed .body-sidebar-container .infinity-user-dropdown-menu {
    left: 54px !important;
    right: auto !important;
    bottom: 8px !important;
    width: 180px !important;
  }

  /* Bottom actions in collapsed desktop mode */
  .body-sidebar-container:not(.expanded) .sidebar-bottom-actions,
  body.sidebar-collapsed .body-sidebar-container .sidebar-bottom-actions {
    width: 48px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .body-sidebar-container:not(.expanded) .sidebar-bottom-item,
  body.sidebar-collapsed .body-sidebar-container .sidebar-bottom-item {
    width: 36px !important;
    min-width: 36px !important;
    margin: 2px auto !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.expanded) .sidebar-bottom-item .sidebar-bottom-anchor,
  body.sidebar-collapsed .body-sidebar-container .sidebar-bottom-item .sidebar-bottom-anchor {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.expanded) .sidebar-bottom-item .sidebar-item-label,
  .body-sidebar-container:not(.expanded) .sidebar-bottom-item .sidebar-item-suffix,
  .body-sidebar-container:not(.expanded) .sidebar-bottom-item .sidebar-item-dot-admin,
  body.sidebar-collapsed .body-sidebar-container .sidebar-bottom-item .sidebar-item-label,
  body.sidebar-collapsed .body-sidebar-container .sidebar-bottom-item .sidebar-item-suffix,
  body.sidebar-collapsed .body-sidebar-container .sidebar-bottom-item .sidebar-item-dot-admin {
    display: none !important;
    width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   TIER 2: MOBILE VIEW (360px to 767.98px) - ICON-ONLY RAIL (ONLY ICONS)
   -------------------------------------------------------------------------- */
@media (min-width: 360px) and (max-width: 767.98px) {
  /* In-flow 48px rail container */
  .body-sidebar-container:not(.drawer-open) {
    display: block !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    background: #164687 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #164687 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar > *,
  .body-sidebar-container:not(.drawer-open) .body-sidebar .body-sidebar-top,
  .body-sidebar-container:not(.drawer-open) .body-sidebar .body-sidebar-bottom {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Compact Centered Infinity Logo Icon */
  .body-sidebar-container:not(.drawer-open) .sidebar-header,
  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-brand-top,
  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-brand {
    width: 48px !important;
    margin: 4px auto 8px auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .body-sidebar-container:not(.drawer-open) .infinity-brand-icon-top,
  .body-sidebar-container:not(.drawer-open) .infinity-brand-icon {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    max-height: 22px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .body-sidebar-container:not(.drawer-open) .infinity-brand-info-top,
  .body-sidebar-container:not(.drawer-open) .infinity-brand-info,
  .body-sidebar-container:not(.drawer-open) .infinity-brand-name-top,
  .body-sidebar-container:not(.drawer-open) .infinity-brand-name,
  .body-sidebar-container:not(.drawer-open) .infinity-brand-tagline-top,
  .body-sidebar-container:not(.drawer-open) .infinity-brand-tagline {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Compact Centered Team Button */
  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-attendance {
    width: 48px !important;
    margin: 2px auto 8px auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-team-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-team-btn .infinity-team-btn-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-team-label,
  .body-sidebar-container:not(.drawer-open) .infinity-sidebar-team-dot {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Navigation Items: Neat 36x36 Square Cards with Centered Icons */
  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item .item-anchor,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item .item-anchor {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item .sidebar-item-icon,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item .sidebar-item-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item .sidebar-item-icon svg,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item .sidebar-item-icon svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
    stroke: #FFFFFF !important;
  }

  /* Active Navigation Item in Icon Rail: 36x36 Solid White Rounded Card */
  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item.active-sidebar,
  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item.selected,
  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item.active,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item.active-sidebar,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item.selected,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item.active {
    background: #FFFFFF !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    margin: 4px auto !important;
    padding: 0 !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item.selected .sidebar-item-icon svg,
  .body-sidebar-container:not(.drawer-open) .body-sidebar .standard-sidebar-item.active .sidebar-item-icon svg,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item.selected .sidebar-item-icon svg,
  .body-sidebar-container:not(.drawer-open) .standard-sidebar-item.active .sidebar-item-icon svg {
    stroke: #164687 !important;
    color: #164687 !important;
  }

  /* STRICTLY HIDE ALL TEXT LABELS, BADGES, AND ACTIVE DOTS IN ICON RAIL */
  .body-sidebar-container:not(.drawer-open) .sidebar-item-label,
  .body-sidebar-container:not(.drawer-open) .sidebar-item-suffix,
  .body-sidebar-container:not(.drawer-open) .sidebar-item-count,
  .body-sidebar-container:not(.drawer-open) .sidebar-item-control,
  .body-sidebar-container:not(.drawer-open) .item-anchor::after,
  .body-sidebar-container:not(.drawer-open) .section-break {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    content: none !important;
  }

  /* Bottom Actions (Settings / Role) in Icon Rail */
  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-actions {
    width: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px !important;
  }

  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item .sidebar-bottom-anchor {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }

  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item .sidebar-item-icon {
    margin: 0 auto !important;
  }

  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item .sidebar-item-label,
  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item .sidebar-item-suffix,
  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item .sidebar-item-dot-admin,
  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-item .sidebar-toggle-chevron,
  .body-sidebar-container:not(.drawer-open) .sidebar-settings-nested,
  .body-sidebar-container:not(.drawer-open) .sidebar-bottom-divider {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    content: none !important;
  }

  /* User Profile Button: 36x36 Circle Avatar Only */
  .body-sidebar-container:not(.drawer-open) .body-sidebar-bottom .dropdown-navbar-user {
    width: 48px !important;
    margin: 4px auto 8px auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .body-sidebar-container:not(.drawer-open) .infinity-user-dropdown-menu {
    left: 52px !important;
    right: auto !important;
    bottom: 8px !important;
    width: 200px !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar-bottom .sidebar-user-button {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar-bottom .sidebar-user-button .avatar {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar-bottom .avatar-name-email,
  .body-sidebar-container:not(.drawer-open) .body-sidebar-bottom .sidebar-user-button::after,
  .body-sidebar-container:not(.drawer-open) .body-sidebar-bottom .sidebar-user-button .sidebar-user-more-btn {
    display: none !important;
    content: none !important;
  }

  /* Show toggle button in header */
  .sidebar-toggle-btn {
    display: flex !important;
  }
}

/* --------------------------------------------------------------------------
   TIER 3: SMALLER THAN MOBILE VIEW (< 360px) - COMPLETELY HIDDEN UNDER TOGGLE
   -------------------------------------------------------------------------- */
@media (max-width: 359.98px) {
  /* Completely hide sidebar under sidebar toggle */
  .body-sidebar-container:not(.drawer-open) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    pointer-events: none !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }

  .body-sidebar-container:not(.drawer-open) .body-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* Main content expands 100% full width */
  .page-container,
  .layout-main-section-wrapper,
  .layout-main-section,
  .main-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Show hamburger toggle button in header */
  .sidebar-toggle-btn {
    display: flex !important;
    visibility: visible !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER OVERLAY (When .drawer-open on screens < 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .body-sidebar-container.drawer-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10000 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .body-sidebar-container.drawer-open .body-sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 275px !important;
    max-width: 82vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #164687 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 6px 0 28px rgba(10, 25, 50, 0.55) !important;
    z-index: 10002 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 14px !important;
    padding-bottom: 24px !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .body-sidebar-container.drawer-open .body-sidebar > * {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* Dark Backdrop Overlay */
  .body-sidebar-container.drawer-open .overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(12, 28, 56, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 10001 !important;
    cursor: pointer !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Drawer Brand Header */
  .body-sidebar-container.drawer-open .sidebar-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 10px !important;
    margin: 6px 0 10px 0 !important;
    box-sizing: border-box !important;
  }

  .body-sidebar-container.drawer-open .infinity-sidebar-brand.has-uploaded-logo {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    width: 100% !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
  }

  .body-sidebar-container.drawer-open .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon-top,
  .body-sidebar-container.drawer-open .infinity-sidebar-brand.has-uploaded-logo .infinity-brand-icon {
    width: 100% !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 48px !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: none !important;
  }

  .body-sidebar-container.drawer-open .infinity-brand-info-top,
  .body-sidebar-container.drawer-open .infinity-brand-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .body-sidebar-container.drawer-open .infinity-brand-name-top,
  .body-sidebar-container.drawer-open .infinity-brand-name {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
  }

  .body-sidebar-container.drawer-open .infinity-brand-tagline-top,
  .body-sidebar-container.drawer-open .infinity-brand-tagline {
    display: block !important;
    font-size: 8px !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }

  /* Drawer Team Button */
  .body-sidebar-container.drawer-open .infinity-sidebar-attendance {
    width: 100% !important;
    padding: 0 12px !important;
    margin: 4px 0 10px 0 !important;
    display: flex !important;
  }

  .body-sidebar-container.drawer-open .infinity-sidebar-team-btn {
    width: 100% !important;
    height: 38px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: 9px !important;
  }

  .body-sidebar-container.drawer-open .infinity-sidebar-team-label {
    display: inline-block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .body-sidebar-container.drawer-open .infinity-sidebar-team-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    margin-left: auto !important;
  }

  /* Drawer Navigation Items */
  .body-sidebar-container.drawer-open .body-sidebar .standard-sidebar-item,
  .body-sidebar-container.drawer-open .standard-sidebar-item {
    width: auto !important;
    height: auto !important;
    margin: 3px 12px !important;
    border-radius: 10px !important;
    display: block !important;
  }

  .body-sidebar-container.drawer-open .body-sidebar .standard-sidebar-item .item-anchor,
  .body-sidebar-container.drawer-open .standard-sidebar-item .item-anchor {
    width: 100% !important;
    height: auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    border-radius: 10px !important;
  }

  .body-sidebar-container.drawer-open .sidebar-item-label {
    display: inline-block !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
  }

  .body-sidebar-container.drawer-open .sidebar-item-suffix,
  .body-sidebar-container.drawer-open .sidebar-item-count,
  .body-sidebar-container.drawer-open .sidebar-item-control {
    display: inline-flex !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Active Item in Drawer */
  .body-sidebar-container.drawer-open .standard-sidebar-item.active-sidebar,
  .body-sidebar-container.drawer-open .standard-sidebar-item.selected,
  .body-sidebar-container.drawer-open .standard-sidebar-item.active {
    background: #FFFFFF !important;
    width: auto !important;
    height: auto !important;
    border-radius: 10px !important;
  }

  .body-sidebar-container.drawer-open .standard-sidebar-item.active-sidebar .sidebar-item-label,
  .body-sidebar-container.drawer-open .standard-sidebar-item.selected .sidebar-item-label,
  .body-sidebar-container.drawer-open .standard-sidebar-item.active .sidebar-item-label {
    color: #164687 !important;
    font-weight: 700 !important;
  }

  .body-sidebar-container.drawer-open .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
  .body-sidebar-container.drawer-open .standard-sidebar-item.selected .sidebar-item-icon svg,
  .body-sidebar-container.drawer-open .standard-sidebar-item.active .sidebar-item-icon svg {
    stroke: #164687 !important;
    color: #164687 !important;
  }

  /* Drawer User Profile Card */

  .body-sidebar-container.drawer-open .body-sidebar-bottom .dropdown-navbar-user {
    width: 100% !important;
    padding: 0 12px 14px 12px !important;
    display: flex !important;
  }

  .body-sidebar-container.drawer-open .body-sidebar-bottom .sidebar-user-button {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    margin: 4px 0 12px 0 !important;
    border-radius: 10px !important;
  }

  .body-sidebar-container.drawer-open .body-sidebar-bottom .avatar-name-email {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: left !important;
    margin-left: 8px !important;
  }

  .body-sidebar-container.drawer-open .body-sidebar-bottom .sidebar-user-button::after {
    display: none !important;
    content: none !important;
  }
}


/* ==========================================================================
   MODERN FORM FIELDS, COLUMNS & SECTIONS (High-End Enterprise Look)
   ========================================================================== */
.page-container[data-page-route^="Form/"],
.page-container[data-page-route^="form/"],
.form-page,
.std-form-layout {
  background: var(--ij-bg-light) !important;
}

.std-form-layout > .form-layout > .form-page,
.form-layout,
.form-page .page-content {
  background: var(--ij-surface-white) !important;
  border: 1px solid var(--ij-border) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  box-shadow: 0 4px 16px rgba(12, 30, 60, 0.05), 0 1px 3px rgba(12, 30, 60, 0.03) !important;
  margin-bottom: 24px !important;
}

/* Modern Section Breaks */
.form-section {
  border-top: 1.5px solid var(--ij-bg-highlight) !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
}

.form-section:first-child {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.form-section .section-head {
  color: var(--ij-main-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em;
  padding-left: 10px !important;
  border-left: 3.5px solid var(--ij-primary) !important; /* Signature Section Indicator */
  margin-bottom: 16px !important;
}

/* Modern Field Labels */
.control-label,
.form-group label {
  color: var(--ij-secondary-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
}

.control-label .reqd {
  color: var(--ij-error-red) !important;
  font-size: 13px !important;
  margin-left: 2px;
}

/* Modern Form Controls & Inputs */
.form-control,
.frappe-control input.form-control,
.frappe-control select.form-control,
.frappe-control textarea.form-control {
  background: var(--ij-surface-white) !important;
  border: 1.5px solid var(--ij-border) !important;
  border-radius: 8px !important;
  color: var(--ij-main-text) !important;
  font-size: 13.5px !important;
  font-family: var(--font-stack) !important;
  padding: 8px 12px !important;
  min-height: 38px !important;
  box-shadow: 0 1px 2px rgba(19, 27, 46, 0.02) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.form-control:hover {
  border-color: var(--ij-muted-text) !important;
}

.form-control:focus,
.frappe-control input.form-control:focus,
.frappe-control select.form-control:focus,
.frappe-control textarea.form-control:focus {
  border-color: var(--ij-primary) !important;
  box-shadow: 0 0 0 3.5px rgba(17, 61, 128, 0.14) !important;
  background: var(--ij-surface-white) !important;
}

/* Column spacing */
.form-column {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Link field icons and actions */
.link-field .link-btn {
  top: 6px !important;
  right: 8px !important;
}

.link-field .link-btn svg {
  stroke: var(--ij-primary) !important;
}

/* Read-only / disabled fields with clean modern badge card styling */
.like-disabled-input,
.control-value.like-disabled-input {
  background: var(--ij-bg-light) !important;
  border: 1px solid var(--ij-border) !important;
  border-radius: 7px !important;
  color: var(--ij-main-text) !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  min-height: 38px !important;
}

/* Modern Field Group & Layout Spacing */
.frappe-control {
  margin-bottom: 16px !important;
}

/* Modern Checkbox styling */
.frappe-control[data-fieldtype="Check"] .checkbox {
  margin-top: 6px;
}

.frappe-control[data-fieldtype="Check"] input[type="checkbox"],
input[type="checkbox"].form-check-input {
  width: 17px !important;
  height: 17px !important;
  border-radius: 4px !important;
  border: 1.5px solid var(--ij-border) !important;
  cursor: pointer;
  accent-color: var(--ij-primary) !important;
  transition: all 0.15s ease;
}

.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(17, 61, 128, 0.15) !important;
  border-color: var(--ij-primary) !important;
}

/* ==========================================================================
   DROPDOWNS & AUTOCOMPLETE (Form Fields, Links, Grid Cells & Bootstrap Menus)
   Unified high-contrast styling for Light Mode, Application Dark Mode, and System Dark Mode.
   ========================================================================== */

/* 1. Awesomplete Container (All Form Link, Autocomplete, Table MultiSelect & Child Grids) */
.awesomplete > ul:not(.navbar-modal-wrapper *):not([class*="navbar"] *),
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) {
  background: var(--ij-surface-white) !important;
  border: 1px solid var(--ij-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(17, 61, 128, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
}

/* 2. Awesomplete Items - Default State */
.awesomplete > ul:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"] {
  padding: 8px 14px !important;
  color: var(--ij-main-text) !important;
  font-size: 13px !important;
  transition: background-color 0.1s ease, color 0.1s ease !important;
}

.awesomplete > [role="listbox"] > [role="option"] .link-option,
.awesomplete > [role="listbox"] > [role="option"] p {
  color: var(--ij-secondary-text) !important;
  transition: color 0.1s ease !important;
}

/* 3. Awesomplete Items - Hover & Selected State (Light Mode & Default) */
.awesomplete > ul:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li:hover,
.awesomplete > ul:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li:focus,
.awesomplete > ul:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li[aria-selected="true"],
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li:hover,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li:focus,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > li[aria-selected="true"],
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:hover,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:focus,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"][aria-selected="true"] {
  background-color: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
  font-weight: 600 !important;
}

.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:hover .link-option,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:focus .link-option,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"][aria-selected="true"] .link-option,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:hover p,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:focus p,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"][aria-selected="true"] p,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"]:hover strong,
.awesomplete > [role="listbox"]:not(.navbar-modal-wrapper *):not([class*="navbar"] *) > [role="option"][aria-selected="true"] strong {
  color: var(--ij-primary) !important;
}

.awesomplete:not(.navbar-modal-wrapper *) mark {
  background-color: transparent !important;
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
}

/* 4. Bootstrap Dropdown Menus (Actions, Filters, Sort, List & Form Menus) */
.dropdown-menu {
  background-color: var(--ij-surface-white) !important;
  border: 1px solid var(--ij-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(17, 61, 128, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  padding: 6px !important;
}

.dropdown-item,
.dropdown-menu > li > a,
.dropdown-menu [role="menuitem"] {
  color: var(--ij-main-text) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  transition: background-color 0.1s ease, color 0.1s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitem"]:focus {
  background-color: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
  font-weight: 600 !important;
}

.dropdown-item:hover .menu-item-title,
.dropdown-item:focus .menu-item-title,
.dropdown-item:hover svg,
.dropdown-item:focus svg {
  color: var(--ij-primary) !important;
  stroke: var(--ij-primary) !important;
}

/* 5. Filter Dropdowns, Sort Selectors, Actions Button Groups */
.filter-selector .dropdown-menu .dropdown-item:hover,
.filter-selector .dropdown-menu .dropdown-item:focus,
.filter-popover .dropdown-item:hover,
.filter-popover .dropdown-item:focus,
.filter-box .dropdown-item:hover,
.filter-box .dropdown-item:focus,
.sort-selector .dropdown-menu .dropdown-item:hover,
.sort-selector .dropdown-menu .dropdown-item:focus,
.list-filters .dropdown-menu .dropdown-item:hover,
.list-filters .dropdown-menu .dropdown-item:focus,
.standard-filter-section .dropdown-menu .dropdown-item:hover,
.standard-filter-section .dropdown-menu .dropdown-item:focus,
.actions-btn-group .dropdown-menu .dropdown-item:hover,
.actions-btn-group .dropdown-menu .dropdown-item:focus {
  background-color: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
}

/* 6. DARK MODE FIX: Application Dark Mode ([data-theme="dark"], [data-theme-mode="dark"]) & System Dark Mode (prefers-color-scheme: dark)
      Prevents Frappe's dark tokens (--awesomplete-hover-bg / --fg-hover-color = #232323) from blacking out hovered options. */
[data-theme="dark"],
[data-theme-mode="dark"],
body[data-theme="dark"],
html[data-theme="dark"] {
  --awesomplete-hover-bg: var(--ij-bg-highlight) !important;
  --fg-hover-color: var(--ij-bg-highlight) !important;
}

[data-theme="dark"] .awesomplete > ul > li:hover,
[data-theme="dark"] .awesomplete > ul > li:focus,
[data-theme="dark"] .awesomplete > ul > li[aria-selected="true"],
[data-theme="dark"] .awesomplete > [role="listbox"] > li:hover,
[data-theme="dark"] .awesomplete > [role="listbox"] > li:focus,
[data-theme="dark"] .awesomplete > [role="listbox"] > li[aria-selected="true"],
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"]:hover,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"]:focus,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"],
[data-theme-mode="dark"] .awesomplete > ul > li:hover,
[data-theme-mode="dark"] .awesomplete > ul > li:focus,
[data-theme-mode="dark"] .awesomplete > ul > li[aria-selected="true"],
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > li:hover,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > li:focus,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > li[aria-selected="true"],
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"]:hover,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"]:focus,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"],
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active,
[data-theme-mode="dark"] .dropdown-item:hover,
[data-theme-mode="dark"] .dropdown-item:focus,
[data-theme-mode="dark"] .dropdown-item.active,
[data-theme-mode="dark"] .dropdown-item:active {
  background-color: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
}

[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"]:hover .link-option,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"]:focus .link-option,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"] .link-option,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"]:hover p,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"]:focus p,
[data-theme="dark"] .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"] p,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"]:hover .link-option,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"]:focus .link-option,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"] .link-option,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"]:hover p,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"]:focus p,
[data-theme-mode="dark"] .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"] p {
  color: var(--ij-primary) !important;
}

/* 7. System Dark Mode Media Query */
@media (prefers-color-scheme: dark) {
  :root,
  body {
    --awesomplete-hover-bg: var(--ij-bg-highlight) !important;
    --fg-hover-color: var(--ij-bg-highlight) !important;
  }

  .awesomplete > ul > li:hover,
  .awesomplete > ul > li:focus,
  .awesomplete > ul > li[aria-selected="true"],
  .awesomplete > [role="listbox"] > li:hover,
  .awesomplete > [role="listbox"] > li:focus,
  .awesomplete > [role="listbox"] > li[aria-selected="true"],
  .awesomplete > [role="listbox"] > [role="option"]:hover,
  .awesomplete > [role="listbox"] > [role="option"]:focus,
  .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"],
  .dropdown-item:hover,
  .dropdown-item:focus,
  .dropdown-item.active,
  .dropdown-item:active,
  .dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
    background-color: var(--ij-bg-highlight) !important;
    color: var(--ij-primary) !important;
  }

  .awesomplete > [role="listbox"] > [role="option"]:hover .link-option,
  .awesomplete > [role="listbox"] > [role="option"]:focus .link-option,
  .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"] .link-option,
  .awesomplete > [role="listbox"] > [role="option"]:hover p,
  .awesomplete > [role="listbox"] > [role="option"]:focus p,
  .awesomplete > [role="listbox"] > [role="option"][aria-selected="true"] p {
    color: var(--ij-primary) !important;
  }
}

/* 8. Dark Surfaces / Dark-Themed Dropdowns (When a dropdown container is explicitly dark) */
[data-theme="dark"] .dropdown-menu-dark,
[data-theme-mode="dark"] .dropdown-menu-dark,
.dark-theme .dropdown-menu,
.bg-dark .dropdown-menu,
[data-theme="dark"] .awesomplete-dark > [role="listbox"] {
  background-color: #182234 !important;
  border-color: #2B3A52 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .dropdown-menu-dark .dropdown-item,
[data-theme-mode="dark"] .dropdown-menu-dark .dropdown-item,
.dark-theme .dropdown-menu .dropdown-item,
.bg-dark .dropdown-menu .dropdown-item {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .dropdown-menu-dark .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu-dark .dropdown-item:focus,
[data-theme-mode="dark"] .dropdown-menu-dark .dropdown-item:hover,
[data-theme-mode="dark"] .dropdown-menu-dark .dropdown-item:focus,
.dark-theme .dropdown-menu .dropdown-item:hover,
.dark-theme .dropdown-menu .dropdown-item:focus,
.bg-dark .dropdown-menu .dropdown-item:hover,
.bg-dark .dropdown-menu .dropdown-item:focus {
  background-color: #243B61 !important;
  color: #FFFFFF !important;
}

/* 9. HTML Select Dropdown Options */
select.form-control option:hover,
select.form-control option:focus,
select.form-control option:checked {
  background-color: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
}

/* Explicit Modal Awesomebar Override to ensure source-order precedence over form-control */
.navbar-modal-wrapper #navbar-search,
.modal:has(#navbar-search) #navbar-search,
.modal:has(.navbar-modal-wrapper) #navbar-search,
.modal.awesomebar-modal #navbar-search,
.awesomebar-input-row #navbar-search,
input#navbar-search.form-control,
input#navbar-search.form-control:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.navbar-modal-wrapper .awesomplete > ul,
.navbar-modal-wrapper .awesomplete > [role="listbox"],
.modal:has(#navbar-search) .awesomplete > ul,
.modal:has(#navbar-search) .awesomplete > [role="listbox"],
.modal:has(.navbar-modal-wrapper) .awesomplete > ul,
.modal:has(.navbar-modal-wrapper) .awesomplete > [role="listbox"],
.modal.awesomebar-modal .awesomplete > ul,
.modal.awesomebar-modal .awesomplete > [role="listbox"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  position: static !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  width: 100% !important;
  display: block !important;
}

/* Hide multi-app selection screen */
.desk-app-page,
.desk-apps-grid,
.desk-apps-container {
  display: none !important;
}

/* Child tables / Grids */
.form-grid {
  border: 1.5px solid var(--ij-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.form-grid .grid-heading-row {
  background: var(--ij-bg-light) !important;
  border-bottom: 1.5px solid var(--ij-border) !important;
  color: var(--ij-secondary-text) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.form-grid .grid-row {
  border-bottom: 1px solid var(--ij-bg-light) !important;
  transition: background-color 0.12s ease;
}

.form-grid .grid-row:hover {
  background-color: var(--ij-bg-highlight) !important;
}

.form-grid .grid-footer-toolbar {
  background: var(--ij-bg-light) !important;
  border-top: 1px solid var(--ij-border) !important;
  padding: 8px 12px !important;
}

/* ==========================================================================
   BUTTONS (Prominent Primary Blue Actions & Hover Lift)
   ========================================================================== */
.btn {
  font-family: var(--font-stack) !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary,
.primary-action {
  background: linear-gradient(180deg, #164694 0%, #113D80 100%) !important;
  border: 1px solid #0D2E60 !important;
  color: var(--ij-surface-white) !important;
  box-shadow: 0 2px 5px rgba(17, 61, 128, 0.22) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.primary-action:hover,
.primary-action:focus {
  background: linear-gradient(180deg, #1C54AF 0%, #14448C 100%) !important;
  border-color: #113D80 !important;
  color: var(--ij-surface-white) !important;
  box-shadow: 0 6px 16px rgba(17, 61, 128, 0.35) !important;
  transform: translateY(-1.5px) !important;
}

.btn-primary:active,
.primary-action:active {
  background: var(--ij-primary-active) !important;
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(17, 61, 128, 0.25) !important;
}

.btn-default,
.btn-secondary {
  background: var(--ij-surface-white) !important;
  border: 1px solid var(--ij-border) !important;
  color: var(--ij-main-text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--ij-bg-highlight) !important;
  border-color: var(--ij-primary) !important;
  color: var(--ij-primary) !important;
}

.btn-danger {
  background: var(--ij-error-red) !important;
  border-color: var(--ij-error-red) !important;
  color: var(--ij-surface-white) !important;
}

.btn-danger:hover {
  background: #961515 !important;
  border-color: #961515 !important;
}

/* ==========================================================================
   FORM TABS & NAVIGATION (Clear Primary Blue Indicator)
   ========================================================================== */
.form-tabs .nav-link,
.nav-tabs .nav-link {
  color: var(--ij-secondary-text) !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
}

.form-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
  color: var(--ij-primary) !important;
}

.form-tabs .nav-link.active,
.nav-tabs .nav-link.active,
.nav-link.tab-active {
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
  border-bottom: 2.5px solid var(--ij-primary) !important;
  background: transparent !important;
}

/* Breadcrumbs with Primary Active Step */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}

.breadcrumb-item a {
  color: var(--ij-secondary-text) !important;
}

.breadcrumb-item a:hover {
  color: var(--ij-primary) !important;
}

.breadcrumb-item.active,
.breadcrumb-item:last-child a {
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   WORKSPACE KPI CARDS & SHORTCUTS (Adapted Corporate Sapphire Palette)
   ========================================================================== */
.layout-main,
.desk-body,
.page-container,
.layout-main-section,
.workspace-page,
.codex-editor,
.page-body {
  background: var(--ij-bg-light) !important;
}

.widget-group-title,
.module-section-title,
.workspace-title {
  color: var(--ij-main-text) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-left: 10px !important;
  border-left: 3.5px solid var(--ij-primary) !important;
  margin: 22px 0 14px 0 !important;
}

.frappe-card,
.widget,
.dashboard-widget-box,
.shortcut-widget-box,
.number-card-box,
.quick-list-box,
.quick-list-widget-box,
.onboarding-widget-box {
  background: var(--ij-surface-white) !important;
  border: 1px solid rgba(195, 198, 215, 0.65) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(12, 30, 60, 0.05), 0 1px 3px rgba(12, 30, 60, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.frappe-card:hover,
.widget:hover,
.dashboard-widget-box:hover {
  border-color: var(--ij-border) !important;
  box-shadow: 0 8px 24px rgba(17, 61, 128, 0.12), 0 2px 6px rgba(12, 30, 60, 0.04) !important;
  transform: translateY(-2px) !important;
}

/* Subtle Top-Border Accents Indicating Module Types */
.widget.number-card-box,
.number-card {
  border-top: 3.5px solid var(--ij-primary) !important; /* Corporate Primary Blue */
}

.widget.shortcut-widget-box,
.shortcut-widget-box {
  border-top: 3.5px solid var(--ij-purple-accent) !important; /* Purple Accent */
  border-radius: 12px !important;
}

.widget.quick-list-widget-box,
.widget.quick-list-box {
  border-top: 3.5px solid #0EA5E9 !important; /* Cyan Accent */
}

.widget.onboarding-widget-box {
  border-top: 3.5px solid var(--ij-pink-accent) !important; /* Pink Accent */
}

.widget.chart-widget-box,
.dashboard-widget-box {
  border-top: 3.5px solid var(--ij-primary) !important;
}

.widget .widget-body .number,
.number-card .number,
.widget.number-card-box .number {
  color: var(--ij-primary) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}

.widget-title,
.card-title {
  color: var(--ij-main-text) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.shortcut-widget-box:hover {
  border-color: var(--ij-purple-accent) !important;
  background-color: var(--ij-surface-white) !important;
  box-shadow: 0 8px 24px rgba(107, 56, 212, 0.14) !important;
  transform: translateY(-2.5px) !important;
}

.shortcut-widget-box:hover .widget-title {
  color: var(--ij-primary) !important;
}

.shortcut-widget-box:hover svg {
  stroke: var(--ij-purple-accent) !important;
}

/* ==========================================================================
   LIST VIEWS & DATATABLES (Modern Elevated Table & Filter Controls)
   ========================================================================== */
/* Modern Filter Bar Controls */
.standard-filter-section,
.list-filters,
.filter-section {
  margin-bottom: 12px !important;
}

.standard-filter-section input.form-control,
.standard-filter-section select.form-control,
.list-filters input.form-control,
.list-filters select.form-control,
.filter-selector .btn,
.filter-button-group .btn,
.sort-selector .btn {
  background: var(--ij-surface-white) !important;
  border: 1.5px solid var(--ij-border) !important;
  border-radius: 8px !important;
  color: var(--ij-main-text) !important;
  font-size: 12.5px !important;
  min-height: 34px !important;
  box-shadow: 0 1px 2px rgba(17, 61, 128, 0.03) !important;
  transition: all 0.15s ease !important;
}

.standard-filter-section input.form-control:focus,
.standard-filter-section select.form-control:focus,
.list-filters input.form-control:focus,
.list-filters select.form-control:focus {
  border-color: var(--ij-primary) !important;
  box-shadow: 0 0 0 3px rgba(17, 61, 128, 0.14) !important;
  background: var(--ij-surface-white) !important;
}

.filter-button-group .btn:hover,
.sort-selector .btn:hover,
.filter-selector .btn:hover {
  border-color: var(--ij-primary) !important;
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
}

/* Elevated List Card Wrapper */
.frappe-list {
  background: var(--ij-surface-white) !important;
  border: 1px solid rgba(195, 198, 215, 0.7) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(12, 30, 60, 0.05), 0 1px 3px rgba(12, 30, 60, 0.02) !important;
  margin: 10px 0 24px 0 !important;
}

.frappe-list .result-container {
  overflow-x: auto;
}

/* Modern List Header */
.list-row-head {
  background: linear-gradient(180deg, #F8FAFD 0%, #EEF2F9 100%) !important;
  border-bottom: 1.5px solid var(--ij-border) !important;
  color: var(--ij-secondary-text) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 14px !important;
  min-height: 42px !important;
}

/* Hide Heart / Like Icon in Header and Rows (Clutter Reduction) */
.list-row-head .list-liked-by-me,
.list-liked-by-me,
.list-row .like-action,
.list-row .like-icon,
.list-row-like,
.select-like:has(.like-action),
.liked-by-filter-button {
  display: none !important;
}

/* List Row Container & Clean Row Separation */
.list-row-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.list-row {
  border-bottom: 1px solid rgba(195, 198, 215, 0.45) !important;
  color: var(--ij-main-text) !important;
  min-height: 48px !important;
  padding: 8px 14px !important;
  background: var(--ij-surface-white) !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
}

/* Smooth Modern Hover State */
.list-row-container:hover .list-row,
.list-row:hover {
  background-color: #F8FAFF !important;
  box-shadow: inset 3.5px 0 0 var(--ij-primary) !important;
}

.list-row-container:hover .level-right,
.list-row:hover .level-right {
  background-color: #F8FAFF !important;
  box-shadow: none !important;
  border-left-color: transparent !important;
}

/* Selected List Row */
.list-row-container.selected .list-row,
.list-row.list-row-selected {
  background-color: var(--ij-bg-highlight) !important;
  box-shadow: inset 3.5px 0 0 var(--ij-primary) !important;
}

.list-row.list-row-selected .level-right {
  background-color: var(--ij-bg-highlight) !important;
}

/* Document Title Links in List */
.list-row .list-row-col a,
.frappe-list a[data-name],
.list-subject a,
.ellipsis a {
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.list-row .list-row-col a:hover,
.frappe-list a[data-name]:hover {
  color: var(--ij-primary-hover) !important;
  text-decoration: underline !important;
}

/* Tag & Filter Badges */
.filter-tag,
.filter-pill,
.standard-filter-section .tag {
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
  border: 1px solid rgba(17, 61, 128, 0.2) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  padding: 2px 8px !important;
}

/* List Paging Area */
.list-paging-area {
  background: var(--ij-surface-white) !important;
  border-top: 1px solid var(--ij-border) !important;
  padding: 12px 16px !important;
  border-radius: 0 0 12px 12px !important;
}

.page-link.active,
.pagination .page-item.active .page-link {
  background-color: var(--ij-primary) !important;
  border-color: var(--ij-primary) !important;
  color: var(--ij-surface-white) !important;
  font-weight: 700 !important;
}

/* Assignee Avatars */
.list-assignments .avatar,
.avatar.avatar-small,
.avatar.avatar-frame {
  border-radius: 50% !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  font-weight: 700 !important;
}

/* List Header Count Badge */
.list-count {
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  border: 1px solid rgba(17, 61, 128, 0.2) !important;
}

/* ==========================================================================
   FORM DETAIL VIEW: RIGHT-SIDEBAR (.form-sidebar)
   ========================================================================== */
.form-sidebar {
  background: var(--ij-surface-white) !important;
  border: 1px solid var(--ij-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(12, 30, 60, 0.05) !important;
  padding: 16px 14px !important;
  margin-top: 6px !important;
}

/* Hide Unused Clutter Options in Form Sidebar */
.form-sidebar .liked-by,
.form-sidebar .like-action,
.form-sidebar .like-icon,
.form-stats-likes .liked-by,
.form-stats-likes .like-action,
.form-sidebar .form-attachments,
.form-sidebar .form-tags,
.form-sidebar .form-shared,
.form-sidebar .sidebar-rating,
.form-sidebar .user-actions,
.form-sidebar .help-link {
  display: none !important;
}

/* Sidebar Image Section: ONLY display when NOT hidden */
.form-sidebar .sidebar-image-section {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 4px 12px 4px !important;
  border-bottom: 1px solid var(--ij-bg-light) !important;
}

/* Ensure Frappe's .hide on sidebar-image-section is strictly respected (e.g. Master DocTypes without image_field) */
.form-sidebar .sidebar-image-section.hide,
.form-sidebar .sidebar-image-section.hidden,
.form-sidebar .sidebar-image-section[style*="display: none"] {
  display: none !important;
}

/* Fix image & image-wrapper: suppress broken wireframe images */
.form-sidebar .sidebar-image:not([src]),
.form-sidebar .sidebar-image[src=""],
.form-sidebar .sidebar-image.hide,
.form-sidebar .sidebar-image.hidden {
  display: none !important;
}

/* Hide standard-image when hidden or empty */
.form-sidebar .sidebar-standard-image.hide,
.form-sidebar .sidebar-standard-image.hidden,
.form-sidebar .sidebar-standard-image .standard-image:empty {
  display: none !important;
}

/* Clean, modern image wrapper */
.form-sidebar .sidebar-image-wrapper {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide image upload hint / camera icons unless hovering */
.form-sidebar .sidebar-image-actions {
  display: none !important;
}
.form-sidebar .sidebar-image-wrapper:hover .sidebar-image-actions {
  display: block !important;
}

/* Real uploaded image styling */
.form-sidebar .sidebar-image {
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(17, 61, 128, 0.18) !important;
}

/* Modern Gradient Avatar Box */
.form-sidebar .sidebar-standard-image,
.form-sidebar .sidebar-standard-image .standard-image {
  background: linear-gradient(135deg, #113D80 0%, #1d52a2 55%, #6B38D4 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(17, 61, 128, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FFFFFF !important;
  width: 64px !important;
  height: 64px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Document Title & Monospace ID Badge */
.form-sidebar .sidebar-meta-details {
  padding: 12px 4px !important;
  border-bottom: 1px solid var(--ij-bg-light) !important;
}

.form-sidebar .form-title-text span.bold,
.form-sidebar .form-title-text {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ij-main-text) !important;
  letter-spacing: -0.01em !important;
  text-transform: capitalize !important;
}

.form-sidebar .form-name-container {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--ij-bg-highlight) !important;
  border: 1px solid rgba(17, 61, 128, 0.2) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  color: var(--ij-primary) !important;
  font-family: monospace !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
  cursor: pointer !important;
}

/* Quick Action Buttons (Edit, Print) */
.form-sidebar .form-title-edit,
.form-sidebar .form-print {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
  color: var(--ij-secondary-text) !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .form-title-edit:hover,
.form-sidebar .form-print:hover {
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
}

.form-sidebar .form-title-edit svg,
.form-sidebar .form-print svg {
  stroke: var(--ij-secondary-text) !important;
  width: 15px !important;
  height: 15px !important;
  transition: stroke 0.15s ease !important;
}

.form-sidebar .form-title-edit:hover svg,
.form-sidebar .form-print:hover svg {
  stroke: var(--ij-primary) !important;
}

/* Modern "Assign" Section */
.form-sidebar .form-assignments {
  background: var(--ij-bg-light) !important;
  border: 1px solid var(--ij-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-top: 14px !important;
}

.form-sidebar .add-assignment-label {
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ij-secondary-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.form-sidebar .add-assignment-label svg {
  stroke: var(--ij-primary) !important;
  width: 14px !important;
  height: 14px !important;
}

.form-sidebar .add-assignment-btn {
  color: var(--ij-primary) !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
}

.form-sidebar .assignments .assignment-row,
.form-sidebar .assignments .dialog-assignment-row,
.form-sidebar .assignments [data-user] {
  background: var(--ij-surface-white) !important;
  border: 1px solid rgba(195, 198, 215, 0.7) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.form-sidebar .assignments .dialog-assignment-row .assignee,
.form-sidebar .assignments [data-user] .assignee {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.form-sidebar .assignments .dialog-assignment-row .assignee span,
.form-sidebar .assignments [data-user] .assignee span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ij-main-text) !important;
  display: inline-block !important;
  max-width: 100% !important;
}

.form-sidebar .assignments .dialog-assignment-row .avatar,
.form-sidebar .assignments [data-user] .avatar {
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Modern Audit Trail Section */
.form-sidebar .sidebar-section.text-muted {
  background: var(--ij-bg-light) !important;
  border: 1px solid rgba(195, 198, 215, 0.5) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-top: 14px !important;
}

.form-sidebar .modified-by,
.form-sidebar .created-by {
  font-size: 11.5px !important;
  color: var(--ij-secondary-text) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
  line-height: 1.5 !important;
}

.form-sidebar .modified-by a,
.form-sidebar .created-by a {
  font-weight: 700 !important;
  color: var(--ij-primary) !important;
}

.form-sidebar .frappe-timestamp {
  color: var(--ij-muted-text) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  display: block !important;
}

/* ==========================================================================
   CHECKBOXES & RADIOS
   ========================================================================== */
input[type="checkbox"]:checked,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ij-primary) !important;
  border-color: var(--ij-primary) !important;
}

input[type="radio"]:checked {
  border-color: var(--ij-primary) !important;
  background-color: var(--ij-primary) !important;
}

/* ==========================================================================
   STATUS INDICATORS & BADGES (Strict Palette Pairing)
   ========================================================================== */
.indicator-pill,
.badge,
.status-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.indicator-pill.green,
.indicator-pill.success,
.badge.badge-success,
.status-badge-converted,
.status-badge-active {
  background: var(--ij-success-light) !important;
  color: var(--ij-success-green) !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
}
.indicator.green::before,
.indicator.success::before {
  background: var(--ij-success-green) !important;
}

.indicator-pill.red,
.indicator-pill.danger,
.badge.badge-danger,
.status-badge-lost,
.status-badge-cancelled {
  background: var(--ij-error-light) !important;
  color: var(--ij-error-red) !important;
  border: 1px solid rgba(186, 26, 26, 0.25) !important;
}
.indicator.red::before,
.indicator.danger::before {
  background: var(--ij-error-red) !important;
}

.indicator-pill.orange,
.indicator-pill.amber,
.indicator-pill.yellow,
.indicator-pill.warning,
.badge.badge-warning,
.status-badge-contacted,
.status-badge-in-progress {
  background: var(--ij-warning-light) !important;
  color: var(--ij-warning-amber) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
.indicator.orange::before,
.indicator.amber::before,
.indicator.yellow::before {
  background: var(--ij-warning-amber) !important;
}

.indicator-pill.purple,
.status-badge-qualified {
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-purple-accent) !important;
  border: 1px solid rgba(107, 56, 212, 0.25) !important;
}
.indicator.purple::before {
  background: var(--ij-purple-accent) !important;
}

.indicator-pill.pink,
.status-badge-vip {
  background: #FCE7F3 !important;
  color: var(--ij-pink-accent) !important;
  border: 1px solid rgba(219, 39, 119, 0.25) !important;
}
.indicator.pink::before {
  background: var(--ij-pink-accent) !important;
}

.indicator-pill.blue,
.status-badge-created {
  background: var(--ij-bg-highlight) !important;
  color: var(--ij-primary) !important;
  border: 1px solid rgba(17, 61, 128, 0.25) !important;
}
.indicator.blue::before {
  background: var(--ij-primary) !important;
}

/* ==========================================================================
   LOGIN PAGE BRANDING
   ========================================================================== */
body[data-route="login"],
.page-login {
  background: var(--ij-bg-light) !important;
}

body[data-route="login"] .page-card,
.page-login .page-card {
  background: var(--ij-surface-white) !important;
  border: 1px solid var(--ij-border) !important;
  border-top: 3.5px solid var(--ij-primary) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(17, 61, 128, 0.08) !important;
}

body[data-route="login"] .page-card-head .app-logo,
.page-login .app-logo {
  max-height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ==========================================================================
   SPLASH SCREEN: disabled
   Frappe's boot splash was restyled as a full-screen dark overlay. While the page was still
   loading the browser painted it only partly, which showed up as a dark block in the top-left
   corner on every refresh. The desk now shows the app background until the dashboard mounts.
   ========================================================================== */
.splash,
.centered.splash {
  display: none !important;
}

/* Opportunity keeps Frappe's native Attachments block: a submitted customer review is attached there as a link */
body[data-route^="Form/Opportunity/"] .form-sidebar .form-attachments {
  display: block !important;
}

/* Payment Log Table Styling & Full Width Expansion on Opportunity */
[data-fieldname="payment_logs"],
.frappe-control[data-fieldname="payment_logs"] {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
}

[data-fieldname="payment_logs"] .form-grid {
  width: 100% !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-fieldname="payment_logs"] .grid-body {
  width: 100% !important;
  overflow-x: auto !important;
}

[data-fieldname="payment_logs"] .grid-row,
[data-fieldname="payment_logs"] .grid-heading-row {
  width: 100% !important;
  display: flex !important;
}

[data-fieldname="payment_logs"] .grid-row .row,
[data-fieldname="payment_logs"] .grid-heading-row .row {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
}

[data-fieldname="payment_logs"] .grid-static-col {
  padding: 8px 10px !important;
}

[data-fieldname="payment_logs"] .grid-heading-row {
  background-color: #f8fafc !important;
  font-weight: 600 !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   TEAM AVAILABILITY OVERVIEW MODAL & RESPONSIVENESS
   ========================================================================== */
.team-availability-modal .modal-dialog {
  max-width: 820px !important;
  width: 95% !important;
  margin: 1.5rem auto !important;
}

.team-availability-container {
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* KPI Summary Cards: Single Horizontal Row Layout */
.team-availability-kpi-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

.team-kpi-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: auto !important;
  padding: 10px 6px !important;
  min-height: 56px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease-in-out;
}

.team-kpi-card .kpi-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

.team-kpi-card .kpi-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.team-kpi-card .kpi-dot.gray { background-color: #64748b !important; }
.team-kpi-card .kpi-dot.green { background-color: #10b981 !important; }
.team-kpi-card .kpi-dot.orange { background-color: #f59e0b !important; }
.team-kpi-card .kpi-dot.red { background-color: #ef4444 !important; }
.team-kpi-card .kpi-dot.blue { background-color: #3b82f6 !important; }

.team-kpi-card .kpi-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.team-kpi-card .kpi-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

/* KPI Card Theme Color Pairings */
.team-kpi-card.total-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.team-kpi-card.total-card .kpi-label { color: #475569 !important; }
.team-kpi-card.total-card .kpi-value { color: #1e293b !important; }

.team-kpi-card.checked-in-card {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
.team-kpi-card.checked-in-card .kpi-label,
.team-kpi-card.checked-in-card .kpi-value { color: #059669 !important; }

.team-kpi-card.checked-out-card {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
}
.team-kpi-card.checked-out-card .kpi-label,
.team-kpi-card.checked-out-card .kpi-value { color: #d97706 !important; }

.team-kpi-card.on-leave-card {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
.team-kpi-card.on-leave-card .kpi-label,
.team-kpi-card.on-leave-card .kpi-value { color: #dc2626 !important; }

.team-kpi-card.eligible-card {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
.team-kpi-card.eligible-card .kpi-label,
.team-kpi-card.eligible-card .kpi-value { color: #2563eb !important; }

/* Filter Bar Alignment */
.team-availability-filter-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.team-availability-filter-bar .filter-branch-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.team-availability-filter-bar .filter-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
}

.team-availability-filter-bar .infinity-branch-filter {
  width: 180px !important;
  height: 32px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border: 1px solid #cbd5e1 !important;
}

.team-availability-filter-bar .infinity-refresh-team-btn {
  height: 32px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Members Table Container & Scroll */
.team-availability-table-wrapper {
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.team-availability-table-wrapper table {
  margin-bottom: 0 !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.team-availability-table-wrapper thead th {
  position: sticky !important;
  top: 0 !important;
  background: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #475569 !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

.team-availability-table-wrapper tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Check-In Banner & Status Indicator Pill Fix */
.team-availability-container .team-status-pill,
.team-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 22px !important;
  box-sizing: border-box !important;
  gap: 6px !important;
}

.team-availability-container .team-status-pill::before,
.team-status-pill::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.team-status-pill.green {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
}
.team-status-pill.green::before {
  background-color: #059669 !important;
}

.team-status-pill.red {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
.team-status-pill.red::before {
  background-color: #dc2626 !important;
}

.team-status-pill.orange {
  background: #fff7ed !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
.team-status-pill.orange::before {
  background-color: #d97706 !important;
}

/* Action & Assignment Button Fixes */
.team-availability-container .infinity-member-toggle-btn {
  white-space: nowrap !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 72px !important;
  text-align: center !important;
}

.team-availability-container .infinity-member-asg-btn {
  white-space: nowrap !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  min-width: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .team-availability-modal .modal-dialog {
    max-width: 90vw !important;
    width: 90vw !important;
    margin: 1rem auto !important;
  }
}

@media (max-width: 767px) {
  .team-availability-modal .modal-dialog {
    max-width: 96vw !important;
    width: 96vw !important;
    margin: 0.5rem auto !important;
  }
  .team-availability-container {
    padding: 8px 10px !important;
  }
  .team-availability-kpi-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
  }
  .team-availability-kpi-row::-webkit-scrollbar {
    display: none !important;
  }
  .team-kpi-card {
    flex: 1 0 100px !important;
    min-width: 95px !important;
    padding: 8px 4px !important;
    min-height: 52px !important;
  }
  .team-kpi-card .kpi-label {
    font-size: 10px !important;
  }
  .team-kpi-card .kpi-value {
    font-size: 17px !important;
  }
  .team-availability-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .team-availability-filter-bar .filter-branch-group {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .team-availability-filter-bar .infinity-branch-filter {
    flex: 1 !important;
    width: auto !important;
  }
  .team-availability-filter-bar .infinity-refresh-team-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .team-availability-modal .modal-dialog {
    max-width: 98vw !important;
    width: 98vw !important;
    margin: 0.25rem auto !important;
  }
  .team-availability-container {
    padding: 6px 8px !important;
  }
}


/* ==========================================================================
   ALL DESK PAGES: back button instead of the header sidebar-collapse button (desktop).
   The sidebar keeps its own edge arrow for collapsing.
   ========================================================================== */
.ij-back-btn {
  display: none;
}

@media (min-width: 768px) {
  .page-head .page-title .sidebar-toggle-btn {
    display: none !important;
  }

  .page-head .page-title .ij-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 6px;
    color: #164687;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .page-head .page-title .ij-back-btn:hover {
    background: rgba(22, 70, 135, 0.08);
    color: #0d2e5c;
  }

  .ij-back-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* User-menu entries that do not apply to this user (e.g. My Employee without an Employee record) */
.infinity-user-dropdown-menu .ij-menu-hidden {
  display: none !important;
}