/* ── Reset & tokens ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light theme (default) ───────────────────────────────────────────────── */
:root, [data-theme="light"] {
    --bg:      #E4F3F7;
    --surface: #ffffff;
    --text:    #1A1A18;
    --muted:   #7A9EA8;
    --border:  #ffffffad;
    --border2: #ffffff59;
    --focus:   #63b9cf;
    --accent:  #63b9cf;
    --accent2: #3E9AB4;
    --err-bg:  #fff5f5; --err-bd: #e5c5c5; --err-tx: #8b2020;
    --ok-bg:   #f5fff8; --ok-bd:  #c5e5cc; --ok-tx:  #1a6630;
    --warn-bg: #fffbeb; --warn-bd:#f0d060; --warn-tx:#7a6010;
    --r:       8px;
    --trans:   0.16s ease;

    /* ── Themed layer colours — edit these to tune the look ── */
    --body-overlay: rgba(228, 244, 250, 0.82);
    --header-bg:    rgba(228, 244, 250, 0.78);
    --header-bd:    rgba(255, 255, 255, 0.55);
    --col-bg:       rgba(255, 255, 255, 0.20);
    --card-bg:      rgba(255, 255, 255, 0.88);
    --card-bd:      rgba(255, 255, 255, 0.60);
    --card-hover:   0 2px 8px rgba(0,0,0,0.08);

    /* ── Kanban card text ── */
    --card-id:      #63b9cf;
    --card-text:    #1A1A18;
    --card-muted:   #6B8C96;
    --card-label:   #3A5A62;
    --card-amount:  #0F3D47;
    --card-date:    #8AABB3;
    --card-obj-sum: #0F3D47;
    --card-line1:   #000000;
    --card-line2:   rgba(0, 0, 0, 0.12);
    --toolbar-text: #1A1A18;
    --col-shadow:  rgb(0 0 0 / 42%);
    --kanban-foot-c: #63b9cf;
    --icon-clock:      #63b9cf;
    --icon-house:      #8bc34a;
    --icon-person:     #63b9cf;
    --icon-ambassador: #d4a017;

    /* ── Modal system ── */
    --modal-bg:         var(--card-bg);
    --modal-bd:         rgba(255,255,255,0.55);
    --modal-sep:        rgba(0,0,0,0.07);
    --modal-pad:        24px;
    --modal-gap:        16px;
    --modal-input-h:    38px;
    --modal-input-pad:  8px 12px;
    --modal-radius:     12px;
    --modal-shadow:     0 24px 64px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
    --modal-overlay-bg: rgba(0,0,0,0.28);
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:      #1C1B19;
    --surface: #242320;
    --text:    #EDEAE4;
    --muted:   #686560;
    --border:  #333028;
    --border2: #ffffff14;
    --focus:   #ffd661;
    --accent: #ffd661;
    --accent2: #fdc11d;
    --err-bg:  #1a0a0a; --err-bd: #4a1515; --err-tx: #f07070;
    --ok-bg:   #0a1a0d; --ok-bd:  #1a4a22; --ok-tx:  #70c080;
    --warn-bg: #1a1600; --warn-bd:#4a3f00; --warn-tx:#d4b832;

    --body-overlay: rgb(255 255 255 / 0%);
    --header-bg:   rgb(16 14 10 / 0%);
    --header-bd:    rgba(255, 255, 255, 0.08);
    --col-bg:       rgba(255, 255, 255, 0.04);
    --card-bg:     rgb(255, 255, 250);
    --card-bd:      rgba(255, 255, 255, 0.08);
    --card-hover:   0 2px 8px rgba(0,0,0,0.40);

    /* ── Kanban card text ── */
    --card-id:      #a2a2a2;
    --card-text:    #000000;
    --card-muted:   #7A7670;
    --card-label:  #000000;
    --card-amount:  #F0DDB0;
    --card-date:    #000000;
    --card-obj-sum: #fdc11d;
    --card-line1:   #000000;
    --card-line2:   rgb(189 189 189);
    --toolbar-text: #EDEAE4;
    --col-shadow:   rgb(0 0 0 / 42%);
    --kanban-foot-c: #ffffff;
    --icon-clock:      #63b9cf;
    --icon-house:      #8bc34a;
    --icon-person:     #63b9cf;
    --icon-ambassador: #d4a017;

    /* ── Modal system (dark) ── */
    --modal-bd:         rgba(255,255,255,0.10);
    --modal-sep:        rgb(255 255 250);
    --modal-shadow:     0 24px 64px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.2);
    --modal-overlay-bg: rgba(0,0,0,0.55);
}

html, body { height: 100%; overflow-x: hidden; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: var(--text);
    background-image: linear-gradient(var(--body-overlay), var(--body-overlay)), url('/assets/img/auth-bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.text-link {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--trans), border-color var(--trans);
    font-size: 13px;
}
.text-link:hover { color: var(--text); border-color: var(--text); }

.back-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--muted); text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--trans), border-color var(--trans);
}
.back-link:hover { color: var(--text); border-color: var(--text); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 52px;
    background: var(--accent); color: #000000;
    border: none; border-radius: var(--r);
    font-family: inherit; font-size: 13px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: background var(--trans);
    -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover:not(:disabled) { background: var(--accent2); }
.btn-primary:active:not(:disabled) { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary.btn-sm  { width: auto; height: 38px; padding: 0 20px; font-size: 12px; }
.btn-ghost.btn-sm    { height: 32px; padding: 0 14px; font-size: 12px; }
.btn-arrow { transition: transform var(--trans); }
.btn-primary:hover:not(:disabled) .btn-arrow { transform: translateX(4px); }

.btn-loader {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-outline-sm {
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 14px;
    font-family: inherit; font-size: 11px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text); background: none;
    border: 1px solid var(--border); border-radius: var(--r);
    cursor: pointer; text-decoration: none;
    transition: border-color var(--trans), background var(--trans);
}
.btn-outline-sm:hover { border-color: var(--text); background: var(--bg); }

.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 20px;
    font-family: inherit; font-size: 13px;
    color: var(--muted); background: none; border: none;
    cursor: pointer; transition: color var(--trans);
}
.btn-ghost:hover { color: var(--text); }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    padding: 13px 16px; border-radius: var(--r);
    font-size: 13px; font-weight: 400; margin-bottom: 20px; line-height: 1.5;
}
.alert-error   { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err-tx); }
.alert-success { background: var(--ok-bg);  border: 1px solid var(--ok-bd);  color: var(--ok-tx);  }
.alert-icon    { margin-right: 6px; }

/* ── Toast notifications ────────────────────────────────────────────────── */
.toast-stack {
    position: fixed; top: 24px; left: 50%; z-index: 9000;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 12px;
    background: color-mix(in srgb, var(--modal-bg) 90%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid var(--modal-bd);
    border-left: 4px solid var(--icon-house);
    border-radius: var(--modal-radius);
    overflow: hidden;
    padding: 14px 22px 14px 16px;
    font-size: 14px; font-weight: 600; color: var(--card-text);
    box-shadow: var(--modal-shadow);
    opacity: 0; transform: translateY(-16px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
    pointer-events: auto;
    max-width: 380px;
}
.toast.is-visible { opacity: 1; transform: none; }
.toast-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--icon-house);
    border: 2px solid color-mix(in srgb, var(--icon-house) 35%, transparent);
    background: color-mix(in srgb, var(--icon-house) 12%, var(--modal-bg));
}
.toast--error { border-left-color: var(--err-tx); }
.toast--error .toast-icon {
    color: var(--err-tx);
    border-color: color-mix(in srgb, var(--err-tx) 35%, transparent);
    background: color-mix(in srgb, var(--err-tx) 12%, var(--modal-bg));
}
.toast--warn { border-left-color: var(--warn-tx); }
.toast--warn .toast-icon {
    color: var(--warn-tx);
    border-color: color-mix(in srgb, var(--warn-tx) 35%, transparent);
    background: color-mix(in srgb, var(--warn-tx) 12%, var(--modal-bg));
}
@media (max-width: 480px) {
    .toast-stack { left: 16px; right: 16px; top: 16px; transform: none; align-items: stretch; }
    .toast { max-width: none; }
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 22px; }

.field-label {
    display: block; font-size: 11px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 9px;
}

.field-wrap { position: relative; }

.field-input {
    width: 100%; height: 50px; padding: 9px;
    background: white; border: none;
    border-bottom: 1px solid var(--border); border-radius: 5px;
    font-family: inherit; font-size: 15px; font-weight: 300;
    /* Background here is always white regardless of theme, so the text colour
       must stay a fixed dark shade too — following --text would turn it light
       (near-invisible on white) whenever dark theme is active on this page. */
    color: #1A1A18; outline: none;
    transition: border-color var(--trans);
    -webkit-appearance: none;
}
.field-input::placeholder { color: var(--muted); }
.field-input:focus        { border-color: var(--focus); }
.field-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
    -webkit-text-fill-color: #1A1A18;
}

.field-select {
    width: 100%; height: 50px; padding: 0 32px 0 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 4px center;
    border: none; border-bottom: 1px solid var(--border); border-radius: 0;
    font-family: inherit; font-size: 15px; font-weight: 300;
    color: var(--text); outline: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--trans);
}
.field-select:focus { border-color: var(--focus); }
/* The native option popup renders on a light OS background regardless of
   page theme, so option text must stay a fixed dark shade (same reasoning
   as .field-input above) or it goes near-invisible in dark theme. */
