/* =========================================================
   Invoice list — extracted from invoices.html
   Styles for the "Pending Invoices" list & sticky payment bar,
   now embedded inside mobile_page_template.html.

   Adjustments made when merging into the host page:
   - The original file styled the bare <body> element (background,
     text color, font-family). That would have leaked into the rest
     of the host page (the Material Dashboard header/logo above it),
     so those declarations were moved onto .app-shell — the wrapper
     div around this section — instead. Every other rule below is
     unchanged from invoices_styles.css and, based on the host
     page's compiled stylesheet (css/design_page.css), none of these
     class names or CSS custom properties are already in use there,
     so no renaming of selectors was needed.
   - This file is loaded after css/design_page.css so these rules
     win if any Bootstrap utility class (.btn, .form-check-input,
     .visually-hidden, .mx-auto) needs its invoice-specific look
     re-applied on top of the host page's Bootstrap build.
   - --font-body originally pointed at the Google-hosted "Plus Jakarta
     Sans". It now points at "Inter" instead — the self-hosted font
     the host page already loads via css/fonts.css (see its @font-face
     rules and design_page.css's --bs-font-sans-serif) — so the whole
     invoice list matches the rest of the page and needs no external
     font request.
   - Responsiveness: .invoice-number/.client-name used to truncate with
     an ellipsis ("Invoice #DH2502010568" cut short) on phones under
     ~400px wide (checked with a headless browser at 320-414px). They
     now wrap instead, and a new max-width:400px query stacks the
     amount under the title on those narrow screens so nothing is
     hidden from the user.
   ========================================================= */

:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --border: #e7e4dc;
  --text: #201e1a;
  --text-muted: #8a8578;

  --accent: #0d9488;
  --accent-dark: #0b7a70;
  --accent-soft: #eafaf7;
  --accent-border: #99e0d4;

  --danger: #dc2626;
  --danger-soft: #fdeceb;

  --warn: #b45309;
  --warn-soft: #fef3e2;

  --neutral-soft: #f0efe9;
  --neutral-dot: #b9b4a6;

  --font-body: Inter, Helvetica, Arial, sans-serif;
}

/* Constrain the layout to a comfortable phone/tablet width and
   center it on larger screens, since this section is mobile-first.
   (Originally these background/color/font rules lived on <body>;
   scoped here so they only apply within the invoice list section.) */
.app-shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  /* background-color: var(--bg); */
  color: var(--text);
  font-family: var(--font-body);
  padding: 0 0 24px;
}

/* ---------- Header ---------- */

