/* ==========================================================================
   CRM Birdie — design system
   Brand gold #D99B28 comes from the Birdie logo.
   ========================================================================== */

:root {
    --brand: #D99B28;
    --brand-dark: #B27A14;
    --brand-darker: #7A5209;
    --brand-soft: #FDF4E4;

    --ink: #1F1D1A;
    --ink-2: #5C574E;
    --ink-3: #8A8477;

    --surface: #FFFFFF;
    --surface-alt: #F7F5F0;
    --canvas: #FAF8F4;
    --line: #E7E2D8;
    --line-strong: #D5CEC0;

    --ok: #4E8A2C;
    --ok-soft: #EDF5E4;
    --warn: #D99B28;
    --warn-soft: #FDF4E4;
    --danger: #C4302B;
    --danger-soft: #FBEAE9;
    --info-soft: #EAF1F8;
    --info-text: #1B5386;

    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(31, 29, 26, .05), 0 1px 3px rgba(31, 29, 26, .04);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: var(--canvas);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; margin: 0; }
h3 { font-size: 1.05rem; }

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- App shell ----------------------------------------------------------- */

.app-header {
    background: var(--ink);
    color: #fff;
    padding: 0;
    margin-bottom: 1.75rem;
    box-shadow: none;
}

.app-header .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.5rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -.01em;
}
.brand-mark:hover { text-decoration: none; color: #fff; }
.brand-mark img { width: 26px; height: 26px; display: block; }
.brand-mark .brand-birdie { color: var(--brand); }

.header-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .72);
}
.header-nav a { color: rgba(255, 255, 255, .82); }
.header-nav a:hover { color: #fff; text-decoration: none; }
.header-nav strong { color: #fff; font-weight: 600; }

.shell {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

main { padding: 0 0 3rem; }

/* --- Page head ----------------------------------------------------------- */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.page-head .count { color: var(--ink-3); font-size: .9rem; font-weight: 400; margin-left: .5rem; }

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

button, .btn {
    font-family: inherit;
    font-size: .9rem;
    padding: .5rem .95rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
button:hover, .btn:hover { background: var(--surface-alt); border-color: var(--ink-3); text-decoration: none; }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #3A2708;
    font-weight: 600;
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-2); }

/* --- Toolbar: search + filters ------------------------------------------- */

.toolbar {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.search-field {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}
.search-field i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: .95rem;
    pointer-events: none;
}
.search-field input[type="search"] {
    width: 100%;
    padding: .58rem .8rem .58rem 2.2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .92rem;
    font-family: inherit;
    color: var(--ink);
    margin: 0;
}
.search-field input[type="search"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 155, 40, .16);
}

.chip {
    font-size: .85rem;
    padding: .48rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.chip:hover { background: var(--surface-alt); border-color: var(--ink-3); }
.chip.is-active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-darker);
    font-weight: 600;
}
.chip .chip-count { color: var(--ink-3); font-weight: 400; margin-left: .3rem; }
.chip.is-active .chip-count { color: var(--brand-dark); }

/* --- Client table -------------------------------------------------------- */

.table-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

table.clients {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: .9rem;
}

