/* ==========================================================================
   Commend-Designupdate-Diff.css

   Differences between
     1-designupdate/resources/css/Commend-Verweis.css + Commend-Style.css
   and
     PM-Symphony-Cloud-EN-V129-1026-incl-Breadcrumbs/resources/css/ (same files)

   Direction: values are taken from the DESIGNUPDATE package.
   Load order: AFTER PM's Commend-Style.css and Commend-Verweis.css.

   SECTION B (active)   - design changes: colours, fonts, icons, look
   SECTION A (disabled) - rules that PM removed/superseded on purpose.
                          Kept as reference only, do not re-enable blindly.
   ========================================================================== */


/* ==========================================================================
   SECTION B - DESIGN CHANGES (active)
   ========================================================================== */

/* ---------- Commend-Verweis.css ---------- */

/* Header: white instead of blue (PM sets #006ED1 !important in its OHV3 block) */
.smc-main-ct > .x-panel-header,
.website-custom-logo .smc-main-ct > div.x-panel-header {
    background-color: white !important;
}
.smc-sidebar .x-grid-item-over, .x-grid-item.x-grid-item-over > tbody > tr.x-grid-row,
.tree-navigation-link:hover {
    background-color: unset!important;  /*Sidebar menu item hover  */
}

/* Header logo: recolour the existing white logo2.svg to Commend blue (instead of a separate logo2-b.svg).
   Uses the same filter chain as the hamburger icons (brightness(0) first, so the source colour is irrelevant).
   A CSS mask was tried first but is blocked for local file:// SVGs (CORS). */
.logo-container.default-logo {
  background: url(../images/logo2.svg) no-repeat 0px / 50px auto !important;
  filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(6297%) hue-rotate(195deg) brightness(93%) contrast(101%);
}

/* Tab bar background (PM: Cold-Gray-1) */
.x-tab-bar-default {
    background-color: rgb(237, 243, 248);
}

/* Search / collapse icons (PM: search-ico.svg, daw.svg, uab.svg) */
.searchIcon, .searchOpen .searchIcon {
    background-image: url("../icons/search-ico.svg");
}
.collapseSeach {
    background-image: url("../icons/dab.svg");
}
.searchOpen .collapseSeach {
    background-image: url("../icons/uab.svg");
}

/* Left tab labels: gray instead of white (PM: #FFF) */
.smc-tabpanel-left .x-tab-bar-default-horizontal .x-tab-bar-body-default .x-box-inner .x-tab .x-tab-inner-default {
    color: var(--color-CD-Cold-Gray-1);
}

/* Hamburger icons recoloured to Commend blue (PM: no filter) */
.smc-sidebar .x-tool-expand-left,
.x-tool-expand-right {
    filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(6297%) hue-rotate(195deg) brightness(93%) contrast(101%);
}

/* Sidebar: light theme instead of dark #333 */
.smc-sidebar .x-panel-body-default {
    background-color: white;
}
.smc-sidebar .x-grid-item {
    background-color: #FFF;
    color: inherit; /* PM: #CCC */
}
.smc-sidebar .x-tree-node-text {
    color: var(--color-CD-Cold-Gray-1); /* PM: #CCC */
}
.smc-sidebar .x-grid-item-over {
    background-color: rgb(195, 210, 226) !important; /* PM: #111 */
}
/* Selected row: same fill as expanded rows (PM: Commend-Blue !important), text instead gray / blue+bold.
   Collision: ohv3/css/styles_v3.css:262-268 fills tr.x-grid-row (over/selected) with var(--color-nav-default-fill);
   overridden here via the identical selectors + !important (this sheet loads later). */
.smc-sidebar .x-grid-item-selected,
.smc-sidebar .x-grid-item-selected > tbody > tr,
.smc-sidebar .x-grid-item-selected > tbody > tr > table,
.smc-sidebar .x-grid-item-selected > tbody > tr > td,
.smc-sidebar [aria-selected="true"],
.smc-sidebar [aria-selected="true"] > table,
.smc-sidebar [aria-selected="true"] > td,
.x-grid-item.x-grid-item-selected > tbody > tr.x-grid-row,
.tree-navigation-list-item[data-active="true"] {
    background-color: rgb(237, 243, 248) !important;
}
.smc-sidebar .x-grid-item-selected .x-tree-node-text {
    color: var(--color-CD-Cold-Gray-1);
    font-weight: 500;
}
.smc-sidebar .x-grid-item-selected [aria-selected="true"] .x-tree-node-text,
.smc-sidebar .x-tree-item-active .x-grid-item-selected .x-tree-node-text {
    color: var(--color-CD-Commend-Blue);
    font-weight: bold;
}
.smc-sidebar .x-tree-arrows .x-grid-item-selected .x-tree-expander {
    background-image: url(../icons/rag.svg); /* PM: raw.svg */
}
.smc-sidebar .x-tree-arrows .x-grid-item-selected .x-grid-tree-node-expanded .x-tree-expander {
    background-image: url(../icons/dag.svg); /* PM: daw.svg */
}
/* Active main chapter: the whole top-level item (chapter row + all nested rows) is tinted when it
   contains the open page (.x-grid-item-selected) or is the open page itself.
   Nested tables are DOM children of the top-level table, so they are made transparent to let the tint
   show through (hovered rows excluded, so the hover colour still works).
   Expanded chapters that do not contain the open page stay white. */
