/* ------------------------------------------------------------
Hunt Clicker — brand refresh (2026)
Token NAMES are preserved so downstream CSS/JS keeps working.
VALUES are repointed to the new palette:
- former --yellow accent is now Blaze orange
- former --black is Tactical black
- former --white is pure #ffffff
- --cream is warmer/lighter for the workspace
Also introduced: --blaze (alias), --amber (secondary),
and typography tokens --font-heading (Barlow Condensed) and
--font-ui (Inter). Fonts are loaded via ,
plus an explicit opt-in class.
NOTE (2026-08-10): no LIVE screen currently needs this. Every line-item
table in the app (price list, invoice, proposal, conSpecies, PH register,
views meat/measure) builds its inputs in JS with bespoke classes
(.jsPrice, .price, .qty, .js_amount) or bare in index.html is frmConPay's placeholder
row, which FrmConPayUtils replaces at runtime. This is therefore a guard
rail, not a fix — it stops a future table field from ballooning. */
td .gFrmInput,
.gFrmInput--dense {
height: var(--input-h-dense);
padding: 0 12px;
font-size: 15px;
border-radius: var(--kit-radius-sm);
}
td textarea.gFrmInput,
textarea.gFrmInput--dense {
height: auto;
padding: 10px 12px;
}
/* ==========================================================================
KIT LABELS — Round 1, Item 3 (2026-08-10)
Ported from the mobile locked input kit
(Hunt-Clicker-Mobile-App/mockups/forms-input-kit.html → .field-label /
.field-required / .field-tag).
Port rules from Items 1-2 observed throughout: no raw hex, --yellow is never
used (it means blaze here, amber there), var(--radius*) -> var(--kit-radius*),
var(--brand-orange) -> var(--accent).
Sits AFTER the two earlier .gFrmLabel rules (line ~288 box model, line ~4295
old typography) so it wins on the properties it declares. It deliberately
declares NO margin, width, display or flex-direction — this item changes
caption TYPOGRAPHY, not layout.
🚨 THE WRAPPING TRAP: 85 of the 108 .gFrmLabel elements WRAP their control
(Name: ). text-transform and
letter-spacing are INHERITED properties, so putting the caption treatment on
the label alone would also uppercase and letter-space: every value the user
types, every in a , frmConPay's concession-name and its
two amount readouts, and frmPackage's "Add" button. The reset block below
confines the caption treatment to the label's own text nodes — which is the
only way to reach them, since a bare text node cannot be selected.
========================================================================== */
.gFrmLabel {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
gap: 8px;
}
/* Reset (a) — the two inherited properties, killed on everything the label
wraps. Bounded to descendants of .gFrmLabel, so nothing else in the app can
be touched by it. */
.gFrmLabel * {
text-transform: none;
letter-spacing: normal;
}
/* Reset (b) — size + colour for wrapped content that has none of its own.
14px / var(--ink) is exactly what these elements inherited from .gFrmLabel
BEFORE this item (--ink is declared as var(--black), the old label colour),
so this restores the status quo rather than introducing a new value.
Controls are deliberately excluded: input / select / textarea own their 16px
and their own colour from Item 2, and re-declaring here at equal specificity
would override Item 2 on source order. Headings keep ~16px, the size the UA
1.17em gave them off the old 14px label. */
.gFrmLabel div,
.gFrmLabel span,
.gFrmLabel p,
.gFrmLabel a,
.gFrmLabel button,
.gFrmLabel small {
font-size: 14px;
color: var(--ink);
}
.gFrmLabel h1,
.gFrmLabel h2,
.gFrmLabel h3,
.gFrmLabel h4,
.gFrmLabel h5,
.gFrmLabel h6 {
font-size: 16px;
color: var(--ink);
}
/* Required / optional marker. index.html uses ONE class, .gFrmIputReq, for both
the "*" (6 uses) and the "(optional)" tag (2 uses), and this item is CSS-only
— no new classes. :has() splits them off the control's own `required`
attribute, which tracks the two cases exactly across all 8 uses.
Base is the BLAZE asterisk (kit .field-required), narrowed to the ink-faint
tag (kit .field-tag) only where the label wraps no required control. That
order is deliberate, for two reasons:
1. Two of the eight markers — the wizard Date/Time asterisks at index.html
2282/2286 — sit on `.wizLabel`, NOT `.gFrmLabel`, so no .gFrmLabel-scoped
rule can reach them. As the base, they get the blaze they should have;
as a refinement they were measured rendering ink-faint, i.e. an almost
invisible required marker.
2. If :has() is ever unsupported, every marker falls back to blaze —
an optional tag that looks required, rather than a required asterisk
that has faded out.
font-size is left at its original 14px — colour is what this item specifies. */
.gFrmIputReq {
color: var(--accent);
font-weight: 700;
}
.gFrmLabel:not(:has(:required)) .gFrmIputReq {
color: var(--ink-faint);
font-weight: 500;
}
/* SELECTOR SWEEP (per HANDOFF §5.3 — how the price list escaped Item 2).
Searched every rule whose selector ends in a bare `label`; six exist. Only
this one steals caption chrome from .gFrmLabel: it is ID-scoped (#id + class
+ element) so it outranks the bare class no matter where this block sits.
The markup underneath IS class="gFrmLabel", so without this the price-list
description + currency captions would have escaped Item 3 exactly as their
inputs escaped Item 2. Only the three properties it actually steals are
re-stated — letter-spacing / text-transform / gap are not declared there, so
.gFrmLabel above already supplies them.
The other five are non-conflicts, logged rather than changed:
.gFullFrmHeader label (full-page form TITLE, no .gFrmLabel inside it),
#frmHunt .gFrmRow2Col > label (flex/min-width only — layout, no chrome;
note it is duplicated verbatim at ~4067 and ~4726),
#frmViews #frmViewsBtnAddPhoto label and #frmViews .measureInpRow label
(bare s, NOT .gFrmLabel — a dark-surface trophy-measure widget and a
photo button; both belong to Round 5 ⑯ views). */
#frmPriceList .detailInputsCon label {
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
}
/* ==========================================================================
ITEM 3b — label cleanup from QA W-004 (2026-08-10)
========================================================================== */
/* (a) ONE LABEL LANGUAGE PER SCREEN.
QA caught frmProposal showing two: its 11 .gFrmLabel captions next to the
"Receive a payment" block, which uses its own .frmProPayLbl. Sweeping every
class name containing Lbl/Label found the same construct hiding on
frmInvoice as .payLbl — the identical four-field payment block, wrapping
controls that Item 2 already put on the kit. Both are folded into the kit
caption spec here rather than given their own rules, so they cannot drift
from .gFrmLabel again.
.frmProPayLbl and .payLbl had NO display of their own, so `gap` would have
been inert — display/flex-flow are declared for them (and only them) to make
the 8px caption-to-field gap real. That is the layout change this job asks
for; .gFrmLabel's own box model is untouched.
NOT brought along, logged instead: #frmPricePackages .packDisLbl (9 USD/EURO/
ZAR captions). Its fields are bare unstyled whose options would otherwise be uppercased. */
.frmProPayLbl *,
#frmInvoice .payLbl * {
text-transform: none;
letter-spacing: normal;
}
/* (d) frmPHRegister OPT-OUT (Bertus decision, QA W-004).
This form is a deferred A4 PRINT artifact (HANDOFF §5.7). Item 3 let it come
along on the shared class; it is now held at its exact pre-Item-3 caption
treatment so the printed register renders as it always did. Its 18 captions
also kept their trailing ":" when the rest of the app had them stripped.
var(--ink) is declared as var(--black), the pre-Item-3 colour. */
#frmPHRegister .gFrmLabel {
font-size: 14px;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--ink);
gap: 5px;
}
/* (b) PRICE DIGIT CLIPPING on the price-list species table (QA W-004, ~900px).
NOT caused by Item 2/2b — the rule that styles these fields
(`#frmPriceList table input[type=number]`, ~line 2048) is byte-identical in
all four backups going back to before Item 1.
Real cause is arithmetic, and it is fixed-width all the way down:
FrmPriceListUtils.buildForm (js/index.js:7225) emits the price cell as
with .
Hierdie reëls kleur die hele ry met sibling selector. */
#frmWizard .searchTable tr > td.rowSelected,
#frmWizard .searchTable tr > td.rowSelected ~ td,
#frmWizard .wizList tr > td.rowSelected,
#frmWizard .wizList tr > td.rowSelected ~ td {
background: color-mix(in srgb, var(--yellow) 12%, transparent);
color: var(--black);
border-color: color-mix(in srgb, var(--yellow) 40%, transparent);
box-shadow: 0 3px 10px rgba(255, 90, 31, 0.15);
}
/* Switch-styl (werk met huidige JS wat net .rowSelected toggle op sel 1) */
#frmWizard .searchTable .wizSwitch,
#frmWizard .wizList .wizSwitch {
position: relative;
float: right;
width: 48px;
height: 26px;
margin-left: 10px;
border-radius: 999px;
background: rgba(34, 34, 32, 0.6);
transition: background 0.2s ease;
}
#frmWizard .searchTable .wizSwitch div,
#frmWizard .wizList .wizSwitch div {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--cream);
border: 1px solid rgba(34, 34, 32, 0.35);
transition: left 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
/* wanneer die ry geselekteer is, skuif die “knop” regs en kleur die baan groen */
#frmWizard .searchTable td.rowSelected .wizSwitch,
#frmWizard .wizList td.rowSelected .wizSwitch {
background: var(--green);
}
#frmWizard .searchTable td.rowSelected .wizSwitch div,
#frmWizard .wizList td.rowSelected .wizSwitch div {
left: 24px;
background: var(--white);
border-color: rgba(34, 34, 32, 0.2);
}
/* “Edit” ikon bly werk op View-rye */
#frmWizard .searchTable .viewDesc:hover,
#frmWizard .wizList .viewDesc:hover {
position: relative;
background: inherit;
cursor: pointer;
}
#frmWizard .searchTable .viewDesc:hover::after,
#frmWizard .wizList .viewDesc:hover::after {
content: url(../img/icoEdit.png);
display: block;
position: absolute;
transform: scale(0.5);
right: 15px;
top: -10px;
}
/* Klein skerms – effens kompakter paddings */
@media (max-width: 420px) {
#frmWizard .searchTable td,
#frmWizard .wizList td {
padding: 10px 12px;
}
}
/* ───── Wizard “View” step: card-lys look ───── */
#frmWizard .viewTbl {
width: 100%;
margin-top: 12px;
border-collapse: separate;
border-spacing: 0 8px; /* gap tussen ry-kaarte */
background: transparent;
}
/* Kaart-styl selle */
#frmWizard .viewTbl td {
background: var(--white);
border: 1px solid rgba(34, 34, 32, 0.1);
padding: 12px 14px;
line-height: 1.35;
}
/* Linker kolom (etiket) – smal, regs uitgelê */
#frmWizard .viewTbl tbody tr td:first-child {
width: 110px; /* genoeg vir “Concessions”, ens. */
text-align: right;
color: var(--grey);
font-family: sans-serif;
font-weight: 700;
font-size: 0.95rem;
border-right: 0;
border-radius: 10px 0 0 10px;
}
/* Regter kolom (waarde) – vetter teks, edit affordance */
#frmWizard .viewTbl tbody tr td:last-child {
position: relative;
color: var(--black);
font-family: sans-serif;
font-weight: 700;
border-left: 0;
border-radius: 0 10px 10px 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hover: hele kaart lig op, wys “edit” ikoon op die waarde-sel */
#frmWizard .viewTbl tbody tr:hover td {
border-color: rgba(34, 34, 32, 0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
#frmWizard .viewTbl tbody tr:hover td:last-child::after {
content: url(../img/icoEdit.png); /* reuse jou bestaande ikoon */
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) scale(0.5);
opacity: 0.9;
}
/* Waarde-beeld (Photo-ry) – netjiese mini-kaart */
#frmWizard .viewTbl .viewDesc img {
display: block;
max-width: 100%;
max-height: 160px;
border-radius: 10px;
border: 1px solid rgba(34, 34, 32, 0.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
/* Ruimte tussen foto en volgende kaarte */
#frmWizard .viewTbl .viewDesc img + * {
margin-top: 8px;
}
/* “View” ry self klikbaar – cursor wys dit */
#frmWizard .viewTbl tbody tr {
cursor: pointer;
}
/* ───── Quote-table op View (QW): netjiese kaart-tabel ───── */
#frmWizard .viewTblQuote {
display: table; /* JS toggles display; hou dit */
width: 100%;
margin-top: 12px;
border-collapse: separate;
border-spacing: 0;
background: var(--white);
border: 1px solid rgba(34, 34, 32, 0.1);
border-radius: 12px;
overflow: hidden; /* rondings geld vir kop en lyf */
}
#frmWizard .viewTblQuote td {
padding: 10px 12px;
border-bottom: 1px solid rgba(34, 34, 32, 0.08);
font-family: sans-serif;
font-weight: 600;
}
#frmWizard .viewTblQuote .colHeader td {
background: var(--green);
color: var(--cream);
text-align: center;
font-weight: 800;
}
#frmWizard .viewTblQuote .itemHeader td {
background: rgba(67, 137, 69, 0.08); /* sagte groen tint */
font-style: italic;
color: var(--black);
}
#frmWizard .viewTblQuote .item td:nth-child(2),
#frmWizard .viewTblQuote .item td:nth-child(3) {
text-align: center; /* Qty / Price kolomme */
}
/* Inputs in die quote-tabel: netjieser */
#frmWizard #frmWizTbl2 .qty,
#frmWizard #frmWizTbl2 .price {
height: 34px;
border: 1px solid rgba(34, 34, 32, 0.18);
border-radius: 8px;
padding: 0 10px;
font-size: 14px;
outline: none;
transition: box-shadow 0.15s, border-color 0.15s;
}
#frmWizard #frmWizTbl2 .qty:focus,
#frmWizard #frmWizTbl2 .price:focus {
border-color: var(--yellow);
box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25);
}
/* Totaalry: bold met sagte agtergrond */
#frmWizard #frmWizTbl2 .totalRow td {
background: var(--cream);
border-bottom: none;
padding: 12px;
}
#frmWizard #frmWizTbl2 .totalRow .lblTotal,
#frmWizard #frmWizTbl2 .totalRow .lblPrice {
font-weight: 800;
}
/* Subtle responsief */
@media (max-width: 420px) {
#frmWizard .viewTbl tbody tr td:first-child {
width: 96px;
font-size: 0.9rem;
}
#frmWizard .viewTbl .viewDesc img {
max-height: 140px;
}
}
/* ───── Wizard Quote View Table ───── */
#frmWizard .viewTblQuote {
display: none;
background-color: var(--cream);
width: calc(100% - 20px);
border: none;
border-top: solid 3px var(--green);
border-bottom: solid 3px var(--green);
}
#frmWizard .viewTblQuote td:nth-child(1) {
text-align: left;
padding-bottom: 3px;
}
#frmWizard .viewTblQuote td:nth-child(2) {
width: 50px;
text-align: center;
padding-bottom: 3px;
}
#frmWizard .viewTblQuote td:nth-child(3) {
width: 80px;
text-align: center;
padding-bottom: 3px;
}
#frmWizard .viewTblQuote .colHeader {
font-weight: bolder;
}
#frmWizard .viewTblQuote .itemHeader {
height: 35px;
font-style: italic;
vertical-align: bottom;
}
#frmWizard .viewTblQuote .item {
font-weight: bold;
}
#frmWizard #frmWizTbl2 .qty {
width: 95%;
text-align: center;
}
#frmWizard #frmWizTbl2 .price {
width: 95%;
text-align: right;
}
#frmWizard #frmWizTbl2 .totalRow {
font-weight: bold;
}
#frmWizard #frmWizTbl2 .totalRow .lblTotal {
float: left;
}
#frmWizard #frmWizTbl2 .totalRow .lblPrice {
float: right;
}
/* ───── Wizard date/time fields ───── */
#frmWizard .dateCon.wizFields {
margin-top: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Enkelkolom op kleiner skerms */
@media (max-width: 420px) {
#frmWizard .dateCon.wizFields {
grid-template-columns: 1fr;
}
}
#frmWizard .wizField {
display: flex;
flex-direction: column;
gap: 6px;
}
#frmWizard .wizLabel {
font-family: sans-serif;
font-weight: 800;
font-size: 0.95rem;
color: var(--black);
}
/* Inputs – styl beide nuwe (.wizInput) en ou klasname vir compat */
#frmWizard .wizInput,
#frmWizard .dateCon .dateInput,
#frmWizard .dateCon .timeInput {
height: 44px;
width: 100%;
font-size: 16px;
text-align: center;
font-family: sans-serif;
background: var(--white);
border: 1px solid rgba(34, 34, 32, 0.18);
border-radius: 10px;
padding: 0 12px;
outline: none;
transition: box-shadow 0.15s ease, border-color 0.15s ease,
transform 0.05s ease;
}
#frmWizard .wizInput:focus,
#frmWizard .dateCon .dateInput:focus,
#frmWizard .dateCon .timeInput:focus {
border-color: var(--yellow);
box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25);
}
#frmWizard .wizInput:hover,
#frmWizard .dateCon .dateInput:hover,
#frmWizard .dateCon .timeInput:hover {
border-color: rgba(34, 34, 32, 0.28);
}
/* Klein tipografie boost vir die Date/Time labels */
#frmWizard .dateDesc {
/* legacy hook indien elders gebruik */
font-size: 1rem;
font-weight: 800;
}
#frmWizard .btnNextCon {
text-align: right;
position: sticky;
margin-top: 10px;
bottom: 0;
right: 0;
left: 0;
padding: 10px 0 10px 10px;
border-top: 2px var(--lightGrey) solid;
background-color: var(--cream);
}
/*#frmWizard .btnNextCon{
width: 100%;
text-align: right;
position: relative;
background-color: var(--yellow);
}
#frmWizard .nextBtn{
height: 40px;
width: 100px;
background-color: var(--green);
border-radius: 5px;
color: var(--cream);
font-size: 140%;
line-height: 40px;
text-align: center;
cursor: pointer;
display: inline-block;
position: fixed;
margin-left: -100px;
bottom: 60px;
}
*/
/* ───── Wizard Parts (multi-select pills) ───── */
#frmWizard #frmWizPartsCon {
margin-top: 14px;
}
#frmWizard #frmWizPartsBtnCon {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 👈 center */
gap: 10px;
}
/* Basiese “pill” knoppie; klassenaam MOET .partsBtn bly vir jou JS */
#frmWizard #frmWizPartsCon .partsBtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 112px; /* auto verbreed met teks */
height: 40px;
padding: 0 14px;
border-radius: 999px;
background: var(--white);
color: var(--black);
border: 1px solid rgba(34, 34, 32, 0.12);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
user-select: none;
transition: transform 0.06s ease, box-shadow 0.18s ease,
border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
position: relative;
margin: 0;
}
#frmWizard #frmWizPartsCon .partsBtn:hover {
transform: translateY(-1px);
border-color: rgba(34, 34, 32, 0.22);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Geselekteerde “pill” – jou JS toggle .partSelected */
#frmWizard #frmWizPartsCon .partSelected {
background: var(--yellow);
color: var(--cream);
border-color: rgba(255, 90, 31, 0.65);
box-shadow: 0 4px 14px rgba(255, 90, 31, 0.28);
}
/* Klein “check” merk links wanneer gekies (opsioneel, verwyder as jy nie wil hê nie) */
#frmWizard #frmWizPartsCon .partSelected::before {
content: "✓";
font-weight: 900;
font-size: 12px;
line-height: 1;
position: absolute;
left: 10px;
}
#frmWizard #frmWizPartsCon .partsBtn {
padding-left: 18px;
} /* ruimte vir die ✓ */
/* “Other description” veld – lyk soos ’n netjiese inlyn kaart */
#frmWizard #frmWizPartsCon .otherDesc {
display: none; /* jou JS wys/steek dit */
width: 100%;
max-width: 100%;
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(34, 34, 32, 0.18);
background: var(--white);
color: var(--black);
font-size: 16px;
resize: vertical;
outline: none;
max-width: 520px;
margin: 12px auto 0; /* center onder die knoppies */
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
#frmWizard #frmWizPartsCon .otherDesc:focus {
border-color: var(--yellow);
box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25);
}
/* Mobile effens kompakter */
@media (max-width: 420px) {
#frmWizard #frmWizPartsCon .partsBtn {
min-width: 102px;
height: 38px;
}
}
#frmWizKill {
display: none;
}
#frmWizKill div {
margin: 0 auto;
width: 150px;
height: 40px;
line-height: 35px;
margin-top: 50px;
color: var(--cream);
text-align: center;
border-radius: 5px;
}
#frmWizKill .dead {
background-color: var(--green);
}
#frmWizKill .wounded {
background-color: var(--red);
}
#frmWizCountCon {
margin-top: 20px;
}
#frmWizCountCon img {
height: 50px;
width: 50px;
vertical-align: center;
}
#frmWizCountCon .counterCell {
font-size: 80px;
}
/* ───── Wizard Photo Step ───── */
#frmWizPhotoCon {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 10px;
}
/* Foto-kaart */
#frmWizPhoto {
margin-bottom: 14px !important; /* bietjie meer asem voor die knoppie */
display: none; /* jou JS wys/steek dit reeds */
margin: 0 auto;
max-width: 98%;
max-height: 400px;
object-fit: contain;
border-radius: 12px;
border: 1px solid rgba(34, 34, 32, 0.12);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
background: var(--white);
}
/* Leë-staat kaart */
#frmWizNoPhotoCon {
display: none; /* jou JS wys/steek dit */
width: 100%;
max-width: 520px;
min-height: 160px;
margin-top: 10px;
padding: 18px 14px;
border-radius: 12px;
border: 1px dashed rgba(34, 34, 32, 0.25);
margin-bottom: 15px;
background: rgba(245, 238, 224, 0.55); /* sagte cream */
color: var(--black);
text-align: center;
}
#frmWizNoPhotoCon p {
font-weight: 700;
margin: 8px 0 4px;
}
#frmWizNoPhotoCon .emptyIcon {
width: 56px;
height: 56px;
margin: 8px auto 0;
opacity: 0.85;
}
/* Cordova: twee sekondêre opsies langs mekaar */
#frmWizAddDPhotoCon {
display: none; /* jou JS wys dit net op device */
width: 100%;
max-width: 520px;
display: flex;
gap: 10px;
justify-content: center;
}
/* Force compact, content-width button */
#frmWizBtnGallery,
#frmWizBtnCamera {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid rgba(34, 34, 32, 0.14);
background: var(--white);
color: var(--black);
font-weight: 700;
cursor: pointer;
transition: transform 0.06s ease, box-shadow 0.18s ease,
border-color 0.18s ease, background 0.18s ease;
}
#frmWizBtnGallery:hover,
#frmWizBtnCamera:hover {
transform: translateY(-1px);
border-color: rgba(34, 34, 32, 0.24);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
/* Klein skerms */
@media (max-width: 420px) {
#frmWizNoPhotoCon {
padding: 14px 12px;
}
#frmWizBtnAddBPhoto {
min-width: 200px;
height: 46px;
}
}
#frmWizQExtras {
margin-top: 10px;
display: none;
text-align: left;
}
#frmWizard .submitBtn {
margin: 0 auto;
width: 150px;
height: 40px;
line-height: 40px;
font-size: 140%;
margin-top: 30px;
color: var(--cream);
text-align: center;
border-radius: 5px;
background-color: var(--green);
display: none;
cursor: pointer;
}
/*FORM VIEWS*/
#frmViews {
width: 100%;
height: Calc(100% - 60px);
overflow-x: scroll;
}
#frmViews .frmViewFlexCon {
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}
#frmViews .frmViewsSideNav {
width: 300px;
height: 100%;
display: flex;
flex-flow: column nowrap;
padding: 20px;
box-sizing: border-box;
background: var(--gradientSide);
align-items: stretch;
}
#frmViews .frmViewSideNavBtnCon {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
#frmViews .frmViewEditBtn {
font-size: 90%;
color: var(--cream);
cursor: pointer;
}
#frmViews .frmViewEditBtn:hover {
color: var(--grey);
}
#frmViews .btnBack {
width: 30px;
cursor: pointer;
}
#frmViews .detailHeader {
font-size: 20px;
color: var(--black);
font-weight: bold;
margin: 20px 0;
width: 100%;
}
#frmViews .sideNavActBtnsCon .imgBtn {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
padding: 5px 8px;
color: white;
background-color: var(--green);
border-radius: 7px;
margin-top: 20px;
}
#frmViews .sideNavActBtnsCon .imgBtn img {
height: 30px;
margin-right: 8px;
}
#frmViews .fixedHeader {
background-color: var(--cream);
margin-top: 20px;
}
#frmViews .tblHRow {
display: flex;
flex-flow: column nowrap;
}
#frmViews .tblHeader .col1 {
width: 3.5vw;
text-align: center;
max-width: 40px;
}
#frmViews .tblHeader .col2 {
width: 100%;
text-align: left;
}
#frmViews .tblHeader .col3 {
text-align: left;
vertical-align: bottom;
}
#frmViews .frmViewHeadBtnCon {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
margin-top: 20px;
}
#frmViews .frmViewHeadBtn {
display: flex;
padding: 5px 10px;
margin-bottom: 5px;
box-sizing: border-box;
border-radius: 5px;
background-color: var(--green);
color: var(--white);
width: 100px;
cursor: pointer;
text-align: center;
width: 100%;
}
#frmViews .frmViewHuntPandLCon {
display: flex;
flex-flow: column nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
}
#frmViews .frmViewHuntPandLSec {
display: flex;
flex-flow: column nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
}
#frmViews .PandLHead {
display: flex;
flex-flow: row nowrap;
align-items: center;
box-sizing: border-box;
width: 100%;
font-weight: bold;
margin: 8px 0;
border-bottom: 1px solid var(--black);
}
#frmViews .PandLRow {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
}
#frmViews .PandLRowDes {
text-align: left;
font-size: 80%;
}
#frmViews .PandLRowAmount {
text-align: right;
}
#frmViews .PandLTotal {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
border-bottom: var(--black) 3px double;
font-weight: bold;
margin-top: 20px;
}
#frmViews .PandLRowPro {
text-align: left;
}
#frmViews .viewDetails {
display: flex;
align-items: stretch;
font-family: sans-serif;
font-weight: bold;
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
}
#frmViews .viewDetails .btnEdit {
height: 3vw;
max-height: 30px;
border-radius: 50%;
}
#frmViews .infoTbl {
width: 100%;
border: none;
}
#frmViews .infoTbl td {
line-height: 1.5;
font-family: sans-serif;
border: none;
}
#frmViews .infoTbl td img {
width: 15px;
margin-right: 10px;
}
#frmViews .infoTbl tbody tr td:nth-child(1) {
text-align: left;
width: 30px;
}
#frmViews .infoTbl tbody tr td:nth-child(2) {
text-align: left;
}
#frmViews .frmViewsBody {
flex-grow: 1;
padding: 20px;
}
#frmViews .filterTabBar {
margin-top: 3vw;
position: relative;
width: 100%;
user-select: none;
}
#frmViews .filterTabBar ul {
list-style: none;
border-bottom: 1px solid var(--green);
padding-bottom: 3px;
font-family: sans-serif;
}
#frmViews .filterTabBar li {
display: inline-block;
padding: 0 15px;
font-size: 100%;
text-align: center;
cursor: pointer;
}
#frmViews .filterTabBar .active {
cursor: pointer;
}
#frmViews .filterTabBar .active:hover {
font-weight: bold;
}
#frmViews .filterTabBar .disabled {
opacity: 0.5;
}
#frmViews .tabSelector {
position: relative;
height: 0.3vw;
max-height: 10px;
background-color: var(--green);
-webkit-transition: left 0.2s;
-moz-transition: left 0.2s;
-o-transition: left 0.2s;
transition: left 0.2s;
}
#frmViews .selectActionBarCon {
margin: 20px 0 10px 0;
width: 100%;
display: flex;
align-items: center;
flex-flow: row nowrap;
}
#frmViews .viewSwitch {
display: flex;
flex-flow: row nowrap;
align-items: center;
height: 100%;
margin-right: 1vw;
}
#frmViews .switchCon {
display: flex;
align-items: center;
border-radius: 20px;
font-size: 12px;
background-color: var(--black);
position: relative;
width: 36px;
height: 18px;
}
#frmViews .switch {
background-color: var(--cream);
border-radius: 20px;
width: 18px;
height: 18px;
cursor: pointer;
position: relative;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
transition: left 0.5s;
border: solid 2px var(--black);
}
#frmViews .switchLbl {
font-size: 14px;
display: flex;
align-items: center;
padding: 5px;
}
#frmViews .frmTimeFilter {
height: 36px;
width: 100px;
border-radius: 7px;
border: 1px solid var(--green);
box-sizing: border-box;
padding: 4px;
margin-right: 1vw;
}
#frmViews .selectActionBar {
width: 100%;
text-align: right;
list-style: none;
}
#frmViews .selectActionBar li {
display: inline-block;
text-align: center;
border-radius: 5px;
font-size: 100%;
width: auto;
height: 40px;
line-height: 40px;
background-color: white;
margin-left: 5px;
padding: 0 1vw 0 1vw;
color: black;
}
#frmViews .selectActionBar li.active {
background-color: var(--green);
color: var(--cream);
cursor: pointer;
}
#frmViews .selectActionBar .selectedCount {
font-family: sans-serif;
color: gray;
text-align: right;
background-color: transparent;
}
#frmViews .selectActionBar .disabled {
opacity: 0.5;
}
#frmViews .selectActionBar.itemSelected li {
background-color: var(--green);
color: var(--cream);
cursor: pointer;
opacity: 1;
}
#frmViews .selectActionBar.itemSelected .selectedCount {
color: var(--green);
background-color: var(--cream);
cursor: auto;
}
#frmViews .tableCon {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-bottom: 20px;
}
#frmViews #frmViewsViewTbl {
width: calc(100% - 20px);
}
#frmViews .viewTbl {
margin-top: 5px;
width: 100%;
background-color: white;
margin-left: 10px;
border: none;
margin-bottom: 1vw;
overflow: hidden;
}
#frmViews .viewTbl .groupHeader {
font-family: sans-serif;
font-size: 130%;
background-color: var(--cream);
}
#frmViews .viewTbl .groupHeader td {
padding-top: 1.2vw;
padding-bottom: 0.1vw;
}
#frmViews .viewTbl .colHeader {
background-color: var(--green);
color: var(--cream);
}
#frmViews .viewTbl .colHeader td {
padding-top: 0.5vw;
padding-bottom: 0.5vw;
text-align: center;
}
#frmViews .viewTbl .dataRow {
cursor: pointer;
border: none;
}
#frmViews .viewTbl .dataRow:hover {
background-color: var(--cream);
}
#frmViews .viewTbl tbody .dataRow td {
padding: 5px 5px;
}
#frmViews .viewTbl tbody tr td:nth-child(9) {
text-align: center;
}
#frmViews .viewTbl tbody tr td:nth-child(10) {
text-align: center;
}
#frmViews .viewTbl .tblCellHeader {
font-size: 120%;
font-family: sans-serif;
font-weight: bold;
display: inline-block;
}
#frmViews .viewTbl .iconCell {
width: 3.5vw;
text-align: center;
}
#frmViews .viewTbl .icon {
height: 30px;
vertical-align: middle;
}
#frmViews .viewTbl .viewBtn {
float: right;
width: 60px;
text-align: center;
margin-right: 10px;
background-color: var(--green);
border-radius: 5px;
height: 30px;
line-height: 30px;
color: white;
}
#frmViews .viewTbl .chkBoxCell {
padding: 0;
width: 2.5vw;
max-width: 35px;
text-align: center;
}
#frmViews .viewTbl .chkBox {
width: 1.5vw;
height: 1.5vw;
max-height: 30px;
max-width: 30px;
vertical-align: middle;
}
#frmViews .viewItemsCon {
display: flex;
flex-flow: column nowrap;
width: 100%;
}
#frmViews .viewItemsCon .viewItemCon {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
background-color: var(--white);
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 0 5px grey;
margin: 0 5px 20px 5px;
height: 125px;
}
#frmViews .viewItemsCon .viewItemCon .profileCon {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
}
#frmViews .viewItemsCon .viewItemInfoCon {
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
box-sizing: border-box;
margin-left: 10px;
}
#frmViews .viewItemsCon .viewItemInfoTop {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 5px;
}
#frmViews .viewItemsCon .viewItemInfoR {
display: flex;
align-items: center;
flex-flow: row nowrap;
}
#frmViews .viewItemsCon .viewItemInfoL {
display: flex;
align-items: center;
flex-flow: row nowrap;
font-size: 16px;
}
#frmViews .viewItemsCon .viewItemInfoL h2 {
font-size: 16px;
}
#frmViews .viewItemsCon .viewItemCon .profileCon select {
background-color: var(--yellow);
color: var(--white);
border-radius: 5px;
padding: 3px 8px;
}
#frmViews .viewItemsCon .viewItemCon .profileCon img {
width: 60px;
border: var(--green) 4px solid;
border-radius: 50%;
}
#frmViews .viewItemsCon .viewItemInfoBot {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
}
#frmViews .viewItemsCon .viewItemInfoBtn {
display: flex;
flex-flow: row nowrap;
align-items: center;
background-color: var(--green);
color: var(--cream);
margin-right: 5px;
box-sizing: border-box;
cursor: pointer;
border-radius: 5px;
padding: 3px 5px;
}
#frmViews .viewItemsCon .viewItemInfoBtn:hover {
background-color: var(--lightGreen);
color: var(--white);
}
#frmViews .viewItemsCon .viewItemInfoBtn span {
display: flex;
align-items: center;
color: var(--cream);
margin-left: 3px;
font-size: 0.8rem;
}
#frmViews .viewItemsCon .viewItemInfoBtn img {
width: 18px;
}
#frmViews .viewItemsCon .viewItemLbl {
padding: 8px 8px;
background-color: var(--cream);
border: 1px solid var(--lightGrey);
border-radius: 5px;
display: flex;
align-items: center;
flex-flow: row nowrap;
}
#frmViews .viewItemsCon .viewItemLbl img {
width: 20px;
margin-right: 8px;
}
#frmViews .viewItemsCon .viewItemLbl input {
border-radius: 5px;
padding: 3px 8px;
font-family: sans-serif;
margin-left: 5px;
font-size: 0.7rem;
min-width: 60px;
height: 22px;
}
#frmViews .viewItemsCon .viewItemLbl span {
width: 50px;
font-size: 0.7rem;
color: var(--white);
}
#frmViews .viewItemsCon .fleightNr {
width: 50px;
}
#frmViews .viewItemsCon {
display: flex;
flex-flow: column nowrap;
width: 100%;
}
#frmViews .viewPHItemCon {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
background-color: var(--white);
padding: 15px 5px 15px 15px;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 0 5px grey;
margin: 0 5px 20px 5px;
}
#frmViews .viewPHItemCon .profileCon {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
height: 100%;
box-sizing: border-box;
}
#frmViews .viewPHItemCon .profileCon img {
width: 70px;
}
#frmViews .viewPHItemInfoCon {
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
box-sizing: border-box;
margin-left: 10px;
}
#frmViews .viewPHItemInfoTop {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 7.5px;
}
#frmViews .viewPHItemInfoTop h2 {
font-size: 16px;
}
#frmViews .viewPHItemInfoTop .linkedPH {
display: flex;
flex-flow: row nowrap;
align-items: center;
background-color: var(--red);
color: var(--cream);
margin-right: 5px;
box-sizing: border-box;
cursor: pointer;
border-radius: 5px;
padding: 3px 5px;
margin-right: 10px;
}
#frmViews .viewPHItemInfoBot {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
margin-top: 7.5px;
}
#frmViews .viewPHLicenses {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
padding: 0 10px 0 0;
}
#frmViews .viewPHLicenses img {
width: 20px;
margin-left: 5px;
}
#frmViews .viewPHLicenses span {
font-size: 12px;
}
#frmViews .viewNoteItemCon {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-between;
background-color: var(--white);
padding: 15px 15px 15px 15px;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 0 5px grey;
margin: 20px 5px 0 5px;
}
#frmViews .viewNoteTop {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
}
#frmViews .viewNoteTitle {
font-weight: bold;
font-size: 16px;
}
#frmViews .viewNotePHVis {
font-size: 12px;
color: var(--white);
padding: 3px 6px;
border-radius: 3px;
background-color: var(--green);
}
#frmViews .viewNoteBottom {
font-size: 14px;
text-align: left;
width: 100%;
box-sizing: border-box;
white-space: pre-wrap;
font-family: sans-serif;
color: var(--black);
}
#frmViews #frmViewsPhotoCon {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
top: 0px;
display: none;
margin: 0;
padding: 0;
}
#frmViews .photoBox {
background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
padding: 2vw;
margin: 0 auto;
top: 3vw;
}
#frmViews #frmViewsTPhoto {
border: 5px solid var(--cream);
height: 50vh;
}
#frmViews .closePhotoIco {
height: 1.5vw;
width: 1.5vw;
position: absolute;
left: 2.2vw;
top: 2.2vw;
}
#frmViews #frmViewsNoPhoto {
text-align: center;
display: none;
}
#frmViews #frmWizNoPhotoCon p {
font-weight: bold;
}
#frmViews #frmWizNoPhotoCon .emptyIcon {
width: 50px;
height: 50px;
margin-bottom: 15px;
}
#frmViews #frmViewsBtnAddPhoto {
position: relative;
height: 50px;
width: 250px;
border-radius: 5px;
margin: 0 auto;
background-color: var(--green);
color: var(--cream);
font-family: sans-serif;
font-weight: bold;
font-size: 150%;
margin-top: 15px;
}
#frmViews #frmViewsBtnAddPhoto .addBtnIcon {
height: 40px;
position: relative;
top: 5px;
}
#frmViews #frmViewsBtnAddPhoto label {
color: var(--cream);
position: relative;
top: -7px;
}
#frmViews .frmViewMeatSaleItemCon {
display: flex;
flex-flow: column nowrap;
background-color: var(--white);
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 0 5px grey;
margin: 0 5px 20px 5px;
}
#frmViews .meatSaleItemHead {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
#frmViews .meatSaleItemChk {
width: 20px;
height: 20px;
margin-right: 15px;
}
#frmViews .meatSaleItemSpecie {
font-weight: bold;
}
#frmViews .meatSaleItemHunter {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
}
#frmViews .meatSaleItemHunterLbl {
margin-right: 15px;
font-size: 90%;
font-style: italic;
}
#frmViewsMeatTbl {
margin-left: 35px;
margin-top: 10px;
box-sizing: border-box;
}
#frmViewsMeatTbl th {
text-align: left;
color: var(--grey);
box-sizing: border-box;
font-weight: normal;
font-size: 80%;
}
#frmViewsMeatTbl th:last-of-type {
text-align: right;
width: 50%;
}
#frmViewsMeatTbl td {
text-align: left;
box-sizing: border-box;
padding-top: 5px;
font-size: 80%;
}
#frmViewsMeatTbl td:last-of-type {
text-align: right;
width: 50%;
}
#frmViewsMeatTbl input {
height: 30px;
border: 1px var(--black) solid;
border-radius: 5px;
box-sizing: border-box;
padding-left: 8px;
}
#frmViews .meatSaleItemBtnCon {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
#frmViews .meatSaleAddBtn {
font-style: italic;
color: var(--grey);
font-size: 90%;
margin-left: 35px;
cursor: pointer;
}
#frmViews .meatSaleAddBtn:hover {
color: var(--yellow);
}
#frmViews .meatSaleTotal {
text-align: right;
font-weight: bold;
border-top: var(--black) solid 1px;
border-bottom: var(--black) double 1px;
padding: 3px;
box-sizing: border-box;
}
#frmViews .frmViewsMeasureCon {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background-color: var(--white);
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 0 5px grey;
margin: 0 5px 20px 5px;
box-sizing: border-box;
}
#frmViews .frmViewsMeasureConL {
width: 30%;
display: flex;
flex-flow: column nowrap;
border-right: 1px solid var(--black);
box-sizing: border-box;
}
#frmViews .measureRow {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
padding-right: 10px;
box-sizing: border-box;
}
#frmViews .measureHeadRow {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-bottom: 5px;
padding-right: 10px;
box-sizing: border-box;
}
#frmViews .measureLbl {
font-size: 80%;
color: var(--yellow);
font-style: italic;
padding-left: 35px;
box-sizing: border-box;
}
#frmViews .measureSpesieMedal {
width: 20px;
margin-right: 15px;
box-sizing: border-box;
}
#frmViews .measureSpesieName {
font-size: 110%;
font-weight: bold;
box-sizing: border-box;
}
#frmViews .measureInfo {
color: var(--grey);
box-sizing: border-box;
font-size: 80%;
}
#frmViews .frmViewsMeasureConR {
width: 70%;
display: flex;
flex-flow: row nowrap;
box-sizing: border-box;
}
#frmViews .measureInpCon {
width: 150px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
box-sizing: border-box;
margin-left: 10px;
padding: 10px 5px 5px 5px;
background-color: var(--cream);
border: 1px solid var(--lightGrey);
border-radius: 5px;
}
#frmViews .measureInpHead {
width: 100%;
box-sizing: border-box;
text-align: center;
font-size: 90%;
font-weight: bold;
margin-bottom: 5px;
color: var(--white);
}
#frmViews .measureInpRow {
width: 100%;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
#frmViews .measureInpRow label {
display: flex;
flex-flow: column;
text-align: center;
box-sizing: border-box;
width: 48%;
font-size: 70%;
color: var(--white);
}
#frmViews .measureInpRow input {
height: 30px;
border-radius: 5px;
box-sizing: border-box;
padding-left: 8px;
margin-top: 3px;
}
/*─────────────────────────────────────────────────────────────*/
/* FORM: SEARCH */
/* Scoping: Alles is binne #frmSearch om style-leaks te keer */
/*─────────────────────────────────────────────────────────────*/
#frmSearch {
width: 100%;
height: 100%;
margin-bottom: 50px;
/* Lokale tokens vir hierdie vorm */
--tbl-max-h: calc(100dvh - 260px); /* maksimum sigbare tabelhoogte */
--radius: 14px; /* afgeronde hoeke */
--row-h: 44px; /* minimum ry-hoogte */
--pad-x: 16px; /* horisontale padding in wrapper */
--bottom-safe: 250px; /* ekstra spasie onder vir sticky voete/aksies */
--surface: var(--white); /* basiese oppervlak-kleur */
--rowBorder: color-mix(
in srgb,
var(--black) 8%,
var(--white)
); /* subtiele lyne */
--rowHover: color-mix(
in srgb,
var(--black) 3.5%,
var(--white)
); /* ry-hover */
--shadowLine: color-mix(
in srgb,
var(--black) 12%,
transparent
); /* dun skadu-lyn */
--shadowElev: 0 6px 18px rgba(34, 34, 32, 0.06); /* elevate skadu */
}
/*──────────────── Header: boonste balk met terug-knop, aksies, soek ───────────────*/
#frmSearch .header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px; /* spasie tussen items */
padding: 12px 16px; /* kompakte padding */
background: var(--gradientDown);
border-bottom: 1px solid var(--black);
/* geen fixed height: beter responsief */
}
#frmSearch .header img#frmSearchBtnBack {
width: 24px;
cursor: pointer;
}
/* Houer vir aksieknoppies links van soek */
#frmSearch .btnsCon {
display: flex;
align-items: center;
gap: 8px;
}
/* Soek: neem beskikbare spasie in die header */
#frmSearchSCon {
display: flex;
align-items: center;
flex: 1 1 320px; /* groei lekker, minimum 320px */
max-width: 560px;
height: 36px;
}
/* Soekveld */
#frmSearch .searchInput {
width: 100%;
height: 36px;
border-radius: 10px;
font-size: 14px;
border: 1px solid var(--green);
background-color: #fff;
padding: 0 10px;
margin-left: 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Fokus-toestand: geel rand + sagte glow */
#frmSearch .searchInput:focus,
#frmSearch .searchInput:focus-visible {
outline: none;
border-color: var(--yellow);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 35%, transparent);
}
/* Jaar/Filter dropdowns */
#frmSearch .frmSearchYear {
height: 36px;
min-width: 120px;
border-radius: 7px;
border: 1px solid var(--green);
box-sizing: border-box;
padding: 4px 8px;
}
/* “Show deleted” skuif heel regs */
#frmSearch .showDeletedCon {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
#frmSearch .chkIncludeLbl {
font-size: 14px;
}
/* Maak seker die ikoon in .btnGreenIcon nie te groot is nie */
#frmSearch .btnsCon .btnGreenIcon img {
height: 18px;
width: auto;
}
/*──────────────── Wrapper vir tabel: padding & agtergrond, geen scroll ───────────*/
#frmSearch .searchTblCon {
position: relative;
margin: 16px 0 0;
padding: 0 var(--pad-x) var(--bottom-safe) var(--pad-x);
box-sizing: border-box;
background: var(--cream);
border-radius: var(--radius);
overflow: auto;
max-height: 100%;
}
/*──────────────── Tabel: moderne dop ─────────────────────────────────────────────*/
#frmSearch .gTblSearch {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
border-radius: calc(var(--radius) - 6px);
position: relative;
z-index: 0;
}
/* Tabelkop: sticky bo, goeie kontras en subtiele onderstreep */
#frmSearch .gTblSearch thead {
width: 100%;
position: sticky;
top: 0;
z-index: 2;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--white) 96%, transparent),
color-mix(in srgb, var(--white) 90%, transparent)
);
box-shadow: 0 1px 0 var(--shadowLine);
}
#frmSearch .gTblSearch thead tr {
width: 100%;
}
#frmSearch .gTblSearch thead td {
border: none;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 800;
color: color-mix(
in srgb,
var(--black) 80%,
var(--white)
); /* beter leesbaarheid */
padding: 10px 14px;
white-space: nowrap;
}
/* Tabellyf: losstaande scroll area; kolomwydtes bly in lyn */
#frmSearch .gTblSearch tbody,
#frmSearch .gTblSearch tfoot {
width: 100%;
}
#frmSearch .gTblSearch tbody {
max-height: var(--tbl-max-h);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#frmSearch .gTblSearch tbody tr,
#frmSearch .gTblSearch tfoot tr {
width: 100%;
}
/* Ry- en selstyle */
#frmSearch .gTblSearch tbody td {
border: none;
border-bottom: 1px solid var(--rowBorder);
padding: 12px 14px;
height: var(--row-h);
vertical-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#frmSearch .gTblSearch tbody tr:last-child td {
border-bottom: none;
}
#frmSearch .gTblSearch tbody tr {
cursor: pointer;
transition: background 0.15s ease, transform 0.06s ease;
}
#frmSearch .gTblSearch tbody tr:hover {
background: var(--rowHover);
}
#frmSearch .gTblSearch tbody tr:active {
transform: translateY(1px);
}
/* Gedeaktiveerde rye */
#frmSearch .gTblSearch tr.itemDeactive {
color: var(--red);
background: color-mix(in srgb, var(--red) 8%, var(--white));
}
/* Klein ikone in selle (bv. Print) */
#frmSearch .gTblSearch td img {
display: block;
width: 20px;
height: 20px;
max-width: 20px;
max-height: 20px;
object-fit: contain;
margin: 0 auto;
opacity: 0.85;
transition: opacity 0.2s ease;
}
#frmSearch .gTblSearch td.textLeft{
text-align: left;
}
#frmSearch .gTblSearch td.textCenter{
text-align: center;
}
#frmSearch .gTblSearch td.textRight{
text-align: right;
}
#frmSearch .gTblSearch td:hover img {
opacity: 1;
}
/* Laaste kolom se “Edit/Add” chip wat jou JS as insit */
#frmSearch .gTblSearch > tbody > tr > td:last-child > div {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 30px;
padding: 6px 10px;
border-radius: 999px;
font: 800 12px/1.1 inherit;
letter-spacing: 0.2px;
background: var(--green);
color: var(--white);
box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 8%, transparent);
user-select: none;
}
#frmSearch .gTblSearch > tbody > tr > td:last-child > div:active {
transform: translateY(1px);
}
/* Neutraliseer ou universele
-style wat chips gebreek het */
#frmSearch .gTblSearch div {
background: initial;
border-radius: 0;
color: inherit;
height: auto;
line-height: normal;
float: none;
width: auto;
margin-right: 0;
}
/* Opsionele kolomklampe (pas aan per searchType) */
#frmSearch .gTblSearch tbody td:nth-child(1) {
max-width: 260px;
}
#frmSearch .gTblSearch tbody td:nth-child(2) {
max-width: 220px;
}
#frmSearch .gTblSearch tbody td:nth-child(3) {
max-width: 220px;
}
/*──────────────── Empty state: netjies en modern ───────────────────────────────*/
#frmSearch #frmSearchEmptyTbl {
display: none; /* wys via JS wanneer nodig */
margin: 32px auto;
padding: 28px 24px;
text-align: center;
max-width: 720px;
border: 1px dashed color-mix(in srgb, var(--black) 18%, var(--white));
border-radius: 16px;
background: color-mix(in srgb, var(--white) 70%, transparent);
box-shadow: var(--shadowElev);
}
#frmSearch #frmSearchEmptyMsg {
font-size: 1.05rem;
line-height: 1.5;
font-weight: 700;
color: color-mix(in srgb, var(--black) 80%, var(--white));
margin: 0;
}
#frmSearch #frmSearchEmptyTbl .emptyIcon {
width: 64px;
height: 64px;
margin: 14px 0 18px 0;
opacity: 0.9;
}
#frmSearch #frmSearchBtnCreateNew {
display: flex;
justify-content: center;
}
#frmSearch #frmSearchBtnCreateNew .btnGreen {
min-width: 160px;
}
/*──────────────── Scroll-shadow wanneer gescroll (aktiveer via data-attribuut) ──*/
#frmSearch .searchTblCon[data-scrolled="true"] .gTblSearch thead {
box-shadow: var(--shadowElev);
}
/*──────────────── Mobile tweaks ────────────────────────────────────────────────*/
@media (max-width: 900px) {
#frmSearch .searchTblCon {
padding: 0 8px var(--bottom-safe) 8px;
}
#frmSearch .gTblSearch thead td {
padding: 8px 10px;
}
#frmSearch .gTblSearch tbody td {
padding: 10px;
}
}
/*FORM RegHO*/
#frmRegHO {
display: none;
width: 500px;
margin: 0 auto;
}
/*FORM FRMPAYPACK*/
#frmPayPack {
padding-top: 20px;
width: 100%;
}
#frmPayPack .orderCon {
width: 30vw;
text-align: left;
display: inline-block;
vertical-align: top;
}
#frmPayPack .header {
font-size: 150%;
font-weight: bold;
margin-bottom: 0.5vw;
}
#frmPayPack .tblCon {
background-color: var(--cream);
border-radius: 5px;
}
#frmPayPack .btnClose {
float: left;
height: 30px;
margin-left: -50px;
margin-top: -10px;
}
#frmPayPack .paymentCon {
display: inline-block;
text-align: left;
}
#frmPayPack .iFrame {
width: 50vw;
height: 50vw;
}
/*FORM PER MISSION TO HUNT*/
#frmPMTHunt .frmPMTHuntHeader {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
align-items: center;
padding-bottom: 5mm;
border-bottom: 1px solid var(--black);
}
#frmPMTHunt .frmPMTHuntHeader img {
width: 3cm;
height: 3cm;
}
#frmPMTHunt .frmPMTHHCon {
width: 10cm;
}
#frmPMTHunt .frmPMTHHConInf {
display: flex;
flex-flow: row nowrap;
width: 100%;
justify-content: space-between;
}
#frmPMTHunt .frmPMTHHConInfR {
text-align: right;
font-weight: bold;
}
#frmPMTHunt .frmPMTHuntBody h1 {
width: 100%;
text-align: center;
margin: 1cm 0;
}
#frmPMTHunt .frmPMTHuntBody h3 {
margin: 1cm 0;
}
#frmPMTHunt .frmPMTHuntBody p {
margin-bottom: 1cm;
}
#frmPMTHunt table {
width: 100%;
}
#frmPMTHunt tbody {
border: 1px solid var(--black);
}
#frmPMTHunt th {
padding-bottom: 5px;
font-size: 120%;
}
#frmPMTHunt th:first-of-type {
text-align: left;
padding-left: 20px;
}
#frmPMTHunt td {
padding: 7px 15px 7px 20px;
}
#frmPMTHunt td:last-of-type {
text-align: center;
}
#frmPMTHunt .frmPMTHuntFooter {
display: flex;
flex-flow: row nowrap;
margin-top: 3cm;
border-top: 1px solid var(--black);
width: 40%;
}
#frmPMTHunt .frmPMTHuntFooter span {
margin-right: 3mm;
padding-top: 2mm;
}
/*FORM TROPHY CERTIFICATE*/
#frmTropCert .frmPMTHuntHeader {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
align-items: center;
padding-bottom: 5mm;
border-bottom: 1px solid var(--black);
}
#frmTropCert .frmPMTHuntHeader img {
width: 5cm;
height: 5cm;
}
#frmTropCert .frmTCHCon {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
#frmTropCert .frmTCHConInfo {
display: flex;
flex-flow: row nowrap;
font-size: 70%;
}
#frmTropCert .frmTCHConInfoR {
text-align: right;
padding: 0 8mm 0 3mm;
}
#frmTropCert .frmPMTHuntBody h1 {
width: 100%;
text-align: center;
margin: 1cm 0;
}
#frmTropCert .frmPMTHuntBody h2 {
margin: 1cm 0;
text-align: center;
}
#frmTropCert .frmPMTHuntBody p {
margin-bottom: 1cm;
text-align: center;
}
#frmTropCert table {
width: 100%;
}
#frmTropCert th {
padding-bottom: 2px;
font-size: 100%;
text-align: left;
}
#frmTropCert th:first-of-type {
text-align: left;
}
#frmTropCert td {
padding: 3px 5px 3px 5px;
font-size: 80%;
}
#frmTropCert td:last-of-type {
text-align: left;
}
#frmTropCert .frmPMTHuntFooter {
display: flex;
flex-flow: row nowrap;
margin-top: 3cm;
border-top: 1px solid var(--black);
width: 40%;
}
#frmTropCert .frmPMTHuntFooter span {
margin-right: 3mm;
padding-top: 2mm;
}
/*FORM TAXIDERMY REPORT*/
#frmTaxiRep .frmPMTHuntHeader {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
align-items: center;
padding-bottom: 5mm;
border-bottom: 1px solid var(--black);
}
#frmTaxiRep .frmPMTHuntHeader img {
width: 5cm;
height: 5cm;
}
#frmTaxiRep .frmTCHCon {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
#frmTaxiRep .frmTCHConInfo {
display: flex;
flex-flow: row nowrap;
font-size: 70%;
}
#frmTaxiRep .frmTCHConInfoR {
text-align: right;
padding: 0 8mm 0 3mm;
}
#frmTaxiRep .frmPMTHuntBody h1 {
width: 100%;
text-align: center;
margin: 1cm 0;
}
#frmTaxiRep .frmPMTHuntBody h2 {
text-align: center;
}
#frmTaxiRep .taxiRepClientCon {
padding: 5mm;
display: flex;
flex-flow: column nowrap;
margin-bottom: 1cm;
border: 1px solid var(--black);
border-radius: 7px;
}
#frmTaxiRep .taxiRepClientinfo {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
#frmTaxiRep table {
width: calc(100% - 5mm);
margin-left: 5mm;
}
#frmTaxiRep th {
padding-bottom: 2px;
font-size: 100%;
text-align: left;
}
#frmTaxiRep th:first-of-type {
text-align: left;
}
#frmTaxiRep td {
padding: 3px 5px 3px 5px;
font-size: 80%;
}
#frmTaxiRep td:last-of-type {
text-align: left;
}
#frmTaxiRep td .taxiRepTick {
width: 5mm;
height: 5mm;
border: 1px solid var(--black);
border-radius: 5px;
}
#frmTaxiRep .frmPMTHuntFooter {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-top: 2cm;
}
#frmTaxiRep .frmPMTHuntFooter span {
border-top: 1px solid var(--black);
width: 20%;
padding-top: 2mm;
text-align: center;
}
/*FORM PH REGISTER*/
#frmPHRegister {
top: 5vh;
width: 90vw;
max-height: 85vh;
max-width: 1300px;
border-radius: 10px;
padding: 0 1vw 1vw 1vw;
padding-bottom: 2vw;
background-color: var(--cream);
}
#frmPHRegister .mainHeader {
text-align: center;
font-family: sans-serif;
margin-top: 1vw;
margin-bottom: 1vw;
}
#frmPHRegister .personDetails {
display: inline-block;
width: 25%;
margin-left: 1vw;
}
#frmPHRegister .personDetails header {
text-align: center;
font-family: sans-serif;
}
#frmPHRegister .personDetails .gAsTable {
border: 2px solid var(--black);
}
#frmPHRegister .huntDetails .colDesc {
width: 11vw;
}
#frmPHRegister .personDetails {
margin-top: 1vw;
width: 90%;
max-width: 400px;
}
#frmPHRegister .phDetails .colDesc {
width: 35%;
padding: 0;
}
#frmPHRegister .clientDetails .colDesc {
width: 30%;
padding: 0;
}
#frmPHRegister .hoDetails .colDesc {
width: 35%;
padding: 0;
}
#frmPHRegister .trophyTbl {
width: 100%;
margin-top: 1vw;
}
#frmPHRegister .trophyTbl .tblHeader {
font-family: sans-serif;
}
#frmPHRegister .trophyTbl td {
border: 3px solid var(--cream);
padding: 0.3vw;
vertical-align: top;
}
#frmPHRegister .trophyTbl td input {
border-radius: 5px;
width: 100%;
height: 2vw;
padding-left: 5px;
}
#frmPHRegister .colQty {
width: 4vw;
}
#frmPHRegister .addTblLine {
margin-top: 1vw;
margin-left: 0.4vw;
display: inline-block;
height: 2.5vw;
border: 1px solid var(--black);
line-height: 2.5vw;
padding-left: 1vw;
padding-right: 1vw;
}
#frmPHRegister .btnSave {
margin-top: 1vw;
margin-right: 0.4vw;
height: 40px;
width: 160px;
background-color: var(--green);
border-radius: 5px;
color: var(--cream);
font-size: 18px;
line-height: 40px;
text-align: center;
cursor: pointer;
display: inline-block;
float: right;
}
/*FROM Billing view*/
#frmBilling {
width: 100%;
height: 100%;
overflow: hidden;
}
#frmBilling .billingHead {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
width: 100%;
box-sizing: border-box;
height: 100px;
padding-bottom: 5px;
background: var(--gradientDown);
border-bottom: 1px var(--black) solid;
}
#frmBilling .billingHead h2 {
display: flex;
flex-flow: row nowrap;
width: 80%;
margin-left: auto;
margin-right: auto;
font-size: 24px;
font-family: sans-serif;
}
#frmBilling .billingMainCon {
display: flex;
flex-flow: row nowrap;
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#frmBilling .billingInvCon {
flex-grow: 1;
height: calc(100% - 200px);
overflow: auto;
}
#frmBilling .billingInvCon h3 {
color: var(--yellow);
padding: 20px 0;
font-family: sans-serif;
}
#frmBilling .billingInvCon table {
width: 95%;
border-collapse: collapse;
}
#frmBilling .billingInvCon th {
padding: 3px 0 3px 3px;
background-color: var(--orange);
color: var(--grey);
text-align: left;
font-size: 90%;
}
#frmBilling .billingInvCon td {
padding: 5px 5px 5px 8px;
text-align: left;
}
#frmBilling .billingInvCon td:last-of-type {
text-align: right;
color: darkBlue;
text-decoration: underline;
}
#frmBilling .billingInvCon .invDue {
border-radius: 5px;
background-color: var(--red);
color: var(--white);
padding: 3px;
text-align: center;
}
#frmBilling .billingInvCon .invPaid {
border-radius: 5px;
background-color: var(--green);
color: var(--white);
padding: 3px;
text-align: center;
}
#frmBilling .billingCardCon {
}
#frmBilling .billingCardCon h3 {
color: var(--yellow);
padding: 20px 0;
font-family: sans-serif;
}
#frmBilling .billingCard {
display: flex;
width: 70mm;
height: 44mm;
flex-flow: column nowrap;
align-items: flex-start;
background-image: linear-gradient(to right, var(--grey), Var(--white));
border-radius: 7px;
border: 1px var(--black) solid;
margin: 0 5px 20px 5px;
box-sizing: border-box;
padding: 15px;
box-shadow: 0 0 5px var(--grey);
}
#frmBilling .cardHead {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
#frmBilling .cardHead h3 {
font-size: 120%;
color: var(--yellow);
padding: 0;
}
#frmBilling .cardHead span {
font-size: 80%;
cursor: pointer;
}
#frmBilling .cardHead span:hover {
color: var(--red);
}
#frmBilling .cardNumber {
display: flex;
flex-flow: row nowrap;
color: var(--black);
font-size: 110%;
align-items: flex-end;
flex-grow: 1;
}
#frmBilling .cardEx {
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
align-items: flex-end;
}
#frmBilling .cardEx span {
margin: 0 3px 0 0;
color: var(--white);
font-size: 80%;
}
#frmBilling .nameOnCard {
margin-top: 5px;
}
#frmBilling .setAsDefault {
width: 100%;
text-align: right;
cursor: pointer;
font-size: 12px;
margin-top: 2mm;
}
#frmBilling .asDefault {
width: 100%;
text-align: right;
cursor: pointer;
color: var(--green);
font-weight: bold;
font-size: 12px;
margin-top: 2mm;
}
#frmBilling .setAsDefault:hover {
color: var(--green);
}
#frmBilling .addCardBtn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background-color: var(--green);
color: var(--white);
padding: 5px 8px;
margin: 10px 0 0 5px;
}
#frmBilling .addCardBtn:hover {
background-color: var(--lightGreen);
}
#frmPeachAddCard {
width: 700px;
height: auto;
overflow: hidden;
}
#frmPeachAddCard .frmCon {
display: flex;
flex-flow: column nowrap;
justify-content: center;
height: 85vh;
}
#frmPeachAddCard .amountDetail {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 150px;
box-sizing: border-box;
}
#frmPeachACAmount {
font-size: 200%;
font-weight: bold;
color: var(--green);
}
#frmPeachAddCard .iFrameCon {
position: relative;
height: 100%;
width: 100%;
}
#frmPeachAddCard iframe {
height: 100%;
width: 100%;
overflow-y: auto;
}
#frmPeachAddCard .gFrmFooter {
}
#frmConPay {
width: 600px;
box-sizing: border-box;
}
#frmConPay table {
width: 100%;
margin-top: 20px;
}
#frmConPay td {
padding: 3px 0;
}
#frmConPay td:nth-of-type(2) {
text-align: right;
}
#frmConPay th:nth-of-type(2) {
text-align: right;
}
#frmConPay td:last-of-type {
text-align: right;
width: 35px;
}
#frmConPay th:last-of-type {
text-align: right;
width: 35px;
}
#frmConPay th:first-of-type {
text-align: left;
}
#frmConPay img {
width: 25px;
}
#frmConPay input {
border-radius: 5px;
padding: 8px;
width: 155px;
box-sizing: border-box;
}
#frmConPay select {
border-radius: 5px;
padding: 8px;
width: 155px;
box-sizing: border-box;
}
#frmConPay .frmTotalTbl {
border-top: 1px solid var(--black);
border-bottom: 2px solid var(--black);
margin-top: 10px;
}
#frmMyReport {
width: 500px;
}
.gFloatScreen {
position: absolute;
top: 5vh;
left: 50%;
right: 50%;
transform: translateX(-50%);
max-width: 95%;
height: auto;
max-height: 90%;
background-color: var(--cream);
z-index: 100;
border-radius: 16px;
box-sizing: border-box;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
overflow-y: auto;
animation: fadeInFloat 0.3s ease;
}
@keyframes fadeInFloat {
from {
opacity: 0;
transform: translate(-50%, -20px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@media only screen and (min-width: 1500px) {
body {
font-size: 16px;
}
}
page[size="A4"] {
position: relative;
padding: 1.5cm;
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 2cm auto;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
@media print {
#frmPMTHunt,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
#frmTropCert,
page[size="A4"] {
margin: 0;
box-shadow: 0;
padding: 0 1.5cm 1.5cm 1.5cm;
}
#mainHeader {
display: none;
}
}
/* Helper vir toeganklikheid */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
ITEM 4 — BUTTON FAMILY + OFF-KIT STRAGGLERS (Round 1, 2026-08-10)
Bertus's two approved identity decisions:
· pills (999px) -> ROUNDED RECTANGLES on var(--kit-radius)
· Save/primary -> KIT GREEN var(--success) #438945, pressed --success-dark
The old --green #2e7d32 is deliberately LEFT ALONE — it still carries
semantic meaning on status chips/medals and is not a button colour here.
Appended at the end of the file on purpose. A family-wide restyle has to beat
ID-scoped one-offs (#mainHeader .btnGreenIcon, .gFrmBtnBox .btnSave …), and
restating those selectors verbatim down here wins on source order without
inventing higher specificity or reaching for !important.
Port rules unchanged from Items 1-3: no raw hex, var(--yellow) is never used
(blaze here, amber there), var(--radius*) -> var(--kit-radius*).
========================================================================== */
/* --- 4.1 Shared geometry -------------------------------------------------
52px / 12px corners / weight 600 / 15px / 8px icon gap.
width:auto is the default because every button box in this app is already a
flex row; full-width is reserved for a float-form footer that holds a single
button (expressed as :only-child at the end of this section) — forcing 100%
on the two-button Save+Delete footers would break them. */
.btnGreen,
.btnRed,
.btnYellowIcon,
.btnGreenIcon,
.btnBlaze,
.btnAdd,
.btnGhost,
.gBtnCancel,
.gBtnLight,
.gFrmBtnBox .btnSave,
.gFrmBtnBox .btnDelete,
#mainHeader .btnGreenIcon,
#frmAtt .gBtnLight {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
min-width: 120px;
height: 52px;
padding: 0 18px;
box-sizing: border-box;
white-space: nowrap;
text-align: center;
font-family: var(--font-ui);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: normal;
border-radius: var(--kit-radius);
border: 1.5px solid transparent;
box-shadow: none;
cursor: pointer;
user-select: none;
transition: background-color 140ms ease, border-color 140ms ease,
color 140ms ease, transform 80ms ease;
}
/* Icons ride the 8px flex gap now, so the old per-icon margin-right must go or
it doubles to 16px. Sizes stay where a screen already set them. */
.btnGreen img,
.btnRed img,
.btnYellowIcon img,
.btnGreenIcon img,
.btnBlaze img,
.btnAdd img,
.btnGhost img,
.gBtnLight img {
width: 18px;
height: 18px;
object-fit: contain;
margin: 0;
}
/* --- 4.2 PRIMARY / SAVE — kit green ------------------------------------- */
.btnGreen,
.btnGreenIcon,
.gFrmBtnBox .btnSave {
background-color: var(--success);
color: var(--white);
border-color: var(--success);
}
.btnGreen:hover,
.btnGreenIcon:hover,
.gFrmBtnBox .btnSave:hover {
background-color: var(--success-dark);
border-color: var(--success-dark);
color: var(--white);
transform: none;
}
.btnGreen:active,
.btnGreenIcon:active,
.gFrmBtnBox .btnSave:active {
background-color: var(--success-dark);
transform: translateY(1px);
}
/* --- 4.3 BLAZE — one per screen, and it stays reserved ------------------- */
.btnBlaze,
.btnYellowIcon,
#mainHeader .btnGreenIcon {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
}
.btnBlaze:hover,
.btnYellowIcon:hover,
#mainHeader .btnGreenIcon:hover {
background: var(--accentDark);
border-color: var(--accentDark);
color: var(--white);
transform: none;
}
.btnBlaze:active,
.btnYellowIcon:active,
#mainHeader .btnGreenIcon:active {
background: var(--accentDark);
transform: translateY(1px);
}
/* --- 4.4 ADD {thing} — solid tactical black ----------------------------- */
.btnAdd {
background-color: var(--shell);
color: var(--cream);
border-color: var(--shell);
}
.btnAdd:hover {
background-color: var(--ink-soft);
border-color: var(--ink-soft);
color: var(--cream);
transform: none;
}
.btnAdd:active {
background-color: var(--shell);
transform: translateY(1px);
}
/* frmSearch builds its "Add a Client / Add a PH / …" button in JS with
className = "btnGreen" (js/index.js:8627). The id is stable, so the black Add
variant is applied here rather than by touching JS this pass. Same for the
two "Copy … link" utility buttons, which are demoted from green to ghost so
the Add button is the only filled control in that toolbar. */
/* 2026-08-23: the approved search-screen design makes this the blaze pill
("+ ADD CLIENT"), superseding the black Add variant described above. Kept
here, at this id specificity (2,0,0), because a class-level rule cannot
beat it. */
#frmSearch #frmSearchBtnAdd {
background-color: var(--accent);
color: var(--white);
border-color: var(--accent);
}
#frmSearch #frmSearchBtnAdd:hover {
background-color: color-mix(in srgb, var(--accent) 88%, black);
border-color: color-mix(in srgb, var(--accent) 88%, black);
}
/* --- 4.5 GHOST / CANCEL — white, 1.5px border --------------------------- */
.btnGhost,
.gBtnCancel,
.gBtnLight,
#frmAtt .gBtnLight,
#frmSearch #frmSearchBtnClientLink,
#frmViews #frmViewsBtnClientLink {
background: var(--white);
color: var(--ink);
border: 1.5px solid var(--border-strong);
}
.btnGhost:hover,
.gBtnCancel:hover,
.gBtnLight:hover,
#frmAtt .gBtnLight:hover,
#frmSearch #frmSearchBtnClientLink:hover,
#frmViews #frmViewsBtnClientLink:hover {
background: var(--surface-alt);
border-color: var(--ink-faint);
color: var(--ink);
transform: none;
}
.btnGhost:active,
.gBtnCancel:active,
.gBtnLight:active {
background: var(--surface-sunk);
transform: translateY(1px);
}
/* --- 4.6 DANGER — outline that fills on hover/press ---------------------- */
.btnRed,
.gFrmBtnBox .btnDelete {
background-color: transparent;
color: var(--danger);
border-color: var(--danger);
}
.btnRed:hover,
.gFrmBtnBox .btnDelete:hover {
background-color: var(--danger);
border-color: var(--danger);
color: var(--white);
transform: none;
}
.btnRed:active,
.gFrmBtnBox .btnDelete:active {
background-color: var(--danger);
color: var(--white);
transform: translateY(1px);
}
/* --- 4.6b Buttons that live INSIDE a .gFrmLabel --------------------------
🚨 Caught by measurement, and it is Item 3 biting Item 4. Item 3's caption
containment reset (`.gFrmLabel div, … .gFrmLabel button { font-size:14px;
color: var(--ink) }`) is specificity (0,1,1) and therefore outranks a bare
variant class (0,1,0). frmPackage's "Add" button sits inside its
`
`, so it was being repainted --ink on --shell —
**black text on a black button**, i.e. an invisible label.
Restated at (0,2,0) so the variant wins. Only frmPackage has a button inside
a label today; this guards the pattern for the next one. */
.gFrmLabel .btnGreen,
.gFrmLabel .btnRed,
.gFrmLabel .btnYellowIcon,
.gFrmLabel .btnGreenIcon,
.gFrmLabel .btnBlaze,
.gFrmLabel .btnAdd,
.gFrmLabel .btnGhost,
.gFrmLabel .gBtnCancel,
.gFrmLabel .gBtnLight {
font-size: 15px;
}
.gFrmLabel .btnAdd {
color: var(--cream);
}
.gFrmLabel .btnGreen,
.gFrmLabel .btnGreenIcon,
.gFrmLabel .btnBlaze,
.gFrmLabel .btnYellowIcon {
color: var(--white);
}
.gFrmLabel .btnRed {
color: var(--danger);
}
.gFrmLabel .btnGhost,
.gFrmLabel .gBtnCancel,
.gFrmLabel .gBtnLight {
color: var(--ink);
}
/* --- 4.7 Focus ring, shared ---------------------------------------------- */
.btnGreen:focus-visible,
.btnRed:focus-visible,
.btnYellowIcon:focus-visible,
.btnGreenIcon:focus-visible,
.btnBlaze:focus-visible,
.btnAdd:focus-visible,
.btnGhost:focus-visible,
.gBtnCancel:focus-visible,
.gBtnLight:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* --- 4.8 Dense guard for buttons inside data tables ----------------------
Mirrors the Item 2 `td .gFrmInput` guard. GlobalUtils (js/index.js:1419)
injects a .btnGreen into a for the "add new" row of the search-picker,
with an inline width:25%; a 52px control would wreck that row's rhythm. */
td .btnGreen,
td .btnAdd,
td .btnGhost,
td .btnRed {
height: var(--input-h-dense);
min-width: 0;
padding: 0 12px;
font-size: 14px;
border-radius: var(--kit-radius-sm);
}
/* --- 4.9 Float-form footer width — MEASURED, then deliberately NOT shipped ---
The brief reserves full-width for float-form footer buttons. Built as
`.gFloatFrmFooter > .btnGreen:only-child { width: 100% }` and measured: it
fires on exactly ONE button in the whole app — frmConSpecies' lone Save —
and turns it into a **910px** control, while every other float footer keeps
a right-aligned 120px pair. That is the mobile idiom leaking onto a desktop
overlay, which HANDOFF §5.8 explicitly warns against ("float forms are
centred overlays, not full-screen"), and it would make the one screen with a
single footer button the odd one out.
Left at auto width. To turn it on, restore the rule above this comment. */
/* ==========================================================================
ITEM 4 — OFF-KIT INPUT STRAGGLERS
Everything logged in HANDOFF §4.4 plus the two found during 2b/3b QA.
========================================================================== */
/* (i) .proInput — frmProposal's four payment controls. Had NO css rule at all
and were rendering at the 13.3px UA default beside 52px kit fields on the
same form (found while fixing the proposal's captions in Item 3b). */
.proInput {
width: 100%;
height: var(--input-h);
padding: 0 16px;
box-sizing: border-box;
font-family: var(--font-ui);
font-size: 16px;
color: var(--ink);
background-color: var(--white);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.proInput:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accentRing);
outline: none;
}
/* (ii) frmConPay — `#frmConPay input/select` (~line 8098) is a bare-element
selector that outranks .gFrmInput, holding 5px radius / 8px padding and a
fixed 155px width. Narrowed to `input.gFrmInput` so it reaches the two
form-flow fields (payment date + type) and CANNOT reach the trophy-items
table inputs or checkboxes, which the bare selector also hit. Width becomes
100% of its .gFrmLabel column, like every other kit field. */
#frmConPay input.gFrmInput,
#frmConPay select.gFrmInput {
width: 100%;
padding: 0 16px;
border-radius: var(--kit-radius);
border: 1.5px solid var(--border-strong);
}
#frmConPay td input.gFrmInput {
padding: 0 12px;
border-radius: var(--kit-radius-sm);
}
/* (iii) frmInvoice exchange-on row — 34px / 10px radius. display is left to JS,
which toggles it, so only chrome moves. */
#frmInvoice .frmInvExOnCon select,
#frmInvoice .frmInvExOnCon input {
height: var(--input-h-dense);
padding: 0 12px;
font-size: 15px;
color: var(--ink);
background-color: var(--white);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius-sm);
}
/* (iv) frmCalendar year picker — was 30px with a GREEN border. It lives in a
title bar, so it takes the kit's dense height rather than the 52px form
height; chrome is otherwise the kit. */
#frmCalendar .frmCalTitle select {
height: var(--input-h-dense);
font-size: 15px;
padding: 0 12px;
color: var(--ink);
background-color: var(--white);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius-sm);
}
/* (v) frmPriceList footer year picker — its border was var(--yellow), which in
THIS app resolves to blaze, so a year picker was wearing the reserved accent.
Hand-swapped to --border-strong per the standing --yellow rule. */
#frmPriceList .footerYearCon select {
height: var(--input-h-dense);
width: 90px;
font-size: 15px;
padding: 0 12px;
color: var(--ink);
background-color: var(--white);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius-sm);
}
/* (vi) frmPricePackages — deferred from Item 3b because kit captions on top of
bare UA number inputs would have relocated the mismatch rather than removed
it. Caption and field now move together. The live rows JS builds use
.currInput; the static demo rows in index.html use a bare number input, so
both are covered. Dense height: three currency cells sit side by side in a
package card. */
#frmPricePackages .packDisLbl {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
gap: 8px;
}
#frmPricePackages .packDisLbl * {
text-transform: none;
letter-spacing: normal;
}
#frmPricePackages .currInput,
#frmPricePackages .packDisLbl input {
width: 100%;
height: var(--input-h-dense);
padding: 0 12px;
box-sizing: border-box;
font-family: var(--font-ui);
font-size: 15px;
color: var(--ink);
text-align: right;
background-color: var(--white);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius-sm);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
#frmPricePackages .currInput:focus,
#frmPricePackages .packDisLbl input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accentRing);
outline: none;
}
/* ==========================================================================
ITEM 4b — INLINE "ADD" BUTTONS + PROPOSAL ADD-PAYMENT (QA W-006, 2026-08-10)
Appended after the Item 4 block so it wins on source order where specificity
ties. NO JS was touched for either job — both turned out to be CSS-only.
========================================================================== */
/* --- (a) THE ADD-A-LINE-ITEM FAMILY -------------------------------------
QA F7 named four of these. They were missed by Item 4 not because they are
built at runtime, but because each one carries its OWN class
(.frmInvAddlineBtn, .frmProAddlineBtn, .frmPriceAddBtn, a bare ) instead
of a member of the .btnGreen family, so the HTML class sweep never saw them.
Swept css/index.css for every rule painting a background with the legacy
--green/--lightGreen (52 rules) and kept the ones that are genuinely
"add a line item" controls; the rest are semantic (progress bars, table
colHeaders, tab selectors, paid/dead status chips) and stay --green.
Sizing: all of these live in toolbars, combo shells or table rows, never in
the 52px form-flow column, so they take the dense 44px. The one exception is
#frmPriceList .frmPriceAddBtn, which already sits inside the Item 2b combo
shell at 42px — colour only there, so that shell is not disturbed. */
/* (a1) frmInvoice — Species / Daily Fees / Item Fees. Button AND its search
field: they are two separate controls in one flex row, so restyling only the
button would leave a 999px pill input beside an 8px-radius black button. */
#frmInvoice .frmInvAddline .frmInvAddlineBtn {
height: var(--input-h-dense);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
font-size: 15px;
font-weight: 600;
border-radius: var(--kit-radius-sm);
background: var(--shell);
color: var(--cream);
border: 1.5px solid var(--shell);
box-sizing: border-box;
white-space: nowrap;
transition: background-color 140ms ease, border-color 140ms ease;
}
#frmInvoice .frmInvAddline .frmInvAddlineBtn:hover {
background: var(--ink-soft);
border-color: var(--ink-soft);
}
#frmInvoice .frmInvAddline .frmInvAddlineBtn:active {
background: var(--shell);
transform: translateY(1px);
}
#frmInvoice .frmInvAddline input {
height: var(--input-h-dense);
padding: 0 12px;
font-size: 15px;
font-family: var(--font-ui);
color: var(--ink);
background-color: var(--white);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius-sm);
box-sizing: border-box;
flex: 1;
min-width: 0;
}
#frmInvoice .frmInvAddline input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accentRing);
outline: none;
}
/* (a2) frmProposal — Hunt Package / Species / Daily Fees / Item Fees.
Not named by QA; found by the sweep, same construct. This one is a COMBO
SHELL (container owns border + radius + overflow:hidden, input and button
fused inside), so it gets the Item 2b price-list treatment: kit chrome on the
shell, borderless field, black button. Its shell border was var(--green). */
#frmProposal .frmProAddline {
height: var(--input-h-dense);
border: 1.5px solid var(--border-strong);
border-radius: var(--kit-radius-sm);
background: var(--white);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
#frmProposal .frmProAddline:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accentRing);
}
#frmProposal .frmProAddline input {
border: none;
outline: none;
padding: 0 12px;
font-size: 15px;
font-family: var(--font-ui);
color: var(--ink);
background: transparent;
}
#frmProposal .frmProAddlineBtn {
padding: 0 18px;
font-size: 15px;
font-weight: 600;
background-color: var(--shell);
color: var(--cream);
white-space: nowrap;
transition: background-color 140ms ease;
}
#frmProposal .frmProAddlineBtn:hover {
background-color: var(--ink-soft);
}
#frmProposal .frmProAddlineBtn:active {
background-color: var(--shell);
}
/* (a3) frmPriceList — "Add to price list". Found by the sweep; it was still on
legacy --green after Item 4. Colour only: it lives inside the Item 2b combo
shell, which already owns the kit border/radius at 42px. */
#frmPriceList .frmPriceAddBtn {
background-color: var(--shell);
color: var(--cream);
}
#frmPriceList .frmPriceAddBtn:hover {
background-color: var(--ink-soft);
transform: none;
}
/* (a4) frmViews action strip — this is where QA's "Add Attachment" lives.
It is NOT a standalone button: addActBtn() (js/index.js:14733) appends
items to #frmViewsActBtnCon, and the strip also holds Print / Send / Mark as
paid / Update pricelist. Only the Add-* actions take the black variant; the
remaining actions move off legacy --green onto the kit green so the strip is
not left half-updated. Targeted by id because the carry no other class.
40px -> dense 44px, and line-height must move with it: the are
display:inline-block, so line-height is what centres the label. */
#frmViews .selectActionBar li {
height: var(--input-h-dense);
line-height: var(--input-h-dense);
border-radius: var(--kit-radius-sm);
font-size: 15px;
font-weight: 600;
}
#frmViews .selectActionBar li.active,
#frmViews .selectActionBar.itemSelected li {
background-color: var(--success);
color: var(--white);
}
#frmViews .selectActionBar li.active:hover,
#frmViews .selectActionBar.itemSelected li:hover {
background-color: var(--success-dark);
}
#frmViews .selectActionBar li#frmViewsActBtnNote.active,
#frmViews .selectActionBar li#frmViewsActBtnAtt.active,
#frmViews .selectActionBar li#frmViewsActBtnAddInv.active,
#frmViews .selectActionBar li#frmViewsActBtnAddPHReg.active,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnNote,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnAtt,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnAddInv,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnAddPHReg {
background-color: var(--shell);
color: var(--cream);
}
#frmViews .selectActionBar li#frmViewsActBtnNote.active:hover,
#frmViews .selectActionBar li#frmViewsActBtnAtt.active:hover,
#frmViews .selectActionBar li#frmViewsActBtnAddInv.active:hover,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnNote:hover,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnAtt:hover,
#frmViews .selectActionBar.itemSelected li#frmViewsActBtnAddInv:hover {
background-color: var(--ink-soft);
}
/* .selectedCount is a label, not an action — keep it out of both treatments. */
#frmViews .selectActionBar .selectedCount,
#frmViews .selectActionBar.itemSelected .selectedCount {
background-color: transparent;
font-weight: 400;
}
/* (a5) The search-picker "Add this new Client / Add this new PH / Add Client".
The one genuinely RUNTIME-assigned member of the family: GlobalUtils
(js/index.js:1420) does elm.classList.add("btnGreen") on a inside the
#dataList picker and sets its text from param.optAddText (js 4905 / 4914 /
16523). Recoloured contextually — no JS class string changed. Geometry comes
from the Item 4 `td .btnGreen` dense guard, which already covers it. */
#dataList .btnGreen {
background-color: var(--shell);
color: var(--cream);
border-color: var(--shell);
}
#dataList .btnGreen:hover {
background-color: var(--ink-soft);
border-color: var(--ink-soft);
}
/* Dead rule kept in step with the variant: nothing puts a .btnAdd inside
#dataList today, but the class name now means "black Add" app-wide and this
ID-scoped rule would silently repaint it green if anyone ever did. */
#dataList .btnAdd {
background-color: var(--shell);
color: var(--cream);
}
/* --- (b) PROPOSAL "ADD PAYMENT" (QA F8) ----------------------------------
Root cause, and it is NOT a duplicate element: `.frmProBtnAdd` has no CSS
rule anywhere in this stylesheet, so index.html:4326 renders as bare inline
text. It is the last unstyled member of the proposal payment block, after
.frmProPayLbl (Item 3b) and .proInput (Item 4).
The "styled black button with the same handler at display:none" is the
INVOICE's button — index.html:3892, `class="btnAdd js_btnAddPayment"`, which
Item 4 already turned black. It shares the js_btnAddPayment hook class, and
it is display:none only because #frmInvoice itself is hidden. Querying the
DOM for .js_btnAddPayment returns both, which reads exactly like a twin.
Nothing hides or swaps either one: each form binds its own via
thisForm.querySelector (js/index.js:5520 invoice, 16455 proposal).
So no JS change is needed — the fix is the missing rule.
52px here, not dense: it sits in the payment row beside .proInput fields,
which Item 4 put on the full 52px kit height. */
#frmProposal .frmProBtnAdd {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--input-h);
min-width: 120px;
padding: 0 18px;
margin-top: 8px;
box-sizing: border-box;
font-family: var(--font-ui);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
background-color: var(--shell);
color: var(--cream);
border: 1.5px solid var(--shell);
border-radius: var(--kit-radius);
cursor: pointer;
user-select: none;
transition: background-color 140ms ease, border-color 140ms ease,
transform 80ms ease;
}
#frmProposal .frmProBtnAdd:hover {
background-color: var(--ink-soft);
border-color: var(--ink-soft);
}
#frmProposal .frmProBtnAdd:active {
background-color: var(--shell);
transform: translateY(1px);
}
#frmProposal .frmProBtnAdd:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ==========================================================================
ROUND 2 — FLOAT-FORM CHROME (Items 8 + 9 + 12, 2026-08-10)
Appended last so it beats the earlier .gFloatFrmHeader / .gFloatFrmFooter
rules and the ID-scoped popover rules on source order, without inventing
specificity. Port rules unchanged: no raw hex, --yellow never used,
var(--radius*) -> var(--kit-radius*).
========================================================================== */
/* --- ITEM 8: .gFloatFrmHeader -> TACTICAL SHELL -------------------------
13 headers (Clients, PH, Note, Att, Package, ConPay, Concessions,
ConSpecies, Hunt, EMail, Invoice, Proposal, MyReport). position:sticky /
top:0 / z-index were ALREADY on this rule and are deliberately left alone —
this item changes the surface, not the behaviour. */
.gFloatFrmHeader {
background: var(--shell);
border-bottom: 1px solid color-mix(in srgb, var(--shellInk) 16%, transparent);
border-top-left-radius: var(--kit-radius-lg);
border-top-right-radius: var(--kit-radius-lg);
padding: 12px 16px;
gap: 12px;
box-shadow: 0 2px 8px rgba(22, 21, 15, 0.18);
}
/* Title. `.gFloatFrmHeader h2` is carried alongside .gFloatFrmTitle because
frmInvoice's title (index.html:3576) is a bare
with NO class — it would
otherwise have stayed 1.5em black-on-black, i.e. invisible. */
.gFloatFrmTitle,
.gFloatFrmHeader h2 {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--shellInk);
margin: 0;
flex-grow: 1;
}
/* Back icon — 44px touch target, and made legible on black.
🚨 THE ASSET: img/icoBack.png is a DARK filled disc with a light arrow
KNOCKED OUT of it (decoded: 1416 dark px vs 350 light px, light centroid on
the disc's centre-left). On the old cream header the dark disc carried the
contrast; on --shell it is ~#141414 against #16150f, so the disc vanishes and
only a bare arrow floats. `filter: invert(1)` flips it to a CREAM disc with a
dark arrow, which contrasts hard against the shell and keeps the button
affordance. Deliberately NOT `brightness(0) invert(1)` — that flattens the
knockout and the arrow disappears into a solid white blob.
Every id and every