/**
 * tom-select.css (v2.6.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #1da7ee;
  color: #fff;
  border: 1px solid #0073bb;
  overflow: auto;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #92c836;
  color: #fff;
  border: 1px solid #00578d;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: hsl(0, 0%, 130%);
  background: #d2d2d2;
  border: 1px solid #aaaaaa;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0px 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: hsl(0, 0%, -6.1764705882%);
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #0073bb;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #00578d;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: #aaaaaa;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #0073bb;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #00578d;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: #aaaaaa;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.ts-wrapper.single .ts-control {
  --ts-pr-caret: 2rem;
}
.ts-wrapper.single .ts-control::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #808080 transparent transparent transparent;
}
.ts-wrapper.single .ts-control:not(.rtl)::after {
  right: 15px;
}
.ts-wrapper.single .ts-control.rtl::after {
  left: 15px;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent;
}
.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.input-active .ts-control input {
  cursor: text;
}

.ts-wrapper {
  display: flex;
  min-height: 36px;
}
.ts-wrapper.multi.has-items .ts-control {
  padding-left: 5px;
  --ts-pr-min: 5px;
}
.ts-wrapper.multi .ts-control [data-value] {
  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
  border-radius: 3px;
  background-color: color-mix(#1da7ee, #178ee9, 60%);
  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
  background-repeat: repeat-x;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
}
.ts-wrapper.multi .ts-control [data-value].active {
  background-color: color-mix(#008fd8, #0075cf, 60%);
  background-image: linear-gradient(to bottom, #008fd8, #0075cf);
  background-repeat: repeat-x;
}
.ts-wrapper.multi.disabled .ts-control [data-value] {
  color: #999;
  text-shadow: none;
  background: none;
  box-shadow: none;
}
.ts-wrapper.multi.disabled .ts-control [data-value], .ts-wrapper.multi.disabled .ts-control [data-value] .remove {
  border-color: #e6e6e6;
}
.ts-wrapper.multi.disabled .ts-control [data-value] .remove {
  background: none;
}
.ts-wrapper.single .ts-control {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: color-mix(#fefefe, #f2f2f2, 60%);
  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
  background-repeat: repeat-x;
}

.ts-wrapper.single .ts-control, .ts-dropdown.single {
  border-color: #b8b8b8;
}

.dropdown-active .ts-control {
  border-radius: 3px 3px 0 0;
}

.ts-dropdown .optgroup-header {
  padding-top: 7px;
  font-weight: bold;
  font-size: 0.85em;
}
.ts-dropdown .optgroup {
  border-top: 1px solid #f0f0f0;
}
.ts-dropdown .optgroup:first-child {
  border-top: 0 none;
}
/* Container of accordions */
.accordion-container {
    display: flex;
    flex-direction: column;
    
    gap: var(--padding-padding-xxl);
}

/* Basic accordion component */
[data-controller~="components--accordion"] {
    display: flex;
    flex-direction: column;
    
    row-gap: var(--padding-padding-xxl);

    .hidden {
        display: none !important;
    }

    [data-components--accordion-target="toggleContainer"] {
        display: flex;
        flex-direction: column;
        
        row-gap: var(--padding-padding-xxl);

        &.gap-xxxl {
            row-gap: var(--padding-padding-xxxl);
        }
    }
}

/* Accordion with checkbox component */
[data-controller~="components--accordion-with-checkbox"] {
    display: flex;
    flex-direction: column;
    
    row-gap: var(--padding-padding-xxl);

    [data-components--accordion-with-checkbox-target="item"] {
        display: flex;
        flex-direction: column;
        
        row-gap: 0.5rem;
        padding: 0.5rem;

        box-shadow: var(--drop-shadow-large);

        &:not(.open) > [data-components--accordion-with-checkbox-target="content"] {
            display: none;
        }

        &:not(.open) > [data-components--accordion-with-checkbox-target="header"] > [data-components--accordion-with-checkbox-action-param="hide"] {
            display: none;
        }

        &.open > [data-components--accordion-with-checkbox-target="header"] > [data-components--accordion-with-checkbox-action-param="show"] {
            display: none;
        }
        
        [data-components--accordion-with-checkbox-target="header"] {
            display: flex;
            column-gap: 0.5rem;
            padding: 0rem 0.5rem;

            font: var(--richtext-headline-subheadline-font);

            :first-child {
                flex: 1;
            }
        }

        [data-components--accordion-with-checkbox-target="content"] {
            padding: 0.5rem;
        }
    }
}

.accordion-chevron {
    min-width: 1.25rem;
    min-height: 1.25rem;

    transition: transform 0.3s ease;
    transform: rotate(0deg);
    
    &.rotate {
        transform: rotate(180deg);
    }
}

.collection {
    .collection__container:not(:has(> *)) {
        display: none;
    }

    .collection__empty-message {
        height: 14rem;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--text-body-body-50);

        font: var(--container-medium-label-font);
    }

    &:has(.collection__container > *) {
        .collection__empty-message {
            display: none;
        }
    }
}

/*
  Confirmation dialog (native <dialog>, driven by components--confirm-dialog)
  ===============
*/

.confirm-dialog {
    margin: auto;
    width: min(30rem, calc(100vw - 2rem));
    padding: calc(var(--padding-padding-xxl, 1rem) * 2);

    border: none;
    border-radius: var(--corner-radius-components-outside, 12px);
    background: var(--background-background-level-2);
    box-shadow: var(--drop-shadow-large);

    color: var(--text-body-body-base);

    &[open] {
        animation: confirm-dialog-pop 0.2s ease-out;
    }

    &::backdrop {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
    }

    .confirm-dialog__icon {
        width: 4.5rem;
        height: 4.5rem;
        margin: 0 auto var(--padding-padding-xxl, 1rem);

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        background: var(--system-warning-warning-10);
        color: var(--system-warning-warning-base);

        svg {
            width: 2.5rem;
            height: 2.5rem;
        }
    }

    .confirm-dialog__title {
        margin: 0 0 var(--padding-padding-large, 0.5rem);

        text-align: center;
        font: var(--container-medium-headline_bold-font);
        color: var(--text-headline-headline-base);
    }

    .confirm-dialog__text {
        margin: 0;

        text-align: center;
        font: var(--container-container_medium-body-font);
        color: var(--text-body-body-90);
    }

    .confirm-dialog__actions {
        margin-top: calc(var(--padding-padding-xxl, 1rem) * 1.5);

        display: flex;
        justify-content: center;
        gap: var(--padding-padding-large, 0.5rem);

        .confirm-dialog__confirm {
            color: var(--text-for-primary-button-primary-button-base, #fff);
            background: var(--system-negative-negative-base);

            &:hover {
                background: var(--system-negative-negative-80);
            }
        }
    }
}

@keyframes confirm-dialog-pop {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/*
  Admin page layout helpers
  ===============
   - content-layout__title--with-actions → title row with buttons aligned to the right
   - form-actions                        → form footer with buttons aligned bottom right
*/

.content-layout__title--with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--padding-padding-large, 0.5rem);
}

.form-actions {
    margin-top: var(--padding-padding-xxl, 1rem);

    display: flex;
    justify-content: flex-end;
    gap: var(--padding-padding-large, 0.5rem);
}

