/* ================================================================
   DIS/CLOSED — SEARCH.PHP DEDICATED STYLESHEET (v2)
   ================================================================
   Chargé UNIQUEMENT sur search.php. Reprend le langage visuel réel du
   forum (bandeau catégorie diagonal, dégradé violet→vert amande
   --accent1→--accent4, badges colorés, tabs pilule, cartes à pastille +
   boîtes de stats) plutôt qu'une esthétique HUD générique. Aucune
   variable n'est redéfinie ici, tout vient de extra.css déjà chargé.

   Sommaire :
     1. Page wrapper
     2. Bandeau catégorie (signature — repris du header de forum)
     3. Formulaire — panneau + badges de section
     4. Tabs pilule (radios stylées en toggle, avec <label> associés)
     5. Liste de forums ({$srchlist}) + zone d'envoi
     6. Résultats — structure commune (barre de tri)
     7. Résultats — carte de résultat (sujets + messages)
     8. Icônes de statut
     9. État vide / aucun résultat
     10. Responsive
   ================================================================ */


/* ============================================================
   1. PAGE WRAPPER
   ============================================================ */
.dc-search-page {
    max-width: 1300px;
    margin: 30px auto;
    padding: 0 4px;
    color: var(--white1);
    font-family: var(--font1);
}


/* ============================================================
   2. BANDEAU CATÉGORIE — élément signature
   Reprend exactement la recette visuelle du header de forum existant
   (.topiclist .header / .table-title-back / .ttb-icon) : moitié sombre
   avec grand numéro fantôme + titre, moitié dégradée arrondie avec
   pastille inclinée. Implémenté en classes propres (pas de dépendance
   à #cat1) pour rester isolé à cette page.
   ============================================================ */
.dc-search-banner {
    display: flex;
    align-items: stretch;
    height: 96px;
    border: 1px solid var(--dark3);
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 26px;
    background: #232322;
}

.dc-search-banner-title {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 32px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.dc-search-banner-title b {
    position: absolute;
    left: 10px;
    font-family: var(--font3, var(--font2));
    font-size: 70px;
    color: #181818;
    line-height: 1;
    pointer-events: none;
}

.dc-search-banner-title span {
    position: relative;
    z-index: 1;
    font-family: var(--font2);
    color: var(--white);
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dc-search-banner-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--grad1);
    padding: 0 40px 0 50px;
    border-radius: 50px 30px 30px 50px;
}

.dc-search-banner-icon {
    border: 1px solid var(--white1);
    height: 54px;
    width: 48px;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transform: skewX(-10deg);
    font-family: var(--font4, monospace);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.dc-search-banner-icon span { display: inline-block; transform: skewX(10deg); }

.dc-search-banner-note {
    font-family: var(--font1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    white-space: nowrap;
}


/* ============================================================
   3. FORMULAIRE — PANNEAU + BADGES DE SECTION
   ============================================================ */
.dc-search-panel {
    background: var(--dark, #1C1A1F);
    border: 1px solid var(--dark3);
    border-radius: 22px;
    padding: 32px 34px 36px;
}

/* Toutes les tables internes MyBB restent des tables normales — on ne
   touche qu'au style des cellules, pas à la structure ligne/colonne
   (le rowspan de la liste de forums reste donc intact). */
.dc-search-panel table.tborder {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.dc-search-title { display: none; } /* le titre "Recherche" est déjà porté par le bandeau catégorie */

.dc-search-label {
    padding: 0 0 8px !important;
    background: transparent !important;
    border: none !important;
}

.dc-search-tag {
    display: inline-block;
    background: var(--accent2);
    color: #fff;
    font-family: var(--font1);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 999px;
}

.dc-search-block {
    background: #18161B;
    border: 1px solid var(--dark3);
    border-radius: 16px;
    padding: 18px 20px;
}

.dc-search-page input[name="keywords"],
.dc-search-page #author {
    width: 100%;
}

.dc-search-block .dc-field-row { margin-bottom: 14px; }
.dc-search-block .dc-field-row:last-child { margin-bottom: 0; }

.dc-search-block select + input[type="text"] { margin-left: 8px; }


/* ============================================================
   4. TABS PILULE (radios → toggles avec <label for="">)
   Reprend le langage des tabs de districts de la page d'accueil.
   ============================================================ */
.dc-toggle-group {
    display: inline-flex;
    flex-wrap: wrap;
    background: var(--dark2, #232322);
    border: 1px solid var(--dark3);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.dc-toggle-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.dc-toggle-group label {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: var(--font1);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--white1);
    cursor: pointer;
}

.dc-toggle-group input[type="radio"]:checked + label {
    background: var(--grad1);
    color: #fff;
}

.dc-toggle-group input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}

/* Checkbox restant (matchusername) : garde le style global déjà
   défini dans extra.css, on ajoute juste un peu d'air avec son label */
.dc-search-page .dc-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white1);
    cursor: pointer;
}


/* ============================================================
   5. LISTE DE FORUMS + ZONE D'ENVOI
   ============================================================ */
.dc-search-forums {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 10px;
    font-family: var(--font1);
    font-size: 12px;
    line-height: 2.1;
}
.dc-search-forums strong,
.dc-search-forums b {
    display: block;
    margin: 14px 0 4px;
    font-family: var(--font2);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent4);
}
.dc-search-forums strong:first-child,
.dc-search-forums b:first-child { margin-top: 0; }

