/* General application-wide styles */

/* Force the entire document to be constrained to viewport */
html, body {
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#app {
    height: 100% !important;
    overflow: hidden !important;
}

/* Ensure MudBlazor components respect height constraints */
.mud-layout {
    height: 100dvh !important;
    overflow: hidden !important;
}

.mud-drawer-container {
    height: 100% !important;
    overflow: hidden !important;
}

/* MudMainContent should NOT have overflow hidden - it needs to contain scrollable content */
.mud-main-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Drag-and-Drop Zone Styles */
.drag-drop-wrapper {
    width: 100%;
}

.drag-drop-zone {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.drag-drop-zone.drag-over {
    border: 3px dashed var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    transform: scale(1.01);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.drag-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    border-radius: 4px;
}

.drag-drop-overlay * {
    pointer-events: none;
}

.drag-drop-overlay .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.drag-drop-overlay .mud-typography {
    color: var(--mud-palette-primary);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mud-menu-list {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Force dark-mode text color in HTML editor, overriding inline styles from email templates */
.html-editor-content,
.html-editor-content * {
    color: var(--mud-palette-text-primary) !important;
}

/* PhotoCaptureDialog: Desktop-Standardwerte */
.photo-capture-video-container {
    max-height: 400px;
    overflow: hidden;
    background: #000;
}

.photo-capture-video {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.photo-capture-preview-container {
    max-height: 300px;
    overflow: hidden;
}

.photo-capture-preview-img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

/* PhotoCaptureDialog: Fullscreen auf Mobile (via MudBlazor FullScreen=true + Feintuning) */
.photo-capture-dialog.mud-dialog-fullscreen {
    display: flex !important;
    flex-direction: column !important;
}

.photo-capture-dialog.mud-dialog-fullscreen .mud-dialog-title {
    flex-shrink: 0;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

.photo-capture-dialog.mud-dialog-fullscreen .mud-dialog-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

.photo-capture-dialog.mud-dialog-fullscreen .mud-dialog-actions {
    flex-shrink: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

.photo-capture-dialog.mud-dialog-fullscreen .photo-capture-video-container {
    max-height: none !important;
    flex: 1 !important;
    min-height: 200px;
}

.photo-capture-dialog.mud-dialog-fullscreen .photo-capture-video {
    max-height: none !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-capture-dialog.mud-dialog-fullscreen .photo-capture-preview-container {
    max-height: none !important;
    flex: 1 !important;
    min-height: 200px;
}

.photo-capture-dialog.mud-dialog-fullscreen .photo-capture-preview-img {
    max-height: none !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-capture-dialog.mud-dialog-fullscreen .mud-button-root {
    min-height: 48px;
}

/* PhotoCaptureDialog: Handy-spezifisch */
@media (max-width: 480px) {
    .photo-capture-dialog .mud-dialog-title {
        padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 4px !important;
    }

    .photo-capture-dialog .mud-dialog-content {
        padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    }

    .photo-capture-dialog .mud-dialog-actions {
        padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    }

    .photo-capture-dialog .photo-capture-action-buttons {
        flex-direction: column !important;
    }

    .photo-capture-dialog .photo-capture-action-buttons > .mud-button-root {
        flex: unset !important;
        width: 100%;
    }

    .photo-capture-dialog .photo-capture-thumbnails img {
        height: 48px !important;
        width: 48px !important;
    }
}

.recording-pulse {
    animation: pulse-recording 1.2s ease-in-out infinite;
}

@keyframes pulse-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Kompakt-Ansicht: enger gefasste vertikale Abstaende.
   Wird ueber UserSettingsState.ChatViewMode == Compact aktiviert. */

.chat-messages-container.compact-view .chat-messages-inner {
    padding: 2px 8px !important;
}

.chat-messages-container.compact-view .chat-message-wrapper {
    margin-bottom: 1px !important;
}

.chat-messages-container.compact-view .system-message {
    margin-bottom: 1px !important;
}

.chat-messages-container.compact-view .message-group {
    margin-bottom: 0 !important;
}

.chat-messages-container.compact-view .chat-bubble-content {
    padding: 0.5rem 0.75rem 0.1rem !important;
    line-height: 1.35 !important;
}

.chat-messages-container.compact-view .chat-timestamp {
    margin-bottom: 1px !important;
}

.chat-messages-container.compact-view .chat-bubble-content p {
    margin-bottom: 0.15rem !important;
    line-height: 1.35 !important;
}

.chat-messages-container.compact-view .chat-bubble-content h1,
.chat-messages-container.compact-view .chat-bubble-content h2,
.chat-messages-container.compact-view .chat-bubble-content h3,
.chat-messages-container.compact-view .chat-bubble-content h4,
.chat-messages-container.compact-view .chat-bubble-content h5,
.chat-messages-container.compact-view .chat-bubble-content h6 {
    margin: 0.25rem 0 0.15rem 0 !important;
}

.chat-messages-container.compact-view .chat-bubble-content ul,
.chat-messages-container.compact-view .chat-bubble-content ol {
    margin: 0.15rem 0 !important;
}

.chat-messages-container.compact-view .chat-bubble-content li {
    margin: 0.05rem 0 !important;
    line-height: 1.35 !important;
}

.chat-messages-container.compact-view .chat-bubble-content pre,
.chat-messages-container.compact-view .chat-bubble-content blockquote {
    margin: 0.25rem 0 !important;
}

.chat-main-area:has(.chat-messages-container.compact-view) .chat-input-wrapper {
    padding: 4px !important;
}

.chat-main-area:has(.chat-messages-container.compact-view) .custom-chat-input {
    min-height: 38px !important;
    padding: 6px 14px !important;
}

/* Workaround: Diese Regeln sitzen bewusst in app.css statt im scoped MainLayout.razor.css.
   Grund: Aturis.Aura.Ui.styles.css (Blazor Scoped CSS Bundle für die Aura.Ui RCL) wird im
   Tenant-Hosting nicht ausgeliefert (404), darum landen scoped CSS-Regeln aus MainLayout.razor.css
   nicht beim Client. Bis das Static-Asset-Setup gefixt ist, müssen UI-kritische Panel-Regeln hier. */

/* Items im Two-Column-Nav-Panel: Default-Browser-Link-Styling (blau + Underline) hat
   sich durchgesetzt, weil MudBlazor's .mud-nav-link-Reset im Panel-Kontext nicht greift.
   Hart per !important auf den Mud-Theme-Text zurücksetzen — gilt für Web und Mobile. */
.two-col-panel-overlay .mud-nav-link,
.two-col-panel-overlay a {
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none !important;
}

/* Web (Desktop, >= 960 px): Panel sitzt direkt unter der AppBar (flush), aber HINTER dem AppBar-
   z-index. Dadurch erscheint der AppBar-Box-Shadow ON TOP des Panels — Schatten bleibt sichtbar.
   z-index 1099 < AppBar 1100 = MudAppBar überlagert Panel im überlappenden x/y-Bereich. */
@media (min-width: 960px) {
    .two-col-panel-overlay {
        top: var(--mud-appbar-height, 64px) !important;
        z-index: 1099 !important;
    }
}

/* MailView- und MailsOverview-Toolbar auf Mobile (< 960 px): Buttons zu Icon-only kompaktieren.
   MudBlazor v8 wickelt die Button-Struktur als <button>→<.mud-button-label>→[icon, text]; ein
   display:none auf .mud-button-label würde auch das Icon mit verstecken (das sitzt drin).
   Lösung: Text-Knoten per font-size:0 kollabieren, Icon-Größe ist über fixe SVG-width/height
   gesetzt und bleibt sichtbar. Padding reduzieren damit die Buttons nicht ungleich groß sind.
   Such-Feld in MailsOverview-Toolbar bleibt sichtbar — nimmt restliche Breite. */
@media (max-width: 959px) {
    .mailview-toolbar .mud-button-root,
    .mailsoverview-toolbar .mud-button-root {
        min-width: 0 !important;
        padding: 6px !important;
        margin-right: 0 !important;
        font-size: 0 !important;
    }
    .mailview-toolbar .mud-button-root .mud-button-icon-start,
    .mailsoverview-toolbar .mud-button-root .mud-button-icon-start {
        margin: 0 !important;
        font-size: initial !important;
    }
    /* Such-Feld nimmt den verbleibenden Platz in der MailsOverview-Toolbar */
    .mailsoverview-toolbar .mud-input-text-field,
    .mailsoverview-toolbar .mud-input-control {
        max-width: none !important;
        flex: 1 1 auto;
    }
}

/* Mobile (< 960 px): Panel über volle Bildschirmhöhe.
   Bewusst KEINE explizite height — top:0 + bottom:0 lassen den Browser die Höhe aus dem Viewport
   ausrechnen. 100vh / 100dvh haben auf Mobile (besonders im DevTools-Emulator) öfter Macken und
   ergeben Werte, die ein paar % unter dem tatsächlichen Viewport liegen — das Panel hört dann
   früher auf als die Rail-Drawer daneben.
   Padding-top:8px = Rail-Padding-top auf Mobile (Drawer-Temporary sitzt bei top:0, Rail hat 8px
   internes padding-top), damit der Panel-Header auf der gleichen Höhe wie das erste Rail-Icon
   startet. z-index 1400 > AppBar/Backdrop, damit Panel über allem liegt und Klicks ankommen. */
@media (max-width: 959px) {
    .two-col-panel-overlay {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        z-index: 1400 !important;
    }
    /* Default-Margins der Kinder zurücksetzen, sonst rutscht der Header durch das User-Agent-
       Stylesheet (z.B. <ul>-Default-Margin in MudNavMenu) zusätzlich nach unten. */
    .two-col-panel-overlay .two-col-panel-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .two-col-panel-overlay .mud-navmenu,
    .two-col-panel-overlay ul {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Kalender (Heron.MudCalendar) auf Mobile (< 960 px):
   - Heron-interne View-Auswahl-Buttons werden via CSS ausgeblendet (Show*=false hat das Rendering
     der View selbst blockiert — leerer Day-Content). Ihre Funktion uebernimmt das eigene
     Overlay-MudMenu.
   - Overlay-Icon (.cal-view-switch-overlay) absolut rechts oben auf der Heron-Toolbar. z-index 2,
     damit es ueber den Toolbar-Inhalten liegt, aber unter Popups.
   - Heron-Toolbar erlaubt Flex-Wrap, falls die Nav-Buttons (Chevrons/Heute/Datum) bei sehr engen
     Geraeten nicht in eine Zeile passen. */
.cal-view-switch-overlay {
    position: absolute;
    top: 8px; /* visuell zentriert mit Heron's Nav-Buttons (Toolbar padding-top ~8 px + Button-Center ~20 px) */
    right: 8px;
    z-index: 2;
}

@media (max-width: 959px) {
    .cal-wrapper-mobile .mud-cal-toolbar {
        flex-wrap: wrap;
        gap: 4px;
        padding-right: 56px; /* Platz fuer das absolut positionierte View-Switch-Overlay (Size.Large) */
    }
    /* Heron's interne View-Auswahl-Buttons (Tag/Arbeitswoche/Woche/Monat) verstecken.
       `.mud-cal-toolbar-nav` ist Heron's NAVIGATION-Block (Chevrons/Datum/Heute) — den BEHALTEN.
       Die View-Buttons sitzen als zweiter direkter Kind-Container daneben (ohne eigene Klasse),
       darum :not() zum Invertieren: alle direkten Kinder verstecken, AUSSER toolbar-nav. */
    .cal-wrapper-mobile .mud-cal-toolbar > *:not(.mud-cal-toolbar-nav) {
        display: none !important;
    }
}