/* © 2026 Obaid Raza. All rights reserved. */
/* Dashboard presentation uses existing routes, permissions and confirmed data. */
#statGrid .stat { --status-tint: #edf4ff; --status-border: #cddfff; background: var(--status-tint); border: 1px solid var(--status-border); }
#statGrid .stat[data-open="Callback"] { --status-tint: #fff5e8; --status-border: #f4dbb4; }
#statGrid .stat[data-open="New"] { --status-tint: #edf4ff; --status-border: #c6dbfa; grid-column: 1/-1; }
#statGrid .stat[data-open="Overdue"] { --status-tint: #fff0f1; --status-border: #f3c8cc; }
#statGrid .stat[data-open="Meeting Scheduled"] { --status-tint: #f8effb; --status-border: #e2c9eb; }
#statGrid .stat[data-open="Site Visit Scheduled"] { --status-tint: #e9f7f4; --status-border: #bce2da; }
#statGrid .stat[data-open="Meeting Done"] { --status-tint: #f3efff; --status-border: #dcd1fa; }
#statGrid .stat[data-open="Site Visit Done"] { --status-tint: #fff9e5; --status-border: #f0df9f; }
#statGrid .stat[data-open="Booked"] { --status-tint: #eaf7ef; --status-border: #bfe3ce; }
#statGrid .stat[data-open="Invoiced"] { --status-tint: #eaf8f8; --status-border: #bce5e3; }
[data-theme="dark"] #statGrid .stat { --status-tint: #19283d; --status-border: #2b4365; }
[data-theme="dark"] #statGrid .stat[data-open="Callback"] { --status-tint: #352a1d; --status-border: #5e4528; }
[data-theme="dark"] #statGrid .stat[data-open="New"] { --status-tint: #1a2b43; --status-border: #35557f; }
[data-theme="dark"] #statGrid .stat[data-open="Overdue"] { --status-tint: #371f28; --status-border: #61313d; }
[data-theme="dark"] #statGrid .stat[data-open="Meeting Scheduled"] { --status-tint: #32213c; --status-border: #694577; }
[data-theme="dark"] #statGrid .stat[data-open="Site Visit Scheduled"] { --status-tint: #173a34; --status-border: #2d6b60; }
[data-theme="dark"] #statGrid .stat[data-open="Meeting Done"] { --status-tint: #29233d; --status-border: #493968; }
[data-theme="dark"] #statGrid .stat[data-open="Site Visit Done"] { --status-tint: #332d1c; --status-border: #5c4f29; }
[data-theme="dark"] #statGrid .stat[data-open="Booked"] { --status-tint: #19362a; --status-border: #2b5843; }
[data-theme="dark"] #statGrid .stat[data-open="Invoiced"] { --status-tint: #193235; --status-border: #2d5559; }
#statGrid .stat[data-urgent="true"] .lbl > i { background: #d13438 !important; animation: lv-urgency 1.5s ease-out 4; }
.st.MeetingScheduled{background:#f8effb;color:#875199}.st.SiteVisitScheduled{background:#e9f7f4;color:#227f72}[data-theme="dark"] .st.MeetingScheduled{background:#32213c;color:#d6a6e6}[data-theme="dark"] .st.SiteVisitScheduled{background:#173a34;color:#7bd0bf}
@keyframes lv-urgency { 50% { box-shadow: 0 0 0 5px #d1343820; } }
.focus { isolation: isolate; }
.lv-hero-skyline { position: absolute; right: 0; bottom: -1px; width: min(65%, 740px); height: 100%; opacity: .15; z-index: -1; pointer-events: none; }
.focus .bolt-bg { opacity: .035; }
.focus > div { position: relative; }
.focus > div:first-of-type { min-width: 0; max-width: none; }
.focus .chips { flex: 1; }
.focus h1 { line-height: 1.2; }
.focus .chip { min-width: 0; }
.focus .chip .top { white-space: normal; }
.focus .chip small { overflow: visible; white-space: normal; line-height: 1.45; }

/* A real, data-scaled funnel. Labels remain readable when a bar is zero. */
[data-w="funnel"] .funnel-inner { min-width: 0; }
[data-w="funnel"] .funnel-svg { display: none; }
#funnelCols { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 8px 12px 16px; }
#funnelCols .lv-funnel-stage { display: grid; grid-template-columns: 148px minmax(0,1fr) 72px; align-items: center; gap: 16px; padding: 9px 0; width: 100%; color: var(--ink); text-align: left; border: 0; background: transparent; }
.lv-funnel-stage .lv-funnel-name { font-weight: 600; font-size: 13px; }
.lv-funnel-stage .lv-funnel-name small { color: var(--muted); font-weight: 400; font-size: 10px; margin-top: 3px; line-height: 1.4; }
.lv-funnel-track { position: relative; height: 34px; border-radius: 9px; background: var(--chip); overflow: hidden; }
.lv-funnel-fill { display: block; width: var(--funnel-width); height: 100%; border-radius: inherit; background: var(--funnel-colour); transform-origin: left; animation: lv-fill .65s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--stage) * 40ms); }
.lv-funnel-stage > b { text-align: right; font-size: 20px; }
#funnelCols .lv-funnel-conversion { padding: 0 0 0 164px; border: 0; color: var(--muted); font-size: 11px; line-height: 1.3; }
.lv-funnel-conversion span { color: var(--blue); margin-right: 6px; }
.lv-funnel-stage:hover .lv-funnel-fill { filter: brightness(1.08); }
@keyframes lv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Attendance keeps the original analog clock and native controls. */
[data-w="clock"] #attendanceClockTimezone{font-size:10px;line-height:1.4;color:var(--muted)}

.lv-dashboard-empty { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 24px 16px; text-align: center; color: var(--muted); }
.lv-dashboard-empty svg { width: 72px; height: 58px; color: var(--blue); }
.lv-dashboard-empty strong { color: var(--ink); font-size: 14px; }
.lv-dashboard-empty p { margin: 0; font-size: 12px; max-width: 260px; line-height: 1.6; }
.lv-dashboard-empty .ghost { margin-top: 4px; }
[data-w="src"].lv-is-empty #donutBox { display: none; }
[data-w="src"].lv-is-empty .src-wrap { display: block; }
[data-w="src"].lv-is-empty #srcList { width: 100%; }
.lv-empty-summary { display: none; }

/* Live, authorized ranking with explicit units and stable identity. */
#closer { gap: 5px; }
.lv-closer-row { display: grid; grid-template-columns: 26px 34px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px 8px; border-radius: 11px; background: var(--chip); color: var(--ink); width: 100%; text-align: left; border: 1px solid transparent; }
.lv-closer-row[aria-expanded="true"] { border-color: var(--blue-200); }
.lv-closer-row .avatar { width: 32px; height: 32px; font-size: 11px; }
.lv-closer-row .lv-rank { font-size: 17px; text-align: center; }
.lv-closer-person { min-width: 0; }
.lv-closer-person b { display: block; font-size: 12px; overflow-wrap: anywhere; }
.lv-closer-person small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.lv-closer-score { text-align: right; }
.lv-closer-score b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.lv-closer-score small { display: block; color: var(--muted); font-size: 9px; }
.lv-closer-detail { padding: 10px 12px; font-size: 11px; color: var(--muted); line-height: 1.7; }
#agentTabs.lv-ranking-tabs { display: none; }
.lv-leaderboard-note { margin: 8px 4px 0; font-size: 10px; color: var(--muted); }

.lv-personal-progress { position: relative; display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 10px; margin: 12px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--chip); }
.lv-personal-progress .lv-target-ring { width: 60px; height: 60px; transform: rotate(-90deg); }
.lv-target-ring circle { fill: none; stroke: var(--line); stroke-width: 5; }
.lv-target-ring circle:last-child { stroke: var(--blue); stroke-dasharray: 151; stroke-dashoffset: var(--ring-offset,151); stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.lv-personal-progress .lv-target-label { position: absolute; left: 12px; top: 10px; width: 60px; height: 60px; display: grid; place-items: center; font-size: 12px; color: var(--ink); font-weight: 600; }
.lv-target-copy { align-self: center; min-width: 0; }
.lv-target-copy strong { display: block; font-size: 12px; color: var(--ink); }
.lv-target-copy small { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); line-height: 1.5; }
.lv-motivation-badges { display: flex; flex-wrap: wrap; gap: 5px; grid-column: 1/-1; }
.lv-motivation-badges span { padding: 4px 7px; border-radius: 30px; color: var(--muted); background: var(--card); font-size: 9px; }
.lv-motivation-badges span[data-earned="true"] { background: #fff3dc; color: #835000; }
[data-theme="dark"] .lv-motivation-badges span[data-earned="true"] { background: #3b2d18; color: #f4cf8c; }
.lv-daily-goal { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--chip); }
.lv-daily-goal .lv-goal-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.lv-daily-goal small { color: var(--muted); font-size: 10px; }
.lv-goal-track { height: 6px; background: var(--line); border-radius: 8px; overflow: hidden; }
.lv-goal-track span { display: block; height: 100%; width: var(--goal-progress,0%); background: var(--blue); border-radius: inherit; transition: width .6s ease; }
.lv-daily-goal p { margin: 7px 0 0; font-size: 11px; color: var(--muted); }
#grid [data-w="total"] .beam { transform: translate(-50%,var(--rocket-shift,0px)); transition: transform 1s ease; }
#grid [data-w="total"].lv-target-launch .rocket { animation: lv-target-launch 1.5s ease-in both; }
@keyframes lv-target-launch { 30% { transform: translateY(5px); } to { transform: translateY(-210px); opacity: 0; } }

/* Entrance is applied once to the dashboard, not on every data refresh. */
#grid > .card { animation: none; }
.lv-dashboard-enter #grid > .card { animation: lv-card-enter .45s both; animation-delay: calc(var(--i,0) * 40ms); }
@keyframes lv-card-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (hover:hover) { #grid > .card { transition: transform .2s ease, box-shadow .2s ease; } #grid:not(.editing) > .card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #14274212; } #statGrid .stat:hover { transform: translateY(-2px); } }
#grid :is(button,.btn-primary):active { transform: scale(.98); }
#grid .w-head .t p { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.lv-closer-row.lv-rank-up { animation: lv-rank-gold .85s ease-out; }
@keyframes lv-rank-gold { from { background: #ffc83d55; box-shadow: 0 0 0 1px #e8a40088; } to { background: var(--chip); box-shadow: none; } }

@media (max-width:760px) {
  .focus { padding: 18px 16px; display: grid; gap: 14px; }
  .focus > div:first-of-type { max-width: none; }
  .focus h1 { font-size: 23px; }
  .focus > div > p { font-size: 12px; margin-top: 6px; }
  .focus .ai { display: none; }
  .focus .chips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 7px; }
  .focus .chip { padding: 11px 9px; min-height: 102px; border-radius: 12px; }
  .focus .chip .top { font-size: 10px; gap: 4px; line-height: 1.4; }
  .focus .chip .ci { display: none; }
  .focus .chip > b { font-size: 25px; margin: 7px 0 0; }
  .focus .chip small { display: none; }
  .focus .chip .go { margin-top: 6px; font-size: 9px; }
  .lv-hero-skyline { width: 90%; opacity: .14; }
  #grid { align-items: start; }
  #funnelCols { padding: 2px 0 12px; }
  #funnelCols .lv-funnel-stage { grid-template-columns: 104px minmax(0,1fr) 43px; gap: 7px; }
  .lv-funnel-stage .lv-funnel-name { font-size: 11px; }
  .lv-funnel-stage .lv-funnel-name small { font-size: 9px; }
  .lv-funnel-track { height: 29px; }
  .lv-funnel-stage > b { font-size: 17px; }
  #funnelCols .lv-funnel-conversion { padding-left: 111px; font-size: 10px; }
  .lv-is-empty[data-w="src"] .src-wrap, .lv-is-empty[data-w="closers"] #closer,
  .lv-is-empty[data-w="intake"] .intake-body { display: none; }
  .lv-is-empty[data-w="src"] #donutBox, .lv-is-empty[data-w="closers"] #agentTabs,
  .lv-is-empty[data-w="intake"] .intake-row { display: none; }
  .lv-is-empty .lv-empty-summary { display: block; margin: 0; padding: 0 5px 14px; color: var(--muted); font-size: 11px; }
  .lv-personal-progress { margin-top: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  #grid *, .focus * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #grid .card:hover, #grid button:active { transform: none; }
}

/* The rocket keeps its original continuous hover, flame and rising trail. */
@media (prefers-reduced-motion:no-preference){
 #grid [data-w="total"] .rocket{animation:hoverY 2.6s ease-in-out infinite}
 #grid [data-w="total"] .rocket .flame{animation:flick .16s ease-in-out infinite alternate}
 #grid [data-w="total"] .beam i{animation-iteration-count:infinite}
 #grid [data-w="total"].lv-target-launch .rocket{animation:lv-target-launch 1.5s ease-in both}
}
