/* ==========================================================================
   Nexa Accounting — Screen-Adaptive Responsive Typography & Alignment Engine
   Dynamically scales typography, button padding, and table metrics based on
   viewport width to completely eliminate text wrapping and messy misalignments.
   ========================================================================== */

:root {
  --side-width: 215px;

  /* Fluid typography tokens based on viewport dimensions */
  --font-h1: clamp(19px, 1.55vw, 24px);
  --font-h2: clamp(15.5px, 1.25vw, 19.5px);
  --font-h3: clamp(13px, 1.02vw, 15px);
  --font-base: clamp(12px, 0.9vw, 13.5px);
  --font-table: clamp(11px, 0.85vw, 12.5px);
  --font-table-th: clamp(10px, 0.76vw, 11.5px);
  --font-metric-val: clamp(16px, 1.3vw, 21px);
  --font-metric-lbl: clamp(10px, 0.76vw, 11.5px);
  --font-btn: clamp(11px, 0.8vw, 12.5px);
  --font-tab: clamp(11px, 0.8vw, 12.5px);
  --font-sm: clamp(11px, 0.82vw, 12.5px);
  --font-xs: clamp(9.5px, 0.72vw, 11px);
  --font-badge: clamp(10px, 0.74vw, 11px);

  /* Responsive spacing tokens */
  --pad-btn-y: clamp(5px, 0.45vw, 7.5px);
  --pad-btn-x: clamp(8px, 0.75vw, 12px);
  --pad-cell-y: clamp(6px, 0.55vw, 9.5px);
  --pad-cell-x: clamp(8px, 0.85vw, 14px);
  --pad-metric: clamp(9px, 0.9vw, 15px);
  --pad-card: clamp(12px, 1.1vw, 17px);
  --main-pad: clamp(14px, 1.5vw, 26px);
}

/* --------------------------------------------------------------------------
   1. Typography & Global Body Scaling
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.app {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.main {
  min-width: 0 !important;
  max-width: calc(100vw - var(--side-width, 215px)) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  background: var(--main-bg, radial-gradient(circle at 82% 0%, rgba(53, 109, 241, 0.16) 0%, transparent 48%),
              radial-gradient(circle at 18% 100%, rgba(46, 125, 79, 0.11) 0%, transparent 42%),
              linear-gradient(180deg, #cdd8e6 0%, #bacbde 100%)) !important;
  background-attachment: fixed !important;
}

@media print {
  body.printing-report,
  body.printing-modal,
  body.printing-report .main,
  body.printing-modal .main {
    background: #fff !important;
  }
}

#configurations,
#reports,
.view {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.side .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 0 10px !important;
}

.side .nexa-brand-logo {
  display: block !important;
  width: 100% !important;
  max-width: 170px !important;
  height: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Desktop Side Menu: Scrollbar hidden by default, revealed and active only on cursor hover */
.side,
.side > .nav,
.side .nav {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.side::-webkit-scrollbar,
.side > .nav::-webkit-scrollbar,
.side .nav::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  display: none !important;
  background: transparent !important;
}

.side:hover,
.side:hover > .nav,
.side:hover .nav,
.nav:hover {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent !important;
}

.side:hover::-webkit-scrollbar,
.side:hover > .nav::-webkit-scrollbar,
.side:hover .nav::-webkit-scrollbar,
.nav:hover::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}

.side:hover::-webkit-scrollbar-track,
.side:hover > .nav::-webkit-scrollbar-track,
.side:hover .nav::-webkit-scrollbar-track,
.nav:hover::-webkit-scrollbar-track {
  background: transparent !important;
}

.side:hover::-webkit-scrollbar-thumb,
.side:hover > .nav::-webkit-scrollbar-thumb,
.side:hover .nav::-webkit-scrollbar-thumb,
.nav:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32) !important;
  border-radius: 4px !important;
}

.side:hover::-webkit-scrollbar-thumb:hover,
.side:hover > .nav::-webkit-scrollbar-thumb:hover,
.side:hover .nav::-webkit-scrollbar-thumb:hover,
.nav:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55) !important;
}

body {
  font-size: var(--font-base) !important;
  line-height: 1.45 !important;
}

/* Headings scale fluidly with screen width */
.page-heading h1,
.auth-card h1 {
  font-size: var(--font-h1) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: -0.025em !important;
}

