/* ==========================================================
   PAHEKO ADMIN — THÈME CASINO BOHÈME
   Anniversaire Christel 50 ans
   Ambiance : crème, or, terracotta, vert profond, casino chic
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
    --boho-cream: #fff7e8;
    --boho-cream-2: #f7ead2;
    --boho-sand: #e8d0a9;

    --boho-gold: #c99a3d;
    --boho-gold-light: #f3d68a;
    --boho-gold-dark: #9b6d1f;

    --boho-terracotta: #b96445;
    --boho-terracotta-dark: #8f432e;

    --boho-green: #123c37;
    --boho-green-2: #1f5b52;
    --boho-green-soft: #dfeee9;

    --boho-red: #7f1d1d;
    --boho-red-soft: #f5d8d0;

    --boho-text: #2d2116;
    --boho-muted: #6f6255;

    --boho-card: rgba(255, 250, 240, .96);
    --boho-border: rgba(156, 111, 39, .34);

    --boho-radius: 14px;
    --boho-radius-small: 9px;
    --boho-pill: 999px;

    --boho-shadow: 0 4px 14px rgba(84, 55, 22, .12);
    --boho-shadow-soft: 0 2px 7px rgba(84, 55, 22, .10);
}


/* ==========================================================
   FOND GÉNÉRAL
   Exclut les fenêtres d’édition Paheko
   ========================================================== */

html:not(.dialog) body:not(.public):not(.raw) {
    background:
        radial-gradient(circle at top left, rgba(201, 154, 61, .16), transparent 28%),
        radial-gradient(circle at top right, rgba(31, 91, 82, .14), transparent 30%),
        linear-gradient(180deg, #fffaf0 0%, #f6ead5 100%) !important;

    color: var(--boho-text);
}

html:not(.dialog) body:not(.public):not(.raw) main {
    background:
        linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,247,232,.70)) !important;
}


/* ==========================================================
   MENU LATÉRAL
   ========================================================== */

#menu {
    background:
        linear-gradient(180deg, var(--boho-green) 0%, var(--boho-green-2) 62%, #2b1710 100%) !important;

    border-right: 1px solid rgba(243, 214, 138, .32) !important;
    box-shadow: 4px 0 18px rgba(45, 33, 22, .20);
}

/* Logo */
#menu .logo {
    background:
        radial-gradient(circle at center, rgba(243, 214, 138, .18), transparent 65%),
        rgba(255, 255, 255, .05) !important;

    border-bottom: 1px solid rgba(243, 214, 138, .25) !important;
}

#menu .logo img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}

/* Liens principaux */
#menu h3 a {
    color: rgba(255, 247, 232, .95) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.22);
}

#menu h3 a:hover {
    background: rgba(243, 214, 138, .14) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Élément actif */
#menu > ul > li.current > h3 > a,
#menu > ul > li.current_parent > h3 > a {
    background:
        linear-gradient(90deg, var(--boho-gold-light), var(--boho-gold)) !important;

    color: var(--boho-green) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

#menu > ul > li.current > h3 > a span[data-icon]::before,
#menu > ul > li.current_parent > h3 > a span[data-icon]::before {
    color: var(--boho-green) !important;
}

/* Sous-menu */
#menu li ul {
    background: rgba(255,255,255,.06) !important;
}

#menu li li a {
    color: rgba(255, 247, 232, .90) !important;
}

#menu li li a:hover {
    background: rgba(243, 214, 138, .14) !important;
    color: #fff !important;
}

#menu li li.current a {
    background: rgba(243, 214, 138, .20) !important;
    color: #fff !important;
    font-weight: 800 !important;
}


/* ==========================================================
   TITRES
   ========================================================== */

main h1,
main h1.main {
    color: var(--boho-green) !important;

    border-bottom: 1px solid rgba(201, 154, 61, .32) !important;

    font-weight: 850 !important;
    letter-spacing: .02em;
}

main h1::after,
main h1.main::after {
    content: "";
    display: block;

    width: 72px;
    height: 3px;

    margin-top: .45rem;

    background:
        linear-gradient(90deg, var(--boho-gold), var(--boho-terracotta)) !important;

    border-radius: var(--boho-pill);
}

main h2 {
    color: var(--boho-green) !important;
}

