body {
    font-family: 'EncodeSans';
    background-color: var(--color-white) !important;
    color: var(--color-textprimary);
}

.app-body .main {
    padding-bottom: 50px;
}

h1, .container-fluid h2 span.text-capitalize {
    font-size: 1.35rem;
    font-weight: 600;
    padding: 10px 0 15px 0;
    color: var(--color-highlight);
}

h3 {
    font-size: 24px;
    font-weight: 700;
    padding: 10px 0 15px 0;
    color: var(--color-highlight);
}

@media (min-width: 991.98px) {
    h3 {
        font-size: 36px;
    }
}

.container-fluid h2 span.text-capitalize {
    display: inline-block;
}

/* links & buttons */
a, .btn-link {
    color: var(--color-highlight);
}

a:hover, .btn-link:hover {
    color: var(--color-text-strong);
}

.page-item.active .page-link {

}

table.table-hover tbody tr:hover {
    background-color: rgba(237, 136, 18, .1)
}

.btn-success, .btn-primary {
    background-color: var(--color-highlight) !important;
    border-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.btn-success:hover, .btn-primary:hover {
    background-color: var(--color-hover) !important;
    border-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--color-highlight) !important;
    color: var(--color-highlight) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-primary.active, .btn-check:checked + .btn-outline-primary {
    background-color: var(--color-highlight) !important;
    border-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--color-textprimary);
    color: var(--color-textprimary);
}

.btn-secondary:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
    color: var(--color-hover-invert);
}

/* dialogs */
.swal-button--danger:not([disabled]):hover, .swal-button--danger:not([disabled]) {
    background-color: var(--color-highlight);
}

/* sweetalert (v1, package "sweetalert") injects its own default CSS at runtime with a
   hardcoded white modal/dark text - it has no theme awareness of its own. */
[data-theme="dark"] .swal-modal {
    background-color: var(--color-white);
}
[data-theme="dark"] .swal-title,
[data-theme="dark"] .swal-text {
    color: var(--color-text-strong);
}

/* alerts */
.noty_theme__backstrap.noty_type__success {
    /* background-color: var(--color-highlight); */
}


/* header */
.app-header .logo {
    display: inline-block;
}

.app-header .header-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 991.98px) {
    .sidebar-lg-show .app-header .header-side {
        background-color: var(--color-white);
        padding-right: .6rem;
        border-right: 1px solid var(--color-border-light-1);
        width: 250px !important;
    }
}


.app-header .navbar-brand {
    width: 190px;
}

.app-header.background {
    background: var(--color-topbar);
}

@media (max-width: 991.98px) {
    .navbar-nav .logout {
        display: none;
    }
}

/* below the desktop layout the sidebar is hidden behind the burger button and the header is too
   narrow for the logo - it used to sit behind the search bar (peeking out) and covered the
   theme toggle / help / user icons, so taps hit the logo instead */
@media (max-width: 991.98px) {
    .app-header .navbar-brand {
        display: none;
    }
    .app-header {
        flex-wrap: nowrap;
    }
    .app-header .global-search {
        min-width: 0;
        margin-left: 10px;
        margin-right: 10px;
    }
    .app-header .topbar-actions {
        flex-shrink: 0;
        gap: .75rem;
        padding-right: 20px;
    }
    .app-header .topbar-actions .logout {
        display: none;
    }
}

.navbar-toggler {
    margin-left: 20px;
}

.navbar-toggler:focus, .navbar-toggler:hover {
    text-decoration: none;
    outline: none;
    text-shadow: none;
}

.app-header .navbar-toggler-icon {
    height: 23px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.app-body .sidebar {
    flex: 0 0 250px !important;
}

html:not([dir="rtl"]) .sidebar {
    margin-left: -250px;
}

/* .sidebar > .sidebar-nav already has overflow-y: auto from the theme. On mobile - where
   the sidebar is position:fixed with a capped height - a long menu needs momentum scrolling
   (iOS Safari) and must not chain its scroll to the page underneath once it hits the top/bottom
   of its own list, or a swipe inside the menu ends up scrolling the page behind it instead.
   overscroll-behavior: contain must stay scoped to that mobile case: on desktop the nav
   list commonly has nothing to scroll internally, and a contained scroll container with no
   overflow of its own swallows the wheel event instead of letting it scroll the page. */
@media (max-width: 991.98px) {
    .sidebar > .sidebar-nav {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overflow-y: auto
    }
}

.app-footer {
    display: none;
}

.sidebar .sidebar-nav, .sidebar .nav {
    width: 250px !important;
}

.sidebar .nav-item, .sidebar .nav-item.open, .sidebar .nav-item .nav-dropdown-items .nav-item {
    padding: 1px 0 0 0;
    background: inherit;
}

.sidebar .nav-item .nav-dropdown-items {
    background-color: var(--color-surface-light-1);
}

.sidebar .nav-item .nav-dropdown-items .nav-link {
    background-color: var(--color-surface-light-2);
}

.sidebar .nav-item {
    position: relative;
}

.sidebar .nav-opener {
    position: absolute;
    right: 0px;
    width: 40px;
    height: 35px;
    top: 0;
}

.sidebar .nav-link {
    padding: .5rem 1rem;
}

.sidebar ul ul .nav-link {
    padding-left: 2.2rem;
}

.sidebar ul ul ul .nav-link {
    padding-left: 3.35rem;
}

.custom-sidebar {
}

.custom-sidebar .nav-link {
    background-color: var(--color-surface-light-3);
    color: var(--color-font-nav) !important;
    font-weight: 400;
}

.sidebar .nav-link .nav-icon {
    color: var(--color-font-nav) !important;
    margin-right: .3rem;
    display: none;
}

.sidebar .nav-item .nav-link:hover {
    background-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
    font-weight: 400;
}

.sidebar .nav-link.active .nav-icon {
    color: var(--color-hover-invert) !important;
}

.custom-sidebar.background {
    background-color: var(--color-white);
}

.custom-sidebar ul ul .nav-icon {
    display: none !important;
}

.sidebar .nav-item.user > .nav-link {
    background-color: var(--color-text-strong) !important;
    color: var(--color-white) !important;
    font-weight: 700;
    padding-top: 25px;
    padding-bottom: 25px;
}

.sidebar .nav-item.user > .nav-link .role {
    position: absolute;
    pointer-events: none;
    color: var(--color-highlight) !important;
    font-weight: 700;
}

.sidebar .nav-item.seperator > .nav-link {
    background-color: var(--color-text-strong) !important;
    color: var(--color-white) !important;
    font-weight: 700;
}

/* pinned-to-top nav item (e.g. Dashboard) - a subtle divider to set it apart from the rest */
.sidebar .nav-item.nav-item-pinned-top a {
    border-left: 1px solid var(--color-highlight) !important;
    border-right: 1px solid var(--color-highlight) !important;
}

/* bottom-pinned single item (e.g. "Weitere Module") - set apart as a call to action */
.sidebar .nav-item.nav-item-pinned-bottom {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border-medium);
}

.sidebar .nav-item.nav-item-pinned-bottom > .nav-link {
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--color-highlight2) 14%, transparent) !important;
}

.sidebar .nav-item.nav-item-pinned-bottom > .nav-link .nav-icon {
    color: var(--color-highlight2) !important;
}

.sidebar .nav-item.nav-item-pinned-bottom > .nav-link:hover {
    background-color: var(--color-highlight2) !important;
    color: var(--color-highlight2-invert) !important;
}

.sidebar .nav-item.nav-item-pinned-bottom > .nav-link:hover .nav-icon {
    color: var(--color-highlight2-invert) !important;
}

/* topbar actions (theme toggle, help, account, logout) */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-right: 30px;
}

.topbar-icon-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-highlight2);
    font-size: 1.4rem;
}

button.topbar-icon-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.topbar-icon-btn:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--color-highlight);
}

.theme-toggle-icon-plain {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1500;
}

.userhelp-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    z-index: 1040;
}

.userhelp-backdrop.open {
    display: block;
}

.userhelp-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 90vw;
    background-color: var(--color-white);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.userhelp-panel.open {
    transform: translateX(0);
}

.userhelp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-borderdecent);
    flex-shrink: 0;
}

.userhelp-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-textprimary);
}

.userhelp-panel-close {
    color: var(--color-textprimary);
    font-size: 1.3rem;
}

.userhelp-panel-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    color: var(--color-textprimary);
}

.userhelp-panel-body .markdown h1 {
    font-size: 1.3rem;
}

.userhelp-panel-body .markdown h2 {
    font-size: 1.1rem;
    margin-top: 1.5em;
}

.userhelp-panel-body .markdown ul,
.userhelp-panel-body .markdown ol {
    padding-left: 1.3em;
}

.userhelp-panel-body .markdown code {
    background-color: var(--color-input-alt);
    padding: 1px 4px;
    border-radius: 3px;
}

