/* Elarix Leads Manager — editorial theme */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&family=Geist:wght@300;400;500;600&display=swap');

:root {
  /* Light Theme (Default) */
  --bg-rgb: 241, 237, 228;
  --bg: #f1ede4;
  --bg-2: #e8e2d4;
  --paper: #f7f4ec;
  
  --ink-rgb: 17, 17, 16;
  --ink: #111110;
  --ink-2: #3a3a37;
  --ink-3: #6b6a64;
  
  --tan: #c8b89a;
  --tan-deep: #a99876;
  
  --line: rgba(var(--ink-rgb), 0.14);
  --line-soft: rgba(var(--ink-rgb), 0.06);
  --ink-hover: rgba(var(--ink-rgb), 0.03);
  
  --good: #5d6b39;
  --warn: #a9712a;
  --bad: #9b3b2f;
  
  --serif: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Geist", "Söhne", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg-rgb: 28, 28, 26;
  --bg: #1c1c1a;
  --bg-2: #242422;
  --paper: #151514;
  
  --ink-rgb: 230, 230, 227;
  --ink: #e6e6e3;
  --ink-2: #b5b5b0;
  --ink-3: #8a8a84;
  
  --tan: #8a7c64;
  --tan-deep: #a99876;
  
  --line: rgba(var(--ink-rgb), 0.14);
  --line-soft: rgba(var(--ink-rgb), 0.06);
  --ink-hover: rgba(var(--ink-rgb), 0.05);

  --good: #8ea162;
  --warn: #d4984d;
  --bad: #c35c4f;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-color:var(--ink)}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)} .tiny{font-size:12px}
.row{display:flex;gap:12px;align-items:center} .col{display:flex;flex-direction:column;gap:14px}
.spacer{flex:1}

/* headings: serif display, mono captions */
.h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.015em;margin:0}
.h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px}

/* shell */
.app{display:flex;min-height:100vh}
.side{width:230px;flex:0 0 230px;border-right:1px solid var(--line);background:var(--bg-2);
  padding:30px 16px;position:sticky;top:0;height:100vh}
.brand{font-family:var(--serif);font-size:22px;letter-spacing:.22em;text-transform:uppercase;
  padding:0 10px 26px;color:var(--ink)}
.brand span{font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;
  border:0;color:var(--ink-3);padding:11px 12px;border-radius:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border-left:2px solid transparent;transition:color .25s,border-color .25s}
.nav button:hover{color:var(--ink)}
.nav button.active{color:var(--ink);border-left:2px solid var(--ink);background:var(--ink-hover)}
.main{flex:1;padding:40px 46px;max-width:1320px}

/* panels / cards — editorial = hairlines, not heavy fills */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:22px}
.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.kpi{background:var(--bg);padding:20px 18px}
.kpi .n{font-family:var(--serif);font-size:38px;line-height:1;font-weight:400}
.kpi .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* buttons — black pill, mono uppercase */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border:0;
  padding:11px 18px;border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;transition:transform .3s cubic-bezier(.7,0,.2,1),background .25s}
.btn:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:transparent;border-color:var(--ink)}
.btn.sm{padding:7px 13px;font-size:9.5px;letter-spacing:.14em}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

/* inputs */
input,select,textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;border-radius:2px;font-size:13px;font-family:var(--sans);width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)}
label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:6px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:10px;border-bottom:1px solid var(--line)}
td{padding:12px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
td strong{color:var(--ink);font-weight:500}
tr:hover td{background:var(--ink-hover)}

/* badges + score */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);color:var(--ink-2)}
.score{font-family:var(--serif);font-size:20px;font-weight:400}
.score.hi{color:var(--good)} .score.mid{color:var(--tan-deep)} .score.lo{color:var(--ink-3)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--tan)}

/* quota meter */
.meter{height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;border:1px solid var(--line-soft)}
.meter>span{display:block;height:100%;background:var(--ink)}
.quota{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* kanban */
.board{display:flex;gap:1px;overflow-x:auto;padding-bottom:8px;background:var(--line);border:1px solid var(--line)}
.lane{flex:0 0 232px;background:var(--bg);padding:14px 12px}
.lane h3{margin:2px 2px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:flex;justify-content:space-between}
.card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:12px;margin-bottom:8px;cursor:pointer;
  transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--ink);transform:translateY(-1px)}
.card .nm{font-weight:500;font-size:13px;color:var(--ink)} .card .meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:5px}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(var(--ink-rgb), 0.4);z-index:40}
.drawer{position:fixed;top:0;right:0;height:100vh;width:460px;max-width:92vw;background:var(--bg);
  border-left:1px solid var(--line);box-shadow:-24px 0 60px -30px rgba(var(--bg-rgb), 0.4);z-index:41;padding:28px;overflow-y:auto}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.login .box{width:340px;background:var(--paper);border:1px solid var(--line)}

/* warning banners — warm tan tint */
.banner{background:rgba(var(--tan-deep-rgb, 169, 152, 118), 0.16);border:1px solid var(--tan-deep);color:var(--ink-2);
  padding:11px 13px;border-radius:2px;font-size:12.5px}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}