/* ===== FACHFARBEN ===== */
/* Custom Properties: Farben 0–7 aus stundenplan.css, jetzt global in utility.css */
:root {
    --std-color-0-bg:  #b8ddf5;  --std-color-0-accent:  #2a7bbf;  /* Himmelblau   */
    --std-color-1-bg:  #f5e878;  --std-color-1-accent:  #c4a000;  /* Gelb         */
    --std-color-2-bg:  #d4b8f0;  --std-color-2-accent:  #7040b8;  /* Violett      */
    --std-color-3-bg:  #b8f0cc;  --std-color-3-accent:  #2a9048;  /* Grün         */
    --std-color-4-bg:  #f09090;  --std-color-4-accent:  #b82020;  /* Rot          */
    --std-color-5-bg:  #b8eff0;  --std-color-5-accent:  #2a9898;  /* Cyan         */
    --std-color-6-bg:  #f090c8;  --std-color-6-accent:  #b02878;  /* Pink         */
    --std-color-7-bg:  #d8f0b8;  --std-color-7-accent:  #5a9820;  /* Hellgrün     */
    --std-color-8-bg:  #fde8b8;  --std-color-8-accent:  #c07800;  /* Bernstein    */
    --std-color-9-bg:  #f5c8e8;  --std-color-9-accent:  #a03070;  /* Rose         */
    --std-color-10-bg: #8898f0;  --std-color-10-accent: #2028b0;  /* Indigo       */
    --std-color-11-bg: #40c8c8;  --std-color-11-accent: #007070;  /* Türkis       */
    --std-color-12-bg: #fdc8a0;  --std-color-12-accent: #c06030;  /* Pfirsich     */
    --std-color-13-bg: #d8c8f5;  --std-color-13-accent: #5030a0;  /* Lavendel     */
    --std-color-14-bg: #80f0c0;  --std-color-14-accent: #108860;  /* Mint         */
    --std-color-15-bg: #f0d030;  --std-color-15-accent: #908000;  /* Gold         */
    --std-color-16-bg: #e8c8c8;  --std-color-16-accent: #902020;  /* Ziegelrot    */
    --std-color-17-bg: #d8b888;  --std-color-17-accent: #7a4818;  /* Braun        */
    --std-color-18-bg: #c8d860;  --std-color-18-accent: #507018;  /* Olive        */
    --std-color-19-bg: #f0e0f5;  --std-color-19-accent: #803090;  /* Pflaume      */
}

