/* ----------------- Général ----------------- */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    font-family: 'Roboto', sans-serif;

}

:root {

    --sb-bg:#2a2a3d;

    --bg:#1e1e2f;

    --li-bg:#3d3d5c;

    --yellow:#ffd700;

    --btn-txt:#000;

    --alert-bg:#1e1e2f;

    --alert-btn-bg:darkred;

    --muted:#666;

    --radius:10px;

    --default-txt:#fff;

}

body {

    background: var(--bg);

    color: #fff;

    display: flex;

    height: 100vh;

}

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

/* ----------------- Login.html et Register.html ----------------- */

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

.user-container {

    margin: 0;

    font-family: 'Roboto', sans-serif;

    background: var(--bg);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

.register-container,

.login-container {

    background: rgba(0,0,0,0.85);

    padding: 40px 30px;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.6);

    width: 400px;

    text-align: center;

}

.register-container h1,

.login-container h1{

    color: var(--yellow);

    margin-bottom: 25px;

}

.register-form,

.login-form {

    display: flex;

    flex-direction: column;

    margin-bottom: 10px;

}

.register-form label,

.login-form label {

    text-align: left;

    margin-bottom: 5px;

    font-weight: 500;

    font-size: 0.9em;

}

.register-form input,

.login-form input,

.register-form select {

    padding: 10px;

    margin-bottom: 20px;

    border-radius: 6px;

    border: none;

    outline: none;

    font-size: 0.9em;

    background: #2a2a3d;

    color: #fff;

}

.register-form button,

.login-form button {

    padding: 12px;

    margin-bottom: 5px;

    background-color: var(--yellow);

    color: #000;

    border: none;

    border-radius: 8px;

    font-size: 0.9em;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

}

.register-form button:hover,

.login-form button:hover {

    background-color: #fff;

    color: #000;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

}

.back-btn {

    font-size: 0.9em;

    font-weight: bold;

    text-decoration: none;

    padding: 12px;

    margin-top: 5px;

    background-color: var(--yellow);

    color: #000;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

}

.back-btn:hover {

    background-color: #fff;

    color: #000;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

}

.register-link {

    color: lightblue;

    text-decoration: none;

}

.register-link:hover {

    color: aquamarine;

    text-decoration: underline;

}

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

/* --------------------- ACCUEIL DEPARTEMENT --------------------- */

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

/* --------------------- SAST SUD / SAST NORD -------------------- */

/* -------------------------- DOJ / GOUV ------------------------- */

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

/* Sidebar avec Bouton burger */

#sidebar-toggle {

    position: fixed;

    top: 10px;

    left: 10px;

    display: flex;

    align-items: center;

    background: var(--yellow);

    color: #000;

    padding: 10px;

    border-radius: 6px;

    cursor: pointer;

    z-index: 1000;

}

#sidebar-toggle i {

    font-size: 18px;

}

/* Sidebar */

.sidebar {

    width: 300px;

    background: var(--sb-bg);

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: transform 0.3s ease;

}

.sidebar.hide {

    transform: translateX(-260px);

}

.sidebar h2 {

    color: var(--yellow);

    margin-bottom: 20px;

    text-align: center;

}

.sidebar nav {

    padding: 0;

    overflow-y: auto;

    flex: 1;

}

.sidebar nav a {

    display: block;

    padding: 10px;

    color: #fff;

    text-decoration: none;

    border-radius: 6px;

    margin-bottom: 5px;

    transition: background 0.3s;

}

.sidebar nav a:hover {

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

}

/* Footer utilisateur */

.sidebar-footer {

    margin-top: 20px;

    text-align: center;

}

.user-name {

    margin-bottom: 10px;

    font-weight: bold;

}

.btn-footer {

    display: block;

    margin: 5px 0;

    padding: 8px;

    background: var(--yellow);

    color: #000;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

}

.btn-footer:hover {

    background: #fff;

}

/* Catégories déployables */

.category-items {

    display: none;

    margin-left: 10px;

}

