/* SLPT R27 Dashboard Design 4 — approved dashboard direction. */
/* Light: Option C (Calm Balance). Dark: Option D (Dark Mode Pro). */
/* Stats strip intentionally excluded from theme overrides. */

:root{
  --r248-page:#f6f8fc;
  --r248-panel:#ffffff;
  --r248-panel-soft:#f8fafc;
  --r248-text:#111827;
  --r248-muted:#718096;
  --r248-line:#e5eaf2;
  --r248-shadow:0 14px 32px rgba(15,23,42,.07),0 2px 6px rgba(15,23,42,.03);
  --r248-blue:#3b82f6;
  --r248-cyan:#0ea5e9;
  --r248-teal:#14b8a6;
  --r248-green:#10b981;
  --r248-orange:#f59e0b;
  --r248-pink:#ef5b7d;
  --r248-purple:#6366f1;
  --r248-navy:#0f172a;
}

html[data-theme="mist-graphite"]{
  --r248-page:#07111f;
  --r248-panel:#0d1827;
  --r248-panel-soft:#101d2d;
  --r248-text:#f3f6fb;
  --r248-muted:#94a3b8;
  --r248-line:#1f2d40;
  --r248-shadow:0 16px 34px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.12);
  --r248-blue:#3b82f6;
  --r248-cyan:#22d3ee;
  --r248-teal:#2dd4bf;
  --r248-green:#10b981;
  --r248-orange:#f59e0b;
  --r248-pink:#f43f5e;
  --r248-purple:#8b5cf6;
  --r248-navy:#020617;
}

/* Approved login refinement from app-wide review: desktop card ~20% narrower than 530px. */
#loginView.r27-login-option3 .login-shell{width:min(424px,100%)!important}

/* Shared application shell — Design 4 navigation structure on professional accounts. */
@media(min-width:1180px){
  html[data-role="owner"] #appView.app-shell,
  html[data-role="coach"] #appView.app-shell,
  html[data-role="clinician"] #appView.app-shell{
    display:grid!important;
    grid-template-columns:218px minmax(0,1fr)!important;
    gap:0!important;
    padding:0!important;
    background:var(--r248-page)!important;
  }
  html[data-role="owner"] #appView .sidebar,
  html[data-role="coach"] #appView .sidebar,
  html[data-role="clinician"] #appView .sidebar{
    position:sticky!important;
    inset:auto!important;
    left:auto!important;top:0!important;bottom:auto!important;
    width:218px!important;
    height:100vh!important;
    transform:none!important;
    pointer-events:auto!important;
    border-radius:0!important;
    padding:20px 12px 16px!important;
    background:linear-gradient(180deg,#f8fbff 0%,#f2f6fb 100%)!important;
    border:0!important;
    border-right:1px solid var(--r248-line)!important;
    box-shadow:none!important;
    overflow:auto!important;
  }
  html[data-theme="mist-graphite"][data-role="owner"] #appView .sidebar,
  html[data-theme="mist-graphite"][data-role="coach"] #appView .sidebar,
  html[data-theme="mist-graphite"][data-role="clinician"] #appView .sidebar{
    background:linear-gradient(180deg,#071322 0%,#091626 100%)!important;
    border-right-color:#18263a!important;
  }
  html[data-role="owner"] #appView .workspace,
  html[data-role="coach"] #appView .workspace,
  html[data-role="clinician"] #appView .workspace{min-width:0!important;background:var(--r248-page)!important}
  html[data-role="owner"] #appView .sidebar .sidebar-brand-row,
  html[data-role="coach"] #appView .sidebar .sidebar-brand-row,
  html[data-role="clinician"] #appView .sidebar .sidebar-brand-row{min-height:54px!important;margin-bottom:14px!important;padding:0 4px!important}
  html[data-role="owner"] #appView .sidebar .brand,
  html[data-role="coach"] #appView .sidebar .brand,
  html[data-role="clinician"] #appView .sidebar .brand{padding:6px 8px 10px!important;font-size:23px!important}
  html[data-role="owner"] #appView .sidebar .nav,
  html[data-role="coach"] #appView .sidebar .nav,
  html[data-role="clinician"] #appView .sidebar .nav{gap:4px!important}
  html[data-role="owner"] #appView .sidebar .nav button,
  html[data-role="coach"] #appView .sidebar .nav button,
  html[data-role="clinician"] #appView .sidebar .nav button{
    min-height:42px!important;
    padding:9px 11px!important;
    border-radius:10px!important;
    color:#657187!important;
    font-size:12px!important;
    font-weight:700!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html[data-role="owner"] #appView .sidebar .nav button:hover,
  html[data-role="coach"] #appView .sidebar .nav button:hover,
  html[data-role="clinician"] #appView .sidebar .nav button:hover{background:#eaf1fb!important;color:#23426c!important;transform:none!important}
  html[data-role="owner"] #appView .sidebar .nav button.active,
  html[data-role="coach"] #appView .sidebar .nav button.active,
  html[data-role="clinician"] #appView .sidebar .nav button.active{
    background:#e7f0ff!important;
    color:#2368cf!important;
    box-shadow:inset 3px 0 var(--r248-blue)!important;
  }
  html[data-theme="mist-graphite"] #appView .sidebar .nav button{color:#aab6c7!important}
  html[data-theme="mist-graphite"] #appView .sidebar .nav button:hover{background:#102238!important;color:#dce7f7!important}
  html[data-theme="mist-graphite"] #appView .sidebar .nav button.active{background:#112842!important;color:#86b7ff!important;box-shadow:inset 3px 0 var(--r248-blue)!important}
}

