/* theme.css wird in App.razor separat eingebunden - der frühere @import hier hat sie doppelt
   geladen und app.css-Regeln hinter dieselbe Kaskade gelegt. */
@import url('modern-navigation.css');

html, body {
    font-family: var(--em-font-body);
}

a, .btn-link {
    color: #006bb7;
}


/* Form Controls */
.form-control {
    border: 1px solid var(--em-border);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    background-color: white;
    color: var(--em-text-primary);
}

.form-control::placeholder {
    color: var(--em-text-light);
}

.form-control:focus {
    border-color: var(--em-primary);
    box-shadow: 0 0 0 3px rgba(24, 59, 52, 0.1);
    outline: none;
}

/* Checkbox Styling */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0;
    font-size: 0.9rem;
    color: var(--em-text-secondary);
    line-height: 1.5;
}

.form-checkbox input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    accent-color: var(--em-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.form-checkbox a {
    color: var(--em-accent);
    text-decoration: underline;
}

/* Alert & Messages */
.alert {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    border-left: 4px solid;
}

.alert-error {
    background-color: #fee;
    border-left-color: #d32f2f;
    color: #c62828;
}

.alert-success {
    background-color: #e8f5e9;
    border-left-color: #388e3c;
    color: #1b5e20;
}

.alert-info {
    background-color: #e3f2fd;
    border-left-color: #1976d2;
    color: #0d47a1;
}

/* Links */
.link-primary {
    color: var(--em-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-block;
}

.link-primary:hover {
    color: var(--em-primary-dark, #0d2620);
    text-decoration: underline;
}

.link-secondary {
    color: var(--em-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-block;
}

.link-secondary:hover {
    color: var(--em-primary-dark, #0d2620);
    text-decoration: underline;
}

/* Authentication Page Base Styles */
.auth-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.auth-page-split {
    display: flex;
    height: 100vh;
    width: 100%;
    background: white;
    overflow: hidden;
}

.auth-welcome-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--em-primary) 0%, var(--em-primary-dark, #0d2620) 100%);
    min-width: 40%;
}

.auth-welcome-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}

.auth-welcome-overlay {
    position: relative;
    z-index: 10;
    background: rgba(24, 59, 52, 0.85);
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.auth-welcome-content {
    max-width: 420px;
    text-align: center;
    color: white;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

.auth-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
    color: white;
}

.auth-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 0 0 2rem 0;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: white;
}

.auth-features {
    margin: 2rem 0;
    text-align: left;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    font-size: 0.95rem;
    color: white;
}

.auth-feature-icon {
    font-size: 1.5rem;
}

.auth-form-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: white;
    overflow-y: auto;
    min-width: 60%;
}

.auth-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--em-border), transparent);
}

.auth-form-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 3rem;
}

.auth-form-wrapper h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--em-text-primary);
}

.auth-form-subtitle {
    font-size: 0.95rem;
    color: var(--em-text-light);
    margin: 0 0 2rem 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--em-text-primary);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

.form-text {
    font-size: 0.8rem;
    color: var(--em-text-secondary);
    margin-top: 0.5rem;
}

/* Footer */
.auth-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--em-border);
    text-align: center;
}

.auth-footer-text {
    font-size: 0.8rem;
    color: var(--em-text-light);
    margin: 0;
}

