/* =================================================================
   VIEW MODES — COMPREHENSIVE SCALING
   Affects: body font, sidebar nav, table, form controls, badges,
            cards, buttons, modals, pagination, DataTable, icons,
            nav labels, spacing, and more.
   ================================================================= */

/* -----------------------------------------------------------------
   CSS CUSTOM PROPERTIES PER VIEW MODE
   These cascade into every component that uses them.
   ----------------------------------------------------------------- */

body.view-compact {
  /* Base typography */
  font-size: 0.8rem;

  /* Spacing scale */
  --vm-padding-xs:    2px;
  --vm-padding-sm:    4px;
  --vm-padding-md:    6px;
  --vm-padding-lg:    10px;
  --vm-padding-xl:    14px;
  --vm-gap-sm:        4px;
  --vm-gap-md:        6px;

  /* Nav / Sidebar */
  --vm-nav-item-py:   5px;
  --vm-nav-item-px:   8px;
  --vm-nav-font:      0.75rem;
  --vm-nav-sub-font:  0.68rem;
  --vm-nav-label:     0.55rem;
  --vm-nav-icon-size: 0.9rem;
  --vm-nav-emoji:     1rem;
  --vm-nav-gap:       7px;
  --vm-brand-h:       46px;

  /* Table */
  --vm-table-th:      0.68rem;
  --vm-table-td:      0.75rem;
  --vm-table-cell-py: 6px;
  --vm-table-cell-px: 8px;

  /* Forms */
  --vm-input-py:      4px;
  --vm-input-px:      8px;
  --vm-input-font:    0.78rem;
  --vm-label-font:    0.75rem;

  /* Buttons */
  --vm-btn-py:        4px;
  --vm-btn-px:        10px;
  --vm-btn-font:      0.75rem;

  /* Badges */
  --vm-badge-py:      2px;
  --vm-badge-px:      7px;
  --vm-badge-font:    0.62rem;

  /* Cards */
  --vm-card-header-py: 8px;
  --vm-card-header-px: 12px;
  --vm-card-body-py:  10px;
  --vm-card-body-px:  12px;

  /* Modals */
  --vm-modal-title:   0.875rem;
  --vm-modal-header-py: 10px;
  --vm-modal-header-px: 14px;

  /* KPI cards */
  --vm-kpi-icon-size: 32px;
  --vm-kpi-padding:   12px;

  /* DataTable controls */
  --vm-dt-btn-py:     3px;
  --vm-dt-btn-px:     8px;
  --vm-dt-btn-font:   0.68rem;
  --vm-dt-pag-py:     2px;
  --vm-dt-pag-px:     7px;
  --vm-dt-pag-font:   0.72rem;
}

body.view-cozy {
  font-size: 0.875rem;  /* default — 1rem was slightly large */

  --vm-padding-xs:    3px;
  --vm-padding-sm:    6px;
  --vm-padding-md:    8px;
  --vm-padding-lg:    12px;
  --vm-padding-xl:    16px;
  --vm-gap-sm:        6px;
  --vm-gap-md:        9px;

  --vm-nav-item-py:   7px;
  --vm-nav-item-px:   10px;
  --vm-nav-font:      0.82rem;
  --vm-nav-sub-font:  0.72rem;
  --vm-nav-label:     0.6rem;
  --vm-nav-icon-size: 1.05rem;
  --vm-nav-emoji:     1.15rem;
  --vm-nav-gap:       9px;
  --vm-brand-h:       56px;

  --vm-table-th:      0.75rem;
  --vm-table-td:      0.813rem;
  --vm-table-cell-py: 10px;
  --vm-table-cell-px: 12px;

  --vm-input-py:      8px;
  --vm-input-px:      12px;
  --vm-input-font:    0.875rem;
  --vm-label-font:    0.875rem;

  --vm-btn-py:        8px;
  --vm-btn-px:        16px;
  --vm-btn-font:      0.875rem;

  --vm-badge-py:      4px;
  --vm-badge-px:      10px;
  --vm-badge-font:    0.688rem;

  --vm-card-header-py: 12px;
  --vm-card-header-px: 16px;
  --vm-card-body-py:  14px;
  --vm-card-body-px:  16px;

  --vm-modal-title:   1rem;
  --vm-modal-header-py: 16px;
  --vm-modal-header-px: 20px;

  --vm-kpi-icon-size: 40px;
  --vm-kpi-padding:   16px;

  --vm-dt-btn-py:     4px;
  --vm-dt-btn-px:     10px;
  --vm-dt-btn-font:   0.75rem;
  --vm-dt-pag-py:     4px;
  --vm-dt-pag-px:     10px;
  --vm-dt-pag-font:   0.813rem;
}

