body {
    color: rgba(0,0,0,0.87);
    font-family: RobotoDraft,"Helvetica Neue",sans-serif;
    background-color: #f3f3f3;
}

*{
    margin: 0;
    padding: 0;
}



.mat-toolbar {
    font-family: RobotoDraft, "Helvetica Neue", sans-serif !important;
}

/* Additional Material Design Style definitions */
.mat-select {

}

.mat-tooltip {
    font-size: 12px !important;
}

.mat-dialog-container {
    overflow: hidden !important;
    max-width: 90vw !important;
}



.cdk-overlay-backdrop {
    //transition: none !important;
}

.mat-checkbox {
    font-family: RobotoDraft,"Helvetica Neue",sans-serif;
}

.mat-button {
    margin: 6px 8px !important;
    padding: 0 6px !important;
    font-family: RobotoDraft,"Helvetica Neue",sans-serif !important;
    text-transform: uppercase !important;
}

.mat-mdc-button {
    margin: 6px 8px !important;
    padding: 0 6px !important;
    font-family: RobotoDraft,"Helvetica Neue",sans-serif !important;
    text-transform: uppercase !important;
}

.mat-tab-label{
    opacity: 1 !important;
    text-transform: uppercase;
    font-family: RobotoDraft,"Helvetica Neue",sans-serif !important;
}

.mat-tab-label-active {
    opacity: 1!important;
}

.mat-toolbar {
    min-height:0 !important;
    font-size: 17px !important;
    font-weight: normal !important;
}

.mat-toolbar-row, .mat-toolbar-single-row {
    height: 48px !important;
}

.mat-tab-header {

}

.mat-dialog-content{
       max-height: 85vh !important;
}

