/* da3mi — Dashboards (élève / prof / admin) — s'appuie sur main.css */
:root{--sb-w:268px;--tb-h:70px;--role:var(--brand);--role-soft:var(--brand-50)}
body[data-role="eleve"]{--role:#0E7C66;--role-soft:#E7F3F0}
body[data-role="prof"]{--role:#1466A6;--role-soft:#E4EFF8}
body[data-role="admin"]{--role:#7A3FB0;--role-soft:#EEE7F7}

.dash{display:flex;min-height:100dvh;background:var(--bg)}
/* Sidebar */
.sb{position:fixed;inset:0 auto 0 0;width:var(--sb-w);z-index:var(--z-nav);background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:var(--s4);gap:2px;transition:transform .25s var(--ease)}
.sb__brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--fz-20);padding:6px 8px var(--s4)}
.sb__brand .three{color:var(--accent)}
.role-pill{align-self:flex-start;margin:0 8px var(--s3);padding:5px 12px;border-radius:var(--r-pill);background:var(--role-soft);color:var(--role);font-size:var(--fz-12);font-weight:800}
.sb__nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.sb__lbl{font-size:var(--fz-12);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:var(--s4) 10px 6px}
.sb__link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--text);font-weight:600;font-size:var(--fz-15);cursor:pointer;transition:.15s;position:relative}
.sb__link svg{width:20px;height:20px;color:var(--faint)}
.sb__link:hover{background:var(--surface-2)}
.sb__link .count{margin-left:auto;background:var(--role-soft);color:var(--role);font-size:var(--fz-12);font-weight:800;padding:1px 8px;border-radius:var(--r-pill)}
.sb__link.is-active{background:var(--role-soft);color:var(--role)}
.sb__link.is-active svg{color:var(--role)}
.sb__foot{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s2)}
.sb__user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm)}
.sb__user b{font-size:var(--fz-14);display:block;line-height:1.2}.sb__user span{font-size:var(--fz-12);color:var(--muted)}

/* Main */
.dmain{flex:1;margin-left:var(--sb-w);min-width:0;display:flex;flex-direction:column}
.tb{position:sticky;top:0;z-index:calc(var(--z-nav) - 1);height:var(--tb-h);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s4);padding:0 var(--s6)}
.tb__title{font-weight:800;font-size:var(--fz-20)}
.tb__search{display:flex;align-items:center;gap:8px;flex:1;max-width:420px;height:42px;padding:0 16px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill)}
.tb__search svg{width:18px;height:18px;color:var(--faint)}.tb__search input{border:none;outline:none;background:none;width:100%}
.tb__act{display:flex;align-items:center;gap:10px;margin-left:auto}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;position:relative;transition:.15s}
.iconbtn:hover{background:var(--surface)}.iconbtn svg{width:20px;height:20px}
.iconbtn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--bg)}
.tb__toggle{display:none}
.dcontent{padding:var(--s6);max-width:1280px;width:100%;margin-inline:auto}
.phead{margin-bottom:var(--s5)}.phead h1{font-size:var(--fz-30);font-weight:800}.phead p{color:var(--muted)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-xs)}
.kpi__t{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.kpi__ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--role-soft);color:var(--role)}
.kpi__ic svg{width:22px;height:22px}
.kpi__v{font-size:var(--fz-30);font-weight:800;line-height:1}.kpi__l{color:var(--muted);font-size:var(--fz-14);margin-top:4px}
.trend{font-size:var(--fz-12);font-weight:800;padding:2px 8px;border-radius:var(--r-pill)}
.trend.up{background:var(--success-50);color:var(--success)}.trend.down{background:var(--danger-50);color:var(--danger)}

/* Panels / grid */
.g2{display:grid;grid-template-columns:2fr 1fr;gap:var(--s5)}
.g11{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.panel__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:var(--s5);border-bottom:1px solid var(--line)}
.panel__h h2{font-size:var(--fz-18);font-weight:800}
.panel__b{padding:var(--s5)}.panel__b.flush{padding:0}
.lrow{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:none}.lrow__m{flex:1;min-width:0}.lrow__m b{display:block;font-weight:700}.lrow__m span{font-size:var(--fz-14);color:var(--muted)}
.lrow__r{text-align:right;font-size:var(--fz-14);color:var(--muted);white-space:nowrap}

/* Table */
.twrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:var(--fz-14)}
.tbl th{text-align:left;font-weight:800;color:var(--muted);font-size:var(--fz-12);text-transform:uppercase;letter-spacing:.03em;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}.tbl tr:hover td{background:var(--surface-2)}
.u{display:flex;align-items:center;gap:10px}.u b{font-weight:700}.u span{color:var(--muted);font-size:var(--fz-12)}
.tact{display:flex;gap:6px;justify-content:flex-end}
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fz-12);font-weight:800}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status--ok{background:var(--success-50);color:var(--success)}.status--wait{background:var(--warn-50);color:var(--warn)}
.status--off{background:#EEF1F0;color:var(--muted)}.status--bad{background:var(--danger-50);color:var(--danger)}

/* Charts */
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:var(--s4)}
.bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars .bar i{width:100%;max-width:34px;border-radius:8px 8px 0 0;background:var(--role);transition:height .8s var(--ease)}
.bars .bar small{font-size:var(--fz-12);color:var(--muted)}
.donut{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin-inline:auto;position:relative}
.donut::after{content:"";width:96px;height:96px;background:var(--surface);border-radius:50%}
.donut__c{position:absolute;text-align:center}.donut__c b{font-size:var(--fz-24);font-weight:800;display:block;line-height:1}.donut__c span{font-size:var(--fz-12);color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:10px}.legend div{display:flex;align-items:center;gap:8px;font-size:var(--fz-14)}.legend i{width:12px;height:12px;border-radius:4px;flex:none}
.prog{height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden}.prog i{display:block;height:100%;border-radius:99px;background:var(--role)}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.quick a{display:flex;align-items:center;gap:12px;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);font-weight:700;transition:.15s}
.quick a:hover{border-color:var(--role);background:var(--role-soft);color:var(--role)}.quick svg{width:22px;height:22px}

.sbbd{position:fixed;inset:0;background:rgba(20,32,28,.5);z-index:calc(var(--z-nav)-2);opacity:0;visibility:hidden;transition:.2s}
.sbbd.open{opacity:1;visibility:visible}
@media (max-width:1024px){.kpis{grid-template-columns:repeat(2,1fr)}.g2,.g11{grid-template-columns:1fr}}
@media (max-width:860px){.sb{transform:translateX(-100%);box-shadow:var(--sh-lg)}.sb.open{transform:none}.dmain{margin-left:0}.tb__toggle{display:grid}.tb__search{display:none}.dcontent{padding:var(--s4)}}
@media (max-width:560px){.kpis{grid-template-columns:1fr}}

/* chat bubbles */
.cbub{max-width:78%;padding:10px 14px;border-radius:16px;font-size:var(--fz-14);line-height:1.45}
.cbub.them{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.cbub.me{background:var(--role);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}