/* ============================================================
   MFSI-Intervention — Charte graphique
   Couleurs : #EB7C16 (orange), #222 (dark), #51d8af (teal)
   Polices   : Montserrat (titres), Open Sans (corps)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;500;600&display=swap');

:root {
    --mfsi-orange:   #EB7C16;
    --mfsi-orange-d: #c9680e;
    --mfsi-dark:     #222222;
    --mfsi-dark2:    #333333;
    --mfsi-gray:     #444444;
    --mfsi-light:    #f2f5f8;
    --mfsi-teal:     #51d8af;
    --mfsi-gold:     #e5b112;
    --mfsi-border:   #e9e9e9;
    --mfsi-shadow:   rgba(73,78,92,.12);
}

/* ── Base ── */
body {
    font-family: 'Open Sans', sans-serif;
    background: var(--mfsi-light);
    color: var(--mfsi-gray);
    font-size: .925rem;
}

h1,h2,h3,h4,h5,h6,
.navbar-brand,
.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* ── Navbar ── */
.navbar-mfsi {
    background: var(--mfsi-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.navbar-mfsi .navbar-brand img { height: 38px; }
.navbar-mfsi .nav-link {
    color: rgba(255,255,255,.8) !important;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .6rem 1rem !important;
    transition: color .2s;
}
.navbar-mfsi .nav-link:hover,
.navbar-mfsi .nav-link.active {
    color: var(--mfsi-orange) !important;
}
.navbar-mfsi .nav-link.active {
    border-bottom: 2px solid var(--mfsi-orange);
}

/* ── Sidebar (admin) ── */
.sidebar {
    width: 240px;
    min-height: calc(100vh - 60px);
    background: var(--mfsi-dark);
    padding-top: 1.5rem;
    flex-shrink: 0;
}
.sidebar .nav-link {
    color: rgba(255,255,255,.75);
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    padding: .6rem 1.5rem;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--mfsi-orange);
    background: rgba(235,124,22,.1);
    border-left-color: var(--mfsi-orange);
}
.sidebar .nav-link i { width: 20px; }
.sidebar-section {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    padding: 1.2rem 1.5rem .4rem;
    text-transform: uppercase;
}

/* ── Content wrapper ── */
.main-content {
    flex: 1;
    padding: 2rem;
    min-width: 0;
}

/* ── Boutons primaire MFSI ── */
.btn-mfsi {
    background: var(--mfsi-orange);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border: none;
    transition: background .2s, transform .1s;
}
.btn-mfsi:hover {
    background: var(--mfsi-orange-d);
    color: #fff;
    transform: translateY(-1px);
}
.btn-outline-mfsi {
    border: 2px solid var(--mfsi-orange);
    color: var(--mfsi-orange);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background: transparent;
    transition: all .2s;
}
.btn-outline-mfsi:hover {
    background: var(--mfsi-orange);
    color: #fff;
}

/* ── Cards ── */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 12px var(--mfsi-shadow);
}
.card-header-mfsi {
    background: var(--mfsi-dark);
    color: #fff;
    border-radius: 10px 10px 0 0 !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: .9rem 1.25rem;
}

/* ── Stats cards (dashboard) ── */
.stat-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 3px 15px var(--mfsi-shadow);
    overflow: hidden;
    transition: transform .2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card .icon-box {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.stat-card.orange .icon-box { background: rgba(235,124,22,.15); color: var(--mfsi-orange); }
.stat-card.teal   .icon-box { background: rgba(81,216,175,.15);  color: var(--mfsi-teal); }
.stat-card.dark   .icon-box { background: rgba(34,34,34,.1);     color: var(--mfsi-dark); }
.stat-card.gold   .icon-box { background: rgba(229,177,18,.15);  color: var(--mfsi-gold); }
.stat-card .stat-value { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 700; }

/* ── Tableau ── */
.table-mfsi thead th {
    background: var(--mfsi-dark);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    border: none;
}
.table-mfsi tbody tr:hover { background: rgba(235,124,22,.04); }
.table-mfsi .ref-badge {
    font-family: 'Courier New', monospace;
    font-size: .82rem;
    background: var(--mfsi-light);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--mfsi-border);
}

/* ── Timeline historique ── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: '';
    position: absolute; left: .6rem; top: 0; bottom: 0;
    width: 2px; background: var(--mfsi-border);
}
.timeline-item { position: relative; margin-bottom: 1.2rem; }
.timeline-item::before {
    content: '';
    position: absolute; left: -1.65rem; top: .35rem;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--mfsi-orange);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--mfsi-orange);
}

/* ── Statut pills ── */
.badge { font-weight: 600; font-size: .75rem; }

/* ── Page login ── */
.login-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--mfsi-dark) 0%, var(--mfsi-dark2) 60%, #1a1a2e 100%);
    display: flex; align-items: center; justify-content: center;
}
.login-card {
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    overflow: hidden;
}
.login-card .login-header {
    background: var(--mfsi-orange);
    padding: 2.5rem 2rem;
    text-align: center;
    color: #fff;
}
.login-card .login-header img { height: 70px; margin-bottom: .75rem; object-fit: contain; }
.login-card .login-body { padding: 2rem; }

/* ── Form controls ── */
.form-control:focus, .form-select:focus {
    border-color: var(--mfsi-orange);
    box-shadow: 0 0 0 .2rem rgba(235,124,22,.2);
}
.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--mfsi-gray);
}

/* ── Breadcrumb ── */
.breadcrumb-mfsi {
    background: none;
    padding: 0;
    margin-bottom: 1.5rem;
    font-size: .82rem;
}
.breadcrumb-mfsi .breadcrumb-item a { color: var(--mfsi-orange); text-decoration: none; }
.breadcrumb-mfsi .breadcrumb-item.active { color: var(--mfsi-gray); }

/* ── Badges statuts Bootstrap override ── */
.bg-primary   { background-color: var(--mfsi-orange)  !important; }
.btn-primary  { background-color: var(--mfsi-orange); border-color: var(--mfsi-orange); }
.btn-primary:hover { background-color: var(--mfsi-orange-d); border-color: var(--mfsi-orange-d); }
.text-primary { color: var(--mfsi-orange) !important; }
.border-primary { border-color: var(--mfsi-orange) !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-content { padding: 1rem; }
}