/* ============================================================================
   Better Tap CRM — styles (self-contained, brand-matched)
   ============================================================================ */
:root{
  --blue:#4D97DB; --blue-600:#3B82C9; --blue-050:#EAF3FB; --blue-100:#D6E8F8;
  --navy:#0E1230; --navy-700:#161B3D;
  --ink:#141937; --ink-60:rgba(20,25,55,.62); --ink-40:rgba(20,25,55,.42);
  --line:rgba(20,25,55,.12); --line-soft:rgba(20,25,55,.07);
  --white:#fff; --bg:#F6F8FB; --yellow:#FBF49B; --green:#15A07A; --red:#D8513B;
  --radius-sm:10px; --radius:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(20,25,55,.05), 0 2px 6px -2px rgba(20,25,55,.08);
  --shadow-md:0 10px 30px -14px rgba(20,25,55,.18);
  --sans:'Neue Haas Grotesk','Inter','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Login ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--blue-050), var(--bg) 60%)}
.auth-card{width:100%;max-width:420px;background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:38px 34px;border:1px solid var(--line-soft)}
.auth-card .logo{height:34px;width:auto;margin:0 auto 22px}
.auth-card h1{font-size:1.4rem;text-align:center;color:var(--navy);margin-bottom:4px;letter-spacing:-.02em}
.auth-card .sub{text-align:center;color:var(--ink-60);font-size:.9rem;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-60);margin-bottom:6px}
.field input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.96rem;font-family:inherit;background:#fff;transition:border .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;
  padding:14px 18px;border:0;border-radius:100px;font-family:inherit;font-weight:700;font-size:.95rem;
  cursor:pointer;background:var(--navy);color:#fff;transition:transform .25s var(--ease),background .25s,opacity .2s}
.btn:hover{background:var(--blue);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn--ghost{background:transparent;color:var(--blue);font-weight:600}
.btn--ghost:hover{background:var(--blue-050);transform:none}
.auth-foot{text-align:center;margin-top:18px;font-size:.86rem;color:var(--ink-60)}
.auth-foot a{color:var(--blue);font-weight:600;cursor:pointer}
.msg{font-size:.86rem;border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:16px;display:none}
.msg.show{display:block}
.msg.err{background:#FBEDEA;color:#A23A28;border:1px solid #F2C9C0}
.msg.ok{background:#E7F6F0;color:#0C6B50;border:1px solid #BFE6D7}
.msg.info{background:var(--blue-050);color:#23577E;border:1px solid var(--blue-100)}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}
.side__logo{display:flex;align-items:center;gap:9px;padding:4px 8px 22px;font-weight:700;font-size:1.15rem}
.side__logo img{height:26px}
.side__nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
.side__nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;
  border:0;color:rgba(255,255,255,.74);font-family:inherit;font-size:.92rem;font-weight:500;
  padding:11px 13px;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s,color .2s}
.side__nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.side__nav button.active{background:var(--blue);color:#fff;font-weight:600}
.side__nav .ico{width:18px;height:18px;flex:none;opacity:.9}
.side__user{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:8px}
.side__user .name{font-weight:600;font-size:.92rem}
.side__user .role{font-size:.76rem;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.side__user .signout{margin-top:12px;font-size:.84rem;color:rgba(255,255,255,.6);background:none;border:0;cursor:pointer;font-family:inherit}
.side__user .signout:hover{color:#fff}

.main{padding:34px clamp(20px,4vw,48px);overflow:auto}
.main__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.main__head h1{font-size:1.7rem;color:var(--navy);letter-spacing:-.02em}
.main__head .sub{color:var(--ink-60);font-size:.92rem;margin-top:3px}

/* cards / grids */
.grid{display:grid;gap:18px}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 22px}
.card h3{font-size:1.02rem;color:var(--navy);margin-bottom:4px}
.kpi .label{font-size:.8rem;color:var(--ink-60);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .value{font-size:1.9rem;font-weight:700;color:var(--navy);margin-top:6px;letter-spacing:-.02em}
.kpi .hint{font-size:.8rem;color:var(--ink-40);margin-top:4px}
.placeholder{border:1.5px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;color:var(--ink-60);background:#fff}
.placeholder b{color:var(--ink);display:block;margin-bottom:5px}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-40);
  font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line)}
.table td{padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table select,.table input{font-family:inherit;font-size:.86rem;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}
.pill{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:100px;text-transform:capitalize}
.pill.scheduled{background:var(--blue-050);color:#23577E}
.pill.in_progress{background:#FFF6DC;color:#8A6A12}
.pill.done{background:#E7F6F0;color:#0C6B50}
.pill.cancelled{background:#F1F1F4;color:#6B7280}
.role-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:100px;background:var(--blue-050);color:#23577E}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.btn.sm{width:auto;padding:9px 16px;font-size:.85rem}
.btn.sm.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.sm.ghost:hover{background:var(--blue-050);border-color:var(--blue-100)}

.center-state{min-height:60vh;display:grid;place-items:center;text-align:center;color:var(--ink-60)}
.spinner{width:34px;height:34px;border:3px solid var(--blue-100);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* modal */
.modal{position:fixed;inset:0;background:rgba(14,18,48,.5);display:none;place-items:center;z-index:50;padding:20px}
.modal.show{display:grid}
.modal__box{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;max-width:480px;padding:28px}
.modal__box h3{color:var(--navy);margin-bottom:16px;font-size:1.2rem}
.modal__row{display:flex;gap:10px;margin-top:18px}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:80%;max-width:280px;transform:translateX(-100%);transition:transform .3s var(--ease);z-index:40}
  .side.open{transform:none}
  .menu-btn{display:inline-grid!important}
}
.menu-btn{display:none;place-items:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}