/*
 * Vintage Audio Laser — adaptation des thèmes Flarum natifs
 * Thèmes concernés : light / dark uniquement.
 * La géométrie est définie dans val-layout.css.
 */

/* Accent général cohérent avec VAL, indépendamment de l'ancienne palette admin. */
html[data-theme="light"] {
    --primary-color: #5f666a !important;
    --secondary-color: #5f666a !important;
    --link-color: #50595e !important;
}

html[data-theme="dark"] {
    --primary-color: #929ba1 !important;
    --secondary-color: #929ba1 !important;
    --link-color: #d5dce0 !important;

    --body-bg: #121619 !important;
    --body-bg-shaded: #0d1013 !important;
    --body-bg-light: #1b2126 !important;

    --text-color: #e7ecef !important;
    --heading-color: #f3f5f6 !important;

    --muted-color: #a4adb3 !important;
    --muted-color-light: #bac2c7 !important;
    --muted-color-dark: #7f898f !important;

    --control-bg: #252c31 !important;
    --control-bg-light: #2d363c !important;
    --control-bg-shaded: #1c2227 !important;
    --control-color: #bcc5ca !important;

    --button-color: #c8d0d5 !important;
    --button-bg: #252c31 !important;
    --button-bg-hover: #303940 !important;
    --button-bg-active: #39434a !important;

    --button-primary-color: #fff !important;
    --button-primary-bg: #697278 !important;
    --button-primary-bg-hover: #7a848b !important;
    --button-primary-bg-active: #858f96 !important;
}

/* =========================================================
   /tags — supprimer les gros aplats de couleur natifs
   ========================================================= */

html[data-theme="light"] .TagsPage .TagTile,
html[data-theme="dark"] .TagsPage .TagTile {
    background: var(--body-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--control-bg) !important;
    border-radius: 7px;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}

html[data-theme="light"] .TagsPage .TagTile:hover {
    background: #fafafa !important;
    border-color: #cfd3d5 !important;
}

html[data-theme="dark"] .TagsPage .TagTile:hover {
    background: var(--body-bg-light) !important;
    border-color: var(--control-color) !important;
}

/* Flarum applique normalement une couleur de texte de contraste aux cartes
   colorées. Ici le fond est neutralisé, donc le texte redevient celui du thème. */
html[data-theme="light"] .TagsPage .TagTile.colored,
html[data-theme="light"] .TagsPage .TagTile.colored a,
html[data-theme="dark"] .TagsPage .TagTile.colored,
html[data-theme="dark"] .TagsPage .TagTile.colored a,
html[data-theme="light"] .TagsPage .text-contrast--light,
html[data-theme="light"] .TagsPage .text-contrast--light a,
html[data-theme="dark"] .TagsPage .text-contrast--light,
html[data-theme="dark"] .TagsPage .text-contrast--light a {
    color: var(--text-color) !important;
}

html[data-theme="light"] .TagsPage .TagTile-name,
html[data-theme="light"] .TagsPage .TagTile-name a,
html[data-theme="light"] .TagsPage .TagTile-heading,
html[data-theme="light"] .TagsPage .TagTile-heading a,
html[data-theme="dark"] .TagsPage .TagTile-name,
html[data-theme="dark"] .TagsPage .TagTile-name a,
html[data-theme="dark"] .TagsPage .TagTile-heading,
html[data-theme="dark"] .TagsPage .TagTile-heading a {
    color: var(--heading-color) !important;
}

html[data-theme="light"] .TagsPage .TagTile-description,
html[data-theme="light"] .TagsPage .TagTile-lastPostedDiscussion,
html[data-theme="dark"] .TagsPage .TagTile-description,
html[data-theme="dark"] .TagsPage .TagTile-lastPostedDiscussion {
    color: var(--muted-color) !important;
}

html[data-theme="light"] .TagsPage .TagTile-children a,
html[data-theme="dark"] .TagsPage .TagTile-children a {
    color: var(--text-color) !important;
    background: var(--control-bg) !important;
}

html[data-theme="light"] .TagsPage .TagTile-children a:hover,
html[data-theme="dark"] .TagsPage .TagTile-children a:hover {
    color: var(--link-color) !important;
    background: var(--control-bg-light) !important;
}

html[data-theme="light"] .TagsPage .TagTile-lastPostedDiscussion,
html[data-theme="dark"] .TagsPage .TagTile-lastPostedDiscussion {
    border-top-color: var(--control-bg) !important;
}

/* Petit repère : on conserve la couleur du tag uniquement sous forme de point. */
html[data-theme="light"] .TagsPage .TagTile-name::before,
html[data-theme="dark"] .TagsPage .TagTile-name::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    margin-bottom: 3px;
    border-radius: 50%;
    background: var(--tag-bg, var(--primary-color));
    opacity: .7;
}

/* =========================================================
   SOMBRE NATIF — CONTRASTE RENFORCÉ
   Uniquement visuel : aucune géométrie ici.
   ========================================================= */

html[data-theme="dark"] body,
html[data-theme="dark"] .App-content {
    background: #121619;
    color: var(--text-color);
}

html[data-theme="dark"][data-colored-header="true"] .App-header {
    --header-bg: #626a70 !important;
    --header-color: #ffffff !important;
    --header-control-bg: rgba(255, 255, 255, .10) !important;
    --header-control-color: #eef2f4 !important;
}

/* Cartes /tags : fond légèrement détaché du fond de page,
   avec une vraie bordure visible. */
html[data-theme="dark"] .TagsPage .TagTile {
    background: #171c20 !important;
    border-color: #333d44 !important;
}

html[data-theme="dark"] .TagsPage .TagTile:hover {
    background: #1c2328 !important;
    border-color: #4b575f !important;
}

html[data-theme="dark"] .TagsPage .TagTile-name,
html[data-theme="dark"] .TagsPage .TagTile-name a,
html[data-theme="dark"] .TagsPage .TagTile-heading,
html[data-theme="dark"] .TagsPage .TagTile-heading a {
    color: #f2f5f7 !important;
}

html[data-theme="dark"] .TagsPage .TagTile-description {
    color: #aeb7bd !important;
}

html[data-theme="dark"] .TagsPage .TagTile-lastPostedDiscussion {
    color: #9ea8ae !important;
    border-top-color: #333d44 !important;
}

html[data-theme="dark"] .TagsPage .TagTile-children a {
    background: #242c31 !important;
    border: 1px solid #354048;
    color: #e5eaed !important;
}

html[data-theme="dark"] .TagsPage .TagTile-children a:hover {
    background: #303940 !important;
    border-color: #4b575f;
    color: #ffffff !important;
}

/* Menus et boutons : conserver la palette sombre mais éviter
   les gris presque noirs sur gris presque noir. */
html[data-theme="dark"] .Dropdown-menu {
    background: #1a2025;
    border-color: #384249;
}

html[data-theme="dark"] .Dropdown-menu a,
html[data-theme="dark"] .Dropdown-menu .Button {
    color: #d9e0e4;
}

html[data-theme="dark"] .Dropdown-menu a:hover,
html[data-theme="dark"] .Dropdown-menu .Button:hover {
    background: #293137;
    color: #ffffff;
}

html[data-theme="dark"] .Button {
    border-color: #39444b;
}

html[data-theme="dark"] .Button--primary {
    border-color: #697278;
}