/* Dedicated mobile layout, loaded only under the phone breakpoint (see
   the media-conditional <link> in index.html/login.html). This is a
   deliberate redesign for small screens, not a shrink of the desktop
   layout — desktop styling in style.css is untouched. */

/* ---------------------------------------------------------------- shell */

.app-shell {
  display: block;
}

.content {
  max-width: 100%;
  padding: 16px 12px 88px;
}

/* ---------------------------------------------------------------- bottom nav */

.sidebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 60px;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-right: none;
  border-top: 1px solid var(--border);
  z-index: 40;
  overflow: visible;
}

.sidebar .brand {
  display: none;
}

/* .side-nav and .sidebar-bottom each being flex:1 would split the bar
   50/50 as two GROUPS (3 items vs 2 items), not evenly across all 5 real
   items. display:contents removes their own boxes from layout so their
   nav-item children become direct flex children of .sidebar instead,
   letting every item compete for space equally. */
.sidebar .side-nav,
.sidebar .sidebar-bottom {
  display: contents;
}

.sidebar .nav-spacer {
  display: none;
}

.nav-item {
  position: relative;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 0;
}

.nav-item .nav-label {
  font-size: 0.62rem;
}

.nav-item svg {
  width: 19px;
  height: 19px;
}

/* Taken out of the column flow: as a 3rd flex child it was making the
   icon+label group in "仪表盘" center differently than the 2-child items
   next to it. Pinned as a small badge instead, so it doesn't affect
   alignment at all. */
.nav-item .nav-lock {
  position: absolute;
  top: 4px;
  right: 22%;
  width: 10px;
  height: 10px;
}

.logout-item {
  border-top: none;
  padding-top: 6px;
}

/* "新增发票" is the primary action — pull it out of the tab row into a
   floating action button above the bar, instead of competing for a
   6th slot in an already-crowded bottom nav. */
#nav_new_invoice {
  position: fixed;
  right: 16px;
  bottom: 76px;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 41;
  margin-bottom: 0;
}

#nav_new_invoice .nav-label {
  display: none;
}

#nav_new_invoice svg {
  width: 22px;
  height: 22px;
}

.sidebar-toggle {
  display: none;
}

/* ---------------------------------------------------------------- welcome panel */

/* Row layout with unwrapped CJK text fights for space on phones — a flex
   item's shrink-limit for CJK text collapses to ~1 character wide (no
   spaces to break on), producing a vertical single-character column
   instead of a normal wrap. Stack vertically instead. */
.welcome-card {
  flex-direction: column;
  text-align: center;
  padding: 24px 20px;
}

.welcome-text {
  text-align: center;
}

.missing-buildings {
  grid-template-columns: 1fr;
}

/* 6 rooms per row instead of flex-wrap's width-dependent count. */
.missing-floor-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.missing-chip {
  padding: 3px 0;
  font-size: 0.68rem;
  text-align: center;
}

/* ---------------------------------------------------------------- headings & forms */

.section-heading {
  flex-wrap: wrap;
  gap: 6px;
}

.charge-groups {
  grid-template-columns: 1fr;
}

/* 合计 + 合计大写 side by side instead of the desktop 200px 1fr split,
   compacted for a narrow dialog. */
.total-row {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 10px;
}

.total-row label {
  font-size: 0.7rem;
  gap: 2px;
}

.total-row input {
  padding: 5px 6px;
  font-size: 0.8rem;
}

#total {
  font-size: 0.85rem;
}

/* All 4 (房租/卫生费/管理费/其他) on one compact row instead of 2x2. */
.other-charges {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.other-charges label {
  font-size: 0.6rem;
  gap: 2px;
}

.other-charges input {
  padding: 4px 3px;
  font-size: 0.7rem;
  text-align: center;
}

/* 单号 is shown in the dialog title instead (see modalTitleWithInvoiceNo
   in app.js), so it's hidden here — leaving 个人+开票日期 on one row and
   收费开始日+收费结束日 on the next, instead of each of the remaining
   top-level fields taking its own full-width row. charge-groups/
   other-charges/total-row/actions/remark all span both columns already
   (grid-column: 1/-1 in style.css), so they're unaffected by this. */
.form-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
}

.form-grid label:has(#invoice_no) {
  display: none;
}

.form-grid > label {
  gap: 3px;
  font-size: 0.68rem;
}

/* 个人/开票日期/收费开始日/收费结束日 share one fixed box width instead
   of stretching to fill half the row — the grid column reserves the
   space, but the boxes themselves stay a consistent, compact size. */
