/* V0.20.0 RWD / Adaptive UI Phase 1
   Presentation-only overrides. Keep accounting behavior and API contracts unchanged. */

/* Desktop refinements: preserve dense accounting workflow while reducing brittle widths. */
.shell {
  width: min(1240px, calc(100% - 32px));
}

.entry-grid {
  grid-template-columns: 140px 155px minmax(165px, .9fr) minmax(220px, 1.35fr) 132px 88px;
}

.ledger-card .table-wrap {
  overscroll-behavior-x: contain;
}

.settings-nav {
  min-width: 0;
}

/* Tablet: same functions, reorganized into fewer rows instead of shrinking desktop controls. */
@media (min-width: 768px) and (max-width: 1023px) {
  .topbar {
    padding-inline: 16px;
  }

  .shell {
    width: calc(100% - 24px);
    margin-top: 12px;
  }

  .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-field {
    grid-column: span 2;
  }

  .entry-grid > .primary {
    width: 100%;
  }

  .ledger-desktop-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "period view"
      "search search";
    gap: 7px 10px;
  }

  .ledger-period-tools {
    grid-area: period;
  }

  .ledger-search {
    grid-area: search;
    max-width: none;
  }

  .ledger-view-tools {
    grid-area: view;
    justify-content: flex-end;
  }

  .settings-modal {
    width: calc(100% - 24px);
  }

  .settings-layout {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .migration-source-summary-v19,
  .migration-grid-v19 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: adaptive presentation, not a scaled desktop table. */
@media (max-width: 767px) {
  :root {
    background: #f1f4f7;
  }

  body {
    min-width: 0;
  }

  .topbar {
    min-height: 0;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .topbar h1 {
    font-size: 19px;
  }

  .topbar p {
    font-size: 11.5px;
  }

  .topbar-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }

  .current-user {
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .topbar-actions .secondary.compact {
    min-height: 36px;
  }

  .shell {
    width: calc(100% - 16px);
    margin: 8px auto 24px;
    gap: 10px;
  }

  .card {
    border-radius: 7px;
  }

  .entry-card {
    padding: 12px;
  }

  .entry-card .section-title {
    align-items: flex-start;
    gap: 8px;
  }

  .entry-card .title-with-badge {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px 9px;
  }

  .entry-kind-switch {
    width: 132px;
  }

  /* High-frequency input becomes a true single-column touch form. */
  .entry-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .summary-field,
  .amount-field,
  .entry-grid > .primary {
    grid-column: 1;
  }

  .entry-grid input,
  .entry-grid select,
  .entry-grid > .primary,
  .kind-button {
    min-height: 44px;
  }

  .entry-grid > .primary {
    width: 100%;
  }

  .quick-entry-tools {
    overflow: hidden;
  }

  .quick-chip-list {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .keyboard-hint {
    display: none;
  }

  /* Ledger heading and tools become stacked task groups. */
  .ledger-title {
    padding: 10px 11px 7px;
    align-items: flex-start;
  }

  #monthSummary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    margin-top: 5px;
  }

  .ledger-summary-item,
  .ledger-summary-search {
    white-space: normal;
  }

  .ledger-summary-item.ending {
    padding-left: 0;
    border-left: 0;
  }

  .ledger-desktop-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px 10px;
  }

  .ledger-period-tools,
  .ledger-view-tools {
    width: 100%;
    padding: 0;
    border: 0;
  }

  .ledger-period-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .ledger-month-tools {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 5px;
  }

  .ledger-month-tools .month-picker,
  .ledger-month-tools input[type="month"] {
    width: 100%;
  }

  .ledger-desktop-tools .secondary.compact,
  .ledger-desktop-tools input {
    min-height: 40px;
    height: 40px;
  }

  .ledger-search {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .ledger-search #ledgerSearchClear {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ledger-view-tools {
    justify-content: stretch;
  }

  .ledger-view-tools .secondary {
    width: 100%;
  }

  /* Main ledger switches from a horizontal table to transaction cards. */
  .ledger-card .table-wrap {
    overflow: visible;
    padding: 0 9px 10px;
    border-top: 0;
    background: #f5f7f9;
  }

  .ledger-card table,
  .ledger-card tbody,
  .ledger-card tr,
  .ledger-card td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ledger-card table {
    min-width: 0;
    table-layout: auto;
  }

  .ledger-card thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .ledger-card tbody {
    display: grid;
    gap: 8px;
  }

  .ledger-card tbody > tr:not(.account-group-row) {
    overflow: hidden;
    border: 1px solid #d4dce3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 42, 55, .04);
  }

  .ledger-card tbody > tr:not(.account-group-row):nth-child(even) td,
  .ledger-card tbody > tr:not(.account-group-row):hover td {
    background: transparent;
  }

  .ledger-card tbody > tr:not(.account-group-row) > td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 5px 9px;
    border: 0;
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
  }

  .ledger-card tbody > tr:not(.account-group-row) > td::before {
    color: #72808c;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
  }

  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(1)::before { content: "日期"; }
  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(2)::before { content: "帳戶"; }
  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(3)::before { content: "收支"; }
  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(4)::before { content: "科目"; }
  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(5)::before { content: "摘要"; }
  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(6)::before { content: "金額"; }
  .ledger-card tbody > tr:not(.account-group-row) > td:nth-child(7)::before { content: "餘額"; }

  .ledger-card tbody > tr:not(.account-group-row) > td.num {
    text-align: left;
  }

  .ledger-card tbody > tr:not(.account-group-row) > td.summary {
    overflow-wrap: anywhere;
  }

  .ledger-card tbody > tr:not(.account-group-row) > td.action-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    width: auto;
    margin-top: 4px;
    padding: 7px 8px;
    border-top: 1px solid #e4e9ed;
    background: #fafbfc;
  }

  .ledger-card tbody > tr:not(.account-group-row) > td.action-col::before,
  .ledger-card tbody > tr:not(.account-group-row) > td.empty::before {
    display: none;
  }

  .ledger-card .row-action {
    min-height: 36px;
    padding: 5px 9px;
  }

  .ledger-card .empty {
    display: block !important;
    padding: 22px 12px !important;
    text-align: center !important;
  }

  .ledger-card .account-group-row {
    border: 0;
    background: transparent;
  }

  .ledger-card .account-group-row td {
    display: block;
    padding: 8px 7px 4px;
    border: 0;
    background: transparent;
  }

  .ledger-card .account-group-row td span {
    display: block;
    margin: 2px 0 0;
  }

  /* Inline edit keeps the same card structure and uses touch-sized controls. */
  .ledger-card tr.inline-editing > td input,
  .ledger-card tr.inline-editing > td select {
    min-height: 40px;
    width: 100%;
  }

  .ledger-card .inline-edit-action-cell {
    flex-wrap: wrap;
  }

  .ledger-card .inline-edit-message {
    width: 100%;
    text-align: right;
  }

  /* Settings becomes a mobile sheet with horizontally scrollable categories. */
  .modal,
  .settings-modal,
  .opening-modal,
  .small-modal {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .settings-modal,
  .opening-modal,
  .small-modal {
    padding: 0;
  }

  .settings-modal > .modal-header,
  .opening-modal > .modal-header,
  .small-modal > .modal-header {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 12px 14px 10px;
    background: #fff;
    border-bottom: 1px solid #d9e0e6;
  }

  .settings-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    height: calc(100dvh - 60px);
  }

  .settings-nav {
    display: flex;
    grid-template-columns: none;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 7px 8px;
    border-right: 0;
    border-bottom: 1px solid #d9e0e6;
    scrollbar-width: thin;
  }

  .settings-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    text-align: center;
    white-space: nowrap;
  }

  .settings-tab.active::before {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 3px;
  }

  .settings-content {
    min-height: 0;
    padding: 13px 12px 24px;
    overflow-y: auto;
  }

  .manager-row {
    grid-template-columns: 1fr;
  }

  .manager-row-actions {
    justify-content: flex-start;
  }

  .manager-row-actions .mini-button,
  .category-item .mini-button {
    min-height: 36px;
  }

  .inline-add,
  .category-add,
  .lock-form,
  .opening-row {
    grid-template-columns: 1fr;
  }

  .inline-add button,
  .category-add button,
  .lock-form button,
  .modal-actions button {
    min-height: 42px;
  }

  .pane-heading,
  .opening-dialog-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .settings-kind,
  .compact-label {
    width: 100%;
  }

  .compact-label {
    grid-template-columns: 1fr;
  }

  .opening-modal .opening-list {
    max-height: none;
  }

  .opening-modal > :not(.modal-header),
  .small-modal > :not(.modal-header) {
    margin-left: 14px;
    margin-right: 14px;
  }

  .modal-actions {
    position: sticky;
    bottom: 0;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(255,255,255,.92), #fff 28%);
  }

  /* Confirmation drawer becomes a bottom sheet so it does not cover mobile form controls. */
  .confirmation-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: min(62dvh, 520px);
    border-left: 0;
    border-top: 1px solid #bfc9d2;
    box-shadow: 0 -12px 28px rgba(31, 42, 55, .16);
    transform: translateY(102%);
  }

  .confirmation-drawer.open {
    transform: translateY(0);
  }

  .confirmation-drawer .confirmation-list {
    height: calc(min(62dvh, 520px) - 58px);
  }

  .confirmation-edge-open {
    top: auto;
    right: 10px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    border: 1px solid #aeb9c5;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(31, 42, 55, .16);
  }

  .confirmation-drawer-collapse {
    left: 50%;
    top: -28px;
    transform: translateX(-50%);
    width: 86px;
    height: 28px;
    border: 1px solid #aeb9c5;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }

  /* Migration preview remains readable inside the mobile settings sheet. */
  .migration-heading-v19,
  .migration-source-v19,
  .migration-plan-head-v19 {
    align-items: stretch;
    flex-direction: column;
  }

  .migration-source-v19 label {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .migration-source-v19 input[type="file"] {
    max-width: none;
  }

  .migration-source-summary-v19,
  .migration-grid-v19 {
    grid-template-columns: 1fr;
  }

  .migration-actions-v19 .primary {
    width: 100%;
    min-height: 44px;
  }

  .backup-acceptance-strip {
    grid-template-columns: 1fr;
  }

  .backup-acceptance-main,
  .backup-acceptance-detail {
    white-space: normal;
  }
}