/* Mobile - 320 - 767 px */
#app-infobar {
    display: flex;
    align-items: center;

    padding: var(--padding-padding-small) var(--padding-padding-large);
    gap: var(--padding-padding-large);

    border-top-left-radius: var(--corner-radius-components-outside);
    border-top-right-radius: var(--corner-radius-components-outside);

    color: var(--text-white-white-base);
    
    cursor: pointer;

    &.app-infobar__severity-info {
        background-color: var(--brand-blue-shades-sazka-blue-base);
    }

    &.app-infobar__severity-warning {
        background-color: var(--system-warning-warning-80);
    }

    &.app-infobar__severity-critical {
        background-color: var(--system-negative-negative-base);
    }

    .app-infobar__icon {
        width: 1.5rem;
    }

    .app-infobar__title {
        font: var(--container-medium-label_bold-font);

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-infobar__message {
        font: var(--container-medium-label-font);

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-infobar__read-more {
        display: flex;
        padding: 0.125rem 0.5rem;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        background-color: var(--white-white);

        border-radius: 0.25rem;

        font: var(--general-cta-small_default-font);
        text-transform: var(--general-cta-small_default-text-transform);
    }


}

/* Admin Info Bar detail (sidebar) — body scrolls, footer pinned to the bottom,
   mirrors the .notification-center component layout. */
.info-bar-detail {
    display: flex;
    flex-direction: column;

    /* Fill the flex column of .sidebar__content via flex-grow (like the original
       frame--fill) instead of height: 100% — the latter collapses to 0 in Safari
       when the parent height is flex-derived rather than explicit. */
    flex: 1;
    min-height: 0;

    .info-bar-detail__body {
        display: flex;
        flex-direction: column;

        flex: 1 0 0;
        min-height: 0;

        gap: var(--padding-padding-xxl);
        padding: var(--padding-padding-xxl);

        overflow: auto;
    }

    /* Field grids laid out with named areas, like .calendar-event-si-detail-fields.
       Mobile-first: stacked single column; two columns from tablet up. */
    .info-bar-detail__fields {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--padding-padding-xxl) var(--padding-padding-large);
        grid-template-areas:
            "title"
            "severity"
            "message"
            "assignee"
            "internal-only";

        .info-bar-detail__fields__title         { grid-area: title; }
        .info-bar-detail__fields__severity      { grid-area: severity; }
        .info-bar-detail__fields__message       { grid-area: message; }
        .info-bar-detail__fields__assignee      { grid-area: assignee; }
        .info-bar-detail__fields__internal-only { grid-area: internal-only; }
    }

    .info-bar-detail__outage-fields {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--padding-padding-xxl) var(--padding-padding-large);
        grid-template-areas:
            "title"
            "priority"
            "message"
            "affected-services"
            "assignee";

        .info-bar-detail__outage-fields__title             { grid-area: title; }
        .info-bar-detail__outage-fields__priority          { grid-area: priority; }
        .info-bar-detail__outage-fields__message           { grid-area: message; }
        .info-bar-detail__outage-fields__affected-services { grid-area: affected-services; }
        .info-bar-detail__outage-fields__assignee          { grid-area: assignee; }
    }

    /* Footer with Edit (left) / Archive (right) buttons */
    .info-bar-detail__footer {
        display: flex;
        justify-content: space-between;
        gap: var(--padding-padding-large);

        padding: var(--padding-padding-xxl);
    }
}

/* Mobile - 768 - 960 px */
@media (min-width: 768px) {
    .info-bar-detail {
        .info-bar-detail__fields {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "title    severity"
                "message  message"
                "assignee internal-only";
        }

        .info-bar-detail__outage-fields {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "title             priority"
                "message           message"
                "affected-services affected-services"
                "assignee          assignee";
        }
    }
}

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    #app-infobar {
        justify-content: center;

        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--corner-radius-components-outside);
        border-bottom-right-radius: var(--corner-radius-components-outside);
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

.legend-area {
    display: flex;
    gap: var(--padding-padding-large);

    flex-wrap: wrap;
    justify-content: center;  

    .legend-area__divider {
        width: var(--padding-padding-xxl);
    }

    .legend-area__item {
        display: flex;
        flex-wrap: nowrap;

        align-items: center;

        gap: var(--padding-padding-small);

        &.legend-item--hidden {
            display: none;
        }

        .legend-area__item__icon {
            display: flex;
            align-items: center;

            width: 1rem;
            height: 1rem;
        }

        .legend-area__item__text {
            font: var(--general-form-description-font);
        }
    }
}

.filter-legend {
    &:not(:has(.badge)) {
        display: none;
    }

    .title {
        color: var(--text-headline-headline-base);

        font: var(--container-small-label-font);
    }
}

.order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: none;
    border: none;

    line-height: 0;
    cursor: pointer;
}

[data-controller="components--search"] {
    height: 1.75rem;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--padding-padding-extra-small) var(--padding-padding-large);
    gap: var(--padding-padding-small);

    background: var(--background-background);

    border-width: 1px;
    border-style: solid;
    border-color: var(--form-form-45);
    border-radius: var(--corner-radius-components-outside);

    [data-action="components--search#toggle"] {
        height: 1rem;
        aspect-ratio: 1 / 1;

        display: inline-flex;
        align-items: center;

        padding: var(--padding-padding-none);
        
        border: unset;
        background-color: unset;
        outline: none;

        cursor: pointer;

        svg {
            color: var(--buttons-secondary-secondary-text-base);
        }
    }

    [data-components--search-target="input"] {
        border: unset;
        background-color: unset;
        outline: none;

        font: var(--general-table-text_default-font);
    }

    [data-action="components--search#clear"] {
        display: inline-flex;
        align-items: center;

        padding: var(--padding-padding-none);

        border: unset;
        background-color: unset;
        outline: none;

        cursor: pointer;

        svg {
            color: var(--form-form-base);
        }
    }

    &:hover {
        border-color: var(--form-form-base);
    }

    &:not(.active) {
        width: 1.75rem;
        height: 1.75rem;
        aspect-ratio: 1 / 1;

        border: none;

        padding: var(--padding-padding-small);

        background-color: var(--background-background-level-2);

        [data-action="components--search#toggle"] {
            height: 1.75rem;
            aspect-ratio: 1 / 1;
            
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                background-color: var(--background-background-level-2);
                
                border-radius: var(--corner-radius-components-outside);

                box-shadow: var(--shadow-behind-widget);
            }
        }

        [data-components--search-target="input"] {   
            display: none;
        }
    
        [data-action="components--search#clear"] {
            display: none;
        }
    }

    &:has(input:focus) {
        border-color: var(--form-form-accent);
    }

    &:has(input:placeholder-shown) {
        [data-action="components--search#clear"] {
            display: none;
        }
    }
}

/* Mobile - 320 - 767 px */
body:has([data-controller="components--sidebar"].show) {
    overflow: hidden;
}

[data-controller="components--sidebar"] {
    opacity: 1;
 
    transition: opacity 0.25s linear;

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    z-index: 300;

    overflow-x: hidden;
    overflow-y: auto;

    outline: 0;

    &:not(.show) {
        opacity: 0;
        pointer-events: none !important;
    }

    &:not(.show) * {
        pointer-events: none !important;
    }

    > .dialog {
        position: relative;

        display: flex;
        align-items: start;
        justify-content: right;

        width: auto;

        pointer-events: none;
    }

    > .dialog > .body {
        width: 100vw;
        min-width: 320px;
        height: 100vh;

        display: none;
        flex-direction: column;

        pointer-events: auto;

        background-color: var(--brand-yellow-shades-sazka-yellow-base);

        &:last-child {
            display: flex;
        }

        .sidebar__header {
            min-height: 3.25rem;
            max-height: 3.25rem;
            
            display: flex;
            align-items: center;
            
            padding: 0rem var(--padding-padding-xxl);
            gap: var(--padding-padding-large);
            
            &:not(.back-button) .sidebar__header__back {
                display: none;
            }

            &:not(.close-button) .sidebar__header__close {
                display: none;
            }

            .sidebar__header__back {
                display: grid;
                
                justify-content: center;
                align-items: start;
            }

            .sidebar__header__content {
                /* margin-right: auto; */
                width: 100%;
            }

            .sidebar__header__close {
                display: grid;
                
                justify-content: center;
                align-items: start;
            }
        }

        .sidebar__content {
            width: 100%;
            height: 100%;

            display: flex;
            flex-direction: column;
            flex: 1;
            
            overflow-y: auto;

            background: var(--background-background-level-2);

            border-top-left-radius: var(--corner-radius-widgets);
            border-top-right-radius: var(--corner-radius-widgets);
        }
    }

    /* Mobile - 768 - 960 px */
    /* @media (min-width: 768px) {
    } */

    /* Laptop & tablet - 961 - 1279 px */
    @media (min-width: 961px) {
        background-color: var(--background-overlay-background);
        backdrop-filter: blur(3.25px);
        
        > .dialog {
            padding: var(--padding-padding-large);
        }

        > .dialog > .body {
            width: 48rem;
            height: calc(100vh - 2 * var(--padding-padding-large));

            box-shadow: var(--shadow-behind-widget);
            border-radius: var(--corner-radius-widgets);

            &.body--small {
                width: 30rem;
            }

            .sidebar__header {
                min-height: 3.875rem;
                max-height: 3.875rem;

                border-top-left-radius: var(--corner-radius-widgets);    
                border-top-right-radius: var(--corner-radius-widgets);
            }

            .sidebar__content {
                border-top-left-radius: unset;
                border-top-right-radius: unset;
                border-bottom-left-radius: var(--corner-radius-widgets);    
                border-bottom-right-radius: var(--corner-radius-widgets);
            }
        }
    }

    /* Laptop & tablet - 1280 - 1680 px */
    /* @media (min-width: 1280px) {
    } */

    /* Desktop - 1681 - 2200 px */
    /* @media (min-width: 1681px) {
    } */

    /* Desktop - 2201 px and above */
    /* @media (min-width: 2201px) {
    } */
}