.smc-sidebar .x-grid-item-container > table.x-grid-item.x-grid-item-selected,
.smc-sidebar .x-grid-item-container > table.x-grid-item:has(.x-grid-item-selected) {
    background-color: rgb(237, 243, 248) !important;
}
.smc-sidebar .x-grid-item-container > table.x-grid-item.x-grid-item-selected .x-grid-item:not(.x-grid-item-over),
.smc-sidebar .x-grid-item-container > table.x-grid-item:has(.x-grid-item-selected) .x-grid-item:not(.x-grid-item-over) {
    background-color: transparent !important;
}
tr[aria-expanded="true"][aria-level="1"] > td > div > span {
    padding-left: 7.5px;
}
.smc-sidebar .x-grid-item-selected > tbody > tr > table {
    width: 100% !important; /* was 325px: wider than the 305px tree view, caused horizontal scrolling */
}
.x-panel-header.x-region-collapsed-left-placeholder,
.x-panel-header.x-region-collapsed-left-placeholder::before {
    background-color: white !important; /* PM: #333 / Cold-Gray-1 */
}

/* Depth: splitter + header shadows, stacking, splitter icon */
media screen and (min-width=800px;) {
    .x-splitter {
    background-color: white !important;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
    z-index: 2;
    }
}

.smc-sidebar {
    z-index: 3 !important;
}
.smc-main-ct > .x-panel-header {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.08);
    z-index: 6;
}
/*new splitter*/
.x-layout-split-left {
    background-image: url("../images/mini-left-b.png");
}
.x-splitter-collapsed .x-layout-split-left {
  background-image: url(../images/mini-right-b.png);
}

/* Content tabs (PM hover: #667282; PM close button: "center center") */
.smc-content-ct .x-tab-bar-default-horizontal .x-tab-bar-body-default .x-box-inner .x-tab.x-tab-over {
    background-color: rgb(195, 210, 226);
    border: 2px solid #FFF;
}
.smc-content-ct .x-tab-bar-default-horizontal .x-tab-bar-body-default .x-box-inner .x-tab.x-tab-closable .x-tab-inner-default,
.smc-content-ct .x-tab-bar-default-horizontal .x-tab-bar-body-default .x-box-inner .x-tab.x-tab-top .x-tab-inner-default {
    color: gray;
}
.smc-content-ct .x-tab-bar-default-horizontal .x-tab-bar-body-default .x-box-inner .x-tab.x-tab-closable.x-tab-active .x-tab-inner-default,
.smc-content-ct .x-tab-bar-default-horizontal .x-tab-bar-body-default .x-box-inner .x-tab.x-tab-top.x-tab-active .x-tab-inner-default {
    color: #fff;
}
.smc-content-ct .x-tab-default .x-tab-close-btn {
    background: url(../icons/ct.svg);
    background-size: 12px auto;
    background-repeat: no-repeat;
}

/* Body text colour: designupdate sets none (PM: rgb(31,33,35)) */
body, .x-body, .x-panel-body-default {
    color: inherit;
}

/* ---------- Commend-Style.css ---------- */

/* Header title text blue (PM: #FFF) */
.x-panel-header-title-default > .x-title-text-default {
    color: #006ED2!important;
}

/* Header logo sizing (PM: background-size: auto !important) */
.smc-main-ct > .x-panel-header {
    background-size: 10% 35% !important;
    background-position-x: 85px;
}

/* Mobile menu button (PM: menu_mobile.svg, #347bb7 background, left: 10px) */
@media screen and (max-width: 575px) {
    .menu-mobile {
        background-image: url('../icons/hamburguer.svg');
        background-color: transparent;
        background-size: 60%;
        background-position: center;
        left: 0;
        padding-top: 3px;
        filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(6297%) hue-rotate(195deg) brightness(93%) contrast(101%);
    }
}

/* Language switcher: white button, blue outline (PM: blue button, white text) */
.langswitcher {
    z-index: 9999;
    font-family: montserratsemibold;
    color: var(--color-CD-Cold-Gray-1);
    border: 1px solid var(--color-CD-Commend-Blue) !important;
    background: #FFF;
}

/* Layout - CHECK before shipping: PM may have changed these for breadcrumbs / BS5 */
#section-column-main-content {
    padding-bottom: 15px; /* PM: 12em */
}
.container-enum {
    padding: 0; /* PM: 0 0 0 15px */
}

   /* Gemittelter Inhalt*/
/*#section-column-main-content, 
header * .headline-content {max-width: 1000px; margin-left: auto; margin-right: auto;} 

nav[aria-label="Breadcrumb"], 
.x-tab-bar-horizontal > .x-tab-bar-body-default, 
.x-tab-bar-horizontal > .x-tab-bar-body-default > * {max-width: 1000px; margin-left: auto; margin-right: auto;}
.maintabbar, .x-tab-bar-horizontal > .x-tab-bar-body-default {margin-left: auto; margin-right: auto;}
.maintabbar {padding:0;}
.x-tab-bar-horizontal > .x-tab-bar-body-default {padding-left: 0; padding-right:0;}
*/
.instruction, .enum-standard {padding-left: 20px;}