/* Paymentsnow Cheque Fulfilment Hub — global stylesheet.
   Extracted from app/Views/layout/main.php (the layout links this file).
   The cheque-stock background image is referenced relative to THIS file
   (public/assets/css/ → ../cheque-stock/), so it resolves under any base URL. */
:root {
    --ink:       #13293D;   /* deep ink navy        */
    --teal:      #0F8B8D;   /* brand teal           */
    --teal-dark: #0A5C6B;   /* hover / depth        */
    --teal-tint: #E3F2F2;   /* light teal wash      */
    --slate:     #5B6B79;   /* secondary text       */
    --mist:      #F0F4F6;   /* page background      */
    --line:      #D5DEE4;   /* hairline rules       */
    --alert:     #B3402E;   /* warning red          */
    --white:     #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh;
    background: var(--mist); color: var(--ink);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 16px; line-height: 1.55;
}
h1, h2, h3, .logo { font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif; }
a { color: var(--teal-dark); }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--teal); outline-offset: 2px;
}

/* ---------- Signed-out (auth) shell: centred card ---------- */
.wrap { width: 100%; max-width: 460px; margin: 0 auto; padding: 2.4rem 1.2rem 1rem; }
.mast { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.6rem; }
.logo {
    font-weight: 700; letter-spacing: -.02em;
    font-size: 1.5rem; color: var(--ink); text-decoration: none;
}
.logo .pt { color: var(--teal); }
.kicker {
    font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--slate);
}