/* Top bar */
#appView .topbar{
  min-height:66px!important;
  padding:10px clamp(16px,2vw,30px)!important;
  background:color-mix(in srgb,var(--r248-panel) 94%,transparent)!important;
  border-bottom:1px solid var(--r248-line)!important;
  box-shadow:0 5px 18px rgba(15,23,42,.04)!important;
  color:var(--r248-text)!important;
}
#appView .search-wrap{background:var(--r248-panel-soft)!important;border:1px solid var(--r248-line)!important;box-shadow:none!important}
#appView .search-wrap input{color:var(--r248-text)!important}
html[data-theme="mist-graphite"] #appView .topbar{box-shadow:0 8px 24px rgba(0,0,0,.16)!important}

/* Dashboard canvas */
#content:has(.v192-dashboard){background:var(--r248-page)!important}
#content .v192-dashboard{
  max-width:1580px!important;
  margin:0 auto!important;
  padding:22px clamp(16px,2vw,30px) 34px!important;
  gap:16px!important;
  color:var(--r248-text)!important;
}

/* Replace the oversized image hero with Design 4's compact welcome header. */
#content .v192-dashboard .v192-hero,
#content .v192-dashboard .v192-hero.r16-owner-hero,
#content .v192-dashboard .v192-hero.r16-generic-hero{
  min-height:0!important;
  padding:4px 2px 8px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:var(--r248-text)!important;
  overflow:visible!important;
}
#content .v192-dashboard .v192-hero::after,
#content .v192-dashboard .v192-hero-art{display:none!important}
#content .v192-dashboard .v192-hero-copy{max-width:none!important}
#content .v192-dashboard .v192-hero h1{
  margin:0!important;
  font-size:clamp(24px,2.1vw,32px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  color:var(--r248-text)!important;
  text-shadow:none!important;
}
#content .v192-dashboard .v192-hero p{margin:5px 0 0!important;color:var(--r248-muted)!important;font-size:13px!important}
#content .v192-dashboard .v192-hero-chips{margin-top:10px!important;gap:7px!important}
#content .v192-dashboard .v192-hero-chips span{
  padding:6px 9px!important;
  background:var(--r248-panel)!important;
  color:var(--r248-muted)!important;
  border:1px solid var(--r248-line)!important;
  box-shadow:none!important;
  font-size:10px!important;
}

