/* ============================================================
   FormaFlow — charte graphique Eurekia
   Indigo profond + bleu vif issus du logo, layout SaaS moderne
   ============================================================ */

:root {
    --eur-indigo: #372f6e;
    --eur-indigo-dark: #2a2354;
    --eur-indigo-soft: #ecebf6;
    --eur-blue: #35a7f0;
    --eur-blue-soft: #e7f4fd;
    --eur-bg: #f5f6fa;
    --eur-surface: #ffffff;
    --eur-border: #e6e8f0;
    --eur-text: #1f2333;
    --eur-muted: #6b7089;
    --eur-success: #1e9e6a;
    --eur-success-soft: #e4f5ee;
    --eur-warning: #b7791f;
    --eur-warning-soft: #fdf3e2;
    --eur-danger: #d64550;
    --eur-danger-soft: #fdecee;
    --eur-radius: 14px;
    --eur-shadow: 0 1px 2px rgba(31, 35, 51, .04), 0 8px 24px -12px rgba(55, 47, 110, .12);
    --eur-shadow-lg: 0 4px 12px rgba(31, 35, 51, .06), 0 24px 48px -16px rgba(55, 47, 110, .22);
}

html, body {
    height: 100%;
}

body {
    background: var(--eur-bg);
    color: var(--eur-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: .925rem;
    letter-spacing: -.01em;
}

/* ---------- Layout : sidebar + contenu ---------- */

.ff-shell {
    display: flex;
    min-height: 100vh;
}

.ff-sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--eur-surface);
    border-right: 1px solid var(--eur-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.25rem 1rem;
}

.ff-sidebar-brand {
    display: block;
    padding: .25rem .5rem 1.25rem;
}

.ff-sidebar-brand img {
    width: 150px;
    max-width: 100%;
    height: auto;
    display: block;
}

.ff-sidebar-brand .ff-appname {
    display: block;
    margin-top: .45rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--eur-muted);
}

.ff-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ff-nav-section {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--eur-muted);
    padding: 1.1rem .65rem .35rem;
}

.ff-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 9px;
    color: var(--eur-text);
    text-decoration: none;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.ff-nav a:hover {
    background: var(--eur-indigo-soft);
    color: var(--eur-indigo);
}

.ff-nav a.active {
    background: var(--eur-indigo);
    color: #fff;
}

.ff-nav a.active .ff-ico {
    color: var(--eur-blue);
}

.ff-ico {
    width: 1.15rem;
    text-align: center;
    color: var(--eur-muted);
    flex-shrink: 0;
}

.ff-nav a:hover .ff-ico {
    color: var(--eur-indigo);
}

.ff-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--eur-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ff-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.ff-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--eur-indigo), var(--eur-blue));
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.ff-user-name {
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-main {
    flex-grow: 1;
    min-width: 0;
    padding: 2rem 2.25rem 3rem;
}

.ff-content {
    max-width: 1080px;
}

/* ---------- Titres ---------- */

h1, .h3 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--eur-text);
}

h2.h5, h3.h6 {
    font-weight: 650;
    color: var(--eur-indigo);
    margin-top: 2.25rem !important;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--eur-border);
}

/* ---------- Cartes ---------- */

.card {
    border: 1px solid var(--eur-border);
    border-radius: var(--eur-radius);
    box-shadow: var(--eur-shadow);
}

.card .display-6 {
    font-weight: 700;
    letter-spacing: -.03em;
}

.card.border-danger { border-top: 3px solid var(--eur-danger); }
.card.border-danger .display-6 { color: var(--eur-danger); }
.card.border-warning { border-top: 3px solid var(--eur-warning); }
.card.border-warning .display-6 { color: var(--eur-warning); }
.card.border-success { border-top: 3px solid var(--eur-success); }
.card.border-success .display-6 { color: var(--eur-success); }

/* ---------- Tables ---------- */

.table {
    background: var(--eur-surface);
    border-radius: var(--eur-radius);
    overflow: hidden;
    box-shadow: var(--eur-shadow);
    border: 1px solid var(--eur-border);
    --bs-table-striped-bg: #fafbfe;
}

.table thead th {
    background: #fafbfe;
    color: var(--eur-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-bottom: 1px solid var(--eur-border);
    padding: .7rem .9rem;
}

.table tbody td {
    padding: .68rem .9rem;
    vertical-align: middle;
    border-color: var(--eur-border);
}

.table a {
    color: var(--eur-indigo);
    font-weight: 600;
    text-decoration: none;
}

.table a:hover {
    color: var(--eur-blue);
}

.table-danger,
.table tbody tr.table-danger td {
    background: var(--eur-danger-soft);
}

/* ---------- Boutons ---------- */

.btn {
    border-radius: 9px;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: .45rem .95rem;
}

.btn-primary {
    background: var(--eur-indigo);
    border-color: var(--eur-indigo);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--eur-indigo-dark);
    border-color: var(--eur-indigo-dark);
}