/* ---------- Signed-in shell: left sidebar ---------- */
.shell { display: flex; min-height: 100vh; }
.snav {
    width: 230px; flex-shrink: 0;
    background: var(--ink); color: var(--white);
    display: flex; flex-direction: column;
    padding: 1.2rem .9rem;
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
.snav .logo { color: var(--white); font-size: 1.3rem; margin-bottom: .1rem; }
.snav .kicker { color: #9fb3c2; margin-bottom: 1.4rem; display: block; }
.snav a.nv {
    display: block; color: #d9e4ea; text-decoration: none;
    font-size: .88rem; font-weight: 600;
    padding: .5rem .7rem; border-radius: 6px; margin-bottom: .15rem;
}
.snav a.nv:hover { background: rgba(15,139,141,.25); color: var(--white); }
.snav a.nv.is-active { background: var(--teal); color: var(--white); }
.snav .navhead {
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: #7e93a3; margin: .9rem .7rem .3rem;
}
.snav .me {
    margin-top: auto; padding: .8rem .7rem 0; border-top: 1px solid rgba(255,255,255,.14);
    font-size: .72rem; color: #9fb3c2;
}
.snav .me b { color: var(--white); display: block; font-size: .8rem; }
.snav .me a { color: #d9e4ea; }
/* Content fills the space beside the nav and grows with the screen. */
.content { flex: 1; min-width: 0; padding: 1.6rem 2rem 2.4rem; }
/* Mobile: the sidebar collapses into a sticky top bar + hamburger
   drawer. Pure CSS (checkbox toggle), same technique as the
   sign-in tabs — opening a link loads a new page, which naturally
   closes the drawer. */
.nav-open, .burger { display: none; }
@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .snav {
        width: 100%; position: sticky; top: 0; z-index: 50;
        max-height: 100vh; overflow-y: auto;
        padding: .6rem 3.4rem .6rem .9rem;
    }
    .snav .logo { margin: 0; font-size: 1.15rem; }
    .snav .kicker { display: none; }
    .burger {
        display: block; position: absolute; top: .35rem; right: .55rem;
        width: 44px; height: 44px; cursor: pointer; border-radius: 8px;
    }
    .burger span {
        position: absolute; left: 11px; width: 22px; height: 2px;
        background: var(--white); border-radius: 2px;
        transition: transform .18s ease, opacity .18s ease;
    }
    .burger span:nth-child(1) { top: 16px; }
    .burger span:nth-child(2) { top: 22px; }
    .burger span:nth-child(3) { top: 28px; }
    .nav-open:checked ~ .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-open:checked ~ .burger span:nth-child(2) { opacity: 0; }
    .nav-open:checked ~ .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .snav a.nv, .snav .navhead, .snav .me { display: none; }
    .nav-open:checked ~ .logo { margin-bottom: .7rem; }
    .nav-open:checked ~ a.nv { display: block; padding: .68rem .7rem; }
    .nav-open:checked ~ .navhead { display: block; }
    .nav-open:checked ~ .me {
        display: block; margin-top: .8rem;
        border-top: 1px solid rgba(255,255,255,.14); padding: .8rem .7rem .4rem;
    }
    .content { padding: 1.2rem 1rem 2rem; }
    /* Wide report tables scroll inside themselves, never the page */
    .tbl { display: block; overflow-x: auto; }
}

/* ---------- Cheque-style card (kept motif, new palette) ---------- */
.draft {
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 12px 28px -24px rgba(19,41,61,.55);
    overflow: hidden; margin-bottom: 1.2rem;
}
.draft__head {
    padding: 1.1rem 1.3rem .9rem; border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, var(--teal-tint), var(--white) 70%);
}
.draft__head h1 { margin: 0; font-size: 1.22rem; letter-spacing: -.01em; }
.draft__head p { margin: .25rem 0 0; font-size: .85rem; color: var(--slate); }
.draft__body { padding: 1.3rem; }

/* MICR foot — the magnetic-ink row from a printed cheque */
.micr {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .78rem; letter-spacing: .16em; color: var(--slate);
    background: var(--mist); border-top: 1px solid var(--line);
    padding: .55rem 1.3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.micr b { color: var(--ink); font-weight: 600; }

/* Tabs (auth screen) */
.tabs { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.tab {
    flex: 1; text-align: center; cursor: pointer;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    padding: .55rem .4rem; border: 1px solid var(--line);
    border-radius: 6px; background: var(--mist); color: var(--slate); user-select: none;
}
input.tabpick { position: absolute; opacity: 0; pointer-events: none; }
#pick-standard:checked ~ .tabs label[for="pick-standard"],
#pick-team:checked ~ .tabs label[for="pick-team"] {
    background: var(--teal); color: var(--white); border-color: var(--teal);
}
.panel { display: none; }
#pick-standard:checked ~ #panel-standard,
#pick-team:checked ~ #panel-team { display: block; }

/* Fields */
.field { margin-bottom: .9rem; }
.field label {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--slate); margin-bottom: .3rem;
}
.field input, .field select, .field textarea {
    width: 100%; padding: .62rem .7rem; font-size: 1rem;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--white); color: var(--ink); font-family: inherit;
}
.btn {
    width: 100%; cursor: pointer; border: 0; border-radius: 6px;
    background: var(--teal); color: var(--white);
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700; letter-spacing: .03em; font-size: .95rem;
    padding: .72rem; margin-top: .3rem;
}
.btn:hover { background: var(--teal-dark); }
.btn--ink { background: var(--ink); }
.btn--ink:hover { background: #0c1c2b; }
.btn--inline { width: auto; padding: .55rem 1.1rem; display: inline-block; }

/* SSO (auth) */
.sso { margin-top: 1.2rem; }
.sso__rule {
    display: flex; align-items: center; gap: .7rem;
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
    margin: .2rem 0 .9rem;
}
.sso__rule::before, .sso__rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sso a {
    display: block; text-align: center; text-decoration: none;
    border: 1px solid var(--line); border-radius: 6px;
    padding: .58rem; margin-bottom: .55rem;
    font-size: .85rem; color: var(--ink); background: var(--white);
}
.sso a:hover { background: var(--teal-tint); }
.aux { margin-top: 1.1rem; font-size: .88rem; }
.aux a { font-weight: 600; }

/* Flash */
.flash {
    border-radius: 6px; padding: .65rem .8rem; margin-bottom: 1rem;
    font-size: .88rem; border: 1px solid;
}
.flash--error { background: #faeae6; border-color: var(--alert); color: #7d241a; }
.flash--ok    { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-dark); }

.newcust {
    margin-top: 1.6rem; position: relative;
    border: 1px dashed var(--line); border-radius: 8px;
    padding: 1rem 1.2rem; background: var(--white);
}
.newcust h2 { margin: 0 0 .2rem; font-size: 1rem; }
.newcust p { margin: 0 0 .6rem; font-size: .85rem; color: var(--slate); }
.stamp {
    position: absolute; top: -.7rem; right: 1rem; transform: rotate(-7deg);
    font-weight: 800; font-size: .62rem; letter-spacing: .18em;
    color: var(--teal-dark); border: 2px solid var(--teal-dark);
    border-radius: 4px; padding: .12rem .4rem; background: var(--white);
}

/* Cards / sections / tables */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; margin: .6rem 0 1.4rem; }
.card {
    display: block; text-decoration: none; color: var(--ink);
    background: var(--white); border: 1px solid var(--line);
    border-radius: 8px; padding: .9rem 1rem;
}
.card:hover { border-color: var(--teal); box-shadow: 0 6px 18px -14px rgba(10,92,107,.6); }
.card h3 { margin: 0 0 .2rem; font-size: .98rem; }
.card p { margin: 0; font-size: .8rem; color: var(--slate); }
.sechead {
    font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--slate); margin: 1.4rem 0 .5rem;
    display: flex; align-items: center; gap: .7rem;
}
.sechead::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Tables fill the column but never spill the page: if a wide row can't
   fit (many columns, action buttons), the table scrolls on its own
   instead of pushing content off-screen. */
.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; display: block; overflow-x: auto; }
.tbl th {
    text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--slate);
    border-bottom: 2px solid var(--line); padding: .45rem .55rem;
}
.tbl td { border-bottom: 1px solid var(--mist); padding: .5rem .55rem; vertical-align: top; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 1rem .2rem; font-size: .88rem; color: var(--slate); font-style: italic; }

/* Canada Post AddressComplete type-ahead (reusable _address_autocomplete). */
.addr-suggest { position:absolute; left:0; right:0; top:100%; z-index:100002; background:#fff;
    border:1px solid var(--mist); border-top:none; border-radius:0 0 6px 6px; max-height:18rem; overflow:auto;
    box-shadow:0 6px 18px rgba(0,0,0,.08); }
.addr-suggest button { display:block; width:100%; text-align:left; border:0; background:#fff; padding:.5rem .7rem;
    cursor:pointer; font-size:.85rem; border-bottom:1px solid var(--mist); }
