/* =========================================================================
   Global Jewellery Accounting Package — S.S. Solutions
   Palette: deep maroon + antique gold on warm ivory. The item entry screen
   keeps the legacy colour cues (yellow gross, pink wastage, green stones,
   cyan gram rate) as soft tints so long-time users find fields instantly.
   ========================================================================= */
:root {
    --gj-maroon: #5a1630;
    --gj-maroon-2: #74203f;
    --gj-maroon-3: #3f0f21;
    --gj-gold: #c79a2b;
    --gj-gold-soft: #f3e3b5;
    --gj-ivory: #faf7f1;
    --gj-paper: #ffffff;
    --gj-ink: #26201c;
    --gj-muted: #6f655d;
    --gj-line: #e7dfd3;
    --gj-focus: #c79a2b;

    /* legacy field tints */
    --tint-gross: #fff6c4;
    --tint-wastage: #fde3ef;
    --tint-stones: #e3f6e5;
    --tint-rate: #d8f4fb;
    --tint-sale: #ece6fb;
    --tint-purchase: #fde6e2;
    --tint-calc: #f1ede6;

    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif;
    --bs-body-color: var(--gj-ink);
    --bs-body-bg: var(--gj-ivory);
    --bs-link-color: var(--gj-maroon-2);
    --bs-link-hover-color: var(--gj-maroon);
    --bs-border-color: var(--gj-line);
}

html { font-size: 14px; }
body { background: var(--gj-ivory); }
.num, .text-num { font-variant-numeric: tabular-nums; text-align: right; }
.mono { font-family: Consolas, "Cascadia Mono", Menlo, monospace; }