/* calendar */
.calendar-years {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.calendar-year td {
    vertical-align: top;
}

.calendar {
    border-collapse: separate;
}

.calendar td {
    text-align: center;
    padding: 4px;
}

.calendar td.default {
    background-color: var(--color-surface-light-3);
}

.calendar td.marked {
    background-color: var(--color-highlight);
}

.calendar td.now {
    background-color: var(--color-white);
    border: 2px solid var(--color-textprimary);
}

.calendar table td {
    font-weight: bold;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.calendar-legend-swatch.default {
    background-color: var(--color-surface-light-3);
}

.calendar-legend-swatch.marked {
    background-color: var(--color-highlight);
}

.calendar-legend-swatch.now {
    background-color: var(--color-white);
    border: 2px solid var(--color-textprimary);
}

.bookingdetails .images {
    display: none;
}


/* paging */
.pagination {
    font-size: .9em;
    display: flex;
    justify-content: right;
}

.pagination .flex {
    display: flex;
}

.pagination .inline-flex {
    display: inline-flex;
}

.pagination .item-center {
    align-items: center;
}

.pagination .justify-between {
    justify-content: space-between;
}

.pagination a {
    font-size: .9em;
}

.pagination svg {
    width: 20px;
    height: 20px;
}

/* pagination: one look for DataTables, Laravel links() and the widget pagers (all ul.pagination > .page-item > .page-link) */
ul.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.pagination .page-item {
    margin: 0;
}
ul.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: .3rem !important;
    background: transparent;
    color: var(--color-textprimary);
    font-size: .9rem;
    line-height: 1;
    box-shadow: none;
    transition: background .15s ease, color .15s ease;
}
ul.pagination a.page-link:hover {
    background: color-mix(in srgb, var(--color-highlight) 12%, transparent);
    color: var(--color-highlight);
    text-decoration: none;
}
ul.pagination .page-item.active .page-link {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
}
ul.pagination .page-item.active a.page-link:hover {
    background: var(--color-hover);
    color: var(--color-hover-invert);
}
ul.pagination .page-item.disabled .page-link {
    background: transparent;
    color: var(--color-text-faint-3);
    cursor: default;
    pointer-events: none;
}

/* dasbhoard */

.dashboard-blocks .content {
    /* border: 1px solid var(--color-surface-light-3);
    padding: .4em;*/
}

.dashboard-blocks li {
    list-style: none;
    border: 1px solid var(--color-surface-light-3);
    margin: 0;
    padding: .2em 1em;
    margin-bottom: .2em;
}

@media (min-width: 991.98px) {
    .dashboard-blocks {
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-blocks ul {
        margin: 0;
        padding: 0;
    }

    .dashboard-blocks > div {
        margin-right: 15px;
        width: 375px;
    }
}

/* widgets */
.xdashboard {
    display: block;
}

@media (min-width: 991.98px) {
    .xdashboard {
        display: flex;
        justify-content: space-between;
        gap: .9rem;
    }
}

.xdashboard-3col .connectedSortable {
    width: 33.3%;
}

.xdashboard-3colm #position-0.connectedSortable {
    width: 25%;
}

.xdashboard-3colm #position-1.connectedSortable {
    width: 50%;
}

.xdashboard-3colm #position-2.connectedSortable {
    width: 25%;
}

.xdashboard-2col .connectedSortable {
    width: 50%;
}

.xdashboard-2coll #position-0.connectedSortable {
    width: 67%;
}

.xdashboard-2coll #position-1.connectedSortable {
    width: 33%;
}

.xdashboard-2colr #position-0.connectedSortable {
    width: 33%;
}

.xdashboard-2colr #position-1.connectedSortable {
    width: 67%;
}

.xdashboard-1col .connectedSortable {
    width: 100%;
}

.xdashboard .connectedSortable {
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0 0 20px 0;
    float: left;
}

.xdashboard .connectedSortable > div {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.connectedSortable > div.ui-sortable-placeholder {
    visibility: visible !important;
    margin-bottom: 20px !important;
    background-color: #fcefa1;
}

@media (max-width: 1430px) {
    .xdashboard .connectedSortable {
        width: 100% !important;
    }

    .xdashboard .connectedSortable > div {
        padding: 0 !important;
    }
}


.widget-element.maximized {
    position: fixed;
    inset: 0;
    z-index: 10000;
    margin: 0 !important;
}

.widget-element.maximized .block {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0 !important;
    margin: 0 !important;
}

.widget-element.maximized .widget-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.widget-element.maximized .widget-tools .la-window-maximize {
    display: none;
}

.widget-element.maximized .widget-tools .la-window-restore {
    display: inline-block;
}

.widget-element .widget-tools .la-window-restore {
    display: none;
}

.xdashboard .connectedSortable > div > .block {
    margin-bottom: .9rem;
}

.xdashboard .connectedSortable > div > .block.transparent {
    border: 1px solid transparent;
}

.xdashboard .connectedSortable > div > .block > .content {
    margin-bottom: 0px;
}

.xdashboard .connectedSortable > div > .block > .content > .inner {
    overflow-y: auto;
}

.xdashboardlayout {
    display: none;
}

.xdashboardheader {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: .2rem;
}

#widgetpagetitle {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.xdashboardheader h1 {
    width: 100%;
    padding: 0;
    flex-grow: 1;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

@media (min-width: 1430px) {
    .widgetpages {
        justify-content: center;
    }

    .xdashboardheader h1 {
        width: auto;
        margin: 0;
    }

    .xdashboardlayout {
        display: flex;
        gap: calc(.25rem);
    }
}

.widget-registrationswidget .user-latest > div {
    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-medium);
}

.widget-registrationswidget .user-latest > div:last-child {
    border-bottom: 0;
}

.widget-form label.label {
    font-size: .8rem;
    display: block;
    margin: 10px 0 0 0;
}

.widget-form button {
    font-size: .8rem;
}

.widget-form {
    margin-bottom: 20px;
}

.widget-form input {
    width: 100%;
}

.widget-form input[type=checkbox] {
    width: auto;
}

/* widget lists */
.widget-item-list > div {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-border-medium);
}

.widget-item-list > div:last-child {
    border-bottom: 0;
}

.widget-item-list > div > .more {
    white-space: nowrap;
    text-align: right;
    padding-left: 25px;
}

