/* ============================================================
   FORUM CIVIL KOLDA — Palette de marque
   Bleu principal : #1B4F8C   Bleu profond (texte/side) : #0F2C4C
   Accent vert (dégradé du logo) : #2FAE60
   Fond : #F4F7FB   Alerte budget : #E2A33D
   ============================================================ */

:root {
  --fc-blue: #1B4F8C;
  --fc-blue-dark: #0F2C4C;
  --fc-blue-light: #2C6FBB;
  --fc-green: #2FAE60;
  --fc-bg: #F4F7FB;
  --fc-amber: #E2A33D;
  --fc-red: #D64545;
  --fc-border: #E3E9F1;
}

* { box-sizing: border-box; }

body {
  font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif;
  background: var(--fc-bg);
  color: #1E2A3A;
  font-size: 16px;
}

/* ---------- LOGIN ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--fc-blue-dark) 0%, var(--fc-blue) 55%, var(--fc-green) 120%);
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  padding: 40px 36px;
  box-shadow: 0 20px 50px rgba(15,44,76,0.35);
}
.login-card img { display:block; margin: 0 auto 18px; max-width: 190px; }
.login-card h1 { font-size: 1.2rem; text-align:center; color: var(--fc-blue-dark); margin-bottom: 4px; font-weight: 700;}
.login-card p.sub { text-align:center; color:#6b7a8f; font-size:.95rem; margin-bottom: 24px; }

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

.sidebar {
  width: 250px;
  background: var(--fc-blue-dark);
  color: #cfe0f4;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand img { width: 38px; }
.sidebar .brand span { font-weight: 700; color: #fff; font-size: 1rem; line-height:1.1; }
.sidebar .nav-section-title {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
  color: #6d89ab; padding: 14px 16px 4px;
}
.sidebar a.nav-link, .sidebar button.nav-link {
  color: #cfe0f4; padding: 9px 16px; font-size: .93rem; display:flex; align-items:center; gap:10px;
  border-left: 3px solid transparent;
}
.sidebar a.nav-link:hover, .sidebar button.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar a.nav-link.active {
  background: rgba(47,174,96,0.15); color: #fff; border-left-color: var(--fc-green); font-weight:600;
}
.sidebar .sub-link { padding-left: 34px; font-size: .88rem; }

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

.topbar {
  background: #fff; border-bottom: 1px solid var(--fc-border);
  padding: 12px 24px; display:flex; align-items:center; justify-content: space-between;
  position: sticky; top:0; z-index: 20;
}
.topbar h5 { margin:0; color: var(--fc-blue-dark); font-weight:700; }
.page-wrap { padding: 24px; }

/* ---------- CARDS / KPI ---------- */
.kpi-card {
  background: #fff; border-radius: 12px; padding: 18px 20px;
  border: 1px solid var(--fc-border); height: 100%;
}
.kpi-card .kpi-label { font-size: .84rem; color: #6b7a8f; text-transform: uppercase; letter-spacing:.04em;}
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--fc-blue-dark); }
.kpi-card .kpi-icon {
  width: 42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: rgba(27,79,140,0.1); color: var(--fc-blue); font-size: 1.2rem;
}

.card { border: 1px solid var(--fc-border); border-radius: 12px; }
.card-header { background: #fff; border-bottom: 1px solid var(--fc-border); font-weight: 700; color: var(--fc-blue-dark); }

.table thead th { background: #EEF3FA; color: var(--fc-blue-dark); font-size: .86rem; text-transform: uppercase; letter-spacing:.02em; border-bottom: none;}
.table td, .table th { vertical-align: middle; font-size: .96rem; }

.btn-primary { background: var(--fc-blue); border-color: var(--fc-blue); }
.btn-primary:hover { background: var(--fc-blue-dark); border-color: var(--fc-blue-dark); }
.btn-success { background: var(--fc-green); border-color: var(--fc-green); }

.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; background: var(--fc-blue-light);
  color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  overflow:hidden;
}
.avatar-circle img { width:100%; height:100%; object-fit:cover; }

.notif-dot {
  width:8px; height:8px; border-radius:50%; background: var(--fc-red); position:absolute; top:6px; right:6px;
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s; }
  .sidebar.open { left: 0; }
  .app-shell { display:block; }
}

/* ---------- IMPRESSION : option noir et blanc ---------- */
@media print {
  body.print-bw * {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
  }
  .no-print, .sidebar, .topbar { display: none !important; }
  .main-content { margin: 0 !important; }
}