.btn-success {
    background: var(--eur-blue);
    border-color: var(--eur-blue);
}

.btn-success:hover, .btn-success:focus {
    background: #1d95e4;
    border-color: #1d95e4;
}

.btn-outline-primary {
    color: var(--eur-indigo);
    border-color: var(--eur-indigo);
}

.btn-outline-primary:hover {
    background: var(--eur-indigo);
    border-color: var(--eur-indigo);
}

.btn-outline-secondary {
    color: var(--eur-text);
    border-color: var(--eur-border);
    background: var(--eur-surface);
}

.btn-outline-secondary:hover {
    background: var(--eur-indigo-soft);
    border-color: var(--eur-indigo);
    color: var(--eur-indigo);
}

.btn-outline-danger {
    color: var(--eur-danger);
    border-color: #f2c6ca;
}

.btn-outline-danger:hover {
    background: var(--eur-danger);
    border-color: var(--eur-danger);
}

.btn-link {
    color: var(--eur-indigo);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Badges ---------- */

.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .42em .8em;
    letter-spacing: 0;
}

.badge.bg-secondary {
    background: var(--eur-indigo-soft) !important;
    color: var(--eur-indigo);
}

.badge.bg-success {
    background: var(--eur-success-soft) !important;
    color: var(--eur-success);
}

.badge.bg-warning {
    background: var(--eur-warning-soft) !important;
    color: var(--eur-warning) !important;
}

.badge.bg-light {
    background: var(--eur-bg) !important;
    color: var(--eur-muted) !important;
    border: 1px solid var(--eur-border);
}

/* ---------- Formulaires ---------- */

.form-control, .form-select {
    border-radius: 9px;
    border-color: var(--eur-border);
    padding: .5rem .8rem;
    background: var(--eur-surface);
}

.form-control:focus, .form-select:focus {
    border-color: var(--eur-blue);
    box-shadow: 0 0 0 .2rem rgba(53, 167, 240, .15);
}

.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: var(--eur-text);
    margin-bottom: .3rem;
}

.form-text {
    color: var(--eur-muted);
}

/* ---------- Alertes / messages ---------- */

.alert {
    border: none;
    border-radius: 11px;
    font-weight: 500;
    box-shadow: var(--eur-shadow);
}

.alert-success { background: var(--eur-success-soft); color: var(--eur-success); }
.alert-danger { background: var(--eur-danger-soft); color: var(--eur-danger); }
.alert-info { background: var(--eur-blue-soft); color: #1d6fa8; }
.alert-warning { background: var(--eur-warning-soft); color: var(--eur-warning); }

/* ---------- Listes ---------- */

.list-group {
    border-radius: var(--eur-radius);
    box-shadow: var(--eur-shadow);
}

.list-group-item {
    border-color: var(--eur-border);
    padding: .7rem 1rem;
}

.list-group-item a {
    color: var(--eur-indigo);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.list-group-item a:hover {
    color: var(--eur-blue);
}

/* ---------- Pagination ---------- */

.page-link {
    color: var(--eur-indigo);
    border-color: var(--eur-border);
}

.page-item.disabled .page-link {
    color: var(--eur-muted);
}

/* ---------- dl description lists (fiches) ---------- */

dl.row {
    background: var(--eur-surface);
    border: 1px solid var(--eur-border);
    border-radius: var(--eur-radius);
    box-shadow: var(--eur-shadow);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0;
}

dl.row dt {
    color: var(--eur-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding-top: .35rem;
}

dl.row dd {
    padding-top: .2rem;
    margin-bottom: .45rem;
}

dl.row dd a {
    color: var(--eur-indigo);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Page de connexion ---------- */

.ff-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(53, 167, 240, .18), transparent 60%),
        radial-gradient(800px 520px at -10% 110%, rgba(55, 47, 110, .16), transparent 60%),
        var(--eur-bg);
    padding: 1.5rem;
}

.ff-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--eur-surface);
    border: 1px solid var(--eur-border);
    border-radius: 18px;
    box-shadow: var(--eur-shadow-lg);
    padding: 2.5rem 2.25rem 2.25rem;
}

.ff-login-card img {
    width: 170px;
    display: block;
    margin: 0 auto 0.6rem;
}

.ff-login-sub {
    text-align: center;
    color: var(--eur-muted);
    font-size: .85rem;
    margin-bottom: 1.75rem;
}

.ff-login-card .btn {
    width: 100%;
    padding: .6rem;
}

/* ---------- Divers ---------- */

.text-muted { color: var(--eur-muted) !important; }

::selection {
    background: rgba(53, 167, 240, .25);
}

@media (max-width: 900px) {
    .ff-shell { flex-direction: column; }
    .ff-sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--eur-border);
    }
    .ff-main { padding: 1.25rem 1rem 2rem; }
}