/**
 * Styles personnalisés pour l'interface d'administration WordPress
 *
 * Thème fussep - Studio Canal fussep
 * Palette inspirée des tissus Ndop (indigo) et Toghu (broderies) des Grassfields
 *
 * @package fussep_Headless
 * @version 1.0.0
 */

/* ===================================================================
   VARIABLES CSS (Palette fussep/Grassfields)
   =================================================================== */

:root {
    /* Couleurs principales (Indigo royal - Ndop) */
    --fussep-primary: #0D2B56;
    --fussep-primary-dark: #3B4A81;
    --fussep-primary-light: #2A3E6B;

    /* Couleurs secondaires (Jaune/Ocre royal - Toghu) */
    --fussep-secondary: #f59e0b;
    --fussep-secondary-dark: #d97706;
    --fussep-secondary-light: #fbbf24;

    /* Accents (Rouge, Orange, Terre cuite) */
    --fussep-accent-red: #dc2626;
    --fussep-accent-orange: #ea580c;
    --fussep-accent-brown: #b45309;

    /* Neutres */
    --fussep-white: #ffffff;
    --fussep-ivory: #fffbeb;
    --fussep-gray-light: #f3f4f6;
    --fussep-gray: #6b7280;
    --fussep-gray-dark: #374151;
    --fussep-black: #1f2937;

    /* Espacements */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Ombres */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ===================================================================
   STYLES GÉNÉRAUX DE L'ADMIN
   =================================================================== */

/* Body de l'admin */
body.fussep-admin-theme {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Liens globaux */
.fussep-admin-theme a {
    color: var(--fussep-primary);
    transition: color 0.3s ease;
}

.fussep-admin-theme a:hover {
    color: var(--fussep-secondary);
}

/* Boutons primaires (bleu > jaune) */
.fussep-admin-theme .button-primary {
    background: var(--fussep-secondary) !important;
    border-color: var(--fussep-secondary-dark) !important;
    color: var(--fussep-black) !important;
    text-shadow: none !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.fussep-admin-theme .button-primary:hover,
.fussep-admin-theme .button-primary:focus {
    background: var(--fussep-secondary-dark) !important;
    border-color: var(--fussep-accent-orange) !important;
    color: var(--fussep-white) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* Boutons secondaires */
.fussep-admin-theme .button {
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.fussep-admin-theme .button:hover {
    border-color: var(--fussep-primary);
    color: var(--fussep-primary);
}

/* ===================================================================
   MENU LATÉRAL (Sidebar)
   =================================================================== */

/* Fond du menu */
#adminmenu,
#adminmenuback,
#adminmenuwrap {
    background: var(--fussep-primary) !important;
}

/* Items du menu */
#adminmenu li.menu-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#adminmenu a {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease;
}

/* Hover sur les items */
#adminmenu li.menu-top:hover > a,
#adminmenu li.menu-top.current > a,
#adminmenu li.opensub > a {
    background: var(--fussep-primary-dark) !important;
    color: var(--fussep-secondary) !important;
    border-left: 4px solid var(--fussep-secondary);
    padding-left: 8px;
}

/* Icônes du menu */
#adminmenu .wp-menu-image img {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

#adminmenu li.menu-top:hover .wp-menu-image img,
#adminmenu li.menu-top.current .wp-menu-image img {
    opacity: 1;
    filter: none;
}

/* Sous-menus */
#adminmenu .wp-submenu {
    background: var(--fussep-primary-dark) !important;
    border-left: 3px solid var(--fussep-secondary);
}

#adminmenu .wp-submenu a {
    color: rgba(255, 255, 255, 0.7) !important;
}

#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu li.current a {
    color: var(--fussep-secondary) !important;
    font-weight: 600;
}

/* Séparateurs du menu */
#adminmenu .wp-menu-separator {
    background: rgba(255, 255, 255, 0.15) !important;
    height: 2px !important;
    margin: 8px 0 !important;
}

/* Menu "Réduire" (Collapse) */
#adminmenu .wp-menu-arrow {
    display: none;
}

/* ===================================================================
   HEADER / BARRE DU HAUT
   =================================================================== */