.category-title {

    cursor: pointer;

    padding: 10px;

    font-weight: bold;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.category-title:hover {

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

}

/* Contenu principal */

.sidebar.hide ~ .main-content {

    margin-left: -14%;

}

.sidebar ~ .main-content {

    margin-left: 15px;

}

/* Logo T-Life dans header */

#logo-tlife-header {

    width: 40px;

    height: auto;

    margin-right: 10px;

    vertical-align: middle;

}

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

/* ----------------------- TABLEAU DE BORD ----------------------- */

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

/* ----------------- Sidebar ----------------- */

.sidebar-dsh {

    width: 260px;

    background: var(--bg);

    height: 100vh;

    position: fixed;

    left: 0;

    top: 0;

    padding: 20px;

    box-shadow: 2px 0 10px rgba(0,0,0,0.4);

    display: flex;

    flex-direction: column;

}

.sidebar-dsh h2 {

    color: var(--yellow);

    margin-bottom: 30px;

    text-align: center;

}

.sidebar-dsh nav a {

    display: flex;

    align-items: center;

    justify-content:space-evenly;

    text-decoration: none;

    padding: 12px 15px;

    border-radius: 8px;

    margin-bottom: 10px;

    transition: all 0.3s ease;

    font-weight: 500;

}

.sidebar-dsh nav a.btn {

    background-color: var(--yellow);

    color: #000;

}

.sidebar-dsh nav a:hover {

    background-color: #fff;

    color: #000;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

}

/* ----------------- Main Content ----------------- */

.main-content {

    flex: 1;

    padding: 20px;

    transition: margin-left 0.3s ease;

}

.main-content .main-title {

    margin: 15px;

    font-size: 20px;

    font-weight: bold;

}

.sidebar-dsh.hide ~ .main-content {

    margin-left: 0;

}



.sidebar-dsh ~ .main-content {

    margin-left: 260px;

}

/* Header */

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #2a2a3d;

    padding: 15px 25px;

    border-radius: 10px;

    margin-bottom: 30px;

}

header h1 {

    font-size: 1.6em;

    color: var(--yellow);

}

.user-info {

    font-size: 0.9em;

    color: #ccc;

}

/* ----------------- Grid + Cards ----------------- */

.grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 25px;

}

.card {

    background: rgba(0,0,0,0.8);

    border-radius: 12px;

    padding: 20px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    transition: transform 0.3s, box-shadow 0.3s;

}

.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.7);

}

.card h3 {

    margin-top: 0;

    color: var(--yellow);

    margin-bottom: 10px;

}

.card p {

    font-size: 0.9em;

    color: #ddd;

    line-height: 1.5;

}

/* ----------------- Seached Civilians Cards ----------------- */

.main-grid {

    margin-top: 2rem;

}

.main-grid-title {

    font-size: 20px;

}

.main-grid-cards {

    margin-top: 15px;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 25px;

}

.civilian-card {

    max-width: 230px;

    background: rgba(0,0,0,0.8);

    border-radius: 12px;

    padding: 5px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    transition: transform 0.3s, box-shadow 0.3s;

}

.civilian-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.7);

}

.civilian-card img {

    max-width: 220px;

    border-radius: 12px 12px 0px 0px;

}

.civilian-card .card-header-title {

    background: crimson;

    width: 100%;

    padding: 5px 0px 5px 0px;

}

.civilian-card .card-header-status {

    font-weight: bold;

    font-size: 16px;

    text-align: center;

}

.civilian-card .card-main-content-title {

    font-weight: bold;

    font-size: 20px;

    text-align: center;

    color:#ffd700;

    margin: 10px 0px 10px 0px;

}

.civilian-card .card-main-content-list {

    font-weight: bold;

    font-size: 16px;

    margin: 10px 0px 10px 0px;

    padding-left: 25px;

}

.civilian-card .card-main-content-list .card-info {

    font-weight: bold;

    color: #858585;

}

/* ----------------- Responsive ----------------- */

@media (max-width: 768px) {

    .sidebar-dsh {

        width: 180px;

    }

    .main-content {

        margin-left: 180px;

    }

}

@media (max-width: 600px) {

    .sidebar-dsh {

        display: none;

    }

    .main-content {

        margin-left: 0;

    }

}