/* =====================================================================
   PASTEF TOUBA — styles complémentaires à Tailwind
   ===================================================================== */

body { font-family: 'Inter', sans-serif; }

/* ---------- Bandeau latéral gauche : logo + texte vertical PASTEF TOUBA ----------
   Utilise l'espace vide à gauche de la zone centrée (max-w-7xl). Caché sous 1280px
   pour éviter tout chevauchement avec le contenu sur écrans étroits. */
#brand-side {
    position: fixed;
    left: 0; top: 64px;        /* en-dessous du header (h-16) */
    height: calc(100vh - 64px);
    width: max(96px, calc((100vw - 1280px) / 2));
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 8px;
    pointer-events: none;
    z-index: 0;
}
#brand-side img {
    width: min(160px, 80%);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
#brand-side .brand-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #1a7a3e;
    font-size: 16px;
    text-transform: uppercase;
}
@media (min-width: 1280px) { #brand-side { display: flex; } }

/* ---------- Pages (onglets) ---------- */
.page { display: none; }
.page.active { display: block; }

/* ---------- Onglets (tab buttons) ---------- */
.tab-btn { color: #64748b; border-bottom-color: transparent; }
.tab-btn:hover { color: #1a7a3e; }
.tab-btn.active { color: #1a7a3e; border-bottom-color: #1a7a3e; }

/* ---------- Sous-onglets admin ---------- */
#admin-sub-tabs button { color: #64748b; border-bottom-color: transparent; cursor: pointer; background: none; }
#admin-sub-tabs button:hover { color: #1a7a3e; }
#admin-sub-tabs button.active { color: #1a7a3e; border-bottom-color: #1a7a3e; }
.admin-pane { display: none; }
.admin-pane.active { display: block; }

/* ---------- Champs de formulaire ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}
.field .req { color: #e11d48; margin-left: 2px; font-weight: 700; }
.field input,
.field select,
.field textarea {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: #1a7a3e;
    box-shadow: 0 0 0 3px rgba(26,122,62,.15);
}
.field input[readonly],
.field select:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
}
.field input.locked,
.field select.locked {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary   { background: #1a7a3e; color: #fff; }
.btn-primary:hover:not(:disabled)   { background: #115c2d; }

.btn-secondary { background: #fff; color: #334155; border-color: #e2e8f0; }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }

.btn-warning   { background: #fff; color: #b45309; border-color: #fcd34d; }
.btn-warning:hover:not(:disabled)   { background: #fef3c7; }

.btn-danger    { background: #fff; color: #b91c1c; border-color: #fecaca; }
.btn-danger:hover:not(:disabled)    { background: #fef2f2; }

/* ---------- Login / modale (overlay) ---------- */
#login-overlay,
#my-account-overlay { display: flex; }
#login-overlay[hidden],
#my-account-overlay[hidden] { display: none !important; }

/* Garantir que l'attribut HTML `hidden` masque toujours, même si l'élément
   porte une classe Tailwind comme `flex` qui écraserait `display: none`. */
[hidden] { display: none !important; }

/* ---------- Bandeau de mode (read/edit) ---------- */
.mode-banner {
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: none;
}
.mode-banner[data-mode="view"] {
    display: block;
    background: #fef3c7;
    color: #92400e;
    border-left: 3px solid #f59e0b;
}
.mode-banner[data-mode="edit"] {
    display: block;
    background: #dcfce7;
    color: #14532d;
    border-left: 3px solid #1a7a3e;
}

/* ---------- Toasts ---------- */
.toast {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #0f172a;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 10px 25px -5px rgba(0,0,0,.10);
    display: flex;
    gap: 8px;
    align-items: start;
    min-width: 260px;
    max-width: 380px;
    animation: toast-in .2s ease-out;
}
.toast.success { border-left: 3px solid #1a7a3e; }
.toast.error   { border-left: 3px solid #e11d48; color: #7f1d1d; }
@keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ---------- Diff JSON dans l'audit ---------- */
.diff-cell {
    max-width: 480px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #475569;
    white-space: pre-wrap;
    word-break: break-all;
}
.diff-cell details summary { cursor: pointer; color: #1a7a3e; font-family: inherit; }

/* ---------- Empty / placeholder ---------- */
.empty {
    padding: 32px 16px !important;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
}

/* ---------- Filtrage UI par rôle ---------- */
body[data-role="LECTURE"] button[data-action^="add-"],
body[data-role="LECTURE"] button[data-action^="edit-"],
body[data-role="LECTURE"] button[data-action^="save-"],
body[data-role="LECTURE"] button[data-action^="delete-"],
body[data-role="LECTURE"] button[data-action="create-user"],
body[data-role="LECTURE"] button[data-action^="reset-pwd"],
body[data-role="LECTURE"] button[data-action^="audit-"],
body[data-role="LECTURE"] #cellule-mode-banner,
body[data-role="LECTURE"] #membre-mode-banner { display: none !important; }

body[data-role="SAISIE"] [data-page="dashboard"],
body[data-role="SAISIE"] #page-dashboard,
body[data-role="SAISIE"] .col-effectif { display: none !important; }