/* ══════════════════════════════════════════════════════════════════════════════
   EduCycle — Thème partagé (admin + portail)
   Chargé par _Layout.cshtml et _PortailLayout.cshtml
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Import font ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Palette & tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --ec-primary:       #1d6fdb;
  --ec-primary-dark:  #1558b8;
  --ec-primary-xdark: #0f3d8c;
  --ec-primary-light: #60a5fa;
  --ec-primary-soft:  #eff6ff;
  --ec-primary-mid:   #dbeafe;

  /* Sémantique */
  --ec-success:      #16a34a;
  --ec-success-soft: #f0fdf4;
  --ec-warning:      #d97706;
  --ec-warning-soft: #fffbeb;
  --ec-danger:       #dc2626;
  --ec-danger-soft:  #fef2f2;
  --ec-info:         #0891b2;
  --ec-info-soft:    #ecfeff;

  /* Neutrals */
  --ec-text:    #1e293b;
  --ec-muted:   #64748b;
  --ec-subtle:  #94a3b8;
  --ec-border:  #e2e8f0;
  --ec-bg:      #f1f5f9;
  --ec-surface: #ffffff;

  /* Sidebar admin */
  --ec-sidebar-bg:      #1558b8;
  --ec-sidebar-darker:  #0f3d8c;
  --ec-sidebar-active:  rgba(255,255,255,.15);
  --ec-sidebar-hover:   rgba(255,255,255,.09);
  --ec-sidebar-text:    rgba(255,255,255,.72);
  --ec-sidebar-muted:   rgba(255,255,255,.38);
  --ec-sidebar-accent:  #93c5fd;

  /* Typographie */
  --ec-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Radius */
  --ec-radius-xs: 4px;
  --ec-radius-sm: 6px;
  --ec-radius:    10px;
  --ec-radius-lg: 14px;
  --ec-radius-xl: 20px;

  /* Shadows */
  --ec-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --ec-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --ec-shadow:    0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --ec-shadow-md: 0 8px 24px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.04);
}

/* ── Typographie globale ──────────────────────────────────────────────────── */
body {
  font-family: var(--ec-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ec-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ec-font);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ec-text);
  margin-bottom: .35em;
}

/* Échelle serrée — style Linear/Vercel */
h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.028em; }
h3 { font-size: 1rem;     font-weight: 600; letter-spacing: -.02em;  }
h4 { font-size: .9375rem; font-weight: 600; letter-spacing: -.015em; }
h5 { font-size: .875rem;  font-weight: 600; letter-spacing: -.01em;  }
h6 { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; }

/* Chiffres tabulaires — KPIs, tables, badges */
.font-tabular,
.table td,
.table th,
.ec-kpi-val,
.badge { font-variant-numeric: tabular-nums; }

/* Densité UI chrome (sidebar, nav, labels) */
.ec-ui-sm { font-size: .8125rem; line-height: 1.4; }
.ec-ui-xs { font-size: .75rem;   line-height: 1.35; }

/* ── Boutons CRUD standardisés ────────────────────────────────────────────── */
.btn {
  font-family: var(--ec-font);
  font-size: .8125rem;
  font-weight: 500;
  border-radius: var(--ec-radius-sm);
  padding: .4rem 1rem;
  border-width: 1.5px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  line-height: 1.4;
  letter-spacing: -.005em;
}

.btn-sm {
  font-size: .75rem;
  padding: .28rem .72rem;
  border-radius: var(--ec-radius-xs);
}

.btn-lg {
  font-size: .9rem;
  padding: .55rem 1.25rem;
  border-radius: var(--ec-radius-sm);
}

/* Primary — Créer / Enregistrer */
.btn-primary {
  background: var(--ec-primary);
  border-color: var(--ec-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(29,111,219,.25);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ec-primary-dark);
  border-color: var(--ec-primary-dark);
  color: #fff;
  box-shadow: 0 2px 6px rgba(29,111,219,.35);
}

/* Outline primary — Modifier / Détails */
.btn-outline-primary {
  color: var(--ec-primary);
  border-color: var(--ec-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--ec-primary-soft);
  color: var(--ec-primary-dark);
  border-color: var(--ec-primary-dark);
}

/* Danger — Supprimer / Archiver */
.btn-danger {
  background: var(--ec-danger);
  border-color: var(--ec-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.btn-outline-danger {
  color: var(--ec-danger);
  border-color: var(--ec-danger);
  background: transparent;
}
.btn-outline-danger:hover {
  background: var(--ec-danger-soft);
  color: #b91c1c;
  border-color: #b91c1c;
}

/* Secondary — Annuler / Retour */
.btn-secondary {
  background: var(--ec-bg);
  border-color: var(--ec-border);
  color: var(--ec-text);
}
.btn-secondary:hover {
  background: var(--ec-border);
  border-color: #cbd5e1;
  color: var(--ec-text);
}

.btn-outline-secondary {
  color: var(--ec-muted);
  border-color: var(--ec-border);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--ec-bg);
  color: var(--ec-text);
  border-color: #cbd5e1;
}

/* Success */
.btn-success {
  background: var(--ec-success);
  border-color: var(--ec-success);
  color: #fff;
}
.btn-success:hover, .btn-success:focus {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}

/* Warning */
.btn-warning {
  background: var(--ec-warning);
  border-color: var(--ec-warning);
  color: #fff;
}
.btn-warning:hover {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

/* Focus ring unifié */
.btn:focus-visible {
  outline: 2px solid var(--ec-primary-light);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.form-control, .form-select {
  font-family: var(--ec-font);
  font-size: .8125rem;
  border-color: var(--ec-border);
  border-radius: var(--ec-radius-sm);
  color: var(--ec-text);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ec-primary);
  box-shadow: 0 0 0 3px rgba(29,111,219,.12);
}
.form-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ec-text);
  margin-bottom: .35rem;
}
.form-text { font-size: .75rem; color: var(--ec-muted); }

/* ── Cartes ───────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--ec-radius);
  border-color: var(--ec-border);
  box-shadow: var(--ec-shadow-sm);
}
.card-header {
  background: var(--ec-surface);
  border-bottom-color: var(--ec-border);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table {
  font-size: .8125rem;
  color: var(--ec-text);
  font-variant-numeric: tabular-nums;
}
.table th {
  font-weight: 600;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ec-muted);
  border-bottom-color: var(--ec-border);
  padding: .55rem .75rem;
  white-space: nowrap;
}
.table td {
  padding: .55rem .75rem;
  vertical-align: middle;
  font-weight: 400;
}
.table td strong, .table td .fw-semibold { font-weight: 500; }
.table-hover > tbody > tr:hover > td { background: var(--ec-primary-soft); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--ec-font);
  font-size: .68rem;
  font-weight: 600;
  border-radius: var(--ec-radius-xs);
  letter-spacing: .01em;
}

/* ── Alertes ──────────────────────────────────────────────────────────────── */
.alert {
  font-size: .8125rem;
  border-radius: var(--ec-radius-sm);
  border-width: 1px;
}

/* ── Utilitaires layout ───────────────────────────────────────────────────── */
.ec-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.ec-page-header h1,
.ec-page-header h2 { margin: 0; }

.ec-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: .75rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ec-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: .6rem;
  border-top: 1px solid var(--ec-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .7rem;
  color: var(--ec-subtle);
}
.ec-footer-sep { opacity: .5; }
.ec-footer-link {
  color: var(--ec-subtle);
  text-decoration: none;
  transition: color .15s;
}
.ec-footer-link:hover { color: var(--ec-primary); }