.custom-select  mat-select  .mat-select-trigger  .mat-select-value-text{    color: #fff ;}
.custom-select  mat-select  .mat-select-trigger {    min-width: 75px;}
.custom-select  mat-select  .mat-select-trigger  .mat-select-arrow{    color: #fff ;}
.custom-select  mat-select  .mat-select-trigger  .mat-select-underline{  display: none}

/*.theme-erpsearch md2-datepicker .md2-datepicker-trigger .md2-datepicker-input{display: none;}*/
/*.theme-erpsearch md2-datepicker .md2-datepicker-trigger .md2-datepicker-icon{position: absolute;top: 15px;}*/
/*md2-datepicker-input md2-datepicker-placeholder md2-floating-placeholder*/

.theme-erpsearch md2-datepicker .md2-datepicker-trigger .md2-datepicker-input .md2-datepicker-placeholder{
    overflow: hidden;
    /*display: none;*/
}

.theme-erpsearch md2-datepicker .md2-datepicker-trigger .md2-datepicker-input .md2-datepicker-value{
    overflow: hidden;
}
/*md2-datepicker-value*/

.mat-fab,
.mat-mdc-fab {
    width: 50px !important;
    height: 50px !important;
}

.mat-fab .mat-icon,
.mat-mdc-fab .mat-icon {
    line-height: 20px !important;
}

.mat-mdc-fab.openDialogEMail,
.mat-mdc-mini-fab.openDialogEMail {
    --mdc-fab-icon-color: black;
    color: black !important;
}

.mat-mdc-fab.openDialogEMail span,
.mat-mdc-mini-fab.openDialogEMail span {
    color: black !important;
}

.mat-dialog-title {
    font-weight: 500 !important;
}

.ng-tool-tip-content{
    z-index: 10000 !important;
    padding: 10px !important;
    max-width: 200px !important;
    margin-left: 20px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    border: 0 !important;
    background-color: #263238 !important;
    color: white !important;
}

.ng-tool-tip-content.yellow {
    background-color: #ffb000 !important;
}

.ng-tool-tip-content.red {
    background-color: #f20000 !important;
}

.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon, .mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
    width: 1.3em !important;

}

mat-datepicker-toggle button {
    transform: translateY(6px);
}

.account-menu-panel {
    min-width: 320px !important;
    max-width: 320px !important;
}

/* Disable MDC dialog content scale/grow animation - show content instantly at full size */
.mat-mdc-dialog-container .mdc-dialog__surface,
.mat-mdc-dialog-container .mat-mdc-dialog-surface {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    padding: 0 !important;
}

.mat-mdc-dialog-container {
    animation: none !important;
    transition: none !important;
}

.legacy-dialog-panel {
    max-height: 100vh !important;
}

.legacy-dialog-panel .mat-mdc-dialog-container,
.legacy-dialog-panel .mat-mdc-dialog-inner-container,
.legacy-dialog-panel .mat-mdc-dialog-surface {
    max-height: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Override MDC inner-container defaults (row direction, centering, space-around)
   so the surface fills the container height instead of being centered with gaps. */
.legacy-dialog-panel .mat-mdc-dialog-inner-container {
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* The component host element (e.g. app-dialog-xxx) gets class
   mat-mdc-dialog-component-host from Angular Material. The built-in style
   sets display:contents which removes it from the box model. Override to
   flex so it participates in the height chain. */
.legacy-dialog-panel .mat-mdc-dialog-component-host {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Any wrapping form inside the component host must also participate
   in the flex chain so height flows down to adac-dialog. */
.legacy-dialog-panel .mat-mdc-dialog-component-host > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.legacy-dialog-panel adac-dialog {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.legacy-dialog-panel .mdc-radio {
    padding: 0 !important;
}
.legacy-dialog-panel .mat-mdc-radio-button .mdc-form-field {
    height: auto !important;
}

.legacy-dialog-panel .mat-mdc-dialog-surface,
.legacy-dialog-panel .mat-mdc-dialog-container {
    background: white !important;
    background-color: white !important;
    border-radius: 4px !important;
}

.legacy-dialog-panel .mat-mdc-dialog-container {
    box-shadow: none !important;
}

.legacy-dialog-panel .mat-mdc-dialog-surface {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px !important;
}

.legacy-dialog-panel .mdc-dialog__content,
.legacy-dialog-panel .mat-mdc-dialog-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    background: white !important;
    color: rgba(0, 0, 0, 0.87) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.legacy-dialog-panel .mat-mdc-dialog-actions {
    border-top: none !important;
    padding: 8px 0 !important;
    min-height: 52px !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
    background: white !important;
}

.legacy-dialog-panel .mat-mdc-dialog-actions .mat-mdc-button,
.legacy-dialog-panel .mat-mdc-dialog-actions button {
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.87) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Reset MDC card-content padding to match legacy Angular Material */
.mat-mdc-card-content {
    padding: 0 !important;
}

.mat-mdc-card-content:last-child {
    padding-bottom: 0 !important;
}

.mat-mdc-card-content:first-child {
    padding-top: 0 !important;
}

/* Legacy dialog: Themenschwerpunkte list styling */
.legacy-dialog-panel .scrollbar li {
    color: #282828 !important;
}

.legacy-dialog-panel .scrollbar li mat-icon,
.legacy-dialog-panel .scrollbar li .mat-icon,
.legacy-dialog-panel .scrollbar mat-icon,
.legacy-dialog-panel mat-icon.mat-icon {
    color: #282828 !important;
}

.legacy-dialog-panel .scrollbar li .name {
    color: #282828 !important;
}

.legacy-dialog-panel mat-checkbox {
    --mdc-checkbox-selected-icon-color: #263238 !important;
    --mdc-checkbox-selected-checkmark-color: white !important;
    --mdc-checkbox-selected-hover-icon-color: #263238 !important;
    --mdc-checkbox-selected-focus-icon-color: #263238 !important;
    --mdc-checkbox-selected-pressed-icon-color: #263238 !important;
    --mdc-checkbox-unselected-icon-color: rgba(0,0,0,0.54) !important;
}

.legacy-dialog-panel .mdc-dialog__content {
    background: white !important;
    color: rgba(0,0,0,0.87) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Override MDC dialog content typography defaults to match production (16px) */
.legacy-dialog-panel .mat-mdc-dialog-content,
.legacy-dialog-panel .mdc-dialog__content,
.legacy-dialog-panel .mat-mdc-dialog-content *:not(mat-icon):not(.mat-icon):not(.mat-mdc-button):not(button):not(h1):not(h2):not(h3):not(mat-toolbar):not(.mat-toolbar):not(.toolbar-inner):not(.adac-tab-label):not(.adac-tab-header) {
    font-size: 16px !important;
    line-height: normal !important;
    letter-spacing: normal !important;
}

/* Restore proper font sizes for ADAC form field validation errors inside legacy dialogs.
   Needs :not() padding to beat the specificity of the *:not():not()... rule above. */
.legacy-dialog-panel .mat-mdc-dialog-content .adac-form-field-subscript-wrapper:not(.x):not(.y):not(.z):not(.a):not(.b):not(.c):not(.d):not(.e) {
    font-size: 75% !important;
}

.legacy-dialog-panel .mat-mdc-dialog-content adac-error:not(.x):not(.y):not(.z):not(.a):not(.b):not(.c):not(.d):not(.e) {
    font-size: 12px !important;
}

/* Dialog close button (X) icon must be white on dark title bar - needs high specificity to beat .legacy-dialog-panel mat-icon.mat-icon */
.legacy-dialog-panel .closepop mat-icon.mat-icon,
.legacy-dialog-panel .closepop .mat-icon,
.closepop mat-icon,
.closepop .mat-icon {
    color: white !important;
}

/* Home icon in usergroup settings dialog - override .legacy-dialog-panel mat-icon color */
.legacy-dialog-panel .home mat-icon.mat-icon,
.legacy-dialog-panel .home .mat-icon {
    color: #cacaca !important;
}
.legacy-dialog-panel .home.ishome mat-icon.mat-icon,
.legacy-dialog-panel .home.ishome .mat-icon {
    color: black !important;
}

/* ============================================================
   adac-dialog global overrides
   These apply to ALL dialogs using <adac-dialog> wrapper,
   regardless of panelClass (works even without legacy-dialog-panel)
   ============================================================ */

/* Toolbar: no negative margins, full width inside dialog surface */
adac-dialog mat-toolbar,
adac-dialog .mat-toolbar {
    margin: 0 !important;
    width: 100% !important;
}

/* Dialog surface: 4px border-radius to match production */
.mat-mdc-dialog-surface:has(adac-dialog) {
    border-radius: 4px !important;
}

/* Checkbox dark colors for all dialogs with adac-dialog */
adac-dialog mat-checkbox,
.cdk-overlay-container mat-checkbox {
    --mdc-checkbox-selected-icon-color: #263238 !important;
    --mdc-checkbox-selected-checkmark-color: white !important;
    --mdc-checkbox-selected-hover-icon-color: #263238 !important;
    --mdc-checkbox-selected-focus-icon-color: #263238 !important;
    --mdc-checkbox-selected-pressed-icon-color: #263238 !important;
    --mdc-checkbox-unselected-icon-color: rgba(0,0,0,0.54) !important;
}

/* Fix MDC checkbox vertical alignment in departments-checkbox-list:
   MDC calculates top/left from state-layer-size (default 40px → 11px offset).
   Override to 0 so the checkbox visual sits at the top-left of its 18px container. */
app-departments-checkbox-list .mdc-checkbox__background {
    top: 0 !important;
    left: 0 !important;
}
app-departments-checkbox-list .mdc-checkbox {
    --mdc-checkbox-state-layer-size: 18px;
}

/* Dialog actions: right-aligned, no border, white bg, uppercase buttons.
   flex-shrink: 0 keeps the action bar always visible at the bottom. */
.legacy-dialog-panel adac-dialog .mat-mdc-dialog-actions,
adac-dialog .mat-mdc-dialog-actions {
    border-top: none !important;
    padding: 8px 24px 16px !important;
    min-height: 52px !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
    background: white !important;
}

adac-dialog .mat-mdc-dialog-actions .mat-mdc-button,
adac-dialog .mat-mdc-dialog-actions button[mat-button],
adac-dialog .mat-mdc-dialog-actions button {
    text-transform: uppercase !important;
    font-family: RobotoDraft, "Helvetica Neue", sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.87) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Dialog content: white bg, dark text, edge-to-edge by default (individual dialogs add their own padding).
   flex: 1 + overflow: auto makes the content scroll within the viewport-constrained dialog. */
.legacy-dialog-panel adac-dialog .mat-mdc-dialog-content,
.legacy-dialog-panel adac-dialog .mdc-dialog__content,
adac-dialog .mat-mdc-dialog-content,
adac-dialog .mdc-dialog__content {
    background: white !important;
    color: rgba(0, 0, 0, 0.87) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    padding: 0 !important;
}

/* Mat-menu: ensure <a> tags inside menu content display as block (for mailto links etc.) */
.mat-mdc-menu-panel .mat-mdc-menu-content > a {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Tab labels UPPERCASE in dialogs (matches legacy Angular Material) */
.legacy-dialog-panel .mat-mdc-tab .mdc-tab__text-label,
.mat-mdc-dialog-container .mat-mdc-tab .mdc-tab__text-label,
adac-dialog .mat-mdc-tab .mdc-tab__text-label {
    text-transform: uppercase !important;
}

/* ============================================================
   Callback Ticket Dialog - Full viewport layout
   Production uses Angular Material 9 with padding: 24px on
   mat-dialog-container, overflow: hidden, fills viewport.
   MDC (Angular Material 19) needs explicit sizing and flex layout.

   Flex chain (each level fills its parent):
   .cdk-overlay-pane (.callback-ticket-dialog-panel)
     mat-dialog-container.mat-mdc-dialog-container.mdc-dialog
       div.mat-mdc-dialog-inner-container.mdc-dialog__container
         div.mat-mdc-dialog-surface.mdc-dialog__surface
           app-dialog-add-edit-callback-ticket.mat-mdc-dialog-component-host
               form
                 adac-dialog
                   .adac-dialog-header  (48px, flex-shrink:0)
                   mat-dialog-content   (flex:1, overflow:auto)
                   div[mat-dialog-actions] (52px, flex-shrink:0)
   ============================================================ */

/* The overlay pane must fill the viewport with 24px padding (like production's mat-dialog-container padding) */
.callback-ticket-dialog-panel {
    max-width: 1560px !important;
    width: calc(100vw - 48px) !important;
    height: calc(100vh - 48px) !important;
    max-height: 100vh !important;
}

/* The MDC dialog container and surface must fill the pane and clip overflow */
.callback-ticket-dialog-panel .mat-mdc-dialog-container,
.callback-ticket-dialog-panel .mat-mdc-dialog-inner-container,
.callback-ticket-dialog-panel .mat-mdc-dialog-surface {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Override MDC inner-container defaults for callback-ticket dialog as well */
.callback-ticket-dialog-panel .mat-mdc-dialog-inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* The component host element must fill the surface.
   Override display:contents from built-in style on .mat-mdc-dialog-component-host. */
.callback-ticket-dialog-panel .mat-mdc-dialog-component-host {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* The component element itself must fill height */
.callback-ticket-dialog-panel app-dialog-add-edit-callback-ticket {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* The form wrapping adac-dialog must fill height */
.callback-ticket-dialog-panel app-dialog-add-edit-callback-ticket > form {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* The adac-dialog wrapper must be a flex column filling its parent.
   position: relative makes it the positioning context for all absolutely
   positioned children (FABs, .comments_container, .history_overlay) --
   matching production where mat-dialog-container was the context. */
.callback-ticket-dialog-panel adac-dialog {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Toolbar header: fixed 48px, never shrinks */
.callback-ticket-dialog-panel .adac-dialog-header {
    flex-shrink: 0 !important;
}

/* The dialog content (mat-dialog-content) fills between toolbar and actions.
   position: static so that absolute children (FABs, .comments_container) are
   positioned relative to adac-dialog (the dialog container) instead of the
   content area -- matching production where they were positioned relative to
   mat-dialog-container. overflow: visible to not clip absolute elements. */
.callback-ticket-dialog-panel .mat-mdc-dialog-content,
.callback-ticket-dialog-panel .mdc-dialog__content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    border: none !important;
}

/* Actions bar: fixed height, always visible at bottom, right-aligned, never shrinks.
   position: relative + z-index to sit above any absolutely positioned content. */
.callback-ticket-dialog-panel .mat-mdc-dialog-actions {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 8px 0 !important;
    justify-content: flex-end !important;
    border-top: none !important;
    background: white !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Action buttons must not be affected by the component's button { transform: scale(0) } rule */
.callback-ticket-dialog-panel .mat-mdc-dialog-actions button {
    transform: scale(1) !important;
}