body.view-comfortable {
  font-size: 1rem;

  --vm-padding-xs:    4px;
  --vm-padding-sm:    8px;
  --vm-padding-md:    12px;
  --vm-padding-lg:    18px;
  --vm-padding-xl:    24px;
  --vm-gap-sm:        8px;
  --vm-gap-md:        12px;

  --vm-nav-item-py:   10px;
  --vm-nav-item-px:   12px;
  --vm-nav-font:      0.9rem;
  --vm-nav-sub-font:  0.8rem;
  --vm-nav-label:     0.65rem;
  --vm-nav-icon-size: 1.15rem;
  --vm-nav-emoji:     1.3rem;
  --vm-nav-gap:       11px;
  --vm-brand-h:       64px;

  --vm-table-th:      0.8rem;
  --vm-table-td:      0.875rem;
  --vm-table-cell-py: 14px;
  --vm-table-cell-px: 16px;

  --vm-input-py:      10px;
  --vm-input-px:      14px;
  --vm-input-font:    0.9rem;
  --vm-label-font:    0.9rem;

  --vm-btn-py:        10px;
  --vm-btn-px:        20px;
  --vm-btn-font:      0.9rem;

  --vm-badge-py:      5px;
  --vm-badge-px:      13px;
  --vm-badge-font:    0.75rem;

  --vm-card-header-py: 16px;
  --vm-card-header-px: 20px;
  --vm-card-body-py:  20px;
  --vm-card-body-px:  20px;

  --vm-modal-title:   1.1rem;
  --vm-modal-header-py: 20px;
  --vm-modal-header-px: 24px;

  --vm-kpi-icon-size: 48px;
  --vm-kpi-padding:   20px;

  --vm-dt-btn-py:     5px;
  --vm-dt-btn-px:     13px;
  --vm-dt-btn-font:   0.8rem;
  --vm-dt-pag-py:     5px;
  --vm-dt-pag-px:     13px;
  --vm-dt-pag-font:   0.875rem;
}


/* =================================================================
   SIDEBAR — BRAND / HEADER
   ================================================================= */

body.view-compact .brand-link,
body.view-cozy    .brand-link,
body.view-comfortable .brand-link {
  height: var(--vm-brand-h) !important;
}

body.view-compact .brand-link .brand-text { font-size: 0.78rem !important; }
body.view-cozy    .brand-link .brand-text { font-size: 0.875rem !important; }
body.view-comfortable .brand-link .brand-text { font-size: 0.95rem !important; }


/* =================================================================
   SIDEBAR — EXPANDED TOP-LEVEL NAV ITEMS
   ================================================================= */

body.view-compact:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link,
body.view-cozy:not(.sidebar-collapse)    .nav-sidebar > .nav-item > .nav-link,
body.view-comfortable:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link {
  font-size:  var(--vm-nav-font) !important;
  padding:    var(--vm-nav-item-py) var(--vm-nav-item-px) !important;
  gap:        var(--vm-nav-gap) !important;
}

/* Submenu items */
body.view-compact:not(.sidebar-collapse) .nav-treeview .nav-link,
body.view-cozy:not(.sidebar-collapse)    .nav-treeview .nav-link,
body.view-comfortable:not(.sidebar-collapse) .nav-treeview .nav-link {
  font-size:   var(--vm-nav-sub-font) !important;
  padding-top:    var(--vm-padding-sm) !important;
  padding-bottom: var(--vm-padding-sm) !important;
  gap: var(--vm-gap-sm) !important;
}

/* h6 nav links */
body.view-compact h6.nav-link,
body.view-cozy    h6.nav-link,
body.view-comfortable h6.nav-link {
  font-size: var(--vm-nav-font) !important;
  padding:   var(--vm-nav-item-py) var(--vm-nav-item-px) !important;
  gap:       var(--vm-gap-sm) !important;
}

body.view-compact h6.nav-link p,
body.view-cozy    h6.nav-link p,
body.view-comfortable h6.nav-link p {
  font-size: var(--vm-nav-font) !important;
}


/* =================================================================
   SIDEBAR — COLLAPSED / ICON-LABEL MODE
   ================================================================= */

/* Label beneath icon (the tiny text under each icon) */
body.view-compact.sidebar-collapse .nav-sidebar .nav-link p,
body.view-cozy.sidebar-collapse    .nav-sidebar .nav-link p,
body.view-comfortable.sidebar-collapse .nav-sidebar .nav-link p {
  font-size: var(--vm-nav-label) !important;
}

/* Icon size — emoji */
body.view-compact.sidebar-collapse .nav-link .emoji,
body.view-cozy.sidebar-collapse    .nav-link .emoji,
body.view-comfortable.sidebar-collapse .nav-link .emoji {
  font-size: var(--vm-nav-emoji) !important;
}