[data-controller~="components--popover"] {
    .ardoq-service-catalogue-popover {
        width: calc(300% + 1rem);

        display: flex;
        flex-direction: column;
    
        padding: 1rem;
        row-gap: 1rem;

        background-color: var(--background-background-level-2);
        border-radius: 0.25rem;

        box-shadow: var(--shadow-behind-widget);

        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        z-index: 20;

        opacity: 100%;

        cursor: pointer;

        &:not(.show) {
            display: none;
        }

        &.show-left {
            left: auto !important;
        }

        .ardoq-service-catalogue-popover__title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .name {
                font: var(--container-medium-label_bold-font);
                color: var(--text-headline-headline-base);
            }
        }
    }
}
/* Mobile - 320 - 767 px */
.ardoq-service-catalogue-widget-header {
    display: grid;
    grid-template-areas: "title      subtitle   filter"
                         "view       view       view";
    grid-template-columns: minmax(0, auto) 1fr min-content;
    align-items: center;

    column-gap: var(--padding-padding-large);
    row-gap: var(--padding-padding-xxl);

    &:has(.ardoq-service-catalogue-widget-header__pagination) {
        grid-template-areas: "title      subtitle   filter"
                             "view       view       view"
                             "pagination pagination pagination";
    }

    .ardoq-service-catalogue-widget-header__title {
        grid-area: title;

        display: flex;
        align-items: center;

        font: var(--container-medium-headline_bold-font);
        color: var(--text-headline-headline-base);
    }

    .ardoq-service-catalogue-widget-header__subtitle {
        height: 100%; 

        grid-area: subtitle;

        display: grid;
        align-items: center;

        color: var(--text-headline-headline-base);

        font: var(--container-medium-headline-font);
    }

    .ardoq-service-catalogue-widget-header__filter {
        grid-area: filter;
        align-self: center;
        justify-self: end;
    }

    .ardoq-service-catalogue-widget-header__view {
        grid-area: view;
    }

    .ardoq-service-catalogue-widget-header__pagination {
        grid-area: pagination;
        justify-self: center;

        display: grid;
        grid-template-areas: "prev title next";
        grid-template-columns: 1fr max-content 1fr;
        align-items: baseline;

        column-gap: var(--padding-padding-xxl);

        align-items: center;
        
        .ardoq-service-catalogue-widget-header__pagination__prev {
            grid-area: prev;
            justify-self: start;
        }

        .ardoq-service-catalogue-widget-header__pagination__title {
            grid-area: title;
            justify-self: center;
        }

        .ardoq-service-catalogue-widget-header__pagination__next {
            grid-area: next;
            justify-self: end;
        }
    }

    .ardoq-service-catalogue-widget-header__search {
        display: none;
    }
}

.ardoq-service-catalogue-historybar {
    display: flex;

    overflow-x: scroll;
    overflow-y: hidden;

    gap: var(--padding-padding-xxl);

    &::-webkit-scrollbar {
        display: none;
    }

    .ardoq-service-catalogue-historybar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
    
        padding: var(--padding-padding-none);
        gap: var(--padding-padding-extra-small);
        
        box-shadow: var(--shadows-drop-shadow-large);
    
        cursor: pointer;

        scroll-margin-top: 200px;

        &.ardoq-service-catalogue-historybar__item--active {
            .ardoq-service-catalogue-historybar__item__indicator {
                border-color: var(--brand-blue-shades-sazka-blue-base);
                box-shadow: var(--shadow-behind-widget);

                font: var(--container-medium-label_bold-font);
            }

            .ardoq-service-catalogue-historybar__item__label {
                color: var(--text-headline-headline-base);
            }
        }

        &.disabled {
            cursor: not-allowed;

            pointer-events: none;

            .ardoq-service-catalogue-historybar__item__indicator {
                border-color: var(--form-form-15);
                background: var(--buttons-interface-interface-disabled);
            }

            .ardoq-service-catalogue-historybar__item__label {
                color: var(--text-body-body-20);
            }
        }

        .ardoq-service-catalogue-historybar__item__indicator {
            width: 2rem;
            height: 2rem;
            aspect-ratio: 1 / 1;

            display: flex;
            justify-content: center;
            align-items: center;

            color: var(--text-white-white-base);
            
            border-width: 1px;
            border-style: solid;
            border-color: var(--form-form-15);
            border-radius: var(--corner-radius-components-outside);
            
            font: var(--container-medium-label-font);

            &.ardoq-service-catalogue-historybar__item__indicator--status-unknown {
                background-color: var(--text-body-body-5);
            }

            &.ardoq-service-catalogue-historybar__item__indicator--status-ok {
                background-color: var(--system-positive-positive-60);
            }

            &.ardoq-service-catalogue-historybar__item__indicator--status-warning {
                background-color: var(--system-warning-warning-60);
            }

            &.ardoq-service-catalogue-historybar__item__indicator--status-error {
                background-color: var(--system-negative-negative-60);
            }
        }

        .ardoq-service-catalogue-historybar__item__label {
            color: var(--text-body-body-90);
            
            text-align: center;
            text-wrap: nowrap;
            
            font: var(--container-small-label-font);
        }
    }
}

.ardoq-service-catalogue {
    --ardoq-service-catalogue-gap: 0.375rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    .ardoq-service-catalogue__service-list {
        --ardoq-service-catalogue-min-column-width: 15rem;

        display: grid;
        gap: var(--ardoq-service-catalogue-gap);
        grid-template-columns: repeat(auto-fill, minmax(var(--ardoq-service-catalogue-min-column-width), 1fr));

        .no-results {
            height: 20rem;

            display: flex;
            align-items: center;
            justify-content: center;

            grid-column: 1 / -1;

            color: var(--text-body-body-50);
            font: var(--container-medium-label-font);
        }

        &:has(> .service-container[data-displayed="true"]) {
            .no-results {
                display: none;
            }
        }
    }
}

