/* ==========================================================================
   PGW Group Autos - shared design layer
   ==========================================================================
   Single source of truth for colour, spacing, type, shape, and every
   component used on BOTH the public site and the dealer admin.

   site.css and admin.css sit on top and contain layout only. If a rule would
   be useful in both places it belongs here, not in either of them.

   Light and clean, to sit alongside the main PGW Group website, with the
   brand orange as the accent and dark bands reserved for the header, the
   footer and the hero - the places the logo lives.

   Scoped to .pgw-ui, which both <body> elements carry, so nothing leaks into
   the host site when this module is embedded into an existing page. Each body
   also carries a surface class (.pgw or .admin) that nothing here styles;
   they exist so the host site can target one surface without the other.
   ========================================================================== */

:root {
    /* -- Brand ------------------------------------------------------------ */
    --accent: #f7941d;              /* sampled from the PGW logo */
    --accent-light: #ffb04a;
    --accent-deep: #d2740b;
    --accent-ink: #a2590a;          /* orange dark enough to read on white */
    --accent-wash: #fff6ea;         /* tinted background */
    --accent-line: #ffd9a8;
    --gradient: linear-gradient(135deg, #ffb04a 0%, #f7941d 45%, #d2740b 100%);
    --on-accent: #241300;           /* text that sits on orange */

    /* -- Surfaces --------------------------------------------------------- */
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef1f4;
    --line: #e3e7ec;
    --line-strong: #cfd5dd;

    /* Dark bands: header, footer, hero. The logo is built for these. */
    --ink: #0e1013;
    /* The utility strip sits directly above the header, so it needs its own
       tone or the two read as one slab. Graphite, warmed very slightly
       towards the brand orange, and lighter than the header beneath it. */
    --util-bg: #23262d;
    --ink-2: #191c21;
    --ink-3: #262a31;
    --ink-line: #2f343c;
    --on-ink: #f2f4f7;
    --on-ink-muted: #a6adb9;

    /* -- Text ------------------------------------------------------------- */
    --text: #14171c;
    --text-2: #4d5665;
    --text-3: #78828f;

    /* -- Status ----------------------------------------------------------- */
    --green: #1a9c53;
    --green-wash: #e8f7ee;
    --blue: #2b74d0;
    --blue-wash: #e9f1fc;
    --red: #cf3f30;
    --red-wash: #fdecea;
    --whatsapp: #25d366;        /* the icon green, used for marks and accents */
    --whatsapp-btn: #12784a;    /* button green: white text clears AA at 5.51:1 */
    --whatsapp-btn-hover: #0d6b3f;
    --whatsapp-deep: #128c7e;

    /* -- Spacing scale ---------------------------------------------------- */
    /* Every margin, padding and gap in the product comes from this scale.   */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --s9: 96px;

    /* -- Shape ------------------------------------------------------------ */
    /* Squared-off corners across the product. Every rectangular surface -
       panels, cards, buttons, inputs, alerts, badges, pagination - reads
       these, so the whole look changes from here.
       --r-pill stays: switches, status pills and the floating WhatsApp
       button are meant to be capsule-shaped, not rectangles with corners. */
    --r-sm: 0;
    --r: 0;
    --r-lg: 0;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-2: 0 4px 14px rgba(16, 24, 40, .08);
    --shadow-3: 0 16px 40px rgba(16, 24, 40, .14);

    --ease: cubic-bezier(.4, 0, .2, 1);

    /* -- Layout ----------------------------------------------------------- */
    --wrap: 1240px;
    --sidebar: 250px;
    --head-h: 76px;

    /* -- Type ------------------------------------------------------------- */
    --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* --------------------------------------------------------------- Reset */

.pgw-ui, .pgw-ui *, .pgw-ui *::before, .pgw-ui *::after { box-sizing: border-box; }

body.pgw-ui {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.pgw-ui img { max-width: 100%; display: block; }
/* Keep this at (0,1,1). Adding :not(.btn) pushes it to (0,2,1), which then
   outranks every scoped link colour - .sidebar nav a, .site-foot a and the
   rest - and turns the whole navigation orange. Components that need a
   different link colour must out-specify this, not the other way round. */
.pgw-ui a { color: var(--accent-ink); text-decoration: none; }
.pgw-ui a:hover { color: var(--accent-deep); }
.pgw-ui svg { width: 18px; height: 18px; flex: none; }
.pgw-ui h1, .pgw-ui h2, .pgw-ui h3, .pgw-ui h4 { line-height: 1.25; }

.pgw-ui :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* .pgw-ui prefix required: .sr-only alone is (0,1,0) and loses to
   .pgw-ui textarea (0,1,1), so a visually-hidden textarea would still be
   sized 100% wide and push a horizontal scrollbar onto the page. */
.pgw-ui .sr-only {
    position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- Buttons */

.pgw-ui .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    padding: 11px var(--s5); border: 1px solid transparent; border-radius: var(--r);
    font: inherit; font-size: 14.5px; font-weight: 650; letter-spacing: .01em;
    text-align: center; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: transform .12s var(--ease), background .16s var(--ease),
                border-color .16s var(--ease), color .16s var(--ease), box-shadow .18s var(--ease);
}
.pgw-ui .btn:hover { text-decoration: none; }
.pgw-ui .btn:active { transform: translateY(1px); }
.pgw-ui .btn svg { width: 18px; height: 18px; }

.pgw-ui .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-1); }
.pgw-ui .btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); box-shadow: var(--shadow-2); }