/* registrations widget: new users waiting for a role */
.rg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: .3rem;
    color: var(--color-textprimary);
    text-decoration: none;
}
.rg-item:hover {
    background: var(--color-surface-light-1);
    color: var(--color-textprimary);
    text-decoration: none;
}
.rg-item .user-avatar {
    flex: none;
}
.rg-text {
    flex: 1 1 0;
    min-width: 0;
}
.rg-name {
    display: block;
    font-weight: var(--font-weight-strong);
    line-height: 1.3;
}
.rg-item:hover .rg-name {
    color: var(--color-highlight);
}
.rg-email, .rg-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
    color: var(--color-text-muted);
}
.rg-action {
    flex: none;
    padding: 2px 12px;
    border: 1px solid var(--color-highlight);
    border-radius: 99px;
    color: var(--color-highlight);
    font-size: .8rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.rg-item:hover .rg-action {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
}

.widget-attributes > div {
    display: flex;
    align-items: stretch;
    margin-bottom: 2px;
}

.widget-attributes > div .icon {
    background-color: var(--color-border-medium);
    border-radius: 4px;
    padding: 0px 5px;
    margin-right: 5px;
}

.widget-attributes > div.value {
    flex-grow: 1;
}

.widget-attributes-new i {
    font-size: 2.4em;
}

.widget-attributes-new > div {
    display: flex;
    margin-bottom: 0.3rem;
    gap: 0.5rem;
}

.widget-attributes-new .data {
}

.widget-attributes-new .label {
    font-weight: bold;
    font-size: .7rem;
    line-height: 1rem;
}

.widget-attributes-new .labelx {
    background-color: var(--color-highlight);
    font-size: .8rem;
    font-weight: bold;
    color: var(--color-white) !important;
    margin-bottom: 0;
    padding: 0px 5px;
    display: block;
    width: min-content;
    white-space: nowrap;
}

/* unified badge/tag: Bootstrap .badge (+ .badge-success etc.) or custom colors via inline style */
.badge {
    padding: .3em .9em;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* no color modifier and no inline color: default highlight color */
.badge:not([class*="badge-"]) {
    background-color: var(--color-highlight);
    color: var(--color-white);
}

a.checked, a.checked:hover {
    background-color: palegreen !important;
}

li.ui-tabs-active.ui-state-active a.checked {
    background-color: #83d983 !important;
}

/* filter */
.customsearchfilter .elements {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.customsearchfilter .elements > div {
    margin-right: 10px;
    min-width: 120px;
}

.customsearchfilter .checkboxes {
    display: flex;
}

.customsearchfilter .checkboxes .checkboxesoptions {

}

.customsearchfilter .checkboxes input {
    margin-right: 3px;
}

.customsearchfilter .checkboxes label {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.customsearchfilter .form-control[type="text"] {
    /*font-size: .8rem;
    padding: .2rem .5rem;*/
    height: auto;
    padding-left: .25rem;
    padding-right: .25rem;
}

.customsearchfilter .filter-advanced {
}

.customsearchfilter span.label {
    font-weight: 600;
}

.customsearchfilter-select2 {
    min-width: 166px;
    max-width: 400px;
}

div.customsearchfilter-range > span, div.customsearchfilter-numberrange > span {
    line-height: 2rem;
}

div.customsearchfilter-range, div.customsearchfilter-numberrange {
    display: flex;
    align-items: stretch;
}

.customsearchfilter-range input, .customsearchfilter-numberrange input {
    max-width: 100px;
    text-align: center;
}

div.customsearchfilter-compare {
    display: flex;
    align-items: stretch;
}

div.customsearchfilter-compare select {
    max-width: 200px;
}

div.customsearchfilter-compare select:nth-child(2) {
    max-width: 40px;
}

/* model files */
.modelfiles-upload-progress {
    margin-top: .75rem;
}

.modelfiles-upload-progress .modelfiles-upload-bar {
    height: .6rem;
    border-radius: .3rem;
}

.modelfiles {
    display: flex;
    flex-wrap: wrap;
}

.modelfiles .modelfile {
    border: 1px solid var(--color-border-medium);
    margin: 0 5px 5px 0;
    text-align: center;
}

.modelfiles .modelfile .modelfileicon {
    font-size: 3rem;
}

.modelfiles .modelfile .modelfileimage {
    max-height: 50px;
    max-width: 200px;
}

.modelfiles .modelfile .modelfileimage-small {
    max-height: 50px;
    max-width: 200px;
}

.modelfiles .modelfile .modelfileimage-medium {
    max-height: 100px;
    max-width: 200px;
}

.modelfiles .modelfile .modelfileimage-large {
    max-height: 150px;
    max-width: 200px;
}

.modelfiles .modelfile .delete {
    float: right;
}

.modelfiles .modelfile .title {
    font-size: .7rem;
    display: block;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 2px;
}

.modelfiles-table {
    width: 100%;
    border-collapse: collapse;
}

.modelfiles-table td {
    border-bottom: 1px solid var(--color-border-light-3);
    padding: 8px 6px;
    vertical-align: top;
}

.modelfiles-table .modelfiles-table-icon {
    width: 50px;
    text-align: center;
}

.modelfiles-table .modelfiles-table-icon img {
    max-width: 100%;
}

.modelfiles-table .modelfiles-table-icon .modelfileicon {
    font-size: 2rem;
}

.modelfiles-table .modelfiles-table-name {
    font-weight: 500;
}

.modelfiles-table .modelfiles-table-name .delete {
    float: right;
}

.modelfiles-table .modelfiles-table-date {
    font-size: .8rem;
    color: var(--color-text-faint-1);
    margin-bottom: 4px;
}

.modelfiles-table .modelfiles-table-commentform {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}

.modelfiles-table .modelfiles-table-comment {
    flex: 1;
}

.table.dataTable th {
    background-color: var(--color-row-tint);
    font-weight: 600;
    font-size: .9rem;
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: none !important;
    background-color: var(--color-row-tint);
}

table.dataTable.table-striped > tbody > tr.odd > * {
    box-shadow: none !important;
}

table.dataTable.table-striped > tbody > tr.event > * {
    box-shadow: none !important;
}

.table-striped tbody tr:nth-of-type(2n) {
    background-color: transparent !important
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: none !important;
}

/* tabs */
.ui-tabs-nav {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.ui-tabs-nav li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ui-tabs-nav li a {
    display: block;
    padding: .5em 1em;
    border: 1px solid var(--color-borderdecent);
    color: var(--color-textprimary);
}

.ui-tabs-nav li a:hover {
    background-color: var(--color-white);
    text-decoration: none;
}

.ui-tabs-nav li.ui-state-active a {
    background-color: var(--color-headers);
}

/* date fields: iOS Safari gives them the width of their content, ignores their height and centres the value,
   so in a flex or grid row they stuck out of the card and overlapped their neighbour */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    height: calc(1.5em + .75rem + 2px);
    line-height: 1.5;
    text-align: left;
}
input[type="date"].form-control::-webkit-date-and-time-value,
input[type="time"].form-control::-webkit-date-and-time-value,
input[type="datetime-local"].form-control::-webkit-date-and-time-value {
    min-height: 1.5em;
    margin: 0;
    text-align: left;
}

/* tables */
.table-compact td {
    padding: 3px 5px;
}

.table-compact th {
    padding: 3px 5px;
}

.table {
    color: var(--color-font-table);
}

/* widgetautocomplete */
.widgetautocomplete .results a {
    padding: 6px 12px;
    display: block;
    cursor: pointer;
}

.widgetautocomplete .results a:hover {
    background-color: #337ab7;
    color: var(--color-white);
    text-decoration: none;
}

.widgetautocomplete .results {
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.widgetautocomplete .results:empty {
    box-shadow: none;
}

/* filedropzone */
.filedropzone {
    padding: 20px;
    border: 3px dashed var(--color-headers);
    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--color-headers);
}

.filedropzone.active {
    border-style: solid;
}

/* fields */
.issue-set-estimated:focus {
    background-color: var(--color-white) !important;
}


/* theme: layout */
html {
    font-size: 14px
}
body {
    font-size: inherit;
}

/* logo */
.app-header .navbar-brand {
    width: 200px;
    justify-content: left;
    padding-left: 30px;
    box-sizing: border-box;
}
.sidebar-lg-show .app-header .navbar-brand {
    padding-left: 20px;
}
@media (max-width: 992px) {
    .app-header .navbar-brand {
        padding-left: 20px;
    }
}
.app-header .logo, .standalone-logo {
    width: 200px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url('images/logo.svg');
    margin-left: 10px;
}
[data-theme="dark"] .app-header .logo, [data-theme="dark"] .standalone-logo {
    background-image: url('images/logodark.svg');
}
.app-branding {
    padding-top: 2rem;
    font-size: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -1rem;
}
.app-branding span {
    display: inline-block;
    width: 90px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url('images/logo.svg');
}
[data-theme="dark"] .app-branding span {
    background-image: url('images/logodark.svg');
}

/* theme: misc */
.btn {
    border-radius: 0 !important;
}
.card {
    box-shadow: var(--shadow-sm);
    border-width: 0;
}
.navbar-toggler {
    margin-left: 0;
    padding-right: 0 !important;
    display: inline-block;
    text-align: right;
}
@media (max-width: 991.98px) {
    .app-header .navbar-toggler {
        margin-left: -3px !important;
    }
}
.navbar-toggler-icon {
    width: 1rem;
}
.badge-widget {
    background-color: var(--color-headers) !important;
}

/* theme: tabs */
.customtabs {
    position: relative;
    margin-bottom: 20px;
    padding: 18px 10px 10px;
    font-size: .8rem;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    border-radius: .3rem;
}

.customtabs .customtabs-header {
    position: absolute;
    left: 20px;
    top: -12px;
    display: flex;
}

.customtabs .customtabs-header a {
    background-color: var(--color-headers);
    color: var(--color-headers-invert);
    padding: .2em 1em;
    border-radius: 5px;
    display: inline-block;
    display: inline-block;
    font-size: .8rem;
    margin-right: 5px;
}

.customtabs .customtabs-header a.active {
    background-color: var(--color-highlight);
    color: var(--color-highlight-invert);
}

.customtabs .customtabs-header a:hover {
    background-color: var(--color-hover);
    color: var(--color-hover-invert);
    text-decoration: none;
}

.customtabs .customtabs-body > div {
    display: none
}

.customtabs .customtabs-body > div.active {
    display: block
}

.customtabs .customtabs-header a {
    border-radius: 0.3rem !important;
}
.customtabs .customtabs-header a {
    background-color: var(--color-headers);
    color: var(--color-text-muted);
}
.customtabs .customtabs-header a {
    border-radius: 0 !important;
}

/* theme: main */
.app-body .main {
    background-color: var(--color-row-tint);
}
.main .container-fluid {
    padding: 0 30px;
}
@media (max-width: 992px) {
    .main .container-fluid {
        padding: 0 20px;
    }
}

/* theme: nav */
.custom-sidebar .nav-link {
    background-color: var(--color-surface-light-4) !important;
}
.sidebar .nav {
    border-right: 1px solid var(--color-border-light-2);
    background-color: var(--color-white);
}
.sidebar .nav-item {
    font-size: .95rem;
}
.sidebar .nav-item.seperator > .nav-link {
    background-color: var(--color-headers) !important;
    color: var(--color-text-strong) !important;
    font-weight: 700;
}
.custom-sidebar .nav-link.active, .sidebar .nav-item .nav-dropdown-items .nav-link.active, .custom-sidebar .nav-link.active {
    background-color: var(--color-topbar) !important;
    color: var(--color-white) !important;
}
.sidebar .nav-item.user > .nav-link {
    background-color: var(--color-headers) !important;
    color: var(--color-text-strong) !important;
}
.sidebar .nav-item .nav-dropdown-items .nav-link {
    background-color: var(--color-white) !important;
}
.sidebar .nav-item .nav-dropdown-items .nav-link:hover {
    background-color: var(--color-hover) !important;
}
.sidebar .nav-item.user .nav-dropdown-items .nav-link {
    background-color: var(--color-headers) !important;
}
.sidebar .nav-item .nav-link.active {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}
.sidebar .nav-item.seperator {
    text-align: right;
}
.sidebar .nav-item.seperator > .nav-link, .sidebar .nav-item.seperator > .nav-link:hover {
    background-color: transparent !important;
    color: var(--color-text-faint-3) !important;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

/* theme: global search */
.global-search {
    margin-left: 30px;
    position: relative;
    flex-grow: 1;
    margin-right: 20px;
    z-index: 100;
}
@media (max-width: 992px) {
    .global-search {
        margin-left: 20px;
    }
}
.global-search-field {
    position: relative;
    display: flex;
    align-items: center;
}
.global-search-icon {
    position: absolute;
    left: .8rem;
    font-size: 1.15rem;
    color: var(--color-text-muted);
    pointer-events: none;
}
.global-search-spinner {
    position: absolute;
    right: .8rem;
    color: var(--color-highlight);
}
.global-search-hint {
    position: absolute;
    right: .6rem;
    padding: 0 .4rem;
    font-size: .75rem;
    line-height: 1.4rem;
    color: var(--color-text-muted);
    background: var(--color-surface-light-1);
    border: 1px solid var(--color-border-light-2);
    border-radius: .25rem;
    box-shadow: none;
    pointer-events: none;
}
.global-search-bar {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
    border: 1px solid transparent !important;
    border-radius: .5rem !important;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s, border-color .15s;
}
.global-search-bar:focus {
    border-color: var(--color-highlight) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-highlight) 18%, transparent) !important;
}
/* the panel sits flush under the field and shares its border, so both read as one element */
.global-search.open .global-search-bar {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}
.global-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-highlight);
    border-top: 1px solid var(--color-border-light-3);
    border-radius: 0 0 .5rem .5rem;
    box-shadow: 0 14px 24px rgba(0, 0, 0, .16);
    overflow: hidden;
}
.global-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--color-border-light-3);
}
.search-filter {
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.search-filter input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.search-filter span {
    display: inline-block;
    padding: .15rem .65rem;
    font-size: .8rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light-2);
    border-radius: 99px;
    transition: background-color .12s, color .12s, border-color .12s;
}
.search-filter:hover span {
    border-color: var(--color-highlight);
}
.search-filter input:checked + span {
    color: var(--color-highlight-invert);
    background-color: var(--color-highlight);
    border-color: var(--color-highlight);
}
.search-filter input:focus-visible + span {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}
/* groups side by side so most searches fit without scrolling */
.global-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .25rem 1rem;
    align-items: start;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem .5rem .75rem;
}
.global-search-results > .search-message {
    grid-column: 1 / -1;
}
.search-result-heading {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    margin-bottom: .15rem;
    border-bottom: 1px solid var(--color-border-light-3);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.search-result-heading .la {
    font-size: 1rem;
    color: var(--color-highlight);
}
.search-result-heading em {
    margin-left: auto;
    font-style: normal;
    font-weight: 400;
}
.search-result-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: .35rem .6rem;
    border-radius: .4rem;
    color: var(--color-text-strong);
    text-decoration: none;
    cursor: pointer;
}
.search-result-item:hover {
    color: var(--color-text-strong);
    text-decoration: none;
}
.search-result-item.active {
    background-color: var(--color-surface-light-4);
    box-shadow: inset 3px 0 0 var(--color-highlight);
}
.search-result-label {
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-result-info {
    font-size: .78rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.global-search-results mark {
    padding: 0;
    color: inherit;
    font-weight: 600;
    background: color-mix(in srgb, var(--color-highlight) 22%, transparent);
    border-radius: 2px;
}
.search-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.6rem 1rem;
    color: var(--color-text-muted);
    font-size: .88rem;
}
.search-message .la {
    font-size: 1.8rem;
    opacity: .6;
}

/* theme: widgets */
.widget-element > .block {
    border-radius: .3rem;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.widget-element .widget-form {
    background-color: var(--color-white);
    border-radius: .3rem;
    box-shadow: var(--shadow-sm);
}
.widget-header {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .4rem .4rem 1rem;
    min-height: 2.5rem;
}

.widget-header .title {
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1;
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-highlight2);
}
.widget-body {
    margin-top: 0;
    background-color: transparent;
    min-height: 75px;
    /* max-height: 1500px; */
    overflow-y: auto;
    padding: 0 1rem 1rem;
}
.widget-body strong {
    font-weight: 600;
}

/* tables in widgets: quiet header, airy rows with fine separators, a hover tint */
.widget-body .table-compact {
    border-collapse: separate;
    border-spacing: 0;
}

.widget-body .table-compact thead th {
    padding: 4px 6px 6px 6px;
    border-top: 0;
    border-bottom: 1px solid var(--color-borderdecent);
    font-size: .7rem;
    font-weight: var(--font-weight-strong);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.widget-body .table-compact tbody td,
.widget-body .table-compact tbody th {
    padding: 7px 6px;
    border-top: 0;
    border-bottom: 1px solid var(--color-border-light-1);
    vertical-align: middle;
}

.widget-body .table-compact tbody tr:last-child > td,
.widget-body .table-compact tbody tr:last-child > th {
    border-bottom: 0;
}

.widget-body .table-compact tbody tr:hover > td,
.widget-body .table-compact tbody tr:hover > th {
    background: var(--color-surface-light-1);
}

.widget-body .table-compact tfoot th, .widget-body .table-compact tfoot td {
    border-top: 1px solid var(--color-borderdecent);
    font-weight: var(--font-weight-strong);
}

.widget-body .table-compact tbody th {
    font-weight: var(--font-weight-strong);
}

.widget-icon {
    display: inline-block;
    background-color: inherit !important;
    opacity: 1;
    font-size: .875rem;
    margin-right: .3rem;
}

.widget-tools {
    margin: .3rem;
    display: flex;
    flex-direction: row-reverse;
}

.widget-icon.widget-color1, .widget-icon.widget-color2, .widget-icon.widget-color3 {
    opacity: .75;
}

@media (hover: hover) {
    .widget-element .widget-tools {
        display: none;
    }

    .widget-element:hover .widget-tools {
        display: flex;
    }
}

.widget-tools a {
    color: var(--color-highlight);
    padding: 0 .2em;
}

.widget-tools a:hover {
    text-decoration: none;
}

.xdashboardlayout .button {
    border-color: var(--color-border-medium);
    color: var(--color-text-faint-2);
}

.xdashboardlayout .button {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.xdashboardlayout .button {
    display: inline-block;
    text-align: center;
    background-color: var(--color-white);
    padding: .2rem .5rem;
    box-shadow: var(--shadow-sm);
    border-radius: .3rem;
    border: 0;
}

.xdashboardlayout .button:hover {
    text-decoration: none;
    color: var(--color-black);
}

.xdashboardlayout a.button.active {
    color: var(--color-black);
}

.xdashboardlayout i {
    font-size: 16px;
}

.widget-element .buttons {
    text-align: right;
}

/* theme: tables */
.dataTables_filter input {
    border-radius: 0;
}
.rounded {
    border-radius: 0 !important;
}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select, .form-control {
    border-radius: 0 !important;
}

/* theme: usernav */
@media (min-width: 992px) {
    .nav-item.user {
        display: none;
    }
}

/* theme: plain layout (login) */
body.app-layout-plain {
    background-color: var(--color-plain-bg) !important;
    background-position: center center;
    background-size: cover;
    background-image: var(--plain-bg-image);
}
body.app-layout-plain .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.app-layout-plain .container > div > div {
    background-color: var(--color-white);
    padding: 2rem 3rem;
    border-radius: .3rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
body.app-layout-plain .container > div > div .card {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
}
body.app-layout-plain .container > div > div .card-body {
    padding: 0;
}
body.app-layout-plain .container > div > div h3 {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem !important;
    text-align: left !important;
}
body.app-layout-plain .standalone-logo {
    width: 120px;
    height: 27px;
    margin: .3rem 0 1rem;
    background-position: left center;
}

/* custom: header logo & buttons */
.app-header .logo {
    width: 160px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    margin: 0;
}

.btn {
    border-radius: 0.3rem !important;
}

.logout.button {
    border: 1px solid var(--color-text-faint-4);
    padding: .3rem 1rem;
    background-color: transparent;
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-text-muted);
    border-radius: 0.3rem !important;
}
.logout.button:hover {
    background-color: transparent;
    color: var(--color-hover-invert);
    text-decoration: none;
}

.app-header .navbar-toggler-icon {
    height: 26px;
    width: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.app-header .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.app-header .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

h1, .container-fluid h2 span.text-capitalize {
    color: var(--color-text-muted);
}

/* custom: navigation */
.sidebar .nav-link {
    padding: .4rem .1rem .4rem .8rem;
}
.sidebar .nav-item.user > .nav-link {
    background-color: var(--color-topbar) !important;
}
.sidebar .nav-item .nav-link {
    color: var(--color-text-muted) !important;
}
.sidebar .nav > .nav-item > .nav-link {
    font-weight: 600 !important;
}
.sidebar .nav-item .nav-link:hover {
    color: var(--color-text-muted);
}
.sidebar .nav-dropdown-toggle::before {
    right: .6rem;
}
.sidebar ul.nav > li:not(.user):first-child {
    border: 1px solid var(--color-highlight) !important;
}
.sidebar .nav-item .nav-link.active {
    background-color: var(--color-highlight) !important;
}
.sidebar .nav-item .nav-dropdown-items .nav-link:hover {
    background-color: var(--color-highlight) !important;
}
.sidebar .nav-link.active .nav-icon {
    color: var(--color-highlight-invert) !important;
}
.sidebar .nav-item .nav-link:hover {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}
.custom-sidebar .nav-link.active, .sidebar .nav-item .nav-dropdown-items .nav-link.active, .custom-sidebar .nav-link.active {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}
.sidebar .nav-item .nav-dropdown-items {
    background-color: var(--color-topbar);
}
.sidebar .nav {
    background-color: var(--color-white);
    padding: 0 .6rem;
    border-right: 1px solid var(--color-border-light-1);
}
.custom-sidebar .nav-link {
    background-color: var(--color-topbar) !important;
    border-bottom: none;
    border-radius: 0.3rem;
    margin-bottom: 2px;
}

/* custom: inputs */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select, .form-control {
    border-radius: 0.3rem !important;
}
.select2.select2-container, .select2-container--bootstrap .select2-selection, .select2-container--default .select2-selection {
    border-radius: 0.3rem !important;
}
.form-group > .btn-group .btn-group button {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.form-group > .btn-group > button {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* select2-bootstrap-theme hardcodes its own selection height/padding (34px), which
   doesn't match this app's .form-control/.btn box model - force the same one Bootstrap
   uses for those, everywhere select2 is used (not just our own autocomplete fields).
   The visible border sits on the outer .select2.select2-container, not on
   .select2-selection itself (border:none - see docs/frontend.md), so the inner height
   must NOT also reserve the 2px border Bootstrap's own formula includes, or the outer
   element's real border adds on top and the whole thing ends up 2px too tall. */
.select2-container--bootstrap .select2-selection--single {
    height: calc(1.5em + .75rem) !important;
    padding: .375rem 1.75rem .375rem .75rem !important;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--multiple {
    min-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--single {
    min-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
    min-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--single .select2-search--inline .select2-search__field {
    min-height: calc(1.5em + .75rem) !important;
}

/* widgets: "add line"/"add related item" row (invoice/salesevent items widgets,
   modelrelated widgets) - a select2 field next to a qty input and/or a button. Some of these
   rows (stock movements, set dissolve) carry more fields than fit on one line in a narrow
   dashboard column - wrap instead of squeezing every field down to unreadable widths. Rows
   short enough to already fit (the common case) are unaffected, since wrapping only kicks in
   once the row actually runs out of space. */
.widget-addrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.widget-addrow input[name="qty"] {
    max-width: 5rem;
    flex: 0 0 auto;
}

/* crud options (columns + filters): every entry a draggable chip, ticked ones highlighted */
.crudoptions-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 12px;
}

.crudoptions-heading {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    color: var(--color-text-muted);
}

.crudoptions ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
}

.crudoptions li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.crudoptions li label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--color-borderdecent);
    border-radius: .3rem;
    cursor: pointer;
}

.crudoptions li label:hover {
    background: var(--color-surface-light-1);
}

.crudoptions li label:has(input[type="checkbox"]:checked) {
    border-color: color-mix(in srgb, var(--color-highlight) 45%, transparent);
    background: color-mix(in srgb, var(--color-highlight) 8%, transparent);
}

.crudoptions li .label {
    flex: 1;
    cursor: pointer;
}

.crudoptions ul.ui-sortable li .label {
    cursor: move;
}

.crudoptions-filters {
    margin-bottom: 12px;
}

.crudoptions li .label .la {
    margin-right: 4px;
    color: var(--color-text-faint-3);
}

.crudoptions li.ui-sortable-helper label {
    box-shadow: var(--shadow-sm);
    background: var(--color-white);
}

.crudexports {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* crud list */
#crudTable_reset_button {
    display: none;
}

/* crud tables */
#crudTable.table td {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .9rem;
}

#crudTable_wrapper .dataTables_scroll {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    margin: .9rem 0;
    border-radius: .3rem;
    overflow: hidden;
}

#crudTable_wrapper .table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: .3rem;
}

#crudTable_wrapper .multiform {
    display: flex;
    gap: .3rem;
}

#crudTable_wrapper #crudTable tr td:first-child {
    padding-bottom: .7rem !important;
    padding-top: .7rem !important;
}

