.ui-widget{
    font-family: Arial;
    /* jQuery UI 1.14.2 sets .ui-widget{font-size:1em}; the old 1.9.2 theme used 1.1em.
       Restore 1.1em (NOT rem) to match master exactly: em is context-relative, so it
       reproduces the pre-upgrade size in every nesting depth (top-level dialogs/tabs AND
       nested widgets like the dashboard cards). rem would be absolute and render nested
       widgets too large. */
    font-size: 1.1em;
}

/* 1.9.2 reset nested .ui-widget back to 1em (so a widget inside a widget doesn't compound
   the 1.1em). Mirror that. */
.ui-widget .ui-widget{
    font-size: 1em;
}

.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{
    font-family: Arial;
    font-size: 1.2rem;
}

/* jQuery UI 1.14.2 introduced .ui-widget.ui-widget-content{border:1px solid #c5c5c5}
   (specificity 0,2,0), which beats the old single-class override. Match that specificity
   so the Atlantis border colour wins again. */
.ui-widget-content,
.ui-widget.ui-widget-content {
    border: 1px solid var(--atlantis-anthracite);
    background: white;
    color: grey;
}

#accordion .ui-widget-content {
    border: var(--atlantis-std-border);
    border-top: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    -moz-border-radius-topright: 1rem;
    -webkit-border-top-right-radius: 1rem;
    -khtml-border-top-right-radius: 1rem;
    border-top-right-radius: 1rem;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    -moz-border-radius-topleft: 1rem;
    -webkit-border-top-left-radius: 1rem;
    -khtml-border-top-left-radius: 1rem;
    border-top-left-radius: 1rem;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    -moz-border-radius-bottomright: 1rem;
    -webkit-border-bottom-right-radius: 1rem;
    -khtml-border-bottom-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    -moz-border-radius-bottomleft: 1rem;
    -webkit-border-bottom-left-radius: 1rem;
    -khtml-border-bottom-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.ui-widget-header {
    border: 0px;
    background: #fff;
}

.ui_like_button {
    color: white;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui_button_active,
.ui-widget-header .ui-state-default, .ui_like_button {
    border: 2px solid var(--atlantis-blue);
    background: var(--atlantis-blue);
}

button.ui-state-default:focus,
.ui-widget-content button.ui-state-default:focus,
button.ui_button_active:focus,
.ui-widget-header button.ui-state-default:focus {
    outline: none; /* Standard-Fokusindikator weg */
    border: 2px solid #32a8dc;
    background: #32a8dc;
}

.ui-state-default:disabled,
.ui-state-hover.ui_button_inactive.ui-state-default:disabled {
    background: #959595;
    cursor: not-allowed;
}

.ui-tabs .ui-tabs-nav {
    padding: 0px;
}

.ui-tabs .ui-tabs-nav li {
    margin-bottom: 0px;
    padding-bottom: 0px;
    border: 0px;
}

.ui-state-hover a,
body:not(.isMobile) .ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #fff;
    text-decoration: none;
}

.ui-widget-header:not(.ui-datepicker-header):not(.ui-tabs-nav) {
    color: white;
    background-color: var(--atlantis-anthracite);
    border-radius: 0;
}

