@import url("ROOT.css");

/* --------------------------------------------------------------- */

/* ----------------- LAYOUT DE LA PAGE (CONTENU) ----------------- */

/* --------------------------------------------------------------- */

/* Comme le body est en overflow:hidden, on rend le container scrollable */

.admin-container,

.main-container {

    flex: 1;

    height: 100vh;

    overflow-y: auto;

    padding: 30px;

    background-color: var(--bg-dark);

}

/* Encadré principal (le "papier" sur lequel est posé le tableau) */

.content-wrapper {

    background: var(--surface);

    border-radius: var(--radius);

    border: 1px solid var(--border);

    padding: 25px;

    max-width: 1400px;

    margin: 0 auto;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}

/* ----------------- TITRES ET BARRE SUPÉRIEURE ----------------- */

.top-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}

.top-bar h1 {

    font-size: 1.5rem;

    color: var(--text-main);

    font-weight: 600;

}

/* ----------------- BOUTONS ----------------- */

.bckBtn, .addBtn, .action-btn {

    font-family: inherit;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    border-radius: var(--radius);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

.bckBtn {

    background: var(--surface-hover);

    color: var(--text-main);

    padding: 8px 16px;

    border: 1px solid var(--border);

}

.bckBtn:hover {

	background: var(--primary-hover);

}

.addBtn {

    background: var(--primary);

    color: white;

    padding: 10px 20px;

    border: none;

}

.addBtn:hover { background: var(--primary-hover); }

/* ----------------- FORMULAIRE D'AJOUT RAPIDE ----------------- */

.addForm {

    background: var(--bg-dark);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 15px;

    margin-bottom: 25px;

}

/* Version alignée sur une ligne (comme ton formulaire d'absence) */

.addForm.row {

    display: flex;

    gap: 10px;

    align-items: center;

}

.addForm input, .addForm select {

    flex: 1; /* Les champs prennent l'espace disponible */

    height: 40px;

    background: var(--surface);

    border: 1px solid var(--border);

    color: var(--text-main);

    padding: 0 12px;

    border-radius: 6px;

    outline: none;

}

.addForm input:focus { border-color: var(--primary); }

.addForm button[type="submit"] {

    height: 40px;

    padding: 0 20px;

    background: var(--success);

    color: white;

    border: none;

    border-radius: 6px;

    font-weight: 600;

    cursor: pointer;

}

/* Message de notification du formulaire */

.msg {

    margin-bottom: 15px;

}

.msg.success { color: var(--success); }

.msg.error { color: var(--danger); }

/* ---------------- BARRE DE RECHERCHE --------------- */

.table-title_searchbar {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-top: 30px;

}

.table-title_searchbar h2 {

	color: var(--text-main);

	font-size: 1.2rem;

}

/* Champ de recherche */

.table-title_searchbar .searchInput {

    background: var(--surface);

    border: 1px solid var(--border);

    color: var(--text-main);

    padding: 8px 15px;

    border-radius: 20px;

    width: 250px;

    outline: none;

}

.table-title_searchbar .searchInput:focus {

	border-color: var(--primary);

}

/* ----------------- TABLEAU MODERNE ----------------- */

table {

    width: 100%;

    border-collapse: collapse;

}

thead th {

    background: rgba(255, 255, 255, 0.02);

    color: var(--text-muted);

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 15px;

    text-align: left;

    border-bottom: 2px solid var(--border);

}

tbody td {

    padding: 10px;

    border-bottom: 1px solid var(--border);

    color: var(--text-main);

    font-size: 0.95rem;

}

tbody tr:hover {

    background: rgba(255, 255, 255, 0.02);

}

/* Lignes de catégories / Séparateurs */

.category-row td, .group-row td {

    background: rgba(59, 130, 246, 0.07); /* Bleu translucide basé sur --primary */

    color: var(--primary);

    font-weight: 700;

    text-align: center;

    padding: 10px;

    border-bottom: 1px solid rgba(59, 130, 246, 0.2);

}

/* Style pour les photos dans le tableau */

.table-avatar {

    width: 95px;

    height: 95px;

    border-radius: 30%; /* Rend la photo parfaitement ronde */

    object-fit: cover;  /* Empêche l'image d'être déformée */

    border: 2px solid var(--border);

    display: block;

    margin: 0 auto;

}

/* Style si l'agent n'a pas de photo (cercle avec initiales ou vide) */

.table-avatar-placeholder {

    width: 95px;

    height: 95px;

    border-radius: 30%;

    background-color: var(--bg-dark);

    border: 2px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    font-size: 0.8rem;

    font-weight: bold;

    margin: 0 auto;

}

/* ----------------- ACTIONS DANS LE TABLEAU ----------------- */
.tbl-actions {
    display: flex;
    gap: 4px;
    align-items: end;
    justify-content: end;
}
.action-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
    border: none;
    margin-right: 4px;
}

.action-btn.validate { background: var(--success); color: white; }

.action-btn.edit { background: var(--primary); color: white; }

.action-btn.delete { background: var(--danger); color: white; }

.action-btn:hover { opacity: 0.8; }

.action-btn.modal-cross {

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    font-size: 1.2rem;

}

/* Champ de recherche */

#searchInput {

    background: var(--bg-dark);

    border: 1px solid var(--border);

    color: var(--text-main);

    padding: 8px 15px;

    border-radius: 20px;

    width: 250px;

    outline: none;

}

#searchInput:focus { border-color: var(--primary); }

/* Totaux */

.accounting-totals {

    margin-top: 15px;

}

.accounting-totals p {

    font-size: 18px;

    margin: 5px 0;

}

/* Bouton remettre à zéro */

.resetBtn {

    padding: 10px 20px;

    font-size: 16px;

    background: var(--danger);

    color: #000;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-weight: bold;

    transition: background 0.3s;

}

.resetBtn:hover {

    background: #fff;

}