#crudTable_wrapper #crudTable:not(.has-hidden-columns) tr td:first-child {
    padding-top: .7rem !important;
}

#crudTable_wrapper #crudTable td, #crudTable_wrapper #crudTable th {
    line-height: normal;
}

#crudTable_info {
    font-size: .8rem;
}

/* crud list: calmer header, hairline rows, row actions as icons (labels become tooltips, see datatables_logic) */
#crudTable_wrapper .table.dataTable thead th {
    font-size: .7rem;
    font-weight: var(--font-weight-strong);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-borderdecent);
}
#crudTable_wrapper #crudTable tbody td {
    vertical-align: middle;
    border-top: 1px solid var(--color-borderdecent);
}
#crudTable_wrapper #crudTable tbody tr:first-child td {
    border-top: 0;
}
#crudTable td .btn.act-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 2px;
    padding: 0;
    border-radius: .3rem;
    color: var(--color-text-muted);
    font-size: 1rem;
    text-decoration: none;
}
#crudTable td .btn.act-icon i {
    margin: 0;
    font-size: 1.25rem;
}
#crudTable td .btn.act-icon:hover {
    background: color-mix(in srgb, var(--color-highlight) 12%, transparent);
    color: var(--color-highlight);
}
#crudTable td .btn.act-icon.act-danger:hover {
    background: color-mix(in srgb, var(--danger, #df4759) 14%, transparent);
    color: var(--danger, #df4759);
}
#crudTable td .btn.act-icon .act-label {
    display: none;
}

/* forms */
.form-group {
    margin-bottom: .5rem;
}
.form-group > label {
    font-size: 0.85em;
    margin-bottom: .15rem;
}

/* dark mode: core Bootstrap/DataTables/Select2 components that come
   pre-colored (white) from theme.css and aren't touched anywhere else above.
   !important throughout this whole select2 section: select2-bootstrap-theme's own CSS
   loads after app.css and matches these same elements at equal specificity, so a plain
   override loses the tie and the vendor light-mode color silently wins. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .select2-container--bootstrap .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection,
[data-theme="dark"] .select2.select2-container {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

/* theme.css hardcodes ".select2.select2-container" (where the actual visible border of a
   select2 field lives, see docs/frontend.md) to a fixed "!important" navy-at-12%-opacity
   border, which is unaffected by the border-color override above and ends up practically
   invisible against a dark background - replace the whole border, not just its color. */
[data-theme="dark"] .select2.select2-container {
    border: 1px solid var(--color-border-medium) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--color-text-faint-2);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--color-surface-light-1);
}

