/* =====================================================
   FOODTRACEPRO — DESIGN SYSTEM COMMUN
===================================================== */

* {
    box-sizing: border-box;
}

:root {

    /* IDENTITÉ FOODTRACEPRO */

    --ftp-orange: #ef9900;
    --ftp-black: #050505;
    --ftp-white: #ffffff;

    --ftp-text: #111827;
    --ftp-grey: #707784;

    --ftp-border: #e5e7eb;

    --ftp-background: #f8f9fb;
    --ftp-card: #ffffff;

    --ftp-success: #168454;
    --ftp-success-bg: #edf8f3;

    --ftp-danger: #b42318;
    --ftp-danger-bg: #fff3f3;

    --ftp-topbar-height: 54px;

    --ftp-radius-small: 10px;
    --ftp-radius: 14px;
    --ftp-radius-large: 18px;

    --ftp-transition: .15s;


    /* =========================================
       ALIAS
       Pour compatibilité avec tes CSS actuels
    ========================================= */

    --orange: var(--ftp-orange);
    --black: var(--ftp-black);
    --white: var(--ftp-white);

    --text: var(--ftp-text);
    --grey: var(--ftp-grey);
    --border: var(--ftp-border);
    --background: var(--ftp-background);

    --success: var(--ftp-success);
    --success-background: var(--ftp-success-bg);
}


/* =====================================================
   BASE HTML
===================================================== */

html,
body {
    margin: 0;

    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;

    font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;

    background: var(--ftp-background);

    color: var(--ftp-text);

    -webkit-font-smoothing: antialiased;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


/* =====================================================
   PAGE PWA
===================================================== */

.ftp-page,
.app-page,
.dashboard-page {
    width: 100%;

    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =====================================================
   TOPBAR COMMUNE
===================================================== */

.topbar,
.ftp-topbar {
    flex: 0 0 auto;

    min-height: var(--ftp-topbar-height);

    padding:
            max(7px, env(safe-area-inset-top))
            max(24px, env(safe-area-inset-right))
            7px
            max(24px, env(safe-area-inset-left));

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--ftp-black);

    border-bottom:
            1px solid rgba(255,255,255,.10);
}


.foodtrace-logo,
.ftp-logo {
    display: block;

    max-width: 220px;
    max-height: 40px;

    width: auto;
    height: auto;

    object-fit: contain;
}


.slogan,
.ftp-slogan {
    color: rgba(255,255,255,.65);

    font-size: 12px;
}


/* =====================================================
   LAYOUT PRINCIPAL
===================================================== */

.application-layout,
.dashboard-layout {
    flex: 1 1 auto;

    width: 100%;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(190px, 20%)
        1fr;

    overflow: hidden;
}


/* =====================================================
   SIDEBAR COMMUNE
===================================================== */

.school-sidebar,
.sidebar,
.ftp-sidebar {
    min-height: 0;

    box-sizing: border-box;

    padding:
            18px
            20px
            max(14px, env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--ftp-black);
    color: white;
}

/* La partie haute peut défiler seule si l'écran est très bas,
   tandis que le bloc inférieur reste toujours visible. */
.school-sidebar > :first-child,
.sidebar > :first-child,
.ftp-sidebar > :first-child {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.school-sidebar > :first-child::-webkit-scrollbar,
.sidebar > :first-child::-webkit-scrollbar,
.ftp-sidebar > :first-child::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   ACTIONS PROFIL / MILIEU DE SIDEBAR
===================================================== */

.sidebar-profile-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.sidebar-profile-actions .settings-button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.administration-button.is-coming-soon {
    cursor: default;
}


/* =====================================================
   BAS DE SIDEBAR
===================================================== */

.sidebar-bottom {
    flex: 0 0 auto;

    width: 100%;

    margin-top: 0;

    background: var(--ftp-black);
}


/* =====================================================
   DATE / HEURE COMMUNES
===================================================== */

.date-block {
    text-align: center;
}


.current-date,
.ftp-date {
    color: rgba(255,255,255,.58);

    font-size: 16px;
    line-height: 1.4;
}


.current-time,
.ftp-time {
    margin-top: 6px;

    color: white;

    font-size: 25px;
    font-weight: 500;

    letter-spacing: .2px;
}


/* =====================================================
   DÉCONNEXION ÉTABLISSEMENT
===================================================== */

.logout-button {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin-top: 16px;

    padding: 10px 12px;

    border: 0;
    border-radius: var(--ftp-radius-small);

    background: var(--ftp-orange);

    color: #111827;

    text-align: center;

    font-size: 14px;
    font-weight: 650;

    transition: var(--ftp-transition);
}


.logout-button:hover {
    filter: brightness(.96);
}


/* =====================================================
   BOUTON SIDEBAR SECONDAIRE
===================================================== */

.ftp-sidebar-button {
    display: block;

    padding: 10px 12px;

    border:
            1px solid rgba(255,255,255,.14);

    border-radius:
            var(--ftp-radius-small);

    color: #111827;
    background-color: white;

    text-align: center;

    font-size: 16px;

    transition: var(--ftp-transition);
}


.ftp-sidebar-button:hover {
    color: white;

    border-color:
            var(--ftp-orange);
}


/* =====================================================
   SÉPARATEUR SIDEBAR
===================================================== */

.sidebar-bottom-separator {
    height: 1px;

    margin: 18px 0;

    background:
            rgba(255,255,255,.12);
}


/* =====================================================
   CONTENU PRINCIPAL
===================================================== */

.main-content,
.ftp-main {
    min-width: 0;
    min-height: 0;

    background:
            linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #fafafa 100%
            );
}


/* =====================================================
   PETIT TITRE ORANGE
===================================================== */

.eyebrow,
.ftp-eyebrow {
    color: var(--ftp-orange);

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 1px;
}


/* =====================================================
   CARDS
===================================================== */

.ftp-card {
    border:
            1px solid var(--ftp-border);

    border-radius:
            var(--ftp-radius);

    background:
            var(--ftp-card);
}


/* =====================================================
   TRAIT ORANGE
===================================================== */

.orange-line,
.ftp-orange-line {
    width: 35px;
    height: 2px;

    margin: 13px auto;

    background:
            var(--ftp-orange);
}



/* =====================================================
   SIDEBAR UTILISATEUR — VERSION SIMPLE
===================================================== */

/* La partie profil reste en haut. */
.sidebar > :first-child {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

/* Bouton Formation machines dangereuses :
   même logique visuelle que Changer d'utilisateur. */
.machines-training-button {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
}

/* Le bloc du bas reprend le comportement simple d'origine. */
.sidebar .sidebar-bottom {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
}

/* Sidebar établissement : date / heure / déconnexion restent en bas. */
.school-sidebar .sidebar-bottom {
    flex: 0 0 auto;
    margin-top: auto;
}