.pgw-ui .btn-whatsapp { background: var(--whatsapp-btn); color: #fff; box-shadow: var(--shadow-1); }
.pgw-ui .btn-whatsapp:hover { background: var(--whatsapp-btn-hover); color: #fff; box-shadow: var(--shadow-2); }

.pgw-ui .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.pgw-ui .btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }

.pgw-ui .btn-dark { background: var(--ink-2); color: var(--on-ink); }
.pgw-ui .btn-dark:hover { background: var(--ink); color: #fff; }

.pgw-ui .btn-danger { background: var(--red-wash); color: #a52d20; border-color: #f3c3bd; }
.pgw-ui .btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.pgw-ui .btn-lg { padding: 15px var(--s6); font-size: 15.5px; border-radius: var(--r-lg); }
.pgw-ui .btn-sm { padding: 7px var(--s3); font-size: 13px; gap: 6px; border-radius: var(--r-sm); }
.pgw-ui .btn-sm svg { width: 16px; height: 16px; }
.pgw-ui .btn-icon { padding: 8px; }
.pgw-ui .btn-block { width: 100%; }
.pgw-ui .btn[disabled], .pgw-ui .btn.is-busy { opacity: .55; pointer-events: none; }

/* On a dark band the ghost button has to invert. */
.on-dark .btn-ghost { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, .28); }
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   Form fields
   Two shapes, one language:
     .field   - a plain label-above field, for filter bars and dense grids
     .f       - a floating-label field, for the forms people actually fill in
   ========================================================================== */

/* NOTE ON SPECIFICITY
   This selector scores (0,2,1). Any component that later restyles one of
   these controls - padding, width, background-position - must be written as
   .pgw-ui .thing input, not .thing input, or it silently loses the cascade.
   Checkbox and radio are deliberately excluded below, so .switch input and
   .segmented input need no prefix. */
.pgw-ui input[type=text], .pgw-ui input[type=search], .pgw-ui input[type=number],
.pgw-ui input[type=email], .pgw-ui input[type=tel], .pgw-ui input[type=password],
.pgw-ui input[type=url], .pgw-ui select, .pgw-ui textarea {
    width: 100%; padding: 11px var(--s3);
    font: inherit; font-size: 14.5px; color: var(--text);
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r); appearance: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.pgw-ui select {
    padding-right: var(--s6); cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2378828f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--s3) center;
}
.pgw-ui input:hover:not(:disabled), .pgw-ui select:hover:not(:disabled), .pgw-ui textarea:hover {
    border-color: var(--line-strong);
}
.pgw-ui input:focus, .pgw-ui select:focus, .pgw-ui textarea:focus {
    outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 148, 29, .16);
}
.pgw-ui input:disabled, .pgw-ui select:disabled, .pgw-ui textarea:disabled {
    background: var(--surface-3); color: var(--text-3); cursor: not-allowed;
}
.pgw-ui textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.pgw-ui ::placeholder { color: var(--text-3); }