/* Universelle Fachfarben-Klassen (alle Module) */
.fachfarbe[class*="stdColor"] { color: #666; }
.fachfarbe[class*="stdColor"].textBlue { color: #666; }
.fachfarbe.stdColor0  { background-color: var(--std-color-0-bg);  border-left: 4px solid var(--std-color-0-accent); }
.fachfarbe.stdColor1  { background-color: var(--std-color-1-bg);  border-left: 4px solid var(--std-color-1-accent); }
.fachfarbe.stdColor2  { background-color: var(--std-color-2-bg);  border-left: 4px solid var(--std-color-2-accent); }
.fachfarbe.stdColor3  { background-color: var(--std-color-3-bg);  border-left: 4px solid var(--std-color-3-accent); }
.fachfarbe.stdColor4  { background-color: var(--std-color-4-bg);  border-left: 4px solid var(--std-color-4-accent); }
.fachfarbe.stdColor5  { background-color: var(--std-color-5-bg);  border-left: 4px solid var(--std-color-5-accent); }
.fachfarbe.stdColor6  { background-color: var(--std-color-6-bg);  border-left: 4px solid var(--std-color-6-accent); }
.fachfarbe.stdColor7  { background-color: var(--std-color-7-bg);  border-left: 4px solid var(--std-color-7-accent); }
.fachfarbe.stdColor8  { background-color: var(--std-color-8-bg);  border-left: 4px solid var(--std-color-8-accent); }
.fachfarbe.stdColor9  { background-color: var(--std-color-9-bg);  border-left: 4px solid var(--std-color-9-accent); }
.fachfarbe.stdColor10 { background-color: var(--std-color-10-bg); border-left: 4px solid var(--std-color-10-accent); }
.fachfarbe.stdColor11 { background-color: var(--std-color-11-bg); border-left: 4px solid var(--std-color-11-accent); }
.fachfarbe.stdColor12 { background-color: var(--std-color-12-bg); border-left: 4px solid var(--std-color-12-accent); }
.fachfarbe.stdColor13 { background-color: var(--std-color-13-bg); border-left: 4px solid var(--std-color-13-accent); }
.fachfarbe.stdColor14 { background-color: var(--std-color-14-bg); border-left: 4px solid var(--std-color-14-accent); }
.fachfarbe.stdColor15 { background-color: var(--std-color-15-bg); border-left: 4px solid var(--std-color-15-accent); }
.fachfarbe.stdColor16 { background-color: var(--std-color-16-bg); border-left: 4px solid var(--std-color-16-accent); }
.fachfarbe.stdColor17 { background-color: var(--std-color-17-bg); border-left: 4px solid var(--std-color-17-accent); }
.fachfarbe.stdColor18 { background-color: var(--std-color-18-bg); border-left: 4px solid var(--std-color-18-accent); }
.fachfarbe.stdColor19 { background-color: var(--std-color-19-bg); border-left: 4px solid var(--std-color-19-accent); }

/* Kurswahl-Liste / Zeugnis-Fach-Liste: border-radius wie Stundenplan-Elemente, 2px Abstand zwischen Rows */
.classCourseList.fachfarbe { border-radius: 1rem; padding-left: 0.5rem; }
#courseSelectTable, #notenerfassung_Fach { border-spacing: 0 2px; border-collapse: separate; }

/* Fachfarben-Dialog: Layout */
.fachfarbenSearch {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--atlantis-darkgrey, #bdbebf);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.fachfarbenSearch:focus {
    outline: none;
    border: 1px solid var(--atlantis-darkgrey, #bdbebf);
}
.fachfarbenDialogContent {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
    align-content: start;
}
body.isMobile .fachfarbenDialogContent {
    grid-template-columns: 1fr;
}
.fachfarbenCell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: var(--atlantis-lightgrey, #f5f5f5);
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
}
.fachfarbenLabel {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Fachfarben-Dialog: Swatches in der Fächerliste */
.fachfarbenSwatch {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
}
.fachfarbenSwatch:hover,
.fachfarbenSwatch.selected { border-color: var(--atlantis-darkgrey); }

/* Fachfarben-Picker: hover-Effekt (Rest ist inline in stundenplan.js) */
.fachfarbenPicker .fachfarbe:hover { outline: 2px solid var(--atlantis-anthracite); outline-offset: 1px; }

/* Klassenbuch: nur der Fachname bekommt die Fachfarbe */
.subjectName.fachfarbe { border-radius: 0.5rem; padding: 0 0.25rem; display: inline-block; line-height: 1.3; }

/* unterrichtsthemen / Hausaufgaben / Noten: nur das Label-Div wird eingefärbt, nicht die ganze Zelle */
.fachLabel.fachfarbe { border-radius: 0.375rem; padding: 0 0.25rem; }

/* ===== ENDE FACHFARBEN ===== */

.flexStart {
    display: flex;
    justify-content: flex-start;
}

.flexStartColumn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.flexBetween {
    display: flex;
    justify-content: space-between;
}

.flexBetweenColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flexAround {
    display: flex;
    justify-content: space-around;
}

.flexAroundColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.flexEvenly {
    display: flex;
    justify-content: space-evenly;
}

.flexEvenlyColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.flexEnd {
    display: flex;
    justify-content: flex-end;
}

.flexEndColumn {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.flexColumnReverse {
    display: flex;
    flex-direction: column-reverse;
}

.flexCenterColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flexColumnCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexCenterCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexCenterEvenly {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.flexWrapStart {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
}

.flexColumnAround {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.hidden, .pdf_only{
    display: none !important;
}

w100 {
    width: 100%;
}

.widthFillAvailable {
    width: -webkit-fill-available;
    width: -moz-available;
}

.pointer {
    cursor: pointer;
}
.noPointer {
    cursor: default !important;
}
.cursorNotAllowed {
    cursor: not-allowed !important;
}
.grabable {
    cursor: grab;
}
.grabable:active {
    cursor: grabbing;
}

/* progressTabs -Start */
#tabs.progressTabs .tabsHeaderContainer li::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 35px;
    margin-left: 8px;
    /* fill = grey (default) */
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'>\
    <path fill='grey' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/>\
    </svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* fill = --atlantis-blue-selected (#84b1d8ff) */
#tabs.progressTabs .tabsHeaderContainer li.ui-tabs-active::after {
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'>\
    <path fill='%2384b1d8ff' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/>\
    </svg>");
}
/* fill = --atlantis-lightgrey (#e5e4e7) */
#tabs.progressTabs .tabsHeaderContainer li.ui-state-disabled::after {
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'>\
    <path fill='%23e5e4e7' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/>\
    </svg>");
}
body.isMobile #tabs.progressTabs .tabsHeaderContainer li::after {
    margin-left: 0;
}
#tabs.progressTabs .tabsHeaderContainer li:last-child::after {
    content: none;
}
#tabs.progressTabs ul {
    margin-left: 50px;
    font-size: 1.2rem;
}
/* progressTabs - End */

/* Toggle Button - Start */
.toggleButton {
  display: inline-block;
  height: 26px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
.toggleButton i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: var(--atlantis-lightgrey);
  border-radius: 1rem;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
  pointer-events: none;
}
.toggleButton i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 1rem;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}
.toggleButton i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #dedede;
  border-radius: 1rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}