.field-select option { color: #1A1A18; background: #fff; }

.field-hint  { font-size: 11px; color: var(--muted); margin-top: 6px; }
.field-error { font-size: 11px; color: #e05252; margin-top: 6px; display: block; }

.field.is-error .field-input  { border-color: #e05252; }
.field.is-valid .field-input  { border-color: #5ba85a; }
.field.is-error .field-label  { color: #e05252; }
.field.is-valid .field-label  { color: #5ba85a; }

.field-eye {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--muted);
    transition: color var(--trans); -webkit-tap-highlight-color: transparent;
}
.field-eye:hover { color: var(--text); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.strength-track { height: 2px; background: var(--border); border-radius: 1px; margin-top: 8px; overflow: hidden; }
.strength-bar   { height: 100%; width: 0; border-radius: 1px; transition: width 0.3s, background 0.3s; }

/* ── Checkbox ───────────────────────────────────────────────────────────── */
.checkbox-wrap  { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox-inp   { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-box   {
    width: 18px; height: 18px; border: 1.5px solid rgba(0,0,0,0.32); border-radius: var(--r);
    background: rgba(255,255,255,0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent;
    transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.checkbox-wrap:hover .checkbox-box    { border-color: rgba(0,0,0,0.5); background: rgba(255,255,255,0.75); }
.checkbox-inp:checked + .checkbox-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.checkbox-label { font-size: 13px; color: var(--muted); }

.options-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }

/* ── Auth layout ────────────────────────────────────────────────────────── */
.auth-body { background: #0d0b08; min-height: 100dvh; position: relative; }

/* Background photo layer */
.auth-bg {
    position: fixed; inset: 0; z-index: 0;
    background: url('/assets/img/auth-bg.jpg') center / cover no-repeat;
}

/* Dark blur overlay */
.auth-overlay {
    position: fixed; inset: 0; z-index: 1;
    background: rgba(6, 5, 3, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Top bar: logo + lang switcher */
.auth-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px;
}

.brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name { font-size: 18px; font-weight: 500; color: #fff; letter-spacing: 0.1em; text-transform: uppercase; }
.brand-logo-img { height: 28px; width: auto; display: block; }

/* Centering wrapper — spans the full viewport just to center .auth-card, so
   it must not swallow clicks meant for .auth-top (logo/lang-switcher) sitting
   underneath its empty top padding. */
.auth-page {
    position: relative; z-index: 2;
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 76px 16px 40px;
    pointer-events: none;
}

/* Form card */
.auth-card {
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: 14px;
    padding: 48px 44px 44px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.05);
    animation: authCardIn 0.35s ease both;
    pointer-events: auto;
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-form-wrap { width: 100%; }
.auth-header    { margin-bottom: 32px; }
.auth-title     { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; margin-bottom: 8px; }
.auth-subtitle  { font-size: 14px; color: var(--muted); }
.auth-footer    { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); text-align: center; }

.lockout-block  { text-align: center; padding: 16px 0 28px; }
.lockout-timer  { font-size: 48px; font-weight: 300; color: var(--text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lockout-label  { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ── Lang switcher ──────────────────────────────────────────────────────── */
.lang-switcher   { display: flex; align-items: center; gap: 4px; }
.lang-btn        { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); background: none; border: none; cursor: pointer; padding: 4px 6px; text-decoration: none; transition: color var(--trans); }
.lang-btn:hover, .lang-btn.is-active { color: #fff; }
.lang-sep        { color: rgba(255,255,255,0.2); font-size: 11px; }

/* ── App layout ─────────────────────────────────────────────────────────── */
.app-body { display: flex; flex-direction: column; min-height: 100vh; }

.admin-banner {
    background: var(--warn-bg); border-bottom: 1px solid var(--warn-bd);
    color: var(--warn-tx); font-size: 13px; text-align: center;
    padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 8px;
}

.trial-banner { flex-wrap: wrap; row-gap: 8px; }
.btn-trial-pay {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 5px 14px; border-radius: 6px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 600; text-decoration: none;
    white-space: nowrap; transition: opacity var(--trans);
}
.btn-trial-pay:hover { opacity: .85; }
.trial-banner-qr { flex-shrink: 0; border-radius: 4px; background: #fff; padding: 2px; cursor: pointer; }

.qr-lightbox-box {
    background: var(--modal-bg); border: 1px solid var(--modal-bd);
    border-radius: var(--modal-radius); box-shadow: var(--modal-shadow);
    padding: 20px; opacity: 0; transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.qr-lightbox-overlay.is-open .qr-lightbox-box { opacity: 1; transform: none; }
.qr-lightbox-box img { display: block; width: min(70vw, 320px); height: auto; border-radius: 4px; cursor: pointer; }

.app-header {
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--header-bd);
    height: 50px; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
}
.app-header-left  { display: flex; align-items: center; gap: 28px; }
.app-header-right { display: flex; align-items: center; gap: 16px; }

.app-logo { display: inline-flex; align-items: center; text-decoration: none; }
.app-logo-img { height: 26px; width: auto; display: block; }

.app-nav       { display: flex; align-items: center; gap: 4px; }
.app-nav-link  {
    font-size: 13px; color: var(--muted); text-decoration: none;
    padding: 6px 10px; border-radius: var(--r);
    transition: color var(--trans), background var(--trans);
}
.app-nav-link:hover     { color: var(--text); background: var(--bg); }
.app-nav-link.is-active { color: var(--text); font-weight: 400; background: var(--bg); }
.app-nav-section { font-size: 13px; color: var(--text); font-weight: 500; padding: 6px 4px; white-space: nowrap; }

.view-toggle        { display: flex; align-items: center; gap: 2px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow: hidden; }
.view-toggle-label  { font-size: 12px; color: var(--toolbar-text);  white-space: nowrap; }
.view-toggle-link   { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--toolbar-text); text-decoration: none; padding: 5px 8px; border-radius: var(--r); transition: color var(--trans), background var(--trans); }
.view-toggle-link:hover     { color: var(--toolbar-text); background: var(--bg); }
.view-toggle-link.is-active { color: var(--accent); background: var(--bg); }
.view-toggle-icon   { display: none; flex-shrink: 0; }
.view-toggle-sep    { font-size: 13px; color: var(--toolbar-text); opacity: 0.4; }

.app-username { font-size: 13px; color: var(--muted); }

.app-main { flex: 1; width: 0; min-width: 100%; max-width: 100%; overflow: hidden; }

/* ── Page toolbar ───────────────────────────────────────────────────────── */
.deals-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
}
.deals-toolbar-left { display: flex; align-items: center; gap: 20px; }
.deals-toolbar-right { display: flex; align-items: center; gap: 15px; }
.page-title { font-size: 20px; font-weight: 300; letter-spacing: -0.01em; }

/* ── Kanban board ───────────────────────────────────────────────────────── */
.kanban-board {
    display: flex;
    gap: 0;
    width: 0;          /* combined with min-width:100% this forces the box to the
                           containing block's width no matter what the flex/stretch
                           context does, so it can never grow to fit its children */
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 24px 12px;
    height: calc(100vh - 80px - 50px);
    
}
.kanban-board::-webkit-scrollbar { height: 7px; }
.kanban-board::-webkit-scrollbar-track { background: rgba(0,0,0,0.08); border-radius: 4px; }
.kanban-board::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 70%, white); border-radius: 4px; }
.kanban-board::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.kanban-col {
    flex: 0 0 280px; display: flex; flex-direction: column;
    background: var(--col-bg); border-radius: var(--r);
    margin-right: 8px; scrollbar-color: #ccc transparent;
    backdrop-filter: blur(4px);
    position: relative;
}
.kanban-col:last-child { margin-right: 0; }

/* Bottom depth shadow — stays fixed as cards scroll */
.kanban-col::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 18px;
    background: linear-gradient(to bottom, #ffffff00, var(--col-shadow));
    border-radius: 0 0 var(--r) var(--r);
    pointer-events: none;
    z-index: 2;
}

.kanban-col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 6px 0 11px;
    width: calc(100% - 9px);
    flex-shrink: 0;
    background: var(--col-color, var(--accent));
    border-radius: 8px 4px 4px 8px;
    position: relative;
    
}
.kanban-col-head::after {
    content: '';
    position: absolute;
    top: 1px;
    right: -7px;
    width: 8px;
    height: 32px;
    background: var(--col-color, var(--accent));
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.kanban-col:last-child .kanban-col-head {     width:100%; border-radius: 8px; }
.kanban-col:last-child .kanban-col-head::after { display: none; }
.kanban-stage-dot  { display: none; }
.kanban-stage-name { font-size: 13px; font-weight: 500; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-stage-cnt  { font-size: 14px; opacity: 0.7; flex-shrink: 0; margin-right: auto; }
.kanban-stage-edit { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border: none; background: none; cursor: pointer; color: inherit; opacity: 0.45; border-radius: 4px; transition: opacity var(--trans), background var(--trans); }
.kanban-stage-edit:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.kanban-col-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px; min-height: 34px; }
.kanban-stage-sum { font-size: 13px;
    font-weight: 500;
    color: var(--kanban-foot-c);
    flex-shrink: 0;
    background: #e0dddd4d;
    padding: 6px 8px;
    border-radius: var(--r);}

.kanban-cards {
    flex: 1; overflow-y: auto; 
    min-height: 60px;
    scrollbar-width: thin;
}
.kanban-cards::-webkit-scrollbar { width: 3px; }
.kanban-cards::-webkit-scrollbar-track { background: transparent; }
.kanban-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.kanban-card {
    background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--r);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow: hidden; /* keeps the blurred backdrop from bleeding past the rounded corners */
    padding: 12px; margin: 6px; cursor: grab; position: relative;
    transition: box-shadow var(--trans), transform var(--trans);
}
.kanban-card:hover      { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.kanban-card:active     { cursor: grabbing; }
.sortable-ghost         { opacity: 0.4; background: #e8e8e5 !important; }
.sortable-chosen        { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: rotate(1deg); }

.kanban-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.kanban-card-id   { font-size: 11px; font-weight: 500; color: var(--card-id); }
.kanban-card-date { font-size: 10px; color: var(--card-date); display: inline-flex; align-items: center; gap: 3px; }
.kanban-card-date svg { width: 12px; height: 12px; color: var(--icon-clock); flex-shrink: 0; }
.kanban-card-title  { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 400; color: var(--card-text); line-height: 1.4; padding: 7px 0 5px; cursor: pointer; word-break: break-word; }
.kanban-card-title:hover { color: var(--accent2); }
.kanban-card-title-icon { flex-shrink: 0; margin-top: 3px; width: 13px; height: 13px; color: var(--accent); }
.kanban-card-amount { font-size: 12px; font-weight: 500; color: var(--card-amount); margin-bottom: 5px; }
.kanban-card-client { margin-top: 6px; padding-top: 6px; display: flex; align-items: flex-start; gap: 6px; }
.kc-person-icon { flex-shrink: 0; width: 14px; height: 14px; color: var(--icon-person); margin-top: 3px; }
.kc-contact-info { display: flex; flex-direction: column; }
.kc-row  { font-size: 11px; color: var(--card-muted); line-height: 1.7; }
.kc-label{ font-weight: 500; color: var(--card-label); margin-right: 2px; }
.kanban-card-avatar {
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
}

/* ── List: cell text ────────────────────────────────────────────────────── */
.deal-id-text        { font-size: 11px; font-weight: 500; color: var(--card-id); }
.deal-contact-sub    { font-size: 11px; color: var(--card-muted); }
.deal-obj-link       { font-size: 11px; color: var(--accent); text-decoration: none; }
.deal-obj-link:hover { text-decoration: underline; }

.kanban-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    background: #e0dddd4d; border: none; border-radius: var(--r);
    font-family: inherit; font-size: 12px; color: var(--kanban-foot-c);
    cursor: pointer; transition: color var(--trans), background var(--trans);
}
.kanban-add-btn:hover { color: var(--text); background: rgb(255 255 255 / 11%); }

/* ── List view ──────────────────────────────────────────────────────────── */
/* ── List page layout ────────────────────────────────────────────────────── */
.deals-list-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ── Stage chips (multi-select) ─────────────────────────────────────────── */
.stage-chips {
    display: flex; align-items: flex-start; gap: 4px;
    padding: 10px 24px 12px; overflow-x: auto; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.chip-col {
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: var(--z, 1); margin-right: 8px; flex-shrink: 0;
}
.chip-col-sum {
    font-size: 12px; font-weight: 500; color: var(--kanban-foot-c); padding: 8px 2px 0;
}
.stage-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: #fff;
    text-decoration: none; white-space: nowrap;
    padding: 0 6px 0 11px; height: 34px; flex-shrink: 0;
    position: relative;
    background: var(--c, #6b7280);
    border-radius: 8px 4px 4px 8px;
    transition: filter var(--trans), outline-color var(--trans);
    filter: brightness(0.75);
    outline: 2px solid transparent; outline-offset: -2px;
}
.stage-chip::after {
    content: ''; position: absolute;
    top: 1px; right: -7px; width: 8px; height: 32px;
    background: var(--c, #6b7280);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.chip-col:last-child .stage-chip { border-radius: 8px; }
.chip-col:last-child .stage-chip::after { display: none; }
.stage-chip:hover  { filter: brightness(0.88); }
.stage-chip.is-active { filter: brightness(1); }
.chip-dot { display: none; }
.chip-sum { font-size: 11px; opacity: 0.8; }
.chip-name { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-cnt  { font-size: 14px; opacity: 0.7; flex-shrink: 0; margin-right: auto; }
.chip-edit { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border: none; background: none; cursor: pointer; color: inherit; opacity: 0.45; border-radius: 4px; transition: opacity var(--trans), background var(--trans); }
.chip-edit:hover { opacity: 1; background: rgba(255,255,255,0.2); }

/* ── Scrollable table ────────────────────────────────────────────────────── */
.table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; padding: 0 24px 24px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.table-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.deals-table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* ── Header row ──────────────────────────────────────────────────────────── */
.deals-table thead th {
    position: sticky; top: 0; z-index: 2; background: var(--card-bg);
    text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
    height: 46px; padding: 0 20px;
    border-top: 1px solid var(--card-line2);
    border-bottom: 1px solid var(--card-line2);
    vertical-align: middle;
}
.deals-table thead th:first-child { border-left: 4px solid var(--card-line2); border-top-left-radius: 12px; }
.deals-table thead th:last-child  { border-right: 1px solid var(--card-line2); border-top-right-radius: 12px; }
.th-inner { display: inline-flex; align-items: center; gap: 5px; }
.th-inner svg, th.col-activity svg { width: 13px; height: 13px; }

/* ── Body cells ──────────────────────────────────────────────────────────── */
.deals-table td {
    padding: 16px 20px; font-size: 13px;
    background: var(--card-bg); color: var(--card-text);
    border-bottom: 1px solid var(--card-line2); vertical-align: middle;
}
.deals-table td:first-child { border-left: 4px solid var(--stage-c, var(--card-line2)); }
.deals-table td:last-child  { border-right: 1px solid var(--card-line2); }
.deals-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.deals-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 12px; }
.deals-row:hover td { background: linear-gradient(rgba(0,0,0,0.025), rgba(0,0,0,0.025)), var(--card-bg); }

/* Flash-highlight for the row matching a map region click (dashboard) —
   fades back to normal so it reads as a "here it is" pulse, not a permanent state. */
tr.is-highlighted td {
    background: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
    transition: background 1.6s ease;
}

/* Column widths */
.col-id       { width: 58px; }
.col-date     { width: 96px; }
.col-stage    { width: 120px; }
.col-title    { width: 200px; max-width: 260px; }
.col-objects  { width: 210px; }
.col-activity { width: 58px; text-align: center; }
.col-contact  { width: 180px; }

/* ── Sort links ──────────────────────────────────────────────────────────── */
.sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; transition: color var(--trans); }
.sort-link:hover     { color: var(--text); }
.sort-link.is-active { color: var(--accent); }
.sort-icon { opacity: 0; transition: opacity var(--trans); }
.sort-icon.is-on    { opacity: 1; }
.sort-link:hover .sort-icon:not(.is-on) { opacity: .35; }

/* ── Stage progress bar ──────────────────────────────────────────────────── */
.stage-bar { display: flex; gap: 2px; height: 3px; margin-bottom: 5px; max-width: 100px; }
.stage-seg { border: 1px solid var(--card-line2);flex: 1; height: 6px; border-radius: 2px; background: var(--card-line2); }
.stage-seg.is-filled { background: var(--c, var(--accent)); }
.stage-bar-name { font-size: 11px; color: var(--card-muted); display: block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ID badge ────────────────────────────────────────────────────────────── */
.deal-id-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;  background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 5px; padding: 3px 7px; white-space: nowrap; }

/* ── Date cell ───────────────────────────────────────────────────────────── */
.deal-date-cell  { display: flex; align-items: flex-start; gap: 5px; }
.deal-date-icon  { width: 13px; height: 13px; color: var(--icon-clock); flex-shrink: 0; margin-top: 2px; }
.deal-date  { font-size: 12px; color: var(--card-text); white-space: nowrap; font-weight: 400; }
.deal-time  { font-size: 10px; color: var(--card-muted); margin-top: 1px; }

/* ── Title ───────────────────────────────────────────────────────────────── */
.deal-title { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 400; color: var(--card-text); cursor: pointer; line-height: 1.5; white-space: normal; word-break: break-word; }
.deal-title:hover { color: var(--accent); }
.deal-title-icon { flex-shrink: 0; margin-top: 3px; width: 13px; height: 13px; color: var(--accent); }

/* ── Activity ────────────────────────────────────────────────────────────── */
.deal-activity { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.deal-contact      { display: flex; align-items: flex-start; gap: 8px; }
.deal-contact-icon { width: 15px; height: 15px; color: var(--icon-person); flex-shrink: 0; margin-top: 2px; }
.deal-contact-info { min-width: 0; }
.deal-contact-name { font-size: 12px; font-weight: 400; color: var(--card-text); }

/* ── Objects column ──────────────────────────────────────────────────────── */
.deal-obj-list   { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 3px 12px; }
.deal-obj-row    { display: contents; }
.deal-obj-name   { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.deal-obj-icon   { width: 12px; height: 12px; color: var(--icon-house); flex-shrink: 0; position: relative; top: 1px; }
.deal-obj-link   { font-size: 11px; color: var(--accent); text-decoration: none; }
.deal-obj-link:hover { text-decoration: underline; }
.deal-obj-text   { font-size: 11px; color: var(--card-muted); word-break: break-word; min-width: 0; }
.deal-obj-prices { font-size: 11px; color: var(--card-obj-sum); font-weight: 400; white-space: nowrap; text-align: right; }

.stage-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; padding: 3px 10px; border-radius: 20px;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: color-mix(in srgb, var(--c) 80%, #000);
}
.stage-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--c); }

.avatar-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 500;
    margin-right: 6px; vertical-align: middle;
}

.search-form  { display: flex; gap: 0; position: relative; }
.search-input {
    height: 38px; padding: 0 12px; border: 1px solid var(--border); border-right: none;
    border-radius: var(--r) 0 0 var(--r); font-family: inherit; font-size: 13px;
    color: var(--toolbar-text); background: rgba(255,255,255,0.15); outline: none; width: 270px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    overflow: hidden;
    transition: border-color var(--trans);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--focus); }
.search-input:focus + .search-btn { border-top-color: var(--focus); border-right-color: var(--focus); border-bottom-color: var(--focus); }
.search-btn {
    height: 38px; width: 38px; border: 1px solid var(--border); border-radius: 0 var(--r) var(--r) 0;
    background: rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    overflow: hidden;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--toolbar-text); transition: color var(--trans), border-top-color var(--trans), border-right-color var(--trans), border-bottom-color var(--trans);
}
.search-btn:hover { color: var(--accent); }
.search-clear {
    position: absolute; right: 42px; top: 50%; transform: translateY(-50%);
    border: none; background: none; padding: 0; cursor: pointer;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: color var(--trans), background var(--trans);
}
.search-clear svg { display: block; }
.search-clear:hover { color: var(--text); background: var(--border); }

/* Extra filter trigger inside the expanded mobile search bar — hidden
   everywhere else (desktop has the real .btn-filter right next to it). */
.search-filter-btn { display: none; }

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 24px; color: var(--muted); gap: 16px; font-size: 14px;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 500; padding: 20px;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid var(--modal-bd);
    border-radius: var(--modal-radius);
    width: 100%; max-width: 520px;
    box-shadow: var(--modal-shadow);
    animation: slideUp 0.2s ease;
}
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--modal-pad); border-bottom: 1px solid var(--modal-sep);
}
.modal-title  { font-size: 15px; font-weight: 500; color: var(--card-text); }
.modal-close  { background: none; border: none; cursor: pointer; color: var(--card-muted); padding: 6px; display: flex; align-items: center; border-radius: 6px; transition: color var(--trans), background var(--trans); }
.modal-close:hover { color: var(--card-text); background: var(--modal-sep); }
.modal-body   { padding: var(--modal-pad); }
.modal-foot   { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: var(--modal-pad); border-top: 1px solid var(--modal-sep); }

/* ── Wide deal modal ─────────────────────────────────────────────────────── */
/* No header bar: the stage stepper is the first thing in the card, so vertical
   space goes to editing, not chrome. Overlay padding is trimmed too — just
   enough for a visual gap, not a frame. */
.modal-overlay:has(.modal-wide) { padding: 22px; }
.modal-wide {
    --modal-pad: 32px;
    --modal-gap: 20px;
    max-width: 1320px;
    height: 92vh; max-height: calc(100vh - 44px);
    display: flex; flex-direction: column;
    position: relative;
    /* Fades/scales in sync with the overlay's own .is-open transition (see
       line ~1157) instead of the one-shot slideUp keyframe every .modal gets. */
    animation: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-overlay.is-open .modal-wide { opacity: 1; transform: none; }

/* Close button floats outside the top-right corner of the card, over the backdrop */
.modal-wide-close {
    position: absolute; top: -14px; right: -14px; z-index: 30;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--modal-bg); color: var(--card-muted);
    border: 1px solid var(--modal-bd);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: color var(--trans), background var(--trans), border-color var(--trans), transform var(--trans);
}
.modal-wide-close:hover {
    color: #fff;
    background: rgba(224,82,82,0.55);
    border-color: rgba(224,82,82,0.5);
    transform: scale(1.06);
}

/* Stage chips — flat segmented pipeline, progress-tinted rather than solid-filled */
.modal-stages {
    display: flex; align-items: stretch; gap: 6px; overflow-x: auto;
    padding: 20px var(--modal-pad) 14px;
    border-bottom: 1px solid var(--modal-sep);
    scrollbar-width: none; flex-shrink: 0;
}
.modal-stages::-webkit-scrollbar { display: none; }
.modal-stage-step {
    /* flex-basis: auto (not 0%) so a step's floor is its own label width,
       not an equal share of the row — long stage names used to get squeezed
       to the same width as short ones and, with nowrap + no ellipsis, spill
       text into the next step. Steps still grow evenly to fill spare room;
       .modal-stages already scrolls (overflow-x: auto) once the row's total
       content genuinely can't fit. */
    flex: 1 1 auto; min-width: max-content; height: 38px;
    padding: 0 14px; gap: 6px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, #6b7280) 12%, var(--modal-sep));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c, #6b7280) 45%, transparent);
    border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 500;
    color: color-mix(in srgb, var(--c, #6b7280) 70%, var(--card-text) 30%);
    white-space: nowrap; text-align: center;
    transition: background var(--trans), box-shadow var(--trans), color var(--trans);
}
.modal-stage-step:hover { background: color-mix(in srgb, var(--c, #6b7280) 20%, var(--modal-sep)); }

/* Checkmark — shown on stages already passed (default state, see below for
   the active/upcoming overrides), hidden everywhere else. Makes a "done" stage
   read as done at a glance, and gives the collapsed mobile squares content
   instead of sitting there as blank colour blocks. */
.stage-check { display: inline-flex; flex-shrink: 0; }

/* First letter of the stage name — only surfaces on the mobile collapsed
   squares that aren't showing the checkmark (see the mobile block below);
   on desktop the full name is always visible so this stays hidden. */
.stage-initial { display: none; }

/* Active stage: solid-filled with the stage's own colour and high-contrast
   text — needs to read as "current" at a glance, clearly brighter than both
   the passed stages (faint tint) and the upcoming ones (flat grey). */
.modal-stage-step.is-active {
    background: var(--c, #6b7280);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--c, #6b7280) 55%, transparent);
    color: var(--c-text, #fff);
    font-weight: 600;
}
.modal-stage-step.is-active:hover { background: var(--c, #6b7280); }
.modal-stage-step.is-active .stage-check { display: none; }

/* Stages after the active one (DOM order = pipeline order) read as "not yet
   reached" — muted fill, but they keep their own colour as the bottom border
   so the full pipeline colour-codes at a glance, not just the reached part. */
.modal-stage-step.is-active ~ .modal-stage-step {
    background: var(--modal-sep);
    color: var(--card-muted);
}
.modal-stage-step.is-active ~ .modal-stage-step:hover {
    background: color-mix(in srgb, var(--card-muted) 14%, var(--modal-sep));
}
.modal-stage-step.is-active ~ .modal-stage-step .stage-check { display: none; }

/* Body split */
.modal-body-split { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* Left column */
.modal-col-left {
    width: 42%; flex-shrink: 0;
    padding: var(--modal-pad) var(--modal-pad) 96px;
    border-right: 1px solid var(--modal-sep);
    display: flex; flex-direction: column;
    overflow-x: hidden; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--modal-sep) transparent;
}
.modal-col-left::-webkit-scrollbar { width: 4px; }
.modal-col-left::-webkit-scrollbar-track { background: transparent; }
.modal-col-left::-webkit-scrollbar-thumb { background: var(--modal-sep); border-radius: 2px; }

/* Left column form fields matching modal style */
.modal-col-left .field { margin-bottom: var(--modal-gap); }
.modal-col-left .field-label {
    font-size: 13px; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: var(--card-muted); margin-bottom: 6px;
}
.md-deal-id-badge {
    font-size: 11px; font-weight: 500; color: var(--card-muted);
    background: var(--modal-sep); border-radius: 20px; padding: 2px 9px;
    white-space: nowrap;
}
.modal-col-left .field-input {
    height: var(--modal-input-h); padding: var(--modal-input-pad);
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: var(--r); font-size: 13px; color: var(--card-text);
}
.modal-col-left .field-input:hover { border-color: var(--card-muted); }
.modal-col-left .field-input:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}
.modal-col-left .field-input::placeholder { color: var(--card-muted); opacity: 0.45; }
.modal-col-left .field-select {
    height: var(--modal-input-h); padding: 0 28px 0 12px;
    background-color: transparent; border: 1px solid var(--modal-sep);
    border-radius: var(--r); font-size: 13px; color: var(--card-text); 
}

/* Objects sub-section — tonal card, pairs visually with the contact block below */
.md-left-sec {
    margin-bottom: 16px;
    background: rgba(0,0,0,0.025);
    border-radius: calc(var(--r) + 2px);
    padding: 14px;
}
.md-left-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.md-left-sec-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 500; color: var(--card-text);
}

/* Section icon badges — same circle/border/bg treatment as the timeline .tl-dot */
.md-sec-icon {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--modal-sep);
    background: var(--modal-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.md-sec-icon--title      { color: var(--accent);          border-color: color-mix(in srgb, var(--accent) 35%, transparent);          background: color-mix(in srgb, var(--accent) 8%, var(--modal-bg)); }
.md-sec-icon--object     { color: var(--icon-house);      border-color: color-mix(in srgb, var(--icon-house) 35%, transparent);      background: color-mix(in srgb, var(--icon-house) 8%, var(--modal-bg)); }
.md-sec-icon--person     { color: var(--icon-person);     border-color: color-mix(in srgb, var(--icon-person) 35%, transparent);     background: color-mix(in srgb, var(--icon-person) 8%, var(--modal-bg)); }
.md-sec-icon--ambassador { color: var(--icon-ambassador); border-color: color-mix(in srgb, var(--icon-ambassador) 35%, transparent); background: color-mix(in srgb, var(--icon-ambassador) 8%, var(--modal-bg)); }

/* Duplicate-lead warning/note — one line, reused both for the persistent
   "lead already exists" note and the create-time confirm warning. */
.md-dup-note { font-size: 12px; color: var(--err-tx); margin: -2px 0 10px; }

/* Object rows */
.objects-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.obj-row      { display: flex; gap: 6px; align-items: center; }
.obj-url      { flex: 1; min-width: 0; }
.obj-price    { width: 80px; flex-shrink: 0; }
.obj-currency { width: 50px; flex-shrink: 0; }
.obj-row .field-input  { height: 32px; font-size: 12px; padding: 4px 7px; background: var(--modal-bg); }
.obj-row .field-select { height: 32px; padding: 0 2px 0 6px; font-size: 12px; background-color: var(--modal-bg); }
.obj-link-btn {
    flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--r);
    color: var(--card-muted); text-decoration: none;
    transition: color var(--trans), background var(--trans);
}
.obj-link-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.obj-remove {
    flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--r); cursor: pointer;
    color: var(--card-muted); transition: color var(--trans), background var(--trans);
}
.obj-remove:hover { color: #e05252; background: rgba(224,82,82,0.10); }

.btn-add-object {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: 1px dashed var(--modal-sep); border-radius: var(--r);
    padding: 7px 12px; font-family: inherit; font-size: 12px; color: var(--card-muted);
    cursor: pointer; width: auto; flex-shrink: 0;
    transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.btn-add-object:hover { color: var(--card-text); border-color: var(--card-muted); background: rgba(0,0,0,0.02); }

/* Contact block */
.md-contact-block {
    background: rgba(0,0,0,0.025);
    border-radius: calc(var(--r) + 2px);
    padding: 14px;
    margin-bottom: 16px;
}
.md-contact-block .field { margin-bottom: 12px; }
.md-contact-block .field:last-child { margin-bottom: 0; }
.md-contact-block .field-input,
.md-contact-block .field-select { background: var(--modal-bg); }

/* Ambassador — a button styled like the other field inputs, opening a
   floating rich-row picker (see .ambassador-picker) instead of a native
   <select>, since options need a flag + region/city + product + name, not
   just plain text. */
.ambassador-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--modal-bg); cursor: pointer; font-family: inherit; font-size: 13px;
    text-align: left; -webkit-appearance: none; appearance: none;
}
.ambassador-trigger svg { flex-shrink: 0; color: var(--card-muted); }
.ambassador-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
#md-ambassador-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#md-ambassador-display.is-placeholder { color: var(--card-muted); opacity: 0.6; }

.ambassador-picker {
    position: fixed; z-index: 1300;
    display: flex; flex-direction: column;
    max-height: 340px;
    background: var(--modal-bg); border: 1px solid var(--modal-sep);
    border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    overflow: hidden;
}
.ambassador-filter {
    flex-shrink: 0; margin: 8px; height: 32px; padding: 4px 10px;
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--card-text);
}
.ambassador-option-list { overflow-y: auto; padding: 0 6px 6px; }
.ambassador-option {
    width: 100%; display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 8px; background: none; border: none; border-radius: 6px;
    font-family: inherit; text-align: left; cursor: pointer;
    transition: background var(--trans);
}
.ambassador-option:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ambassador-option--none { color: var(--card-muted); font-style: italic; }
.ao-flag { flex-shrink: 0; font-size: 15px; line-height: 1.4; }
.ao-info { display: flex; flex-direction: column; min-width: 0; }
.ao-loc  { font-size: 12px; font-weight: 500; color: var(--card-text); }
.ao-sub  { font-size: 11px; color: var(--card-muted); }

/* Floating save bar — overlays both columns at bottom of modal */
.modal-foot-inline {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 20;
    display: flex; align-items: center; gap: 10px;
    padding: 16px var(--modal-pad);
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--modal-sep);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
    border-radius: 0 0 var(--modal-radius) var(--modal-radius);
    overflow: hidden;
}
.modal-foot-inline .btn-primary { width: auto; height: 44px; min-width: 160px; }
.modal-foot-inline .btn-ghost   { color: var(--card-muted); }

/* Independent of .modal-foot-inline on purpose (see markup comment) — stays in
   the same bottom-right slot whether or not the save bar is showing, so it
   needs its own position/backdrop rather than relying on that bar's. */
.btn-delete-deal {
    position: absolute; right: var(--modal-pad); bottom: 16px; z-index: 21;
    height: 40px; padding: 0 16px;
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--modal-sep);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    color: #d64545; font-size: 13px; font-weight: 500;
    border-radius: 10px; cursor: pointer;
}
.btn-delete-deal:hover    { background: rgba(214,69,69,0.1); border-color: rgba(214,69,69,0.3); }
.btn-delete-deal:disabled { opacity: 0.5; cursor: default; }

/* Right column */
.modal-col-right {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; min-width: 0;
}

/* Tab bar */
.md-tabs {
    display: none; flex-shrink: 0;
    border-bottom: 1px solid var(--modal-sep);
    padding: 0 var(--modal-pad);
    overflow-x: auto; scrollbar-width: none;
}
.md-tabs::-webkit-scrollbar { display: none; }
.md-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 10px; border: none; background: transparent;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    font-size: 13px; font-family: inherit; cursor: pointer; color: var(--card-muted);
    white-space: nowrap; flex-shrink: 0;
    transition: color var(--trans), border-color var(--trans);
}
.md-tab:hover { color: var(--card-text); }
.md-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.md-tab-cnt {
    font-size: 11px; background: var(--modal-sep); border-radius: 10px;
    padding: 1px 6px; color: var(--card-muted);
    transition: background var(--trans), color var(--trans);
}
.md-tab.is-active .md-tab-cnt {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

/* Panels */
.md-panel {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--modal-pad) var(--modal-pad) 96px;
    display: none; flex-direction: column;
    scrollbar-width: thin; scrollbar-color: var(--modal-sep) transparent;
}
.md-panel::-webkit-scrollbar { width: 4px; }
.md-panel::-webkit-scrollbar-track { background: transparent; }
.md-panel::-webkit-scrollbar-thumb { background: var(--modal-sep); border-radius: 2px; }
.md-panel.is-active { display: flex; }

/* Add form inside panels */

.md-add-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; flex-shrink: 0; }
.md-add-form .field-input {
    height: var(--modal-input-h); padding: var(--modal-input-pad);
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: var(--r); font-size: 13px; color: var(--card-text); width: 100%;
}
.md-add-form .field-input:hover { border-color: var(--card-muted); }
.md-add-form .field-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent); }
.md-add-form .field-input::placeholder { color: var(--card-muted); opacity: 0.45; }
.modal-rsec-ta { resize: vertical; min-height: 60px; }
.action-schedule-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.action-remind-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--card-muted); cursor: pointer; white-space: nowrap; }
.action-dt { font-size: 12px; flex: 1; min-width: 140px; }

/* ── Timeline feed ───────────────────────────────────────────────────────── */
.modal-feed { display: flex; flex-direction: column; }
.history-feed { display: flex; flex-direction: column; }

.tl-item { display: flex; gap: 12px; }
.tl-dot-col {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; width: 30px;
}
.tl-dot {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--modal-sep);
    background: var(--modal-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--card-muted);
}
.tl-line { flex: 1; width: 2px; background: var(--modal-sep); min-height: 10px; margin: 4px 0; }
.tl-item:last-child .tl-line { display: none; }
.tl-content { flex: 1; min-width: 0; padding-bottom: 16px; padding-top: 4px; }
.tl-item:last-child .tl-content { padding-bottom: 0; }

/* Comment dot: teal */
.tl-item--comment .tl-dot {
    color: var(--icon-clock);
    border-color: color-mix(in srgb, var(--icon-clock) 35%, transparent);
    background: color-mix(in srgb, var(--icon-clock) 8%, var(--modal-bg));
}
/* Action dot: green */
.tl-item--action .tl-dot {
    color: var(--icon-house);
    border-color: color-mix(in srgb, var(--icon-house) 35%, transparent);
    background: color-mix(in srgb, var(--icon-house) 8%, var(--modal-bg));
}
/* History dot: per type */
.tl-item--history-created .tl-dot       { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--modal-bg)); }
.tl-item--history-stage_changed .tl-dot { color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 35%, transparent); background: color-mix(in srgb, #f59e0b 8%, var(--modal-bg)); }
.tl-item--history-edited .tl-dot        { color: var(--icon-person); border-color: color-mix(in srgb, var(--icon-person) 35%, transparent); background: color-mix(in srgb, var(--icon-person) 8%, var(--modal-bg)); }
.tl-item--history-viewed .tl-dot        { color: var(--card-muted); }

/* Feed item (inside tl-content) */
.feed-item { font-size: 13px; }
.feed-item.is-done { opacity: 0.55; }
.feed-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.feed-num  { font-size: 11px; color: var(--card-muted); font-weight: 500; }
.feed-author { font-size: 12px; color: var(--card-text); font-weight: 500; }
.feed-time   { font-size: 11px; color: var(--card-muted); margin-left: auto; }
.feed-body   { color: var(--card-text); line-height: 1.5; word-break: break-word; }
.feed-scheduled { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--card-muted); }
.feed-remind { color: var(--icon-clock); }
.btn-done-action {
    margin-top: 8px; padding: 3px 10px; font-size: 12px; font-family: inherit;
    border: 1px solid var(--modal-sep); border-radius: 6px;
    background: transparent; color: var(--card-muted); cursor: pointer;
    transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.btn-done-action:hover { border-color: var(--icon-house); color: var(--icon-house); }
.feed-done-badge { margin-top: 6px; font-size: 12px; color: var(--icon-house); font-weight: 500; }
.btn-del-comment {
    margin-left: 4px; background: none; border: none; cursor: pointer;
    color: var(--card-muted); font-size: 12px; padding: 0 3px; opacity: 0.5;
    transition: opacity var(--trans), color var(--trans);
}
.btn-del-comment:hover { opacity: 1; color: #e05252; }

/* Comment note */
.feed-note { margin-top: 8px; padding: 8px 10px; background: rgba(0,0,0,0.025); border-radius: 6px; font-size: 12px; }
.feed-note-label { color: var(--card-muted); }
.feed-note-author { color: var(--card-text); font-weight: 500; }
.feed-note-text { margin-top: 4px; color: var(--card-text); }
.btn-add-note { font-size: 12px; color: var(--icon-clock); background: none; border: none; cursor: pointer; padding: 4px 0; margin-top: 4px; font-family: inherit; }
.btn-add-note:hover { text-decoration: underline; }
.feed-note-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.feed-note-ta { resize: vertical; min-height: 48px; }
.feed-note-form-foot { display: flex; gap: 6px; }
/* Same look as the main comment/action textareas (.md-add-form .field-input) —
   the note field is a sibling input for the same kind of content, so it should
   read as one family, not a differently-themed control. */
.feed-note-form .field-input {
    width: 100%; padding: var(--modal-input-pad);
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: var(--r); font-size: 13px; color: var(--card-text);
}
.feed-note-form .field-input:hover { border-color: var(--card-muted); }
.feed-note-form .field-input:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}
.feed-note-form .field-input::placeholder { color: var(--card-muted); opacity: 0.45; }

/* History item (inside tl-content) */
.history-item { font-size: 13px; }
.hi-top  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hi-label { color: var(--card-text); font-weight: 500; font-size: 13px; }
.hi-meta { margin-left: auto; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.hi-user { color: var(--card-muted); font-size: 11px; font-weight: 500; }
.history-item--bitrix .hi-user { color: #1F86FF; }
.hi-time { color: var(--card-muted); font-size: 11px; opacity: 0.7; }
.hi-extra { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.hi-change { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.hi-field  { color: var(--card-muted); }
.hi-from   { color: var(--card-muted); text-decoration: line-through; }
.hi-to     { color: var(--card-text); font-weight: 500; }
.hi-stage-from { color: var(--card-muted); }
.hi-stage-to   { color: var(--accent); font-weight: 500; }
.hi-change--obj   { gap: 6px; }
.hi-obj-action    { font-weight: 500; white-space: nowrap; }
.hi-obj-add       { color: var(--icon-house); }
.hi-obj-del       { color: #e05252; }
.hi-obj-url       { color: var(--card-muted); font-size: 11px; word-break: break-all; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-obj-price     { color: var(--card-text); font-weight: 500; }

@media (max-width: 640px) {
    .modal-overlay:has(.modal-wide) { padding: 0; }
    .modal-wide {
        --modal-pad: 16px;
        --modal-gap: 14px;
        max-width: 100%; border-radius: 0;
        /* 100vh on mobile Safari/Chrome counts the space behind the address
           bar as visible, so the card claims more height than is actually on
           screen and the bottom (save bar, last comment...) ends up clipped.
           100dvh tracks the real, currently-visible viewport instead. */
        height: 100vh; max-height: 100vh;
        height: 100dvh; max-height: 100dvh;
    }
    .modal-wide-close { top: 8px; right: 8px; width: 32px; height: 32px; }

    /* Clears the close button — it sits inside the card on mobile (no room to
       float outside), so the stage row needs enough top padding to not run
       under it. */
    .modal-stages { padding-top: 46px; }

    /* Stage stepper: only the active stage carries its label — everything else
       collapses to a plain square showing the checkmark (passed) or the
       stage's own first letter (not reached yet), so a collapsed square is
       still identifiable without tapping it. Tapping a square makes it
       active, which expands it and collapses whatever was active before. */
    .modal-stage-step {
        flex: 0 0 34px; width: 34px; min-width: 34px;
        padding: 0; overflow: hidden;
        font-size: 12px; font-weight: 600;
    }
    .modal-stage-step .stage-name { display: none; }
    .modal-stage-step.is-active ~ .modal-stage-step .stage-initial { display: inline; }
    .modal-stage-step.is-active {
        flex: 1 1 auto; width: auto; min-width: 110px;
        padding: 0 14px; font-size: 12px; font-weight: 600;
    }
    .modal-stage-step.is-active .stage-name { display: inline; }

    /* One continuous scroll for the whole body — left column flows straight
       into the right column instead of each side scrolling independently. */
    .modal-body-split {
        flex-direction: column;
        overflow-y: auto; overflow-x: hidden;
        padding-bottom: 96px; /* clears the floating save bar */
    }
    .modal-col-left {
        width: 100%; border-right: none; border-bottom: none;
        overflow: visible; padding-bottom: 0;
    }
    .modal-col-right {
        flex: none; max-height: none; overflow: visible;
        border-top: 1px solid var(--modal-sep);
    }
    .md-panel { flex: none; min-height: auto; overflow-y: visible; padding-bottom: 0; }

    /* Save/cancel: centered, no extra clearance needed — modal-body-split already has it */
    .modal-foot-inline { justify-content: center; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .auth-top  { padding: 12px 20px; }
    .auth-page { padding: 68px 16px 32px; }
    .auth-card { padding: 36px 24px 32px; border-radius: 12px; }
    .auth-title { font-size: 24px; }

    .app-header     { padding: 0 16px; }
    .app-username   { display: none; }
    .app-nav-link   { font-size: 12px; padding: 5px 8px; }
    .deals-toolbar  { padding: 8px 16px 0; }
    .stage-chips    { padding: 12px 16px; }
    .table-wrap     { }

    .kanban-board   { padding: 12px 16px 16px; height: calc(100vh - 60px - 64px); }
    .kanban-col     { flex: 0 0 260px; }

    .field-row      { grid-template-columns: 1fr; }

    /* ── Mobile: кнопка "Новая сделка" — только иконка ── */
    .btn-new-deal .btn-text { display: none; }
    .btn-new-deal { padding: 0 10px; }

    /* ── Mobile: кнопки "Фільтри" і "Етапи" — тільки іконка (btn-stages reuses .btn-filter) ── */
    .btn-filter .btn-text { display: none; }
    .btn-filter { padding: 0 10px; }

    /* ── Mobile: переключатель вида — иконки вместо слов "Канбан"/"Список" ── */
    .view-toggle         { padding: 4px 6px; }
    .view-toggle-label   { display: none; }
    .view-toggle-text    { display: none; }
    .view-toggle-icon    { display: inline-flex; }
    .view-toggle-link    { padding: 7px 9px; }

    /* ── Mobile: поиск — по умолчанию только лупа, разворачивается поверх
       остальных иконок тулбара на всю ширину строки ── */
    .deals-toolbar { position: relative; }
    .search-form:not(.is-open) .search-input {
        width: 0; padding: 0; border-width: 0; opacity: 0; pointer-events: none;
    }
    .search-form:not(.is-open) .search-clear { display: none !important; }
    .search-form:not(.is-open) .search-btn {
        border-radius: var(--r); border-left-width: 1px;
    }
    .search-form.is-open {
        position: absolute; inset: 0; z-index: 60;
        display: flex; align-items: center;
        padding: 8px 16px 0;
        background: var(--surface);
    }
    .search-form.is-open .search-input {
        flex: 1; width: auto; min-width: 0;
        padding: 0 40px 0 12px;
    }
    .search-input { transition: width 0.2s ease, opacity 0.2s ease; }
    .search-form.is-open .search-clear {
        right: 102px;
        width: 24px; height: 24px;
        color: var(--toolbar-text);
        background: color-mix(in srgb, var(--toolbar-text) 12%, transparent);
    }
    .search-clear {
        top: 60%;
    }
    .search-form.is-open .search-clear svg { width: 11px; height: 11px; }

    /* Filter icon inside the expanded search bar — the real .btn-filter is
       covered up by the search overlay, so this keeps filtering reachable */
    .search-form.is-open .search-filter-btn {
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; position: relative;
        width: 38px; height: 38px; margin-left: 6px;
        border: 1px solid var(--border); border-radius: var(--r);
        background: rgba(255,255,255,0.15);
        color: var(--toolbar-text);
    }
    .search-form.is-open .search-filter-btn .filter-badge {
        position: absolute; top: -5px; right: -5px;
    }

    /* ── Mobile: список — заголовку больше места, id/дате меньше ── */
    .col-id       { width: 40px; }
    .col-date     { width: 64px; }
    .col-title    { width: auto; min-width: 140px; }
    .col-objects  { width: 160px; }

    /* Objects cell: stack the link and the price instead of squeezing them
       onto one row where they end up overlapping */
    .deal-obj-list  { display: flex; flex-direction: column; gap: 4px; }
    .deal-obj-row   { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
    .deal-obj-prices { text-align: left; }

    /* ── Mobile: кнопка "Додати об'єкт" — с текстом, так её заметнее ── */
    .btn-add-object { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 400px) {
    .auth-card  { padding: 28px 20px 24px; }
    .kanban-col { flex: 0 0 240px; }
}

/* ── Profile modal ───────────────────────────────────────────────────────── */
.app-username-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: none; border: none; cursor: pointer;
    padding: 4px 8px; border-radius: var(--r);
    transition: background var(--trans);
    color: var(--text);
}
.app-username-btn:hover { background: var(--border); }
.app-username-btn svg   { opacity: 0.5; flex-shrink: 0; }

.app-admin-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 10px; border-radius: var(--r);
    color: var(--text); text-decoration: none;
    transition: background var(--trans);
}
.app-admin-link:hover  { background: var(--border); }
.app-admin-link svg    { opacity: 0.6; flex-shrink: 0; }
.app-admin-link-text   { font-size: 13px; }
@media (max-width: 768px) {
    .app-admin-link-text { display: none; }
    .app-admin-link { padding: 6px; }
}

/* ── Notifications (bell) ─────────────────────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-bell-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: none; cursor: pointer;
    border-radius: var(--r); color: var(--text);
    transition: background var(--trans);
}
.notif-bell-btn:hover { background: var(--border); }
.notif-dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--err-tx);
    box-shadow: 0 0 0 2px var(--modal-bg);
}
.notif-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
    width: 340px; max-width: calc(100vw - 24px);
    background: var(--modal-bg); border: 1px solid var(--modal-bd); border-radius: var(--r);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}
.notif-dropdown-head {
    padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--card-text);
    border-bottom: 1px solid var(--modal-bd);
}
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { padding: 10px 16px; border-bottom: 1px solid var(--modal-bd); }
.notif-item:last-child { border-bottom: none; }
.notif-item.is-unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif-item-body { font-size: 12.5px; color: var(--card-text); line-height: 1.5; }
.notif-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.notif-item-time { font-size: 11px; color: var(--card-muted); }
.notif-item-read {
    font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer;
    padding: 2px 6px; border-radius: 5px; transition: background var(--trans);
}
.notif-item-read:hover { background: var(--border); }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--card-muted); }
.notif-load-more {
    display: block; width: 100%; padding: 10px; text-align: center;
    font-size: 12px; color: var(--accent); background: none; border: none;
    border-top: 1px solid var(--modal-bd); cursor: pointer; transition: background var(--trans);
}
.notif-load-more:hover { background: var(--border); }

.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(0,0,0,0);
    -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
    visibility: hidden;
    transition: background 0.22s ease, backdrop-filter 0.22s ease, visibility 0s linear 0.22s;
}
.modal-overlay.is-open {
    background: var(--modal-overlay-bg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    visibility: visible;
    transition: background 0.22s ease, backdrop-filter 0.22s ease;
}

.profile-modal {
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid var(--modal-bd);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    animation: none;
    width: 700px; max-width: calc(100vw - 32px);
    height: calc(100vh - 64px); max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-overlay.is-open .profile-modal { opacity: 1; transform: none; }

.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--modal-sep);
    padding: 0 var(--modal-pad);
    overflow-x: auto; scrollbar-width: none;
    flex-shrink: 0;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; font-size: 13px; font-family: inherit;
    color: var(--card-muted);
    padding: 11px 10px; margin-bottom: -1px;
    white-space: nowrap; flex-shrink: 0;
    transition: color var(--trans), border-color var(--trans);
}
.profile-tab:hover     { color: var(--card-text); }
.profile-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.profile-panel { display: none; }
.profile-panel.is-active {
    display: block; flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--modal-pad);
    scrollbar-width: thin; scrollbar-color: var(--modal-sep) transparent;
}
.profile-panel.is-active::-webkit-scrollbar { width: 4px; }
.profile-panel.is-active::-webkit-scrollbar-track { background: transparent; }
.profile-panel.is-active::-webkit-scrollbar-thumb { background: var(--modal-sep); border-radius: 2px; }

.profile-footer {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px var(--modal-pad);
    border-top: 1px solid var(--modal-sep);
    margin-top: auto; flex-shrink: 0;
}
#js-profile-footer-save { width: 100%; }
/* Panel save buttons hidden — triggered via the footer save button */
.profile-modal .profile-save-btn { display: none; }
.btn-logout-modal {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--muted); background: none;
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 7px 14px; cursor: pointer;
    transition: color var(--trans), border-color var(--trans);
}
.btn-logout-modal:hover { color: #ef4444; border-color: #ef4444; }

.profile-alert {
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.profile-alert--success {
    background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx);
}
.profile-alert--error {
    background: var(--err-bg); border-color: var(--err-bd); color: var(--err-tx);
}

.profile-save-btn { width: 100%; margin-top: var(--modal-gap); }

/* ── Profile modal — form fields matching stages modal style ─────────────── */
.profile-modal .field         { margin-bottom: var(--modal-gap); }
.profile-modal .field-label   {
    font-size: 13px; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: var(--card-muted); margin-bottom: 6px;
}
.profile-modal .field-input::placeholder { color: var(--card-muted); opacity: 0.45; }
.profile-modal .field-input {
    height: var(--modal-input-h);
    padding: var(--modal-input-pad);
    background: #fff;
    border: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-radius: var(--r);
    font-size: 13px; font-weight: 400;
    color: #1A1A18;
}
.profile-modal .field-input:hover  { border-color: #c4c4c4; }
.profile-modal .field-input:focus  {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}
.profile-modal .field-input:disabled { opacity: 0.4; cursor: not-allowed; }
.profile-modal .field-select {
    height: var(--modal-input-h);
    padding: 0 32px 0 12px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: var(--r);
    font-size: 13px; color: #1A1A18;
}
.profile-modal .field-select:hover { border-color: #c4c4c4; }
.profile-modal .field-select:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}
.profile-modal .field-hint { font-size: 12px; color: var(--card-muted); margin-top: 6px; }

/* ── Rates tab ─────────────────────────────────────────────────────────── */
.profile-rates-hint {
    font-size: 12px; color: var(--card-muted); margin: 0 0 var(--modal-gap); line-height: 1.5;
}
.rates-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--modal-gap); }
.rate-row   { display: flex; align-items: center; gap: 8px; }
.rate-label { font-size: 13px; font-weight: 400; color: var(--card-text); width: 52px; }
.rate-eq    { font-size: 12px; color: var(--card-muted); white-space: nowrap; }
.rate-input { flex: 1; min-width: 0; }
.rate-unit  { font-size: 12px; color: var(--card-muted); }
.rate-note  { font-size: 11px; color: var(--card-muted); font-style: italic; }
.rate-input:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Amount + currency inline ──────────────────────────────────────────── */
.amount-with-currency { display: flex; gap: 6px; }
.amount-with-currency .field-input { flex: 1; min-width: 0; }
.amount-currency-select { width: 90px; flex-shrink: 0; }

@media (max-width: 520px) {
    .profile-modal { width: 100%; border-radius: 0; align-self: flex-end; max-height: 90vh; }
    .modal-overlay { align-items: flex-end; }
}

/* ── Stage management modal ─────────────────────────────────────────────── */
/* .btn-stages carries no styling of its own — it shares .btn-filter's box
   (same size/padding as the Filters button) and only needs the class as a
   selector hook. */

.stages-modal {
    width: 560px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: translateY(-10px) scale(0.98);
    animation: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-overlay.is-open .stages-modal { opacity: 1; transform: none; }

.stages-list-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--modal-sep) transparent; }
.stages-loading   { padding: var(--modal-pad); color: var(--card-muted); font-size: 13px; }

.srow {
    display: flex; align-items: center; gap: 12px;
    padding: 0 var(--modal-pad); height: 58px;
    border-bottom: 1px solid var(--modal-sep);
    transition: background var(--trans);
}
.srow:last-child { border-bottom: none; }
.srow:hover      { background: rgba(0,0,0,0.025); }

.srow-head {
    height: auto; padding-top: 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--modal-sep);
}
.srow-head-name { flex: 1; }
.srow-head-col  {
    width: 60px; flex-shrink: 0; text-align: center;
    font-size: 10px; color: var(--card-muted); text-transform: uppercase;
    line-height: 1.25;
}

.srow-color-btn {
    width: 16px; height: 16px; border-radius: 50%;
    border: none; cursor: pointer; flex-shrink: 0; padding: 0;
    transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.srow-color-btn:hover { transform: scale(1.25); }

.srow-name {
    flex: 1; outline: none; min-width: 0;
    font-family: inherit; font-size: 13px; font-weight: 400;
    color: var(--card-text);
    background: transparent;
    border: 1px solid var(--modal-sep);
    border-radius: var(--r);
    padding: var(--modal-input-pad);
    height: var(--modal-input-h);
    transition: border-color var(--trans);
}
.srow-name:hover { border-color: var(--card-muted); }
.srow-name:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent); }

.srow-toggle {
    width: 60px; height: 20px; flex-shrink: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.srow-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.srow-toggle-ui {
    position: relative; width: 34px; height: 20px;
    background: var(--modal-sep); border-radius: 10px;
    transition: background 0.2s;
}
.srow-toggle-ui::after {
    content: ''; position: absolute;
    width: 14px; height: 14px; top: 3px; left: 3px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.srow-toggle input:checked + .srow-toggle-ui { background: var(--accent); }
.srow-toggle input:checked + .srow-toggle-ui::after { transform: translateX(14px); }
/* "Lost" toggle reads as a warning colour, not the same accent as the other
   two — it marks a terminal/negative state, not a visibility switch. */
.srow-toggle-lost input:checked + .srow-toggle-ui { background: var(--err-tx); }

.srow-del {
    background: none; border: none; cursor: pointer; padding: 6px;
    color: var(--card-muted); flex-shrink: 0; border-radius: 6px;
    display: flex; align-items: center;
    opacity: 0; transition: opacity var(--trans), color var(--trans), background var(--trans);
}
.srow:hover .srow-del:not(:disabled) { opacity: 1; }
.srow-del:hover:not(:disabled) { color: #e05252; background: rgba(224,82,82,0.08); }
.srow-del:disabled { opacity: 0.2; cursor: default; }

.stages-add-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 16px var(--modal-pad);
    background: none; border: none; border-top: 1px solid var(--modal-sep);
    cursor: pointer; font-size: 13px; font-family: inherit;
    color: var(--card-muted); text-align: left;
    transition: color var(--trans), background var(--trans);
}
.stages-add-btn:hover { color: var(--card-text); background: rgba(0,0,0,0.025); }

/* Color picker popover */
.color-picker {
    position: fixed; z-index: 1200;
    display: grid; grid-template-columns: repeat(10, 20px);
    column-gap: 4px; row-gap: 3px; padding: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.color-swatch {
    width: 20px; height: 20px; border-radius: 3px;
    border: 2px solid transparent; cursor: pointer; padding: 0;
    transition: transform 0.12s, border-color 0.12s;
}
.color-swatch:hover { transform: scale(1.18); }
.color-swatch.is-selected { border-color: var(--text); outline: none; }

/* ── Dark mode overrides (variables are already in [data-theme="dark"] above) */
[data-theme="dark"] {
    .auth-card { background: #1a1a1a; box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); }
    .auth-card .auth-title    { color: #EDEAE4; }
    .auth-card .auth-subtitle { color: #888; }
    .btn-loader   { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
    .field-input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px #171717 inset;
        -webkit-text-fill-color: #f0f0f0;
    }
    .kanban-card:hover { box-shadow: var(--card-hover); }
    .deals-table thead th { background: var(--card-bg); }
    .chip-sum { background: rgba(255,255,255,.08); }
    
    .checkbox-inp:checked + .checkbox-box { background: #f0f0f0; border-color: #f0f0f0; color: #111; }
    .field-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
    .profile-alert--success { background: #0a1a0d; border-color: #1a4a22; color: #70c080; }
    .profile-alert--error   { background: #1a0a0a; border-color: #4a1515; color: #f07070; }
}

/* ── Theme switcher ─────────────────────────────────────────────────────── */
.theme-switch {
    display: flex; gap: 4px;
    background: var(--bg); border-radius: var(--r);
    padding: 3px;
}
.theme-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: calc(var(--r) - 2px);
    font-family: inherit; font-size: 13px; font-weight: 400;
    color: var(--muted); background: none; border: none;
    cursor: pointer; transition: color var(--trans), background var(--trans);
    -webkit-tap-highlight-color: transparent;
}
.theme-btn:hover { color: var(--text); }
.theme-btn.is-active {
    background: var(--surface); color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Shared empty-value placeholder (deals list) ─────────────────────────── */
.deal-empty { color: var(--muted); font-style: italic; font-size: 12px; }

/* ── Deal counts (comments / actions) ──────────────────────────────────── */
.kc-counts {
    display: flex; gap: 8px; margin-top: 8px;
    border-top: 1px solid var(--card-line2); padding-top: 7px;
}
.kc-count {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: var(--muted);
    border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
    transition: color var(--trans);
}
.kc-count:hover { color: var(--accent); }
.kc-count svg   { width: 13px; height: 13px; flex-shrink: 0; }

/* Object list + converted total in kanban card */
.kc-objects     { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--card-line1); }
.kc-obj-list    { width: 100%; }
.kc-price-range { align-self: flex-end; font-size: 12px; color: var(--accent2); font-weight: 500; }

.deal-empty      { color: var(--card-muted); }

.deal-count-link {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: var(--card-muted);
    border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
    transition: color var(--trans);
}
.deal-count-link:hover { color: var(--accent); }
.deal-count-link svg   { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Filter button ──────────────────────────────────────────────────────── */
.btn-filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; height: 38px; border-radius: var(--r);
    border: 1px solid var(--border); background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    overflow: hidden;
    font-size: 13px; font-family: inherit; cursor: pointer;
    color: var(--toolbar-text); transition: border-color var(--trans), color var(--trans);
    position: relative; white-space: nowrap;
}
.btn-filter:hover           { border-color: var(--accent); color: var(--accent); }
.btn-filter.has-filters     { border-color: var(--accent); color: var(--accent); }
.filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
}

/* ── Filters modal — same chrome/sizing as the stage-management modal ───── */
.filters-modal {
    width: 420px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: translateY(-10px) scale(0.98);
    animation: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-overlay.is-open .filters-modal { opacity: 1; transform: none; }

.filters-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--modal-pad);
    scrollbar-width: thin; scrollbar-color: var(--modal-sep) transparent;
}
.filters-body::-webkit-scrollbar { width: 4px; }
.filters-body::-webkit-scrollbar-track { background: transparent; }
.filters-body::-webkit-scrollbar-thumb { background: var(--modal-sep); border-radius: 2px; }

.filter-form { display: flex; flex-direction: column; gap: var(--modal-gap); }
.filter-form .field { margin-bottom: 0; }
.filter-form .field-label {
    font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
    color: var(--card-muted); margin-bottom: 6px;
}
.filter-form .field-input,
.filter-form .field-select {
    height: var(--modal-input-h);
    background-color: transparent; border: 1px solid var(--modal-sep);
    border-radius: var(--r); font-size: 13px; color: var(--card-text);
}
.filter-form .field-input  { padding: var(--modal-input-pad); }
.filter-form .field-select {
    padding: 0 28px 0 12px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.filter-form .field-input:hover,
.filter-form .field-select:hover { border-color: var(--card-muted); }
.filter-form .field-input:focus,
.filter-form .field-select:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}

.filter-row { display: flex; align-items: center; gap: 6px; }
.filter-sep { color: var(--card-muted); font-size: 13px; flex-shrink: 0; }
.filter-input { flex: 1; min-width: 0; }

.filter-quick-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btn-quick {
    padding: 4px 10px; border-radius: var(--r);
    border: 1px solid var(--modal-sep); background: transparent;
    font-size: 12px; font-family: inherit; cursor: pointer;
    color: var(--card-muted); transition: all var(--trans);
}
.btn-quick:hover       { border-color: var(--accent); color: var(--accent); }
.btn-quick.is-active   { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Admin panel ─────────────────────────────────────────────────────────── */
.admin-page {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    padding: 20px 24px 0;
}
.admin-header {
    display: flex; align-items: center; gap: 24px;
    margin-bottom: 16px; flex-shrink: 0;
}
.admin-tabs {
    display: flex; gap: 2px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 3px;
}
.admin-tab {
    padding: 5px 14px; border-radius: calc(var(--r) - 1px);
    font-size: 13px; font-weight: 500; color: var(--muted);
    text-decoration: none; transition: all var(--trans);
}
.admin-tab:hover    { color: var(--text); }
.admin-tab.is-active { background: var(--accent); color: #fff; }

.admin-table .col-num { text-align: center; width: 60px; }
.admin-table .admin-email { font-size: 12px; color: var(--muted); }
.admin-table .admin-date  { font-size: 12px; color: var(--muted); white-space: nowrap; }

.admin-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 5px; border-radius: 3px;
    background: var(--accent); color: #fff;
    vertical-align: middle; margin-left: 4px; text-transform: uppercase;
}

.status-dot {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.status-dot.is-active  { background: #22c55e; }
.status-dot.is-blocked { background: #ef4444; }

.approve-yes { color: #22c55e; font-weight: 600; font-size: 13px; }
.approve-no  { color: var(--muted); font-size: 13px; }

.btn-admin-action {
    padding: 4px 10px; border-radius: 6px;
    border: 1px solid var(--modal-sep); background: transparent;
    font-size: 13px; font-family: inherit; cursor: pointer;
    color: var(--card-muted); transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.btn-admin-action:hover:not(:disabled) { border-color: var(--icon-clock); color: var(--icon-clock); }
.btn-admin-action:disabled             { opacity: .4; cursor: default; }
.btn-admin-action--save                { border-color: var(--icon-clock); color: var(--icon-clock); }
.btn-admin-action--save:hover          { background: var(--icon-clock); color: #fff; border-color: var(--icon-clock); }
/* Semantic colours so an action's weight (blocking a client vs. re-enabling
   them vs. a one-way external integration) reads at a glance, not just from
   the label text. */
.btn-admin-action--danger              { border-color: var(--err-tx); color: var(--err-tx); }
.btn-admin-action--danger:hover         { background: var(--err-tx); color: #fff; border-color: var(--err-tx); }
.btn-admin-action--success              { border-color: #22c55e; color: #22c55e; }
.btn-admin-action--success:hover        { background: #22c55e; color: #fff; border-color: #22c55e; }
.btn-admin-action--accent               { border-color: var(--accent2); color: var(--accent2); }
.btn-admin-action--accent:hover         { background: var(--accent2); color: #fff; border-color: var(--accent2); }


.bx-confirm-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 6px;
    background: color-mix(in srgb, var(--warn-tx) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn-tx) 30%, transparent);
}
.bx-confirm-text { font-size: 12px; color: var(--warn-tx); white-space: normal; flex: 1; min-width: 160px; }
.input-bitrix-prefix {
    flex: 1; min-width: 90px; font-size: 13px; height: 30px; padding: 4px 8px;
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; color: var(--card-text);
}
.input-bitrix-cat {
    width: 96px; flex-shrink: 0; font-size: 13px; height: 30px; padding: 4px 8px;
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; color: var(--card-text);
}
/* Locked once a code is already assigned — editing it after the fact would
   desync the Bitrix stage/deal mapping that was built off that number. */
.input-bitrix-cat.is-locked {
    opacity: 0.6; color: var(--card-muted); cursor: default;
}

/* ── Bitrix client link + copy button (admin table & client profile) ────── */
.bx-link-row {
    display: flex; align-items: center; gap: 6px; width: 100%;
}
.bx-link-input {
    flex: 1; min-width: 0; font-size: 11px; height: 26px; padding: 3px 6px;
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; color: var(--card-text);
    text-overflow: ellipsis;
}
.bx-copy-btn {
    flex-shrink: 0; width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--modal-sep); border-radius: 6px;
    color: var(--card-muted); cursor: pointer;
    transition: color var(--trans), border-color var(--trans);
}
.bx-copy-btn:hover  { color: var(--accent); border-color: var(--accent); }
.bx-copy-btn.is-copied { color: #22c55e; border-color: #22c55e; }

/* ── "Active until" date (admin Users tab) ───────────────────────────────── */
.input-active-until {
    flex: 1; min-width: 130px; font-size: 13px; height: 30px; padding: 4px 8px;
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; color: var(--card-text); font-family: inherit;
}

/* ── Users table (admin/users) — column widths sized per content ────────── */
.users-table .col-reg      { width: 90px; }
.users-table .col-version  { width: 140px; }
.users-table .col-partner  { width: 150px; white-space: nowrap; }
.users-table .col-company  { width: 220px; }
.users-table .col-country  { width: 110px; }
.users-table .col-region   { width: 150px; }
.users-table .col-phone    { width: 130px; white-space: nowrap; }
.users-table .col-email    { width: 210px; }
.users-table .col-status,
.users-table .col-paid     { width: 108px; }
.users-table .col-actions  { width: 90px; }

/* Status/Paid: label on top, action button below — narrower column than a
   side-by-side layout needs. The <td> itself stays a normal table-cell (so
   it keeps lining up with its <th>); only the inner wrapper is a flex column. */
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cell-stack .btn-admin-action { margin-left: 0; }

.version-chip { font-size: 13px; font-weight: 500; }
.version-chip.is-trial { color: var(--muted); }
.version-chip.is-paid  { color: var(--accent2); }
.days-left { display: block; font-size: 11px; color: var(--card-muted); margin-top: 2px; }
.days-left.is-low      { color: var(--warn-tx); }
.days-left.is-expired  { color: var(--err-tx); font-weight: 600; }

/* Partner link — its own full-width row spanning from the Version column
   onward, so the URL is never clipped by a single column's width. The data
   row right above it drops its border so the two read as one group, with
   only the link row's own border-bottom separating this partner from the
   next. */
.has-link-row td { border-bottom: none; }
.partner-link-row td { padding-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--card-line2); }
.partner-link-row .bx-link-row { max-width: 640px; }
.partner-link-row .bx-link-input { font-size: 12px; }

/* One product link per row (SCANDI 5/4+/4-30/4/3) — label column stays a
   fixed width so all 5 link fields line up underneath each other. */
.partner-link-list { display: flex; flex-direction: column; gap: 6px; }
.partner-link-label {
    flex-shrink: 0; width: 88px; font-size: 12px; font-weight: 500;
    color: var(--card-muted); white-space: nowrap;
}

.admin-filter-bar { margin-bottom: 12px; flex-shrink: 0; }
.admin-filter-form {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap;
}
.admin-select { min-width: 180px; max-width: 240px; }

/* Editable admin table (Ambassadors tab) — plain text inputs sized per
   column, same look as .input-bitrix-prefix's text-field convention. */
.admin-input {
    width: 100%; font-size: 13px; height: 32px; padding: 4px 8px;
    /* background-color (not the "background" shorthand) — a <select> here
       also carries .field-select, whose own background shorthand paints the
       dropdown chevron; a later shorthand here would wipe that image out. */
    background-color: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; color: var(--card-text); font-family: inherit;
}
select.admin-input { padding-right: 24px; cursor: pointer; }
.ambassadors-table .col-amb-country { width: 150px; }
.ambassadors-table .col-amb-region  { width: 200px; }
.ambassadors-table .col-amb-city    { width: 180px; }
.ambassadors-table .col-amb-product { width: 200px; }
.ambassadors-table .col-amb-name    { width: 160px; }
.ambassadors-table .col-amb-actions { width: 90px; }
.ambassadors-table td { vertical-align: middle; }
.ambassadors-table .arow-actions { white-space: nowrap; }

.arow-archived-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    color: var(--card-muted); text-transform: uppercase;
    margin-right: 8px;
}
.arow.is-archived .admin-input { opacity: 0.6; }

/* Delete-with-linked-deals choice — wider than the plain delete button, so
   the .col-amb-actions column (auto table layout, not fixed) grows to fit it
   instead of clipping; .table-wrap already scrolls horizontally if needed. */
.arow-choice {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.arow-choice-text { font-size: 12px; color: var(--card-muted); white-space: nowrap; }

.admin-stage-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--c, #888);
    margin-right: 5px; vertical-align: middle; flex-shrink: 0;
}
.admin-owner-link {
    font-size: 12px; color: var(--accent); text-decoration: none;
}
.admin-owner-link:hover { text-decoration: underline; }

.admin-page .table-wrap { flex: 1; overflow-y: auto; min-height: 0; }

/* ── Admin dashboard ──────────────────────────────────────────────────────── */
.dashboard-scroll {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 0 24px 32px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 28px;
}
.stat-tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 18px; border-radius: var(--modal-radius);
    background: var(--card-bg); border: 1px solid var(--card-bd);
    box-shadow: var(--card-hover);
}
.stat-label { font-size: 12px; color: var(--card-muted); }
.stat-value { font-size: 28px; font-weight: 300; letter-spacing: -0.02em; color: var(--card-text); }
.stat-value--sm { font-size: 20px; font-weight: 400; }

/* Status tint follows the same good/warning/critical triples used elsewhere
   (toasts, alerts) — reserved for actual states, not decoration. */
.stat-tile--ok     { background: var(--ok-bg);   border-color: var(--ok-bd); }
.stat-tile--ok     .stat-value { color: var(--ok-tx); }
.stat-tile--warn   { background: var(--warn-bg); border-color: var(--warn-bd); }
.stat-tile--warn   .stat-value { color: var(--warn-tx); }
.stat-tile--danger { background: var(--err-bg);  border-color: var(--err-bd); }
.stat-tile--danger .stat-value { color: var(--err-tx); }

.dash-section { margin-bottom: 28px; }
.dash-section-title {
    font-size: 15px; font-weight: 500; color: var(--text);
    margin-bottom: 14px;
}

/* Inline per-country subdivision maps (assets/img/map-{ua,de,nl}.svg, from the
   @svg-maps npm package family — github.com/VictorCazanave/svg-maps, CC-BY-4.0).
   One .country-map per country, JS toggles which is visible; every region path
   that matches a geo_regions row is tagged .geo-region with a data-driven fill,
   the rest render with the neutral no-data fill. */
.country-map { max-width: 640px; margin-bottom: 6px; }
.geo-svg-wrap svg {
    width: 100%; height: auto; display: block;
    overflow: visible;
}
.geo-svg-wrap svg path {
    fill: var(--modal-sep); stroke: var(--modal-bd); stroke-width: 0.6;
}
.geo-svg-wrap svg path.geo-region {
    cursor: pointer;
    transition: filter var(--trans), stroke-width var(--trans), stroke var(--trans);
}
.geo-svg-wrap svg path.geo-region:hover { filter: brightness(1.15); stroke-width: 1.4; }

/* Legend / precise click target — the map's countries are tiny at this crop
   (Netherlands especially), so these chips double as the practical way to
   pick one, while the map delivers the "where are we" visual. */
.geo-map { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.geo-tile {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; min-width: 160px;
    border-radius: var(--modal-radius);
    background: var(--card-bg); border: 1px solid var(--card-bd);
    cursor: pointer; font-family: inherit;
    transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.geo-tile:hover   { border-color: var(--accent); }
.geo-tile.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.geo-tile-flag  { font-size: 22px; line-height: 1; }
.geo-tile-name  { font-size: 14px; color: var(--card-text); flex: 1; text-align: left; }
.geo-tile-count {
    font-size: 13px; font-weight: 600; color: #fff;
    background: var(--accent); border-radius: 20px;
    padding: 2px 10px; flex-shrink: 0;
}

@media (max-width: 600px) {
    .dashboard-scroll { padding: 0 12px 24px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .geo-tile { min-width: 0; flex: 1 1 calc(50% - 6px); }
}

@media (max-width: 600px) {
    .admin-page { padding: 14px 12px 0; }
    .admin-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .admin-table .admin-email, .admin-table .admin-date, .admin-table .admin-bitrix { display: none; }
    .admin-actions { flex-direction: column; gap: 4px; }
}

/* ── Admin users page (/admin/users) ─────────────────────────────────────── */
.au-list { display: flex; flex-direction: column; }
.au-row {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--modal-sep);
}
.au-row:last-child { border-bottom: none; }
.au-name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-name { font-size: 13px; font-weight: 500; color: var(--card-text); display: flex; align-items: center; gap: 6px; }
.au-reg-date { font-size: 12px; color: var(--card-muted); }
.au-deals-badge {
    font-size: 12px; color: var(--card-muted); background: var(--modal-bg);
    border-radius: 20px; padding: 2px 9px; flex-shrink: 0;
}

/* One shared card per (non-super-admin) user, grouping every editable field
   so it reads as a single unit instead of scattered rows. */
.au-block {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 8px; padding: 12px;
    background: var(--modal-sep); border-radius: var(--r);
}
.au-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* General sibling (not adjacent) so the divider still applies after the
   conditionally-hidden .bx-confirm-row, which sits between two .au-line rows
   but isn't one itself. */
.au-line ~ .au-line { padding-top: 10px; border-top: 1px solid var(--modal-bd); }

.au-dates-row { font-size: 12px; color: var(--card-muted); }
.au-dates-sep { color: var(--card-muted); }
.au-au-label { font-size: 12px; color: var(--card-muted); }

.au-email-input {
    flex: 1; min-width: 160px; font-size: 13px; height: 30px; padding: 4px 8px;
    background: transparent; border: 1px solid var(--modal-sep);
    border-radius: 6px; color: var(--card-text); font-family: inherit;
}
.admin-email-msg { font-size: 12px; }

.au-status-text { font-size: 13px; font-weight: 500; }
.au-status-text.is-active  { color: #22c55e; }
.au-status-text.is-blocked { color: var(--err-tx); }

.au-bx-company-status { font-size: 12px; color: var(--card-muted); }
.au-bx-company-status.is-yes { color: #22c55e; }

.profile-empty { color: var(--card-muted); font-size: 14px; margin: 16px 0; }

@media (max-width: 560px) {
    .au-hide-mobile { display: none; }
    .admin-actions { flex-direction: column; gap: 4px; }
}

/* ── ToS read modal (auth pages) ───────────────────────────────────────── */
.tos-read-link {
    color: var(--accent); text-decoration: underline; cursor: pointer;
}
.tos-modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.tos-modal {
    background: var(--surface); border-radius: var(--r);
    width: 100%; max-width: 520px; max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.tos-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 14px; flex-shrink: 0;
    color: var(--text);
}
.tos-modal-body {
    padding: 16px; overflow-y: auto;
    font-size: 13px; line-height: 1.65; color: var(--text);
}

/* ── ToS checkbox block (auth forms) ────────────────────────────────────── */
.tos-login-field  { margin-top: 8px; }
.tos-box {
    max-height: 140px; overflow-y: auto;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid #e2e2e2; border-radius: var(--r);
    background: #fafafa; font-size: 13px; line-height: 1.55;
    color: #333;
}
.tos-check-wrap   { margin-top: 4px; }

/* ── ToS admin editor ───────────────────────────────────────────────────── */
/* Opaque card — .admin-page has no background of its own, so it shows the
   page photo straight through (see body{} above); every other admin screen
   avoids that because its content already sits on card/table backgrounds.
   Same var(--card-bg)/var(--card-bd) pairing as kanban cards, stat tiles and
   .profile-modal, so text stays readable in both themes — see the paired
   text-color overrides below (same pattern as .profile-modal .field-label). */
.tos-editor {
    max-width: 740px; display: flex; flex-direction: column; gap: 18px;
    padding: 24px; margin-top: 8px;
    background: var(--card-bg); border: 1px solid var(--card-bd);
    border-radius: var(--modal-radius); box-shadow: var(--card-hover);
}
.tos-editor .field-label   { color: var(--card-muted); }
.tos-editor .field-hint    { color: var(--card-muted); }
.tos-editor .checkbox-label { color: var(--card-text); }
.tos-editor .field-select {
    background-color: var(--card-bg); color: var(--card-text);
    border-bottom-color: #dcdcdc;
}
.tos-textarea     { font-size: 13px; line-height: 1.6; min-height: 200px; resize: vertical; }
.tos-editor-foot  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tos-saved-msg    { font-size: 13px; color: var(--accent); }

/* preview кнопка в ToS = стиль admin-action кнопок */
.profile-modal .btn-outline-sm {
    height: 30px; padding: 0 12px; font-size: 12px; font-weight: 400;
    border: 1px solid var(--modal-sep); border-radius: 6px;
    background: transparent; color: var(--card-muted); cursor: pointer;
    font-family: inherit;
    transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.profile-modal .btn-outline-sm:hover { border-color: var(--icon-clock); color: var(--icon-clock); }