slim-blog/assets/scss/pages/_admin.scss

@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

// =============================================================
// Pages d'administration
// =============================================================

// Barre de navigation entre les sections admin
.admin-nav {
    margin-bottom: $spacing-lg;
}

// Cellule d'actions dans les tableaux admin (liste d'articles, médias, etc.)
// display:flex permet d'utiliser gap en mobile et d'aligner les boutons en desktop.
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $spacing-xs;
}

// Tableau de gestion (articles, utilisateurs)
.admin-table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
        padding: $spacing-sm;
        border-bottom: 1px solid $color-border;
        text-align: left;
    }

    th {
        background: $color-bg-light;
        font-weight: bold;
    }

    // Indicateur "(vous)" dans la liste des utilisateurs
    &__self {
        color: $color-text-muted;
        font-size: $font-size-xs;
    }

    // Ligne d'action indisponible (tiret)
    &__muted {
        color: $color-text-subtle;
        font-size: $font-size-xs;
    }

    // Sélecteur de rôle dans la liste des utilisateurs
    &__role-select {
        font-size: $font-size-sm;
        padding: $spacing-xs $spacing-sm;
        border: 1px solid $color-border;
        border-radius: $border-radius;
        background: $color-bg-white;
        cursor: pointer;
    }
}

// =============================================================
// Bloc de création de catégorie (admin)
// =============================================================

// Conteneur du formulaire de création
.category-create {
    margin-bottom: $spacing-xl;
    padding: $spacing-md;
    background: $color-bg-light;
    border: 1px solid $color-border;
    border-radius: $border-radius;
}

// Titre du bloc de création
.category-create__title {
    margin: 0 0 $spacing-md;
    font-size: $font-size-base;
}

// Disposition horizontale : champ + bouton sur la même ligne
.category-create__form {
    display: flex;
    align-items: flex-end;
    gap: $spacing-sm;
    flex-wrap: wrap;
}

// Label englobant le champ texte
.category-create__label {
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;
    font-size: $font-size-sm;
}

// Champ de saisie du nom
.category-create__input {
    min-width: 260px;
    width: 100%;
}

// Indication de génération automatique du slug
.category-create__hint {
    margin: $spacing-sm 0 0;
    font-size: $font-size-xs;
    color: $color-text-muted;
}

// =============================================================
// Responsive — admin-table en mobile
// =============================================================
// En dessous du breakpoint mobile, le tableau est transformé en liste
// de blocs empilés. Chaque cellule affiche son en-tête via data-label.
// Les <thead> sont masqués car les labels remplacent les en-têtes.

@include mobile {
    .admin-table {
        display: block;

        thead {
            display: none;
        }

        tbody,
        tr {
            display: block;
        }

        tr {
            border: 1px solid $color-border;
            border-radius: $border-radius;
            margin-bottom: $spacing-md;
            padding: $spacing-sm;
            background: $color-bg-white;
        }

        td {
            display: flex;
            align-items: flex-start;
            gap: $spacing-sm;
            padding: $spacing-xs 0;
            border-bottom: 1px solid $color-border;
            font-size: $font-size-sm;

            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            // Label de colonne injecté via data-label
            &::before {
                content: attr(data-label);
                font-weight: bold;
                min-width: 100px;
                flex-shrink: 0;
                color: $color-text-muted;
            }
        }
    }

    // En mobile, les boutons d'actions s'empilent verticalement
    .admin-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

// =============================================================
// Page d'erreur (404, 500…)
// =============================================================

.error-page {
    text-align: center;
    padding: $spacing-xl 0;
}

.error-page__code {
    font-size: 4rem;
    margin-bottom: $spacing-sm;
    color: $color-text-muted;
}

.error-page__message {
    font-size: 1.2rem;
    margin-bottom: $spacing-lg;
}

// =============================================================
// Éditeur Trumbowyg
// =============================================================

// Hauteur minimale de la zone de saisie
.trumbowyg-box,
.trumbowyg-editor {
    min-height: 300px;
}

// Largeur identique aux autres champs du formulaire
.trumbowyg-box {
    width: 100%;
    box-sizing: border-box;
}

// =============================================================
// Bloc upload — galerie médias
// =============================================================

// Lien englobant la miniature d'aperçu
.upload__thumb-link {
    display: inline-block;
    line-height: 0;
}

// Miniature d'aperçu
.upload__thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: $border-radius;
    border: 1px solid $color-border;
    display: block;
}

// URL affichée en police monospace
.upload__url {
    display: block;
    font-size: $font-size-sm;
    color: $color-text-muted;
    margin-bottom: $spacing-xs;
    word-break: break-all;
    background: transparent;
    padding: 0;
}