/* Mobile sidebar drawer loaded after app.css to override earlier responsive rules. */
.mobile-menu-toggle,
.mobile-sidebar-close,
.mobile-sidebar-overlay {
  display: none;
}

.mobile-sidebar-head .brand {
  margin-bottom: 0;
}

.mobile-card-list {
  display: none;
}

.help-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(59, 130, 246, .10);
  color: var(--primary-2);
  font-size: 1rem;
  line-height: 1;
}

.user-title-with-help {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
  line-height: 1.25;
}

.user-title-with-help .help-icon-btn {
  margin-top: .05rem;
}

.help-icon-btn:hover,
.help-icon-btn:focus {
  background: rgba(59, 130, 246, .18);
  color: var(--text);
}

.popover {
  max-width: min(90vw, 340px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(15, 23, 42, .98);
  color: var(--text);
  box-shadow: var(--shadow);
  direction: rtl;
  text-align: right;
  font-family: inherit;
}

.popover-header {
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-weight: 800;
}

.popover-body {
  color: var(--text-2);
  line-height: 1.8;
}

body.theme-light .popover {
  background: #fff;
  color: var(--text);
}

body.theme-light .popover-header {
  background: rgba(15, 23, 42, .035);
  color: var(--text);
}

body.theme-light .popover-body {
  color: var(--text-2);
}

@media (min-width: 1025px) {
  .mobile-sidebar-head .brand {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: 1.35rem;
  }

  .mobile-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(84vw, 330px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    border-left: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: 0 0 0 24px !important;
    box-shadow: -24px 0 55px rgba(0, 0, 0, .38) !important;
    transform: translateX(105%) !important;
    transition: transform .24s ease !important;
    z-index: 99;
  }

  .mobile-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--border);
  }

  .mobile-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, .07);
    color: var(--text);
    font-size: 1rem;
  }

  body.mobile-sidebar-open .mobile-sidebar-close {
    display: inline-flex;
  }

  .sidebar .nav {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .sidebar .nav-link {
    width: 100% !important;
    white-space: normal !important;
  }

  .sidebar .nav-link i {
    display: inline-block !important;
  }

  .logout-box {
    margin-top: 1rem !important;
  }

  .logout-box .btn {
    width: 100% !important;
  }

  body.mobile-sidebar-open {
    overflow: hidden;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  body.mobile-sidebar-open .mobile-sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  .topbar {
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
    margin-bottom: .75rem !important;
  }

  .topbar-search {
    order: 2 !important;
    flex: 1 1 240px !important;
  }

  .topbar-actions {
    order: 3 !important;
  }
}

@media (max-width: 768px) {
  .content {
    padding-top: .55rem !important;
  }

  .topbar {
    margin-bottom: .65rem !important;
  }

  .mobile-menu-toggle {
    order: 1 !important;
  }

  .topbar-search {
    flex: 1 1 calc(100% - 56px) !important;
  }

  .topbar-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .sidebar {
    width: min(88vw, 330px) !important;
  }

  .page-header {
    gap: .65rem !important;
    margin-bottom: 1rem !important;
  }

  .page-title,
  .brand-title,
  .detail-list dd,
  .fw-bold {
    overflow-wrap: anywhere;
  }

  .page-subtitle,
  .detail-list,
  .card,
  .glass-card {
    max-width: 100%;
  }

  .action-group {
    gap: .45rem !important;
  }

  .action-group .btn {
    min-width: 0;
  }

  .desktop-table-card {
    display: none !important;
  }

  .mobile-card-list {
    display: grid;
    gap: .85rem;
  }

  .mobile-data-card {
    padding: .95rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    max-width: 100%;
    overflow: hidden;
  }

  .mobile-data-row {
    display: grid;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .42rem 0;
    border-bottom: 1px solid var(--border);
  }

  .mobile-data-row:last-child {
    border-bottom: 0;
  }

  .mobile-data-row span,
  .mobile-card-description span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
  }

  .mobile-data-row strong,
  .mobile-card-description div,
  .mobile-data-card a {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .mobile-data-row strong[dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
    white-space: nowrap;
    overflow-x: auto;
  }

  .mobile-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .8rem;
  }

  .mobile-card-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 130px);
  }

  .mobile-card-description {
    display: grid;
    gap: .45rem;
    padding-top: .5rem;
  }

  body.theme-light .mobile-data-card {
    background: var(--surface);
  }
}

