:root {
    --bg: #f6f5f2;
    --surface: #ffffff;
    --ink: #16140f;
    --ink-2: #57534a;
    --ink-3: #8f8a7e;
    --line: #ebe8e1;
    --line-2: #f2f0eb;
    --brand: #2366ed;
    --brand-2: #0e43ae;
    --brand-glow: rgba(36, 73, 180, 0.35);
    --brand-bg: #fff4e8;
    --ok: #15803d;
    --ok-bg: #e8f6ec;
    --warn: #a16207;
    --warn-bg: #fdf4dc;
    --bad: #b91c1c;
    --bad-bg: #fdecec;
    --neutral: #57534a;
    --neutral-bg: #f1efea;
    --radius: 18px;
    --brand-ink: #0e43ae;
    --info: #1d4ed8;
    --info-bg: #e8effd;
    --tabbar-height: 64px;
}
* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
}
body {
    font-family:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
button,
input {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
}
a {
    color: inherit;
}
/* ---------- Top bar ---------- */
.topbar {
    padding: 22px 0;
}
.topbar img {
    height: 32px;
    display: block;
}
.who {
    color: var(--ink-3);
    font-size: 13px;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-2);
    transition:
        border-color 0.15s,
        color 0.15s;
}
.btn-ghost:hover {
    border-color: #d8d4ca;
    color: var(--ink);
}
/* ---------- Headings ---------- */
.page-head {
    margin: 8px 0 24px;
}
.page-head h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}
.page-head p {
    margin: 0;
    color: var(--ink-2);
}
/* ---------- Stats ---------- */
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.stat-lbl {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
}
.stat-lbl i {
    font-size: 15px;
}
.stat-val {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.stat-sub {
    color: var(--ink-3);
    font-size: 12px;
    margin-top: 2px;
}
/* ---------- Panels ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 18px;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 0;
}
.panel-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}
.panel-count {
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 600;
}
/* ---------- Create form ---------- */
.create {
    padding: 16px 22px 22px;
}
.label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.label-row > label:first-child {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    margin: 0 0 6px 2px;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    margin-bottom: 6px;
    user-select: none;
}
.check input {
    width: 15px;
    height: 15px;
    accent-color: var(--brand);
    margin: 0;
    cursor: pointer;
}
.plate {
    position: relative;
    display: flex;
}
.plate-eu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: #003399;
    color: #fff;
    border-radius: 12px 0 0 12px;
    display: grid;
    place-items: end center;
    padding-bottom: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.plate .input {
    padding-left: 42px;
    background: #f7c600;
    border-color: #e5b700;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111;
}
.plate .input::placeholder {
    color: rgba(17, 17, 17, 0.35);
}
.plate .input:focus {
    background: #f7c600;
    border-color: #111;
}
.plate.is-off .plate-eu {
    background: #c9c5bb;
}
.plate.is-off .input {
    background: #f1efea;
    border-color: var(--line);
    color: var(--ink-3);
    cursor: not-allowed;
}
.plate.is-off .input::placeholder {
    color: #cfcabf;
}
.textarea {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}
.create-notes {
    margin-top: 12px;
}
.create-notes summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 2px;
}
.create-notes summary::-webkit-details-marker {
    display: none;
}
.create-notes summary:hover {
    color: var(--brand-ink);
}
.create-notes[open] summary {
    margin-bottom: 8px;
}
.field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    margin: 0 0 6px 2px;
}
.input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fcfbf9;
    outline: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.input:focus {
    border-color: var(--brand);
    background: #fff;
}
.input-money {
    position: relative;
}
.input-money span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-weight: 700;
}
.input-money .input {
    padding-left: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hint {
    color: var(--ink-3);
    font-size: 12px;
    margin: 6px 0 0 2px;
}
.btn-brand {
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition:
        background 0.15s,
        transform 0.1s;
}
.btn-brand:hover {
    background: #0e43ae;
}
.btn-brand:active {
    transform: translateY(1px);
}
.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 14px;
}
.alert-bad {
    background: var(--bad-bg);
    color: var(--bad);
}
.created {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--brand-bg);
    border: 1px solid #ffdcb8;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.created-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ok-bg);
    color: var(--ok);
    display: grid;
    place-items: center;
    font-size: 18px;
}
.created-text {
    flex: 1;
    min-width: 180px;
}
.created-title {
    font-weight: 700;
}
.created-link {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--brand-ink);
    word-break: break-all;
}
.created-actions {
    display: flex;
    gap: 8px;
}
/* ---------- Payments list ---------- */
.list {
    margin-top: 12px;
}
.payment-row {
    padding: 14px 22px;
    border-top: 1px solid var(--line-2);
}
/* Header rows: double class so they win over the row rules defined further down. */
.payment-row.payment-row-head,
.lead-row.lead-row-head,
.customer-row.customer-row-head {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 0;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.payment-row:not(.payment-row-head):hover {
    background: #fcfbf9;
}
.payment-row.is-new {
    background: var(--brand-bg);
}
.payment-row:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.c-desc {
    font-weight: 700;
    min-width: 0;
}
.desc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 6px;
    padding: 3px 8px;
    border: 0;
    border-radius: 7px;
    background: #fff8d6;
    color: #7a5b00;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}
.note-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-preview i {
    font-size: 11px;
    flex-shrink: 0;
}
.note-preview:hover {
    background: #fff1b3;
}
.icon-btn.has-note {
    color: #b08400;
}
.note-edit {
    grid-column: 1 / -1;
    background: #fffcef;
    border: 1px solid #f3e6b5;
    border-radius: 14px;
    padding: 14px;
}
.note-edit[hidden] {
    display: none;
}
.note-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #7a5b00;
    margin: 0 0 8px 2px;
}
.note-edit .textarea {
    background: #fff;
}
.note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.btn-sm {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
}
.c-desc small {
    display: block;
    font-weight: 500;
    color: var(--ink-3);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.c-amount {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.c-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.when-day {
    font-weight: 600;
}
.when-time {
    color: var(--ink-3);
    font-size: 12px;
}
.none {
    color: #cfcabf;
}
.meta-lbl {
    display: none;
}
.method {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}
.method-dot {
    width: 22px;
    height: 16px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
}
.method-dot.ideal {
    background: #cc0066;
}
.method-dot.bancontact {
    background: #1e3764;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.pill.ok {
    color: var(--ok);
    background: var(--ok-bg);
}
.pill.warn {
    color: var(--warn);
    background: var(--warn-bg);
}
.pill.bad {
    color: var(--bad);
    background: var(--bad-bg);
}
.pill.neutral {
    color: var(--neutral);
    background: var(--neutral-bg);
}
.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 15px;
    position: relative;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.icon-btn:hover {
    background: var(--line-2);
    border-color: var(--line);
    color: var(--ink);
}
.icon-btn.danger:hover {
    background: var(--bad-bg);
    border-color: #f6cfcf;
    color: var(--bad);
}
.icon-btn.done {
    color: var(--ok);
}
.icon-btn[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}
.icon-btn.solid {
    background: #fff;
    border-color: #ffdcb8;
    color: var(--brand-ink);
}
.icon-btn.solid:hover {
    border-color: var(--brand);
}
.c-actions form {
    margin: 0;
}
.empty {
    padding: 40px 22px 44px;
    text-align: center;
    color: var(--ink-3);
}
.empty i {
    font-size: 30px;
    display: block;
    margin-bottom: 8px;
    color: #d6d1c6;
}
/* ---------- Success sheet ---------- */
.main {
    padding-bottom: 48px;
}
body.no-scroll {
    overflow: hidden;
}
.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(22, 20, 15, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s,
        visibility 0.2s;
}
.sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}
.sheet {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: 24px;
    padding: 30px 26px 22px;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet-backdrop.is-open .sheet {
    transform: none;
}
.sheet-grip {
    display: none;
}
.sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--line-2);
    color: var(--ink-2);
    display: grid;
    place-items: center;
}
.sheet-close:hover {
    background: var(--line);
    color: var(--ink);
}
.sheet-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: var(--ok-bg);
    color: var(--ok);
    display: grid;
    place-items: center;
    font-size: 28px;
}
.sheet-title {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.sheet-sub {
    text-align: center;
    color: var(--ink-2);
    margin: 0 auto 18px;
    max-width: 340px;
    line-height: 1.5;
}
.sheet-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #faf9f6;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 20px;
}
.sheet-desc {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}
.sheet-amount {
    font-weight: 800;
    font-size: 17px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 8px;
}
.step span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
}
.sheet-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 8px 8px 8px 14px;
    margin-bottom: 20px;
    border: 2px dashed #ffc58f;
    border-radius: 16px;
    background: var(--brand-bg);
    transition:
        border-color 0.15s,
        background 0.15s;
}
.sheet-link:hover {
    border-color: var(--brand);
}
.sheet-link-url {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--brand-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.sheet-link-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    transition: background 0.15s;
}
.sheet-link.done {
    border-color: var(--ok);
    border-style: solid;
    background: var(--ok-bg);
}
.sheet-link.done .sheet-link-btn {
    background: var(--ok);
}
.share-btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.share-btn[hidden] {
    display: none;
}
.share-btn:hover {
    border-color: #d8d4ca;
    background: #fcfbf9;
}
.share-btn i {
    font-size: 16px;
}
.share-btn.wa {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}
.share-btn.wa:hover {
    background: #1fbe5b;
}
.share-msg {
    width: 100%;
    border: 0;
    background: none;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
}
.share-msg:hover,
.share-msg.done {
    color: var(--ink);
}
.sheet-done {
    width: 100%;
    justify-content: center;
    height: 46px;
    margin-top: 12px;
}
/* ---------- Login ---------- */
.login .logo {
    display: block;
    height: 42px;
    margin: 0 auto 26px;
}
.login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 28px;
}
.login-card h1 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
}
.login-card p {
    color: var(--ink-2);
    margin: 0 0 20px;
}
.login-card .field {
    margin-bottom: 14px;
}
.login-card .btn-brand {
    width: 100%;
    margin-top: 6px;
}
/* ---------- Responsive ---------- */
@media (hover: none) {
    .icon-btn[data-tip]:hover::after {
        display: none;
    }
}
@media (max-width: 560px) {
    .topbar {
        padding: 16px 0;
    }
    .topbar img {
        height: 26px;
    }
    .page-head {
        margin: 0 0 16px;
    }
    .page-head p {
        font-size: 13px;
    }
    /* on phones, the form comes first — that's the main task */
    .input {
        font-size: 16px;
        height: 52px;
    }
    /* 16px stops iOS zooming in on focus */
    .textarea {
        height: auto;
    }
    .btn-brand {
        height: 52px;
        font-size: 15px;
    }
    .btn-sm {
        height: 40px;
        font-size: 13px;
    }
    .check {
        font-size: 13px;
    }
    .check input {
        width: 18px;
        height: 18px;
    }
    .stat {
        padding: 14px 16px;
    }
    .icon-btn {
        width: 40px;
        height: 40px;
    }
    .c-actions {
        gap: 4px;
    }
    .created {
        padding: 12px;
    }
    .created-actions {
        width: 100%;
    }
    .created-actions .btn-brand {
        flex: 1;
    }
    .sheet-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .sheet {
        max-width: none;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
        transform: translateY(100%);
    }
    .sheet-grip {
        display: block;
        width: 40px;
        height: 5px;
        border-radius: 3px;
        background: var(--line);
        margin: 0 auto 18px;
    }
    .sheet-close {
        top: 12px;
        right: 12px;
    }
    .sheet-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
    .sheet-link {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
    }
    .sheet-link-url {
        text-align: center;
        font-size: 14px;
    }
    .sheet-link-btn {
        justify-content: center;
        height: 54px;
        font-size: 16px;
    }
    .share-btn {
        height: 50px;
        font-size: 14px;
    }
    .page-head h1 {
        font-size: 24px;
    }
    .who {
        display: none;
    }
    .payment-row {
        padding: 16px;
    }
    .panel-head,
    .create {
        padding-left: 16px;
        padding-right: 16px;
    }
    .stat-val {
        font-size: 22px;
    }
}
*,
*::before,
*::after {
    box-shadow: none !important;
    text-shadow: none !important;
}
[hidden] {
    display: none !important;
}
/* ==========================================================
   CRM: navigation, leads, customers, dashboard
   ========================================================== */
