/* GAP DESIGN - Styles */

html[data-mode="light"] {
    color-scheme: light !important;
    --db-logo-url: url("db-ui/db-theme/build/images/light/db_logo.svg") !important;
    --db-textarea-scrollbar-button-decrement: url("db-ui/db-theme/build/images/light/chevron_down.svg") !important;
    --db-textarea-scrollbar-button-increment: url("db-ui/db-theme/build/images/light/chevron_up.svg") !important;
    --db-textarea-resizer-image: url("../../../../db-ui/db-theme/build/images/light/resize_handle_corner.svg") !important;
}

html[data-mode="dark"] {
    color-scheme: dark !important;
    --db-logo-url: url("db-ui/db-theme/build/images/dark/db_logo.svg") !important;
    --db-textarea-scrollbar-button-decrement: url("db-ui/db-theme/build/images/dark/chevron_down.svg") !important;
    --db-textarea-scrollbar-button-increment: url("db-ui/db-theme/build/images/dark/chevron_up.svg") !important;
    --db-textarea-resizer-image: url("../../../../db-ui/db-theme/build/images/dark/resize_handle_corner.svg") !important;
}

.db-brand::before {
    content: "";
    display: inline-block;
    width: var(--db-sizing-md);
    height: var(--db-sizing-sm);
    margin-right: var(--db-spacing-fixed-sm);
    background-image: var(--db-logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

#gap-header {
    position: fixed;
    width: 100%;
    anchor-name: --gap-header;
    z-index: 100;
}

#gap-header db-navigation .db-button {
    border-color: transparent;
}

#gap-header db-navigation ul {
    width: fit-content;
}

#gap-header #gap-user {
    padding-right: var(--db-spacing-fixed-sm);
    border-right: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

#gap-header #gap-user .db-sub-navigation:not([data-force-mobile]),
#gap-header #gap-user .db-sub-navigation[data-force-mobile=false] {
    min-inline-size: auto;
}

#gap-header .db-switch {
    display: grid;
    padding-left: var(--db-spacing-fixed-md);
    align-items: center;
}

#gap-header #gap-mode input:not([type="checkbox"]:checked):after {
    --db-icon-trailing: "sun";
    visibility: visible;
}

#gap-header #gap-mode input[type="checkbox"]:checked:after {
    --db-icon-trailing: "moon";
    position: absolute;
    left: 0;
    visibility: visible;
}

#gap-header #gap-mode input[type="checkbox"]:checked:before {
    margin-left: -51%;
}

#gap-header .db-header-action-container {
     display: none !important;
}

.blanket {
    position: fixed;
    width: 100%;
    height: var(--db-sizing-xl);
    top: anchor(--gap-header bottom);
    left: anchor(--gap-header left);
    margin-top: calc(var(--db-spacing-fixed-xs) * -1);
    background-color: var(--db-adaptive-bg-basic-level-1-default);
    z-index: 97;
}

body:has(.dbui-page-grid--split-vertical) db-header + .blanket,
body:has(.dbui-page-grid--grid-2x2) db-header + .blanket {
    height: 0;
    width: 0;
}

#gap-navi {
    position: fixed;
    width: fit-content;
    top: calc(anchor(--gap-header bottom) + var(--db-spacing-fixed-xs));
    left: anchor(--gap-header left);
    padding: var(--db-spacing-fixed-sm);
    border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
    border-radius: 0 0 var(--db-border-radius-sm) 0;
    background-color: var(--db-neutral-bg-basic-level-1-default);
    z-index: 99;
}

#gap-navi a {
    font-size: 1rem;
}

#gap-navi .gap-subnav a {
    font-size: 0.8rem;
}

#gap-navi db-navigation menu {
    display: flex;
    flex-direction: column;
}

#gap-navi db-navigation-item {
    display: block;
    width: 100%;
}

#gap-navi .gap-subnav {
    padding-left: var(--db-spacing-fixed-xl);
}

#gap-navi .gap-subnav db-navigation-item:not(:first-child) {
    margin-top: var(--db-spacing-fixed-md);
}

#gap-navi li:has([aria-current="page"]) > a {
    pointer-events: none;
}

#gap-navi .gap-toggle-val {
    display: none;
}

#gap-navi .gap-toggle-tab {
    position: absolute;
    right: 0;
    top: calc(var(--db-border-width-3xs) * -1);
    transform: translateX(100%);
    width: 30px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
    border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
    border-left: 0;
    border-radius: 0 var(--db-border-radius-sm) var(--db-border-radius-sm) 0;
    background-color: var(--db-adaptive-bg-basic-level-1-default);
}

#gap-navi:has(.gap-toggle-val:not(:checked)) a {
    font-size: 0;
}