@media (max-width: 480px) {
  .content {
    padding: .5rem !important;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
  }

  .topbar-search {
    flex-basis: calc(100% - 50px) !important;
  }

  .sidebar {
    width: min(90vw, 320px) !important;
  }

  .mobile-sidebar-head {
    gap: .55rem;
  }

  .popover {
    max-width: calc(100vw - 1.5rem);
  }

  .page-title {
    font-size: 1.22rem !important;
    line-height: 1.45;
  }

  .page-subtitle,
  .detail-list dd,
  .table td,
  .table th {
    font-size: .88rem;
  }

  .fs-3 {
    font-size: 1.35rem !important;
  }

  .card-header {
    font-size: .95rem;
  }

  .action-group {
    width: 100%;
    align-items: stretch;
  }

  .action-group .btn {
    flex: 1 1 100%;
    width: 100%;
    padding-inline: .65rem;
  }

  .topbar-actions {
    gap: .45rem !important;
  }

  .topbar-actions .icon-btn {
    flex: 0 0 40px !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .table-responsive {
    max-width: calc(100vw - 1rem);
  }

  .mobile-data-card {
    padding: .8rem;
    border-radius: 16px;
  }

  .mobile-data-row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .mobile-card-actions .btn {
    flex-basis: 100%;
  }
}

@media (max-width: 380px) {
  .content {
    padding-inline: .4rem !important;
  }

  .topbar {
    gap: .45rem !important;
  }

  .page-title {
    font-size: 1.12rem !important;
  }

  .btn {
    font-size: .88rem;
  }
}

/* Final light-mode contrast overrides. This file loads after app.css. */
body.theme-light .card a,
body.theme-light .glass-card a,
body.theme-light .table a,
body.theme-light .mobile-data-card a,
body.theme-light .list-group-item a,
body.theme-light .attachment-name {
  color: #0f3f9e !important;
}

body.theme-light .card a:hover,
body.theme-light .card a:focus,
body.theme-light .table a:hover,
body.theme-light .table a:focus,
body.theme-light .mobile-data-card a:hover,
body.theme-light .mobile-data-card a:focus,
body.theme-light .list-group-item a:hover,
body.theme-light .list-group-item a:focus {
  color: #0b2f75 !important;
}

body.theme-light .topbar-actions > .btn.btn-outline-primary,
body.theme-light a.btn.btn-outline-primary,
body.theme-light button.btn.btn-outline-primary {
  color: #174ea6 !important;
  border-color: rgba(23, 78, 166, .62) !important;
  background: rgba(37, 99, 235, .10) !important;
  box-shadow: inset 0 0 0 1px rgba(23, 78, 166, .10);
}

body.theme-light .topbar-actions > .btn.btn-outline-primary:hover,
body.theme-light .topbar-actions > .btn.btn-outline-primary:focus,
body.theme-light a.btn.btn-outline-primary:hover,
body.theme-light a.btn.btn-outline-primary:focus,
body.theme-light button.btn.btn-outline-primary:hover,
body.theme-light button.btn.btn-outline-primary:focus {
  color: #fff !important;
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

body.theme-light a.btn.btn-outline-secondary,
body.theme-light button.btn.btn-outline-secondary,
body.theme-light span.btn.btn-outline-secondary,
body.theme-light .pagination-wrap .btn.btn-outline-secondary {
  color: #1f2937 !important;
  border-color: rgba(15, 23, 42, .42) !important;
  background: rgba(15, 23, 42, .06) !important;
}

body.theme-light a.btn.btn-outline-secondary:hover,
body.theme-light a.btn.btn-outline-secondary:focus,
body.theme-light button.btn.btn-outline-secondary:hover,
body.theme-light button.btn.btn-outline-secondary:focus,
body.theme-light .pagination-wrap .btn.btn-outline-secondary:hover,
body.theme-light .pagination-wrap .btn.btn-outline-secondary:focus {
  color: #0f172a !important;
  background: rgba(15, 23, 42, .13) !important;
  border-color: rgba(15, 23, 42, .56) !important;
}

body.theme-light .btn.btn-outline-secondary.disabled,
body.theme-light span.btn.btn-outline-secondary.disabled,
body.theme-light .btn.btn-outline-secondary:disabled {
  color: #475569 !important;
  border-color: rgba(15, 23, 42, .30) !important;
  background: rgba(15, 23, 42, .045) !important;
  opacity: .82 !important;
}

body.theme-light .logout-box .btn.btn-outline-light {
  color: #111827 !important;
  border-color: rgba(15, 23, 42, .50) !important;
  background: rgba(15, 23, 42, .07) !important;
  font-weight: 900;
}

body.theme-light .logout-box .btn.btn-outline-light:hover,
body.theme-light .logout-box .btn.btn-outline-light:focus {
  color: #fff !important;
  background: #334155 !important;
  border-color: #334155 !important;
}

body.theme-light .custom-file-upload,
body.theme-light label.custom-file-upload {
  color: #174ea6 !important;
  border-color: rgba(23, 78, 166, .55) !important;
  background: rgba(37, 99, 235, .10) !important;
  box-shadow: inset 0 0 0 1px rgba(23, 78, 166, .08);
}

body.theme-light .custom-file-upload:hover,
body.theme-light .custom-file-upload:focus-within {
  color: #0b2f75 !important;
  border-color: rgba(23, 78, 166, .72) !important;
  background: rgba(37, 99, 235, .14) !important;
}

body.theme-light .badge.text-bg-secondary,
body.theme-light .badge.text-bg-light {
  color: #111827 !important;
  background: #dbe4ef !important;
  border: 1px solid rgba(15, 23, 42, .30) !important;
}

body.theme-light .badge.text-bg-info {
  color: #0f172a !important;
  background: #bae6fd !important;
  border: 1px solid rgba(14, 116, 144, .30) !important;
}

body.theme-light .table,
body.theme-light .card .table,
body.theme-light .table-responsive .table {
  --bs-table-color: #111827 !important;
  --bs-table-border-color: rgba(15, 23, 42, .24) !important;
  color: #111827 !important;
}

body.theme-light .table td,
body.theme-light .table th {
  border-color: rgba(15, 23, 42, .24) !important;
}

body.theme-light .table thead th {
  color: #334155 !important;
  background: rgba(15, 23, 42, .065) !important;
  border-bottom-color: rgba(15, 23, 42, .30) !important;
}

body.theme-light .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(37, 99, 235, .075) !important;
  color: #0f172a !important;
}

body.theme-light .activity-log-table .badge.text-bg-primary,
body.theme-light .mobile-data-card .badge.text-bg-primary {
  color: #0b2f75 !important;
  background: #dbeafe !important;
  border: 1px solid rgba(29, 78, 216, .42) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

@media (min-width: 1025px) {
  .layout {
    display: flex !important;
    align-items: stretch !important;
  }

  .sidebar {
    flex: 0 0 clamp(248px, 20vw, 292px) !important;
    width: clamp(248px, 20vw, 292px) !important;
    max-width: 292px !important;
  }

  .content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - clamp(248px, 20vw, 292px)) !important;
    overflow-x: hidden !important;
  }

  .content-inner {
    max-width: min(1480px, 100%) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .sidebar {
    padding-inline: .95rem !important;
  }

  .content {
    padding-inline: 1rem !important;
  }
}

/* Presentation-only polish for finance and employee screens. */
.finance-subnav,
.activity-category-tabs {
  align-items: stretch;
  gap: .55rem;
  padding: .55rem;
}

.finance-subnav-link,
.activity-category-tab {
  justify-content: center;
  text-align: center;
  line-height: 1.35;
}

.finance-panel > .card-body {
  padding: 1.05rem;
}

.finance-table th,
.finance-table td {
  padding: .82rem .9rem;
  line-height: 1.6;
}

.finance-table thead th {
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 950;
  color: var(--muted);
}

.finance-table tbody td {
  border-color: rgba(148, 163, 184, .10);
}

.finance-table-wrap {
  scrollbar-width: thin;
}

.finance-transfer-card {
  align-items: flex-start;
  flex-wrap: wrap;
}

.finance-transfer-route {
  flex: 1 1 260px;
  min-width: 0;
  line-height: 1.55;
}

.finance-transfer-meta {
  flex: 2 1 520px;
  display: flex;
  align-items: center;
  gap: .5rem .7rem;
  flex-wrap: wrap;
  line-height: 1.55;
}

.finance-transfer-meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-report-filter {
  padding: 1rem;
}

.report-filter-actions,
.filter-card .action-group,
.finance-report-filter .action-group {
  gap: .5rem;
}

.salary-report-table {
  min-width: 1180px;
}

.salary-report-table th,
.salary-report-table td {
  text-align: center;
}

.salary-report-table th:nth-child(2),
.salary-report-table td:nth-child(2) {
  min-width: 190px;
  text-align: right;
}

.salary-report-table td:last-child {
  min-width: 260px;
}

.salary-report-table td:last-child .action-group {
  width: auto;
  justify-content: flex-start;
}

.cashbox-report-breakdown-table {
  min-width: 620px;
}

.cashbox-report-movement-table {
  min-width: 1160px;
}

.cashbox-report-movement-table th:nth-child(6),
.cashbox-report-movement-table td:nth-child(6) {
  min-width: 260px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cashbox-report-movement-table th:nth-child(7),
.cashbox-report-movement-table td:nth-child(7) {
  min-width: 150px;
}

.activity-log-row td {
  line-height: 1.65;
}

.activity-description {
  font-size: .93rem;
}

.activity-log-badge {
  letter-spacing: 0;
}

.finance-form-errors {
  margin-bottom: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(239, 68, 68, .44);
  border-radius: 16px;
  background: rgba(127, 29, 29, .32);
  color: #fecaca;
  font-weight: 850;
  line-height: 1.65;
}

.finance-form-errors strong {
  display: block;
  margin-bottom: .25rem;
  color: #fee2e2;
}

.finance-form-note {
  padding: .72rem .85rem;
  border: 1px solid rgba(96, 165, 250, .18);
  border-radius: 14px;
  background: rgba(59, 130, 246, .075);
  color: var(--text-2);
  font-weight: 850;
  line-height: 1.65;
}

.detail-list dt,
.detail-list dd,
.employee-summary-card,
.finance-balance-box {
  line-height: 1.6;
}

.employee-summary-grid {
  gap: .9rem;
}

.employee-month-advance-item {
  min-width: 0;
}

.employee-month-advance-meta,
.employee-month-advance-reason {
  overflow-wrap: anywhere;
}

body.theme-light .finance-table tbody td {
  border-color: rgba(15, 23, 42, .10);
}

body.theme-light .finance-form-errors {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

body.theme-light .finance-form-errors strong {
  color: #7f1d1d;
}

body.theme-light .finance-form-note {
  background: rgba(37, 99, 235, .055);
  border-color: rgba(37, 99, 235, .16);
  color: #334155;
}

@media (min-width: 769px) and (max-width: 1280px) {
  .finance-subnav-link {
    flex: 1 1 180px;
  }

  .activity-category-tab {
    flex: 1 1 130px;
  }
}

@media (max-width: 768px) {
  .finance-subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }

  .finance-subnav-link {
    min-height: 42px;
    padding: .5rem .6rem;
  }

  .finance-panel > .card-body {
    padding: .9rem;
  }

  .finance-table th,
  .finance-table td {
    padding: .72rem .78rem;
  }

  .finance-transfer-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .9rem;
  }

  .finance-transfer-route,
  .finance-transfer-meta {
    width: 100%;
    flex-basis: auto;
  }

  .finance-transfer-meta {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .employee-advance-list-amount {
    white-space: normal;
  }

  .salary-report-table td:last-child .action-group {
    width: 100%;
  }

  .salary-report-table td:last-child .btn {
    flex: 1 1 130px;
  }

  .activity-category-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activity-category-tab {
    min-height: 40px;
    padding: .45rem .55rem;
  }

  .employee-summary-grid,
  .employee-report-summary {
    grid-template-columns: 1fr !important;
  }

  .employee-summary-card {
    min-height: 92px;
  }

  .cashbox-report-movement-table {
    min-width: 1080px;
  }
}

@media (max-width: 420px) {
  .finance-subnav,
  .activity-category-tabs {
    grid-template-columns: 1fr;
  }

  .finance-card-header {
    align-items: flex-start;
  }

  .finance-card-header .text-muted {
    width: 100%;
    line-height: 1.6;
  }

  .finance-transfer-meta > span {
    width: 100%;
  }
}

/* Global shell safety overrides for browser zoom and dense RTL pages. */
:root {
  --shell-sidebar-width: clamp(248px, 19vw, 292px);
  --shell-content-padding-x: clamp(.95rem, 1.45vw, 1.6rem);
  --shell-content-padding-y: clamp(.95rem, 1.25vw, 1.35rem);
  --shell-card-gap: clamp(.75rem, 1vw, 1rem);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.layout,
.content,
.content-inner,
.page-header,
.topbar,
.card,
.glass-card,
.finance-panel,
.filter-card {
  min-width: 0;
}

@media (min-width: 1025px) {
  .layout {
    display: flex !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    overflow-x: clip !important;
  }

  .sidebar {
    flex: 0 0 var(--shell-sidebar-width) !important;
    inline-size: var(--shell-sidebar-width) !important;
    width: var(--shell-sidebar-width) !important;
    max-width: var(--shell-sidebar-width) !important;
    min-width: var(--shell-sidebar-width) !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: clamp(.85rem, 1.1vw, 1.25rem) !important;
  }

  .sidebar .nav {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .sidebar .nav-link {
    min-width: 0 !important;
    padding-inline: clamp(.62rem, .85vw, .9rem) !important;
    gap: .62rem !important;
  }

  .sidebar .nav-link span,
  .brand-title,
  .user-chip .fw-bold,
  .user-chip .small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .content {
    flex: 1 1 calc(100vw - var(--shell-sidebar-width)) !important;
    width: calc(100vw - var(--shell-sidebar-width)) !important;
    max-width: calc(100vw - var(--shell-sidebar-width)) !important;
    min-width: 0 !important;
    padding: var(--shell-content-padding-y) var(--shell-content-padding-x) 2rem !important;
    overflow-x: clip !important;
  }

  .content-inner {
    width: 100% !important;
    max-width: min(1480px, 100%) !important;
    margin-inline: auto !important;
  }
}

.page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--shell-card-gap) !important;
}

.page-header > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

.page-header .action-group,
.topbar-actions,
.finance-section-actions,
.project-dropdown-actions,
.report-filter-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem !important;
  min-width: 0 !important;
}

.page-header .action-group {
  justify-content: flex-start !important;
}

.page-header .action-group .btn,
.finance-section-actions .btn,
.report-filter-actions .btn,
.filter-card .action-group .btn {
  min-width: max-content;
  max-width: 100%;
}

.finance-subnav,
.activity-category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.finance-subnav-link,
.activity-category-tab {
  flex: 1 1 clamp(130px, 14vw, 210px) !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.filter-card,
.finance-report-filter {
  max-width: 100%;
  overflow: visible !important;
}

.filter-card .row,
.finance-report-filter .row {
  --bs-gutter-x: var(--shell-card-gap);
  --bs-gutter-y: var(--shell-card-gap);
  overflow: visible !important;
}

@media (min-width: 769px) {
  .filter-card .row > [class*="col-"],
  .finance-report-filter .row > [class*="col-"] {
    flex: 1 1 210px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: min(100%, 190px) !important;
  }

  .filter-card .row > .col-12,
  .finance-report-filter .row > .col-12 {
    flex-basis: 100% !important;
  }
}

.card,
.glass-card,
.finance-panel,
.reports-card,
.dashboard-panel {
  max-width: 100%;
}

.card-body {
  min-width: 0;
}

.table-responsive,
.finance-table-wrap,
.desktop-table-card {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.searchable-select-list {
  z-index: 3000 !important;
}

@media (max-width: 1280px) and (min-width: 1025px) {
  :root {
    --shell-sidebar-width: clamp(236px, 18.5vw, 268px);
    --shell-content-padding-x: .95rem;
  }

  .brand-mark {
    width: 40px !important;
    height: 40px !important;
  }

  .brand-title {
    font-size: .96rem !important;
  }

  .sidebar .nav-link {
    padding-block: .62rem !important;
    font-size: .94rem !important;
  }

  .finance-subnav-link {
    flex-basis: clamp(118px, 15vw, 180px) !important;
    padding-inline: .62rem !important;
  }
}

@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  .layout {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .content-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .finance-subnav,
  .activity-category-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-header .action-group,
  .filter-card .action-group,
  .finance-report-filter .action-group {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .page-header .action-group .btn,
  .filter-card .action-group .btn,
  .finance-report-filter .action-group .btn {
    flex: 1 1 150px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .finance-subnav,
  .activity-category-tabs {
    grid-template-columns: 1fr !important;
  }
}

/* Finance tabs: keep them as compact RTL pills after global zoom overrides. */
.finance-subnav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .45rem .5rem !important;
  margin: -.15rem 0 1rem !important;
  padding: .45rem !important;
  overflow: visible !important;
}

.finance-subnav .finance-subnav-link {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, 270px) !important;
  min-height: 36px !important;
  justify-content: center !important;
  padding: .42rem .78rem !important;
  border-radius: 999px !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.finance-subnav .finance-subnav-link.active {
  border-color: rgba(96, 165, 250, .38) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(34, 211, 238, .08)) !important;
  box-shadow: inset 0 -2px 0 rgba(96, 165, 250, .85), 0 8px 18px rgba(2, 6, 23, .10) !important;
}

.page-header:has(+ .finance-subnav) .action-group,
.finance-primary-actions,
.finance-section-actions {
  width: auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: .45rem !important;
}

.page-header:has(+ .finance-subnav) .action-group .btn,
.finance-primary-actions .btn,
.finance-section-actions .btn {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  white-space: normal !important;
}

@media (max-width: 768px) {
  .finance-subnav {
    display: flex !important;
    grid-template-columns: none !important;
    gap: .4rem !important;
  }

  .finance-subnav .finance-subnav-link {
    flex: 0 1 auto !important;
    max-width: min(100%, 240px) !important;
    min-height: 38px !important;
    padding: .45rem .68rem !important;
  }

  .page-header:has(+ .finance-subnav) .action-group {
    width: auto !important;
    justify-content: flex-start !important;
  }

  .page-header:has(+ .finance-subnav) .action-group .btn {
    flex: 0 1 auto !important;
    min-width: max-content !important;
  }
}

@media (max-width: 480px) {
  .finance-subnav {
    padding: .4rem !important;
  }

  .finance-subnav .finance-subnav-link {
    max-width: 100% !important;
    font-size: .9rem !important;
  }

  .page-header:has(+ .finance-subnav) .action-group {
    width: 100% !important;
    align-items: stretch !important;
  }

  .page-header:has(+ .finance-subnav) .action-group .btn {
    flex: 1 1 145px !important;
    min-width: 0 !important;
  }
}

/* Mobile drawer scroll lock: the page stays fixed while the drawer scrolls. */
@media (max-width: 1024px) {
  html.mobile-sidebar-open,
  body.mobile-sidebar-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.mobile-sidebar-open .mobile-sidebar-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    touch-action: none;
  }

  body .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(88vw, 330px) !important;
    max-width: min(88vw, 330px) !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    padding: .95rem !important;
    border-left: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: 0 0 0 24px !important;
    box-shadow: -24px 0 55px rgba(0, 0, 0, .38) !important;
    transform: translateX(105%) !important;
    transition: transform .24s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 99 !important;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .mobile-sidebar-head {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: inherit !important;
  }

  body.mobile-sidebar-open .mobile-sidebar-close {
    display: inline-flex !important;
    flex: 0 0 38px !important;
  }

  .sidebar .nav {
    flex: 0 0 auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .35rem !important;
    overflow: visible !important;
    padding: .15rem 0 .75rem !important;
    scrollbar-width: thin;
    touch-action: pan-y;
  }

  .sidebar .nav-link {
    flex: 0 0 auto !important;
    width: 100% !important;
    white-space: normal !important;
  }

  .logout-box {
    flex: 0 0 auto !important;
    margin-top: .75rem !important;
    padding-top: .75rem !important;
  }

  .logout-box .btn {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  body .sidebar {
    width: min(92vw, 320px) !important;
    max-width: min(92vw, 320px) !important;
    padding: .8rem !important;
  }

  .sidebar .nav {
    padding-bottom: .6rem !important;
  }
}

/* Final desktop shell stabilization. Keep desktop normal; leave mobile drawer rules above intact. */
@media (min-width: 1025px) {
  :root {
    --shell-sidebar-width: 280px;
    --shell-content-padding-x: clamp(1rem, 1.5vw, 1.5rem);
    --shell-content-padding-y: 1.25rem;
    --shell-card-gap: .9rem;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  .layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 var(--shell-sidebar-width) !important;
    width: var(--shell-sidebar-width) !important;
    min-width: var(--shell-sidebar-width) !important;
    max-width: var(--shell-sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem !important;
    overflow: hidden !important;
    transform: none !important;
    border-left: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    z-index: 20 !important;
  }

  .mobile-sidebar-head {
    display: block !important;
    position: static !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  .mobile-sidebar-close,
  .mobile-menu-toggle,
  .mobile-sidebar-overlay {
    display: none !important;
  }

  .sidebar .brand {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 1rem !important;
  }

  .sidebar .brand > div:last-child,
  .user-chip > div:last-child {
    min-width: 0 !important;
  }

  .sidebar .nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: .35rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: .15rem 0 .75rem !important;
    scrollbar-width: thin;
  }

  .sidebar .nav-link,
  .sidebar .nav-link.employee-portal-link {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
    padding: .68rem .8rem !important;
    white-space: normal !important;
    text-align: right !important;
  }

  .sidebar .nav-link i {
    display: inline-flex !important;
    flex: 0 0 1.15rem !important;
    width: 1.15rem !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .sidebar .nav-link span,
  .brand-title,
  .user-chip .fw-bold,
  .user-chip .small {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .logout-box {
    flex: 0 0 auto !important;
    margin-top: .8rem !important;
    padding-top: .75rem !important;
  }

  .logout-box .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: var(--shell-content-padding-y) var(--shell-content-padding-x) 2rem !important;
    overflow-x: hidden !important;
  }

  .content-inner {
    width: 100% !important;
    max-width: 1480px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  .topbar,
  .page-header {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: .85rem 1rem !important;
  }

  .page-header > div:first-child {
    flex: 1 1 320px !important;
    min-width: 0 !important;
  }

  .page-header .action-group,
  .finance-primary-actions,
  .finance-section-actions,
  .report-filter-actions,
  .filter-card .action-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .5rem !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .page-header .action-group .btn,
  .finance-primary-actions .btn,
  .finance-section-actions .btn,
  .report-filter-actions .btn,
  .filter-card .action-group .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .card,
  .glass-card,
  .finance-panel,
  .reports-card,
  .dashboard-panel,
  .filter-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .table-responsive,
  .finance-table-wrap,
  .desktop-table-card {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .finance-subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: -.15rem 0 1rem !important;
    padding: .45rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }

  .finance-subnav .finance-subnav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 260px !important;
    min-height: 36px !important;
    padding: .42rem .78rem !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --shell-sidebar-width: 260px;
    --shell-content-padding-x: 1rem;
  }

  .sidebar {
    padding: .9rem !important;
  }

  .sidebar .nav-link,
  .sidebar .nav-link.employee-portal-link {
    padding: .62rem .7rem !important;
    font-size: .94rem !important;
  }
}

/* Compact sidebar after moving user identity to the topbar account menu. */
@media (min-width: 1025px) {
  :root {
    --shell-sidebar-width: 252px;
  }

  .sidebar {
    padding: .82rem !important;
  }

  .mobile-sidebar-head {
    margin-bottom: .7rem !important;
  }

  .sidebar .brand {
    gap: .62rem !important;
    margin-bottom: .7rem !important;
  }

  .brand-mark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: 1.08rem !important;
  }

  .brand-title {
    font-size: .94rem !important;
    line-height: 1.35 !important;
  }

  .brand .small {
    font-size: .74rem !important;
    line-height: 1.35 !important;
  }

  .user-chip {
    display: none !important;
  }

  .sidebar .nav {
    gap: .24rem !important;
    padding-top: .1rem !important;
    padding-bottom: .45rem !important;
  }

  .sidebar .nav-link,
  .sidebar .nav-link.employee-portal-link {
    min-height: 38px !important;
    padding: .52rem .62rem !important;
    border-radius: 12px !important;
    gap: .55rem !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }

  .sidebar .nav-link i {
    flex-basis: 1rem !important;
    width: 1rem !important;
    font-size: .98rem !important;
  }

  .employee-portal-nav {
    margin: .35rem 0 .16rem !important;
    border-radius: 12px !important;
  }

  .employee-portal-title {
    min-height: 36px !important;
    padding: .44rem .62rem !important;
    font-size: .88rem !important;
  }

  .logout-box {
    display: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --shell-sidebar-width: 236px;
  }

  .sidebar .nav-link,
  .sidebar .nav-link.employee-portal-link {
    padding: .48rem .56rem !important;
    font-size: .88rem !important;
  }
}

@media (max-width: 1024px) {
  body .user-chip,
  body .logout-box {
    display: none !important;
  }
}

/* Polished compact FUTURE brand mark. */
.sidebar .brand {
  align-items: center !important;
  padding: .5rem .48rem .62rem !important;
  border: 1px solid rgba(96, 165, 250, .12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .10), rgba(15, 23, 42, .18));
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .16rem;
}

.sidebar .brand-mark {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border: 1px solid rgba(96, 165, 250, .26) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(2, 6, 23, .18) !important;
  color: #bfdbfe !important;
  overflow: hidden;
}

.sidebar .brand-logo-wrap {
  padding: 4px !important;
  background: rgba(15, 23, 42, .22) !important;
}

.sidebar .brand-mark:before {
  content: none;
  position: absolute;
  inset-inline-start: 0;
  inset-block: 6px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96, 165, 250, .95), rgba(34, 211, 238, .65));
}

.sidebar .brand-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar .brand-mark span {
  position: relative;
  z-index: 1;
  font-size: .92rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.04em;
}

.sidebar .brand-title {
  color: var(--text) !important;
  font-size: 1rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  text-indent: .13em;
  direction: ltr;
  text-align: right;
}

.brand-subtitle {
  color: rgba(191, 219, 254, .82) !important;
  font-size: .75rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.theme-light .sidebar .brand-mark {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(226, 232, 240, .74)) !important;
  border-color: rgba(37, 99, 235, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 22px rgba(15, 23, 42, .08) !important;
  color: #1d4ed8 !important;
}

body.theme-light .sidebar .brand {
  border-color: rgba(37, 99, 235, .13);
  background: linear-gradient(135deg, rgba(37, 99, 235, .075), rgba(255, 255, 255, .60));
}

body.theme-light .brand-subtitle {
  color: #475569 !important;
}

@media (min-width: 1025px) {
  .sidebar .brand {
    gap: .68rem !important;
    min-height: 52px !important;
    margin-bottom: .78rem !important;
  }
}

@media (max-width: 1024px) {
  body .sidebar .brand {
    gap: .62rem !important;
    min-width: 0 !important;
    padding: .48rem .5rem .56rem !important;
  }

  body .sidebar .brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }
}

@media (max-width: 480px) {
  body .sidebar .brand-title {
    font-size: .9rem !important;
  }

  .brand-subtitle {
    font-size: .72rem !important;
  }
}

/* Sidebar nav polish: active items stay contained and separator/scrollbar match the shell. */
.sidebar,
.sidebar .nav,
.sidebar .nav-link,
.sidebar .nav-link * {
  box-sizing: border-box;
}

.sidebar {
  border-left-color: rgba(148, 163, 184, .12) !important;
}

.sidebar .nav {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: .12rem .22rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: rgba(96, 165, 250, .36) rgba(15, 23, 42, .38) !important;
}

.sidebar .nav::-webkit-scrollbar {
  width: 9px;
}

.sidebar .nav::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .38) !important;
  border-radius: 999px;
}