/* ---- Buttons --------------------------------------------------------------- */
/* The bundled Bootstrap is 5.1: it has no --bs-btn-* variables or text-bg-* classes, so colours are set directly. */
.btn-primary, .btn-primary:disabled { background-color: var(--gj-maroon); border-color: var(--gj-maroon); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--gj-maroon-2); border-color: var(--gj-maroon-2); color: #fff; }
.btn-primary:active, .btn-primary:active:focus { background-color: var(--gj-maroon-3); border-color: var(--gj-maroon-3); color: #fff; }
.btn-gold { background-color: var(--gj-gold); border-color: var(--gj-gold); color: #241a05; }
.btn-gold:hover, .btn-gold:focus { background-color: #b88c22; border-color: #b88c22; color: #fff; }
.btn-outline-primary { color: var(--gj-maroon); border-color: var(--gj-maroon); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--gj-maroon); border-color: var(--gj-maroon); color: #fff; }
.btn-primary:focus, .btn-primary:active:focus, .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-gold:focus { box-shadow: 0 0 0 .2rem rgba(199,154,43,.45); }
.btn-link { color: var(--gj-maroon-2); }
.btn-link:hover { color: var(--gj-maroon); }
a { color: var(--gj-maroon-2); }
a:hover { color: var(--gj-maroon); }
.page-link, .page-link:hover { color: var(--gj-maroon-2); }
.page-item.active .page-link { background-color: var(--gj-maroon); border-color: var(--gj-maroon); color: #fff; }
.nav-tabs .nav-link, .nav-pills .nav-link:not(.active) { color: var(--gj-maroon-2); }
.nav-pills .nav-link.active { background-color: var(--gj-maroon); }
.bg-body { background-color: var(--gj-paper) !important; }
.text-bg-success { background-color: #198754; color: #fff; }
.text-bg-danger { background-color: #dc3545; color: #fff; }
.text-bg-warning { background-color: #ffc107; color: #000; }
.text-bg-info { background-color: #0dcaf0; color: #000; }
.text-bg-secondary { background-color: #6c757d; color: #fff; }
.text-bg-dark { background-color: #212529; color: #fff; }
.text-bg-light { background-color: #f8f9fa; color: #000; }
.badge[class*="text-bg-"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* white text must not lose its background on paper */
.text-warning-emphasis { color: #664d03; }
.border-dark-subtle { border-color: #adb5bd !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--gj-focus); box-shadow: 0 0 0 .2rem rgba(199,154,43,.28); }
.form-check-input:checked { background-color: var(--gj-maroon); border-color: var(--gj-maroon); }

/* ---- Shell ---------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
[hidden] { display: none !important; }
.validation-summary-valid { display: none !important; }
.sidebar { width: 248px; flex: 0 0 248px; background: linear-gradient(180deg, var(--sb-top, var(--gj-maroon-3)), var(--sb-bottom, var(--gj-maroon)) 60%); color: var(--sb-text, #f6ead0); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(127,127,127,.4) transparent; }
.sidebar-backdrop { display: none; }
@media (min-width: 992px) {
    .app { background: linear-gradient(to right, var(--sb-bottom, var(--gj-maroon)) 248px, var(--gj-ivory) 248px); }
    .sidebar { position: sticky; top: 0; height: 100vh; }
}
@media (max-width: 991.98px) {
    /* Off-screen drawer on phones / tablets */
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 264px; z-index: 1050; transform: translateX(-100%); transition: transform .2s ease; }
    body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.45); }
    body.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040; }
}
.sidebar-brand { display: flex; gap: .6rem; align-items: center; padding: 1rem 1rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--sb-accent, #c79a2b) 40%, transparent); }
.brand-mark { color: var(--sb-accent, var(--gj-gold)); font-size: 1.5rem; line-height: 1; }
.brand-name { font-weight: 700; letter-spacing: .02em; color: var(--sb-text, #fff); }
.brand-sub { font-size: .72rem; color: var(--sb-muted, #d9c79e); }
.sidebar-nav { padding: .5rem .5rem 2rem; }
.nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sb-accent, var(--gj-gold)); margin: 1rem .6rem .3rem; opacity: .9; }
.nav-item { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem .4rem 2.35rem; margin: 1px 0; border-radius: .4rem; color: var(--sb-text, #f3e6cc); text-decoration: none; font-size: .9rem; }
.nav-item:hover, .nav-item:focus-visible { background: var(--sb-hover, rgba(255,255,255,.08)); color: var(--sb-text, #fff); outline: none; }
.nav-item.active { background: var(--sb-active-bg, var(--gj-gold-soft)); color: var(--sb-active-text, var(--gj-maroon-3)); font-weight: 600; }
.nav-item.disabled { color: rgba(243,230,204,.45); cursor: not-allowed; }
.nav-item .phase { margin-left: auto; font-size: .66rem; border: 1px solid rgba(243,230,204,.35); border-radius: .25rem; padding: 0 .3rem; }
.nav-kbd { margin-left: auto; font-size: .62rem; background: color-mix(in srgb, var(--sb-accent, #c79a2b) 25%, transparent); color: inherit; border-radius: .25rem; }
.nav-item.active .nav-kbd { background: rgba(90,22,48,.12); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .55rem 1.25rem; background: var(--gj-paper); border-bottom: 1px solid var(--gj-line); }
.quick-find { flex: 0 1 420px; }
.quick-find input { background: #fbf8f2; }
.today { color: var(--gj-muted); font-size: .85rem; }
.content { padding: 1.25rem; max-width: 1600px; width: 100%; }
@media (max-width: 575.98px) { .content { padding: .9rem 16px; } .topbar { padding: .5rem 16px; } }

.app-anon { background: radial-gradient(1200px 600px at 10% -10%, #f6e7c3 0%, transparent 60%), linear-gradient(160deg, var(--gj-maroon-3), var(--gj-maroon) 70%); min-height: 100vh; }
.anon-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--gj-paper); border-radius: .9rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.login-card header { background: var(--gj-ivory); border-bottom: 3px solid var(--gj-gold); padding: 1.4rem 1.6rem 1rem; }

/* ---- Page header & cards --------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.45rem; margin: 0; font-weight: 700; color: var(--gj-maroon-3); }
.page-head .sub { color: var(--gj-muted); font-size: .9rem; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.card { border-color: var(--gj-line); border-radius: .6rem; }
.card-header { background: #fbf8f2; border-bottom-color: var(--gj-line); font-weight: 600; color: var(--gj-maroon-3); }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gj-muted); background: #fbf8f2; border-bottom-width: 1px; white-space: nowrap; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #fbf3e0; }
.table-sm td, .table-sm th { padding: .35rem .5rem; }
.table-responsive { border-radius: .5rem; }
tr.inactive td { color: #a39a91; }

.kpi { background: var(--gj-paper); border: 1px solid var(--gj-line); border-radius: .6rem; padding: .9rem 1rem; height: 100%; }
.kpi .label { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gj-muted); }
.kpi .value { font-size: 1.55rem; font-weight: 700; color: var(--gj-maroon-3); font-variant-numeric: tabular-nums; }
.kpi .note { font-size: .8rem; color: var(--gj-muted); }
.kpi.accent { border-top: 3px solid var(--gj-gold); }

/* ---- Item entry: Show Case Items ------------------------------------------ */
.sc-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--gj-maroon); color: #fff; border-radius: .6rem .6rem 0 0; padding: .55rem 1rem; }
.sc-titlebar h1 { font-size: 1.2rem; margin: 0; color: var(--gj-gold-soft); letter-spacing: .03em; }
.sc-titlebar .code-badge { background: var(--gj-gold); color: #2b1f05; border-radius: .3rem; padding: .05rem .5rem; font-weight: 700; }
.sc-titlebar .form-check-label, .sc-titlebar label { color: #f6ead0; font-size: .85rem; }
.sc-titlebar .form-select { width: auto; }
.sc-body { background: var(--gj-paper); border: 1px solid var(--gj-line); border-top: 0; border-radius: 0 0 .6rem .6rem; padding: .9rem 1rem 1rem; }

.sc-grid { display: grid; gap: .9rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .sc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
@media (min-width: 1400px) { .sc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; } }
.sc-grid > * { min-width: 0; }
@media (min-width: 992px) { .sc-stones { grid-column: 1 / -1; } }
@media (min-width: 1400px) { .sc-stones { grid-column: span 2; } }
/* Fixed places so a tall frame never leaves a gap above "Weight · wastage": the frames sit at the top
   of their cells and the estimate column runs down the side, its extra height going to the last (1fr) row. */
.sc-grid > .sc-section, .sc-grid > .sc-aside { align-self: start; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .sc-grid { grid-template-rows: auto auto 1fr; }
    .sc-id { grid-column: 1; grid-row: 1; }
    .sc-metal { grid-column: 2; grid-row: 1; }
    .sc-weight { grid-column: 1; grid-row: 2 / span 2; }
    .sc-aside { grid-column: 2; grid-row: 2 / span 2; }
    .sc-stones { grid-row: 4; }
}
@media (min-width: 1400px) {
    .sc-grid { grid-template-rows: auto auto auto 1fr; }
    .sc-id { grid-column: 1; grid-row: 1; }
    .sc-metal { grid-column: 2; grid-row: 1 / span 2; }
    .sc-aside { grid-column: 3; grid-row: 1 / -1; }
    .sc-weight { grid-column: 1; grid-row: 2; }
    .sc-stones { grid-column: 1 / span 2; grid-row: 3; }
}

.sc-section { border: 1px solid var(--gj-line); border-radius: .5rem; padding: .6rem .75rem .7rem; position: relative; }
.sc-section > .legend { position: absolute; top: -.62rem; left: .6rem; background: var(--gj-paper); padding: 0 .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gj-maroon-2); font-weight: 600; }

/* compact label-left rows like the legacy form */
.f-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: .5rem; margin-bottom: .32rem; }
.f-row > label { font-size: .84rem; font-weight: 600; color: #3b4a35; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-row-96 { grid-template-columns: 96px minmax(0, 1fr); }
.f-row .form-control, .f-row .form-select { padding: .22rem .5rem; font-size: .92rem; min-height: 0; }
.f-row .form-select { padding-right: 1.8rem; }
.f-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem; align-items: center; }
.f-pair > .lbl { font-size: .84rem; font-weight: 600; color: #3b4a35; }
@media (max-width: 575.98px) { .f-row { grid-template-columns: 1fr; gap: .1rem; } }

input.t-gross { background: var(--tint-gross); font-weight: 700; }
input.t-wastage, .t-wastage { background: var(--tint-wastage); }
input.t-stones, .t-stones { background: var(--tint-stones); }
input.t-sale { background: var(--tint-sale); }
input.t-purchase { background: var(--tint-purchase); }
.t-calc, input[readonly].form-control { background: var(--tint-calc); }
input[readonly].form-control:focus { box-shadow: none; }
.f-row input.num, .stones input.num { text-align: right; font-variant-numeric: tabular-nums; }
.hint { font-size: .74rem; color: #a5304d; white-space: nowrap; }
.rule-hint { font-size: .74rem; color: var(--gj-muted); }
.rule-hint.warn { color: #9a5b00; }
.rule-hint.bad { color: #b02a37; font-weight: 600; }

.rate-box { background: var(--tint-rate); border: 1px solid #93d6e6; border-radius: .4rem; padding: .3rem .7rem; text-align: center; min-width: 140px; }
.rate-box .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #a5304d; font-weight: 700; }
.rate-box .val { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #0c4a5a; }
.rate-box .src { font-size: .68rem; color: #3d6b77; }

.packing { display: flex; gap: .9rem; flex-wrap: wrap; }

/* stones grid */
.stones { width: 100%; border-collapse: separate; border-spacing: 0; }
.stones th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gj-muted); font-weight: 600; padding: .2rem .25rem; white-space: nowrap; }
.stones td { padding: .12rem .15rem; vertical-align: middle; }
.stones .form-control, .stones .form-select { padding: .18rem .35rem; font-size: .88rem; min-height: 0; }
.stones .form-select { padding-right: 1.1rem; background-position: right .2rem center; background-size: 10px 8px; }
.stones td.c-stone { min-width: 140px; }
.stones td.c-num { width: 84px; }
.stones td.c-unit { width: 58px; }
.stones td.c-basis { width: 92px; }
.stones td.c-pcs { width: 62px; }
.stones td.c-val { width: 96px; }
.stones td.c-del { width: 28px; }
.stones tfoot td { font-weight: 700; font-size: .85rem; border-top: 1px solid var(--gj-line); padding-top: .3rem; }
.stones-wrap { overflow-x: auto; }
.stones { min-width: 760px; }

/* totals panel */
.totals { background: #fbf8f2; border: 1px solid var(--gj-line); border-radius: .5rem; padding: .6rem .8rem; }
.totals dl { display: grid; grid-template-columns: 1fr auto; gap: .18rem .6rem; margin: 0; }
.totals dt { font-weight: 500; color: var(--gj-muted); font-size: .86rem; }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.totals .grand { border-top: 2px solid var(--gj-gold); margin-top: .35rem; padding-top: .35rem; }
.totals .grand dt { color: var(--gj-maroon-3); font-weight: 700; }
.totals .grand dd { font-size: 1.35rem; color: var(--gj-maroon-3); }

.msg-box { font-size: .84rem; }
.msg-box .alert { padding: .35rem .6rem; margin-bottom: .4rem; }

.breakdown td { font-size: .86rem; }
.breakdown td.sec { color: var(--gj-maroon-2); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.breakdown td.f { color: var(--gj-muted); }
.breakdown tr.total td { font-weight: 700; }

.recent-list { max-height: 360px; overflow-y: auto; }
.recent-list a { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; padding: .3rem .5rem; border-bottom: 1px dashed var(--gj-line); color: inherit; text-decoration: none; font-size: .85rem; }
.recent-list a:hover { background: #fbf3e0; }

/* wastage & making setup: the two charges side by side */
.rule-slabs th.va-w, .rule-slabs td.va-w { background: var(--tint-wastage); }
.rule-slabs th.va-m, .rule-slabs td.va-m { background: #f3eefb; }
.va-side { border: 1px solid var(--gj-line); border-radius: .5rem; padding: .6rem .8rem; height: 100%; }
.va-side.wastage { border-left: 4px solid #d9a441; }
.va-side.making { border-left: 4px solid #8b6cc4; }
.va-side.off .va-fields { opacity: .45; }

/* item entry: stock summary by purity (click a row for its items) */
.stock-summary { font-size: .82rem; }
.stock-summary th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gj-muted); font-weight: 600; white-space: nowrap; }
.stock-summary td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stock-summary tr[data-stock-purity] { cursor: pointer; }
.stock-summary tbody tr[data-stock-purity]:hover td, .stock-summary tr.active td { background: #fbf3e0; }
.stock-summary tr[data-stock-purity]:focus-visible { outline: 2px solid var(--gj-focus); outline-offset: -2px; }
.stock-summary tfoot td { font-weight: 700; border-top: 2px solid var(--gj-gold); }

.sticky-actions { position: sticky; bottom: 0; z-index: 10; background: rgba(250,247,241,.96); border-top: 1px solid var(--gj-line); padding: .6rem 0; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kbd-help { font-size: .76rem; color: var(--gj-muted); }
.kbd-help kbd { background: #efe7d7; color: var(--gj-ink); font-size: .72rem; }

/* details */
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: 0; }
.dl-grid dt { color: var(--gj-muted); font-weight: 500; }
.dl-grid dd { margin: 0; }
.barcode-chip { display: inline-block; font-family: Consolas, monospace; letter-spacing: .12em; border: 1px dashed var(--gj-maroon-2); border-radius: .3rem; padding: .1rem .5rem; background: #fff; }

.badge-phase { background: #efe7d7; color: var(--gj-maroon-3); font-weight: 600; }
.json-diff { font-family: Consolas, monospace; font-size: .76rem; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow: auto; background: #fbf8f2; border-radius: .3rem; padding: .35rem; margin: 0; }

/* ---- Printed documents (tax invoice, credit note, vouchers) ------------------ */
.invoice { background: #fff; border: 1px solid var(--gj-line); border-radius: .6rem; padding: 1.1rem 1.25rem; max-width: 1100px; }
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--gj-gold); padding-bottom: .6rem; margin-bottom: .6rem; }
.inv-shop { font-size: 1.35rem; font-weight: 700; color: var(--gj-maroon-3); }
.inv-title { font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; color: var(--gj-maroon-2); }
.inv-party { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.inv-lines { font-size: .82rem; }
.inv-lines th { font-size: .7rem; }
.inv-foot { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; border-top: 1px solid var(--gj-line); padding-top: .6rem; }
@media (max-width: 767.98px) { .inv-foot { grid-template-columns: 1fr; } }
.inv-totals { display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; margin: 0; }
.inv-totals dt { font-weight: 500; color: var(--gj-muted); }
.inv-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals .grand { border-top: 2px solid var(--gj-gold); padding-top: .3rem; font-size: 1.15rem; font-weight: 700; color: var(--gj-maroon-3); }
.inv-sign { display: flex; justify-content: space-between; margin-top: 2.5rem; font-size: .85rem; color: var(--gj-muted); }

/* dashboard "Needs attention" — collapsed to a summary line until clicked */
.attention-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; width: 100%; border: 0; text-align: left; cursor: pointer; }
.attention-toggle:not(.collapsed) { border-bottom: 1px solid var(--gj-line); }
.attention-summary { font-weight: 400; font-size: .85rem; color: var(--gj-muted); }
.attention-chevron { margin-left: auto; transition: transform .15s ease; }
.attention-toggle:not(.collapsed) .attention-chevron { transform: rotate(180deg); }
.attention-toggle:focus-visible { outline: 2px solid var(--gj-focus); outline-offset: -2px; }

/* Sales bill: Post & print is green when the bill can be posted, light red while something blocks it */
.btn-post-ready { background-color: #2f9e44; border-color: #2f9e44; color: #fff; }
.btn-post-ready:hover, .btn-post-ready:focus { background-color: #27863a; border-color: #27863a; color: #fff; }
.btn-post-ready:active { background-color: #1f6e30; border-color: #1f6e30; color: #fff; }
.btn-post-blocked, .btn-post-blocked:disabled { background-color: #f8d7da; border-color: #f1aeb5; color: #842029; opacity: 1; }

/* Item entry: refused-save panel and outlined fields */
.save-problems { border: 1px solid #e3a3ad; border-left: 5px solid #b02a37; background: #fdf1f2; border-radius: .5rem; padding: .7rem .9rem; color: #5c1420; }
.save-problems:focus { outline: 2px solid var(--gj-focus); outline-offset: 2px; }
.sp-head { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .4rem; }
.sp-icon { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; background: #b02a37; color: #fff; font-weight: 700; display: grid; place-items: center; }
.sp-title { font-weight: 700; font-size: 1rem; }
.sp-sub { font-size: .82rem; color: #7a3a44; }
.sp-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a1d36; font-weight: 700; margin: .45rem 0 .1rem 2.2rem; }
.sp-list { margin: 0 0 0 2.2rem; padding-left: 1rem; font-size: .88rem; }
.sp-list li { margin: .1rem 0; }
.sp-list a { color: #8a1d36; }
.sp-sep { color: #b98a91; margin: 0 .35rem; }
.sc-body .form-control.is-invalid, .sc-body .form-select.is-invalid { border-color: #b02a37; box-shadow: 0 0 0 .15rem rgba(176,42,55,.18); background-image: none; padding-right: .5rem; }
.sc-body .form-check-input.is-invalid { border-color: #b02a37; box-shadow: 0 0 0 .15rem rgba(176,42,55,.25); }

/* type-to-search dropdowns (searchselect.js, from the Global Accounting Package) */
.ac-combo { display: block; }
.ac-select { display: none; }
.ac-search::placeholder { color: #a39a91; }
.ac-list { position: fixed; z-index: 1060; max-height: 260px; overflow-y: auto; background: var(--gj-paper); color: var(--gj-ink);
    border: 1px solid var(--gj-line); border-radius: .4rem; box-shadow: 0 10px 24px rgba(38,32,28,.18); font-size: .9rem; padding: 4px 0; }
.ac-item { padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.ac-item:hover { background: #fbf3e0; }
.ac-item.active { background: var(--gj-gold-soft); color: var(--gj-maroon-3); }
.ac-item mark { background: #f3d98a; color: inherit; font-weight: 600; padding: 0; }
.ac-empty { padding: 8px 12px; color: var(--gj-muted); font-style: italic; }
@media print { .ac-list { display: none !important; } }

/* Account Master: section headings inside the form */
.form-section { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gj-maroon-2); font-weight: 600; margin: 1rem 0 .4rem; border-bottom: 1px solid var(--gj-line); padding-bottom: .2rem; }

/* label preview & scan feedback */
.label-preview { background: repeating-conic-gradient(#f4efe6 0% 25%, #fbf8f2 0% 50%) 50% / 16px 16px; border: 1px solid var(--gj-line); border-radius: .5rem; padding: 1rem; overflow-x: auto; }
.label-preview svg { max-width: 100%; height: auto; }
.scan-result { font-size: 1.05rem; padding: .5rem .75rem; border-radius: .4rem; }
.scan-result.ok { background: var(--tint-stones); color: #1f5a2c; }
.scan-result.bad { background: var(--tint-wastage); color: #8a1d36; }
.agent-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #c9c0b4; }
.agent-dot.on { background: #2f9e44; }
.stat-strip { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; color: var(--gj-muted); }
.stat-strip b { color: var(--gj-ink); }

@media print {
    .sidebar, .topbar, .sticky-actions, .no-print { display: none !important; }
    .content { padding: 0; }
    body { background: #fff; }
    .invoice { border: 0; padding: 0; max-width: none; }
    .app { background: #fff !important; }
}

/* ---- Item photo (entry screen card + editor) ---------------------------------------- */
.item-photo .photo-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; max-height: 260px; background: #faf8f4; cursor: pointer; outline-offset: -3px; }
.item-photo .photo-drop.over { background: #f3ead6; box-shadow: inset 0 0 0 2px var(--gj-gold); }
.item-photo .photo-drop img { max-width: 100%; max-height: 260px; object-fit: contain; display: block; }
.item-photo .photo-empty { text-align: center; color: var(--gj-muted); font-size: .86rem; padding: 1rem; }
.pe-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; background: repeating-conic-gradient(#ececec 0 25%, #f8f8f8 0 50%) 0 0 / 16px 16px; border-radius: .4rem; overflow: hidden; padding: 8px; }
.pe-wrap { position: relative; line-height: 0; touch-action: none; user-select: none; }
.pe-wrap canvas { display: block; }
.pe-crop { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); outline: 1px solid rgba(255, 255, 255, .9); cursor: move; touch-action: none; }
.pe-grid { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right, transparent 33.2%, rgba(255,255,255,.45) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.45) 66.6%, transparent 66.8%),
                linear-gradient(to bottom, transparent 33.2%, rgba(255,255,255,.45) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.45) 66.6%, transparent 66.8%); }
.pe-h { position: absolute; width: 18px; height: 18px; background: #fff; border: 2px solid var(--gj-gold, #b8860b); border-radius: 3px; }
.pe-h[data-mode=nw] { left: -9px; top: -9px; cursor: nwse-resize; }
.pe-h[data-mode=ne] { right: -9px; top: -9px; cursor: nesw-resize; }
.pe-h[data-mode=sw] { left: -9px; bottom: -9px; cursor: nesw-resize; }
.pe-h[data-mode=se] { right: -9px; bottom: -9px; cursor: nwse-resize; }
.pe-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); font-weight: 600; }
.pe-controls .pe-group { border-bottom: 1px solid var(--gj-line, #e5e0d5); padding: .5rem 0; }
.pe-controls .pe-group:last-child { border-bottom: 0; }
.pe-label { font-weight: 600; font-size: .82rem; margin-bottom: .3rem; align-items: center; }
.pe-slider { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; align-items: center; gap: .4rem; font-size: .84rem; }
.pe-slider output { text-align: right; font-variant-numeric: tabular-nums; color: var(--gj-muted); }
.item-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--gj-line, #e5e0d5); background: #faf8f4; }
.item-photo-full { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: .4rem; background: #faf8f4; }

/* ---- Grouped side menu --------------------------------------------------------- */
.nav-find { position: relative; margin: .55rem .35rem .2rem; }
.nav-find input { width: 100%; padding: .38rem .6rem .38rem 1.9rem; border-radius: .45rem; font-size: .85rem; border: 1px solid color-mix(in srgb, var(--sb-text, #f3e6cc) 22%, transparent);
    background: color-mix(in srgb, var(--sb-text, #f3e6cc) 8%, transparent); color: var(--sb-text, #f3e6cc); }
.nav-find input::placeholder { color: var(--sb-muted, #d9c79e); opacity: .8; }
.nav-find input:focus { outline: none; border-color: var(--sb-accent, #c79a2b); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--sb-accent, #c79a2b) 30%, transparent); }
.nav-find svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--sb-muted, #d9c79e); pointer-events: none; }
.nav-group { margin: .15rem 0; }
.nav-group > summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem; border-radius: .45rem; cursor: pointer; user-select: none;
    color: var(--sb-text, #f3e6cc); font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover, .nav-group > summary:focus-visible { background: var(--sb-hover, rgba(255,255,255,.08)); outline: none; }
.nav-group > summary .ico { width: 18px; height: 18px; flex: none; color: var(--sb-accent, #c79a2b); }
.nav-group > summary .chev { margin-left: auto; width: 12px; height: 12px; opacity: .6; transition: transform .15s; }
.nav-group[open] > summary .chev { transform: rotate(90deg); }
.nav-group.has-active > summary { color: var(--sb-accent, #c79a2b); }
.nav-group .nav-items { padding: .05rem 0 .3rem; position: relative; }
.nav-group .nav-items::before { content: ""; position: absolute; left: 1.28rem; top: .2rem; bottom: .5rem; border-left: 1px solid color-mix(in srgb, var(--sb-text, #f3e6cc) 16%, transparent); }
.nav-empty { padding: .5rem .9rem; font-size: .82rem; color: var(--sb-muted, #d9c79e); }
@media (prefers-reduced-motion: reduce) { .nav-group > summary .chev { transition: none; } }

/* ---- Screen help (topbar button + side panel, F1) ------------------------------- */
.help-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--gj-line); background: #fffaf0; color: var(--gj-maroon); font-weight: 600; border-radius: 999px; padding: .2rem .75rem .2rem .3rem; }
.help-btn span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gj-maroon); color: #fff; font-size: .75rem; font-weight: 800; }
.help-btn:hover, .help-btn:focus-visible { background: var(--gj-gold-soft); border-color: #e3cd8f; color: var(--gj-maroon-3); }
.help-panel { --bs-offcanvas-width: 480px; background: #fffdf8; }
.help-panel .offcanvas-header { align-items: flex-start; border-bottom: 1px solid var(--gj-line); background: linear-gradient(135deg, #fffaf0, #fdf3e1); }
.help-kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #9a7218; font-weight: 700; }
.help-panel .offcanvas-title { font-size: 1.2rem; color: var(--gj-maroon-3); font-weight: 700; margin-top: .1rem; }
.help-summary { color: var(--gj-muted); font-size: .92rem; }
.help-steps { list-style: none; padding: 0; margin: 0 0 .9rem; }
.help-steps li { position: relative; padding: .55rem 0 .6rem 2.4rem; font-size: .9rem; line-height: 1.45; border-bottom: 1px dashed #efe6d6; }
.help-steps li b { display: block; color: var(--gj-ink); font-weight: 600; margin-bottom: .1rem; }
.help-steps li span { display: block; color: #4a403a; }
.help-steps li:last-child { border-bottom: 0; }
.help-steps li::before { content: attr(data-n); position: absolute; left: 0; top: .5rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--gj-maroon); color: #fff; font-size: .78rem; font-weight: 700; }
.help-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gj-maroon); font-weight: 700; margin: .4rem 0 .4rem; }
.help-tips { background: #fff6e2; border: 1px solid #f2dfb0; border-radius: .6rem; padding: .6rem .85rem; margin-bottom: 1rem; }
.help-tips ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; }
.help-tips li + li { margin-top: .3rem; }
.help-keys { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; font-size: .88rem; margin-bottom: 1rem; }
.help-keys dt { font-weight: 400; } .help-keys dd { margin: 0; align-self: center; }
.help-keys kbd, .help-foot kbd { background: #fff; color: var(--gj-ink); border: 1px solid #d8ccb6; border-bottom-width: 2px; font-size: .74rem; padding: .08rem .4rem; }
.help-foot { font-size: .78rem; color: var(--gj-muted); border-top: 1px solid var(--gj-line); padding-top: .75rem; }
@media print { .help-btn, .help-panel { display: none !important; } }
.help-sec + .help-sec { margin-top: .2rem; }
.help-sec .help-h { display: flex; align-items: center; gap: .5rem; }
.help-sec .help-h::after { content: ""; flex: 1; border-top: 1px solid #efe3cc; }
.help-faq { margin-bottom: 1rem; }
.help-faq details { border: 1px solid var(--gj-line); border-radius: .5rem; background: #fff; margin-bottom: .4rem; }
.help-faq summary { cursor: pointer; padding: .5rem .75rem; font-size: .88rem; font-weight: 600; color: var(--gj-maroon-3); }
.help-faq details[open] summary { border-bottom: 1px dashed var(--gj-line); }
.help-faq p { margin: 0; padding: .5rem .75rem .6rem; font-size: .88rem; color: #4a403a; }
.help-foot .btn { margin-right: .35rem; }
.help-page { max-width: 860px; }
.help-page .help-steps li { font-size: .95rem; }
@media print { .help-page { border: 0; box-shadow: none; } .help-faq details { border: 0; } .help-faq details > p { display: block; } }

/* ---- Install the app (see pwa.js) --------------------------------------------- */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1025; display: flex; align-items: center; gap: .6rem; max-width: 520px; margin: 0 auto; padding: .6rem .75rem; background: var(--gj-paper); color: var(--gj-ink); border: 1px solid var(--gj-line); border-top: 3px solid var(--gj-gold); border-radius: .75rem; box-shadow: 0 8px 28px rgba(38,32,28,.28); }
.install-banner img { flex: none; border-radius: 9px; }
.install-text { flex: 1 1 0; min-width: 0; line-height: 1.25; }
.install-text b { display: block; color: var(--gj-maroon-3); }
.install-text span { font-size: .82rem; color: var(--gj-muted); }
.install-banner .btn { flex: none; white-space: nowrap; }
.install-banner .btn-close { flex: none; padding: .6rem; }
.install-steps { margin: 0 0 .9rem; padding-left: 1.3rem; }
.install-steps li { margin-bottom: .5rem; }
.install-steps svg { vertical-align: text-bottom; color: var(--gj-maroon); }
.nav-install { display: flex; align-items: center; gap: .6rem; width: 100%; margin-top: .6rem; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--sb-accent, #c79a2b) 55%, transparent); border-radius: .45rem; background: transparent; color: var(--sb-text, #f3e6cc); font-weight: 600; font-size: .85rem; }
.nav-install:hover, .nav-install:focus-visible { background: var(--sb-hover, rgba(255,255,255,.08)); outline: none; }
.nav-install .ico { flex: none; width: 18px; height: 18px; color: var(--sb-accent, #c79a2b); }
@media print { .install-banner, .nav-install { display: none !important; } }

/* ---- Mobile look ----------------------------------------------------------------
   Always "screen and": a printed A4 page is narrower than these widths too, and
   invoices must keep their desktop layout on paper.
   Up to 991px: Back button in the top bar, menu in a drawer. Up to 767px: full phone look. */
.app-back, .app-title, .app-icon-btn, .bottom-nav { display: none; }
.user-btn svg { display: none; }
.help-text { font-weight: inherit; }
@media print { .app-back, .app-title, .app-icon-btn, .bottom-nav { display: none !important; } }

@media screen and (max-width: 991.98px) {
    .app-back { display: inline-flex; align-items: center; gap: .15rem; flex: none; min-height: 40px; padding: 0 .55rem 0 .25rem; border: 1px solid var(--gj-line); border-radius: .5rem; background: #fffaf0; color: var(--gj-maroon); font-weight: 600; }
    .app-back svg { width: 20px; height: 20px; }
    .app-back:active { background: var(--gj-gold-soft); }
    .topbar { padding-left: 16px; padding-right: 16px; }
    .content { padding-left: 16px; padding-right: 16px; }
    .today { display: none !important; }
    .topbar .btn { white-space: nowrap; }
}

@media screen and (max-width: 767.98px) {
    :root { --m-nav-h: 58px; --m-safe-b: env(safe-area-inset-bottom, 0px); }

    /* App bar */
    .topbar { flex-wrap: wrap; gap: .4rem; padding: calc(.4rem + env(safe-area-inset-top, 0px)) 12px .4rem; background: linear-gradient(120deg, var(--gj-maroon-3), var(--gj-maroon)); border-bottom: 2px solid var(--gj-gold); color: #fff; }
    .app-back { width: 40px; justify-content: center; padding: 0; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
    .app-back span { display: none; }
    .app-back:active { background: rgba(255,255,255,.28); }
    .app-title { display: block; flex: 1 1 0; min-width: 0; font-size: 1.1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
    .app-icon-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: #fff; }
    .app-icon-btn svg { width: 21px; height: 21px; }
    .topbar > .ms-auto { margin-left: 0 !important; gap: .15rem !important; flex: none; }
    .help-btn { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; border: 0; }
    .help-btn:hover, .help-btn:focus-visible { background: rgba(255,255,255,.15); }
    .help-btn span { background: #fff; color: var(--gj-maroon); }
    .help-text { display: none; }
    .user-btn, .user-btn:hover, .user-btn:focus { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; background: transparent; border: 0; color: #fff; }
    .user-btn svg { display: block; width: 21px; height: 21px; }
    .user-btn .user-name, .user-btn.dropdown-toggle::after { display: none; }
    .quick-find { display: none; order: 9; flex: 1 0 100%; }
    body.search-open .quick-find { display: block; }

    /* Tab bar. It gets out of the way while typing, when the keyboard needs the room. */
    .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; height: calc(var(--m-nav-h) + var(--m-safe-b)); padding-bottom: var(--m-safe-b); background: var(--gj-paper); border-top: 1px solid var(--gj-line); box-shadow: 0 -4px 16px rgba(38,32,28,.08); }
    .bottom-nav > a, .bottom-nav > button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--gj-muted); font-size: .72rem; font-weight: 600; text-decoration: none; }
    .bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .bottom-nav > a.active { color: var(--gj-maroon); }
    .bottom-nav > a.active svg { stroke-width: 2.3; }
    .bottom-nav > a:active, .bottom-nav > button:active { background: #fbf3e0; }
    .app .install-banner { bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 8px); }
    body:has(.content input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [readonly]):focus, .content textarea:focus, .topbar input:focus) .install-banner { display: none; }
    body:has(.content input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [readonly]):focus, .content textarea:focus, .topbar input:focus) .bottom-nav { display: none; }
    .main { padding-bottom: calc(var(--m-nav-h) + var(--m-safe-b)); }
    .sticky-actions { bottom: calc(var(--m-nav-h) + var(--m-safe-b)); margin-left: -12px; margin-right: -12px; padding: .6rem 12px; }
    body:has(.content input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [readonly]):focus, .content textarea:focus) .sticky-actions { bottom: 0; }

    /* Drawer */
    .sidebar { width: min(86vw, 320px); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .nav-item { padding-top: .6rem; padding-bottom: .6rem; font-size: 1rem; }
    .nav-group > summary { padding-top: .65rem; padding-bottom: .65rem; font-size: .9rem; }
    .nav-kbd { display: none; }

    /* Page */
    html { -webkit-text-size-adjust: 100%; }
    .content { padding: .75rem 12px 1rem; }
    .page-head { align-items: stretch; gap: .5rem; margin-bottom: .75rem; }
    .page-head > * { min-width: 0; }
    .page-head > div:first-child { flex: 1 1 100%; }
    .page-head h1 { font-size: 1.25rem; }
    .page-head h1.m-same-title { display: none; }
    .page-head .sub { font-size: .86rem; }
    .page-head .actions { margin-left: 0; width: 100%; }
    .page-head .actions > .btn, .page-head .actions > form, .page-head .actions > a { flex: 1 1 auto; }
    .page-head .actions > form .btn { width: 100%; }
    .card-body { padding: .75rem; }
    .kbd-help, .btn kbd { display: none; }

    .content a kbd, .content button kbd { display: none; }

    /* Touch: 16px fields stop iPhones zooming the page on focus; controls are big enough to tap. */
    input.form-control, select.form-select, textarea.form-control, .nav-find input, input.ac-search { font-size: 16px !important; }
    input.form-control, select.form-select, input.ac-search { min-height: 42px; }
    input.ac-search { width: 100%; padding: .35rem .6rem; border: 1px solid #ced4da; border-radius: .25rem; }
    form input.form-control[name="q"] { max-width: none !important; }
    .btn { min-height: 42px; }
    .btn.btn-sm { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
    .btn.btn-link.p-0 { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
    .form-check-input { width: 1.35em; height: 1.35em; }
    .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }

    /* Filters and form rows stack instead of squeezing */
    form.row > [class*="col-auto"], form.d-flex.flex-wrap > * { flex: 1 1 100%; width: 100%; max-width: 100%; }
    form.row > [class*="col-auto"] .btn { width: 100%; }
    .f-row { grid-template-columns: minmax(0, 1fr); gap: .1rem; margin-bottom: .55rem; }
    .f-row > label { white-space: normal; }
    .f-row .form-control, .f-row .form-select { padding: .35rem .6rem; }
    .f-pair { max-width: 100%; }
    .f-pair > * { min-width: 0; }
    .hint { white-space: normal; }
    .dl-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow-wrap: anywhere; }

    /* Tabs scroll sideways rather than wrapping into a wall of links */
    .content .nav-tabs, .content .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .content .nav-tabs::-webkit-scrollbar, .content .nav-pills::-webkit-scrollbar { display: none; }
    .content .nav-tabs .nav-link, .content .nav-pills .nav-link { white-space: nowrap; }

    /* Dialogs and panels */
    .help-panel { --bs-offcanvas-width: 100%; }
    .modal-dialog { margin: .75rem; }
    .ac-item { white-space: normal; padding: 10px 12px; }

    /* Titled screens (sale bill, item entry) */
    .sc-titlebar { padding: .5rem .75rem; }
    .sc-titlebar .ms-auto { margin-left: 0 !important; }
    .sc-body { padding: .75rem; }

    /* Printed documents viewed on a phone */
    .invoice { padding: .75rem; }
    .inv-sign { margin-top: 1.5rem; }

    /* Rows as cards: see prepareTable() in site.js. Child selectors only: a card can hold a nested table. */
    table.m-cards, table.m-cards > tbody, table.m-cards > tfoot { display: block; width: 100%; }
    table.m-cards > thead { display: none; }
    table.m-cards > tbody > tr, table.m-cards > tfoot > tr { display: block; margin: 0 0 .6rem; padding: .35rem .75rem .45rem; background: var(--gj-paper); border: 1px solid var(--gj-line); border-radius: .6rem; box-shadow: 0 1px 2px rgba(38,32,28,.05); }
    table.m-cards > tbody > tr:last-child { margin-bottom: 0; }
    .card > .table-responsive > table.m-cards, .card > table.m-cards { padding: .6rem; }
    table.m-cards > * > tr > td { display: block; padding: .22rem 0; border: 0; text-align: right; overflow-wrap: anywhere; font-size: .95rem; }
    table.m-cards > * > tr > td::after { content: ""; display: block; clear: both; }
    table.m-cards > * > tr > td[data-label]:not([data-label=""])::before { content: attr(data-label); float: left; max-width: 48%; margin-right: .75rem; text-align: left; color: var(--gj-muted); font-size: .8rem; font-weight: 400; line-height: 1.5rem; }
    table.m-cards > * > tr > td.m-title { padding: .3rem 0 .4rem; margin-bottom: .15rem; border-bottom: 1px dashed var(--gj-line); text-align: left; font-size: 1rem; font-weight: 600; }
    table.m-cards > * > tr > td.m-title::before { display: none; }
    table.m-cards > * > tr > td.m-blank { display: none; }
    table.m-cards > * > tr > td.m-full { text-align: left; font-weight: 600; color: var(--gj-maroon-3); }
    table.m-cards > tbody > tr.m-note, table.m-cards > tfoot > tr.m-note { background: transparent; border: 0; box-shadow: none; padding: .2rem .25rem; }
    table.m-cards > tbody > tr.m-note > td.m-full { text-align: center; }
    table.m-cards > tfoot > tr { background: #fbf8f2; border-top: 2px solid var(--gj-gold); margin-top: .6rem; font-weight: 600; }
    table.m-cards > tfoot > tr > td { font-weight: 600; }
    table.m-cards > tbody > tr > td form.d-flex { justify-content: flex-end; }
    table.m-cards > * > tr > td.m-full table { font-weight: 400; }
    table.m-cards > * > tr > td input:not([type=checkbox], [type=radio]) { width: 100%; }
    table.m-cards > tbody > tr > td form.d-flex input { width: auto; }
    table.m-cards > tbody > tr > td input:not([type=checkbox], [type=radio]), table.m-cards > tbody > tr > td select { text-align: left; }
}