/*
 * SIMPEL modern Windows theme
 * Keeps the legacy Metro/Windows information architecture while softening
 * color, spacing, borders, and page transitions. Business views stay intact.
 */

body {
    --simpel-accent: #6f9270;
    --simpel-accent-strong: #527154;
    --simpel-accent-soft: #e9f0e9;
    --simpel-surface: #ffffff;
    --simpel-surface-muted: #f4f7f9;
    --simpel-border: #dce3e8;
    --simpel-text: #34424c;
    --simpel-text-muted: #6c7a84;
    --simpel-panel-info-background: #eaf3f7;
    --simpel-panel-info-border: #c9dde7;
    --simpel-panel-info-color: #426f87;
    --simpel-label-success-background: #e7f3e4;
    --simpel-label-success-border: #c8dfc0;
    --simpel-label-success-color: #4f7548;
    --simpel-label-warning-background: #fbf3df;
    --simpel-label-warning-border: #ead9aa;
    --simpel-label-warning-color: #82672f;
    --simpel-label-danger-background: #f8e8e8;
    --simpel-label-danger-border: #e7c6c6;
    --simpel-label-danger-color: #945454;
    --simpel-label-neutral-background: #edf1f3;
    --simpel-label-neutral-border: #d4dde2;
    --simpel-label-neutral-color: #56636c;
    --simpel-label-purple-background: #f0ebf5;
    --simpel-label-purple-border: #d9cde5;
    --simpel-label-purple-color: #70588a;
}

body.theme-red { --simpel-accent: #b86f72; --simpel-accent-strong: #945659; --simpel-accent-soft: #f5e9ea; }
body.theme-orange { --simpel-accent: #bd895f; --simpel-accent-strong: #956a48; --simpel-accent-soft: #f7eee6; }
body.theme-green { --simpel-accent: #6f9478; --simpel-accent-strong: #55745d; --simpel-accent-soft: #eaf1ec; }
body.theme-brown { --simpel-accent: #927b6d; --simpel-accent-strong: #705d52; --simpel-accent-soft: #f1ece9; }
body.theme-blue { --simpel-accent: #6689ad; --simpel-accent-strong: #4e6d8d; --simpel-accent-soft: #e9eff5; }
body.theme-lime { --simpel-accent: #879963; --simpel-accent-strong: #69784b; --simpel-accent-soft: #f0f3e8; }
body.theme-teal { --simpel-accent: #57918e; --simpel-accent-strong: #41716f; --simpel-accent-soft: #e7f1f0; }
body.theme-purple { --simpel-accent: #8777a8; --simpel-accent-strong: #695b87; --simpel-accent-soft: #efecf4; }
body.theme-pink { --simpel-accent: #ae7d96; --simpel-accent-strong: #8c6078; --simpel-accent-soft: #f5ebf0; }
body.theme-magenta { --simpel-accent: #9776a4; --simpel-accent-strong: #765981; --simpel-accent-soft: #f1ebf3; }
body.theme-grey { --simpel-accent: #7e8991; --simpel-accent-strong: #606b73; --simpel-accent-soft: #edf0f2; }
body.theme-darkblue { --simpel-accent: #5c7089; --simpel-accent-strong: #44566c; --simpel-accent-soft: #e9edf2; }
body.theme-lightred { --simpel-accent: #c28182; --simpel-accent-strong: #9d6263; --simpel-accent-soft: #f7ecec; }
body.theme-lightgrey { --simpel-accent: #939da5; --simpel-accent-strong: #727d85; --simpel-accent-soft: #f0f2f4; }
body.theme-satblue { --simpel-accent: #628399; --simpel-accent-strong: #496879; --simpel-accent-soft: #e9f0f3; }
body.theme-satgreen { --simpel-accent: #719473; --simpel-accent-strong: #557257; --simpel-accent-soft: #eaf1ea; }

body.simpel-modern-shell {
    background: var(--simpel-surface-muted);
    color: var(--simpel-text);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

body.login.simpel-modern-shell {
    background: linear-gradient(135deg, #eef3f5 0%, #e7eeef 100%);
}

.simpel-modern-shell .wrapper > h1 a {
    color: var(--simpel-accent-strong);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
}

.simpel-modern-shell .wrapper .login-body {
    background: #fff;
    border: 1px solid var(--simpel-border);
    border-radius: 3px;
    box-shadow: 0 16px 42px rgba(42, 55, 65, .14);
}

.simpel-modern-shell .wrapper .login-body h2 {
    background: var(--simpel-accent-strong);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
}

.simpel-modern-shell #container-header,
.simpel-modern-shell #logo-header,
.simpel-modern-shell #navigation {
    background: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell #container-header {
    border: 0;
}

.simpel-modern-shell #logo-header {
    min-height: 64px;
}

.simpel-modern-shell #logo-header .logo {
    color: #fff;
}

.simpel-modern-shell #logo-header .headtitle {
    font-weight: 400;
    letter-spacing: .1px;
    line-height: 1.05;
}

.simpel-modern-shell #logo-header .headtitle span {
    color: rgba(255, 255, 255, .88);
    font-weight: 400;
}

.simpel-modern-shell #logo-header .form-control {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: none;
    color: var(--simpel-text);
}

.simpel-modern-shell #navigation {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(23, 32, 37, .14) 100%),
        var(--simpel-accent-strong) !important;
    border-bottom: 1px solid rgba(27, 37, 43, .28);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 4px 12px rgba(35, 47, 56, .22);
}

.simpel-modern-shell #navigation .main-nav > li > a,
.simpel-modern-shell #navigation .toggle-nav,
.simpel-modern-shell #navigation .user .icon-nav > li > a,
.simpel-modern-shell #navigation .user .dropdown > a {
    color: rgba(255, 255, 255, .9);
    transition: background-color 150ms ease, color 150ms ease;
}

.simpel-modern-shell #navigation .main-nav > li > a:hover,
.simpel-modern-shell #navigation .main-nav > li.open > a,
.simpel-modern-shell #navigation .main-nav > li.active > a,
.simpel-modern-shell #navigation .toggle-nav:hover,
.simpel-modern-shell #navigation .user .icon-nav > li > a:hover,
.simpel-modern-shell #navigation .user .dropdown.open > a,
.simpel-modern-shell #navigation .user .dropdown > a:hover {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff;
}

/* Theme CSS colors the open user dropdown on the li itself. Reset that legacy
 * layer as well as its link so notification hover/open states stay coherent. */
.simpel-modern-shell #navigation .user .icon-nav > li:hover,
.simpel-modern-shell #navigation .user .dropdown.open {
    background: rgba(255, 255, 255, .16) !important;
}

.simpel-modern-shell #navigation .user .icon-nav > li:hover > a,
.simpel-modern-shell #navigation .user .dropdown.open > a,
.simpel-modern-shell #navigation .user .dropdown.open > a:hover,
.simpel-modern-shell #navigation .user .dropdown.open > a:focus {
    background: transparent !important;
    color: #fff !important;
}

.simpel-modern-shell #navigation .dropdown-menu {
    background: var(--simpel-surface) !important;
    border: 1px solid var(--simpel-border);
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(42, 55, 65, .16);
    padding: 5px 0;
}

.simpel-modern-shell #navigation .dropdown-menu > li > a {
    color: var(--simpel-text);
    padding-bottom: 8px;
    padding-top: 8px;
}

/* Bootstrap Datepicker keeps the square legacy geometry, but its selected,
 * today, and hover states follow the modern soft palette. */
.simpel-modern-shell .datepicker.datepicker-dropdown {
    background: var(--simpel-surface);
    border: 1px solid var(--simpel-border);
    border-radius: 0;
    box-shadow: 0 10px 24px rgba(42, 55, 65, .16);
    color: var(--simpel-text);
}

.simpel-modern-shell .datepicker.datepicker-dropdown th.switch,
.simpel-modern-shell .datepicker.datepicker-dropdown th.prev,
.simpel-modern-shell .datepicker.datepicker-dropdown th.next {
    color: var(--simpel-accent-strong);
}

.simpel-modern-shell .datepicker.datepicker-dropdown th.switch:hover,
.simpel-modern-shell .datepicker.datepicker-dropdown th.prev:hover,
.simpel-modern-shell .datepicker.datepicker-dropdown th.next:hover,
.simpel-modern-shell .datepicker.datepicker-dropdown table tr td.day:not(.disabled):hover,
.simpel-modern-shell .datepicker.datepicker-dropdown table tr td span:not(.disabled):hover {
    background: var(--simpel-accent-soft) !important;
    color: var(--simpel-text) !important;
}

.simpel-modern-shell .datepicker.datepicker-dropdown table tr td.today:not(.active),
.simpel-modern-shell .datepicker.datepicker-dropdown table tr td.today:not(.active):hover {
    background: var(--simpel-label-warning-background) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--simpel-label-warning-border);
    color: var(--simpel-label-warning-color) !important;
    text-shadow: none;
}

.simpel-modern-shell .datepicker.datepicker-dropdown .datepicker-days .active,
.simpel-modern-shell .datepicker.datepicker-dropdown .datepicker-years .active,
.simpel-modern-shell .datepicker.datepicker-dropdown .datepicker-months .active,
.simpel-modern-shell .datepicker.datepicker-dropdown .datepicker-days .active:hover,
.simpel-modern-shell .datepicker.datepicker-dropdown .datepicker-years .active:hover,
.simpel-modern-shell .datepicker.datepicker-dropdown .datepicker-months .active:hover {
    background: var(--simpel-accent-soft) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--simpel-accent);
    color: var(--simpel-text) !important;
    text-shadow: none;
}

.simpel-modern-shell .datepicker.datepicker-dropdown table tr td.old,
.simpel-modern-shell .datepicker.datepicker-dropdown table tr td.new,
.simpel-modern-shell .datepicker.datepicker-dropdown table tr td.disabled,
.simpel-modern-shell .datepicker.datepicker-dropdown table tr td span.disabled {
    color: var(--simpel-text-muted) !important;
    opacity: .62;
}

.simpel-modern-shell #navigation .dropdown-menu > li > a:hover,
.simpel-modern-shell #navigation .dropdown-menu > li.active > a {
    background: var(--simpel-accent-soft) !important;
    color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell #navigation .main-nav .dropdown-menu > li > a:hover,
.simpel-modern-shell #navigation .main-nav .dropdown-menu > li > a:focus,
.simpel-modern-shell #navigation .main-nav .dropdown-menu > li.open > a,
.simpel-modern-shell #navigation .main-nav .dropdown-menu > li.active > a,
.simpel-modern-shell #navigation .main-nav .dropdown-menu > li.dropdown-submenu:hover > a,
.simpel-modern-shell #navigation .main-nav .dropdown-menu > li.dropdown-submenu:focus > a {
    background: var(--simpel-accent-soft) !important;
    color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell #navigation .main-nav .dropdown-menu > li.active > a {
    box-shadow: inset 3px 0 0 var(--simpel-accent);
}

.simpel-modern-shell #navigation .main-nav .dropdown-menu > li.dropdown-submenu .dropdown-menu {
    border-color: var(--simpel-border) !important;
    border-top-color: var(--simpel-accent) !important;
}

.simpel-modern-shell #navigation .main-nav .dropdown-menu .dropdown-submenu > a::after {
    border-left-color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell #navigation .main-nav .dropdown-menu .dropdown-submenu.active:hover::after {
    border-left-color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell #content {
    background: var(--simpel-surface-muted);
}

