/* App layout (sidebar + content) matching SELVE style */
:root{ --sidebar-w: 280px; }

/* Two-column grid: fixed sidebar + flexible content */
body.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
}
.app-sidebar{
  grid-column:1;
  width:var(--sidebar-w);
  background: var(--card);
  border-right: 3px solid var(--mint-strong);
  padding: 18px 16px;
  display:flex; flex-direction:column; gap:16px;
  position:sticky; top:0; height:100vh; align-self:stretch;
  z-index: 2;
}
.app-brand{ display:flex; align-items:center; gap:10px; font-weight:900; color:var(--pink); text-decoration:none; }
.app-brand img{ height:40px; width:auto; border-radius:10px; }
.user-card{ background:#fff; border:2px solid var(--border); border-radius:14px; padding:12px; }
.user-row{ display:flex; align-items:center; gap:10px; }
.user-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#f2fbfa,#fff); border:2px solid var(--mint-strong); display:flex; align-items:center; justify-content:center; font-weight:900; }
.user-meta{ font-weight:800; }
.progress{ margin-top:8px; height:8px; background:#eef3f8; border-radius:10px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--mint); width:0%; }

.nav-section{ margin-top:8px; }
.nav-section h4{ margin:8px 0 6px; color:#70839e; font-weight:800; font-size:.9rem; }
.side-nav{ display:flex; flex-direction:column; gap:6px; }
.side-link{ display:block; padding:10px 12px; border-radius:10px; color:var(--text-weak); text-decoration:none; font-weight:700; }
.side-link.active{ background: var(--primary); color: var(--primary-foreground); }
.side-link:hover{ background: rgba(109,211,206,.12); color: var(--foreground); }

.app-main{ grid-column:2; display:flex; flex-direction:column; min-width:0; height:100vh; overflow:hidden; z-index:1; }
.app-topbar{ position:static; background:var(--card); border-bottom:3px solid var(--mint-strong); padding:14px 20px; display:flex; justify-content:space-between; align-items:center; z-index:5; }
.app-content{ padding:24px; flex:1 1 auto; display:block; overflow-y:auto; min-height:0; position:relative; width:100%; }

.cards{ display:grid; grid-template-columns:repeat(4,minmax(160px,1fr)); gap:12px; }
.card{ background:#fff; border:2px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow); }
.card h3{ margin:0 0 6px; font-size:1rem; }
.card .kpi{ font-size:1.6rem; font-weight:900; }

.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-top:14px; align-items:start; }
.panel{ background:#fff; border:2px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow); }

/* Chat header chips inside app shell */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip{ border:2px solid var(--border); background: var(--muted); color: var(--foreground); padding:6px 10px; border-radius:999px; font-weight:700; cursor:pointer; }
.chip.active{ background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* Inputs + selects */
.input{ height:44px; padding:10px 12px; border:2px solid var(--border); border-radius:12px; background:var(--card); color:var(--foreground); }
.select{ height:44px; padding:10px 12px; border:2px solid var(--border); border-radius:12px; background:var(--card); color:var(--foreground); }
.btn{ height:44px; padding:10px 16px; border-radius:12px; border:none; background: var(--primary); color: var(--primary-foreground); font-weight:800; cursor:pointer; }
.btn.ghost{ background:transparent; color: var(--primary); border:2px solid var(--primary); }

/* Tabs */
.tabs{ display:flex; gap:8px; background: var(--muted); padding:6px; border-radius:12px; }
.tab{ padding:8px 12px; border-radius:8px; color: var(--muted-foreground); font-weight:700; cursor:pointer; }
.tab.active{ background: var(--card); color: var(--foreground); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

/* Light look for embedded coach inside app shell */
.app .coach-card{
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
}
.app .coach-info{
  background: var(--card);
  color: var(--foreground);
  border: 2px solid var(--border);
}
.app .coach-inputbar{
  background: transparent;
  border: none;
  box-shadow: none;
}
.app .coach-inputbar textarea{
  background: var(--card);
}

/* Sections hidden by route */
[data-route]{ display:none !important; }
[data-route].show{ display:block !important; }

/* Embed coach chat styles override minor spacing */
#coach .coach-layout{ grid-template-columns: 2.2fr 1fr; }

@media (max-width: 980px){
  :root{ --sidebar-w: 220px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .app-sidebar{ position:relative; height:auto; }
}