:root{
    --brand:#9eb7af;
    --brand-dark:#6f8c82;
    --brand-darker:#4a6058;
    --brand-darkest:#2c3b36;
    --brand-tint:#eef3f1;
    --brand-tint-2:#dde9e4;
    --bg:#f5f7f6;
    --card:#ffffff;
    --border:#e3e8e6;
    --text:#202422;
    --muted:#6d7975;
    --ok:#4f8a72;
    --ok-bg:#e6f1eb;
    --warn:#b58a52;
    --warn-bg:#f8efe1;
    --danger:#b1453d;
    --danger-bg:#fbeceb;
    --orange:#e07b1f;
    --orange-dark:#b45f12;
}

*{ box-sizing:border-box; }

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    margin:0;
    color:var(--text);
    font-size:13px;
}

/* ===== LOGIN ===== */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(1200px 600px at 80% -10%, #9eb7af 0%, transparent 60%),
               radial-gradient(900px 500px at -10% 110%, #6f8c82 0%, transparent 55%),
               linear-gradient(135deg,#2c3b36 0%, #3d5148 55%, #4a6058 100%);
}
/* subtle dotted texture */
.login-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size:22px 22px;
    opacity:.6;
}
.login-box{
    position:relative;
    z-index:1;
    width:400px;
    max-width:100%;
    background:rgba(255,255,255,.98);
    padding:40px 38px 34px;
    border-radius:18px;
    box-shadow:0 30px 70px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.1);
    border:1px solid rgba(255,255,255,.6);
    animation:rise .5s ease;
}
@keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}
.login-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:26px;
}
.login-brand .brand-logo{ height:34px; width:auto; display:block; }
.login-brand .name{ font-size:15px; font-weight:700; }
.login-brand .name small{ display:block; color:var(--muted); font-weight:500; font-size:11px; margin-top:1px; }
.login-box h2{
    margin:0 0 6px;
    font-size:23px;
    font-weight:700;
    letter-spacing:-.3px;
}
.login-box p.sub{
    margin:0 0 26px;
    color:var(--muted);
    font-size:13.5px;
}
.login-box label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#3a3a3a;
    margin-bottom:7px;
}
.field{ position:relative; margin-bottom:18px; }
.field input{
    width:100%;
    padding:13px 14px 13px 42px;
    border:1px solid #d4d4d4;
    border-radius:10px;
    font-size:14px;
    outline:none;
    background:#fafafa;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus{
    border-color:var(--brand-dark);
    background:#fff;
    box-shadow:0 0 0 3px rgba(111,140,130,.18);
}
.field .ico{
    position:absolute;
    left:14px;top:50%;transform:translateY(-50%);
    width:17px;height:17px;fill:#9a9a9a;
}
.field input:focus ~ .ico{ fill:var(--brand-dark); }
.login-box button{
    width:100%;
    padding:13px;
    margin-top:4px;
    background:linear-gradient(135deg,var(--brand-dark),var(--brand-darker));
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(74,96,88,.35);
    transition:transform .12s, box-shadow .12s, opacity .12s;
}
.login-box button:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(74,96,88,.45); }
.login-box button:active{ transform:translateY(0); }
.login-foot{
    margin-top:22px;
    text-align:center;
    font-size:11.5px;
    color:#9a9a9a;
}
.err{
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid #f0c9c5;
    padding:11px 14px;
    border-radius:10px;
    font-size:13px;
    margin-bottom:18px;
    display:flex;align-items:center;gap:8px;
}
.btn-google{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px;
    background:#fff;
    color:#3c4043;
    border:1px solid #d4d4d4;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:box-shadow .12s, border-color .12s;
    margin-bottom:22px;
}
.btn-google:hover{ box-shadow:0 2px 8px rgba(0,0,0,.12); border-color:#c4c4c4; }
.divider{
    display:flex;
    align-items:center;
    gap:12px;
    color:#9a9a9a;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:22px;
}
.divider::before,.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#e5e5e5;
}

/* ===== HEADER ===== */
.app-header{
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:14px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:20;
}
.app-header .brand{
    display:flex;
    align-items:center;
    gap:12px;
}
.app-header .brand-logo{ height:28px; width:auto; display:block; }
.app-header h1{
    margin:0;
    font-size:17px;
    font-weight:600;
}
.app-header .sub{
    font-size:12px;color:var(--muted);margin-top:1px;
}
.logout{
    background:#fff;
    color:var(--brand-darker);
    border:1px solid var(--brand-dark);
    padding:7px 16px;
    text-decoration:none;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
}
.logout:hover{ background:var(--brand-darker); color:#fff; border-color:var(--brand-darker); }

/* ===== STATS ===== */
.stats{
    display:flex;
    gap:16px;
    padding:20px 28px 4px;
    flex-wrap:wrap;
}
.stat-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px 20px;
    min-width:160px;
    flex:1;
    text-decoration:none;
    color:inherit;
    display:block;
    position:relative;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor:pointer;
}
.stat-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(44,59,54,.1);
}
.stat-card .label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    font-weight:600;
}
.stat-card .value{
    font-size:26px;
    font-weight:700;
    margin-top:6px;
    color:var(--brand-darker);
}
/* one accent for every stat card — no per-card hues */
.stat-card.active{
    border-width:2px;
    padding:15px 19px;
    border-color:var(--brand-dark);
    background:var(--brand-tint);
}

