/* KOST Software GmbH - RD Web Client Branding */

/* Hintergrund */
body, #body, #root, html {
    background-image: url('/RDWeb/webclient/kost_bg.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* KOST Header Bar */
#kost-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    background-color: #0a1830 !important;
    border-bottom: 3px solid #f1b850 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 24px !important;
    z-index: 9999 !important;
}

#kost-header img {
    height: 36px !important;
    width: auto !important;
}

/* KOST Footer */
#kost-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 36px !important;
    background-color: #0a1830 !important;
    border-top: 3px solid #f1b850 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    z-index: 999 !important;
    color: #8899bb !important;
    font-size: 12px !important;
    font-family: Segoe UI, Arial, sans-serif !important;
}

#kost-footer a {
    color: #8899bb !important;
    text-decoration: none !important;
}

#root {
    padding-top: 50px !important;
    padding-bottom: 36px !important;
}

/* Login Dialog */
.ms-Dialog-main {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 50px rgba(0,0,0,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

/* Blauer Header */
.ms-Dialog-lgHeader {
    background-color: #3D5A99 !important;
    padding: 20px 24px 16px !important;
    margin: 0 !important;
}

.ms-Dialog-lgHeader * {
    color: #ffffff !important;
}

.kw h2 {
    margin: 0 0 4px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.kw p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #ccd6e8 !important;
}

/* Weisser Formular-Bereich */
.ms-Dialog-inner {
    background-color: #ffffff !important;
    padding: 24px !important;
    margin: 0 !important;
    flex: 1 !important;
}

.ms-Dialog-inner * {
    color: #333333 !important;
}

/* Orange Anmelden-Button */
.ms-Button--primary {
    background-color: #f1b850 !important;
    border-color: #f1b850 !important;
    color: #ffffff !important;
}

.ms-Button--primary:hover {
    background-color: #d9a040 !important;
    border-color: #d9a040 !important;
}

/* Sicherheitshinweis */
.ks {
    background-color: #ffffff !important;
    border-top: 3px solid #f1b850 !important;
    padding: 12px 24px 16px !important;
    font-size: 12px !important;
    color: #555 !important;
}

/* Topbar ausblenden */
[class*="topBar_"], [role="banner"], header {
    display: none !important;
}

/* App-Bereich */
[class*="resourcesContainer_"], [class*="workspaceContainer_"] {
    background-color: rgba(255,255,255,0.93) !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 16px !important;
}

/* Datenschutz-Link */
.ms-Dialog-inner a {
    color: #3D5A99 !important;
    text-decoration: none !important;
}

.ms-Dialog-inner a:hover {
    text-decoration: underline !important;
}

/* Abstand unter Untertitel */
.ms-Dialog-lgHeader {
    padding-bottom: 20px !important;
    border-bottom: 3px solid #f1b850 !important;
}

/* Kein weisser Zwischenraum vor Sicherheitshinweis */
.ms-Dialog-main {
    gap: 0 !important;
}

.ks {
    margin: 0 !important;
}

/* Inner keinen extra Abstand nach unten */
.ms-Dialog-inner {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

/* Weisser Zwischenraum entfernen */
.ms-Dialog-inner {
    border-top: 3px solid #f1b850 !important;
}

/* Kein extra Platz zwischen Inner und Sicherheitshinweis */
.ms-Dialog-main > * {
    margin: 0 !important;
    flex-shrink: 0 !important;
}




/* Padding auf die Kinder-Elemente */


/* Erster Kind-Element - Padding oben */


/* Letzter Kind-Element vor Sicherheitshinweis */


/* Trennlinie via outline auf dem gesamten Dialog */
.ms-Dialog-lgHeader {
    position: relative !important;
}

.ms-Dialog-lgHeader::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background-color: #f1b850 !important;
    z-index: 1 !important;
}

/* Inner border-top entfernen */
.ms-Dialog-inner {
    border-top: none !important;
    padding: 24px !important;
}

/* Trennlinie als box-shadow - wird nicht abgeschnitten */
.ms-Dialog-lgHeader {
    box-shadow: 0 3px 0 0 #f1b850 !important;
}

/* ::after entfernen */
.ms-Dialog-lgHeader::after {
    display: none !important;
}

/* overflow hidden entfernen damit box-shadow sichtbar ist */
.ms-Dialog-main {
    overflow: visible !important;
}

/* Aber border-radius auf Header und Sicherheitshinweis setzen */
.ms-Dialog-lgHeader {
    border-radius: 8px 8px 0 0 !important;
}

.ks {
    border-radius: 0 0 8px 8px !important;
}

/* Trennlinie auf scrollableContent zwischen Header und Inner */
.ms-Modal-scrollableContent {
    display: flex !important;
    flex-direction: column !important;
}

.ms-Dialog-lgHeader {
    border-bottom: 3px solid #f1b850 !important;
}

/* Inner-Bereich hinter Header schieben mit z-index */
.ms-Dialog-lgHeader {
    position: relative !important;
    z-index: 2 !important;
}

.ms-Dialog-inner {
    position: relative !important;
    z-index: 1 !important;
}

/* Abstand nach Untertitel */
.kw p {
    margin-bottom: 16px !important;
    padding-bottom: 4px !important;
}

.ms-Dialog-lgHeader {
    padding-bottom: 20px !important;
}

/* App-Bereich nach Login */
[class*="workspaceListContainer"],
[class*="resourcesPage"],
[class*="workspacePage"],
[class*="homePage"] {
    background: transparent !important;
}

/* Work Resources Balken */
[class*="workspaceTitle"],
[class*="workspaceHeader"],
[class*="resourcesHeader"] {
    background-color: rgba(255,255,255,0.92) !important;
    border-radius: 8px 8px 0 0 !important;
}



/* Gelbe Info-Bar ausblenden */
[class*="messageBar"],
.ms-MessageBar {
    display: none !important;
}

/* Navbar nach Login ausblenden */
[class*="navbar_"],
[class*="navBar_"] {
    background-color: #0a1830 !important;
}

/* Navbar Hintergrund transparent */
:root {
    --navbar-primary-background-color: transparent !important;
    --color-background: transparent !important;
}

/* Graue Navbar-Leiste ausblenden */
[class*="navbar_"],
[class*="navBar_"],
[class*="topBar_"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Icons in Navbar schwarz damit sie auf Hintergrundbild sichtbar sind */
[class*="navbar_"] button,
[class*="navBar_"] button {
    color: #ffffff !important;
}

/* Navbar hellblau */
:root {
    --navbar-primary-background-color: #E6EEFA !important;
    --tenant-header-background-color: #E6EEFA !important;
    --allresources-background-color: #E6EEFA !important;
}

[class*="navbar_"],
[class*="navBar_"],
[class*="topBar_"] {
    background-color: #e8f0fb !important;
    background: #e8f0fb !important;
}













/* Parent-Container transparent damit Bars korrekt dargestellt werden */
.ms-Fabric.ms-Layer-content {
    background: transparent !important;
}

/* Alle Bars einheitlich */
.tile-view,
.resources-controls-container {
    background-color: #E6EEFA !important;
    background: #E6EEFA !important;
    isolation: isolate !important;
}

/* Body-Hintergrund auf hellblau setzen damit Bars korrekt wirken */
.ms-Fabric--isFocusHidden,
.ms-Fabric--isFocusVisible {
    background-color: #E6EEFA !important;
}




/* App-Beschriftung weiß */
[class*="resource-name"], [class*="resourceName"],
[class*="app-name"], [class*="appName"] {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}










/* App-Bereich - weißer Container mit Schatten */
.ms-Fabric.ms-Layer-content {
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4) !important;
    border-radius: 0 0 8px 8px !important;
    border: 1px solid rgba(230, 238, 250, 0.8) !important;
    border-top: none !important;
}



/* App-Bereich volle Breite */
.ms-Fabric.ms-Layer-content {
    width: 100% !important;
    min-width: 100% !important;
}

/* App-Bereich volle Breite */
.ms-Fabric.ms-Layer-content {
    width: 100% !important;
    min-width: 100% !important;
}

/* LayerHost volle Breite */
.ms-LayerHost {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

/* Tenants Container volle Breite */
.tenants-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tenants-container > * {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}



































/* Kein Scrollbalken */
body, html {
    overflow: hidden !important;
}




/* Canvas Abstand */
canvas {
    margin-top: 50px !important;
    height: calc(100% - 88px) !important;
}