/**
 * Nextcloud Theme-Paket
 * =======================
 * Dieses Theme verändert gezielt das Aussehen der Nextcloud-Oberfläche
 * (Header, Sidebar, Login-Screen), Buttons sowie das Design der Kalender-App
 * für interne und öffentliche Nutzung.
 *
 * Die Struktur gliedert sich in:
 * 1. Allgemeine Oberfläche (Header, Navigation)
 * 2. Login-Seite
 * 3. Kalender-App (öffentlich + intern)
 * 4. Benutzer-Menü (oben rechts)
 * 5. Logos (individuelle Markenanpassung)
 * 6. Buttons (Farbanpassung)
 */

/* ========================================
 * 1. Allgemeine Oberfläche (Header & Navigation)
 * ======================================== */

/* Header für Nutzeransicht, Einstellungen, öffentliche Seiten */
#body-user #header,
#body-settings #header,
#body-public #header {
	background-color: #b8a07e !important;  /* Beige-Sandbraun: warm, handwerklich, freundlich */
	color: #ffffff !important;             /* Weißer Text für klaren Kontrast auf hellem Hintergrund */
}

/* Sekundäre Kopfzeile wie App-Titel oder öffentlicher Header */
#body-settings #header,
#body-public #header .header-appname {
	background-color: #b8a07e !important;  /* Wiederholung des Haupttons für Einheitlichkeit */
	color: #ffffff !important;
}

/* Linke App-Navigation (z. B. Dateien, Kalender) */
.app-navigation {
	background-color: #ffffff !important; /* Weiß: neutral, sauber, gute Lesbarkeit */
}

/* Navigationseinträge: Textfarbe */
.app-navigation__item,
.app-navigation__item .app-navigation-entry__title {
	color: #000000 !important; /* Schwarz: maximaler Kontrast auf Weiß */
}

/* Hover- und aktive Farbe der Navigationseinträge */
.app-navigation__item--active,
.app-navigation__item:hover {
	background-color: #F2F2F2 !important; /* Sehr helles Grau: dezent, modern, Hover-Indikator */
}

/* Schriftart für öffentliche Kalenderseiten */
body#body-public {
	font-family: "Poppins", sans-serif !important; /* Moderne, runde Schrift für freundlichere Wirkung */
}

/* App-Container-Anpassung bei öffentlicher Kalenderanzeige */
body#body-public #app-content-vue.app-content.no-snapper {
	height: 100% !important;
	padding-block-end: 0 !important;
}

/* ========================================
 * 2. Login-Seite (Design des Login-Screens)
 * ======================================== */

/* Einheitlicher blauer Hintergrund */
#body-login {
	background: linear-gradient(to bottom, #07194b 0%, #07194b 100%);
	/* #07194b: Sehr dunkles Marineblau – wirkt seriös, digital, sicher */
}

/* ========================================
 * 3. Kalender-App (öffentlich & intern)
 * ======================================== */

/* Fußzeile auf öffentlichen Kalenderseiten ausblenden */
#body-public .app-calendar-public + footer,
footer {
	display: none !important;
}

/* Linke Navigation (nur intern im Kalender) */
body#body-user[data-app-id="calendar"] .app-navigation {
	background-color: #ffffff !important; /* Weißer Hintergrund: Fokus auf Inhalte */
}

body#body-user[data-app-id="calendar"] .app-navigation__item,
body#body-user[data-app-id="calendar"] .app-navigation-entry__title {
	color: #000000 !important; /* Schwarz: Klarer Text */
}

body#body-user[data-app-id="calendar"] .app-navigation__item--active,
body#body-user[data-app-id="calendar"] .app-navigation__item:hover {
	background-color: #F2F2F2 !important; /* Hellgrauer Hover-Effekt: dezent & benutzerfreundlich */
}

/* ========================================
 * 4. Benutzer-Menü oben rechts
 * ======================================== */

