/* =========================================================
   FileBrowser – Habillage DK Innovation (v2 – thème sombre)
   Emplacement : docker/filebrowser/config/branding/custom.css
   Paramètres globaux > Branding :
     - Répertoire de branding : /config/branding
     - Thème : Sombre (recommandé, pour que les fenêtres suivent)
   ---------------------------------------------------------
   Toutes les couleurs se règlent ici :
   ========================================================= */

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

:root {
  --dk-bg:        #101317;   /* fond principal                         */
  --dk-surface:   #181c22;   /* barre latérale, en-tête                */
  --dk-card:      #1f242c;   /* cartes fichiers / dossiers             */
  --dk-card-hov:  #262c35;   /* carte au survol                        */
  --dk-border:    #2c333d;   /* séparateurs                            */
  --dk-accent:    #00a3e0;   /* couleur d'accent                       */
  --dk-accent-2:  #0086b8;   /* accent au survol                       */
  --dk-text:      #e9edf2;   /* texte principal                        */
  --dk-muted:     #8a94a3;   /* texte secondaire                       */
  --dk-radius:    8px;

  /* Variables internes FileBrowser */
  --blue:      var(--dk-accent);
  --dark-blue: var(--dk-accent-2);
}

/* ---------- Base ---------- */
html, body {
  background: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}

body, input, button, select, textarea {
  font-family: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif !important;
}

a { color: var(--dk-accent); }

/* ---------- En-tête ---------- */
header {
  background: var(--dk-surface) !important;
  border-bottom: 2px solid var(--dk-accent) !important;
  box-shadow: none !important;
}

header img {
  height: 2.2em;
  width: auto;
  object-fit: contain;
  filter: none !important;
}

header .action i,
header .action span {
  color: var(--dk-text) !important;
}

header .action:hover {
  background: rgba(0,163,224,.15) !important;
}

#search #input {
  background: var(--dk-bg) !important;
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius) !important;
}

#search input,
#search i {
  color: var(--dk-text) !important;
}

#search input::placeholder {
  color: var(--dk-muted);
}

/* ---------- Barre latérale ---------- */
nav {
  background: var(--dk-surface) !important;
  border-right: 1px solid var(--dk-border);
}

nav .action {
  color: var(--dk-text) !important;
  border-radius: var(--dk-radius);
  margin: 2px 8px;
  width: calc(100% - 16px);
}

nav .action span {
  color: var(--dk-text) !important;
}

nav .action i {
  color: var(--dk-accent) !important;
}

nav .action:hover {
  background: rgba(0,163,224,.12) !important;
}

nav > div {
  border-color: var(--dk-border) !important;
}

.credits,
.credits a,
nav .credits span {
  color: var(--dk-muted) !important;
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumbs {
  background: transparent !important;
  border-bottom: 1px solid var(--dk-border);
}

.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs i {
  color: var(--dk-text) !important;
}

.breadcrumbs a:hover {
  color: var(--dk-accent) !important;
}

/* ---------- Titres de section (// FOLDERS, // FILES) ---------- */
#listing h2 {
  color: var(--dk-muted) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75em !important;
  font-weight: 600;
}

#listing h2::before {
  content: "// ";
  color: var(--dk-accent);
}

/* ---------- Cartes fichiers / dossiers ---------- */
#listing .item {
  background: var(--dk-card) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: var(--dk-radius) !important;
  color: var(--dk-text) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

#listing .item:hover {
  background: var(--dk-card-hov) !important;
  border-color: var(--dk-accent) !important;
}

#listing.mosaic .item:hover {
  transform: translateY(-2px);
}

#listing .item .name {
  color: var(--dk-text) !important;
  font-weight: 600;
}

#listing .item .size,
#listing .item .modified,
#listing .item p {
  color: var(--dk-muted) !important;
}

#listing .item i {
  color: var(--dk-accent) !important;
}

#listing .item[aria-selected="true"] {
  background: var(--dk-accent) !important;
  border-color: var(--dk-accent) !important;
}

#listing .item[aria-selected="true"] *,
#listing .item[aria-selected="true"] i {
  color: #ffffff !important;
}

/* En-tête du mode liste */
#listing.list .item.header {
  background: transparent !important;
  border: none !important;
}

#listing.list .item.header * {
  color: var(--dk-muted) !important;
}

/* ---------- Fenêtres, menus, boîtes de dialogue ---------- */
.card {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border);
  border-top: 3px solid var(--dk-accent);
  border-radius: var(--dk-radius) !important;
}

.card .card-title h2,
.card p,
.card label {
  color: var(--dk-text) !important;
}

.input,
.card input,
.card select,
.card textarea {
  background: var(--dk-bg) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: var(--dk-radius) !important;
}

.input:focus,
.card input:focus {
  border-color: var(--dk-accent) !important;
  outline: none;
}

/* ---------- Boutons ---------- */
.button {
  border-radius: var(--dk-radius) !important;
  font-weight: 600;
}

.button--blue {
  background: var(--dk-accent) !important;
  color: #ffffff !important;
}

.button--blue:hover {
  background: var(--dk-accent-2) !important;
}

.button--flat {
  background: transparent !important;
  color: var(--dk-accent) !important;
}

.button--flat:hover {
  background: rgba(0,163,224,.12) !important;
}

/* ---------- Page de connexion ---------- */
#login {
  background:
    radial-gradient(circle at 80% 20%, rgba(0,163,224,.25), transparent 45%),
    var(--dk-bg) !important;
  min-height: 100vh;
}

#login form {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border);
  border-top: 3px solid var(--dk-accent);
  border-radius: var(--dk-radius);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  padding: 2.5em 2em !important;
  max-width: 22em;
}

#login img {
  width: 5em;
  height: auto;
  margin-bottom: .5em;
}

#login h1 {
  color: var(--dk-text) !important;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#login h1::before {
  content: "// ";
  color: var(--dk-accent);
}

#login .input {
  background: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}

#login .button,
#login input[type="submit"] {
  background: var(--dk-accent) !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  border: none !important;
}

#login .button:hover,
#login input[type="submit"]:hover {
  background: var(--dk-accent-2) !important;
}

#login p,
#login a {
  color: var(--dk-muted) !important;
}

/* ---------- Envoi de fichiers ---------- */
.upload-files .card,
.upload-files .file {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
}

.upload-files .file .file-progress div,
.progress div {
  background: var(--dk-accent) !important;
}

/* ---------- Barres de défilement ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dk-bg); }
::-webkit-scrollbar-thumb { background: var(--dk-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--dk-accent); }
* { scrollbar-color: var(--dk-border) var(--dk-bg); }