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

/* --- Globale Farbvariablen & Schriftart --- */
:root {
  --primary: #217C43 !important;
  --secondary: #DEC71E !important;
  font-family: 'Montserrat', sans-serif !important;
}

* {
  font-family: 'Montserrat', sans-serif !important;
}

/* --- Haupt-Hintergrund: Verlauf von Grün (oben) nach Gelb (unten) --- */
html, body, #app, main, .dashboard, #login {
  background: linear-gradient(180deg, #217C43 0%, #DEC71E 100%) !important;
  background-attachment: fixed !important;
  color: #ffffff !important;
  min-height: 100vh !important;
}

/* --- Typografie Fließtext (Buttons explizit ausschließen) --- */
body, p, h1, h2, h3, h4, h5, h6, label, th, td {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* --- Header / Top-Bar --- */
header, .header, #nav {
  background: rgba(33, 124, 67, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

header * {
  color: #ffffff !important;
}

/* --- Navigation / Sidebar --- */
nav, .sidebar, #sidebar {
  background: rgba(33, 124, 67, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

nav .action.active, .sidebar a.active, nav a:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-left: 4px solid #ffffff !important;
  border-radius: 0 8px 8px 0 !important;
}

/* --- Dateiliste, Cards & Tabellen --- */
.item, .card, table tbody tr {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  margin-bottom: 4px !important;
  transition: all 0.2s ease !important;
}

.item:hover, table tbody tr:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px);
}

.item.selected {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid #ffffff !important;
}

.item .material-icons, 
.item svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.item .name, .item .size, .item .modified {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* --- Weiße Buttons mit HGS-Grüner Schrift (#217C43) --- */
.button, 
.button--flat, 
button.action, 
input[type="submit"],
.button--primary {
  background: #ffffff !important;
  color: #217C43 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  text-shadow: none !important;
}

/* Kindelemente und Schrift im Button zwingend auf HGS-Grün setzen */
.button *, 
.button--flat *, 
button.action *, 
.button span, 
.button i, 
button.action .material-icons {
  color: #217C43 !important;
  fill: #217C43 !important;
  text-shadow: none !important;
}

.button:hover, 
.button--flat:hover, 
button.action:hover, 
input[type="submit"]:hover {
  background: #f8fafc !important;
  color: #185a31 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.button:hover *, 
.button--flat:hover *, 
button.action:hover * {
  color: #185a31 !important;
  fill: #185a31 !important;
}

/* Sekundär- / Abbrechen-Buttons (Halbtransparent Schwarz mit weißer Schrift) */
.button--grey, 
.button--cancel {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.button--grey *, 
.button--cancel * {
  color: #ffffff !important;
}

/* --- Floating Action Button (Upload / Plus) --- */
.floating-actions button, 
#upload-button {
  background: #ffffff !important;
  color: #217C43 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.floating-actions button *, 
#upload-button * {
  color: #217C43 !important;
  fill: #217C43 !important;
}

/* --- Login-Screen Inputs --- */
#login form {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

#login input[type="text"], 
#login input[type="password"] {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1e293b !important;
  text-shadow: none !important;
  border-radius: 8px !important;
}