.form-grid > label:not(:has(#remark)) {
  align-items: flex-start;
}

.form-grid > label:not(:has(#remark)) input,
.form-grid > label:not(:has(#remark)) select {
  width: 130px;
}

.form-grid > label input,
.form-grid > label select {
  height: 32px;
  padding: 0 7px;
  font-size: 0.76rem;
  box-sizing: border-box;
}

/* Native <select> chrome renders taller than text/date <input>s on some
   mobile browsers even with matching padding — appearance:none plus the
   explicit height above forces 个人/开票日期/收费开始日/收费结束日 to
   the same box size. */
.form-grid > label select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px;
  padding-right: 22px;
}

/* 备注 is a single free-text field, doesn't need the same size as the
   dated/priced fields above it. */
.form-grid label:has(#remark) {
  font-size: 0.68rem;
  gap: 3px;
}

.form-grid label:has(#remark) input {
  padding: 5px 7px;
  font-size: 0.76rem;
}

.charge-groups {
  gap: 8px;
}

.charge-group {
  padding: 8px 10px 10px;
}

.charge-group legend {
  font-size: 0.76rem;
}

/* All 5 fields (上月/本月/实用/单价/金额) on one row, each narrow —
   at this font/padding scale 5 columns is more compact than the earlier
   3+2 split, where each field stretched to a full third of the row. */
.charge-fields {
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 2px;
}

.charge-fields label {
  font-size: 0.58rem;
  gap: 2px;
}

.charge-fields input {
  padding: 4px 2px;
  font-size: 0.68rem;
  text-align: center;
}

.total-row {
  gap: 6px;
  padding: 10px 12px;
}

.modal-box .actions {
  padding-top: 10px;
  margin-bottom: 20px;
}

.modal-box .btn {
  padding: 6px 12px;
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------- settings tab */

.settings-card {
  padding: 14px 16px;
  margin-bottom: 12px;
}

.settings-card label {
  gap: 4px;
  font-size: 0.74rem;
  margin-bottom: 10px;
}

.settings-card input,
.settings-card textarea {
  padding: 6px 8px;
  font-size: 0.82rem;
}

.settings-card textarea {
  min-height: 60px;
}

.settings-card .actions {
  padding-top: 10px;
  margin-top: 0;
}

.settings-card .btn {
  padding: 6px 12px;
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------- dashboard tab */

/* 个人/起始日期/结束日期 in one row (3 columns); presets drop to their
   own full-width row below instead of competing for space on the line. */
.dash-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.dash-filters label {
  min-width: 0;
  gap: 3px;
  font-size: 0.66rem;
}

.dash-filters select,
.dash-filters input {
  padding: 5px 4px;
  font-size: 0.72rem;
}

.dash-presets {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
}

.dash-presets {
  gap: 6px;
}

.dash-presets .btn {
  padding: 5px 10px;
  font-size: 0.72rem;
}

/* 总收入 spans its own full-width row (it's the headline number);
   发票数量 and 平均每单收入 share the row below it. */
.stat-tiles {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.stat-tile:first-child {
  grid-column: 1 / -1;
}

.stat-tile {
  gap: 3px;
  padding: 10px 12px;
}

.stat-label {
  font-size: 0.68rem;
}

.stat-value {
  font-size: 1.1rem;
}

.chart-card {
  padding: 12px 14px;
  margin-bottom: 12px;
}

.chart-card h3 {
  font-size: 0.8rem;
}

.chart-pie-legend {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chart-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text);
}

.chart-pie-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.chart-table-toggle {
  margin-top: 8px;
}

.chart-table-toggle summary {
  font-size: 0.74rem;
}

.chart-table {
  font-size: 0.7rem;
}

.chart-table th,
.chart-table td {
  padding: 4px 6px;
}

.toolbar {
  flex-direction: column;
  align-items: stretch;
}

.toolbar-actions .btn {
  flex: none;
  padding: 6px 12px;
  font-size: 0.78rem;
}

.toolbar-actions .btn svg {
  width: 13px;
  height: 13px;
}

.filters {
  width: 100%;
  gap: 8px;
}

.filters label {
  font-size: 0.68rem;
  gap: 2px;
  flex: 1 1 72px;
}

.filters select {
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.filters .btn {
  padding: 6px 10px;
  font-size: 0.76rem;
}

.filters .btn svg {
  width: 13px;
  height: 13px;
}

/* ---------------------------------------------------------------- history table -> card list */

.table-wrap {
  border: none;
  overflow-x: visible;
}

#invoice-table {
  border: none;
}

#invoice-table, #invoice-table tbody, #invoice-table tr, #invoice-table td,
#invoice-table thead, #invoice-table th {
  display: block;
  width: 100%;
}

#invoice-table thead tr {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0 2px 10px;
  position: static;
}

#invoice-table thead th {
  display: none;
  border: none;
  background: transparent;
  padding: 0;
  position: static;
}

/* Keep just the "select all" checkbox visible above the card list —
   every other header cell duplicates the per-card data-label prefixes
   below, but "select all" has no other way to be reached on mobile. */
#invoice-table thead th:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
}

#invoice-table thead th:first-child::after {
  content: "全选";
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

/* One combined row per card: checkbox | edit | compact info | expand
   arrow. Everything is flex:none (sized to its own content) except the
   expand arrow, which uses margin-left:auto to land at the far right of
   whatever's left on the line — order controls the visual sequence
   regardless of DOM order, no absolute positioning needed. Detail fields
   (hidden until expanded) drop to their own full-width lines below. */
#invoice-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 6px;
  padding: 6px 10px;
  gap: 4px 6px;
}

