/* ════════════════════════════════════════════════════════════════════
   connect-redesign-tasks.css — MODULE 27 · Task Radar
   Home-page card + #/tasks queue. All classes namespaced .tr-*.
   Brand tokens: bg #0a0a0a · surface #131313/#181818 · gold #b8962e/#d4ae52
   · text #ededed · danger #e24b4a · soon #ef9f27 · ok #5dcaa5
   ════════════════════════════════════════════════════════════════════ */

/* ── home card ── */
/* Compact card — matches the Answer / Top-performer height. Header (title +
   test-alert + Open-queue link) above a lean two-number stat row. */
.tr-home-card{background:#131313;border:1px solid #242424;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;height:100%;box-sizing:border-box;}
.tr-home-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.tr-home-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:#ededed;}
.tr-home-title .tr-dot{width:9px;height:9px;border-radius:50%;background:#d4ae52;}
.tr-head-actions{display:flex;align-items:center;gap:8px;}
.tr-test-alert{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#1d1d1d;color:#d4ae52;
  border:1px solid #3a3115;border-radius:8px;padding:0;cursor:pointer;font-family:inherit;}
.tr-test-alert:hover{background:#241f12;}
.tr-test-alert svg{width:15px;height:15px;}
.tr-statrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.tr-st{display:flex;flex-direction:column;gap:4px;}
.tr-st-v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:30px;font-weight:500;line-height:1;color:#ededed;}
.tr-st-l{font-size:11px;font-weight:600;color:#9a9a9a;display:flex;align-items:center;}
.tr-st-now .tr-st-v{color:#f0807f;}
.tr-st-soon .tr-st-v{color:#efb95a;}
/* pulsing red dot before "Due now" only when something is due now */
.tr-st-dot{display:none;}
.tr-has-now .tr-st-now .tr-st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e24b4a;margin-right:6px;
  animation:tr-pulse 1.6s ease-in-out infinite;}
@keyframes tr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,75,74,.55);}50%{box-shadow:0 0 0 6px rgba(226,75,74,0);}}

/* ── queue page ── */
.tr-page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.tr-counters{display:flex;gap:10px;}
.tr-counter{display:flex;align-items:center;gap:7px;background:#131313;border:1px solid #2a2a2a;border-radius:10px;padding:7px 12px;}
.tr-counter .tr-cn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:18px;font-weight:500;}
.tr-counter .tr-cl{font-size:11px;color:#9a9a9a;font-weight:600;}
.tr-counter.is-now .tr-cn{color:#f0807f;}
.tr-counter.is-soon .tr-cn{color:#efb95a;}
.tr-assign{display:flex;align-items:center;gap:8px;}
.tr-assign-label{font-size:11px;font-weight:700;letter-spacing:.4px;color:#7a7a7a;}
.tr-assignees{display:flex;gap:6px;flex-wrap:wrap;}
.tr-assign-chip{display:inline-flex;align-items:center;gap:5px;background:#16130b;color:#d4ae52;border:1px solid #3a3115;
  border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600;}
.tr-assign-chip svg{width:13px;height:13px;}
.tr-assign-none{font-size:12px;color:#7a7a7a;font-style:italic;}

.tr-queue{display:flex;flex-direction:column;gap:10px;}
.tr-empty{background:#131313;border:1px dashed #2a2a2a;border-radius:12px;padding:28px 16px;text-align:center;color:#8a8a8a;font-size:13px;}

.tr-row{display:flex;gap:11px;background:#131313;border:1px solid #242424;border-radius:12px;padding:13px;}
.tr-row.tr-now{border-color:#3a1c1c;}
.tr-row.tr-soon{border-color:#3a3115;}
.tr-ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;background:#1f1f1f;color:#cfcfcf;}
.tr-row.tr-now .tr-ava{background:#2a1212;color:#f0807f;}
.tr-row.tr-soon .tr-ava{background:#16130b;color:#d4ae52;}
.tr-body{flex:1;min-width:0;}
.tr-line1{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tr-name{font-weight:600;font-size:14px;color:#ededed;}
.tr-pill{display:inline-flex;align-items:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  border-radius:20px;padding:2px 9px;white-space:nowrap;}
.tr-pill-now{background:#2a1212;color:#f0807f;}
.tr-pill-soon{background:#1a160c;color:#efb95a;}
.tr-pill-later{background:#1c1c1c;color:#9a9a9a;}
.tr-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;font-size:11px;color:#8a8a8a;}
.tr-meta svg{width:12px;height:12px;vertical-align:-1px;}
.tr-mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.tr-dim{color:#6f6f6f;}
.tr-note{font-size:13px;color:#dfdfdf;overflow-wrap:anywhere;}

.tr-actions{display:flex;align-items:center;gap:8px;}
.tr-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:600;
  border-radius:8px;padding:7px 14px;cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;}
.tr-btn svg{width:14px;height:14px;}
/* Open in GHL — filled gold, dark text (mock sign-off 2026-08-25; supersedes the earlier outline choice) */
.tr-btn-ghl{background:#d4ae52;color:#131313;border-color:#d4ae52;}
.tr-btn-ghl:hover{background:#e3c26b;border-color:#e3c26b;}
.tr-btn-ghl.is-disabled{color:#6f6f6f;border-color:#333;cursor:default;}
.tr-btn-handled{background:#0f1f16;color:#5dcaa5;border-color:#154031;}
.tr-btn-handled:hover{background:#123026;}

/* ── toast ── */
.tr-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);opacity:0;pointer-events:none;
  background:#181818;color:#ededed;border:1px solid #333;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;
  transition:opacity .2s,transform .2s;z-index:9999;}
.tr-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.tr-toast.err{border-color:#7a2b2b;color:#f0807f;}

/* ════════════════════════════════════════════════════════════════════
   MODULE 27b — Inbox (topbar icon + glow + panel), manager assign, flash
   ════════════════════════════════════════════════════════════════════ */

/* queue row: pill + admin assign icon share the top-right */
.tr-line1-right{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;}
.tr-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  background:#1d1d1d;border:1px solid #333;color:#9a9a9a;cursor:pointer;padding:0;}
.tr-icon-btn svg{width:14px;height:14px;}
.tr-btn-assign:hover{color:#d4ae52;border-color:#3a3115;background:#241f12;}

/* row highlight when arrived via the inbox */
.tr-row.tr-flash{animation:tr-flash 2.6s ease;}
@keyframes tr-flash{0%,100%{box-shadow:0 0 0 0 rgba(212,174,82,0);}12%,45%{box-shadow:0 0 0 2px #d4ae52;}}

/* topbar inbox icon */
.tr-inbox{position:relative;display:flex;align-items:center;}
.tr-inbox-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:transparent;border:none;color:#9a9a9a;cursor:pointer;padding:0;}
.tr-inbox-btn svg{width:21px;height:21px;}
.tr-inbox-btn:hover{color:#ededed;}
.tr-inbox-btn.tr-has-pending{color:#d4ae52;animation:tr-inbox-glow 1.8s ease-in-out infinite;}
@keyframes tr-inbox-glow{0%,100%{box-shadow:0 0 0 0 rgba(212,174,82,0);}50%{box-shadow:0 0 12px 3px rgba(212,174,82,.55);}}
.tr-inbox-badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;border-radius:9px;padding:0 4px;
  background:#d4ae52;color:#1a1407;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}

/* inbox dropdown panel */
.tr-inbox-panel{position:absolute;top:calc(100% + 8px);right:0;width:300px;max-height:62vh;overflow:auto;
  background:#181818;border:1px solid #2a2a2a;border-radius:12px;z-index:1200;box-shadow:0 12px 30px rgba(0,0,0,.55);}
.tr-inbox-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid #242424;
  font-size:12px;font-weight:700;letter-spacing:.3px;color:#ededed;position:sticky;top:0;background:#181818;}
.tr-inbox-close{background:none;border:none;color:#8a8a8a;font-size:14px;cursor:pointer;line-height:1;}
.tr-inbox-close:hover{color:#ededed;}
.tr-inbox-list{padding:6px;}
.tr-inbox-empty{padding:22px 14px;text-align:center;color:#7a7a7a;font-size:12.5px;}
.tr-inbox-item{display:block;width:100%;text-align:left;background:#131313;border:1px solid #242424;border-radius:9px;
  padding:9px 11px;margin-bottom:6px;cursor:pointer;font-family:inherit;}
.tr-inbox-item:hover{border-color:#3a3115;background:#16130b;}
.tr-inbox-item.tr-unseen{border-left:3px solid #d4ae52;}
.tr-inbox-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tr-inbox-top b{font-size:13px;color:#ededed;font-weight:600;}
.tr-inbox-loc{font-size:11px;color:#9a9a9a;}
.tr-inbox-by{display:block;font-size:11px;color:#7a7a7a;margin-top:2px;}
.tr-inbox-note{display:block;font-size:12px;color:#cfcfcf;margin-top:5px;font-style:italic;}

/* manager assign popover (appended to body) */
.tr-assign-menu{position:absolute;width:224px;max-height:300px;overflow:auto;background:#181818;border:1px solid #2a2a2a;
  border-radius:10px;z-index:3000;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.55);}
.tr-assign-menu-head{font-size:11px;font-weight:700;letter-spacing:.4px;color:#7a7a7a;padding:5px 8px 7px;}
.tr-assign-opt{display:block;width:100%;text-align:left;background:transparent;border:none;border-radius:7px;
  padding:8px 9px;font-size:13px;color:#ededed;cursor:pointer;font-family:inherit;}
.tr-assign-opt:hover{background:#16130b;color:#d4ae52;}

/* ── Call Schedule (hour blocks, toolbar, states) ── */
/* Colors are this file's existing tokens: gold #d4ae52 · text #ededed
   · border #2a2a2a/#3a3115 · dim #9a9a9a/#7a7a7a · ok #5dcaa5 · danger #f0807f */
.tr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0; flex-wrap: wrap; }
.tr-datenav { display: flex; align-items: center; gap: 8px; }
.tr-nav-btn { background: transparent; border: 1px solid #2a2a2a; color: #ededed; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 18px; line-height: 1; }
.tr-nav-btn:hover { border-color: #d4ae52; color: #d4ae52; }
.tr-date-label { font-weight: 600; min-width: 120px; text-align: center; }
.tr-tabs { display: flex; gap: 8px; }
.tr-tab { background: transparent; border: 1px solid #2a2a2a; color: #9a9a9a; border-radius: 8px; padding: 6px 16px; cursor: pointer; }
.tr-tab.is-active { border-color: #d4ae52; color: #d4ae52; }
/* Task view toggle: All tasks / Call backs / Escalations. Same weight as the time tabs, set apart
   by a filled active state so the two rows never read as one control. */
.tr-views { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-view { background: transparent; border: 1px solid #2a2a2a; color: #9a9a9a; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; }
.tr-view.is-active { background: #241f12; border-color: #d4ae52; color: #d4ae52; }
.tr-view:focus-visible { outline: 2px solid #d4ae52; outline-offset: 2px; }
.tr-view-n { font-size: 12px; color: #7a7a7a; }
.tr-view-n:empty { display: none; }
.tr-view.is-active .tr-view-n { color: #d4ae52; }
.tr-hour-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; }
.tr-hour-label { font-size: 20px; font-weight: 700; color: #d4ae52; }
.tr-hour-count { font-size: 13px; color: #7a7a7a; }
/* A cleared hour folds to its header: same type and rhythm, now a button with a chevron. */
/* The padding is the phone tap target; the top margin pays it back so the header keeps
   .tr-hour-head's 18px/8px rhythm. No transition: innerHTML paints the chevron already turned. */
.tr-hour-toggle { width: 100%; background: transparent; border: none; font: inherit; cursor: pointer;
  padding: 8px 0; margin: 10px 0 0; }
.tr-hour-toggle:focus-visible { outline: 2px solid #d4ae52; outline-offset: 2px; }
.tr-hour-chev { display: inline-flex; width: 14px; height: 14px; color: #7a7a7a; transform: rotate(90deg);
  align-self: center; flex-shrink: 0; }
.tr-hour-toggle.is-collapsed .tr-hour-chev { transform: rotate(0deg); }
.tr-hour-chev svg { width: 100%; height: 100%; }
.tr-row.is-done { opacity: .55; }
.tr-row.is-done .tr-name, .tr-row.is-done .tr-note { text-decoration: line-through; }
.tr-done-by { color: #5dcaa5; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tr-claim-chip { color: #d4ae52; font-size: 12px; border: 1px solid #3a3115; border-radius: 999px; padding: 2px 10px; }
.tr-btn-claim { border: 1px solid #d4ae52; color: #d4ae52; background: transparent; }
.tr-btn-claim:hover { background: #241f12; }
.tr-btn-dismiss { background: transparent; border: none; color: #7a7a7a; cursor: pointer; font-size: 15px; padding: 4px 8px; }
.tr-btn-dismiss:hover { color: #f0807f; }

/* ── Call Schedule row grid (mock-faithful single-line anatomy) ──
   ava · who · call-note column · compact actions · timer/status. */
.tr-row{display:grid;grid-template-columns:34px minmax(150px,.9fr) minmax(0,1.25fr) auto minmax(96px,auto);align-items:center;gap:14px;padding:12px 16px;}
.tr-who{min-width:0;}
.tr-notecol{min-width:0;}
.tr-notelabel{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#8a8a8a;margin-bottom:2px;}
.tr-status{display:inline-flex;align-items:center;gap:8px;justify-self:end;white-space:nowrap;}
.tr-timer{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:500;}
.tr-time-now{color:#f0807f;}
.tr-time-soon{color:#efb95a;}
.tr-time-later{color:#9a9a9a;}
.tr-btn-check{width:36px;height:31px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  background:#16815a;border:1px solid #16815a;color:#eafff5;cursor:pointer;flex-shrink:0;}
.tr-btn-check:hover{background:#1a996a;border-color:#1a996a;}
.tr-btn-check svg{width:15px;height:15px;}
/* Book in Zenoti: gold outline, secondary to the filled Open in GHL */
.tr-btn-book{background:transparent;color:#d4ae52;border-color:#d4ae52;}
.tr-btn-book:hover{background:rgba(212,174,82,.14);}
/* Lead actions: neutral icon button, same footprint as the check */
.tr-btn-actions{width:36px;height:31px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  background:transparent;border:1px solid #3a3a3a;color:#cfcfcf;cursor:pointer;flex-shrink:0;}
.tr-btn-actions:hover{border-color:#d4ae52;color:#d4ae52;}
.tr-btn-actions svg{width:15px;height:15px;}
.tr-claim-chip{white-space:nowrap;}
.tr-btn:focus-visible,.tr-tab:focus-visible,.tr-nav-btn:focus-visible,.tr-btn-check:focus-visible,.tr-btn-actions:focus-visible,.tr-btn-dismiss:focus-visible{outline:2px solid #d4ae52;outline-offset:2px;}
@media (max-width:920px){
  .tr-row{grid-template-columns:34px minmax(0,1fr) auto;row-gap:8px;}
  .tr-ava{grid-row:1;}
  .tr-who{grid-row:1;grid-column:2;}
  .tr-status{grid-row:1;grid-column:3;}
  .tr-notecol{grid-row:2;grid-column:2 / -1;}
  .tr-actions{grid-row:3;grid-column:2 / -1;flex-wrap:wrap;}
}

/* ── home: Task Radar now sits in the flow strip as stage 04 ──────────────────────── */
/* The card kept the id #tr-home-card and the .tr-st-now / .tr-st-dot class names, so
   tasks.js renderHome() and the .tr-has-now pulse rule above both keep working unchanged.
   The dot needs to sit on the baseline of the unit label rather than a 30px stat number. */
.pl-stage .pl-unit.tr-st-now{display:flex;align-items:center}