[data-theme="dark"] .select2-container--bootstrap.select2-container--disabled .select2-selection {
    background-color: var(--color-surface-light-1) !important;
}

/* the selected value's own text (single) and the "type to search" text (multiple) are
   both directly colored by vendor CSS, so they don't just inherit the selection's color
   above - each needs its own override. */
[data-theme="dark"] .select2-selection__rendered,
[data-theme="dark"] .select2-search--inline .select2-search__field {
    color: var(--color-text-strong) !important;
}

[data-theme="dark"] .select2-selection__placeholder {
    color: var(--color-text-faint-2) !important;
}

/* a multi-select's individual selected "chip" tags - vendor CSS hardcodes them to a
   plain white pill regardless of theme. */
[data-theme="dark"] .select2-selection__choice {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-results__option {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
}

/* the search box select2 shows at the top of an open (single-select) dropdown - vendor
   CSS hardcodes it to a plain white input, which stays white in dark mode too. */
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] #crudTable_wrapper .dataTables_scroll,
[data-theme="dark"] .dataTables_wrapper {
    background-color: var(--color-white);
    color: var(--color-text-strong);
}

/* CoreUI/Backstrap theme.css hardcodes a dark navy text color on table-hover,
   unaware of dark mode - override it back to the theme text color */
[data-theme="dark"] .table-hover tbody tr:hover {
    color: var(--color-text-strong);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--color-surface-light-1);
    color: var(--color-text-strong);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--color-border-light-1);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-white);
    color: var(--color-text-strong);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text-strong);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--color-surface-light-1);
    color: var(--color-text-strong);
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background-color: var(--color-white);
    color: var(--color-text-strong);
}