/* Top bar (sous l'admin bar) */
.wrap h1,
.wrap h2.nav-tab-wrapper {
    color: var(--fussep-primary);
    border-bottom: 3px solid var(--fussep-secondary);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Nav tabs */
.nav-tab {
    border-color: var(--fussep-gray-light) !important;
    color: var(--fussep-gray);
    transition: all 0.3s ease;
}

.nav-tab:hover {
    background: var(--fussep-ivory);
    color: var(--fussep-primary);
}

.nav-tab-active {
    background: var(--fussep-primary) !important;
    color: var(--fussep-white) !important;
    border-color: var(--fussep-primary) !important;
}

/* ===================================================================
   TABLEAUX (Tables)
   =================================================================== */

/* En-têtes de tableaux */
.wp-list-table thead th,
.wp-list-table tfoot th {
    background: var(--fussep-ivory);
    color: var(--fussep-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--fussep-secondary);
}

/* Lignes alternées */
.wp-list-table .alternate {
    background: var(--fussep-gray-light);
}

/* Hover sur les lignes */
.wp-list-table tr:hover {
    background: var(--fussep-ivory);
}

/* ===================================================================
   NOTICES / MESSAGES
   =================================================================== */

/* Notice générale */
.notice {
    border-left-width: 4px !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Success */
.notice-success {
    border-left-color: var(--fussep-secondary) !important;
    background: var(--fussep-ivory);
}

/* Error */
.notice-error {
    border-left-color: var(--fussep-accent-red) !important;
}

/* Warning */
.notice-warning {
    border-left-color: var(--fussep-accent-orange) !important;
}

/* Info */
.notice-info {
    border-left-color: var(--fussep-primary) !important;
}

/* ===================================================================
   FORMULAIRES (Forms)
   =================================================================== */

/* Champs de formulaire */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    border-color: var(--fussep-gray-light) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--fussep-secondary) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
    outline: none;
}

/* Checkboxes */
input[type="checkbox"]:checked::before {
    color: var(--fussep-secondary);
}

/* Radio buttons */
input[type="radio"]:checked::before {
    background-color: var(--fussep-secondary);
}

/* ===================================================================
   METABOXES
   =================================================================== */

.postbox {
    border: 1px solid var(--fussep-gray-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.postbox .hndle {
    background: var(--fussep-ivory);
    border-bottom: 2px solid var(--fussep-secondary);
    color: var(--fussep-primary);
    font-weight: 600;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.postbox .inside {
    padding: var(--spacing-lg);
}

/* ===================================================================
   DASHBOARD WIDGETS
   =================================================================== */

#dashboard-widgets .postbox {
    background: var(--fussep-white);
}

#dashboard-widgets .postbox:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Widget de bienvenue personnalisé */
#headless_admin_welcome_widget .inside {
    padding: 0 !important;
}

/* ===================================================================
   ÉDITEUR (Editor)
   =================================================================== */

/* Zone de titre */
#title-prompt-text {
    color: var(--fussep-gray);
}

#titlewrap input {
    font-size: 24px;
    color: var(--fussep-primary);
    font-weight: 600;
}

/* Bouton "Publier" */
#publishing-action .button-primary {
    font-size: 14px !important;
    padding: 8px 20px !important;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media screen and (max-width: 782px) {
    /* Menu mobile */
    #adminmenu {
        margin-top: 46px;
    }

    /* Boutons */
    .button-primary {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Dashboard widgets */
    #dashboard-widgets .postbox {
        margin-bottom: var(--spacing-md);
    }
}

/* ===================================================================
   UTILITAIRES
   =================================================================== */

/* Badge "Nouveau" */
.update-count,
.plugin-count,
.comment-count {
    background: var(--fussep-secondary) !important;
    color: var(--fussep-black) !important;
}

/* Spinner de chargement */
.spinner {
    filter: hue-rotate(180deg);
}

/* Séparateur horizontal */
hr {
    border-color: var(--fussep-gray-light);
}

/* Helper text */
.description,
.help {
    color: var(--fussep-gray);
    font-size: 13px;
    font-style: italic;
}