/*
  SkyLab Modern
  Visual layer for the Code On Time / DAF Touch runtime.
  Keep this file focused on skinning generated UI without changing controller behavior.
*/

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --skylab-bg: #f5f7fb;
    --skylab-surface: #ffffff;
    --skylab-surface-muted: #f8fafc;
    --skylab-border: #dce5ef;
    --skylab-border-soft: #edf2f7;
    --skylab-grid-line: #cfd8e3;
    --skylab-text: #182230;
    --skylab-text-muted: #667085;
    --skylab-primary: #0b5cab;
    --skylab-primary-strong: #094b8c;
    --skylab-primary-soft: #e8f2ff;
    --skylab-success: #17803d;
    --skylab-success-soft: #e8f7ee;
    --skylab-warning: #b7791f;
    --skylab-warning-soft: #fff6df;
    --skylab-danger: #b42318;
    --skylab-danger-soft: #fff1f0;
    --skylab-info: #155eef;
    --skylab-info-soft: #eef4ff;
    --skylab-radius-sm: 6px;
    --skylab-radius-md: 8px;
    --skylab-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --skylab-shadow-md: 0 10px 24px rgba(16, 24, 40, .10);
    --skylab-font: Poppins, Arial, Helvetica, sans-serif;
}

body,
.ui-page,
.ui-btn,
.ui-input-text input,
.ui-input-search input,
.ui-select,
.app-listview,
.app-page-header,
.app-bar-heading,
.app-bar-actions {
    font-family: var(--skylab-font);
}

.app-bar-toolbar {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    box-shadow: var(--skylab-shadow-sm);
    backdrop-filter: saturate(140%) blur(8px);
}

.app-bar-toolbar .app-logo {
    top: 3px !important;
    width: 64px;
    max-height: 44px;
    background-size: 60px auto !important;
    background-position: center calc(50% + 3px) !important;
    background-repeat: no-repeat !important;
}

.app-bar-toolbar .app-logo img,
.app-bar-toolbar .app-logo .PageLogo {
    position: relative;
    top: 3px;
}

.app-bar-toolbar .app-menu-strip-has-title .app-menu-strip-title {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border-radius: 999px;
    color: rgba(24, 34, 48, .86);
    display: inline-flex !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    height: 22px !important;
    line-height: 1 !important;
    margin-left: 12px;
    margin-top: 17px;
    padding: 0 8px !important;
    text-shadow: none;
    text-transform: none !important;
    vertical-align: top;
    white-space: nowrap;
    width: auto !important;
}

#PageHeaderSideBar .PageLogo,
.PageLogo {
    width: auto;
    max-width: 146px;
    max-height: 38px;
    object-fit: contain;
}

.app-page-header {
    background: transparent !important;
    padding: 18px 24px 12px 24px;
    border-bottom: 0;
}

.app-page-header h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
}

.app-page-header h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.app-echo {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--skylab-radius-md);
    box-shadow: var(--skylab-shadow-sm);
    margin: 12px 16px 20px 16px;
    padding: 14px;
}

.app-echo .app-echo-toolbar {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: -14px -14px 12px -14px;
    padding: 8px 12px;
}

.app-echo .app-echo-toolbar h3,
.app-bar-actions h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.app-listview {
    border-radius: var(--skylab-radius-md);
    overflow: hidden;
}

.app-listview.app-grid {
    border-width: 1px;
    border-style: solid;
    box-shadow: none !important;
}

