/* ============================================================
   UPC PRO — couche visuelle finale (chargée après style.css et premium.css)
   Objectifs : lisibilité, boîtes toujours visibles (clair + sombre),
   reflets adoucis, cartes compactes, réactions au survol/clic.
   Aucune logique métier n'est modifiée ici.
   ============================================================ */

/* ---------- Jetons de couleur (définit ceux qui manquaient : --soft, --panel-alt, --primary) ---------- */
:root{
  --primary:#2563eb; --soft:#edf2fa; --panel-alt:#f3f6fb;
  --pr-blue:linear-gradient(135deg,#2a56c4,#3a72d8);
  --pr-green:linear-gradient(135deg,#1c7355,#2a8f6d);
  --pr-orange:linear-gradient(135deg,#b97821,#cf9440);
  --pr-purple:linear-gradient(135deg,#5546b8,#6d5fcc);
  --pr-side:linear-gradient(180deg,#0b2245 0%,#0c2a58 60%,#10336a 100%);
  --pro-ease:cubic-bezier(.2,.7,.2,1);
}
html:not([data-theme="dark"]){
  --paper:#e6ecf5; --card:#ffffff; --line:#c5d0e2; --soft:#edf2fa; --panel-alt:#f3f6fb;
  --shadow:0 1px 2px rgba(15,35,70,.08),0 8px 22px -12px rgba(15,35,70,.22);
}
html[data-theme="dark"]{ --soft:#1d2944; --panel-alt:#131c30; --primary:#4d86ea; --line:#32405f; }

body,html[data-theme="dark"] body,html[data-model] body{background:var(--paper)!important}

/* ---------- Boîtes : toujours visibles ---------- */
.panel,.table-card,.si-section,.si-list,.si-detail,.pr-prog,.agenda-day-block,.card:not(.metric){
  background:var(--card); border:1px solid var(--line);
}
.panel,.table-card,.si-section{ box-shadow:var(--shadow); border-radius:14px }
html[data-theme="dark"] .panel,html[data-theme="dark"] .table-card,html[data-theme="dark"] .si-section{ box-shadow:0 1px 0 rgba(255,255,255,.03),0 10px 26px -14px rgba(0,0,0,.6) }
.table th{ background:var(--soft)!important; color:var(--title,var(--ink)); font-weight:700; letter-spacing:.2px }
.table td,.table th{ border-bottom:1px solid var(--line) }
.table tbody tr:nth-child(even){ background:color-mix(in srgb,var(--soft) 55%,transparent) }
.table tbody tr:hover{ background:color-mix(in srgb,var(--primary) 9%,transparent)!important }
input,select,textarea{ border:1px solid var(--line) }
html:not([data-theme="dark"]) input,html:not([data-theme="dark"]) select,html:not([data-theme="dark"]) textarea{ background:#fff }
input:focus,select:focus,textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); outline:0 }

/* ---------- Barre latérale : fixe, lueur discrète ---------- */
aside::before{ display:none!important }
aside{ background:var(--pr-side)!important; box-shadow:4px 0 24px rgba(8,22,50,.18)!important }
html[data-theme="dark"] aside{ background:linear-gradient(180deg,#06122a,#0a1a38)!important }
html[data-model="futur"] aside{ background:var(--pr-side)!important }
nav button:hover{ padding-left:12px!important; transform:translateX(3px) }
nav button.active{ background:linear-gradient(135deg,#2f6fe0,#3f5fd8)!important; box-shadow:0 6px 16px rgba(40,90,210,.32)!important }
@media(max-width:900px){ aside{ position:relative!important; height:auto!important; overflow:visible!important } }

/* ---------- Entête : deux lignes propres ---------- */
@media screen{
  header{ display:flex!important; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 22px!important }
  header .header-title-block{ flex:1 1 320px; min-width:0 }
  header .header-title-block p{ margin:2px 0 0; font-size:11.5px }
  header .global-search{ flex:1 1 280px; max-width:460px }
  header .top-actions{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px }
  header .switch-app-btn{ display:none!important }
}
header h1#pageTitle{ background:none!important; -webkit-text-fill-color:currentColor; color:var(--title,var(--ink)) }
#prModel{ font-size:12px; padding:6px 10px }

/* ---------- Reflets adoucis (partie « Premium ») ---------- */
.upc-hero::before,.upc-hero::after,.cards .card::after,.cards .card.metric::after{ display:none!important }
.upc-hero,html[data-model] .upc-hero{
  background:linear-gradient(120deg,#0c2a5a,#16428f)!important;
  box-shadow:0 12px 30px -16px rgba(12,42,90,.55)!important; padding:26px 30px!important; border-radius:16px!important;
}
html[data-model="saas"] .upc-hero{ background:linear-gradient(120deg,#131f3e,#22408f)!important }
html[data-model="inst"] .upc-hero{ background:linear-gradient(120deg,#0b2245,#173e78)!important }
.upc-hero h2{ font-size:clamp(20px,2.6vw,28px)!important }
.upc-hero img{ width:60px!important; height:60px!important }
.upc-clock b{ font-size:28px!important }
.pr-next,html[data-model] .pr-next{ background:linear-gradient(135deg,#123566,#1d4d96)!important; box-shadow:0 8px 22px -14px rgba(20,60,140,.55)!important }
.pr-next::after{ opacity:.06!important }
.pr-fill{ background:linear-gradient(90deg,#2a62d8,#4f8de6)!important }
html[data-model="futur"] .cards .card,html[data-model="futur"] .cards .card.metric{ box-shadow:0 8px 20px -12px rgba(20,40,100,.45)!important }
html[data-model="futur"] .panel,html[data-model="futur"] .pr-prog{ backdrop-filter:none }
html[data-theme="dark"] .upc-hero{ background:linear-gradient(120deg,#0a1f45,#123a80)!important }
@keyframes prFloat{ from,to{ transform:none } }

/* ---------- Cartes de statistiques : compactes ---------- */
.cards{ display:grid!important; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important; gap:12px!important }
.cards .card{ padding:12px 14px!important; border-radius:12px!important; min-height:0!important }
.cards .card .lbl{ font-size:11px!important; line-height:1.25; letter-spacing:.2px; font-weight:600; text-transform:none }
.cards .card b{ font-size:24px!important; line-height:1.15; margin-top:4px; display:block }
.cards .card:hover{ transform:translateY(-3px)!important; box-shadow:0 12px 24px -14px rgba(20,50,120,.55)!important }
.cards.cards-compact,.panel .body .cards{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important; gap:10px!important }
.cards.cards-compact .card,.panel .body .cards .card{ padding:9px 12px!important }
.cards.cards-compact .card b,.panel .body .cards .card b{ font-size:20px!important }
.cards.cards-compact .card .lbl,.panel .body .cards .card .lbl{ font-size:10.5px!important }
.pr-pay.cards .card{ padding:10px 14px!important }
.pr-pay.cards .card b{ font-size:20px!important }

/* ---------- Pastilles moyenne / taux ---------- */
.pill{ display:inline-block; min-width:52px; padding:3px 10px; border-radius:999px; font-weight:700; font-size:12px; text-align:center; font-variant-numeric:tabular-nums }
.pill-avg{ background:color-mix(in srgb,var(--primary) 14%,transparent); color:var(--primary) }
.pill-ok{ background:var(--green-bg); color:var(--green) }
.pill-mid{ background:var(--amber-bg); color:var(--amber) }
.pill-bad{ background:var(--red-bg); color:var(--red) }
.pill-na{ background:var(--soft); color:var(--muted) }
.dash-subtitle{ font-size:14px!important; margin:18px 0 8px!important }

/* ---------- Avatars étudiants ---------- */
.up-avatar{ position:relative; display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--soft); color:#fff; font-weight:800; vertical-align:middle; box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line); flex:none }
.up-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.up-avatar b{ font-weight:800; letter-spacing:.3px }
.up-avatar:not(.noimg) b{ visibility:hidden }
.avatar-cell{ width:56px; padding-right:0!important }
.si-avatar,.si-big-avatar{ overflow:hidden }
.si-avatar img,.si-big-avatar img{ width:100%; height:100%; object-fit:cover; display:block }

/* ---------- Réactions au survol / clic (boutons, labels « Importer / Photo », cartes) ---------- */
button,.btn,label.btn,.icon-btn,.si-doc-card,.si-student-row,.entry-card,.tag{
  transition:transform .18s var(--pro-ease),box-shadow .18s var(--pro-ease),background-color .18s,border-color .18s,color .18s,filter .18s!important;
}
label.btn,.btn,.icon-btn{ cursor:pointer; user-select:none }
label.btn,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:600;
  background:var(--card); color:var(--primary); border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line)); border-radius:10px;
}
label.btn.small,.btn.small{ padding:8px 12px; font-size:12.5px }
label.btn.tiny,.btn.tiny{ padding:5px 10px; font-size:11.5px }
label.btn:hover,.btn:hover:not(:disabled),.icon-btn:hover{
  transform:translateY(-2px); background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--primary) 70%,transparent);
}
.btn.primary{ background:linear-gradient(135deg,#2a5fd6,#3b7ae4); color:#fff; border-color:transparent }
.btn.primary:hover:not(:disabled){ filter:brightness(1.08) }
label.btn:active,.btn:active:not(:disabled),.icon-btn:active,button:active:not(:disabled){ transform:translateY(0) scale(.96)!important; box-shadow:none }
button.ghost:hover:not(:disabled),button.small:hover:not(:disabled){ background:color-mix(in srgb,var(--primary) 12%,var(--card)); border-color:var(--primary) }
.si-doc-card:hover{ transform:translateY(-2px); border-color:var(--primary); box-shadow:0 10px 22px -14px color-mix(in srgb,var(--primary) 70%,transparent) }
.si-doc-card.present{ border-color:color-mix(in srgb,var(--green) 40%,var(--line)) }
.si-student-row:hover{ background:var(--soft); transform:translateX(3px) }
.entry-card:hover{ transform:translateY(-4px) }
.fx-ripple{ position:absolute; border-radius:50%; background:currentColor; opacity:.22; transform:scale(0); animation:fxRipple .6s ease-out forwards; pointer-events:none }
@keyframes fxRipple{ to{ transform:scale(1); opacity:0 } }
:focus-visible{ outline:2px solid var(--primary)!important; outline-offset:2px }

/* ---------- Espace étudiant (portail) ---------- */
.portal-body .portal-card{ border-color:#cfd9e8!important; box-shadow:0 6px 20px -12px rgba(20,45,70,.3)!important; transition:transform .2s var(--pro-ease),box-shadow .2s }
.portal-body .portal-card:hover{ transform:translateY(-2px) }
.portal-body .portal-sem,.portal-body .portal-doc{ transition:transform .18s var(--pro-ease),border-color .18s,box-shadow .18s; border-color:#d3dcea!important }
.portal-body .portal-sem:hover,.portal-body .portal-doc:hover{ transform:translateY(-2px); border-color:var(--primary)!important; box-shadow:0 8px 18px -12px rgba(37,99,235,.6) }
.portal-body .portal-hero{ box-shadow:0 14px 34px -18px rgba(16,47,86,.5)!important }

@media(prefers-reduced-motion:reduce){ .fx-ripple{ display:none } *{ transition:none!important; animation:none!important } }

/* ---------- Ajustements (entête compact, carte Paiements pleine largeur) ---------- */
.pr-pay.cards .card:only-child{ grid-column:1/-1 }
.pr-pay.cards .card:only-child b{ font-size:14px!important; font-weight:600 }
@media screen{
  header .top-actions{ gap:6px }
  header .top-actions button,header .top-actions .theme-switch{ padding:7px 10px; font-size:12.5px }
  header .top-actions .server-status,header .top-actions .user-badge{ padding:5px 9px; font-size:11.5px }
  #prModel{ max-width:150px }
}

/* ---------- Tableau Étudiants : cellule d'actions compacte ---------- */
td.actions-cell{ display:table-cell!important; min-width:250px; white-space:normal }
td.actions-cell button{ margin:2px 3px 2px 0; padding:5px 9px; font-size:11.5px }
.table td{ vertical-align:middle }

/* ---------- Corrections finales : bouton Paiements en mode sombre, noms de documents lisibles ---------- */
html[data-theme="dark"] .cross-app-btn{ color:#cfe0ff!important; background:#1d2944!important; border-color:#3a4c75!important }
.si-doc-card{ align-items:center }
.si-doc-name{ min-width:0; flex:1 }
.si-doc-name b{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.25; font-size:12.5px }
.si-doc-name span{ white-space:normal!important }

/* Portail étudiant : la photo remplit l'avatar */
.portal-avatar{ overflow:hidden }
.portal-avatar img{ width:100%; height:100%; object-fit:cover; display:block }

/* ============ Retour des modèles Premium (Futuristic / Institutionnel / SaaS) ============ */
html[data-model="futur"] aside{ background:linear-gradient(180deg,#070b1f,#140f3d 60%,#1a2a72)!important }
html[data-model="inst"] aside{ background:linear-gradient(180deg,#0b1f3f,#12305f)!important }
html[data-model="saas"] aside{ background:#0f172a!important }
html[data-model="futur"] .upc-hero{ background:linear-gradient(120deg,#170f4a,#3a30b4 55%,#2f80e0)!important; box-shadow:0 18px 40px -22px rgba(94,70,230,.55)!important }
html[data-model="inst"] .upc-hero{ background:linear-gradient(120deg,#0b2245,#173e78)!important }
html[data-model="saas"] .upc-hero{ background:linear-gradient(120deg,#111c3a,#2447a8)!important }
html[data-model="futur"] .pr-next{ background:linear-gradient(135deg,#221a6b,#3a3fbf)!important }
html[data-model="inst"] .pr-next{ background:linear-gradient(135deg,#0f2f5c,#1a4a8a)!important }
html[data-model="saas"] .pr-next{ background:linear-gradient(135deg,#131f3e,#22408f)!important }
html[data-model="futur"] body{ background:radial-gradient(900px 500px at 15% -10%,rgba(124,92,255,.14),transparent 60%),radial-gradient(900px 500px at 90% 0,rgba(47,140,255,.12),transparent 60%),var(--paper)!important }
html[data-model="futur"] nav button.active{ background:linear-gradient(135deg,#5b45e0,#3f6fe6)!important; box-shadow:0 6px 16px rgba(88,70,220,.35)!important }
html[data-model="saas"] nav button.active{ background:#2563eb!important }
html[data-model="futur"] .cards .card{ box-shadow:0 12px 28px -16px rgba(106,77,224,.55)!important }
html[data-model="saas"] aside::before,html[data-model="inst"] aside::before{ display:none!important }

/* ============ Cartes du tableau de bord : sur une ligne, sans espace vide, animées ============ */
.cards,.panel .body .cards{ display:flex!important; flex-wrap:wrap; gap:12px!important; grid-template-columns:none!important }
.cards .card{ flex:1 1 172px; min-width:150px; border:0; animation:prIn .55s var(--pr-ease,ease) backwards; animation-delay:calc(var(--i,0)*70ms) }
.cards .card::after{ display:block!important; content:""; position:absolute; right:-26px; top:-26px; width:92px; height:92px; border-radius:50%; background:rgba(255,255,255,.10); animation:prFloat 9s ease-in-out infinite; pointer-events:none }
html[data-model="saas"] .cards .card{ border:1px solid var(--line) }
html[data-model="inst"] .cards .card::after,html[data-model="saas"] .cards .card::after{ display:none!important }
@keyframes prFloat{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-10px,8px) } }
.cards.cards-compact .card,.panel .body .cards .card{ flex:1 1 200px }
.pr-pay.cards .card:only-child{ flex:1 1 100% }

/* ============ Fenêtres (formulaires, agenda) : toujours utilisables ============ */
.modal .box{ display:flex; flex-direction:column; max-height:90vh }
.modal .box form{ display:grid; gap:12px; overflow-y:auto; padding:2px 4px 8px 2px }
.modal .box label{ display:block }
.modal .box input,.modal .box select,.modal .box textarea{ width:100%; box-sizing:border-box; margin-top:6px }
.modal .box textarea{ min-height:80px; resize:vertical; font:inherit }
.modal .box form>div[style*="grid"]{ gap:12px!important }
.modal .modal-actions{ position:sticky; bottom:0; background:var(--card); padding:12px 0 2px; margin-top:4px; border-top:1px solid var(--line); z-index:2 }
.modal .box .x{ z-index:3 }

/* ============ Accès Espace Étudiant (fenêtre + panneau) ============ */
.pa-box{ width:min(640px,94%)!important }
.pa-sec{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:12px 0 }
.pa-sec h3{ margin:0 0 10px; font-size:14.5px }
.pa-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 }
.pa-code{ font:800 34px ui-monospace,Menlo,Consolas,monospace; letter-spacing:10px; text-align:center; padding:14px 8px 14px 18px; border-radius:12px; background:var(--card); border:2px dashed var(--primary); color:var(--primary); user-select:all }
.pa-code.none{ font-size:16px; letter-spacing:0; color:var(--muted); border-color:var(--line) }
.pa-l{ display:block; font-size:12px; font-weight:600; margin-top:8px }
.portal-link-box{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.portal-link-box input{ flex:1 1 220px; min-width:0; margin:0!important }
.si-access{ padding:12px 16px!important; margin-bottom:12px }
.pa-panel{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between }
.pa-panel small{ display:block; color:var(--muted); font-size:11.5px; margin-top:2px }
.pa-panel .portal-link-box{ flex:1 1 380px; justify-content:flex-end }
.pa-actions{ justify-content:flex-end }
.pa-sec .muted,.pa-box .muted{ font-size:12.5px; line-height:1.45 }