table.clients thead th {
    background: var(--surface-alt);
    color: var(--ink-2);
    font-weight: 600;
    font-size: .76rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

table.clients tbody td {
    padding: .85rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.clients tbody tr:last-child td { border-bottom: none; }
table.clients tbody tr { transition: background .12s; }
table.clients tbody tr:hover { background: var(--surface-alt); }

.sort-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .85rem;
    margin-left: .25rem;
    color: var(--ink-3);
    padding: 0 .1rem;
}
.sort-btn:hover { background: transparent; color: var(--brand-dark); border: none; }

/* Status accent on the row */
td.cell-client {
    border-left: 3px solid transparent;
    padding-left: calc(.85rem - 3px);
}
tr.row-green  td.cell-client { border-left-color: var(--ok); }
tr.row-orange td.cell-client { border-left-color: var(--warn); }
tr.row-red    td.cell-client { border-left-color: var(--danger); }

.client-name { font-weight: 600; color: var(--ink); line-height: 1.35; }
.client-place { color: var(--ink-2); font-size: .84rem; margin-top: .12rem; }
.dept-code { color: var(--ink-3); }

.order-date { color: var(--ink); white-space: nowrap; }
.order-products { color: var(--ink-3); font-size: .82rem; margin-top: .2rem; line-height: 1.45; }

/* Status pill (read-only badge shown on mobile / alerts) */
.pill {
    display: inline-block;
    font-size: .78rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.pill-green  { background: var(--ok-soft);     color: #2F5A17; }
.pill-orange { background: var(--warn-soft);   color: var(--brand-darker); }
.pill-red    { background: var(--danger-soft); color: #8E1F1B; }

/* Payment Delay Badge */
.badge-payment {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .12rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: .2rem;
}
.badge-payment.delay-good {
    background: var(--ok-soft);
    color: #2F5A17;
    border: 1px solid rgba(75, 140, 43, .2);
}
.badge-payment.delay-warning {
    background: var(--warn-soft);
    color: var(--brand-darker);
    border: 1px solid rgba(217, 155, 40, .3);
}
.badge-payment.delay-danger {
    background: var(--danger-soft);
    color: #8E1F1B;
    border: 1px solid rgba(214, 69, 61, .3);
    font-weight: 700;
}

/* Unpaid Invoices Badge */
.badge-unpaid {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .73rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #f87171;
}

/* Stock & Sales Rate Badge */
.badge-stock {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .73rem;
    font-weight: 600;
    padding: .12rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
    margin-left: .35rem;
}
.badge-stock-rupture {
    background: var(--danger-soft);
    color: #8E1F1B;
    border: 1px solid rgba(214, 69, 61, .25);
}
.badge-stock-low {
    background: var(--warn-soft);
    color: var(--brand-darker);
    border: 1px solid rgba(217, 155, 40, .3);
}
.badge-stock-ok {
    background: var(--ok-soft);
    color: #2F5A17;
    border: 1px solid rgba(75, 140, 43, .2);
}
.order-bottles-meta {
    font-size: .75rem;
    color: var(--ink-3);
    margin-top: .25rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Email Promo Button */
.btn-promo-email {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--surface-alt);
    color: var(--ink-2);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: .2rem .5rem;
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
    margin-top: .35rem;
    margin-left: .25rem;
}
.btn-promo-email:hover {
    background: var(--brand-soft);
    color: var(--brand-darker);
    border-color: var(--brand);
}

/* Form controls inside the table */
table.clients input[type="date"],
table.clients select,
table.clients textarea {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: .87rem;
    color: var(--ink);
    margin: 0;
    display: block;
}
table.clients input[type="date"]:focus,
table.clients select:focus,
table.clients textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 155, 40, .16);
}
table.clients textarea.comment-input {
    min-height: 68px;
    resize: vertical;
    line-height: 1.5;
    background: var(--surface-alt);
}
table.clients textarea.comment-input:focus { background: var(--surface); }

/* Autosave indicator replaces the old save button */
.cell-comment { position: relative; }
.save-state {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    color: var(--ink-3);
    height: 1.1rem;
    margin-top: .25rem;
    opacity: 0;
    transition: opacity .2s;
}
.save-state.is-visible { opacity: 1; }
.save-state.is-saved { color: var(--ok); }
.save-state.is-error { color: var(--danger); }

table.clients input[type="date"].is-autofilled {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.no-gps {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--ink-3);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .5rem;
}

tr.status-closed-permanently { background: var(--danger-soft) !important; }
tr.status-closed-permanently:hover { background: #F7DEDC !important; }
tr.status-closed-permanently .client-name { color: #8E1F1B; }

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ink-2);
}
.empty-state i { font-size: 1.9rem; color: var(--ink-3); display: block; margin-bottom: .6rem; }

/* --- Legend -------------------------------------------------------------- */

.legend-row {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    font-size: .8rem;
    color: var(--ink-3);
}
.legend-row .dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    margin-right: .35rem;
}
.dot-green { background: var(--ok); }
.dot-orange { background: var(--warn); }
.dot-red { background: var(--danger); }

/* --- Map ----------------------------------------------------------------- */

.map-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

#map {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: 74vh;
    min-height: 440px;
}

