/* =====================================================================
   MAJITECH - Styles du back office (charge après style.css)
   ===================================================================== */

body.admin-body { background: var(--bg-alt); }

/* ---------- Page de connexion ---------- */
.admin-login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bleu-fonce), #0d3d75); padding: 20px;
}
.admin-login-card {
    background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--ombre-hover);
    padding: 46px 40px; width: 100%; max-width: 420px;
}
.admin-login-card .navbar__logo { justify-content: center; margin-bottom: 8px; font-size: 1.6rem; }
.admin-login-card p.subtitle { text-align: center; color: var(--fg-light); margin-bottom: 30px; font-size: 0.9rem; }
.admin-login-card .form-group { margin-bottom: 18px; }
.admin-login-card .input-icon { position: relative; }
.admin-login-card .input-icon i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--fg-light); }
.admin-login-card .input-icon input { padding-left: 44px; }
.admin-login-back { display: block; text-align: center; margin-top: 22px; font-size: 0.85rem; color: var(--fg-light); }
.admin-login-back:hover { color: var(--bleu-fonce); }

/* ---------- Champ mot de passe avec bascule afficher/masquer ---------- */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 44px !important; width: 100%; box-sizing: border-box; }
/* Désactive les boutons natifs (Edge/IE "reveal", Chrome auto-fill icônes) pour n'afficher que notre icône */
.password-field input::-ms-reveal,
.password-field input::-ms-clear { display: none; width: 0; height: 0; }
.password-toggle {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    background: none; border: none; color: var(--fg-light); cursor: pointer; z-index: 5;
    width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.password-toggle i { width: 1em; text-align: center; }
.password-toggle:hover { color: var(--bleu-fonce); }

/* ---------- Layout général ---------- */
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: 270px; flex-shrink: 0; background: #0c1722; color: #cfd8e3; padding: 24px 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: transform 0.3s ease; z-index: 200;
}
.admin-sidebar__logo { display: flex; align-items: center; gap: 10px; padding: 0 24px 26px; font-size: 1.25rem; font-weight: 700; color: #fff; }
.admin-sidebar__logo i { color: var(--bleu-ciel); }
.admin-sidebar__logo .navbar__logo-text { color: #fff; }
.admin-sidebar__logo .navbar__logo-badge { width: 58px; height: 58px; }
.admin-sidebar nav ul { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; }
.admin-sidebar nav .nav-section { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #5d6c7d; padding: 18px 12px 8px; }
.admin-sidebar nav a {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; font-size: 0.9rem;
    transition: var(--transition); color: #cfd8e3;
}
.admin-sidebar nav a i { width: 18px; text-align: center; color: #7c8aa0; }
.admin-sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-sidebar nav a.active { background: linear-gradient(135deg, var(--bleu-ciel), var(--bleu-fonce)); color: #fff; }
.admin-sidebar nav a.active i { color: #fff; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 30px;
    background: var(--card-bg); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 100; gap: 20px;
}
.admin-topbar__burger { display: none; font-size: 1.3rem; }
.admin-topbar__title { min-width: 0; }
.admin-topbar__title h1 { font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.admin-topbar__profile { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.admin-topbar__profile img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--bg-alt); }
.admin-topbar__profile .name { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.admin-topbar__profile .role { font-size: 0.75rem; color: var(--fg-light); }
.admin-topbar__dropdown {
    position: absolute; top: 110%; right: 0; background: var(--card-bg); border: 1px solid var(--bordure);
    border-radius: 12px; box-shadow: var(--ombre-hover); min-width: 180px; display: none; overflow: hidden; z-index: 50;
}
.admin-topbar__dropdown.show { display: block; }
.admin-topbar__dropdown a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 0.88rem; }
.admin-topbar__dropdown a:hover { background: var(--bg-alt); }

.admin-content { padding: 28px 30px; flex: 1; }

/* ---------- Cartes statistiques ---------- */
.stat-card {
    background: var(--card-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--ombre);
    display: flex; align-items: center; gap: 18px; border: 1px solid var(--bordure);
}
.stat-card__icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; flex-shrink: 0; }
.stat-card__icon.blue { background: linear-gradient(135deg, var(--bleu-ciel), var(--bleu-fonce)); }
.stat-card__icon.green { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.stat-card__icon.orange { background: linear-gradient(135deg, #ffa726, #ef6c00); }
.stat-card__icon.purple { background: linear-gradient(135deg, #ab47bc, #6a1b9a); }
.stat-card__value { font-size: 1.6rem; font-weight: 800; }
.stat-card__label { color: var(--fg-light); font-size: 0.85rem; }

/* ---------- Cartes / panneaux admin ---------- */
.admin-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--ombre); border: 1px solid var(--bordure); padding: 26px; margin-bottom: 26px; }
.admin-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.admin-card__header h2 { font-size: 1.1rem; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.admin-table th { text-align: left; padding: 12px 14px; background: var(--bg-alt); color: var(--fg-light); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
table.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
table.admin-table tr:last-child td { border-bottom: none; }
table.admin-table tr:hover td { background: var(--bg-alt); }
table.admin-table img.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
table.admin-table .thumb-placeholder {
    width: 46px; height: 46px; border-radius: 8px; background: var(--bg-alt); color: var(--fg-light);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; }
.badge.success { background: rgba(46,125,50,0.12); color: var(--succes); }
.badge.warning { background: rgba(239,108,0,0.12); color: #ef6c00; }
.badge.danger { background: rgba(198,40,40,0.12); color: var(--erreur); }
.badge.info { background: rgba(21,101,192,0.12); color: var(--bleu-fonce); }
.badge.neutral { background: var(--bg-alt); color: var(--fg-light); }

.action-buttons { display: flex; gap: 8px; }
.action-btn {
    width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-alt); color: var(--fg); transition: var(--transition); font-size: 0.85rem;
}
.action-btn.edit:hover { background: var(--bleu-fonce); color: #fff; }
.action-btn.delete:hover { background: var(--erreur); color: #fff; }
.action-btn.view:hover { background: #2e7d32; color: #fff; }

/* ---------- Formulaires admin ---------- */
.admin-form .form-grid { max-width: 100%; }
.image-upload-preview {
    width: 160px; height: 160px; border-radius: 12px; border: 2px dashed var(--bordure); display: flex;
    align-items: center; justify-content: center; overflow: hidden; background: var(--bg-alt); margin-bottom: 12px;
}
.image-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-upload-preview i { font-size: 1.8rem; color: var(--fg-light); }

/* ---------- Filtres / recherche admin ---------- */
.admin-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-toolbar form { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-search-input { padding: 11px 16px; border-radius: 10px; border: 1.5px solid var(--bordure); min-width: 220px; background: var(--bg); color: var(--fg); }

/* ---------- Login attempts / empty states ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--fg-light); }
.empty-state i { font-size: 2.4rem; margin-bottom: 14px; color: var(--bordure); }

/* ---------- Notification toast ---------- */
.admin-alert { padding: 14px 20px; border-radius: 10px; margin-bottom: 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.admin-alert.success { background: rgba(46,125,50,0.12); color: var(--succes); }
.admin-alert.error { background: rgba(198,40,40,0.12); color: var(--erreur); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .admin-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: var(--ombre-hover); }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-topbar__burger { display: block; }
    .admin-content { padding: 20px; }
}

@media (max-width: 560px) {
    .admin-topbar__profile .name, .admin-topbar__profile .role { display: none; }
    .admin-topbar { padding: 14px 16px; gap: 10px; }
    .admin-topbar__title h1 { font-size: 1.05rem; max-width: 150px; }
    .admin-topbar__actions { gap: 8px; }
    .admin-content { padding: 16px; }
}