/* style_telephone.css - Version Mobile App */

/* 1. AJUSTEMENTS GÉNÉRAUX */
body {
    overflow-y: auto; /* Permet de scroller la page entière sur mobile */
}

/* 2. ECRAN DE LOGIN RESPONSIVE */
#login-screen {
    padding: 20px; /* Evite que ça touche les bords */
}
.login-box {
    width: 100% !important; /* Prend toute la largeur dispo */
    max-width: 100%;
    padding: 20px !important;
    box-shadow: 6px 6px 0px black !important; /* Ombre un peu plus petite */
}
.login-box h1 { font-size: 22px !important; }

/* 3. TRANSFORMATION DU DASHBOARD (Column au lieu de Row) */
#dashboard-screen {
    flex-direction: column; /* On empile verticalement */
    height: 100vh;
}

/* 4. LA SIDEBAR DEVIENT UNE "TOP BAR" ET "BOTTOM BAR" */
.sidebar {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 3px solid black;
    
    /* On fixe le haut (Logo) */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: row; /* Logo et Logout alignés */
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 60px; /* Hauteur de la barre du haut */
}

/* Logo plus petit en haut à gauche */
.brand {
    padding: 5px !important;
    border: none !important;
    background: transparent !important;
    width: auto;
}
.logo-img {
    height: 40px !important; /* Logo petit */
}

/* On cache les infos utilisateur et le bouton logout texte pour gagner de la place */
.user-info { display: none; }
.logout-btn { 
    margin: 0 !important; 
    padding: 5px 10px !important; 
    font-size: 0.8em !important;
    height: auto;
}

/* 5. LE MENU DEVIENT UNE "BOTTOM BAR" (Barre du bas) */
.menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Hauteur barre du bas */
    background-color: #3e8ed0;
    border-top: 3px solid black;
    display: flex;
    flex-direction: row; /* Icônes côte à côte */
    justify-content: space-around; /* Espacement égal */
    align-items: center;
    padding: 0 !important;
    z-index: 1000;
    box-shadow: 0px -4px 10px rgba(0,0,0,0.2);
}

/* Les éléments du menu (li) */
.menu li {
    border: none !important;
    padding: 5px !important;
    flex-direction: column; /* Icône au dessus du texte */
    font-size: 10px !important; /* Texte minuscule */
    text-align: center;
    width: 20%; /* 5 boutons = 20% chacun */
    height: 100%;
    justify-content: center;
}
.menu li:hover, .menu li.active {
    padding-left: 5px !important; /* On annule le décalage desktop */
    background-color: #2980b9;
    border-top: 4px solid #f1c40f; /* Indicateur actif en haut */
}

.menu-icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 0 !important;
    margin-bottom: 4px;
}

/* 6. LE CONTENU (Au milieu) */
.content {
    margin-top: 60px; /* Espace pour la barre du haut */
    margin-bottom: 70px; /* Espace pour la barre du bas */
    padding: 15px !important; /* Marges réduites */
    width: 100%;
}

/* Titres plus petits */
.content h2 {
    font-size: 20px !important;
    width: 100%;
    text-align: center;
    padding: 10px !important;
}

/* 7. ADAPTATION DES CARTES & BOUTONS */
.comic-box {
    font-size: 1.1em !important; /* Texte moins gros */
    padding: 15px !important;
}
.card {
    padding: 15px !important;
}

/* Grille Admin : 1 colonne sur mobile */
.admin-grid {
    grid-template-columns: 1fr !important;
}

/* Automatismes */
#auto-interface {
    margin-bottom: 80px; /* Marge extra pour ne pas être caché par le menu */
}
.math-keyboard {
    gap: 5px !important;
}
.key-btn {
    padding: 8px !important;
    font-size: 0.9em !important;
}