/* Final system theme layer.
   Loaded last so app_settings typography/colors win over old page-specific CSS. */

:root {
    --system-font-family: var(--font-family-base, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif);
    --system-font-size: 13px;
    --system-nav-font-size: 13px;
    --system-font-weight: 500;
    --system-heading-weight: 800;
    --system-line-height: 1.6;
}

.btn.btn-icon-only {
    inline-size: 34px;
    min-inline-size: 34px;
    block-size: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.msar-shell.msar-classic .msar-warehouse-request-table,
.msar-warehouse-request-table {
    width: 100% !important;
    min-width: 860px !important;
    table-layout: fixed !important;
}

.msar-warehouse-request-table col.warehouse-request-col-index {
    width: 60px !important;
}

.msar-warehouse-request-table col.warehouse-request-col-item {
    width: 360px !important;
}

.msar-warehouse-request-table col.warehouse-request-col-unit {
    width: 96px !important;
}

.msar-warehouse-request-table col.warehouse-request-col-quantity {
    width: 92px !important;
}

.msar-warehouse-request-table col.warehouse-request-col-notes {
    width: auto !important;
}

.msar-warehouse-request-table col.warehouse-request-col-actions {
    width: 46px !important;
}

.msar-warehouse-request-table th,
.msar-warehouse-request-table td {
    vertical-align: middle;
    box-sizing: border-box;
}

body.msar-shell.msar-classic .msar-warehouse-request-table th:nth-child(1),
body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(1),
.msar-warehouse-request-table th:nth-child(1),
.msar-warehouse-request-table td:nth-child(1) {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-table th:nth-child(2),
body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(2),
.msar-warehouse-request-table th:nth-child(2),
.msar-warehouse-request-table td:nth-child(2) {
    width: 360px !important;
    min-width: 0 !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-table th:nth-child(3),
body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(3),
body.msar-shell.msar-classic .msar-warehouse-request-table th:nth-child(4),
body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(4),
.msar-warehouse-request-table th:nth-child(3),
.msar-warehouse-request-table td:nth-child(3),
.msar-warehouse-request-table th:nth-child(4),
.msar-warehouse-request-table td:nth-child(4) {
    width: 96px !important;
    min-width: 0 !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-table th:nth-child(6),
body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(6),
.msar-warehouse-request-table th:nth-child(6),
.msar-warehouse-request-table td:nth-child(6) {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    text-align: center !important;
    padding-inline: 6px !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-table th:nth-child(5),
body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(5),
.msar-warehouse-request-table th:nth-child(5),
.msar-warehouse-request-table td:nth-child(5) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.msar-warehouse-request-table .warehouse-request-code,
.msar-warehouse-request-table .warehouse-request-unit {
    background: var(--bg-soft, #f8fbff);
}

.msar-warehouse-request-table .msar-readonly-generated-field,
.msar-warehouse-request-table .warehouse-request-unit {
    cursor: not-allowed;
    color: var(--text-main, #2D3748);
    border-color: color-mix(in srgb, var(--border-soft, #e5edf7) 85%, var(--brand-slate, #5f6b7a)) !important;
}

.msar-warehouse-request-table .warehouse-request-code {
    text-align: center;
    font-weight: 700;
}

.msar-warehouse-request-table .warehouse-request-quantity {
    text-align: center;
    font-weight: 700;
    background: var(--white, #ffffff);
}

.msar-warehouse-request-table .warehouse-request-notes {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-table td:nth-child(6) .btn-icon-only,
.msar-warehouse-request-table td:nth-child(6) .btn-icon-only {
    inline-size: 34px !important;
    min-inline-size: 34px !important;
    max-inline-size: 34px !important;
    block-size: 34px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table {
    width: 100% !important;
    min-width: 1120px !important;
    table-layout: fixed !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table :where(th, td) {
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table th[data-warehouse-line-delete-head],
body.msar-shell.msar-classic .msar-warehouse-line-table th.warehouse-line-delete-cell,
body.msar-shell.msar-classic .msar-warehouse-line-table td.warehouse-line-delete-cell {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    text-align: center !important;
    padding-inline: 6px !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-index-cell {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    text-align: center !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-item-cell {
    width: 280px !important;
    min-width: 280px !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-unit-cell,
body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-quantity-cell {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-supplier-cell {
    width: 190px !important;
    min-width: 190px !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-money-cell,
body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-status-cell,
body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-default-cell {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table .warehouse-line-notes-cell {
    width: auto !important;
    min-width: 180px !important;
    max-width: none !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table td.warehouse-line-delete-cell .btn-icon-only {
    inline-size: 34px !important;
    min-inline-size: 34px !important;
    max-inline-size: 34px !important;
    block-size: 34px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table :where(input, select, textarea, .msar-employee-combo, .msar-employee-combo-search, .msar-employee-combo-input) {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
}

body.msar-shell.msar-classic .msar-warehouse-line-table :where(td, tr, tbody) {
    overflow: visible !important;
}

body.msar-shell.msar-classic :where(.table-wrap, .table-responsive, .responsive-table-wrap):has(.msar-warehouse-line-table),
body.msar-shell.msar-classic .card:has(.msar-warehouse-line-table),
body.msar-shell.msar-classic .card:has(.msar-warehouse-line-table) > form {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.msar-shell.msar-classic :where(.table-wrap, .table-responsive, .responsive-table-wrap):has(.msar-warehouse-line-table)::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.msar-warehouse-request-table :where(input, select, textarea, .msar-employee-combo, .msar-employee-combo-search, .msar-employee-combo-input) {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
}

.msar-warehouse-request-table .warehouse-request-item-cell {
    overflow: visible;
}

.msar-warehouse-request-table .warehouse-request-item-cell .msar-warehouse-combo,
.msar-warehouse-request-table .warehouse-request-item-cell .msar-employee-combo {
    min-width: 330px !important;
}

.msar-warehouse-request-table .warehouse-request-item-cell .msar-employee-combo-search {
    min-height: 38px !important;
    border-radius: 8px !important;
}

.msar-warehouse-request-table .warehouse-request-item-cell .msar-employee-combo-input {
    height: 38px !important;
    min-height: 38px !important;
}

.msar-warehouse-request-table .warehouse-request-item-cell .msar-employee-combo-icon {
    min-height: 38px !important;
}

html,
body {
    background: var(--brand-page-bg, var(--bg-light, #F8FAFC)) !important;
    color: var(--brand-text, var(--text-main, #2D3748)) !important;
}

body.msar-shell.msar-classic,
body.msar-shell.msar-classic :where(*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="fa-"]):not([class*=" fa-"]):not(.msar-fa-svg)),
body.auth-page,
body.auth-page :where(*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="fa-"]):not([class*=" fa-"]):not(.msar-fa-svg)) {
    font-family: var(--system-font-family) !important;
    font-weight: var(--system-font-weight);
    line-height: var(--system-line-height);
}

body.msar-shell.msar-classic :where(input, select, textarea, button, table, th, td, label, a, p, span, div, strong, small) {
    font-family: var(--system-font-family) !important;
}

body.msar-shell.msar-classic :where(h1, h2, h3, h4, h5, h6, .section-title, .brand-title, .module-page-title h2, .msar-sidebar-module-title, .module-sidebar-group-title) {
    font-family: var(--system-font-family) !important;
    font-weight: var(--system-heading-weight) !important;
}

body :where(.fa, .fas, .fa-solid),
body.msar-shell.msar-classic :where(.fa, .fas, .fa-solid) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

body :where(.far, .fa-regular),
body.msar-shell.msar-classic :where(.far, .fa-regular) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

body :where(.fab, .fa-brands),
body.msar-shell.msar-classic :where(.fab, .fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

body :where(svg.msar-fa-svg, .msar-fa-svg),
body.msar-shell.msar-classic :where(svg.msar-fa-svg, .msar-fa-svg) {
    font-family: initial !important;
}

body.msar-shell.msar-classic {
    --msar-shell-primary: var(--brand-blue, #1988d8) !important;
    --msar-shell-primary-dark: var(--brand-navy-soft, #0b2d5c) !important;
    --msar-shell-page-bg: var(--brand-page-bg, var(--bg-light, #F8FAFC)) !important;
    --msar-shell-surface: var(--brand-surface, #fff) !important;
    --msar-shell-border: var(--brand-border, var(--border-soft, #e5edf7)) !important;
    --msar-shell-text: var(--brand-text, #2D3748) !important;
    --msar-shell-muted: var(--brand-muted, #718096) !important;
    --msar-shell-sidebar-bg: var(--brand-navy, #0A192F) !important;
    --msar-shell-sidebar-active: var(--brand-navy-soft, #0b2d5c) !important;
    --msar-shell-sidebar-hover: var(--brand-navy-soft, #0b2d5c) !important;
    --msar-primary: var(--brand-blue, #1988d8) !important;
    --msar-primary-dark: var(--brand-navy-soft, #0b2d5c) !important;
    --msar-primary-light: var(--bg-muted, #eef5ff) !important;
    --shell-orange: var(--brand-blue, #1988d8) !important;
    --shell-black: var(--brand-navy, #0A192F) !important;
    --shell-brown: var(--brand-navy-soft, #0b2d5c) !important;
    --shell-gold: var(--brand-gold, #C5A059) !important;
    --shell-blue: var(--brand-blue, #1988d8) !important;
    background: var(--brand-page-bg, var(--bg-light, #F8FAFC)) !important;
    color: var(--brand-text, #2D3748) !important;
}

body.msar-shell.msar-classic .main-form,
body.msar-shell.msar-classic .dashboard {
    background: var(--brand-page-bg, var(--bg-light, #F8FAFC)) !important;
    color: var(--brand-text, #2D3748) !important;
}

body.msar-shell.msar-classic .main-topbar,
body.msar-shell.msar-classic .module-switcher-wrap {
    background: var(--brand-header-bg, #fff) !important;
    color: var(--brand-header-text, var(--brand-ink, #0f172a)) !important;
    border-color: var(--brand-border, var(--border-soft, #e5edf7)) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
}

body.msar-shell.msar-classic .module-tab {
    background: transparent !important;
    color: var(--brand-slate, #5f6b7a) !important;
    border-bottom-color: transparent !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-icon,
body.msar-shell.msar-classic .module-tab .msar-module-icon :where(i, svg, .msar-fa-svg) {
    color: var(--brand-blue, #1988d8) !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-text {
    color: var(--brand-ink, #0f172a) !important;
    font-family: var(--system-font-family) !important;
    font-size: max(10px, calc(var(--system-nav-font-size) - 2px)) !important;
}

body.msar-shell.msar-classic .module-tab.active,
body.msar-shell.msar-classic .module-tab:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-blue, #1988d8) 10%, #fff), var(--bg-soft, #f8fbff)) !important;
    border-bottom-color: var(--brand-gold, #C5A059) !important;
    color: var(--brand-navy, #0A192F) !important;
}

body.msar-shell.msar-classic .side-info,
body.msar-shell.msar-classic .msar-sidebar-scroll {
    background: var(--brand-navy, #0A192F) !important;
    background: linear-gradient(180deg, var(--brand-navy, #0A192F) 0%, color-mix(in srgb, var(--brand-navy, #0A192F) 88%, var(--brand-blue, #1988d8) 12%) 100%) !important;
    color: var(--brand-sidebar-text, #fff) !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle,
body.msar-shell.msar-classic .msar-sidebar-brand,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline {
    background: var(--brand-navy, #0A192F) !important;
    background: color-mix(in srgb, var(--brand-navy, #0A192F) 92%, var(--brand-blue, #1988d8) 8%) !important;
    border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 14%, transparent) !important;
    color: var(--brand-sidebar-text, #fff) !important;
}

body.msar-shell.msar-classic .side-info .brand-title,
body.msar-shell.msar-classic .side-info .brand-subtitle,
body.msar-shell.msar-classic .side-footer,
body.msar-shell.msar-classic .module-sidebar-group-title,
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-text,
body.msar-shell.msar-classic .side-info .sidebar-nav a,
body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-text,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-text {
    font-family: var(--system-font-family) !important;
    font-size: var(--system-nav-font-size) !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title {
    background: transparent !important;
    border-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    color: color-mix(in srgb, var(--brand-sidebar-text, #fff) 88%, transparent) !important;
    font-weight: 700 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-text {
    color: inherit !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-icon,
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-chevron,
body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon {
    color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 62%, var(--brand-sidebar-text, #fff) 38%) !important;
    background: transparent !important;
}

body.msar-shell.msar-classic .module-sidebar-group.is-open > .module-sidebar-group-title,
body.msar-shell.msar-classic .module-sidebar-group.has-active > .module-sidebar-group-title,
body.msar-shell.msar-classic .module-sidebar-group-title:hover,
body.msar-shell.msar-classic .module-sidebar-group-title:focus-visible {
    background: var(--brand-navy-soft, #0b2d5c) !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 16%, var(--brand-navy, #0A192F) 84%) !important;
    border-right-color: var(--brand-blue, #1988d8) !important;
    border-top-color: color-mix(in srgb, var(--brand-blue, #1988d8) 35%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--brand-blue, #1988d8) 35%, transparent) !important;
    border-left-color: color-mix(in srgb, var(--brand-blue, #1988d8) 35%, transparent) !important;
    color: var(--white, #fff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-blue, #1988d8) 18%, transparent) !important;
}

body.msar-shell.msar-classic .module-sidebar-nav,
body.msar-shell.msar-classic .side-info .module-sidebar-nav {
    position: relative !important;
    --sidebar-dot-size: 8px;
    --sidebar-dot-rail-x: 15px;
    --sidebar-dot-offset-x: -16.5px;
    background: transparent !important;
    padding-inline-start: 8px !important;
    padding-inline-end: 28px !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    bottom: 18px !important;
    right: 15px !important;
    width: 1px !important;
    display: block !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 36%, transparent) !important;
    border-radius: 999px !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a {
    position: relative !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--brand-sidebar-text, #fff) 88%, transparent) !important;
    border-right-color: transparent !important;
    font-weight: 700 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a::before {
    content: "" !important;
    position: absolute !important;
    right: var(--sidebar-dot-offset-x, -16.5px) !important;
    top: 50% !important;
    width: var(--sidebar-dot-size, 8px) !important;
    height: var(--sidebar-dot-size, 8px) !important;
    display: block !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 74%, var(--brand-cyan, #42d9f4) 26%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1988d8) 12%, transparent) !important;
    opacity: .92 !important;
    z-index: 2 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a::after {
    display: none !important;
    content: none !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a:has(.nav-icon)::before {
    display: none !important;
    content: none !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .sidebar-nav a:focus-visible,
body.msar-shell.msar-classic .side-info .sidebar-nav a.active,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active {
    background: var(--brand-navy-soft, #0b2d5c) !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 12%, transparent) !important;
    border-right-color: color-mix(in srgb, var(--brand-blue, #1988d8) 75%, var(--brand-cyan, #42d9f4) 25%) !important;
    color: var(--white, #fff) !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active::before {
    width: 8px !important;
    height: 8px !important;
    background: var(--brand-cyan, #42d9f4) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-cyan, #42d9f4) 18%, transparent) !important;
    opacity: 1 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon {
    position: absolute !important;
    top: 50% !important;
    right: var(--sidebar-dot-offset-x, -16.5px) !important;
    z-index: 2 !important;
    width: var(--sidebar-dot-size, 8px) !important;
    min-width: var(--sidebar-dot-size, 8px) !important;
    height: var(--sidebar-dot-size, 8px) !important;
    display: block !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 74%, var(--brand-cyan, #42d9f4) 26%) !important;
    color: transparent !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1988d8) 12%, transparent) !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon :where(i, svg, .msar-fa-svg) {
    display: none !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active .nav-icon {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    background: var(--brand-cyan, #42d9f4) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-cyan, #42d9f4) 18%, transparent) !important;
}

/* Sidebar child rail: keep circles visible and align the rail through their center. */
body.msar-shell.msar-classic .side-info .module-sidebar-nav {
    --sidebar-dot-size: 9px;
    --sidebar-dot-size-active: 11px;
    --sidebar-dot-rail-x: 15px;
    --sidebar-item-padding-right: 28px;
    --sidebar-dot-offset-x: -17.5px;
    --sidebar-dot-offset-x-active: -18.5px;
    padding: 4px var(--sidebar-item-padding-right) 8px 8px !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav::before {
    right: var(--sidebar-dot-rail-x) !important;
    width: 1px !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 48%, var(--brand-navy-soft, #0b2d5c) 52%) !important;
    opacity: .8 !important;
    z-index: 0 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active {
    padding: 0 var(--sidebar-item-padding-right) 0 4px !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a::after,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:has(.nav-icon)::before {
    display: none !important;
    content: none !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon {
    position: absolute !important;
    top: 50% !important;
    right: var(--sidebar-dot-offset-x) !important;
    z-index: 3 !important;
    display: block !important;
    width: var(--sidebar-dot-size) !important;
    min-width: var(--sidebar-dot-size) !important;
    height: var(--sidebar-dot-size) !important;
    min-height: var(--sidebar-dot-size) !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 70%, var(--brand-cyan, #42d9f4) 30%) !important;
    border: 2px solid color-mix(in srgb, var(--brand-navy, #0A192F) 92%, var(--brand-blue, #1988d8) 8%) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-blue, #1988d8) 18%, transparent) !important;
    opacity: 1 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon :where(i, svg, .msar-fa-svg) {
    display: none !important;
    opacity: 0 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active .nav-icon {
    right: var(--sidebar-dot-offset-x-active) !important;
    width: var(--sidebar-dot-size-active) !important;
    min-width: var(--sidebar-dot-size-active) !important;
    height: var(--sidebar-dot-size-active) !important;
    min-height: var(--sidebar-dot-size-active) !important;
    background: var(--brand-cyan, #42d9f4) !important;
    border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 70%, var(--brand-navy, #0A192F) 30%) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand-blue, #1988d8) 24%, transparent),
        0 0 14px color-mix(in srgb, var(--brand-cyan, #42d9f4) 34%, transparent) !important;
}

body.msar-shell.msar-classic .side-footer {
    background: var(--brand-navy, #0A192F) !important;
    background: color-mix(in srgb, var(--brand-navy, #0A192F) 92%, var(--brand-blue, #1988d8) 8%) !important;
    color: color-mix(in srgb, var(--brand-sidebar-text, #fff) 72%, transparent) !important;
    border-top-color: color-mix(in srgb, var(--brand-blue, #1988d8) 14%, transparent) !important;
}

* {
    scrollbar-color: color-mix(in srgb, var(--brand-blue, #1988d8) 70%, var(--brand-cyan, #42d9f4) 30%) transparent !important;
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 70%, var(--brand-cyan, #42d9f4) 30%) !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--brand-cyan, #42d9f4) !important;
}

::selection {
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 22%, transparent) !important;
    color: var(--brand-ink, #0f172a) !important;
}

body.msar-shell.msar-classic .side-info ::selection,
body.msar-shell.msar-classic .msar-sidebar-scroll ::selection {
    background: color-mix(in srgb, var(--brand-cyan, #42d9f4) 24%, var(--brand-navy-soft, #0b2d5c) 76%) !important;
    color: var(--white, #fff) !important;
}

body.msar-shell.msar-classic .msar-breadcrumb-bar,
body.msar-shell.msar-classic .breadcrumb-bar,
body.msar-shell.msar-classic .breadcrumb,
body.msar-shell.msar-classic .module-page-title {
    background: var(--brand-breadcrumb-bg, var(--bg-soft, #f8fbff)) !important;
    color: var(--brand-breadcrumb-text, var(--brand-ink, #0f172a)) !important;
    border-color: var(--brand-border, var(--border-soft, #e5edf7)) !important;
}

body.msar-shell.msar-classic :where(.card, .ui-card, .app-card, .dashboard-card, .analytics-card, .chart-card, .kpi, .kpi-card, .metric-card, .stat-card, .info-card, .filter-card, .msar-filter-section, .advanced-filter, .search-card, .panel, .box) {
    background: var(--brand-surface, #fff) !important;
    border-color: var(--brand-border, var(--border-soft, #e5edf7)) !important;
    color: var(--brand-text, #2D3748) !important;
    box-shadow: var(--shadow-sm, 0 8px 24px rgba(15, 23, 42, .06)) !important;
}

body.msar-shell.msar-classic :where(.muted, .text-muted, .hint, .help-text, small) {
    color: var(--brand-muted, #718096) !important;
}

body.msar-shell.msar-classic :where(input, select, textarea, .input, .select, .textarea, .input-ctrl) {
    background: var(--brand-surface, #fff) !important;
    border-color: var(--brand-border, var(--border-soft, #e5edf7)) !important;
    color: var(--brand-text, #2D3748) !important;
}

body.msar-shell.msar-classic :where(input, select, textarea, .input, .select, .textarea, .input-ctrl):focus {
    border-color: var(--brand-blue, #1988d8) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cyan, #42d9f4) 24%, transparent) !important;
}

body.msar-shell.msar-classic .label-with-help {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
}

body.msar-shell.msar-classic .help-dot.msar-auto-help-dot,
body.msar-shell.msar-classic .help-dot {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    border-color: color-mix(in srgb, var(--brand-gold, #C5A059) 56%, var(--brand-blue, #1988d8) 44%) !important;
    background: color-mix(in srgb, var(--brand-gold, #C5A059) 14%, var(--white, #fff) 86%) !important;
    color: var(--brand-navy, #0A192F) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

body.msar-shell.msar-classic th .help-dot.msar-auto-help-dot,
body.msar-shell.msar-classic .chip .help-dot.msar-auto-help-dot {
    margin-inline-start: 5px !important;
}

body.msar-shell.msar-classic .help-dot:hover,
body.msar-shell.msar-classic .help-dot:focus {
    background: var(--brand-blue, #1988d8) !important;
    border-color: var(--brand-cyan, #42d9f4) !important;
    color: var(--white, #fff) !important;
}

body.msar-shell.msar-classic #cursor-help-tooltip {
    background: color-mix(in srgb, var(--brand-navy, #0A192F) 94%, var(--brand-blue, #1988d8) 6%) !important;
    border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 25%, transparent) !important;
    box-shadow: 0 18px 42px rgba(10, 25, 47, .24) !important;
}

select.msar-employee-native-select,
body.msar-shell.msar-classic select.msar-employee-native-select,
body.msar-shell.msar-classic .msar-employee-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

body.msar-shell.msar-classic .msar-employee-combo + select.msar-employee-native-select,
body.msar-shell.msar-classic .msar-warehouse-combo + select.msar-employee-native-select {
    display: none !important;
}

body.msar-shell.msar-classic .msar-employee-combo {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

body.msar-shell.msar-classic .msar-employee-combo.is-open {
    z-index: 120 !important;
}

body.msar-shell.msar-classic .msar-employee-combo-host-open {
    overflow: visible !important;
}

body.msar-shell.msar-classic .msar-employee-combo-search {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 1px solid var(--brand-border, var(--border-soft, #e5edf7)) !important;
    border-radius: 6px !important;
    background: var(--brand-surface, #fff) !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic .msar-employee-combo:focus-within .msar-employee-combo-search {
    border-color: var(--brand-blue, #1988d8) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cyan, #42d9f4) 20%, transparent) !important;
}

body.msar-shell.msar-classic .msar-employee-combo-icon,
body.msar-shell.msar-classic .msar-employee-combo-clear {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand-navy, #0A192F) !important;
    background: var(--bg-soft, #f8fbff) !important;
}

body.msar-shell.msar-classic .msar-employee-combo-icon {
    border-inline-start: 1px solid var(--brand-border, var(--border-soft, #e5edf7)) !important;
}

body.msar-shell.msar-classic .msar-employee-combo-clear {
    border: 0 !important;
    border-inline-start: 1px solid var(--brand-border, var(--border-soft, #e5edf7)) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

body.msar-shell.msar-classic .msar-employee-combo-clear:hover {
    background: var(--brand-blue, #1988d8) !important;
    color: var(--white, #fff) !important;
}

body.msar-shell.msar-classic .msar-employee-combo-input.input,
body.msar-shell.msar-classic .msar-employee-combo-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--brand-surface, #fff) !important;
    padding: 0 10px !important;
}

body.msar-shell.msar-classic .msar-employee-combo-input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

body.msar-shell.msar-classic .msar-locked-combo .msar-employee-combo-input[readonly] {
    color: var(--brand-text, #2D3748) !important;
    background: var(--bg-soft, #f8fbff) !important;
    cursor: default !important;
}

body.msar-shell.msar-classic .msar-employee-combo-list {
    --msar-combo-row-height: 36px;
    position: absolute !important;
    top: calc(100% + 2px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-height: calc(var(--msar-combo-row-height) * 5) !important;
    max-height: calc(var(--msar-combo-row-height) * 8) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--brand-border, var(--border-soft, #e5edf7)) !important;
    border-radius: 0 0 8px 8px !important;
    background: var(--brand-surface, #fff) !important;
    box-shadow: 0 18px 38px rgba(10, 25, 47, .16) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--brand-blue, #1988d8) var(--bg-muted, #eef5ff) !important;
}

body.msar-shell.msar-classic .msar-employee-combo-option,
body.msar-shell.msar-classic .msar-employee-combo-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: var(--msar-combo-row-height, 36px) !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--brand-border-soft, var(--border-soft, #e5edf7)) !important;
    background: var(--brand-surface, #fff) !important;
    color: var(--brand-text, #2D3748) !important;
    text-align: right !important;
    white-space: normal !important;
    cursor: pointer !important;
}

body.msar-shell.msar-classic .msar-employee-combo-option:hover,
body.msar-shell.msar-classic .msar-employee-combo-option.is-active {
    background: var(--bg-muted, #eef5ff) !important;
    color: var(--brand-blue, #1988d8) !important;
}

body.msar-shell.msar-classic .msar-employee-combo-empty {
    cursor: default !important;
    color: var(--brand-muted, #718096) !important;
}

body.msar-shell.msar-classic :where(table, .table, .data-table) {
    color: var(--brand-text, #2D3748) !important;
    border-color: var(--brand-border, var(--border-soft, #e5edf7)) !important;
}

body.msar-shell.msar-classic :where(table th, .table th, .data-table th) {
    background: var(--bg-muted, #eef5ff) !important;
    color: var(--brand-ink, #0f172a) !important;
    border-color: var(--brand-border, var(--border-soft, #e5edf7)) !important;
}

body.msar-shell.msar-classic :where(table td, .table td, .data-table td) {
    border-color: var(--brand-border-soft, var(--border-soft, #e5edf7)) !important;
}

body.msar-shell.msar-classic :where(.btn-primary, button.btn-primary, a.btn-primary, input[type="submit"].btn-primary) {
    background: var(--brand-blue, #1988d8) !important;
    border-color: var(--brand-blue, #1988d8) !important;
    color: var(--brand-button-text, #fff) !important;
}

body.msar-shell.msar-classic :where(.btn-success, button.btn-success, a.btn-success) {
    background: var(--brand-green, #38d67a) !important;
    border-color: var(--brand-green, #38d67a) !important;
    color: #fff !important;
}

/* Unified content titles: consistent alignment, marker, and divider inside cards. */
body.msar-shell.msar-classic .main-form :where(.section-title, .msar-section-title, .card > h1:first-child, .card > h2:first-child, .card > h3:first-child, .ui-card > h1:first-child, .ui-card > h2:first-child, .ui-card > h3:first-child) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--brand-border, var(--border-soft, #e5edf7)) !important;
    color: var(--brand-ink, #0f172a) !important;
    text-align: start !important;
    line-height: 1.65 !important;
}

body.msar-shell.msar-classic .main-form :where(.section-title, .msar-section-title, .card > h1:first-child, .card > h2:first-child, .card > h3:first-child, .ui-card > h1:first-child, .ui-card > h2:first-child, .ui-card > h3:first-child)::before {
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 4px !important;
    width: 4px !important;
    min-width: 4px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--brand-gold, #C5A059) !important;
    font: inherit !important;
    line-height: 1 !important;
    transform: none !important;
}

body.msar-shell.msar-classic .main-form :where(.section-title, .msar-section-title, .card > h1:first-child, .card > h2:first-child, .card > h3:first-child, .ui-card > h1:first-child, .ui-card > h2:first-child, .ui-card > h3:first-child)::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 24px !important;
    height: 1px !important;
    margin: 0 !important;
    background: var(--brand-border, var(--border-soft, #e5edf7)) !important;
}

body.msar-shell.msar-classic .main-form :where(.section-title, .msar-section-title) + :where(.section-subtitle, .muted, p) {
    margin-top: -6px !important;
    margin-bottom: 14px !important;
}

body.msar-shell.msar-classic .main-form :where(.actions, .util-layout-flex-items-start-justify-between-wrap-fed1, .util-items-center-justify-between-2d7d) :where(.section-title, .msar-section-title) {
    margin-bottom: 6px !important;
}

/* Final sidebar child dots: always visible above the rail, even when icon markup is hidden. */
body.msar-shell.msar-classic .side-info .module-sidebar-nav {
    --sidebar-dot-size: 9px;
    --sidebar-dot-size-active: 11px;
    --sidebar-dot-rail-x: 15px;
    --sidebar-item-padding-right: 28px;
    --sidebar-dot-offset-x: -17.5px;
    --sidebar-dot-offset-x-active: -18.5px;
    overflow: visible !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav::before {
    right: var(--sidebar-dot-rail-x) !important;
    z-index: 1 !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav li,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a {
    overflow: visible !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:has(.nav-icon)::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: var(--sidebar-dot-offset-x) !important;
    z-index: 8 !important;
    display: block !important;
    width: var(--sidebar-dot-size) !important;
    min-width: var(--sidebar-dot-size) !important;
    height: var(--sidebar-dot-size) !important;
    min-height: var(--sidebar-dot-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background: var(--white, #fff) !important;
    border: 2px solid var(--brand-cyan, #42d9f4) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-navy, #0A192F) 82%, transparent) !important;
    opacity: 1 !important;
    color: transparent !important;
    pointer-events: none !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover:has(.nav-icon)::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible:has(.nav-icon)::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active:has(.nav-icon)::before,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:hover .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a:focus-visible .nav-icon,
body.msar-shell.msar-classic .side-info .module-sidebar-nav a.active .nav-icon {
    right: var(--sidebar-dot-offset-x-active) !important;
    width: var(--sidebar-dot-size-active) !important;
    min-width: var(--sidebar-dot-size-active) !important;
    height: var(--sidebar-dot-size-active) !important;
    min-height: var(--sidebar-dot-size-active) !important;
    background: var(--brand-cyan, #42d9f4) !important;
    border-color: var(--white, #fff) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand-cyan, #42d9f4) 26%, transparent),
        0 0 14px color-mix(in srgb, var(--brand-cyan, #42d9f4) 40%, transparent) !important;
}

body.msar-shell.msar-classic .side-info .module-sidebar-nav a .nav-icon :where(i, svg, .msar-fa-svg) {
    display: none !important;
    opacity: 0 !important;
}

@keyframes msarAdminSidebarRailGlow {
    0% {
        transform: translateY(-38%);
        opacity: .18;
    }
    42% {
        opacity: .9;
    }
    100% {
        transform: translateY(118%);
        opacity: .16;
    }
}

/* Admin sidebar child links: replace passive dots with compact Font Awesome markers. */
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav {
    --sidebar-icon-size: 18px;
    --sidebar-icon-glyph-size: 9px;
    --sidebar-icon-right: 4px;
    --sidebar-rail-x: 21px;
    --sidebar-item-padding-right: 32px;
    padding: 4px 8px 8px 8px !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav::before {
    right: var(--sidebar-rail-x) !important;
    width: 1px !important;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            color-mix(in srgb, var(--brand-blue, #1988d8) 42%, transparent) 16%,
            color-mix(in srgb, var(--brand-cyan, #42d9f4) 52%, transparent) 50%,
            color-mix(in srgb, var(--brand-blue, #1988d8) 42%, transparent) 84%,
            transparent 100%
        ) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-blue, #1988d8) 22%, transparent) !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav::after {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    bottom: auto !important;
    right: calc(var(--sidebar-rail-x) - 1px) !important;
    z-index: 2 !important;
    display: block !important;
    width: 3px !important;
    height: 46px !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            transparent,
            color-mix(in srgb, var(--brand-cyan, #42d9f4) 82%, var(--white, #fff) 18%),
            transparent
        ) !important;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--brand-cyan, #42d9f4) 46%, transparent),
        0 0 18px color-mix(in srgb, var(--brand-blue, #1988d8) 30%, transparent) !important;
    animation: msarAdminSidebarRailGlow 3.8s ease-in-out infinite !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:hover,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:focus-visible,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a.active {
    padding: 0 var(--sidebar-item-padding-right) 0 6px !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a::before,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:has(.nav-icon)::before {
    display: none !important;
    content: none !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a .nav-icon,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:hover .nav-icon,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:focus-visible .nav-icon,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a.active .nav-icon {
    content: normal !important;
    position: absolute !important;
    top: 50% !important;
    right: var(--sidebar-icon-right) !important;
    z-index: 9 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--sidebar-icon-size) !important;
    min-width: var(--sidebar-icon-size) !important;
    height: var(--sidebar-icon-size) !important;
    min-height: var(--sidebar-icon-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    background:
        radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--brand-cyan, #42d9f4) 34%, transparent), transparent 54%),
        color-mix(in srgb, var(--brand-navy-soft, #0b2d5c) 76%, var(--brand-blue, #1988d8) 24%) !important;
    border: 1px solid color-mix(in srgb, var(--brand-cyan, #42d9f4) 42%, transparent) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand-navy, #0A192F) 70%, transparent),
        0 0 10px color-mix(in srgb, var(--brand-blue, #1988d8) 22%, transparent) !important;
    color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 76%, var(--white, #fff) 24%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a .nav-icon :where(i, svg, .msar-fa-svg) {
    display: block !important;
    opacity: 1 !important;
    width: var(--sidebar-icon-glyph-size) !important;
    min-width: var(--sidebar-icon-glyph-size) !important;
    height: var(--sidebar-icon-glyph-size) !important;
    min-height: var(--sidebar-icon-glyph-size) !important;
    font-size: var(--sidebar-icon-glyph-size) !important;
    line-height: 1 !important;
    color: currentColor !important;
    fill: currentColor !important;
}

body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:hover .nav-icon,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a:focus-visible .nav-icon,
body.msar-shell.msar-classic:not(.employee-portal-shell) .side-info .module-sidebar-nav a.active .nav-icon {
    transform: translateY(-50%) scale(1.08) !important;
    background:
        radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--white, #fff) 38%, transparent), transparent 52%),
        linear-gradient(135deg, var(--brand-cyan, #42d9f4), var(--brand-blue, #1988d8)) !important;
    border-color: color-mix(in srgb, var(--white, #fff) 72%, transparent) !important;
    color: var(--white, #fff) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--brand-blue, #1988d8) 22%, transparent),
        0 0 18px color-mix(in srgb, var(--brand-cyan, #42d9f4) 46%, transparent) !important;
}

body.msar-shell.msar-classic :where(.btn-warning, button.btn-warning, a.btn-warning) {
    background: var(--brand-orange, #ff8a00) !important;
    border-color: var(--brand-orange, #ff8a00) !important;
    color: #fff !important;
}

/* Unified table actions: keep row buttons inside the actions column on one line. */
body.msar-shell.msar-classic :where(.table-wrap, .auto-table-wrap, .assign-table-wrap, .audit-table-wrap, .bulk-table-wrap, .msar-data-table-wrap, .table-responsive, .responsive-table, .responsive-table-wrap, .table-container, .data-table-wrapper) {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

body.msar-shell.msar-classic :where(.table-wrap, .auto-table-wrap, .assign-table-wrap, .audit-table-wrap, .bulk-table-wrap, .msar-data-table-wrap, .table-responsive, .responsive-table, .responsive-table-wrap, .table-container, .data-table-wrapper) table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

body.msar-shell.msar-classic table :where(th, td).actions,
body.msar-shell.msar-classic table :where(th, td).actions-col,
body.msar-shell.msar-classic table :where(th, td).action-col,
body.msar-shell.msar-classic table :where(th, td).response-actions-col,
body.msar-shell.msar-classic table :where(th, td):has(> .actions),
body.msar-shell.msar-classic table :where(th, td):has(> .response-actions),
body.msar-shell.msar-classic table :where(th, td):has(> .row-actions),
body.msar-shell.msar-classic table :where(th, td):has(> .table-actions),
body.msar-shell.msar-classic table :where(th, td):has(> .action-buttons),
body.msar-shell.msar-classic table :where(th, td):has(> .btn-group),
body.msar-shell.msar-classic table td:has(> a.btn),
body.msar-shell.msar-classic table td:has(> button.btn),
body.msar-shell.msar-classic table td:has(> form .btn),
body.msar-shell.msar-classic table td:has(> form button) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.msar-shell.msar-classic table td :where(.actions, .response-actions, .row-actions, .table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group) {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin-inline: auto !important;
}

body.msar-shell.msar-classic table td :where(.actions, .response-actions, .row-actions, .table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group) form,
body.msar-shell.msar-classic table td form.u-display-inline {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.msar-shell.msar-classic table td :where(.actions, .response-actions, .row-actions, .table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group) :where(.btn, button, a),
body.msar-shell.msar-classic table td > :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td > form :where(.btn, button, a) {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Lookup tables use a compact two-button action contract shared by HR and Warehouses. */
body.msar-shell.msar-classic table td.hr-lookup-actions,
body.msar-shell.msar-classic table td.warehouse-lookup-actions {
    display: table-cell !important;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    line-height: 1 !important;
}

body.msar-shell.msar-classic table td.hr-lookup-actions > form,
body.msar-shell.msar-classic table td.warehouse-lookup-actions > form {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

body.msar-shell.msar-classic table td.hr-lookup-actions > :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td.hr-lookup-actions > form :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td.warehouse-lookup-actions > :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td.warehouse-lookup-actions > form :where(.btn, button.btn, a.btn) {
    width: auto !important;
    min-width: 58px !important;
    max-width: 72px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.msar-shell.msar-classic .warehouse-lookup-list-header .btn,
body.msar-shell.msar-classic .hr-lookup-list-header .btn {
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 5px !important;
    box-shadow: 0 8px 18px rgba(10, 25, 47, 0.08) !important;
}

/* Employee portal sidebar: icon-first navigation and mobile collapsed default. */
body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav {
    gap: 5px !important;
    padding-inline: 8px !important;
}

body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
}

body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--brand-blue, #1988d8) 18%, transparent) !important;
    color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 82%, var(--white, #fff) 18%) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon :where(i, svg, .msar-fa-svg) {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    font-size: 15px !important;
    line-height: 16px !important;
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a .nav-text {
    grid-column: 2 !important;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: right !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a.active .nav-icon,
body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a:hover .nav-icon,
body.employee-portal-shell.msar-shell.msar-classic .side-info .sidebar-nav a:focus-visible .nav-icon {
    background: var(--brand-blue, #1988d8) !important;
    color: var(--white, #fff) !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav {
    padding-inline: 6px !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(var(--msar-shell-collapsed-width, 58px) - 12px) !important;
    min-width: calc(var(--msar-shell-collapsed-width, 58px) - 12px) !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-right: 0 !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-icon {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-text {
    display: none !important;
}

@media (max-width: 900px) {
    body.employee-portal-shell.msar-shell.msar-classic .dashboard,
    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
        padding-right: 0 !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .dashboard {
        padding-right: 0 !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .main-form {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .side-info,
    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(292px, calc(100vw - 44px)) !important;
        max-width: min(292px, calc(100vw - 44px)) !important;
        transform: translateX(105%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .22s ease, opacity .18s ease, visibility .18s ease !important;
        z-index: 1200 !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .side-info {
        width: min(292px, calc(100vw - 54px)) !important;
        max-width: min(292px, calc(100vw - 54px)) !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: -18px 0 34px rgba(10, 25, 47, .24) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a,
    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .side-info .sidebar-nav a {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: stretch !important;
        padding: 0 10px !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-text,
    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .side-info .sidebar-nav a .nav-text {
        display: block !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .msar-sidebar-scroll {
        padding-top: 4px !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .side-info > .admin-sidebar-toggle {
        background: var(--brand-blue, #1988d8) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 1300 !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        background: var(--brand-blue, #1988d8) !important;
        color: var(--white, #fff) !important;
        border: 1px solid color-mix(in srgb, var(--brand-cyan, #42d9f4) 34%, transparent) !important;
        box-shadow: 0 14px 26px rgba(10, 25, 47, .22) !important;
    }
}

body.employee-portal-shell .employee-smart-module-grid .employee-smart-module-card {
    color: inherit;
    text-decoration: none;
}

body.employee-portal-shell .employee-smart-module-grid .employee-smart-module-card:hover,
body.employee-portal-shell .employee-smart-module-grid .employee-smart-module-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 38%, var(--border-soft, #e5edf7));
    box-shadow: 0 18px 38px rgba(15, 23, 42, .09);
}

body.employee-portal-shell .employee-smart-module-grid .module-chip {
    gap: 6px;
    align-items: center;
}

body.page-leave_request_new.msar-shell.msar-classic #leave_event_date_field[hidden],
body.page-leave-request-new.msar-shell.msar-classic #leave_event_date_field[hidden],
body.page-leave_request_new.msar-shell.msar-classic #leave_attachment_field[hidden],
body.page-leave-request-new.msar-shell.msar-classic #leave_attachment_field[hidden],
body.page-leave_request_new.msar-shell.msar-classic #leave_type_guard_message[hidden],
body.page-leave-request-new.msar-shell.msar-classic #leave_type_guard_message[hidden],
body.page-leave_request_new.msar-shell.msar-classic .leave-extra-group[hidden],
body.page-leave-request-new.msar-shell.msar-classic .leave-extra-group[hidden],
body.page-leave_request_new.msar-shell.msar-classic .leave-extra-group.u-hidden,
body.page-leave-request-new.msar-shell.msar-classic .leave-extra-group.u-hidden {
    display: none !important;
}

body.page-leave_request_new.msar-shell.msar-classic .leave-extra-group:not([hidden]):not(.u-hidden),
body.page-leave-request-new.msar-shell.msar-classic .leave-extra-group:not([hidden]):not(.u-hidden) {
    display: grid !important;
}

/* User dropdown Font Awesome icons: keep local SVG icons centered and visible. */
body.msar-shell.msar-classic .msar-user-menu-panel a {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 42px !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a > .msar-user-menu-icon,
body.msar-shell.msar-classic .msar-user-menu-panel a > span:first-child {
    display: inline-grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    background: var(--bg-muted, #eef5ff) !important;
    color: var(--brand-blue, #1988d8) !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a > .msar-user-menu-icon :where(i, svg.msar-fa-svg),
body.msar-shell.msar-classic .msar-user-menu-panel a > span:first-child :where(i, svg.msar-fa-svg) {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a > .msar-user-menu-icon svg.msar-fa-svg path,
body.msar-shell.msar-classic .msar-user-menu-panel a > span:first-child svg.msar-fa-svg path {
    fill: currentColor !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a strong {
    align-self: center !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a:hover > .msar-user-menu-icon,
body.msar-shell.msar-classic .msar-user-menu-panel a:focus-visible > .msar-user-menu-icon,
body.msar-shell.msar-classic .msar-user-menu-panel a.is-active > .msar-user-menu-icon,
body.msar-shell.msar-classic .msar-user-menu-panel a:hover > span:first-child,
body.msar-shell.msar-classic .msar-user-menu-panel a:focus-visible > span:first-child,
body.msar-shell.msar-classic .msar-user-menu-panel a.is-active > span:first-child {
    background: var(--brand-blue, #1988d8) !important;
    color: var(--white, #ffffff) !important;
}

/* Employee portal collapsed sidebar: keep icon rail visible and make toggles readable. */
body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 7px !important;
    overflow: visible !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav li {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue, #1988d8) 22%, transparent) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--brand-navy-soft, #0b2d5c) 78%, var(--brand-blue, #1988d8) 22%) !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a.active,
body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a:hover,
body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a:focus-visible {
    background: var(--brand-blue, #1988d8) !important;
    border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 70%, var(--brand-blue, #1988d8)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white, #fff) 16%, transparent) !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-icon {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--white, #ffffff) !important;
    overflow: visible !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-icon :where(i, svg, .msar-fa-svg),
body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-icon i[class*="fa-"],
body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-icon svg.msar-fa-svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 17px !important;
    color: currentColor !important;
    fill: currentColor !important;
}

body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a .nav-text {
    display: none !important;
}

body.employee-portal-shell.msar-shell.msar-classic .admin-sidebar-toggle,
body.employee-portal-shell.msar-shell.msar-classic .side-info > .admin-sidebar-toggle,
body.employee-portal-shell.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle {
    color: var(--white, #ffffff) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .admin-sidebar-toggle :where(i, svg, .msar-fa-svg),
body.employee-portal-shell.msar-shell.msar-classic .admin-sidebar-toggle i[class*="fa-"],
body.employee-portal-shell.msar-shell.msar-classic .admin-sidebar-toggle svg.msar-fa-svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--white, #ffffff) !important;
    fill: var(--white, #ffffff) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .side-info > .admin-sidebar-toggle {
    background: var(--brand-blue, #1988d8) !important;
    border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 35%, transparent) !important;
}

/* Sidebar open/collapse controls: visible on light headers and consistent on dark sidebars. */
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle,
body.employee-portal-shell.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle,
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue, #1988d8) 24%, var(--border-soft, #e5edf7)) !important;
    border-radius: 10px !important;
    background: var(--white, #ffffff) !important;
    color: var(--brand-blue, #1988d8) !important;
    box-shadow: 0 8px 18px rgba(10, 25, 47, 0.08) !important;
    opacity: 1 !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:hover,
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:focus-visible,
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle:hover,
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle:focus-visible {
    background: var(--brand-blue, #1988d8) !important;
    color: var(--white, #ffffff) !important;
    border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 45%, var(--brand-blue, #1988d8)) !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle,
body.employee-portal-shell.msar-shell.msar-classic .side-info > .admin-sidebar-toggle {
    background: linear-gradient(135deg, var(--brand-blue, #1988d8), var(--brand-navy-soft, #0b2d5c)) !important;
    color: var(--white, #ffffff) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-cyan, #42d9f4) 24%, transparent) !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:hover,
body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:focus-visible,
body.employee-portal-shell.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:hover,
body.employee-portal-shell.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:focus-visible {
    background: var(--brand-blue, #1988d8) !important;
    color: var(--white, #ffffff) !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .admin-sidebar-toggle :where(i, svg, .msar-fa-svg),
body.msar-shell.msar-classic .admin-sidebar-toggle i[class*="fa-"],
body.msar-shell.msar-classic .admin-sidebar-toggle svg.msar-fa-svg {
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle :where(i, svg, .msar-fa-svg),
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle i[class*="fa-"],
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle svg.msar-fa-svg,
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle :where(i, svg, .msar-fa-svg),
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle i[class*="fa-"],
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle svg.msar-fa-svg {
    display: inline-block !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    color: var(--brand-blue, #1988d8) !important;
    fill: var(--brand-blue, #1988d8) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle svg.msar-fa-svg path,
body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle svg.msar-fa-svg path {
    fill: var(--brand-blue, #1988d8) !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:hover :where(i, svg, .msar-fa-svg),
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:focus-visible :where(i, svg, .msar-fa-svg),
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:hover svg.msar-fa-svg path,
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:focus-visible svg.msar-fa-svg path {
    color: var(--white, #ffffff) !important;
    fill: var(--white, #ffffff) !important;
}

/* Expense claim items: one clean default item with controlled dynamic additions. */
body.page-expense_claim_form.msar-shell.msar-classic .expense-items-head,
body.page-expense-claim-form.msar-shell.msar-classic .expense-items-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

body.page-expense_claim_form.msar-shell.msar-classic .expense-items-head .section-title,
body.page-expense-claim-form.msar-shell.msar-classic .expense-items-head .section-title {
    margin: 0 !important;
}

body.page-expense_claim_form.msar-shell.msar-classic .expense-items-list,
body.page-expense-claim-form.msar-shell.msar-classic .expense-items-list {
    display: grid !important;
    gap: 14px !important;
}

body.page-expense_claim_form.msar-shell.msar-classic .expense-item-card,
body.page-expense-claim-form.msar-shell.msar-classic .expense-item-card {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border-color: var(--border-soft, #e5edf7) !important;
    border-radius: 12px !important;
    background: var(--white, #fff) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

body.page-expense_claim_form.msar-shell.msar-classic .expense-item-card-head,
body.page-expense-claim-form.msar-shell.msar-classic .expense-item-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 32px !important;
}

body.page-expense_claim_form.msar-shell.msar-classic .expense-item-card-head strong,
body.page-expense-claim-form.msar-shell.msar-classic .expense-item-card-head strong {
    color: var(--text-main, #2D3748) !important;
    font-weight: 800 !important;
}

body.page-expense_claim_form.msar-shell.msar-classic .expense-item-card .expense-item-grid,
body.page-expense-claim-form.msar-shell.msar-classic .expense-item-card .expense-item-grid {
    margin: 0 !important;
}

/* Employee smart home: smart cards live inside the quick actions grid. */
body.page-mobile_home.msar-shell.msar-classic .mobile-quick-action span :where(i, svg, .msar-fa-svg),
body.page-mobile-home.msar-shell.msar-classic .mobile-quick-action span :where(i, svg, .msar-fa-svg) {
    display: inline-block !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    color: currentColor !important;
    fill: currentColor !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-quick-action.is-smart-action,
body.page-mobile-home.msar-shell.msar-classic .mobile-quick-action.is-smart-action {
    border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 22%, var(--border-soft, #e5edf7)) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-card,
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--brand-cyan, #42d9f4) 32%, transparent) !important;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-cyan, #42d9f4) 22%, transparent) 0 20%, transparent 36%),
        linear-gradient(135deg, var(--brand-navy, #0A192F) 0%, var(--brand-navy-soft, #0b2d5c) 48%, var(--brand-blue, #1988d8) 100%) !important;
    box-shadow: 0 22px 48px rgba(10, 25, 47, 0.18) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-card::before,
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    z-index: -1 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-card :where(.mobile-eyebrow, h2, p),
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-card :where(.mobile-eyebrow, h2, p) {
    color: var(--white, #ffffff) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-card p,
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-card p {
    color: color-mix(in srgb, var(--white, #ffffff) 82%, var(--brand-cyan, #42d9f4)) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-metric,
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-metric {
    border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 52%, rgba(255,255,255,0.22)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-cyan, #42d9f4) 20%, rgba(255,255,255,0.18)), color-mix(in srgb, var(--brand-blue, #1988d8) 30%, rgba(255,255,255,0.10))) !important;
    color: var(--white, #ffffff) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 14px 30px rgba(10, 25, 47, 0.18) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-metric strong,
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-metric strong {
    color: var(--brand-cyan, #42d9f4) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.24) !important;
}

body.page-mobile_home.msar-shell.msar-classic .mobile-hero-metric span,
body.page-mobile-home.msar-shell.msar-classic .mobile-hero-metric span {
    color: var(--white, #ffffff) !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    body.msar-shell.msar-classic .msar-footer,
    body.msar-shell.msar-classic .side-footer {
        display: none !important;
    }
}

@media (max-width: 760px) {
    body.page-expense_claim_form.msar-shell.msar-classic .expense-items-head,
    body.page-expense-claim-form.msar-shell.msar-classic .expense-items-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* Employee self profile: follows the global card/form system while keeping read-only identity fields obvious. */
body.page-my_profile.msar-shell.msar-classic .employee-self-profile-hero,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-hero {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-state,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-state {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    padding: 9px 12px !important;
    border: 1px solid var(--border-soft, #e5edf7) !important;
    border-radius: 12px !important;
    background: var(--bg-soft, #f8fbff) !important;
    color: var(--text-main, #2D3748) !important;
    font-weight: 800 !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-state.is-open,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-state.is-open {
    color: var(--brand-green, #38d67a) !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-state.is-locked,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-state.is-locked {
    color: var(--brand-orange, #ff8a00) !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-form .card,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-form .card {
    margin-bottom: 16px !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-wide,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-wide,
body.page-my_profile.msar-shell.msar-classic .employee-self-profile-form .grid-span-3,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-form .grid-span-3 {
    grid-column: 1 / -1 !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-form :where(input[readonly], textarea[readonly]),
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-form :where(input[readonly], textarea[readonly]) {
    background: var(--bg-muted, #eef5ff) !important;
    color: var(--text-muted, #718096) !important;
    cursor: default !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-form :where(input:disabled, select:disabled, textarea:disabled),
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-form :where(input:disabled, select:disabled, textarea:disabled) {
    background: var(--bg-muted, #eef5ff) !important;
    color: var(--text-main, #2D3748) !important;
    opacity: 1 !important;
}

body.page-my_profile.msar-shell.msar-classic .employee-self-profile-actions,
body.page-my-profile.msar-shell.msar-classic .employee-self-profile-actions {
    justify-content: flex-start !important;
}

/* Workflow request details: readable hero with a controlled text surface. */
body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    align-items: stretch !important;
    padding: 22px !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue, #1988d8) 36%, transparent) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--brand-cyan, #42d9f4) 26%, transparent) 0 22%, transparent 36%),
        linear-gradient(135deg, var(--brand-navy, #0A192F) 0%, var(--brand-navy-soft, #0b2d5c) 48%, var(--brand-blue, #1988d8) 100%) !important;
    color: var(--white, #ffffff) !important;
    box-shadow: 0 24px 58px rgba(10, 25, 47, 0.18) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero::before,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero::before,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero::before,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    z-index: -1 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero-main,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero-main,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero-main,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero-main {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-kicker,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-kicker,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-kicker,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-kicker {
    color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 78%, var(--white, #ffffff)) !important;
    font-weight: 800 !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero h2,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero h2,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero h2,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero h2 {
    max-width: 760px !important;
    margin: 0 !important;
    color: var(--white, #ffffff) !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.24) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-meta,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-meta,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-meta,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-meta {
    gap: 10px !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-meta span,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-meta span,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-meta span,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-meta span {
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(10, 25, 47, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-meta strong,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-meta strong,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-meta strong,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-meta strong {
    color: var(--white, #ffffff) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero-side,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero-side,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero-side,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero-side {
    min-width: min(300px, 100%) !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(8px) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-progress-inline,
body.page-workflow-request-details.msar-shell.msar-classic .request-progress-inline,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-progress-inline,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-progress-inline {
    color: var(--white, #ffffff) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-progress-inline-bar,
body.page-workflow-request-details.msar-shell.msar-classic .request-progress-inline-bar,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-progress-inline-bar,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-progress-inline-bar {
    background: rgba(255, 255, 255, 0.22) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-progress-inline-bar span,
body.page-workflow-request-details.msar-shell.msar-classic .request-progress-inline-bar span,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-progress-inline-bar span,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-progress-inline-bar span {
    background: linear-gradient(90deg, var(--brand-cyan, #42d9f4), var(--brand-green, #38d67a)) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero .btn.btn-light,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero .btn.btn-light,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero .btn.btn-light,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero .btn.btn-light {
    color: var(--white, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero .btn.btn-light:hover,
body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero .btn.btn-light:hover,
body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero .btn.btn-light:hover,
body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero .btn.btn-light:hover {
    background: rgba(255, 255, 255, 0.24) !important;
}

@media (max-width: 900px) {
    body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero,
    body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero,
    body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero,
    body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        border-radius: 16px !important;
    }

    body.page-workflow_request_details.msar-shell.msar-classic .request-detail-hero-side,
    body.page-workflow-request-details.msar-shell.msar-classic .request-detail-hero-side,
    body.page-hr_workflow_request_details.msar-shell.msar-classic .request-detail-hero-side,
    body.page-hr-workflow-request-details.msar-shell.msar-classic .request-detail-hero-side {
        justify-items: stretch !important;
        min-width: 0 !important;
    }
}

/* Employee request details page uses request_details.php, so bind the shared hero to the same system palette. */
body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
    gap: 18px !important;
    align-items: stretch !important;
    padding: 22px !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue, #1988d8) 28%, var(--border-soft, #e5edf7)) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand-blue, #1988d8) 12%, transparent), transparent 34%),
        linear-gradient(180deg, var(--white, #ffffff), var(--bg-soft, #f8fbff)) !important;
    box-shadow: 0 16px 36px rgba(10, 25, 47, 0.08) !important;
    color: var(--text-main, #2D3748) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    z-index: -1 !important;
    border: 1px solid color-mix(in srgb, var(--brand-cyan, #42d9f4) 22%, transparent) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero :where(.request-detail-kicker, h2, .request-progress-inline, .request-progress-inline strong) {
    color: var(--brand-navy, #0A192F) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-kicker {
    color: var(--brand-blue, #1988d8) !important;
    font-weight: 900 !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero h2 {
    margin: 0 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-meta {
    gap: 10px !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-meta span {
    max-width: 100% !important;
    border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 24%, var(--border-soft, #e5edf7)) !important;
    background: color-mix(in srgb, var(--brand-light, #f5f9ff) 78%, var(--white, #ffffff)) !important;
    color: var(--text-main, #2D3748) !important;
    box-shadow: inset 3px 0 0 var(--brand-blue, #1988d8), 0 6px 16px rgba(10, 25, 47, 0.05) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-meta span *,
body.employee-portal-shell.msar-shell.msar-classic .request-detail-meta strong {
    color: var(--brand-navy, #0A192F) !important;
    font-weight: 900 !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero-side {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue, #1988d8) 22%, var(--border-soft, #e5edf7)) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(6px) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .status-chip {
    border-color: rgba(255, 255, 255, 0.26) !important;
    box-shadow: 0 10px 22px rgba(10, 25, 47, 0.12) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .status-chip.neutral,
body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .status-chip.info {
    background: var(--white, #ffffff) !important;
    color: var(--brand-navy, #0A192F) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .status-chip.warning {
    background: color-mix(in srgb, var(--brand-gold, #C5A059) 18%, var(--white, #ffffff)) !important;
    color: var(--brand-navy, #0A192F) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-progress-inline-bar {
    background: var(--bg-muted, #eef5ff) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-progress-inline-bar span {
    background: linear-gradient(90deg, var(--brand-cyan, #42d9f4), var(--brand-green, #38d67a)) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .btn.btn-light {
    border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 20%, var(--border-soft, #e5edf7)) !important;
    background: var(--white, #ffffff) !important;
    color: var(--brand-navy, #0A192F) !important;
}

body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .btn.btn-light:hover,
body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero .btn.btn-light:focus-visible {
    background: var(--brand-blue, #1988d8) !important;
    color: var(--white, #ffffff) !important;
}

@media (max-width: 900px) {
    body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .request-detail-hero-side {
        justify-items: stretch !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .request-detail-meta span {
        border-radius: 14px !important;
    }
}

@media (max-width: 760px) {
    body.page-my_profile.msar-shell.msar-classic .employee-self-profile-hero,
    body.page-my-profile.msar-shell.msar-classic .employee-self-profile-hero {
        flex-direction: column !important;
    }

    body.page-my_profile.msar-shell.msar-classic .employee-self-profile-state,
    body.page-my-profile.msar-shell.msar-classic .employee-self-profile-state {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Employee mobile footer: keep the global footer clear of the fixed bottom nav. */
@media (max-width: 760px) {
    body.employee-portal-shell.msar-shell.msar-classic {
        --employee-bottom-nav-safe-space: 104px;
    }

    body.employee-portal-shell.msar-shell.msar-classic .main-form {
        padding-bottom: calc(var(--employee-bottom-nav-safe-space) + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .msar-footer {
        position: static !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        z-index: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: auto !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 16px 8px calc(var(--employee-bottom-nav-safe-space) + 12px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 12px 14px !important;
        border: 1px solid var(--border-soft, #e5edf7) !important;
        border-radius: 18px !important;
        background: color-mix(in srgb, var(--bg-soft, #f8fbff) 92%, var(--white, #ffffff)) !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
        color: var(--brand-blue, #1988d8) !important;
        line-height: 1.75 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic .employee-bottom-nav {
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 980 !important;
    }
}

/* Employee mobile sidebar toggle: visible icon colors and reliable tap target. */
@media (max-width: 900px) {
    body.employee-portal-shell.msar-shell.msar-classic .main-topbar .module-page-title .admin-sidebar-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        border-width: 1px !important;
        box-shadow: 0 12px 28px rgba(10, 25, 47, 0.16) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .main-topbar .module-page-title .admin-sidebar-toggle {
        background: var(--white, #ffffff) !important;
        border-color: color-mix(in srgb, var(--brand-blue, #1988d8) 34%, var(--border-soft, #e5edf7)) !important;
        color: var(--brand-blue, #1988d8) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .main-topbar .module-page-title .admin-sidebar-toggle {
        background: var(--brand-blue, #1988d8) !important;
        border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 44%, var(--brand-blue, #1988d8)) !important;
        color: var(--white, #ffffff) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .main-topbar .module-page-title .admin-sidebar-toggle :where(i, svg, .msar-fa-svg),
    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .main-topbar .module-page-title .admin-sidebar-toggle i[class*="fa-"],
    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .main-topbar .module-page-title .admin-sidebar-toggle svg.msar-fa-svg,
    body.employee-portal-shell.msar-shell.msar-classic.admin-sidebar-collapsed .main-topbar .module-page-title .admin-sidebar-toggle svg.msar-fa-svg path {
        color: var(--brand-blue, #1988d8) !important;
        fill: var(--brand-blue, #1988d8) !important;
    }

    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .main-topbar .module-page-title .admin-sidebar-toggle :where(i, svg, .msar-fa-svg),
    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .main-topbar .module-page-title .admin-sidebar-toggle i[class*="fa-"],
    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .main-topbar .module-page-title .admin-sidebar-toggle svg.msar-fa-svg,
    body.employee-portal-shell.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .main-topbar .module-page-title .admin-sidebar-toggle svg.msar-fa-svg path {
        color: var(--white, #ffffff) !important;
        fill: var(--white, #ffffff) !important;
    }
}

/* Warehouse request table: let the page own scrolling, never the item table section. */
body.msar-shell.msar-classic .msar-warehouse-request-card,
body.msar-shell.msar-classic .msar-warehouse-request-card > form,
body.msar-shell.msar-classic .msar-warehouse-request-card .msar-warehouse-request-wrap,
body.msar-shell.msar-classic .card:has(.msar-warehouse-request-table),
body.msar-shell.msar-classic .card:has(.msar-warehouse-request-table) > form {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-wrap,
body.msar-shell.msar-classic .msar-warehouse-request-table,
body.msar-shell.msar-classic .msar-warehouse-request-table tbody,
body.msar-shell.msar-classic .msar-warehouse-request-table tr,
body.msar-shell.msar-classic .msar-warehouse-request-table td.warehouse-request-item-cell {
    overflow: visible !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-wrap {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-wrap::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-wrap.msar-employee-combo-host-open {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}

body.msar-shell.msar-classic .msar-warehouse-request-wrap .msar-employee-combo-list {
    z-index: 10050 !important;
    min-width: min(440px, 86vw) !important;
}

/* System policy: searchable select dropdowns are rendered as a page-level layer.
   This prevents item/employee/supplier pickers from creating inner table scrollbars. */
body.msar-shell.msar-classic .msar-combo-floating-list {
    --msar-combo-row-height: 36px;
    position: absolute !important;
    z-index: 50000 !important;
    right: auto !important;
    min-width: min(260px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: calc(var(--msar-combo-row-height) * 5) !important;
    max-height: calc(var(--msar-combo-row-height) * 8) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--brand-blue, #1988d8) var(--bg-muted, #eef5ff) !important;
}

body.msar-shell.msar-classic :where(.table-wrap, .auto-table-wrap, .assign-table-wrap, .audit-table-wrap, .bulk-table-wrap, .msar-data-table-wrap, .table-responsive, .responsive-table, .responsive-table-wrap, .table-container, .data-table-wrapper).msar-employee-combo-host-open {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* System policy: table action buttons stay inside a deliberate action column. */
body.msar-shell.msar-classic table th.msar-table-action-col,
body.msar-shell.msar-classic table td.msar-table-action-col,
body.msar-shell.msar-classic table td:has(> .msar-table-actions),
body.msar-shell.msar-classic table td:has(> .actions > .btn),
body.msar-shell.msar-classic table td:has(> .actions > form > .btn) {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 260px !important;
    padding-inline: 8px !important;
    overflow: visible !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic table th.msar-table-action-col-wide,
body.msar-shell.msar-classic table td.msar-table-action-col-wide {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 340px !important;
}

body.msar-shell.msar-classic table td.msar-table-action-col > .actions,
body.msar-shell.msar-classic table td .msar-table-actions,
body.msar-shell.msar-classic table td:has(> .actions > .btn) > .actions,
body.msar-shell.msar-classic table td:has(> .actions > form > .btn) > .actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic table td.msar-table-action-col form,
body.msar-shell.msar-classic table td .msar-table-actions form,
body.msar-shell.msar-classic table td:has(> .actions > form > .btn) > .actions form {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

body.msar-shell.msar-classic table td.msar-table-action-col .btn,
body.msar-shell.msar-classic table td .msar-table-actions .btn,
body.msar-shell.msar-classic table td:has(> .actions > .btn) > .actions .btn,
body.msar-shell.msar-classic table td:has(> .actions > form > .btn) > .actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: 150px !important;
    padding-inline: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .card:has(.msar-table-action-col) .table-wrap,
body.msar-shell.msar-classic .card:has(.msar-table-actions) .table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* General settings/admin pages surface: shared visual system for settings, permissions, admins, and health pages. */
body.msar-shell.msar-classic:is(
    .page-settings_brand_colors,
    .page-settings-brand-colors,
    .page-settings_hr_features,
    .page-settings-hr-features,
    .page-admins,
    .page-admin_permissions_system,
    .page-admin-permissions-system,
    .page-admin_permissions_hr,
    .page-admin-permissions-hr,
    .page-admin_permissions_professional,
    .page-admin-permissions-professional,
    .page-admin_permissions_warehouses,
    .page-admin-permissions-warehouses,
    .page-admin_permissions_communications,
    .page-admin-permissions-communications,
    .page-system_maintenance,
    .page-system-maintenance,
    .page-system_health,
    .page-system-health
) .main-form {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-light, #f5f9ff) 70%, var(--white, #ffffff)) 0%, var(--bg-light, #f8fafc) 34%),
        var(--bg-light, #f8fafc) !important;
}

body.msar-shell.msar-classic:is(
    .page-settings_brand_colors,
    .page-settings-brand-colors,
    .page-settings_hr_features,
    .page-settings-hr-features,
    .page-admins,
    .page-admin_permissions_system,
    .page-admin-permissions-system,
    .page-admin_permissions_hr,
    .page-admin-permissions-hr,
    .page-admin_permissions_professional,
    .page-admin-permissions-professional,
    .page-admin_permissions_warehouses,
    .page-admin-permissions-warehouses,
    .page-admin_permissions_communications,
    .page-admin-permissions-communications,
    .page-system_maintenance,
    .page-system-maintenance,
    .page-system_health,
    .page-system-health
) :where(.card, .adm-form-card, .adm-list-card, .appearance-section, .section, .system-health-section) {
    border-color: color-mix(in srgb, var(--border-soft, #e5edf7) 86%, var(--brand-blue, #1988d8)) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--white, #ffffff) 94%, var(--bg-soft, #f8fbff)) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055) !important;
}

body.msar-shell.msar-classic:is(
    .page-settings_brand_colors,
    .page-settings-brand-colors,
    .page-settings_hr_features,
    .page-settings-hr-features,
    .page-admins,
    .page-admin_permissions_system,
    .page-admin-permissions-system,
    .page-admin_permissions_hr,
    .page-admin-permissions-hr,
    .page-admin_permissions_professional,
    .page-admin-permissions-professional,
    .page-admin_permissions_warehouses,
    .page-admin-permissions-warehouses,
    .page-admin_permissions_communications,
    .page-admin-permissions-communications,
    .page-system_maintenance,
    .page-system-maintenance,
    .page-system_health,
    .page-system-health
) :where(.section-title, .adm-form-header h2, .adm-page-hero-text h1, .appearance-section-title, .system-health-title h1, .system-health-section h2) {
    color: var(--brand-ink, #0f172a) !important;
    font-weight: var(--system-heading-weight, 800) !important;
    letter-spacing: 0 !important;
}

body.msar-shell.msar-classic:is(
    .page-settings_brand_colors,
    .page-settings-brand-colors,
    .page-settings_hr_features,
    .page-settings-hr-features,
    .page-admins,
    .page-admin_permissions_system,
    .page-admin-permissions-system,
    .page-admin_permissions_hr,
    .page-admin-permissions-hr,
    .page-admin_permissions_professional,
    .page-admin-permissions-professional,
    .page-admin_permissions_warehouses,
    .page-admin-permissions-warehouses,
    .page-admin_permissions_communications,
    .page-admin-permissions-communications,
    .page-system_maintenance,
    .page-system-maintenance,
    .page-system_health,
    .page-system-health
) :where(.muted, .small-muted, .adm-form-header p, .system-health-muted, .system-health-small) {
    color: var(--text-muted, #718096) !important;
}

body.msar-shell.msar-classic:is(
    .page-settings_brand_colors,
    .page-settings-brand-colors,
    .page-settings_hr_features,
    .page-settings-hr-features,
    .page-admins,
    .page-admin_permissions_system,
    .page-admin-permissions-system,
    .page-admin_permissions_hr,
    .page-admin-permissions-hr,
    .page-admin_permissions_professional,
    .page-admin-permissions-professional,
    .page-admin_permissions_warehouses,
    .page-admin-permissions-warehouses,
    .page-admin_permissions_communications,
    .page-admin-permissions-communications,
    .page-system_maintenance,
    .page-system-maintenance,
    .page-system_health,
    .page-system-health
) :where(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
    border-color: color-mix(in srgb, var(--border-soft, #e5edf7) 70%, var(--brand-blue, #1988d8)) !important;
    border-radius: 10px !important;
    background: var(--white, #ffffff) !important;
    color: var(--text-main, #2d3748) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

body.msar-shell.msar-classic:is(
    .page-settings_brand_colors,
    .page-settings-brand-colors,
    .page-settings_hr_features,
    .page-settings-hr-features,
    .page-admins,
    .page-admin_permissions_system,
    .page-admin-permissions-system,
    .page-admin_permissions_hr,
    .page-admin-permissions-hr,
    .page-admin_permissions_professional,
    .page-admin-permissions-professional,
    .page-admin_permissions_warehouses,
    .page-admin-permissions-warehouses,
    .page-admin_permissions_communications,
    .page-admin-permissions-communications,
    .page-system_maintenance,
    .page-system-maintenance,
    .page-system_health,
    .page-system-health
) :where(.input, .select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):focus {
    border-color: var(--brand-blue, #1988d8) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cyan, #42d9f4) 22%, transparent) !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .msar-settings-tabs-card {
    padding: 10px !important;
}

body.msar-shell.msar-classic .msar-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}

body.msar-shell.msar-classic .msar-settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--border-soft, #e5edf7) 80%, var(--brand-blue, #1988d8));
    border-radius: 12px;
    background: var(--white, #ffffff);
    color: var(--brand-ink, #0f172a);
    font-family: var(--system-font-family, var(--font-family-base, Tahoma, Arial, sans-serif));
    font-size: var(--system-nav-font-size, 13px);
    font-weight: var(--system-heading-weight, 800);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.msar-shell.msar-classic .msar-settings-tab:hover,
body.msar-shell.msar-classic .msar-settings-tab:focus-visible {
    border-color: var(--brand-blue, #1988d8);
    color: var(--brand-blue, #1988d8);
    box-shadow: 0 10px 24px rgba(25, 136, 216, 0.12);
    outline: none;
}

body.msar-shell.msar-classic .msar-settings-tab.is-active {
    background: linear-gradient(135deg, var(--brand-navy, #0A192F), var(--brand-blue, #1988d8));
    border-color: color-mix(in srgb, var(--brand-cyan, #42d9f4) 45%, var(--brand-blue, #1988d8));
    color: var(--white, #ffffff);
    box-shadow: 0 14px 32px rgba(10, 25, 47, 0.16);
}

body.msar-shell.msar-classic .msar-settings-tab :where(i, svg, .msar-fa-svg),
body.msar-shell.msar-classic .msar-settings-tab.is-active :where(i, svg, .msar-fa-svg) {
    color: currentColor !important;
    fill: currentColor !important;
}

body.msar-shell.msar-classic .msar-settings-tab-panels {
    display: grid;
    gap: 14px;
}

body.msar-shell.msar-classic .msar-settings-tab-panel {
    display: grid;
    gap: 14px;
}

body.msar-shell.msar-classic .msar-settings-tab-panel[hidden] {
    display: none !important;
}

body.msar-shell.msar-classic .appearance-form {
    display: grid;
    gap: 14px;
}

body.msar-shell.msar-classic .appearance-section {
    display: grid;
    gap: 12px;
    padding: 16px;
}

body.msar-shell.msar-classic .appearance-section-title {
    margin: 0;
    font-size: 1rem;
}

body.msar-shell.msar-classic .appearance-color-grid,
body.msar-shell.msar-classic .appearance-font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

body.msar-shell.msar-classic .appearance-color-field {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px;
    border: 1px solid var(--border-soft, #e5edf7);
    border-radius: 12px;
    background: var(--bg-soft, #f8fbff);
}

body.msar-shell.msar-classic .appearance-color-field input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

body.msar-shell.msar-classic .appearance-color-label {
    min-width: 0;
    color: var(--text-main, #2d3748);
    font-weight: var(--system-heading-weight, 800);
}

body.msar-shell.msar-classic .appearance-color-value {
    direction: ltr;
    color: var(--text-muted, #718096);
    font-size: .78rem;
    font-weight: 800;
}

body.msar-shell.msar-classic .appearance-preview {
    overflow: hidden;
    padding: 0 !important;
    background: var(--bg-light, #f8fafc);
}

body.msar-shell.msar-classic .appearance-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--white, #ffffff);
    color: var(--text-main, #2d3748);
    border-bottom: 1px solid var(--border-soft, #e5edf7);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

body.msar-shell.msar-classic .appearance-preview-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 240px;
}

body.msar-shell.msar-classic .appearance-preview-side {
    padding: 14px;
    color: var(--white, #ffffff);
    background: var(--brand-navy, #0A192F);
}

body.msar-shell.msar-classic .appearance-preview-nav {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

body.msar-shell.msar-classic .appearance-preview-nav span {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--white, #ffffff);
    background: transparent;
}

body.msar-shell.msar-classic .appearance-preview-nav span.is-active {
    background: var(--brand-navy-soft, #0b2d5c);
    border-right: 3px solid var(--brand-blue, #1988d8);
}

body.msar-shell.msar-classic .appearance-preview-main {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
}

body.msar-shell.msar-classic .appearance-preview-crumb {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-soft, #f8fbff);
    color: var(--brand-ink, #0f172a);
    font-weight: 800;
}

body.msar-shell.msar-classic .appearance-preview-card {
    padding: 14px;
    border: 1px solid var(--border-soft, #e5edf7);
    border-radius: 10px;
    background: var(--white, #ffffff);
    color: var(--text-main, #2d3748);
}

body.msar-shell.msar-classic .appearance-preview-card p {
    color: var(--text-muted, #718096);
}

body.msar-shell.msar-classic .appearance-status-row,
body.msar-shell.msar-classic .appearance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.msar-shell.msar-classic .appearance-actions {
    justify-content: flex-end;
}

body.msar-shell.msar-classic .appearance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--white, #ffffff);
    font-weight: 800;
}

body.msar-shell.msar-classic .system-health-page {
    display: grid;
    gap: 14px;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.msar-shell.msar-classic .system-health-title,
body.msar-shell.msar-classic .system-health-page .head {
    padding: 22px;
    border-radius: 18px;
    color: var(--white, #ffffff);
    background: linear-gradient(135deg, var(--brand-navy, #0A192F), var(--brand-blue, #1988d8));
    box-shadow: 0 18px 42px rgba(10, 25, 47, .16);
}

body.msar-shell.msar-classic .system-health-title h1,
body.msar-shell.msar-classic .system-health-page .head h1 {
    margin: 0 0 8px;
    color: var(--white, #ffffff) !important;
}

body.msar-shell.msar-classic .system-health-title .system-health-muted,
body.msar-shell.msar-classic .system-health-page .head .muted {
    color: color-mix(in srgb, var(--white, #ffffff) 82%, var(--brand-cyan, #42d9f4)) !important;
}

body.msar-shell.msar-classic .system-health-actions,
body.msar-shell.msar-classic .system-health-page .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

body.msar-shell.msar-classic .system-health-actions form,
body.msar-shell.msar-classic .system-health-page .actions form {
    display: inline-flex;
    margin: 0;
}

body.msar-shell.msar-classic .system-health-page .head .btn {
    border-color: color-mix(in srgb, var(--white, #ffffff) 50%, transparent) !important;
    background: var(--white, #ffffff) !important;
    color: var(--brand-navy, #0A192F) !important;
}

body.msar-shell.msar-classic .system-health-page .head .btn.secondary {
    background: transparent !important;
    color: var(--white, #ffffff) !important;
}

body.msar-shell.msar-classic .system-health-kpis,
body.msar-shell.msar-classic .system-health-page .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

body.msar-shell.msar-classic .system-health-kpi,
body.msar-shell.msar-classic .system-health-page .pill {
    padding: 14px;
    border: 1px solid var(--border-soft, #e5edf7);
    border-radius: 16px;
    background: var(--white, #ffffff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
}

body.msar-shell.msar-classic .system-health-kpi-number,
body.msar-shell.msar-classic .system-health-page .pill .n {
    font-size: 26px;
    font-weight: 900;
}

body.msar-shell.msar-classic .system-health-kpi-label,
body.msar-shell.msar-classic .system-health-page .pill .l {
    color: var(--text-muted, #718096);
    font-size: 13px;
}

body.msar-shell.msar-classic .system-health-kpi.ok .system-health-kpi-number { color: var(--brand-green, #38d67a); }
body.msar-shell.msar-classic .system-health-kpi.warn .system-health-kpi-number { color: var(--brand-orange, #ff8a00); }
body.msar-shell.msar-classic .system-health-kpi.fail .system-health-kpi-number { color: var(--danger, #9B2C2C); }
body.msar-shell.msar-classic .system-health-kpi.info .system-health-kpi-number { color: var(--brand-blue, #1988d8); }
body.msar-shell.msar-classic .system-health-page .pill.ok .n { color: var(--brand-green, #38d67a); }
body.msar-shell.msar-classic .system-health-page .pill.warn .n { color: var(--brand-orange, #ff8a00); }
body.msar-shell.msar-classic .system-health-page .pill.fail .n { color: var(--danger, #9B2C2C); }
body.msar-shell.msar-classic .system-health-page .pill.info .n { color: var(--brand-blue, #1988d8); }

body.msar-shell.msar-classic .system-health-section,
body.msar-shell.msar-classic .system-health-page .section {
    overflow: hidden;
}

body.msar-shell.msar-classic .system-health-section h2,
body.msar-shell.msar-classic .system-health-page .section h2 {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft, #e5edf7);
    background: var(--bg-soft, #f8fbff);
    font-size: 18px;
}

body.msar-shell.msar-classic .system-health-table-wrap,
body.msar-shell.msar-classic .system-health-page .table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

body.msar-shell.msar-classic .system-health-table,
body.msar-shell.msar-classic .system-health-page table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

body.msar-shell.msar-classic .system-health-table th,
body.msar-shell.msar-classic .system-health-table td,
body.msar-shell.msar-classic .system-health-page th,
body.msar-shell.msar-classic .system-health-page td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft, #e5edf7);
    vertical-align: top;
    text-align: right;
}

body.msar-shell.msar-classic .system-health-table th,
body.msar-shell.msar-classic .system-health-page th {
    background: var(--bg-soft, #f8fbff);
    color: var(--brand-blue, #1988d8);
    font-size: 12px;
    font-weight: 900;
}

body.msar-shell.msar-classic .system-health-badge,
body.msar-shell.msar-classic .system-health-page .badge {
    display: inline-flex;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 900;
    font-size: 12px;
}

body.msar-shell.msar-classic .system-health-badge.ok { background: color-mix(in srgb, var(--brand-green, #38d67a) 16%, var(--white, #ffffff)); color: var(--success, #166534); }
body.msar-shell.msar-classic .system-health-badge.warn { background: color-mix(in srgb, var(--brand-orange, #ff8a00) 18%, var(--white, #ffffff)); color: #9a5800; }
body.msar-shell.msar-classic .system-health-badge.fail { background: color-mix(in srgb, var(--danger, #9B2C2C) 14%, var(--white, #ffffff)); color: var(--danger, #9B2C2C); }
body.msar-shell.msar-classic .system-health-badge.info { background: color-mix(in srgb, var(--brand-blue, #1988d8) 12%, var(--white, #ffffff)); color: var(--brand-blue, #1988d8); }
body.msar-shell.msar-classic .system-health-page .badge.ok { background: color-mix(in srgb, var(--brand-green, #38d67a) 16%, var(--white, #ffffff)); color: var(--success, #166534); }
body.msar-shell.msar-classic .system-health-page .badge.warn { background: color-mix(in srgb, var(--brand-orange, #ff8a00) 18%, var(--white, #ffffff)); color: #9a5800; }
body.msar-shell.msar-classic .system-health-page .badge.fail { background: color-mix(in srgb, var(--danger, #9B2C2C) 14%, var(--white, #ffffff)); color: var(--danger, #9B2C2C); }
body.msar-shell.msar-classic .system-health-page .badge.info { background: color-mix(in srgb, var(--brand-blue, #1988d8) 12%, var(--white, #ffffff)); color: var(--brand-blue, #1988d8); }

body.msar-shell.msar-classic .system-health-details,
body.msar-shell.msar-classic .system-health-file,
body.msar-shell.msar-classic .system-health-page .details,
body.msar-shell.msar-classic .system-health-page .file {
    direction: ltr;
    text-align: left;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 12px;
}

body.msar-shell.msar-classic .system-health-details,
body.msar-shell.msar-classic .system-health-page .details {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
}

body.msar-shell.msar-classic .system-health-page .notice {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--brand-orange, #ff8a00) 35%, var(--border-soft, #e5edf7));
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-orange, #ff8a00) 11%, var(--white, #ffffff));
    color: #9a5800;
}

body.msar-shell.msar-classic .system-health-page .small {
    color: var(--text-muted, #718096);
    font-size: 12px;
}

@media (max-width: 760px) {
    body.msar-shell.msar-classic .appearance-preview-shell {
        grid-template-columns: 1fr;
    }

    body.msar-shell.msar-classic .msar-settings-tab {
        flex: 1 1 100%;
    }
}

/* ATS recruitment forms: loaded last so split pages share one stable layout. */
body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 16px 22px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    gap: 14px 18px !important;
    align-items: end !important;
    width: 100% !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form > label,
body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter > label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--text-main, #2D3748) !important;
    font-size: var(--font-size-sm, 13px) !important;
    font-weight: 850 !important;
    line-height: 1.7 !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form > label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-height: 42px !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form small {
    color: var(--text-muted, #718096) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .input, .select, .textarea),
body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .input, .select, .textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.8 !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form > :where(.util-grid-full-068a, .actions),
body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter > :where(.util-grid-full-068a, .actions) {
    grid-column: 1 / -1 !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form .actions,
body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .grid-2 .card .hr-ats-form {
    grid-template-columns: 1fr !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-scorecards-page) .criteria-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, .8fr)) minmax(110px, .6fr) !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 12px !important;
    border: 1px solid var(--border-soft, #e5edf7) !important;
    border-radius: 14px !important;
    background: var(--bg-soft, #f8fbff) !important;
}

body.msar-shell.msar-classic :where(.hr-recruitment-scorecards-page) .criteria-row > label {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
}

@media (max-width: 1080px) {
    body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }

    body.msar-shell.msar-classic :where(.hr-recruitment-scorecards-page) .criteria-row {
        grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-form,
    body.msar-shell.msar-classic :where(.hr-recruitment-page, .hr-recruitment-offers-page, .hr-recruitment-interviews-page, .hr-recruitment-scorecards-page) .hr-ats-filter,
    body.msar-shell.msar-classic :where(.hr-recruitment-scorecards-page) .criteria-row {
        grid-template-columns: 1fr !important;
    }
}

/* Final table action-column policy.
   This intentionally sits at the end of the cascade to override legacy table
   rules that capped action columns at narrow widths and caused wrapping. */
body.msar-shell.msar-classic :where(.table-wrap, .auto-table-wrap, .assign-table-wrap, .audit-table-wrap, .bulk-table-wrap, .msar-data-table-wrap, .table-responsive, .responsive-table, .responsive-table-wrap, .table-container, .data-table-wrapper) {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

body.msar-shell.msar-classic :where(.table-wrap, .auto-table-wrap, .assign-table-wrap, .audit-table-wrap, .bulk-table-wrap, .msar-data-table-wrap, .table-responsive, .responsive-table, .responsive-table-wrap, .table-container, .data-table-wrapper) table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

body.msar-shell.msar-classic table :where(th, td).msar-actions-cell,
body.msar-shell.msar-classic table :where(th, td).actions-cell,
body.msar-shell.msar-classic table :where(th, td).actions,
body.msar-shell.msar-classic table :where(th, td).action-col,
body.msar-shell.msar-classic table :where(th, td).actions-col,
body.msar-shell.msar-classic table :where(th, td).response-actions-col,
body.msar-shell.msar-classic table :where(th, td).msar-table-action-col,
body.msar-shell.msar-classic table td:has(> .actions),
body.msar-shell.msar-classic table td:has(> .table-actions),
body.msar-shell.msar-classic table td:has(> .msar-table-actions),
body.msar-shell.msar-classic table td:has(> .row-actions),
body.msar-shell.msar-classic table td:has(> .action-buttons),
body.msar-shell.msar-classic table td:has(> .btn),
body.msar-shell.msar-classic table td:has(> form > .btn),
body.msar-shell.msar-classic table td:has(> form > button) {
    width: 1% !important;
    min-width: max-content !important;
    max-width: none !important;
    padding-inline: 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

body.msar-shell.msar-classic table :where(th, td).msar-actions-cell-medium {
    min-width: 180px !important;
}

body.msar-shell.msar-classic table :where(th, td).msar-actions-cell-wide,
body.msar-shell.msar-classic table :where(th, td).msar-table-action-col-wide {
    min-width: 260px !important;
}

body.msar-shell.msar-classic table :where(th, td).msar-actions-cell-xwide {
    min-width: 340px !important;
}

body.msar-shell.msar-classic table td :where(.actions, .response-actions, .row-actions, .table-actions, .msar-table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group),
body.msar-shell.msar-classic table td.msar-actions-cell > :where(.actions, .response-actions, .row-actions, .table-actions, .msar-table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group),
body.msar-shell.msar-classic table td.actions-cell > :where(.actions, .response-actions, .row-actions, .table-actions, .msar-table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group) {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

body.msar-shell.msar-classic table td.msar-actions-cell > form,
body.msar-shell.msar-classic table td.actions-cell > form,
body.msar-shell.msar-classic table td :where(.actions, .response-actions, .row-actions, .table-actions, .msar-table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group) form,
body.msar-shell.msar-classic table td form.u-display-inline {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic table td.msar-actions-cell > :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td.actions-cell > :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td.msar-actions-cell > form :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td.actions-cell > form :where(.btn, button.btn, a.btn),
body.msar-shell.msar-classic table td :where(.actions, .response-actions, .row-actions, .table-actions, .msar-table-actions, .action-buttons, .holiday-row-actions, .pay-actions, .doc-actions, .btn-group) :where(.btn, button.btn, a.btn) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 30px !important;
    padding-inline: 10px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    body.msar-shell.msar-classic table :where(th, td).msar-actions-cell,
    body.msar-shell.msar-classic table :where(th, td).actions-cell,
    body.msar-shell.msar-classic table :where(th, td).msar-table-action-col {
        min-width: max-content !important;
    }
}