/* ============================================================
   QVIC Pro Dark — dashboard-only visual preview

   This file intentionally affects only direct Dashboard roots. Removing the
   stylesheet link and the `dashboard-pro-preview` root classes restores the
   previous appearance without touching shared workspace components.
   ============================================================ */

#view > .dashboard-pro-preview{
  --dash-pro-panel:color-mix(in srgb,var(--surface) 82%,#050407);
  --dash-pro-panel-strong:color-mix(in srgb,var(--surface) 66%,#030204);
  --dash-pro-cell:color-mix(in srgb,var(--surface-2) 54%,#08070a);
  --dash-pro-cell-hover:color-mix(in srgb,var(--surface-2) 70%,#0b090d);
  --dash-pro-line:color-mix(in srgb,var(--txt) 16%,transparent);
  --dash-pro-line-soft:color-mix(in srgb,var(--txt) 9%,transparent);
  --dash-pro-accent:color-mix(in srgb,var(--accent) 15%,transparent);
  --dash-pro-shadow:0 18px 46px rgba(0,0,0,.24);
  position:relative;isolation:isolate;width:min(100%,1480px);margin-inline:auto;color:var(--txt);
}

#view > .dashboard-pro-preview::before{
  content:"";position:absolute;z-index:0;top:-30px;left:-18px;right:-18px;height:330px;pointer-events:none;opacity:.3;
  background:
    linear-gradient(var(--dash-pro-line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--dash-pro-line-soft) 1px,transparent 1px),
    radial-gradient(ellipse at 78% 8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 54%);
  background-size:34px 34px,34px 34px,100% 100%;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);
}

#view > .dashboard-pro-preview > *{position:relative;z-index:1;}

/* Quiet application header, with one restrained live-state marker. */
#view > .dashboard-pro-preview .dash-greeting{
  min-height:82px;margin:0 0 14px;padding:4px 3px 18px;border-bottom:1px solid var(--dash-pro-line);
}

#view > .dashboard-pro-preview .greeting-text{
  display:flex;align-items:center;font-size:30px;font-weight:660;letter-spacing:-.72px;
}

#view > .dashboard-pro-preview .greeting-text::before{
  content:"";width:8px;height:8px;margin-right:12px;border:1px solid color-mix(in srgb,var(--accent) 68%,white);
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--dash-pro-accent),0 0 16px var(--accent-glow);
}

#view > .dashboard-pro-preview .greeting-text .name{
  margin-left:.22em;font-size:1.13em;letter-spacing:-.1px;
}

#view > .dashboard-pro-preview .dash-greeting-sub{
  margin-top:8px;padding-left:20px;color:var(--txt-3);font-size:13px;letter-spacing:.02em;
}

/* The week works as one compact control rail instead of seven loose cards. */
#view > .dashboard-pro-preview .week-strip{
  gap:4px;margin:0;padding:6px;border:1px solid var(--dash-pro-line);border-radius:17px;
  background:color-mix(in srgb,var(--dash-pro-panel-strong) 94%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 30px rgba(0,0,0,.16);
}

#view > .dashboard-pro-preview .week-cell{
  min-height:66px;padding:9px 6px;border:1px solid transparent;border-radius:12px;background:transparent;box-shadow:none;
}

#view > .dashboard-pro-preview .week-cell[role="button"]:hover{
  border-color:var(--dash-pro-line-soft);background:var(--dash-pro-cell);transform:none;
}

#view > .dashboard-pro-preview .week-cell.today{
  border-color:rgba(255,255,255,.82);background:var(--dash-pro-accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1.5px rgba(255,255,255,.86),
    0 0 0 4px rgba(255,255,255,.12),
    0 0 26px rgba(255,255,255,.26);
  transform:translateY(-1px);
}
html[data-theme="light"] #view > .dashboard-pro-preview .week-cell.today{
  border-color:rgba(18,16,22,.78);background:color-mix(in srgb,var(--accent) 10%,#fff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 1.5px rgba(18,16,22,.78),
    0 0 0 4px rgba(18,16,22,.08),
    0 0 20px rgba(18,16,22,.14);
}