/* Quick Access — approved Folder Option 1. Same tools/data and click targets. */
#content .v192-dashboard .r35-quick-top{margin:0 0 2px!important}
#content .v192-dashboard .r35-quick-top .v192-section-head{display:none!important}
#content .v192-dashboard .v192-quick-grid{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:12px!important;
  padding-top:14px!important;
}
#content .v192-dashboard .v192-quick{
  --folder-ink:color-mix(in srgb,var(--tile-accent) 86%,#0f172a 14%);
  position:relative!important;
  isolation:isolate!important;
  min-height:142px!important;
  padding:20px 14px 15px!important;
  border-radius:7px 15px 15px 15px!important;
  border:1px solid color-mix(in srgb,var(--tile-accent) 62%,white 38%)!important;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--tile-accent) 88%,white 12%) 0%,
    color-mix(in srgb,var(--tile-accent) 78%,#14213a 22%) 100%)!important;
  color:white!important;
  overflow:visible!important;
  box-shadow:
    0 16px 28px color-mix(in srgb,var(--tile-accent) 18%,transparent),
    0 5px 10px rgba(15,23,42,.12),
    inset 0 1px rgba(255,255,255,.20),
    inset 0 -1px rgba(15,23,42,.15)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
/* Folder tab: behind the card body, visually integrated with its accent. */
#content .v192-dashboard .v192-quick::before{
  content:''!important;
  position:absolute!important;
  z-index:-2!important;
  left:7px!important;
  top:-13px!important;
  width:58px!important;
  height:25px!important;
  border:1px solid color-mix(in srgb,var(--tile-accent) 62%,white 38%)!important;
  border-bottom:0!important;
  border-radius:11px 11px 0 0!important;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tile-accent) 88%,white 12%),
    color-mix(in srgb,var(--tile-accent) 76%,#14213a 24%))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.20)!important;
}
/* Two restrained paper layers — decorative only, never interactive. */
#content .v192-dashboard .v192-quick::after{
  content:''!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:-1!important;
  left:22px!important;
  right:12px!important;
  top:-7px!important;
  height:17px!important;
  border-radius:7px 7px 3px 3px!important;
  background:linear-gradient(180deg,#ffffff 0%,#eef3fb 100%)!important;
  border:1px solid rgba(148,163,184,.40)!important;
  box-shadow:
    0 4px 0 -1px rgba(255,255,255,.84),
    0 5px 0 rgba(148,163,184,.20)!important;
  opacity:.92!important;
}
#content .v192-dashboard .v192-quick:hover{
  transform:translateY(-3px)!important;
  filter:saturate(1.03)!important;
  box-shadow:
    0 20px 34px color-mix(in srgb,var(--tile-accent) 22%,transparent),
    0 7px 14px rgba(15,23,42,.14),
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -1px rgba(15,23,42,.14)!important;
}
#content .v192-dashboard .v192-quick-icon{
  position:relative!important;z-index:1!important;
  width:38px!important;height:38px!important;border-radius:10px!important;
  background:rgba(255,255,255,.17)!important;color:white!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 4px 10px rgba(15,23,42,.10),inset 0 1px rgba(255,255,255,.16)!important;
}
#content .v192-dashboard .v192-quick b{
  position:relative!important;z-index:1!important;
  color:white!important;font-size:13px!important;margin-top:10px!important;
  text-shadow:0 1px 1px rgba(15,23,42,.18)!important;
}
#content .v192-dashboard .v192-quick small{
  position:relative!important;z-index:1!important;
  color:rgba(255,255,255,.82)!important;font-size:10px!important;line-height:1.35!important;
}
#content .v192-dashboard .v192-quick>i{
  z-index:2!important;width:26px!important;height:26px!important;
  background:rgba(255,255,255,.16)!important;color:white!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
#content .v192-dashboard .v192-quick.tone-teal{--tile-accent:var(--r248-teal)}
#content .v192-dashboard .v192-quick.tone-purple{--tile-accent:var(--r248-purple)}
#content .v192-dashboard .v192-quick.tone-cyan{--tile-accent:var(--r248-cyan)}
#content .v192-dashboard .v192-quick.tone-blue{--tile-accent:var(--r248-blue)}
#content .v192-dashboard .v192-quick.tone-pink{--tile-accent:var(--r248-pink)}
#content .v192-dashboard .v192-quick.tone-orange{--tile-accent:var(--r248-orange)}
#content .v192-dashboard .v192-quick.tone-green{--tile-accent:var(--r248-green)}
#content .v192-dashboard .v192-quick.tone-indigo{--tile-accent:var(--r248-purple)}