.simpel-modern-shell #left {
    background: #f8fafb;
    border-right: 1px solid var(--simpel-border);
}

.simpel-modern-shell #left.sidebar-fixed,
.simpel-modern-shell #left.mobile-show {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.simpel-modern-shell #left .search-pane {
    background: #fff;
    border-bottom: 1px solid var(--simpel-border);
}

.simpel-modern-shell #left .search-pane input {
    background: #fff;
    color: var(--simpel-text);
}

.simpel-modern-shell #left .search-pane button {
    background: var(--simpel-accent) !important;
}

#navigation-search-form {
    height: auto;
}

#navigation-search-form > .search-pane {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 34px;
}

#navigation-search-form #searchNavigations {
    flex: 1 1 0;
    min-width: 0;
    width: 0 !important; /* Override the legacy fixed input width on small screens. */
    height: 100%;
    box-sizing: border-box;
    float: none;
    margin: 0;
    padding: 6px 10px;
}

#navigation-search-form #search-navigation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 100%;
    box-sizing: border-box;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--simpel-border);
    color: #fff;
    cursor: pointer;
}

#navigation-search-form #search-navigation-btn:focus-visible {
    outline: 2px solid var(--simpel-accent-strong);
    outline-offset: 2px;
}

#left #result-search-navigations .result-menu-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
}

#left #result-search-navigations .result-menu-item > .fa {
    flex: 0 0 16px;
    text-align: center;
}

#left #result-search-navigations .result-menu-item > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.simpel-modern-shell #left .subnav {
    border-color: var(--simpel-border);
}

.simpel-modern-shell #left .subnav .subnav-title,
.simpel-modern-shell #left .subnav .subnav-content {
    background: transparent;
}

.simpel-modern-shell #left .subnav .subnav-title .toggle-subnav,
.simpel-modern-shell #left .subnav .subnav-menu > li > a {
    color: var(--simpel-text-muted);
}

.simpel-modern-shell #left .subnav .subnav-menu > li > a:hover,
.simpel-modern-shell #left .subnav .subnav-menu > li.active > a {
    background: var(--simpel-accent-soft);
    color: var(--simpel-accent-strong);
}

.simpel-modern-shell #main {
    background: var(--simpel-surface-muted);
}

.simpel-modern-shell #main .page-header {
    border: 0;
    margin-bottom: 14px;
}

.simpel-modern-shell #main .page-header .pull-left h1 {
    color: var(--simpel-text);
    font-size: 31px;
    font-weight: 300;
    letter-spacing: -.4px;
}

.simpel-modern-shell #main .page-header .stats > li {
    border: 1px solid var(--simpel-border);
    box-shadow: 0 2px 7px rgba(42, 55, 65, .08);
    filter: saturate(.72) brightness(1.05);
}

.simpel-modern-shell #main .breadcrumbs {
    background: #fff;
    border: 1px solid var(--simpel-border);
    box-shadow: 0 1px 3px rgba(42, 55, 65, .04);
    color: var(--simpel-text-muted);
    margin-bottom: 16px;
}

.simpel-modern-shell #main .breadcrumbs a {
    color: var(--simpel-accent-strong);
}

.simpel-modern-shell #main .breadcrumbs .breadcrumb-text {
    color: var(--simpel-text-muted);
    cursor: default;
}

.simpel-modern-shell .box {
    background: var(--simpel-surface);
    border-color: var(--simpel-border) !important;
    box-shadow: 0 3px 12px rgba(42, 55, 65, .07);
}

.simpel-modern-shell .panel,
.simpel-modern-shell .panel > .panel-heading,
.simpel-modern-shell .panel > .panel-footer {
    border-radius: 0;
}

/* Semantic information panels keep a stable soft-blue identity across every
 * selectable theme; they are not decorative theme-accent surfaces. */
.simpel-modern-shell .panel-info {
    border-color: var(--simpel-panel-info-border);
}

.simpel-modern-shell .panel-info > .panel-heading {
    background-color: var(--simpel-panel-info-background);
    border-color: var(--simpel-panel-info-border);
    color: var(--simpel-panel-info-color);
}

.simpel-modern-shell .panel-info > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--simpel-panel-info-border);
}

.simpel-modern-shell .panel-info > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: var(--simpel-panel-info-border);
}

/* Legacy views use labels and badges for compact status metadata. Keep the
 * semantic distinction while replacing the saturated fills with soft chips. */
.simpel-modern-shell .label.label-primary,
.simpel-modern-shell .badge.badge-primary {
    background-color: var(--simpel-accent-soft) !important;
    border-color: var(--simpel-accent) !important;
    color: var(--simpel-text) !important;
}

.simpel-modern-shell .label.label-info,
.simpel-modern-shell .label.label-blue,
.simpel-modern-shell .label.label-satblue,
.simpel-modern-shell .label.label-teal,
.simpel-modern-shell .badge.badge-info,
.simpel-modern-shell .badge.badge-blue,
.simpel-modern-shell .badge.badge-satblue,
.simpel-modern-shell .badge.badge-teal {
    background-color: var(--simpel-panel-info-background) !important;
    border-color: var(--simpel-panel-info-border) !important;
    color: var(--simpel-panel-info-color) !important;
}

.simpel-modern-shell .label.label-success,
.simpel-modern-shell .label.label-green,
.simpel-modern-shell .label.label-satgreen,
.simpel-modern-shell .label.label-lime,
.simpel-modern-shell .badge.badge-success,
.simpel-modern-shell .badge.badge-green,
.simpel-modern-shell .badge.badge-satgreen,
.simpel-modern-shell .badge.badge-lime {
    background-color: var(--simpel-label-success-background) !important;
    border-color: var(--simpel-label-success-border) !important;
    color: var(--simpel-label-success-color) !important;
}

.simpel-modern-shell .label.label-warning,
.simpel-modern-shell .label.label-orange,
.simpel-modern-shell .label.label-yellow,
.simpel-modern-shell .label.label-brown,
.simpel-modern-shell .badge.badge-warning,
.simpel-modern-shell .badge.badge-orange,
.simpel-modern-shell .badge.badge-yellow,
.simpel-modern-shell .badge.badge-brown {
    background-color: var(--simpel-label-warning-background) !important;
    border-color: var(--simpel-label-warning-border) !important;
    color: var(--simpel-label-warning-color) !important;
}

.simpel-modern-shell .label.label-danger,
.simpel-modern-shell .label.label-important,
.simpel-modern-shell .label.label-red,
.simpel-modern-shell .label.label-lightred,
.simpel-modern-shell .badge.badge-danger,
.simpel-modern-shell .badge.badge-important,
.simpel-modern-shell .badge.badge-red,
.simpel-modern-shell .badge.badge-lightred {
    background-color: var(--simpel-label-danger-background) !important;
    border-color: var(--simpel-label-danger-border) !important;
    color: var(--simpel-label-danger-color) !important;
}

.simpel-modern-shell .label.label-purple,
.simpel-modern-shell .label.label-magenta,
.simpel-modern-shell .label.label-pink,
.simpel-modern-shell .badge.badge-purple,
.simpel-modern-shell .badge.badge-magenta,
.simpel-modern-shell .badge.badge-pink {
    background-color: var(--simpel-label-purple-background) !important;
    border-color: var(--simpel-label-purple-border) !important;
    color: var(--simpel-label-purple-color) !important;
}

.simpel-modern-shell .label.label-default,
.simpel-modern-shell .label.label-grey,
.simpel-modern-shell .label.label-grey-3,
.simpel-modern-shell .label.label-grey-4,
.simpel-modern-shell .label.label-light,
.simpel-modern-shell .label.label-inverse,
.simpel-modern-shell .badge.badge-default,
.simpel-modern-shell .badge.badge-grey,
.simpel-modern-shell .badge.badge-grey-3,
.simpel-modern-shell .badge.badge-grey-4,
.simpel-modern-shell .badge.badge-light,
.simpel-modern-shell .badge.badge-inverse {
    background-color: var(--simpel-label-neutral-background) !important;
    border-color: var(--simpel-label-neutral-border) !important;
    color: var(--simpel-label-neutral-color) !important;
}

.simpel-modern-shell .label[class*="label-"],
.simpel-modern-shell .badge[class*="badge-"] {
    background-image: none !important;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    text-shadow: none;
}

/* GitLab-style scoped labels use a colored prefix plus a neutral value. The
 * prefix follows the same soft semantic palette as label and badge chips. */
.simpel-modern-shell .gl-label.gl-label-blue {
    --label-inset-border: inset 0 0 0 1px var(--simpel-panel-info-border);
    color: var(--simpel-panel-info-border);
}

.simpel-modern-shell .gl-label.gl-label-green {
    --label-inset-border: inset 0 0 0 1px var(--simpel-label-success-border);
    color: var(--simpel-label-success-border);
}

.simpel-modern-shell .gl-label.gl-label-orange,
.simpel-modern-shell .gl-label.gl-label-yellow {
    --label-inset-border: inset 0 0 0 1px var(--simpel-label-warning-border);
    color: var(--simpel-label-warning-border);
}

.simpel-modern-shell .gl-label.gl-label-red {
    --label-inset-border: inset 0 0 0 1px var(--simpel-label-danger-border);
    color: var(--simpel-label-danger-border);
}

.simpel-modern-shell .gl-label.gl-label-grey {
    --label-inset-border: inset 0 0 0 1px var(--simpel-label-neutral-border);
    color: var(--simpel-label-neutral-border);
}