#invoice-table td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border);
  text-align: right;
  white-space: normal;
  font-size: 0.78rem;
}

#invoice-table td:last-of-type {
  border-bottom: none;
}

#invoice-table td[data-label]::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: left;
  margin-right: 10px;
  flex: none;
}

/* Collapsed by default: 个人/开票日期/合计 sit as label-on-top-of-value
   stacks, sharing the action row instead of stacking into their own
   full-width lines. Detail fields sit between them in the underlying
   table (charge/date/price columns), so they aren't DOM-adjacent to
   each other even though `order` visually groups them. */
#invoice-table td.col-summary {
  order: 3;
  flex: none;
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  padding: 0;
  border-bottom: none;
  font-size: 0.72rem;
  text-align: left;
}

#invoice-table td.col-summary[data-label]::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: 0.6rem;
  color: var(--muted);
  margin-right: 0;
}

#invoice-table td.col-summary[data-label="开票日期"],
#invoice-table td.col-summary[data-label="合计"] {
  margin-left: 10px;
}

/* Detail fields (hidden until expanded) keep the full-width label-left/
   value-right row layout. */
#invoice-table td.col-detail {
  order: 6;
  flex: 1 1 100%;
  display: none;
}

#invoice-table tbody tr.expanded td.col-detail {
  display: flex;
}

#invoice-table td.row-check-cell {
  order: 1;
  flex: none;
  width: auto;
  border-bottom: none;
  padding: 0;
}

#invoice-table td.row-edit-cell {
  order: 2;
  flex: none;
  width: auto;
  border-bottom: none;
  padding: 0;
}

#invoice-table td.row-edit-cell .icon-btn {
  width: 22px;
  height: 22px;
}

#invoice-table td.row-edit-cell .icon-btn svg {
  width: 12px;
  height: 12px;
}

.row-expand-toggle {
  order: 5;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: none;
}

.row-expand-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

#invoice-table tbody tr.expanded .row-expand-toggle svg {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- pagination */

.pagination {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------------------------------------------------------------- modal */

.modal-overlay {
  padding: 0;
  align-items: stretch;
}

.modal-box {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  border-radius: 0;
  padding: 20px 16px 32px;
}

/* Invoice edit/add reads as a dedicated full-screen page rather than a
   popup dialog: opaque background (no dimmed backdrop showing through),
   no floating shadow, and a sticky header bar with the close button
   acting as a back arrow instead of a floating corner X. */
#invoice-modal {
  background: var(--surface);
}

#invoice-modal .modal-box {
  box-shadow: none;
  padding-top: 0;
}

#invoice-modal .section-heading {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -16px 12px;
  padding: 12px 16px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#invoice-modal .modal-close {
  position: static;
  flex: none;
  width: 26px;
  height: 26px;
  background: transparent;
}

#invoice-modal #modal_title {
  flex: 1;
}

/* Full-screen sheet suits the big invoice-edit form, but small dialogs
   like the dashboard-unlock password prompt (.confirm-box) shouldn't
   stretch to fill the whole screen height for one input field — keep
   those compact and centered instead. */
.modal-overlay:has(.confirm-box) {
  align-items: center;
  padding: 20px;
}

.modal-box.confirm-box {
  width: 100%;
  max-width: 360px;
  min-height: auto;
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}

/* ---------------------------------------------------------------- login */

.login-shell {
  padding: 12px;
}

.login-card {
  padding: 28px 22px;
}