@import url("forms.css");
/* Shared dashboard components. Keep page-specific charts and arrangements in dashboard/*.css. */
* { box-sizing:border-box }
body { margin:0 }
a { color:inherit;text-decoration:none }
button,input,select,textarea { font:inherit }
button,summary { cursor:pointer }
button:disabled { cursor:default;opacity:.4 }
button,a,input,select,textarea,summary { outline-offset:4px }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--color-focus) }
h1,h2,h3,h5,p { margin:0 }
svg.ico { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none }
.skip { position:fixed;top:-100px }
.skip:focus { top:10px;left:10px;z-index:100;background:var(--ui-surface, #fff);padding:10px }
summary::-webkit-details-marker { display:none }
h1 { font-size:calc(32px * var(--ui-font-scale,1));letter-spacing:-1px;line-height:1.2;font-weight:650 }
.source-dashboard-filter { display:grid;grid-template-columns:1.15fr 1fr .8fr auto;align-items:end;gap:16px;padding:18px 20px;background:var(--ui-surface, #fff);border:1px solid var(--line);border-radius:12px;margin-bottom:24px;box-shadow:0 3px 12px #263c5b03 }
.source-dashboard-filter>label,.dashboard-audience-field { display:grid;gap:7px;min-width:0;font-size:calc(12px * var(--ui-font-scale,1));font-weight:550;color:var(--ui-muted, #62738c) }
.dashboard-audience { position:relative }
.dashboard-audience summary:after { content:'⌄';float:right }
.dashboard-audience>div { position:absolute;top:calc(100% + 5px);left:0;right:0;padding:10px 12px;z-index:10;border:1px solid var(--line);background:var(--ui-surface, white);box-shadow:0 8px 25px #263c5b15;border-radius:8px }
.dashboard-audience label { display:flex;align-items:center;gap:8px;padding:7px 0 }
.actions { display:flex;align-items:center;gap:7px }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 13px;border:1px solid var(--ui-border, #dfe6f0);background:var(--ui-surface, #fff);color:var(--ui-muted, #526680);border-radius:6px;font-size:calc(13px * var(--ui-font-scale,1));font-weight:550 }
.btn:hover { background:var(--ui-surface, var(--color-accent-soft)) }
.btn-primary { background:var(--color-primary);color:var(--color-on-primary-button);border-color:var(--color-primary);box-shadow:0 3px 7px color-mix(in srgb, var(--color-primary) 9.41%, transparent) }
.btn-primary:hover { background:var(--color-primary-hover) }
.row { display:flex;gap:22px;flex-wrap:wrap }
.row>.col-12 { flex:1 1 100%;min-width:0 }
.row>.col-xl-6 { flex:1 1 calc(50% - 22px);min-width:0 }
.row>.col-xl-4 { flex:1 1 calc(33.333% - 22px);min-width:0 }
.row>.col-xl-8 { flex:2 1 calc(66.667% - 22px);min-width:0 }
.row>.col-xl-12 { flex:1 1 100%;min-width:0 }
.layout-top-spacing { margin-top:22px }
.overview-stats-row { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ui-surface, #fff);border:1px solid var(--line);border-radius:12px;padding:24px 0;box-shadow:0 4px 16px #263c5b04 }
.overview-stat-card { padding:0 24px;position:relative;border-right:1px solid var(--line) }
.overview-stat-card:last-child { border:0 }
.stat-label { font-size:calc(13px * var(--ui-font-scale,1));color:var(--ui-muted, #65768f);display:flex;align-items:center;gap:7px;min-height:38px;line-height:1.5 }
.stat-value { font-size:calc(38px * var(--ui-font-scale,1));line-height:1.2;letter-spacing:-1px;font-weight:650;margin-top:12px;font-variant-numeric:tabular-nums }
.stat-card-1 .stat-value { color:var(--ui-accent-text, var(--color-primary)) }
.stat-card-2 .stat-value { color:#128677 }
.stat-card-3 .stat-value { color:#805bb7 }
.stat-card-4 .stat-value { color:#267747 }
.tooltip-icon { width:14px;height:14px;flex:none;color:var(--ui-muted, #98a5b7);cursor:help }
.overview-kpi-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px }
.overview-kpi-card { background:var(--ui-surface, #fff);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 4px 16px #263c5b03 }
.overview-kpi-card:nth-child(1) { background:linear-gradient(135deg,#f3fbf9 0,var(--ui-surface, #fff) 65%);border-color:#dbece7 }
.overview-kpi-card:nth-child(2) { background:linear-gradient(135deg,var(--ui-surface, #f7f3fc) 0,var(--ui-surface, #fff) 65%);border-color:#e7e0f1 }
.overview-kpi-label { display:flex;gap:7px;align-items:center;font-size:calc(14px * var(--ui-font-scale,1));font-weight:550;margin-bottom:20px }
.overview-kpi-rates { display:grid;grid-template-columns:1fr 1fr;gap:16px }
.overview-kpi-rates>div+div { padding-left:16px;border-left:1px solid var(--line) }
.overview-kpi-value,.overview-kpi-rate-value { font-size:calc(28px * var(--ui-font-scale,1));letter-spacing:-.7px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums }
.overview-kpi-card:nth-child(1) .overview-kpi-rate-value { color:#138677 }
.overview-kpi-card:nth-child(2) .overview-kpi-rate-value { color:#805bb7 }
.overview-kpi-rate-label { font-size:calc(12px * var(--ui-font-scale,1));color:var(--muted);margin-top:6px }
.overview-kpi-meta { font-size:calc(12px * var(--ui-font-scale,1));line-height:1.9;color:var(--ui-muted, #72839a);border-top:1px solid var(--ui-border, #edf1f6);padding-top:12px;margin-top:18px }
.overview-chart-card,.overview-table-card { height:100%;background:var(--ui-surface, #fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px #263c5b04;padding:22px 24px;overflow:hidden }
.overview-chart-card h5,.overview-table-card h5 { display:flex;gap:8px;align-items:center;font-size:calc(15px * var(--ui-font-scale,1));font-weight:600;letter-spacing:-.2px;margin:0 0 24px }
.overview-table-card { overflow:auto }

.source-conditional { color:var(--ui-muted, #98a5b7);font-size:calc(13px * var(--ui-font-scale,1)) }
.modal-demo { border:1px solid var(--line);border-radius:12px;padding:0;width:min(540px,90vw);max-height:80dvh;overflow:auto;color:var(--ui-text, #20324d);background:var(--ui-surface, #fff);box-shadow:0 20px 70px #172b4d25 }
.modal-demo::backdrop,.mobile-nav::backdrop { background:#16294355 }
.modal-header-demo,.modal-footer-demo { padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line) }
.modal-header-demo h2 { font-size:calc(18px * var(--ui-font-scale,1)) }
.modal-body-demo { padding:22px }
.modal-body-demo p+p { margin-top:14px }
.modal-footer-demo { border-top:1px solid var(--line);border-bottom:0 }
.icon-btn { border:0;background:transparent;color:var(--ui-muted, #61758f);display:grid;place-items:center;padding:6px }
@media(min-width:1600px) {
.stat-value { font-size:calc(42px * var(--ui-font-scale,1)) }
}
@media(max-width:1200px) {
.source-dashboard-filter { grid-template-columns:1fr 1fr }
.source-dashboard-filter .actions { justify-content:flex-end }
.overview-kpi-grid { grid-template-columns:1fr 1fr }
.overview-stats-row { grid-template-columns:1fr 1fr;padding:0 }
.overview-stat-card { padding:20px 24px;border-bottom:1px solid var(--line) }
.overview-stat-card:nth-child(2) { border-right:0 }
.overview-stat-card:nth-child(3) { border-bottom:0 }
}
@media(max-width:900px) {
.row>.col-xl-4,.row>.col-xl-6,.row>.col-xl-8 { flex-basis:100% }
}
@media(max-width:540px) {
h1 { font-size:calc(28px * var(--ui-font-scale,1)) }
.source-dashboard-filter { grid-template-columns:1fr;padding:16px;gap:13px }
.overview-kpi-grid { grid-template-columns:1fr }
.overview-stat-card { padding:18px 16px }
.stat-label { font-size:calc(12px * var(--ui-font-scale,1)) }
.stat-value { font-size:calc(31px * var(--ui-font-scale,1)) }
.overview-kpi-rate-value { font-size:calc(30px * var(--ui-font-scale,1)) }
.overview-chart-card,.overview-table-card { padding:20px 16px }
.row { gap:18px }
.layout-top-spacing { margin-top:18px }
.source-dashboard-filter .actions .btn { flex:1 }
}
.activity-metrics,.assignment-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:24px 0 }
.activity-metric { --accent:var(--color-primary);position:relative;background:var(--ui-surface, #fff);border:1px solid var(--ui-border, #e4eaf3);border-radius:12px;padding:22px;box-shadow:0 4px 16px #263c5b04 }
.activity-metric:before { content:'';position:absolute;left:22px;top:0;width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--accent) }
.activity-metric h2 { font-size:calc(13px * var(--ui-font-scale,1));line-height:1.6;font-weight:500;color:var(--ui-muted, #63758e);min-height:63px }
.activity-metric>strong { display:block;font-size:calc(38px * var(--ui-font-scale,1));font-weight:650;letter-spacing:-1px;color:var(--accent);margin:16px 0 10px;line-height:1.2 }
.activity-metric>strong span { font-size:calc(24px * var(--ui-font-scale,1));margin-left:3px;font-weight:500 }
.activity-metric p { font-size:calc(12px * var(--ui-font-scale,1));color:var(--ui-muted, #7b8ba1);line-height:1.65 }
.activity-metric.teal { --accent:#138677 }
.activity-metric.purple { --accent:#805bb7 }
.activity-metric.amber { --accent:#b17e27 }
.activity-metric.slate { --accent:#6a7e9a }
.data-panel { min-width:0;background:var(--ui-surface, #fff);border:1px solid var(--ui-border, #e4eaf3);border-radius:12px;box-shadow:0 4px 16px #263c5b04;overflow:hidden;padding:24px }
.data-panel header { margin-bottom:24px }
.data-panel h2 { font-size:calc(15px * var(--ui-font-scale,1));font-weight:600;letter-spacing:-.2px;line-height:1.5 }
.data-scroll { overflow:auto }
.conditional-note { font-size:calc(13px * var(--ui-font-scale,1));color:var(--ui-muted, #8a9bb1);margin-left:6px }
.chart-legend { display:flex;gap:20px;flex-wrap:wrap;font-size:calc(12px * var(--ui-font-scale,1));color:var(--ui-muted, #70829c);margin-bottom:24px }
.chart-legend>span { display:flex;gap:7px;align-items:center }
.chart-legend i { width:8px;height:8px;border-radius:2px }
.assignment-metrics .activity-metric h2 { min-height:22px }
.assignment-metrics .activity-metric>strong { margin:24px 0 0 }
@media(max-width:1200px) {
.activity-metrics,.assignment-metrics { grid-template-columns:1fr 1fr }
}
@media(max-width:540px) {
.activity-metrics,.assignment-metrics { gap:12px }
.activity-metric { padding:18px }
.activity-metric h2 { font-size:calc(12px * var(--ui-font-scale,1));min-height:76px }
.activity-metric>strong { font-size:calc(30px * var(--ui-font-scale,1)) }
.activity-metric p { font-size:calc(11px * var(--ui-font-scale,1)) }
.data-panel { padding:20px 16px }
.chart-legend { gap:12px }
}

.modal-demo--wide{width:min(1100px,calc(100vw - 32px));max-width:calc(100vw - 32px)}