/* ============================================================
   DDS Cloud — Theme inspiré de DDS Factures
   Palette : blanc cassé chaud, accent bleu marine, typo Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+Pro:wght@600;700&display=swap');

:root,
body,
body[data-theme-default],
body[data-theme-light] {
    /* Une seule teinte chaude unifiée — pas de variations */
    --dds-bg-app: #FAFAF7;
    --dds-bg-surface: #FAFAF7;
    --dds-bg-surface-alt: #FAFAF7;
    --dds-bg-row-hover: #F0EFEA;
    --dds-border-fine: #E6E4DE;
    --dds-border-strong: #D4D1C8;
    --dds-text-primary: #1A1A1A;
    --dds-text-secondary: #5C5A55;
    --dds-text-tertiary: #8B8780;
    --dds-accent: #1F3A5F;
    --dds-accent-hover: #182E4B;
    --dds-accent-soft: #EAF0F7;
    --dds-brass: #7A6A4F;
    --dds-success: #2F6F4E;
    --dds-warning: #A66A1E;
    --dds-danger: #9B2C2C;

    --color-main-background: var(--dds-bg-app) !important;
    --color-main-background-rgb: 250, 250, 247 !important;
    --color-main-background-translucent: rgba(250, 250, 247, 0.97) !important;
    --color-main-background-blur: rgba(250, 250, 247, 0.85) !important;

    --color-background-hover: var(--dds-bg-row-hover) !important;
    --color-background-dark: var(--dds-bg-surface-alt) !important;
    --color-background-darker: var(--dds-border-fine) !important;
    --color-background-plain: var(--dds-bg-surface) !important;

    --color-main-text: var(--dds-text-primary) !important;
    --color-text-light: var(--dds-text-primary) !important;
    --color-text-maxcontrast: var(--dds-text-secondary) !important;
    --color-text-lighter: var(--dds-text-tertiary) !important;

    --color-border: var(--dds-border-fine) !important;
    --color-border-dark: var(--dds-border-strong) !important;
    --color-border-maxcontrast: var(--dds-border-strong) !important;

    --color-primary: var(--dds-accent) !important;
    --color-primary-default: var(--dds-accent) !important;
    --color-primary-element: var(--dds-accent) !important;
    --color-primary-element-hover: var(--dds-accent-hover) !important;
    --color-primary-element-light: var(--dds-accent-soft) !important;
    --color-primary-element-text: #ffffff !important;
    --color-primary-text: #ffffff !important;
    --color-primary-light: var(--dds-accent-soft) !important;
    --color-primary-hover: var(--dds-accent-hover) !important;

    --color-success: var(--dds-success) !important;
    --color-warning: var(--dds-warning) !important;
    --color-error: var(--dds-danger) !important;

    --border-radius: 4px !important;
    --border-radius-large: 6px !important;
    --border-radius-rounded: 8px !important;
    --border-radius-element: 6px !important;
    --border-radius-element-large: 8px !important;
    --border-radius-container: 8px !important;
    --border-radius-container-large: 12px !important;

    --font-face: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --default-font-size: 13px !important;
}

body,
#body-user,
#body-login,
#body-public {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    color: var(--dds-text-primary) !important;
    background: var(--dds-bg-app) !important;
}

h1, h2, h3, h4, h5 {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--dds-text-primary) !important;
}

/* ============================================================
   PAGE DE CONNEXION
   ============================================================ */

#body-login {
    background: var(--dds-bg-app) !important;
    background-image:
        radial-gradient(at 20% 10%, rgba(31, 58, 95, 0.04) 0%, transparent 50%),
        radial-gradient(at 80% 80%, rgba(122, 106, 79, 0.04) 0%, transparent 50%) !important;
    min-height: 100vh !important;
}

#body-login .wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 24px !important;
}

#body-login .v-align {
    width: 100% !important;
    max-width: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
}

/* Reset des wrappers : pas de cadre */
#body-login .guest-content,
#body-login .body-login-container,
#body-login form.login-form,
#body-login #login {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Header : logo "D" centré et stylé */
#body-login header {
    margin-bottom: 24px !important;
    text-align: center !important;
    width: 100% !important;
    background: transparent !important;
}

#body-login header .header-guest {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
}

#body-login header .logo {
    background-image: none !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    background: var(--dds-text-primary) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Source Serif Pro', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    position: relative !important;
}

