/* ============================================================
   planungsbüro hohmann steinert – FileBrowser Branding
   Palette: #2C6040 Waldgrün · #C5870C Amber · #F5F1E8 Creme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Root & Reset ─────────────────────────────────────────── */
:root {
  --green:   #2C6040;
  --green-d: #1A4D2E;
  --green-l: #3A7050;
  --amber:   #C5870C;
  --cream:   #F5F1E8;
  --stone:   #EAE5D8;
  --pale:    #D0E8D8;
  --text:    #1C1C1A;
  --muted:   #6A6A62;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  background: var(--cream);
  color: var(--text);
}

/* ── Header / Toolbar ─────────────────────────────────────── */
#header,
header {
  background: var(--green) !important;
  border-bottom: 2px solid var(--green-d) !important;
}

#header .title,
header .title,
#header h1,
header h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
}

/* Subtitle / tagline under the logo */
#header .subtitle,
header .subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--pale) !important;
  opacity: 0.85;
}

/* Icons in header */
#header .action,
header .action,
#header button,
header button {
  color: #fff !important;
}

#header .action:hover,
header .action:hover,
#header button:hover,
header button:hover {
  background: var(--green-l) !important;
  color: #fff !important;
}

/* ── Sidebar / Nav ────────────────────────────────────────── */
nav,
#nav,
aside {
  background: var(--stone) !important;
  border-right: 1px solid #d4cebd !important;
}

nav .item,
nav a,
#nav a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

nav .item.active,
nav a.active,
#nav a.router-link-active {
  background: var(--pale) !important;
  color: var(--green) !important;
  border-left: 3px solid var(--amber) !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.button.is-primary,
button.is-primary,
.action.is-primary,
input[type="submit"] {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.button.is-primary:hover,
button.is-primary:hover {
  background: #b07609 !important;
  border-color: #b07609 !important;
}

/* ── Login page ───────────────────────────────────────────── */
#login,
.login-page,
.login {
  background: var(--cream) !important;
}

#login .title,
.login-page .title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  font-size: 2rem !important;
  color: var(--green) !important;
  letter-spacing: 0.03em !important;
}

#login .subtitle,
.login-page .subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

#login .input,
.login input {
  border-color: #c8c2b0 !important;
  background: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
}

#login .input:focus,
.login input:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(44,96,64,.15) !important;
}

/* Login button */
#login .button,
.login button[type="submit"] {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}

#login .button:hover,
.login button[type="submit"]:hover {
  background: var(--green-l) !important;
  border-color: var(--green-l) !important;
}

/* ── File listing / Cards ─────────────────────────────────── */
.item .name,
.file-name {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

.item.active,
.item:hover {
  background: var(--pale) !important;
}

/* Folder icon colour */
.item[data-dir="true"] .material-icons,
.folder .material-icons {
  color: var(--green) !important;
}

/* ── Share / Modal dialogs ────────────────────────────────── */
.card,
.modal-card,
.prompt {
  background: #fff !important;
  border: 1px solid var(--stone) !important;
}

.card-header,
.modal-card-head,
.prompt-header {
  background: var(--green) !important;
  color: #fff !important;
}

.card-header-title,
.modal-card-title {
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--green) !important;
}

a:hover {
  color: var(--amber) !important;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
#breadcrumbs,
.breadcrumb {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.875rem !important;
  color: var(--muted) !important;
}

#breadcrumbs a,
.breadcrumb a {
  color: var(--green) !important;
}

/* ── Scrollbar (Webkit) ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--stone); }
::-webkit-scrollbar-thumb { background: #b5b09f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }