/**
 * SOGo Theme CSS - HRZ
 * 
 * This file imports:
 * 1. theme-default-base.css - Angular Material generated theme styles
 * 2. custom.css - Custom accessibility and branding overrides (INLINED)
 * 
 * NOTE: custom.css content is inlined below because SOGo does not resolve @import
 */

@import url('theme-default-base.css');

/* Custom accessibility and branding overrides - inlined from custom.css */

/* Toolbar background for login screen */
.sg-padded.md-hue-2 {
    background-color: rgb(33, 63, 33) !important;
}

md-toolbar.toolbar-main {
    background-color: rgb(33, 63, 33) !important;
}

md-toolbar.md-accent,
md-toolbar.md-accent.md-hue-1 {
    background-color: rgb(33, 63, 33) !important;
}

/* Mailbox content toolbar - white background */
md-toolbar.md-accent.md-hue-1:not(.toolbar-main) {
    background-color: rgb(255, 255, 255) !important;
}

/* Settings header/toplevel toolbar - dark green background */
md-toolbar.md-tall {
    background-color: rgb(33, 63, 33) !important;
}

/* Editor toolbars - dark green background */
md-toolbar._md._md-toolbar-transitions {
    background-color: rgb(33, 63, 33) !important;
}

/* Fallback: Catch any md-toolbar without theme classes */
md-toolbar._md:not(.toolbar-main):not(.md-accent):not(.md-tall):not(.daysView):not(.monthView) {
    background-color: rgb(33, 63, 33) !important;
}

/* Login screen focused input styles */
.sg-login md-input-container.md-input-focused label {
    color: rgba(255, 255, 255, 0.87) !important;
}

.sg-login md-input-container.md-input-focused .md-input {
    border-color: rgba(255, 255, 255, 0.87) !important;
}

.sg-login md-input-container.md-input-focused md-icon {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Prominent validation styling - red indicator line and error messages */
md-input-container.md-input-invalid .md-input {
    border-color: rgb(244, 67, 54) !important;
    border-width: 2px !important;
}

md-input-container.md-input-invalid label {
    color: rgb(244, 67, 54) !important;
    font-weight: 700 !important;
}

md-input-container.md-input-invalid .md-input-message-animation {
    color: rgb(244, 67, 54) !important;
    font-weight: 700 !important;
}

md-input-container.md-input-invalid .md-input-message-animation.ng-enter {
    color: rgb(244, 67, 54) !important;
    font-weight: 700 !important;
}

/* Fix for Login screen label contrast on error */
.sg-login md-input-container.md-input-invalid label {
    color: rgb(255, 110, 110) !important;
    font-weight: 700 !important;
}

.sg-login md-input-container.md-input-invalid .md-input-message-animation {
    color: rgb(255, 110, 110) !important;
    font-weight: 700 !important;
}

/* Fix for Top Navigation icons contrast */
.sg-toolbar-group-last .md-button md-icon {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

.sg-toolbar-group-last .md-button[disabled] md-icon {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

/* Make active module fully visible */
.sg-toolbar-group-last .md-button {
    opacity: 1 !important;
}

/* Accessibility fixes 2025-12-17 */

/* Login Screen: Labels should be white */
.sg-login md-input-container label {
    color: rgba(255, 255, 255, 1) !important;
}

.sg-login md-input-container label::after,
.sg-login md-input-container .md-required {
    color: rgba(255, 255, 255, 1) !important;
}

.sg-login md-input-container .md-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}

.sg-login md-input-container label::after,
.sg-login md-input-container .md-required {
    color: rgba(255, 255, 255, 1) !important;
}

.sg-login md-input-container .md-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}

/* Login Screen: Icons (Globe, Info, Stars) should be white */
.sg-login md-icon {
    color: rgba(255, 255, 255, 1) !important;
}

/* Login Screen: Error/Welcome message text should be white */
.sg-login .md-default-theme.md-accent.md-hue-1.md-fg,
.sg-login .md-fg,
.sg-login .md-fg.md-padding {
    color: rgba(255, 255, 255, 1) !important;
}

.sg-login md-select .md-select-value,
.sg-login md-select .md-select-placeholder,
.sg-login md-select .md-select-icon {
    color: rgba(255, 255, 255, 1) !important;
}

/* Settings: Warn buttons should have white text */
.md-button.md-warn.md-raised,
.md-default-theme.md-accent.md-hue-1 div,
.md-default-theme.md-accent.md-hue-1 button[ng-transclude] {
    color: rgba(255, 255, 255, 1) !important;
}

/* Calendar: Week/Month view headers (Weekdays, KW) */

/* White background for calendar headers - override md-toolbar._md fallback */
md-toolbar.monthView._md._md-toolbar-transitions,
md-toolbar.daysView._md._md-toolbar-transitions {
    background-color: rgb(255, 255, 255) !important;
}

/* Theme-colored text for calendar header labels */
md-toolbar.monthView .dayLabels,
md-toolbar.monthView .dayLabels div,
md-toolbar.daysView .dayLabels,
md-toolbar.daysView .dayLabels div {
    color: rgb(33, 63, 33) !important;
}

/* Calendar week number - fix parent overflow */
.sg-calendar-tile-week {
    overflow: visible !important;
}

/* Calendar week number - grey ellipse, theme-colored text - override md-bg class */
.sg-calendar-tile-week span,
.sg-calendar-tile-week span.md-bg,
.sg-calendar-tile-week span.md-hue-1 {
    border: none !important;
    border-radius: 8px !important;
    display: inline-block !important;
    width: 36px !important;
    height: 22px !important;
    max-width: 36px !important;
    min-width: 36px !important;
    text-align: center !important;
    line-height: 20px !important;
    font-size: 0.8em !important;
    background-color: rgba(33, 63, 33, 0.15) !important;
    color: rgb(33, 63, 33) !important;
    padding: 1px 0 !important;
}

/* Highlight the current day in the calendar */
.dayOfToday {
    background-color: rgba(86, 176, 76, 0.2) !important;
}

/* Fix: Prevent calendar alarm popup toasts from overlapping event entry dialogs.
   Compiled CSS assigns md-toast z-index:105 (above .md-dialog-container z-index:80),
   so alarm toasts block save/cancel buttons in the event editor.
   Raise .md-dialog-container above md-toast to keep dialogs on top. */
.md-dialog-container {
    z-index: 106 !important;
}

/* Fix: Autocomplete/select dropdowns must appear above dialog (z-index 106).
   The dialog z-index was raised to 106 to fix toast overlap, but this caused
   md-autocomplete suggestions and md-select-menu to appear BEHIND the dialog
   in the ACL/sharing editor. Raise dropdown z-index above dialog.

   Z-index layering:
     md-toast                    → 104 (below dialog)
     ._md-panel-backdrop         → 105 (below dialog)
     .md-dialog-container        → 106 (dialog)
     .md-autocomplete-suggestions → 107 (above dialog)
     md-select-menu-container    → 107 (above dialog)
     md-menu-backdrop            → 107 (above dialog)
     md-menu-container           → 108 (above all) */

/* Autocomplete suggestions dropdown (used in ACL editor user search) */
.md-autocomplete-suggestions-container,
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    z-index: 107 !important;
}

