/* Scoped dashboard styles; native SVG charts need no client-side library. */
.panel-dashboard {
  --panel-border:#e3e9ef;
  display:grid;
  gap:20px;
  min-width:0;
  color:#0d2b36;
}
.panel-dashboard * {
  min-width:0;
}
.panel-dashboard p,.panel-dashboard h1,.panel-dashboard h2,.panel-dashboard h3 {
  margin:0;
}
.panel-dashboard h1 {
  font-size:clamp(26px,3vw,34px);
  font-weight:800;
  letter-spacing:-.04em;
}
.panel-dashboard h2 {
  font-size:21px;
  font-weight:800;
  letter-spacing:-.025em;
}
.panel-dashboard h3 {
  font-size:16px;
  font-weight:700;
}
.panel-dashboard .panel-muted {
  font-size:13px;
  color:#4e6870;
  line-height:1.5;
}
.panel-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:start;
}
.panel-languages {
  display:flex;
  gap:5px;
  align-items:center;
  flex-wrap:wrap;
}
.panel-languages a {
  font-size:12px;
  padding:5px 9px;
  border:1px solid var(--panel-border);
  border-radius:7px;
}
.panel-languages a[aria-current=page] {
  background:#0d2b36;
  color:white;
}
.panel-nav {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--panel-border);
  padding-bottom:0;
}
.panel-nav a {
  font-size:14px;
  font-weight:700;
  padding:10px 14px;
  border-radius:0;
  background:transparent;
  color:#5f7185;
}
.panel-nav a:hover {
  background:#dceff2;
}
.panel-filters {
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:end;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--panel-border);
  border-radius:12px;
}
.panel-filters .field {
  flex:1 1 145px;
  max-width:210px;
}
.panel-filters label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:4px;
}
.panel-filters input,.panel-filters select {
  width:100%;
  height:38px;
  padding:6px 9px;
  border:1px solid #d8e1ea;
  border-radius:8px;
  background:white;
  font-size:14px;
}
.panel-presets {
  display:flex;
  gap:3px;
  flex-wrap:wrap;
}
.panel-presets a {
  font-size:12px;
  padding:8px;
  border-radius:6px;
}
.panel-presets a[aria-current=page] {
  background:#dceff2;
  color:#006a7e;
  font-weight:700;
}
.panel-section {
  display:grid;
  gap:14px;
  scroll-margin-top:20px;
}
.panel-heading {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.panel-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.panel-kpi,.panel-card {
  background:white;
  border:1px solid var(--panel-border);
  border-radius:16px;
  padding:22px;
  display:grid;
  align-content:start;
  gap:10px;
}
.panel-kpi {
  border-top:1px solid var(--panel-border);
}
.panel-kpi .panel-value {
  font-size:34px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.panel-kpi .panel-label {
  font-size:13px;
  font-weight:700;
  color:#4e6870;
}
.panel-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.panel-chart {
  display:grid;
  gap:16px;
}
.panel-chart-row {
  display:grid;
  grid-template-columns:minmax(120px,1.2fr) minmax(70px,1fr) minmax(80px,.8fr);
  gap:14px;
  align-items:center;
  font-size:13px;
}
.panel-chart-row strong {
  font-size:15px;
}
.panel-track {
  height:18px;
  background:#edf3f4;
  border-radius:5px;
  overflow:hidden;
}
.panel-fill {
  height:100%;
  background:#00788f;
  border-radius:5px;
}
.panel-chart-value {
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.panel-chart-value small {
  display:block;
  color:#4e6870;
  font-size:12px;
}
.panel-dashboard svg {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.panel-table-wrap {
  overflow-x:auto;
  max-width:100%;
}
.panel-dashboard table {
  width:100%;
  font-size:13px;
  border-collapse:collapse;
  text-align:left;
}
.panel-dashboard th {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#4e6870;
  background:#f4f7f7;
}
.panel-dashboard th,.panel-dashboard td {
  padding:12px 10px;
  border-bottom:1px solid #e7edef;
  vertical-align:top;
}
.panel-dashboard td {
  overflow-wrap:anywhere;
}
.panel-dashboard .num {
  font-variant-numeric:tabular-nums;
}
.panel-dashboard details>summary {
  cursor:pointer;
  font-weight:700;
  list-style-position:inside;
}
.panel-dashboard details[open]>summary {
  margin-bottom:16px;
}
.panel-comments {
  display:grid;
  gap:10px;
}
.panel-comment {
  padding:14px;
  background:#f4f7f7;
  border-radius:9px;
  overflow-wrap:anywhere;
  font-size:14px;
}
.panel-comment p+p {
  margin-top:6px;
}
.panel-search {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.panel-search input {
  flex:1 1 220px;
}
.panel-select {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:end;
}
.panel-select label {
  flex:1 1 200px;
}
.panel-select select {
  width:100%;
  max-width:100%;
}
.panel-dashboard .btn,.panel-dashboard .btn-quiet {
  min-height:36px;
  font-size:13px;
  padding:7px 12px;
}
.panel-dashboard a:focus-visible,.panel-dashboard summary:focus-visible {
  outline:3px solid #00788f;
  outline-offset:3px;
}
.panel-dashboard .panel-note {
  border-left:3px solid #00788f;
  padding-left:10px;
}
.panel-tools {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.panel-tools form {
  max-width:100%;
}
.panel-dashboard .panel-card>.panel-grid {
  margin-top:6px;
}
@media(min-width:1100px) {
  .panel-conversion {
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  }
}
@media(max-width:700px) {
  .panel-top {
    flex-direction:column;
    gap:12px;
  }
  .panel-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .panel-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .panel-card,.panel-kpi {
    padding:15px;
  }
  .panel-kpi .panel-value {
    font-size:27px;
  }
  .panel-chart-row {
    grid-template-columns:minmax(0,1fr) minmax(65px,1fr);
    gap:5px 10px;
  }
  .panel-chart-row .panel-track {
    grid-column:1/-1;
    grid-row:2;
  }
  .panel-chart-row .panel-chart-value {
    grid-column:2;
    grid-row:1;
  }
  .panel-filters {
    gap:10px;
  }
  .panel-filters .field {
    max-width:none;
    flex-basis:120px;
  }
  .panel-filters .field:last-of-type {
    flex-basis:100%;
  }
  .panel-dashboard h2 {
    font-size:20px;
  }
  .panel-dashboard {
    gap:20px;
  }
  .panel-table-wrap table {
    min-width:650px;
  }
  .panel-nav a {
    font-size:12px;
    padding:6px 8px;
  }
}
/* Native details content must stay inside its card when a table opens. */
.panel-dashboard details.panel-card {
  display: block;
}
.panel-dashboard details.panel-card > * + * {
  margin-top: 12px;
}
@media (max-width: 700px) {
  .panel-chart-row > svg {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 12px;
  }
}
/* Keep the shared administration menus inside the panel's mobile viewport. */
@media (max-width: 700px) {
  .admin-panel-page .admin-navigation {
    position: relative;
  }
  .admin-panel-page .admin-nav-group {
    position: static;
  }
  .admin-panel-page .admin-group-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    max-width: 100%;
  }
}

/* Overview: quiet surfaces, a compact metric strip and two parallel chart panels. */
body.admin-panel-page { background:#f6f8fb; }
.panel-dashboard { font-variant-numeric:lining-nums tabular-nums; }
.panel-top { padding:8px 0 0; align-items:center; }
.panel-top .eyebrow { color:#658097; font-size:10px; letter-spacing:.16em; margin-bottom:5px; }
.panel-top .panel-muted { font-size:12px; margin-top:5px; }
.panel-overline { color:#74869b; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.13em; margin-bottom:6px!important; }
.panel-overview { gap:16px; }
.panel-overview .panel-kpi { position:relative; gap:8px; padding:18px 20px; box-shadow:0 3px 12px #1d355008; }
.panel-kpi-top { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.panel-kpi-top .panel-label { color:#53677f; font-weight:600; }
.panel-overview .panel-value { font-weight:650; font-size:38px; letter-spacing:-.045em; }
.panel-overview .panel-muted { font-size:11px; line-height:1.5; }
.panel-kpi-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; background:#eaf2fb; color:#4279bc; border-radius:10px; }
.panel-kpi-icon svg { width:19px; height:19px; }
.panel-kpi-leads .panel-kpi-icon { background:#f0edfc; color:#7b62bb; }
.panel-kpi-purchases .panel-kpi-icon { background:#e7f4ef; color:#268166; }
.panel-kpi-bought .panel-kpi-icon { background:#fff3e5; color:#a77224; }
.panel-nav a:first-child { color:#126c9c; border-bottom:2px solid #2489b7; }
.panel-nav a:hover { color:#126c9c; background:#eaf2f8; }
.panel-overview-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; }
.panel-overview-grid .panel-card { gap:20px; }
.panel-badge { padding:5px 9px; border-radius:6px; background:#f2f5f9; color:#65758b; font-size:10px; font-weight:650; white-space:nowrap; }
.panel-funnel .panel-chart { gap:22px; margin:5px 0; }
.panel-funnel .panel-chart-row { font-size:12px; }
.panel-funnel .panel-chart-row svg { height:12px; }
.panel-funnel .panel-chart-row:nth-child(2) svg rect:last-child { fill:#428db8; }
.panel-funnel .panel-chart-row:nth-child(3) svg rect:last-child { fill:#6385cc; }
.panel-funnel .panel-chart-row:nth-child(4) svg rect:last-child { fill:#8b78bb; }
.panel-chart-value small { font-size:10px; margin-top:3px; }
.panel-method { border-top:1px solid #edf0f4; padding-top:12px; margin-top:auto; }
.panel-dashboard .panel-method>summary { font-size:11px; font-weight:550; color:#66798e; }
.panel-dashboard .panel-method[open]>summary { margin-bottom:8px; }
.panel-activity-metrics { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel-activity-metrics>div { display:grid; gap:4px; }
.panel-activity-metrics>div+div { border-left:1px solid var(--panel-border); padding-left:20px; }
.panel-activity-metrics .panel-label { font-size:11px; color:#65758b; }
.panel-activity-metrics strong { font-size:30px; font-weight:650; line-height:1.15; }
.panel-activity-metrics .panel-muted { font-size:10px; }
.panel-timeseries { padding-top:4px; }
.panel-chart-caption { display:flex; align-items:center; gap:6px; color:#65758b; font-size:10px; }
.panel-legend-dot { width:6px; height:6px; border-radius:50%; background:#00788f; }
.panel-learning-grid { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:20px; }
.panel-learning-summary { grid-template-columns:140px minmax(0,1fr); align-items:center; gap:10px 20px; }
.panel-learning-summary>h3 { grid-column:1/-1; }
.panel-ring { position:relative; width:140px; }
.panel-ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.panel-ring-label strong { font-size:27px; font-weight:650; }
.panel-ring-label span { font-size:10px; color:#718099; }
.panel-watch { grid-column:1/-1; padding-top:16px; border-top:1px solid var(--panel-border); display:grid; gap:4px; }
.panel-watch .panel-label { font-size:11px; color:#65758b; }
.panel-watch strong { font-size:23px; font-weight:650; }
.panel-watch .panel-muted { font-size:11px; }
.panel-empty-chart { min-height:170px; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:8px; background:linear-gradient(180deg,#fafbfd,#fff); border:1px dashed #e2e8f0; border-radius:10px; padding:22px; }
.panel-empty-chart svg { width:40px; height:40px; color:#9aacc1; }
.panel-empty-chart strong { color:#63778f; font-size:13px; font-weight:600; }
.panel-empty-chart .panel-muted { max-width:260px; font-size:11px; }
.panel-lessons-chart details { margin-top:8px; border-top:1px solid var(--panel-border); padding-top:12px; }
.panel-lessons-chart details>summary { font-size:12px; }
.panel-learning-summary .panel-muted { font-size:11px; }
@media(min-width:1100px) {
  .panel-filters .field { display:flex; align-items:center; gap:8px; flex:0 1 auto; max-width:none; }
  .panel-filters label { margin:0; white-space:nowrap; font-weight:500; color:#66798e; }
  .panel-filters input { width:135px; font-size:12px; height:34px; }
  .panel-filters select { width:100px; font-size:12px; height:34px; }
  .panel-presets { margin-left:auto; }
}
@media(max-width:1000px) {
  .panel-overview-grid,.panel-learning-grid { grid-template-columns:minmax(0,1fr); }
  .panel-learning-summary { grid-template-columns:140px minmax(0,1fr); }
}
@media(max-width:700px) {
  .panel-overview { gap:10px; }
  .panel-overview .panel-kpi { padding:14px; }
  .panel-overview .panel-value { font-size:30px; }
  .panel-kpi-top { align-items:start; }
  .panel-kpi-top .panel-label { font-size:11px; }
  .panel-kpi-icon { width:26px; height:26px; flex-basis:26px; border-radius:8px; }
  .panel-kpi-icon svg { width:15px; height:15px; }
  .panel-overview .panel-muted { font-size:10px; }
  .panel-nav { flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:thin; }
  .panel-nav a { flex:0 0 auto; white-space:nowrap; padding:9px 11px; }
  .panel-top { flex-direction:row; align-items:start; gap:8px; }
  .panel-languages { gap:3px; flex-wrap:nowrap; flex:0 0 auto; }
  .panel-languages a { flex:0 0 auto; }
  .panel-languages>span { display:none; }
  .panel-languages a { font-size:10px; padding:4px 5px; }
  .panel-top h1 { font-size:25px; }
  .panel-timeseries svg text,.panel-card>svg text { font-size:16px; }
  .panel-top .panel-muted { font-size:11px; }
  .panel-funnel .panel-chart { gap:16px; }
  .panel-funnel .panel-chart-row { grid-template-columns:minmax(0,1fr) minmax(60px,.6fr); }
  .panel-overview-grid,.panel-learning-grid { gap:16px; }
  .panel-learning-summary { grid-template-columns:115px minmax(0,1fr); gap:12px; }
  .panel-ring { width:115px; }
  .panel-ring-label strong { font-size:23px; }
}