.auth-footer-text a {
    color: var(--em-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-footer-text a:hover {
    color: var(--em-primary);
    text-decoration: underline;
}

/* Animations */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-rotate {
    animation: rotate 20s linear infinite;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.contract-pdf-preview,
.pdf-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Auf kleinen Geräten soll die Vorschau den Bildschirm nicht füllen. */
    max-height: min(720px, 70vh);
    overflow-y: auto;
    padding: 0.5rem;
    /* Farben aus dem Theme, damit die Vorschau im Darkmode nicht als helle Fläche stehen bleibt. */
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
}

/* Online-Vertragsabschluss: lange Bezeichner (IBAN, MaLo, MeLo) duerfen nicht aus dem
   Formular laufen, sonst entsteht auf schmalen Geraeten ein waagerechter Bildlauf. */
.contract-signing {
    overflow-wrap: anywhere;
}

@media (max-width: 599.95px) {
    .contract-signing .mud-button-root {
        width: 100%;
    }

    .contract-signing .contract-pdf-preview {
        max-height: 55vh;
    }
}

.contract-pdf-page,
.pdf-preview-page {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: white;
    box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media print {
    body:has(.report-page) {
        margin: 0;
    }

    body:has(.report-page) .sidebar,
    body:has(.report-page) .top-row,
    body:has(.report-page) #blazor-error-ui {
        display: none !important;
    }

    body:has(.report-page) .page,
    body:has(.report-page) main,
    body:has(.report-page) article.content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.report-page) .report-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* ============================================================================
   Breadcrumb-Leiste (Components/Shared/Breadcrumb.razor)

   MudBlazor setzt fuer die Trenner keine eigene Farbe. Ohne explizite Regeln
   erbt der Separator seine Farbe und ist im Darkmode auf dunklem Grund nicht
   erkennbar. Die Farben kommen aus den Theme-Variablen, die unter
   [data-theme="dark"] neu belegt werden – damit stimmen beide Modi.
   ============================================================================ */
.em-breadcrumb.mud-breadcrumbs {
  padding: 0 0 4px 2px;
}

.em-breadcrumb,
.em-breadcrumb .mud-breadcrumbs-ol,
.em-breadcrumb .mud-breadcrumbs-li,
.em-breadcrumb .mud-breadcrumbs-separator {
  color: var(--em-text-secondary);
}

.em-breadcrumb a,
.em-breadcrumb .mud-breadcrumbs-li a {
  color: var(--em-text-secondary);
  text-decoration: none;
}

.em-breadcrumb a:hover {
  color: var(--em-accent);
  text-decoration: underline;
}

/* Aktuelle Seite hervorheben */
.em-breadcrumb .mud-breadcrumbs-li:last-child,
.em-breadcrumb .mud-breadcrumbs-li:last-child a {
  color: var(--em-text-primary);
  font-weight: 500;
}

/* Falls MudBlazor den Trenner als Icon rendert */
.em-breadcrumb .mud-breadcrumbs-separator svg,
.em-breadcrumb .mud-icon-root {
  color: var(--em-text-secondary);
  fill: currentColor;
  opacity: 1;
}

/* ============================================================================
   Aktionskarten (Komponente BuildingFunktionenTab)
   Waren vorher als <style>-Block in BuildingDetail.razor eingebettet; als eigene
   Komponente gehoeren sie in das globale Stylesheet.
   ============================================================================ */
.action-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================================
   Credential-Verwaltung: JSON-Vorlage
   Die Vorlage zeigt pro Credential, welche Felder der jeweilige Dienst erwartet,
   und muss deshalb in Liste, Dialog und Vorschau gut lesbar sein. Die Farben
   stammen aus den MudBlazor-Palettenvariablen und passen sich dem Darkmode an.
   ============================================================================ */
.credential-template {
  display: block;
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--mud-palette-lines-default, rgba(128, 128, 128, 0.35));
  border-radius: 8px;
  background: var(--mud-palette-background-gray, rgba(128, 128, 128, 0.12));
  color: var(--mud-palette-text-primary, inherit);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}

/* Hinweisseite für unbekannte und nicht freigegebene Seiten (Pages/NotFound.razor) */
.not-found {
    max-width: 34rem;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    background: var(--em-bg-white);
}

.not-found-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.not-found h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--em-text-primary);
}

.not-found p {
    color: var(--em-text-secondary);
}

.not-found-joke {
    margin: 1.5rem 0;
    padding: 1rem;
    border-left: 3px solid var(--em-accent);
    background: var(--em-primary-lighter);
    font-style: italic;
}
.access-denied-card {
    max-width: 32rem;
    text-align: center;
    padding: 2.5rem 2rem;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    background: var(--em-bg-white);
}

.access-denied-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.access-denied-card h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--em-text-primary);
}

.access-denied-hint {
    color: var(--em-text-secondary);
    font-size: 0.9rem;
}

/* Zentrierte Formularkarten (Passwort vergessen / Passwort zurücksetzen) */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--em-bg-light);
    font-family: var(--em-font-body);
}

.auth-card {
    width: 100%;
    max-width: 30rem;
    padding: 2.5rem 2rem;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    background: var(--em-bg-white);
}

.auth-card h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--em-text-primary);
}

.auth-lead {
    color: var(--em-text-secondary);
    margin-bottom: 1.5rem;
}

.auth-hint {
    color: var(--em-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.auth-links {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}

.auth-links a {
    color: var(--em-primary);
}