/* 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);
}

body.theme-light .mobile-menu-toggle,
body.theme-light .mobile-sidebar-close {
  background: #fff;
  border-color: rgba(15, 23, 42, .18);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

body.theme-light .mobile-sidebar-overlay {
  background: rgba(15, 23, 42, .38);
}

@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;
  }
}

/* Mobile shell spacing: keep the drawer out of page flow and remove the old top gap. */
@media (max-width: 1024px) {
  .layout {
    display: block !important;
    min-height: 100dvh !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    transform: translateX(105%) !important;
  }

  .content {
    padding-top: .65rem !important;
  }

  .topbar {
    margin-top: 0 !important;
    margin-bottom: .55rem !important;
  }

  .page-header {
    margin-top: 0 !important;
  }
}

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

  .content-inner {
    padding-top: 0 !important;
  }

  .topbar {
    gap: .5rem !important;
    margin-bottom: .45rem !important;
  }

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

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

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

  .page-header {
    margin-bottom: .55rem !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;
  }
}

/* Final mobile shell compacting override. Keep this last so older shell rules cannot reserve top space. */
@media (max-width: 1024px) {
  body .layout {
    display: block !important;
    min-height: 100dvh !important;
  }

  body .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(84vw, 330px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    transform: translateX(105%) !important;
  }

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

  body .content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding-top: .55rem !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  body .content-inner {
    padding-top: 0 !important;
  }

  body .topbar {
    margin-top: 0 !important;
    margin-bottom: .45rem !important;
    align-items: center !important;
  }

  body .topbar-actions {
    width: auto !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  body .topbar-actions > .btn,
  body .topbar-actions .icon-btn,
  body .topbar-actions .account-toggle {
    flex: 0 0 auto !important;
  }

  body .page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    margin-top: 0 !important;
    margin-bottom: .65rem !important;
  }

  body .page-header > div:first-child {
    flex: 0 1 auto !important;
    width: 100% !important;
  }

  body .page-header > .action-group,
  body .page-header > .btn {
    width: auto !important;
    flex: 0 1 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  body .content {
    padding: .5rem .68rem 1.1rem !important;
  }

  body .topbar {
    gap: .5rem !important;
    margin-bottom: .4rem !important;
  }

  body .topbar-search {
    flex: 1 1 calc(100% - 108px) !important;
    order: 2 !important;
  }

  body .topbar-actions {
    width: auto !important;
    order: 3 !important;
    flex: 0 0 auto !important;
  }

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

  body .account-toggle {
    max-width: 44px !important;
    padding-inline: .35rem !important;
  }

  body .account-toggle .account-name,
  body .account-toggle .account-caret {
    display: none !important;
  }

  body .page-header {
    gap: .45rem !important;
    margin-bottom: .55rem !important;
  }

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

  body .page-header .action-group .btn {
    flex: 0 1 auto !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  body .content {
    padding: .42rem .55rem 1rem !important;
  }

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

  body .page-header {
    margin-bottom: .45rem !important;
  }
}

/* Final compact filter override: older mobile rules make filter cards and buttons too tall. */
@media (max-width: 768px) {
  body .filter-panel,
  body .filter-card.filter-panel,
  body .finance-report-filter.filter-panel {
    padding: .68rem .72rem !important;
    margin-bottom: .78rem !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  body .filter-grid,
  body .filter-panel .row,
  body .finance-report-filter.filter-panel .row {
    --bs-gutter-x: .52rem !important;
    --bs-gutter-y: .48rem !important;
    align-items: end !important;
    overflow: visible !important;
  }

  body .filter-grid > [class*="col-"],
  body .filter-panel .row > [class*="col-"],
  body .finance-report-filter.filter-panel .row > [class*="col-"] {
    min-width: 0 !important;
  }

  body .filter-panel .form-label {
    margin-bottom: .2rem !important;
    font-size: .76rem !important;
    line-height: 1.3 !important;
  }

  body .filter-panel .form-control,
  body .filter-panel .form-select,
  body .filter-panel .searchable-select-input {
    min-height: 36px !important;
    padding: .38rem .62rem !important;
    border-radius: 11px !important;
    font-size: .88rem !important;
    line-height: 1.28 !important;
  }

  body .filter-panel .form-select {
    padding-left: 1.8rem !important;
  }

  body .filter-actions-wrap {
    align-self: end !important;
  }

  body .filter-actions,
  body .filter-card .filter-actions,
  body .finance-report-filter .filter-actions,
  body .activity-log-page .activity-log-filter-actions,
  body .projects-list-page .projects-filter-actions,
  body .employees-list-page .employees-filter-actions,
  body .all-points-filter-actions,
  body .custody-filter-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .4rem !important;
    width: auto !important;
  }

  body .filter-actions .btn,
  body .filter-card .filter-actions .btn,
  body .finance-report-filter .filter-actions .btn,
  body .activity-log-page .activity-log-filter-actions .btn,
  body .projects-list-page .projects-filter-actions .btn,
  body .employees-list-page .employees-filter-actions .btn,
  body .all-points-filter-actions .btn,
  body .custody-filter-actions .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 84px !important;
    min-height: 36px !important;
    padding: .38rem .68rem !important;
    border-radius: 11px !important;
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 420px) {
  body .filter-panel,
  body .filter-card.filter-panel,
  body .finance-report-filter.filter-panel {
    padding: .62rem !important;
  }

  body .filter-grid,
  body .filter-panel .row {
    --bs-gutter-y: .42rem !important;
  }

  body .filter-actions,
  body .filter-card .filter-actions,
  body .finance-report-filter .filter-actions {
    width: 100% !important;
  }

  body .filter-actions .btn,
  body .filter-card .filter-actions .btn,
  body .finance-report-filter .filter-actions .btn {
    flex: 1 1 calc(50% - .4rem) !important;
    min-width: 0 !important;
  }
}

/* Final finance mobile RTL polish: keep heavily used finance pages compact and right-aligned. */
@media (max-width: 768px) {
  body .topbar {
    direction: rtl !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .42rem !important;
    margin-bottom: .34rem !important;
    text-align: right !important;
  }

  body .mobile-menu-toggle {
    order: 1 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  body .topbar-search {
    order: 2 !important;
    flex: 1 1 min(100%, 220px) !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  body .topbar-search .form-control {
    min-height: 38px !important;
    height: 38px !important;
    padding-block: .38rem !important;
    font-size: .88rem !important;
    text-align: right !important;
  }

  body .topbar-actions {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .38rem !important;
    margin: 0 !important;
  }

  body .topbar-actions .icon-btn,
  body .topbar-actions .account-toggle {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  body .page-header,
  body .finance-dashboard-header,
  body .cashbox-report-header,
  body .custody-report-header,
  body .salary-report-header,
  body .employee-statement-header,
  body .admin-custody-detail-page {
    align-items: flex-start !important;
    text-align: right !important;
    gap: .38rem !important;
    margin-bottom: .58rem !important;
  }

  body .page-header > div:first-child,
  body .page-header .page-title,
  body .page-header .page-subtitle {
    width: 100% !important;
    text-align: right !important;
  }

  body .page-title {
    margin-bottom: .16rem !important;
    font-size: 1.34rem !important;
    line-height: 1.25 !important;
  }

  body .page-subtitle {
    margin-bottom: 0 !important;
    font-size: .84rem !important;
    line-height: 1.55 !important;
  }

  body .page-header .action-group,
  body .salary-report-actions,
  body .employee-statement-actions,
  body .finance-primary-actions,
  body .finance-section-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .36rem !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .page-header .action-group .btn,
  body .salary-report-actions .btn,
  body .employee-statement-actions .btn,
  body .finance-primary-actions .btn,
  body .finance-section-actions .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: .34rem .58rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }

  body .finance-subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: .34rem !important;
    margin: -.1rem 0 .72rem !important;
    padding: .34rem !important;
    border-radius: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body .finance-subnav .finance-subnav-link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 34px !important;
    max-width: 230px !important;
    padding: .36rem .58rem !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  body .finance-dashboard-section {
    margin-bottom: .95rem !important;
  }

  body .finance-section-title,
  body .finance-dashboard-section .finance-section-title,
  body .finance-card-header,
  body .salary-report-panel-header {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    margin: .72rem 0 .52rem !important;
    padding: .58rem .66rem !important;
    text-align: right !important;
    font-size: .94rem !important;
    line-height: 1.35 !important;
  }

  body .finance-card-header {
    margin: 0 !important;
  }

  body .finance-card-header > span,
  body .finance-section-title > span,
  body .salary-report-panel-header span {
    min-width: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  body .finance-card-header .text-muted,
  body .finance-card-header small,
  body .salary-report-panel-header small {
    width: 100% !important;
    text-align: right !important;
    font-size: .72rem !important;
    line-height: 1.45 !important;
  }

  body .finance-panel,
  body .finance-section-card,
  body .finance-month-panel,
  body .finance-activity-panel,
  body .finance-summary-card,
  body .finance-mini-stat,
  body .finance-transaction-card,
  body .finance-transfer-card,
  body .salary-report-card,
  body .custody-report-card,
  body .employee-statement-hero,
  body .employee-statement-section,
  body .admin-custody-card {
    max-width: 100% !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 20px rgba(2, 6, 23, .08) !important;
    overflow: hidden !important;
    text-align: right !important;
  }

  body .finance-panel > .card-body,
  body .finance-section-card .card-body,
  body .finance-month-panel .card-body,
  body .finance-activity-panel .card-body,
  body .employee-statement-section .card-body,
  body .admin-custody-card > .card-body {
    padding: .62rem !important;
  }

  body .finance-summary-card .card-body,
  body .finance-mini-stat .card-body,
  body .cashbox-report-stat .card-body,
  body .custody-report-stat .card-body,
  body .employee-statement-summary-card .card-body {
    min-height: 72px !important;
    padding: .58rem .64rem !important;
    text-align: right !important;
  }

  body .finance-summary-card .stat-label,
  body .finance-mini-stat .stat-label,
  body .stat-label {
    font-size: .7rem !important;
    line-height: 1.32 !important;
    font-weight: 900 !important;
    text-align: right !important;
  }

  body .finance-summary-card .stat-number,
  body .finance-mini-stat .stat-number,
  body .stat-number,
  body .finance-amount {
    font-size: 1.12rem !important;
    line-height: 1.08 !important;
    font-weight: 1000 !important;
    overflow-wrap: anywhere !important;
  }

  body .finance-card-hint {
    margin-top: .18rem !important;
    font-size: .68rem !important;
    line-height: 1.35 !important;
    text-align: right !important;
  }

  body .finance-activity-grid,
  body .cashbox-report-summary-grid,
  body .custody-report-summary-grid,
  body .employee-statement-summary-grid,
  body .admin-custody-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    margin-bottom: .78rem !important;
  }

  body .finance-transaction-card,
  body .finance-transfer-card,
  body .finance-operation-row,
  body .admin-custody-transaction-card,
  body .employee-statement-row {
    align-items: flex-start !important;
    gap: .48rem !important;
    padding: .58rem .64rem !important;
    border-radius: 13px !important;
    text-align: right !important;
  }

  body .finance-transaction-main,
  body .finance-transaction-meta,
  body .finance-transfer-route,
  body .finance-transfer-meta,
  body .finance-operation-title,
  body .finance-operation-meta,
  body .admin-custody-transaction-main,
  body .admin-custody-transaction-meta {
    justify-content: flex-start !important;
    text-align: right !important;
  }

  body .salary-report-card-grid,
  body .custody-card-grid {
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }

  body .salary-report-card-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  body .salary-report-card-metrics,
  body .employee-statement-basic-grid,
  body .admin-custody-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .38rem !important;
  }
}

@media (max-width: 430px) {
  body .topbar {
    gap: .34rem !important;
  }

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

  body .topbar-actions {
    flex-basis: auto !important;
  }

  body .finance-activity-grid,
  body .cashbox-report-summary-grid,
  body .custody-report-summary-grid,
  body .employee-statement-summary-grid,
  body .admin-custody-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: .42rem !important;
  }

  body .page-header .action-group,
  body .salary-report-actions,
  body .employee-statement-actions {
    width: 100% !important;
  }

  body .page-header .action-group .btn,
  body .salary-report-actions .btn,
  body .employee-statement-actions .btn {
    flex: 1 1 calc(50% - .36rem) !important;
    text-align: center !important;
  }
}

/* Final global mobile header rhythm. This intentionally stays last. */
@media (max-width: 768px) {
  body .content {
    padding-top: .34rem !important;
  }

  body .content-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body .topbar {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu search actions" !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: .36rem !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 .28rem !important;
    padding: .28rem !important;
    direction: rtl !important;
    text-align: right !important;
  }

  body .mobile-menu-toggle {
    grid-area: menu !important;
    justify-self: start !important;
    align-self: center !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: none !important;
    margin: 0 !important;
  }

  body .topbar-search {
    grid-area: search !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 .66rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .42rem !important;
  }

  body .topbar-search i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: .95rem !important;
  }

  body .topbar-search .form-control,
  body .topbar-search input {
    height: 38px !important;
    min-height: 38px !important;
    padding: .34rem 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .86rem !important;
    line-height: 1.25 !important;
    text-align: right !important;
  }

  body .topbar-actions {
    grid-area: actions !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .3rem !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body .topbar-actions > .btn,
  body .topbar-actions .icon-btn,
  body .topbar-actions .account-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  body .account-toggle .account-name,
  body .account-toggle .account-caret,
  body .topbar-actions > .btn span:not(.account-avatar) {
    display: none !important;
  }

  body .account-avatar {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  body .page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .28rem !important;
    width: 100% !important;
    margin: .08rem 0 .46rem !important;
    padding: 0 !important;
    text-align: right !important;
  }

  body .page-header > div:first-child {
    width: 100% !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    text-align: right !important;
  }

  body .page-title {
    margin: 0 0 .12rem !important;
    font-size: clamp(1.18rem, 5.1vw, 1.38rem) !important;
    line-height: 1.22 !important;
    text-align: right !important;
  }

  body .page-subtitle {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .82rem !important;
    line-height: 1.48 !important;
    text-align: right !important;
  }

  body .page-header .action-group,
  body .page-header > .btn {
    margin-top: .12rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: .34rem !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .page-header .action-group .btn,
  body .page-header > .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: .34rem .56rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }

  body .page-header + .filter-panel,
  body .page-header + .filter-card,
  body .page-header + .finance-subnav,
  body .page-header + .row,
  body .page-header + .card,
  body .page-header + .glass-card {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body .content {
    padding: .3rem .48rem .95rem !important;
  }

  body .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: .3rem !important;
    margin-bottom: .22rem !important;
    padding: .24rem !important;
  }

  body .mobile-menu-toggle,
  body .topbar-actions > .btn,
  body .topbar-actions .icon-btn,
  body .topbar-actions .account-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
  }

  body .topbar-search {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: .58rem !important;
  }

  body .topbar-search .form-control,
  body .topbar-search input {
    height: 34px !important;
    min-height: 34px !important;
    font-size: .82rem !important;
  }

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

  body .page-header {
    margin-bottom: .38rem !important;
  }
}

/* Final narrow-phone balance: avoid cramping menu, search, and account icons into one row. */
@media (max-width: 430px) {
  body .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu spacer actions"
      "search search search" !important;
    row-gap: .3rem !important;
    column-gap: .34rem !important;
    margin-bottom: .26rem !important;
  }

  body .topbar::before {
    content: "";
    grid-area: spacer;
    min-width: 0;
  }

  body .mobile-menu-toggle {
    justify-self: start !important;
  }

  body .topbar-actions {
    justify-self: end !important;
    min-width: 0 !important;
  }

  body .topbar-search {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .page-header {
    gap: .22rem !important;
    margin-top: .02rem !important;
    margin-bottom: .36rem !important;
  }

  body .page-title {
    font-size: clamp(1.12rem, 5vw, 1.28rem) !important;
  }

  body .page-subtitle {
    font-size: .8rem !important;
    line-height: 1.45 !important;
  }

  body .card,
  body .glass-card,
  body .finance-panel,
  body .desktop-table-card,
  body .mobile-data-card,
  body .finance-section-card,
  body .finance-summary-card,
  body .finance-mini-stat,
  body .salary-report-card,
  body .custody-report-card,
  body .employee-statement-section {
    border-radius: 14px !important;
  }

  body .card-body,
  body .finance-panel > .card-body,
  body .mobile-data-card,
  body .filter-panel,
  body .filter-card.filter-panel {
    padding: .58rem !important;
  }

  body .finance-summary-card .card-body,
  body .finance-mini-stat .card-body,
  body .cashbox-report-stat .card-body,
  body .custody-report-stat .card-body,
  body .employee-statement-summary-card .card-body {
    min-height: 68px !important;
    padding: .52rem .58rem !important;
  }
}

/* Final mobile topbar search fix: keep icon and RTL placeholder from crowding. */
@media (max-width: 768px) {
  body .topbar-search {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .5rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    direction: rtl !important;
  }

  body .topbar-search i {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 1.05rem !important;
    width: 1.05rem !important;
    min-width: 1.05rem !important;
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  body .topbar-search .form-control,
  body .topbar-search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: .34rem .12rem .34rem .2rem !important;
    background: transparent !important;
    color: var(--text) !important;
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .topbar-search .form-control::placeholder,
  body .topbar-search input::placeholder {
    color: var(--muted) !important;
    opacity: .9 !important;
    direction: rtl !important;
    text-align: right !important;
  }
}

@media (max-width: 430px) {
  body .topbar-search {
    gap: .46rem !important;
    padding-inline: .62rem !important;
  }

  body .topbar-search .form-control,
  body .topbar-search input {
    padding-block: .3rem !important;
    font-size: .84rem !important;
  }
}

/* Final topbar search box rendering: one rounded RTL input with the icon inside. */
@media (max-width: 768px) {
  body .topbar-search {
    position: relative !important;
    display: block !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 13px !important;
    background: rgba(15, 23, 42, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 18px rgba(2, 6, 23, .08) !important;
    overflow: hidden !important;
    direction: rtl !important;
  }

  body .topbar-search i {
    position: absolute !important;
    top: 50% !important;
    right: .72rem !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body .topbar-search .form-control,
  body .topbar-search input {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: .38rem 2.15rem .38rem .72rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext !important;
    font-size: .86rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .topbar-search .form-control::placeholder,
  body .topbar-search input::placeholder {
    color: var(--muted) !important;
    opacity: .88 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  body.theme-light .topbar-search {
    background: #fff !important;
    border-color: rgba(15, 23, 42, .16) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
  }

  body.theme-light .topbar-search .form-control,
  body.theme-light .topbar-search input {
    color: #0f172a !important;
  }
}

@media (max-width: 430px) {
  body .topbar-search {
    height: 37px !important;
    min-height: 37px !important;
    border-radius: 12px !important;
  }

  body .topbar-search .form-control,
  body .topbar-search input {
    padding: .32rem 2rem .32rem .62rem !important;
    font-size: .84rem !important;
  }

  body .topbar-search i {
    right: .66rem !important;
  }
}

/* Mobile: page-level filters replace the global search, so remove it from the topbar. */
@media (max-width: 768px) {
  body .topbar {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu spacer actions" !important;
    margin-bottom: .24rem !important;
  }

  body .topbar::before {
    content: "";
    grid-area: spacer;
    min-width: 0;
  }

  body .topbar-search {
    display: none !important;
  }
}

@media (max-width: 430px) {
  body .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    grid-template-areas: "menu spacer actions" !important;
    row-gap: 0 !important;
    margin-bottom: .18rem !important;
  }
}

/* System-wide mobile polish pass: compact, RTL-first, and shared across app pages. */
@media (max-width: 768px) {
  body .content {
    padding: .34rem .62rem 1rem !important;
  }

  body .topbar {
    min-height: 42px !important;
    padding: .22rem .24rem !important;
    border-radius: 16px !important;
  }

  body .topbar-search {
    display: none !important;
  }

  body .mobile-menu-toggle,
  body .topbar-actions > .btn,
  body .topbar-actions .icon-btn,
  body .topbar-actions .account-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  body .topbar-actions {
    gap: .3rem !important;
    min-width: 0 !important;
  }

  body .page-header {
    gap: .26rem !important;
    margin: .04rem 0 .42rem !important;
    text-align: right !important;
  }

  body .page-title {
    margin: 0 !important;
    font-size: clamp(1.14rem, 4.8vw, 1.34rem) !important;
    line-height: 1.24 !important;
    text-align: right !important;
  }

  body .page-subtitle {
    margin: .1rem 0 0 !important;
    font-size: .81rem !important;
    line-height: 1.48 !important;
    text-align: right !important;
  }

  body .page-header .action-group,
  body .page-header > .btn,
  body .project-dropdown-actions,
  body .pdf-report-actions,
  body .reports-header-actions,
  body .finance-primary-actions,
  body .finance-section-actions,
  body .salary-report-actions,
  body .employee-statement-actions {
    justify-content: flex-start !important;
    gap: .34rem !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .page-header .action-group .btn,
  body .page-header > .btn,
  body .project-dropdown-actions .btn,
  body .pdf-report-actions .btn,
  body .reports-header-actions .btn,
  body .finance-primary-actions .btn,
  body .finance-section-actions .btn,
  body .salary-report-actions .btn,
  body .employee-statement-actions .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-height: 34px !important;
    min-width: 0 !important;
    padding: .34rem .58rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
  }

  body .filter-panel,
  body .filter-card,
  body .finance-report-filter,
  body .projects-filter-card,
  body .employees-filter-card,
  body .all-points-filter,
  body .activity-log-filter,
  body .finance-operation-filter,
  body .custody-filter-card,
  body .cashbox-report-filter,
  body .salary-report-filter,
  body .employee-statement-filter {
    padding: .62rem !important;
    margin-bottom: .68rem !important;
    border-radius: 15px !important;
  }

  body .filter-panel .form-label,
  body .filter-card .form-label,
  body .finance-report-filter .form-label {
    margin-bottom: .18rem !important;
    font-size: .74rem !important;
    line-height: 1.3 !important;
  }

  body .filter-panel .form-control,
  body .filter-panel .form-select,
  body .filter-card .form-control,
  body .filter-card .form-select,
  body .finance-report-filter .form-control,
  body .finance-report-filter .form-select,
  body .searchable-select-input {
    min-height: 35px !important;
    padding-block: .34rem !important;
    border-radius: 10px !important;
    font-size: .84rem !important;
    line-height: 1.3 !important;
  }

  body .filter-actions,
  body .filter-card .action-group,
  body .finance-report-filter .action-group,
  body .report-filter-actions {
    justify-content: flex-start !important;
    gap: .36rem !important;
    width: auto !important;
  }

  body .filter-actions .btn,
  body .filter-card .action-group .btn,
  body .finance-report-filter .action-group .btn,
  body .report-filter-actions .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 78px !important;
    min-height: 35px !important;
    padding: .34rem .6rem !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
  }

  body .finance-subnav {
    gap: .32rem !important;
    margin: -.04rem 0 .62rem !important;
    padding: .32rem !important;
    border-radius: 13px !important;
  }

  body .finance-subnav .finance-subnav-link,
  body .activity-category-tab {
    min-height: 32px !important;
    padding: .32rem .54rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }

  body .card,
  body .glass-card,
  body .finance-panel,
  body .desktop-table-card,
  body .mobile-data-card,
  body .reports-card,
  body .dashboard-panel,
  body .finance-section-card,
  body .finance-summary-card,
  body .finance-mini-stat,
  body .salary-report-card,
  body .custody-list-card,
  body .custody-report-card,
  body .employee-statement-hero,
  body .employee-statement-section,
  body .employee-detail-info-card,
  body .employee-detail-summary-card,
  body .point-map-card,
  body .point-files-card,
  body .point-info-card {
    max-width: 100% !important;
    border-radius: 14px !important;
    text-align: right !important;
    overflow: hidden !important;
  }

  body .card-body,
  body .finance-panel > .card-body,
  body .reports-card .card-body,
  body .dashboard-panel .card-body,
  body .employee-statement-section .card-body,
  body .point-map-card .card-body,
  body .point-files-card .card-body,
  body .point-info-card .card-body {
    padding: .62rem !important;
  }

  body .card-header,
  body .finance-card-header,
  body .dashboard-panel-header,
  body .reports-card-header,
  body .salary-report-panel-header {
    padding: .58rem .66rem !important;
    gap: .38rem !important;
    text-align: right !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body .mobile-data-card,
  body .project-list-row,
  body .employee-list-row,
  body .finance-operation-row,
  body .finance-transaction-card,
  body .finance-transfer-card,
  body .finance-activity-item,
  body .reports-preview-row,
  body .attachment-row,
  body .admin-custody-transaction-card,
  body .employee-statement-row,
  body .custody-list-card {
    padding: .58rem .64rem !important;
    gap: .42rem !important;
    border-radius: 13px !important;
    text-align: right !important;
  }

  body .finance-summary-card .card-body,
  body .finance-mini-stat .card-body,
  body .cashbox-report-stat .card-body,
  body .custody-report-stat .card-body,
  body .employee-statement-summary-card .card-body,
  body .reports-summary-card {
    min-height: 66px !important;
    padding: .52rem .58rem !important;
  }

  body .stat-label,
  body .finance-summary-card .stat-label,
  body .finance-mini-stat .stat-label,
  body .reports-summary-card span,
  body .mobile-data-row span,
  body .point-data-row span,
  body .technical-data-row span {
    font-size: .7rem !important;
    line-height: 1.32 !important;
    font-weight: 900 !important;
  }

  body .stat-number,
  body .finance-summary-card .stat-number,
  body .finance-mini-stat .stat-number,
  body .reports-summary-card strong,
  body .finance-amount {
    font-size: clamp(1rem, 4.2vw, 1.22rem) !important;
    line-height: 1.1 !important;
    font-weight: 1000 !important;
  }

  body .finance-activity-grid,
  body .cashbox-report-summary-grid,
  body .custody-report-summary-grid,
  body .employee-statement-summary-grid,
  body .reports-summary-grid,
  body .employee-detail-summary-grid,
  body .admin-custody-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .46rem !important;
  }

  body.theme-light .mobile-data-card,
  body.theme-light .finance-operation-row,
  body.theme-light .finance-activity-item,
  body.theme-light .reports-preview-row,
  body.theme-light .attachment-row,
  body.theme-light .project-list-row,
  body.theme-light .employee-list-row {
    background: linear-gradient(135deg, #fff, #f8fbff) !important;
    border-color: rgba(15, 23, 42, .12) !important;
  }
}

@media (max-width: 430px) {
  body .content {
    padding-inline: .48rem !important;
  }

  body .mobile-menu-toggle,
  body .topbar-actions > .btn,
  body .topbar-actions .icon-btn,
  body .topbar-actions .account-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  body .page-header {
    margin-bottom: .34rem !important;
  }

  body .filter-panel,
  body .filter-card,
  body .finance-report-filter {
    padding: .56rem !important;
  }

  body .finance-activity-grid,
  body .cashbox-report-summary-grid,
  body .custody-report-summary-grid,
  body .employee-statement-summary-grid,
  body .reports-summary-grid,
  body .employee-detail-summary-grid,
  body .admin-custody-metrics {
    gap: .4rem !important;
  }
}

/* PWA install CTA: readable on mobile without restoring the hidden global search. */
@media (max-width: 1024px) {
  body .topbar-actions .pwa-install-btn:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .32rem !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: 124px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    padding: 0 .52rem !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .topbar-actions .pwa-install-btn i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: .95rem !important;
    line-height: 1 !important;
  }

  body .topbar-actions .pwa-install-label {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 430px) {
  body .topbar-actions .pwa-install-btn:not([hidden]) {
    min-width: 70px !important;
    max-width: 82px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: .38rem !important;
    gap: .26rem !important;
  }

  body .topbar-actions .pwa-install-label {
    font-size: .72rem !important;
  }
}

@media (max-width: 390px) {
  body .topbar-actions .pwa-install-btn:not([hidden]) {
    min-width: 36px !important;
    max-width: 36px !important;
    width: 36px !important;
    padding-inline: 0 !important;
  }

  body .topbar-actions .pwa-install-label {
    display: none !important;
  }
}

@media (display-mode: standalone) {
  body .topbar-actions .pwa-install-btn,
  body .pwa-install-hint {
    display: none !important;
  }
}

/* Cashbox monthly report: mobile-only cards replace dense report tables. */
.cashbox-monthly-report-page .monthly-report-mobile-list {
  display: none;
}

.cashbox-monthly-report-page .monthly-report-amount {
  direction: ltr;
  unicode-bidi: plaintext;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  body .cashbox-monthly-report-page {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-filter {
    padding: .62rem !important;
    margin-bottom: .78rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-filter .row {
    --bs-gutter-x: .52rem;
    --bs-gutter-y: .5rem;
  }

  body .cashbox-monthly-report-page .cashbox-report-filter .form-label {
    font-size: .76rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-filter .form-control,
  body .cashbox-monthly-report-page .cashbox-report-filter .form-select,
  body .cashbox-monthly-report-page .cashbox-report-filter .searchable-select-input {
    min-height: 38px !important;
    font-size: .86rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-filter-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .42rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-filter-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: .42rem .5rem !important;
    font-size: .82rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
    margin-bottom: .8rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-stat .card-body {
    min-height: 74px !important;
    padding: .56rem .62rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-stat .stat-label {
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-stat .stat-number {
    font-size: 1.02rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-stat .finance-card-hint {
    display: none !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-note {
    margin-bottom: .8rem !important;
    font-size: .76rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-panel {
    margin-bottom: .78rem !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-panel .card-body {
    padding: .54rem !important;
  }

  body .cashbox-monthly-report-page .finance-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: .55rem !important;
    padding: .62rem .7rem !important;
  }

  body .cashbox-monthly-report-page .finance-card-header > span:first-child {
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }

  body .cashbox-monthly-report-page .finance-card-header .small {
    font-size: .68rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-panel .cashbox-report-table-wrap,
  body .cashbox-monthly-report-page .cashbox-report-panel .table-responsive,
  body .cashbox-monthly-report-page .cashbox-report-panel .finance-table-wrap {
    display: none !important;
  }

  body .cashbox-monthly-report-page .monthly-report-mobile-list {
    display: grid !important;
    gap: .48rem !important;
  }

  body .cashbox-monthly-report-page .monthly-report-mobile-card {
    display: flex !important;
    flex-direction: column !important;
    gap: .42rem !important;
    min-width: 0 !important;
    padding: .62rem .66rem !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(59, 130, 246, .032)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-align: right !important;
  }

  body .cashbox-monthly-report-page .monthly-report-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: .55rem !important;
    min-width: 0 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-card-head .cashbox-report-type-badge {
    justify-self: start !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: right !important;
    line-height: 1.35 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-amount {
    justify-self: end !important;
    color: #dbeafe !important;
    font-size: 1rem !important;
    font-weight: 1000 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body .cashbox-monthly-report-page .monthly-report-amount small {
    color: #bfdbfe !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-card-subhead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    padding-top: .08rem !important;
  }

  body .cashbox-monthly-report-page .monthly-report-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: .08rem .48rem !important;
    border-radius: 999px !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-meta-row {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: .34rem .48rem !important;
    color: var(--text-2) !important;
    font-size: .8rem !important;
    line-height: 1.5 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-meta-row span {
    color: var(--muted) !important;
    font-weight: 900 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-meta-row b {
    color: var(--text) !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
  }

  body .cashbox-monthly-report-page .monthly-report-note {
    padding: .45rem .52rem !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .026) !important;
    color: var(--text-2) !important;
    font-size: .8rem !important;
    font-weight: 850 !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  body .cashbox-monthly-report-page .monthly-report-empty {
    padding: .78rem !important;
    border: 1px dashed rgba(148, 163, 184, .18) !important;
    border-radius: 13px !important;
    color: var(--muted) !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  body .cashbox-monthly-report-page .movement-breakdown-card {
    gap: .36rem !important;
  }

  body .cashbox-monthly-report-page .movement-breakdown-card .monthly-report-card-head {
    align-items: center !important;
  }

  body .cashbox-monthly-report-page .monthly-report-card-muted {
    opacity: .68 !important;
  }

  body .cashbox-monthly-report-page .monthly-report-accent-in {
    border-inline-start: 4px solid rgba(34, 197, 94, .88) !important;
  }

  body .cashbox-monthly-report-page .monthly-report-accent-out {
    border-inline-start: 4px solid rgba(249, 115, 22, .9) !important;
  }
}

@media (max-width: 430px) {
  body .cashbox-monthly-report-page .cashbox-report-filter-actions {
    grid-template-columns: 1fr !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-summary-grid {
    gap: .42rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-stat .card-body {
    min-height: 68px !important;
    padding: .5rem .54rem !important;
  }

  body .cashbox-monthly-report-page .cashbox-report-stat .stat-number {
    font-size: .96rem !important;
  }

  body .cashbox-monthly-report-page .monthly-report-mobile-card {
    padding: .56rem .58rem !important;
    border-radius: 13px !important;
  }

  body .cashbox-monthly-report-page .monthly-report-card-head {
    grid-template-columns: 1fr !important;
    gap: .32rem !important;
  }

  body .cashbox-monthly-report-page .monthly-report-amount {
    justify-self: start !important;
    text-align: right !important;
  }

  body .cashbox-monthly-report-page .monthly-report-meta-row {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    font-size: .78rem !important;
  }
}

body.theme-light .cashbox-monthly-report-page .monthly-report-mobile-card {
  background: linear-gradient(135deg, #fff, rgba(37, 99, 235, .035)) !important;
  border-color: rgba(15, 23, 42, .10) !important;
}

body.theme-light .cashbox-monthly-report-page .monthly-report-amount {
  color: #1d4ed8 !important;
}

body.theme-light .cashbox-monthly-report-page .monthly-report-amount small {
  color: #475569 !important;
}

body.theme-light .cashbox-monthly-report-page .monthly-report-note {
  background: rgba(15, 23, 42, .025) !important;
  border-color: rgba(15, 23, 42, .08) !important;
  color: #334155 !important;
}

/* Finance dashboard mobile polish only. */
@media (max-width: 768px) {
  body .finance-dashboard-page .finance-dashboard-header {
    gap: .22rem !important;
    margin: 0 0 .34rem !important;
  }

  body .finance-dashboard-page .finance-dashboard-header .page-title {
    margin-bottom: .06rem !important;
    font-size: clamp(1.2rem, 5vw, 1.38rem) !important;
    line-height: 1.18 !important;
  }

  body .finance-dashboard-page .finance-dashboard-header .page-subtitle {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1.42 !important;
  }

  body .finance-dashboard-page .finance-primary-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .34rem !important;
    width: 100% !important;
    margin-top: .18rem !important;
    padding: .32rem !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .028) !important;
  }

  body .finance-dashboard-page .finance-primary-actions .btn {
    width: 100% !important;
    min-height: 32px !important;
    padding: .3rem .48rem !important;
    border-radius: 10px !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }

  body .finance-dashboard-page .finance-primary-actions .btn-primary {
    min-height: 34px !important;
    background: linear-gradient(135deg, var(--primary), #1d4ed8) !important;
  }

  body .finance-dashboard-page .finance-subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .28rem !important;
    margin: .02rem 0 .52rem !important;
    padding: .28rem !important;
    border-radius: 13px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
  }

  body .finance-dashboard-page .finance-subnav .finance-subnav-link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 30px !important;
    padding: .28rem .5rem !important;
    border-radius: 10px !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  body .finance-dashboard-page .finance-subnav .finance-subnav-link.active {
    background: rgba(59, 130, 246, .22) !important;
    border-color: rgba(96, 165, 250, .38) !important;
    box-shadow: inset 0 -2px 0 var(--primary-2) !important;
  }

  body .finance-dashboard-page .finance-dashboard-section {
    margin-bottom: .82rem !important;
  }

  body .finance-dashboard-page .finance-dashboard-section .finance-section-title {
    margin: .54rem 0 .38rem !important;
    padding: 0 !important;
    gap: .42rem !important;
    align-items: center !important;
  }

  body .finance-dashboard-page .finance-dashboard-section .finance-section-title > span {
    min-height: 0 !important;
    gap: .42rem !important;
    font-size: .92rem !important;
    line-height: 1.25 !important;
  }

  body .finance-dashboard-page .finance-dashboard-section .finance-section-title > span::before {
    width: 3px !important;
    height: 1.08em !important;
    flex-basis: 3px !important;
  }

  body .finance-dashboard-page .finance-section-title .btn,
  body .finance-dashboard-page .finance-section-actions .btn,
  body .finance-dashboard-page .finance-card-header a {
    min-height: 29px !important;
    padding: .24rem .48rem !important;
    border-radius: 9px !important;
    font-size: .74rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body .finance-dashboard-page .finance-section-title .finance-section-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: .3rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: .22rem !important;
    border-radius: 12px !important;
  }

  body .finance-dashboard-page .finance-section-card,
  body .finance-dashboard-page .finance-month-panel,
  body .finance-dashboard-page .finance-activity-panel {
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, .09) !important;
  }

  body .finance-dashboard-page .finance-section-card {
    padding: .52rem !important;
  }

  body .finance-dashboard-page .finance-month-panel .card-body,
  body .finance-dashboard-page .finance-activity-panel .card-body {
    padding: .56rem !important;
  }

  body .finance-dashboard-page .finance-summary,
  body .finance-dashboard-page .finance-month-summary {
    --bs-gutter-x: .44rem !important;
    --bs-gutter-y: .44rem !important;
    margin-bottom: .52rem !important;
  }

  body .finance-dashboard-page .finance-cashbox-summary .card-body,
  body .finance-dashboard-page .finance-summary-card .card-body,
  body .finance-dashboard-page .finance-mini-stat .card-body {
    min-height: 60px !important;
    padding: .5rem .56rem !important;
  }

  body .finance-dashboard-page .finance-summary-card .stat-label,
  body .finance-dashboard-page .finance-mini-stat .stat-label {
    font-size: .68rem !important;
    line-height: 1.28 !important;
  }

  body .finance-dashboard-page .finance-summary-card .stat-number,
  body .finance-dashboard-page .finance-mini-stat .stat-number {
    font-size: clamp(1rem, 4.3vw, 1.24rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }

  body .finance-dashboard-page .finance-card-hint {
    margin-top: .12rem !important;
    font-size: .66rem !important;
    line-height: 1.28 !important;
  }

  body .finance-dashboard-page .finance-activity-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .58rem !important;
    margin-bottom: 0 !important;
  }

  body .finance-dashboard-page .finance-activity-panel {
    min-height: 0 !important;
  }

  body .finance-dashboard-page .finance-card-header {
    min-height: 0 !important;
    padding: .5rem .58rem !important;
    gap: .35rem !important;
    align-items: center !important;
  }

  body .finance-dashboard-page .finance-card-header > span {
    font-size: .88rem !important;
    line-height: 1.25 !important;
    font-weight: 1000 !important;
  }

  body .finance-dashboard-page .finance-preview-list {
    gap: .42rem !important;
  }

  body .finance-dashboard-page .finance-activity-item,
  body .finance-dashboard-page .finance-dashboard-advance-list .finance-activity-item {
    min-height: 0 !important;
    padding: .48rem .56rem !important;
    gap: .22rem .48rem !important;
    border-radius: 12px !important;
  }

  body .finance-dashboard-page .finance-activity-main,
  body .finance-dashboard-page .finance-activity-meta {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    width: 100% !important;
  }

  body .finance-dashboard-page .finance-activity-title {
    font-size: .84rem !important;
    line-height: 1.32 !important;
    font-weight: 1000 !important;
  }

  body .finance-dashboard-page .finance-amount {
    font-size: .94rem !important;
    line-height: 1.1 !important;
    font-weight: 1000 !important;
  }

  body .finance-dashboard-page .finance-activity-meta,
  body .finance-dashboard-page .finance-activity-note {
    color: var(--muted) !important;
    font-size: .7rem !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
  }

  body .finance-dashboard-page .finance-empty-state {
    min-height: 50px !important;
    padding: .6rem !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
  }

  body.theme-light .finance-dashboard-page .finance-primary-actions {
    background: rgba(255, 255, 255, .72) !important;
    border-color: rgba(15, 23, 42, .10) !important;
  }
}

@media (max-width: 430px) {
  body .finance-dashboard-page .finance-section-title .finance-section-actions {
    width: 100% !important;
  }

  body .finance-dashboard-page .finance-section-actions .btn {
    flex: 1 1 calc(50% - .3rem) !important;
    text-align: center !important;
  }
}