#body-login header .logo::after {
    content: 'D';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Source Serif Pro', Georgia, serif;
    font-weight: 700;
    font-size: 22px;
}

#body-login header h1.hidden-visually {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* La VRAIE card : on cible le formulaire Vue à l'intérieur de #login */
#body-login #login > div,
#body-login #login form,
#body-login .login-content {
    background: var(--dds-bg-surface) !important;
    border: 1px solid var(--dds-border-fine) !important;
    border-radius: 6px !important;
    padding: 32px !important;
    box-shadow:
        0 1px 0 var(--dds-border-fine),
        0 14px 40px -16px rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Mais on évite la double bordure si le form est imbriqué */
#body-login #login > div > div,
#body-login #login > div form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Inputs login */
#body-login input[type="text"],
#body-login input[type="email"],
#body-login input[type="password"],
#body-login .input-field input {
    border: 1px solid var(--dds-border-fine) !important;
    background: var(--dds-bg-surface) !important;
    border-radius: 4px !important;
    padding: 0 12px !important;
    height: 36px !important;
    font-size: 13px !important;
    color: var(--dds-text-primary) !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
}

#body-login input:focus,
#body-login .input-field input:focus {
    border-color: var(--dds-accent) !important;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.08) !important;
    outline: none !important;
}

/* Boutons login : primaire = login, secondaires = passkey/forgot */
#body-login .button-vue--vue-primary,
#body-login button[type="submit"] {
    background: var(--dds-accent) !important;
    color: white !important;
    height: 36px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border: 1px solid var(--dds-accent) !important;
    width: 100% !important;
    transition: background 0.08s !important;
}

#body-login .button-vue--vue-primary:hover {
    background: var(--dds-accent-hover) !important;
    border-color: var(--dds-accent-hover) !important;
}

#body-login .button-vue--vue-tertiary,
#body-login .button-vue--vue-tertiary-no-background {
    color: var(--dds-text-secondary) !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

#body-login .button-vue--vue-tertiary:hover,
#body-login .button-vue--vue-tertiary-no-background:hover {
    color: var(--dds-accent) !important;
    background: transparent !important;
}

/* Footer */
#body-login footer.guest-box,
#body-login footer {
    margin-top: 24px !important;
    padding: 16px 0 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-top: 1px solid var(--dds-border-fine) !important;
    width: 100% !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#body-login footer .info,
#body-login footer p {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    color: var(--dds-text-tertiary) !important;
}

#body-login footer a {
    color: var(--dds-text-secondary) !important;
    font-size: 11px !important;
    text-decoration: none !important;
}

/* ============================================================
   APP UI — HEADER (fond bleu marine DDS, contenu blanc forcé)
   ============================================================ */

#header,
header#header,
.header-left,
header[role="banner"] {
    background: var(--dds-accent) !important;
    background-color: var(--dds-accent) !important;
    height: 50px !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;

    /* Override des variables Nextcloud utilisées pour les éléments du header */
    --color-background-plain: var(--dds-accent) !important;
    --color-background-plain-text: #FFFFFF !important;
    --color-primary: var(--dds-accent) !important;
    --color-primary-text: #FFFFFF !important;
    --color-primary-element: var(--dds-accent) !important;
    --color-primary-element-text: #FFFFFF !important;
    --color-main-text: #FFFFFF !important;
    --color-text-maxcontrast: rgba(255, 255, 255, 0.7) !important;
}

/* Éléments directs de la barre — JAMAIS les panneaux déroulants */
#header > *,
#header .header-start > *,
#header .header-end > *,
#header .header-start *:not(.header-menu__content):not(.header-menu__content *):not(.popovermenu):not(.popovermenu *),
#header .header-end *:not(.header-menu__content):not(.header-menu__content *):not(.popovermenu):not(.popovermenu *) {
    color: #FFFFFF !important;
}

/* Remise à zéro explicite des panneaux dropdown depuis le header */
#header .header-menu__content,
#header .header-menu__content *,
#header .header-menu .menu,
#header .header-menu .menu * {
    color: var(--dds-text-primary) !important;
}

#header .header-menu__content svg,
#header .header-menu__content svg *,
#header .header-menu .menu svg,
#header .header-menu .menu svg * {
    fill: var(--dds-text-primary) !important;
    stroke: none !important;
    color: var(--dds-text-primary) !important;
    filter: none !important;
}

