/*
 * Wild Caught International — theme.css
 * Single source of truth for the visual tokens. Brand values taken from
 * wildcaughtproducts.com. NEVER hardcode a hex value in markup: use these
 * variables and the .wc-* classes.
 */

:root {
  /* Brand */
  --wc-brand:        #064273;   /* navy: navbar, primary buttons */
  --wc-brand-dark:   #053560;   /* hover */
  --wc-brand-rgb:    6, 66, 115;
  --wc-sand:         #fde8d8;   /* sand: accents, text on navy */
  --wc-lightblue:    #e0f0ff;   /* soft surfaces, table headers */

  /* Functional */
  --wc-success: #1e7e34;  /* Completed, Received, Posted */
  --wc-warning: #ffc107;  /* Pending, Attention (ALWAYS with dark text) */
  --wc-danger:  #c22a32;  /* Error, Delete, Overdue */
  --wc-info:    #0f6b7d;  /* Status, Information */

  /* Neutrals */
  --wc-bg:         #f5faff; /* App background */
  --wc-card:       #ffffff;
  --wc-text:       #121212;
  --wc-text-muted: #5a6b7b;
  --wc-border:     #d3e0ec;
  --wc-secondary:  #eef4fa; /* Secondary surface */

  /* --- Bootstrap 5 overrides: make BS components use the brand --- */
  --bs-primary:     var(--wc-brand);
  --bs-primary-rgb: var(--wc-brand-rgb);

  /* Typography */
  --wc-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The order's own details: a warm tint that reads as "the facts", against
     the cool blues the rest of the screen is built from. */
  --wc-headline:        #fdf6dd;
  --wc-headline-bar:    #f9edc0;
  --wc-headline-border: #e6d491;

  /* Height of the sticky navbar: what anything else that sticks sits under. */
  --wc-navbar-height: 3.5rem;
}

body {
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--wc-font-body);
  font-size: 14px; /* dense base */
}

/* ------------------------------------------------------------------ */
/* Layout                                                             */
/* ------------------------------------------------------------------ */

/* The width of every screen. Bootstrap's .container caps at 1320px, which on
   an ERP full of wide tables leaves the figures crammed into the middle of a
   monitor. The page takes the whole window instead, with a margin that grows
   with it: finger-width on a phone, about a centimetre on a desktop. The
   navbar and the breadcrumb carry the same one, so everything lines up down
   the left edge. */
.wc-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(.75rem, 2vw, 2.5rem);
}