/* Icon size — FA */
body.view-compact.sidebar-collapse .nav-link .fa-icon,
body.view-cozy.sidebar-collapse    .nav-link .fa-icon,
body.view-comfortable.sidebar-collapse .nav-link .fa-icon {
  font-size: var(--vm-nav-icon-size) !important;
}

/* Collapsed nav item padding */
body.view-compact.sidebar-collapse .nav-item.has-treeview > .nav-link,
body.view-compact.sidebar-collapse .nav-sidebar .nav-link {
  padding: 7px 2px 6px !important;
}

body.view-cozy.sidebar-collapse .nav-item.has-treeview > .nav-link,
body.view-cozy.sidebar-collapse .nav-sidebar .nav-link {
  padding: 9px 2px 8px !important;
}

body.view-comfortable.sidebar-collapse .nav-item.has-treeview > .nav-link,
body.view-comfortable.sidebar-collapse .nav-sidebar .nav-link {
  padding: 12px 2px 10px !important;
}

/* FA icon in expanded sidebar */
body.view-compact:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link .fa-icon,
body.view-compact:not(.sidebar-collapse) h6.nav-link .fa-icon {
  font-size: 0.78rem !important;
}
body.view-cozy:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link .fa-icon,
body.view-cozy:not(.sidebar-collapse) h6.nav-link .fa-icon {
  font-size: 0.85rem !important;
}
body.view-comfortable:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link .fa-icon,
body.view-comfortable:not(.sidebar-collapse) h6.nav-link .fa-icon {
  font-size: 0.92rem !important;
}

/* Emoji in expanded sidebar */
body.view-compact:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link .emoji {
  font-size: 1rem !important;
}
body.view-cozy:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link .emoji {
  font-size: 1.1rem !important;
}
body.view-comfortable:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link .emoji {
  font-size: 1.2rem !important;
}


/* =================================================================
   FLYOUT SUBMENU (collapsed sidebar popup)
   ================================================================= */

body.view-compact.sidebar-collapse .nav-treeview .nav-link,
body.view-cozy.sidebar-collapse    .nav-treeview .nav-link,
body.view-comfortable.sidebar-collapse .nav-treeview .nav-link {
  font-size:  var(--vm-nav-sub-font) !important;
  padding:    var(--vm-nav-item-py) 18px var(--vm-nav-item-py) 12px !important;
  gap:        var(--vm-gap-sm) !important;
}

body.view-compact.sidebar-collapse .nav-treeview::before,
body.view-cozy.sidebar-collapse    .nav-treeview::before,
body.view-comfortable.sidebar-collapse .nav-treeview::before {
  font-size: var(--vm-nav-label) !important;
}


/* =================================================================
   SIDEBAR FOOTER
   ================================================================= */

body.view-compact .sidebar-footer-name  { font-size: 0.65rem !important; }
body.view-compact .sidebar-footer-role  { font-size: 0.58rem !important; }
body.view-cozy    .sidebar-footer-name  { font-size: 0.72rem !important; }
body.view-cozy    .sidebar-footer-role  { font-size: 0.62rem !important; }
body.view-comfortable .sidebar-footer-name  { font-size: 0.8rem !important; }
body.view-comfortable .sidebar-footer-role  { font-size: 0.7rem !important; }

body.view-compact .sidebar-footer-avatar {
  width: 22px !important; height: 22px !important; font-size: 0.55rem !important;
}
body.view-cozy .sidebar-footer-avatar {
  width: 26px !important; height: 26px !important;
}
body.view-comfortable .sidebar-footer-avatar {
  width: 32px !important; height: 32px !important; font-size: 0.7rem !important;
}


/* =================================================================
   MAIN NAVBAR (top bar)
   ================================================================= */

body.view-compact .main-header.navbar { min-height: 46px; }
body.view-cozy    .main-header.navbar { min-height: 54px; }
body.view-comfortable .main-header.navbar { min-height: 62px; }

body.view-compact  .main-header .nav-link { font-size: 0.78rem !important; padding: 6px 10px !important; }
body.view-cozy     .main-header .nav-link { font-size: 0.875rem !important; }
body.view-comfortable .main-header .nav-link { font-size: 0.95rem !important; padding: 10px 14px !important; }

body.view-compact  #mainLogo { height: 34px !important; }
body.view-cozy     #mainLogo { height: 48px !important; }
body.view-comfortable #mainLogo { height: 56px !important; }


/* =================================================================
   TABLES — DataTable + .table
   ================================================================= */

