/* =========================================================================
   PREMIUM SAAS DESIGN — shared overrides for login, tools pages, modals,
   cards, chips, and forms. Color palette is dark navy (#0c1326 / #050913)
   for hero surfaces, white for content cards, blue (#2563eb / #60a5fa) for
   accents and focus states. Typography is 12-13.5px Inter / system stack.
   ------------------------------------------------------------------------- */

/* ---- BODY BACKGROUND ---- */
body{
    background:
        radial-gradient(1200px 600px at 0% -10%, rgba(96,165,250,.08) 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(168,85,247,.06) 0%, transparent 60%),
        #f5f7fb;
    min-height:100vh;
}

/* =========================================================================
   LOGIN PAGE — full-screen gradient, glass-morphism card
   ========================================================================= */
.login-page{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(96,165,250,.22) 0%, transparent 55%),
        radial-gradient(1000px 500px at 100% 100%, rgba(168,85,247,.18) 0%, transparent 55%),
        radial-gradient(800px 400px at 50% 50%, rgba(34,197,94,.06) 0%, transparent 70%),
        linear-gradient(135deg, #050913 0%, #0c1326 50%, #0a0f24 100%);
    overflow:hidden;
}
/* Decorative orbs floating in the background */
.login-page::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(96,165,250,.15) 0%, transparent 70%);
    top:-100px;
    left:-100px;
    filter:blur(40px);
    pointer-events:none;
}
.login-page::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(168,85,247,.18) 0%, transparent 70%);
    bottom:-80px;
    right:-80px;
    filter:blur(40px);
    pointer-events:none;
}

