/* ==========================================================================
   Component: Manage Invoices admin view (body.page-view-manage-invoices)
   Internal staff tool (plain Views, no exposed filters) for browsing and
   actioning invoices. Same visual language as manage-quotes.css (the
   equivalent Manage Quotes tool) so the two admin views feel consistent,
   adapted to this view's own field names and simpler header (no Better
   Exposed Filters here, just two plain links).
   ========================================================================== */

body.page-view-manage-invoices .cm-container {
  max-width: 1400px;
  padding-block: 32px 88px;
}

/* --- Header action links (Add New / Export) -------------------------------
   Plain <a> tags in the markup here (unlike Manage Quotes' .btn-theme
   class), so styled directly by tag within .view-header. */
body.page-view-manage-invoices .view-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

body.page-view-manage-invoices .view-header a {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  background: #fff;
  color: var(--cm-ink);
  text-decoration: none;
  transition: border-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-invoices .view-header a:hover {
  border-color: var(--cm-ink);
}

body.page-view-manage-invoices .view-header a:first-child {
  background: var(--cm-red);
  border-color: var(--cm-red);
  color: #fff;
}

body.page-view-manage-invoices .view-header a:first-child:hover {
  background: var(--cm-red-hover);
  border-color: var(--cm-red-hover);
}

/* --- Results table ----------------------------------------------------------*/
body.page-view-manage-invoices .view-content {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
}

body.page-view-manage-invoices table.table {
  margin: 0;
  font-size: 14px;
  color: var(--cm-ink);
}

body.page-view-manage-invoices table.table thead th {
  background: var(--cm-navy);
  color: var(--cm-on-dark);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border: none;
  white-space: nowrap;
}

body.page-view-manage-invoices table.table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--cm-paper-3);
}

body.page-view-manage-invoices table.table tbody tr:nth-child(even) {
  background: var(--cm-paper);
}

body.page-view-manage-invoices table.table tbody tr:hover {
  background: var(--cm-paper-2);
}

/* Numeric columns, right-aligned with trustworthy tabular figures. */
body.page-view-manage-invoices .views-field-field-invc-blng-amnt,
body.page-view-manage-invoices .views-field-field-invc-vat-1 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.page-view-manage-invoices .views-field-field-invc-vat-1 p {
  margin: 0;
}

/* Invoice #, Issue Date, Status and Action columns, centered (both header
   and body) -- same treatment as the equivalent columns in Manage Quotes. */
body.page-view-manage-invoices th.views-field-nothing-1,
body.page-view-manage-invoices th.views-field-field-invc-isu-dt,
body.page-view-manage-invoices th.views-field-field-invc-sts,
body.page-view-manage-invoices th.views-field-nid,
body.page-view-manage-invoices .views-field-nothing-1,
body.page-view-manage-invoices .views-field-field-invc-isu-dt,
body.page-view-manage-invoices .views-field-field-invc-sts {
  text-align: center;
}

/* --- Status pills -------------------------------------------------------------
   The field template outputs the status value AS the span's class, e.g.
   <span class='Paid'>. Same colour-coding spirit as Manage Quotes: green
   for the "done" state (Paid), the quotes tool's "in progress" indigo for
   Sent, and a new amber for Pending (awaiting invoicing/payment). */
body.page-view-manage-invoices .views-field-field-invc-sts span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cm-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--cm-paper-3);
  color: var(--cm-muted);
}

body.page-view-manage-invoices .views-field-field-invc-sts span.Pending {
  background: #b8860b;
  color: #fff;
}

body.page-view-manage-invoices .views-field-field-invc-sts span.Sent {
  background: #464a8e;
  color: #fff;
}

body.page-view-manage-invoices .views-field-field-invc-sts span.Paid {
  background: #1e8e3e;
  color: #fff;
}

/* --- Action column: Edit / View links --------------------------------------
   Plain text links in the markup (unlike Manage Quotes' icon-circle
   buttons) -- kept as visible text but restyled as small pill buttons so
   they read as actions, not body copy. */
body.page-view-manage-invoices .views-field-nid {
  min-width: 140px;
  white-space: nowrap;
  text-align: center;
}

body.page-view-manage-invoices .views-field-nid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  padding: 6px 14px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink);
  text-decoration: none;
  transition: border-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease),
    background var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-invoices .views-field-nid a:hover {
  border-color: var(--cm-red);
  color: var(--cm-red);
  background: var(--cm-red-tint);
}

@media (max-width: 900px) {
  body.page-view-manage-invoices .view-header {
    flex-direction: column;
    align-items: stretch;
  }
}