/* FoodCellar — thème applicatif (remplace le thème Bootswatch « sketchy ») */

:root {
    --fc-primary: #2e7d52;      /* vert « cellier » */
    --fc-primary-dark: #245f40;
    --fc-accent: #b5894a;       /* doré/vin */
    --fc-bg: #f6f7f4;
    --fc-text: #243029;
}

body {
    background-color: var(--fc-bg);
    color: var(--fc-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Mode sombre (Bootstrap 5.3 data-bs-theme) */
[data-bs-theme="dark"] {
    --fc-bg: #151816;
    --fc-text: #e7ede8;
}
[data-bs-theme="dark"] body { background-color: var(--fc-bg); color: var(--fc-text); }
[data-bs-theme="dark"] .card { background-color: #20241f; }

/* Barre de navigation */
.navbar.bg-primary { background-color: var(--fc-primary) !important; }
.navbar-brand { font-weight: 700; letter-spacing: .3px; }

/* Boutons primaires */
.btn-primary {
    --bs-btn-bg: var(--fc-primary);
    --bs-btn-border-color: var(--fc-primary);
    --bs-btn-hover-bg: var(--fc-primary-dark);
    --bs-btn-hover-border-color: var(--fc-primary-dark);
    --bs-btn-active-bg: var(--fc-primary-dark);
}
.text-primary { color: var(--fc-primary) !important; }
.bg-primary { background-color: var(--fc-primary) !important; }
a { color: var(--fc-primary-dark); }

/* Cartes : ombre douce + survol */
.card {
    border: none;
    border-radius: .8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.card-header { border-top-left-radius: .8rem !important; border-top-right-radius: .8rem !important; }

/* Cartes cliquables (dashboard / choix de section) */
.fc-tile { cursor: pointer; }
.fc-tile:hover { transform: translateY(-3px); }

/* Badges de péremption (helper expiry_badge) */
.badge { font-weight: 600; }

/* Bandeau d'alerte du dashboard */
.fc-alert-strip { border-left: 4px solid var(--bs-warning); }

/* Footer */
footer.fc-footer {
    background-color: #1e2722;
    color: #e9efe9;
}
footer.fc-footer a { color: #cfe3d5; }

/* Tables compactes lisibles */
.table > :not(caption) > * > * { vertical-align: middle; }

/* Hauteur mini pour pousser le footer en bas (complète le flex de main.php) */
main { min-height: 60vh; }

/* ---- Espace Administration ---- */
/* Pastille d'icône de l'en-tête admin */
.fc-admin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--fc-primary);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 2px 8px rgba(46,125,82,.25);
}
/* Pills de navigation admin aux couleurs du thème */
.fc-admin-nav .nav-link {
    color: var(--fc-primary-dark);
    border-radius: .6rem;
}
.fc-admin-nav .nav-link.active {
    background-color: var(--fc-primary);
    color: #fff;
}
.fc-admin-nav .nav-link:not(.active):hover {
    background-color: rgba(46,125,82,.10);
}
/* Menu d'actions (kebab) : les formulaires-items collent au style dropdown-item */
.dropdown-menu form { margin: 0; }
.dropdown-menu .dropdown-item { cursor: pointer; }
/* Évite que le menu déroulant des actions soit rogné par le scroll de la table.
   Sur petit écran on rétablit le défilement horizontal. */
.fc-admin-tablewrap { overflow: visible; }
@media (max-width: 767.98px) {
    .fc-admin-tablewrap { overflow-x: auto; }
}

/* ---- Page d'aide / mode d'emploi (illustrations CSS, sans images) ---- */

/* Bandeau d'introduction */
.fc-help-hero {
    background: linear-gradient(135deg, var(--fc-primary), var(--fc-primary-dark));
    color: #fff;
    border-radius: 1rem;
    box-shadow: 0 6px 22px rgba(46,125,82,.25);
}
.fc-help-hero h1 { font-weight: 700; }
.fc-help-hero .fc-hero-glyph { font-size: 3rem; color: var(--fc-accent); }

/* Pastille d'icône en tête de chaque section */
.fc-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 13px;
    background: rgba(46,125,82,.12);
    color: var(--fc-primary);
    font-size: 1.25rem;
}
[data-bs-theme="dark"] .fc-help-icon { background: rgba(120,200,150,.14); color: #7fd8a6; }

/* Étapes numérotées (compteur CSS) */
.fc-steps { counter-reset: fcstep; list-style: none; padding-left: 0; margin: 0; }
.fc-steps > li {
    counter-increment: fcstep;
    position: relative;
    padding: 0 0 1.1rem 3.2rem;
}
.fc-steps > li:last-child { padding-bottom: 0; }
.fc-steps > li::before {
    content: counter(fcstep);
    position: absolute; left: 0; top: -.1rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--fc-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
/* Trait reliant les étapes */
.fc-steps > li:not(:last-child)::after {
    content: ""; position: absolute; left: 1.1rem; top: 2.1rem; bottom: .2rem;
    width: 2px; background: rgba(46,125,82,.25);
}

/* Mini-maquette d'écran */
.fc-mock { border: 1px solid rgba(0,0,0,.08); border-radius: .7rem; overflow: hidden; background: #fff; }
[data-bs-theme="dark"] .fc-mock { background: #20241f; border-color: rgba(255,255,255,.08); }
.fc-mock-bar { background: var(--fc-primary); color: #fff; padding: .35rem .75rem; font-size: .8rem; font-weight: 600; }
.fc-mock-body { padding: .75rem; }

/* Cycle de vie d'un produit (diagramme horizontal) */
.fc-flow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fc-flow-node {
    padding: .3rem .7rem; border-radius: 2rem; font-size: .85rem; font-weight: 600;
    border: 1px solid rgba(0,0,0,.1); background: #fff; white-space: nowrap;
}
[data-bs-theme="dark"] .fc-flow-node { background: #20241f; border-color: rgba(255,255,255,.1); }
.fc-flow-arrow { color: var(--fc-primary); opacity: .6; }

/* Tableau de rôles : pastilles de couleur */
.fc-role-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; vertical-align:middle; }