#view > .dashboard-pro-preview .wc-dow{
  margin-bottom:5px;color:var(--txt-3);font-size:10px;font-weight:760;letter-spacing:1.15px;
}

#view > .dashboard-pro-preview .wc-day{margin-bottom:5px;font-size:17px;font-weight:690;}
#view > .dashboard-pro-preview .week-cell.today .wc-day{font-size:19px;color:var(--txt);}

/* Crisp, two-layer panels. The visual language stays neutral until state or
   selection needs the QVIC accent. */
#view > .dashboard-pro-preview .dash-overview-card{margin-top:14px;}
#view > .dashboard-pro-preview .dash-grid{gap:14px!important;margin-top:14px!important;}
#view > .dashboard-pro-preview .dash-col{gap:14px;}

#view > .dashboard-pro-preview .dash-card{
  padding:18px;border:1px solid var(--dash-pro-line);border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 34%),
    var(--dash-pro-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),var(--dash-pro-shadow);
}

#view > .dashboard-pro-preview .dash-card:hover{
  border-color:color-mix(in srgb,var(--txt) 21%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 52px rgba(0,0,0,.27);
}

#view > .dashboard-pro-preview .card-head{
  min-height:40px;margin:-2px -1px 14px;padding:0 1px 12px;border-bottom:1px solid var(--dash-pro-line-soft);
}

#view > .dashboard-pro-preview .card-title{
  gap:10px;color:var(--txt);font-size:15px;font-weight:720;letter-spacing:-.18px;
}

#view > .dashboard-pro-preview .card-title > svg{
  box-sizing:content-box;width:17px;height:17px;padding:8px;border:0;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,var(--dash-pro-cell));
  color:var(--accent-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent);
}

#view > .dashboard-pro-preview .btn{
  border-radius:11px;box-shadow:none;
}

#view > .dashboard-pro-preview .btn-ghost{
  border-color:var(--dash-pro-line-soft);background:color-mix(in srgb,var(--dash-pro-cell) 78%,transparent);color:var(--txt-2);
}

#view > .dashboard-pro-preview .btn-ghost:hover{
  border-color:var(--dash-pro-line);background:var(--dash-pro-cell-hover);color:var(--txt);transform:none;box-shadow:none;
}

/* Smart-folder treatment for the four workspace categories. */
#view > .dashboard-pro-preview .quick-stats-grid{
  gap:18px 11px;padding-top:1px;
}

#view > .dashboard-pro-preview .qs-item{
  --dash-folder-bg:var(--dash-pro-cell);
  min-height:116px;margin-top:13px;padding:24px 16px 15px;overflow:visible;
  border:1px solid var(--dash-pro-line-soft);border-radius:0 15px 15px 15px;background:var(--dash-folder-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 26px rgba(0,0,0,.16);
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease);
}

#view > .dashboard-pro-preview .qs-item::before{
  content:"";position:absolute;left:-1px;top:-14px;width:44%;height:15px;
  border:1px solid var(--dash-pro-line-soft);border-bottom:0;border-radius:10px 12px 0 0;
  background:var(--dash-folder-bg);
  clip-path:polygon(0 0,82% 0,100% 100%,0 100%);
}

#view > .dashboard-pro-preview .qs-item:hover{
  border-color:var(--dash-pro-line);background:var(--dash-pro-cell-hover);transform:translateY(-2px);
}

#view > .dashboard-pro-preview .qs-item:hover::before{
  border-color:var(--dash-pro-line);background:var(--dash-pro-cell-hover);
}

#view > .dashboard-pro-preview .qs-num{
  margin-bottom:9px;font-size:30px;font-weight:690;font-variant-numeric:tabular-nums;letter-spacing:-.85px;
}

#view > .dashboard-pro-preview .qs-lbl{
  color:var(--txt-2);font-size:12.5px;font-weight:620;line-height:1.35;
}

