/* Bootstrap-5 theming for the Pultrack palette: buttons, cards, forms, tables, badges, alerts.
   Extracted from POS static/pultrack.css @ origin/main (lines 66-235); table-pane rules live in components.css.
   Load after Bootstrap and tokens.css. */

body{
  background:var(--app-bg);
  color:var(--app-ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}

/* Numbers are the product — tabular figures wherever amounts line up. */
table, .text-end, .money, input[type=number]{ font-variant-numeric:tabular-nums; }

code, .mono, kbd{ font-family:'IBM Plex Mono',monospace; }
code{ color:var(--green); }

/* ---------------------------------------------------------------- buttons */
.btn-primary, .btn-success{
  --bs-btn-bg:var(--green); --bs-btn-border-color:var(--green);
  --bs-btn-hover-bg:var(--green-2); --bs-btn-hover-border-color:var(--green-2);
  --bs-btn-active-bg:var(--green-2); --bs-btn-active-border-color:var(--green-2);
  --bs-btn-disabled-bg:var(--green); --bs-btn-disabled-border-color:var(--green);
}
.btn-outline-primary, .btn-outline-success{
  --bs-btn-color:var(--green); --bs-btn-border-color:var(--green-line);
  --bs-btn-hover-bg:var(--green); --bs-btn-hover-border-color:var(--green);
  --bs-btn-active-bg:var(--green); --bs-btn-active-border-color:var(--green);
}
.btn-danger{ --bs-btn-bg:var(--debt); --bs-btn-border-color:var(--debt);
  --bs-btn-hover-bg:#7d241c; --bs-btn-hover-border-color:#7d241c; }
.btn-outline-danger{ --bs-btn-color:var(--debt); --bs-btn-border-color:var(--debt-line);
  --bs-btn-hover-bg:var(--debt); --bs-btn-hover-border-color:var(--debt); }
.btn-warning{ --bs-btn-bg:var(--gold); --bs-btn-border-color:var(--gold); }
.btn{ border-radius:9px; }
.btn-sm{ border-radius:7px; }
.btn:focus-visible{ box-shadow:none; outline:2px solid var(--green); outline-offset:2px; }

/* ------------------------------------------------------------------ cards */
.card{
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  background:var(--app-card);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--app-line-soft);
  font-weight:600;
}
/* A live-preview card (e.g. the receipt preview on Company settings) follows the
   long form column on wide screens so the right side isn't left empty; on mobile
   the columns stack and it flows normally. top clears the ~50px top bar. */
@media (min-width: 992px){
  .pt-sticky-preview{ position:sticky; top:66px; }
}

/* ------------------------------------------------------------------ forms */
.form-control, .form-select{
  border-radius:9px;
  border-color:var(--app-line);
  color:var(--app-ink);
}
.form-control:focus, .form-select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 .25rem rgba(27,87,57,.15);
}
.form-label{ font-size:.83rem; font-weight:500; color:var(--muted); margin-bottom:.25rem; }
.input-group .btn{ border-radius:0 9px 9px 0; }
/* Show/hide password eye — sits inside the field; input gets right padding so
   the typed value never slides under the icon. */
.pw-eye{ position:absolute; top:0; right:0; height:100%; width:2.6rem; z-index:5;
  display:flex; align-items:center; justify-content:center; border:0; background:transparent;
  color:var(--muted); cursor:pointer; }
.pw-eye:hover{ color:var(--ink); }
.pw-field{ position:relative; }
.pw-field .form-control{ padding-right:2.6rem; }

/* ----------------------------------------------------------------- tables */
.table{ --bs-table-hover-bg:var(--app-hover); }
.table > :not(caption) > * > *{ border-bottom-color:var(--app-line-soft); }
.table-light, .table-light th{ background-color:var(--app-hover) !important; color:var(--muted); }
table.sortable thead th, table.sticky-head thead th{ background-color:var(--app-hover); }
table.sortable thead th:hover{ background-color:var(--app-line-soft); }
/* Content density: the back-office content area reads a touch smaller than the
   16px default (the sidebar/topbar keep their own sizes — this is scoped to
   .bo-main). Headings use rem so they stay put; body + table text inherit. */