.map-filters {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .9rem 1rem;
}
.filter-group { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.filter-group:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.filter-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: .55rem;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.filter-chips .chip { font-size: .78rem; padding: .35rem .65rem; }

.filter-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .84rem;
    color: var(--ink-2);
    margin-bottom: .4rem;
    cursor: pointer;
}
.filter-check:last-child { margin-bottom: 0; }
.filter-check input { margin: 0; accent-color: var(--brand); cursor: pointer; }
.filter-check .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.filter-check .c { margin-left: auto; color: var(--ink-3); font-size: .78rem; }

#f-status {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: .84rem;
    color: var(--ink);
}
#f-status:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(217, 155, 40, .16); }

.filter-legend .legend-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--ink-2);
    margin-bottom: .4rem;
}
.pin-demo {
    width: 13px; height: 13px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    flex: none;
    border: 1.5px solid #fff;
}
.pin-demo.ringed { box-shadow: 0 0 0 2px #2D6FB8; }
.pin-demo.pin-prospect { background: #fff; border: 2px dashed var(--ink-2); }
.filter-hint { font-size: .75rem; color: var(--ink-3); margin-top: .3rem; font-style: italic; }
.panel-verdict {
    margin-top: .5rem;
    padding: .45rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    line-height: 1.45;
}
.panel-verdict.is-ok { background: var(--ok-soft); color: #2F5A17; }
.panel-verdict.is-warn { background: var(--warn-soft); color: var(--brand-darker); }
.panel-verdict.is-bad { background: var(--danger-soft); color: #8E1F1B; }

.panel-review {
    margin-top: .5rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--brand-darker);
    font-size: .78rem;
    line-height: 1.45;
}

.crm-pin { background: none; border: none; }
.crm-pin.is-selected svg {
    transform: scale(1.22);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35));
}

/* --- Map: client detail panel -------------------------------------------- */

.map-stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.map-stage #map {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#client-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(350px, 92%);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -8px 0 22px rgba(0, 0, 0, .12);
    transform: translateX(105%);
    /* visibility keeps the closed panel out of the keyboard tab order;
       it is delayed on close so the slide-out stays visible */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    z-index: 1100;
}
#client-panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: 1rem 1.1rem .85rem;
    border-bottom: 1px solid var(--line);
}
.panel-head-text { min-width: 0; }
.panel-name { font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.panel-address { color: var(--ink-3); font-size: .82rem; margin-top: .2rem; }
.panel-close {
    margin-left: auto;
    flex: none;
    border: none;
    background: none;
    color: var(--ink-3);
    font-size: 1rem;
    line-height: 1;
    padding: .3rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.panel-close:hover { background: var(--surface-alt); color: var(--ink); }

/* --- Map search ----------------------------------------------------------- */

.map-search {
    position: absolute;
    top: 12px;
    left: 60px;
    z-index: 1050;
    width: min(320px, calc(100% - 130px));
}
.map-search > i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: .9rem;
    pointer-events: none;
    z-index: 1;
}
.map-search input[type="search"] {
    width: 100%;
    padding: .55rem .8rem .55rem 2.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-family: inherit;
    font-size: .88rem;
    color: var(--ink);
}
.map-search input[type="search"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 155, 40, .16);
}

/* Out of the flow: otherwise the open list grows .map-search and the loupe,
   centred on that box, drifts down into the results. */
