/* =========================================================
   Gestion d'École — Identité visuelle
   Palette : encre bleu-nuit + craie + accent cuivre (registre)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --ink:        #053667;   /* bleu-nuit encre */
  --ink-2:      #072b4f;
  --chalk:      #ebebeb;   /* blanc craie */
  --paper:      #ffffff;
  --line:       #e2e0d8;
  --copper:     #b5652d;   /* accent "cachet / registre" */
  --copper-2:   #1e37c0;
  --green-ok:   #2f6b4f;
  --red-ko:     #9b2c2c;
  --muted:      #6b7280;
  --mine_back:  #b7b7b7;
  --shadow:     0 1px 2px rgba(22,35,59,.06), 0 6px 16px rgba(22,35,59,.06);
  --radius:     10px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--chalk);
  color:var(--ink);
  font-family:'Roboto',sans-serif;
  /* font-family:'Roboto',-apple-system,Segoe UI,sans-serif; */
  font-weight:400;
  font-size:15px;
  line-height:1.5;
}

h1,h2,h3,h4{
  font-family:'Roboto',sans-serif;
  font-weight:400;
  color:var(--ink);
  margin:0 0 .5rem;
  letter-spacing:-.01em;
}

h1
{ 
  font-size:1.6rem; 
}

h2
{ 
  font-size:1rem;
}

h3
{ 
  font-size:1.05rem; 
}

a
{ 
  color:var(--copper-2); 
  text-decoration:none; 
}

a:hover
{ 
  text-decoration:underline;
}

/* ---------- Layout ---------- */
.app-shell
{ 
  display:flex; 
  min-height:100vh;
}

.sidebar
{
  width:250px; 
  flex-shrink:0;
  /* background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); */
  background:#19015a;
  color:#010101;
  padding:1.25rem 0;
  position:sticky; 
  top:0; 
  height:100vh; 
  overflow-y:auto;
}

.sidebar .brand
{
  padding:0 1.25rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:.75rem;
}

.sidebar .brand .mark
{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width:34px; 
  height:34px;
  border-radius:8px;
  background:var(--ink);
  color:#fff; 
  font-weight:700; 
  font-size:1rem;
  margin-right:.6rem;
}

.sidebar .brand-name
{ 
  font-weight:700; 
  font-size:1.05rem; 
  color:#fff;
}

.sidebar .brand-sub
{ 
  font-size:.72rem;
  color:#9fb0cc; 
  letter-spacing:.04em; 
  text-transform:uppercase; 
}

.nav-group-label
{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em; 
  font-weight: 600;
  color:#ffffff;
  padding:.9rem 1.25rem .35rem;
}

.sidebar nav a{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem 1.25rem;
  color:#d0d0d0; font-size:.9rem; font-weight:400;
  border-left:3px solid transparent;
}

.sidebar nav a:hover
{ 
  text-decoration:none; 
  color:#ffffff; 
}

.sidebar nav a.active
{
  background:rgb(209, 209, 209);
  border-left-color:var(--ink);
  color:#130349; font-weight:500;
}

.main
{ 
  flex:1; min-width:0; 
}

.topbar
{
  background:var(--paper); 
  border-bottom:1px solid var(--line);
  padding:.9rem 1.75rem; 
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  position:sticky; top:0; z-index:5;
}

.topbar .date-badge
{
  font-family:'Roboto Mono',monospace; 
  font-size:.78rem; 
  color:var(--muted);
  background:var(--chalk);
  border:1px solid var(--line); 
  padding:.3rem .6rem; 
  border-radius:6px;
}

.content
{ 
  padding:1.75rem;
  max-width:1280px; 
}

/* ---------- Cards & panels ---------- */
.panel
{
  background:var(--paper);
  border:1px solid var(--line); 
  border-radius:var(--radius);
  box-shadow:var(--shadow); 
  padding:1.25rem 1.4rem; 
  margin-bottom:1.25rem;
}

.panel-head
{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  margin-bottom:1rem; 
  gap:1rem; 
  flex-wrap:wrap;
}

.stat-grid
{ 
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); 
  gap:1rem; 
  margin-bottom:1.5rem; 
}

.stat-card
{
  /* background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); */
  background:var(--paper);
  border:1px solid var(--line);
  padding:1.1rem 1.25rem;
  position:relative; 
  overflow:hidden;
}

.stat-card::before
{
  content:''; 
  position:absolute; 
  left:0; 
  top:0; 
  bottom:0; 
  width:4px; 
  background:var(--ink);
}