#header .header-menu__content,
#header .header-menu .menu {
    background: var(--dds-bg-surface) !important;
    border: 1px solid var(--dds-border-fine) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(26, 26, 26, 0.12) !important;
}

/* SVG : forcer fill et stroke en blanc */
#header svg,
#header svg *,
#header .header-menu__trigger svg,
#header .button-vue svg,
#header .app-menu-entry svg,
#header .app-menu-icon svg,
#header .unified-search__form svg,
#header .header-right svg,
#header .header-left svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Logo Nextcloud principal : on l'éclaircit */
#header #nextcloud,
#header .header-appname-container,
#header .logo,
#header .logo-icon,
#header img.app-icon,
#header svg.app-icon {
    filter: brightness(0) invert(1) !important;
}

/* Icônes des apps dans la barre du header */
#header .app-menu-entry,
#header .app-menu-entry .app-menu-icon,
#header nav.app-menu li img,
#header nav.app-menu li svg {
    color: #FFFFFF !important;
}

#header .app-menu-entry {
    opacity: 0.88 !important;
    border-radius: 8px !important;
    transition: background-color 0.12s ease, opacity 0.12s ease !important;
}

#header .app-menu-entry:hover,
#header .app-menu-entry:focus-within,
#header .app-menu-entry--active {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

#header nav.app-menu li img,
#header nav.app-menu li svg path,
#header nav.app-menu .app-menu-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Pas de libellé sous l’icône (le tooltip NcTooltip suffit) */
#header .app-menu-entry__label,
#header nav.app-menu .app-menu-entry__label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

/* Nextcloud ajoute margin-block-end: 1lh sur l’icône au survol pour « soulever »
   l’icône et afficher le nom en dessous — inutile ici (libellé masqué) */
#header .app-menu-entry:hover .app-menu-entry__icon,
#header .app-menu-entry:focus-within .app-menu-entry__icon,
#header .app-menu__list:hover .app-menu-entry__icon,
#header .app-menu__list:focus-within .app-menu-entry__icon {
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
    transform: none !important;
}

/* Champ de recherche dans le header */
#header .unified-search__form input,
#header input.unified-search__form-input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#header input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Boutons du header (notifications, contacts, paramètres) */
#header .header-menu__trigger,
#header button.header-menu__trigger {
    background: transparent !important;
    color: #FFFFFF !important;
}

#header .header-menu__trigger:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

#header .header-menu__trigger:hover svg {
    filter: brightness(0) invert(1) !important;
}

/* Avatar utilisateur en haut à droite */
#header .header-menu__trigger .avatardiv {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Badge notifications */
#header .notification-badge,
#header .notification-counter {
    background: var(--dds-danger) !important;
    color: #FFFFFF !important;
}

/* Navigation principale (apps) — sidebar gauche */
#app-navigation,
.app-navigation,
nav.app-navigation,
.app-navigation__list,
.app-navigation-vue {
    background: var(--dds-bg-surface) !important;
    background-color: var(--dds-bg-surface) !important;
    border-right: 1px solid var(--dds-border-fine) !important;
}

#app-navigation li a,
.app-navigation-entry-link,
.app-navigation-entry__link {
    border-radius: 4px !important;
    font-size: 13px !important;
    color: var(--dds-text-secondary) !important;
}

#app-navigation li.active > a,
.app-navigation-entry.active,
.app-navigation-entry--active {
    background: var(--dds-accent-soft) !important;
    color: var(--dds-accent) !important;
    font-weight: 500 !important;
}

/* Footer de la sidebar (paramètres, espace utilisé) */
.app-navigation > footer,
.app-navigation-settings,
.app-navigation__settings {
    background: var(--dds-bg-surface) !important;
    border-top: 1px solid var(--dds-border-fine) !important;
}

#app-content,
#content,
main {
    background: var(--dds-bg-app) !important;
    color: var(--dds-text-primary) !important;
}

/* Footer du tableau "X fichiers · X dossiers" — même teinte que le reste */
.files-list__footer,
tfoot.files-list__tfoot,
.files-list tfoot td,
.files-list tfoot,
.files-list tfoot tr,
.files-list tfoot tr td {
    background: var(--dds-bg-app) !important;
    background-color: var(--dds-bg-app) !important;
    border-top: 1px solid var(--dds-border-fine) !important;
    color: var(--dds-text-secondary) !important;
    font-size: 12px !important;
}