.map-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: .3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    max-height: 17rem;
    overflow-y: auto;
}
.map-search-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    padding: .5rem .7rem;
    cursor: pointer;
}
.map-search-item:last-of-type { border-bottom: none; }
.map-search-item:hover,
.map-search-item.is-highlighted { background: var(--brand-soft); border-color: var(--line); }
.msi-name { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.msi-city { font-size: .78rem; color: var(--ink-2); }
.msi-tag {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    border: 1px dashed var(--ink-3);
    border-radius: 999px;
    padding: 0 .35rem;
    margin-left: .3rem;
}
.map-search-empty,
.map-search-more {
    padding: .5rem .7rem;
    font-size: .78rem;
    color: var(--ink-3);
}
.map-search-more { border-top: 1px solid var(--line); background: var(--surface-alt); }

@media (max-width: 900px) {
    .map-search { left: 52px; width: calc(100% - 64px); }
}

/* Action bar sits outside the scrolling body: reachable at any scroll position */
.panel-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--line);
    flex: none;
}
/* the display below would otherwise override the hidden attribute and keep
   the previous client's phone number on screen */
.panel-actions > [hidden] { display: none; }
.panel-actions > * {
    flex: 1 1 7.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .6rem;
    font-size: .85rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
/* consulting actions share a row, the primary one gets its own full width */
.panel-actions .add-tour-btn {
    flex: 1 1 100%;
    background: var(--brand);
    border-color: var(--brand);
    color: #3A2708;
    font-weight: 600;
}
.panel-actions .add-tour-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.panel-actions .add-tour-btn.is-added {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: #2F5A17;
}

.panel-body { overflow-y: auto; padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; }
.panel-section { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.panel-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.panel-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: .55rem;
}
.panel-order-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ink);
    font-weight: 600;
}
.order-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.panel-products { color: var(--ink-2); font-size: .82rem; margin-top: .35rem; line-height: 1.5; }