/* -- Plain field ------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label:not(.checkbox):not(.switch) {
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-2);
}
/* A control that carries its own label sits flush with the caption above it. */
.field > .checkbox, .field > .switch { margin-top: var(--s1); }
.field .hint { font-size: 12.5px; color: var(--text-3); }
.field .err  { font-size: 12.5px; color: var(--red); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus {
    box-shadow: 0 0 0 4px rgba(207, 63, 48, .14);
}

/* -- Floating-label field ---------------------------------------------- */

.f { position: relative; display: flex; flex-direction: column; min-width: 0; }

.pgw-ui .f > input, .pgw-ui .f > select, .pgw-ui .f > textarea {
    padding: 22px var(--s3) 8px;
}
.pgw-ui .f > textarea { padding-top: 26px; min-height: 140px; }

/*
 * A textarea scrolls its top padding along with its text, so the moment the
 * reader scrolls a long message the first lines slide up into that padding -
 * which is exactly where the floating label sits - and the two overprint.
 *
 * This is an opaque strip between them: anchored to the top of the field,
 * full width, covering precisely the 26px of padding the text can reach.
 * It lives on the wrapper rather than as a background on the label because
 * the label is scaled by a transform, and a background would scale with it
 * and leave the right-hand side of the line showing through.
 */
.pgw-ui .f:has(> textarea)::before {
    content: '';
    position: absolute; left: 1px; right: 1px; top: 1px; height: 26px;
    background: var(--surface);
    pointer-events: none;
    z-index: 1;
}
.pgw-ui .f:has(> textarea) > label { z-index: 2; }

.f > label {
    position: absolute; left: 13px; top: 14px;
    font-size: 14.5px; color: var(--text-3); pointer-events: none;
    transform-origin: left top;
    transition: transform .14s var(--ease), color .14s var(--ease);
}
/* Float when focused, when filled, or when the control can never be empty. */
.f > input:focus + label,
.f > textarea:focus + label,
.f > select:focus + label,
.f > input:not(:placeholder-shown) + label,
.f > textarea:not(:placeholder-shown) + label,
.f.is-filled > label,
.f > select + label {
    transform: translateY(-9px) scale(.78);
    color: var(--text-2); font-weight: 600; letter-spacing: .03em;
}
.f > input:focus + label, .f > textarea:focus + label, .f > select:focus + label { color: var(--accent-ink); }

.f .hint, .f .err { margin-top: 6px; font-size: 12.5px; }
.f .hint { color: var(--text-3); }
.f .err  { color: var(--red); font-weight: 600; }
.f.has-error > input, .f.has-error > select, .f.has-error > textarea { border-color: var(--red); }

/* Prefix (currency, units) and suffix (counters) */
.pgw-ui .f.has-prefix > input { padding-left: 38px; }
.f.has-prefix > label { left: 38px; }
.f .prefix {
    position: absolute; left: 13px; top: 22px;
    font-size: 14.5px; font-weight: 650; color: var(--text-3); pointer-events: none;
}
.f .suffix {
    position: absolute; right: 13px; top: 22px;
    font-size: 12.5px; color: var(--text-3); pointer-events: none;
}
.pgw-ui .f.has-suffix > input { padding-right: 56px; }

/* Live character counter under a textarea */
.counter { margin-top: 6px; font-size: 12px; color: var(--text-3); text-align: right; }
.counter.is-near { color: var(--accent-ink); }
.counter.is-over { color: var(--red); font-weight: 700; }

/* Valid / invalid marks that only appear once the user has engaged */
.f.is-valid > input, .f.is-valid > select { border-color: #9ad3b3; }
.f .mark { position: absolute; right: 13px; top: 20px; opacity: 0; transition: opacity .15s var(--ease); }
.f.is-valid .mark { opacity: 1; color: var(--green); }

/* -- Toggle switch ------------------------------------------------------ */

.switch { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    position: relative; flex: none; width: 44px; height: 25px; margin-top: 1px;
    background: var(--line-strong); border-radius: var(--r-pill);
    transition: background .18s var(--ease);
}
.switch .track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 19px; height: 19px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-1);
    transition: transform .18s var(--ease);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(19px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch .switch-text { font-size: 14px; font-weight: 600; }
.switch .switch-text small { display: block; font-weight: 400; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* Kept for plain checkbox lists */
.checkbox { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; font-size: 14px; }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.checkbox span small { display: block; color: var(--text-3); font-size: 12.5px; }

/* -- Segmented control -------------------------------------------------- */

.segmented { display: inline-flex; background: var(--surface-3); border-radius: var(--r); padding: 3px; gap: 2px; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px var(--s4); border-radius: var(--r-sm); cursor: pointer;
    font-size: 13.5px; font-weight: 650; color: var(--text-2); white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.segmented label:hover { color: var(--text); }
.segmented input:checked + label { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented .dot { width: 8px; height: 8px; border-radius: 50%; }
.segmented .dot.available { background: var(--green); }
.segmented .dot.reserved  { background: var(--blue); }
.segmented .dot.sold      { background: var(--red); }

/* -- Tag / chip input --------------------------------------------------- */

.taginput {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    padding: var(--s2); min-height: 52px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
    cursor: text; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.taginput.is-focused { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 148, 29, .16); }
.taginput input {
    flex: 1 1 140px; min-width: 120px; border: 0 !important; padding: 6px !important;
    background: none !important; box-shadow: none !important; font-size: 14px;
}
.taginput input:focus { outline: 0; }
.taginput .tagpill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 6px 5px var(--s3); border-radius: var(--r-pill);
    background: var(--accent-wash); border: 1px solid var(--accent-line);
    font-size: 13px; font-weight: 600; color: var(--accent-ink);
}
.taginput .tagpill button {
    background: none; border: 0; cursor: pointer; color: var(--accent-ink);
    font-size: 15px; line-height: 1; padding: 0 3px; opacity: .65;
}
.taginput .tagpill button:hover { opacity: 1; }

/* -- Range slider ------------------------------------------------------- */

.range-row { display: flex; align-items: center; gap: var(--s3); }
.pgw-ui input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; padding: 0; border: 0;
    background: var(--surface-3); border-radius: var(--r-pill); cursor: pointer;
}
.pgw-ui input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-2); cursor: grab;
}
.pgw-ui input[type=range]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-2); cursor: grab;
}