.dc-search-submit {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.dc-search-submit input[type="submit"] {
    min-width: 240px;
    background: var(--grad1) !important;
    border: none !important;
    color: var(--dark) !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 13px 30px !important;
}


/* ============================================================
   6. RÉSULTATS — STRUCTURE COMMUNE
   ============================================================ */
.dc-search-results-wrap { margin-top: 30px; }
.dc-search-results-wrap img { max-width: 100%; }

.dc-search-multipage {
    font-family: var(--font1);
    font-size: 11px;
    color: #8f8ea8;
    margin-bottom: 12px;
}

.dc-search-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    display: block;
}
.dc-search-table tbody { display: block; }

/* Barre de tri : la ligne .tcat d'origine devient une rangée de
   pastilles (même idiome que .sortoptions sur forumdisplay). En
   flex-nowrap + scroll horizontal plutôt qu'un wrap qui casserait la
   lecture sur 2 lignes inégales si le contenu dépasse (ex. colonne de
   modération visible uniquement pour le staff). */
.dc-search-table .dc-sr-sortrow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 2px;
}
.dc-search-table .dc-sr-sortrow td {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto !important; /* neutralise les width="56%"/"14%"/"200"
                                hérités du tableau d'origine, qui sinon
                                continuent de s'appliquer même en flex
                                et font déborder toute la barre */
    white-space: nowrap;
    background: var(--dark1, #292929) !important;
    border-radius: 999px;
    padding: 6px 14px;
}
.dc-search-table .dc-sr-sortrow .smalltext,
.dc-search-table .dc-sr-sortrow strong {
    font-family: var(--font1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dc-search-table .dc-sr-sortrow a { color: var(--white1); text-decoration: none; }
.dc-search-table .dc-sr-sortrow a:hover { color: var(--accent4); }

/* Colonne "tout sélectionner" ({$inlinemodcol}), visible uniquement
   pour le staff — pastille compacte au lieu du gros padding par
   défaut, pour ne pas ressembler à un bout d'interface cassé. */
.dc-search-table .dc-sr-sortrow td:has(input[type="checkbox"]) {
    padding: 6px 10px;
    gap: 6px;
}
.dc-search-table .dc-sr-sortrow input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}


/* ============================================================
   7. CARTE DE RÉSULTAT (sujets + messages)
   Flex plutôt que grid : se replie naturellement (flex-wrap) sans
   media query dédiée pour la structure de base.
   ============================================================ */
.dc-search-table .dc-searchrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: #18161B;
    border: 1px solid var(--dark3);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.dc-search-table .dc-searchrow > td {
    display: block;
    padding: 0;
    background: transparent !important;
    border: none;
}

/* Pas d'icône de statut : la cellule existe toujours dans le HTML
   (MyBB a besoin de {$folder} pour sa logique interne) mais on la
   masque complètement — display:none la retire aussi du flux flex,
   donc pas de trou/espace vide à sa place. */
.dc-sr-status { display: none; }

.dc-sr-icon { display: none; } /* icône de type de sujet, masquée aussi */
.dc-sr-icon img { max-width: 18px; height: auto; }

/* Corps principal (titre + méta) */
.dc-sr-main,
.dc-sr-post-main {
    flex: 1 1 320px;
    min-width: 0;
}

.dc-sr-title {
    display: block;
    font-family: var(--font2);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--white);
    text-decoration: none;
    word-break: break-word;
}
.dc-sr-title:hover { color: var(--accent4); }

.dc-sr-main .author {
    margin-top: 5px;
    font-family: var(--font1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8f8ea8;
}
.dc-sr-main .author a { text-decoration: none; }

/* Forum d'origine — petit badge discret plutôt qu'une colonne dédiée */
.dc-sr-forum {
    flex: 0 0 auto;
    font-family: var(--font1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dc-sr-forum a {
    display: inline-block;
    background: var(--dark2);
    border: 1px solid var(--dark3);
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--white1);
    text-decoration: none;
}
.dc-sr-forum a:hover { border-color: var(--accent4); color: var(--accent4); }

/* Boîtes de stats — reprend exactement le motif "175 / SUJETS" de la
   page d'accueil (nombre en gras au-dessus, libellé minuscule dessous) */
.dc-sr-replies,
.dc-sr-views {
    flex: 0 0 auto;
    width: 74px;
    background: var(--dark2);
    border: 1px solid var(--dark3);
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
}
.dc-sr-replies a,
.dc-sr-views { color: var(--white); text-decoration: none; }
.dc-stat-num {
    display: block;
    font-family: var(--font4, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
}
.dc-stat-label {
    display: block;
    margin-top: 2px;
    font-family: var(--font1);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8f8ea8;
}

/* Dernier message */
.dc-sr-lastpost {
    flex: 0 0 auto;
    min-width: 150px;
    text-align: right;
    font-family: var(--font1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8f8ea8;
}
.dc-sr-lastpost .dc-goto-link { color: var(--white); text-decoration: none; }
.dc-sr-lastpost .dc-goto-link:hover { color: var(--accent4); }
.dc-sr-lastpost a { text-decoration: none; }

/* Couleur de groupe explicite — {$lastposterlink}/{$profilelink} ne
   portent aucune couleur par défaut dans search.php (contrairement à
   forumdisplay où un mécanisme dédié l'injecte). On l'applique donc
   nous-mêmes avec la donnée déjà résolue par le plugin. !important
   nécessaire pour battre la règle globale du site "a:link{color:white}"
   qui, sans ça, gagnerait sur le lien lui-même. */
.dc-groupcolor,
.dc-groupcolor a {
    color: var(--dc-gc, inherit) !important;
}

/* Colonne dédiée, tout à droite de la carte : avatar du dernier
   posteur, même technique de bordure en dégradé pilotée par
   --group-color que .lastpostavatar ailleurs sur le forum. */
.dc-sr-avatar-cell {
    flex: 0 0 auto;
    order: -1;
    display: flex;
    align-items: center;
}
.dc-lastpost-avatar {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 13px;
    overflow: hidden; /* filet de sécurité : même si l'image interne
                          déborde pour une raison quelconque, elle est
                          rognée à cette boîte de 50x50 et ne peut plus
                          jamais "casser" la mise en page. */
}
.dc-lastpost-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--group-color, var(--accent1)), color-mix(in srgb, var(--group-color, var(--accent1)) 50%, black));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
.dc-lastpost-avatar img {
    display: block;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 11px;
    object-fit: cover;
}

/* Variante "message" : sujet parent + extrait */
.dc-sr-post-main .dc-sr-thread-of {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8f8ea8;
}
.dc-sr-post-main .dc-sr-thread-of a { color: var(--white1); text-decoration: none; }

.dc-sr-post-main .dc-sr-subject-label {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    text-transform: uppercase;
    color: #8f8ea8;
}
.dc-sr-post-main .dc-sr-subject {
    font-family: var(--font2);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
}
.dc-sr-post-main .dc-sr-subject:hover { color: var(--accent4); }

.dc-sr-post-main .dc-sr-excerpt {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #8f8ea8;
    line-height: 1.5;
}
.dc-sr-post-main .dc-sr-excerpt em { color: var(--white1); font-style: normal; }

.dc-sr-author {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font1);
    font-size: 10px;
    text-transform: uppercase;
}
.dc-sr-author a { text-decoration: none; }

.dc-sr-posted {
    flex: 0 0 auto;
    min-width: 130px;
    text-align: right;
    font-family: var(--font1);
    font-size: 10px;
    text-transform: uppercase;
    color: #8f8ea8;
}


/* ============================================================
   8. ICÔNES DE STATUT
   ============================================================ */
.dc-search-results-wrap .thread_status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
}
.dc-search-results-wrap .thread_status::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    line-height: 1;
    content: "\f4ad";
}
.dc-search-results-wrap .thread_status.closefolder::before { content: "\f023"; }