.login-card{
    position:relative;
    z-index:2;
    width:100%;
    max-width:420px;
    padding:36px 36px 32px;
    background:rgba(15,23,42,.55);
    border:1px solid rgba(148,163,184,.18);
    border-radius:20px;
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.08) inset,
        0 0 0 1px rgba(96,165,250,.06),
        0 32px 80px -20px rgba(0,0,0,.6),
        0 12px 24px -8px rgba(0,0,0,.4);
    color:#e2e8f0;
}
/* Wordmark / branding above the form */
.login-card::before{
    content:"";
    display:block;
    width:44px;
    height:44px;
    margin:0 auto 16px;
    border-radius:12px;
    background:
        linear-gradient(135deg, #60a5fa 0%, #2563eb 50%, #7c3aed 100%);
    box-shadow:
        0 8px 24px -4px rgba(96,165,250,.5),
        0 0 0 1px rgba(255,255,255,.18) inset;
    position:relative;
}
.login-card::after{
    content:"●";
    position:absolute;
    top:48px;
    left:50%;
    transform:translateX(-50%);
    color:#60a5fa;
    font-size:6px;
    text-shadow:0 0 12px rgba(96,165,250,.8);
    pointer-events:none;
}
.login-card h1{
    margin:0 0 6px;
    text-align:center;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#ffffff;
    background:linear-gradient(180deg, #ffffff 0%, #cbd5e1 130%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.login-card form{
    margin-top:22px;
    display:flex;
    flex-direction:column;
    gap:11px;
}
/* Login subtitle (added via JS from the h1) */
.login-card .login-tagline{
    text-align:center;
    margin:0 0 4px;
    color:#94a3b8;
    font-size:12px;
    line-height:1.45;
}
.login-card .input{
    height:44px;
    padding:0 14px;
    border-radius:11px;
    border:1px solid rgba(148,163,184,.2);
    background:rgba(255,255,255,.05);
    color:#ffffff;
    font-size:14px;
    transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.login-card .input::placeholder{color:#94a3b8}
.login-card .input:focus{
    outline:none;
    background:rgba(255,255,255,.08);
    border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.22);
}
.login-card .btn.dark{
    margin-top:6px;
    height:44px;
    border-radius:11px;
    background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color:#ffffff;
    border:0;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 8px 20px -4px rgba(37,99,235,.6),
        0 4px 8px -2px rgba(37,99,235,.3);
    transition:transform .12s ease, box-shadow .15s ease;
}
.login-card .btn.dark:hover{
    transform:translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 12px 28px -6px rgba(37,99,235,.7),
        0 6px 12px -2px rgba(37,99,235,.4);
}
.login-card .btn.dark:active{transform:translateY(0)}
/* Login alert (wrong username/password) */
.login-card .alert.red{
    background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.3);
    color:#fca5a5;
    border-radius:10px;
    padding:9px 13px;
    font-size:12.5px;
    margin:14px 0 0;
}

/* =========================================================================
   TOOLS-PAGE HEADER — admin, validation, logs
   .screen > .hero gets the same premium dark band as the main app hero
   but slightly more compact since these are utility pages.
   ========================================================================= */
.screen{padding:18px 10px;max-width:none;margin:0 auto}
.screen > .hero{
    position:relative;
    background:linear-gradient(180deg, #0c1326 0%, #050913 100%);
    color:#e2e8f0;
    border-radius:18px;
    padding:14px 20px;
    margin-bottom:14px;
    box-shadow:
        0 1px 0 0 rgba(255,255,255,.04) inset,
        0 0 0 1px rgba(148,163,184,.08),
        0 18px 40px -16px rgba(2,6,23,.55),
        0 6px 12px -6px rgba(2,6,23,.35);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.screen > .hero::before{
    content:"";
    position:absolute;
    top:-40%;
    left:-10%;
    width:60%;
    height:140%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(96,165,250,.18) 0%, rgba(96,165,250,0) 70%);
    pointer-events:none;
}
.screen > .hero > div{position:relative;z-index:1}
.screen > .hero p{
    margin:0 0 4px;
    color:#93c5fd;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.22em;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.screen > .hero p::before{
    content:"";
    width:6px;height:6px;border-radius:999px;background:#60a5fa;
    box-shadow:0 0 0 4px rgba(96,165,250,.18), 0 0 14px rgba(96,165,250,.5);
}
.screen > .hero h1{
    margin:0;
    font-size:22px;
    line-height:1.1;
    font-weight:700;
    letter-spacing:-.02em;
    color:#ffffff;
    background:linear-gradient(180deg, #ffffff 0%, #cbd5e1 120%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.screen > .hero span{
    display:block;margin-top:4px;color:#94a3b8;
    font-size:12px;line-height:1.45;font-weight:400;
}
.screen > .hero .menu .btn.light{
    border-radius:999px;padding:6px 14px;
    font-size:11.5px;font-weight:500;min-height:30px;
    background:rgba(255,255,255,.04);
    color:#e2e8f0;
    border:1px solid rgba(148,163,184,.18);
    backdrop-filter:blur(10px);
}
.screen > .hero .menu .btn.light:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(148,163,184,.32);
    color:#ffffff;
}

/* =========================================================================
   CARDS — used across admin, validation, logs.
   Refined white surfaces, hairline borders, soft shadows.
   ========================================================================= */
.screen .card,
.screen .grid2 > .card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:18px 20px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 8px 24px -12px rgba(15,23,42,.08);
}
.screen .card h2{
    margin:0 0 12px;
    font-size:14px;
    font-weight:700;
    letter-spacing:-.01em;
    color:#0f172a;
    display:flex;
    align-items:center;
    gap:8px;
}
.screen .card h2::before{
    content:"";
    width:3px;height:14px;border-radius:2px;
    background:linear-gradient(180deg, #60a5fa, #2563eb);
}
.screen .card .text-muted,
.screen .card p{
    margin:0 0 12px;
    color:#64748b;
    font-size:12.5px;
    line-height:1.5;
}
.screen .card .small-text{font-size:12px}
.screen .card .input,
.screen .card select.input,
.screen .card textarea.input{
    width:100%;
    height:38px;
    padding:0 12px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:#fafafa;
    font-size:13px;
    color:#0f172a;
    transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    appearance:none;-webkit-appearance:none;
    box-sizing:border-box;
}
.screen .card textarea.input{height:auto;min-height:80px;padding:10px 12px;line-height:1.45;resize:vertical}
.screen .card select.input{
    padding-right:32px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:11px 11px;
    cursor:pointer;
}
.screen .card .input:focus,
.screen .card select.input:focus,
.screen .card textarea.input:focus{
    outline:none;background:#ffffff;
    border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.18);
}
.screen .card input[type="file"].input{padding:7px 10px;font-size:12px;line-height:1.3}

/* Buttons inside cards / pages — pill-shaped, refined hierarchy */
.screen .card .btn,
.screen .filters .btn,
.screen .modal-actions .btn,
body > .modal-bg .btn{
    border-radius:10px;
    padding:8px 16px;
    font-size:12.5px;
    font-weight:600;
    min-height:36px;
    letter-spacing:-.005em;
    transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.screen .card .btn.dark,
body > .modal-bg .btn.dark{
    background:linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color:#ffffff;
    border:0;
    box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 4px 10px -2px rgba(15,23,42,.3);
}
.screen .card .btn.dark:hover,
body > .modal-bg .btn.dark:hover{
    background:linear-gradient(135deg, #334155 0%, #1e293b 100%);
    transform:translateY(-1px);
}
.screen .card .btn.light,
body > .modal-bg .btn.light{
    background:#ffffff;
    color:#0f172a;
    border:1px solid #e2e8f0;
}
.screen .card .btn.light:hover,
body > .modal-bg .btn.light:hover{
    background:#f8fafc;
    border-color:#cbd5e1;
}
.screen .card .btn.red,
body > .modal-bg .btn.red{
    background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color:#ffffff;
    border:0;
    box-shadow:0 4px 10px -2px rgba(220,38,38,.4);
}
.screen .card .btn.red:hover,
body > .modal-bg .btn.red:hover{
    background:linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    transform:translateY(-1px);
}
.screen .card .btn.small{min-height:30px;padding:6px 12px;font-size:11.5px}

/* User boxes (admin: list of current users) */
.screen .user-box{
    background:#fafafa;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:10px;
    transition:background-color .15s ease, border-color .15s ease;
}
.screen .user-box:hover{background:#f1f5f9;border-color:#cbd5e1}
.screen .user-box b{
    display:block;
    color:#0f172a;
    font-size:13px;
    font-weight:700;
    margin-bottom:2px;
}
.screen .user-box > div{
    color:#64748b;
    font-size:11.5px;
    margin-bottom:8px;
    text-transform:capitalize;
}
.screen .user-box .row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.screen .user-box .row .input{height:32px;font-size:12px;flex:1}
.screen .user-box form{margin:0}

/* Validation chips — pill-shaped value tags with delete button */
.screen .chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:14px;
}
.screen .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 4px 5px 11px;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    border-radius:999px;
    font-size:12px;
    color:#0f172a;
    transition:background-color .15s ease, border-color .15s ease;
}
.screen .chip:hover{background:#e2e8f0;border-color:#cbd5e1}
.screen .chip > span{font-weight:500}
.screen .chip.readonly-chip{
    background:#eff6ff;
    border-color:#bfdbfe;
    padding:5px 11px;
}
.screen .chip .readonly-pill{
    background:#dbeafe;
    color:#1e40af;
    font-size:9.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:2px 8px;
    border-radius:999px;
}
.screen .chip form{margin:0}
.screen .chip .btn.red.small{
    min-height:22px;
    padding:0 8px;
    font-size:10.5px;
    border-radius:999px;
    box-shadow:none;
    font-weight:600;
}
.screen .empty-state{
    color:#94a3b8;
    font-size:12px;
    font-style:italic;
    padding:6px 0;
}

/* Validation page row form (add / bulk-add) */
.screen .card .row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.screen .card .row .input{flex:1;height:36px}
.screen .card .mt-3{margin-top:12px}
.screen .card .import-actions{margin-bottom:10px}
.screen .card .import-form{display:flex;gap:8px;align-items:center}
.screen .card .import-form .input{flex:1}
.screen .card .hint{
    margin-top:8px;
    font-size:11.5px;
    color:#94a3b8;
    font-style:italic;
}

/* Logs filter card */
.screen > form.card.filters{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:10px 14px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:14px;
}
.screen > form.card.filters label{display:flex;flex-direction:column;gap:4px;margin:0;flex:0 0 auto;min-width:200px}
.screen > form.card.filters label > span{
    font-size:9.5px;font-weight:600;text-transform:uppercase;
    letter-spacing:.12em;color:#64748b;padding-left:2px;
}
.screen > form.card.filters select.input{
    height:34px;padding:0 30px 0 12px;
    border-radius:9px;border:1px solid #e2e8f0;background:#fafafa;
    font-size:12.5px;color:#0f172a;cursor:pointer;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;background-size:11px 11px;
}
.screen > form.card.filters select.input:focus{
    outline:none;background-color:#ffffff;border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.18);
}

/* Tables on logs / login_logs */
.screen .card .table-wrap{
    margin:0 -20px -18px;
    padding:0;
    border-top:1px solid #e2e8f0;
    border-radius:0 0 16px 16px;
    overflow:auto;
    max-height:none;
}
.screen .card table{width:100%;border-collapse:collapse;font-size:12px}
.screen .card table thead th{
    position:sticky;top:0;z-index:1;
    background:#f8fafc;
    color:#475569;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-align:left;
    padding:9px 12px;
    border-bottom:1px solid #e2e8f0;
}
.screen .card table tbody td{
    padding:8px 12px;
    border-bottom:1px solid #f1f5f9;
    color:#334155;
    vertical-align:top;
}
.screen .card table tbody tr:hover{background:#fafafa}
.screen .card table tbody tr:last-child td{border-bottom:0}

/* Grid layout for admin/validation cards */
.screen .grid2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
    margin-bottom:14px;
}
.screen .admin-data-tools{margin-bottom:14px}
@media (max-width:900px){.screen .grid2{grid-template-columns:1fr}}

/* Alerts on tools pages */
.screen .alert{
    padding:10px 14px;
    border-radius:10px;
    font-size:12.5px;
    line-height:1.45;
    margin-bottom:14px;
    border:1px solid transparent;
}
.screen .alert.blue{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe}
.screen .alert.red{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.screen .alert.amber{background:#fffbeb;color:#92400e;border-color:#fde68a}
.screen .card .alert.blue{margin-bottom:12px}

/* =========================================================================
   MODALS — Add Lead, Edit Lead, Delete confirm, Move month, Undo
   ========================================================================= */
body > .modal-bg{
    position:fixed;
    inset:0;
    z-index:1000;
    /* Solid dark overlay — was previously rgba(2,6,23,.55) + backdrop-filter
       blur(6px), but blur(6px) over a full viewport gets re-evaluated by
       the GPU on every animation frame. When the lead list has thousands
       of rows behind the modal, the modal-open animation visibly stutters
       (Add Lead from Following Up felt slow; Add Lead from Dead/Denied
       felt fast). A darker non-blurred backdrop matches the visual
       intent without paying the GPU cost. */
    background:rgba(2,6,23,.72);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    animation:modalBgFadeIn .18s ease;
}
@keyframes modalBgFadeIn{from{opacity:0}to{opacity:1}}

body > .modal-bg .modal{
    position:relative;
    background:#ffffff;
    border-radius:18px;
    padding:20px 22px 18px;
    width:100%;
    max-width:480px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 0 0 1px rgba(15,23,42,.06),
        0 32px 80px -20px rgba(15,23,42,.4),
        0 12px 24px -8px rgba(15,23,42,.2);
    color:#0f172a;
    animation:modalSlideUp .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

body > .modal-bg .modal.wide{max-width:1520px}

body > .modal-bg .modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px solid #f1f5f9;
}
body > .modal-bg .modal-head h2{
    margin:0;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    color:#0f172a;
    display:flex;
    align-items:center;
    gap:8px;
}
body > .modal-bg .modal-head h2::before{
    content:"";
    width:3px;height:18px;border-radius:2px;
    background:linear-gradient(180deg, #60a5fa, #2563eb);
}
body > .modal-bg .modal-head .x{
    width:30px;height:30px;
    border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
    color:#64748b;
    font-size:18px;line-height:1;
    text-decoration:none;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
body > .modal-bg .modal-head .x:hover{
    background:#fee2e2;border-color:#fca5a5;color:#dc2626;
}

body > .modal-bg .modal p{
    margin:0 0 14px;
    color:#475569;
    font-size:13px;
    line-height:1.55;
}
body > .modal-bg .modal .soft-box{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:14px;
    font-size:12.5px;
    color:#0f172a;
}
body > .modal-bg .modal .soft-box b{font-weight:600}

body > .modal-bg .modal .input,
body > .modal-bg .modal select.input,
body > .modal-bg .modal textarea.input{
    width:100%;
    height:40px;
    padding:0 12px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:#fafafa;
    font-size:13px;
    color:#0f172a;
    transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    appearance:none;-webkit-appearance:none;
    box-sizing:border-box;
}
body > .modal-bg .modal .input:focus,
body > .modal-bg .modal select.input:focus,
body > .modal-bg .modal textarea.input:focus{
    outline:none;background:#ffffff;
    border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.18);
}

body > .modal-bg .modal-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #f1f5f9;
}

/* Lead modal (Add Lead / Edit Lead) — wider, more compact rows */
body > .modal-bg .modal.lead-modal{
    padding:16px 20px 14px;
}
body > .modal-bg .modal.lead-modal .modal-head{
    margin-bottom:10px;padding-bottom:10px;
}
body > .modal-bg .modal.lead-modal .lead-edit-grid label{
    display:flex;flex-direction:column;gap:3px;
}
body > .modal-bg .modal.lead-modal .lead-edit-grid label > span{
    font-size:9.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#64748b;
    margin-bottom:2px;
    padding-left:2px;
    line-height:1.2;
}
body > .modal-bg .modal.lead-modal .lead-edit-grid .input,
body > .modal-bg .modal.lead-modal .lead-edit-grid select.input,
body > .modal-bg .modal.lead-modal .lead-edit-grid textarea.input{
    height:32px;
    padding:0 10px;
    font-size:12px;
    border-radius:8px;
}
body > .modal-bg .modal.lead-modal .lead-edit-grid select.input{
    padding-right:28px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center;background-size:10px 10px;cursor:pointer;
}
body > .modal-bg .modal.lead-modal .lead-edit-grid textarea.input{
    height:auto;min-height:54px;padding:7px 10px;line-height:1.4;resize:vertical;
}

/* Lead modal: continent input is read-only — show that visually */
body > .modal-bg .modal.lead-modal .continent-input{
    background:#f1f5f9;color:#475569;cursor:not-allowed;
}

/* Lead modal: USD price field (with $ prefix) */
body > .modal-bg .modal .money-input{position:relative}
body > .modal-bg .modal .money-input > span{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    color:#64748b;font-size:12px;pointer-events:none;font-weight:600;
}
body > .modal-bg .modal .money-input input{padding-left:24px !important}

/* Lead modal: Quted Price row with currency buttons */
body > .modal-bg .modal .quote-row{display:flex;gap:4px;align-items:center}
body > .modal-bg .modal .quote-row .input{flex:1}
body > .modal-bg .modal .quote-row button{
    width:28px;height:28px;
    border-radius:7px;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    color:#0f172a;
    font-size:12px;font-weight:600;
    cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease;
}
body > .modal-bg .modal .quote-row button:hover{background:#e2e8f0;border-color:#cbd5e1}
body > .modal-bg .modal .quote-row .other-currency{
    width:50px;height:28px;
    padding:0 8px;
    border-radius:7px;
    border:1px solid #e2e8f0;background:#fafafa;
    font-size:11px;color:#0f172a;
}

/* Duplicate-lead alert inside the Add Lead modal */
body > .modal-bg .modal #duplicateLeadBox.alert{
    border-radius:10px;
    padding:9px 12px;
    font-size:12px;
    line-height:1.4;
    background:#fffbeb;
    color:#92400e;
    border:1px solid #fde68a;
    margin-bottom:10px;
}

/* Searchable autocomplete dropdown inside modals — keep light-mode look */
body > .modal-bg .modal .searchable-select-options{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:9px;
    box-shadow:0 16px 32px -8px rgba(15,23,42,.18);
    z-index:10;
}

/* =========================================================================
   PRESENCE PILL — "Online Users" block inside the dark hero
   ------------------------------------------------------------------------- */
.hero-presence{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:160px;
    flex:0 1 auto;
    align-self:center;
}
.hero-presence-head{
    font-size:9.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:rgba(203,213,225,.6);
}
/* Layout: grid that fills 4 rows per column then starts a new column.
   Once column 1 is full (4 users), the 5th name flows into the top of
   column 2, the 9th into column 3, etc. The container grows in width
   automatically as new users come online — no maximum, the hero just
   gets wider gracefully. */
.hero-presence-list{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(4, auto);
    grid-auto-columns:max-content;
    column-gap:18px;
    row-gap:1px;
}
/* Each user row inside the presence list. We force flex-row + zero margin
   with !important because style.css has a global ".hero span { display:block;
   margin-top:9px }" that would otherwise stack our inline children. The row
   container is a <div> (not <span>) so that global rule never targets it
   directly — only its inner spans, which we reset below. */
.hero-presence-item{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px;
    padding:0;
    margin:0 !important;
    background:transparent;
    border:0;
    box-shadow:none;
    font-size:10px;
    font-weight:500;
    color:#cbd5e1;
    line-height:1.3;
    white-space:nowrap;
}
.hero-presence-item:hover{color:#f1f5f9}
.hero-presence-item.is-active   {color:#dcfce7}
.hero-presence-item.is-inactive {color:#fde68a}
.hero-presence-item.is-offline  {color:#fecaca; opacity:.9}
.hero-presence-item.is-self > span:not(.presence-dot){font-weight:700; color:#ffffff}
.hero-presence-item > span{
    display:inline !important;
    margin:0 !important;
    color:inherit !important;
    font-size:inherit !important;
}
.hero-presence-list .presence-dot{
    display:inline-block !important;
    width:6px;
    height:6px;
    border-radius:999px;
    flex:none;
    margin:0 !important;
    padding:0;
}

/* Coloured presence dot — used in the hero list and in the chat header. */
.presence-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    flex:none;
}
.presence-dot.is-active   {background:#22c55e; box-shadow:0 0 0 2.5px rgba(34,197,94,.22)}
.presence-dot.is-inactive {background:#f59e0b; box-shadow:0 0 0 2.5px rgba(245,158,11,.22)}
.presence-dot.is-offline  {background:#ef4444; box-shadow:0 0 0 2.5px rgba(239,68,68,.22)}

/* Clickable rows — clicking opens chat with that user. Self stays inert. */
.hero-presence-item:not(.is-self){cursor:pointer}
.hero-presence-item:not(.is-self):hover{text-decoration:underline; text-underline-offset:2px}
.hero-presence-item.is-self{cursor:default}

/* Unread badge — red pill with the count at the end of a row. */
.presence-unread-badge{
    display:inline-block !important;
    margin:0 0 0 4px !important;
    padding:0 5px;
    min-width:14px;
    height:14px;
    line-height:14px;
    font-size:9.5px;
    font-weight:700;
    color:#fff;
    background:#dc2626;
    border-radius:999px;
    text-align:center;
    box-shadow:0 0 0 2px rgba(220,38,38,.18);
}

/* =========================================================================
   CHAT PANEL — fixed bottom-right floating card
   ------------------------------------------------------------------------- */
.chat-panel{
    position:fixed;
    right:20px;
    bottom:20px;
    width:340px;
    max-width:calc(100vw - 40px);
    height:440px;
    max-height:calc(100vh - 80px);
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    box-shadow:0 20px 50px -12px rgba(2,6,23,.45), 0 0 0 1px rgba(15,23,42,.04);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:1200;
    /* Chat needs text selection even though the rest of the app blocks it. */
    user-select:text;
    -webkit-user-select:text;
}
.chat-panel[hidden]{display:none}
.chat-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid #f1f5f9;
    background:linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}
.chat-peer{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    font-weight:600;
    color:#0f172a;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.chat-peer .presence-dot{width:8px; height:8px; flex:none}
.chat-close{
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:#64748b;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    border-radius:6px;
    flex:none;
}
.chat-close:hover{background:#f1f5f9; color:#0f172a}
.chat-messages{
    flex:1 1 auto;
    overflow-y:auto;
    padding:12px 14px;
    background:#fafbfc;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35); border-radius:999px}
.chat-messages::-webkit-scrollbar-track{background:transparent}
/* Each message. Sender's messages are right-aligned blue, theirs left-grey. */
.chat-msg{
    display:flex;
    flex-direction:column;
    max-width:78%;
    font-size:13px;
    line-height:1.4;
    word-wrap:break-word;
    overflow-wrap:break-word;
}
.chat-msg .chat-bubble{
    padding:7px 11px;
    border-radius:14px;
    background:#f1f5f9;
    color:#0f172a;
    white-space:pre-wrap;
}
.chat-msg .chat-time{
    font-size:10px;
    color:#94a3b8;
    margin-top:2px;
    padding:0 4px;
}
.chat-msg.is-mine{align-self:flex-end; align-items:flex-end}
.chat-msg.is-mine .chat-bubble{background:#2563eb; color:#ffffff}
.chat-msg.is-theirs{align-self:flex-start; align-items:flex-start}
.chat-empty{
    margin:auto;
    padding:30px 16px;
    text-align:center;
    color:#94a3b8;
    font-size:12.5px;
}
.chat-compose{
    display:flex;
    align-items:flex-end;
    gap:6px;
    padding:10px;
    border-top:1px solid #f1f5f9;
    background:#ffffff;
}
.chat-input{
    flex:1;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:8px 10px;
    font:inherit;
    font-size:13px;
    line-height:1.4;
    color:#0f172a;
    background:#fafbfc;
    resize:none;
    max-height:96px;
    outline:none;
    transition:border-color .15s ease, background .15s ease;
}
.chat-input:focus{border-color:#2563eb; background:#ffffff}
.chat-send{
    flex:none;
    padding:8px 14px;
    border:0;
    border-radius:10px;
    background:#0f172a;
    color:#ffffff;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease;
}
.chat-send:hover{background:#1e293b}
.chat-send:disabled{background:#94a3b8; cursor:not-allowed}
@media (max-width:480px){
    .chat-panel{
        right:8px;
        bottom:8px;
        width:calc(100vw - 16px);
        height:calc(100vh - 80px);
    }
}
@media (max-width:980px){
    .hero-presence{order:3; width:100%}
}


/* Role & permissions editor on the Admin page */
.role-editor{margin-top:8px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;padding:0}
.role-editor summary{cursor:pointer;padding:8px 12px;font-size:12.5px;font-weight:700;color:#334155;user-select:none}
.role-pill{display:inline-block;margin-left:8px;padding:1px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.role-pill.role-user{background:#e2e8f0;color:#475569}
.role-pill.role-manager{background:#dbeafe;color:#1d4ed8}
.role-pill.role-admin{background:#dcfce7;color:#15803d}
.role-form{padding:10px 12px 12px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}
.role-select-row{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:#475569}
.role-select-row .role-select{max-width:320px}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:7px}
.perm-item{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:8px 10px;cursor:pointer;transition:border-color .12s}
.perm-item:hover{border-color:#93c5fd}
.perm-item input{margin-top:2px;accent-color:#2563eb;width:15px;height:15px;flex:none;cursor:pointer}
.perm-item b{display:block;font-size:12px;color:#0f172a}
.perm-item small{display:block;font-size:10.5px;color:#64748b;line-height:1.35}


/* ============ 2026-08 polish: Data Validation value rows ============ */
.chips .chip{display:flex;align-items:center;gap:10px;justify-content:flex-start;padding:8px 12px;transition:border-color .15s,box-shadow .15s}
.chips .chip:hover{border-color:#b6c5d8;box-shadow:0 1px 4px rgba(11,21,38,.06)}
.chips .chip > span{flex:1 1 auto;min-width:0;text-align:left;font-weight:600;overflow-wrap:anywhere}
.chips .chip .val-check{flex:none;width:16px;height:16px;accent-color:#2563eb;cursor:pointer}
.chips .chip form{margin:0;flex:none}
.chips .chip .val-edit{flex:none}