.chip{
    display:inline-block;
    margin-left:8px;
    padding:2px 10px;
    border-radius:12px;
    background:var(--brand-tint);
    color:var(--brand-darker);
    font-size:11px;
    font-weight:700;
    vertical-align:middle;
}

/* ===== OVERVIEW ===== */
.overview-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    padding:24px 28px 40px;
}
@media (max-width: 1200px){ .overview-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 620px){ .overview-grid{ grid-template-columns:1fr; } }
.overview-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:22px 22px 20px;
    text-decoration:none;
    color:inherit;
    display:block;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.overview-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(44,59,54,.1);
    border-color:var(--brand-dark);
}
.overview-card .name{
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}
.overview-card .count{
    font-size:34px;
    font-weight:700;
    color:var(--brand-darker);
    margin-top:10px;
}
.overview-card .stat-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:6px;
}
.overview-card .meta{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}
.overview-card .pending{
    font-size:12px;
    color:var(--orange);
    font-weight:700;
}
.overview-card .mini-chart{
    margin-top:14px;
    padding-top:10px;
    border-top:1px solid var(--border);
}
.overview-card .bars{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:48px;
}
.overview-card .bar-col{
    flex:1;
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
}
.overview-card .bar-count{
    font-size:8px;
    line-height:1.6;
    color:var(--muted);
    font-weight:700;
}
.overview-card .bar{
    width:100%;
    max-width:14px;
    background:var(--brand);
    border-radius:2px 2px 0 0;
    min-height:3px;
    transition:background .12s ease;
}
.overview-card:hover .bar{
    background:var(--brand-dark);
}
.overview-card .bar-labels{
    display:flex;
    gap:2px;
    margin-top:4px;
}
.overview-card .bar-labels span{
    flex:1;
    min-width:0;
    text-align:center;
    font-size:8px;
    color:var(--muted);
}

/* ===== TABS ===== */
.tabs{
    display:flex;
    align-items:stretch;
    gap:6px;
    padding:16px 28px 0;
    flex-wrap:wrap;
}
.tab{
    padding:10px 22px;
    text-decoration:none;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    border-radius:8px 8px 0 0;
    border:1px solid transparent;
    border-bottom:none;
    background:transparent;
}
.tab:hover{ color:var(--brand-darker); background:#fff; }
.tab.active{
    background:#fff;
    color:var(--brand-darker);
    border-color:var(--border);
    box-shadow:0 -2px 0 var(--brand-dark) inset;
}
.tab-dropdown{ position:relative; display:flex; align-items:stretch; }
.tab-dropdown .dropdown-toggle{ cursor:pointer; display:flex; align-items:center; }
.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:190px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
    padding:6px;
    z-index:30;
}
.tab-dropdown:hover .dropdown-menu,
.tab-dropdown:focus-within .dropdown-menu{ display:block; }
.dropdown-item{
    display:block;
    padding:9px 12px;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    color:var(--text);
    white-space:nowrap;
}
.dropdown-item:hover{ background:var(--brand-tint); color:var(--brand-darker); }
.dropdown-item.active{ background:var(--brand-tint); color:var(--brand-darker); }

/* ===== PAGINATION ===== */
.pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    border-top:1px solid var(--border);
    flex-wrap:wrap;
    gap:12px;
}
.page-info{ color:var(--muted); font-size:12px; }
.page-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.pg{
    min-width:34px;
    text-align:center;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    text-decoration:none;
    color:var(--text);
    font-size:13px;
    font-weight:600;
    background:#fff;
}
.pg:hover{ border-color:var(--brand-dark); color:var(--brand-darker); }
.pg.current{ background:var(--brand-darker); color:#fff; border-color:var(--brand-darker); }
.pg.disabled{ color:#bbb; background:#fafafa; pointer-events:none; }

/* ===== TABLE CARD ===== */
.table-card{
    margin:18px 28px 40px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
}
.table-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    gap:12px;
    flex-wrap:wrap;
}
.table-toolbar .title{
    font-size:15px;font-weight:600;
}
.table-toolbar .count{
    color:var(--muted);font-weight:400;font-size:13px;margin-left:6px;
}
.search{
    position:relative;
}
.search input{
    padding:8px 12px 8px 32px;
    border:1px solid #c9c9c9;
    border-radius:6px;
    font-size:13px;
    width:260px;
    outline:none;
}
.search input:focus{
    border-color:var(--brand-dark);
    box-shadow:0 0 0 2px rgba(111,140,130,.22);
}
.search svg{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    width:14px;height:14px;fill:var(--muted);
}

.table-scroll{ overflow-x:auto; }

table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}
thead th{
    background:#fafaf9;
    color:var(--muted);
    font-size:10.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    text-align:left;
    padding:10px 10px;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
}
tbody td{
    padding:10px 10px;
    border-bottom:1px solid #f0f0f0;
    font-size:12px;
    color:var(--text);
    vertical-align:middle;
    word-break:break-word;
}
td a.email{ word-break:break-all; }
tbody tr:hover{ background:var(--brand-tint); }
tbody tr:last-child td{ border-bottom:none; }

