/* CET Client Check-Ins
 *
 * The token architecture, type scale and theme plumbing follow the recruitment
 * dashboard so the two internal tools feel like one system. The palette does
 * not: these are the firm's own brand values, and light is the default because
 * this is a white-canvas design and the team has only ever seen it that way.
 *
 * Red is not a brand colour. It was added because the Dexterous palette has no
 * alarm state, and a tool whose entire job is surfacing overdue work needs one.
 */

:root {
  /* Brand */
  --teal:#31BCA9;      /* primary · Sarah · positive sentiment · focus rings */
  --yellow:#F3CA30;    /* accent · Shalini */
  --gold:#8B6C32;      /* secondary · Nica · tier 1 · catch-up booked */
  --ink:#16302C;       /* body text */
  --muted:#6B7C79;
  --line:#E3E9E7;
  --panel:#F7FAF9;
  --red:#D2544B;       /* overdue — the alarm state the brand palette lacks */

  /* Surfaces */
  --bg:#FFFFFF; --bg2:#FFFFFF; --bg3:var(--panel);
  --fg:var(--ink);
  --amber:#B08600;

  --radius:12px;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow:0 1px 2px rgba(22,48,44,.04), 0 8px 24px rgba(22,48,44,.05);
}

:root[data-theme="dark"] {
  --bg:#0E1C1A; --bg2:#132523; --bg3:#172C29;
  --fg:#EAF2F0; --ink:#EAF2F0;
  --muted:#8CA5A0; --line:#22403C; --panel:#132523;
  /* Lifted for contrast on a dark ground; the hues stay the brand's. */
  --teal:#3FD3BD; --yellow:#F7D64F; --gold:#C79A4B; --red:#F0736A; --amber:#E0B341;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .2s, color .2s;
}

.wrap { max-width:1160px; margin:0 auto; padding:28px 26px 64px; }

/* `color:inherit` is load-bearing, not tidiness. Buttons do not inherit colour
   from their parent — the UA stylesheet forces `buttontext`, i.e. black. The
   stat tiles and card rows are both buttons, so without this their text stays
   black in dark mode while everything around it turns light. Light mode hides
   the bug completely, because black and the ink token are nearly the same. */
button { font-family:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:4px; }

/* ------------------------------- header --------------------------------- */

.app-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:26px;
}
.brandline { display:flex; align-items:center; gap:14px; }

/* The brand mark: three stacked bars in teal / yellow / gold. Three divs in
   the original build, three pseudo-elements here — no asset needed. */
.mark { display:flex; flex-direction:column; gap:3px; }
.mark i { display:block; width:26px; height:5px; border-radius:2px; }
.mark i:nth-child(1) { background:var(--teal); }
.mark i:nth-child(2) { background:var(--yellow); width:20px; }
.mark i:nth-child(3) { background:var(--gold); width:14px; }

.kicker {
  font-family:var(--mono); font-weight:600; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.app-header h1 { font-weight:800; font-size:27px; letter-spacing:-.02em; margin-top:4px; }

.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.cadence { font-size:12px; color:var(--muted); max-width:44ch; text-align:right; line-height:1.5; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.who { font-size:12px; color:var(--muted); }

.btn {
  font-size:12.5px; font-weight:500; padding:8px 13px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg2); color:var(--fg);
  transition:border-color .15s, background .15s;
}
.btn:hover { border-color:var(--teal); }
.btn.primary { background:var(--teal); border-color:var(--teal); color:#06231F; font-weight:700; }
.btn.danger { background:var(--red); border-color:var(--red); color:#fff; font-weight:600; }
.btn.icon { padding:8px 10px; }

.link {
  background:none; border:none; padding:0; font:inherit; font-size:12px;
  color:var(--teal); text-decoration:underline; text-underline-offset:2px;
}
.link.danger { color:var(--red); }

/* -------------------------------- tiles ---------------------------------- */

/* Each tile is also the primary filter control. That dual role was unsignposted
   in the old build beyond a hover state, so the active one is filled here. */
.tiles { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:22px; }
.tile {
  text-align:left; background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 14px;
  transition:border-color .15s, background .15s;
}
.tile:hover { border-color:var(--teal); }
.tile.active { background:var(--panel); border-color:var(--ink); }
.tile .v { display:block; font-weight:800; font-size:25px; letter-spacing:-.02em; }
.tile .l { display:block; font-size:11px; color:var(--muted); margin-top:2px; }

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

.controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.search, .sel {
  font-family:inherit; font-size:13px; padding:7px 11px; height:34px;
  border-radius:9px; border:1px solid var(--line); background:var(--bg2); color:var(--fg);
}
.search { width:250px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  font-size:12.5px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg2); color:var(--fg); transition:border-color .15s, background .15s;
}
.chip:hover { border-color:var(--teal); }
.chip.on { background:var(--ink); border-color:var(--ink); color:var(--bg); }
:root[data-theme="dark"] .chip.on { background:var(--teal); border-color:var(--teal); color:#06231F; }
.views { margin-left:auto; display:flex; gap:6px; }

.dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--muted); }
.dot-empty { background:transparent; border:1px solid var(--line); }

.summary {
  display:flex; align-items:center; gap:10px; font-size:12.5px;
  color:var(--muted); margin-bottom:14px;
}

/* -------------------------------- groups --------------------------------- */

.group { margin-bottom:26px; }
.group-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--line);
}
.group-head h2 { font-size:14px; font-weight:700; letter-spacing:-.01em; }
.group-note { font-size:11.5px; color:var(--muted); margin-top:2px; }
.group-head .count { font-family:var(--mono); font-size:12px; color:var(--muted); }