.simpel-modern-shell .gl-label-text.gl-label-text-dark.gl-label-bg-blue {
    background-color: var(--simpel-panel-info-background) !important;
    color: var(--simpel-panel-info-color) !important;
}

.simpel-modern-shell .gl-label-text.gl-label-text-dark.gl-label-bg-green {
    background-color: var(--simpel-label-success-background) !important;
    color: var(--simpel-label-success-color) !important;
}

.simpel-modern-shell .gl-label-text.gl-label-text-dark.gl-label-bg-orange,
.simpel-modern-shell .gl-label-text.gl-label-text-dark.gl-label-bg-yellow {
    background-color: var(--simpel-label-warning-background) !important;
    color: var(--simpel-label-warning-color) !important;
}

.simpel-modern-shell .gl-label-text.gl-label-text-dark.gl-label-bg-red {
    background-color: var(--simpel-label-danger-background) !important;
    color: var(--simpel-label-danger-color) !important;
}

.simpel-modern-shell .gl-label-text.gl-label-text-dark.gl-label-bg-grey {
    background-color: var(--simpel-label-neutral-background) !important;
    color: var(--simpel-label-neutral-color) !important;
}

.simpel-modern-shell .gl-label-text.gl-label-text-dark[class*="gl-label-bg-"] {
    background-image: none !important;
    text-shadow: none;
}

.simpel-modern-shell .box .box-title {
    background: #fff;
    border-color: var(--simpel-border);
    margin-top: 0;
}

.simpel-modern-shell .box.box-color,
.simpel-modern-shell .box.box-color.primary {
    --simpel-box-accent: var(--simpel-accent-strong);
    --simpel-box-soft: var(--simpel-accent-soft);
}

