/* =========================================================
   THEME STUDIO MURIANA & CIVELLO PER FILE BROWSER
   Percorso: /etc/filebrowser/branding/custom.css
========================================================= */

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

/* ---------------------------------------------------------
   1. VARIABILI (File Browser colora quasi tutto da qui)
   Sovrascriverle è più affidabile che indovinare i selettori.
--------------------------------------------------------- */
:root,
body,
body.dark-mode {
  --gold: #B69351;
  --gold-soft: rgba(182, 147, 81, 0.15);
  --brown: #251e18;
  --paper: #F2F1EF;
  --ink: #2c3e50;
  --ink-strong: #1a252f;

  /* variabili native di File Browser */
  --background: var(--paper) !important;
  --surfacePrimary: #ffffff !important;
  --surfaceSecondary: #e5e3df !important;
  --textPrimary: var(--ink) !important;
  --textSecondary: var(--ink-strong) !important;
  --divider: #ebe9e6 !important;
  --borderPrimary: #dcdcdc !important;
  --borderSecondary: #dcdcdc !important;
  --action: var(--gold) !important;
  --blue: var(--gold) !important;
  --dark-blue: #8f7240 !important;
  --icon-blue: var(--gold) !important;
  --hover: #fbf9f6 !important;
}

/* ---------------------------------------------------------
   2. BASE
--------------------------------------------------------- */
html, body, button, input, select, textarea {
  font-family: 'Lato', sans-serif !important;
}

html, body {
  background-color: var(--paper) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  color: var(--ink-strong);
}

a { color: var(--gold); }

/* ---------------------------------------------------------
   3. LOGIN
   Markup reale: <div id="login"><form> <img> <h1> <input.input> <input.button>
--------------------------------------------------------- */
#login {
  background: var(--paper) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#login form {
  background: var(--paper) !important;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  padding: 2.5rem 2.5rem 2rem;
  max-width: 450px;
  width: 90%;
}

#login img {
  width: 300px !important;
  max-width: 80% !important;
  height: auto !important;
  display: block;
  margin: 0 auto 1rem !important;
}

#login h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--ink-strong) !important;
  text-align: left;
  margin: 0.5rem 0 1.5rem;
}

/* linea oro sfumata sotto il titolo, come gli h2 del sito */
#login h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 12px;
  background: linear-gradient(to right, #B69351 0%, rgba(182, 147, 81, 0) 100%);
}

#login .input,
#login input[type="text"],
#login input[type="password"] {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-bottom: 15px;
  border: 1px solid #ccc !important;
  border-radius: 5px;
  background: #ffffff !important;
  color: var(--ink) !important;
  box-sizing: border-box;
}

#login .input:focus,
#login input:focus {
  border-color: var(--gold) !important;
  outline: none;
  box-shadow: 0 0 5px rgba(182, 147, 81, 0.3);
}

#login .button,
#login input[type="submit"] {
  width: 100%;
  background: var(--gold) !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(182, 147, 81, 0.25);
  transition: all 0.3s ease;
}

#login .button:hover,
#login input[type="submit"]:hover {
  background: #a38245 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(182, 147, 81, 0.35);
}

/* ---------------------------------------------------------
   4. HEADER
--------------------------------------------------------- */
header {
  background: var(--brown) !important;
  border-bottom: 2px solid var(--gold);
  border-radius: 0 ;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

header .action,
header .action i,
header .action svg,
header .material-icons,
header #search i,
header #search svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

header .action:hover { background: rgba(182, 147, 81, 0.2) !important; }
header .action:hover i { color: var(--gold) !important; }

header .action span { color: #ffffff !important; }

/* barra di ricerca (in v2 è un contenitore con input dentro) */
#search #input,
#search > div {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(182, 147, 81, 0.4);
  border-radius: 6px;
}

#search input,
#search input::placeholder {
  color: #ffffff !important;
}

#search i, #search svg {
  color: var(--gold) !important;
  fill: var(--gold) !important;
}

/* risultati di ricerca */
#search .result,
#search #result {
  background: #ffffff !important;
  color: var(--ink) !important;
}

/* ---------------------------------------------------------
   5. SIDEBAR
--------------------------------------------------------- */
nav {
  background: var(--brown) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

nav .action,
nav a,
nav button {
  color: #e0e0e0 !important;
  transition: all 0.2s ease;
}

nav .action i,
nav .action svg,
nav a i,
nav button i {
  color: var(--gold) !important;
  fill: var(--gold) !important;
}

nav .action:hover,
nav .action.active,
nav a:hover {
  background: var(--gold-soft) !important;
  color: var(--gold) !important;
}

nav .credits,
nav .credits a,
nav .credits span,
nav small {
  color: #a89f91 !important;
}

/* barra spazio usato */
nav .progress,
.progress {
  background: rgba(255, 255, 255, 0.12) !important;
}
nav .progress div,
.progress div {
  background: var(--gold) !important;
}

/* ---------------------------------------------------------
   6. CORPO PRINCIPALE E BREADCRUMBS
--------------------------------------------------------- */
main { background: var(--paper) !important; }

#breadcrumbs {
  background: transparent !important;
  border-bottom: 1px solid #ebe9e6;
}

#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs i,
#breadcrumbs .material-icons {
  color: var(--brown) !important;
  font-weight: 700;
}

#breadcrumbs a:hover,
#breadcrumbs a:hover i { color: var(--gold) !important; }

/* ---------------------------------------------------------
   7. ELENCO FILE
--------------------------------------------------------- */
#listing { background: transparent !important; }

#listing .item {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-bottom: 1px solid #ebe9e6;
  transition: background-color 0.2s ease;
}

#listing .item:hover { background: #fbf9f6 !important; }

#listing .item[aria-selected="true"] {
  background: var(--gold-soft) !important;
  outline: 1px solid var(--gold);
}

#listing .item.header,
#listing.list .item.header {
  background: #e5e3df !important;
  border-bottom: 2px solid var(--gold);
  border-radius: 6px 6px 0 0;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  color: var(--ink-strong) !important;
}

#listing .item.header i,
#listing .item.header svg,
#listing .item.header .name,
#listing .item.header .size,
#listing .item.header .modified {
  color: var(--ink-strong) !important;
  fill: var(--ink-strong) !important;
}

#listing .item i,
#listing .item .material-icons {
  color: var(--gold) !important;
}

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

#listing .item .size,
#listing .item .modified { color: #7f8c8d !important; }

/* ---------------------------------------------------------
   8. FINESTRE, PULSANTI, MENU CONTESTUALE
--------------------------------------------------------- */
.card,
.prompt,
#context-menu,
.dropdown {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-radius: 8px;
}

.card h2,
.prompt h2 { color: var(--ink-strong) !important; }

.button {
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  background: var(--brown) !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

.button:hover { background: var(--gold) !important; }

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

.button--flat:hover { background: var(--gold-soft) !important; }

.button--flat.button--red { color: #c0392b !important; }

.input {
  border: 1px solid #dcdcdc !important;
  border-radius: 6px;
  background: #fafafa !important;
  color: var(--ink) !important;
}

.input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(182, 147, 81, 0.2);
  outline: none;
}

/* pulsante flottante (+ upload / nuovo) */
.floating .action,
#floating-button,
button.action[title="Nuovo file"],
.speed-dial button {
  background: var(--gold) !important;
  color: #ffffff !important;
}

/* barra di caricamento / notifiche */
.vue-simple-progress div,
#progress div { background: var(--gold) !important; }

/* scrollbar */
* { scrollbar-color: var(--gold) transparent; }