a.btn-brand,
a.btn-ghost {
    text-decoration: none;
}
a.btn-brand:hover {
    color: #fff;
}
select.input {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2357534a' d='M1.6 4.6a.75.75 0 0 1 1.06 0L8 9.94l5.34-5.34a.75.75 0 1 1 1.06 1.06l-5.87 5.87a.75.75 0 0 1-1.06 0L1.6 5.66a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.min-w-0 {
    min-width: 0;
}
.muted {
    color: var(--ink-3);
    margin: 0 0 12px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.m-panel {
    margin: 14px 22px 0;
}
.hint-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px 2px;
}
.hint-top a {
    color: var(--brand-ink);
    font-weight: 600;
}
.btn-danger {
    color: var(--bad);
}
.btn-danger:hover {
    border-color: #f6cfcf;
    background: var(--bad-bg);
    color: var(--bad);
}
.icon-btn-sm {
    width: 28px;
    height: 28px;
    font-size: 13px;
}
/* ---------- Main navigation ---------- */
.topbar-logo {
    flex-shrink: 0;
}
.mainnav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.mainnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s;
}
.mainnav-link:hover {
    color: var(--ink);
    background: var(--line-2);
}
.mainnav-link.is-active {
    background: var(--ink);
    color: #fff;
}
.mainnav-link i {
    font-size: 15px;
}
.mainnav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
}
/* ---------- Page headings ---------- */
.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    align-self: flex-start;
}
.back:hover {
    color: var(--ink);
}
.panel-body {
    padding: 14px 22px 20px;
}
.panel-link {
    color: var(--brand-ink);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.panel-link:hover {
    text-decoration: underline;
}
.panel-accent {
    border-color: #c9d8fb;
}
/* ---------- Toolbar, tabs, search, chips ---------- */
.toolbar {
    padding: 16px 22px 0;
}
.tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--line-2);
    border-radius: 12px;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.tab:hover {
    color: var(--ink);
}
.tab.is-active {
    background: var(--surface);
    color: var(--ink);
}
.search {
    position: relative;
    flex: 1;
    max-width: 380px;
    margin: 0;
}
.search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
}
.search .input {
    height: 42px;
    padding-left: 38px;
}
.chips {
    display: flex;
    gap: 6px;
    padding: 14px 22px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}
