/* Meetings module - scoped under #meetings-root.
   Design register (owner's approved formula): STRUCTURED drama, never organic.
   A deep gradient stage panel + fine drifting dot grid + ONE soft breathing glow,
   with motion living in choreography (reveals, live counters, hovers). */

#meetings-root { --mt-ink: #0b1220; --mt-ink-2: #111c30; }

/* ============================ top bar ============================ */
#meetings-root .mt-top-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }

/* ============================ THE STAGE ==========================
   Deliberately dark in BOTH themes - it is the one dramatic surface. */
#meetings-root .mt-stage {
  position:relative; overflow:hidden; border-radius:20px; margin-bottom:26px;
  background:linear-gradient(135deg, var(--mt-ink) 0%, var(--mt-ink-2) 55%, #0d1526 100%);
  box-shadow:0 24px 60px -24px rgba(8,14,26,.55);
  isolation:isolate;
}
/* fine structured dot grid, slowly drifting */
#meetings-root .mt-stage::before {
  content:''; position:absolute; inset:-40px; z-index:0; opacity:.6;
  background-image:radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
  background-size:22px 22px;
  animation:mt-drift 28s linear infinite;
}
/* one soft breathing accent glow */
#meetings-root .mt-stage::after {
  content:''; position:absolute; z-index:0; width:420px; height:420px; right:-90px; top:-160px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(12,143,108,.55) 0%, rgba(12,143,108,.16) 42%, transparent 70%);
  animation:mt-breathe 7s ease-in-out infinite;
}
@keyframes mt-drift { to { transform:translate(22px, 22px); } }
@keyframes mt-breathe { 0%,100% { transform:scale(1); opacity:.75; } 50% { transform:scale(1.14); opacity:1; } }

#meetings-root .mt-stage-inner {
  position:relative; z-index:1; display:flex; align-items:center; gap:28px;
  padding:24px 30px; flex-wrap:wrap;
}
#meetings-root .mt-stage-main { flex:1; min-width:260px; }
#meetings-root .mt-eyebrow {
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#7ee0bd; margin-bottom:10px;
}
#meetings-root .mt-eyebrow i {
  width:7px; height:7px; border-radius:50%; background:#3ddc9a; display:inline-block;
  box-shadow:0 0 0 0 rgba(61,220,154,.7); animation:mt-pulse 2.2s ease-out infinite;
}
@keyframes mt-pulse {
  0% { box-shadow:0 0 0 0 rgba(61,220,154,.65); }
  70% { box-shadow:0 0 0 11px rgba(61,220,154,0); }
  100% { box-shadow:0 0 0 0 rgba(61,220,154,0); }
}
#meetings-root .mt-stage-title {
  margin:0 0 4px; font-size:30px; font-weight:800; letter-spacing:-.025em; color:#fff; line-height:1.12;
}
#meetings-root .mt-stage-sub { color:rgba(255,255,255,.62); font-size:13px; margin-bottom:16px; }
#meetings-root .mt-stage-sub b { color:#7ee0bd; font-weight:650; }

/* the two clocks, as a departure board */
#meetings-root .mt-stage-clocks { display:flex; align-items:stretch; gap:0; margin-bottom:18px; flex-wrap:wrap; }
#meetings-root .mt-stage-clock { padding:0 22px 0 0; }
#meetings-root .mt-stage-clock + .mt-stage-clock { padding-left:22px; border-left:1px solid rgba(255,255,255,.14); }
#meetings-root .mt-stage-clock b {
  display:block; font-size:26px; font-weight:800; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#meetings-root .mt-stage-clock span {
  display:block; font-size:11px; font-weight:650; color:rgba(255,255,255,.5); margin-top:3px;
  letter-spacing:.04em;
}
#meetings-root .mt-stage-actions { display:flex; gap:10px; flex-wrap:wrap; }
#meetings-root .mt-stage-actions .btn { box-shadow:0 8px 22px -8px rgba(0,0,0,.6); }
#meetings-root .mt-btn-ghost-l {
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#fff;
  padding:9px 16px; border-radius:10px; font-size:13px; font-weight:650; cursor:pointer;
}
#meetings-root .mt-btn-ghost-l:hover { background:rgba(255,255,255,.17); }

/* countdown ring */
#meetings-root .mt-ring { position:relative; width:132px; height:132px; flex:0 0 auto; }
#meetings-root .mt-ring svg { transform:rotate(-90deg); display:block; }
#meetings-root .mt-ring circle { fill:none; stroke-width:8; stroke-linecap:round; }
#meetings-root .mt-ring .trk { stroke:rgba(255,255,255,.13); }
#meetings-root .mt-ring .val { stroke:url(#mtGrad); transition:stroke-dashoffset .6s ease; }
/* flex column, not grid: grid made these two separate rows and flung them 52px
   apart inside a 132px ring. They must read as one tight stacked label. */
