@view-transition{navigation:auto}

.dashboard-hero{
  min-height:214px;
  margin-bottom:18px;
  padding:36px 38px;
  border:1px solid var(--x-line);
  border-radius:var(--x-radius-2xl);
  background:
    radial-gradient(circle at 92% 8%,rgba(62,137,231,.13),transparent 23rem),
    linear-gradient(120deg,#fff 0%,#fbfdff 48%,#eef5fd 100%);
  box-shadow:var(--x-shadow-sm);
  isolation:isolate;
}
.dashboard-hero::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 43%,rgba(255,255,255,.46) 63%,rgba(255,255,255,.04) 100%);
  z-index:1;pointer-events:none;
}
.dashboard-hero .hero-copy{z-index:3;max-width:680px}
.dashboard-hero h1{
  margin:8px 0 12px;
  font-size:clamp(30px,2.4vw,38px);
  line-height:1.08;
  letter-spacing:-1.25px;
  color:var(--x-ink-950);
}
.dashboard-hero p{max-width:590px;color:var(--x-ink-650);font-size:14px;line-height:1.7}
.hero-photo-visual{inset:14px 14px 14px 51%!important}
.hero-photo-image{
  inset:0!important;
  width:100%!important;height:100%!important;
  border-radius:22px!important;
  object-position:center 53%!important;
  opacity:.94!important;
  box-shadow:0 14px 30px rgba(17,56,102,.09)!important;
}
.hero-photo-visual::before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.56) 14%,rgba(255,255,255,.12) 37%,rgba(255,255,255,.06) 100%)!important;
}
.hero-photo-glow{opacity:.7}