main h3 {
    color: var(--boho-terracotta-dark) !important;
}

main small,
main .desc,
main .description {
    color: var(--boho-muted) !important;
}


/* ==========================================================
   CADRES / BLOCS
   Pas d'overflow hidden : sinon les menus Paheko sont coupés
   ========================================================== */

main fieldset,
main .block,
main .help,
main .alert,
main .message,
main .error,
main .success,
main .confirm,
main .info,
main .wikiContent,
main article,
main section,
main aside {
    background: var(--boho-card) !important;

    border: 1px solid var(--boho-border) !important;
    border-radius: var(--boho-radius) !important;

    box-shadow: var(--boho-shadow-soft);
    overflow: visible !important;
}

main legend {
    color: var(--boho-green) !important;
    font-weight: 800 !important;
}


/* ==========================================================
   ONGLET DES PAGES
   ========================================================== */

main nav.tabs {
    border-bottom-color: rgba(201, 154, 61, .32) !important;
}

main nav.tabs li:first-child::before,
main nav.tabs li:last-child::after {
    display: none !important;
}

main nav.tabs li a {
    border-radius: var(--boho-pill) !important;

    background: rgba(255, 250, 240, .86) !important;
    border: 1px solid rgba(201, 154, 61, .34) !important;

    color: var(--boho-green) !important;
    font-weight: 800 !important;

    box-shadow: none !important;
    text-decoration: none !important;
}

main nav.tabs li a:hover {
    background: rgba(243, 214, 138, .28) !important;
    color: var(--boho-green) !important;
}

main nav.tabs li.current a,
main nav.tabs .current a {
    background:
        linear-gradient(180deg, var(--boho-green-2), var(--boho-green)) !important;

    color: var(--boho-cream) !important;
    border-color: var(--boho-green) !important;
}


/* ==========================================================
   BOUTONS
   ========================================================== */

main button,
main input[type="submit"],
main input[type="button"],
main input[type="reset"],
main a.button,
main .button,
main .icn-btn,
main .actions a,
main .actions button,
main .menu-btn > b {
    border-radius: var(--boho-pill) !important;

    font-weight: 800 !important;
    text-decoration: none !important;

    box-shadow: var(--boho-shadow-soft);
}

