/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;color:#17202a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

/* ---------- top bar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px;background:#111827;color:white;position:sticky;top:0;z-index:5}
.topbar h1{margin:0;font-size:22px}
.topbar p{margin:5px 0 0;color:#b9c1cc;font-size:14px}
.top-actions{display:flex;align-items:center;gap:14px}
.top-actions button,.primary{border:0;border-radius:12px;padding:11px 18px;font-weight:700;cursor:pointer;font-size:13.5px;transition:transform .1s,box-shadow .15s}
.top-actions button{background:linear-gradient(180deg,#3b82f6,#2563eb);color:white;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.top-actions button:hover{background:linear-gradient(180deg,#2f74f0,#1d4ed8);box-shadow:0 6px 16px rgba(37,99,235,.45)}
.top-actions button:active{transform:translateY(1px)}
.status{font-size:13px;font-weight:700}
.status.ok{color:#86efac}
.status.warn{color:#fcd34d}
.status.off{color:#cbd5e1}

main{max-width:1500px;margin:auto;padding:22px}

/* ---------- QCM card ---------- */
.qcm-card{display:flex;gap:18px;background:white;border:1px solid #f0d98a;border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:0 8px 25px rgba(0,0,0,.06)}
.qcm-icon{font-size:34px}
.qcm-body{flex:1}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800;color:#8a6a00}
.qcm-card h2{margin:5px 0 8px;font-size:22px}
.qcm-help{margin:0 0 15px;color:#59636f}
.question{font-weight:800;font-size:17px;margin:14px 0}
.answers{display:grid;gap:9px;margin-bottom:15px}
.answer{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid #d9dee5;border-radius:10px;cursor:pointer;background:#fafbfc}
.answer:hover{background:#f1f5f9}
.answer input{width:18px;height:18px}
.primary{background:linear-gradient(180deg,#3b82f6,#2563eb);color:white;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.primary:hover{background:linear-gradient(180deg,#2f74f0,#1d4ed8)}
.qcm-trust-note{margin:12px 0 0;font-size:12px;color:#6b7280}

.alert{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;padding:12px 14px;border-radius:10px;margin-bottom:15px}
.empty{background:white;border:1px dashed #d9dee5;border-radius:12px;padding:22px;text-align:center;color:#6b7280}

/* ---------- week nav ---------- */
.week-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;margin:12px 0 15px}
.week-nav a{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  color:#374151;text-decoration:none;font-weight:700;font-size:13px;
  padding:9px 16px;border-radius:12px;background:white;border:1px solid #e3e7eb;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.week-nav a:first-child{justify-self:start}
.week-nav a:last-child{justify-self:end}
.week-nav a:hover{background:linear-gradient(180deg,#3b82f6,#2563eb);color:white;border-color:#2563eb;box-shadow:0 8px 18px rgba(37,99,235,.35);transform:translateY(-2px)}
.week-nav a:active{transform:translateY(0);box-shadow:0 3px 8px rgba(37,99,235,.3)}
.week-title{text-align:center}
.week-title span{display:block;color:#6b7280;font-size:12px;margin-top:3px}
.today-link{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;color:white;text-decoration:none;padding:5px 14px;border-radius:20px;background:linear-gradient(180deg,#3b82f6,#2563eb);box-shadow:0 3px 8px rgba(37,99,235,.35)}
.today-link:hover{background:linear-gradient(180deg,#2f74f0,#1d4ed8)}
.sync-info{text-align:center;color:#6b7280;font-size:12px;margin-bottom:15px}

/* ---------- toolbar: legend + day filters ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px;padding:12px 16px;background:white;border:1px solid #e3e7eb;border-radius:12px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.legend-item{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:#374151;cursor:pointer;user-select:none;padding:4px 8px;border-radius:8px;transition:opacity .15s}
.legend-item:hover{background:#f4f6f8}
.legend-item input{width:15px;height:15px;margin:0;cursor:pointer}
.legend-item small{font-weight:500;color:#8a93a0}
.legend-item i{width:12px;height:12px;border-radius:4px;display:inline-block}
.legend-item.legend-hidden{opacity:.4}
.legend-match{font-weight:600;color:#8a6a00;cursor:default}
.legend-match:hover{background:none}
.legend-match i{background:#fff8e1;border:2px solid #f2b705;border-radius:50%}

.legend-item.student-0 i{background:#2563eb}
.legend-item.student-1 i{background:#ea580c}
.legend-item.student-2 i{background:#16a34a}
.legend-item.student-3 i{background:#9333ea}
.legend-item.student-4 i{background:#db2777}

.day-filters{display:flex;gap:8px}
.day-filter{border:1px solid #d9dee5;background:#fafbfc;color:#374151;font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:9px;cursor:pointer}
.day-filter:hover{background:#f1f5f9}
.day-filter.active{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#2563eb;color:white;box-shadow:0 3px 8px rgba(37,99,235,.3)}

/* ---------- planning grid ---------- */
.planning{display:flex;gap:10px;background:white;border:1px solid #e3e7eb;border-radius:16px;padding:18px;overflow-x:auto}
.time-axis{position:relative;width:52px;flex:0 0 52px;padding-top:40px}
.hour-mark{position:absolute;right:6px;transform:translateY(-50%);font-size:11px;color:#8a93a0;font-weight:600}
.days-grid{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:10px;flex:1;min-width:0}
.day-col{display:flex;flex-direction:column}
.day-col.today .day-head{background:#111827;color:white}
.day-head{padding:9px 12px;background:#eef1f4;border-radius:10px 10px 0 0;text-transform:capitalize;font-size:13px}
.day-head-top{display:flex;justify-content:space-between;align-items:center}
.day-head span{color:#697381;font-size:12px}
.day-col.today .day-head span{color:#cbd5e1}
.day-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.day-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;text-transform:none;white-space:nowrap}
.badge-start{background:#dcfce7;color:#166534}
.badge-end{background:#dbeafe;color:#1e40af}
.day-body{position:relative;background:#fafbfc;border:1px solid #edf0f2;border-top:0;border-radius:0 0 10px 10px;overflow:hidden}
.gridline{position:absolute;left:0;right:0;border-top:1px solid #eef1f4}
.day-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c2c8cf;font-size:20px}

.lane{position:absolute;top:0;bottom:0;padding:0 2px;transition:left .15s,width .15s}
.block{position:absolute;left:2px;right:2px;min-height:22px;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15);color:white}
.block-inner{height:100%;padding:4px 7px;font-size:10.5px;line-height:1.3;overflow:hidden}
.block-time{font-weight:800;font-size:10.5px;opacity:.95}
.block-inner strong{display:block;font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.block-inner small{display:block;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-badge{float:right;font-size:11px}

/* Solid, saturated colors per student - closer to EcoleDirecte's own
   calendar look, and high-contrast enough for white text at a glance. */
.student-0 .block{background:#2563eb}
.student-1 .block{background:#ea580c}
.student-2 .block{background:#16a34a}
.student-3 .block{background:#9333ea}
.student-4 .block{background:#db2777}

.block.matched{box-shadow:0 0 0 3px #f2b705,0 2px 6px rgba(0,0,0,.2)}

/* A cancelled course (EcoleDirecte's own "isAnnule" flag) stays visible
   at its normal time slot but reads as struck-through and muted, with an
   ANNULÉ badge - matching how EcoleDirecte's own calendar marks it,
   rather than silently showing it as a normal class. */
.block.cancelled{background:repeating-linear-gradient(135deg,#9ca3af,#9ca3af 6px,#8b93a1 6px,#8b93a1 12px)!important;opacity:.75}
.block.cancelled .block-inner strong,.block.cancelled .block-inner small,.block.cancelled .block-time{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.85)}
.cancelled-badge{display:block;font-size:9px;font-weight:800;letter-spacing:.03em;background:rgba(0,0,0,.25);padding:1px 5px;border-radius:5px;margin-bottom:2px;width:fit-content}

@media(max-width:900px){
  .topbar{padding:17px;align-items:flex-start}
  .top-actions{flex-direction:column;align-items:flex-end}
  .week-nav{grid-template-columns:1fr 1fr}
  .week-title{grid-column:1/-1;grid-row:1}
  .week-nav a:first-child{grid-row:2}
  .week-nav a:last-child{grid-row:2}
  main{padding:14px}
  .days-grid{grid-template-columns:repeat(5,220px)}
}

/* ---------- top nav menu ---------- */
.top-menu{display:flex;gap:6px;margin-right:auto;margin-left:24px}
.top-menu a{color:#b9c1cc;text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:9px}
.top-menu a:hover{background:rgba(255,255,255,.08);color:white}
.top-menu a.active{background:#2563eb;color:white}

/* ---------- notes page ---------- */
.notes-card{background:white;border:1px solid #e3e7eb;border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:0 8px 25px rgba(0,0,0,.04)}
.notes-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #edf0f2}
.notes-card-head h2{margin:0;font-size:18px;display:flex;align-items:center;gap:10px}
.notes-card-head h2 i{width:14px;height:14px;border-radius:4px;display:inline-block}
.notes-count{font-size:13px;color:#8a93a0;font-weight:600}

.notes-card.student-0 .notes-card-head h2 i{background:#2563eb}
.notes-card.student-1 .notes-card-head h2 i{background:#ea580c}
.notes-card.student-2 .notes-card-head h2 i{background:#16a34a}
.notes-card.student-3 .notes-card-head h2 i{background:#9333ea}
.notes-card.student-4 .notes-card-head h2 i{background:#db2777}

.period-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.period-tab{display:flex;align-items:center;gap:8px;border:1px solid #d9dee5;background:#fafbfc;color:#374151;font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:9px;cursor:pointer}
.period-tab:hover{background:#f1f5f9}
.period-tab.active{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#2563eb;color:white;box-shadow:0 3px 8px rgba(37,99,235,.3)}
.tab-avg{font-size:11px;font-weight:800;background:#eef1f4;color:#374151;padding:2px 7px;border-radius:20px}
.period-tab.active .tab-avg{background:rgba(255,255,255,.18);color:white}

.period-panel.hidden{display:none}

.period-average{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;padding:12px 16px;background:#f7f8fa;border:1px solid #edf0f2;border-radius:10px;font-weight:700;font-size:13px;color:#374151}
.period-average strong{font-size:21px;color:#111827;font-weight:800}
.period-average small{font-size:12px;color:#8a93a0;font-weight:600}

.grades-table{display:flex;flex-direction:column;border:1px solid #edf0f2;border-radius:10px;overflow:hidden}
.grades-row{display:grid;grid-template-columns:90px 1fr 1.4fr 90px 70px 1.2fr;gap:10px;align-items:center;padding:9px 12px;font-size:13px;border-top:1px solid #edf0f2}
.grades-row:first-child{border-top:0}
.grades-head{background:#f7f8fa;font-weight:700;color:#697381;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.grades-row.non-sig{opacity:.55}
.g-date{color:#8a93a0;font-variant-numeric:tabular-nums}
.g-subject{font-weight:700}
.g-devoir small,.g-value small,.g-class small{display:block;color:#8a93a0;font-weight:500}
.g-value{font-weight:800;font-size:15px}
.g-comment{grid-column:1/-1;color:#59636f;font-size:12px;padding-top:2px}

@media(max-width:900px){
  .top-menu{margin:10px 0 0;margin-right:0}
  .grades-row{grid-template-columns:70px 1fr 1fr 60px}
  .g-coef,.g-class{display:none}
}

.dnb-hint{margin:10px 0 0;font-size:12px;color:#8a93a0}

@media(max-width:900px){
  .dnb-row{grid-template-columns:1fr;gap:8px}
  .dnb-domain-points{text-align:left}
  .dnb-domain-levels{flex-wrap:wrap}
}

/* ---------- subject x trimester average table ---------- */
/* Trimester sub-tabs inside "Contrôle continu (matières)", giving
   Abdelmalik's card the same tab-per-trimester shape as any other
   student's period tabs above it - just listing subject averages
   instead of individual devoirs, since that's the data available. */
.subject-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.subject-subtab{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:20px;cursor:pointer}
.subject-subtab:hover{background:#dbeafe}
.subject-subtab.active{background:#2563eb;border-color:#2563eb;color:white;box-shadow:0 4px 10px rgba(37,99,235,.25)}
.subject-subpanel.hidden{display:none}

.subject-list{display:flex;flex-direction:column;border:1px solid #edf0f2;border-radius:10px;overflow:hidden}
.subject-list-row{display:grid;grid-template-columns:1fr 72px 140px;gap:12px;align-items:center;padding:9px 14px;border-top:1px solid #edf0f2;font-size:13px}
.subject-list-row:first-child{border-top:0}
.subject-list-name{font-weight:700;color:#374151}
.subject-list-annual{font-size:11px;color:#8a93a0;font-weight:600;text-align:right}
.subject-cell-input{width:64px;text-align:center;border:1px solid #d9dee5;border-radius:7px;padding:6px 4px;font-size:13px;font-weight:700;color:#111827;background:white}
.subject-cell-input.auto{border-style:dashed;border-color:#f2b705;background:#fffdf5;color:#8a6a00}
.subject-cell-input:focus{outline:2px solid #2563eb;outline-offset:1px}

@media(max-width:900px){
  .subject-list-row{grid-template-columns:1fr 60px;}
  .subject-list-annual{display:none}
}

.subject-option-badge{display:inline-block;background:#f3e8ff;color:#7e22ce;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle}

.subject-result{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:16px}
.subject-result-card{border-radius:14px;padding:16px 18px;border:1px solid}
.subject-result-card.total{background:#f0fdf4;border-color:#bbf7d0}
.subject-result-card.bonus{background:#fffbeb;border-color:#fde68a}
.subject-result-label{font-size:13px;font-weight:800;color:#166534}
.subject-result-card.bonus .subject-result-label{color:#92400e}
.subject-result-value{display:block;font-size:32px;font-weight:800;color:#14532d;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.subject-result-card.bonus .subject-result-value{color:#78350f}
.subject-result-formula{font-size:12px;color:#4b7a5c;font-weight:600}
.subject-result-card.bonus .subject-result-formula{color:#92400e}
.subject-result-bar{height:8px;border-radius:20px;background:#dcfce7;overflow:hidden;margin-top:10px}
.subject-result-bar-fill{height:100%;background:#16a34a;border-radius:20px;transition:width .2s}

@media(max-width:900px){
  .subject-result{grid-template-columns:1fr}
}

/* --- Login page --- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f4f6f8}
.login-wrap{width:100%;max-width:360px;padding:22px}
.login-card{background:white;border:1px solid #e3e7eb;border-radius:16px;padding:32px 28px;box-shadow:0 8px 25px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:12px}
.login-logo{font-size:34px;text-align:center;margin-bottom:2px}
.login-card h1{margin:0;font-size:20px;text-align:center;color:#111827}
.login-hint{margin:0 0 8px;text-align:center;color:#8a93a0;font-size:12.5px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:#374151}
.login-card input[type="text"],.login-card input[type="password"]{border:1px solid #d9dee5;border-radius:10px;padding:10px 12px;font-size:14px;color:#111827}
.login-card input[type="text"]:focus,.login-card input[type="password"]:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.login-submit{margin-top:8px;width:100%;text-align:center}
.login-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12.5px;font-weight:600;padding:9px 12px;border-radius:10px;text-align:center}