/* ============================================================
   UNIFICATION DES SURFACES — Pas de nuances entre les zones
   Tout en beige #FAFAF7 sauf les hovers et highlights
   ============================================================ */

/* Force tous les conteneurs principaux à la même teinte */
body,
#body-user,
#content,
#content-vue,
main,
#app-content,
#app-content-vue,
.app-content,
#app-navigation,
.app-navigation,
nav.app-navigation,
.app-navigation__list,
.app-navigation > footer,
.app-navigation-settings,
.app-navigation__settings,
.files-list,
.files-list__table,
.files-list__thead,
.files-list__tbody,
table.files-list__table,
.files-list-virtual {
    background: var(--dds-bg-app) !important;
    background-color: var(--dds-bg-app) !important;
}

/* Les rows de fichiers : même teinte aussi (sauf hover) */
.files-list__row,
tr.files-list__row {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override de la variable Nextcloud "background-plain" qui crée souvent des nuances */
body, #content {
    --color-background-plain: var(--dds-bg-app) !important;
    --color-background-hover: var(--dds-bg-row-hover) !important;
    --color-background-dark: var(--dds-bg-app) !important;
    --color-background-darker: var(--dds-border-fine) !important;
}

/* ============================================================
   DASHBOARD — Désactive le background coloré, force fond clair
   ============================================================ */

body.dashboard--dark,
#body-user.dashboard--dark,
[data-themes] {
    --image-background: none !important;
}

.dashboard,
#app-dashboard,
.dashboard-grid {
    background: var(--dds-bg-app) !important;
    background-image: none !important;
}