/* thead */
body.view-compact  table.dataTable thead th,
body.view-compact  .table thead th {
  font-size:  var(--vm-table-th) !important;
  padding:    var(--vm-table-cell-py) var(--vm-table-cell-px) !important;
}
body.view-cozy     table.dataTable thead th,
body.view-cozy     .table thead th {
  font-size:  var(--vm-table-th) !important;
  padding:    var(--vm-table-cell-py) var(--vm-table-cell-px) !important;
}
body.view-comfortable table.dataTable thead th,
body.view-comfortable .table thead th {
  font-size:  var(--vm-table-th) !important;
  padding:    var(--vm-table-cell-py) var(--vm-table-cell-px) !important;
}

/* tbody */
body.view-compact  table.dataTable tbody td,
body.view-compact  .table tbody td {
  font-size:  var(--vm-table-td) !important;
  padding:    var(--vm-table-cell-py) var(--vm-table-cell-px) !important;
}
body.view-cozy     table.dataTable tbody td,
body.view-cozy     .table tbody td {
  font-size:  var(--vm-table-td) !important;
  padding:    var(--vm-table-cell-py) var(--vm-table-cell-px) !important;
}
body.view-comfortable table.dataTable tbody td,
body.view-comfortable .table tbody td {
  font-size:  var(--vm-table-td) !important;
  padding:    var(--vm-table-cell-py) var(--vm-table-cell-px) !important;
}

/* DataTable info / length */
body.view-compact  .dataTables_wrapper .dataTables_info,
body.view-compact  .dataTables_wrapper .dataTables_length select { font-size: 0.7rem !important; }
body.view-cozy     .dataTables_wrapper .dataTables_info,
body.view-cozy     .dataTables_wrapper .dataTables_length select { font-size: 0.75rem !important; }
body.view-comfortable .dataTables_wrapper .dataTables_info,
body.view-comfortable .dataTables_wrapper .dataTables_length select { font-size: 0.813rem !important; }

/* DataTable search input */
body.view-compact  .dataTables_wrapper .dataTables_filter input {
  padding: 4px 8px !important; font-size: 0.72rem !important;
}
body.view-cozy     .dataTables_wrapper .dataTables_filter input {
  padding: 6px 12px !important; font-size: 0.813rem !important;
}
body.view-comfortable .dataTables_wrapper .dataTables_filter input {
  padding: 8px 14px !important; font-size: 0.875rem !important;
}

/* DataTable pagination buttons */
body.view-compact  .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: var(--vm-dt-pag-font) !important;
  padding: var(--vm-dt-pag-py) var(--vm-dt-pag-px) !important;
}
body.view-cozy     .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: var(--vm-dt-pag-font) !important;
  padding: var(--vm-dt-pag-py) var(--vm-dt-pag-px) !important;
}
body.view-comfortable .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: var(--vm-dt-pag-font) !important;
  padding: var(--vm-dt-pag-py) var(--vm-dt-pag-px) !important;
}

/* DataTable export/action buttons */
body.view-compact  .dt-buttons .btn,
body.view-compact  .dt-action-btn {
  font-size: var(--vm-dt-btn-font) !important;
  padding: var(--vm-dt-btn-py) var(--vm-dt-btn-px) !important;
}
body.view-cozy     .dt-buttons .btn,
body.view-cozy     .dt-action-btn {
  font-size: var(--vm-dt-btn-font) !important;
  padding: var(--vm-dt-btn-py) var(--vm-dt-btn-px) !important;
}
body.view-comfortable .dt-buttons .btn,
body.view-comfortable .dt-action-btn {
  font-size: var(--vm-dt-btn-font) !important;
  padding: var(--vm-dt-btn-py) var(--vm-dt-btn-px) !important;
}


/* =================================================================
   FORMS — inputs, selects, labels, select2
   ================================================================= */

body.view-compact  .form-control,
body.view-compact  .form-select {
  font-size: var(--vm-input-font) !important;
  padding: var(--vm-input-py) var(--vm-input-px) !important;
}
body.view-cozy     .form-control,
body.view-cozy     .form-select {
  font-size: var(--vm-input-font) !important;
  padding: var(--vm-input-py) var(--vm-input-px) !important;
}
body.view-comfortable .form-control,
body.view-comfortable .form-select {
  font-size: var(--vm-input-font) !important;
  padding: var(--vm-input-py) var(--vm-input-px) !important;
}

/* Form labels */
body.view-compact  .form-label,
body.view-compact  label { font-size: var(--vm-label-font) !important; }
body.view-cozy     .form-label,
body.view-cozy     label { font-size: var(--vm-label-font) !important; }
body.view-comfortable .form-label,
body.view-comfortable label { font-size: var(--vm-label-font) !important; }

