/* Accounting dashboard mobile layout. Desktop accounting views remain unchanged. */
.quarter-mobile-header {
  display: none;
}

@media (max-width: 720px) {
  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .main {
    padding-inline: 12px !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 62px !important;
    margin: -8px -12px 12px !important;
    padding: 9px 12px !important;
    background: #fff !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .topbar h1 {
    overflow: hidden !important;
    margin: 0 !important;
    font-size: clamp(21px, 6vw, 27px) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .top-actions {
    display: contents !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .top-actions > *:not(#refreshBoard) {
    display: none !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .top-actions #refreshBoard {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .top-actions #refreshBoard .download-icon,
  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .top-actions #refreshBoard svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .top-actions #refreshBoard .button-text,
  html body[data-current-view="deposits"]:has(#depositDashboardTab.active) .accounting-tabs {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active {
    width: 100% !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-metric {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-metric span {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-metric strong {
    width: 100% !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    font-size: clamp(18px, 5vw, 23px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-metric em {
    width: 100% !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    text-align: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-change-up,
  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-change-down {
    grid-column: 1 / -1 !important;
    min-height: 62px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .accounting-panel {
    margin-bottom: 7px !important;
    padding: 7px !important;
    border-radius: 10px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-panel {
    padding: 7px 5px 5px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 2px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-head h3 {
    font-size: 15px !important;
    white-space: normal !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .bank-deposit-title-desktop {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-head p,
  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-summary span,
  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-summary em {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-summary {
    display: block !important;
    text-align: right !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposits-summary strong {
    margin: 0 !important;
    font-size: 17px !important;
    white-space: nowrap !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposit-table-wrap {
    overflow: hidden !important;
    border-radius: 7px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposit-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposit-table th,
  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposit-table td {
    overflow: hidden !important;
    padding: 4px 2px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposit-table th:first-child {
    width: 22% !important;
    padding-left: 4px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .recent-bank-deposit-table thead th {
    font-size: 10px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-panel {
    padding: 6px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-panel > .section-title-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-panel > .section-title-row h3 {
    font-size: 16px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-panel > .section-title-row span {
    font-size: 11px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-revenue-body {
    display: block !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-list,
  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-line {
    width: 100% !important;
    max-width: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-header,
  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-head {
    grid-template-columns: minmax(44px, .7fr) minmax(126px, 1.6fr) minmax(78px, 1fr) !important;
    width: 100% !important;
    column-gap: 4px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-line {
    padding: 1px 0 !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-head,
  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-head em {
    font-size: 12px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-header {
    padding-bottom: 2px !important;
    font-size: 10px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-header span:nth-child(2),
  html body[data-current-view="deposits"] #depositDashboardTab.active .year-trend-head strong {
    text-align: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .year-revenue-chart {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-dashboard {
    padding: 7px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-dashboard > .section-title-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-mobile-header,
  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-card {
    display: grid !important;
    grid-template-columns: 44px repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-mobile-header {
    padding: 6px 5px !important;
    border-bottom: 0 !important;
    background: #173f63 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-mobile-header span:first-child {
    color: #f0c447 !important;
    text-align: left !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-card {
    width: 100% !important;
    padding: 7px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid #d8e0ea !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-card:nth-of-type(odd) {
    background: #f3f7fb !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-card:first-of-type {
    border-left: 4px solid #d9ad2b !important;
    background: #fff8e7 !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-card:last-child {
    border-bottom: 0 !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-card::before {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-head {
    display: contents !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-head h4 {
    padding-left: 3px !important;
    color: #174f7d !important;
    font-size: 13px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-year-head strong {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list {
    display: contents !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list div {
    display: block !important;
    min-width: 0 !important;
    padding: 0 3px !important;
    border-right: 1px solid #e3e8ef !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list div:last-child {
    border-right: 0 !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list span,
  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list span {
    display: none !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .quarter-list strong {
    overflow: hidden !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .section-title-row {
    gap: 8px !important;
  }

  html body[data-current-view="deposits"] #depositDashboardTab.active .section-title-row h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 390px) {
  html body[data-current-view="deposits"] #depositDashboardTab.active .deposit-metric strong {
    font-size: 17px !important;
  }
}