/**
 * DokuWiki Ultimate CSS - Style Confluence + Algoria
 * Focus MASSIF sur la sidebar IndexMenu
 * Compatible Bootstrap3 Template
 */

/* ========================================
   VARIABLES CSS (Pour faciliter la personnalisation)
   ======================================== */

:root {
    --primary-blue: #0052CC;
    --primary-blue-dark: #0747A6;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --text-dark: #172B4D;
    --text-medium: #42526E;
    --text-light: #6B778C;
    --bg-light: #F4F5F7;
    --bg-lighter: #FAFBFC;
    --border-color: #DFE1E6;
    --success: #00875A;
    --warning: #FF991F;
    --danger: #DE350B;
}

/* ========================================
   RESET & BASE
   ======================================== */

* {
    box-sizing: border-box;
}

/* ========================================
   SIDEBAR INDEXMENU - ULTRA STYLÉE ??
   ======================================== */

/* Container principal de la sidebar */
#dokuwiki__aside,
aside#dokuwiki__aside {
    background: linear-gradient(180deg, #FAFBFC 0%, #F4F5F7 100%) !important;
    border-right: 1px solid var(--border-color) !important;
    padding: 24px 16px !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
    min-height: 100vh;
}

/* Titres de sections */
#dokuwiki__aside h1,
#dokuwiki__aside h2,
#dokuwiki__aside h3,
#dokuwiki__aside h4,
#dokuwiki__aside h5,
#dokuwiki__aside h6 {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--text-light) !important;
    margin: 24px 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--border-color) !important;
}

#dokuwiki__aside h1:first-child,
#dokuwiki__aside h2:first-child {
    margin-top: 0 !important;
}

/* ========================================
   INDEXMENU - STYLE CONFLUENCE MODERNE
   ======================================== */

/* Conteneur IndexMenu */
.plugin_indexmenu_idx,
#dokuwiki__aside .plugin_indexmenu_idx {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* CACHER les icônes moches par défaut */
.plugin_indexmenu_idx img.idx,
.plugin_indexmenu_idx .idx_dir {
    display: none !important;
    visibility: hidden !important;
}

/* Listes - Reset complet */
.plugin_indexmenu_idx ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.plugin_indexmenu_idx ul ul {
    margin-left: 0 !important;
    padding-left: 20px !important;
    margin-top: 4px !important;
    border-left: 2px solid #E1E4E8 !important;
}

.plugin_indexmenu_idx li {
    margin: 2px 0 !important;
    position: relative !important;
}

/* ========================================
   LIENS INDEXMENU - STYLE CONFLUENCE PRO
   ======================================== */

.plugin_indexmenu_idx a {
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    color: var(--text-medium) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
}

/* Hover effect - Gradient Algoria */
.plugin_indexmenu_idx a:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.12) 100%) !important;
    color: var(--accent-purple) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15) !important;
}

/* Page active - Style Confluence + Algoria */
.plugin_indexmenu_idx .curid > a,
.plugin_indexmenu_idx a.curid {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%) !important;
    color: var(--accent-purple) !important;
    font-weight: 600 !important;
    border-left: 4px solid var(--accent-purple) !important;
    padding-left: 10px !important;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2) !important;
}

.plugin_indexmenu_idx .curid > a::after {
    content: "?" !important;
    position: absolute !important;
    right: 14px !important;
    color: var(--accent-purple) !important;
    font-size: 10px !important;
}

/* ========================================
   ICÔNES SVG MODERNES POUR INDEXMENU
   ======================================== */

/* Dossier fermé - Violet */
.plugin_indexmenu_idx .closed > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Dossier ouvert - Rose */
.plugin_indexmenu_idx .open > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ec4899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><path d="M2 9h20"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Page document - Gris */
.plugin_indexmenu_idx li:not(.open):not(.closed) > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    margin-left: 1px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236B778C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Icône devient blanche au hover */
.plugin_indexmenu_idx a:hover::before {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

/* Icône page active reste colorée */
.plugin_indexmenu_idx .curid > a::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b5cf6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>') !important;
}

/* ========================================
   FORMULAIRE DE RECHERCHE DANS SIDEBAR
   ======================================== */

#dokuwiki__aside .search,
#dokuwiki__aside form.search {
    margin: 20px 0 !important;
}

#dokuwiki__aside input[type="text"],
#dokuwiki__aside input.edit {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    background: white !important;
    color: var(--text-dark) !important;
}

#dokuwiki__aside input[type="text"]:focus,
#dokuwiki__aside input.edit:focus {
    outline: none !important;
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
}

#dokuwiki__aside input[type="text"]::placeholder {
    color: var(--text-light) !important;
}

#dokuwiki__aside button,
#dokuwiki__aside input[type="submit"] {
    width: 100% !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 8px !important;
}

#dokuwiki__aside button:hover,
#dokuwiki__aside input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35) !important;
}

/* ========================================
   ADD NEW PAGE PLUGIN
   ======================================== */

.plugin_addnewpage {
    margin: 16px 0 !important;
}

.plugin_addnewpage input[type="text"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

.plugin_addnewpage input[type="text"]:focus {
    outline: none !important;
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
}

.plugin_addnewpage button {
    width: 100% !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.plugin_addnewpage button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35) !important;
}

/* ========================================
   SÉPARATEURS DANS SIDEBAR
   ======================================== */