.dashboard__greeting h2,
.dashboard h2,
.dashboard__greeting,
.greeting {
    color: var(--dds-text-primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.panel,
.panel__content,
.panel--rounded,
.dashboard-panel,
.dashboard-panel--rounded,
.dashboard-panel__list,
.app-content-list-item,
.widget-default,
.widget {
    background: var(--dds-bg-surface) !important;
    background-color: var(--dds-bg-surface) !important;
    border: 1px solid var(--dds-border-fine) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 0 var(--dds-border-fine) !important;
    color: var(--dds-text-primary) !important;
}

.panel h2,
.panel__header,
.dashboard-panel h2 {
    color: var(--dds-text-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.panel__content,
.panel a,
.dashboard-panel * {
    color: var(--dds-text-primary) !important;
}

.empty-content,
.empty-content__title,
.empty-content__description {
    color: var(--dds-text-secondary) !important;
}

.empty-content__icon svg {
    color: var(--dds-text-tertiary) !important;
    opacity: 0.6 !important;
}

/* Widget météo dans le header */
.weather-status-menu-item__trigger,
button.weather-status-menu-item__trigger {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* Bouton "Personnaliser" du dashboard */
.button-vue.button-vue--vue-secondary,
.dashboard__customize-button {
    background: var(--dds-bg-surface) !important;
    color: var(--dds-text-primary) !important;
    border: 1px solid var(--dds-border-fine) !important;
}

/* ============================================================
   FICHIERS / LISTES
   ============================================================ */

.files-list,
table.list,
.file-row {
    background: var(--dds-bg-surface) !important;
    color: var(--dds-text-primary) !important;
}

.files-list__row:hover,
.file-row:hover,
.files-list tbody tr:hover {
    background: var(--dds-bg-row-hover) !important;
}

/* Bouton "+ Nouveau" dans Files — uniquement le déclencheur */
.upload-picker > .button-vue,
.upload-picker > button.button-vue--vue-primary,
.files-list__header-create-new,
.files-list__header > .button-vue--vue-primary {
    background: var(--dds-accent) !important;
    color: white !important;
    border: 1px solid var(--dds-accent) !important;
    border-radius: 4px !important;
}

.upload-picker > .button-vue:hover,
.upload-picker > button.button-vue--vue-primary:hover,
.files-list__header-create-new:hover {
    background: var(--dds-accent-hover) !important;
    border-color: var(--dds-accent-hover) !important;
}

/* Entrées du menu "+ Nouveau" — fond clair, texte sombre */
.upload-picker__menu-entry,
.upload-picker .upload-picker__menu-entry {
    background: transparent !important;
    color: var(--dds-text-primary) !important;
    border: none !important;
}

.upload-picker__menu-entry:hover {
    background: rgba(31, 58, 95, 0.07) !important;
    color: var(--dds-text-primary) !important;
}

/* Icônes dossiers : transforme le cyan Nextcloud (#0082c9) en bleu marine DDS (#1F3A5F)
   Filter calculé via https://codepen.io/sosuke/pen/Pjoqqp pour cibler #1F3A5F */
.files-list .files-list__row-icon img[src*="folder"],
.files-list .files-list__row-icon svg.folder-icon,
.files-list__row-icon-color,
img[src*="folder.svg"],
.folder-icon {
    filter:
        brightness(0)
        saturate(100%)
        invert(18%)
        sepia(60%)
        saturate(800%)
        hue-rotate(190deg)
        brightness(95%)
        contrast(90%) !important;
}

/* Cible aussi les SVG de dossier dont on contrôle la couleur via fill */
.files-list svg[class*="folder"] path,
svg.folder-icon path {
    fill: var(--dds-accent) !important;
}

/* Item actif dans la sidebar */
.app-navigation-entry--active,
.app-navigation-entry.active,
li.app-navigation-entry--active > .app-navigation-entry__link,
.app-navigation li a.active {
    background: var(--dds-accent-soft) !important;
    color: var(--dds-accent) !important;
    font-weight: 500 !important;
}

.app-navigation-entry--active .app-navigation-entry-icon,
.app-navigation-entry--active svg {
    color: var(--dds-accent) !important;
    fill: var(--dds-accent) !important;
}

/* Boutons primaires Vue.js (couvrir tous les cas) */
button.button-vue.button-vue--vue-primary,
a.button-vue.button-vue--vue-primary,
.button-vue.button-vue--vue-primary,
[class*="button-vue--vue-primary"] {
    background-color: var(--dds-accent) !important;
    background: var(--dds-accent) !important;
    color: white !important;
    border-color: var(--dds-accent) !important;
}

button.button-vue.button-vue--vue-primary:hover,
.button-vue.button-vue--vue-primary:hover {
    background-color: var(--dds-accent-hover) !important;
    background: var(--dds-accent-hover) !important;
    border-color: var(--dds-accent-hover) !important;
}

/* Dropdown / select Vue */
.action-item__menutoggle,
.v-popper__inner button.button-vue--vue-primary {
    color: var(--dds-text-primary) !important;
}

/* Selected item dans le menu déroulant top "Tous les fichiers" */
.files-list__header-actions .button-vue--vue-secondary {
    color: var(--dds-text-primary) !important;
    border: 1px solid var(--dds-border-fine) !important;
    background: var(--dds-bg-surface) !important;
}

/* Icônes en bleu Nextcloud → recolorer */
.material-design-icon[fill="#0082c9"],
svg[style*="fill:#0082c9"] {
    fill: var(--dds-accent) !important;
}

/* Highlight bleu "active" sur les sidebar files */
.app-navigation > ul > li.active a,
nav.app-navigation li.app-navigation-entry-link[aria-current="page"] {
    background: var(--dds-accent-soft) !important;
    color: var(--dds-accent) !important;
}

/* Liens en couleur primaire dans le contenu */
.empty-content a,
.dashboard a {
    color: var(--dds-accent) !important;
}

/* Avatar default colors */
.avatar-class-icon {
    background-color: var(--dds-accent) !important;
}

/* Top breadcrumb / navigation */
.files-list__header-toggle {
    color: var(--dds-text-primary) !important;
}

/* Boutons des onglets de tri en haut de la liste files */
.files-list__column-sort-button,
.files-list__column-sort-button--active {
    color: var(--dds-text-secondary) !important;
}

.files-list__column-sort-button--active {
    color: var(--dds-accent) !important;
}

/* ============================================================
   MENUS DÉROULANTS (NcActions, « + Nouveau », menus compte…)
   Survol léger : évite les aplats bleu marine trop imposants
   ============================================================ */

#body-user .v-popper__popper .v-popper__inner,
#body-user .v-popper__theme-menu.v-popper__popper .v-popper__inner {
    --color-background-hover: rgba(31, 58, 95, 0.07) !important;
    background-color: var(--dds-bg-surface) !important;
    background: var(--dds-bg-surface) !important;
    border: 1px solid var(--dds-border-fine) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 36px rgba(26, 26, 26, 0.1) !important;
}

#body-user .v-popper__inner li.action:hover,
#body-user .v-popper__inner li.action:focus-within,
#body-user .v-popper__popper:not(.v-popper--theme-tooltip) li.action:hover {
    background-color: rgba(31, 58, 95, 0.07) !important;
    background: rgba(31, 58, 95, 0.07) !important;
}

#body-user .v-popper__inner li.action.active {
    background-color: rgba(31, 58, 95, 0.11) !important;
}

#body-user .v-popper__inner li.action:hover .action-button,
#body-user .v-popper__inner li.action:hover .action-button span,
#body-user .v-popper__inner li.action:focus-within .action-button {
    color: var(--dds-text-primary) !important;
}

#body-user .v-popper__inner .action-button:hover,
#body-user .v-popper__inner .action-button:focus {
    background: transparent !important;
    background-color: transparent !important;
}