.sidebar .nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 165, 250, .42), rgba(71, 85, 105, .78)) !important;
  border: 2px solid rgba(15, 23, 42, .38) !important;
  border-radius: 999px;
}

.sidebar .nav-link,
.sidebar .nav-link.employee-portal-link {
  position: relative !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  outline-offset: -2px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .nav-link.active,
.sidebar .nav-link.employee-portal-link:hover,
.sidebar .nav-link.employee-portal-link:focus,
.sidebar .nav-link.employee-portal-link.active {
  transform: none !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link.employee-portal-link.active {
  border-color: rgba(96, 165, 250, .28) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(255, 255, 255, .045)) !important;
  box-shadow: inset -3px 0 0 rgba(96, 165, 250, .82) !important;
}

.sidebar .nav-link span,
.sidebar .nav-link.employee-portal-link span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.theme-light .sidebar {
  border-left-color: rgba(15, 23, 42, .10) !important;
}

body.theme-light .sidebar .nav {
  scrollbar-color: rgba(37, 99, 235, .32) rgba(226, 232, 240, .72) !important;
}

body.theme-light .sidebar .nav::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, .72) !important;
}

body.theme-light .sidebar .nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(37, 99, 235, .38), rgba(100, 116, 139, .58)) !important;
  border-color: rgba(226, 232, 240, .72) !important;
}

