/* ===========================================================================
   TeleDesk interface
   ---------------------------------------------------------------------------
   Built for people who look at it for eight hours, not for a screenshot.

   One rule runs through the whole thing: anything that is DATA is monospaced
   and column-aligned — timestamps, phone numbers, lead codes, counts, durations.
   Anything that is PROSE is set in the sans face. On a screen where an agent is
   scanning four hundred rows for the one number they have not called yet, an
   aligned digit column is worth more than any amount of decoration.

   Channel colour is information, not styling. Blue is a call, green is
   WhatsApp, violet is email, amber is social. Those four hues appear nowhere
   else in the interface, so a glance down the timeline rail reads as a history.
   =========================================================================== */

:root {
  --ink:        #151A21;
  --ink-2:      #1E252E;
  --ink-3:      #2A323D;
  --paper:      #F6F7F9;
  --surface:    #FFFFFF;
  --line:       #E3E7EC;
  --line-soft:  #EFF2F5;
  --text:       #1B2028;
  --text-2:     #5A6472;
  --muted:      #8A94A2;

  /* Petrol, not the usual CRM blue. Calm at length, unmistakable as an action. */
  --accent:     #0B6B62;
  --accent-2:   #0E8377;
  --accent-ink: #064B44;
  --accent-wash:#E8F3F1;

  --call:       #1F6FEB;
  --whatsapp:   #1F9D55;
  --email:      #8B4FC7;
  --social:     #D97528;
  --meeting:    #0B6B62;
  --note:       #7A8494;

  --danger:     #C8352B;
  --warning:    #B5730B;
  --success:    #17794B;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --r:   6px;
  --r-sm: 4px;
  --shadow: 0 1px 2px rgba(21,26,33,.06), 0 1px 3px rgba(21,26,33,.04);
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Data face. Applied to every figure, code, number and timestamp. */
.mono, .num, td.num, th.num, .lead-code, .tel, .stamp {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* Small uppercase mono labels. Used for field captions and section eyebrows —
   they name a piece of data, so they wear the data face. */
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

/* ---------------------------------------------------------------- shell -- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ink);
  color: #C6CDD7;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.sidebar .brand {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar .brand .name {
  color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  display: block;
}
.sidebar .brand .org {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #7C8798; margin-top: 2px; display: block;
}

.sidebar nav { padding: 10px 0; overflow-y: auto; flex: 1; }
.sidebar .group {
  padding: 14px 18px 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #5C6675;
}
.sidebar a.item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px; color: #C6CDD7; font-size: 13.5px;
  border-left: 2px solid transparent; text-decoration: none;
}
.sidebar a.item:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.sidebar a.item.active {
  background: rgba(255,255,255,.07); color: #fff;
  border-left-color: var(--accent-2); font-weight: 500;
}
.sidebar a.item .ic { width: 16px; text-align: center; opacity: .8; font-size: 13px; }
.sidebar a.item .badge-count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 10px;
}
.sidebar a.item .badge-count.hot { background: var(--danger); color: #fff; }

.sidebar .foot {
  padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12.5px;
}
.sidebar .foot .who { color: #fff; font-weight: 500; }
.sidebar .foot .role {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: #7C8798;
}

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 52px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  position: sticky; top: 0; z-index: 30;
}
.topbar .search { flex: 1; max-width: 420px; }
.topbar .search input {
  width: 100%; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0 10px; font-size: 13px; background: var(--paper);
}
.topbar .search input:focus { outline: 2px solid var(--accent-wash); border-color: var(--accent); background: #fff; }
.topbar .clock { margin-left: auto; }

.content { padding: 20px; flex: 1; }

.page-head {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.page-head .sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- card -- */

.card2 {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.card2 > .hd {
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.card2 > .hd h2, .card2 > .hd h3 { font-size: 13.5px; }
.card2 > .hd .right { margin-left: auto; }
.card2 > .bd { padding: 14px; }
.card2 > .bd.flush { padding: 0; }

/* ---------------------------------------------------------------- stats -- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.stat .k { display: block; margin-bottom: 6px; }
.stat .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--ink);
  line-height: 1.1;
}
.stat .v small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.stat .d { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.stat.is-alert .v { color: var(--danger); }
.stat.is-good  .v { color: var(--success); }

/* Target progress. A thin rule, not a chunky bar — it is a reference, not the point. */
.meter { height: 3px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.meter.over > i { background: var(--success); }

/* ---------------------------------------------------------------- table -- */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 8px 12px; background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; position: sticky; z-index: 5;
}
.tbl th a { color: var(--muted); }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:hover { background: #FAFBFC; }
.tbl tbody tr.is-overdue { background: #FEF6F5; }
.tbl tbody tr.is-overdue:hover { background: #FDEEEC; }
.tbl .primary { font-weight: 500; color: var(--ink); }
.tbl .secondary { color: var(--muted); font-size: 12px; }
.tbl-wrap { overflow-x: auto; }

/* --------------------------------------------------------------- chips --- */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; padding: 2px 8px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.call     { color: var(--call);     border-color: color-mix(in srgb, var(--call) 30%, var(--line)); }
.chip.whatsapp { color: var(--whatsapp); border-color: color-mix(in srgb, var(--whatsapp) 30%, var(--line)); }
.chip.email    { color: var(--email);    border-color: color-mix(in srgb, var(--email) 30%, var(--line)); }
.chip.social   { color: var(--social);   border-color: color-mix(in srgb, var(--social) 30%, var(--line)); }
.chip.meeting  { color: var(--meeting);  border-color: color-mix(in srgb, var(--meeting) 30%, var(--line)); }
.chip.note     { color: var(--note); }
.chip.solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.warn  { color: var(--warning); border-color: #EBD9B4; background: #FDF8EE; }
.chip.bad   { color: var(--danger);  border-color: #F0CFCC; background: #FDF3F2; }
.chip.good  { color: var(--success); border-color: #C3E2D2; background: #F1F9F5; }

.stage-pill {
  display: inline-block; font-size: 11.5px; font-weight: 500;
  padding: 2px 9px; border-radius: 4px;
  background: var(--accent-wash); color: var(--accent-ink);
}

/* ============================ SIGNATURE ==================================
   The activity timeline. This is the product: one lead, every channel, in
   time order, with a monospaced stamp gutter you can read down like a log and
   a coloured rail that tells you which channel each touch was without reading
   a word. Everything else in the interface is deliberately quieter than this.
   ========================================================================= */

.timeline { position: relative; padding-left: 0; margin: 0; list-style: none; }

.tl-item { display: grid; grid-template-columns: 92px 22px 1fr; gap: 0; position: relative; }

.tl-stamp {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--muted); text-align: right;
  padding: 12px 10px 0 0; line-height: 1.35; white-space: nowrap;
}
.tl-stamp .d { display: block; color: var(--text-2); font-weight: 600; }

/* The rail: a continuous hairline with a channel-coloured node on it. */
.tl-rail { position: relative; }
.tl-rail::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line); transform: translateX(-50%);
}
.tl-item:first-child .tl-rail::before { top: 16px; }
.tl-item:last-child  .tl-rail::before { bottom: calc(100% - 16px); }
.tl-node {
  position: absolute; left: 50%; top: 14px; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--note); box-shadow: 0 0 0 3px var(--surface);
}
.tl-item.c-call     .tl-node { background: var(--call); }
.tl-item.c-whatsapp .tl-node { background: var(--whatsapp); }
.tl-item.c-email    .tl-node { background: var(--email); }
.tl-item.c-social   .tl-node { background: var(--social); }
.tl-item.c-meeting  .tl-node { background: var(--meeting); }
.tl-item.c-system   .tl-node { background: var(--line); box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 1px var(--muted); }

/* An unanswered call is a fact worth seeing at a glance: hollow node. */
.tl-item.no-connect .tl-node { background: var(--surface); box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 2px var(--call); }

.tl-body { padding: 6px 0 14px 4px; min-width: 0; }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-title { font-weight: 500; color: var(--ink); font-size: 13px; }
.tl-who { color: var(--muted); font-size: 12px; }
.tl-text {
  margin-top: 4px; color: var(--text-2); font-size: 13px;
  white-space: pre-wrap; word-break: break-word;
}
.tl-text.quoted {
  border-left: 2px solid var(--line); padding-left: 10px; margin-top: 6px;
  background: var(--paper); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 8px 10px;
}

/* ------------------------------------------------------------- controls -- */

.btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn2:hover { background: var(--paper); color: var(--text); text-decoration: none; }
.btn2:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn2.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn2.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn2.sm { height: 27px; padding: 0 9px; font-size: 12px; }
.btn2.danger { color: var(--danger); border-color: #EBCFCC; }
.btn2.danger:hover { background: #FDF3F2; color: var(--danger); }
.btn2[disabled], .btn2.disabled { opacity: .5; pointer-events: none; }

/* Channel action buttons on the lead screen carry the channel colour, because
   they are the same vocabulary as the timeline nodes. */
.btn2.ch-call     { color: var(--call);     border-color: color-mix(in srgb, var(--call) 35%, var(--line)); }
.btn2.ch-whatsapp { color: var(--whatsapp); border-color: color-mix(in srgb, var(--whatsapp) 35%, var(--line)); }
.btn2.ch-email    { color: var(--email);    border-color: color-mix(in srgb, var(--email) 35%, var(--line)); }
.btn2.ch-social   { color: var(--social);   border-color: color-mix(in srgb, var(--social) 35%, var(--line)); }
.btn2.ch-call:hover     { background: #F2F7FE; }
.btn2.ch-whatsapp:hover { background: #F1FAF4; }
.btn2.ch-email:hover    { background: #F8F3FC; }
.btn2.ch-social:hover   { background: #FDF6F0; }

label.lbl { display: block; margin-bottom: 4px; }
.inp, select.inp, textarea.inp {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 9px; font-size: 13px; font-family: inherit; background: var(--surface);
  color: var(--text);
}
.inp:focus { outline: 2px solid var(--accent-wash); border-color: var(--accent); }
.inp.mono { font-family: var(--mono); }
textarea.inp { min-height: 84px; resize: vertical; }
.field { margin-bottom: 12px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }

.filters {
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
}
.filters .field { margin-bottom: 0; }
.filters .inp { min-width: 130px; }

/* --------------------------------------------------------------- notes --- */

.note-bar {
  border-left: 3px solid var(--accent); background: var(--accent-wash);
  padding: 10px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px; color: var(--accent-ink);
}
.note-bar.warn   { border-left-color: var(--warning); background: #FDF8EE; color: #6E4805; }
.note-bar.danger { border-left-color: var(--danger);  background: #FDF3F2; color: #7C221C; }

.alerts { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }

/* Empty states are an instruction, not a shrug. */
.empty { text-align: center; padding: 44px 20px; color: var(--text-2); }
.empty .t { font-weight: 600; color: var(--ink); margin-bottom: 4px; font-size: 14px; }
.empty .a { margin-top: 14px; }

/* --------------------------------------------------------------- login --- */

.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--ink); padding: 24px;
}
.login-card {
  width: 100%; max-width: 372px; background: var(--surface);
  border-radius: 10px; padding: 26px; box-shadow: 0 18px 40px rgba(0,0,0,.34);
}
.login-card .brand { margin-bottom: 18px; }
.login-card .brand .name { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.login-card .brand .tag { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }

/* --------------------------------------------------------- lead sheet --- */

.lead-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.kv { display: grid; grid-template-columns: 104px 1fr; gap: 7px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); word-break: break-word; }

.pager { display: flex; justify-content: flex-end; padding: 10px 14px; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
  .lead-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 74px 20px 1fr; }
  .tbl th { top: 0; }
}
@media (min-width: 861px) { .menu-btn { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .sidebar, .topbar, .actions, .filters, .pager { display: none !important; }
  .main { margin-left: 0; }
  .card2 { border: none; box-shadow: none; }
}