.ui-datepicker-header.ui-widget-header {
    background-color: white;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
body:not(.isMobile) .ui_button_active:hover:not(:disabled),
.ui_like_button:hover:not(:disabled) {
    border: 2px solid var(--atlantis-blue-selected);
    background: var(--atlantis-blue-selected);
}

.ui-datepicker-calendar a.ui-state-hover,
.ui-state-hover.ui_button_inactive,
.ui-state-hover[role='tab']
.ui-state-hover.ui-dialog-titlebar-close {
    border: 2px solid transparent;
    background: unset;
}

button:focus {
    outline: none; /* Standard-Fokusindikator weg */
    border: 2px solid var(--atlantis-blue-hover);
    background: var(--atlantis-blue-hover);
}

/* jQuery UI 1.14.2 defaults .ui-widget-content .ui-icon to the grey ui-icons_444444 sprite;
   1.9.2/master used the blue ui-icons_0078ae sprite (e.g. the alert triangle in info dialogs).
   Restore the blue sprite to match master (the sprite is already vendored). */
.ui-widget-content .ui-icon {
    background-image: url(../js/Libs/jQuery_v3.7.1/Ext/images/ui-icons_0078ae_256x240.png);
}

.ui-widget-header .ui-icon {
    background-image: url(../js/Libs/jQuery_v3.7.1/Ext/images/ui-icons_ffffff_256x240.png);
}

.ui-dialog-titlebar .ui-state-hover:has(.ui-icon-closethick),
.ui-widget-header .ui-state-hover:has(.ui-icon-closethick) {
    border: 1px solid white;
    border-radius: 50%;
    background-color: transparent;
}
.ui-dialog-titlebar .ui-state-hover .ui-icon-closethick,
.ui-widget-header .ui-state-hover .ui-icon-closethick {
    background-image: url(../js/Libs/jQuery_v3.7.1/Ext/images/ui-icons_ffffff_256x240.png);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, 
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    color: #FFFFFF;
}

.ui-dialog {
    padding: 0px;
    /* 1.9.2/master set .ui-dialog{overflow:hidden}; 1.14.2 defaults it to visible. The
       container has a 1rem corner radius, but the titlebar has no own rounding (radius 0),
       so with overflow:visible its sharp top corners stick out over the rounded container.
       overflow:hidden clips every child (titlebar incl.) to the container's rounded corners,
       exactly like master — works for ALL dialog types (Fachfarben, NOEE-Edit, ...). */
    overflow: hidden;
}

.ui-dialog .ui-dialog-buttonpane {
    border-width: 0px;
}

/* jQuery UI 1.14.2: dialog buttons are now <button class="ui-button"> (previously
   <a class="ui-state-default"> in 1.9.2). The existing .ui-state-default overrides no
   longer match on the buttonpane, so restore the Atlantis blue scoped to the dialog. */
.ui-dialog .ui-dialog-buttonpane .ui-button {
    border: 2px solid var(--atlantis-blue);
    background: var(--atlantis-blue);
    color: white;
    border-radius: 1rem;
}

body:not(.isMobile) .ui-dialog .ui-dialog-buttonpane .ui-button:hover:not(:disabled),
.ui-dialog .ui-dialog-buttonpane .ui-button:focus {
    border: 2px solid var(--atlantis-blue-selected);
    background: var(--atlantis-blue-selected);
    outline: none;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:disabled {
    background: #959595;
    border-color: #959595;
    cursor: not-allowed;
}

/* jQuery UI 1.14.2: the close button is now <button class="ui-button"> and inherits the
   default ui-button styling (light background + border). Neutralize it on the dark
   titlebar so only the white close icon stays visible. UI 1.14 no longer sets
   .ui-state-hover on the button widget, so the :has() hover rule above never fires —
   the native :hover/:focus rule below restores the Atlantis white-ring affordance. */
.ui-dialog-titlebar .ui-dialog-titlebar-close.ui-button {
    border: 1px solid transparent;
    background: transparent;
}

/* UI 1.14.2's base theme swaps the close icon to a dark sprite on the button's hover/focus
   state via .ui-button:hover/.ui-button:focus .ui-icon (0,3,0). Since 1.14 auto-focuses the
   close button when the dialog opens, that dark sprite shows immediately on the anthracite
   titlebar (low contrast). swh's generic .ui-widget-header .ui-icon (0,2,0, line above) loses
   to it on specificity. Force the white sprite unconditionally with a (0,3,0) selector that
   matches in every state (default/hover/focus) — like 1.9.2, where the ✕ was always white. */
.ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    background-image: url(../js/Libs/jQuery_v3.7.1/Ext/images/ui-icons_ffffff_256x240.png);
}

/* Restore hover/focus affordance: a white ring around the close icon. :focus is ungated
   (keyboard focus must be visible on every viewport — outline is suppressed, so the ring is
   the only focus cue), :hover is desktop-only like the buttonpane rule above.
   NOTE: under 1.14 the dialog auto-focuses *this* close button on open (1.8.3/master focused
   the dialog container instead), so this ring also shows when the dialog opens — a CSS-only
   :focus/:focus-visible swap can NOT suppress that, because Chromium marks the programmatic
   on-open focus as :focus-visible even after a mouse-driven open (verified headed). Matching
   master's "no ring on open" needs a JS focus-target change in openGeneratingListDialog. */
body:not(.isMobile) .ui-dialog-titlebar .ui-dialog-titlebar-close.ui-button:hover,
.ui-dialog-titlebar .ui-dialog-titlebar-close.ui-button:focus {
    border: 1px solid white;
    border-radius: 50%;
    background: transparent;
    outline: none;
}

li.ui-state-default, li.ui-widget-content li.ui-state-default, li.ui-widget-header li.ui-state-default {
    background: #FFFFFF !important;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited,
ul.ui-tabs-nav .ui-state-active a, ul.ui-tabs-nav .ui-state-active a:link,
body:not(.isMobile) ul.ui-tabs-nav .ui-state-hover a:hover {
    color: grey;
}

.ui-tabs li[role='tab'].ui-state-active a,
.ui-widget-content li.ui-state-active a,
.ui-widget-header li.ui-state-active a {
    border-bottom: 3px solid var(--atlantis-blue);
}

.ui-tabs li[role='tab'].ui-state-active a {
    border-bottom: 0;
    color: var(--atlantis-blue-selected);
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #FFFFFF;
}

/* Tab-widget containers stay borderless (as in 1.9.2). UI 1.14.2's
   .ui-widget.ui-widget-content{border:1px solid #c5c5c5} (0,2,0) would otherwise draw a
   visible frame around #tabs (NOWN, webFormMgmt, inter_anmeld). Match its specificity so
   the borderless rule wins (loaded after the base theme). */
.ui-tabs,
.ui-tabs.ui-widget-content {
    border: 0px;
}

.ui-tabs li[role='tab'] a, .pupilTabItem a {
    border-bottom: 3px solid white;
}

/* pupil_info builds its tab bar by hand (#pupilTabs li.pupilTabItem > a) without the
   .ui-tabs-anchor class. In 1.9.2 the base rule .ui-tabs .ui-tabs-nav li a{padding:.5em 1em}
   gave these anchors their padding; 1.14.2 moved that padding onto .ui-tabs-anchor, so the
   hand-built anchors lost it (nav collapsed 106px -> 72px). Restore the padding explicitly.
   Real UI-tabs anchors already get the same .5em 1em from .ui-tabs-anchor. */
#pupilTabs li.pupilTabItem a {
    /* float (=> display:block) so the vertical padding expands the anchor box, as the
       1.9.2 base did via .ui-tabs .ui-tabs-nav li a{float:left}. Without it the anchor
       stays display:inline and the .5em vertical padding has no effect (nav 72px -> 106px). */
    float: left;
    padding: 0.5em 1em;
}

body:not(.isMobile) .ui-tabs li[role='tab']:hover a,
body:not(.isMobile) .pupilTabItem:hover a{
    border-bottom: 3px solid grey;
}

.ui-tabs li[role='tab'].active a, .pupilTabItem.active a {
    border-bottom: 3px solid var(--atlantis-blue);
}

.ui-tabs .ui-tabs-panel {
    padding: 1rem;
}

.ui-widget-content a {
    color: inherit;
    text-decoration: underline;
}

/* Calender */
.ui-datepicker {
    width: auto;
    padding: 0px;
    border: var(--atlantis-std-border);
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content
.ui-datepicker .ui-state-default,
.ui-datepicker .ui_button_active,
.ui-datepicker .ui-widget-header .ui-state-default {
    background: transparent;
    color: black;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    font-size: 1.4rem;
}

.ui-datepicker .ui-datepicker-calendar {
    border-top: var(--atlantis-std-border);
}

.ui-datepicker .ui-datepicker-calendar thead {
    display: none;
}

.ui-datepicker .ui-datepicker-calendar tbody tr td:nth-child(6) a,
.ui-datepicker .ui-datepicker-calendar tbody tr td:nth-child(7) a{
    color: var(--atlantis-darkgrey);
}

.ui-datepicker a.ui-state-active.ui-state-default {
    border: 2px solid var(--atlantis-blue);
}

.ui-datepicker a.ui-state-default {
    border: 2px solid transparent;
    border-radius: 50%;
}

.ui-datepicker .ui-datepicker-calendar a {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.4rem;
}

.ui-datepicker .ui-datepicker .ui-datepicker-header {
    padding: 0px;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 1.7rem;
    color: grey;
    /* In 1.9.2 the title inherited a fixed 25.2px line-height (1.8 x 14px root); under
       1.14.2 with the restored 1.1rem base font the unitless line-height recomputes against
       the 1.7rem title font (-> ~43px), making the inline datepicker header ~17px taller.
       Pin it to the old value so the calendar keeps its 1.9.2 height. */
    line-height: 1.8rem;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1.5rem;
    border: 0px;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    width: 2rem;
    height: 2rem;
    margin: 0 0.5rem;
    top: 0.8rem;
    font-family: Arial, sans-serif;
    color: var(--atlantis-darkgrey);
    font-size: 2rem;
    text-align: center;
    line-height: 1.2rem;
    background: none;
    border: none;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    display: none; /* hide default jQuery UI icon sprite */
}

.ui-datepicker .ui-datepicker-prev:before {
    content: "‹";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ui-datepicker .ui-datepicker-next:before {
    content: "›";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#left .ui-datepicker select {
    width: unset;
}

.ui-accordion .ui-accordion-header {
    margin-top: 0.75rem;
    font-weight: bold;
}