/* Boutons principaux */
main button,
main input[type="submit"],
main input[type="button"],
main a.button,
main .actions a,
main .actions button,
main .menu-btn > b {
    background:
        linear-gradient(180deg, #2b6f63 0%, var(--boho-green) 100%) !important;

    border: 1px solid rgba(18, 60, 55, .85) !important;
    color: var(--boho-cream) !important;
}

main button:hover,
main input[type="submit"]:hover,
main input[type="button"]:hover,
main a.button:hover,
main .actions a:hover,
main .actions button:hover,
main .menu-btn > b:hover {
    background:
        linear-gradient(180deg, var(--boho-gold-light), var(--boho-gold)) !important;

    color: var(--boho-green) !important;
    border-color: var(--boho-gold-dark) !important;
}

/* Icônes boutons */
main [data-icon]::before {
    opacity: .95;
}


/* ==========================================================
   FORMULAIRES
   ========================================================== */

main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main input[type="date"],
main input[type="time"],
main input[type="url"],
main input[type="search"],
main select,
main textarea {
    background: #fffdf8 !important;

    border: 1px solid rgba(201, 154, 61, .42) !important;
    border-radius: var(--boho-radius-small) !important;

    color: var(--boho-text) !important;

    box-shadow: inset 0 1px 2px rgba(84, 55, 22, .05);
}

main textarea {
    border-radius: var(--boho-radius) !important;
}

main input:focus,
main select:focus,
main textarea:focus {
    border-color: var(--boho-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 154, 61, .18) !important;
    outline: none !important;
}


/* ==========================================================
   TABLEAUX
   ========================================================== */

main table {
    background: rgba(255, 250, 240, .96) !important;

    border: 1px solid rgba(201, 154, 61, .32) !important;
    border-radius: var(--boho-radius) !important;

    box-shadow: var(--boho-shadow-soft);
    overflow: visible !important;
}

main table thead th,
main table thead td {
    background:
        linear-gradient(180deg, rgba(223, 238, 233, .95), rgba(232, 208, 169, .70)) !important;

    color: var(--boho-green) !important;
    font-weight: 850 !important;
}

main table tbody td,
main table tbody th {
    border-color: rgba(201, 154, 61, .20) !important;
}

main table tbody tr:nth-child(even) td,
main table tbody tr:nth-child(even) th {
    background: rgba(255, 247, 232, .72) !important;
}

main table tbody tr:hover td,
main table tbody tr:hover th {
    background: rgba(223, 238, 233, .65) !important;
}


/* ==========================================================
   ACCUEIL ADMIN — CARTES
   ========================================================== */

main nav.home ul li a {
    background:
        radial-gradient(circle at top left, rgba(243, 214, 138, .22), transparent 42%),
        rgba(255, 250, 240, .96) !important;

    border: 1px solid rgba(201, 154, 61, .32) !important;
    border-radius: var(--boho-radius) !important;

    box-shadow: var(--boho-shadow);
    text-decoration: none !important;
}

main nav.home ul li a:hover {
    border-color: var(--boho-gold) !important;
    box-shadow: 0 6px 18px rgba(84, 55, 22, .16);
}

main nav.home ul li a::before,
main nav.home ul li a .icon {
    background:
        linear-gradient(180deg, rgba(243, 214, 138, .40), rgba(223, 238, 233, .65)) !important;

    border-radius: 12px !important;
}


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

main .success {
    background: rgba(223, 238, 233, .90) !important;
    border-color: rgba(31, 91, 82, .32) !important;
}

main .error,
main .alert {
    background: rgba(245, 216, 208, .94) !important;
    border-color: rgba(127, 29, 29, .32) !important;
}

main .info,
main .message,
main .confirm {
    background: rgba(255, 247, 232, .94) !important;
    border-color: rgba(201, 154, 61, .34) !important;
}


/* ==========================================================
   MENUS DÉROULANTS PAHEKO
   On garde le comportement d’origine : sous le bouton
   ========================================================== */

main .menu-btn {
    position: relative !important;
    overflow: visible !important;
}

main .menu-btn > span {
    overflow: visible !important;
}

main .menu-btn > span > span {
    background: #fffaf0 !important;

    border: 1px solid rgba(201, 154, 61, .55) !important;
    border-top: 2px solid var(--boho-gold) !important;
    border-radius: 10px !important;

    box-shadow: 0 6px 18px rgba(84, 55, 22, .25) !important;
}

main .menu-btn > span > span a,
main .menu-btn > span > span button {
    background: #fffaf0 !important;
    color: var(--boho-text) !important;
    border-radius: 7px !important;
}

main .menu-btn > span > span a:hover,
main .menu-btn > span > span button:hover {
    background: rgba(243, 214, 138, .32) !important;
    color: var(--boho-green) !important;
}


/* Les conteneurs ne doivent pas couper les menus */
main table,
main table tbody,
main table thead,
main table tfoot,
main table tr,
main table td,
main table th,
main td.actions,
main .actions,
main p.actions,
main fieldset,
main section,
main article,
main .block {
    overflow: visible !important;
}


/* ==========================================================
   DROPDOWNS PAHEKO
   Exemple : filtre catégories
   ========================================================== */

main nav.dropdown,
main fieldset.shortFormRight nav.dropdown {
    overflow: visible !important;
    position: relative !important;
    z-index: 1000 !important;
}

main nav.dropdown ul,
main fieldset.shortFormRight nav.dropdown ul {
    background: #fffaf0 !important;

    border: 1px solid rgba(201, 154, 61, .55) !important;
    border-radius: 10px !important;

    box-shadow: 0 6px 18px rgba(84, 55, 22, .25) !important;

    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

main nav.dropdown a {
    color: var(--boho-text) !important;
}

main nav.dropdown a:hover {
    background: rgba(243, 214, 138, .32) !important;
    color: var(--boho-green) !important;
}


/* ==========================================================
   FENÊTRES D’ÉDITION / DIALOGUES
   Ne pas modifier les fenêtres d’édition Paheko
   ========================================================== */

html.dialog body,
body.raw {
    background: initial !important;
    font-size: initial !important;
}

html.dialog body main,
body.raw main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
}