/* Used in service detail favorite module */
.service-detail-label {
    font: var(--container-medium-label_bold-font);
    color: var(--text-headline-headline-base);
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .ardoq-service-catalogue-widget-header {
        display: grid;
        grid-template-areas: "title subtitle search view filter";
        grid-template-columns: auto 1fr auto auto auto;

        position: relative;

        &:has(.ardoq-service-catalogue-widget-header__pagination) {
            grid-template-areas: "title subtitle . search view filter";
            grid-template-columns: auto auto 1fr auto auto auto;
        }

        .ardoq-service-catalogue-widget-header__pagination {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .ardoq-service-catalogue-widget-header__search {            
            grid-area: search;

            display: flex;
        }
    }

    .ardoq-service-catalogue-historybar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

.calendar-event-detail {
    align-self: stretch;
    height: 16rem;

    display: grid;
    grid-template-areas: "header" "body";
    grid-template-rows: 1.5rem 1fr;
    
    padding: var(--padding-padding-large);
    gap: var(--padding-padding-small);
    
    background-color: var(--form-form-15);
    border-radius: var(--corner-radius-components-outside);

    cursor: pointer;

    &:hover {
        opacity: revert;
        box-shadow: var(--drop-shadow-large);
    }

    &.calendar-event-detail--finished {
        opacity: 50%;
    
        &:hover {
            opacity: revert;
        }
    }

    &:not(:has(.calendar-event-detail__body)) {
        height: 1.75rem;
        
        grid-template-areas: "header";
        grid-template-rows: auto;
        
        padding: var(--padding-padding-none) var(--padding-padding-medium);
        gap: var(--padding-padding-none);
    }

    .calendar-event-detail__header {
        grid-area: header;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: var(--padding-padding-none) var(--padding-padding-medium);
        gap: var(--padding-padding-medium);

        .calendar-event-detail__header__text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            flex: 1;

            font: var(--container-medium-label_bold-font); 
        }

        .calendar-event-detail__header__pictograms {
            display: flex;
            
            gap: var(--padding-padding-medium);
        }

        .calendar-event-detail__header__status {
            margin-left: auto;
        }
    }

    .calendar-event-detail__body {
        grid-area: body;
        align-self: stretch;

        display: flex;
        flex-direction: column;
        
        padding: var(--padding-padding-medium);
        gap: var(--padding-padding-medium);

        background-color: var(--background-background-level-3);

        border-radius: var(--corner-radius-components-inside);

        overflow: hidden;

        .calendar-event-detail__body__title {
            font: var(--container-medium-label_bold-font);
        }

        .calendar-event-detail__body__description {
            font: var(--container-medium-body_text-font);

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .calendar-event-detail__body__labels {
            display: flex;
            flex-wrap: wrap;

            gap: 0.25rem;
        }

        .calendar-event-detail__body__date {
            font: var(--container-small-label-font);
        }
    }
}

[data-controller~="components--popover"] {
    .event-popover {
        display: flex;
        flex-direction: column;
    
        padding: var(--padding-padding-large);
        row-gap: var(--padding-padding-small);
    
        background-color: var(--form-form-15);
        border-radius: var(--corner-radius-components-outside);
    
        position: absolute;
        top: 0;
        left: var(--padding-padding-small);
        right: var(--padding-padding-small);
    
        z-index: 20;

        opacity: 100%;

        cursor: pointer;

        &:not(.show) {
            display: none;
        }

        &.show {
            box-shadow: var(--shadow-behind-widget);
        }

        &[data-event-popover-duration="1"] {
            width: calc(200% - 0.5rem);
        }

        &.show-left {
            left: auto !important;
        }

        &.show-right {
            right: auto !important;
        }

        .event-popover__header {
            display: grid;

            align-items: center;

            grid-template-columns: repeat(3, calc(100% / 3));
            grid-template-areas: "header__left header__center header__right";
    
            .event-popover__header__left {
                grid-area: header__left;

                text-wrap: nowrap;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                
                font: var(--container-medium-label_bold-font);
            }
    
            .event-popover__header__center {
                grid-area: header__center;
                justify-self: center;
            }
    
            .event-popover__header__right {
                grid-area: header__right;
                justify-self: end;

                display: flex;
                flex-wrap: nowrap;
                gap: var(--padding-padding-small);
            }
        }
    
        .event-popover__body {
            display: flex;
            flex-direction: column;

            gap: var(--padding-padding-large);
            padding: var(--padding-padding-large);
    
            border-radius: var(--corner-radius-components-inside);
    
            background: var(--background-background-level-2);
    
            .event-popover__body__description {
                p:last-child {
                    margin-bottom: 0;
                }
            }
    
            .event-popover__body__labels {
                display: flex;
                flex-wrap: wrap;
    
                gap: var(--padding-padding-small);
            }
        }
    }
}

/* Mobile - 320 - 767 px */

/* Container for multiple events */
.calendar-events-container {
    display: flex;
    flex-direction: column;
    
    gap: var(--padding-padding-large);
}

/* Container for event and popover */
.calendar-event-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 0 0.25rem;

    position: relative;

    &.calendar-event-container--hidden {
        display: none;
    }

    &.calendar-event-container--overflowing {
        display: none;
    }

    &[data-event-in-current-month="false"] {
        display: none;
    }
}

/* Single event */
.calendar-event {
    height: 2.5rem;
    
    display: flex;
    align-items: center;
    
    padding: var(--padding-padding-none) var(--padding-padding-xl);
    gap: var(--padding-padding-large);

    background-color: var(--form-form-15);
    border-radius: var(--corner-radius-components-outside);
    
    color: var(--text-body-body-base);
    box-shadow: var(--drop-shadow-large);

    cursor: pointer;

    z-index: 15;

    &.calendar-event--finished {
        opacity: 50%;
    
        &:hover {
            opacity: revert;
        }
    }

    /* Text color variants */
    &.calendar-event--color-inverted {
        color: var(--text-white-white-base);
    }

    .calendar-event__icon {
        display: flex;

        align-items: center;

        width: 1rem;
        height: 1rem;
    }
    
    .calendar-event__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    
        flex: 1;

        font: var(--container-medium-body_text-font);

        &.calendar-event__text--bold {
            font: var(--container-medium-label_bold-font);
        }
    }

    .calendar-event__date {
        font: var(--container-small-label-font);
    }

    .calendar-event__pictograms {
        display: flex;
        
        gap: var(--padding-padding-large);
    }

    .calendar-event__status {
        display: flex;

        align-items: center;       
    }
}

.calendar-event-rmp-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "type               environment"
                         "priority           priority"
                         "labels             labels"
                         "affected-services  affected-services"
                         "involved-vendors   responsible"
                         "jira-key           jira-key"
                         "installation-start installation-start"
                         "installation-end   installation-end"
                         "outage-start       outage-start"
                         "outage-end         outage-end";
    gap: var(--padding-padding-xxl) var(--padding-padding-large);

    &.calendar-event-rmp-detail-fields--external-partner {
        grid-template-areas: "type               environment"
                             "priority           priority"
                             "involved-vendors   responsible"
                             "installation-start installation-start"
                             "installation-end   installation-end"
                             "outage-start       outage-start"
                             "outage-end         outage-end";
        .calendar-event-rmp-detail-fields__labels {
            display: none;
        }

        .calendar-event-rmp-detail-fields__affected-services {
            display: none;
        }
    }

    .calendar-event-rmp-detail-fields__type {
        grid-area: type;
    }

    .calendar-event-rmp-detail-fields__environment {
        grid-area: environment;
    }

    .calendar-event-rmp-detail-fields__priority {
        grid-area: priority;
    }

    .calendar-event-rmp-detail-fields__labels {
        grid-area: labels;
    }

    .calendar-event-rmp-detail-fields__affected-services {
        grid-area: affected-services;
    }

    .calendar-event-rmp-detail-fields__involved-vendors {
        grid-area: involved-vendors;
    }

    .calendar-event-rmp-detail-fields__responsible {
        grid-area: responsible;
    }

    .calendar-event-rmp-detail-fields__jira-key {
        grid-area: jira-key;
    }

    .calendar-event-rmp-detail-fields__installation-start {
        grid-area: installation-start;
    }

    .calendar-event-rmp-detail-fields__installation-end {
        grid-area: installation-end;
    }

    .calendar-event-rmp-detail-fields__outage-start {
        grid-area: outage-start;
    }

    .calendar-event-rmp-detail-fields__outage-end {
        grid-area: outage-end;
    }
}

.calendar-event-si-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "type               environment"
                         "priority           priority"
                         "labels             labels"
                         "affected-services  affected-services"
                         "involved-vendors   responsible"
                         "jira-key           jira-key"
                         "potential-risks    reason"
                         "testing-required   testing-required"
                         "maintenance-start  maintenance-start"
                         "maintenance-end    maintenance-end"
                         "outage-start       outage-start"
                         "outage-end         outage-end";
    gap: var(--padding-padding-xxl) var(--padding-padding-large);

    &.calendar-event-si-detail-fields--external-partner {
        grid-template-areas: "type               environment"
                             "priority           priority"
                             "involved-vendors   responsible"
                             "potential-risks    reason"
                             "testing-required   testing-required"
                             "maintenance-start  maintenance-start"
                             "maintenance-end    maintenance-end"
                             "outage-start       outage-start"
                             "outage-end         outage-end";

        .calendar-event-si-detail-fields__labels {
            display: none;
        }

        .calendar-event-si-detail-fields__affected-services {
            display: none;
        }
    }

    .calendar-event-si-detail-fields__type {
        grid-area: type;
    }

    .calendar-event-si-detail-fields__environment {
        grid-area: environment;
    }

    .calendar-event-si-detail-fields__priority {
        grid-area: priority;
    }

    .calendar-event-si-detail-fields__labels {
        grid-area: labels;
    }

    .calendar-event-si-detail-fields__affected-services {
        grid-area: affected-services;
    }

    .calendar-event-si-detail-fields__involved-vendors {
        grid-area: involved-vendors;
    }

    .calendar-event-si-detail-fields__responsible {
        grid-area: responsible;
    }

    .calendar-event-si-detail-fields__jira-key {
        grid-area: jira-key;
    }

    .calendar-event-si-detail-fields__potential-risks {
        grid-area: potential-risks;
    }

    .calendar-event-si-detail-fields__reason {
        grid-area: reason;
    }

    .calendar-event-si-detail-fields__testing-required {
        grid-area: testing-required;
    }

    .calendar-event-si-detail-fields__maintenance-start {
        grid-area: maintenance-start;
    }

    .calendar-event-si-detail-fields__maintenance-end {
        grid-area: maintenance-end;
    }

    .calendar-event-si-detail-fields__outage-start {
        grid-area: outage-start;
    }

    .calendar-event-si-detail-fields__outage-end {
        grid-area: outage-end;
    }
}