.panel-field {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: .75rem;
}
.panel-field input,
.panel-field select,
.panel-field textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .5rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 400;
    color: var(--ink);
}
.panel-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .4rem;
}
.panel-title-flex .panel-title { margin-bottom: 0; }
.google-rating-badge {
    font-size: .78rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: .15rem .45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
.google-rating-badge .rating-count {
    color: #92400e;
    font-weight: 400;
    font-size: .72rem;
}
.panel-hours-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    margin-bottom: .4rem;
}
.hours-status-badge {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.hours-status-badge.is-open {
    background: #dcfce7;
    color: #166534;
}
.hours-status-badge.is-closed {
    background: #fee2e2;
    color: #991b1b;
}
.hours-today-text {
    color: var(--ink-secondary);
    font-size: .84rem;
}
.panel-hours-details {
    margin-top: .3rem;
    font-size: .8rem;
    border-top: 1px dashed var(--line);
    padding-top: .35rem;
}
.panel-hours-details summary.hours-toggle {
    cursor: pointer;
    color: var(--ink-secondary);
    font-weight: 500;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.panel-hours-details summary.hours-toggle::-webkit-details-marker { display: none; }
.hours-list {
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.hours-row {
    display: flex;
    justify-content: space-between;
    padding: .2rem .4rem;
    border-radius: 4px;
    color: var(--ink-secondary);
}
.hours-row.is-today {
    background: var(--surface-subtle);
    color: var(--ink);
    font-weight: 600;
}
.hours-day { min-width: 80px; }
.hours-time { text-align: right; }

@media (max-width: 900px) {
    .map-layout { grid-template-columns: 1fr; }
    #map { height: 60vh; }

    #client-panel {
        top: auto;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        max-height: 90%;
        border-left: none;
        border-top: 1px solid var(--line);
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: 0 -8px 22px rgba(0, 0, 0, .16);
        transform: translateY(105%);
    }
    #client-panel.is-open { transform: translateY(0); }

    /* On a phone the map is short, so put the editable follow-up first and
       shrink the comment box: date, status and comment all fit without
       scrolling, the order recap sits underneath. */
    .panel-section.panel-followup { order: -1; }
    .panel-field { margin-bottom: .4rem; }
    /* height, not min-height: the rows attribute drives the natural height */
    .panel-field textarea { min-height: 0; height: 64px; }
    /* one row on a phone: the two consulting actions shrink to their icon so
       the comment field stays above the fold */
    .panel-actions { padding: .45rem 1.1rem; gap: .4rem; }
    .panel-actions > * { padding: .4rem .5rem; }
    .panel-actions #p-phone,
    .panel-actions #p-google { flex: 0 0 auto; min-width: 2.9rem; }
    .panel-actions #p-phone-text,
    .panel-actions .action-label { display: none; }
    .panel-actions .add-tour-btn { flex: 1 1 auto; }
}

/* --- Tour (tournée) ------------------------------------------------------ */

.tour-link { display: inline-flex; align-items: center; gap: .35rem; }
.tour-badge {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--brand);
    color: #3A2708;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25rem;
}

.tour-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tour-legs { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.legs-label { font-size: .82rem; color: var(--ink-3); width: 100%; }
.legs-count { color: var(--ink-3); font-size: .78rem; margin-left: .3rem; }

.tour-list { list-style: none; margin: 0; padding: 0; }
.tour-stop {
    display: flex;
    gap: .85rem;
    padding: .9rem;
    border-bottom: 1px solid var(--line);
}
.tour-stop:last-child { border-bottom: none; }
.tour-stop.is-done { background: var(--ok-soft); }
.tour-stop.is-done .stop-name { text-decoration: line-through; color: var(--ink-3); }

.stop-rank {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tour-stop.is-done .stop-rank { background: var(--ok); }
.stop-main { flex: 1; min-width: 0; }
.stop-head { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.stop-name { font-weight: 600; line-height: 1.3; }
.stop-place { color: var(--ink-2); font-size: .84rem; margin-top: .1rem; }
.stop-move { display: flex; gap: .15rem; flex: none; }

.icon-btn {
    border: none;
    background: none;
    color: var(--ink-3);
    padding: .25rem .35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .85rem;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-alt); color: var(--ink); border: none; }
.icon-btn:disabled { opacity: .3; cursor: default; }

.stop-meta {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: .45rem;
    font-size: .82rem;
    color: var(--ink-2);
}
.dot-green { background: var(--ok); }
.dot-orange { background: var(--warn); }
.dot-red { background: var(--danger); }
.stop-phone { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.stop-badge {
    background: var(--surface-alt);
    border: 1px dashed var(--ink-3);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .74rem;
    color: var(--ink-2);
    font-weight: 600;
}
.stop-nophone { color: var(--ink-3); font-size: .8rem; }

.stop-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.btn-sm { font-size: .82rem; padding: .35rem .7rem; }

.stop-followup { margin-top: .6rem; }
.stop-followup summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--ink-2);
    padding: .25rem 0;
}
.stop-followup summary:hover { color: var(--brand-dark); }
.stop-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-top: .5rem; }
.stop-fields label { font-size: .76rem; font-weight: 600; color: var(--ink-3); display: block; }
.stop-fields label:last-of-type { grid-column: 1 / -1; }
.stop-fields input, .stop-fields select, .stop-fields textarea {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .45rem .55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface);
}
.stop-fields textarea { resize: vertical; line-height: 1.5; }
.stop-fields input:focus, .stop-fields select:focus, .stop-fields textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 155, 40, .16);
}
.stop-fields .save-state { grid-column: 1 / -1; margin-top: 0; }

.add-tour-btn {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--radius-sm);
    padding: .28rem .5rem;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
}
.add-tour-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-darker); }
.add-tour-btn.is-added { background: var(--ok-soft); border-color: var(--ok); color: #2F5A17; }

.client-phone { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; margin-top: .2rem; }

@media (max-width: 900px) {
    .tour-actions { gap: .4rem; }
    .tour-actions button { flex: 1 1 auto; }
    .stop-fields { grid-template-columns: 1fr; }
}

/* --- Prospect existence check -------------------------------------------- */

.exists-box {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .82rem;
    color: var(--ink-2);
    padding: .3rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    white-space: nowrap;
}
.exists-box:hover { background: var(--surface-alt); }
.exists-box input { accent-color: var(--ok); cursor: pointer; margin: 0; }
tr.row-confirmed { background: var(--ok-soft); }
tr.row-confirmed .exists-box {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: #2F5A17;
    font-weight: 600;
}

/* --- Matching review ----------------------------------------------------- */

.page-intro { color: var(--ink-2); font-size: .9rem; max-width: 60ch; margin: 0 0 1.2rem; }

.case-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    margin-bottom: .8rem;
}
.case-card.is-settled { opacity: .55; background: var(--surface-alt); }