.chip span {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.chip:hover {
    border-color: #d8d4ca;
    color: var(--ink);
}
.chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.chip.is-active span {
    color: rgba(255, 255, 255, 0.65);
}
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral);
    flex-shrink: 0;
}
.dot.info {
    background: var(--info);
}
.dot.ok {
    background: var(--ok);
}
.dot.warn {
    background: var(--warn);
}
.dot.bad {
    background: var(--bad);
}
.pill.info {
    color: var(--info);
    background: var(--info-bg);
}
/* ---------- People, plates, tags ---------- */
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--info-bg);
    color: var(--info);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 19px;
}
/* Avatar colors, picked from a hash of the name (see avatar() in helpers.php). */
.av-0 {
    background: #e8effd;
    color: #1d4ed8;
}
.av-1 {
    background: #f1e9fe;
    color: #7c3aed;
}
.av-2 {
    background: #fde8f3;
    color: #be185d;
}
.av-3 {
    background: #e0f5f1;
    color: #0f766e;
}
.av-4 {
    background: #feeedd;
    color: #c2410c;
}
.av-5 {
    background: #e6f4fb;
    color: #0369a1;
}
.av-6 {
    background: #ecf5e1;
    color: #4d7c0f;
}
.av-7 {
    background: #ece9fd;
    color: #4338ca;
}
a.av-0,
a.av-1,
a.av-2,
a.av-3,
a.av-4,
a.av-5,
a.av-6,
a.av-7 {
    text-decoration: none;
}
/* "Is customer" badge in the top-right corner of an avatar. */
.avatar {
    position: relative;
}
.avatar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--ok);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-style: normal;
    line-height: 1;
}
.avatar-lg .avatar-badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
}
.person-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.person-sub {
    color: var(--ink-3);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plate-badge {
    display: inline-block;
    padding: 2px 7px 2px 16px;
    border-radius: 5px;
    background: linear-gradient(90deg, #003399 0 11px, #f7c600 11px);
    color: #111;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.tag-lg {
    padding: 6px 12px;
    font-size: 13px;
    background: var(--info-bg);
    color: var(--info);
}
/* ---------- Lead & customer lists ---------- */
.lead-row,
.customer-row {
    display: block;
    padding: 14px 22px;
    border-top: 1px solid var(--line-2);
    color: inherit;
    text-decoration: none;
}
.lead-row.has-row-link:hover,
a.customer-row:hover {
    background: #fcfbf9;
    color: inherit;
}
.lead-row:last-child,
.customer-row:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.note-icon {
    margin-left: 6px;
    color: #c9c5bb;
    font-size: 12px;
    vertical-align: 1px;
}
.c-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.c-vehicle,
.c-services {
    min-width: 0;
}
.c-vehicle .person-sub {
    margin-top: 3px;
    white-space: nowrap;
}
.services-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}
.c-status .person-sub {
    margin-top: 4px;
    white-space: nowrap;
}
.when-day i {
    color: var(--ink-3);
    margin-right: 2px;
}
.when-day.is-past {
    color: var(--ink-3);
}
.row-customer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0;
    color: var(--brand-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.row-customer:hover {
    text-decoration: underline;
}
/* ---------- Detail pages ---------- */
.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.profile-head h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}
.profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--ink-2);
    font-size: 13px;
}
.profile-head > .min-w-0 {
    flex: 1;
}
.profile-edit {
    margin-left: auto;
    flex-shrink: 0;
}
.quick-actions .share-btn {
    padding: 0 16px;
    height: 42px;
}
.appointment-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--info-bg);
    color: var(--info);
}
.appointment-banner i {
    font-size: 18px;
}
.appointment-banner.is-past {
    background: var(--neutral-bg);
    color: var(--ink-2);
}
.dl dd a {
    color: var(--brand-ink);
    text-decoration: none;
}
.dl dd a:hover {
    text-decoration: underline;
}
.message {
    margin: 14px 0 0;
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.mini-list {
    padding: 8px 0 8px;
}
.mini-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    color: inherit;
    text-decoration: none;
}
.mini-row > .min-w-0 {
    flex: 1;
}
a.mini-row:hover {
    background: #fcfbf9;
    color: inherit;
}
.mini-row .bi-chevron-right {
    color: var(--ink-3);
}
.mini-title {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-row .person-sub {
    white-space: nowrap;
}
.mini-amount {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.customer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}
.customer-card:hover {
    border-color: var(--brand);
    color: inherit;
}
.customer-card > .min-w-0 {
    flex: 1;
}
.match {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: var(--warn-bg);
}
.match-text {
    margin-bottom: 10px;
    color: var(--warn);
    font-size: 13px;
    line-height: 1.5;
}
.match-text a {
    color: inherit;
    font-weight: 700;
}
.match form {
    margin: 0;
}
.side-delete {
    margin: 0 0 18px;
}
.side-actions .btn-ghost,
.side-delete .btn-ghost,
.match .btn-ghost {
    justify-content: center;
    height: 42px;
}
.empty-sm {
    padding: 26px 22px 30px;
}
.empty-sm i {
    font-size: 24px;
}
.empty a {
    color: var(--brand-ink);
}
.empty-page {
    padding: 80px 20px;
}
.empty-page h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
}
.empty-page p {
    margin: 0 0 18px;
}
/* ---------- Notes timeline ---------- */
.note-compose {
    margin: 0 0 22px;
}
.note-compose-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.note-compose-foot .hint {
    margin: 0;
}
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--line-2);
}
.timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 14px;
}
.timeline-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff8d6;
    color: #b08400;
    border: 2px solid var(--surface);
    font-size: 13px;
}
.timeline-card {
    flex: 1;
    min-width: 0;
    padding: 10px 14px 12px;
    border-radius: 12px;
    background: #fffcef;
    border: 1px solid #f3e6b5;
}
.timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
    min-height: 24px;
}
.timeline-head form {
    margin: 0;
}
.timeline-body {
    margin-top: 2px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.timeline-body a {
    color: var(--brand-ink);
    font-weight: 600;
}
.timeline-system .timeline-dot {
    background: var(--line-2);
    color: var(--ink-3);
}
.timeline-system .timeline-card {
    background: transparent;
    border-color: transparent;
    padding-top: 5px;
    padding-bottom: 0;
}
.timeline-system .timeline-body {
    color: var(--ink-2);
}
/* ---------- Customer form ---------- */
.form-stack .panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-stack .panel-title i {
    color: var(--ink-3);
}
.optional {
    color: var(--ink-3);
    font-weight: 500;
    font-size: 12px;
}
.check-card {
    margin: 0 !important;
    cursor: pointer;
}
.check-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.check-card span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    transition:
        border-color 0.15s,
        background 0.15s;
}
.check-card span::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid #d8d4ca;
    border-radius: 5px;
    background: #fff;
}
.check-card input:checked + span {
    border-color: var(--brand);
    background: var(--info-bg);
}
.check-card input:checked + span::before {
    border-color: var(--brand);
    background: var(--brand)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E")
        center / 14px no-repeat;
}
.check-card input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.form-actions {
    padding: 4px 0 20px;
}
.form-actions .btn-ghost {
    height: 48px;
    padding: 0 20px;
}
.lead-ref {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-left: 3px solid var(--brand);
    border-radius: 0 14px 14px 0;
    background: var(--surface);
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.lead-ref-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 13px;
}
.lead-ref-head span {
    color: var(--ink-3);
    font-weight: 500;
}
/* ---------- Dashboard ---------- */
.stat-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}
.stat-link:hover {
    color: inherit;
    border-color: #d8d4ca;
}
.bars {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 190px;
    padding-top: 22px;
}
.bar-col {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    cursor: default;
}
.bar-track {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--line);
}
.bar {
    width: min(70%, 34px);
    border-radius: 4px 4px 0 0;
    background: #a9c1f7;
    transition: background 0.15s;
}
.bar-col.is-current .bar,
.bar-col:hover .bar {
    background: var(--brand);
}
.bar-value {
    position: absolute;
    left: 0;
    right: 0;
    margin-bottom: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.bar-label {
    text-align: center;
    color: var(--ink-3);
    font-size: 11px;
    white-space: nowrap;
}
.bar-col.is-current .bar-label {
    color: var(--ink);
    font-weight: 700;
}
.bar-col[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}
.hbar-row {
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
}
.hbar-row:hover {
    background: #faf9f6;
    color: inherit;
}
.hbar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.hbar-track {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--line-2);
    overflow: hidden;
}
.hbar {
    display: block;
    height: 100%;
    border-radius: 0 5px 5px 0;
    background: var(--brand);
}
.hbar-value {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.date-chip {
    width: 52px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--info-bg);
    color: var(--info);
    font-size: 13px;
}
.footnote {
    text-align: center;
    color: var(--ink-3);
    font-size: 12.5px;
    margin: 4px 0 0;
}
/* ---------- CRM responsive ---------- */
@media (max-width: 1080px) {
    .mainnav-link {
        padding: 8px 10px;
    }
    .who {
        display: none;
    }
}
@media (max-width: 760px) {
    /* Phone & small tablet: main navigation becomes a bottom tab bar. */
    body.has-nav {
        padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    }
    .mainnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        gap: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        border-radius: 0;
        border-width: 1px 0 0;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px);
    }
    .mainnav-link {
        flex: 1;
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        font-size: 11px;
    }
    .mainnav-link i {
        font-size: 19px;
    }
    .mainnav-link.is-active {
        background: transparent;
        color: var(--brand);
    }
    .mainnav-badge {
        position: absolute;
        top: 2px;
        left: calc(50% + 6px);
    }
}
@media (max-width: 560px) {
    .toolbar {
        padding: 14px 16px 0;
    }
    .tabs {
        width: 100%;
    }
    .tab {
        flex: 1;
        justify-content: center;
    }
    .search {
        max-width: none;
        flex-basis: 100%;
    }
    .search .input {
        height: 46px;
    }
    .chips {
        padding: 12px 16px 0;
    }
    .lead-row,
    .customer-row {
        padding: 14px 16px;
    }
    .panel-body {
        padding: 12px 16px 18px;
    }
    .mini-row {
        padding: 10px 16px;
    }
    .m-panel {
        margin: 12px 16px 0;
    }
    .profile-head {
        flex-wrap: wrap;
    }
    .profile-head h1 {
        font-size: 22px;
    }
    .avatar-lg {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
    .profile-edit {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .quick-actions .share-btn {
        height: 46px;
    }
    .form-actions .btn-ghost,
    .form-actions .btn-brand {
        width: 100%;
        justify-content: center;
    }
    .note-compose-foot .hint {
        display: none;
    }
    .note-compose-foot .btn-brand {
        width: 100%;
    }
    .bars {
        height: 160px;
    }
    .bar-label {
        font-size: 10px;
    }
}
/* ---------- Row overlay link (whole row clickable, controls stay usable) ---------- */
.has-row-link {
    position: relative;
}
.row-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.has-row-link .c-person {
    pointer-events: none;
}
.person-hover {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    pointer-events: auto;
}
.person-hover:hover,
.person-hover:focus-within {
    z-index: 45;
}
a.person-name {
    color: inherit;
    text-decoration: none;
}
a.person-name {
    display: block;
}
a.person-name:hover {
    text-decoration: underline;
}
.row-phone {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--brand-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.row-phone i {
    font-size: 12px;
}
.row-phone:hover {
    color: var(--brand);
    text-decoration: underline;
}
/* ---------- Hover card with lead details ---------- */
.hovercard {
    position: absolute;
    top: -8px;
    left: calc(100% + 10px);
    width: 340px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 14px 32px -10px rgba(22, 20, 15, 0.28) !important;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition:
        opacity 0.1s,
        transform 0.1s,
        visibility 0.1s;
    transition-delay: 0s;
}
/* Invisible bridge so the card stays open while moving the mouse onto it. */
.hovercard::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
}
.person-hover:hover .hovercard,
.person-hover:focus-within .hovercard {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Short delay so moving the mouse across the list doesn't flash cards. */
    transition-delay: 0.06s;
}
.hovercard-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-2);
}
.hovercard-head .avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
}
.hovercard-head .person-sub {
    font-size: 11.5px;
}
.hovercard-name {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.hovercard-dl .plate-badge {
    font-size: 11px;
}
.hovercard-dl a {
    color: var(--brand-ink);
    text-decoration: none;
}
.hovercard-dl a:hover {
    text-decoration: underline;
}
.hovercard-note {
    display: flex;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #faf9f6;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
}
.hovercard-note i {
    color: var(--ink-3);
    flex-shrink: 0;
}
.hovercard-note span {
    display: -webkit-box;
    white-space: pre-line;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
@media (hover: none), (max-width: 760px) {
    .hovercard {
        display: none;
    }
}
.row-action {
    position: relative;
    z-index: 2;
    margin: 0;
    display: inline-block;
}
/* z-index 2 creates a stacking context per row; lift the row whose dropdown is open above the rest. */
.row-action:has(.dd.is-open) {
    z-index: 40;
}
/* ---------- Dropdown (see dropdown() in helpers.php) ---------- */
.dd {
    position: relative;
}
.dd.is-open {
    z-index: 30;
}
.dd-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}
.dd-value {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.dd-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dd-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dd-hint {
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 500;
}
.dd-value .dd-hint {
    display: none;
}
.dd-icon {
    color: var(--ink-3);
    font-size: 15px;
}
.dd-placeholder {
    color: var(--ink-3);
}
.dd-chevron {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--ink-3);
    transition: transform 0.15s;
}
.dd.is-open .dd-chevron {
    transform: rotate(180deg);
}
/* Variant "input": looks like the other form fields. */
.dd-input .dd-toggle {
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fcfbf9;
    font-weight: 500;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.dd-input .dd-toggle:hover {
    border-color: #d8d4ca;
}
.dd-input.is-open .dd-toggle,
.dd-input .dd-toggle:focus-visible {
    outline: none;
    border-color: var(--brand);
    background: #fff;
}
/* Variant "pill": compact status chip, colored by the selected option's tone. */
.dd-pill .dd-toggle {
    width: auto;
    gap: 6px;
    padding: 5px 9px 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--neutral-bg);
    color: var(--neutral);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition:
        border-color 0.15s,
        filter 0.15s;
}
.dd-pill .dd-toggle:hover {
    border-color: currentColor;
}
.dd-pill .dd-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.dd-pill .dd-value {
    gap: 7px;
}
.dd-pill .dd-value .dot {
    width: 7px;
    height: 7px;
    background: currentColor;
}
.dd-pill .dd-chevron {
    color: inherit;
    font-size: 10px;
    opacity: 0.7;
}
.dd-pill.tone-info .dd-toggle {
    background: var(--info-bg);
    color: var(--info);
}
.dd-pill.tone-ok .dd-toggle {
    background: var(--ok-bg);
    color: var(--ok);
}
.dd-pill.tone-warn .dd-toggle {
    background: var(--warn-bg);
    color: var(--warn);
}
.dd-pill.tone-bad .dd-toggle {
    background: var(--bad-bg);
    color: var(--bad);
}
/* Menu */
.dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 32px -8px rgba(22, 20, 15, 0.22) !important;
    outline: none;
    animation: dd-in 0.12s ease-out;
}
.dd-pill .dd-menu {
    left: auto;
    right: 0;
    min-width: 210px;
}
.dd.is-up .dd-menu {
    top: auto;
    bottom: calc(100% + 6px);
}
@keyframes dd-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}
.dd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    user-select: none;
}
.dd-option-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.dd-option.is-active {
    background: var(--line-2);
}
.dd-check {
    color: var(--brand);
    font-size: 16px;
    visibility: hidden;
}
.dd-option[aria-selected="true"] .dd-check {
    visibility: visible;
}
/* ---------- Toast (not .toast: Bootstrap hides that class) ---------- */
.app-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition:
        opacity 0.2s,
        transform 0.2s,
        visibility 0.2s;
}
.app-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.app-toast i {
    color: #86efac;
}
.app-toast-bad i {
    color: #fca5a5;
}
/* ---------- Related leads ---------- */
.match-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.tag-xs {
    padding: 1px 7px;
    font-size: 11px;
}
@media (max-width: 760px) {
    .app-toast {
        bottom: calc(var(--tabbar-height) + 16px + env(safe-area-inset-bottom));
    }
}
/* ---------- Lead list: tab counts, row actions, removing rows ---------- */
.tab-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(22, 20, 15, 0.06);
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tab.is-active .tab-count {
    background: var(--line-2);
    color: var(--ink-2);
}
.c-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}
.btn-undo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.btn-undo:hover {
    border-color: var(--brand);
    background: var(--info-bg);
    color: var(--brand-ink);
}
.lead-row.is-removing {
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    transition:
        height 0.25s ease,
        opacity 0.2s ease,
        padding 0.25s ease;
}
.deleted-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--bad-bg);
    color: var(--bad);
    font-weight: 600;
}
.deleted-banner > div {
    flex: 1;
}
.deleted-banner form {
    margin: 0;
}
@media (max-width: 560px) {
    /* Three tabs with counts must fit on a phone. */
    .tab {
        gap: 5px;
        padding: 7px 6px;
        font-size: 12.5px;
    }
    .tab .bi {
        display: none;
    }
    .tab-count {
        min-width: 18px;
        padding: 0 5px;
    }
}
/* ---------- Page tabs (see Tabs in main.js) ---------- */
button.tab {
    border: 0;
    background: transparent;
    cursor: pointer;
}
button.tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.tabs-page {
    align-self: flex-start;
    margin-bottom: 18px;
}
.tabs-page .tab {
    padding: 9px 16px;
    font-size: 13.5px;
}
.tab-panel[hidden] {
    display: none;
}
@media (max-width: 560px) {
    .tabs-page {
        align-self: stretch;
    }
}
/* ---------- Tabs with actions on the same row (customer page) ---------- */
.tabs-bar .tabs-page {
    margin-bottom: 0;
}
.quick-actions-compact .share-btn {
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
}
.quick-actions-compact .share-btn i {
    font-size: 15px;
}
@media (max-width: 560px) {
    .quick-actions-compact .share-btn {
        height: 44px;
    }
}
/* ==========================================================
   Orders, follow-ups, RDW lookup, price lines
   ========================================================== */