.calendar-event-ise-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "type        type"
                         "responsible jira-key"
                         "event-start event-end";
    gap: var(--padding-padding-xxl) var(--padding-padding-large);

    &.calendar-event-ise-detail-fields--external-partner {
        grid-template-areas: "type        type"
                             "responsible responsible"
                             "event-start event-end";
    }

    .calendar-event-ise-detail-fields__type {
        grid-area: type;
    }

    .calendar-event-ise-detail-fields__responsible {
        grid-area: responsible;
    }

    .calendar-event-ise-detail-fields__jira-key {
        grid-area: jira-key;
    }

    .calendar-event-ise-detail-fields__event-start {
        grid-area: event-start;
    }

    .calendar-event-ise-detail-fields__event-end {
        grid-area: event-end;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .calendar-event-container {
        &[data-event-in-current-month="false"]:not(.calendar-event-container--hidden):not([data-event-is-continuation="true"]) {
            display: flex;
        }

        &[data-event-is-continuation="true"] {
            display: none;
        }
    }

    .calendar-event {
        height: 1.75rem;

        padding: var(--padding-padding-none) var(--padding-padding-medium);
        gap: var(--padding-padding-medium);

        .calendar-event__pictograms {
            gap: var(--padding-padding-medium);
        }
    }

    .calendar-event-rmp-detail-fields {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "type               environment       priority"
                             "labels             labels            labels"
                             "affected-services  affected-services affected-services"
                             "involved-vendors   responsible       jira-key"
                             "installation-start installation-end  empty1"
                             "outage-start       outage-end        empty2";
        
        &.calendar-event-rmp-detail-fields--external-partner {
            grid-template-areas: "type               environment      priority"
                                 "involved-vendors   responsible      empty1"
                                 "installation-start installation-end empty2"
                                 "outage-start       outage-end       empty3";
        }
    }

    .calendar-event-si-detail-fields {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "type              environment       priority"
                             "labels            labels            labels"
                             "affected-services affected-services affected-services"
                             "involved-vendors  responsible       jira-key"
                             "potential-risks   reason            testing-required"
                             "maintenance-start maintenance-end   empty1"
                             "outage-start      outage-end        empty2";

        &.calendar-event-si-detail-fields--external-partner {
            grid-template-areas: "type              environment       priority"
                                 "involved-vendors  responsible       empty1"
                                 "potential-risks   reason            testing-required"
                                 "maintenance-start maintenance-end   empty2"
                                 "outage-start      outage-end        empty3";
        }
    }

    .calendar-event-ise-detail-fields {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "type        type"
                             "responsible jira-key"
                             "event-start event-end";

        &.calendar-event-ise-detail-fields--external-partner {
            grid-template-areas: "type        type"
                                 "responsible responsible"
                                 "event-start event-end";
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
.event-calendar-widget-header {
    display: grid;
    grid-template-areas: "title      filter"
                         "view       view"
                         "pagination pagination";
    grid-template-columns: auto auto;
    align-items: baseline;

    column-gap: var(--padding-padding-none);
    row-gap: var(--padding-padding-xxl);

    .event-calendar-widget-header__title {
        grid-area: title;

        display: flex;
        align-items: center;
        
        padding-right: var(--padding-padding-large);

        font: var(--container-medium-headline_bold-font);
        color: var(--text-headline-headline-base);
    }

    .event-calendar-widget-header__filter {
        grid-area: filter;
        align-self: center;
        justify-self: end;
    }

    .event-calendar-widget-header__view {
        grid-area: view;
    }

    .event-calendar-widget-header__pagination {
        grid-area: pagination;
        justify-self: center;

        display: grid;
        grid-template-columns: 1fr max-content 1fr;
        align-items: baseline;

        column-gap: var(--padding-padding-xxl);

        align-items: center;
    }
}

.calendar-month {
    display: flex;
    flex-direction: column;

    .calendar-month__title {
        display: none;
    }

    .calendar-month__grid {
        display: flex;
        flex-direction: column;

        row-gap: var(--padding-padding-large);
    }

    .calendar-month__borders {
        display: none;
    }

    .calendar-month__row {
        display: flex;
        flex-direction: column;

        row-gap: var(--padding-padding-large);

        .calendar-month__row__filler {
            display: none;
        }

        .calendar-month__week-number {
            display: none;
        }

        .calendar-month__day__title {
            .calendar-month__day__title__number {
                display: none;
            }

            .calendar-month__day__title__text {
                display: none;
            }

            .calendar-month__day__title__fulldate {
                padding-top: var(--padding-padding-large);
                font: var(--container-medium-label-font);
            }
        }

        .calendar-month__day__title:last-child,
        .calendar-month__day__title:has(+ .calendar-month__day__title),
        .calendar-month__day__title--hidden {
            display: none;
        }

        > .calendar-event-container {
            padding-left: var(--padding-padding-none);
            padding-right: var(--padding-padding-none);
        }
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
}  */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .event-calendar-widget-header {
        grid-template-areas: "title . view filter";
        grid-template-columns: auto 1fr auto auto;

        position: relative;

        .event-calendar-widget-header__pagination {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .calendar-month {
        display: grid;
        grid-template-columns: 2rem repeat(7, calc((100% - 2rem) / 7));
        grid-template-rows: 2rem repeat(auto-fill, minmax(0, 1fr));

        padding: 0.25rem;

        .calendar-month__title {
            display: grid;
            grid-column: 1/span 8;
            grid-template-columns: 2rem repeat(7, calc((100% - 2rem) / 7));

            .calendar-month__title__day {
                display: flex;
                padding: 0.25rem 1rem;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                flex: 1 0 0;

                font: var(--general-table-header-font);

                color: var(--text-body-body-50);

                &.calendar-month__title__day--weekend {
                    color: var(--system-negative-negative-60);
                }
            }
        }

        .calendar-month__grid {
            grid-column: 1 / span 8;
            
            display: grid;
            grid-template-columns: 2rem repeat(7, calc((100% - 2rem) / 7));

            gap: var(--padding-padding-none);

            overflow-y: auto;

            z-index: 10;

            &:has(.calendar-month__borders) {
                grid-template-rows: subgrid;
            }
        }

        .calendar-month__borders {
            display: grid;
            grid-column: span 8;
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;

            > div {
                border-right: 1px solid var(--form-form-15);

                &:first-child {
                    border: none;
                }

                &:last-child {
                    border: none;
                }
            }
        }

        .calendar-month__row {
            display: grid;
            grid-column: span 8;
            grid-template-columns: subgrid;
            grid-template-rows: 2.5rem;
            grid-auto-rows: minmax(1.75rem, auto);

            row-gap: 0.25rem;

            padding-bottom: 0.25rem;

            border-top: 1px solid var(--form-form-15);

            &.calendar-month__row--first {
                border-top-color: var(--form-form-45);
            }

            .calendar-month__row__filler {
                display: unset;
            }

            .calendar-month__week-number {
                display: flex;
                width: 2.1875rem;
                padding: 0.25rem 0.5rem;
                flex-direction: column;
                align-items: flex-start;
                align-self: stretch;

                font: var(--general-table-text_default-font);

                color: var(--text-body-body-50);
            }
            
            .calendar-month__day__title {
                display: grid !important;
                grid-auto-flow: column;
                justify-content: space-between;
                align-items: baseline;

                gap: 0.5rem;
                padding: 0.25rem;

                font: var(--general-table-text_bold-font);

                color: var(--text-body-body-base);

                .calendar-month__day__title__text {
                    flex: 1 0 0;
                    
                    color: var(--system-negative-negative-80);
                    
                    font: var(--general-table-text_default-font);
                }

                .calendar-month__day__title__number {
                    display: flex;
                    min-width: 2rem;
                    height: 2rem;
                    padding: 0rem 0.5rem;
                    justify-content: center;
                    align-items: center;

                    text-wrap: nowrap;
                    white-space: nowrap;
                    
                    &.calendar-month__day__title__number--today {
                        color: var(--text-white-white-base);
                        border-radius: 1rem;
                        background: var(--system-negative-negative-80);
                    }

                    &.calendar-month__day__title__number--weekend {
                        color: var(--system-negative-negative-60);
                    }
                }

                .calendar-month__day__title__fulldate {
                    display: none;
                }
            }

            > .calendar-event-container {
                padding-left: var(--padding-padding-small);
                padding-right: var(--padding-padding-small);
            }
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
.calendar-upcoming {
    height: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--padding-padding-xxxl);

    .calendar-upcoming__today {
        display: flex;
        flex-direction: column;

        gap: 1rem;

        &:has(.calendar-event-container:not(.calendar-event-container--hidden)) .calendar-upcoming__today__no-events {
            display: none;
        }

        .calendar-upcoming__today__date {
            color: var(--text-body-body-base);
            font: var(--richtext-headline-heading_h2-font);

            text-wrap: nowrap;
            white-space: nowrap;
        }

        .calendar-event-container {
            padding: 0;
            
            .event-popover {
                width: 100%;
                
                left: 0;
                right: 0;
            }
        }

        .calendar-upcoming__today__no-events {
            color: var(--text-body-body-50);
            font: var(--container-medium-label-font);
        }
    }

    .calendar-upcoming__future {
        display: none;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .calendar-upcoming {
        /*
         * Min height to fit 3 days × 5 events.
         * Per day: title + gap + (5 × event height) + (4 × event gap) + day padding-bottom
         * Between today and future: --padding-padding-xxxl
         * Between future days: --padding-padding-large
         */
        --_events-per-day: 5;
        --_day-count: 3;
        --_event-height: 1.75rem;
        --_event-gap: var(--padding-padding-large);
        --_day-title-height: 1.5rem;
        --_day-inner-gap: var(--padding-padding-large);
        --_day-padding-bottom: var(--padding-padding-large);
        --_day-events-height: calc(var(--_events-per-day) * var(--_event-height) + (var(--_events-per-day) - 1) * var(--_event-gap));
        --_day-height: calc(var(--_day-title-height) + var(--_day-inner-gap) + var(--_day-events-height) + var(--_day-padding-bottom));
        min-height: calc(var(--_day-height) * var(--_day-count) + var(--padding-padding-xxxl) + (var(--_day-count) - 2) * var(--_event-gap));

        .calendar-upcoming__future {
            display: flex;
            flex-direction: column;

            gap: var(--padding-padding-large);

            .calendar-upcoming__future__day {            
                display: flex;
                flex-direction: column;
                
                padding-bottom: var(--padding-padding-large);
                gap: var(--padding-padding-large);

                &:not(:has(.calendar-event-container:not(.calendar-event-container--hidden))) {
                    display: none;
                }

                &:not(:has(.calendar-event-container:not(.calendar-event-container--overflowing))) {
                    display: none;
                }

                .calendar-upcoming__future__day__title {
                    color: var(--text-body-body-50);
                    font: var(--container-medium-label-font);
                }

                .calendar-event-container {
                    padding: 0;
                    
                    .event-popover {
                        width: 100%;
                        
                        left: 0;
                        right: 0;
                    }
                }
            }
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
.timeline {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    
    gap: var(--padding-padding-large);

    position: relative;

    .no-results {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--padding-padding-xxl);

        grid-area: no-results;

        padding: var(--padding-padding-xxl);

        .title {
            color: var(--text-body-body-50);
            font: var(--container-container_medium-headline-font);    
        }

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

            img {
                height: 3.5rem;
            }
        }

        &.no-results--alternative {
            flex-direction: column;

            .title {
                font: var(--container-medium-label-font);
            }

            .image {
                img {
                    height: 8.5rem;
                }
            }
        }
    }
}

.timeline-day {
    display: flex;
    
    position: relative;
    
    z-index: 1;
    
    padding: var(--padding-padding-large);
    gap: var(--padding-padding-large);

    border-radius: var(--corner-radius-components-outside);
    border: 1px solid var(--form-form-15);
    background: var(--background-background-level-2);

    &.hidden {
        display: none !important;
    }

    &:has(.timeline-day__content:not(.hidden)) {
        box-shadow: var(--drop-shadow-large);
    }

    .timeline-day__header {
        display: grid;
        grid-template-areas: "title subtitle chevron"
                             "badges badges chevron";
        grid-template-columns: 1fr 1fr auto;
        grid-template-rows: 1.75rem auto;
        align-items: center;

        gap: var(--padding-padding-large);

        cursor: pointer;

        &:has(.timeline-day__header__badges.hidden) {
            grid-template-areas: "title subtitle chevron";
            grid-template-rows: 1.75rem;
        }
        
        .timeline-day__header__title {
            grid-area: title;
            
            color: var(--text-body-body-90);

            font: var(--container-medium-label-font);
        }

        .timeline-day__header__subtitle {
            grid-area: subtitle;

            justify-self: end;

            color: var(--text-body-body-50);

            font: var(--container-small-label-font);
        }

        .timeline-day__header__badges {
            grid-area: badges;

            display: flex;
            flex-wrap: wrap;
            
            gap: var(--padding-padding-small);
        }

        .timeline-day__header__chevron {
            grid-area: chevron;

            align-self: center;
        }
    }

    .timeline-day__content {
        width: 100%; 
        
        display: flex;
        flex-direction: column;             
        
        gap: var(--padding-padding-large);
    }
}

.outage-timeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;
    
    padding: var(--padding-padding-xxl);
    gap: var(--padding-padding-large);

    position: relative;

    border-radius: var(--corner-radius-components-outside);
    border: 1px solid var(--form-form-15);
    background-color: var(--background-background-level-3);
    
    box-shadow: var(--drop-shadow-large);
    
    cursor: pointer;

    &:hover {
        box-shadow: var(--shadow-behind-widget);
    }

    &:not(:hover) .outage-timeline__chevron {
        display: none;
    }

    .outage-timeline__header {
        width: 100%;

        display: flex;
        align-items: center;

        gap: var(--padding-padding-large);

        .outage-timeline__header__title {
            flex: 1 1 0%;
            min-width: 0;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            font: var(--container-medium-label_bold-font);
        }

        > svg {
            flex: 0 0 1.5rem;
        }
    }
    
    &.outage-timeline--variant-compact {
        .outage-timeline__content {
            display: none;
        }
    }

    .outage-timeline__content {
        display: flex;
        flex-direction: column;

        gap: var(--padding-padding-xxl);
    }

    .outage-timeline__content__description {
        font: var(--container-medium-body_text-font);

        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        line-clamp: 2;
    }

    .outage-timeline__chevron {
        width: 1rem;
        height: 1rem;
        aspect-ratio: 1 / 1;

        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);

        cursor: pointer;
    }
}

.timeline--history {
    position: relative;
    display: flex;
    padding: 1rem 3rem;    
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    flex-shrink: 0;
    min-width: 0;

    .timeline-item--history {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        align-self: stretch;
        
        .timeline-item--history__header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            align-self: stretch;

            &.header__icon {
                background-image: url(/build/images/status__error--light.3ec15cce.svg); /* Hardcoded for now */
                background-repeat: no-repeat;
                background-size: contain; 
                background-position: center;

                width: 3rem;
                height: 2rem;
                cursor: pointer;
            }
            .header__content {
                display: flex;
                flex-direction: column;
                flex: 1;
                gap: 0.5rem;
                .header__content__title {
                    display: flex;
                    flex: 1;

                    .header__content__title__left {
                        flex: 1;
                        font: var(--container-medium-label-font);
                        color: var(--text-body-body-90);
                    }

                    .header__content__title__right {
                        color: var(--text-body-body-50);
                        font: var(--container-medium-label-font);
                    }
                }
                .header__content__badges {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0.25rem;
                }
            }
    
            .header__chevron {
                
            }
        }

        .timeline-item--history__content {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%; 
            min-width: 0;
        }
    }

    .no-results {
        display: flex;
        align-items: center;
        justify-content: center;
        
        grid-area: no-results;
        
        padding: var(--padding-padding-xl) var(--padding-padding-xxl);
        gap: var(--padding-padding-large);

        color: var(--text-body-body-50);
        font: var(--container-medium-headline-font);

        &::after {
            display: block;
            content: '';

            width: 2rem;
            height: 2rem;

            visibility: visible;
            
            background-image: var(--no-result-image);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        &.no-results--alternative {
            flex-direction: column;

            font: var(--container-medium-label-font);
        }
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .timeline-day {
        .timeline-day__content {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .timeline--history {
        .no-results {
            padding: var(--padding-padding-xxl);
            gap: var(--padding-padding-xxl);

            &::after {
                width: 4.5rem;
                height: 4.5rem;
            }
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
@media (min-width: 1280px) {
    .timeline-day {
        .timeline-day__content {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
:root {
    --no-result-image: url(/build/images/status__ok--light.430c0186.svg);

    &[data-color-scheme="dark"] {
        --no-result-image: url(/build/images/status__ok--dark.14effea7.svg);
    }
}

.outage {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--padding-padding-large);

    &.outage--with-container {
        &:has(> .outage-item:nth-child(1 of .outage-item)) {
            padding: var(--padding-padding-small);
            box-shadow: var(--shadow-behind-widget);
            
            border-radius: var(--corner-radius-components-outside);
        }
    }

    .no-results {
        display: flex;
        align-items: center;
        justify-content: center;
        
        grid-area: no-results;
        
        padding: var(--padding-padding-xl) var(--padding-padding-xxl);
        gap: var(--padding-padding-large);

        color: var(--text-body-body-50);
        font: var(--container-medium-headline-font);

        &::after {
            display: block;
            content: '';

            width: 2rem;
            height: 2rem;

            visibility: visible;
            
            background-image: var(--no-result-image);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        &.no-results--alternative {
            flex-direction: column;

            font: var(--container-medium-label-font);
        }
    }

    &:has(> .outage-item:nth-child(1 of .outage-item)) {
        .no-results {
            display: none;
        }
    }
}

.outage-list {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--padding-padding-large);

    .no-results {
        display: flex;
        align-items: center;
        justify-content: center;

        padding: var(--padding-padding-xl) var(--padding-padding-xxl);
        gap: var(--padding-padding-large);

        color: var(--text-body-body-50);
        font: var(--container-medium-headline-font);

        &.no-results--alternative {
            flex-direction: column;

            font: var(--container-medium-label-font);
        }
    }

    &:has(> .outage-item:nth-child(1 of .outage-item)) {
        .no-results {
            display: none;
        }
    }
}

.outage-item {
    display: flex;
    flex-direction: column;
    min-width: 0;

    padding: var(--padding-padding-xxl);
    gap: var(--padding-padding-large);

    background-color: var(--outage-background-color);

    border-radius: var(--corner-radius-components-outside);
    border-width: 1px;
    border-style: solid;
    border-color: var(--outage-outline-color);

    position: relative;

    cursor: pointer;

    &:hover:not(&.outage-item--without-modal) {
        box-shadow: var(--shadow-behind-widget);
    }

    &:not(:hover:not(&.outage-item--without-modal)) {
        .outage-item__chevron {
            display: none;
        }
    }

    &.outage-item--variant-compact {
        .outage-item__content {
            display: none;
        }
    }

    &.outage-item--variant-widget {
        padding: var(--padding-padding-large);
    }

    &:nth-child(1 of .outage-item) {
        grid-area: first;
    }

    &:nth-child(2 of .outage-item) {
        grid-area: second;
    }

    &:nth-child(3 of .outage-item) {
        grid-area: third;
    }

    &:nth-child(4 of .outage-item) {
        grid-area: fourth;
    }

    .outage-item__header {
        display: flex;
        align-items: center;

        gap: var(--padding-padding-small);

        .outage-item__header__title {
            flex: 1 1 0%;
            min-width: 0;

            color: var(--text-body-body-base);
            font: var(--container-medium-label_bold-font);

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .outage-item__content {
        display: flex;
        height: calc(2 * var(--container-medium-body_text-line-height)); /* Using line height variable */

        .outage-item__content__description {
            flex: 1;

            color: var(--text-body-body-base);
            font: var(--container-medium-body_text-font);

            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: break-word;
        }
    }
    
    .outage-item__chevron {
        width: 1rem;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--text-body-body-50);

        position: absolute;
        top: 0;
        bottom: 0;
        right: var(--padding-padding-none);
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .outage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));

        gap: var(--padding-padding-large);

        grid-template-areas: "no-results no-results"
                             "no-results no-results";

        &:has(> .outage-item:nth-child(1 of .outage-item)) {
            grid-template-areas: "first  first"
                                 "blank  blank";

            .no-results {
                display: none;
            }
        }
        
        &:has(> .outage-item:nth-child(2 of .outage-item)) {
            grid-template-areas: "first  first"
                                 "second second";
        }
        
        &:has(> .outage-item:nth-child(3 of .outage-item)) {
            grid-template-areas: "first  first"
                                 "second third";
        }

        &:has(> .outage-item:nth-child(4 of .outage-item)) {
            grid-template-areas: "first second"
                                 "third fourth";
        }

        &[data-paginated="true"] {
            grid-template-areas: "first second"
                                 "third fourth" !important;
        }

        .no-results {
            padding: var(--padding-padding-xxl);
            gap: var(--padding-padding-xxl);

            &::after {
                width: 4.5rem;
                height: 4.5rem;
            }
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
:root {
    --status-ok-image: url(/build/images/status__ok--light.430c0186.svg);
    --status-warning-image: url(/build/images/status__warning--light.42114908.svg);
    --status-error-image: url(/build/images/status__error--light.3ec15cce.svg);

    &[data-color-scheme="dark"] {
        --status-ok-image: url(/build/images/status__ok--dark.14effea7.svg);
        --status-warning-image: url(/build/images/status__warning--dark.ea6fc098.svg);
        --status-error-image: url(/build/images/status__error--dark.9b10fb79.svg);
    }
}

a:has(.overall-status):hover {
    text-decoration: none;
}

.overall-status {
    --stroke-color: var(--outages-positive-outage-positive-stroke);
    --fill-color: var(--outages-positive-outage-positive-fill);
    --text-color: var(--outages-positive-outage-positive-text);

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--padding-padding-large) var(--padding-padding-xxl);
    gap: var(--padding-padding-large);

    border-width: 2px;
    border-style: solid;
    border-color: var(--stroke-color);
    border-radius: var(--corner-radius-components-outside);

    background-color: var(--fill-color);

    &:hover {
        box-shadow: var(--shadow-behind-widget);
    }

    .overall-status__title {
        color: var(--text-color);
        font: var(--container-medium-headline_bold-font);
    }

    .overall-status__image::after {
        display: block;
        content: '';

        width: 1.5rem;
        height: 1.5rem;

        visibility: visible;
        
        background-size: cover;
    }

    .overall-status__image.all-services-operational::after {
        background-image: var(--status-ok-image);
    }

    .overall-status__image.some-services-are-experiencing-minor-issues::after {
        background-image: var(--status-warning-image);
    }

    .overall-status__image.some-services-are-experiencing-critical-issues::after {
        background-image: var(--status-error-image);
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    /* Icon buttons */
    .overall-status {
        padding: var(--padding-padding-xxl);

        .overall-status__image::after {
            width: 4.5rem;
            height: 4.5rem;
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

.service-desk {
    width: 100%;

    display: grid;
    grid-auto-flow: row;
    grid-template-rows: minmax(auto, max-content);

    align-items: center;
    justify-content: center;

    .service-desk__contact-channel {
        width: 100%;

        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;


        justify-items: center;

        padding: var(--padding-padding-xxxl) var(--padding-padding-none);
        gap: var(--padding-padding-large);

        color: var(--text-body-body-base);

        &:not(:last-child) {
            border-bottom: 1px solid var(--form-form-15);
        }

        .service-desk__contact-channel__title {
            display: flex;

            align-items: center;

            gap: var(--padding-padding-large);

            font: var(--container-medium-label_bold-font);
        }

        .service-desk__contact-channel__introduction-text {
            font: var(--container-medium-label-font);

            text-align: center;
        }

        .service-desk__contact-channel__primary-text {
            display: flex;

            align-items: center;
            gap: 0.5rem;

            font: var(--container-medium-label-font);
        }

        .service-desk__contact-channel__additional-text {
            color: var(--text-body-body-50);

            text-align: center;
        }
    }
}

.service-desk-links {
    flex-wrap: wrap-reverse !important;
}

@container (min-width: 800px) {
    .service-desk {
        grid-auto-flow: column;

        .service-desk__contact-channel {

            padding: var(--padding-padding-xxxl);
            gap: var(--padding-padding-xxxl);

            &:not(:last-child) {
                border-right: 1px solid var(--form-form-15);
                border-bottom: unset;
            }
        }
    }
}

/* Mobile - 320 - 767 px */
[data-controller="components--sidebar"]:has(.feedback) {
    .sidebar__content {
        padding: var(--padding-padding-xxxl) var(--padding-padding-xxl);
    }
}

.feedback {
    > form {
        display: flex;
        flex-direction: column;

        gap: var(--padding-padding-xxl);
    
        > .feedback__title {
            align-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            gap: var(--padding-padding-large);

            font: var(--container-medium-label_bold-font);
        }

        > .feedback__fields {
            display: flex;
            flex-direction: column;

            gap: var(--padding-padding-xxl);
        }

        > .feedback__settings {
            display: flex;
            flex-direction: column;

            gap: var(--padding-padding-large);

            padding-bottom: 3rem;

            > .feedback__settings__row {
                display: flex;
                align-items: center;
                justify-content: space-between;

                gap: var(--padding-padding-large);
            
                .feedback__settings__row__title {
                    display: flex;
                    flex-direction: column;

                    gap: var(--padding-padding-small);

                    font: var(--container-medium-label-font);

                    color: var(--text-body-body-base);

                    > .feedback__settings__row__title__subtitle {
                        font: var(--general-table-description-font);

                        color: var(--text-body-body-50);
                    }
                }
            }
        }
    }
}

.feeling {
    width: 100%;
    
    display: flex;
    justify-content: space-between;

    .feeling__option {
        width: 4rem;
        height: 5.75rem;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        
        gap: var(--padding-padding-large);
        
        cursor: pointer;

        font: var(--container-medium-label-font);
        
        transition: font 0.2s ease;

        input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        .feeling__icon {
            width: 3rem;
            height: 3rem;

            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            
            transition: 
                transform 0.3s ease,
                scale 0.3s ease,
                box-shadow 0.3s ease;

            &[data-value="terrible"] { background-image: url(/build/images/terrible.3a78e825.svg); }
            &[data-value="bad"]      { background-image: url(/build/images/bad.50ba11da.svg); }
            &[data-value="okay"]     { background-image: url(/build/images/okay.0d478e1f.svg); }
            &[data-value="good"]     { background-image: url(/build/images/good.eed62106.svg); }
            &[data-value="perfect"]  { background-image: url(/build/images/perfect.9630c257.svg); }
        }

        &:hover .feeling__icon {
            scale: 1.2;
            transform: translateY(-10%);
        }

        &:has(input:checked) {
            font: var(--container-medium-label_bold-font);

            .feeling__icon {
                scale: 1.2;
                transform: translateY(-10%);
            }
        }
    }
}

.feedback-confirmation {    
    display: flex;
    flex-direction: column;
    gap: 3.5rem;

    box-shadow: var(--drop-shadow-large);
    
    > .feedback-confirmation__image {
        display: flex;
        justify-content: center;

        img {
            width: 12rem;
        }
    }

    > .feedback-confirmation__title {
        display: flex;
        justify-content: center;
        font: var(--container-container_promo-headline-font);
    }

    > .feedback-confirmation__message {
        display: flex;
        justify-content: center;

        font: var(--container-container_promo-subheadline-font);
    }
}

.feedback-buttons {
    display: flex;
    justify-content: center;
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    [data-controller="components--sidebar"]:has(.feedback) {
        .sidebar__content {
            padding: 3rem var(--padding-padding-xxxl) 2rem var(--padding-padding-xxxl);
        }
    }

    .feedback {
        > form {
            gap: 3rem;
        }
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Mobile - 320 - 767 px */
.notification-center {
    display: flex;
    flex-direction: column;
    
    height: 100%;
    
    .notification-center__body {
        display: flex;
        flex-direction: column;

        flex: 1 0 0;

        gap: var(--padding-padding-xxl);
        padding: var(--padding-padding-xxl);

        overflow: auto;

        &:has(.notification) .notification-center__no-notifications-message {
            display: none;
        }

        .notification-center__section {
            display: flex;
            flex-direction: column;
            gap: var(--padding-padding-xxl);

            &:not(:has(.notification)) {
                display: none;
            }

            .notification-center__section__header {
                display: flex;
                justify-content: space-between;

                font: var(--container-medium-label-font);
                
                .notification-center__section__header__title {
                    color: var(--text-body-body-90);
                }
                .notification-center__section__header__count {
                    color: var(--text-body-body-50);
                }
            }
            
            .notification-center__section__content {
                display: flex;
                flex-direction: column;
                gap: var(--padding-padding-large);
            }
        }

        .notification-center__no-notifications-message {
            height: 10rem;
            
            display: flex;

            align-items: center;
            justify-content: center;

            padding: var(--padding-padding-small);

            color: var(--text-body-body-50);
            font: var(--container-medium-label-font);
        }
    }

    .notification-center__footer {
        display: flex;
        justify-content: space-between;
        
        padding: var(--padding-padding-xxl);
    }
}

.notification {    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    padding-top: var(--padding-padding-small);
    padding-bottom: var(--padding-padding-large);
    padding-left: var(--padding-padding-large);
    padding-right: var(--padding-padding-small);
    gap: var(--padding-padding-large);

    position: relative;

    border: 1px solid var(--brand-blue-shades-sazka-blue-secondary);
    border-left: 4px solid var(--brand-blue-shades-sazka-blue-secondary);
    border-radius: var(--corner-radius-components-outside);

    background: var(--background-background-level-3);

    box-shadow: var(--drop-shadow-large);

    cursor: pointer;

    &:hover {
        background: var(--background-hover-background);
        box-shadow: var(--shadow-behind-widget);
    }

    &.notification--read {
        border: 1px solid var(--form-form-15);
    }

    .notification__header {
        width: 100%;
        height: 1.75rem;

        display: flex;
        align-items: center;
        gap: var(--padding-padding-large);
        
        .notification__header__icon {
            width: 1.25rem;
            height: 1.25rem;
        }

        .notification__header__title {
            font: var(--container-medium-label_bold-font);
            color: var(--text-body-body-base);

            flex: 1 0 0;
            
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .notification__content {
        color: var(--text-body-body-base);
        font: var(--container-medium-body_text-font);
    }

    .notification__footer {
        padding-top: 0.25rem;

        color: var(--form-form-base);

        font: var(--general-cta-link_default-font);
    }

    .notification__chevron {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);

        width: 1rem;
        height: 1rem;
        color: var(--text-body-body-50);
    }

    &:not(:hover) .notification__chevron {
        display: none;
    }
}

/* Mobile - 768 - 960 px */
/* @media (min-width: 768px) {
} */

/* Laptop & tablet - 961 - 1279 px */
@media (min-width: 961px) {
    .notification-center {
        .notification-center__body {
            padding: var(--padding-padding-xxxl);
        }
    }

    .notification {
        padding: var(--padding-padding-xl) var(--padding-padding-xxl);

        border-left-width: 8px;
    }
}

/* Laptop & tablet - 1280 - 1680 px */
/* @media (min-width: 1280px) {
} */

/* Desktop - 1681 - 2200 px */
/* @media (min-width: 1681px) {
} */

/* Desktop - 2201 px and above */
/* @media (min-width: 2201px) {
} */

/* Admin › Push log */

.push-log {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .push-log__tabs {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;

        a {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;

            padding: 0.375rem 0.75rem;

            border-radius: 0.25rem;
            border: 1px solid var(--form-form-15);

            color: var(--text-body-body-base);
            text-decoration: none;

            font: var(--general-basic-badge-font);

            &.push-log__tab--current {
                background: var(--background-background-level-3);
                border-color: var(--form-form-45);
            }
        }
    }

    .push-log__alert {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        padding: 0.75rem 1rem;

        border-radius: 0.25rem;
        border: 1px solid var(--system-warning-warning-60);
        background: var(--system-warning-warning-5);

        color: var(--text-body-body-base);

        &.push-log__alert--negative {
            border-color: var(--system-negative-negative-60);
            background: var(--system-negative-negative-5);
        }

        code {
            font-size: 0.8rem;
        }
    }

    .push-log__kpis {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 0.75rem;

        .push-log__kpi {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;

            padding: 0.75rem 1rem;

            border-radius: 0.25rem;
            border: 1px solid var(--form-form-15);
            background: var(--background-background-level-1);

            .push-log__kpi__value {
                font: var(--container-container_large-number);
                color: var(--text-body-body-base);
            }

            .push-log__kpi__label {
                font: var(--container-container_small-label);
                color: var(--text-body-body-50);
                text-transform: uppercase;
            }

            &.push-log__kpi--negative .push-log__kpi__value {
                color: var(--system-negative-negative-base);
            }

            &.push-log__kpi--warning .push-log__kpi__value {
                color: var(--system-warning-warning-base);
            }

            &.push-log__kpi--positive .push-log__kpi__value {
                color: var(--system-positive-positive-base);
            }
        }
    }

    .push-log__filters {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: end;

        padding: 0 0 1rem;

        .push-log__filters__toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;

            padding-bottom: 0.5rem;
        }
    }

    .push-log__progress {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .push-log__progress__bar {
            flex: 1 1 4rem;
            min-width: 3rem;
            height: 0.375rem;

            display: flex;
            overflow: hidden;

            border-radius: 0.25rem;
            background: var(--form-form-15);

            span {
                display: block;
                height: 100%;

                &.push-log__progress__sent { background: var(--system-positive-positive-base); }
                &.push-log__progress__failed { background: var(--system-negative-negative-base); }
                &.push-log__progress__expired { background: var(--system-warning-warning-base); }
                &.push-log__progress__pending { background: var(--calendar-statuses-in-progress); }
            }
        }

        .push-log__progress__label {
            font: var(--container-container_small-label);
            color: var(--text-body-body-50);
            white-space: nowrap;
        }
    }

    .push-log__facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 0.5rem 1.5rem;

        .push-log__fact {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;

            min-width: 0;

            .push-log__fact__label {
                font: var(--container-container_small-label);
                color: var(--text-body-body-50);
                text-transform: uppercase;
            }

            .push-log__fact__value {
                overflow-wrap: anywhere;
            }
        }
    }

    .push-log__payload {
        margin: 0;
        padding: 0.75rem;

        font-size: 0.78rem;
        white-space: pre-wrap;
        word-break: break-word;

        border-radius: 0.25rem;
        background: var(--background-background-level-3);
    }

    .push-log__muted {
        color: var(--text-body-body-50);
    }

    .push-log__mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.8rem;
    }

    .push-log__row-link {
        cursor: pointer;
    }

    .push-log__device {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        min-width: 0;

        svg {
            flex-shrink: 0;
        }

        .push-log__device__title {
            display: flex;
            flex-direction: column;
            min-width: 0;

            .push-log__device__host {
                font: var(--container-container_small-label);
                color: var(--text-body-body-50);
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .push-log__attempts {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .push-log__attempt {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0.75rem;
        align-items: center;

        padding: 0.5rem 0.75rem;

        border-radius: 0.25rem;
        border: 1px solid var(--form-form-15);

        .push-log__attempt__meta {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
            min-width: 0;

            .push-log__attempt__reason {
                font: var(--container-container_small-label);
                color: var(--text-body-body-50);
                overflow-wrap: anywhere;
            }
        }
    }
}

.table .push-log__cell--wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}