/* Select2 — selection box */
body.view-compact  .select2-container .select2-selection--single,
body.view-compact  .select2-container .select2-selection--multiple {
  min-height: 28px !important; font-size: 0.78rem !important;
}
body.view-compact  .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important; font-size: 0.78rem !important;
}
body.view-cozy     .select2-container .select2-selection--single,
body.view-cozy     .select2-container .select2-selection--multiple {
  min-height: 36px !important; font-size: 0.875rem !important;
}
body.view-cozy     .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important; font-size: 0.875rem !important;
}
body.view-comfortable .select2-container .select2-selection--single,
body.view-comfortable .select2-container .select2-selection--multiple {
  min-height: 42px !important; font-size: 0.9rem !important;
}
body.view-comfortable .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important; font-size: 0.9rem !important;
}

/* Select2 — dropdown list */
body.view-compact  .select2-results__option { font-size: 0.75rem !important; padding: 4px 8px !important; }
body.view-cozy     .select2-results__option { font-size: 0.813rem !important; padding: 6px 10px !important; }
body.view-comfortable .select2-results__option { font-size: 0.875rem !important; padding: 8px 12px !important; }

/* Flatpickr */
body.view-compact  .flatpickr-calendar { font-size: 0.72rem !important; }
body.view-cozy     .flatpickr-calendar { font-size: 0.813rem !important; }
body.view-comfortable .flatpickr-calendar { font-size: 0.875rem !important; }


/* =================================================================
   BUTTONS
   ================================================================= */

body.view-compact  .btn {
  font-size: var(--vm-btn-font) !important;
  padding: var(--vm-btn-py) var(--vm-btn-px) !important;
}
body.view-cozy     .btn {
  font-size: var(--vm-btn-font) !important;
  padding: var(--vm-btn-py) var(--vm-btn-px) !important;
}
body.view-comfortable .btn {
  font-size: var(--vm-btn-font) !important;
  padding: var(--vm-btn-py) var(--vm-btn-px) !important;
}


/* =================================================================
   BADGES
   ================================================================= */

body.view-compact  .badge,
body.view-compact  .crm-badge {
  font-size: var(--vm-badge-font) !important;
  padding: var(--vm-badge-py) var(--vm-badge-px) !important;
}
body.view-cozy     .badge,
body.view-cozy     .crm-badge {
  font-size: var(--vm-badge-font) !important;
  padding: var(--vm-badge-py) var(--vm-badge-px) !important;
}
body.view-comfortable .badge,
body.view-comfortable .crm-badge {
  font-size: var(--vm-badge-font) !important;
  padding: var(--vm-badge-py) var(--vm-badge-px) !important;
}


/* =================================================================
   CARDS
   ================================================================= */

body.view-compact  .card-header {
  font-size: 0.78rem !important;
  padding: var(--vm-card-header-py) var(--vm-card-header-px) !important;
}
body.view-cozy     .card-header {
  font-size: 0.875rem !important;
  padding: var(--vm-card-header-py) var(--vm-card-header-px) !important;
}
body.view-comfortable .card-header {
  font-size: 0.95rem !important;
  padding: var(--vm-card-header-py) var(--vm-card-header-px) !important;
}

body.view-compact  .card-body { padding: var(--vm-card-body-py) var(--vm-card-body-px) !important; }
body.view-cozy     .card-body { padding: var(--vm-card-body-py) var(--vm-card-body-px) !important; }
body.view-comfortable .card-body { padding: var(--vm-card-body-py) var(--vm-card-body-px) !important; }

body.view-compact  .card-title  { font-size: 0.875rem !important; }
body.view-cozy     .card-title  { font-size: 1rem !important; }
body.view-comfortable .card-title { font-size: 1.1rem !important; }


/* =================================================================
   KPI CARDS
   ================================================================= */

body.view-compact  .crm-kpi-card { padding: var(--vm-kpi-padding) !important; }
body.view-cozy     .crm-kpi-card { padding: var(--vm-kpi-padding) !important; }
body.view-comfortable .crm-kpi-card { padding: var(--vm-kpi-padding) !important; }

body.view-compact  .crm-kpi-icon {
  width: var(--vm-kpi-icon-size) !important; height: var(--vm-kpi-icon-size) !important;
  font-size: 0.9rem !important;
}
body.view-cozy     .crm-kpi-icon {
  width: var(--vm-kpi-icon-size) !important; height: var(--vm-kpi-icon-size) !important;
}
body.view-comfortable .crm-kpi-icon {
  width: var(--vm-kpi-icon-size) !important; height: var(--vm-kpi-icon-size) !important;
  font-size: 1.1rem !important;
}