.simpel-modern-shell .box.box-color.red { --simpel-box-accent: #945659; --simpel-box-soft: #f5e9ea; }
.simpel-modern-shell .box.box-color.orange { --simpel-box-accent: #956a48; --simpel-box-soft: #f7eee6; }
.simpel-modern-shell .box.box-color.green { --simpel-box-accent: #55745d; --simpel-box-soft: #eaf1ec; }
.simpel-modern-shell .box.box-color.brown { --simpel-box-accent: #705d52; --simpel-box-soft: #f1ece9; }
.simpel-modern-shell .box.box-color.blue { --simpel-box-accent: #4e6d8d; --simpel-box-soft: #e9eff5; }
.simpel-modern-shell .box.box-color.lime { --simpel-box-accent: #69784b; --simpel-box-soft: #f0f3e8; }
.simpel-modern-shell .box.box-color.teal { --simpel-box-accent: #41716f; --simpel-box-soft: #e7f1f0; }
.simpel-modern-shell .box.box-color.purple { --simpel-box-accent: #695b87; --simpel-box-soft: #efecf4; }
.simpel-modern-shell .box.box-color.pink { --simpel-box-accent: #8c6078; --simpel-box-soft: #f5ebf0; }
.simpel-modern-shell .box.box-color.magenta { --simpel-box-accent: #765981; --simpel-box-soft: #f1ebf3; }
.simpel-modern-shell .box.box-color.grey { --simpel-box-accent: #606b73; --simpel-box-soft: #edf0f2; }
.simpel-modern-shell .box.box-color.darkblue { --simpel-box-accent: #44566c; --simpel-box-soft: #e9edf2; }
.simpel-modern-shell .box.box-color.lightred { --simpel-box-accent: #9d6263; --simpel-box-soft: #f7ecec; }
.simpel-modern-shell .box.box-color.lightgrey { --simpel-box-accent: #727d85; --simpel-box-soft: #f0f2f4; }
.simpel-modern-shell .box.box-color.satblue { --simpel-box-accent: #496879; --simpel-box-soft: #e9f0f3; }
.simpel-modern-shell .box.box-color.satgreen { --simpel-box-accent: #557257; --simpel-box-soft: #eaf1ea; }

.simpel-modern-shell .box.box-color .box-title,
.simpel-modern-shell .box.box-bordered.box-color .box-title {
    background: var(--simpel-box-accent) !important;
    border-color: var(--simpel-box-accent) !important;
}

.simpel-modern-shell .box .box-title h3 {
    color: var(--simpel-text);
    font-weight: 500;
}

.simpel-modern-shell .box.box-color .box-title h3,
.simpel-modern-shell .box.box-bordered.box-color .box-title h3 {
    color: #fff;
}

.simpel-modern-shell .box .box-content {
    border-color: var(--simpel-border) !important;
}

.simpel-modern-shell .box.box-bordered.box-color .box-content {
    border-color: var(--simpel-box-accent) !important;
}

.simpel-modern-shell .box.box-color .box-title .actions > a:hover,
.simpel-modern-shell .box.box-color .box-title .tabs > li > a:hover,
.simpel-modern-shell .box.box-color .box-title .tabs > li.active > a {
    color: var(--simpel-box-accent) !important;
}

.simpel-modern-shell .box.box-color .form-wizard .wizard-steps li.active .single-step .title,
.simpel-modern-shell .box.box-color .btn.btn-primary {
    background: var(--simpel-box-accent) !important;
    border-color: var(--simpel-box-accent) !important;
}

.simpel-modern-shell .box.box-bordered.box-color .slimScrollDiv {
    border-bottom-color: var(--simpel-box-accent) !important;
}

/* Dashboard shortcut tiles keep their foreground stable on hover. The legacy
 * tile outline remains the only hover treatment. */
.simpel-modern-shell .tiles#shortcuts a,
.simpel-modern-shell .tiles#shortcuts a:hover,
.simpel-modern-shell .tiles#shortcuts a:focus,
.simpel-modern-shell .tiles#shortcuts a:active,
.simpel-modern-shell .tiles#shortcuts a span,
.simpel-modern-shell .tiles#shortcuts a i,
.simpel-modern-shell .tiles#shortcuts a strong {
    color: #fff !important;
    text-decoration: none;
}

.simpel-modern-shell .tiles#shortcuts a .icon {
    opacity: 1;
}

.simpel-modern-shell .tiles#shortcuts > li > a:hover .icon,
.simpel-modern-shell .tiles#shortcuts > li.carousel .carousel-inner > a:hover .icon {
    font-size: 50px;
}

.simpel-modern-shell .tiles#shortcuts > li.long > a:hover .icon,
.simpel-modern-shell .tiles#shortcuts > li.long.carousel .carousel-inner > a:hover .icon {
    font-size: 65px;
}

.simpel-modern-shell .tabs.tabs-inline.tabs-top > li.active > a {
    background: var(--simpel-accent) !important;
    border-top-color: var(--simpel-accent-strong) !important;
    color: #fff !important;
}

.simpel-modern-shell .tabs.tabs-inline.tabs-top > li.active > a:hover,
.simpel-modern-shell .tabs.tabs-inline.tabs-top > li.active > a:focus {
    background: var(--simpel-accent-strong) !important;
    border-top-color: var(--simpel-accent-strong) !important;
    color: #fff !important;
}

/* Buttons keep their legacy class contract and use saturated muted colors.
 * The primary action follows the selected theme; semantic actions stay stable. */
.simpel-modern-shell .btn.btn-primary {
    background: var(--simpel-accent-strong) !important;
    border-color: var(--simpel-accent-strong) !important;
    color: #fff !important;
    filter: saturate(1.22);
}

.simpel-modern-shell .btn.btn-primary:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-primary:not(.disabled):not([disabled]):focus {
    background: var(--simpel-accent-strong) !important;
    border-color: var(--simpel-accent-strong) !important;
    color: #fff !important;
    filter: saturate(1.3) brightness(.84);
}

body.theme-lightgrey.simpel-modern-shell .btn.btn-primary {
    background: #687279 !important;
    border-color: #687279 !important;
}

.simpel-modern-shell .btn.btn-info {
    --simpel-button-color: #3d7898;
    --simpel-button-hover: #31647f;
}

.simpel-modern-shell .btn.btn-success {
    --simpel-button-color: #477a55;
    --simpel-button-hover: #386542;
}

.simpel-modern-shell .btn.btn-warning {
    --simpel-button-color: #a76232;
    --simpel-button-hover: #895024;
}

.simpel-modern-shell .btn.btn-danger {
    --simpel-button-color: #a84c52;
    --simpel-button-hover: #8d3d42;
}

.simpel-modern-shell .btn.btn-inverse {
    --simpel-button-color: #56636c;
    --simpel-button-hover: #424d55;
}

.simpel-modern-shell .btn.btn-info,
.simpel-modern-shell .btn.btn-success,
.simpel-modern-shell .btn.btn-warning,
.simpel-modern-shell .btn.btn-danger,
.simpel-modern-shell .btn.btn-inverse {
    background: var(--simpel-button-color) !important;
    border-color: var(--simpel-button-color) !important;
    color: #fff !important;
}

.simpel-modern-shell .btn.btn-info:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-info:not(.disabled):not([disabled]):focus,
.simpel-modern-shell .btn.btn-success:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-success:not(.disabled):not([disabled]):focus,
.simpel-modern-shell .btn.btn-warning:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-warning:not(.disabled):not([disabled]):focus,
.simpel-modern-shell .btn.btn-danger:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-danger:not(.disabled):not([disabled]):focus,
.simpel-modern-shell .btn.btn-inverse:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-inverse:not(.disabled):not([disabled]):focus {
    background: var(--simpel-button-hover) !important;
    border-color: var(--simpel-button-hover) !important;
    color: #fff !important;
}

.simpel-modern-shell .btn.btn-red { --simpel-button-color: #a84c52; }
.simpel-modern-shell .btn.btn-orange { --simpel-button-color: #a76232; }
.simpel-modern-shell .btn.btn-green { --simpel-button-color: #477a55; }
.simpel-modern-shell .btn.btn-brown { --simpel-button-color: #795343; }
.simpel-modern-shell .btn.btn-blue { --simpel-button-color: #416f9c; }
.simpel-modern-shell .btn.btn-lime { --simpel-button-color: #667934; }
.simpel-modern-shell .btn.btn-teal { --simpel-button-color: #317b77; }
.simpel-modern-shell .btn.btn-purple { --simpel-button-color: #6e5591; }
.simpel-modern-shell .btn.btn-pink { --simpel-button-color: #985573; }
.simpel-modern-shell .btn.btn-magenta { --simpel-button-color: #7c4a8c; }
.simpel-modern-shell .btn.btn-grey { --simpel-button-color: #56636c; }
.simpel-modern-shell .btn.btn-darkblue { --simpel-button-color: #365675; }
.simpel-modern-shell .btn.btn-lightred { --simpel-button-color: #ad5659; }
.simpel-modern-shell .btn.btn-lightgrey { --simpel-button-color: #687279; }
.simpel-modern-shell .btn.btn-satblue { --simpel-button-color: #3e6c83; }
.simpel-modern-shell .btn.btn-satgreen { --simpel-button-color: #477b4a; }

.simpel-modern-shell .btn.btn-red,
.simpel-modern-shell .btn.btn-orange,
.simpel-modern-shell .btn.btn-green,
.simpel-modern-shell .btn.btn-brown,
.simpel-modern-shell .btn.btn-blue,
.simpel-modern-shell .btn.btn-lime,
.simpel-modern-shell .btn.btn-teal,
.simpel-modern-shell .btn.btn-purple,
.simpel-modern-shell .btn.btn-pink,
.simpel-modern-shell .btn.btn-magenta,
.simpel-modern-shell .btn.btn-grey,
.simpel-modern-shell .btn.btn-darkblue,
.simpel-modern-shell .btn.btn-lightred,
.simpel-modern-shell .btn.btn-lightgrey,
.simpel-modern-shell .btn.btn-satblue,
.simpel-modern-shell .btn.btn-satgreen {
    background: var(--simpel-button-color) !important;
    border-color: var(--simpel-button-color) !important;
    color: #fff !important;
}

.simpel-modern-shell .btn.btn-red:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-orange:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-green:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-brown:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-blue:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-lime:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-teal:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-purple:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-pink:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-magenta:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-grey:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-darkblue:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-lightred:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-lightgrey:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-satblue:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-satgreen:not(.disabled):not([disabled]):hover {
    background: var(--simpel-button-color) !important;
    border-color: var(--simpel-button-color) !important;
    color: #fff !important;
    filter: brightness(.86);
}

.simpel-modern-shell .btn.btn-grey-3 {
    background: #e9eef1 !important;
    border-color: #cfd8de !important;
    color: #46545d !important;
}

.simpel-modern-shell .btn.btn-grey-3:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-grey-3:not(.disabled):not([disabled]):focus {
    background: #d9e1e6 !important;
    border-color: #c2cdd4 !important;
    color: #34424c !important;
}

.simpel-modern-shell .btn.btn-grey-4 {
    background: #687279 !important;
    border-color: #687279 !important;
    color: #fff !important;
}

.simpel-modern-shell .btn.btn-grey-4:not(.disabled):not([disabled]):hover,
.simpel-modern-shell .btn.btn-grey-4:not(.disabled):not([disabled]):focus {
    background: #5b646b !important;
    border-color: #5b646b !important;
    color: #fff !important;
}

/* Semantic dropdown modifiers keep their legacy class names. Dark variants
 * use the same solid palette as buttons; light variants retain dark text. */
.simpel-modern-shell .dropdown-menu {
    --simpel-dropdown-hover: var(--simpel-accent-soft);
    --simpel-dropdown-text: var(--simpel-accent-strong);
}

.simpel-modern-shell .dropdown-menu.dropdown-default {
    --simpel-dropdown-color: #687279;
    --simpel-dropdown-hover: #56636c;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-info {
    --simpel-dropdown-color: #3d7898;
    --simpel-dropdown-hover: #31647f;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-primary {
    --simpel-dropdown-color: var(--simpel-accent-strong);
    --simpel-dropdown-hover: var(--simpel-accent-strong);
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-success {
    --simpel-dropdown-color: #477a55;
    --simpel-dropdown-hover: #386542;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-warning {
    --simpel-dropdown-color: #a76232;
    --simpel-dropdown-hover: #895024;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-danger {
    --simpel-dropdown-color: #a84c52;
    --simpel-dropdown-hover: #8d3d42;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-inverse {
    --simpel-dropdown-color: #56636c;
    --simpel-dropdown-hover: #424d55;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-purple {
    --simpel-dropdown-color: #6e5591;
    --simpel-dropdown-hover: #594477;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-pink {
    --simpel-dropdown-color: #985573;
    --simpel-dropdown-hover: #7e455f;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-grey {
    --simpel-dropdown-color: #56636c;
    --simpel-dropdown-hover: #424d55;
    --simpel-dropdown-text: #fff;
}

.simpel-modern-shell .dropdown-menu.dropdown-light {
    --simpel-dropdown-color: #cfd8de;
    --simpel-dropdown-hover: #e0e6ea;
    --simpel-dropdown-text: #34424c;
}

.simpel-modern-shell .dropdown-menu.dropdown-lighter {
    --simpel-dropdown-color: #d8e0e5;
    --simpel-dropdown-hover: #e9eef1;
    --simpel-dropdown-text: #34424c;
}

.simpel-modern-shell .dropdown-menu.dropdown-lightest {
    --simpel-dropdown-color: #e1e7eb;
    --simpel-dropdown-hover: #f1f4f6;
    --simpel-dropdown-text: #34424c;
}

.simpel-modern-shell .dropdown-menu.dropdown-yellow {
    --simpel-dropdown-color: #d8bd66;
    --simpel-dropdown-hover: #f3e1a7;
    --simpel-dropdown-text: #584815;
}

.simpel-modern-shell .dropdown-menu.dropdown-yellow2 {
    --simpel-dropdown-color: #ddca87;
    --simpel-dropdown-hover: #f7edc9;
    --simpel-dropdown-text: #584815;
}

.simpel-modern-shell .dropdown-menu.dropdown-light-blue {
    --simpel-dropdown-color: #bfd4df;
    --simpel-dropdown-hover: #e7f0f5;
    --simpel-dropdown-text: #31586d;
}

.simpel-modern-shell .dropdown-menu.dropdown-default,
.simpel-modern-shell .dropdown-menu.dropdown-info,
.simpel-modern-shell .dropdown-menu.dropdown-primary,
.simpel-modern-shell .dropdown-menu.dropdown-success,
.simpel-modern-shell .dropdown-menu.dropdown-warning,
.simpel-modern-shell .dropdown-menu.dropdown-danger,
.simpel-modern-shell .dropdown-menu.dropdown-inverse,
.simpel-modern-shell .dropdown-menu.dropdown-purple,
.simpel-modern-shell .dropdown-menu.dropdown-pink,
.simpel-modern-shell .dropdown-menu.dropdown-grey,
.simpel-modern-shell .dropdown-menu.dropdown-light,
.simpel-modern-shell .dropdown-menu.dropdown-lighter,
.simpel-modern-shell .dropdown-menu.dropdown-lightest,
.simpel-modern-shell .dropdown-menu.dropdown-yellow,
.simpel-modern-shell .dropdown-menu.dropdown-yellow2,
.simpel-modern-shell .dropdown-menu.dropdown-light-blue {
    background: var(--simpel-surface) !important;
    border-color: var(--simpel-dropdown-color) !important;
    border-radius: 2px;
    box-shadow: 0 8px 20px rgba(42, 55, 65, .16);
}

.simpel-modern-shell .dropdown-menu > li:not(.disabled).active > a,
.simpel-modern-shell .dropdown-menu > li:not(.disabled) > a:hover,
.simpel-modern-shell .dropdown-menu > li:not(.disabled) > a:focus,
.simpel-modern-shell .dropdown-menu > li:not(.disabled) > a:active,
.simpel-modern-shell .dropdown-menu > li:not(.disabled) > .simpel-report-menu-option:hover,
.simpel-modern-shell .dropdown-menu > li:not(.disabled) > .simpel-report-menu-option:focus,
.simpel-modern-shell .dropdown-menu > li:not(.disabled) > .simpel-report-menu-option:active {
    background: var(--simpel-dropdown-hover) !important;
    color: var(--simpel-dropdown-text) !important;
}

.simpel-modern-shell .form-control,
.simpel-modern-shell input[type="text"],
.simpel-modern-shell input[type="password"],
.simpel-modern-shell input[type="email"],
.simpel-modern-shell input[type="number"],
.simpel-modern-shell textarea,
.simpel-modern-shell select {
    border-color: #cfd8de;
    border-radius: 2px;
    box-shadow: none;
    color: var(--simpel-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.simpel-modern-shell .form-control:focus,
.simpel-modern-shell input:focus,
.simpel-modern-shell textarea:focus,
.simpel-modern-shell select:focus {
    border-color: var(--simpel-accent);
    box-shadow: 0 0 0 2px var(--simpel-accent-soft);
}

.simpel-modern-shell .btn {
    border-radius: 2px;
    box-shadow: none;
    font-weight: 500;
    transition: background-color 150ms ease, border-color 150ms ease, filter 150ms ease, transform 100ms ease;
}

.simpel-modern-shell .btn:active {
    transform: translateY(1px);
}

/* Replace neon legacy fills with the muted accent of the active theme. */
.simpel-modern-shell .tagsinput#textfield_tagsinput .tag,
.simpel-modern-shell .ms-container .multi-custom-header,
.simpel-modern-shell .slider .ui-slider-handle,
.simpel-modern-shell .form-wizard .wizard-steps li.active .single-step .title,
.simpel-modern-shell .user-list h4,
.simpel-modern-shell .nav.nav-pills > li.active > a,
.simpel-modern-shell .nav.nav-list > li.active > a,
.simpel-modern-shell .dataTables_wrapper .dataTables_paginate > span > a.paginate_active,
.simpel-modern-shell .elfinder-navbar .ui-state-active,
.simpel-modern-shell .pagination.pagination-custom li.active a:hover,
.simpel-modern-shell .pagination.pagination-custom li.active a {
    background: var(--simpel-accent) !important;
    background-image: none !important;
    color: #fff !important;
}

.simpel-modern-shell .elfinder-navbar .ui-state-active {
    border-color: var(--simpel-accent) !important;
}

.simpel-modern-shell .ms-container .ms-selectable li.ms-hover,
.simpel-modern-shell .ms-container .ms-selection li.ms-hover {
    background-color: var(--simpel-panel-info-background) !important;
    border-color: var(--simpel-panel-info-border) !important;
    color: var(--simpel-panel-info-color) !important;
}

.simpel-modern-shell .select2-results .select2-highlighted,
.simpel-modern-shell .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--simpel-panel-info-background) !important;
    background-image: none !important;
    color: var(--simpel-panel-info-color) !important;
}

.simpel-modern-shell .table > thead > tr > th,
.simpel-modern-shell .ui-jqgrid .ui-jqgrid-htable th {
    background-color: var(--simpel-panel-info-background) !important;
    background-image: none !important;
    border-color: var(--simpel-panel-info-border) !important;
    color: var(--simpel-panel-info-color) !important;
    font-weight: 600;
}

.simpel-modern-shell .ui-jqgrid {
    border: 1px solid var(--simpel-border);
    border-radius: 0;
    box-shadow: 0 3px 12px rgba(42, 55, 65, .07);
    color: var(--simpel-text);
    font-size: 13px;
    max-width: 100%;
    overflow: hidden;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-view {
    font-size: 13px;
    max-width: 100%;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-titlebar {
    background: var(--simpel-accent) !important;
    background-image: none !important;
    border: 0;
    color: #fff;
    min-height: 34px;
    padding: 7px 10px;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-titlebar.ui-jqgrid-bootstrap-corner-top {
    border-radius: 0 !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-title {
    font-weight: 500;
    line-height: 20px;
    margin: 0;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-titlebar-close {
    display: none !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-htable th.ui-th-column,
.simpel-modern-shell .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr,
.simpel-modern-shell .ui-jqgrid .ui-th-ltr {
    min-height: 34px;
    padding: 0 5px;
    text-align: center !important;
    text-transform: uppercase;
    white-space: normal !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-htable th div {
    height: auto !important;
    line-height: 1.35;
    overflow: hidden;
    padding-bottom: 7px;
    padding-top: 7px;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
}

.simpel-modern-shell .ui-jqgrid .jqgrid-rownum {
    background: #edf2f5 !important;
    background-image: none !important;
    border-color: var(--simpel-border) !important;
    color: #465660 !important;
}

.simpel-modern-shell .table > tbody > tr > td,
.simpel-modern-shell .ui-jqgrid tr.jqgrow td {
    border-color: #e5eaee;
}

.simpel-modern-shell .ui-jqgrid tr.jqgrow {
    transition: background-color 140ms ease, color 140ms ease;
}

.simpel-modern-shell .ui-jqgrid tr.jqgrow td {
    background-image: none !important;
    height: auto;
    padding: 7px 6px;
    vertical-align: top;
    white-space: nowrap !important;
}

.simpel-modern-shell .ui-jqgrid tr.jqgrow td.wrap {
    white-space: normal !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-btable tr.jqgrow:hover td,
.simpel-modern-shell .ui-jqgrid .ui-jqgrid-btable tr.jqgrow.ui-state-hover td {
    background: var(--simpel-accent-soft) !important;
    color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-btable tr.jqgrow.ui-state-highlight td {
    background: #f1f5f7 !important;
    box-shadow: inset 0 1px 0 var(--simpel-border), inset 0 -1px 0 var(--simpel-border);
    color: var(--simpel-text) !important;
}

/* free jqGrid changes the selected class between GUI styles, but always keeps
 * aria-selected in sync. Use that state so odd/even rows in multiselect grids
 * receive one consistent success background without disabling zebra rows. */
.simpel-modern-shell .ui-jqgrid .ui-jqgrid-view[aria-multiselectable="true"]
    .ui-jqgrid-btable tr.jqgrow[aria-selected="true"] > td {
    background: var(--simpel-label-success-background) !important;
    box-shadow: inset 0 1px 0 var(--simpel-label-success-border),
        inset 0 -1px 0 var(--simpel-label-success-border);
    color: var(--simpel-text) !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-bdiv {
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--simpel-border) !important;
    max-width: 100%;
    overflow-x: auto;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-pager,
.simpel-modern-shell .ui-jqgrid .ui-jqgrid-toppager {
    background: #f8fafb !important;
    background-image: none !important;
    color: var(--simpel-text-muted);
    height: auto;
    min-height: 36px;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-pager {
    border-top: 1px solid var(--simpel-border) !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-toppager {
    border-bottom: 1px solid var(--simpel-border) !important;
    padding: 0 !important;
}

.simpel-modern-shell .ui-jqgrid .ui-jqgrid-toppager .ui-pager-control {
    min-height: 36px;
}

.simpel-modern-shell .ui-jqgrid .ui-pg-table td {
    padding: 3px;
    vertical-align: middle;
}

.simpel-modern-shell .ui-jqgrid .ui-pg-input,
.simpel-modern-shell .ui-jqgrid .ui-pg-selbox {
    background: #fff;
    border: 1px solid var(--simpel-border) !important;
    border-radius: 2px;
    color: var(--simpel-text);
    height: 28px;
    line-height: 20px;
    margin: 0 3px;
    padding: 3px 6px;
}

.simpel-modern-shell .ui-jqgrid .ui-pg-button {
    border-radius: 2px;
    transition: background-color 140ms ease, color 140ms ease;
}

.simpel-modern-shell .ui-jqgrid.ui-jqgrid-bootstrap .ui-pg-table .ui-pg-button {
    padding: .2em .4em;
    margin: .2em .1em;
}

.simpel-modern-shell .ui-jqgrid .ui-pg-button.ui-state-hover {
    background: var(--simpel-accent-soft) !important;
    border-color: var(--simpel-border) !important;
    color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell .ui-jqgrid .navtable {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.simpel-modern-shell .ui-jqgrid .navtable > .ui-pg-button {
    margin: 0;
}

.simpel-modern-shell .ui-jqgrid .navtable .ui-pg-div {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    line-height: 16px;
    vertical-align: middle;
}

.simpel-modern-shell .ui-jqgrid .navtable .ui-pg-div > span {
    align-items: center;
    display: inline-flex;
    float: none;
    line-height: 16px;
    margin: 0;
    padding: 0;
}

.simpel-modern-shell .ui-jqgrid .navtable .ui-pg-div > .fa {
    height: 16px;
    justify-content: center;
    width: 16px;
}

/* jqGrid column chooser: retain the legacy two-list interaction while making
 * the dialog consistent with the active soft Windows palette. */
.simpel-modern-shell .ui-dialog.ui-jqdialog {
    background: var(--simpel-surface) !important;
    border: 1px solid var(--simpel-border) !important;
    border-radius: 3px;
    box-shadow: 0 18px 45px rgba(42, 55, 65, .22);
    color: var(--simpel-text);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    padding: 0;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar {
    background: var(--simpel-accent-strong) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0;
    color: #fff !important;
    min-height: 46px;
    padding: 12px 46px 11px 16px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-title {
    color: #fff !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    margin: 0;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: 2px;
    filter: none;
    height: 28px;
    margin-top: -14px;
    opacity: 1;
    overflow: hidden;
    padding: 0;
    right: 12px;
    text-shadow: none;
    transition: background-color 140ms ease, border-color 140ms ease;
    width: 28px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close .ui-icon {
    display: none !important;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close::before,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close::after {
    background: #fff;
    border-radius: 1px;
    content: "";
    height: 2px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: 14px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close:hover,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-titlebar-close:focus {
    background: rgba(255, 255, 255, .24) !important;
    border-color: rgba(255, 255, 255, .7) !important;
    outline: 0;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-content {
    background: var(--simpel-surface) !important;
    color: var(--simpel-text);
    padding: 14px !important;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect {
    background: var(--simpel-surface) !important;
    border: 1px solid var(--simpel-border) !important;
    color: var(--simpel-text);
    font-size: 13px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect div.selected,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect div.available {
    background: var(--simpel-surface) !important;
    border-color: var(--simpel-border) !important;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .actions.ui-widget-header {
    background: #edf2f5 !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--simpel-border) !important;
    color: #465660 !important;
    font-size: 12px;
    min-height: 38px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .count,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .add-all,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .remove-all {
    color: var(--simpel-accent-strong) !important;
    font-weight: 600;
    line-height: 22px;
    padding: 8px 9px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .add-all:hover,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .add-all:focus,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .remove-all:hover,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect .remove-all:focus {
    background: var(--simpel-accent-soft) !important;
    color: var(--simpel-accent-strong) !important;
    outline: 0;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect input.search {
    background: #fff !important;
    border: 1px solid var(--simpel-border) !important;
    border-radius: 2px;
    box-shadow: none;
    color: var(--simpel-text);
    height: 28px;
    margin: 5px 7px;
    opacity: 1;
    padding: 4px 7px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect ul.selected,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect ul.available {
    background: #fff !important;
    color: var(--simpel-text);
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li.ui-state-default {
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f3 !important;
    color: var(--simpel-text) !important;
    font-size: 13px;
    height: auto;
    line-height: 20px;
    margin: 0;
    min-height: 34px;
    padding-bottom: 7px;
    padding-top: 7px;
    transition: background-color 140ms ease, color 140ms ease;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li.ui-state-hover,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li.ui-sortable-helper {
    background: var(--simpel-accent-soft) !important;
    color: var(--simpel-accent-strong) !important;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li.ui-state-highlight {
    background: var(--simpel-accent-soft) !important;
    border: 1px dashed var(--simpel-accent) !important;
    min-height: 32px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li a.action {
    align-items: center;
    background: transparent !important;
    border-radius: 2px;
    display: flex;
    height: 26px;
    justify-content: center;
    right: 5px;
    top: 4px;
    width: 26px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li a.action:hover,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-multiselect li a.action:focus {
    background: rgba(255, 255, 255, .76) !important;
    outline: 1px solid var(--simpel-border);
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-buttonpane {
    background: #f8fafb !important;
    background-image: none !important;
    border-color: var(--simpel-border) !important;
    margin: 0;
    padding: 10px 14px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-buttonpane button {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--simpel-border) !important;
    border-radius: 2px;
    color: var(--simpel-text) !important;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    margin: 0 0 0 8px;
    min-height: 34px;
    padding: 6px 14px;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-buttonpane button:first-child {
    background: var(--simpel-accent) !important;
    border-color: var(--simpel-accent) !important;
    color: #fff !important;
}

.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-buttonpane button:hover,
.simpel-modern-shell .ui-dialog.ui-jqdialog .ui-dialog-buttonpane button:focus {
    border-color: var(--simpel-accent) !important;
    box-shadow: 0 0 0 2px var(--simpel-accent-soft);
    outline: 0;
}

.simpel-modern-shell .table-striped > tbody > tr:nth-child(odd) > td,
.simpel-modern-shell .ui-jqgrid .ui-priority-secondary {
    background: #f8fafb;
}

.simpel-modern-shell .modal-content,
.simpel-modern-shell .bootbox .modal-content {
    border: 1px solid var(--simpel-border);
    border-radius: 3px;
    box-shadow: 0 18px 45px rgba(42, 55, 65, .22);
}

.simpel-modern-shell #cboxOverlay {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: rgba(35, 47, 56, .58) !important;
}

.simpel-modern-shell #colorbox {
    background: var(--simpel-surface);
    border: 0;
    border-radius: 0;
    box-shadow: 0 22px 60px rgba(31, 42, 50, .3);
}

.simpel-modern-shell #colorbox:focus {
    outline: 0;
}

.simpel-modern-shell #cboxWrapper {
    background: var(--simpel-surface);
    border-radius: 0;
}

.simpel-modern-shell #cboxTopLeft,
.simpel-modern-shell #cboxTopCenter,
.simpel-modern-shell #cboxTopRight {
    background: none !important;
    height: 0;
    opacity: 0;
}

.simpel-modern-shell #cboxMiddleLeft,
.simpel-modern-shell #cboxMiddleRight {
    background: none !important;
    opacity: 0;
    width: 0;
}

.simpel-modern-shell #cboxBottomLeft,
.simpel-modern-shell #cboxBottomRight {
    background: none !important;
    height: 38px;
    opacity: 0;
    width: 0;
}

.simpel-modern-shell #cboxBottomCenter {
    background: var(--simpel-accent) !important;
    border-radius: 0;
    height: 38px;
    opacity: 1;
}

.simpel-modern-shell #cboxContent {
    background: var(--simpel-surface);
    border: 0;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    position: relative;
}

.simpel-modern-shell #cboxLoadedContent {
    background: var(--simpel-surface);
    border-radius: 0;
    margin-bottom: 0;
}

.simpel-modern-shell #cboxLoadedContent > .row,
.simpel-modern-shell #cboxLoadedContent > form.row,
.simpel-modern-shell #cboxLoadedContent > form > .row {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}

.simpel-modern-shell form#form_cbox > #formValidationErrors {
    padding-left: 10px;
    padding-right: 10px;
}

.simpel-modern-shell #cboxLoadedContent .simpel-form-submit-status {
    align-items: center;
    display: inline-flex;
    flex: 1 1 auto;
    min-height: 30px;
    min-width: 0;
    padding: 0 0 0 8px;
    position: relative;
    z-index: 9001;
}

.simpel-modern-shell #cboxLoadedContent .simpel-form-submit-skeleton {
    flex: 1 1 auto;
    height: 30px;
    min-width: 48px;
}

.simpel-modern-shell #cboxContent.simpel-cbox-submitting form#form_cbox .form-actions {
    align-items: center;
    display: flex;
    pointer-events: none;
    position: relative;
    z-index: 9001;
}

.simpel-modern-shell #cboxContent.simpel-cbox-submitting::before {
    background: rgba(255, 255, 255, .38);
    bottom: 0;
    content: '';
    cursor: wait;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9000;
}

.simpel-modern-shell #cboxClose,
.simpel-modern-shell #cboxPrevious,
.simpel-modern-shell #cboxNext {
    background: var(--simpel-surface) !important;
    border: 1px solid var(--simpel-border);
    border-radius: 0;
    bottom: -32px;
    box-shadow: 0 2px 6px rgba(42, 55, 65, .12);
    color: var(--simpel-text);
    font-size: 13px;
    height: 26px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-indent: 0;
    top: auto;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    width: 28px;
}

.simpel-modern-shell #cboxPrevious {
    left: 8px;
}

.simpel-modern-shell #cboxNext {
    left: 42px;
}

.simpel-modern-shell #cboxClose {
    background: var(--simpel-accent-strong) !important;
    border-color: var(--simpel-accent-strong);
    color: #fff;
    font-size: 0;
    right: 8px;
}

.simpel-modern-shell #cboxClose::before {
    content: '\00d7';
    font-size: 22px;
    font-weight: 400;
    line-height: 20px;
}

.simpel-modern-shell #cboxClose:hover,
.simpel-modern-shell #cboxClose:focus {
    background: var(--simpel-accent-strong) !important;
    border-color: var(--simpel-accent-strong);
    box-shadow: 0 0 0 3px var(--simpel-accent-soft);
    color: #fff;
    outline: 0;
}

.simpel-modern-shell #cboxPrevious:hover,
.simpel-modern-shell #cboxPrevious:focus,
.simpel-modern-shell #cboxNext:hover,
.simpel-modern-shell #cboxNext:focus {
    background: var(--simpel-accent-soft) !important;
    border-color: var(--simpel-accent);
    color: var(--simpel-accent-strong);
    outline: 0;
}

.simpel-modern-shell #cboxCurrent,
.simpel-modern-shell #cboxTitle {
    bottom: -27px;
    color: var(--simpel-text-muted);
    line-height: 18px;
}

.simpel-modern-shell #cboxCurrent {
    left: 82px;
}

.simpel-modern-shell #cboxLoadingOverlay {
    background: rgba(255, 255, 255, .96) !important;
    border-radius: 0;
}

.simpel-modern-shell #cboxLoadingGraphic {
    background: transparent !important;
    box-sizing: border-box;
    z-index: 9999;
}

.simpel-modern-shell .simpel-cbox-skeleton {
    box-sizing: border-box;
    display: block;
    padding: 12px 16px;
    width: 100%;
}

.simpel-modern-shell .simpel-cbox-skeleton .simpel-skeleton-block {
    border-radius: 0;
}

.simpel-modern-shell .simpel-cbox-skeleton-container {
    background-color: var(--simpel-surface);
    border: 1px solid var(--simpel-border);
    box-sizing: border-box;
    width: 100%;
}

.simpel-modern-shell .simpel-cbox-skeleton-container-heading {
    align-items: center;
    background-color: var(--simpel-surface);
    border-bottom: 1px solid var(--simpel-border);
    box-sizing: border-box;
    display: flex;
    min-height: 42px;
    padding: 10px 14px;
}

.simpel-modern-shell .simpel-cbox-skeleton-container-title {
    height: 18px;
    max-width: 260px;
    width: 38%;
}

.simpel-modern-shell .simpel-cbox-skeleton-container-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.simpel-modern-shell .simpel-cbox-skeleton-line {
    height: 17px;
}

.simpel-modern-shell .simpel-cbox-skeleton-line-wide {
    width: 94%;
}

.simpel-modern-shell .simpel-cbox-skeleton-line-medium {
    width: 74%;
}

.simpel-modern-shell .simpel-cbox-skeleton-line-short {
    width: 52%;
}

.simpel-modern-shell #colorbox.simpel-cbox-responsive {
    max-width: calc(100vw - 24px);
}

.simpel-modern-shell #colorbox.simpel-cbox-responsive #cboxWrapper,
.simpel-modern-shell #colorbox.simpel-cbox-responsive #cboxContent,
.simpel-modern-shell #colorbox.simpel-cbox-responsive #cboxLoadedContent {
    max-width: 100%;
}

.simpel-modern-shell #colorbox.simpel-cbox-responsive #cboxLoadedContent {
    overscroll-behavior: contain;
}

.simpel-modern-shell #colorbox.simpel-cbox-responsive .content-page {
    min-width: 0;
}

@media (max-width: 767px) {
    .simpel-modern-shell #colorbox.simpel-cbox-responsive {
        max-width: calc(100vw - 16px);
    }

    .simpel-modern-shell #colorbox.simpel-cbox-responsive .content-page {
        margin-left: 0;
        margin-right: 0;
    }

    .simpel-modern-shell #colorbox.simpel-cbox-responsive #cboxLoadedContent {
        max-height: calc(100vh - 72px) !important;
        max-height: calc(100dvh - 72px) !important;
    }
}

.simpel-modern-shell #footer {
    background: #fff;
    border-top: 1px solid var(--simpel-border);
    color: var(--simpel-text-muted);
}

.simpel-modern-shell #mainContentPage {
    min-height: 160px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.simpel-modern-shell #mainContentPage.simpel-page-loading {
    cursor: progress;
    pointer-events: none;
    transform: translateY(3px);
}

.simpel-modern-shell #mainContentPage .simpel-page-loading-state {
    align-items: center;
    color: var(--simpel-text-muted);
    display: flex;
    font-size: 15px;
    gap: 9px;
    justify-content: center;
    min-height: 160px;
}

.simpel-modern-shell #mainContentPage .simpel-page-loading-state .fa {
    color: var(--simpel-accent);
    font-size: 18px;
}

.simpel-modern-shell #pageTitle.simpel-shell-loading {
    color: transparent !important;
}

.simpel-modern-shell #pageTitle.simpel-shell-loading,
.simpel-modern-shell #breadcrumbs.simpel-shell-loading {
    overflow: hidden;
    position: relative;
}

.simpel-modern-shell #breadcrumbs.simpel-shell-loading .list-crumbs,
.simpel-modern-shell #breadcrumbs.simpel-shell-loading .close-bread {
    visibility: hidden;
}

.simpel-modern-shell #pageTitle.simpel-shell-loading > * {
    visibility: hidden;
}

.simpel-modern-shell #main .page-header.simpel-shell-header-loading {
    align-items: center;
    display: flex;
}

.simpel-modern-shell #main .page-header.simpel-shell-header-loading > .pull-left {
    flex: 1 1 auto;
    float: none !important;
    min-width: 0;
    padding-right: 18px;
}

.simpel-modern-shell #main .page-header.simpel-shell-header-loading > .pull-right {
    flex: 0 0 auto;
    float: none !important;
    margin-left: auto;
}

.simpel-modern-shell #pageTitle.simpel-shell-loading {
    display: block;
    min-height: 34px;
    width: 100%;
}

.simpel-modern-shell #pageTitle.simpel-shell-loading::after,
.simpel-modern-shell #breadcrumbs.simpel-shell-loading::after,
.simpel-modern-shell .simpel-skeleton-block {
    animation: simpel-skeleton-shimmer 1.35s ease-in-out infinite;
    background: linear-gradient(90deg, #dce3e7 0%, #eef2f4 42%, #f8fafb 50%, #e6ecef 58%, #dce3e7 100%);
    background-size: 220% 100%;
    border-radius: 2px;
    content: '';
    display: block;
}

.simpel-modern-shell #pageTitle.simpel-shell-loading::after {
    height: 30px;
    left: 0;
    max-width: none;
    position: absolute;
    right: 0;
    top: 2px;
    width: 100%;
}

.simpel-modern-shell #breadcrumbs.simpel-shell-loading::after {
    bottom: 5px;
    height: 18px;
    left: 8px;
    max-width: none;
    position: absolute;
    right: 8px;
    top: 5px;
}

.simpel-modern-shell .simpel-page-skeleton-box {
    background: #fff;
    border: 1px solid var(--simpel-border);
    box-shadow: 0 3px 12px rgba(42, 55, 65, .07);
}

.simpel-modern-shell .simpel-page-skeleton-heading {
    border-bottom: 1px solid var(--simpel-border);
    padding: 14px 16px;
}

.simpel-modern-shell .simpel-page-skeleton-content {
    padding: 16px;
}

.simpel-modern-shell .simpel-skeleton-heading-block {
    height: 22px;
    max-width: 310px;
    width: 42vw;
}

.simpel-modern-shell .simpel-skeleton-content-block {
    height: 18px;
    width: 100%;
}

.simpel-modern-shell .simpel-inline-skeleton {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 96px;
    padding: 18px 16px;
    width: 100%;
}

.simpel-modern-shell .simpel-inline-skeleton-line {
    height: 16px;
}

.simpel-modern-shell .simpel-inline-skeleton-line-wide {
    width: 88%;
}

.simpel-modern-shell .simpel-inline-skeleton-line-medium {
    width: 68%;
}

.simpel-modern-shell .simpel-inline-skeleton-line-short {
    width: 46%;
}

.simpel-modern-shell .tiles#shortcuts > li.simpel-dashboard-card-skeleton {
    background: #fff !important;
    border: 1px solid var(--simpel-border);
    box-sizing: border-box;
    height: 120px;
}

.simpel-modern-shell .tiles#shortcuts > li.simpel-dashboard-card-skeleton > a {
    box-sizing: border-box;
    cursor: progress;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.simpel-modern-shell .simpel-dashboard-card-skeleton-count {
    height: 34px;
    width: 44%;
}

.simpel-modern-shell .simpel-dashboard-card-skeleton-label {
    height: 16px;
    width: 78%;
}

@keyframes simpel-skeleton-shimmer {
    0% { background-position: 100% 0; opacity: .55; }
    50% { opacity: .95; }
    100% { background-position: -100% 0; opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .simpel-modern-shell #pageTitle.simpel-shell-loading::after,
    .simpel-modern-shell #breadcrumbs.simpel-shell-loading::after,
    .simpel-modern-shell .simpel-skeleton-block {
        animation: none;
        opacity: .78;
    }
}

.simpel-modern-shell #mainContentPage.simpel-page-enter {
    animation: simpel-page-enter 200ms ease-out both;
}

@keyframes simpel-page-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.simpel-modern-shell .theme-colors span {
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 1px rgba(52, 66, 76, .16);
    transition: box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.simpel-modern-shell .theme-colors li span:hover {
    box-shadow: 0 0 0 2px var(--simpel-accent-soft), 0 4px 10px rgba(52, 66, 76, .18);
    opacity: .92;
    transform: translateY(-1px);
}

/* Shared callout section rows match the semantic panel-info heading. */
.simpel-modern-shell .info-detail-section {
    background-color: var(--simpel-panel-info-background) !important;
    border-color: var(--simpel-panel-info-border) !important;
    color: var(--simpel-panel-info-color) !important;
}

.simpel-modern-shell .info-detail-section-name {
    align-items: center;
    background-color: var(--simpel-panel-info-background) !important;
    box-sizing: border-box;
    color: var(--simpel-panel-info-color) !important;
    display: flex;
    min-height: 40px;
    vertical-align: middle !important;
}

.simpel-modern-shell .info-detail-section-name > h3,
.simpel-modern-shell .info-detail-section-name > h3 > div {
    color: var(--simpel-panel-info-color) !important;
    width: 100%;
}

.simpel-modern-shell .info-detail-section-name > h3 > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.simpel-modern-shell .info-detail-section-name .pull-right {
    float: none !important;
    margin-left: 12px;
}

.theme-colors li span.red { background: #b86f72 !important; }
.theme-colors li span.orange { background: #bd895f !important; }
.theme-colors li span.green { background: #6f9478 !important; }
.theme-colors li span.brown { background: #927b6d !important; }
.theme-colors li span.blue { background: #6689ad !important; }
.theme-colors li span.lime { background: #879963 !important; }
.theme-colors li span.teal { background: #57918e !important; }
.theme-colors li span.purple { background: #8777a8 !important; }
.theme-colors li span.pink { background: #ae7d96 !important; }
.theme-colors li span.magenta { background: #9776a4 !important; }
.theme-colors li span.grey { background: #7e8991 !important; }
.theme-colors li span.darkblue { background: #5c7089 !important; }
.theme-colors li span.lightred { background: #c28182 !important; }
.theme-colors li span.lightgrey { background: #939da5 !important; }
.theme-colors li span.satblue { background: #628399 !important; }
.theme-colors li span.satgreen { background: #719473 !important; }

.simpel-modern-shell .ui-jqgrid .jqgrid-ordered-list {
    margin: 0;
    padding-left: 18px;
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .simpel-modern-shell *,
    .simpel-modern-shell *::before,
    .simpel-modern-shell *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 840px) {
    .simpel-modern-shell #footer {
        bottom: auto !important;
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }

    .simpel-modern-shell #main .page-header .pull-left h1 {
        font-size: 25px;
    }

    .simpel-modern-shell .ui-jqgrid,
    .simpel-modern-shell .ui-jqgrid .ui-jqgrid-view,
    .simpel-modern-shell .ui-jqgrid .ui-jqgrid-bdiv {
        max-width: 100%;
    }

    .simpel-modern-shell #navigation .mobile-nav.open {
        background: var(--simpel-accent-strong) !important;
    }
}

/* OneUPNVJ entry and role selection. The background intentionally reuses the
 * reviewed local asset used by the PDF/Excel report loading screen. */
body.login.simpel-modern-shell.oneupnvj-login {
    background:
        linear-gradient(135deg, rgba(20, 39, 49, .62), rgba(47, 82, 68, .46)),
        url("../img/landing-bg-one-upnvj.jpg") center center / cover fixed no-repeat;
    min-height: 100%;
    overflow-y: auto;
}

body.oneupnvj-login::before {
    background: rgba(8, 21, 27, .12);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
}

.oneupnvj-login [hidden] {
    display: none !important;
}

body.login.simpel-modern-shell.oneupnvj-login .wrapper {
    height: auto;
    margin: 0;
    max-width: calc(100% - 30px);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    z-index: 1;
}

.oneupnvj-login .wrapper .login-body {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(11, 26, 33, .32);
    margin-top: 0;
    overflow: hidden;
}

.oneupnvj-login .auth-brand {
    background: linear-gradient(155deg, #527154 0%, #446447 64%, #314c37 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.oneupnvj-login .auth-brand::before,
.oneupnvj-login .auth-brand::after {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    position: absolute;
}

.oneupnvj-login .auth-brand::before {
    height: 190px;
    right: -105px;
    top: -122px;
    width: 190px;
}

.oneupnvj-login .auth-brand::after {
    bottom: -92px;
    height: 150px;
    left: -78px;
    width: 150px;
}

.oneupnvj-login .auth-brand-link {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 16px;
    min-height: 122px;
    padding: 23px 30px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.oneupnvj-login .auth-brand-link:hover,
.oneupnvj-login .auth-brand-link:focus {
    color: #fff;
    text-decoration: none;
}

.oneupnvj-login .auth-brand-link:focus {
    outline: 2px solid rgba(255, 255, 255, .72);
    outline-offset: -6px;
}

.oneupnvj-login .auth-brand-logo-wrap {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(29, 50, 34, .24);
    display: flex;
    flex: 0 0 78px;
    height: 78px;
    justify-content: center;
    width: 78px;
}

.oneupnvj-login .auth-brand-logo {
    display: block;
    height: 58px;
    object-fit: contain;
    width: 58px;
}

.oneupnvj-login .auth-brand-copy,
.oneupnvj-login .auth-brand-name,
.oneupnvj-login .auth-brand-institution {
    display: block;
}

.oneupnvj-login .auth-brand-copy {
    min-width: 0;
}

.oneupnvj-login .auth-brand-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
}

.oneupnvj-login .auth-brand-institution {
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 5px;
}

.oneupnvj-login .login-heading {
    padding: 30px 34px 18px;
    text-align: left;
}

.oneupnvj-login .login-eyebrow {
    background: var(--simpel-accent-soft);
    border-radius: 18px;
    color: var(--simpel-accent-strong);
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    line-height: 1;
    margin-bottom: 11px;
    padding: 6px 10px;
}

.oneupnvj-login .login-eyebrow + .login-eyebrow {
    margin-left: 5px;
}

.oneupnvj-login .wrapper .login-body .login-heading h2 {
    background: transparent;
    color: #273942;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.35px;
    margin: 0 0 7px;
    padding: 0;
}

.oneupnvj-login .login-heading p {
    color: #6a7981;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.oneupnvj-login .login-content {
    padding: 0 34px 34px;
}

.oneupnvj-login .login-content > .alert {
    border-radius: 9px;
    margin-bottom: 17px;
}

.oneupnvj-login .login-info {
    background: #edf5f2;
    border: 0;
    border-left: 3px solid var(--simpel-accent);
    color: #4b685b;
    display: table;
    padding: 15px 16px;
    width: 100%;
}

.oneupnvj-login .login-info-icon,
.oneupnvj-login .login-info-text {
    display: table-cell;
    vertical-align: top;
}

.oneupnvj-login .login-info-icon {
    padding-right: 11px;
    width: 43px;
}

.oneupnvj-login .login-info-icon .fa {
    background: #dcebe5;
    border-radius: 50%;
    color: var(--simpel-accent-strong);
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 32px;
}

.oneupnvj-login .login-info-text {
    font-size: 13px;
    line-height: 1.55;
}

.oneupnvj-login .login-info-text strong {
    color: #345448;
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.oneupnvj-login .auth-entry-actions .btn + .btn {
    margin-top: 11px;
}

.oneupnvj-login .login-action,
.oneupnvj-login .manual-login-panel form {
    padding: 0 !important;
}

.oneupnvj-login .oneupnvj-login-button,
.oneupnvj-login .manual-login-button,
.oneupnvj-login .manual-submit-button {
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    min-height: 50px;
    padding: 13px 44px;
    position: relative;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.oneupnvj-login .oneupnvj-login-button,
.oneupnvj-login .manual-submit-button {
    background: var(--simpel-accent-strong);
    border-color: var(--simpel-accent-strong);
    box-shadow: 0 8px 20px rgba(82, 113, 84, .24);
}

.oneupnvj-login .oneupnvj-login-button:hover,
.oneupnvj-login .oneupnvj-login-button:focus,
.oneupnvj-login .manual-submit-button:hover,
.oneupnvj-login .manual-submit-button:focus {
    background: #405f48;
    border-color: #405f48;
    box-shadow: 0 10px 24px rgba(64, 95, 72, .3);
    color: #fff;
    transform: translateY(-1px);
}

.oneupnvj-login .manual-login-button {
    background: #fff;
    border-color: #ccd7d1;
    color: #40554a;
}

.oneupnvj-login .manual-login-button:hover,
.oneupnvj-login .manual-login-button:focus {
    background: #f4f8f6;
    border-color: var(--simpel-accent);
    color: var(--simpel-accent-strong);
    transform: translateY(-1px);
}

.oneupnvj-login .oneupnvj-button-icon {
    margin-right: 7px;
}

.oneupnvj-login .oneupnvj-button-arrow {
    margin-top: -8px;
    position: absolute;
    right: 18px;
    top: 50%;
}

.oneupnvj-login .manual-login-heading {
    align-items: center;
    border-bottom: 1px solid #e4ebe7;
    display: flex;
    margin-bottom: 19px;
    padding-bottom: 15px;
}

.oneupnvj-login .manual-login-heading strong,
.oneupnvj-login .manual-login-heading small {
    display: block;
}

.oneupnvj-login .manual-login-heading strong {
    color: #34483e;
    font-size: 15px;
}

.oneupnvj-login .manual-login-heading small {
    color: #77847d;
    margin-top: 2px;
}

.oneupnvj-login .manual-back-button {
    background: #edf3ef;
    border: 0;
    border-radius: 50%;
    color: var(--simpel-accent-strong);
    height: 36px;
    margin-right: 11px;
    width: 36px;
}

.oneupnvj-login .manual-login-panel label {
    color: #45584e;
    font-size: 13px;
}

.oneupnvj-login .manual-login-panel .form-control {
    border: 1px solid #ccd7d1;
    border-radius: 7px;
    box-shadow: none;
    height: 43px;
    padding: 9px 12px;
}

.oneupnvj-login .manual-login-panel .form-control:focus {
    border-color: var(--simpel-accent);
    box-shadow: 0 0 0 3px rgba(111, 146, 112, .14);
}

.oneupnvj-login .auth-secondary-link {
    color: #64756c;
    display: block;
    font-size: 13px;
    margin-top: 18px;
    text-align: center;
}

.oneupnvj-login .oidc-link-profile {
    align-items: center;
    background: #f6f9f7;
    border: 1px solid #dbe6df;
    border-radius: 12px;
    display: flex;
    gap: 16px;
    margin-bottom: 17px;
    padding: 16px;
}

.oneupnvj-login .oidc-link-avatar {
    align-items: center;
    background: #dcebe5;
    border-radius: 50%;
    color: var(--simpel-accent-strong);
    display: flex;
    flex: 0 0 64px;
    font-size: 27px;
    height: 64px;
    justify-content: center;
    overflow: hidden;
    width: 64px;
}

.oneupnvj-login .oidc-link-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.oneupnvj-login .oidc-link-profile-data {
    margin: 0;
    min-width: 0;
}

.oneupnvj-login .oidc-link-profile-data > div + div {
    margin-top: 9px;
}

.oneupnvj-login .oidc-link-profile-data dt {
    color: #738179;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.oneupnvj-login .oidc-link-profile-data dd {
    color: #32463b;
    font-size: 14px;
    font-weight: 600;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.oneupnvj-login .oidc-link-cancel .auth-secondary-link {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    padding: 0;
    width: 100%;
}

body.login.simpel-modern-shell.oneupnvj-role-page .wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    left: auto;
    margin: 24px auto !important;
    max-width: calc(100% - 30px);
    position: relative;
    top: auto;
    transform: none;
    width: 540px;
}

.oneupnvj-role-page .auth-brand,
.oneupnvj-role-page .login-heading {
    flex: 0 0 auto;
}

.oneupnvj-role-page .login-heading {
    padding-bottom: 12px;
    padding-top: 22px;
}

.oneupnvj-role-page .wrapper .login-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.oneupnvj-role-page .role-selection-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 16px;
    padding-top: 2px;
}

.oneupnvj-role-page .role-filter-field {
    margin-bottom: 15px;
    position: relative;
}

.oneupnvj-role-page .role-filter-field label {
    color: #45584e;
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.oneupnvj-role-page .role-filter-field .form-control {
    border: 1px solid #ccd7d1;
    border-radius: 9px;
    box-sizing: border-box;
    box-shadow: none;
    height: 43px;
    padding: 9px 12px 9px 50px;
}

.oneupnvj-role-page .role-filter-field .form-control:focus {
    border-color: var(--simpel-accent);
    box-shadow: 0 0 0 3px rgba(111, 146, 112, .14);
}

.oneupnvj-role-page .role-filter-icon {
    align-items: center;
    background: var(--simpel-accent-soft);
    border-radius: 10px;
    color: var(--simpel-accent-strong);
    display: flex;
    font-size: 15px;
    height: 36px;
    justify-content: center;
    left: 4px;
    pointer-events: none;
    position: absolute;
    top: 26px;
    width: 36px;
}

.oneupnvj-role-page .role-filter-field small {
    color: #7b8881;
    display: block;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 5px;
}

.oneupnvj-role-page .role-options {
    flex: 1 1 72px;
    margin-bottom: 21px;
    max-height: none;
    min-height: 72px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 9px 2px 2px;
    scrollbar-color: #a8bbb0 #edf3ef;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.oneupnvj-role-page .role-options:focus {
    border-radius: 10px;
    outline: 2px solid rgba(82, 113, 84, .34);
    outline-offset: 3px;
}

.oneupnvj-role-page .role-options::-webkit-scrollbar {
    width: 8px;
}

.oneupnvj-role-page .role-options::-webkit-scrollbar-track {
    background: #edf3ef;
    border-radius: 8px;
}

.oneupnvj-role-page .role-options::-webkit-scrollbar-thumb {
    background: #a8bbb0;
    border-radius: 8px;
}

.oneupnvj-role-page .role-options::-webkit-scrollbar-thumb:hover {
    background: #839d8e;
}

.oneupnvj-role-page .role-option {
    background: #fff;
    border: 1px solid #dce6e0;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(42, 65, 53, .05);
    color: #31453a;
    display: table;
    margin-bottom: 11px;
    min-height: 72px;
    padding: 13px 46px 13px 14px;
    position: relative;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 100%;
}

.oneupnvj-role-page .role-option:last-child {
    margin-bottom: 0;
}

.oneupnvj-role-page .role-option:hover,
.oneupnvj-role-page .role-option:focus {
    border-color: #91b49a;
    box-shadow: 0 8px 20px rgba(69, 105, 82, .13);
    color: var(--simpel-accent-strong);
    text-decoration: none;
    transform: translateY(-1px);
}

.oneupnvj-role-page .role-option.disabled {
    opacity: .58;
    pointer-events: none;
}

.oneupnvj-role-page .role-option-icon,
.oneupnvj-role-page .role-option-copy {
    display: table-cell;
    vertical-align: middle;
}

.oneupnvj-role-page .role-option-icon {
    width: 48px;
}

.oneupnvj-role-page .role-option-icon .fa {
    background: var(--simpel-accent-soft);
    border-radius: 10px;
    color: var(--simpel-accent-strong);
    font-size: 15px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 36px;
}

.oneupnvj-role-page .role-option-copy strong,
.oneupnvj-role-page .role-option-copy small {
    display: block;
}

.oneupnvj-role-page .role-option-copy strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 3px;
}

.oneupnvj-role-page .role-option-copy small {
    color: #718078;
    font-size: 12px;
    line-height: 1.45;
}

.oneupnvj-role-page .role-option-arrow {
    color: #91a39a;
    font-size: 16px;
    margin-top: -8px;
    position: absolute;
    right: 18px;
    top: 50%;
}

.oneupnvj-role-page .role-option.disabled.is-loading {
    border-color: #91b49a;
    opacity: 1;
}

.oneupnvj-role-page .role-option.is-loading .role-option-arrow {
    color: var(--simpel-accent-strong);
}

.oneupnvj-role-page .role-selection-footer {
    border-top: 1px solid #e4ebe7;
    flex: 0 0 auto;
    padding-top: 12px;
    text-align: center;
}

.oneupnvj-role-page .role-logout-button {
    color: #925657;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.oneupnvj-role-page .role-logout-button .fa {
    margin-right: 6px;
}

.oneupnvj-role-page .role-logout-button:hover,
.oneupnvj-role-page .role-logout-button:focus {
    color: #bd4548;
}

.oneupnvj-role-page .role-empty-state {
    border-radius: 9px;
    margin: 0;
}

.oneupnvj-role-page .role-filter-empty {
    border-radius: 9px;
    margin: 0 0 21px;
}

@media (max-width: 480px) {
    body.login.simpel-modern-shell.oneupnvj-login .wrapper {
        left: 15px;
        margin: 24px 0 !important;
        max-width: calc(100% - 30px);
        position: relative;
        top: auto;
        transform: none;
        width: auto;
    }

    .oneupnvj-login .auth-brand-link {
        gap: 13px;
        min-height: 104px;
        padding: 18px 21px;
    }

    .oneupnvj-login .auth-brand-logo-wrap {
        flex-basis: 66px;
        height: 66px;
        width: 66px;
    }

    .oneupnvj-login .auth-brand-logo {
        height: 50px;
        width: 50px;
    }

    .oneupnvj-login .auth-brand-name {
        font-size: 16px;
    }

    .oneupnvj-login .auth-brand-institution {
        font-size: 12px;
        margin-top: 3px;
    }

    .oneupnvj-login .login-heading {
        padding: 25px 23px 17px;
    }

    .oneupnvj-login .login-content {
        padding: 0 23px 25px;
    }

    .oneupnvj-login .wrapper .login-body .login-heading h2 {
        font-size: 23px;
    }

    body.login.simpel-modern-shell.oneupnvj-role-page .wrapper {
        height: calc(100vh - 30px);
        height: calc(100dvh - 30px);
        left: auto;
        margin: 15px !important;
        max-width: none;
    }
}

body.login.simpel-modern-shell.oneupnvj-role-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}