/*
 * Shared responsive workflow layer for Home Accounting.
 * Desktop behavior remains owned by the existing theme and page styles.
 */

/* The fixed header uses z-index 1099; Bootstrap's default modal stack is lower.
 * Keep every application modal, its overlay, and its title above that header. */
.modal-backdrop {
  z-index: 1190;
}

.modal {
  z-index: 1200;
}

.ha-mobile-date,
.ha-filter-toggle {
  display: none;
}

@media (min-width: 701px) {
  .ha-mobile-workflow #expenses_list {
    width: 100% !important;
    table-layout: fixed;
  }

  .ha-mobile-workflow #expenses_list th:nth-child(1),
  .ha-mobile-workflow #expenses_list td:nth-child(1) { width: 20%; }
  .ha-mobile-workflow #expenses_list th:nth-child(2),
  .ha-mobile-workflow #expenses_list td:nth-child(2) { width: 13%; }
  .ha-mobile-workflow #expenses_list th:nth-child(3),
  .ha-mobile-workflow #expenses_list td:nth-child(3) { width: 13%; }
  .ha-mobile-workflow #expenses_list th:nth-child(4),
  .ha-mobile-workflow #expenses_list td:nth-child(4) { width: 10%; }
  .ha-mobile-workflow #expenses_list th:nth-child(5),
  .ha-mobile-workflow #expenses_list td:nth-child(5) { width: 12%; }
  .ha-mobile-workflow #expenses_list th:nth-child(6),
  .ha-mobile-workflow #expenses_list td:nth-child(6) {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ha-mobile-workflow #expenses_list th:nth-child(7),
  .ha-mobile-workflow #expenses_list td:nth-child(7) {
    width: 140px;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .ha-mobile-workflow .header-section .container-fluid > .row {
    flex-wrap: nowrap;
  }

  .ha-mobile-workflow .header-logo {
    flex: 0 1 176px;
    height: 64px;
    padding: 10px 8px 10px 12px;
    border-bottom: 0;
  }

  .ha-mobile-workflow .header-left {
    min-width: 0;
    padding-left: 0;
  }

  .ha-mobile-workflow .header-left > .row {
    flex-wrap: nowrap;
  }

  .ha-mobile-workflow .side-header-toggle {
    margin-left: 0;
  }

  .ha-mobile-workflow .header-notification-area > li > a .user .name {
    display: none;
  }

  .ha-mobile-workflow .content-body {
    padding: 22px 12px 45px;
  }

  .ha-mobile-workflow .page-heading h3 {
    font-size: 25px;
  }

  .ha-mobile-workflow .page-heading h3 span {
    display: none;
  }

  .ha-mobile-workflow .box.ha-entry-box > .box-body,
  .ha-mobile-workflow .box.ha-workflow-box > .box-body {
    padding: 18px 15px;
  }

  .ha-mobile-workflow .box.ha-entry-box > .box-body > .box-body {
    padding: 18px 0 0;
  }

  .ha-mobile-workflow .ha-entry-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }

  .ha-mobile-workflow .ha-entry-grid h6,
  .ha-mobile-workflow .ha-filter-content h6 {
    margin-bottom: 7px;
    font-size: 12px;
  }

  .ha-mobile-workflow .ha-entry-grid .datepicker,
  .ha-mobile-workflow .ha-desktop-entry-date {
    display: none;
  }

  .ha-mobile-workflow .ha-mobile-date {
    display: block;
    width: 100%;
    min-height: 48px;
    color-scheme: dark;
  }

  .ha-mobile-workflow .ha-entry-grid select,
  .ha-mobile-workflow .ha-filter-content select,
  .ha-mobile-workflow .ha-filter-content input,
  .ha-mobile-workflow .ha-entry-grid input:not([type="hidden"]) {
    width: 100%;
    min-height: 48px;
  }

  .ha-mobile-workflow .ha-entry-notes {
    height: 84px !important;
  }

  .ha-mobile-workflow .ha-entry-action {
    display: block !important;
  }

  .ha-mobile-workflow .ha-entry-action-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ha-mobile-workflow .ha-entry-action .button {
    width: 100%;
    min-height: 52px;
    margin-left: 0 !important;
  }

  .ha-mobile-workflow .ha-filter-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 14px;
    border: 1px solid #333853;
    border-radius: 3px;
    background: transparent;
    color: #ffffff;
  }

  .ha-mobile-workflow .ha-filter-toggle::after {
    content: "+";
    color: #8b8d9b;
    font-size: 20px;
  }

  .ha-mobile-workflow .ha-filter-toggle[aria-expanded="true"]::after {
    content: "−";
  }

  .ha-mobile-workflow .ha-filter-content[hidden] {
    display: none !important;
  }

  .ha-mobile-workflow .ha-filter-content > .row {
    display: block;
  }

  .ha-mobile-workflow .ha-filter-content [class*="col-"] {
    width: 100%;
    max-width: none;
    margin-bottom: 14px;
  }

  .ha-mobile-workflow .ha-filter-content .button {
    width: 100%;
    min-height: 46px;
    margin-left: 0 !important;
  }

  .ha-mobile-workflow .dataTables_wrapper .dataTables_length,
  .ha-mobile-workflow .dataTables_wrapper .dataTables_info,
  .ha-mobile-workflow .dataTables_wrapper .dataTables_paginate {
    float: none;
    width: 100%;
    text-align: left;
  }

  .ha-mobile-workflow .dataTables_wrapper .dataTables_paginate {
    display: flex;
    overflow-x: auto;
    padding: 12px 0 3px;
  }

  .ha-mobile-workflow table.ha-ledger-table,
  .ha-mobile-workflow table.ha-ledger-table tbody {
    display: block;
    width: 100% !important;
  }

  .ha-mobile-workflow table.ha-ledger-table thead {
    display: none;
  }

  .ha-mobile-workflow table.ha-ledger-table tbody tr {
    width: 100%;
    display: grid;
    margin: 0;
    padding: 15px 0 12px;
    border-bottom: 1px solid #333853;
    background: transparent !important;
  }

  .ha-mobile-workflow table.ha-ledger-table tbody td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    overflow-wrap: anywhere;
  }

  .ha-mobile-workflow #expenses_list tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "amount date"
      "subcategory subcategory"
      "category category"
      "account account"
      "notes notes"
      "actions actions";
    column-gap: 12px;
  }

  .ha-mobile-workflow #expenses_list tbody td:nth-child(1) { grid-area: account; font-size: 11px; color: #8b8d9b; }
  .ha-mobile-workflow #expenses_list tbody td:nth-child(2) { grid-area: category; margin-top: 2px; font-size: 12px; color: #8b8d9b; }
  .ha-mobile-workflow #expenses_list tbody td:nth-child(3) { grid-area: subcategory; margin-top: 7px; color: #ffffff; font-weight: 600; }
  .ha-mobile-workflow #expenses_list tbody td:nth-child(4) { grid-area: amount; color: #ffffff; font-size: 20px; font-weight: 700; }
  .ha-mobile-workflow #expenses_list tbody td:nth-child(5) { grid-area: date; align-self: baseline; justify-self: end; color: #8b8d9b; font-size: 12px; font-weight: 600; }
  .ha-mobile-workflow #expenses_list tbody td:nth-child(6) { grid-area: notes; width: 100%; margin-top: 3px; color: #8b8d9b; font-size: 11px; line-height: 1.45; white-space: normal !important; overflow-wrap: anywhere; }
  .ha-mobile-workflow #expenses_list tbody td:nth-child(7) { grid-area: actions; justify-self: end; margin-top: 10px; white-space: nowrap; }

  .ha-mobile-workflow #expenses_list tbody td:nth-child(7) button,
  .ha-mobile-workflow #transfer_list tbody td:nth-child(6) button {
    min-width: 42px;
    height: 42px;
    margin: 0 0 0 8px;
  }

  .ha-mobile-workflow #transfer_list tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "amount date"
      "from from"
      "to to"
      "notes notes"
      "actions actions";
    column-gap: 12px;
  }

  .ha-mobile-workflow #transfer_list tbody td:nth-child(1) { grid-area: from; margin-top: 8px; color: #ffffff; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(1)::before { content: "From "; color: #8b8d9b; font-size: 11px; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(2) { grid-area: to; margin-top: 3px; color: #ffffff; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(2)::before { content: "To "; color: #8b8d9b; font-size: 11px; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(3) { grid-area: amount; color: #ffffff; font-size: 20px; font-weight: 700; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(4) { grid-area: date; align-self: baseline; justify-self: end; color: #8b8d9b; font-size: 12px; font-weight: 600; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(5) { grid-area: notes; width: 100%; margin-top: 4px; color: #8b8d9b; font-size: 11px; line-height: 1.45; white-space: normal !important; overflow-wrap: anywhere; }
  .ha-mobile-workflow #transfer_list tbody td:nth-child(6) { grid-area: actions; justify-self: end; margin-top: 10px; white-space: nowrap; }

  .ha-mobile-workflow #accounts_list tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "account balance"
      "initial transactions"
      "date date"
      "notes notes";
    gap: 4px 12px;
  }

  .ha-mobile-workflow #accounts_list tbody td:nth-child(1) { grid-area: account; color: #ffffff; font-size: 15px; font-weight: 700; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(2) { grid-area: initial; color: #8b8d9b; font-size: 11px; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(2)::before { content: "Initial "; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(3) { grid-area: transactions; justify-self: end; color: #8b8d9b; font-size: 11px; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(3)::before { content: "Activity "; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(4) { grid-area: balance; color: #ffffff; font-size: 18px; font-weight: 700; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(5) { grid-area: date; color: #8b8d9b; font-size: 11px; }
  .ha-mobile-workflow #accounts_list tbody td:nth-child(6) { grid-area: notes; color: #8b8d9b; font-size: 11px; }

  .ha-mobile-workflow #report_monthly_total,
  .ha-mobile-workflow #report_monthly_total tbody {
    display: block;
    width: 100%;
  }

  .ha-mobile-workflow #report_monthly_total thead {
    display: none;
  }

  .ha-mobile-workflow #report_monthly_total tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 0;
    border-bottom: 1px solid #333853;
  }

  .ha-mobile-workflow #report_monthly_total tbody td {
    padding: 0;
    border: 0;
    text-align: right;
  }

  .ha-mobile-workflow #report_monthly_total tbody td:first-child {
    grid-column: 1 / -1;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
  }

  .ha-mobile-workflow #report_monthly_total tbody td:nth-child(2)::before,
  .ha-mobile-workflow #report_monthly_total tbody td:nth-child(3)::before,
  .ha-mobile-workflow #report_monthly_total tbody td:nth-child(4)::before {
    display: block;
    margin-bottom: 2px;
    color: #8b8d9b;
    font-size: 10px;
    font-weight: 400;
  }

  .ha-mobile-workflow #report_monthly_total tbody td:nth-child(2)::before { content: "Income"; }
  .ha-mobile-workflow #report_monthly_total tbody td:nth-child(3)::before { content: "Expense"; }
  .ha-mobile-workflow #report_monthly_total tbody td:nth-child(4)::before { content: "Net"; }

  .ha-mobile-workflow .ha-report-controls .row {
    display: block;
  }

  .ha-mobile-workflow .ha-report-controls [class*="col-"] {
    width: 100%;
    max-width: none;
  }

  .ha-mobile-workflow .ha-report-controls .adomx-checkbox-radio-group {
    display: grid;
    gap: 10px;
  }

  .ha-mobile-workflow .ha-report-controls #custom_year_value {
    width: 100%;
    min-height: 48px;
    margin-left: 0 !important;
  }

  .ha-mobile-workflow #export {
    width: 100%;
    min-height: 48px;
  }

  .ha-mobile-workflow #account-filter,
  .ha-mobile-workflow .ha-report-controls .input-date-predefined {
    width: 100%;
    min-height: 48px;
    margin-left: 0 !important;
  }

  .ha-mobile-workflow #report_category_expenses,
  .ha-mobile-workflow #report_category_income,
  .ha-mobile-workflow #report_subcategory_expenses,
  .ha-mobile-workflow #report_subcategory_income,
  .ha-mobile-workflow #report_category_expenses tbody,
  .ha-mobile-workflow #report_category_income tbody,
  .ha-mobile-workflow #report_subcategory_expenses tbody,
  .ha-mobile-workflow #report_subcategory_income tbody {
    display: block;
    width: 100%;
  }

  .ha-mobile-workflow #report_category_expenses thead,
  .ha-mobile-workflow #report_category_income thead,
  .ha-mobile-workflow #report_subcategory_expenses thead,
  .ha-mobile-workflow #report_subcategory_income thead {
    display: none;
  }

  .ha-mobile-workflow #report_category_expenses tbody tr,
  .ha-mobile-workflow #report_category_income tbody tr,
  .ha-mobile-workflow #report_subcategory_expenses tbody tr,
  .ha-mobile-workflow #report_subcategory_income tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px 0;
    border-bottom: 1px solid #333853;
  }

  .ha-mobile-workflow #report_category_expenses tbody td,
  .ha-mobile-workflow #report_category_income tbody td,
  .ha-mobile-workflow #report_subcategory_expenses tbody td,
  .ha-mobile-workflow #report_subcategory_income tbody td {
    padding: 0;
    border: 0;
  }

  .ha-mobile-workflow #report_category_expenses tbody td:last-child,
  .ha-mobile-workflow #report_category_income tbody td:last-child,
  .ha-mobile-workflow #report_subcategory_expenses tbody td:last-child,
  .ha-mobile-workflow #report_subcategory_income tbody td:last-child {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-align: right;
  }

  .ha-mobile-workflow #report_subcategory_expenses tbody td:nth-child(2),
  .ha-mobile-workflow #report_subcategory_income tbody td:nth-child(2) {
    grid-column: 1 / 2;
    color: #8b8d9b;
    font-size: 12px;
  }

  .ha-mobile-workflow .center-popup {
    inset: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 20px);
    padding: 0 !important;
    overflow-y: auto;
    transform: none !important;
  }

  .ha-mobile-workflow .center-popup .box-body {
    padding: 16px;
  }

  .ha-mobile-workflow .center-popup .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ha-mobile-workflow .center-popup .button {
    width: 100%;
    min-height: 48px;
    margin-left: 0 !important;
  }
}

@media (max-width: 370px) {
  .ha-mobile-workflow .header-logo {
    flex-basis: 154px;
  }

  .ha-mobile-workflow .content-body {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ha-mobile-workflow *,
  .ha-mobile-workflow *::before,
  .ha-mobile-workflow *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}