/* ===========================================================
   A2ZsmartCRM™ — styles.css (Production)
   Comic theme • Thick outlines • Clean grid • Responsive
   =========================================================== */

/* ---------- Theme tokens ---------- */
:root{
  --ink:#111;                 /* outline color */
  --paper:#fff;               /* card background */
  --bg:#fff8ef;               /* warm canvas */
  --accent:#FF8800;           /* A2Z orange */
  --accent-ink:#000;
  --muted:#fffef9;
  --muted-2:#fef5e8;

  --font-header:"Bangers", cursive;
  --font-body:"Comic Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius:14px;
  --gap:12px;
  --shadow:6px 6px 0 var(--ink);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);line-height:1.25;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- Utilities ---------- */
.hidden{display:none!important}
.row{display:flex;gap:10px;align-items:center}
.row.right{justify-content:flex-end}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.bangers{font-family:var(--font-header);letter-spacing:.5px}
.center{display:grid;place-items:center}
.tiny{font-size:.92rem;color:#333}
.micro{font-size:.86rem;opacity:.85}
.tight{margin:0;line-height:1.05}

/* ---------- Comic “paper” look ---------- */
.paper{
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

/* ---------- Buttons & Inputs ---------- */
.pill{
  background:#fff;border:4px solid var(--ink);border-radius:999px;
  padding:8px 16px;font-weight:800;transition:transform .05s ease, box-shadow .05s ease;
  box-shadow:2px 2px 0 var(--ink);
}
.pill:hover{box-shadow:4px 4px 0 var(--ink)}
.pill:active{transform:translateY(1px)}
.pill.small{padding:6px 10px;font-size:.9rem}

.btn{
  background:#fff;border:4px solid var(--ink);border-radius:10px;
  padding:8px 12px
}
.btn.small{padding:6px 10px;font-size:.9rem}
.btn.ghost{background:#fff}
.btn:active{transform:translateY(1px)}

input, textarea, select{
  width:100%;background:#fff;border:4px solid var(--ink);border-radius:10px;
  padding:10px 12px;outline:none
}
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 4px var(--accent)}
.search{min-width:220px}

/* ---------- Header ---------- */
.app-header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:14px
}
.brand{height:64px}.brand.sm{height:48px}
.brand-row{display:flex;align-items:center;gap:12px}
.brand-text .small{font-size:1.02rem}

.llama-bubble{display:flex;align-items:center;gap:8px}
.llama-emoji{font-size:24px}
.bubble-text{
  background:#fff;border:4px solid var(--ink);border-radius:16px;padding:6px 10px;
  max-width:460px;min-height:32px;display:flex;align-items:center
}
.header-right{justify-self:end;text-align:right}
.hello{font-weight:800}

/* ---------- Nav ---------- */
.nav-row{
  display:flex;gap:8px;align-items:center;margin:14px;padding:12px
}
.nav-row .spacer{flex:1}
.nav-btn{font-weight:800}
.nav-btn.active{background:var(--accent);color:#fff;border-color:var(--accent-ink)}

/* ---------- Tabs ---------- */
.tabs-wrap{margin:14px}
.tab{display:none}
.tab.active{display:block}

/* ---------- KPI grid (2×4) ---------- */
.kpi-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin-bottom:16px
}
.kpi-card{
  position:relative;
  background:var(--muted);border:4px solid var(--ink);border-radius:12px;
  padding:14px;text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:110px
}
.kpi-card.clickable{cursor:pointer}
.kpi-card:focus-visible{outline:4px solid var(--accent)}
.kpi-label{font-weight:800}
.kpi-value{font-size:2rem;font-weight:800}

/* ---------- Widgets (pop-out support) ---------- */
.widget{position:relative}
.pop-btn{
  position:absolute;top:8px;right:8px;line-height:1;border-radius:50%;
  width:30px;height:30px;display:grid;place-items:center;background:#fff;
  border:4px solid var(--ink);box-shadow:2px 2px 0 var(--ink)
}
.fullscreen{
  position:fixed !important; inset:16px; z-index:9999; background:#fff; overflow:auto;
}

/* ---------- Assistant & LeadFinder ---------- */
.assistant-row{display:flex;gap:10px}
.assistant-row input{flex:1;min-width:220px}
.assistant-reply{margin-top:8px;min-height:42px}

.lead-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.lead-row .row{grid-column:1/-1}
.lead-results .tile-item{
  border:2px dashed var(--ink);border-radius:10px;padding:8px;background:var(--muted);margin-top:6px
}

/* ---------- Contacts (list + drawer) ---------- */
.contacts-list .row-head{
  display:grid;gap:8px;
  grid-template-columns:1fr 1fr 2fr 1fr 1.2fr 1fr 40px;
  padding:12px;border-bottom:4px solid var(--ink);
  font-weight:800;background:var(--muted);border-radius:8px 8px 0 0
}
.contacts-list #contacts-wrap .row-item{
  display:grid;gap:8px;align-items:center;
  grid-template-columns:1fr 1fr 2fr 1fr 1.2fr 1fr 40px;
  padding:12px;border-bottom:2px solid var(--ink)
}
.contact-drawer{
  padding:10px;border:4px dashed var(--ink);border-radius:10px;margin:8px 0;display:none;background:#fff
}
.contact-drawer.open{display:block}

/* ---------- Email (Outlook-style) ---------- */
.email-shell{
  display:grid;grid-template-columns:220px 360px 1fr;gap:12px;min-height:540px
}
.email-folders{display:flex;flex-direction:column;gap:6px}
.email-threads, .email-viewpane{
  background:#fff;border:4px solid var(--ink);border-radius:10px;min-height:300px;padding:10px
}
.email-actions{display:flex;gap:8px;margin-bottom:6px}
.email-compose textarea{width:100%;min-height:120px}

/* ---------- Learnings grid ---------- */
.grid-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{min-height:150px}
.tile-list > .tile-item{
  border:2px dashed var(--ink);border-radius:10px;padding:8px;margin:6px 0;background:var(--muted)
}

/* ---------- Login gate ---------- */
.login{max-width:560px;margin:32px auto}
.login-head{display:flex;gap:12px;align-items:center}
.login-body .row{margin-top:10px}

/* ---------- Footer ---------- */
.footer{margin:20px 14px;text-align:center}
.footer .tagline-2{font-weight:800}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .grid-tiles{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .grid-tiles{grid-template-columns:repeat(2,1fr)}
  .email-shell{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-row{flex-wrap:wrap}
  .kpi-grid{grid-template-columns:1fr}
  .grid-tiles{grid-template-columns:1fr}
}

/* ---------- Motion & focus care ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
:focus-visible{outline:4px solid var(--accent);outline-offset:2px}

/* ---------- Accent override hook (optional) ---------- */
/* If you set data-accent on <body> at runtime, we reflect it here */
body[data-accent]{--accent:attr(data-accent color, initial)}