/* CRUD create/update ajax modals (resources/views/crud/modal/create_modal.blade.php,
   update_modal.blade.php) - same rounded/elevated look as the login card
   (body.app-layout-plain .container > div > div above), instead of Bootstrap's flat default. */
.ap-crud-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: .75rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 28px, rgba(0, 0, 0, 0.08) 0px 3px 8px;
}

.ap-crud-modal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border-light-1);
}

.ap-crud-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.ap-crud-modal .modal-body {
    padding: 1.5rem;
}

.ap-crud-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-light-1);
}

/* body: plain surface instead of a grey well with a white card in it; fields in two columns, the ones that
   need room (text areas, editors, tables, fields with a hint) span both; long forms scroll inside the dialog */
.ap-crud-modal .modal-dialog {
    max-width: 680px;
}
.ap-crud-modal .modal-body.bg-light {
    background: transparent !important;
}
.ap-crud-modal .modal-body {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
}
.ap-crud-modal .card {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.ap-crud-modal .card-body {
    padding: 0;
}
.ap-crud-modal .card-body.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin: 0;
}
.ap-crud-modal .card-body.row > .form-group {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin-bottom: 12px;
}
.ap-crud-modal .card-body.row > .form-group:has(textarea, .ck-editor, .note-editor, .tox, table, .repeatable-group, .help-block, input[type="hidden"]:only-child, .checklist) {
    grid-column: 1 / -1;
}
/* a single checkbox sits on the line of the input next to it */
.ap-crud-modal .card-body.row > .form-group:has(input[type="checkbox"]):not(:has(.checklist)) {
    align-self: end;
    padding-bottom: 6px;
}
@media (max-width: 575.98px) {
    .ap-crud-modal .card-body.row {
        grid-template-columns: 1fr;
    }
}

/* the secondary action is quiet next to the primary one (same as "zurücksetzen" in the filter bar) */
.ap-crud-modal .modal-footer .btn-secondary {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-muted);
}
.ap-crud-modal .modal-footer .btn-secondary:hover {
    background: var(--color-surface-light-1);
    color: var(--color-textprimary);
}

.ap-crud-modal .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -.5rem -.5rem -.5rem auto;
    padding: 0;
    border-radius: 50%;
    opacity: .6;
    text-shadow: none;
    color: var(--color-text-strong);
    transition: background-color .15s ease, opacity .15s ease;
}

.ap-crud-modal .close:hover {
    opacity: 1;
    background-color: var(--color-surface-light-1);
}

.modal-backdrop {
    background-color: var(--color-overlay);
}

/* SweetAlert confirm dialog (apConfirm(), see resources/js/apCrudModal.js) - drop its entrance
   pop/fade, shrink the icon + buttons, and match its radius/shadow/backdrop to the CRUD modal
   above (.ap-crud-modal) so the two dialog types read as one consistent design. !important
   because the sweetalert package injects its own <style> tag at runtime, after this stylesheet. */
.swal-overlay {
    background-color: var(--color-overlay) !important;
    transition: none !important;
}

.swal-overlay--show-modal .swal-modal {
    -webkit-animation: none !important;
    animation: none !important;
}

.swal-modal {
    border-radius: .75rem !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 28px, rgba(0, 0, 0, 0.08) 0px 3px 8px !important;
    transition: none !important;
}

.swal-icon {
    width: 48px !important;
    height: 48px !important;
    border-width: 3px !important;
    margin: 12px auto !important;
}

.swal-icon:first-child {
    margin-top: 20px !important;
}

.swal-icon--warning__body {
    width: 3px !important;
    height: 28px !important;
    top: 6px !important;
    margin-left: -1.5px !important;
}

.swal-icon--warning__dot {
    width: 4px !important;
    height: 4px !important;
    margin-left: -2px !important;
    bottom: -7px !important;
}

.swal-footer {
    text-align: right !important;
}

.swal-button {
    border-radius: .3rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: .375rem .75rem !important;
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.swal-button:not(.swal-button--cancel):hover {
    background-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
}

.swal-button--cancel {
    background-color: transparent !important;
    border: 1px solid var(--color-textprimary) !important;
    color: var(--color-textprimary) !important;
}

.swal-button--cancel:hover {
    background-color: var(--color-hover) !important;
    border-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
}

/* Noty flash messages (new Noty({...}).show(), see resources/js/apCrudModal.js and elsewhere) -
   same rounded/shadowed look as the dialogs above, a calmer fade+slide instead of the bouncy
   overshoot entrance, and a smaller/quieter close button. !important on the animation classes
   since noty.css's load order relative to this stylesheet isn't guaranteed. */
.noty_theme__backstrap.noty_bar {
    border: 0;
    border-radius: .75rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 28px, rgba(0, 0, 0, 0.08) 0px 3px 8px;
}

/* new Noty({type: 'info', ...}) (the common "gespeichert"/"gelöscht" confirmations) renders
   .noty_type__info - the vendor theme's own .noty_type__information rule never actually matches
   (Noty builds the class as "noty_type__" + type, i.e. literally "info") and was still the
   theme's generic, non-branded blue. Use the app's actual (per-installation) brand color instead,
   consistent with every other blue accent in the UI, and correct in dark mode for free since the
   variable itself already accounts for it. */
.noty_type__info {
    background-color: var(--color-highlight) !important;
    border-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.noty_theme__backstrap.noty_bar .noty_close_button {
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-shadow: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .15);
    opacity: .8;
}

.noty_theme__backstrap.noty_bar .noty_close_button:hover {
    background-color: rgba(255, 255, 255, .3);
    opacity: 1;
}

.noty_effects_open {
    -webkit-animation: noty_anim_in_soft .2s ease-out !important;
    animation: noty_anim_in_soft .2s ease-out !important;
}

.noty_effects_close {
    -webkit-animation: noty_anim_out_soft .2s ease-in !important;
    animation: noty_anim_out_soft .2s ease-in !important;
}

@keyframes noty_anim_in_soft {
    0% { opacity: 0; transform: translateX(12px); }
    100% { opacity: 1; transform: translateX(0); }
}

@-webkit-keyframes noty_anim_in_soft {
    0% { opacity: 0; -webkit-transform: translateX(12px); }
    100% { opacity: 1; -webkit-transform: translateX(0); }
}

@keyframes noty_anim_out_soft {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(12px); }
}

@-webkit-keyframes noty_anim_out_soft {
    0% { opacity: 1; -webkit-transform: translateX(0); }
    100% { opacity: 0; -webkit-transform: translateX(12px); }
}


/* Bootstrap ".bg-*" utilities ship with !important, and package-registered
   CSS (events.css, finassets.css, ...) loads after app.css — both need
   !important here to actually win in dark mode. */
[data-theme="dark"] .bg-white {
    background-color: var(--color-white) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--color-surface-light-1) !important;
}

[data-theme="dark"] .tab-content,
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--color-border-medium) !important;
}

/* finassets report builder (.fam-section / .fam-page / .fam-section-portfolio) */
[data-theme="dark"] .fam-section,
[data-theme="dark"] .fam-section-element,
[data-theme="dark"] .fam-page,
[data-theme="dark"] .fam-section-portfolio {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
}

/* workflow builder canvas (resources/views/workflow/partials/diagram.blade.php) */
[data-theme="dark"] .wfb-canvas {
    background-color: var(--color-white) !important;
}

/* round user picture or initials, markup: resources/views/partials/user-avatar.blade.php (used by the sales board, the ticket
   board and the mindmap editor). Optional ring: --avatar-ring (colour), see the partial's 'ring'. */
.user-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-borderdecent);
    color: var(--color-text-muted);
    font-size: .85em;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 0 0 var(--avatar-ring-width, 2px) var(--avatar-ring, transparent);
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-avatar.user-avatar-sm {
    width: 20px;
    height: 20px;
    font-size: .6em;
}