.prewrap {
    white-space: pre-line;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
a.appointment-banner {
    text-decoration: none;
    transition: filter 0.15s;
}
a.appointment-banner:hover {
    color: var(--info);
    filter: brightness(0.97);
}
/* ---------- RDW lookup status under the plate ---------- */
.rdw-status {
    min-height: 20px;
    margin: 6px 0 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.rdw-status.is-found {
    color: var(--ok);
}
.rdw-status.is-error {
    color: var(--bad);
}
.rdw-status.is-loading .bi {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* ---------- Segmented choice (existing / new customer) ---------- */
.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--line-2);
    border-radius: 12px;
}
.segmented-option {
    margin: 0;
    cursor: pointer;
}
.segmented-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.segmented-option span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 9px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13.5px;
}
.segmented-option input:checked + span {
    background: var(--surface);
    color: var(--ink);
}
.segmented-option input:disabled + span {
    opacity: 0.45;
    cursor: not-allowed;
}
.segmented-option input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.reveal-panel {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.reveal-panel[hidden] {
    display: none;
}
.customer-card-static {
    cursor: default;
}
.customer-card-static:hover {
    border-color: var(--line);
}
/* ---------- Price lines (order form) ---------- */
.line-items-head {
    margin: 0 0 6px 2px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
}
.line-item .input.is-invalid {
    border-color: var(--bad);
    background: var(--bad-bg);
}
.line-items-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
}
.line-items-foot .btn-ghost {
    height: 40px;
}
.line-total {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-right: 50px;
}
.line-total span {
    color: var(--ink-2);
    font-weight: 600;
}
.line-total strong {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.line-total strong.is-invalid {
    color: var(--bad);
}
/* ---------- Order detail ---------- */
.date-chip-lg {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-direction: column;
    gap: 0;
    line-height: 1.1;
}
.date-chip-lg small {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.date-chip-lg b {
    font-size: 21px;
}
.date-chip.is-late {
    background: var(--warn-bg);
    color: var(--warn);
}
.price-table {
    width: calc(100% - 44px);
    margin: 10px 22px 18px;
    border-collapse: collapse;
}
.price-table td {
    padding: 10px 0;
    border-top: 1px solid var(--line-2);
}
.price-table tbody tr:first-child td {
    border-top: 0;
}
.price-table .num {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.price-table tfoot td {
    border-top: 0;
    padding: 4px 0;
}
.price-table tfoot tr:first-child td {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.price-sub td {
    color: var(--ink-3);
    font-size: 13px;
}
.price-sub .num {
    font-weight: 600;
}
.price-total td {
    font-size: 16px;
    font-weight: 800;
}
.price-open td {
    color: var(--warn);
    font-weight: 800;
}
.side-contact .share-btn {
    height: 40px;
}
/* ---------- Follow-ups ---------- */
.followup-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--bad);
    color: #fff;
    animation: alert-in 0.3s ease-out;
}
.followup-alert > .bi {
    font-size: 20px;
}
.followup-alert > div {
    flex: 1;
    min-width: 0;
}
.followup-alert span {
    display: block;
    opacity: 0.9;
    font-size: 13px;
    overflow-wrap: anywhere;
}
.followup-alert form {
    margin: 0;
}
.btn-followup-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--bad);
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}
@keyframes alert-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}
.panel-alert {
    border-color: #f3b4b4;
    background: linear-gradient(var(--bad-bg), var(--surface) 70px);
}
.panel-alert .panel-title,
.panel-alert .panel-title .bi {
    color: var(--bad);
}
.panel-title .bi {
    margin-right: 4px;
    color: var(--ink-3);
}
.followup-current {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--info-bg);
}
.followup-current.is-due {
    background: var(--bad-bg);
}
.followup-date {
    font-weight: 800;
    color: var(--info);
}
.followup-current.is-due .followup-date {
    color: var(--bad);
}
.followup-note {
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.followup-form .field label {
    margin-bottom: 4px;
}
.quick-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.quick-dates .chip {
    background: var(--surface);
    cursor: pointer;
    font-family: inherit;
}
.quick-dates .chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.chip-alert {
    border-color: #f3b4b4;
    background: var(--bad-bg);
    color: var(--bad);
}
.chip-alert span {
    color: var(--bad);
}
.chip-alert.is-active {
    background: var(--bad);
    border-color: var(--bad);
}
.followup-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.followup-badge.is-due {
    background: var(--bad);
    color: #fff;
    animation: pulse-due 2s ease-in-out infinite;
}
@keyframes pulse-due {
    50% {
        opacity: 0.75;
    }
}
.lead-row.is-followup-due {
    box-shadow: inset 3px 0 0 var(--bad) !important;
}
.mainnav-badge.is-alert {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 6px;
    gap: 3px;
    background: var(--bad);
    font-size: 10.5px;
}
.mainnav-badge.is-alert .bi {
    font-size: 9px;
}
@media (prefers-reduced-motion: reduce) {
    .followup-badge.is-due,
    .followup-alert {
        animation: none;
    }
}
@media (max-width: 760px) {
    /* Tab bar: only the most urgent badge fits. */
    .mainnav-badge.is-alert + .mainnav-badge {
        display: none;
    }
}
@media (max-width: 560px) {
    .line-total {
        margin-right: 0;
    }
    .segmented {
        display: flex;
    }
    .segmented-option {
        flex: 1;
    }
    .segmented-option span {
        justify-content: center;
        width: 100%;
    }
    .followup-alert {
        flex-wrap: wrap;
    }
    .followup-alert form,
    .btn-followup-done {
        width: 100%;
        justify-content: center;
    }
}
/* ---------- Bootstrap container gutter + list card view (below xl) ---------- */
.container-xxl {
    --bs-gutter-x: 2.5rem;
}
.icon-btn-spacer {
    display: inline-block;
    width: 34px;
}
@media (max-width: 1199.98px) {
    .desc-text {
        white-space: normal;
    }
    .c-amount {
        font-size: 16px;
    }
    .c-made,
    .c-paid,
    .c-method {
        background: #faf9f6;
        border-radius: 10px;
        padding: 8px 10px;
    }
    .meta-lbl {
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-3);
        margin-bottom: 2px;
    }
}
@media (max-width: 560px) {
    .container-xxl {
        --bs-gutter-x: 2rem;
    }
}
@media (max-width: 560px) {
    /* More tabs than fit on a phone: scroll them sideways instead of squeezing. */
    .tabs-page {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs-page::-webkit-scrollbar {
        display: none;
    }
    .tabs-page .tab {
        flex: 1 0 auto;
    }
}
/* Day + month block in order rows ("okt / 15"). */
.date-chip-day {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.05;
}
.date-chip-day small {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.date-chip-day b {
    font-size: 17px;
}
.status-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--ink-2);
}
.status-text .dot {
    width: 7px;
    height: 7px;
}
/* ---------- Description lists: Bootstrap dl.row with dt/dd columns ---------- */
.dl {
    --dl-inset: 22px;
    /* Align with the panel's padding; the outer column edges get no gutter, so lines run edge to edge. */
    margin: 0 var(--dl-inset);
    padding: 6px 0 14px;
}
.dl > dt {
    padding-left: 0;
}
.dl > dd {
    padding-right: 0;
}
.dl-stacked > dt,
.dl-stacked > dd {
    padding-left: 0;
    padding-right: 0;
}
.dl > dt,
.dl > dd {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--line-2);
    overflow-wrap: anywhere;
}
.dl > dt:first-of-type,
.dl > dd:first-of-type {
    border-top: 0;
}
.dl dt {
    color: var(--ink-3);
    font-weight: 600;
    font-size: 13px;
}
.dl dd {
    font-weight: 600;
}
.dl dd a {
    color: var(--brand-ink);
    text-decoration: none;
}
.dl dd a:hover {
    text-decoration: underline;
}
/* Stacked: label above value. */
.dl-stacked > dt {
    padding-bottom: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dl-stacked > dd {
    padding-top: 0;
    border-top: 0;
}
.dl-stacked dd > div {
    margin-top: 4px;
}
@media (max-width: 575.98px) {
    /* Horizontal lists stack on phones: keep label and value together. */
    .dl {
        --dl-inset: 16px;
    }
    .dl:not(.dl-stacked) > dt {
        padding-bottom: 2px;
    }
    .dl:not(.dl-stacked) > dd {
        padding-top: 0;
        padding-left: 0;
        border-top: 0;
    }
    .dl:not(.dl-stacked) > dt {
        padding-right: 0;
    }
}
.hovercard-dl {
    margin-top: 0;
    margin-bottom: 0;
}
.hovercard-dl > dt,
.hovercard-dl > dd {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow-wrap: anywhere;
}
.hovercard-dl dt {
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
}
.hovercard-dl dd {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.4;
}
/* Dropdown options list (scrolls) and optional search box (see dropdown() 'search'). */
.dd-options {
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
}
.dd-option[hidden] {
    display: none;
}
.dd-search {
    position: relative;
    margin-bottom: 6px;
}
.dd-search .bi {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 13px;
}
.dd-search-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 34px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fcfbf9;
    font-size: 14px;
    outline: none;
}
.dd-search-input:focus {
    border-color: var(--brand);
    background: #fff;
}
.dd-empty {
    padding: 14px 10px;
    color: var(--ink-3);
    font-size: 13px;
    text-align: center;
}
@media (max-width: 560px) {
    .dd-search-input {
        font-size: 16px; /* stops iOS zooming in on focus */
    }
}
/* Smaller input + matching button, e.g. "Andere dienst toevoegen". */
.input.input-sm {
    height: 42px;
}
.btn-ghost-input {
    height: 42px;
}
@media (max-width: 560px) {
    .input.input-sm,
    .btn-ghost-input {
        height: 46px;
    }
}
/* Status dropdown in the lead header: the menu opens from the left, under the pill. */
.status-form {
    position: relative;
    z-index: 20;
    margin: 0;
}
/* ---------- Popover (see Popover in main.js) ---------- */
.popover-wrap {
    position: relative;
    display: inline-block;
}
.popover-wrap.is-open {
    z-index: 25;
}
.popover-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 320px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 36px -10px rgba(22, 20, 15, 0.28) !important;
    animation: dd-in 0.12s ease-out;
}
.popover-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 10px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 600;
}
.popover-divider::before,
.popover-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
/* Follow-up pill in the lead header, next to the status. */
.popover-panel .followup-current {
    margin-bottom: 10px;
}
@media (max-width: 560px) {
    /* Phone: the popover becomes a sheet above the tab bar, so it never runs off screen. */
    .popover-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom));
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
}
.popover-panel:focus {
    outline: none;
}
.popover-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 14px;
}
.popover-title .bi {
    color: var(--ink-3);
}
/* Lead header as a Bootstrap row (name left, contact buttons right): use the row gutters, not the flex gap. */
/* Small contact buttons next to a phone number / email (lead Gegevens). */
.icon-btn-soft {
    background: var(--line-2);
    color: var(--ink-2);
}
.icon-btn-wa {
    background: #e3f7ea;
    color: #1a9d4b;
}
.icon-btn-wa:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}
@media (max-width: 560px) {
    .icon-btn.icon-btn-sm {
        width: 34px;
        height: 34px;
    }
}
/* ---------- "More actions" menu (three dots) ---------- */
.icon-btn-more {
    width: 40px;
    height: 40px;
    border-color: var(--line);
    background: var(--surface);
    font-size: 18px;
}
.popover-panel.popover-end {
    left: auto;
    right: 0;
}
.menu-panel {
    width: auto;
    min-width: 230px;
    padding: 6px;
}
.menu-panel form {
    margin: 0;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}