#view > .dashboard-pro-preview .qs-image-icon{
  top:9px;right:8px;bottom:auto;width:66px!important;height:66px!important;opacity:.045!important;
}

/* Compact row groups, borrowed from professional file and workflow panels. */
#view > .dashboard-pro-preview .today-body,
#view > .dashboard-pro-preview .live-camp-list,
#view > .dashboard-pro-preview .activity-feed,
#view > .dashboard-pro-preview .health-list,
#view > .dashboard-pro-preview .pipe-mini,
#view > .dashboard-pro-preview .chat-unread-list{
  gap:11px;
}

#view > .dashboard-pro-preview .dash-event-row,
#view > .dashboard-pro-preview .dash-task-row,
#view > .dashboard-pro-preview .activity-row,
#view > .dashboard-pro-preview .live-camp-row,
#view > .dashboard-pro-preview .health-row,
#view > .dashboard-pro-preview .pipe-mini-row,
#view > .dashboard-pro-preview .dash-chat-row{
  min-height:50px;margin:0;padding:11px 12px;border:1px solid var(--dash-pro-line-soft);border-radius:12px;
  background:color-mix(in srgb,var(--dash-pro-cell) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  gap:12px;
}

#view > .dashboard-pro-preview .dash-event-row:last-child,
#view > .dashboard-pro-preview .dash-task-row:last-child,
#view > .dashboard-pro-preview .activity-row:last-child{
  border-bottom:1px solid var(--dash-pro-line-soft);
}

#view > .dashboard-pro-preview .dash-task-row .task-due-badge{
  flex:none;white-space:nowrap;
}

#view > .dashboard-pro-preview .dash-event-row:hover,
#view > .dashboard-pro-preview .live-camp-row:hover,
#view > .dashboard-pro-preview .health-row:hover{
  border-color:var(--dash-pro-line);background:var(--dash-pro-cell-hover);transform:translateY(-1px);
}

#view > .dashboard-pro-preview .dash-section-label{
  padding:13px 2px 8px;color:var(--txt-3);font-size:10px;font-weight:800;letter-spacing:1.25px;
}

#view > .dashboard-pro-preview .dash-row-title,
#view > .dashboard-pro-preview .dash-task-title,
#view > .dashboard-pro-preview .health-name{
  font-size:13.5px;font-weight:650;
}

#view > .dashboard-pro-preview .dash-row-meta,
#view > .dashboard-pro-preview .activity-time,
#view > .dashboard-pro-preview .dash-chat-row time{
  color:var(--txt-3);font-size:10.5px;font-variant-numeric:tabular-nums;
}

#view > .dashboard-pro-preview .dash-campaign-metrics{
  gap:7px;flex-wrap:wrap;margin-top:5px;
}

#view > .dashboard-pro-preview .overdue-banner{
  margin-bottom:10px;padding:10px 11px;border:1px solid color-mix(in srgb,var(--red) 26%,var(--dash-pro-line-soft));
  border-radius:11px;background:color-mix(in srgb,var(--red) 7%,var(--dash-pro-cell));color:var(--warn);
}

#view > .dashboard-pro-preview .dash-task-row.is-overdue{
  border-color:color-mix(in srgb,var(--red) 36%,var(--dash-pro-line-soft));
  background:color-mix(in srgb,var(--red) 7%,var(--dash-pro-cell));
}

#view > .dashboard-pro-preview .chat-unread-count{
  min-width:27px;height:27px;background:var(--dash-pro-accent);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,var(--dash-pro-line));
}

#view > .dashboard-pro-preview .chat-unread-count.is-zero{
  background:var(--dash-pro-cell);color:var(--txt-3);
  box-shadow:inset 0 0 0 1px var(--dash-pro-line-soft);
}

#view > .dashboard-pro-preview .platform-badge,
#view > .dashboard-pro-preview .badge,
#view > .dashboard-pro-preview .chip{
  border-radius:8px;
}

/* Customer dashboard uses the same panel quality without changing its more
   review-focused information hierarchy. */