body.theme-light .sidebar .nav-link.active,
body.theme-light .sidebar .nav-link.employee-portal-link.active {
  border-color: rgba(37, 99, 235, .20) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(255, 255, 255, .62)) !important;
  box-shadow: inset -3px 0 0 rgba(37, 99, 235, .70) !important;
}

@media (max-width: 1024px) {
  body .sidebar {
    border-left-color: rgba(148, 163, 184, .14) !important;
  }

  body .sidebar .nav {
    padding-inline: .1rem .18rem !important;
  }
}

/* Sidebar navigation groups: subtle SaaS-style sections without changing link behavior. */
.sidebar-nav {
  gap: .42rem !important;
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: .26rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: .18rem 0 .28rem;
}

.sidebar-nav-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .46rem .72rem .28rem;
  color: rgba(219, 234, 254, .82);
  font-size: .76rem;
  font-weight: 1000;
  line-height: 1.25;
  letter-spacing: .012em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav-label:before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 999px;
  background: rgba(96, 165, 250, .86);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.sidebar-nav-label:after {
  content: "";
  flex: 1 1 auto;
  min-width: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(96, 165, 250, .24), transparent);
}

.sidebar-nav-group + .sidebar-nav-group,
.employee-portal-nav + .sidebar-nav-group {
  margin-top: .36rem;
}

