/* Ce code est une partie du logiciel GCU WEB, Une solution déveoppée par Maxime BORKOWSKI a titre privé. Ce logiciel en intégralité appartient a Maxime BORKOWSKI. Il est strictement interdit de le modifier ou de le publier. L'utilisation et l'exploitation de cette copie du logiciel original est réservé l'UFA la Briquerie pour un usage interne uniquement. Il été mis a disposition a titre gracieux sans contrepartie financière.*/

/* =========================
   Global
   ========================= */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url("/IHM/public/assets/background.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

/* =========================
   Bandeau supérieur
   ========================= */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #649abe;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    overflow-x: hidden;
}

.top-left {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

.top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.user-name {
    font-size: 14px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-btn, .return-btn {
    flex-shrink: 0;
    white-space: nowrap;
    background-color: #cc0000;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 0px;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.2s ease-in-out;
}

.logout-btn:hover {
    background-color: #a30000;
}

.return-btn {
    background-color: #808080;
}

.return-btn:hover {
    background-color: #000000;
}

/* Boutons GCU dans le bandeau */
.top-bar .gcu-btn {
    margin-left: 20px;
    background-color: #000091;
    color: #fff;
    padding: 6px 12px;
    border-radius: 0px;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.top-bar .gcu-btn:hover {
    background-color: #1212FF;
}

/* =========================
   Login box (page login)
   ========================= */
.login-box {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    width: 350px;
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    box-sizing: border-box;
    margin: 150px auto 40px auto;
}

.login-box  h2{
    text-align: center;
    margin-bottom: 45px;
}

/* =========================
   Formulaires
   ========================= */
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

input[type="password"], input[type="text"], input[type="email"] {
    width: 94%;
    padding: 8px;
    margin: 8px 0 15px 0;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    border-bottom: 2px solid #9c9c9c;
    background: #f6f6f6;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #000091;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    background-color: #1212FF;
}

/* =========================
   Messages
   ========================= */
.error {
    color: red;
    margin-bottom: 15px;
    text-align: center;
}

.success {
    color: green;
    margin-bottom: 15px;
    text-align: center;
}

/* =========================
   Profil utilisateur
   ========================= */
.profile-box {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    width: 950px;
    max-width: 95%;
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    box-sizing: border-box;
    margin: 120px auto 40px auto;
}

.profile-table-wrapper {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: auto;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background: #ffffff;
}

.profile-table th {
    width: 35%;
    padding: 14px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    text-align: left;
}

.profile-table td {
    width: 65%;
    padding: 14px;
    border: 1px solid #ddd;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5;
}

/* Disciplines */
.discipline-list {
    margin: 0;
    padding-left: 20px;
}

.discipline-list li {
    margin-bottom: 6px;
}

/* Boutons action */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}

.action-buttons button {
    width: 240px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    border-radius: 0px;
    border: none;
    cursor: pointer;
    background-color: #000091;
    color: #fff;
}

.action-buttons button:hover {
    background-color: #1212FF;
}

/* =========================
   Modales génériques
   ========================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    width: 320px;
    max-width: 95%;
}

.modal-content label {
    display: block;
    margin-top: 10px;
}

.modal-content input {
    width: 100%;
    padding: 8px;
    border-bottom: 2px solid #9c9c9c;
    background: #f6f6f6;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.modal-actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* =========================
   Footer
   ========================= */
.site-footer {
    background-color: transparent;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #666;
    margin-top: auto;
}

/* =========================
   Page administration.php
   ========================= */

/* Conteneur principal */
.admin-box {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    width: 950px;
    max-width: 95%;
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    box-sizing: border-box;
    margin: 70px auto 40px auto;
}

.admin-box h2 {
    text-align: center;
}

/* Formulaire de recherche */
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 50px;
    margin-top: 50px;
    justify-content: center;
}

.search-form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-form label {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.search-form input[type="text"],
.search-form select {
    padding: 8px;
    border: none;
    font-size: 13px;
    width: 180px;
    height: 34px;
    box-sizing: border-box;
    margin-top: 0;
    border-bottom: 2px solid #9c9c9c;
    background: #f6f6f6;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.search-form button {
    width: auto;
    padding: 8px 20px;
    height: 34px;
    box-sizing: border-box;
    margin-top: 23px;
}

/* Barre d'actions */
.actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.actions-bar button {
    width: auto;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
}

.btn-delete {
    background-color: #cc0000;
}

.btn-delete:hover {
    background-color: #a30000;
}

.btn-create {
    margin-left: auto;
}

/* Tableau de résultats */
.result-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.result-table th {
    padding: 10px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 13px;
}

.result-table td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    font-size: 13px;
}

.result-table tr:hover {
    background: #f9f9f9;
}

.result-table tr.clickable-row {
    cursor: pointer;
}

.result-table tr.clickable-row:hover {
    background: #e8f0fe;
}

/* Statuts utilisateur */
.status-actif {
    color: green;
    font-weight: bold;
    display: inline-flex;
    border-radius: 35px;
    border: 1px solid;
    padding: 3px 9px;
    align-items: center;
    background-color: green;
}

.status-desactive {
    color: red;
    font-weight: bold;
    display: inline-flex;
    border-radius: 35px;
    border: 1px solid;
    padding: 3px 9px;
    align-items: center;
    background-color: red;
}

.result-count {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

/* Alertes */
.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
}

/* Modale d'édition / création */
.edit-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.edit-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    width: 450px;
    max-width: 95%;
}

.edit-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
}

.edit-box .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.edit-box label {
    font-weight: bold;
    font-size: 13px;
}

.edit-box input[type="text"],
.edit-box select {
    padding: 8px;
    border: none;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 2px solid #9c9c9c;
    background: #f6f6f6;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.edit-box .btn-bar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.edit-box .btn-bar button {
    width: auto;
    padding: 8px 20px;
}

.btn-cancel {
    background: transparent;
    border: 1px solid;
    border-color: #000091;
    color: #000091;
}

.btn-cancel:hover {
    background: #F2F2F9;
}

/* Vérification disponibilité du login */
.login-status {
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
    font-weight: 600;
}

.login-status-ok       { color: #155724; }
.login-status-taken    { color: #856404; }
.login-status-error    { color: #888; font-weight: 400; }
.login-status-checking { color: #4a6cf7; font-style: italic; font-weight: 400; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .profile-box {
        width: 95%;
        padding: 20px;
    }

    .action-buttons button {
        width: 45%;
    }

    .admin-box {
        width: 95%;
        padding: 20px;
    }

    .search-form input[type="text"],
    .search-form select {
        width: 140px;
    }

    .edit-box {
        width: 95%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .top-left, .user-name {
        font-size: 12px;
    }

    .logout-btn, .return-btn {
        padding: 4px 8px;
        font-size: 12px;
    }

    input[type="password"], input[type="text"], input[type="email"] {
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .action-buttons button {
        width: 100%;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form input[type="text"],
    .search-form select {
        width: 100%;
    }

    .search-form button {
        width: 100%;
        margin-top: 8px;
    }

    .actions-bar {
        flex-direction: column;
    }

    .actions-bar button {
        width: 100%;
    }

    .btn-create {
        margin-left: 0;
    }
}