#view > .dashboard-pro-preview.customer-dashboard .customer-welcome,
#view > .dashboard-pro-preview.customer-dashboard .customer-review-focus,
#view > .dashboard-pro-preview.customer-dashboard .customer-board-mini,
#view > .dashboard-pro-preview.customer-dashboard .customer-mcp-card{
  border:1px solid var(--dash-pro-line);border-radius:18px;background:var(--dash-pro-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),var(--dash-pro-shadow);
}

#view > .dashboard-pro-preview.customer-dashboard .customer-review-list > a,
#view > .dashboard-pro-preview.customer-dashboard .customer-review-clear,
#view > .dashboard-pro-preview.customer-dashboard .customer-board-lane,
#view > .dashboard-pro-preview.customer-dashboard .customer-project-card{
  border-color:var(--dash-pro-line-soft);background:var(--dash-pro-cell);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="light"] #view > .dashboard-pro-preview{
  --dash-pro-panel:#FFFFFF;
  --dash-pro-panel-strong:#FFFFFF;
  --dash-pro-cell:#F0EEF3;
  --dash-pro-cell-hover:#E6E3EA;
  --dash-pro-line:rgba(14,12,18,.28);
  --dash-pro-line-soft:rgba(14,12,18,.18);
  --dash-pro-shadow:0 14px 34px rgba(20,16,28,.12);
}

html[data-theme="light"] #view > .dashboard-pro-preview::before{opacity:.2;}
html[data-theme="light"] #view > .dashboard-pro-preview .qs-image-icon{filter:none;opacity:.035!important;}

@media(max-width:1120px){
  #view > .dashboard-pro-preview .quick-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:920px){
  #view > .dashboard-pro-preview::before{left:-16px;right:-16px;height:290px;opacity:.22;}
  #view > .dashboard-pro-preview .dash-greeting{min-height:0;margin-bottom:12px;padding:2px 1px 16px;}
  #view > .dashboard-pro-preview .greeting-text{font-size:29px;}
  #view > .dashboard-pro-preview .dash-greeting-sub{padding-left:19px;font-size:12.5px;}
  #view > .dashboard-pro-preview .week-strip{
    display:grid;grid-template-columns:repeat(7,minmax(42px,1fr));gap:4px;overflow-x:auto;padding:5px;
  }
  #view > .dashboard-pro-preview .week-cell{width:auto;min-height:64px;padding:8px 4px;}
  #view > .dashboard-pro-preview .dash-overview-card{padding:16px;margin-top:13px;}
  #view > .dashboard-pro-preview .dash-card{padding:16px;}
  #view > .dashboard-pro-preview .quick-stats-grid{gap:18px 9px;}
  #view > .dashboard-pro-preview .qs-item{min-height:98px;padding:20px 13px 13px;}
  #view > .dashboard-pro-preview .qs-item::before{width:50%;}
  #view > .dashboard-pro-preview .qs-num{font-size:26px;}
  #view > .dashboard-pro-preview .qs-image-icon{top:5px;right:5px;width:54px!important;height:54px!important;}
  #view > .dashboard-pro-preview .dash-grid{gap:12px!important;margin-top:12px!important;}
  #view > .dashboard-pro-preview .dash-col{gap:12px;}
  #view > .dashboard-pro-preview .card-head{margin-bottom:12px;}
}

@media(max-width:480px){
  #view > .dashboard-pro-preview .greeting-text{font-size:27px;}
  #view > .dashboard-pro-preview .week-cell{min-width:42px;}
  #view > .dashboard-pro-preview .wc-dow{font-size:9px;letter-spacing:.8px;}
  #view > .dashboard-pro-preview .quick-stats-grid{gap:17px 8px;}
  #view > .dashboard-pro-preview .qs-item{min-height:96px;padding-inline:12px;}
  #view > .dashboard-pro-preview .qs-num{font-size:25px;}
  #view > .dashboard-pro-preview .qs-lbl{font-size:12px;}
}