/* Option D dark mode: same folder geometry, deeper material/edge contrast. */
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-quick{
  border-color:color-mix(in srgb,var(--tile-accent) 44%,#26364d 56%)!important;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--tile-accent) 52%,#0b1726 48%) 0%,
    color-mix(in srgb,var(--tile-accent) 34%,#07111f 66%) 100%)!important;
  box-shadow:
    0 18px 32px color-mix(in srgb,var(--tile-accent) 14%,transparent),
    0 7px 16px rgba(0,0,0,.30),
    inset 0 1px rgba(255,255,255,.09),
    inset 0 -1px rgba(0,0,0,.25)!important;
}
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-quick::before{
  border-color:color-mix(in srgb,var(--tile-accent) 44%,#26364d 56%)!important;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tile-accent) 52%,#0b1726 48%),
    color-mix(in srgb,var(--tile-accent) 36%,#07111f 64%))!important;
}
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-quick::after{
  background:linear-gradient(180deg,#dce6f4 0%,#b9c8da 100%)!important;
  border-color:#7b8ca3!important;
  box-shadow:0 4px 0 -1px #cad6e5,0 5px 0 rgba(74,91,116,.46)!important;
  opacity:.72!important;
}
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-quick:hover{
  border-color:color-mix(in srgb,var(--tile-accent) 62%,#26364d 38%)!important;
  box-shadow:
    0 20px 36px color-mix(in srgb,var(--tile-accent) 18%,transparent),
    0 9px 20px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 -1px rgba(0,0,0,.24)!important;
}
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-quick-icon,
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-quick>i{
  background:color-mix(in srgb,var(--tile-accent) 24%,#0a1625 76%)!important;
  color:color-mix(in srgb,var(--tile-accent) 82%,white 18%)!important;
  border-color:color-mix(in srgb,var(--tile-accent) 22%,#334155 78%)!important;
}

/* IMPORTANT: v192-metrics / v192-metric intentionally not overridden. Current approved stats design remains authoritative. */

/* Existing core dashboard panels — Design 4 surface hierarchy, no data changes. */
#content .v192-dashboard .v192-main-grid{gap:14px!important}
#content .v192-dashboard .v192-panel{
  border:1px solid var(--r248-line)!important;
  border-radius:16px!important;
  background:var(--r248-panel)!important;
  box-shadow:var(--r248-shadow)!important;
  padding:16px!important;
}
#content .v192-dashboard .v192-panel:hover{box-shadow:0 16px 34px rgba(15,23,42,.09)!important}
#content .v192-dashboard .panel-head h2{color:var(--r248-text)!important;font-size:15px!important}
#content .v192-dashboard .panel-head small{color:var(--r248-muted)!important;font-size:10px!important}
#content .v192-dashboard .link-btn{color:var(--r248-blue)!important;font-size:10px!important;font-weight:800!important}
#content .v192-dashboard .v192-session-row{
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:var(--r248-panel-soft)!important;
  color:var(--r248-text)!important;
}
#content .v192-dashboard .v192-session-row:hover{border-color:var(--r248-line)!important;background:color-mix(in srgb,var(--r248-panel-soft) 75%,var(--r248-blue) 4%)!important}
#content .v192-dashboard .v192-session-copy small,
#content .v192-dashboard .v192-session-time small,
#content .v192-dashboard .v192-donut small,
#content .v192-dashboard .v192-overview-legend span{color:var(--r248-muted)!important}
#content .v192-dashboard .v192-message-row{color:var(--r248-text)!important;border-bottom-color:var(--r248-line)!important}
#content .v192-dashboard .compact-empty{color:var(--r248-muted)!important}
html[data-theme="mist-graphite"] #content .v192-dashboard .v192-donut::after{background:var(--r248-panel)!important}

/* Responsive: keep Design 4 density without breaking existing mobile drawer. */
@media(max-width:1450px){#content .v192-dashboard .v192-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1179px){
  #content .v192-dashboard{padding:18px 14px 28px!important}
  #content .v192-dashboard .v192-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:780px){
  #content .v192-dashboard .v192-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #content .v192-dashboard .v192-quick{min-height:122px!important}
  #content .v192-dashboard .v192-hero h1{font-size:24px!important}
}
@media(max-width:460px){#content .v192-dashboard .v192-quick-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}}

@media(prefers-reduced-motion:reduce){
  #content .v192-dashboard .v192-quick,
  #content .v192-dashboard .v192-panel{transition:none!important}
}