#meetings-root .mt-ring-txt {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; line-height:1.1;
}
#meetings-root .mt-ring-txt b { display:block; font-size:19px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
#meetings-root .mt-ring-txt span { display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:3px; }

/* KPI strip inside the stage */
#meetings-root .mt-stage-kpis {
  position:relative; z-index:1; display:flex; gap:0; border-top:1px solid rgba(255,255,255,.10);
  flex-wrap:wrap;
}
#meetings-root .mt-stage-kpis > div { flex:1; min-width:110px; padding:14px 30px; }
#meetings-root .mt-stage-kpis > div + div { border-left:1px solid rgba(255,255,255,.10); }
#meetings-root .mt-stage-kpis b { display:block; font-size:21px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
#meetings-root .mt-stage-kpis span { display:block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.48); margin-top:2px; }

/* ============================ sections ============================ */
#meetings-root .mt-sec { margin-bottom:26px; }
#meetings-root .mt-sec h3 {
  display:flex; align-items:center; gap:10px; margin:0 2px 12px;
  font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint);
}
#meetings-root .mt-sec h3::after { content:''; flex:1; height:1px; background:var(--border); }
#meetings-root .mt-sec .mt-n {
  font-size:11px; font-weight:800; color:var(--text-dim); background:var(--surface-3);
  padding:2px 9px; border-radius:99px;
}
#meetings-root .mt-sec.is-today h3 { color:var(--brand); }
#meetings-root .mt-sec.is-today .mt-n { background:var(--brand-soft); color:var(--brand); }

/* ============================ meeting card ============================ */
#meetings-root .mt-card {
  position:relative; display:flex; align-items:center; gap:16px;
  padding:15px 18px 15px 22px; margin-bottom:11px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:15px;
  cursor:pointer; transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
  animation:mt-rise .42s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i, 0) * 55ms);
}
@keyframes mt-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
/* urgency rail - the one accent that encodes "how close is this" */
#meetings-root .mt-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--brand-2), var(--brand));
  opacity:.55; transition:opacity .18s, width .18s;
}
#meetings-root .mt-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
#meetings-root .mt-card:hover::before { opacity:1; width:5px; }
#meetings-root .mt-card.soon::before { background:linear-gradient(180deg, var(--amber), #f0a92a); opacity:1; }
#meetings-root .mt-card.imminent { border-color:var(--brand); }
#meetings-root .mt-card.imminent::before { background:linear-gradient(180deg, var(--brand-2), var(--brand)); opacity:1; width:5px; }
#meetings-root .mt-card.imminent .mt-clock.pkt { animation:mt-glow 2.4s ease-in-out infinite; }
@keyframes mt-glow {
  0%,100% { box-shadow:0 0 0 0 var(--brand-glow); }
  50% { box-shadow:0 0 0 6px rgba(12,143,108,0); }
}
#meetings-root .mt-card.past { opacity:.55; }
#meetings-root .mt-card.past::before { background:var(--border); }

/* the two clocks - the module's whole point, so they lead */
#meetings-root .mt-clocks { display:flex; gap:9px; flex:0 0 auto; }
#meetings-root .mt-clock {
  min-width:86px; text-align:center; padding:9px 11px; border-radius:11px;
  background:var(--surface-3); line-height:1.12; transition:background .18s;
}
#meetings-root .mt-clock b { display:block; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
#meetings-root .mt-clock span {
  display:block; font-size:9.5px; font-weight:750; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-top:3px;
}
#meetings-root .mt-clock.pkt { background:var(--brand-soft); }
#meetings-root .mt-clock.pkt b { color:var(--brand); }