/* widget pages: page tabs with in-place rename (resources/views/widgets/index.blade.php) */
.widgetpages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    flex-grow: 1;
}

.widgetpage-tab {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    min-height: 2rem;
    padding: .2rem .7rem;
    border-radius: .4rem;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-faint-2);
    white-space: nowrap;
}

a.widgetpage-tab:hover {
    color: var(--color-text-strong);
    text-decoration: none;
}

.widgetpage-tab.active {
    gap: 0;
    padding-right: .35rem;
    background-color: var(--color-highlight);
    color: var(--color-highlight-invert);
    font-weight: 600;
}

.widgetpage-tab.active .widgetpage-action {
    color: var(--color-highlight-invert);
}

.widgetpage-tab.active .widgetpage-action:hover, .widgetpage-tab.active .widgetpage-action:focus {
    background-color: rgba(255, 255, 255, .2);
    color: var(--color-highlight-invert);
}

.widgetpage-tab[hidden] {
    display: none;
}

.widgetpage-label {
    margin-right: .5rem;
    cursor: text;
}

.widgetpage-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.6rem;
    padding: 0 .25rem;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--color-text-faint-2);
    font-weight: normal;
}

.widgetpage-action + .widgetpage-action {
    margin-left: -.15rem;
}

.widgetpage-action:hover, .widgetpage-action:focus {
    background-color: var(--color-surface-light-1);
    color: var(--color-text-strong);
    text-decoration: none;
}

.widgetpage-rename {
    padding: .15rem .25rem;
    box-shadow: 0 0 0 2px var(--color-highlight), var(--shadow-sm);
}

.widgetpage-rename input {
    min-width: 6rem;
    max-width: 20rem;
    padding: .1rem .4rem;
    border: 0;
    border-radius: .25rem;
    background-color: var(--color-input-alt);
    color: var(--color-text-strong);
    font-weight: 600;
    outline: none;
}

.widgetpage-add {
    padding: .2rem .55rem;
}

.widgetpage-add i, .xdashboardlayout .widget-add-button i {
    font-size: 16px;
}

.xdashboardlayout .widget-add-button {
    min-height: 2rem;
}

.layout-dropdown {
    position: relative;
}

.xdashboardlayout .layout-dropdown > summary.button {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.layout-dropdown > summary::-webkit-details-marker {
    display: none;
}

.layout-dropdown-menu {
    position: absolute;
    top: calc(100% - 3px);
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    padding: .2rem 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    border-radius: .3rem;
}

.xdashboardlayout .layout-dropdown-menu .button {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    white-space: nowrap;
    text-align: left;
    box-shadow: none;
    border-radius: 0;
}

.xdashboardlayout .widget-add-button {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    cursor: pointer;
}

/* a widget just added (redirect to #widget-<id>) flashes once */
.widget-element:target > .block {
    animation: widget-added 2.4s ease-out;
}

@keyframes widget-added {
    0%, 30% { box-shadow: 0 0 0 3px var(--color-highlight); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* tile catalog: the module selection (resources/views/admin/modules.blade.php) and the widget
   selection dialog (resources/views/widgets/catalog.blade.php) share this look */
.modules-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modules-toolbar .modules-search {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.modules-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.modules-chip {
    border: 1px solid var(--color-border-medium);
    background: var(--color-white);
    color: var(--color-textprimary);
    border-radius: 2rem;
    padding: 0.25rem 0.85rem;
    font-size: 0.825rem;
    cursor: pointer;
    transition: all .15s;
}

.modules-chip:hover {
    border-color: var(--color-highlight);
    color: var(--color-highlight);
}

.modules-chip.active.tone-b {
    background: var(--color-highlight2);
    border-color: var(--color-highlight2);
    color: var(--color-highlight2-invert);
}

.modules-chip.active {
    background: var(--color-highlight);
    border-color: var(--color-highlight);
    color: var(--color-highlight-invert);
}

.modules-summary {
    color: var(--color-text-muted);
    margin-left: auto;
    font-size: 0.875rem;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 1.25rem;
}

.module-tile {
    --accent: var(--color-highlight);
    --accent-invert: var(--color-highlight-invert);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    color: var(--color-textprimary);
    border: 1px solid var(--color-border-light-2);
    border-radius: 0.75rem;
    padding: 1.4rem 1.4rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.module-tile.tone-b {
    --accent: var(--color-highlight2);
    --accent-invert: var(--color-highlight2-invert);
}

.module-tile.module-inactive, .module-tile.module-selectable {
    cursor: pointer;
}

.module-tile.module-inactive:hover,
.module-tile.module-inactive:focus,
.module-tile.module-selectable:hover,
.module-tile.module-selectable:focus {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 25%, transparent);
    outline: none;
}

.module-tile.module-active {
    border-color: var(--accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--color-white)) 0%, var(--color-white) 60%);
}

.module-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.module-icon {
    flex: 0 0 auto;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    background: var(--color-surface-light-2);
    color: var(--color-text-muted);
}

.module-active .module-icon {
    background: var(--accent);
    color: var(--accent-invert);
}

.module-inactive:hover .module-icon,
.module-inactive:focus .module-icon,
.module-selectable:hover .module-icon,
.module-selectable:focus .module-icon {
    background: var(--accent);
    color: var(--accent-invert);
}

.module-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: var(--color-text-strong);
}

.module-category {
    color: var(--accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.module-description {
    flex: 1 1 auto;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.module-deps {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    border-top: 1px dashed var(--color-border-medium);
    padding-top: 0.7rem;
    margin-bottom: 0.9rem;
}

.module-deps i {
    margin-right: 0.3rem;
}

.module-deps .module-dep-missing {
    color: var(--color-highlight2);
    font-weight: 600;
}

.module-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
}

.module-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 2rem;
}

.module-status.on {
    background: var(--accent);
    color: var(--accent-invert);
}

.module-status.off {
    background: var(--color-surface-light-2);
    color: var(--color-text-muted);
}

.module-request {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0;
    transition: opacity .15s;
}

.module-tile.module-inactive:hover .module-request,
.module-tile.module-inactive:focus .module-request,
.module-tile.module-selectable:hover .module-request,
.module-tile.module-selectable:focus .module-request,
.module-tile.requested .module-request {
    opacity: 1;
}

.modules-empty {
    display: none;
    text-align: center;
    padding: 3rem 0;
    color: var(--color-text-muted);
}

/* widget selection dialog (resources/views/widgets/catalog.blade.php, resources/js/widgetCatalog.js) */
.widget-catalog .modal-dialog {
    max-width: 1280px;
}

.widget-catalog .modal-content {
    height: min(860px, calc(100vh - 3.5rem));
}

.widget-catalog .modal-header {
}

.widget-catalog .modules-toolbar {
    margin: 0;
    padding: .6rem 1.25rem;
    gap: .5rem 1rem;
    border-bottom: 1px solid var(--color-border-light-1);
}

.widget-catalog .modules-toolbar .modules-search {
    flex: 0 1 14rem;
}

.widget-catalog .modules-chips {
    flex: 1 1 24rem;
    gap: .3rem;
}

.widget-catalog .modules-chip {
    padding: .1rem .65rem;
    font-size: .8rem;
}

.widget-catalog .modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.widget-catalog .modules-grid {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .75rem;
}

.widget-catalog .module-tile {
    width: 100%;
    font: inherit;
    text-align: left;
    padding: .8rem .9rem;
    border-radius: .6rem;
    transition: none;
}

.widget-catalog .module-tile:hover, .widget-catalog .module-tile:focus {
    transform: none;
}

.widget-catalog .module-head {
    gap: .65rem;
    margin-bottom: .5rem;
}

.widget-catalog .module-names {
    flex: 1 1 auto;
    min-width: 0;
}

.widget-catalog .module-icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.4rem;
    border-radius: .6rem;
}

.widget-catalog .module-title {
    font-size: 1rem;
}

.widget-catalog .module-category {
    font-size: .7rem;
}

.widget-catalog .module-description {
    font-size: .85rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.widget-catalog .module-foot {
    flex: 0 0 auto;
    min-height: 0;
    gap: .4rem;
}

.widget-catalog .module-status {
    padding: .1rem .45rem;
}

.widget-catalog .module-request {
    font-size: 1.1rem;
    line-height: 1;
}

.widget-catalog .modules-chip.empty {
    opacity: .4;
}

.widget-catalog .module-tile[hidden] {
    display: none;
}

.widget-catalog .module-tile.adding {
    opacity: .6;
    pointer-events: none;
}

.widget-catalog .modules-empty:not([hidden]) {
    display: block;
}

/* crud list: title row with the create button, filter panel as a quiet toolbar */
.crud-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}
.crud-head-actions {
    display: flex;
    gap: 8px;
}
.crud-toolbar .customtabs {
    padding: 10px 14px 12px;
    margin-bottom: 14px;
}
.crud-toolbar .customtabs .customtabs-header {
    position: static;
    margin-bottom: 10px;
    gap: 4px;
}
.crud-toolbar .customtabs .customtabs-header a {
    padding: .15em .8em;
    border-radius: 99px !important;
    margin: 0;
    background: transparent;
    color: var(--color-text-muted);
}
.crud-toolbar .customtabs .customtabs-header a:hover {
    background: var(--color-surface-light-1);
    color: var(--color-textprimary);
}
.crud-toolbar .customtabs .customtabs-header a.active {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
}
.crud-toolbar .customsearchfilter form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
}
.crud-toolbar .customsearchfilter .elements {
    margin-bottom: 0;
    gap: 8px 10px;
}
.crud-toolbar .customsearchfilter .elements > div {
    margin-right: 0;
}
.crud-toolbar .customsearchfilter span.label {
    display: block;
    margin-bottom: 2px;
    font-size: .75rem;
    font-weight: normal;
    color: var(--color-text-muted);
}
.crud-toolbar .customsearchfilter .filter-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}
.crud-toolbar .customsearchfilter .filter-actions .btn {
    margin: 0;
    /* same fixed height as the fields next to them (see .form-control below) */
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .9rem;
    line-height: 1;
}
.crud-toolbar .customsearchfilter .filter-actions .btn-secondary {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-muted);
}
.crud-toolbar .customsearchfilter .filter-actions .btn-secondary:hover {
    background: var(--color-surface-light-1);
    color: var(--color-textprimary);
}