.stat-card .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.35rem; }
.stat-card .value{ font-size:1.2rem; font-weight:300; font-family:'Roboto',monospace; }
.stat-card .sub{ font-size:.78rem; color:var(--muted); margin-top:.2rem; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.4rem; }
.field label{ font-size:.78rem; font-weight:500; color:var(--ink-2); }
.field .hint{ font-size:.72rem; color:var(--muted); }
input,select,textarea{
  font-family:'Roboto',sans-serif; font-size:.9rem;
  padding:.55rem .7rem; border:1px solid var(--line); border-radius:7px;
  background:var(--paper); color:var(--ink); width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid transparent; border-color:var(--copper); box-shadow:0 0 0 3px rgba(181,101,45,.15);
}
textarea{ resize:vertical; min-height:70px; }

.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.1rem; border-radius:7px; border:1px solid transparent;
  font-size:.85rem; font-weight:400; cursor:pointer; font-family:'Roboto',sans-serif;
  transition:filter .12s ease;
}
.btn:hover{ filter:brightness(1.08); text-decoration:none; }
.btn-primary{ background:var(--copper-2); color:#fff;font-family:'Roboto',sans-serif; font-weight:200; }
.btn-secondary{ background:var(--paper); color:var(--ink); border-color:var(--line); }
/* .btn-danger{ background:#fdecec; color:var(--copper-2); border-color:#f3c9c9; } */
.btn-danger{  background:var(--paper); color:var(--ink); border-color:var(--line); }
.btn-sm{ padding:.32rem .65rem; font-size:.78rem; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.8rem; }
thead th{
  /* text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; */
  text-align:left; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
  /* color:var(--muted); border-bottom:2px solid var(--line); padding:.6rem .7rem; white-space:nowrap; */
  color:var(--muted); border-bottom:2px solid var(--line); white-space:nowrap;
}
/* tbody td{ padding:.65rem .7rem; border-bottom:1px solid var(--line); vertical-align:middle; } */
tbody td{ border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover{ background:rgba(181,101,45,.04); }
.actions-cell{ white-space:nowrap; text-align:right; }
.actions-cell a{ margin-left:.4rem; }

.badge{
  display:inline-block; padding:.2rem .55rem;
  font-size:.7rem; font-weight:500;

  /* display:inline-block; padding:.2rem .55rem; border-radius:20px;
  font-size:.7rem; font-weight:500; letter-spacing:.02em; */
}
.badge-green{ background:#e7f3ec; color:var(--green-ok); }
.badge-red{ background:#fbeaea; color:var(--copper-2); }
.badge-copper{ background:#f6e9df; color:var(--copper-2); }
.badge-ander{ color:brown; font-size:.9rem;  }
.badge-grey{ background:#eef0f2; color:var(--muted); }

/* .amount{ font-family:'Roboto',monospace; font-weight:500; }
.amount.debit{ color:var(--ink); }
.amount.credit{ color:var(--ink); } */

/* ---------- Flash messages ---------- */
.flash{ padding:.8rem 1rem; border-radius:8px; margin-bottom:1.25rem; font-size:.88rem; border:1px solid transparent; }
.flash-success{ background:#e7f3ec; color:var(--green-ok); border-color:#c9e5d5; }
.flash-error{ background:#fbeaea; color:var(--red-ko); border-color:#f3c9c9; }

/* ---------- Misc ---------- */
.muted{ color:var(--muted); }
.mono{ font-family:'Roboto Mono',monospace; }
.section-title{
  display:flex; align-items:center; gap:.6rem; margin:1.75rem 0 .9rem;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.section-title::after{ content:''; flex:1; height:1px; background:var(--line); }

.tabs{ display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1.25rem; flex-wrap:wrap; }
.tabs a{
  padding:.55rem 1rem; font-size:.85rem; color:var(--muted); border-bottom:2px solid transparent; font-weight:500;
}
.tabs a.active{ color:var(--copper-2); border-bottom-color:var(--copper); }

.filter-bar{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1.1rem; }
.filter-bar .field{ margin-bottom:0; min-width:170px; }

.empty-state{ text-align:center; padding:2.5rem 1rem; color:var(--muted); }
.empty-state .mark{ font-size:2rem; margin-bottom:.5rem; }

footer.app-footer{ text-align:center; padding:1.5rem; color:var(--muted); font-size:.78rem; }

@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; }
  .content{ padding:1rem; }
}