/* ═══════════════════════════════════════════════════════════════════
   Deposits tab (AdminDeposits.vue) - `dep-`.

   The per-deposit-date report, a tab of /admin/payments. Inherits RTL
   from `.pay-page` (admin-payments.css). Borrows the invoicing kit from
   admin-invoices.css (linked right before this file): `.inv-it` for the
   two tables, `.inv-strip` for the totals band, `.inv-bulk-bar` for the
   selection bar, `.inv-reconcile-banner`, `.inv-subtitle`, `.inv-toolbar`.
   Only what is specific to this screen lives here: the date control, the
   date picker's list, the two report sections, and print.

   The phone selection-mode contract (`.dep-page--bulk`: clearance under the
   fixed bar, and hiding `.adm-tabbar` under 767px) also lives in
   admin-invoices.css beside the bar itself, one rule for both tabs.

   Like its sibling panels, `.pay-panel--deposits` must never gain
   `overflow`, `transform`, `filter`, `backdrop-filter`, `perspective`,
   `contain` or `will-change`: the toast and the selection bar inside it
   are `position: fixed`, and the sheet is too.

   This file MUST keep its `admin` filename prefix: scripts/bundle-css.mjs
   partitions the two production bundles on `href.startsWith('/css/admin')`.
   ═══════════════════════════════════════════════════════════════════ */

.pay-panel--deposits {
  min-width: 0;
}

.dep-page .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dep-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

/* ── The date control ── */

.dep-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.9rem;
}

.dep-date-control {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.dep-date-arrow {
  min-width: 2.4rem;
}

.dep-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.9rem;
  background: #fff;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  color: #191A23;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
}

.dep-date-trigger:hover {
  border-color: var(--primary-color);
}

.dep-date-trigger:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.dep-date-trigger > .fa-calendar-day {
  color: var(--primary-color);
}

.dep-date-label {
  font-size: 0.72rem;
  color: #6E7180;
}

.dep-date-value {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dep-date-caret {
  font-size: 0.7rem;
  color: #8E8F9E;
}

.dep-today {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  background: #EAF2FD;
  border-radius: 999px;
  color: #0B5CC4;
  font-size: 0.68rem;
  font-weight: 600;
}

.dep-date-counts {
  display: inline-flex;
  gap: 0.3rem;
}

.dep-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.02rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dep-count--uninvoiced { background: #FDECEC; color: #A32020; }
.dep-count--invoiced { background: #E7F6ED; color: #1B7F4C; }
.dep-count--refunds { background: #FDF3E3; color: #8A5A12; }

.dep-filter-bar {
  flex: 1 1 24rem;
  row-gap: 0.6rem;
}

/* ── Print header: only on paper ── */

.dep-print-title {
  display: none;
}

/* ── The two report sections ── */

.dep-section {
  margin-block-start: 1rem;
}

.dep-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dep-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #191A23;
}

.dep-section-count {
  padding: 0.05rem 0.5rem;
  background: #EEF0F4;
  border-radius: 999px;
  color: #6E7180;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.dep-section-actions {
  display: flex;
  gap: 0.4rem;
}

.dep-section-empty {
  margin: 0;
  padding: 0.75rem 0;
  color: #8E8F9E;
  font-size: 0.86rem;
}

.dep-section--refunds .dep-section-title {
  color: #8A5A12;
}

.dep-empty {
  font-size: 1rem;
}

/* ── The date picker (inside AdminSheet) ── */

.dep-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: min(32rem, 100%);
}

.dep-picker-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.2rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6E7180;
}

.dep-picker-group:first-child {
  margin-block-start: 0;
}

.dep-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dep-picker-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.75rem;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.86rem;
  color: #191A23;
  text-align: start;
  cursor: pointer;
}

.dep-picker-item:hover {
  border-color: var(--primary-color);
  background: #F7FAFF;
}

.dep-picker-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.dep-picker-item--active {
  border-color: var(--primary-color);
  background: #EAF2FD;
}

.dep-picker-item--future {
  border-style: dashed;
  color: #5A5B6A;
}

.dep-picker-item--hot .dep-picker-date {
  color: #B3261E;
}

.dep-picker-date {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 6rem;
}

.dep-picker-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.dep-picker-sum {
  margin-inline-start: auto;
  font-size: 0.8rem;
  color: #5A5B6A;
  font-variant-numeric: tabular-nums;
}

.dep-picker-empty {
  margin: 0;
  color: #8E8F9E;
  font-size: 0.85rem;
}

/* ── Phone / tablet ── */

@media (max-width: 1024px) {
  .dep-date-control {
    flex: 1 1 100%;
  }

  .dep-date-trigger {
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-height: 44px;
  }

  .dep-date-arrow {
    min-width: 44px;
    min-height: 44px;
  }

  .dep-page .btn,
  .dep-page .btn-icon {
    min-height: 44px;
    min-width: 44px;
  }

  /* The search box's own touch floors live with the box itself, on the class
     the invoices tab shares with it (`.inv-search`, admin-invoices.css) - a
     `.dep-page`-scoped copy here would out-specify it and undo the mirroring. */
}

@media (max-width: 767px) {
  .dep-date-counts {
    display: none;
  }

  .dep-picker-sum {
    flex: 1 1 100%;
    margin-inline-start: 0;
  }
}

/* ── Print: the accountant's copy ──
   Chrome off, tables in full, cards never fold. The panel is the only
   thing that prints because the admin shell's sidebar and the host's
   tab strip are outside this subtree and are hidden by admin.css's own
   print rules where it has them; nothing here reaches outside. */

@media print {
  .dep-no-print,
  .dep-page .toast,
  .dep-page .inv-it-col-actions,
  .dep-page .inv-it-th-check,
  .dep-page .inv-it-td-check,
  .dep-page .inv-it-doc-btn {
    display: none !important;
  }

  .dep-print-title {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 1.2rem;
  }

  .dep-page .inv-it-wrap {
    overflow: visible;
  }

  .dep-page .inv-it {
    min-width: 0;
    width: 100%;
    font-size: 0.72rem;
  }

  .dep-page .inv-it th,
  .dep-page .inv-it td {
    white-space: normal;
  }

  .dep-page .inv-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .dep-page .inv-strip-card {
    box-shadow: none;
    backdrop-filter: none;
    background: #fff;
  }
}