.bo-main{ font-size:.9rem; }
/* Breathing room at the table's outer edges WITHOUT insetting the whole table.
   The padding lives inside the first/last cells, so the header band (.table-light)
   and row-hover still reach the card edge — no inset "white bars" beside the
   header. Works on every layout: a right-aligned last column (GP, totals) gets
   its gutter; a trailing actions cell gets it too. */
.bo-main .table > :not(caption) > * > *:first-child{ padding-inline-start:.9rem; }
.bo-main .table > :not(caption) > * > *:last-child{ padding-inline-end:.9rem; }
/* Row-action controls (Edit / Open / Void …) are affordances, not primary
   buttons: drop the heavy frame, size them to the smaller content text, and keep
   them on one line so a narrow actions column can't wrap them onto two rows.
   Colour is retained (secondary/primary/danger) so intent still reads; the hover
   fill is the "clickable" cue. */
.bo-main .table tbody td .btn-sm[class*="btn-outline-"]{
  --bs-btn-border-color:transparent;
  --bs-btn-padding-y:.1rem;
  --bs-btn-padding-x:.4rem;
  --bs-btn-font-size:.8rem;
  white-space:nowrap;
}
/* Short structured values must never wrap onto two lines. Doc numbers live in
   <code>; date cells carry .dt. Keeps "2026-06-30" / "PAY-20260630-0002" intact. */
.table code{ white-space:nowrap; }
td.dt, th.dt, td.nowrap, th.nowrap{ white-space:nowrap; }
.table-success, .table-success th, .table-success td{
  --bs-table-bg:var(--green-soft); color:var(--app-ink);
}

/* ----------------------------------------------------------------- badges */
.badge.bg-secondary{ background-color:var(--app-hover) !important; color:var(--muted);
  border:1px solid var(--app-line); font-weight:500; }
.badge.bg-success{ background-color:var(--green-soft) !important; color:var(--green);
  border:1px solid var(--green-line); font-weight:600; }
.badge.bg-danger{ background-color:var(--debt-soft) !important; color:var(--debt);
  border:1px solid var(--debt-line); font-weight:600; }
.badge.bg-warning{ background-color:var(--gold-soft) !important; color:var(--gold-2);
  border:1px solid var(--gold-line); font-weight:600; }
/* These three were never themed, so every badge using them rendered in raw
   Bootstrap next to the four above: cyan "Partial", near-white "Cancelled",
   #212529 "Written off". A status vocabulary is only readable if the whole
   ladder is one palette — grey waiting, slate in progress, gold attention,
   green done, ghost cancelled. */
.badge.bg-info{ background-color:var(--slate-soft) !important; color:var(--slate);
  border:1px solid var(--slate-line); font-weight:600; }
.badge.bg-light{ background-color:var(--app-card) !important; color:var(--muted);
  border:1px solid var(--app-line); font-weight:500; }
.badge.bg-dark{ background-color:var(--ink) !important; color:#FFFFFF;
  border:1px solid var(--ink); font-weight:600; }

/* ------------------------------------------------ semantic text (handoff) */
.text-danger{ color:var(--debt) !important; }          /* red = already owed */
.text-success{ color:var(--green) !important; }
.text-warning{ color:var(--gold-2) !important; }       /* amber = debt this sale adds */
a{ color:var(--green); }
.alert-danger{ --bs-alert-bg:var(--debt-soft); --bs-alert-border-color:var(--debt-line); --bs-alert-color:var(--debt); }
.alert-warning{ --bs-alert-bg:var(--gold-soft); --bs-alert-border-color:var(--gold-line); --bs-alert-color:var(--gold-2); }
.alert-success{ --bs-alert-bg:var(--green-soft); --bs-alert-border-color:var(--green-line); --bs-alert-color:var(--green-2); }

/* Secondary USD figures — --money-2, AA+ on white and paper (handoff §02). */
.money-sec{ color:var(--money-2); font-size:.85em; }