/* =================================================================
   MODALS
   ================================================================= */

body.view-compact  .modal-header {
  padding: var(--vm-modal-header-py) var(--vm-modal-header-px) !important;
}
body.view-cozy     .modal-header {
  padding: var(--vm-modal-header-py) var(--vm-modal-header-px) !important;
}
body.view-comfortable .modal-header {
  padding: var(--vm-modal-header-py) var(--vm-modal-header-px) !important;
}

body.view-compact  .modal-header .modal-title { font-size: var(--vm-modal-title) !important; }
body.view-cozy     .modal-header .modal-title { font-size: var(--vm-modal-title) !important; }
body.view-comfortable .modal-header .modal-title { font-size: var(--vm-modal-title) !important; }

body.view-compact  .modal-body  { font-size: 0.8rem !important; padding: 14px !important; }
body.view-cozy     .modal-body  { font-size: 0.875rem !important; padding: 18px !important; }
body.view-comfortable .modal-body { font-size: 0.95rem !important; padding: 24px !important; }

body.view-compact  .modal-footer { padding: 8px 14px !important; }
body.view-cozy     .modal-footer { padding: 12px 18px !important; }
body.view-comfortable .modal-footer { padding: 16px 24px !important; }


/* =================================================================
   CONTENT HEADER (page title area)
   ================================================================= */

body.view-compact  [data-module] .content-header h1,
body.view-compact  [data-module] .content-header h3 {
  font-size: 1rem !important;
}
body.view-cozy     [data-module] .content-header h1,
body.view-cozy     [data-module] .content-header h3 {
  font-size: 1.25rem !important;
}
body.view-comfortable [data-module] .content-header h1,
body.view-comfortable [data-module] .content-header h3 {
  font-size: 1.4rem !important;
}

body.view-compact  [data-module] .content-header { padding: 10px 16px !important; }
body.view-cozy     [data-module] .content-header { padding: 16px 24px !important; }
body.view-comfortable [data-module] .content-header { padding: 20px 28px !important; }

body.view-compact  .breadcrumb-item,
body.view-compact  .breadcrumb-item a { font-size: 0.72rem !important; }
body.view-cozy     .breadcrumb-item,
body.view-cozy     .breadcrumb-item a { font-size: 0.813rem !important; }
body.view-comfortable .breadcrumb-item,
body.view-comfortable .breadcrumb-item a { font-size: 0.875rem !important; }


/* =================================================================
   FILTER TOGGLE BUTTON (y5-filter-toggle-btn)
   ================================================================= */

body.view-compact  .y5-filter-toggle-btn { font-size: 0.7rem !important; padding: 4px 5px 4px 10px !important; }
body.view-cozy     .y5-filter-toggle-btn { font-size: 0.78rem !important; }
body.view-comfortable .y5-filter-toggle-btn { font-size: 0.85rem !important; padding: 7px 8px 7px 14px !important; }


/* =================================================================
   SETTINGS SIDEBAR FORM
   ================================================================= */

body.view-compact  #settingsSidebar .form-label,
body.view-compact  #settingsSidebar label { font-size: 0.75rem !important; }
body.view-compact  #settingsSidebar h5    { font-size: 0.95rem !important; }
body.view-compact  #settingsSidebar h6    { font-size: 0.78rem !important; }

body.view-comfortable #settingsSidebar .form-label,
body.view-comfortable #settingsSidebar label { font-size: 0.9rem !important; }
body.view-comfortable #settingsSidebar h5    { font-size: 1.15rem !important; }
body.view-comfortable #settingsSidebar h6    { font-size: 0.95rem !important; }


/* =================================================================
   ALERTS & SECTION TITLES
   ================================================================= */

body.view-compact  .alert        { font-size: 0.78rem !important; padding: 8px 12px !important; }
body.view-cozy     .alert        { font-size: 0.875rem !important; }
body.view-comfortable .alert     { font-size: 0.95rem !important; padding: 14px 18px !important; }

body.view-compact  .crm-section-title { font-size: 0.813rem !important; }
body.view-cozy     .crm-section-title { font-size: 0.938rem !important; }
body.view-comfortable .crm-section-title { font-size: 1.05rem !important; }


/* =================================================================
   DROPDOWN MENUS
   ================================================================= */

body.view-compact  .dropdown-menu .dropdown-item { font-size: 0.78rem !important; padding: 5px 12px !important; }
body.view-cozy     .dropdown-menu .dropdown-item { font-size: 0.875rem !important; }
body.view-comfortable .dropdown-menu .dropdown-item { font-size: 0.95rem !important; padding: 9px 16px !important; }


/* =================================================================
   FOOTER
   ================================================================= */