.addr-suggest button:hover { background:var(--mist); }
.addr-suggest .as-text { font-weight:600; }
.addr-suggest .as-desc { color:var(--ink-soft); font-size:.78rem; }
.addr-warn { background:#fff3cd; color:#8a6d00; border:1px solid #f0d98c; border-radius:6px;
    padding:.6rem .8rem; margin-bottom:1rem; font-size:.82rem; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.badge {
    display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: .14rem .45rem; border-radius: 4px;
    border: 1px solid var(--line); color: var(--slate);
}
.badge--ok  { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-tint); }
.badge--low { border-color: var(--alert); color: var(--alert); background: #faeae6; }

/* On-screen cheque rendering (designer + preview) */
.cheque {
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    padding: 1rem 1.2rem; margin: .8rem 0; position: relative;
}
.cheque__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.cheque__no { font-family: ui-monospace, monospace; }
.cheque__pay { margin: .9rem 0 .4rem; font-size: .85rem; border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.cheque__amt { float: right; border: 1px solid var(--line); padding: .15rem .5rem; font-family: ui-monospace, monospace; }
.cheque .micr { border-top: 1px dashed var(--line); margin: .8rem -1.2rem -1rem; }

/* Visual cheque builder: real cheque-stock art behind the live
   preview. The art file is swappable per stock colour; without it
   the security-paper tint still reads as a cheque. */
.cheque--stock {
    /* Native cheque stock is 8.5in x 3.5in — the preview must keep
       that exact ratio so the art is never cropped or distorted.
       Zone positions mirror the company's laser order proof
       (cheques.chequesnow.ca/laser), measured from its live preview. */
    aspect-ratio: 8.5 / 3.5;
    container-type: inline-size;
    position: relative;
    background-color: #e8ecf3;
    background-image: url('../cheque-stock/cheque-face.jpg');
    background-size: 100% 100%; background-position: center;
    border: 1px solid #2c4a77; border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(19, 41, 61, .12);
    color: #13202e;
}
.cheque--stock .cs-zone { position: absolute; line-height: 1.25; }
.cs-no       { top: 4.5%; right: 3%; font-family: ui-monospace, monospace; font-size: 2.6cqw; letter-spacing: .08em; }
.cs-company  { top: 4.5%; left: 6.4%; width: 37%; text-align: center; font-size: 1.08cqw; padding-top: 2.3cqw; }
.cs-company b{ font-size: 1.3cqw; }
.cs-bank     { top: 4.5%; left: 46%; width: 27%; text-align: left; font-size: .82cqw; padding-top: 2.3cqw; }
/* EDIT/ADD buttons sit ABOVE their text, never on top of it. The bank
   button sits at the zone top (same as the company button) with the
   bank name pushed below it by padding-top; the signature button floats
   just above the sig-area company name in the open marble. */
.cs-bank .zone-btn--onchq { top: -2.2cqw; }
.cs-sig  .zone-btn--onchq { top: -2.2cqw; }
.cs-bank b   { font-size: 1.02cqw; }
.cs-date     { top: 19%; right: 3%; font-size: 1.05cqw; display: flex;
               align-items: flex-start; gap: .8cqw; }
.cs-date .lbl  { font-weight: 700; }
/* Each part is a column: the value sits centred directly over its
   MM/DD/YYYY label, so 06 lands above MM, 13 above DD, 2026 above YYYY. */
.cs-date .dcol { display: inline-flex; flex-direction: column; align-items: center;
                 font-family: ui-monospace, monospace; line-height: 1.1; }
.cs-date .dcol b { font-weight: 400; letter-spacing: .12em; }
/* B2: each column can carry a hint ABOVE (.dtop, French in bilingual) and a
   hint BELOW (.dbot, English / single-language). Empty hints collapse so they
   add no gap. */
.cs-date .dcol i { font-style: normal; color: #4a5a6c; font-size: .9cqw;
                   letter-spacing: .12em; }
.cs-date .dcol i.dbot { margin-top: .15cqw; }
.cs-date .dcol i.dtop { margin-bottom: .15cqw; }
.cs-date .dcol i:empty { display: none; margin: 0; }
.cs-pay      { top: 34%; left: 2.4%; font-size: 1.6cqw; }
.cs-payto    { top: 47%; left: 2.4%; width: 7.5%; font-size: .95cqw; line-height: 1.05; }
.cs-payline  { top: 56.5%; left: 11%; width: 52%; border-bottom: 1px solid #13202e; }
.cs-amt      { top: 33%; right: 3%; font-size: 1.7cqw; font-family: ui-monospace, monospace;
               font-weight: 600; letter-spacing: .02em; }
/* Signature block coordinates from the company's laser proof:
   company name ~55% down, rule 1 at ~66.5%, rule 2 at ~75%,
   typed names sit UNDER each rule (auth-signer position). */
/* Bottom-anchored: a single signature sits on the LOWER line; a
   second signature line appears ABOVE it. */
/* Anchored so the lowest printed name sits just above where the marble
   ends (~21% up from the cheque bottom); the block is kept compact so
   the company line above doesn't ride too high. */
.cs-sig      { bottom: 22%; top: auto; left: 62%; width: 34%; font-size: 1.05cqw; padding-top: 1cqw; }
.cs-sig .sig-co   { text-align: center; font-weight: 700; line-height: 1.15; }
.cs-sig .sig-line { display: flex; align-items: flex-end; gap: .6cqw; margin-top: 2.8cqw; position: relative; }
.cs-sig .sig-line .rule { flex: 1; border-bottom: 1px solid #13202e; min-height: 1.4em;
                          text-align: center; position: relative; }
/* Signature image auto-fills the gap above the line (bottom-aligned,
   sitting on the rule). */
.cs-sig .sig-line .rule img { max-height: 4cqw; max-width: 94%; filter: grayscale(1);
                              position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.cs-sig .sig-line .rule img[hidden] { display: none; }
.cs-sig .sig-name { text-align: center; font-size: .78cqw; margin: .1cqw 0 0 3cqw; min-height: 1.1em; }
.cs-sig .sig-line.hidden, .cs-sig .sig-name.hidden { display: none; }
/* Logo imprint: own positioned zone so it can be scaled and nudged
   (within bounds) without crossing the company text. */
.cs-logo { top: 9%; left: 2.5%; width: 13cqw; z-index: 2;
    transform: translate(calc(var(--logo-x, 0) * 0.1cqw), calc(var(--logo-y, 0) * 0.1cqw))
               scale(calc(var(--logo-scale, 100) / 100)); transform-origin: top left; }
/* Fill-to-fit: the logo always occupies the full 13cqw-wide × 10cqw-tall
   zone and object-fit:contain scales the artwork to the LARGEST size that
   fits without distortion — so at scale 100 the logo is genuinely as big
   as it can be (slider scales DOWN from this max). The box can never balloon
   down past PAY or up over the watermark band because it's fixed at 10cqw tall. */
.cs-logo img { width: 13cqw; height: 10cqw; object-fit: contain; object-position: top left;
    display: block; filter: grayscale(1); }
.cs-logo img[hidden] { display: none; }
/* With a logo present the company block shifts right + left-aligns. */
.cs-company.has-logo { left: 21%; width: 24%; text-align: left; }
.cs-company.has-logo .co-text { text-align: left; }
/* A2: lay the logo crop preview (left) beside the crop/size/move controls
   (right) instead of stacking them, so the controls sit next to the image.
   Wraps to a single column on narrow screens. #crop-logo holds the image +
   "Apply Crop & Clean"; #logo-tools holds the size slider + move arrows. */
.logo-edit { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-top: .5rem; }
.logo-edit #crop-logo { margin-top: 0; flex: 0 1 auto; min-width: 160px; }       /* LEFT: image only */
/* RIGHT: Apply Crop, Logo Size, Move stacked top-to-bottom */
.logo-edit #logo-controls { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: .55rem; }
.logo-edit #logo-controls .crop-actions { margin-top: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.logo-edit #logo-controls #logo-tools { margin-top: 0; }
.logo-edit #logo-controls label { margin-top: 0 !important; }
/* Stack to one column on narrow screens. */
@media (max-width: 560px) { .logo-edit { flex-direction: column; } }
/* The logo field spans the full modal width so the two-column logo editor
   isn't squeezed into a single .grid2 cell (which forced it to wrap). */
.field--full { grid-column: 1 / -1; }
/* Logo size + move controls in the Company popup */
.logo-tools input[type=range] { width: 100%; accent-color: var(--teal); }
.logo-move { display: flex; gap: .3rem; align-items: center; margin-top: .4rem; font-size: .8rem; }
.logo-nudge { border: 1px solid var(--line); background: var(--white); border-radius: 5px;
    cursor: pointer; padding: .2rem .5rem; font-size: .9rem; line-height: 1; }
.logo-nudge:hover { background: var(--teal-tint); border-color: var(--teal); }
.logo-warn { color: var(--alert); font-size: .72rem; margin: .3rem 0 0; }
/* Second company line only takes a row when it has text — empty,
   the address tucks up under company name 1. */
#chq-holder2:empty { display: none !important; }
.cs-company img.co-logo { max-height: 7.5cqw; max-width: 12cqw; filter: grayscale(1); }
.cs-company img.co-logo[hidden] { display: none; }
/* The cheque image is DISPLAY-ONLY — it's never edited inline. Clicking an
   editable zone opens that zone's popup editor (bank-designer.js). A pointer
   cursor + soft hover highlight signal the zone is clickable. */
.cheque--stock .cs-company,
.cheque--stock .cs-bank,
.cheque--stock .cs-sig,
.cheque--stock .cs-micr { cursor: pointer; }
.cheque--stock .cs-company:hover,
.cheque--stock .cs-bank:hover,
.cheque--stock .cs-sig:hover,
.cheque--stock .cs-micr:hover { background: rgba(15, 139, 141, .07); border-radius: 3px; }
/* Designer: full-width cheque with popup editors (zone buttons). */
.cheque--wide { max-width: 1280px; margin-left: auto; margin-right: auto; }
.country-pick { display: flex; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.cp-card {
    display: flex; align-items: center; gap: .55rem; cursor: pointer;
    border: 2px solid var(--line); border-radius: 8px; padding: .55rem 1rem;
    font-weight: 600; font-size: .85rem; background: var(--white);
}
.cp-card input { width: auto; accent-color: var(--teal); }
.cp-card .cp-flag { font-size: 1.4rem; }
.cp-card img.cp-flag { width: 2.1rem; height: auto; border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line); }
.cp-card--active, .cp-card:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.dsteps {
    display: flex; gap: 1.1rem; flex-wrap: wrap; list-style: none;
    padding: 0; margin: .2rem 0 .6rem; font-size: .78rem; color: var(--slate);
}
.dsteps b {
    display: inline-block; width: 1.25rem; height: 1.25rem; line-height: 1.25rem;
    text-align: center; border-radius: 50%; background: var(--ink);
    color: #fff; margin-right: .3rem; font-size: .7rem;
}
.dsteps span { color: var(--ink-soft); font-weight: 400; font-size: .72rem; }
.dsteps li { padding: .25rem .5rem; border-radius: 16px; transition: background .15s; }
.dsteps li.done { color: #1d9e55; }
.dsteps li.done b { background: #1d9e55; }
.dsteps li.done b::after { content: ' ✓'; }
/* The step the client should do next is highlighted. */
.dsteps li.current { background: var(--teal-tint); color: var(--ink); font-weight: 700; }
.dsteps li.current b { background: var(--teal); }
.next-step { font-size: .82rem; color: var(--ink); margin: .2rem 0 .7rem;
    background: var(--mist); border-left: 3px solid var(--teal); padding: .5rem .7rem; border-radius: 0 6px 6px 0; }
/* Setup-progress checklist: clients always know what's left. */
.progresslist { list-style: none; margin: .2rem 0 .8rem; padding: .65rem .9rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--white);
    display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .78rem; }
.progresslist li { display: flex; align-items: center; gap: .35rem; color: var(--slate); }
.progresslist li::before { content: '○'; color: #003070; font-weight: 700; }
.progresslist li.done { color: #1d9e55; }
.progresslist li.done::before { content: '✓'; color: #1d9e55; }
.progresslist li.all-done-msg { display: none; color: #1d9e55; font-weight: 700; }
.progresslist.complete li.all-done-msg { display: flex; }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Signature crop stage: drag a box around the signature on any
   photo/scan; the crop replaces the upload and white drops out. */
.cropstage { margin-top: .5rem; }
.cropstage .crop-wrap { position: relative; display: inline-block; max-width: 100%;
    touch-action: none; cursor: crosshair; background: #f4f6f8; border: 1px solid var(--line); }
/* Keep the crop preview short + wide so a tall logo/signature can't blow up
   the popup and force scrolling. The crop math is resolution-independent, so a
   smaller preview still crops accurately. */
.cropstage img { max-width: 100%; max-height: 150px; width: auto; display: block; margin: 0 auto;
    user-select: none; -webkit-user-drag: none; }
.cropstage .crop-box { position: absolute; border: 2px dashed var(--teal);
    background: rgba(15, 139, 141, .14); pointer-events: none; }
.cropstage .crop-actions { margin-top: .4rem; display: flex; gap: .5rem; align-items: center; }
.cropstage .crop-hint { font-size: .72rem; color: var(--ink-soft); }
.zone-btnrow { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .45rem; }
.zone-btn {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
    border: 0; border-radius: 4px; padding: .22rem .6rem;
    background: var(--teal); color: #fff; font-size: .62rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(19, 41, 61, .25);
}
.zone-btn b {
    background: #fff; color: var(--teal); border-radius: 50%;
    width: 1rem; height: 1rem; line-height: 1rem; text-align: center; font-size: .62rem;
}
/* On-cheque step buttons: RED + "ADD" until the step's data is in,
   then GREEN + "EDIT" once it's complete. */
.zone-btn--add { background: var(--alert); }
.zone-btn--add b { color: var(--alert); }
.zone-btn--add::before { content: 'ADD · '; }
.zone-btn--edit { background: #1d9e55; }
.zone-btn--edit b { color: #1d9e55; }
.zone-btn--edit::before { content: 'EDIT · '; }
/* The "Start Here" entry button carries its own label, so it skips the
   ADD/EDIT word prefix — it still turns red→green like the others. */
.zone-btn--start.zone-btn--add::before,
.zone-btn--start.zone-btn--edit::before { content: ''; }
.zone-btn--onchq { position: absolute; top: 0; left: 0; z-index: 3; }
.cs-micr .zone-btn--onchq { top: -2.6cqw; }
.zone-btn:hover { filter: brightness(1.08); }
/* "Check Preview" opens the standalone cheque-face render (banks/preview/{id})
   in a new tab. BLUE so it reads as a distinct, safe action beside the (red →
   green) optional buttons — not a warning, not a completion. */
.zone-btn--preview { background: #1565c0; text-decoration: none; }
.zone-btn--preview:hover { background: #0d4d99; }

/* ---- F7: optional controls RED when empty -> GREEN ✓ when in use ----
   Applies to the two optional buttons (Custom Stub, Signing Officers) and to
   the logo / signature / second-signature upload .field blocks. Colour is
   never the only cue — a ✓ (or ✕) glyph carries the state for accessibility. */
.zone-btn.opt-off { background: var(--alert); }
.zone-btn.opt-on  { background: #1d9e55; }
.zone-btn.opt-off::after { content: ' ✕'; font-weight: 700; }
.zone-btn.opt-on::after  { content: ' ✓'; font-weight: 700; }
/* Upload fields inside the popups: a left rule + a trailing badge on the label. */
.field.opt-off, .field.opt-on { border-left: 3px solid; padding-left: .6rem; border-radius: 0 4px 4px 0; }
.field.opt-off { border-left-color: var(--alert); }
.field.opt-on  { border-left-color: #1d9e55; }
.field.opt-off > label::after { content: ' — not set ✕'; color: var(--alert); font-weight: 700; font-size: .72rem; }
.field.opt-on  > label::after { content: ' — added ✓'; color: #1d9e55; font-weight: 700; font-size: .72rem; }

/* A4: an optional SECTION button (Custom Cheque Stub, Signing Officer Approvals)
   turns GREEN with a leading ✓ once its modal is filled in and Done is clicked.
   Wins over the red opt-off state. The ✓ is prepended (::before) so it reads
   "✓ Optional · …"; opt-on already appends a trailing ✓, suppressed here to
   avoid a double tick. */
.zone-btn.opt-btn--done { background: #1d9e55 !important; color: #fff; }
.zone-btn.opt-btn--done::before { content: '✓ '; font-weight: 700; }
.zone-btn.opt-btn--done::after { content: '' !important; }

/* ---- F8: Cheque Language selector, left of the optional buttons ---- */
.chq-lang { display: flex; align-items: center; gap: .4rem; margin-right: .3rem; }
.chq-lang label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-soft); margin: 0; }
.chq-lang select { padding: .2rem .5rem; font-size: .78rem; border: 1px solid var(--line);
    border-radius: 5px; background: var(--white); color: var(--ink); }
/* On-cheque signature ROLE title (TREASURER / PRESIDENT), under each name. */
.cs-sig .sig-title { text-align: center; font-size: .68cqw; letter-spacing: .06em;
    color: #13202e; margin: 0 0 0 3cqw; text-transform: uppercase; }
.cs-sig .sig-title[hidden] { display: none; }
.cs-sig .sig-per { white-space: nowrap; line-height: 1.05; }
/* Bilingual PAYEZ/PAY stacks tighter so it still fits the PAY zone. */
.cs-pay { line-height: 1.02; }
/* Popup editors */
.dmodal {
    position: fixed; inset: 0; background: rgba(19, 41, 61, .5);
    display: none; align-items: flex-start; justify-content: center;
    padding: 5vh 1rem; overflow: auto; z-index: 80;
}
.dmodal.open { display: flex; }
.dmodal__box {
    background: var(--white); border-radius: 10px; width: 100%; max-width: 700px;
    padding: 1.1rem 1.4rem 1.3rem; box-shadow: 0 12px 40px rgba(19, 41, 61, .35);
}
.dmodal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.dmodal__head h3 { margin: 0; font-size: 1rem; color: var(--ink); }
.dmodal__close {
    border: 0; background: none; font-size: 1.5rem; line-height: 1;
    cursor: pointer; color: var(--slate); padding: 0 .2rem;
}
.dmodal__done { margin-top: .8rem; }
/* Cheque-designer step popups dock DIRECTLY UNDER the cheque (pinned at the top)
   and dim lightly, so the editor for EVERY step sits right beneath the cheque
   image — not floating at the bottom of the screen with a big gap. The popup top
   comes from the cheque's measured bottom (--pn-cheque-bottom, set by
   bank-designer.js whenever a popup is open), falling back to ~40vh. Kept WIDE +
   short (2-column content) and capped in height so a step rarely needs scrolling. */
#m-company, #m-micr, #m-sigs, #m-options, #m-officers {
    align-items: flex-start;
    padding: calc(var(--pn-cheque-bottom, 40vh) + 14px) 1rem 2vh;
    background: rgba(19, 41, 61, .18);
}
#m-company > .dmodal__box, #m-micr > .dmodal__box, #m-sigs > .dmodal__box,
#m-options > .dmodal__box, #m-officers > .dmodal__box {
    max-width: 900px; max-height: 56vh; overflow: auto;
}
/* While a step popup is open, PIN the cheque fixed at the top of the screen
   (above the dim) and keep it compact, so the whole cheque stays visible with
   the editor docked right beneath it. Restored when it closes. */
body.pn-cheque-modal .cheque--wide {
    position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
    width: min(900px, 92vw); max-height: 38vh; margin: 0; z-index: 82;
    box-shadow: 0 12px 30px rgba(19, 41, 61, .4);
}
.verify-banner { background: #fff7e6; border: 1px solid #e8c879; border-radius: 8px;
    padding: .7rem .9rem; margin: .2rem 0 .8rem; font-size: .85rem; }
.modal-warn { color: var(--alert); font-size: .8rem; font-weight: 600; margin: .6rem 0 0;
    background: #faeae6; border: 1px solid var(--alert); border-radius: 6px; padding: .5rem .7rem; }
.so-toggle { display: flex; align-items: center; gap: .5rem; font-size: .98rem; cursor: pointer; }
.so-toggle input { width: auto; }
.so-body h4 { font-size: .92rem; }
.officer-row { border-top: 1px solid #e3e9f0; padding-top: .7rem; margin-top: .7rem; }
.officer-row:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.officer-del { margin-top: .25rem; }
/* Custom cheque-stub preview (our own design — not the source's). */
.stub-preview__h { font-weight: 700; font-size: .82rem; margin: .9rem 0 .3rem; color: var(--ink); }
.stub-preview { border: 1px solid #cdd8e4; border-radius: 8px; padding: .6rem .7rem; background: #f5f8fc; }
.stub-tbl { width: 100%; border-collapse: collapse; font-size: .72rem; }
.stub-tbl th, .stub-tbl td { border: 1px solid #c3d0de; padding: .3rem .45rem; text-align: left; }
.stub-tbl th { background: #e7eef6; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.stub-tbl th:last-child, .stub-tbl td.num { text-align: right; }
.stub-msg { margin-top: .55rem; text-align: center; }
.stub-msg__label { display: block; color: var(--teal); font-weight: 700; font-size: .82rem; margin-bottom: .25rem; }
.stub-msg__box { border: 1px dashed var(--teal); border-radius: 6px; padding: .5rem .7rem;
    min-height: 1.4rem; font-size: .9rem; color: var(--ink); background: #fff; word-break: break-word; }
/* Top-banner preview — only shown for the "Cheque with banner ad" type. Renders
   above the stub columns as a full-width banner the way it prints on the cheque. */
.stub-banner-pv { margin: 0 0 .6rem; }
.stub-banner-pv__box { border: 1px dashed var(--teal); border-radius: 6px; padding: .55rem .7rem;
    text-align: center; font-weight: 700; font-size: .92rem; letter-spacing: .02em;
    color: var(--teal-dark, #0c6c6e); background: var(--teal-tint, #e8f6f6); word-break: break-word; }
.field-bad input, .field-bad select, input.field-bad { border-color: var(--alert) !important;
    background: #fdf2ef; }
#bank-addr-fields[disabled] { opacity: .45; }
/* Bottom action panels (required + activate) */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; max-width: 1280px; margin-left: auto; margin-right: auto; }
.dpanel { border-radius: 10px; padding: 1rem 1.2rem; }
.dpanel--save { background: #e9f6ee; border: 1px solid #bfe3cc; }
.dpanel--act  { background: #e8f1fa; border: 1px solid #bdd7ef; }
.dpanel .zone-btn { background: var(--ink); }
.dpanel .zone-btn.zone-btn--add { background: #003070; }
.dpanel h4 { margin: .1rem 0 .4rem; }
.verify-ok { font-size: .85rem; }
.sig-howto { background: var(--teal-tint); border-radius: 8px; padding: .6rem .85rem;
    margin: 0 0 .8rem; font-size: .78rem; }
.sig-howto__h { font-weight: 700; margin: 0 0 .3rem; color: var(--ink); }
.sig-howto ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.sig-howto li { margin: .12rem 0; }
.sig-howto__do { margin: .25rem 0; }
.sig-howto__do .ok { color: #1d9e55; font-weight: 700; }
.sig-howto__do .no { color: var(--alert); font-weight: 700; }
.sig-howto__note { color: var(--ink-soft); margin: .3rem 0 0; }
/* "Two ways to add a bank account" helper on the Bank Accounts page. */
.help-paths { background: var(--teal-tint); border-radius: 8px; padding: .7rem .9rem;
    margin: 0 0 1rem; font-size: .82rem; }
.help-paths__h { font-weight: 700; margin: 0 0 .3rem; color: var(--ink); }
.help-paths ol { margin: 0; padding-left: 1.2rem; }
.help-paths li { margin: .25rem 0; line-height: 1.4; }
/* Bank-card: masked account number + eye reveal, QBO-sync marker. */
.acct { display: inline-flex; align-items: center; gap: .3rem; }
.acct-val { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.acct-eye { border: 0; background: none; cursor: pointer; padding: 0 .1rem;
    font-size: .92rem; line-height: 1; opacity: .6; }
.acct-eye:hover { opacity: 1; }
.qbo-synced { font-size: .82rem; color: var(--teal); cursor: help; }
.imprint-note { color: var(--slate); font-weight: 400; font-size: .82em; }
/* "Where to find these numbers" cheque sample for the banking step. */
.micr-howto { background: var(--teal-tint); border-radius: 8px; padding: .7rem .85rem;
    margin: .2rem 0 .9rem; font-size: .78rem; }
.micr-howto__h { font-weight: 700; margin: 0; color: var(--ink); }
.micr-howto__sub { color: var(--ink-soft); margin: .15rem 0 .5rem; }
.micr-howto__img { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.micr-howto__hl { fill: var(--teal); font-weight: 700; }
.micr-howto__note { color: var(--ink-soft); margin: .5rem 0 0; }
/* QuickBooks add-to / warning in the banking modal. */
.qbo-note { font-size: .8rem; color: var(--ink-soft); margin: .2rem 0; }
/* Dropdown + checkbox on the left, warning beside it on the right;
   collapses to one column when the modal is narrow. */
.qbo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .6rem 1rem; align-items: start; margin-top: .2rem; }
/* Higher specificity so it beats `.field label` (which uppercases). */
.field label.qbo-create { display: flex; gap: .4rem; align-items: flex-start; margin: .5rem 0 0;
    font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .8rem;
    line-height: 1.3; color: var(--ink); }
.qbo-create input { width: auto; margin-top: .15rem; flex: 0 0 auto; }
.qbo-warn { display: flex; gap: .35rem; margin: 0; padding: .45rem .6rem;
    background: #fff5ec; border: 1px solid var(--alert); border-radius: 6px;
    color: #8a3a26; font-size: .76rem; line-height: 1.35; }
/* Wizard step navigation — chevron buttons that replace per-step "Done".
   Forward (teal) points to the next step; back (grey) to the previous. */
.flow-nav { display: flex; justify-content: space-between; align-items: center;
    gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.flow-step { font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--slate); }
.flow-btn { border: 0; cursor: pointer; font-family: inherit; font-weight: 700;
    font-size: .82rem; line-height: 1; padding: .62rem 1.1rem; color: #fff; }
.flow-btn--next { background: var(--teal); padding-right: 1.8rem;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.flow-btn--next:hover { filter: brightness(1.08); }
.flow-btn--back { background: var(--mist); color: var(--ink); padding-left: 1.8rem;
    clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
.flow-btn--back:hover { background: #dde6ee; }
.flow-flash { animation: flowflash 1.8s ease-out 1; }
@keyframes flowflash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 138, 138, 0); }
    18%      { box-shadow: 0 0 0 4px rgba(20, 138, 138, .4); } }
/* Inline button spinner: shown by app.js on [data-busy] buttons during a
   long POST (e.g. a QuickBooks import) so users know it's working. */
.pn-spin { display: inline-block; width: .85em; height: .85em; margin-right: .5em;
    vertical-align: -.12em; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: pn-spin .6s linear infinite; }
button[aria-busy="true"] { opacity: .85; cursor: progress; }
@keyframes pn-spin { to { transform: rotate(360deg); } }
.zone-btnrow--below { max-width: 1280px; margin: 1rem auto .3rem; justify-content: center; gap: 1rem; }
.zone-btnrow--below .zone-btn { flex: 1 1 240px; max-width: 430px; justify-content: center;
    background: var(--alert); font-size: .82rem; padding: .65rem 1rem; border-radius: 6px; }
.zone-btnrow--below .zone-btn:hover { background: #9c3829; }
.save-row { max-width: 1280px; margin: 1rem auto 0; display: flex; align-items: center;
    gap: .8rem; flex-wrap: wrap; }
.save-row span { font-size: .76rem; color: var(--ink-soft); }
.save-row .btn--go { background: #1d9e55; font-size: 1rem; padding: .6rem 1.4rem; }
.save-row .btn--go:hover { background: #178a49; }
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } }
.cs-memo     { bottom: 22%; left: 2.4%; font-size: .95cqw; }
.cs-micr     { bottom: 4%; left: 14%; font-family: ui-monospace, monospace; font-size: 2.45cqw; letter-spacing: .1em; }
.cheque--stock:hover .chip { opacity: 1; }
.cheque--stock .chip {
    position: absolute; top: -1.6cqw; left: 0; font-size: .55rem;
    background: var(--teal); color: #fff; border-radius: 3px;
    padding: .05rem .35rem; letter-spacing: .05em; font-weight: 700;
    opacity: 0; transition: opacity .15s; font-style: normal;
}
.chq-auto { outline: 2px solid var(--teal); transition: outline .2s; }

footer.authfoot {
    max-width: 460px; margin: 1.6rem auto 0; padding: 1rem 1.2rem 2rem;
    font-size: .72rem; color: var(--slate); border-top: 1px solid var(--line);
}
.content > footer.portalfoot {
    margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .72rem; color: var(--slate);
}
footer a { color: var(--slate); }
footer .links { margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Cheque-designer draft: resume banner + autosave status ---- */
.resume-banner {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    justify-content: space-between;
    background: #eaf4ff; border: 1px solid #b6d8ff; border-radius: 8px;
    padding: .65rem .9rem; margin: 0 0 .75rem; font-size: .92rem; color: #1d3a5a;
}
.resume-banner form { margin: 0; }
.autosave-status {
    min-height: 1.1em; margin: 0 0 .5rem; font-size: .82rem; color: var(--ink-soft);
    transition: color .2s ease;
}
.autosave-status--pending { color: var(--ink-soft); }
.autosave-status--ok { color: #1d9e55; }
.autosave-status--bad { color: var(--alert); font-weight: 600; }
.btn--ghost {
    background: transparent; border: 1px solid currentColor; color: #1d3a5a;
}
.btn--ghost:hover { background: rgba(0,0,0,.05); }
.btn--sm { padding: .3rem .7rem; font-size: .85rem; }

/* ---- Button loading spinner (verify / activate round-trips) ---- */
.btn-spin {
    display: inline-block; width: .9em; height: .9em; vertical-align: -.12em;
    margin-right: .45em; border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff; border-radius: 50%;
    animation: pn-spin .6s linear infinite;
}
@keyframes pn-spin { to { transform: rotate(360deg); } }
.btn.is-loading { cursor: progress; opacity: .92; }

/* ---- Duplicate bank-account warning (designer autosave) ---- */
.dup-warn {
    background: #fdecec; border: 1px solid #e7a3a3; border-radius: 8px;
    padding: .6rem .85rem; margin: 0 0 .75rem; font-size: .9rem; color: #8a1f1f;
}
.dup-warn a { color: #8a1f1f; font-weight: 700; text-decoration: underline; }

/* Inline duplicate warning sitting directly under the Account # field. */
.dup-warn--inline { margin: .45rem 0 0; padding: .5rem .7rem; font-size: .85rem; }