td.name{ font-weight:600; }
td a.email{ color:var(--brand-darker); text-decoration:none; }
td a.email:hover{ text-decoration:underline; }
.muted{ color:var(--muted); }

/* ===== BADGES ===== */
.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 10px;
    border-radius:14px;
    font-size:11px;
    font-weight:700;
    text-transform:capitalize;
    line-height:1.6;
}
.badge .dot{ width:7px;height:7px;border-radius:50%; }
.badge.success{ background:var(--ok-bg); color:var(--ok); }
.badge.success .dot{ background:var(--ok); }
.badge.pending{ background:var(--warn-bg); color:var(--warn); }
.badge.pending .dot{ background:var(--warn); }

.src{
    display:inline-block;
    padding:3px 9px;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    background:var(--brand-tint);
    color:var(--brand-darker);
}

.empty{
    padding:40px;
    text-align:center;
    color:var(--muted);
}

/* ===== IMPORT BUTTON ===== */
.btn-import{
    background:linear-gradient(135deg,var(--brand-dark),var(--brand-darker));
    color:#fff;
    border:none;
    padding:6px 12px;
    border-radius:6px;
    font-size:11.5px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(74,96,88,.3);
    transition:transform .12s, box-shadow .12s, opacity .12s;
}
.btn-import:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(74,96,88,.4); }
.btn-import:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

/* ===== VIEW / DETAILS BUTTON ===== */
.btn-view{
    background:#fff;
    color:var(--brand-darker);
    border:1px solid var(--brand-dark);
    padding:6px 12px;
    border-radius:6px;
    font-size:11.5px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    transition:background .12s, color .12s;
}
.btn-view:hover{ background:var(--brand-darker); color:#fff; border-color:var(--brand-darker); }

/* ===== DETAILS MODAL ===== */
.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal-box{
    background:#fff;
    border-radius:10px;
    width:520px;
    max-width:100%;
    max-height:85vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
    animation:rise .18s ease;
}
.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--border);
}
.modal-head h3{ margin:0; font-size:15px; font-weight:700; }
.modal-close{
    background:none;
    border:none;
    font-size:20px;
    line-height:1;
    color:var(--muted);
    cursor:pointer;
    padding:2px 6px;
    border-radius:6px;
}
.modal-close:hover{ background:var(--brand-tint); color:var(--text); }
.modal-body{
    padding:18px 20px;
    overflow-y:auto;
    font-size:13px;
    line-height:1.8;
    white-space:pre-wrap;
    word-break:break-word;
}
.lead-details-data{ display:none; }
.sf-response-data{ display:none; }
.reason-link{ font-size:11px; color:#b3261e; text-decoration:underline; cursor:pointer; }
.reason-link:hover{ color:#7d1a15; }
.bayut-message-data{ display:none; }

/* ===== EDIT CONTACT (pencil button + modal) ===== */
.contact-cell{ display:inline-flex; align-items:center; gap:6px; }
.pen-btn{
    background:none;
    border:none;
    padding:3px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    cursor:pointer;
    border-radius:6px;
    flex-shrink:0;
}
.pen-btn svg{ fill:currentColor; }
.pen-btn:hover{ background:var(--brand-tint); color:var(--brand-darker); }
.edit-field{ margin-bottom:14px; }
.edit-field label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px; }
.edit-input{
    width:100%;
    box-sizing:border-box;
    padding:9px 11px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:13px;
    font-family:inherit;
}
.edit-input:focus{ outline:none; border-color:var(--brand-dark); }
.edit-error{ color:#b3261e; font-size:12.5px; margin-bottom:10px; min-height:1em; }
.edit-actions{ display:flex; justify-content:flex-end; gap:8px; }

/* ===== FLASH ===== */
.flash{
    margin:16px 28px 0;
    padding:12px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    display:flex;align-items:center;gap:8px;
}
.flash.success{ background:var(--ok-bg); color:var(--ok); border:1px solid #bfdccf; }
.flash.error{ background:var(--danger-bg); color:var(--danger); border:1px solid #f0c9c5; }