.menu-item .bi {
    width: 16px;
    color: var(--ink-3);
}
.menu-item:hover,
.menu-item:focus-visible {
    outline: none;
    background: var(--line-2);
    color: var(--ink);
}
.menu-item.is-danger,
.menu-item.is-danger .bi {
    color: var(--bad);
}
.menu-item.is-danger:hover,
.menu-item.is-danger:focus-visible {
    background: var(--bad-bg);
}
.menu-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--line);
}
@media (max-width: 560px) {
    .menu-item {
        padding: 12px;
        font-size: 15px;
    }
}
@media (max-width: 560px) {
    .popover-panel.popover-end {
        left: 12px;
        right: 12px;
    }
}
/* Lead header: status/follow-up/menu sit on the right, so their menus open towards the left. */
@media (min-width: 761px) and (max-width: 1199.98px) {
    /* Tablets and small laptops: the menu items with labels do not fit next to the logo; show icons only. */
    .mainnav-link span {
        display: none;
    }
    .mainnav-link {
        padding: 8px 12px;
    }
    .mainnav-link i {
        font-size: 17px;
    }
}
/* Details list inside a panel body (lead Aanvraag): no extra inset, a divider above. */
.dl.dl-inline {
    --dl-inset: 0px;
    margin-top: 16px;
    padding: 4px 0 0;
    border-top: 1px solid var(--line);
}
.dl.dl-inline > dt,
.dl.dl-inline > dd {
    padding-top: 8px;
    padding-bottom: 8px;
}
@media (max-width: 575.98px) {
    /* Phone: label directly above its value. */
    .dl.dl-inline > dt {
        padding-bottom: 0;
    }
    .dl.dl-inline > dd {
        padding-top: 2px;
    }
}
/* Lead "Gegevens": details first (no divider above), then the customer's message. */
.dl.dl-inline:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.message-block {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.message-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.message-block .message {
    margin-top: 8px;
    margin-bottom: 0;
}
.panel-subhead {
    margin: 0 22px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn-ghost.btn-ghost-sm {
    height: 38px;
    padding: 0 12px;
}
@media (max-width: 560px) {
    .panel-subhead {
        margin: 0 16px;
    }
    .btn-ghost.btn-ghost-sm {
        height: 40px;
    }
}

/* ---------- Lead page header ---------- */
.lead-head {
    margin-bottom: 18px;
}
.lead-head h1 {
    margin: 2px 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.eyebrow {
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lead-subtitle {
    color: var(--ink-2);
    font-size: 14px;
}
@media (min-width: 768px) {
    /* Follow-up sits in the action row on the right: its popover opens towards the left. */
    .lead-head #follow-up .popover-panel {
        left: auto;
        right: 0;
    }
}
/* The status pill is under the name (left): its menu opens towards the right. */
.lead-head .status-form .dd-pill .dd-menu {
    left: 0;
    right: auto;
}
.followup-btn.is-planned {
    border-color: transparent;
    background: var(--info-bg);
    color: var(--info);
}
.followup-btn.is-due {
    border-color: var(--bad);
    background: var(--bad);
    color: #fff;
}
.count-badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Details inside a panel body without row dividers; .dl-divided adds one line above a group. */
.dl.dl-plain {
    --dl-inset: 0px;
    padding: 0;
}
.dl.dl-plain > dt,
.dl.dl-plain > dd {
    border-top: 0;
}
.dl.dl-plain > dt {
    padding-top: 8px;
    padding-bottom: 2px;
}
.dl.dl-plain > dt:first-of-type {
    padding-top: 0;
}
.dl.dl-plain > dd {
    padding-top: 0;
    padding-bottom: 8px;
}
.dl.dl-divided {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.dl.dl-plain .icon-btn-sm {
    margin: -3px 0;
}

/* "Volledig bericht tonen" (see [data-clamp] in main.js). */
.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-ink);
    font-size: 13px;
    font-weight: 600;
}
.clamp-toggle .bi {
    transition: transform 0.15s;
}
.clamp-toggle.is-expanded .bi {
    transform: rotate(180deg);
}
@media (max-width: 560px) {
    .lead-head h1 {
        font-size: 22px;
    }
}


.lead-head .icon-btn-more {
    width: 38px;
    height: 38px;
}

/* ---------- Order page header ---------- */
.order-head {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.order-head h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.detail-label {
    margin-bottom: 4px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media (max-width: 560px) {
    .order-head h1 {
        font-size: 22px;
    }
}
/* Divider between the work description and the price lines. */
.panel-body + .price-table tbody tr:first-child td {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

/* Compact dropdown (e.g. follow-up next to "Notitie toevoegen"). */
.dd-sm .dd-toggle {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
}
.note-compose-foot .dd-menu {
    left: auto;
    right: 0;
    min-width: 240px;
}
.note-compose-foot .note-followup-date {
    width: auto;
    height: 38px;
    font-size: 13px;
}
@media (max-width: 560px) {
    .dd-sm .dd-toggle,
    .note-compose-foot .note-followup-date {
        height: 40px;
    }
    .note-compose-foot [data-note-followup] {
        width: 100%;
    }
    .note-compose-foot [data-note-followup] > * {
        flex: 1 1 auto;
    }
}
/* ---------- Quick search (Ctrl+K) ---------- */
.qs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 6px 0 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-3);
    font-weight: 600;
    font-size: 13px;
    transition:
        border-color 0.15s,
        color 0.15s,
        box-shadow 0.15s;
}
.qs-trigger:hover {
    border-color: #d8d4ca;
    color: var(--ink-2);
    box-shadow: 0 2px 8px rgba(22, 20, 15, 0.06);
}
.qs-trigger .bi-search {
    font-size: 14px;
}
.qs-trigger-label {
    min-width: 72px;
    text-align: left;
}
.qs-trigger kbd,
.qs kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    background: var(--bg);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}
.qs-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(12vh, 120px) 16px 16px;
    background: rgba(22, 20, 15, 0.32);
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.qs-backdrop.is-open {
    opacity: 1;
}
.qs {
    width: 100%;
    max-width: 720px;
    max-height: min(640px, calc(100vh - min(12vh, 120px) - 16px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(22, 20, 15, 0.06),
        0 24px 60px -12px rgba(22, 20, 15, 0.35),
        0 8px 20px -8px rgba(22, 20, 15, 0.18);
    transform: translateY(-10px) scale(0.97);
    transform-origin: top center;
    transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.qs-backdrop.is-open .qs {
    transform: none;
}
.qs-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 20px;
    border-bottom: 1px solid var(--line);
}
.qs-icon {
    font-size: 18px;
    color: var(--ink-3);
    transition: opacity 0.15s;
}
.qs-spinner {
    position: absolute;
    left: 20px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    opacity: 0;
    animation: qs-spin 0.7s linear infinite;
    transition: opacity 0.15s;
}
.qs-backdrop.is-loading .qs-icon {
    opacity: 0;
}
.qs-backdrop.is-loading .qs-spinner {
    opacity: 1;
}
@keyframes qs-spin {
    to {
        transform: rotate(360deg);
    }
}
.qs-input {
    flex: 1;
    min-width: 0;
    height: 64px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
}
.qs-input::placeholder {
    color: var(--ink-3);
    font-weight: 400;
}
.qs-esc {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
}
.qs-esc:hover {
    color: var(--ink);
}
.qs-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
}
.qs-hint {
    padding: 36px 20px;
    text-align: center;
    color: var(--ink-3);
    font-size: 14px;
}
.qs-hint > .bi {
    display: block;
    margin-bottom: 8px;
    font-size: 26px;
    color: #d6d1c6;
}
.qs-hint small {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
}
.qs-hint.is-bad,
.qs-hint.is-bad > .bi {
    color: var(--bad);
}
.qs-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 6px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.qs-count {
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--line-2);
    letter-spacing: 0;
}
.qs-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    animation: qs-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 22ms);
    transition: background 0.12s;
}
.qs-item.is-active {
    background: var(--info-bg);
}
@keyframes qs-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}
.qs-avatar {
    margin-top: 2px;
}
.qs-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qs-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.qs-name {
    font-weight: 700;
    font-size: 14.5px;
}
.qs-type {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
}
.qs-type.is-customer {
    background: var(--ok-bg);
    color: var(--ok);
}
.qs-type.is-muted {
    color: var(--ink-3);
}
.qs-top .pill {
    font-size: 11px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.qs-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--ink-2);
    font-size: 13px;
}
.qs-sub-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qs-sub-item + .qs-sub-item::before {
    content: "·";
    margin-right: 10px;
    color: var(--ink-3);
}
.qs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--ink-3);
    font-size: 12px;
}
.qs-meta:empty {
    display: none;
}
.qs-meta-item {
    white-space: nowrap;
}
.qs-meta-item.is-next {
    color: var(--brand-ink);
    font-weight: 600;
}
.qs-item mark {
    padding: 0 1px;
    border-radius: 3px;
    background: #fde68a;
    color: inherit;
}
.qs-item .plate-badge mark {
    background: rgba(255, 255, 255, 0.55);
}
.qs-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    max-width: 40%;
}
.qs-matches {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}
.qs-match {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.qs-item.is-active .qs-match {
    border-color: rgba(29, 78, 216, 0.2);
    color: var(--info);
}
.qs-enter {
    width: 14px;
    color: var(--info);
    opacity: 0;
    transition: opacity 0.12s;
}
.qs-item.is-active .qs-enter {
    opacity: 1;
}
.qs-more {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 4px;
    padding: 6px 12px 6px 62px;
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.qs-more:hover {
    text-decoration: underline;
}
.qs-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: rgba(246, 245, 242, 0.6);
    color: var(--ink-3);
    font-size: 12.5px;
}
.qs-foot kbd {
    margin-right: 2px;
}
@media (max-width: 1080px) {
    .qs-trigger-label {
        min-width: 0;
    }
}
@media (max-width: 760px) {
    .qs-trigger {
        width: 38px;
        padding: 0;
        justify-content: center;
    }
    .qs-trigger-label,
    .qs-trigger kbd {
        display: none;
    }
    .qs-backdrop {
        padding: 12px 12px 0;
    }
    .qs {
        max-height: calc(100dvh - 24px);
    }
    .qs-input {
        height: 56px;
        font-size: 16px;
    }
    .qs-item {
        flex-wrap: wrap;
    }
    .qs-side {
        width: 100%;
        max-width: none;
        padding-left: 50px;
        margin-top: -4px;
    }
    .qs-matches {
        justify-content: flex-start;
    }
    .qs-enter,
    .qs-foot {
        display: none;
    }
    .qs-more {
        padding-left: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qs,
    .qs-item {
        animation: none;
        transition: none;
    }
}