/*
 * Bills — the draft coding screen (details grid, the coding-lines table, the live
 * reconcile check), the read view and the totals block. Deliberately plainer than the
 * invoice editor; built on the design tokens + component classes.
 */

@layer components {
  /* New-bill intake chooser — centred cards (Automatically / Manually / Email a bill). */
  .bill-intake {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-5);
    max-width: 60rem;
    margin: var(--space-6) auto 0;
  }

  .bill-intake__card {
    display: flex;
    flex-direction: column;
    min-height: 22rem; /* volume, so the drop zone fills the card */
    padding: var(--space-3); /* the gap between the card border and the inner box */
    box-shadow: var(--shadow-popover); /* depth, like the auth (session/new) cards */
  }

  /* The shared content wrapper — the Automatic form, the Manual link and the Email div each
     hold one, so the icon, text and button sit in the same place + width across all three.
     Every body reserves a 2px inner border (white on Manual/Email, dashed slate on Automatic),
     so the content aligns whether or not the drop-zone box is drawn. */
  .bill-intake__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 2px solid var(--color-white);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  /* Big, centred icon giving the card volume, with the header beneath it. */
  .bill-intake__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .bill-intake__icon {
    display: inline-flex;
    color: var(--color-primary);
  }

  .bill-intake__icon svg {
    width: 3.25rem;
    height: 3.25rem;
    stroke-width: 1.25;
  }

  .bill-intake__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-heading);
    margin: 0;
  }

  .bill-intake__lede {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    margin: 0;
  }

  /* The Manual card is a link — style it like a card, not a hyperlink. */
  .bill-intake__card--link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  }

  .bill-intake__card--link:hover {
    border-color: var(--color-primary);
  }

  /* The bottom action on every card — a full-width secondary button pinned to the foot,
     so the Browse / Get started / email actions all sit in the same place. */
  .bill-intake__action {
    margin-top: auto;
    width: 100%;
    justify-content: center;
  }

  /* Automatic card: the WHOLE card is the drop zone (drop anywhere). All three share the same
     solid card border; only the Automatic body draws its reserved inner border as a dashed
     slate box — so the dotted zone sits INSIDE the card, marking where you drop. */
  .bill-intake__card--auto {
    cursor: pointer;
  }

  .bill-intake__dropzone {
    border-color: var(--color-slate-300);
    border-style: dashed;
    transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
  }

  .bill-intake__dropzone.upload--dragover {
    border-color: var(--color-primary);
    background: var(--color-slate-50);
  }

  .bill-intake__dropzone .upload__list {
    width: 100%;
    margin: 0;
  }

  /* Email card: the address reads as a secondary button — same text style as the other
     buttons, centred and truncated to one line (full value in the title tooltip). */
  .bill-intake__card .bill-intake__email {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .bill-editor__section-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-heading);
    margin: 0 0 var(--space-4);
  }

  .bill-editor__hint {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    margin: 0 0 var(--space-3);
  }

  .bill-editor__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-3) var(--space-4);
  }

  /* Top of /edit: bill details beside the source-document preview, so you code while looking
     at the bill. Stacks on narrow screens. */
  .bill-editor__top {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4);
  }

  /* A disabled <fieldset> makes a bill read-only (approved, or a view-only member): it dims
     every control it wraps, natively. display:contents keeps it out of the layout so the grid/
     table inside lay out exactly as if it weren't there. */
  .bill-editor__fieldset {
    display: contents;
  }

  /* The document card fills its height (the grid stretches both cards to the taller one),
     so the preview expands to match the details card beside it. */
  .bill-editor__document {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .bill-editor__document .doc-preview {
    flex: 1;
    max-width: none;
    min-height: 12rem; /* a floor; the details card drives the real height */
  }

  /* The image is taken out of flow so it never dictates the card height — the card matches
     the details card beside it, and the image fills whatever that height is. */
  .bill-editor__document .doc-preview__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Empty state: the drop zone fills the card too, so both states stay the same height. */
  .bill-editor__document .upload {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  @media (max-width: 60rem) {
    .bill-editor__top {
      grid-template-columns: 1fr;
    }
  }

  .bill-editor__actions {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-8);
  }

  /* The coding-lines table — scrolls horizontally on narrow screens so inputs stay usable. */
  .bill-lines {
    overflow-x: auto;
  }

  .bill-lines__table {
    min-width: 44rem;
  }

  .bill-lines__table th {
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .bill-lines__table td {
    vertical-align: top;
    padding: var(--space-2);
  }

  .bill-lines__table th.numeric {
    text-align: right;
  }

  .bill-lines__num .form-field__input {
    text-align: right;
  }

  .bill-lines__account { width: 16rem; }
  .bill-lines__vat     { width: 10rem; }
  .bill-lines__num     { width: 9rem; }
  .bill-lines__remove  { width: 2.5rem; text-align: center; }

  .bill-lines__actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  /* Live reconcile check — coded lines vs the supplier's stated total. Neutral by default;
     tints green when they reconcile, amber when they don't. */
  .bill-reconcile {
    max-width: 28rem;
    margin-left: auto;
  }

  .bill-reconcile__figures {
    margin: 0 0 var(--space-2);
  }

  .bill-reconcile__figures > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-body);
  }

  .bill-reconcile__figures dt,
  .bill-reconcile__figures dd {
    margin: 0;
  }

  .bill-reconcile__status {
    margin: var(--space-2) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-body);
  }

  .bill-reconcile--ok {
    background: var(--color-emerald-50);
    border-color: var(--color-emerald-200);
  }

  .bill-reconcile--ok .bill-reconcile__status {
    color: var(--color-success);
  }

  .bill-reconcile--off {
    background: var(--color-amber-50);
    border-color: var(--color-amber-200);
  }

  .bill-reconcile--off .bill-reconcile__status {
    color: var(--color-amber-700);
  }

  /* Read-view totals block — a right-aligned summary, like the invoice's. */
  .bill-totals {
    max-width: 24rem;
    margin-left: auto;
  }

  .bill-totals__currency {
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-heading);
    text-align: right;
  }

  .bill-totals__list {
    margin: 0;
  }

  .bill-totals__list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-body);
  }

  .bill-totals__list dt,
  .bill-totals__list dd {
    margin: 0;
  }

  .bill-totals__grand {
    border-top: 2px solid var(--color-slate-300);
    margin-top: var(--space-1);
    padding-top: var(--space-2) !important;
    font-size: var(--text-base) !important;
    font-weight: 700;
    color: var(--color-text-heading) !important;
  }

  .bill-totals__warn {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-amber-700);
  }

  .bill-totals__warn svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
  }

  /* Source-document link list */
  .bill-attachments {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bill-attachments li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
  }

  .bill-attachments__icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-icon-quiet);
    flex-shrink: 0;
  }

  /* Approved banner on a posted bill */
  .bill-booked {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-emerald-50);
    border-color: var(--color-emerald-200);
    font-size: var(--text-sm);
  }

  .bill-booked__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Pending-approval banner on a draft held for sign-off (slice 55) */
  .bill-pending {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-amber-50);
    border-color: var(--color-amber-200);
    font-size: var(--text-sm);
  }

  .bill-pending__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-warning);
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* A locked note on an approved bill's documents */
  .bill-attachments__lock {
    font-size: var(--text-xs);
    color: var(--color-text-body);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* Inline document preview (documents/_quickview) — a server-rendered thumbnail image of the
     file's first page. It's a button that opens the full file in a new window on click. */
  .doc-preview {
    position: relative;
    display: block;
    width: 100%;
    max-width: 24rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-slate-50);
    text-align: left;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
  }

  .doc-preview__img {
    display: block;
    width: 100%;
    height: 14rem;
    object-fit: cover;
    object-position: top center; /* invoices lead with the header/logo/total — show the top */
  }

  /* Fallback for a file we can't rasterise (not a PDF or image) — a plain download row. */
  .doc-preview--file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: none;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text-body);
    font-size: var(--text-sm);
  }

  .doc-preview--file svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
  }

  .doc-preview__hint {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: oklch(0% 0 0 / 55%);
    color: var(--color-white);
    font-size: var(--text-xs);
  }

  .doc-preview__hint svg {
    width: 0.9rem;
    height: 0.9rem;
  }
}