.case-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
    font-size: .76rem;
    color: var(--ink-3);
}
.case-dept {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-weight: 600;
}

.case-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
}
.case-side {
    border-left: 3px solid var(--line-strong);
    padding-left: .7rem;
}
.case-side:first-child { border-left-color: var(--ink-2); }
.case-side:last-child { border-left-color: var(--brand); }
.case-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: .2rem;
}
.case-name { font-weight: 600; line-height: 1.3; }
.case-detail { font-size: .82rem; color: var(--ink-2); margin-top: .12rem; }

.case-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}
.case-done { font-size: .85rem; color: var(--ok); font-weight: 600; }

@media (max-width: 900px) {
    .case-actions button { flex: 1 1 100%; }
}

/* --- Cards / admin / login ----------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.35rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.5rem;
}
.admin-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}
.admin-section h3 {
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
}
.admin-section form { display: flex; flex-direction: column; gap: .7rem; }
.admin-section input, .admin-section select {
    padding: .58rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    margin: 0;
}
.admin-section input:focus, .admin-section select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 155, 40, .16);
}
.admin-section table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-section th {
    text-align: left;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-2);
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
}
.admin-section td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }

.department-tag {
    display: inline-block;
    background: var(--surface-alt);
    color: var(--ink-2);
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    font-size: .8rem;
    margin: 0 .3rem .3rem 0;
    cursor: pointer;
}
.department-tag:hover { background: var(--danger-soft); border-color: var(--danger); color: #8E1F1B; }

/* A deactivated salesperson stays in the table -- their comments live on the
   row -- but reads as archived rather than current. */
.row-inactive { background: var(--surface-alt); }
.row-inactive td { color: var(--ink-3); }
.row-inactive a { color: var(--ink-2); }
.tag-inactive {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink-3);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.btn-deactivate:hover { background: var(--danger-soft); border-color: var(--danger); color: #8E1F1B; }

.flash-info {
    padding: .8rem 1rem;
    background: var(--info-soft);
    color: var(--info-text);
    border: 1px solid #C7DBEF;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.flash-error {
    padding: .8rem 1rem;
    background: var(--danger-soft);
    color: #8E1F1B;
    border: 1px solid #F0C9C7;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .9rem;
}

.login-wrap { display: flex; justify-content: center; padding: 2.5rem 0; }
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 1.75rem;
}
.login-card .login-logo { text-align: center; margin-bottom: 1.25rem; }
.login-card .login-logo img { width: 46px; height: 46px; }
.login-card h2 { text-align: center; font-size: 1.15rem; margin-bottom: 1.4rem; }
.login-card label {
    display: block;
    margin-bottom: .35rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-2);
}
.login-card input {
    width: 100%;
    padding: .62rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .95rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}
.login-card input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(217, 155, 40, .16);
}
.login-card button { width: 100%; padding: .68rem; font-size: .95rem; }

#feedback-message {
    padding: .7rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    margin-top: 1rem;
}

.version-info { text-align: center; margin-top: 2rem; color: var(--ink-3); font-size: .8rem; }

/* --- Responsive: table becomes cards ------------------------------------- */