#dokuwiki__aside hr {
    border: none !important;
    border-top: 2px solid var(--border-color) !important;
    margin: 24px 0 !important;
}

/* ========================================
   NAVBAR CONFLUENCE STYLE
   ======================================== */

.navbar-default,
nav.navbar-default {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.25) !important;
}

.navbar-default .navbar-brand {
    color: white !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 0.5px !important;
}

.navbar-default .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

.navbar-default .navbar-nav > .active > a {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    box-shadow: inset 0 -3px 0 white !important;
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
    background: linear-gradient(to right, var(--bg-lighter), transparent) !important;
    border-left: 4px solid var(--accent-purple) !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
}

.breadcrumb a {
    color: var(--accent-purple) !important;
    font-weight: 500 !important;
}

.breadcrumb > li + li:before {
    content: "›" !important;
    padding: 0 8px !important;
    color: var(--text-light) !important;
}

/* ========================================
   CONTENU PRINCIPAL
   ======================================== */

#dokuwiki__content,
.dw-content {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    padding: 32px !important;
}

/* ========================================
   TITRES DANS LE CONTENU
   ======================================== */

.page h1 {
    color: var(--text-dark) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-left: 5px solid var(--accent-purple) !important;
    padding-left: 16px !important;
    background: linear-gradient(to right, rgba(139, 92, 246, 0.08), transparent) !important;
    border-radius: 4px !important;
}

.page h2 {
    color: var(--text-dark) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid rgba(139, 92, 246, 0.2) !important;
}

.page h3 {
    color: var(--text-dark) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-top: 24px !important;
}

/* ========================================
   LIENS DANS LE CONTENU
   ======================================== */

.page a:not(.btn) {
    color: var(--accent-purple) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    position: relative !important;
}

.page a:not(.btn)::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--accent-purple) !important;
    transition: width 0.3s ease !important;
}

.page a:not(.btn):hover::after {
    width: 100% !important;
}

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

.btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
    color: white !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35) !important;
}

.btn-default {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-default:hover {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

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

table.inline {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

table.inline th {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-lighter) 100%) !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid var(--border-color) !important;
}

table.inline td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bg-light) !important;
}

table.inline tbody tr:hover {
    background: rgba(139, 92, 246, 0.05) !important;
}

/* ========================================
   CODE BLOCKS
   ======================================== */

code {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-lighter) 100%) !important;
    color: var(--danger) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 0.9em !important;
    border: 1px solid var(--border-color) !important;
}

pre {
    background: var(--bg-lighter) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 4px solid var(--accent-purple) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ========================================
   ALERTS / INFO BOXES
   ======================================== */

.alert {
    border-radius: 6px !important;
    border-left: 4px solid !important;
    padding: 16px 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.alert-info {
    background: linear-gradient(135deg, #DEEBFF 0%, #B3D4FF 100%) !important;
    border-left-color: var(--primary-blue) !important;
    color: var(--primary-blue-dark) !important;
}

.alert-success {
    background: linear-gradient(135deg, #E3FCEF 0%, #ABF5D1 100%) !important;
    border-left-color: var(--success) !important;
    color: #006644 !important;
}

.alert-warning {
    background: linear-gradient(135deg, #FFFAE6 0%, #FFF0B3 100%) !important;
    border-left-color: var(--warning) !important;
    color: #974F0C !important;
}

.alert-danger {
    background: linear-gradient(135deg, #FFEBE6 0%, #FFBDAD 100%) !important;
    border-left-color: var(--danger) !important;
    color: #BF2600 !important;
}

/* ========================================
   SCROLLBAR PERSONNALISÉE
   ======================================== */

#dokuwiki__aside::-webkit-scrollbar {
    width: 8px !important;
}

#dokuwiki__aside::-webkit-scrollbar-track {
    background: var(--bg-light) !important;
    border-radius: 4px !important;
}

#dokuwiki__aside::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%) !important;
    border-radius: 4px !important;
}

#dokuwiki__aside::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%) !important;
}

/* Scrollbar globale */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-track {
    background: var(--bg-light) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color) !important;
    border-radius: 5px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light) !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#dokuwiki__content {
    animation: fadeInUp 0.4s ease;
}

#dokuwiki__aside {
    animation: fadeInUp 0.3s ease;
}

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

@media (max-width: 768px) {
    #dokuwiki__aside {
        padding: 16px 12px !important;
        box-shadow: none !important;
    }
    
    .plugin_indexmenu_idx a {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    #dokuwiki__content {
        padding: 20px !important;
        border-radius: 0 !important;
    }
}

/* ========================================
   FOCUS VISIBLE (Accessibilité)
   ======================================== */

*:focus-visible {
    outline: 3px solid var(--accent-purple) !important;
    outline-offset: 2px !important;
}

/* ========================================
   CORRECTIONS SPÉCIFIQUES BOOTSTRAP3
   ======================================== */

/* S'assurer que Bootstrap n'écrase pas nos styles */
body.bootstrap3 #dokuwiki__aside {
    background: linear-gradient(180deg, #FAFBFC 0%, #F4F5F7 100%) !important;
}

body.bootstrap3 .plugin_indexmenu_idx a {
    background: transparent !important;
}

body.bootstrap3 .plugin_indexmenu_idx a:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.12) 100%) !important;
}