/* crud list: collapsible filter panel, active filter chips, bulk bar, empty state */
.crud-toolbar.collapsed .customtabs-body {
    display: none;
}
.crud-toolbar.collapsed .customtabs {
    padding-bottom: 10px;
}
.crud-toolbar.collapsed .customtabs .customtabs-header {
    margin-bottom: 0;
}
.crud-toolbar.collapsed .customtabs .customtabs-header a.active {
    background: transparent;
    color: var(--color-text-muted);
}
.crud-filter-count {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .35em;
    border-radius: 99px;
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
    font-size: .7rem;
    text-align: center;
}
.active .crud-filter-count {
    background: var(--color-highlight-invert);
    color: var(--color-highlight);
}
.crud-toolbar.collapsed .active .crud-filter-count {
    background: var(--color-highlight);
    color: var(--color-highlight-invert);
}
.crud-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.crud-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--color-highlight) 12%, transparent);
    color: var(--color-textprimary);
    font-size: .8rem;
    text-decoration: none;
}
.crud-chip:hover {
    background: color-mix(in srgb, var(--color-highlight) 22%, transparent);
    color: var(--color-textprimary);
    text-decoration: none;
}
.crud-chip-label {
    color: var(--color-text-muted);
}
.crud-chip .la {
    color: var(--color-text-muted);
}
.crud-chip-reset {
    font-size: .8rem;
}
#bottom_buttons.crud-bulkbar {
    display: none;
    position: sticky;
    bottom: 12px;
    z-index: 5;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    border-radius: .3rem;
    background: var(--color-white);
    box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-highlight);
}
#bottom_buttons.crud-bulkbar.active {
    display: flex;
}
.crud-bulk-count {
    font-weight: var(--font-weight-strong);
    white-space: nowrap;
}
.crud-empty {
    padding: 36px 0;
    text-align: center;
    color: var(--color-text-muted);
}
.crud-empty .la {
    display: block;
    margin-bottom: 6px;
    font-size: 40px;
    color: var(--color-text-faint-3);
}

.crud-toolbar .customsearchfilter .form-control {
    height: 34px;
}

.resultlist-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* detail pages: one centered, narrow column with back link and title (news, samples, worksupplies, wiki, booking) */
.detail-page {
    max-width: 760px;
    margin: 0 auto;
    overflow-wrap: anywhere;
}
.detail-back {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
}
.detail-title {
    margin: 4px 0 20px 0;
    font-size: 30px;
    font-weight: var(--font-weight-strong);
    line-height: 1.2;
}

/* detail pages: gallery, meta line, cards with facts / tags / files */
.detail-meta {
    margin: -10px 0 20px 0;
    font-size: .85rem;
    color: var(--color-text-muted);
}
.detail-gallery {
    margin: 0 0 20px 0;
}
.detail-gallery-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: .3rem;
    background: var(--color-surface-light-1);
    cursor: zoom-in;
}
.detail-gallery-hero img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.detail-gallery-caption {
    margin-top: 6px;
    font-size: .85rem;
    color: var(--color-text-muted);
}
.detail-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    margin-top: 6px;
}
.detail-gallery-thumbs a {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: .3rem;
    background: var(--color-surface-light-1);
}
.detail-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.detail-gallery-thumbs a:hover img {
    transform: scale(1.05);
}
.detail-card {
    margin-bottom: 16px;
    padding: 18px 22px;
    border-radius: .3rem;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.detail-richtext {
    line-height: 1.6;
}
.detail-richtext img {
    max-width: 100%;
    height: auto;
}
.detail-facts {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 10px 24px;
    margin: 0;
}
.detail-facts dt {
    padding-top: 2px;
    font-size: .8rem;
    font-weight: normal;
    color: var(--color-text-muted);
}
.detail-facts dd {
    margin: 0;
}
@media (max-width: 575.98px) {
    .detail-facts {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .detail-facts dd {
        margin-bottom: 10px;
    }
}
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.detail-tags span {
    padding: 1px 10px;
    border-radius: 99px;
    background: var(--color-surface-light-1);
    font-size: .85rem;
}
.detail-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
}
.detail-file .la {
    font-size: 28px;
    color: var(--color-text-muted);
}
.detail-file-name {
    flex: 1 1 0;
    min-width: 0;
}
.detail-richtext > :last-child {
    margin-bottom: 0;
}

/* totals row of a crud table (see crud.sums in datatables_logic) */
#crudTable_wrapper tfoot th {
    padding: .5rem;
    border-top: 1px solid var(--color-borderdecent);
    background: var(--color-row-tint);
    font-size: .9rem;
    font-weight: var(--font-weight-strong);
    vertical-align: top;
    white-space: nowrap;
}
#crudTable_wrapper tfoot .crud-sum-title {
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* The list wrapper (.dataTables_scroll) already carries the card look. The tables inside came with their own
   shadow + border + radius from the markup (rounded shadow-xs border-xs): their shadow was clipped at the wrapper's
   edge (broken corners) and their bottom border added a second line under the header and above the totals row. */
#crudTable_wrapper .dataTables_scroll table.table {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* result lists (V_BOX, recipes, picture database, work supplies): a grid of cards - pictures on top as a collage of
   up to four, tags, title, "Details"; the whole card is one link (the Details button covers it) */
.resultlist-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.resultlist-blocks > .single {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: .3rem;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.resultlist-blocks > .single:hover {
    box-shadow: 0 0 0 2px var(--color-highlight), var(--shadow-sm);
}
.resultlist-blocks .images {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: var(--color-surface-light-1);
}
.resultlist-blocks .images .image {
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: none;
}
.resultlist-blocks .images .image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
}
/* one picture fills the area, two share it, three: one tall + two small, more: the first four in a square */
.resultlist-blocks .images .image:only-child,
.resultlist-blocks .images-2 .image,
.resultlist-blocks .images-3 .image:first-child {
    grid-row: 1 / -1;
}
.resultlist-blocks .images .image:only-child {
    grid-column: 1 / -1;
}
.resultlist-blocks .images .image:nth-child(n+5) {
    display: none;
}
.resultlist-tagslike {
    order: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px 0 16px;
}
.resultlist-tagslike .elements {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.resultlist-tagslike .elements span {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 99px;
    background: var(--color-surface-light-1);
    color: var(--color-textprimary);
    font-size: .8rem;
    line-height: 1.2;
}
.resultlist-tagslike .like {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-sm);
    color: var(--color-highlight);
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
}
.resultlist-blocks .actions {
    order: 3;
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    padding: 6px 16px 14px 16px;
}
.resultlist-blocks .actions .btn {
    align-self: flex-end;
}
.resultlist-blocks .single h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--font-weight-strong);
    line-height: 1.3;
    color: var(--color-highlight);
}
.resultlist-blocks .single h2 a {
    position: relative;
    z-index: 2;
    margin-left: 4px;
    color: var(--color-text-muted);
    font-size: .95rem;
}
.resultlist-blocks .actions .btn,
.resultlist-blocks .actions .btn:hover,
.resultlist-blocks .actions .btn:focus {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent !important;
    color: var(--color-highlight) !important;
    font-size: .9rem;
    white-space: nowrap;
}
.resultlist-blocks .actions .btn::after {
    content: " \2192";
}
.resultlist-blocks .actions .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}