.report-document-head h2,
.modal-head h2 {
  font-size: var(--font-h2) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.card-head h3,
.report-nav-head b,
.auth-intro h1 {
  font-size: var(--font-h3) !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

.table-title h3,
.table-title > div > h3 {
  font-size: clamp(17.5px, 1.25vw, 20px) !important;
  font-weight: 750 !important;
  color: var(--tx-1,#111d2e) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.table-title span,
.table-title > div > span {
  font-size: 11.5px !important;
  color: var(--tx-3,#64748b) !important;
  font-weight: 450 !important;
  margin-top: 1px !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   2. Page Headings & Action Bars (No Staggered Wrapping)
   -------------------------------------------------------------------------- */
.page-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: clamp(6px, 0.8vw, 14px) !important;
  margin-bottom: clamp(10px, 0.9vw, 14px) !important;
  width: 100% !important;
}

.page-heading > div:first-child {
  min-width: fit-content !important;
  flex-shrink: 0 !important;
}

.page-heading .actions,
.table-title .actions {
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, 0.45vw, 8px) !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Action buttons and filters always keep clean single-line labels */
.button,
.filter,
.page-heading .button,
.page-heading .filter,
.table-title .button,
.table-title .filter {
  font-size: var(--font-btn) !important;
  padding: var(--pad-btn-y) var(--pad-btn-x) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}

/* Warehouse Filter: Single unified pill control with borderless select dropdown */
#inventory .inventory-filter-group {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--fill-1,#fff) !important;
  border: 1px solid var(--mild-panel-border, #d9e5df) !important;
  border-radius: 9px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 0 0 9px !important;
  box-sizing: border-box !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}

#inventory .inventory-filter-label {
  color: var(--tx-3,#64756d) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

#inventory .inventory-filter-group select.warehouse-filter,
#inventory .inventory-filter-group .warehouse-filter {
  background: transparent !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
  min-width: clamp(85px, 7.5vw, 120px) !important;
  padding: 0 6px !important;
  font-size: var(--font-btn, 11.5px) !important;
  color: var(--tx-1,#172033) !important;
  cursor: pointer !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

#inventory .inventory-more > summary {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  font-size: var(--font-btn) !important;
  padding: var(--pad-btn-y, 5px) clamp(7px, 0.65vw, 11px) !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  border-radius: 9px !important;
  background: var(--fill-3,#edf5f0) !important;
  border: 1px solid var(--rule-2,#b8d7c6) !important;
  color: var(--tx-1,#1b5338) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  list-style: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(27, 83, 56, 0.08) !important;
}

#inventory .inventory-more > summary::-webkit-details-marker { display: none; }
#inventory .inventory-more > summary::after {
  content: '▾' !important;
  font-size: 10px !important;
  margin-left: 5px !important;
  opacity: 0.8 !important;
  line-height: 1 !important;
}

#inventory .inventory-more > summary:hover {
  background: var(--fill-4,#dfede4) !important;
  border-color: var(--rule-2,#9ecbb1) !important;
  color: var(--tx-1,#0f3f27) !important;
}

#inventory .inventory-more[open] > summary {
  background: var(--fill-4,#d2e7da) !important;
  border-color: var(--accent-hi,#82bfa0) !important;
  color: var(--tx-1,#0b341f) !important;
  box-shadow: 0 0 0 2px rgba(45, 125, 79, 0.16) !important;
}

/* --------------------------------------------------------------------------
   3. Topbar Layout & Elements
   -------------------------------------------------------------------------- */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 12px !important;
  padding: clamp(5px, 0.6vw, 9px) var(--main-pad) !important;
  margin-left: calc(-1 * var(--main-pad)) !important;
  margin-right: calc(-1 * var(--main-pad)) !important;
  margin-top: calc(-1 * var(--main-pad)) !important;
  margin-bottom: clamp(8px, 0.8vw, 12px) !important;
}

.topbar-context {
  display: flex !important;
  align-items: baseline !important;
  gap: clamp(8px, 1vw, 15px) !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.topbar-context .crumb { flex-shrink: 0 !important; }
.topbar-context .crumb { display: none !important; }

.topbar-context h1 {
  margin: 0 !important;
  color: var(--tx-1,#1d352e) !important;
  font-size: var(--font-h1) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.page-heading > div:first-child:has(> h1) { display: none !important; }
.page-heading.actions-in-topbar { display: none !important; }

.crumb {
  font-size: var(--font-sm) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: clamp(6px, 0.6vw, 10px) !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
}

.topbar-page-actions {
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, 0.5vw, 8px) !important;
  flex: 0 1 auto !important;
  margin-left: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.topbar-page-actions > .actions {
  margin-left: 0 !important;
  gap: clamp(4px, 0.45vw, 6px) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  align-items: center !important;
}

.topbar-page-actions > .actions::-webkit-scrollbar { display: none !important; }

.topbar-page-actions > .actions > .button,
.topbar-page-actions > .actions > .filter,
.topbar-page-actions > .actions > .document-tabs {
  flex-shrink: 0 !important;
}

.topbar-page-actions > .actions[hidden] { display: none !important; }
.topbar-page-actions > .actions > .button,
.topbar-page-actions > .actions > .filter {
  min-height: 32px !important;
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}
.topbar-page-actions .document-action {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}
.topbar-page-actions .document-action-icon,
.modal-head-actions .document-action-icon,
.modal-head-actions .document-action svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  stroke-width: 2.1 !important;
}
.modal-head-actions .document-action,
.modal-head-actions .excel-logo-button,
.modal-head-actions .modal-excel-action {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: none !important;
}
.topbar-page-actions .excel-logo-button {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
}
.topbar-page-actions .excel-logo-button svg,
.modal-head-actions .excel-logo-button svg,
.modal-head-actions .modal-excel-action svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  stroke-width: 2.1 !important;
}

/* Modal Excel export uses a 32-grid glyph while sibling document-action
   icons use a 24-grid, so at equal CSS sizes the Excel mark looks smaller
   and lighter. Scale its glyph/stroke to an optically equal size. */
.modal-head-actions .excel-logo-button svg,
.modal-head-actions .modal-excel-action svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  stroke-width: 2.6 !important;
}

/* Reports Excel export uses a 32-grid glyph while sibling document-action
   icons use a 24-grid, so at equal CSS sizes the Excel mark looks smaller
   and lighter. Match the sibling button box and scale the glyph/stroke to
   an optically equal size. */
.topbar-page-actions #reportExcelButton {
  width: 32px !important;
  height: 32px !important;
  min-width: 36px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

.topbar-page-actions #reportExcelButton svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  stroke-width: 2.6 !important;
}

.topbar-page-actions .accounting-tabs-actions {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.topbar-page-actions .accounting-tabs-actions > .accounting-tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 6px 11px !important;
}

.topbar-page-actions > .inventory-header-controls {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.topbar-page-actions .inventory-filter-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 7px !important;
  border: 1px solid var(--rule-1,#d5e2da) !important;
  border-radius: 8px !important;
  background: var(--fill-1,#fff) !important;
}

.topbar-page-actions .inventory-filter-label {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.topbar-page-actions .inventory-filter-group .warehouse-filter {
  flex: 0 0 155px !important;
  width: 155px !important;
  min-width: 155px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--font-btn) !important;
}

.topbar-page-actions .inventory-action-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: visible !important;
  position: relative !important;
}

.topbar-page-actions .inventory-action-toolbar > .button,
.topbar-page-actions .inventory-more > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 9px !important;
  font-size: var(--font-btn) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.topbar-page-actions .inventory-more { position: relative !important; flex: 0 0 auto !important; overflow: visible !important; }
.topbar-page-actions .inventory-more > summary { list-style: none !important; cursor: pointer !important; }
.topbar-page-actions .inventory-more > summary::-webkit-details-marker { display: none !important; }

.topbar-page-actions .inventory-more:not([open]) .inventory-more-menu {
  display: none !important;
}

.topbar-page-actions .inventory-more[open] .inventory-more-menu {
  position: absolute !important;
  z-index: 500 !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 190px !important;
  padding: 6px !important;
  border: 1px solid var(--rule-2,#d4e1db) !important;
  border-radius: 10px !important;
  background: var(--fill-1,#fff) !important;
  box-shadow: 0 10px 25px rgba(18, 52, 38, .16) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.topbar-page-actions .inventory-more-menu > .button { width: 100% !important; justify-content: flex-start !important; }

.global-search-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.global-search-toggle {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid var(--rule-2,#cbd7d1) !important;
  border-radius: 9px !important;
  background: var(--fill-1,#fff) !important;
  color: var(--tx-2,#526c60) !important;
  cursor: pointer !important;
}

.global-search-toggle:hover,
.global-search-toggle:focus-visible { background: var(--fill-3,#eef6f1) !important; color: var(--accent-hi,#176c49) !important; outline: none !important; }
.global-search-toggle svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; }
.global-search-wrap #globalSearch[hidden] { display: none !important; }
.global-search-wrap.open #globalSearch { width: clamp(150px, 17vw, 230px) !important; }

.search,
#globalSearch {
  width: clamp(130px, 14vw, 210px) !important;
  font-size: var(--font-sm) !important;
  padding: clamp(4px, 0.4vw, 7px) clamp(7px, 0.6vw, 11px) !important;
}

.language-toggle {
  font-size: var(--font-btn) !important;
  padding: var(--pad-btn-y) clamp(6px, 0.5vw, 10px) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#settings .page-heading .actions { margin-left: auto !important; }

.topbar .profile {
  white-space: nowrap !important;
  gap: 7px !important;
  padding-left: 10px !important;
  flex-shrink: 0 !important;
}

.topbar .profile b {
  font-size: var(--font-sm) !important;
  white-space: nowrap !important;
}

.topbar .profile span {
  font-size: var(--font-xs) !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   4. Metric Cards & Account Overviews (Identical Level Heights)
   -------------------------------------------------------------------------- */
.metrics,
.view .metrics,
#dashboard > .metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(8px, 0.8vw, 12px) !important;
  margin-bottom: clamp(10px, 0.9vw, 14px) !important;
  align-items: stretch !important;
}

.metric,
.view .metric,
#dashboard > .metrics .metric {
  padding: var(--pad-metric) !important;
  min-height: auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.metric-top,
.view .metric-top,
#dashboard > .metrics .metric-top {
  font-size: var(--font-metric-lbl) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.metric-top span:first-child,
.metric-top #dashboardSalesLabel,
.metric-top #dashboardProfitLabel {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.metric-icon {
  width: clamp(21px, 1.6vw, 25px) !important;
  height: clamp(21px, 1.6vw, 25px) !important;
  font-size: clamp(10.5px, 0.8vw, 12.5px) !important;
  flex: none !important;
}

.metric h2,
.view .metric h2,
#dashboard > .metrics .metric h2 {
  font-size: var(--font-metric-val) !important;
  line-height: 1.15 !important;
  margin: clamp(4px, 0.4vw, 7px) 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Account Overview Cards */
.account-overview,
#sales .account-overview,
#purchases .account-overview,
#contacts .account-overview,
#cash .account-overview {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(7px, 0.7vw, 11px) !important;
  margin-bottom: clamp(8px, 0.8vw, 12px) !important;
  align-items: stretch !important;
}

#contacts .account-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#cash .account-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.account-summary,
#sales .account-summary,
#purchases .account-summary,
#contacts .account-summary,
#cash .account-summary {
  padding: clamp(7px, 0.7vw, 11px) clamp(9px, 0.9vw, 14px) !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.account-summary span {
  font-size: var(--font-metric-lbl) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.account-summary b {
  font-size: var(--font-metric-val) !important;
  line-height: 1.15 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --------------------------------------------------------------------------
   5. Tables & Anti-Wrap Column Alignment Engine
   -------------------------------------------------------------------------- */
.table-card {
  overflow-x: auto !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

table,
.table-card table,
.report-table-wrap table {
  font-size: var(--font-table) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Headers: NEVER wrap into tall misaligned rows */
th,
thead th,
.table-card th,
.report-table-wrap th {
  font-size: var(--font-table-th) !important;
  padding: var(--pad-cell-y) var(--pad-cell-x) !important;
  white-space: nowrap !important;
  letter-spacing: 0.04em !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  background-color: var(--fill-4,#d8e7de) !important;
  color: var(--tx-1,#244635) !important;
  border-top: 1px solid var(--rule-2,#b7d4c2) !important;
  border-bottom: 1px solid var(--rule-2,#b7d4c2) !important;
  font-weight: 700 !important;
}

/* Cells: Perfectly balanced padding and alignment */
td,
tbody td,
.table-card td,
.report-table-wrap td {
  padding: var(--pad-cell-y) var(--pad-cell-x) !important;
  vertical-align: middle !important;
  line-height: 1.35 !important;
}

/* Tabular numbers and currency symbols never break lines */
.amount,
td.amount,
[data-amount],
.stock,
.finance-account-balance b,
.report-stat b,
.t-account-entry b,
.calc-summary-item b {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* Badges: single-line centered pill */
.badge,
.user-status,
.offboarding-badge,
.module-pill {
  font-size: var(--font-badge) !important;
  padding: 3px clamp(5px, 0.5vw, 8px) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  border-radius: 8px !important;
}

/* Table action buttons */
td .actions,
td .button {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: var(--font-badge) !important;
  padding: 3px clamp(6px, 0.5vw, 9px) !important;
  line-height: 1.15 !important;
}

/* Table Card Headers */
.table-title {
  padding: clamp(5px, 0.5vw, 7px) clamp(10px, 1vw, 15px) !important;
  min-height: 38px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.table-title .search,
.table-title-actions .search {
  height: 28px !important;
  min-height: 28px !important;
  width: clamp(140px, 17vw, 240px) !important;
  font-size: 12px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   6. Navigation Rails & Segmented Control Tabs (Screen-Adaptive, No Scroll)
   -------------------------------------------------------------------------- */
.document-tabs,
.settings-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: clamp(4px, 0.45vw, 6px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  padding: clamp(5px, 0.5vw, 7px) !important;
}

#settings .settings-tabs,
#configurations .settings-tabs,
#configurationTabs,
#reports .report-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.document-tabs::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar,
#configurations .settings-tabs::-webkit-scrollbar,
#settings .settings-tabs::-webkit-scrollbar,
#reports .report-nav::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

.settings-tabs .actions,
#configurationTabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  gap: clamp(4px, 0.45vw, 6px) !important;
}

.settings-tabs .actions::-webkit-scrollbar,
#configurationTabs::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

.document-tab,
.settings-tab,
#configurations .settings-tab,
#settings .settings-tab,
#reports .report-button,
.contact-filter,
.accounting-tab {
  font-size: var(--font-tab) !important;
  padding: var(--pad-btn-y) clamp(8px, 0.75vw, 13px) !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
}

/* Topbar: .page-heading .actions is relocated into #topbarPageActions, so the
   display:contents rule from index.html no longer matches. Style the
   relocated .document-tabs as a compact inline pill height-matched (32px)
   to its sibling action buttons to eliminate the seam/overlap. */
.topbar-page-actions .document-tabs {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px !important;
  margin: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  border-radius: 7px !important;
  vertical-align: middle !important;
}

.topbar-page-actions .document-tabs .document-tab {
  flex: 0 0 auto !important;
  min-height: 28px !important;
  height: 28px !important;
  box-sizing: border-box !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  border-radius: 5px !important;
  gap: 5px !important;
}

/* --------------------------------------------------------------------------
   7. Financial Reports & Statements
   -------------------------------------------------------------------------- */
.report-workspace {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.report-document-head {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(10px, 1.2vw, 18px) clamp(14px, 1.6vw, 24px) !important;
  gap: 12px !important;
}

.report-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

.report-table-wrap table {
  width: 100%;
  table-layout: auto;
}

.report-summary {
  gap: clamp(6px, 0.7vw, 10px) !important;
  padding: clamp(8px, 0.9vw, 12px) clamp(14px, 1.6vw, 24px) 0 !important;
}

.report-stat {
  padding: clamp(7px, 0.7vw, 10px) clamp(9px, 0.9vw, 13px) !important;
}

.report-stat span {
  font-size: var(--font-metric-lbl) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.report-stat b {
  font-size: clamp(12px, 1.05vw, 15px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  white-space: nowrap !important;
}

.t-account-entry span {
  font-size: var(--font-table) !important;
}

.t-account-entry b {
  font-size: var(--font-table) !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   8. Responsive Screen Breakpoints
   -------------------------------------------------------------------------- */

/* Standard Desktops & Laptops (1101px - 1439px) */
@media (max-width: 1439px) and (min-width: 1101px) {
  :root {
    --side-width: 215px;
  }
  .side {
    width: var(--side-width) !important;
  }
  .main {
    margin-left: var(--side-width) !important;
    width: calc(100% - var(--side-width)) !important;
    padding: clamp(12px, 1.4vw, 22px) !important;
  }
}

/* Compact Laptops & Tablet Landscape (881px - 1100px) */
@media (max-width: 1100px) and (min-width: 881px) {
  :root {
    --side-width: 195px;
  }
  .side {
    width: var(--side-width) !important;
    padding: 18px 10px !important;
  }
  .side .brand {
    font-size: 19px !important;
    padding: 0 4px 16px !important;
  }
  .side .nav a {
    font-size: 12.5px !important;
    padding: 7px 9px !important;
    gap: 8px !important;
  }
  .main {
    margin-left: var(--side-width) !important;
    width: calc(100% - var(--side-width)) !important;
    padding: clamp(12px, 1.3vw, 18px) !important;
  }
  .metrics,
  #purchases .account-overview,
  #sales .account-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Tablets Portrait & Narrow Screens (721px - 880px) */
@media (max-width: 880px) and (min-width: 721px) {
  :root {
    --side-width: 180px;
  }
  .side {
    width: var(--side-width) !important;
    padding: 14px 8px !important;
  }
  .side .brand {
    font-size: 17px !important;
    padding: 0 4px 12px !important;
  }
  .side .company {
    padding: 7px 8px !important;
    margin-bottom: 12px !important;
  }
  .side .nav a {
    font-size: 11.5px !important;
    padding: 6px 7px !important;
    gap: 6px !important;
  }
  .main {
    margin-left: var(--side-width) !important;
    width: calc(100% - var(--side-width)) !important;
    padding: 12px !important;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #purchases .account-overview,
  #sales .account-overview,
  #contacts .account-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile Screens (<= 720px) */
@media (max-width: 720px) {
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 10px !important;
  }
  .topbar {
    margin: -10px -10px 12px !important;
    padding: 6px 10px !important;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .account-overview,
  #sales .account-overview,
  #purchases .account-overview,
  #contacts .account-overview {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
  .page-heading {
    flex-wrap: wrap !important;
  }
  .page-heading .actions {
    flex-wrap: wrap !important;
  }
  .page-heading h1 {
    font-size: 18px !important;
  }
  .topbar-context { gap: 6px !important; }
  .topbar-context h1 { font-size: clamp(15px, 4vw, 18px) !important; }
  .topbar-page-actions { max-width: 100% !important; overflow: hidden !important; }
}

/* Keep the shared page header flush to the viewport and separate it from content. */
.main { padding-top: 0 !important; }
.main > .topbar { margin-top: 0 !important; margin-bottom: 12px !important; }

/* --------------------------------------------------------------------------
   9. Arabic (RTL) Layout & Typography Balance
   -------------------------------------------------------------------------- */
html[dir="rtl"] {
  --font-h1: clamp(17.5px, 1.45vw, 22.5px);
  --font-h2: clamp(15px, 1.2vw, 18.5px);
  --font-h3: clamp(12.5px, 0.98vw, 14.5px);
  --font-base: clamp(11.5px, 0.86vw, 13px);
  --font-table: clamp(10.5px, 0.8vw, 12px);
  --font-btn: clamp(10.5px, 0.78vw, 12px);
}

html[dir="rtl"] .main {
  margin-left: 0 !important;
  margin-right: var(--side-width, 215px) !important;
  width: calc(100% - var(--side-width, 215px)) !important;
}

@media (max-width: 720px) {
  html[dir="rtl"] .main {
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   10. Hub Grids & Cards (Configurations, Reports, Administration Others)
   -------------------------------------------------------------------------- */
#settings > .settings-tabs > .actions > [data-settings-tab="documents"],
#settings > .settings-tabs > .actions > [data-settings-tab="audit"],
#settings > .settings-tabs > .actions > [data-settings-tab="backup"],
#settings > .settings-tabs > .actions > [data-settings-tab="offboarding"] {
  display: none !important;
}

.others-subtabs-bar {
  background: var(--fill-2,#f7f9fc) !important;
  border: 1px solid var(--rule-1,#e2e8f0) !important;
  padding: 6px !important;
  border-radius: 8px !important;
}

.others-subtabs-bar .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.others-subtabs-bar .settings-tab {
  background: var(--fill-1,#fff) !important;
  border: 1px solid var(--rule-1,#d8e0ea) !important;
  color: var(--tx-2,#3b485d) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}

.others-subtabs-bar .settings-tab:hover {
  background: var(--fill-3,#edf2f9) !important;
  border-color: var(--rule-2,#cbd5e1) !important;
}

.others-subtabs-bar .settings-tab.primary {
  background: #173828 !important;
  color: #fff !important;
  border-color: #173828 !important;
}

/* Config & Report Hub Cards */
.config-home-panel,
.report-home-panel {
  background: var(--fill-1,#fff) !important;
  border-radius: 12px !important;
  padding: clamp(16px, 1.8vw, 24px) !important;
  border: 1px solid var(--rule-1,#e7ebf1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.config-home-eyebrow,
.report-eyebrow {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--link,#27784d) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.config-hub-head h3,
.report-hub-header h2 {
  font-size: clamp(16px, 1.35vw, 21px) !important;
  font-weight: 700 !important;
  color: var(--tx-1,#132238) !important;
  margin: 0 0 6px !important;
}

.config-hub-head span,
.report-hub-header p {
  color: var(--tx-3,#637381) !important;
  font-size: 12.5px !important;
  margin: 0 0 10px !important;
  display: block !important;
}

.config-hub-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.config-menu-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: var(--fill-1,#fbfcfd) !important;
  border: 1px solid var(--rule-1,#e2e8f0) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.18s ease-in-out !important;
  user-select: none !important;
  position: relative !important;
}

.config-menu-card:hover,
.config-menu-card:focus-visible {
  background: var(--fill-1,#ffffff) !important;
  border-color: var(--accent-hi,#27784d) !important;
  box-shadow: 0 6px 18px rgba(39, 120, 77, 0.08) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

.config-menu-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.config-menu-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.config-menu-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.config-menu-title-row h4 {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tx-1,#172b4d) !important;
}

.config-menu-tag {
  display: none !important;
}

.config-menu-body p {
  display: none !important;
}

.config-menu-arrow {
  color: var(--tx-4,#a0aec0) !important;
  font-size: 15px !important;
  font-weight: bold !important;
  margin-left: 2px !important;
  align-self: center !important;
  transition: transform 0.15s ease !important;
}

.config-menu-card:hover .config-menu-arrow {
  color: var(--link,#27784d) !important;
  transform: translateX(3px) !important;
}

/* Reports Hub Layout */
.report-hub-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.report-hub-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.report-hub-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.report-hub-section-icon {
  font-size: 15px !important;
}

.report-hub-section-title h3 {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--tx-1,#1a273b) !important;
}

.report-hub-section-title span {
  font-size: 11px !important;
  color: var(--tx-3,#7b889b) !important;
}

.report-hub-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 10px !important;
}

.report-menu-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: var(--fill-1,#fbfcfd) !important;
  border: 1px solid var(--rule-1,#e2e8f0) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.16s ease !important;
  user-select: none !important;
}

.report-menu-card:hover,
.report-menu-card:focus-visible {
  background: var(--fill-1,#ffffff) !important;
  border-color: var(--accent-hi,#1a73e8) !important;
  box-shadow: 0 5px 16px rgba(26, 115, 232, 0.08) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

.report-menu-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.report-menu-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.report-menu-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.report-menu-title-row h4 {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tx-1,#172b4d) !important;
}

.report-badge {
  display: none !important;
}

.report-menu-content p {
  display: none !important;
}

.report-menu-arrow {
  color: var(--tx-4,#a0aec0) !important;
  font-size: 15px !important;
  font-weight: bold !important;
  margin-left: 2px !important;
  align-self: center !important;
  transition: transform 0.15s ease !important;
}

.report-menu-card:hover .report-menu-arrow {
  color: var(--link,#1a73e8) !important;
  transform: translateX(3px) !important;
}

.back-to-hub-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--fill-3,#edf2f7) !important;
  border: 1px solid var(--rule-2,#cbd5e0) !important;
  color: var(--tx-1,#2d3748) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin-bottom: 8px !important;
  transition: all 0.15s ease !important;
}

.back-to-hub-btn:hover {
  background: var(--fill-4,#e2e8f0) !important;
  color: var(--tx-1,#1a202c) !important;
}

html[dir="rtl"] .config-menu-card,
html[dir="rtl"] .report-menu-card {
  text-align: right !important;
}

html[dir="rtl"] .config-menu-card:hover .config-menu-arrow,
html[dir="rtl"] .report-menu-card:hover .report-menu-arrow {
  transform: translateX(-3px) !important;
}