/* Avatar-Button (Profilmenü rechts oben) */
#header .menutoggle,
#header .menutoggle:focus,
#header .menutoggle:hover {
	background-color: #3a4783 !important; /* Mittelblau-Violett: Akzentfarbe mit seriösem Touch */
	color: #000000 !important;
	border-radius: 4px;
}

/* Dropdown-Menü (Profilbild-Menü) */
#header .avatardiv.popovermenu,
#header .avatardiv.popovermenu ul {
	background-color: #ffffff !important;  /* Weiß: Hintergrund für klaren Kontrast */
	color: #000000 !important;              /* Schwarz: Lesbarkeit */
}

/* Hover-Effekt für Menüeinträge */
#header .avatardiv.popovermenu li:hover {
	background-color: #F2F2F2 !important;  /* Dezenter Hover in Hellgrau */
}

#header .avatardiv.popovermenu {
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);  /* Schatten für Tiefe */
	border: 1px solid #ccc;                /* Hellgrauer Rand für Trennung */
}

/* ========================================
 * 5. Logo-Anpassung
 * ======================================== */

/* --- Logo exakt an Schrift ausrichten --- */
#header .logo {
	background-image: url('../img/logo_fasnetrufer_emblem.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	width: 40px;                 /* Höhe + Breite passend zur Schrift */
	height: 40px;
	margin-right: 10px;          /* Abstand zur Schrift */
	display: inline-block;
	vertical-align: middle;
}

/* Logo bei Einrichtungs-Assistent */
#firstrunwizard .logo {
	background-image: url('../img/logo_fasnetrufer_emblem.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	width: 40px;
	height: 40px;
	margin-bottom: 10px;
}

/* Kleines Icon-Logo (z. B. mobile/minimiert) */
#header .logo-icon {
	background-image: url('../img/logo_fasnetrufer_emblem.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	width: 34px;
	height: 34px;
}

/* --- Schriftcontainer anpassen --- */
#header .header-info {
	display: flex;
	align-items: center;       /* Vertikal mittig zur Logo-Höhe */
	height: 40px;              /* Gleich wie Logo */
	line-height: 40px;
}

/* Optional für gezielte Textausrichtung */
#header .header-title {
	font-size: 16px;           /* oder wie von Nextcloud vorgegeben */
	font-weight: 600;
	display: inline-block;
	vertical-align: middle;
}


/* ========================================
 * 6. Buttons (Primäraktionen)
 * ======================================== */

/* Allgemeines Styling für primäre Buttons */
.primary,
input[type="submit"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	border-color: #745bca;       /* Dunkelviolett: Rahmenfarbe */
	background-color: #947bea;   /* Hellviolett: Hauptfarbe für Aktionen – auffällig, freundlich */
}

/* Hover- und Fokus-Zustände */
.primary:hover,
input[type="submit"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover,
.primary:focus,
input[type="submit"].primary:focus,
input[type="button"].primary:focus,
button.primary:focus,
.button.primary:focus {
	background-color: #8b75e4;   /* Mittelviolett: etwas dunkler bei Hover/Fokus */
}

/* Aktive & deaktivierte Zustände */
.primary:active,
.primary:disabled,
.primary:disabled:hover,
.primary:disabled:focus,
input[type="submit"].primary:active,
input[type="submit"].primary:disabled,
input[type="submit"].primary:disabled:hover,
input[type="submit"].primary:disabled:focus,
input[type="button"].primary:active,
input[type="button"].primary:disabled,
input[type="button"].primary:disabled:hover,
input[type="button"].primary:disabled:focus,
button.primary:active,
button.primary:disabled,
button.primary:disabled:hover,
button.primary:disabled:focus,
.button.primary:active,
.button.primary:disabled,
.button.primary:disabled:hover,
.button.primary:disabled:focus {
	background-color: #745bca;   /* Dunkelviolett: reduziert, wenn inaktiv oder gedrückt */
}