/* Navbar (sticky, brand background) */
.wc-navbar {
  background: var(--wc-brand);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.wc-navbar .navbar-brand,
.wc-navbar .navbar-text { color: #fff; }

/* Menu items. Bootstrap paints the current one near-black, which on this navy
   is all but invisible, so the states are spelled out here: dimmed white for
   the rest, sand and underlined for where you are. */
.wc-navbar .nav-link { color: #fff; opacity: .75; }
.wc-navbar .nav-link:hover,
.wc-navbar .nav-link:focus { color: var(--wc-sand); opacity: 1; }
.wc-navbar .nav-link.active {
  color: var(--wc-sand);
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Breadcrumb under the navbar */
.wc-breadcrumb {
  background: var(--wc-lightblue);
  padding: .5rem clamp(.75rem, 2vw, 2.5rem);
  font-size: 13px;
  color: var(--wc-text-muted);
}
.wc-breadcrumb a { color: var(--wc-brand); text-decoration: none; }

/* Page header */
.wc-page-header {
  background: var(--wc-card);
  border-bottom: 1px solid var(--wc-border);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wc-page-title { font-size: 20px; font-weight: 600; color: var(--wc-text); margin: 0; }

/* The header rides down the page under the navbar. On a form that is Save and
   Cancel, needed at the bottom of a long order as much as at the top; on a
   record it is Edit, Print and the status, which is what you reach for after
   reading to the end. Hunting back up for either is how work gets abandoned. */
.wc-page-header-stuck {
  position: sticky;
  top: var(--wc-navbar-height, 3.5rem);
  z-index: 1020;                      /* under the navbar's 1030 */
  box-shadow: 0 2px 6px rgba(var(--wc-brand-rgb), .1);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.btn-wc-primary {
  background: var(--wc-brand);
  color: #fff;
  border: none;
  border-radius: 6px;
}
.btn-wc-primary:hover { background: var(--wc-brand-dark); color: #fff; }
.btn-wc-primary:focus { outline: 2px solid var(--wc-brand); outline-offset: 2px; }

.btn-wc-secondary {
  background: #fff;
  border: 1px solid var(--wc-border);
  color: var(--wc-brand);
  border-radius: 6px;
}
.btn-wc-secondary:hover { background: var(--wc-secondary); color: var(--wc-brand-dark); }

.btn-wc-danger {
  background: var(--wc-danger);
  color: #fff;
  border: none;
  border-radius: 6px;
}
.btn-wc-danger:hover { background: #9d2028; color: #fff; }
.btn-wc-danger:focus { outline: 2px solid var(--wc-danger); outline-offset: 2px; }

/* Quiet destructive action inside a table row: an icon that only colours in
   on hover, so a table full of rows is not a wall of red. */
.btn-wc-danger-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--wc-text-muted);
  border-radius: 6px;
  line-height: 1;
}
.btn-wc-danger-ghost:hover { background: rgba(194, 42, 50, .1); color: var(--wc-danger); }
.btn-wc-danger-ghost:focus { outline: 2px solid var(--wc-danger); outline-offset: 1px; }

/* A wide card's labels: just enough for the longest of them, so the boxes
   take everything else. They are names, not sentences — "Presentations" is
   the longest one there is. */
.wc-form-label {
  flex: 0 0 auto;
  width: 7.5rem;
  padding-right: .5rem;
}

/* ------------------------------------------------------------------ */
/* Avatars                                                            */
/* ------------------------------------------------------------------ */
.wc-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; background: var(--wc-brand);
}
.wc-avatar-xs { width: 24px; height: 24px; font-size: 9px; }   /* dense tables */
.wc-avatar-sm { width: 32px; height: 32px; font-size: 12px; }  /* headers, cards */
.wc-avatar-stack > .wc-avatar { margin-left: -8px; border: 2px solid #fff; }

/* ------------------------------------------------------------------ */
/* Filters                                                            */
/* ------------------------------------------------------------------ */
.wc-filter-bar {
  display: flex; align-items: center;
  background: #fff; border-radius: 6px; padding: .25rem;
}

/* A table jumped to from a button sits clear of what is stuck to the top of
   the window: the navbar, and the form's own header under it. */
[data-table-panel] { scroll-margin-top: calc(var(--wc-navbar-height) + 4.5rem); }

/* A code read rather than composed: every character the same width, and a
   size down so a long one fits its column whole. */
.wc-code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  letter-spacing: -.01em;
}

/* The OK/KO column: a badge, so no wider than it needs to be. */
.wc-col-flag { width: 4.5rem; }

/* The conversion table has its own grid. The WCI product is what the whole
   row is for — a name of fifty-odd characters — so it takes the room, and
   what feeds it is cut back to what it actually holds. The widths add up to
   the table width, so the columns cannot drift as values change. */
[data-table-panel^="conv-"] { --wc-grid-width: 94.5rem; }
[data-table-panel^="conv-"] .wc-col-product         { width: 13rem; }
[data-table-panel^="conv-"] .wc-col-size            { width: 6rem; }
[data-table-panel^="conv-"] .wc-col-brand           { width: 8rem; }
[data-table-panel^="conv-"] .wc-col-weight_kg       { width: 6rem; }
[data-table-panel^="conv-"] .wc-col-processing_fee  { width: 7rem; }
[data-table-panel^="conv-"] .wc-col-wci_article     { width: 37rem; }
[data-table-panel^="conv-"] .wc-col-carton          { width: 8.5rem; }
[data-table-panel^="conv-"] .wc-col-flag            { width: 3.5rem; }

/* ------------------------------------------------------------------ */
/* The order's own details                                            */
/* ------------------------------------------------------------------ */
/* The title bar of an order wears the same tint as the details under it, so
   the head of the document reads as one block before the stages begin. */
.wc-page-header-tinted {
  background: var(--wc-headline-bar);
  border-bottom-color: var(--wc-headline-border);
}

/* Who the order is with, when, and on what terms: the facts every stage below
   is read against. Tinted and set in bold so the block is told apart at a
   glance from the tables of lines, which are where the work happens. */
.wc-order-header .card {
  background: var(--wc-headline);
  border-color: var(--wc-headline-border);
}
.wc-order-header .card-header {
  background: var(--wc-headline-bar);
  border-bottom-color: var(--wc-headline-border);
  color: var(--wc-text);
}
/* The values carry the weight; the titles that name them do not. A column of
   bold labels reads as a wall, and what is worth seeing is what the order
   actually says. */
.wc-order-header,
.wc-order-header dd,
.wc-order-header .form-control,
.wc-order-header .form-select { font-weight: 600; }
.wc-order-header dt,
.wc-order-header label { font-weight: 400; }
/* The boxes stay white, or a tinted field on a tinted card is unreadable. */
.wc-order-header .form-control,
.wc-order-header .form-select { background-color: #fff; }
/* Asides keep their quieter weight: the help under a box, the exchange rate
   beside a currency, and the notes typed at the foot of the order. */
.wc-order-header .form-text,
.wc-order-header .text-muted,
.wc-order-header p { font-weight: 400; }

/* ------------------------------------------------------------------ */
/* The stage arrow                                                    */
/* ------------------------------------------------------------------ */
/* An order is five stages and a dozen tables. Read down one page they run to
   several screens, so only one stage is on show and this is how you move
   between them. An arrow rather than a row of buttons: the stages are a
   sequence, and the shape says which way the work runs.

   It sits under the order's own details and sticks there once you scroll past
   it, so it is to hand wherever you have got to. */
.wc-stages-bar {
  position: sticky;
  top: calc(var(--wc-navbar-height) + 3.5rem);   /* the page header's height */
  z-index: 1019;                                 /* under the header's 1020 */
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--wc-bg);
  padding: .35rem 0 .6rem;
  margin-bottom: .25rem;
}

.wc-stages {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
}

/* Each step is a chevron: notched on its left, pointed on its right, and
   pulled back over the one before so the two interlock. Borders cannot follow
   a clip-path, so the states are told apart by fill alone. */
.wc-stage {
  --wc-notch: 14px;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 0;
  background: var(--wc-secondary);
  color: var(--wc-text-muted);
  font-size: 12.5px;
  line-height: 1.2;
  padding: .5rem .6rem .5rem calc(.6rem + var(--wc-notch));
  margin-right: calc(var(--wc-notch) * -1 + 2px);
  clip-path: polygon(
    0 0,
    calc(100% - var(--wc-notch)) 0,
    100% 50%,
    calc(100% - var(--wc-notch)) 100%,
    0 100%,
    var(--wc-notch) 50%
  );
}
/* The first step has no notch to take, and the last no point to give. */
.wc-stage:first-child {
  padding-left: .8rem;
  clip-path: polygon(
    0 0, calc(100% - var(--wc-notch)) 0, 100% 50%,
    calc(100% - var(--wc-notch)) 100%, 0 100%
  );
}
.wc-stage:last-child {
  margin-right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, var(--wc-notch) 50%, 0 0);
}
.wc-stage:hover:not(:disabled) { background: var(--wc-lightblue); color: var(--wc-brand); }
.wc-stage:disabled { color: var(--wc-text-muted); opacity: .55; cursor: not-allowed; }

.wc-stage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The step number, or a tick once it is behind you. */
.wc-stage-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(var(--wc-brand-rgb), .12);
  font-size: 11px;
  font-weight: 600;
}

/* Finished. */
.wc-stage--done { background: #e2f0e3; color: #1e7e34; }
.wc-stage--done .wc-stage-mark { background: var(--wc-success); color: #fff; }

/* The stage the order is actually waiting on. */
.wc-stage--current { background: var(--wc-lightblue); color: var(--wc-brand); font-weight: 600; }
.wc-stage--current .wc-stage-mark { background: var(--wc-brand); color: #fff; }

/* The one being read. Filled, so "where I am" and "what is left" are told
   apart at a glance — they are usually, but not always, the same stage. */
.wc-stage--open { background: var(--wc-brand); color: #fff; }
.wc-stage--open:hover:not(:disabled) { background: var(--wc-brand-dark); color: #fff; }
.wc-stage--open .wc-stage-mark { background: rgba(255, 255, 255, .25); color: #fff; }

.wc-stage-all { flex: 0 0 auto; }

/* What the arrow puts away. Its own class, so a card it hides does not fight
   with the d-none that says the order has not reached that stage. */
.wc-stage-hidden { display: none !important; }

/* ------------------------------------------------------------------ */
/* Section colours                                                    */
/* ------------------------------------------------------------------ */
/* An order is five stages of work, and on a long page the eye needs to know
   which one a table belongs to without reading back up to the heading. Each
   section sets an accent; the table strips and headings read it. Soft tints
   with dark ink, so a screen of figures is not a paint chart. */
.wc-section {
  --wc-accent: var(--wc-lightblue);
  --wc-accent-ink: var(--wc-brand);
}
.wc-section--received   { --wc-accent: #e0f0ff; --wc-accent-ink: #064273; }
.wc-section--conversion { --wc-accent: #d9efec; --wc-accent-ink: #0f6b7d; }
.wc-section--products   { --wc-accent: #e9e4f5; --wc-accent-ink: #4b2e83; }
.wc-section--items      { --wc-accent: #e2f0e3; --wc-accent-ink: #1e7e34; }
.wc-section--invoice    { --wc-accent: #f6e7d6; --wc-accent-ink: #7a4a2a; }

/* The section's own bar keeps the navy: it is the heading, not the table. A
   hairline of the accent under it ties the two together. */
.wc-section > .wc-section-header { border-bottom: 3px solid var(--wc-accent); }

/* ------------------------------------------------------------------ */
/* Data tables — dense, for an ERP                                    */
/* ------------------------------------------------------------------ */
.wc-table thead th {
  background: var(--wc-accent, var(--wc-lightblue));
  color: var(--wc-accent-ink, var(--wc-brand));
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.wc-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sortable column heading: the whole label is the link, and the one in force
   is the only one wearing an arrow. */
.wc-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.wc-sort:hover { color: inherit; text-decoration: underline; }
.wc-sort-on { text-decoration: underline; }
/* Columns you are not sorted by wear a faint double chevron, so it is plain
   that every heading is a handle and not only the one in force. */
.wc-sort-hint { opacity: .3; font-size: .85em; }
.wc-sort:hover .wc-sort-hint { opacity: .75; }

/* A filter box under each heading: the list is narrowed where it is read,
   rather than in a bar away from the column it applies to. It carries the
   heading's own background so the two rows read as one block. */
.wc-filter-row > td {
  background: var(--wc-accent, var(--wc-lightblue));
  padding: 0 .35rem .3rem;
  vertical-align: top;
  border-bottom: 1px solid var(--wc-border);
}
.wc-filter-row .form-control { font-size: 12px; }
.wc-filter-row .form-control::placeholder { color: var(--wc-text-muted); opacity: .7; }

/* A grid whose cells hold lists, one value per line — the shape their own
   packaging and characteristics screens are read in. Columns are held narrow
   so all eleven fit, and a long value wraps rather than pushing the table
   sideways. */
.wc-grid td { white-space: normal; max-width: 11rem; line-height: 1.35; }
.wc-grid tbody tr > td { border-left: 1px solid var(--wc-border); }
.wc-grid tbody tr > td:first-child { border-left: 0; }

/* One row, one line. A list is read by running the eye down a column, which a
   row wrapping to three lines breaks; the table scrolls sideways inside its
   .table-responsive instead of growing downwards. */
.wc-table-oneline tbody td { white-space: nowrap; }

/* A heading is free to wrap where its cells hold a figure: "Processing
   Cost/Kg" over three lines costs nothing in height and takes the column down
   to the width of the numbers under it. */
.wc-table thead th.wc-head-wrap { white-space: normal; width: 1%; }
/* The width is put on the link, not the cell: in an auto-layout table a cell
   takes the width of its content, so capping the label is what actually takes
   the column in. */
.wc-table thead th.wc-head-wrap .wc-sort {
  display: inline-block;
  max-width: 6rem;
  white-space: normal;
  text-align: right;
}

/* Bycatch sections are tinted, mirroring the colour split WCI already uses to
   tell target catch from bycatch at a glance. */
.wc-bycatch { --wc-accent: var(--wc-sand); --wc-accent-ink: #7a4a2a; }

/* Section banner grouping several tables (RECEIVED, PRODUCTS TO CREATE…). */
.wc-section-header {
  background: var(--wc-brand);
  color: #fff;
  padding: .55rem 1rem;
  /* A step up from the table titles inside it: the sections are the four
     stages of the order, and they should read as the headings of the page. */
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
}
/* Title bar of one sub-table (Hake, Other…). It wears the same colour as that
   table's own column headings, a size up from them, so a stack of tables in one
   section reads as a stack of tables and not as one long list. */
.wc-table-header {
  background: var(--wc-accent, var(--wc-lightblue));
  color: var(--wc-accent-ink, var(--wc-brand));
  padding: .45rem 1rem;
  border-top: 1px solid var(--wc-border);
}
.wc-table-title {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}


/* The first sub-table sits straight under the banner: no double border. */
.wc-section-header + div > .wc-table-header { border-top: 0; }

/* Editable rows inside a formset table. Without minimum widths the browser
   squeezes every control to its content and the row becomes unreadable. */
.wc-table td .form-control,
.wc-table td .form-select { min-width: 6rem; }
.wc-table td select[name$="-product"] { min-width: 11rem; }
.wc-table td input[name$="-description"],
.wc-table td input[name$="-comments"],
.wc-table td input[name$="-number"] { min-width: 10rem; }
.wc-table td input[type="checkbox"] { min-width: 0; }
.wc-table thead th { vertical-align: bottom; }

/* Editable rows are dense on purpose: a landing is twenty lines of raw
   material, and the whole table should be readable without scrolling. Only
   rows carrying controls are tightened — the read-only tables keep their air. */
.wc-table tbody tr.js-row > td { padding-top: .15rem; padding-bottom: .15rem; }
.wc-table tbody tr.js-row .form-control-sm,
.wc-table tbody tr.js-row .form-select-sm {
  padding-top: .05rem;
  padding-bottom: .05rem;
  line-height: 1.35;
}

/* Row numbers. A CSS counter rather than a rendered value, so a row added,
   pasted or removed renumbers the table with nothing to keep in step. */
.wc-table tbody { counter-reset: wc-row; }
.wc-table tbody tr.js-row { counter-increment: wc-row; }
.wc-table td.wc-row-number::before { content: counter(wc-row); }
.wc-table .wc-row-number {
  text-align: right;
  color: var(--wc-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Computed columns inside an editable table: read-only figures that follow
   what is being typed, so they read like the view rather than like a field. */
.wc-table .wc-line-total {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--wc-text-muted);
}

/* One grid for the whole RECEIVED section: the two category tables and the
   line that adds them up share a column layout, so a figure sits under the
   same heading wherever you look. Bycatch has no size column, and its
   description takes exactly that width back, which keeps everything after it
   in line with the hake table above. */
/* The width is spelled out, not left to the content or stretched to the box:
   either of those lets the browser hand the slack out column by column, and
   two tables whose columns differ then drift apart again. KEEP THE TOTAL IN
   STEP with the column widths below if a column is ever added. */
.wc-fixed-grid { table-layout: fixed; width: var(--wc-grid-width, 85.5rem); }
/* The read-only pages carry the same columns without the tick box. */
.wc-read-grid { --wc-grid-width: 82.5rem; }
.wc-fixed-grid td .form-control,
.wc-fixed-grid td .form-select { min-width: 0; width: 100%; }

.wc-col-select      { width: 3rem; }
.wc-col-number      { width: 3rem; }
.wc-col-description { width: 13rem; }
.wc-col-size        { width: 7rem; }
.wc-col-weight_kg   { width: 7rem; }
.wc-col-price_per_kg,
.wc-col-quota_fee_per_kg,
.wc-col-quota_levy_per_kg { width: 8rem; }   /* heading plus its fill button */
.wc-col-total-per-kg { width: 7.5rem; }
.wc-col-total-cost   { width: 9rem; }
.wc-col-comments     { width: 12rem; }
.wc-col-bins         { width: 5rem; }
/* Bycatch has no size column and one for bins, so its description takes back
   what is left. The two tables stay on the same grid, which is what lets the
   line under them add both up in line with the figures. */
.wc-bycatch .wc-col-description { width: 15rem; }   /* 13 + size - bins */

/* A breath between the tables stacked inside one section: after hake's totals
   before the bycatch heading, and again before the line that adds the two
   together. Enough to tell them apart, not enough to break the block up. */
.wc-table-gap { margin-top: .5rem; }

/* The yield rides on the totals line, in the comments column — the only one
   wide enough for a sentence, and empty on that row anyway. */
.wc-yield {
  font-weight: 400;
  font-size: 12px;
  white-space: normal;
  line-height: 1.3;
  color: var(--wc-text-muted);
}
.wc-yield strong { color: var(--wc-text); }

/* The line across both category tables of a section. It wears the section's
   own navy so the hierarchy reads top to bottom: section, table, table total,
   and then this one closing the whole section. */
.wc-combined-total td {
  background: var(--wc-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 0;
}
.wc-combined-total .wc-col-weight_kg,
.wc-combined-total .wc-col-total-per-kg,
.wc-combined-total .wc-col-total-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Read-only pages show the same line, but their tables are not on this grid. */
.wc-combined-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: .45rem 1rem;
  background: var(--wc-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.wc-combined-figures {
  display: flex;
  gap: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.wc-combined-unit {
  font-weight: 400;
  opacity: .7;
  margin-right: .2rem;
}

/* Totals line under an editable table, same weight as the one in the view. */
.wc-table tfoot .js-grand-quantity,
.wc-table tfoot .js-grand-cost { font-weight: 600; color: var(--wc-text); }
.wc-table tfoot td { background: var(--wc-secondary); }

/* Fill-down button living in a column heading. */
.btn-wc-fill {
  padding: 0 .2rem;
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--wc-brand);
  opacity: .65;
}
.btn-wc-fill:hover { opacity: 1; color: var(--wc-brand-dark); }
.wc-bycatch .btn-wc-fill { color: #7a4a2a; }

/* Row selection. Screen state only — these boxes have no name and never post. */
.wc-table .wc-row-select { padding-right: 0; }
.wc-table tbody tr.wc-row-selected > td { background: var(--wc-lightblue); }
.wc-badge-selection {
  background: var(--wc-brand);
  color: #fff;
  font-weight: 500;
  border-radius: 999px;
}

/* A row flagged for removal keeps its place, struck through, until Save: the
   deletion only happens on the server, so the user can still take it back. */
.wc-table tr.wc-row-deleted { background: rgba(194, 42, 50, .06); }
.wc-table tr.wc-row-deleted td .form-control,
.wc-table tr.wc-row-deleted td .form-select {
  text-decoration: line-through;
  opacity: .55;
}

/* Module cards on the dashboard */
.wc-module-card { border-color: var(--wc-border); transition: border-color .15s, box-shadow .15s; }
a:hover > .wc-module-card { border-color: var(--wc-brand); box-shadow: 0 2px 8px rgba(var(--wc-brand-rgb), .12); }
.wc-module-card .card-body > .d-flex > .bi { color: var(--wc-brand); }
.wc-module-card--pending { background: var(--wc-secondary); }

/* ------------------------------------------------------------------ */
/* Inline editing (see docs/ui_components.md section 3) — invisible    */
/* until hover, BUT visible on focus (accessibility).                  */
/* ------------------------------------------------------------------ */
.edit-field { max-width: 180px; border: 1px solid transparent; background: transparent; }
.wc-row:hover { background: var(--wc-secondary); }
.wc-row:hover .edit-field,
.edit-field:focus { border-color: var(--wc-border); background: #fff; }
.edit-field:focus { outline: 2px solid var(--wc-brand); outline-offset: 1px; }
.btn-action { padding: .2rem .5rem; font-size: .8rem; }
.password-input { max-width: 160px; font-size: .85rem; }