.kpi-grid{
  gap:12px;
  margin-bottom:18px;
}
.kpi-card{
  min-height:116px;
  gap:14px;
  padding:18px;
  border-color:var(--x-line);
  border-radius:var(--x-radius-xl);
  box-shadow:var(--x-shadow-xs);
  overflow:hidden;
  isolation:isolate;
}
.kpi-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--x-cobalt-500);opacity:.72;
}
.kpi-card:hover{
  transform:translateY(-3px);
  border-color:#c8d8ea;
  box-shadow:var(--x-shadow-md);
}
.kpi-card .kpi-icon{
  width:46px;height:46px;flex-basis:46px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:14px;
  background:rgba(255,255,255,.82);
  box-shadow:0 4px 12px rgba(23,60,104,.05);
}
.kpi-card small{font-size:10px;color:var(--x-ink-650);font-weight:750}
.kpi-card strong{margin-top:4px;font-size:32px;line-height:1;letter-spacing:-1.35px}
.kpi-card p{margin-top:5px;color:var(--x-ink-500)}
.kpi-arrow{font-size:17px;color:var(--x-ink-350)}
.kpi-blue{background:linear-gradient(135deg,#f6faff 0%,#eaf3ff 100%)}
.kpi-green{background:linear-gradient(135deg,#f7fcfa 0%,#e9f8f1 100%)}
.kpi-purple{background:linear-gradient(135deg,#fbfaff 0%,#f0edff 100%)}
.kpi-amber{background:linear-gradient(135deg,#fffdf8 0%,#fff3dd 100%)}

.dashboard-grid{
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr) minmax(260px,.82fr);
  gap:14px;
}
.dashboard-grid>.panel{
  border-radius:var(--x-radius-xl);
  padding:19px;
  box-shadow:var(--x-shadow-sm);
}
.panel-head{margin-bottom:14px}
.panel-kicker,.eyebrow{
  color:var(--x-cobalt-600);
  font-size:9px;
  letter-spacing:.14em;
}
.panel-head h2{font-size:17px;letter-spacing:-.45px}
.text-link{font-size:9px;color:var(--x-cobalt-600)}
.org-root{
  padding:12px;
  margin-bottom:9px;
  border:1px solid #d4e4f7;
  border-radius:14px;
  background:linear-gradient(180deg,#edf5ff,#e6f0fc);
}
.org-root-mark{
  width:32px;height:32px;
  border-radius:10px;
  background:linear-gradient(145deg,var(--x-navy-800),var(--x-cobalt-600));
  box-shadow:0 6px 14px rgba(28,89,170,.16);
}
.org-preview-list{gap:6px}
.org-preview-row{
  min-height:40px;
  padding:9px 10px;
  border-color:var(--x-line-soft);
  border-radius:11px;
  background:linear-gradient(180deg,#fff,#fbfcfe);
}
.org-preview-row:hover{border-color:#c9d9eb;background:#f6faff;transform:translateX(1px)}
.activity-list{position:relative}
.activity-list::before{
  content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1px;background:var(--x-line-soft)
}
.activity-item{
  position:relative;
  grid-template-columns:18px 1fr auto;
  min-height:54px;
  padding:9px 0;
  border-bottom:0;
}
.activity-dot{
  position:relative;z-index:2;
  width:8px;height:8px;
  background:var(--x-cobalt-500);
  box-shadow:0 0 0 4px var(--x-cobalt-100);
}
.activity-copy strong{font-size:10px}
.activity-copy small,.activity-item time{font-size:8px;color:var(--x-ink-500)}

.email-overview-panel{
  background:
    radial-gradient(circle at 100% 0,rgba(239,179,54,.09),transparent 14rem),
    #fff;
}
.email-overview-total{
  border-color:#efddbd;
  border-radius:15px;
  background:linear-gradient(180deg,#fffaf1,#fff7e9);
}
.email-overview-total>span{box-shadow:0 6px 14px rgba(190,126,20,.08)}
.email-overview-stats>div{border-color:var(--x-line);background:#fff}
.install-banner{
  margin:14px 0 18px;
  padding:17px 20px;
  border-color:#d6e4f5;
  border-radius:var(--x-radius-xl);
  background:
    radial-gradient(circle at 92% 16%,rgba(59,130,246,.10),transparent 15rem),
    linear-gradient(100deg,#f0f6ff,#f9fbff 58%,#edf5ff);
  box-shadow:var(--x-shadow-sm);
}
.install-art{
  width:50px;height:50px;
  border-radius:15px;
  background:linear-gradient(145deg,var(--x-navy-800),var(--x-cobalt-500));
  box-shadow:0 10px 24px rgba(35,100,185,.18);
}
.install-cta{
  min-height:40px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--x-cobalt-600),var(--x-cobalt-500));
  box-shadow:0 8px 18px rgba(36,96,180,.16);
}
.department-overview-panel{
  margin-top:0;
  border-radius:var(--x-radius-xl);
}
.clean-table{border-radius:14px;overflow:hidden}
.clean-table th{
  padding:11px 13px;
  color:var(--x-ink-500);
  background:#f7f9fc;
}
.clean-table td{padding:12px 13px}
.clean-table tbody tr{transition:background var(--x-duration-fast) var(--x-ease-standard)}
.clean-table tbody tr:hover{background:#f8fbff}
@container workspace (max-width:1180px){
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .email-overview-panel{grid-column:1/-1}
  .kpi-grid{grid-template-columns:1fr 1fr}
}
@container workspace (max-width:760px){
  .dashboard-hero{min-height:auto;padding:26px}
  .dashboard-hero::before{background:rgba(255,255,255,.93)}
  .hero-photo-visual{display:none!important}
  .kpi-grid{grid-template-columns:1fr}
  .dashboard-grid{grid-template-columns:1fr}
  .email-overview-panel{grid-column:auto}
  .org-preview-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){
  .kpi-card,.org-preview-row,.install-cta{will-change:transform}
}
/* R11 — stronger premium automotive dashboard differentiation */
.dashboard-hero{
  position:relative;
  min-height:286px;
  padding:46px 48px 66px;
  overflow:hidden;
  border-color:rgba(124,164,216,.18);
  background:linear-gradient(118deg,var(--x-navy-1000) 0%,#0a2c58 54%,#123f79 100%);
  box-shadow:0 24px 54px rgba(7,30,62,.18);
}
.dashboard-hero::before{
  background:linear-gradient(90deg,rgba(6,22,45,.99) 0%,rgba(7,30,60,.97) 46%,rgba(8,34,67,.62) 66%,rgba(8,34,67,.10) 100%);
}
.dashboard-hero::after{
  content:"";
  position:absolute;
  left:48px;
  bottom:34px;
  width:86px;
  height:3px;
  z-index:3;
  border-radius:var(--x-radius-pill);
  background:linear-gradient(90deg,var(--x-cobalt-400),rgba(93,152,240,.16));
}
.dashboard-hero .hero-copy{max-width:940px}
.dashboard-hero .eyebrow{color:#93bfff}
.dashboard-hero h1{
  margin-top:10px;
  color:#fff;
  font-size:clamp(34px,2.55vw,44px);
  letter-spacing:-1.6px;
  white-space:nowrap;
  text-shadow:0 10px 30px rgba(0,0,0,.18);
}
.dashboard-hero p{
  max-width:620px;
  color:rgba(226,237,251,.78);
  font-size:15px;
}
.hero-photo-visual{inset:0 0 0 48%!important}
.hero-photo-image{
  border-radius:0!important;
  opacity:.86!important;
  filter:saturate(.92) contrast(1.04)!important;
  box-shadow:none!important;
}
.hero-photo-visual::before{
  background:linear-gradient(90deg,rgba(7,30,60,.96) 0%,rgba(7,30,60,.54) 22%,rgba(7,30,60,.12) 54%,rgba(7,30,60,.03) 100%)!important;
}
.hero-photo-glow{opacity:.34}
.kpi-grid{
  position:relative;
  z-index:4;
  margin:20px 0 26px;
  gap:14px;
}
.kpi-card{
  --kpi-accent:var(--x-cobalt-600);
  --kpi-soft:var(--x-cobalt-50);
  min-height:128px;
  padding:21px 20px;
  background:#fff;
  border-color:rgba(204,216,230,.86);
  box-shadow:0 16px 34px rgba(12,43,82,.10);
}
.kpi-card::before{
  inset:0 18px auto 18px;
  width:auto;
  height:3px;
  border-radius:0 0 999px 999px;
  background:var(--kpi-accent);
  opacity:.9;
}
.kpi-card .kpi-icon{
  border:1px solid rgba(255,255,255,.84);
  background:rgba(255,255,255,.78);
  color:var(--kpi-accent);
  box-shadow:0 5px 14px rgba(23,60,104,.05);
}
.kpi-card strong{font-size:35px;color:var(--x-navy-950)}
.kpi-card small{color:var(--x-ink-500);letter-spacing:.02em}
.kpi-blue{
  --kpi-accent:#2f7be8;--kpi-soft:#edf5ff;
  background:linear-gradient(135deg,#f6faff 0%,#eaf3ff 100%);
  border-color:#cfdef1;
}
.kpi-green{
  --kpi-accent:#16845b;--kpi-soft:#edf9f4;
  background:linear-gradient(135deg,#f7fcfa 0%,#e9f8f1 100%);
  border-color:#cfe8dc;
}
.kpi-purple{
  --kpi-accent:#6658cc;--kpi-soft:#f3f1ff;
  background:linear-gradient(135deg,#fbfaff 0%,#f0edff 100%);
  border-color:#ddd7f6;
}
.kpi-amber{
  --kpi-accent:#b86e08;--kpi-soft:#fff7e7;
  background:linear-gradient(135deg,#fffdf8 0%,#fff3dd 100%);
  border-color:#eddcb9;
}
.dashboard-grid{
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr);
  grid-template-areas:
    "org activity"
    "install install";
  align-items:start;
  gap:16px;
}
.dashboard-grid>.panel{padding:24px}
.org-preview{grid-area:org}
.activity-panel{grid-area:activity;background:linear-gradient(180deg,#fff,#f9fbfe)}
.email-overview-panel{grid-area:email}
.org-root{
  padding:16px;
  margin-bottom:14px;
  border-color:rgba(84,145,226,.20);
  background:linear-gradient(135deg,var(--x-navy-950),var(--x-navy-800));
  box-shadow:0 14px 30px rgba(8,37,76,.15);
}
.org-root strong{color:#fff}
.org-root small{color:rgba(224,236,250,.70)}
.org-root-mark{
  background:linear-gradient(145deg,var(--x-cobalt-500),var(--x-cobalt-400));
  box-shadow:0 8px 18px rgba(18,78,164,.30);
}
.org-preview-list{gap:8px}
.org-preview-row{
  min-height:46px;
  padding:11px 12px;
  border-color:#e3eaf2;
  background:#fff;
}
.activity-item{min-height:58px}
.email-overview-total{
  background:linear-gradient(145deg,var(--x-navy-950),var(--x-navy-800));
  border-color:rgba(18,70,135,.28);
  box-shadow:0 12px 26px rgba(9,41,83,.13);
}
.email-overview-total strong{color:#fff}
.email-overview-total small{color:rgba(225,237,251,.72)}
.email-overview-total>span{
  color:#ffd68a;
  background:rgba(255,255,255,.10);
  box-shadow:none;
}
.install-banner{
  grid-area:install;
  margin:0;
  padding:20px 24px;
  border-color:rgba(101,149,210,.18);
  background:
    radial-gradient(circle at 92% 20%,rgba(79,145,235,.24),transparent 16rem),
    linear-gradient(105deg,var(--x-navy-1000),var(--x-navy-900) 56%,var(--x-navy-800));
  box-shadow:0 18px 38px rgba(7,33,69,.15);
}
.install-banner-copy h2{color:#fff}
.install-banner-copy p,.install-benefits{color:rgba(225,237,251,.72)}
.install-art{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.install-banner .eyebrow{color:#8fbfff}
.install-cta{
  color:var(--x-navy-900);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.install-cta:hover{background:#f5f9ff}
@container workspace (max-width:1180px){
  .dashboard-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "org org"
      "activity activity"
      "install install";
  }
  .dashboard-hero h1{white-space:normal}
}
@container workspace (max-width:760px){
  .dashboard-hero{
    min-height:250px;
    padding:30px 24px 62px;
  }
  .dashboard-hero::before{background:linear-gradient(135deg,rgba(6,22,45,.99),rgba(10,48,92,.96))}
  .dashboard-hero::after{left:24px;bottom:32px}
  .dashboard-hero h1{font-size:34px;white-space:normal}
  .kpi-grid{
    margin:18px 0 22px;
    grid-template-columns:1fr;
  }
  .dashboard-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "org"
      "activity"
      "install";
  }
  .dashboard-grid>.panel{padding:20px}
  .install-banner{margin:0}
}

/* R43 — Dashboard organization root opens full structure */
.org-root-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.org-root-link:hover{
  text-decoration:none;
  color:inherit;
}