@media (max-width: 900px) {
    .shell { padding: 0 .9rem; }
    .app-header .shell { padding: .7rem .9rem; }
    main { padding-bottom: 2rem; }

    .table-card { border: none; box-shadow: none; background: transparent; overflow: visible; }
    table.clients thead { display: none; }
    table.clients, table.clients tbody, table.clients tr, table.clients td { display: block; width: 100%; }

    table.clients tbody tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-left: 3px solid var(--line-strong);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-bottom: .8rem;
        padding: .9rem;
        overflow: hidden;
    }
    tr.row-green  { border-left-color: var(--ok) !important; }
    tr.row-orange { border-left-color: var(--warn) !important; }
    tr.row-red    { border-left-color: var(--danger) !important; }

    table.clients tbody td { border: none; padding: 0 0 .7rem; }
    table.clients tbody td:last-child { padding-bottom: 0; }
    td.cell-client { border-left: none; padding-left: 0; }
    .client-name { font-size: 1rem; }

    table.clients tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink-3);
        margin-bottom: .25rem;
        font-weight: 600;
    }

    .cell-contact-date, .cell-status { display: inline-block !important; width: calc(50% - .35rem) !important; vertical-align: top; }
    .cell-contact-date { margin-right: .6rem; }

    .toolbar { gap: .45rem; }
    .search-field { flex: 1 1 100%; }
    .page-head h2 { font-size: 1.15rem; }
}

/* --- Modal Promo Email --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn 0.15s ease-out;
}

.promo-modal-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--line);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-alt);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.modal-close-btn:hover {
    color: var(--ink-1);
    background: var(--line);
}

.modal-body {
    padding: 1.4rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-body .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.modal-body label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.modal-body input[type="text"],
.modal-body textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--ink-1);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.modal-body input[type="text"]:focus,
.modal-body textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(43, 83, 41, 0.15);
}

.modal-body .form-control-readonly {
    background: var(--surface-alt) !important;
    color: var(--ink-2) !important;
    border-color: var(--line) !important;
    cursor: default;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--line);
    background: var(--surface-alt);
}

.modal-footer .btn-secondary {
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
}
.modal-footer .btn-secondary:hover {
    background: var(--surface-alt);
    color: var(--ink-1);
}

.modal-footer .btn-primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    padding: 0.55rem 1.2rem;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s ease;
}
.modal-footer .btn-primary:hover {
    background: var(--brand-dark);
}
.modal-footer .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Admin promo toggle & email styling */
.btn-toggle-promo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
}
.btn-toggle-promo.promo-enabled {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}
.btn-toggle-promo.promo-enabled:hover {
    background: #c8e6c9;
}
.btn-toggle-promo.promo-disabled {
    background: #f5f5f5;
    color: #757575;
    border-color: #e0e0e0;
}
.btn-toggle-promo.promo-disabled:hover {
    background: #eeeeee;
    color: #424242;
}
.admin-email-input {
    padding: .3rem .5rem;
    font-size: .82rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--ink-1);
}
.admin-email-input:focus {
    outline: none;
    border-color: var(--brand);
}
.btn-save-email {
    padding: .3rem .55rem;
    font-size: .8rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    transition: all .15s ease;
}
.btn-save-email:hover {
    background: var(--surface-alt);
    color: var(--brand);
}

/* Enrichment Monitor & KPI Cards */
.enrichment-monitor-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.2rem;
}
.engine-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
.engine-badge.engine-running {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.engine-badge.engine-done {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.engine-badge.engine-idle {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.spin {
    animation: spin 2s linear infinite;
    display: inline-block;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

.enrichment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.kpi-card {
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.kpi-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-secondary);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}
.kpi-value.kpi-highlight {
    color: #059669;
}
.kpi-value.kpi-alert {
    color: #dc2626;
}
.kpi-total {
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink-secondary);
}
.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .2rem;
}
.progress-bar-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
    transition: width .4s ease;
}
.kpi-subtext {
    font-size: .75rem;
    color: var(--ink-secondary);
}

/* Status Guide Box */
.status-guide-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
}
.guide-title {
    font-size: .82rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.guide-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}
.guide-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .78rem;
    color: #475569;
    line-height: 1.35;
}
.guide-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}
.guide-badge.badge-active { background: #dcfce7; color: #166534; }
.guide-badge.badge-prospect { background: #f1f5f9; color: #475569; }
.guide-badge.badge-closed { background: #fee2e2; color: #991b1b; }
.guide-badge.badge-hours { background: #fef3c7; color: #92400e; }
.btn-save-email:hover {
    background: var(--surface-alt);
    color: var(--ink-1);
    border-color: var(--ink-3);
}