body.view-compact  .main-footer { font-size: 0.75rem !important; padding: 6px 16px !important; }
body.view-cozy     .main-footer { font-size: 0.813rem !important; }
body.view-comfortable .main-footer { font-size: 0.875rem !important; padding: 14px 20px !important; }


/* =================================================================
   IDLE TIMER CHIP (navbar)
   ================================================================= */

body.view-compact  .idle-chip__label { font-size: 10px !important; }
body.view-cozy     .idle-chip__label { font-size: 12px !important; }
body.view-comfortable .idle-chip__label { font-size: 13px !important; }

/* =================================================================
   VIEW MODE — SIDEBAR TEXT FIX
   High-specificity overrides to beat the original sidebar selectors.
   Add AFTER sidebar.css and view_modes.css.
   ================================================================= */
 
/* -----------------------------------------------------------------
   COLLAPSED SIDEBAR — icon label (the tiny p beneath each icon)
   Original selector:
     .sidebar-mini.sidebar-collapse .main-sidebar .nav-link p
     .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p
   We beat it by prepending the body view class.
   ----------------------------------------------------------------- */
 
body.view-compact.sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
body.view-compact.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p,
body.view-compact .sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
body.view-compact .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p {
  font-size: 0.52rem !important;
  max-width: 4.2rem;
}
 
body.view-cozy.sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
body.view-cozy.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p,
body.view-cozy .sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
body.view-cozy .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p {
  font-size: 0.60rem !important;
  max-width: 4.2rem;
}
 
body.view-comfortable.sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
body.view-comfortable.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p,
body.view-comfortable .sidebar-mini.sidebar-collapse .main-sidebar .nav-link p,
body.view-comfortable .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p {
  font-size: 0.68rem !important;
  max-width: 4.6rem;
}
 
 
/* -----------------------------------------------------------------
   COLLAPSED SIDEBAR — icon size (emoji and fa-icon)
   Original selector:
     .sidebar-collapse .nav-link .emoji
     .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon
   ----------------------------------------------------------------- */
 
/* Emoji icon */
body.view-compact.sidebar-collapse .nav-link .emoji,
body.view-compact .sidebar-collapse .nav-link .emoji {
  font-size: 1.0rem !important;
}
 
body.view-cozy.sidebar-collapse .nav-link .emoji,
body.view-cozy .sidebar-collapse .nav-link .emoji {
  font-size: 1.15rem !important;
}
 
body.view-comfortable.sidebar-collapse .nav-link .emoji,
body.view-comfortable .sidebar-collapse .nav-link .emoji {
  font-size: 1.3rem !important;
}
 
/* FA icon */
body.view-compact.sidebar-collapse .nav-link .fa-icon,
body.view-compact.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon,
body.view-compact .sidebar-collapse .nav-link .fa-icon,
body.view-compact .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon {
  font-size: 0.88rem !important;
}
 
body.view-cozy.sidebar-collapse .nav-link .fa-icon,
body.view-cozy.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon,
body.view-cozy .sidebar-collapse .nav-link .fa-icon,
body.view-cozy .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon {
  font-size: 1.05rem !important;
}
 
body.view-comfortable.sidebar-collapse .nav-link .fa-icon,
body.view-comfortable.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon,
body.view-comfortable .sidebar-collapse .nav-link .fa-icon,
body.view-comfortable .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link .fa-icon {
  font-size: 1.18rem !important;
}
 
 
/* -----------------------------------------------------------------
   EXPANDED SIDEBAR — top-level nav link text (the p tag)
   Original selector:
     body:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link
   We need to override font-size for the <p> inside it.
   ----------------------------------------------------------------- */
 
body.view-compact:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link p,
body.view-compact:not(.sidebar-collapse) h6.nav-link p {
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
}
 
body.view-cozy:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link p,
body.view-cozy:not(.sidebar-collapse) h6.nav-link p {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
}
 
body.view-comfortable:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link p,
body.view-comfortable:not(.sidebar-collapse) h6.nav-link p {
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
}
 
 
/* -----------------------------------------------------------------
   EXPANDED SIDEBAR — submenu (treeview) nav link text (the p tag)
   Original selector:
     body:not(.sidebar-collapse) .nav-treeview .nav-link
   ----------------------------------------------------------------- */
 
body.view-compact:not(.sidebar-collapse) .nav-treeview .nav-link,
body.view-compact:not(.sidebar-collapse) .nav-treeview .nav-link p {
  font-size: 0.68rem !important;
}
 
body.view-cozy:not(.sidebar-collapse) .nav-treeview .nav-link,
body.view-cozy:not(.sidebar-collapse) .nav-treeview .nav-link p {
  font-size: 0.72rem !important;
}
 