#meetings-root .mt-main { flex:1; min-width:0; }
#meetings-root .mt-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#meetings-root .mt-client { font-size:15px; font-weight:750; letter-spacing:-.01em; }
#meetings-root .mt-co { font-weight:500; color:var(--text-dim); }
.mt-cd {
  font-size:11px; font-weight:750; color:var(--text-dim); background:var(--surface-3);
  padding:3px 9px; border-radius:99px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.mt-cd.warn { background:var(--amber-soft); color:var(--amber); }
.mt-cd.hot { background:var(--brand); color:#fff; }
#meetings-root .mt-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:6px; }
.mt-chip {
  font-size:11px; font-weight:650; padding:2.5px 9px; border-radius:7px;
  background:var(--surface-3); color:var(--text-dim);
}
.mt-chip.kind-B2B { background:var(--violet-soft); color:var(--violet); }
.mt-chip.kind-DIRECT { background:var(--amber-soft); color:var(--amber); }
.mt-chip.plat-upwork { background:rgba(20,168,0,.15); color:#2f9e3f; }
[data-theme="dark"] .mt-chip.plat-upwork { color:#54cf62; }
.mt-dim { font-size:11.5px; color:var(--text-faint); }

#meetings-root .mt-side { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
#meetings-root .mt-unassigned { color:var(--text-faint); font-size:18px; }
/* Two roles per call. They sit SIDE BY SIDE with a real gap - an overlapping
   stack clipped the initials of whoever was behind, which is unreadable.
   The person TAKING the call gets a brand ring so the role is obvious. */
#meetings-root .mt-people { display:inline-flex; align-items:center; gap:5px; }
#meetings-root .mt-people .avatar { flex:0 0 auto; }
#meetings-root .mt-people .avatar.lead { box-shadow:0 0 0 2px var(--brand); }
/* quick actions reveal on hover (desktop) */
#meetings-root .mt-card .mt-join { opacity:0; transform:translateX(6px); transition:opacity .18s, transform .18s; }
#meetings-root .mt-card:hover .mt-join, #meetings-root .mt-card.imminent .mt-join { opacity:1; transform:none; }

/* ============================ filters ============================ */
#meetings-root .mt-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
#meetings-root .mt-filters .input { max-width:220px; }

/* ============================ analytics ============================ */
#meetings-root .mt-kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
#meetings-root .mt-kpi {
  flex:1; min-width:120px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:15px 17px; animation:mt-rise .42s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i, 0) * 55ms);
}
#meetings-root .mt-kpi span { display:block; font-size:10.5px; font-weight:750; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); }
#meetings-root .mt-kpi b { display:block; font-size:26px; font-weight:800; margin-top:5px; font-variant-numeric:tabular-nums; }

/* ============================ detail ============================ */
/* hero band: status + context chips, both clocks, live countdown, Join */
.mt-hero {
  position:relative; overflow:hidden; border-radius:14px; padding:16px;
  background:linear-gradient(135deg, var(--surface-3), var(--surface-2));
  border:1px solid var(--border-soft); margin-bottom:18px;
}
.mt-hero::after {
  content:''; position:absolute; width:260px; height:260px; right:-90px; top:-130px; border-radius:50%;
  background:radial-gradient(circle, var(--brand-glow) 0%, transparent 68%); pointer-events:none;
}
.mt-hero-chips { position:relative; display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.mt-detail-clocks { position:relative; display:flex; gap:10px; flex-wrap:wrap; }
.mt-detail-clocks > div {
  flex:1; min-width:150px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:12px; padding:13px 15px; text-align:center;
}
.mt-detail-clocks > div.pkt { background:var(--brand-soft); border-color:transparent; }
.mt-detail-clocks > div.pkt b { color:var(--brand); }
.mt-detail-clocks b { display:block; font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mt-detail-clocks span { display:block; font-size:11px; color:var(--text-faint); margin-top:4px; }

/* grouped dossier instead of one flat list */
.mt-group { margin-bottom:18px; }
.mt-group h4 {
  margin:0 0 6px; font-size:10.5px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-faint);
}
.mt-detail .mt-row { display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.mt-detail .mt-row:last-child { border-bottom:0; }
.mt-detail .mt-row > span { flex:0 0 112px; color:var(--text-faint); font-weight:600; }
.mt-detail .mt-row > div { flex:1; min-width:0; word-break:break-word; }
.mt-who { display:inline-flex; align-items:center; gap:8px; }
.mt-hint {
  background:var(--amber-soft); color:var(--text-dim); border-radius:10px;
  padding:11px 13px; font-size:12.5px;
}
.mt-hint b { color:var(--brand); cursor:pointer; text-decoration:underline; }

/* status pills */
.mt-chip.st-UPCOMING { background:var(--brand-soft); color:var(--brand); }
.mt-chip.st-DONE { background:var(--green-soft); color:var(--green); }
.mt-chip.st-NO_SHOW { background:var(--red-soft); color:var(--red); }
.mt-chip.st-CANCELLED { background:var(--surface-3); color:var(--text-faint); }
.mt-chip.st-RESCHEDULED { background:var(--amber-soft); color:var(--amber); }

/* person picker: dropdown + free-text fallback for people with no account */
.mt-person { display:flex; flex-direction:column; gap:6px; }
.mt-person .mt-manual { font-size:13px; }
.mt-person .input:disabled { opacity:.45; cursor:not-allowed; }
.mt-clash {
  background:var(--red-soft); color:var(--red); border-radius:9px;
  padding:9px 12px; font-size:12.5px; font-weight:600; margin:-4px 0 12px;
}
.mt-brief { background:var(--surface-3); border-radius:12px; padding:13px 15px; margin-bottom:18px; }
.mt-brief h4 { margin:0 0 5px; font-size:10.5px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-faint); }
.mt-brief div { font-size:13.5px; line-height:1.55; }
.mt-note {
  background:var(--amber-soft); color:var(--text-dim); border-radius:9px;
  padding:9px 12px; font-size:12px; margin:-4px 0 12px;
}
/* a typed name is a label, not a user - render it visually distinct */
.avatar.sm.manual, #meetings-root .avatar.sm.manual {
  background:var(--surface-3) !important; color:var(--text-faint);
  border:1px dashed var(--border);
}

/* ============================ booking form ============================ */
.mt-chipset { display:flex; gap:7px; flex-wrap:wrap; }
.mt-chipset button {
  padding:7px 14px; border-radius:99px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-dim); font-size:12.5px; font-weight:650;
  cursor:pointer; transition:background .14s, border-color .14s, color .14s, transform .14s;
}
.mt-chipset button:hover { border-color:var(--brand); color:var(--text); transform:translateY(-1px); }
.mt-chipset button.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.mt-when { background:var(--surface-3); border:1px solid var(--border-soft); border-radius:12px; padding:12px; margin:14px 0; }
.mt-when-row { display:flex; gap:9px; flex-wrap:wrap; }
.mt-when-row .input { flex:1 1 130px; min-width:120px; }
.mt-quick { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.mt-quick button {
  padding:5px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-dim); font-size:11.5px; font-weight:650; cursor:pointer;
}
.mt-quick button:hover { border-color:var(--brand); color:var(--text); }
.mt-quick button.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.mt-quick .mt-sep { width:1px; height:18px; background:var(--border); margin:0 4px; }
.mt-preview { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px; font-size:12.5px; }
.mt-preview > div { flex:1; min-width:150px; }
.mt-preview b { display:block; font-size:10.5px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); margin-bottom:2px; }
.mt-more { margin-top:10px; }
.mt-more summary { cursor:pointer; font-size:13px; font-weight:650; color:var(--brand); padding:6px 0; }