.sidebar .logout-box {
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: .55rem !important;
  padding-top: .62rem !important;
}

.sidebar .logout-box .btn {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  padding: .48rem .62rem !important;
  font-size: .88rem !important;
}

body.theme-light .sidebar-nav-label {
  color: rgba(30, 64, 175, .82);
}

body.theme-light .sidebar-nav-label:before {
  background: rgba(37, 99, 235, .78);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

body.theme-light .sidebar-nav-label:after {
  background: linear-gradient(90deg, rgba(37, 99, 235, .20), transparent);
}

@media (min-width: 1025px) {
  .sidebar-nav {
    gap: .3rem !important;
    padding-bottom: .35rem !important;
  }

  .sidebar-nav-group {
    gap: .2rem;
    padding-block: .12rem .2rem;
  }

  .sidebar-nav-label {
    padding: .38rem .62rem .22rem;
    font-size: .72rem;
  }
}

@media (max-width: 1024px) {
  body .sidebar-nav {
    gap: .36rem !important;
  }

  body .sidebar-nav-group {
    gap: .18rem;
    padding-block: .1rem .2rem;
  }

  body .sidebar-nav-label {
    padding-inline: .65rem;
  }

  body .sidebar .logout-box {
    display: block !important;
    margin-top: .75rem !important;
    padding-top: .72rem !important;
  }
}

/* Desktop app shell: keep the sidebar fixed and let only main content scroll. */
@media (min-width: 1025px) {
  html,
  body {
    height: 100% !important;
    overflow: hidden !important;
  }

  .layout {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  .sidebar {
    position: fixed !important;
    inset-block: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .sidebar .nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .content {
    flex: 0 0 calc(100vw - var(--shell-sidebar-width)) !important;
    width: calc(100vw - var(--shell-sidebar-width)) !important;
    max-width: calc(100vw - var(--shell-sidebar-width)) !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin-right: var(--shell-sidebar-width) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Activity Log controls: compact RTL tabs and aligned filter actions. */
.activity-category-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .42rem !important;
  max-width: 100% !important;
  margin: -.1rem 0 .95rem !important;
  padding: .38rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 999px !important;
  scrollbar-width: thin;
}

.activity-category-tab {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  min-height: 34px !important;
  padding: .36rem .78rem !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

.activity-category-tab.active {
  border-color: rgba(96, 165, 250, .42) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, .24), rgba(34, 211, 238, .08)) !important;
  box-shadow: inset 0 -2px 0 rgba(96, 165, 250, .88), 0 8px 18px rgba(2, 6, 23, .10) !important;
}

.activity-log-filter .row {
  align-items: end !important;
}

.activity-log-filter-actions-wrap {
  display: flex;
  justify-content: flex-start;
}

.activity-log-filter-actions {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  padding-top: .1rem;
}

.activity-log-filter-actions .btn {
  flex: 0 0 auto !important;
  min-width: 110px !important;
  width: auto !important;
}

@media (max-width: 768px) {
  .activity-category-tabs {
    border-radius: 18px !important;
    gap: .38rem !important;
    padding: .4rem !important;
  }

  .activity-category-tab {
    min-height: 36px !important;
    padding: .38rem .7rem !important;
  }

  .activity-log-filter-actions-wrap,
  .activity-log-filter-actions {
    width: 100% !important;
  }

  .activity-log-filter-actions .btn {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .activity-category-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    border-radius: 16px !important;
  }

  .activity-category-tab {
    flex: 1 1 calc(50% - .38rem) !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* Final mobile drawer fix: keep the drawer fixed while only its nav area scrolls. */
@media (max-width: 1024px) {
  html.mobile-sidebar-open,
  body.mobile-sidebar-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(88vw, 330px) !important;
    max-width: min(88vw, 330px) !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
    padding: .95rem !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    transform: translateX(105%) !important;
    overscroll-behavior: contain !important;
    z-index: 99 !important;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  body .mobile-sidebar-head {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
    margin-bottom: .75rem !important;
    padding-left: 2.7rem !important;
    background: transparent !important;
  }

  body .mobile-sidebar-close,
  body.mobile-sidebar-open .mobile-sidebar-close {
    display: inline-flex !important;
    position: absolute !important;
    top: .15rem !important;
    left: .15rem !important;
    right: auto !important;
    z-index: 4 !important;
  }

  body .sidebar .sidebar-nav,
  body .sidebar .nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: .35rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: .15rem 0 max(1rem, env(safe-area-inset-bottom)) !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body .sidebar .sidebar-nav-group,
  body .sidebar .employee-portal-nav,
  body .sidebar .nav-link {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .sidebar .nav-link {
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 480px) {
  body .sidebar {
    width: min(92vw, 320px) !important;
    max-width: min(92vw, 320px) !important;
    padding: .8rem !important;
  }
}

/* Final FUTURE logo polish: compact dark glass badge for contrast on the navy sidebar. */
.sidebar .brand {
  align-items: center !important;
  gap: .7rem !important;
  padding: .42rem .36rem .56rem !important;
  border-color: transparent !important;
  background: transparent !important;
}

.sidebar .brand-mark,
.sidebar .brand-logo-wrap {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  padding: 2px !important;
  border: 1px solid rgba(96, 165, 250, .28) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .78), rgba(30, 41, 59, .68)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(2, 6, 23, .24), 0 0 24px rgba(59, 130, 246, .12) !important;
  overflow: visible !important;
}

.sidebar .brand-logo {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  max-width: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: saturate(1.16) brightness(1.12) contrast(1.06) drop-shadow(0 3px 8px rgba(34, 211, 238, .16));
  mix-blend-mode: normal !important;
}

.sidebar .brand-copy {
  justify-content: center !important;
  gap: .18rem !important;
}

.sidebar .brand-title {
  font-size: 1.02rem !important;
  line-height: 1 !important;
}

.sidebar .brand-subtitle {
  font-size: .76rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 1024px) {
  body .sidebar .brand {
    gap: .64rem !important;
    padding: .42rem .28rem .52rem !important;
  }

  body .sidebar .brand-mark,
  body .sidebar .brand-logo-wrap {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    padding: 2px !important;
  }

  body .sidebar .brand-logo {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
}