.app-header {
  padding: 28px 20px 8px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.app-title {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.app-subtitle {
  margin: 0;
  font-size: 0.9rem;
  font-weight: bold;
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  display: none;
  /* color: var(--text-muted); */
}

/* ---------- Invoice list ---------- */

.invoice-list {
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invoice-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.invoice-card:hover {
  border-color: #d8d4c8;
}

.invoice-card.selected {
  background-color: var(--accent-soft);
  border-color: var(--accent-border);
}

/* Each checkbox has an accessible-but-invisible <label class="visually-hidden">
   next to it (e.g. "Select invoice #2041, John Henderson"), which is only
   supposed to be readable by screen readers and take up zero visual space —
   that depends entirely on the host page's Bootstrap build defining this
   utility class. If design_page.css is a trimmed/purged build that dropped
   it (nothing else on the host page used ".visually-hidden" before this
   invoice list existed), the label renders as plain visible text long
   enough to force .invoice-checkbox to balloon to nearly the full card
   width, squeezing .invoice-details — and the invoice number/amount inside
   it — into an almost-zero-width column. That's what breaks the "amount
   stacks under the invoice number" layout on narrow phones. Defining the
   real Bootstrap rule here too means this no longer depends on the host
   build having it. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Checkbox: enlarged for a comfortable mobile tap target.
   Bootstrap's .form-check relies on padding-left + a floated,
   negative-margined input to line the box up with its label; since
   we drop the label and padding, that float/margin combo has to be
   neutralized or the checkbox renders half outside its container. */
.invoice-checkbox {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  min-height: 0;
  flex-shrink: 0;
}

.invoice-checkbox .form-check-input {
  float: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0 0;
  border: 2px solid #d8d4c8;
  border-radius: 8px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.invoice-checkbox .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.invoice-checkbox .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

.invoice-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Grid instead of flex, on purpose: .invoice-number, .client-name and
   .invoice-amount are laid out by named grid-area, not by their order in
   the HTML. That lets the *visual* order differ between the wide layout
   (number+name in a column on the left, amount on the right) and the
   narrow one (number, then amount, then name, stacked) without ever
   reordering the DOM — screen readers and keyboard tab order always see
   number → name → amount, regardless of viewport width. */
.invoice-row-top {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "number amount"
    "name   amount";
  column-gap: 10px;
  row-gap: 1px;
  align-items: start;
}

.invoice-row-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.invoice-number {
  grid-area: number;
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--text);
  /* Wrap instead of truncating with an ellipsis: on narrow phones (<400px)
     invoice numbers like "Invoice #DH2502010568" don't fit on one line
     next to the amount, and an ellipsis would hide part of the number. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.client-name {
  grid-area: name;
  font-weight: 700;
  /* See .invoice-number above: wrap long names instead of clipping them. */
  overflow-wrap: break-word;
  word-break: break-word;
  padding-top: 10px;
}

/* "Paciente:" is its own element now (was plain text inside .client-name),
   so it can be styled independently of the patient's name. Both still
   inherit .client-name's font-weight: 700, kept explicit here for clarity
   and to match the bold .info-label convention used elsewhere. */
.client-name-label {
  font-weight: 700;
}

.client-name-value {
  font-weight: 700;
}

.invoice-amount {
  grid-area: amount;
  justify-self: end;
  font-size: 1.03rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding-top: 1px;
}

.invoice-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.info-label {
  width: 6.9rem;
  flex-shrink: 0;
  font-weight: 700;
}

.info-value {
  color: var(--text);
}

/* ---------- Partial payment amount ----------
   The "Cantidad a pagar" field added under .invoice-info in each card.
   Laid out like an .info-row (same label width) so it lines up with
   Garantizador/Fecha/Descripción above it, but the value is an editable
   input rather than a plain span. */

.invoice-payment-amount {
  display: flex;
  align-items: center;
  gap: 6px 0;
  margin-top: 2px;
  /* Lets .payment-amount-hint (added below) drop to its own line instead
     of squeezing in beside the input on this same row — see its own
     comment for how. */
  flex-wrap: wrap;
}

.invoice-payment-amount .info-label {
  width: 6.9rem;
  flex-shrink: 0;
  /* .invoice-payment-amount isn't an .info-row, so it never inherits the
     0.82rem/1.35 font-size/line-height .info-row sets for Garantizador/
     Fecha/Descripción above — restate them here (plus font-weight, which
     .info-label already carries) so this label matches exactly. */
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 700;
  /* This is a real <label for="..."> pointing at the payment-amount
     input, which starts out disabled — some browsers auto-dim a label
     associated with a disabled control. Force full-strength text color
     so it reads exactly as black as the other info labels regardless. */
  color: var(--text);
}

.payment-amount-input {
  width: 100%;
  max-width: 132px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.payment-amount-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* The field stays white at rest and while being edited, even though its
   card behind it turns green (var(--accent-soft)) once selected — only
   the card's own background carries the "selected" tint. */
.invoice-card.selected .payment-amount-input:not(:disabled) {
  background-color: var(--surface);
}

/* Disabled while the invoice isn't selected, so it's visually obvious the
   amount only counts toward the total once its checkbox is checked. */
.payment-amount-input:disabled {
  background-color: var(--neutral-soft);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* States the per-invoice minimum (InvoiceItemViewModel.MinimumPaymentAmountDisplay)
   under the field, e.g. "Pago mínimo: $10.00". flex-basis: 100% on
   .invoice-payment-amount's flex-wrap row (see that rule) is what pushes
   this onto its own line rather than squeezing beside the input; the
   margin-left lines it up under the INPUT specifically, not the label
   (6.9rem is .info-label's own fixed width, plus this row's 6px gap). */
.payment-amount-hint {
  flex-basis: 100%;
  margin-left: calc(6.9rem + 6px);
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
}

/* Hidden entirely until the invoice is selected — .selected is toggled by
   invoice_list.js on the same checkbox change that disables the input
   above, so this stays in sync with no extra JS. */
.invoice-card:not(.selected) .invoice-payment-amount {
  display: none;
}

/* ---------- Status badges ---------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: currentColor;
}

.status-due-soon {
  background-color: var(--warn-soft);
  color: var(--warn);
}

.status-overdue {
  background-color: var(--danger-soft);
  color: var(--danger);
}

.status-upcoming {
  background-color: var(--neutral-soft);
  color: var(--text-muted);
}

.status-upcoming::before {
  background-color: var(--neutral-dot);
}

/* ---------- Sticky payment bar ---------- */

.payment-bar-spacer {
  height: 96px;
}

.payment-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(32, 30, 26, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
  visibility: hidden;
}

.payment-bar-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.payment-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.selected-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.selected-total {
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background-color: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.pay-btn:hover:not(:disabled) {
  background-color: var(--accent-dark);
  color: #ffffff;
}

.pay-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.pay-btn:disabled {
  background-color: #cfcac0;
  color: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- Small phones ---------- */

/* Below ~400px (iPhone SE/12 mini, most Android phones in portrait) the
   invoice number/amount no longer comfortably fit side by side, so they
   stack into a single column instead — in reading order: invoice number,
   then amount, then patient name (only the visual grid-area order changes
   here; the underlying HTML order, and so the screen-reader/tab order,
   stays number → name → amount as declared in the markup). */
@media (max-width: 400px) {
  .invoice-row-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "number"
      "amount"
      "name";
    row-gap: 4px;
  }

  .invoice-amount {
    justify-self: start;
    padding-top: 0;
  }

  /* Below ~400px, the "Cantidad a pagar" label (fixed at 6.9rem) plus the
     amount input no longer fit on one line without the input getting cut
     off. Stack them instead: label on its own row, input filling the
     full width of the card on the row under it. */
  .invoice-payment-amount {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .invoice-payment-amount .info-label {
    width: auto;
    margin-bottom: 0.1rem;
  }

  .payment-amount-input {
    max-width: none;
    width: 100%;
  }

  /* .invoice-payment-amount is a column now (see above), not the row
     .payment-amount-hint's own margin-left assumes — reset it so the hint
     lines up flush with the stacked input instead of getting pushed
     6.9rem+6px to the right. */
  .payment-amount-hint {
    margin-left: 0;
  }

  /* "Paciente:" and the patient's name sit inline (see .client-name-label/
     .client-name-value comment above them) — below ~400px put each on its
     own line instead. */
  .client-name-label,
  .client-name-value {
    display: block;
  }

  .client-name-value {
    /* margin-top: 1px; */
    line-height: 1;
  }

  /* Same idea for every Garantizador/Fecha/Descripción row in .invoice-info:
     the fixed 6.9rem label column stops leaving enough room for the value
     below ~400px, so stack label above value instead. align-items switches
     from the row layout's "baseline" to the default "stretch" so the value
     (especially the long Descripción text) still wraps against the card's
     full width rather than shrinking to its own content width. Gap stays
     tight — this is the space between a label and its OWN value. */
  .info-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .info-label {
    width: auto;
  }

  /* .invoice-info's own gap normally separates Garantizador/Fecha/
     Descripción as three tight rows; once each one is stacked into a
     label-over-value pair (above), that same gap sits between one row's
     value and the NEXT row's label, which now reads as cramped. Widen it
     here so each entry reads as its own group. */
  .invoice-info {
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .app-header {
    padding: 22px 16px 8px;
  }

  .invoice-list {
    padding: 10px 12px 0;
  }

  .payment-bar-inner {
    padding: 14px 16px;
  }
}

/* ---------- Language switcher ----------
   Added for localization: two small same-origin <form>/<button> posts to
   ClientPagesController.SetLanguage() (see ChoosePayInvoices.cshtml). Shared
   here (rather than in a page-specific stylesheet) purely because every
   page in the flow already loads this file. */

.lang-switcher {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 0;
  font-size: 16px;
}

.lang-form {
  display: inline;
}

.lang-link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.lang-link:hover {
  color: var(--accent);
}

.lang-link[aria-current="true"] {
  color: var(--accent);
  text-decoration: underline;
}

.lang-sep {
  color: var(--border);
}