/* ============================ responsive ============================ */
@media (max-width:820px) {
  #meetings-root .mt-stage-inner { padding:22px; gap:18px; }
  #meetings-root .mt-stage-title { font-size:24px; }
  #meetings-root .mt-ring { width:104px; height:104px; }
  #meetings-root .mt-stage-kpis > div { padding:12px 22px; }
}
@media (max-width:720px) {
  /* Phone: stack the card into full-width ROWS. Letting .mt-main share a row with
     the clocks squeezed it into a narrow column - the client name wrapped and every
     chip landed on its own line, making one card fill half the screen. */
  #meetings-root .mt-card {
    flex-wrap:wrap; align-items:flex-start; gap:10px; padding:13px 14px 13px 18px;
  }
  #meetings-root .mt-clocks { order:0; width:100%; gap:8px; }
  #meetings-root .mt-clock { flex:1 1 0; min-width:0; padding:7px 8px; }
  #meetings-root .mt-clock b { font-size:15px; }
  #meetings-root .mt-main { order:1; flex:1 1 100%; width:100%; min-width:0; }
  #meetings-root .mt-top { justify-content:space-between; gap:8px; }
  #meetings-root .mt-client { font-size:14.5px; }
  #meetings-root .mt-meta { gap:6px; margin-top:7px; }
  #meetings-root .mt-side { order:2; width:100%; justify-content:flex-start; gap:8px; }
  #meetings-root .mt-card .mt-join { opacity:1; transform:none; margin-left:auto; }
  #meetings-root .mt-filters .input { max-width:none; flex:1 1 140px; }
  #meetings-root .mt-stage-clock b { font-size:21px; }
}

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  #meetings-root .mt-stage::before,
  #meetings-root .mt-stage::after,
  #meetings-root .mt-eyebrow i,
  #meetings-root .mt-card.imminent .mt-clock.pkt { animation:none; }
  #meetings-root .mt-card, #meetings-root .mt-kpi { animation:none; }
  #meetings-root .mt-card { transition:none; }
  #meetings-root .mt-card:hover { transform:none; }
}