body.view-comfortable:not(.sidebar-collapse) .nav-treeview .nav-link,
body.view-comfortable:not(.sidebar-collapse) .nav-treeview .nav-link p {
  font-size: 0.8rem !important;
}
 
 
/* -----------------------------------------------------------------
   FLYOUT SUBMENU (collapsed) — the p tag inside flyout nav links
   Original selector:
     .sidebar-collapse .nav-treeview .nav-link p
     .sidebar-mini.sidebar-collapse .nav-treeview .nav-link p
   ----------------------------------------------------------------- */
 
body.view-compact.sidebar-collapse .nav-treeview .nav-link p,
body.view-compact.sidebar-mini.sidebar-collapse .nav-treeview .nav-link p,
body.view-compact .sidebar-collapse .nav-treeview .nav-link p,
body.view-compact .sidebar-mini.sidebar-collapse .nav-treeview .nav-link p {
  font-size: 0.68rem !important;
}
 
body.view-cozy.sidebar-collapse .nav-treeview .nav-link p,
body.view-cozy.sidebar-mini.sidebar-collapse .nav-treeview .nav-link p,
body.view-cozy .sidebar-collapse .nav-treeview .nav-link p,
body.view-cozy .sidebar-mini.sidebar-collapse .nav-treeview .nav-link p {
  font-size: 0.72rem !important;
}
 
body.view-comfortable.sidebar-collapse .nav-treeview .nav-link p,
body.view-comfortable.sidebar-mini.sidebar-collapse .nav-treeview .nav-link p,
body.view-comfortable .sidebar-collapse .nav-treeview .nav-link p,
body.view-comfortable .sidebar-mini.sidebar-collapse .nav-treeview .nav-link p {
  font-size: 0.8rem !important;
}
 
 
/* -----------------------------------------------------------------
   FLYOUT SUBMENU — the nav-link itself (row font-size + padding)
   Original selector:
     .sidebar-collapse .nav-treeview .nav-link
     .sidebar-mini.sidebar-collapse .nav-treeview .nav-link
   ----------------------------------------------------------------- */
 
body.view-compact.sidebar-collapse .nav-treeview .nav-link,
body.view-compact.sidebar-mini.sidebar-collapse .nav-treeview .nav-link,
body.view-compact .sidebar-collapse .nav-treeview .nav-link,
body.view-compact .sidebar-mini.sidebar-collapse .nav-treeview .nav-link {
  font-size: 0.68rem !important;
  padding: 5px 14px 5px 10px !important;
}
 
body.view-cozy.sidebar-collapse .nav-treeview .nav-link,
body.view-cozy.sidebar-mini.sidebar-collapse .nav-treeview .nav-link,
body.view-cozy .sidebar-collapse .nav-treeview .nav-link,
body.view-cozy .sidebar-mini.sidebar-collapse .nav-treeview .nav-link {
  font-size: 0.72rem !important;
  padding: 7px 18px 7px 12px !important;
}
 
body.view-comfortable.sidebar-collapse .nav-treeview .nav-link,
body.view-comfortable.sidebar-mini.sidebar-collapse .nav-treeview .nav-link,
body.view-comfortable .sidebar-collapse .nav-treeview .nav-link,
body.view-comfortable .sidebar-mini.sidebar-collapse .nav-treeview .nav-link {
  font-size: 0.8rem !important;
  padding: 9px 20px 9px 14px !important;
}
 
 
/* -----------------------------------------------------------------
   FLYOUT SUBMENU — section title (::before pseudo-element)
   Original uses: content: attr(data-title) + font-size
   ----------------------------------------------------------------- */
 
body.view-compact.sidebar-collapse .nav-treeview::before,
body.view-compact.sidebar-mini.sidebar-collapse .nav-treeview::before,
body.view-compact .sidebar-collapse .nav-treeview::before,
body.view-compact .sidebar-mini.sidebar-collapse .nav-treeview::before {
  font-size: 0.58rem !important;
}
 
body.view-cozy.sidebar-collapse .nav-treeview::before,
body.view-cozy.sidebar-mini.sidebar-collapse .nav-treeview::before,
body.view-cozy .sidebar-collapse .nav-treeview::before,
body.view-cozy .sidebar-mini.sidebar-collapse .nav-treeview::before {
  font-size: 0.65rem !important;
}
 
body.view-comfortable.sidebar-collapse .nav-treeview::before,
body.view-comfortable.sidebar-mini.sidebar-collapse .nav-treeview::before,
body.view-comfortable .sidebar-collapse .nav-treeview::before,
body.view-comfortable .sidebar-mini.sidebar-collapse .nav-treeview::before {
  font-size: 0.72rem !important;
}