.toggleButton:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}
.toggleButton:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.toggleButton input:checked + i { background-color: var(--atlantis-blue); }
.toggleButton input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.toggleButton input:checked + i::after { transform: translate3d(22px, 2px, 0); }

/*.toggleButton input { display: none; }*/
/* make the real checkbox invisible but not :hidden to jQuery */
.toggleButton input[type="checkbox"] {
    position: absolute;
    opacity: 0;          /* not display:none */
    pointer-events: none; /* label handles clicks */
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
/* Toggle Button - End */

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.name_ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}

.match_parent{
    width: 100%;
}

.floatRight, .rechts {
    float: right;
}

.floatLeft, .links {
    float: left;
}

.notClickable {
    pointer-events: none;
}

.rotatable {
    -moz-transition: transform 0.4s;
    -webkit-transition: transform 0.4s;
    transition: transform 0.4s;
}
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotate270 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotate180 {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* tabs by swh - START */
.tabs ul.tab-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap:wrap;
    padding: 0px;
    font-family: Verdana,Arial,sans-serif;
}

.tabs .tab-list li {
    list-style: none;
    border-bottom: 3px solid white;
}

.tabs .tab-list li a {
    float: left;
    padding: .4rem 1rem;
    text-decoration: none;
    color: grey;
}

body:not(.isMobile) .tabs .tab-list li:hover {
    border-bottom: 3px solid grey;
}

.tabs .tab-list li.active {
    border-bottom: 3px solid var(--atlantis-blue);
}

.tabs .tab-content {
    margin-left: 1rem;
}
/* tabs by swh - END */

.tableScollContainer {
    overflow-y: auto;
    position: relative;
    min-height: 6rem;
}

.fixedHeader th,
.fixedHeader .tableDesign th,
.fixedHeader .tableDesign th:first-child,
.fixedHeader .tableDesign th:last-child {
    position: sticky;
    top: 0;
    background-color: white;
    border-radius: 0;
}

.center {
    text-align:center;
}

.greyedOut {
    filter: grayscale(100%) opacity(0.5);
    pointer-events: none;
}

#stundenplanDialogABCR .stdNavPrint { visibility: hidden; }

/* Dialog: flex-Layout für eine Scrollbar */
#stundenplanDialogABCR .dialogWindow {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#stundenplanDialogABCR .dialogScrollable {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}