/* -- Completeness meter -------------------------------------------------- */

.meter { display: flex; align-items: center; gap: var(--s3); }
.meter .bar { flex: 1; height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 0; background: var(--gradient); transition: width .4s var(--ease); }
.meter .val { font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.meter.is-full .bar i { background: var(--green); }

/* -- Form layout grids --------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.grid-2 > .full, .grid-3 > .full, .grid-4 > .full { grid-column: 1 / -1; }

/* --------------------------------------------------------------- Panels */

.panel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--s5); }

.panel-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
    padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.panel-head h2 {
    margin: 0; font-size: 15px; font-weight: 750;
    letter-spacing: .02em; color: var(--text);
}
.panel-head .sub { margin: 0; font-size: 13px; color: var(--text-3); width: 100%; }
.panel-body { padding: var(--s5); }
/* Default styling for a plain paragraph in a panel. Scoped to :not([class])
   on purpose: without it this rule (0,1,1) beats every component class
   (0,1,0), so .buy-note, .prose, .colour-status and friends silently lost
   their own margins to this one. */
.panel-body > p:not([class]) { color: var(--text-2); margin: 0 0 var(--s3); }
.panel-body > p:not([class]):last-child { margin-bottom: 0; }
.panel-toolbar { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.panel-foot { padding: var(--s5); border-top: 1px solid var(--line); background: var(--surface-2); }

/* Stack of form sections inside one panel body */
.form-stack { display: grid; gap: var(--s5); }
.form-section > h3 {
    margin: 0 0 var(--s4); font-size: 13px; font-weight: 750;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
    display: flex; align-items: center; gap: var(--s2);
}
.form-section > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* --------------------------------------------------------------- Alerts */

.alert {
    display: flex; align-items: flex-start; gap: var(--s3);
    border-radius: var(--r); padding: var(--s3) var(--s4); font-size: 14px;
    border: 1px solid transparent;
}
.alert.is-block { display: block; }
.alert svg { margin-top: 2px; }
.alert-success { background: var(--green-wash); border-color: #b7e4ca; color: #106b39; }
.alert-error   { background: var(--red-wash);   border-color: #f3c3bd; color: #93291d; }
.alert-info    { background: var(--accent-wash); border-color: var(--accent-line); color: #8a4c07; }
.alert-stack { display: grid; gap: var(--s3); }

/* ------------------------------------------------- Pills, tags and chips */

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px var(--s3); border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pill-available { background: var(--green-wash); color: #10743c; }
.pill-reserved  { background: var(--blue-wash);  color: #1b5aa8; }
.pill-sold      { background: var(--red-wash);   color: #a52d20; }
.pill-muted     { background: var(--surface-3);  color: var(--text-2); }

/* Health states. Reserved for the go-live checks and never reused as a
   decorative colour: green here always means "nothing to do". Each one is
   shown beside an icon and a word, so the colour is never the only signal. */
.pill-good      { background: var(--green-wash); color: #10743c; }
.pill-warn      { background: var(--accent-wash); color: var(--accent-ink); }
.pill-serious   { background: var(--red-wash);   color: #a52d20; }

.tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 5px var(--s3);
    font-size: 12.5px; font-weight: 550; color: var(--text-2);
}
.tag svg { width: 14px; height: 14px; color: var(--accent-deep); }

.chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-pill); padding: 5px var(--s2) 5px var(--s3);
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.chip button {
    background: none; border: 0; color: var(--text-3); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 3px;
}
.chip button:hover { color: var(--red); }

/* ----------------------------------------------------------- Pagination */

.pager {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px; padding: var(--s5) 0;
}
.pager a, .pager span {
    min-width: 40px; height: 40px; padding: 0 var(--s3);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--text-2); font-size: 14px; font-weight: 650;
}
.pager a:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.pager .is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* --------------------------------------------------------- Empty states */

.empty {
    text-align: center; padding: var(--s8) var(--s5);
    background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.panel .empty { background: none; border: 0; border-radius: 0; }
.empty > svg { width: 48px; height: 48px; color: var(--text-3); margin: 0 auto var(--s4); }
.empty h3 { margin: 0 0 var(--s2); color: var(--text); font-size: 18px; font-weight: 700; }
.empty p { margin: 0 auto var(--s5); color: var(--text-2); max-width: 46ch; }
.empty p:last-child { margin-bottom: 0; }
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* --------------------------------------------------------------- Toasts */

.toast-wrap { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 200; display: grid; gap: var(--s3); }
.toast {
    display: flex; align-items: flex-start; gap: var(--s3);
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: var(--r);
    padding: var(--s3) var(--s4); font-size: 14px; min-width: 250px; max-width: 350px;
    box-shadow: var(--shadow-3); animation: toast-in .25s var(--ease);
}
.toast.ok  { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------ Brandmark */

.brand-logo { display: block; height: 46px; width: auto; }
.brand-mark {
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    background: var(--gradient); color: var(--on-accent);
    display: grid; place-items: center;
    font-weight: 800; font-size: 12.5px; letter-spacing: .04em;
}
.brand-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.brand-mark-lg { width: 54px; height: 54px; font-size: 14px; }

/* ------------------------------------------------------------ Utilities */

.spacer { margin-left: auto; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.btn-row.center { justify-content: center; }
.inline-form { display: inline; }
.cell-title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mt-sm { margin-top: var(--s4); }
.mt-md { margin-top: var(--s5); }
.text-danger { color: var(--red); font-weight: 600; }
.text-dim { color: var(--text-3); }
.mono-block {
    font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
    white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .toast-wrap { left: var(--s4); right: var(--s4); bottom: var(--s4); }
    .toast { max-width: none; }
}

/* ============================================================== Tabs
   Used where one screen carries several unrelated groups of settings.
   The panels are plain sections, so with JavaScript off every tab is
   simply visible one after another.
   ================================================================== */

.tabs {
    display: flex; flex-wrap: wrap; gap: var(--s1);
    border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
}
.tabs button {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4); border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 650; color: var(--text-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tabs button svg { width: 17px; height: 17px; }
.tabs button:hover { color: var(--text); }
.tabs button.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabs button .count {
    background: var(--surface-3); color: var(--text-2);
    border-radius: var(--r-pill); padding: 1px 8px; font-size: 11.5px; font-weight: 800;
}

.tab-panel[hidden] { display: none; }

/* Panel spacing comes from .panel + .panel, which stops matching the moment
   a panel is wrapped in a .tab-panel, or sits next to a <form> rather than
   another panel. Both happen on tabbed screens, so cover the wrappers too. */
.tab-panel > * + *,
.tab-panel + .tab-panel,
.tab-panel + .panel,
.panel + .tab-panel,
form + .panel { margin-top: var(--s5); }

@media (max-width: 760px) {
    .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .tabs button { white-space: nowrap; }
}

/* Small, named spacing helpers, so screens stop reaching for inline styles. */
.mb-sm { margin-bottom: var(--s4); }
.mb-md { margin-bottom: var(--s5); }
.mt-lg { margin-bottom: 0; margin-top: var(--s6); }
.stack-sm > * + * { margin-top: var(--s2); }
.w-narrow { max-width: 280px; }
.pre-line { white-space: pre-line; }
.text-center { text-align: center; }
.text-small { font-size: 13px; }
.text-tiny { font-size: 12px; }

/* A titled block inside a printed document. */
.doc-note { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.doc-note h4 {
    margin: 0 0 var(--s2); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-3);
}

/* ------------------------------------------------------------ Filter bars
   The toolbar above an admin table. Any number of fields plus a trailing
   action, all on one baseline. Previously the button was nested inside the
   last field, which pushed it onto its own row.
   ------------------------------------------------------------------------ */

.filter-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); }
.filter-grid > .field { flex: 1 1 170px; min-width: 0; }
.filter-grid > .field:first-child { flex: 2 1 240px; }
.filter-grid > .filter-actions { flex: 0 0 auto; display: flex; gap: var(--s2); }

@media (max-width: 760px) {
    .filter-grid > .field, .filter-grid > .field:first-child { flex: 1 1 100%; }
    .filter-grid > .filter-actions { flex: 1 1 100%; }
    .filter-grid > .filter-actions .btn { flex: 1; }
}

/* ------------------------------------------------------- Template tokens */

.token-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.token {
    display: inline-flex; align-items: baseline; gap: var(--s2);
    padding: 6px var(--s3); cursor: pointer; text-align: left;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
    font: inherit; font-size: 12.5px; color: var(--text-2);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.token:hover { border-color: var(--accent); background: var(--accent-wash); }
.token code { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.token span { color: var(--text-3); }
.pgw-ui code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-3); padding: 1px 5px; }

/* A tab whose panel is hiding a validation error. */
.tabs button.has-error { color: var(--red); }
.tabs button.has-error::after {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red); margin-left: 2px;
}
.tabs button.has-error.is-active { border-bottom-color: var(--red); }