/* ============================================================
   9. ÉTAT VIDE / AUCUN RÉSULTAT (défensif)
   ============================================================ */
body.search #return_message,
body.search .error,
.dc-search-page + .error,
.dc-search-page ~ #return_message {
    max-width: 640px;
    margin: 40px auto;
    padding: 34px 30px;
    background: var(--dark, #1C1A1F);
    border: 1px solid var(--dark3);
    border-radius: 18px;
    text-align: center;
    font-family: var(--font1);
    color: var(--white1);
}
body.search .error img,
body.search #return_message img { display: none; }
body.search .error::before,
body.search #return_message::before {
    content: "AUCUN RÉSULTAT";
    display: block;
    margin-bottom: 10px;
    font-family: var(--font2);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent4);
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
    .dc-search-banner { height: auto; flex-direction: column; border-radius: 20px; }
    .dc-search-banner-title { padding: 18px 20px; }
    .dc-search-banner-tabs { border-radius: 0 0 20px 20px; padding: 14px 20px; justify-content: center; }

    .dc-search-panel { padding: 20px; }

    .dc-sr-forum, .dc-sr-lastpost, .dc-sr-posted, .dc-sr-author {
        flex-basis: 100%;
        text-align: left;
    }
    .dc-search-table .dc-searchrow { padding: 14px; }
}