/* Select menu dropdown — container is <div class="md-select-menu-container"> */
.md-select-menu-container {
    z-index: 107 !important;
}

/* Menu backdrop and container — rendered as <md-backdrop class="md-menu-backdrop">
   and <div class="md-open-menu-container"> (the bare element selector md-menu-container
   did NOT match these class divs, so menus stayed at z-index 100 behind the dialog). */
md-backdrop.md-menu-backdrop {
    z-index: 107 !important;
}

.md-open-menu-container {
    z-index: 108 !important;
}

/* $mdDialog backdrop below its dialog */
md-backdrop.md-dialog-backdrop {
    z-index: 105 !important;
}

/* $mdPanel popups (sgColorPicker color picker, image gallery, mailbox/calendar
   list-item menus) are body-attached with NO z-index in styles.css
   (.md-panel-inner-wrapper{position:fixed}) -> they would paint BELOW
   .md-dialog-container (106) and be hidden behind dialogs. Raise the whole
   panel stack above the dialog, at menu level. */
.md-panel-outer-wrapper,
.md-panel-inner-wrapper {
    z-index: 108 !important;
}

/* Fix: Datepicker + timepicker panes are hidden behind open dialogs.
   Compiled styles.css positions .md-datepicker-calendar-pane and
   .sg-timepicker-time-pane with z-index:100 (position:absolute,
   left:-100% until opened) — BELOW .md-dialog-container (106). Same problem
   class as the color picker above: opening date/time inside a dialog (event
   editor start/end, reminder settings) renders the calendar/time pane behind
   the dialog. Raise the panes + the picker inputs to panel level (108). */
.md-datepicker-input,
.sg-timepicker-input,
.md-datepicker-calendar-pane,
.sg-timepicker-time-pane {
    z-index: 108 !important;
}