/* Menus legacy (header jQuery / popover) */
#body-user .popovermenu li > a:hover,
#body-user .popovermenu li > button:hover,
#body-user .popovermenu li > span:hover {
    background-color: rgba(31, 58, 95, 0.07) !important;
}

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

.button-vue {
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.08s, border-color 0.08s, color 0.08s !important;
}

.button-vue--vue-primary,
button.primary,
.primary {
    background: var(--dds-accent) !important;
    color: white !important;
    border: 1px solid var(--dds-accent) !important;
}

.button-vue--vue-primary:hover,
button.primary:hover {
    background: var(--dds-accent-hover) !important;
    border-color: var(--dds-accent-hover) !important;
}

.button-vue--vue-secondary {
    background: var(--dds-bg-surface) !important;
    color: var(--dds-text-primary) !important;
    border: 1px solid var(--dds-border-fine) !important;
}

.button-vue--vue-secondary:hover {
    border-color: var(--dds-border-strong) !important;
    background: var(--dds-bg-surface) !important;
}

/* ============================================================
   INPUTS GLOBAUX
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    border: 1px solid var(--dds-border-fine) !important;
    background: var(--dds-bg-surface) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    color: var(--dds-text-primary) !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--dds-accent) !important;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.08) !important;
    outline: none !important;
}

/* ============================================================
   DARK MODE
   ============================================================ */

body[data-theme-dark],
body[data-theme-dark-highcontrast] {
    --dds-bg-app: #14171C;
    --dds-bg-surface: #1B1F26;
    --dds-bg-surface-alt: #232830;
    --dds-bg-row-hover: #232830;
    --dds-border-fine: #2A2F38;
    --dds-border-strong: #3A4049;
    --dds-text-primary: #E8E6E0;
    --dds-text-secondary: #A8A59E;
    --dds-text-tertiary: #6B6862;
    --dds-accent: #5B89C7;
    --dds-accent-hover: #7AA0D5;
    --dds-accent-soft: #1E2A3D;

    --color-main-background: var(--dds-bg-app) !important;
    --color-main-background-rgb: 20, 23, 28 !important;
    --color-background-hover: var(--dds-bg-row-hover) !important;
    --color-background-dark: var(--dds-bg-surface-alt) !important;
    --color-main-text: var(--dds-text-primary) !important;
    --color-text-maxcontrast: var(--dds-text-secondary) !important;
    --color-border: var(--dds-border-fine) !important;
    --color-primary: var(--dds-accent) !important;
    --color-primary-element: var(--dds-accent) !important;
    --color-primary-element-hover: var(--dds-accent-hover) !important;
    --color-primary-light: var(--dds-accent-soft) !important;
}

/* ============================================================
   POLISHING
   ============================================================ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--dds-border-strong);
    border-radius: 8px;
    border: 2px solid var(--dds-bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--dds-text-tertiary); }

a {
    color: var(--dds-accent) !important;
    text-decoration: none !important;
    transition: color 0.08s !important;
}

a:hover {
    color: var(--dds-accent-hover) !important;
    text-decoration: underline !important;
}

table {
    border-collapse: collapse !important;
}

table th {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--dds-text-tertiary) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--dds-border-fine) !important;
}

table td {
    border-bottom: 1px solid var(--dds-border-fine) !important;
    font-size: 13px !important;
}

.tag,
.label,
.app-list-app-version {
    border-radius: 3px !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
}