/* The one band that should feel loud. Everything else is a month heading. */
.group-attention .group-head { border-bottom-color:var(--red); }
.group-attention .group-head h2 { color:var(--red); }
.group-unscheduled .group-head h2 { color:var(--muted); }

/* -------------------------------- cards ---------------------------------- */

.cards { display:flex; flex-direction:column; gap:7px; }
.card {
  background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.card.open { border-color:var(--ink); }
:root[data-theme="dark"] .card.open { border-color:var(--teal); }

.card-row {
  display:grid; grid-template-columns:4px 1fr auto auto 18px;
  align-items:center; gap:14px;
  width:100%; padding:0 14px 0 0; background:none; border:none; text-align:left;
}
.card-row:hover { background:var(--panel); }

/* The status colour bar runs the full height of the row, so a column of cards
   reads as a column of statuses before you read a single word. */
.bar { align-self:stretch; min-height:56px; }
.bar.st-overdue { background:var(--red); }
.bar.st-due { background:var(--amber); }
.bar.st-scheduled { background:var(--gold); }
.bar.st-upcoming { background:var(--teal); }
.bar.st-none { background:var(--line); }

.card-main { display:flex; flex-direction:column; gap:3px; padding:11px 0; min-width:0; }
.card-title { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.card-title .name { font-weight:600; font-size:14px; }
.card-sub { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.card-sub .sep { opacity:.5; }

.card-dates { display:flex; gap:22px; }
.card-dates .d { display:flex; flex-direction:column; gap:1px; min-width:96px; }
.d-label { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.d-value { font-size:12.5px; font-weight:500; }
/* Never let a booked catch-up hide a slot the client was already owed. */
.d-missed { font-size:10.5px; color:var(--red); font-weight:600; }

.chev { color:var(--muted); font-size:15px; line-height:1; transition:transform .18s; }
.card.open .chev { transform:rotate(180deg); }

/* -------------------------------- tags ----------------------------------- */

.tag {
  font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px;
  letter-spacing:.02em; white-space:nowrap;
}
.tier-T1 { background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold); }
.tier-T2 { background:color-mix(in srgb, var(--teal) 16%, transparent); color:#1E8C7C; }
.tier-T3 { background:var(--panel); color:var(--muted); border:1px solid var(--line); }
:root[data-theme="dark"] .tier-T2 { color:var(--teal); }

.tag-never { background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red); }
.tag-waiting { background:color-mix(in srgb, var(--amber) 16%, transparent); color:var(--amber); }
/* Dashed, so a chase can never be misread as a conversation. */
.tag-attempt { border:1px dashed var(--line); color:var(--muted); background:none; }

.sn-positive { background:color-mix(in srgb, var(--teal) 16%, transparent); color:#1E8C7C; }
.sn-constructive { background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold); }
.sn-none { background:var(--panel); color:var(--muted); border:1px solid var(--line); }
:root[data-theme="dark"] .sn-positive { color:var(--teal); }

.pill { font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pill.st-overdue { background:color-mix(in srgb, var(--red) 13%, transparent); color:var(--red); }
.pill.st-due { background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber); }
.pill.st-scheduled { background:color-mix(in srgb, var(--gold) 15%, transparent); color:var(--gold); }
.pill.st-upcoming { background:color-mix(in srgb, var(--teal) 15%, transparent); color:#1E8C7C; }
.pill.st-none { background:var(--panel); color:var(--muted); }
:root[data-theme="dark"] .pill.st-upcoming { color:var(--teal); }

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

.card-panel { padding:16px 18px 18px; border-top:1px solid var(--line); background:var(--panel); }

.meta { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 20px; margin-bottom:18px; }
.meta dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.meta dd { font-size:12.5px; }

.logform { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:18px; }
.mode-switch { display:flex; gap:6px; margin-bottom:13px; }
.mode {
  font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg2); color:var(--muted);
}
.mode[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); font-weight:600; }
:root[data-theme="dark"] .mode[aria-selected="true"] { background:var(--teal); border-color:var(--teal); color:#06231F; }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px; }
.field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field > span { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea {
  font-family:inherit; font-size:13px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg2); color:var(--fg); width:100%;
}
.field textarea { resize:vertical; min-height:64px; line-height:1.5; }
.hint { font-size:11px; color:var(--muted); text-transform:none; letter-spacing:0; font-family:var(--font); }
.req { color:var(--red); }

.sentiment-toggle { display:flex; gap:6px; }
.sentiment-toggle button {
  font-size:12px; padding:7px 11px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg2); color:var(--muted);
}
.sentiment-toggle button[aria-pressed="true"] { border-color:var(--teal); background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--fg); font-weight:600; }

.logform-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot-note { font-size:11.5px; color:var(--muted); line-height:1.5; max-width:52ch; }

/* The two modes share one form; each hides the fields the other owns. */
.logform[data-mode="attempt"] .only-checkin,
.logform[data-mode="checkin"] .only-attempt { display:none; }

.log-heading { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.log { list-style:none; display:flex; flex-direction:column; gap:9px; }
.log-entry { background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.log-entry.is-attempt { border-style:dashed; background:none; }
.log-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.log-date { font-size:12px; font-weight:600; }
.log-by { font-size:11px; color:var(--muted); }
.log-actions { margin-left:auto; display:flex; gap:10px; opacity:0; transition:opacity .15s; }
.log-entry:hover .log-actions, .log-entry:focus-within .log-actions { opacity:1; }
.log-notes { font-size:12.5px; line-height:1.6; margin-top:7px; color:var(--fg); white-space:pre-wrap; }
.log-entry.is-attempt .log-notes { color:var(--muted); }

.card-admin { display:flex; gap:14px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }

.empty { font-size:12.5px; color:var(--muted); line-height:1.6; }
.empty.big { padding:40px 0; text-align:center; font-size:13.5px; }

/* -------------------------------- modal ---------------------------------- */

.modal-bg {
  position:fixed; inset:0; background:rgba(22,48,44,.42);
  display:grid; place-items:center; padding:24px; z-index:100;
}
.modal {
  background:var(--bg2); border:1px solid var(--line); border-radius:15px;
  padding:22px 24px; width:min(540px,100%); max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(22,48,44,.22);
}
.modal h2 { font-size:16px; font-weight:700; margin-bottom:16px; }
.modal-body { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:18px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* -------------------------------- toasts --------------------------------- */

.toast {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:26px; z-index:200;
  background:var(--ink); color:#fff;
  font-size:12.5px; font-weight:500; line-height:1.5;
  padding:11px 16px; border-radius:10px; max-width:min(560px,90vw);
  box-shadow:0 10px 30px rgba(22,48,44,.28);
  animation:toast-in .2s cubic-bezier(.2,.8,.2,1);
}
/* Stack rather than overlap when a save returns several warnings. */
.toast ~ .toast { bottom:76px; }
.toast ~ .toast ~ .toast { bottom:126px; }
.toast-error { background:var(--red); }
/* Warnings accompany a save that succeeded, so they must not read as failures. */
.toast-warn { background:var(--amber); color:#231A00; }
.toast.out { opacity:0; transition:opacity .4s; }
@keyframes toast-in { from { opacity:0; transform:translateX(-50%) translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

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

@media (max-width:860px) {
  .wrap { padding:20px 16px 48px; }
  .tiles { grid-template-columns:repeat(3,1fr); }
  .header-right { align-items:flex-start; }
  .cadence { text-align:left; }
  .card-row { grid-template-columns:4px 1fr 18px; gap:10px; row-gap:0; }
  .card-dates { grid-column:2; padding-bottom:11px; gap:18px; }
  .pill { grid-column:2; justify-self:start; margin-bottom:11px; }
  .meta, .form-grid { grid-template-columns:1fr; }
  .search { width:100%; }
  .views { margin-left:0; }
}