#gap-navi:has(.gap-toggle-val:not(:checked))  .gap-subnav {
    display: none;
}

#gap-navi:has(.gap-toggle-val:checked) .gap-toggle-icon {
    transform: rotate(180deg);
}

#gap-navtabs .db-tab-list:not(.db-tabs:not(#gap-navtabs) .db-tab-list) {
    position: fixed !important;
    top: anchor(--gap-header bottom);
    left: anchor(--gap-main left);
    right: anchor(--gap-navtabs right);
    margin-top: var(--db-spacing-responsive-xs);
    margin-left: var(--db-spacing-responsive-lg);
    isolation: isolate;
    anchor-name: --gap-navtabs;
    z-index: 98 !important;
}

#gap-navtabs h2 {
    anchor-name: --gap-navtabs;
}

#gap-navtabs db-tab-list [data-icon]:is(span):not([hidden]) {
    display: flex;
}

#gap-main {
    padding: var(--db-spacing-responsive-md) var(--db-spacing-responsive-lg);
    width: 100%;
    margin: 0 auto;
    anchor-name: --gap-main;
}

#gap-main .db-tab-panel:not(.db-tabs:not(#gap-navtabs) .db-tab-panel) {
    padding-top: var(--db-spacing-responsive-lg);
}

#gap-user li {
    border-right-width: var(--db-border-width-3xs);
}

#gap-user .db-navigation-item a {
    padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
}

[data-icon-leading]:before,
[data-icon]:before {
    width: 24px;
}

#gap-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--db-spacing-fixed-md) var(--db-spacing-fixed-lg);
    border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
    background-color: var(--db-adaptive-bg-basic-level-1-default);
    z-index: 100;
}

db-notification[data-warning-overlay="fixed"],
db-notification > .db-notification[data-warning-overlay="fixed"] {
    position: fixed;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--db-spacing-fixed-sm));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: min(48rem, calc(100vw - (2 * var(--db-spacing-fixed-sm))));
    box-sizing: border-box;
    margin: 0;
    z-index: 1002;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

.dbui-page {
    padding: var(--db-spacing-responsive-md);
}

.dbui-page-layout,
.dbui-page-grid {
    display: grid;
    padding-top: var(--db-spacing-responsive-sm);
    gap: var(--db-spacing-fixed-md);
}

.dbui-layout-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--db-neutral-on-bg-basic-emphasis-50-default);
    border-radius: var(--db-border-radius-sm);
    background: var(--db-adaptive-bg-basic-level-1-default);
    overflow: hidden;
}

.dbui-layout-panel__header {
    padding: var(--db-spacing-fixed-md) var(--db-spacing-fixed-lg);
    border-bottom: 1px solid var(--db-neutral-on-bg-basic-emphasis-50-default);
    background: var(--db-adaptive-bg-basic-level-2-default);
}

.dbui-layout-panel__header h2 {
    margin: 0 0 var(--db-spacing-fixed-2xs);
}

.dbui-layout-panel__header p {
    margin: 0;
}

.dbui-layout-panel__content {
    padding: var(--db-spacing-fixed-md);
}

.dbui-layout-placeholder {
    padding: var(--db-spacing-fixed-lg);
    border: 1px solid var(--db-neutral-on-bg-basic-emphasis-50-default);
    border-radius: var(--db-border-radius-sm);
    background: var(--db-adaptive-bg-basic-level-1-default);
}

.dbui-layout-placeholder--inline {
    margin-bottom: 0;
}

.dbui-layout-placeholder h3,
.dbui-layout-placeholder h4 {
    margin-top: 0;
}

.dbui-footer-links,
.dbui-sub-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dbui-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-spacing-fixed-md);
    margin-bottom: var(--db-spacing-fixed-sm);
}

.dbui-navigation-toggle {
    display: none;
}

.dbui-navigation-toggle__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dbui-page-grid--split-vertical,
.dbui-page-grid--grid-2x2 {
    height: 86vh;
    grid-template-columns: repeat(2, 1fr);
}

.dbui-page-grid--split-vertical {
    grid-template-rows: 1fr;
}

.dbui-page-grid--grid-2x2 {
    grid-template-rows: repeat(2, 1fr);
}

.dbui-page-grid--split-vertical > section,
.dbui-page-grid--grid-2x2 > section {
    overflow-y: auto;
    height: 100%;
}

/* LIB FIXES - Styles für fixes von Problemen mit der DU UX Library */

@font-face {
    font-family: 'icon-font-fallback';
    src: url('db-ui/core-foundations/assets/icons/fonts/fallback/icon-font-fallback.woff2') format('woff2');
}