/* $mdPanel click-catcher must sit above the dialog so clickOutsideToClose
   works while a dialog is open (the panel itself is at 108). */
._md-panel-backdrop {
    z-index: 107 !important;
}

/* md-toast should stay below dialog (which is 106) */
md-toast {
    z-index: 104 !important;
}

/* Select modal backdrop: compiled styles.css sets md-backdrop.md-select-backdrop
   to z-index 81 — below .md-dialog-container (106) — so over a dialog the select
   did not get its modal backdrop (outside clicks/close + darkening failed).
   Keep it above the dialog, below the select menu (107): 106. */
md-backdrop.md-select-backdrop {
    z-index: 106 !important;
}

/* 2026-10-09: Mobile login page - no scrolling needed.
   On screens < 600px (Angular Material xs) the login page stacks the logo
   above the form. Without size caps the SVG logo (~0.6x the viewport width
   in height) plus the form exceeds the viewport height, forcing a scroll.
   Shrink the logo to a compact centered header and tighten the form so the
   default login state fits one screen. The error/TOTP/password states stay
   scrollable - they are allowed to exceed the fold (a11y). */
@media (max-width: 599.98px) {
    #loginContent > .sg-logo {
        padding: 8px 8px 0 8px !important;
    }
    #loginContent .sg-logo div[layout="row"] {
        padding: 0 !important;
        justify-content: center !important;
    }
    #loginContent .sg-logo img {
        width: auto !important;
        max-width: 60vw !important;
        max-height: 16vh !important;
        margin: 0 !important;
    }
    #loginContent .sg-logo .motd {
        font-size: 0.85em !important;
        text-align: center !important;
    }
    .sg-login-content {
        padding: 2px 16px 12px 16px !important;
    }
    .sg-login md-input-container {
        margin-bottom: 8px !important;
    }
}

/* 2026-10-09: Login-Headline symmetrisch zum Logo (Desktop/Tablet).
   SOGo-Basis legt zwischen Logo-Unterkante und der „Webmail und Kalender
   für das HRZ“-H3 insgesamt ~64 px ab (img mb + Spacer + .md-padding pt 16 +
   .md-flex mt 5 + h3 mt 18.7). Scoped unter #loginContent .sg-logo reduziert;
   das h3-margin-top (8 px) gleicht den festen ~16-px-Spacer aus, sodass
   oberhalb der H3 genauso viel Abstand ist wie unterhalb (24 px / 24 px,
   gemessen via getBoundingClientRect gegen Logo bzw. nächste Zeile). */
#loginContent .sg-logo h3 {
    margin-top: 8px !important;
}
#loginContent .sg-logo .md-flex {
    margin-top: 0 !important;
}
#loginContent .sg-logo .md-padding {
    padding-top: 0 !important;
}
#loginContent .sg-logo img {
    margin-bottom: 0 !important;
}

/* Fix: Sieve filter / appointment dialog header contrast (Planio #53945)
   Labels, placeholders, and input fields inside dialog toolbars with dark
   backgrounds were nearly invisible (black/dark-red on dark blue/green).
   Scoped to md-dialog so bright list toolbars (e.g. Contacts search in
   md-toolbar.md-accent.md-hue-1) keep their dark-on-light text.
   (theme-default.css is the actually-served stylesheet on the web servers;
   custom.css is not loaded by SOGo's UI.) */

/* Label, placeholder, and required indicator: white on dark toolbar */
md-dialog md-toolbar md-input-container label,
md-dialog md-toolbar md-input-container .md-placeholder,
md-dialog md-toolbar md-input-container .md-required,
md-dialog md-toolbar md-input-container label::after {
    color: rgba(255, 255, 255, 1) !important;
}

/* Error labels and messages: bright salmon on dark toolbar */
md-dialog md-toolbar md-input-container.md-input-invalid label,
md-dialog md-toolbar md-input-container.md-input-invalid .md-input-message-animation {
    color: rgb(255, 110, 110) !important;
    font-weight: 700 !important;
}

/* Input field text: white on dark toolbar */
md-dialog md-toolbar md-input-container .md-input {
    color: rgba(255, 255, 255, 1) !important;
}

/* Placeholder text: white on dark toolbar (vendor prefixes in separate rules) */
md-dialog md-toolbar md-input-container .md-input::placeholder {
    color: rgba(255, 255, 255, 1) !important;
}
md-dialog md-toolbar md-input-container .md-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}
md-dialog md-toolbar md-input-container .md-input::-moz-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}
md-dialog md-toolbar md-input-container .md-input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}