.app-echo .app-echo-inner ul.app-grid {
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.app-listview.app-grid .dv-item .ui-btn,
.app-listview.app-grid .app-list-instruction .app-grid-header {
    padding-right: 0 !important;
}

.app-listview.app-grid .dv-item .ui-btn > .app-btn-more,
.app-listview.app-grid .app-list-instruction .app-grid-header > .app-btn-more {
    display: inline-block !important;
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.app-listview.app-grid .dv-item .ui-btn > .app-row-status,
.app-listview.app-grid .app-list-instruction .app-grid-header > .app-row-status {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-listview.app-grid .app-grid-header,
.app-bar-heading .app-grid-header {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.app-listview.app-grid .app-list-instruction .app-grid-header span:not(.app-icon),
.app-bar-heading .app-grid-header span:not(.app-icon) {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.app-listview.app-grid .dv-item .ui-btn {
    border-bottom-width: 1px !important;
}

.app-listview.app-grid .app-cell-separator,
.app-listview.app-grid .app-field-separator,
.app-listview.app-grid .app-grid-header .app-field-separator,
.app-bar-heading .app-grid-header .app-field-separator {
    background: transparent !important;
    background-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

.app-listview.app-grid .app-grid-header .app-field-separator::after,
.app-listview.app-grid .app-calculated .app-field-separator::after,
.app-bar-heading .app-grid-header .app-field-separator::after {
    background: transparent !important;
    background-color: transparent !important;
    display: none !important;
}

.app-listview.app-grid [data-draggable="grid-header-field"] i.app-field-menu::before,
.app-bar-heading [data-draggable="grid-header-field"] i.app-field-menu::before {
    border-left-color: transparent !important;
    border-left-width: 0 !important;
}

.app-listview .app-field-label-before,
.app-listview .app-field-label-after {
    font-weight: 600;
}

.ui-btn {
    border-radius: var(--skylab-radius-sm);
    text-shadow: none !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn,
.app-echo-toolbar > .app-echo-controls > .ui-btn,
.app-echo-toolbar > .app-echo-see-all,
.app-page-modal-title .app-btn,
.app-btn-promo.ui-btn {
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 600;
    letter-spacing: 0;
    text-shadow: none !important;
    transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.app-bar-actions > .app-bar-controls > .ui-btn:not(.ui-btn-icon-notext),
.app-echo-toolbar > .app-echo-controls > .ui-btn:not(.ui-btn-icon-notext),
.app-echo-toolbar > .app-echo-see-all {
    background: transparent !important;
    border-color: transparent !important;
    font-size: 14px;
    line-height: 18px;
    min-height: 30px;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn:not(.ui-btn-icon-left):not(.ui-btn-icon-notext):not(.app-has-icon),
.app-echo-toolbar > .app-echo-controls > .ui-btn:not(.ui-btn-icon-left):not(.ui-btn-icon-notext):not(.app-has-icon),
.app-echo-toolbar > .app-echo-see-all {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn.app-has-icon:not(.ui-btn-icon-notext),
.app-echo-toolbar > .app-echo-controls > .ui-btn.app-has-icon:not(.ui-btn-icon-notext) {
    padding-left: 34px !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn.app-has-children:not(.ui-btn-icon-notext),
.app-echo-toolbar > .app-echo-controls > .ui-btn.app-has-children:not(.ui-btn-icon-notext) {
    padding-right: 22px !important;
}

.app-desktop .app-bar-actions > .app-bar-controls > .ui-btn:not(.app-disabled):not(.app-btn-disabled):not(.ui-btn-active):not(.app-selected):hover,
.app-desktop .app-echo-toolbar > .app-echo-controls > .ui-btn:not(.app-disabled):not(.app-btn-disabled):not(.ui-btn-active):not(.app-selected):hover,
.app-desktop .app-echo-toolbar > .app-echo-see-all:not(.app-disabled):not(.app-btn-disabled):not(.ui-btn-active):not(.app-selected):hover,
.app-desktop .app-bar-actions > .app-btn-more:not(.app-disabled):not(.app-btn-disabled):hover,
.app-desktop .app-echo-toolbar > .app-btn-more:not(.app-disabled):not(.app-btn-disabled):hover,
.app-desktop .app-bar-toolbar .ui-btn:not(.app-disabled):not(.app-btn-disabled):hover,
.app-desktop .app-page-modal-title .app-btn:not(.app-disabled):not(.app-btn-disabled):hover {
    background: rgba(127, 127, 127, .12) !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn.ui-btn-active,
.app-bar-actions > .app-bar-controls > .ui-btn.app-selected,
.app-echo-toolbar > .app-echo-controls > .ui-btn.ui-btn-active,
.app-echo-toolbar > .app-echo-controls > .ui-btn.app-selected,
.app-echo-toolbar > .app-echo-see-all.ui-btn-active,
.app-echo-toolbar > .app-echo-see-all.app-selected,
.app-page-modal-title .app-btn.ui-btn-active {
    background: rgba(127, 127, 127, .16) !important;
}

.app-bar-actions > .app-btn-more,
.app-echo-toolbar > .app-btn-more,
.app-bar-toolbar .ui-btn-icon-notext,
.app-bar-toolbar .app-btn-context,
.app-bar-toolbar .app-btn-more {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn-icon-notext::after,
.app-bar-actions > .app-btn-more::after,
.app-echo-toolbar > .app-echo-controls > .ui-btn-icon-notext::after,
.app-echo-toolbar > .app-btn-more::after,
.app-bar-toolbar .ui-btn-icon-notext::after,
.app-bar-toolbar .app-btn-context::after,
.app-bar-toolbar .app-btn-more::after,
.app-bar-actions > .app-bar-controls > .ui-btn .app-icon,
.app-echo-toolbar > .app-echo-controls > .ui-btn .app-icon,
.app-bar-toolbar .ui-btn .app-icon {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.app-bar-actions > .app-bar-controls > .ui-btn:focus-visible,
.app-bar-actions > .app-btn-more:focus-visible,
.app-echo-toolbar > .app-echo-controls > .ui-btn:focus-visible,
.app-echo-toolbar > .app-btn-more:focus-visible,
.app-bar-toolbar .ui-btn:focus-visible,
.app-page-modal-title .app-btn:focus-visible,
.app-btn-promo.ui-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.app-bar-actions > .app-bar-controls > .app-disabled,
.app-bar-actions > .app-btn-more.app-disabled,
.app-echo-toolbar > .app-echo-controls > .app-disabled,
.app-echo-toolbar > .app-btn-more.app-disabled,
.app-bar-toolbar .app-disabled,
.app-btn.app-btn-disabled,
.ui-btn.app-btn-disabled {
    box-shadow: none !important;
    opacity: .48;
}

.app-popup-menu .ui-btn-icon-left:not(.ui-btn-icon-notext),
.app-popup-listview .ui-btn-icon-left:not(.ui-btn-icon-notext),
.ui-panel-inner .ui-btn-icon-left:not(.ui-btn-icon-notext) {
    padding-left: 42px !important;
}

.app-popup-menu .ui-btn::after,
.app-popup-listview .ui-btn::after,
.ui-panel-inner .ui-btn::after,
.app-popup-menu .app-icon,
.app-popup-listview .app-icon,
.ui-panel-inner .app-icon {
    display: inline-block;
    visibility: visible;
}

.app-bar-actions .ui-btn:not(.ui-btn-icon-notext),
.app-echo-toolbar .app-echo-controls .ui-btn:not(.ui-btn-icon-notext),
.app-echo-toolbar .app-echo-see-all,
.app-bar-actions .app-btn-promo.ui-btn {
    align-items: center;
    background: rgba(127, 127, 127, .14) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 700;
    height: 28px !important;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 4px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    text-transform: none;
    vertical-align: middle;
}

.app-bar-actions .ui-btn.app-has-icon:not(.ui-btn-icon-notext),
.app-echo-toolbar .app-echo-controls .ui-btn.app-has-icon:not(.ui-btn-icon-notext) {
    padding-left: 12px !important;
}

.app-bar-actions .ui-btn.app-has-icon:not(.ui-btn-icon-notext) .app-icon,
.app-echo-toolbar .app-echo-controls .ui-btn.app-has-icon:not(.ui-btn-icon-notext) .app-icon {
    display: none !important;
    visibility: hidden !important;
}

.app-bar-actions .ui-btn.app-has-children:not(.ui-btn-icon-notext),
.app-echo-toolbar .app-echo-controls .ui-btn.app-has-children:not(.ui-btn-icon-notext) {
    padding-right: 12px !important;
}

.app-bar-actions .ui-btn.app-has-children:not(.ui-btn-icon-notext)::after,
.app-echo-toolbar .app-echo-controls .ui-btn.app-has-children:not(.ui-btn-icon-notext)::after,
.app-echo-toolbar .app-echo-see-all::after,
.app-echo-toolbar .app-echo-see-all .app-icon {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
}

.app-desktop .app-bar-actions .ui-btn:not(.ui-btn-icon-notext):hover,
.app-desktop .app-echo-toolbar .app-echo-controls .ui-btn:not(.ui-btn-icon-notext):hover,
.app-desktop .app-echo-toolbar .app-echo-see-all:hover {
    background: rgba(127, 127, 127, .22) !important;
}

.app-bar-actions .ui-btn-icon-notext,
.app-bar-actions > .app-btn-more,
.app-echo-toolbar .ui-btn-icon-notext,
.app-echo-toolbar > .app-btn-more {
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    height: 28px !important;
    margin: 0 4px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    vertical-align: middle;
    width: 28px !important;
}

.app-desktop .app-bar-actions .ui-btn-icon-notext:hover,
.app-desktop .app-bar-actions > .app-btn-more:hover,
.app-desktop .app-echo-toolbar .ui-btn-icon-notext:hover,
.app-desktop .app-echo-toolbar > .app-btn-more:hover {
    background: rgba(127, 127, 127, .14) !important;
}

.ui-header.app-bar-actions {
    align-items: center !important;
    display: flex !important;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px !important;
}

.ui-header.app-bar-actions h3 {
    align-items: center;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 28px;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: none;
    padding: 0 16px 0 0 !important;
}

.ui-header.app-bar-actions > .app-btn-more {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    flex: 0 0 1px;
    height: 28px !important;
    margin: 0 !important;
    max-width: 1px !important;
    min-height: 28px !important;
    min-width: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    width: 1px !important;
}

.ui-header.app-bar-actions > .app-bar-controls {
    align-items: center;
    display: flex !important;
    flex: 0 1 auto;
    gap: 8px;
    margin: 0 !important;
    max-width: calc(100% - 180px);
    overflow: hidden !important;
    vertical-align: middle;
    width: auto !important;
}

.ui-header.app-bar-actions > .app-bar-controls > a.ui-btn:not(.ui-btn-icon-notext) {
    align-items: center !important;
    background: rgba(127, 127, 127, .14) !important;
    background-color: rgba(127, 127, 127, .14) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: inherit !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 28px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    text-align: center !important;
    text-shadow: none !important;
    text-transform: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.ui-header.app-bar-actions > .app-bar-controls > a.ui-btn.app-has-icon:not(.ui-btn-icon-notext) {
    padding-left: 12px !important;
}

.ui-header.app-bar-actions > .app-bar-controls > a.ui-btn.app-has-icon:not(.ui-btn-icon-notext) .app-icon {
    display: none !important;
    visibility: hidden !important;
}

.ui-header.app-bar-actions > .app-bar-controls > a.ui-btn.app-has-children:not(.ui-btn-icon-notext) {
    padding-right: 12px !important;
}

.ui-header.app-bar-actions > .app-bar-controls > a.ui-btn.app-has-children:not(.ui-btn-icon-notext)::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
}

.app-desktop .ui-header.app-bar-actions > .app-bar-controls > a.ui-btn:not(.ui-btn-icon-notext):hover {
    background: rgba(127, 127, 127, .22) !important;
    background-color: rgba(127, 127, 127, .22) !important;
}

.app-bar-toolbar .app-menu-strip ul {
    align-items: center;
    display: flex;
    gap: 8px;
}

.app-bar-toolbar .app-menu-strip ul li {
    align-items: center;
    display: inline-flex;
}

.app-bar-toolbar .app-menu-strip ul li:nth-of-type(n+3) .ui-btn {
    align-items: center !important;
    background: rgba(127, 127, 127, .14) !important;
    background-color: rgba(127, 127, 127, .14) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: inherit !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 28px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    text-align: center !important;
    text-shadow: none !important;
    text-transform: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.app-bar-toolbar .app-menu-strip ul li:nth-of-type(n+3) .ui-btn.app-has-children {
    padding-right: 12px !important;
}

.app-bar-toolbar .app-menu-strip ul li:nth-of-type(n+3) .ui-btn.app-has-children::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
}

.app-desktop .app-bar-toolbar .app-menu-strip ul li:nth-of-type(n+3) .ui-btn:hover {
    background: rgba(127, 127, 127, .22) !important;
    background-color: rgba(127, 127, 127, .22) !important;
}

.app-page-modal .app-bar-actions {
    align-items: center;
    display: flex !important;
    justify-content: flex-end;
    min-height: 48px;
    padding: 8px 16px !important;
}

.app-page-modal .app-bar-actions > .app-bar-controls {
    align-items: center;
    display: flex !important;
    gap: 8px;
}

.app-page-modal .app-bar-actions .ui-btn:not(.ui-btn-icon-notext),
.app-page-modal .app-bar-actions .app-btn:not(.ui-btn-icon-notext) {
    align-items: center;
    background: rgba(127, 127, 127, .14) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 700;
    height: 28px !important;
    justify-content: center;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    text-transform: none !important;
    vertical-align: middle;
}

.app-desktop .app-page-modal .app-bar-actions .ui-btn:not(.ui-btn-icon-notext):hover,
.app-desktop .app-page-modal .app-bar-actions .app-btn:not(.ui-btn-icon-notext):hover {
    background: rgba(127, 127, 127, .22) !important;
}

.ui-page.app-page-modal .app-bar-footer .app-bar-buttons,
.ui-page.app-page-modal .app-wrapper .app-bar-buttons {
    align-items: center;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-height: 44px;
    padding: 8px 16px !important;
}

.ui-page.app-page-modal .app-bar-buttons .ui-btn:not(.ui-btn-icon-notext),
.ui-page.app-page-modal .app-bar-buttons [data-action-path].ui-btn:not(.ui-btn-icon-notext),
.ui-page.app-page-modal .app-bar-buttons .app-btn:not(.ui-btn-icon-notext) {
    align-items: center !important;
    background: rgba(127, 127, 127, .14) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: inherit !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 28px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 28px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    position: relative !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    width: auto !important;
}

.app-desktop .ui-page.app-page-modal .app-bar-buttons .ui-btn:not(.ui-btn-icon-notext):hover,
.app-desktop .ui-page.app-page-modal .app-bar-buttons [data-action-path].ui-btn:not(.ui-btn-icon-notext):hover {
    background: rgba(127, 127, 127, .22) !important;
}

.ui-input-text,
.ui-input-search,
.app-lookup.ui-btn {
    border-radius: var(--skylab-radius-sm) !important;
    box-shadow: none !important;
}

.ui-popup,
.ui-panel,
.app-page-modal {
    border-radius: var(--skylab-radius-md);
    box-shadow: var(--skylab-shadow-md);
}

.ui-page.app-page-modal [data-layout="form"] [data-container="row"],
.ui-page.app-page-modal [data-layout="form"] [data-container="simple"],
.ui-page.app-page-modal [data-layout="form"] [data-container="collapsible"],
.app-page-modal [data-layout="form"] [data-container="row"],
.app-page-modal [data-layout="form"] [data-container="simple"],
.app-page-modal [data-layout="form"] [data-container="collapsible"] {
    border-bottom-color: transparent !important;
    border-bottom-width: 0 !important;
    border-top-color: transparent !important;
    border-top-width: 0 !important;
}

.app-sidebar,
.ui-panel-inner {
    box-shadow: var(--skylab-shadow-sm);
}

.app-sidebar .ui-btn,
.ui-panel-inner .ui-btn {
    border-radius: var(--skylab-radius-sm);
}

.Fix-Solicitud-Sin-Enviar .ui-btn::before,
.Fix-Solicitud-Sin-Enviar .ui-btn .app-frozen-spacer::before,
.Fix-Solicitud-Vencida .ui-btn::before,
.Fix-Solicitud-Vencida .ui-btn .app-frozen-spacer::before,
.Fix-vencido .ui-btn::before,
.Fix-vencido .ui-btn .app-frozen-spacer::before,
.Fix-proximoavencer .ui-btn::before,
.Fix-proximoavencer .ui-btn .app-frozen-spacer::before,
.Fix-porvencer .ui-btn::before,
.Fix-porvencer .ui-btn .app-frozen-spacer::before {
    width: 4px !important;
    border-radius: 0 4px 4px 0;
}

body.skylab-support-page .app-page-header h1::after,
body.material-icon-Build .app-page-header h1::after {
    content: "Soporte";
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .14);
    color: inherit;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    vertical-align: middle;
}

body.skylab-support-page .skylab-support-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    gap: 16px;
    align-items: start;
    padding: 0 16px 20px 16px;
}

body.skylab-support-page .skylab-support-workspace > [data-controller] {
    min-width: 0;
}

body.skylab-support-page .skylab-support-workspace > [data-controller="Solicitud"] .app-echo,
body.skylab-support-page .skylab-support-workspace > [data-controller="Actividad"] .app-echo {
    margin-left: 0;
    margin-right: 0;
}

body.skylab-support-page .app-listview.app-grid .dv-item .ui-btn,
body.material-icon-Build .app-listview.app-grid .dv-item .ui-btn {
    min-height: 42px;
}

body.skylab-support-page .app-bar-actions,
body.material-icon-Build .app-bar-actions {
    background: transparent;
}

@media (max-width: 767px) {
    .app-page-header {
        padding: 14px 16px 8px 16px;
    }

    .app-page-header h1 {
        font-size: 19px;
        line-height: 26px;
    }

    .app-echo {
        margin: 10px 10px 16px 10px;
        border-radius: var(--skylab-radius-sm);
    }

    body.skylab-support-page .skylab-support-workspace {
        display: block;
        padding: 0 10px 16px 10px;
    }
}

/* Modern login landing */
.skylab-login-page {
    margin: 0;
    background: #f4f7fb;
    color: var(--skylab-text);
}

#app-welcome.skylab-login-page,
.skylab-login-page #app-welcome {
    min-height: 100vh;
    background: #f4f7fb;
}

.skylab-login-page .skylab-login-shell {
    display: block;
    min-height: 100vh;
    overflow: hidden;
}

.skylab-login-page .skylab-login-hero {
    position: relative;
    min-height: 620px;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(9, 35, 62, .92) 0%, rgba(9, 35, 62, .70) 42%, rgba(9, 35, 62, .14) 100%),
        url("../images/banner.jpg") center center / cover no-repeat;
}

.skylab-login-page .skylab-login-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0;
}

.skylab-login-page .skylab-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.skylab-login-page .skylab-login-brand img {
    display: block;
    width: 110px;
    height: auto;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
}

.skylab-login-page .skylab-login-badge,
.skylab-login-page .skylab-login-section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}

.skylab-login-page .skylab-login-hero-content {
    position: relative;
    z-index: 1;
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 220px 0 130px 0;
}

.skylab-login-page .skylab-login-eyebrow {
    width: fit-content;
    margin: 0 0 16px 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}

.skylab-login-page .skylab-login-hero h1 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: 68px;
    line-height: 76px;
    font-weight: 700;
    letter-spacing: 0;
}

.skylab-login-page .skylab-login-lead {
    max-width: 660px;
    margin: 18px 0 0 0;
    color: rgba(255, 255, 255, .90);
    font-size: 21px;
    line-height: 34px;
    font-weight: 400;
}

.skylab-login-page .skylab-login-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.skylab-login-page .skylab-login-actions > span {
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
}

.skylab-login-page .skylab-login-primary,
.skylab-login-page .skylab-login-primary.ui-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #12385d !important;
    box-shadow: 0 10px 24px rgba(2, 20, 37, .22) !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.skylab-login-page .skylab-login-primary:hover,
.skylab-login-page .skylab-login-primary.ui-btn:hover {
    background: #edf6ff !important;
    color: #0b5cab !important;
}

.skylab-login-page .skylab-login-overview,
.skylab-login-page .skylab-login-feature-grid,
.skylab-login-page .skylab-login-support {
    width: min(1160px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.skylab-login-page .skylab-login-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .84fr);
    gap: 36px;
    align-items: start;
    padding: 54px 0 28px 0;
}

.skylab-login-page .skylab-login-intro h2,
.skylab-login-page .skylab-login-support h2 {
    margin: 12px 0 0 0;
    color: var(--skylab-text);
    font-size: 34px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: 0;
}

.skylab-login-page .skylab-login-intro p,
.skylab-login-page .skylab-login-support p {
    margin: 16px 0 0 0;
    color: var(--skylab-text-muted);
    font-size: 16px;
    line-height: 28px;
}

.skylab-login-page .skylab-login-section-kicker {
    background: var(--skylab-primary-soft);
    color: var(--skylab-primary);
}

.skylab-login-page .skylab-login-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.skylab-login-page .skylab-login-metrics > div,
.skylab-login-page .skylab-login-feature-grid > article {
    border: 1px solid var(--skylab-border);
    border-radius: var(--skylab-radius-md);
    background: var(--skylab-surface);
    box-shadow: var(--skylab-shadow-sm);
}

.skylab-login-page .skylab-login-metrics > div {
    padding: 18px 20px;
}

.skylab-login-page .skylab-login-metrics strong {
    display: block;
    margin-bottom: 5px;
    color: var(--skylab-text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}

.skylab-login-page .skylab-login-metrics span {
    display: block;
    color: var(--skylab-text-muted);
    font-size: 14px;
    line-height: 22px;
}

.skylab-login-page .skylab-login-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 18px 0 56px 0;
}

.skylab-login-page .skylab-login-feature-grid > article {
    padding: 24px;
}

.skylab-login-page .skylab-login-feature-grid > article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--skylab-primary-soft);
    color: var(--skylab-primary);
    font-size: 13px;
    font-weight: 700;
}

.skylab-login-page .skylab-login-feature-grid h3 {
    margin: 16px 0 0 0;
    color: var(--skylab-text);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}

.skylab-login-page .skylab-login-feature-grid p {
    margin: 10px 0 0 0;
    color: var(--skylab-text-muted);
    font-size: 14px;
    line-height: 24px;
}

.skylab-login-page .skylab-login-support {
    margin-bottom: 56px;
    padding: 30px;
    border: 1px solid #d7e7f6;
    border-radius: var(--skylab-radius-md);
    background: #ffffff;
    box-shadow: var(--skylab-shadow-sm);
}

@media (max-width: 900px) {
    .skylab-login-page .skylab-login-hero {
        min-height: 560px;
        background:
            linear-gradient(90deg, rgba(9, 35, 62, .94) 0%, rgba(9, 35, 62, .76) 100%),
            url("../images/banner.jpg") center center / cover no-repeat;
    }

    .skylab-login-page .skylab-login-overview,
    .skylab-login-page .skylab-login-feature-grid {
        grid-template-columns: 1fr;
    }

    .skylab-login-page .skylab-login-hero h1 {
        font-size: 52px;
        line-height: 60px;
    }

    .skylab-login-page .skylab-login-lead {
        font-size: 18px;
        line-height: 30px;
    }
}

@media (max-width: 600px) {
    .skylab-login-page .skylab-login-topbar,
    .skylab-login-page .skylab-login-hero-content,
    .skylab-login-page .skylab-login-overview,
    .skylab-login-page .skylab-login-feature-grid,
    .skylab-login-page .skylab-login-support {
        width: min(100% - 28px, 1160px);
    }

    .skylab-login-page .skylab-login-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 20px;
    }

    .skylab-login-page .skylab-login-brand img {
        width: 92px;
    }

    .skylab-login-page .skylab-login-hero-content {
        padding: 132px 0 82px 0;
    }

    .skylab-login-page .skylab-login-hero h1 {
        font-size: 42px;
        line-height: 50px;
    }

    .skylab-login-page .skylab-login-intro h2,
    .skylab-login-page .skylab-login-support h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .skylab-login-page .skylab-login-overview {
        padding-top: 34px;
    }
}

body.app-theme-dark {
    --skylab-bg: #101828;
    --skylab-surface: #182230;
    --skylab-surface-muted: #202b3c;
    --skylab-border: #344054;
    --skylab-border-soft: #293548;
    --skylab-grid-line: #475467;
    --skylab-text: #f2f4f7;
    --skylab-text-muted: #98a2b3;
    --skylab-primary-soft: rgba(46, 144, 250, .16);
}