/* Consolidated component/layout layer. Legacy override files are no longer loaded individually. */

/* Shell/chrome rules moved to assets/css/shell.css in Phase 3. */

/* ---- migrated from msar-cleanup-2026.css ---- */
/* ==========================================================================
   2026 UI Clean-up Layer
   Pixel-consistent admin/employee shell: Cairo typography, fixed sidebar,
   sticky header/footer, normalized icons, tables and action buttons.
   ========================================================================== */

:root {
    --erp-orange: #ff5a2f;
    --erp-orange-dark: #e84a23;
    --erp-orange-soft: #fff3ea;
    --erp-beige: #fdebdc;
    --erp-beige-2: #f8e4d2;
    --erp-surface: #ffffff;
    --erp-border: #efcdb5;
    --erp-border-soft: #f4d9c8;
    --erp-text: #20140e;
    --erp-muted: #7d5c4d;
    --erp-sidebar: #050200;
    --erp-sidebar-active: #352014;
    --erp-sidebar-hover: rgba(255,255,255,.075);
    --erp-radius: 8px;
    --erp-sidebar-width: 276px;
    --erp-sidebar-width-md: 244px;
    --erp-sidebar-collapsed: 64px;
    --erp-topbar-height: 82px;
    --erp-ease: .3s ease-in-out;
}

html[dir="rtl"] body.msar-shell.msar-classic,
html[dir="rtl"] body.msar-shell.msar-classic * {
    font-family: var(--system-font-family, var(--msar-arabic-font-stack, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif)) !important;
}

body.msar-shell.msar-classic {
    --msar-shell-primary: var(--erp-orange);
    --msar-shell-primary-dark: var(--erp-orange-dark);
    --msar-shell-primary-soft: var(--erp-orange-soft);
    --msar-shell-breadcrumb-bg: var(--erp-beige-2);
    --msar-shell-tint-border: var(--erp-border);
    --msar-shell-tint-hover: var(--erp-orange-soft);
    --msar-shell-active-indicator: var(--erp-orange);
    --msar-shell-sidebar-bg: var(--erp-sidebar);
    --msar-shell-sidebar-hover: var(--erp-sidebar-hover);
    --msar-shell-sidebar-active: var(--erp-sidebar-active);
    --msar-shell-page-bg: var(--erp-beige);
    --msar-shell-surface: var(--erp-surface);
    --msar-shell-border: var(--erp-border);
    --msar-shell-text: var(--erp-text);
    --msar-shell-muted: var(--erp-muted);
    --msar-shell-sidebar-width: var(--erp-sidebar-width);
    --msar-shell-sidebar-width-md: var(--erp-sidebar-width-md);
    --msar-shell-collapsed-width: var(--erp-sidebar-collapsed);
    --msar-shell-topbar-height: var(--erp-topbar-height);
    --msar-shell-radius: var(--erp-radius);
    min-width: 320px !important;
    overflow: hidden !important;
    background: var(--erp-beige) !important;
    color: var(--erp-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic h1,
body.msar-shell.msar-classic h2,
body.msar-shell.msar-classic h3,
body.msar-shell.msar-classic h4,
body.msar-shell.msar-classic h5,
body.msar-shell.msar-classic h6,
body.msar-shell.msar-classic strong,
body.msar-shell.msar-classic b,
body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .brand-title,
body.msar-shell.msar-classic label,
body.msar-shell.msar-classic .btn {
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic i[class*="fa-"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

body.msar-shell.msar-classic .side-info i[class*="fa-"],
body.msar-shell.msar-classic .side-info .fa-fw,
body.msar-shell.msar-classic table i[class*="fa-"],
body.msar-shell.msar-classic table .fa-fw {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
}

/* Layout frame */
body.msar-shell.msar-classic .dashboard {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 var(--erp-sidebar-width) 0 0 !important;
    overflow: hidden !important;
    background: var(--erp-beige) !important;
    transition: padding-right var(--erp-ease) !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
    padding-right: var(--erp-sidebar-collapsed) !important;
}

body.msar-shell.msar-classic .main-form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 10px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--erp-beige) !important;
    scroll-behavior: smooth;
}

/* Sidebar */
body.msar-shell.msar-classic .side-info {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: column !important;
    width: var(--erp-sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--erp-sidebar) !important;
    color: #fff !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 0 !important;
    box-shadow: -8px 0 26px rgba(53, 32, 20, .24) !important;
    transition: width var(--erp-ease), box-shadow var(--erp-ease) !important;
    will-change: width;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info {
    width: var(--erp-sidebar-collapsed) !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle {
    flex: 0 0 44px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    background: var(--erp-orange) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background-color var(--erp-ease), color var(--erp-ease) !important;
}

body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:hover,
body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle:focus-visible {
    background: var(--erp-orange-dark) !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .msar-sidebar-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 10px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.26) transparent;
}

body.msar-shell.msar-classic .msar-sidebar-scroll::-webkit-scrollbar { width: 5px; }
body.msar-shell.msar-classic .msar-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.24);
    border-radius: 999px;
}

body.msar-shell.msar-classic .msar-sidebar-brand,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 78px !important;
    padding: 13px 14px !important;
    background: var(--erp-orange) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

body.msar-shell.msar-classic .msar-sidebar-brand img,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.16) !important;
}

body.msar-shell.msar-classic .side-info .brand-title {
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.msar-shell.msar-classic .side-info .brand-subtitle {
    margin-top: 2px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.msar-shell.msar-classic .module-sidebar-groups,
body.msar-shell.msar-classic .side-info .sidebar-nav {
    display: grid !important;
    gap: 2px !important;
}

body.msar-shell.msar-classic .module-sidebar-groups {
    margin: 8px 0 0 !important;
}

body.msar-shell.msar-classic .module-sidebar-group {
    display: grid !important;
    grid-template-rows: auto auto !important;
    margin: 0 !important;
    border: 0 !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 38px !important;
    padding: 9px 15px 9px 12px !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color var(--erp-ease), color var(--erp-ease) !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title:hover,
body.msar-shell.msar-classic .module-sidebar-group.msar-active > .module-sidebar-group-title {
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title::before {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.82) !important;
    font: normal 900 15px/1 "Font Awesome 6 Free" !important;
    content: "\f105" !important;
}

html[dir="rtl"] body.msar-shell.msar-classic .module-sidebar-group-title::before {
    content: "\f104" !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title::after {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin-inline-start: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.82) !important;
    font: normal 900 13px/1 "Font Awesome 6 Free" !important;
    content: "\f107" !important;
    transition: transform var(--erp-ease) !important;
}

body.msar-shell.msar-classic .module-sidebar-group:not(.msar-collapsed) .module-sidebar-group-title::after {
    transform: rotate(180deg) !important;
}

body.msar-shell.msar-classic .module-sidebar-group .module-sidebar-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    max-height: 760px !important;
    padding: 0 8px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    transition: max-height var(--erp-ease), opacity .22s ease-in-out, padding var(--erp-ease) !important;
}

body.msar-shell.msar-classic .module-sidebar-group.msar-collapsed .module-sidebar-nav {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.msar-shell.msar-classic .sidebar-nav,
body.msar-shell.msar-classic .module-sidebar-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
}

body.msar-shell.msar-classic .sidebar-nav li { margin: 0 !important; }

body.msar-shell.msar-classic .sidebar-nav a {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-right: 3px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: background-color var(--erp-ease), border-color var(--erp-ease), color var(--erp-ease) !important;
}

body.msar-shell.msar-classic .sidebar-nav a:hover {
    background: var(--erp-sidebar-hover) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .sidebar-nav a.active,
body.msar-shell.msar-classic .sidebar-nav li.current-page > a {
    background: var(--erp-sidebar-active) !important;
    border-right-color: var(--erp-orange) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .sidebar-nav .nav-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
}

body.msar-shell.msar-classic .sidebar-nav .nav-text {
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.msar-shell.msar-classic .sidebar-nav .notification-badge {
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--erp-orange) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

body.msar-shell.msar-classic .side-footer {
    flex: 0 0 auto !important;
    padding: 9px 12px 11px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.02) !important;
    color: rgba(255,255,255,.64) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info > .msar-sidebar-scroll > .brand-inline,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .card,
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group-title,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-footer,
body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav .nav-text {
    display: none !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group .module-sidebar-nav,
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group.msar-collapsed .module-sidebar-nav {
    display: grid !important;
    max-height: none !important;
    padding: 6px 6px 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav,
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-nav {
    padding: 6px 6px 0 !important;
    gap: 4px !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 8px 0 !important;
    border-right: 0 !important;
    border-radius: 6px !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav .nav-icon {
    width: 30px !important;
    height: 30px !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav a.active {
    background: rgba(255,90,47,.30) !important;
}

/* Header */
body.msar-shell.msar-classic .main-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: minmax(190px, 300px) minmax(320px, 1fr) minmax(220px, 340px) !important;
    grid-template-areas: "user modules title" !important;
    align-items: center !important;
    gap: 14px !important;
    width: calc(100% + 20px) !important;
    height: var(--erp-topbar-height) !important;
    min-height: var(--erp-topbar-height) !important;
    margin: 0 -10px !important;
    padding: 0 18px !important;
    overflow: visible !important;
    background: var(--erp-surface) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    box-shadow: 0 2px 10px rgba(93, 48, 23, .10) !important;
    direction: ltr !important;
}

body.msar-shell.msar-classic .module-page-title {
    grid-area: title !important;
    display: grid !important;
    grid-template-columns: 34px 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    direction: rtl !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle {
    grid-column: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: 8px !important;
    background: var(--erp-orange-soft) !important;
    color: var(--erp-orange) !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 {
    background: #fff !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .msar-header-logo {
    grid-column: 2 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .module-page-title > div {
    grid-column: 3 !important;
    min-width: 0 !important;
}

body.msar-shell.msar-classic .module-page-title h2 {
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--erp-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .module-page-title p { display: none !important; }

body.msar-shell.msar-classic .module-switcher-wrap {
    grid-area: modules !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic .module-switcher {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

body.msar-shell.msar-classic .module-switcher::-webkit-scrollbar { display: none !important; }

body.msar-shell.msar-classic .module-tab {
    flex: 0 0 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 6px 3px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--erp-muted) !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color var(--erp-ease), border-color var(--erp-ease) !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9d7a66 !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-icon i {
    width: 30px !important;
    height: 30px !important;
    font-size: 28px !important;
    line-height: 30px !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-text {
    max-width: 78px !important;
    overflow: hidden !important;
    color: var(--erp-text) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .module-tab.active,
body.msar-shell.msar-classic .module-tab:hover {
    border-bottom-color: var(--erp-orange) !important;
    color: var(--erp-orange) !important;
}

body.msar-shell.msar-classic .module-tab.active .msar-module-icon,
body.msar-shell.msar-classic .module-tab.active .msar-module-text,
body.msar-shell.msar-classic .module-tab:hover .msar-module-icon,
body.msar-shell.msar-classic .module-tab:hover .msar-module-text { color: var(--erp-orange) !important; }

body.msar-shell.msar-classic .msar-user-strip {
    grid-area: user !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
    direction: ltr !important;
}

body.msar-shell.msar-classic .msar-user-strip .msar-top-icon {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: var(--erp-text) !important;
    text-decoration: none !important;
}

body.msar-shell.msar-classic .msar-user-strip .msar-top-icon.sign-out {
    background: var(--erp-orange) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .msar-user-strip .msar-top-icon i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

body.msar-shell.msar-classic .msar-user-strip .msar-user-name {
    max-width: 140px !important;
    overflow: hidden !important;
    color: var(--erp-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    direction: rtl !important;
}

body.msar-shell.msar-classic .msar-user-strip .msar-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
}

body.msar-shell.msar-classic .msar-breadcrumb-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 40px !important;
    margin: 0 -10px 10px !important;
    padding: 0 18px !important;
    overflow: hidden !important;
    background: var(--erp-beige-2) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    color: var(--erp-orange-dark) !important;
    font-size: 12px !important;
}

body.msar-shell.msar-classic .msar-breadcrumb,
body.msar-shell.msar-classic .msar-date {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    line-height: 1.6 !important;
}

/* Cards / forms / tables */
body.msar-shell.msar-classic .ui-page-header,
body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card {
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface) !important;
    box-shadow: 0 1px 4px rgba(84, 45, 24, .06) !important;
}

body.msar-shell.msar-classic input,
body.msar-shell.msar-classic select,
body.msar-shell.msar-classic textarea,
body.msar-shell.msar-classic .input,
body.msar-shell.msar-classic .select,
body.msar-shell.msar-classic .textarea {
    min-height: 34px !important;
    border: 1px solid #d7b9a4 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--erp-text) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic input:focus,
body.msar-shell.msar-classic select:focus,
body.msar-shell.msar-classic textarea:focus,
body.msar-shell.msar-classic .input:focus,
body.msar-shell.msar-classic .select:focus,
body.msar-shell.msar-classic .textarea:focus {
    border-color: var(--erp-orange) !important;
    box-shadow: 0 0 0 2px rgba(255, 90, 47, .14) !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .filters,
body.msar-shell.msar-classic form.filters,
body.msar-shell.msar-classic .msar-filter-form,
body.msar-shell.msar-classic .ui-filter-body .filters,
body.msar-shell.msar-classic .inbox-filter-grid {
    gap: 12px 18px !important;
    align-items: end !important;
}

body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .auto-table-wrap {
    max-width: 100% !important;
    overflow: auto !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    background: #fff !important;
}

body.msar-shell.msar-classic table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic table thead th,
body.msar-shell.msar-classic table thead td {
    background: var(--erp-orange-soft) !important;
    border-color: var(--erp-border) !important;
    color: var(--erp-orange-dark) !important;
    font-weight: 700 !important;
}

body.msar-shell.msar-classic table th,
body.msar-shell.msar-classic table td {
    padding: 8px 15px 8px 10px !important;
    border-color: var(--erp-border-soft) !important;
    color: var(--erp-text) !important;
    text-align: right !important;
    vertical-align: middle !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic table tbody tr {
    transition: background-color .18s ease-in-out !important;
}

body.msar-shell.msar-classic table tbody tr:hover > td,
body.msar-shell.msar-classic table tbody tr:hover > th {
    background: var(--erp-orange-soft) !important;
}

body.msar-shell.msar-classic .btn,
body.msar-shell.msar-classic button.btn,
body.msar-shell.msar-classic a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

body.msar-shell.msar-classic .btn-primary,
body.msar-shell.msar-classic .btn-warning,
body.msar-shell.msar-classic .ui-page-actions .btn-primary {
    background: var(--erp-orange) !important;
    border-color: var(--erp-orange) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-primary:hover,
body.msar-shell.msar-classic .btn-warning:hover {
    background: var(--erp-orange-dark) !important;
    border-color: var(--erp-orange-dark) !important;
}

body.msar-shell.msar-classic .btn-light,
body.msar-shell.msar-classic .btn-ghost,
body.msar-shell.msar-classic .btn-secondary {
    background: #a48a7a !important;
    border-color: #a48a7a !important;
    color: #fff !important;
}

body.msar-shell.msar-classic a.btn[href*="show"],
body.msar-shell.msar-classic a.btn[href*="view"],
body.msar-shell.msar-classic a.btn[href*="details"],
body.msar-shell.msar-classic .btn-quick-view,
body.msar-shell.msar-classic .quick-view-btn {
    min-width: 92px !important;
    min-height: 28px !important;
    padding-inline: 9px !important;
    gap: 5px !important;
}

body.msar-shell.msar-classic .msar-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 10px 10px 8px !important;
    background: transparent !important;
    color: #b3512c !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* Tablet safe layout */
@media (max-width: 1280px) {
    body.msar-shell.msar-classic .dashboard { padding-right: var(--erp-sidebar-width-md) !important; }
    body.msar-shell.msar-classic .side-info { width: var(--erp-sidebar-width-md) !important; }
    body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard { padding-right: var(--erp-sidebar-collapsed) !important; }
    body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info { width: var(--erp-sidebar-collapsed) !important; }
    body.msar-shell.msar-classic .main-topbar {
        grid-template-columns: minmax(150px, 230px) minmax(280px, 1fr) minmax(190px, 300px) !important;
    }
    body.msar-shell.msar-classic .module-tab { flex-basis: 72px !important; width: 72px !important; min-width: 72px !important; }
}

@media (max-width: 900px) {
    :root { --erp-sidebar-width-md: 236px; }
    body.msar-shell.msar-classic .dashboard,
    body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
        padding-right: var(--erp-sidebar-collapsed) !important;
    }
    body.msar-shell.msar-classic:not(.admin-sidebar-collapsed) .side-info {
        width: min(286px, calc(100vw - var(--erp-sidebar-collapsed))) !important;
    }
    body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info { width: var(--erp-sidebar-collapsed) !important; }
    body.msar-shell.msar-classic .main-form { padding: 0 8px 0 !important; }
    body.msar-shell.msar-classic .main-topbar {
        width: calc(100% + 16px) !important;
        height: auto !important;
        min-height: 74px !important;
        margin: 0 -8px !important;
        padding: 8px 10px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title user"
            "modules modules" !important;
        gap: 8px !important;
    }
    body.msar-shell.msar-classic .module-page-title { grid-template-columns: 34px 38px minmax(0, 1fr) !important; }
    body.msar-shell.msar-classic .msar-header-logo { width: 38px !important; height: 38px !important; }
    body.msar-shell.msar-classic .module-switcher { justify-content: flex-start !important; width: 100% !important; }
    body.msar-shell.msar-classic .module-tab { flex: 0 0 66px !important; width: 66px !important; min-width: 66px !important; height: 60px !important; min-height: 60px !important; }
    body.msar-shell.msar-classic .module-tab .msar-module-icon i { font-size: 22px !important; }
    body.msar-shell.msar-classic .module-tab .msar-module-text { max-width: 62px !important; font-size: 9px !important; }
    body.msar-shell.msar-classic .msar-user-strip .msar-user-name,
    body.msar-shell.msar-classic .msar-user-strip .msar-avatar { display: none !important; }
    body.msar-shell.msar-classic .msar-breadcrumb-bar { margin-inline: -8px !important; padding-inline: 10px !important; }
}

@media (max-width: 520px) {
    :root { --erp-sidebar-collapsed: 58px; }
    body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle { height: 42px !important; min-height: 42px !important; flex-basis: 42px !important; }
    body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav,
    body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-nav { padding-inline: 5px !important; }
    body.msar-shell.msar-classic.admin-sidebar-collapsed .sidebar-nav a { min-height: 40px !important; }
    body.msar-shell.msar-classic .module-page-title h2 { max-width: 140px !important; }
}

@media print {
    body.msar-shell.msar-classic,
    body.msar-shell.msar-classic .dashboard,
    body.msar-shell.msar-classic .main-form {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
}

/* Runtime state hooks migrated from inline style attributes */
body.msar-shell.msar-classic [data-progress] {
    width: 0;
}

body.msar-shell.msar-classic .timeline-item {
    background: #fff;
    border-color: #e2e8f0;
}

body.msar-shell.msar-classic .timeline-item.is-unread {
    background: #fff8e8 !important;
    border-color: #f6d37b !important;
}

body.msar-shell.msar-classic .question-color-swatch[data-bg-color],
body.msar-shell.msar-classic .chip[data-bg-color] {
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}


/* ---- consolidated runtime layout rules ---- */
/* ==========================================================================
   MsarERP Unified Page Layout 2026
   نظام موحد لبنية الصفحات: فلتر علوي بعمودين، بيانات أسفل، ونماذج إضافة
   داخل Modal موحد أو صفحة مستقلة دون كسر التخطيط.
   ========================================================================== */

:root {
    --erp-page-gap: 10px;
    --erp-section-gap: 10px;
    --erp-filter-label-width: 148px;
    --erp-control-height: 34px;
    --erp-table-radius: 8px;
    --erp-modal-width: min(1120px, calc(100vw - 96px));
    --erp-modal-narrow-width: min(860px, calc(100vw - 96px));
    --erp-overlay: rgba(5, 2, 0, .54);
}

/* ───────────────────────── Page skeleton ───────────────────────── */
body.msar-shell.msar-classic .main-form {
    gap: 0 !important;
    padding-bottom: 0 !important;
}

body.msar-shell.msar-classic .main-form > .alert,
body.msar-shell.msar-classic .main-form > .card,
body.msar-shell.msar-classic .main-form > .grid,
body.msar-shell.msar-classic .main-form > .ui-card,
body.msar-shell.msar-classic .main-form > .app-card,
body.msar-shell.msar-classic .main-form > .table-wrap,
body.msar-shell.msar-classic .main-form > form {
    margin-block: 0 var(--erp-section-gap) !important;
}

body.msar-shell.msar-classic .main-form > .card:first-of-type,
body.msar-shell.msar-classic .main-form > .grid:first-of-type,
body.msar-shell.msar-classic .main-form > form:first-of-type {
    margin-top: 0 !important;
}

body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card {
    padding: 14px 16px !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    background: var(--erp-surface) !important;
    box-shadow: 0 1px 3px rgba(84, 45, 24, .05) !important;
}

body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .card > h2:first-child,
body.msar-shell.msar-classic .card > h3:first-child,
body.msar-shell.msar-classic .ui-card > h2:first-child,
body.msar-shell.msar-classic .ui-card > h3:first-child {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--erp-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic .section-subtitle,
body.msar-shell.msar-classic .muted,
body.msar-shell.msar-classic .small-muted {
    color: var(--erp-muted) !important;
    line-height: 1.6 !important;
}

/* ───────────────────────── Filters: top area / exactly two columns ───────────────────────── */
body.msar-shell.msar-classic .msar-filter-section,
body.msar-shell.msar-classic .ui-filter-panel,
body.msar-shell.msar-classic .card:has(> form.msar-system-filter),
body.msar-shell.msar-classic form.msar-system-filter {
    width: 100% !important;
}

body.msar-shell.msar-classic .msar-filter-section,
body.msar-shell.msar-classic .ui-filter-panel {
    padding: 18px 18px 14px !important;
    min-height: auto !important;
}

body.msar-shell.msar-classic form.msar-system-filter,
body.msar-shell.msar-classic form.filters,
body.msar-shell.msar-classic .filters,
body.msar-shell.msar-classic .inbox-filter-grid,
body.msar-shell.msar-classic .ui-filter-body form,
body.msar-shell.msar-classic .ui-filter-body .filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
    align-items: end !important;
    width: min(980px, 100%) !important;
    margin-inline: auto !important;
}

body.msar-shell.msar-classic form.msar-system-filter::after,
body.msar-shell.msar-classic form.filters::after,
body.msar-shell.msar-classic .filters::after {
    content: "";
    grid-column: 1 / -1;
    display: block;
    height: 1px;
    margin-top: 8px;
    border-top: 1px dashed var(--erp-border-soft);
}

body.msar-shell.msar-classic form.msar-system-filter .field,
body.msar-shell.msar-classic form.filters .field,
body.msar-shell.msar-classic .filters .field,
body.msar-shell.msar-classic .ui-filter-body .field,
body.msar-shell.msar-classic .inbox-filter-grid .field {
    display: grid !important;
    grid-template-columns: var(--erp-filter-label-width) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.msar-shell.msar-classic form.msar-system-filter .field > label,
body.msar-shell.msar-classic form.filters .field > label,
body.msar-shell.msar-classic .filters .field > label,
body.msar-shell.msar-classic .ui-filter-body .field > label,
body.msar-shell.msar-classic .inbox-filter-grid .field > label {
    margin: 0 !important;
    color: var(--erp-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic form.msar-system-filter input,
body.msar-shell.msar-classic form.msar-system-filter select,
body.msar-shell.msar-classic form.msar-system-filter textarea,
body.msar-shell.msar-classic form.filters input,
body.msar-shell.msar-classic form.filters select,
body.msar-shell.msar-classic form.filters textarea,
body.msar-shell.msar-classic .filters input,
body.msar-shell.msar-classic .filters select,
body.msar-shell.msar-classic .filters textarea,
body.msar-shell.msar-classic .ui-filter-body input,
body.msar-shell.msar-classic .ui-filter-body select,
body.msar-shell.msar-classic .ui-filter-body textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--erp-control-height) !important;
    min-height: var(--erp-control-height) !important;
}

body.msar-shell.msar-classic form.msar-system-filter .actions,
body.msar-shell.msar-classic form.msar-system-filter .action-bar,
body.msar-shell.msar-classic form.filters .actions,
body.msar-shell.msar-classic form.filters .action-bar,
body.msar-shell.msar-classic .filters .actions,
body.msar-shell.msar-classic .ui-filter-body .actions,
body.msar-shell.msar-classic .inbox-filter-grid .actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 4px 0 0 !important;
    width: 100% !important;
}

/* Convert existing grid filters to the same two-column contract */
body.msar-shell.msar-classic form.msar-system-filter.grid,
body.msar-shell.msar-classic form.msar-system-filter.grid-2,
body.msar-shell.msar-classic form.msar-system-filter.grid-3,
body.msar-shell.msar-classic form.msar-system-filter.grid-4,
body.msar-shell.msar-classic form.msar-system-filter.grid-5 {
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
}

body.msar-shell.msar-classic form.msar-system-filter .field.msar-span-2,
body.msar-shell.msar-classic form.msar-system-filter .field.util-utility-94a5,
body.msar-shell.msar-classic form.msar-system-filter .field.util-utility-ae94,
body.msar-shell.msar-classic form.filters .field.util-utility-94a5,
body.msar-shell.msar-classic form.filters .field.util-utility-ae94 {
    grid-column: 1 / -1 !important;
}

/* ───────────────────────── Data area ───────────────────────── */
body.msar-shell.msar-classic .msar-data-section,
body.msar-shell.msar-classic .card:has(.table-wrap),
body.msar-shell.msar-classic .card:has(table) {
    padding: 14px 16px 16px !important;
    overflow: visible !important;
}

body.msar-shell.msar-classic .msar-data-section .section-title,
body.msar-shell.msar-classic .card:has(.table-wrap) > .section-title,
body.msar-shell.msar-classic .card:has(table) > .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

body.msar-shell.msar-classic .msar-system-create-toolbar,
body.msar-shell.msar-classic .msar-data-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

body.msar-shell.msar-classic .msar-data-section > .actions,
body.msar-shell.msar-classic .card:has(.table-wrap) > .actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .auto-table-wrap,
body.msar-shell.msar-classic .assign-table-wrap,
body.msar-shell.msar-classic .audit-table-wrap,
body.msar-shell.msar-classic .bulk-table-wrap,
body.msar-shell.msar-classic .msar-data-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-table-radius) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(84, 45, 24, .04) !important;
}

body.msar-shell.msar-classic table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--erp-table-radius) !important;
}

body.msar-shell.msar-classic table thead th:first-child,
body.msar-shell.msar-classic table thead td:first-child { border-start-start-radius: var(--erp-table-radius) !important; }
body.msar-shell.msar-classic table thead th:last-child,
body.msar-shell.msar-classic table thead td:last-child { border-start-end-radius: var(--erp-table-radius) !important; }
body.msar-shell.msar-classic table tbody tr:last-child td:first-child { border-end-start-radius: var(--erp-table-radius) !important; }
body.msar-shell.msar-classic table tbody tr:last-child td:last-child { border-end-end-radius: var(--erp-table-radius) !important; }

body.msar-shell.msar-classic table th,
body.msar-shell.msar-classic table td {
    padding-right: 15px !important;
    padding-left: 10px !important;
    height: 34px !important;
}

body.msar-shell.msar-classic table tbody tr:hover > td,
body.msar-shell.msar-classic table tbody tr:hover > th {
    background: var(--erp-orange-soft) !important;
}

/* ───────────────────────── Buttons / icons ───────────────────────── */
body.msar-shell.msar-classic .btn i[class*="fa-"],
body.msar-shell.msar-classic button i[class*="fa-"],
body.msar-shell.msar-classic a i[class*="fa-"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 18px !important;
}

body.msar-shell.msar-classic .btn-quick-view,
body.msar-shell.msar-classic .quick-view-btn,
body.msar-shell.msar-classic a.btn[href*="show"],
body.msar-shell.msar-classic a.btn[href*="view"],
body.msar-shell.msar-classic a.btn[href*="details"] {
    min-width: 96px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 4px !important;
    background: #55c2df !important;
    border-color: #55c2df !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .msar-create-action {
    min-width: 122px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: 12px !important;
    background: #55c2df !important;
    border-color: #55c2df !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .msar-create-action:hover,
body.msar-shell.msar-classic .btn-quick-view:hover {
    filter: brightness(.95) !important;
}

/* ───────────────────────── Standalone create/edit pages ───────────────────────── */
body.msar-shell.msar-classic.msar-standalone-entry-page .main-form > .card:has(form),
body.msar-shell.msar-classic.msar-standalone-entry-page .main-form > form,
body.msar-shell.msar-classic .msar-standalone-form-section {
    width: min(1180px, 100%) !important;
    margin-inline: auto !important;
}

body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter),
body.msar-shell.msar-classic .msar-standalone-form-section form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 12px 18px !important;
}

body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter) .field,
body.msar-shell.msar-classic .msar-standalone-form-section form .field {
    display: grid !important;
    grid-template-columns: var(--erp-filter-label-width) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter) .actions,
body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter) .action-bar,
body.msar-shell.msar-classic .msar-standalone-form-section form .actions,
body.msar-shell.msar-classic .msar-standalone-form-section form .action-bar {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
}

/* ───────────────────────── Unified modal shell ───────────────────────── */
body.msar-shell.msar-classic .msar-system-modal,
body.msar-shell.msar-classic .modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 30px 48px !important;
    background: var(--erp-overlay) !important;
    overflow: auto !important;
}

body.msar-shell.msar-classic .msar-system-modal.is-open,
body.msar-shell.msar-classic .modal.open,
body.msar-shell.msar-classic .modal.show {
    display: flex !important;
}

body.msar-shell.msar-classic .msar-system-modal-dialog,
body.msar-shell.msar-classic .modal-card,
body.msar-shell.msar-classic .modal-dialog,
body.msar-shell.msar-classic .modal-content {
    width: var(--erp-modal-width) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 22px 70px rgba(5, 2, 0, .30) !important;
}

body.msar-shell.msar-classic .msar-system-modal-dialog.is-narrow {
    width: var(--erp-modal-narrow-width) !important;
}

body.msar-shell.msar-classic .msar-system-modal-head,
body.msar-shell.msar-classic .modal-head,
body.msar-shell.msar-classic .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--erp-border-soft) !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .msar-system-modal-title,
body.msar-shell.msar-classic .modal-title,
body.msar-shell.msar-classic .modal-head h1,
body.msar-shell.msar-classic .modal-head h2,
body.msar-shell.msar-classic .modal-head h3,
body.msar-shell.msar-classic .modal-header h1,
body.msar-shell.msar-classic .modal-header h2,
body.msar-shell.msar-classic .modal-header h3 {
    margin: 0 !important;
    color: var(--erp-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic .msar-system-modal-close,
body.msar-shell.msar-classic .modal-close,
body.msar-shell.msar-classic .close,
body.msar-shell.msar-classic [data-dismiss="modal"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #5f5149 !important;
    font-size: 22px !important;
    cursor: pointer !important;
}

body.msar-shell.msar-classic .msar-system-modal-body,
body.msar-shell.msar-classic .modal-body {
    max-height: calc(100vh - 116px) !important;
    overflow: auto !important;
    padding: 16px 18px !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .msar-system-modal-body > .card,
body.msar-shell.msar-classic .modal-card > .card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.msar-shell.msar-classic .msar-system-modal-body form,
body.msar-shell.msar-classic .modal form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(270px, 1fr)) !important;
    gap: 12px 20px !important;
    width: min(760px, 100%) !important;
    margin: 0 auto !important;
}

body.msar-shell.msar-classic .msar-system-modal-body .field,
body.msar-shell.msar-classic .modal .field {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

body.msar-shell.msar-classic .msar-system-modal-body .field > label,
body.msar-shell.msar-classic .modal .field > label {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .msar-system-modal-body .actions,
body.msar-shell.msar-classic .msar-system-modal-body .action-bar,
body.msar-shell.msar-classic .modal .actions,
body.msar-shell.msar-classic .modal .action-bar,
body.msar-shell.msar-classic .modal-footer {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 14px -18px -16px !important;
    padding: 12px 18px !important;
    border-top: 1px solid var(--erp-border-soft) !important;
    background: #f8f8f8 !important;
}

/* ───────────────────────── Sidebar icon consistency for generated employee links ───────────────────────── */
body.msar-shell.msar-classic .side-info .sidebar-nav a {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    column-gap: 10px !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon {
    grid-column: 1 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

body.msar-shell.msar-classic .side-info .sidebar-nav a .notification-badge,
body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-arrow {
    grid-column: 3 !important;
    justify-self: end !important;
}

/* ───────────────────────── Responsive rules ───────────────────────── */
@media (max-width: 1100px) {
    :root { --erp-filter-label-width: 132px; }
    body.msar-shell.msar-classic form.msar-system-filter,
    body.msar-shell.msar-classic form.filters,
    body.msar-shell.msar-classic .filters,
    body.msar-shell.msar-classic .inbox-filter-grid,
    body.msar-shell.msar-classic .ui-filter-body form,
    body.msar-shell.msar-classic .ui-filter-body .filters {
        grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
        column-gap: 18px !important;
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    :root { --erp-filter-label-width: 112px; }
    body.msar-shell.msar-classic form.msar-system-filter,
    body.msar-shell.msar-classic form.filters,
    body.msar-shell.msar-classic .filters,
    body.msar-shell.msar-classic .inbox-filter-grid,
    body.msar-shell.msar-classic .ui-filter-body form,
    body.msar-shell.msar-classic .ui-filter-body .filters,
    body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter),
    body.msar-shell.msar-classic .msar-standalone-form-section form,
    body.msar-shell.msar-classic .msar-system-modal-body form,
    body.msar-shell.msar-classic .modal form {
        grid-template-columns: 1fr !important;
    }

    body.msar-shell.msar-classic form.msar-system-filter .field,
    body.msar-shell.msar-classic form.filters .field,
    body.msar-shell.msar-classic .filters .field,
    body.msar-shell.msar-classic .ui-filter-body .field,
    body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter) .field,
    body.msar-shell.msar-classic .msar-standalone-form-section form .field,
    body.msar-shell.msar-classic .msar-system-modal-body .field,
    body.msar-shell.msar-classic .modal .field {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    body.msar-shell.msar-classic .msar-system-modal,
    body.msar-shell.msar-classic .modal {
        padding: 14px !important;
    }

    body.msar-shell.msar-classic .msar-system-modal-dialog,
    body.msar-shell.msar-classic .modal-card,
    body.msar-shell.msar-classic .modal-dialog,
    body.msar-shell.msar-classic .modal-content {
        width: 100% !important;
        max-height: calc(100vh - 28px) !important;
    }
}


/* ---- consolidated reference layout rules ---- */
/* ========================================================================== 
   MsarERP Reference Pixel Layer 2026 — Phase 2
   Exact visual alignment layer based on the supplied ERP reference screens.
   Loaded last on purpose. Do not put page-specific inline styles above it.
   ========================================================================== */

:root {
    --ref-orange: #ff5a2f;
    --ref-orange-dark: #e64a25;
    --ref-beige: #ffecde;
    --ref-beige-2: #fde6d4;
    --ref-surface: #ffffff;
    --ref-table-head: #fff9ed;
    --ref-border: #efcdb6;
    --ref-border-soft: #f5dac7;
    --ref-text: #20130d;
    --ref-muted: #7a6256;
    --ref-sidebar: #050200;
    --ref-sidebar-section: #2b190f;
    --ref-sidebar-section-active: #362216;
    --ref-sidebar-hover: #1c100a;
    --ref-sidebar-width: 250px;
    --ref-sidebar-collapsed: 66px;
    --ref-topbar-h: 76px;
    --ref-breadcrumb-h: 48px;
    --ref-footer-h: 30px;
    --ref-control-h: 30px;
    --ref-field-label: 138px;
    --ref-page-gap: 10px;
    --ref-radius: 0px;
    --ref-table-radius: 0px;
    --ref-ease: .3s ease-in-out;
}

html[dir="rtl"] body.msar-shell.msar-classic,
html[dir="rtl"] body.msar-shell.msar-classic * {
    font-family: var(--system-font-family, var(--msar-arabic-font-stack, "Droid Arabic Kufi", "Droid Kufi", "DroidKufi-Regular", Tahoma, Arial, sans-serif)) !important;
    letter-spacing: 0 !important;
}

html, body.msar-shell.msar-classic {
    background: var(--ref-beige) !important;
}

body.msar-shell.msar-classic {
    --erp-orange: var(--ref-orange) !important;
    --erp-beige: var(--ref-beige) !important;
    --erp-surface: var(--ref-surface) !important;
    --erp-border: var(--ref-border) !important;
    --erp-border-soft: var(--ref-border-soft) !important;
    --erp-text: var(--ref-text) !important;
    --erp-muted: var(--ref-muted) !important;
    --erp-sidebar-width: var(--ref-sidebar-width) !important;
    --erp-sidebar-collapsed: var(--ref-sidebar-collapsed) !important;
    --erp-topbar-height: var(--ref-topbar-h) !important;
    --erp-radius: var(--ref-radius) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--ref-text) !important;
}

body.msar-shell.msar-classic h1,
body.msar-shell.msar-classic h2,
body.msar-shell.msar-classic h3,
body.msar-shell.msar-classic h4,
body.msar-shell.msar-classic h5,
body.msar-shell.msar-classic h6,
body.msar-shell.msar-classic label,
body.msar-shell.msar-classic strong,
body.msar-shell.msar-classic b,
body.msar-shell.msar-classic .btn,
body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .nav-text,
body.msar-shell.msar-classic th {
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

/* ───────────────────────── Fixed shell geometry ───────────────────────── */
body.msar-shell.msar-classic .dashboard {
    display: block !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 var(--ref-sidebar-width) 0 0 !important;
    overflow: hidden !important;
    background: var(--ref-beige) !important;
    transition: padding-right var(--ref-ease) !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
    padding-right: var(--ref-sidebar-collapsed) !important;
}

body.msar-shell.msar-classic .main-form {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 var(--ref-page-gap) 0 !important;
    gap: 0 !important;
    background: var(--ref-beige) !important;
}

body.msar-shell.msar-classic .side-info {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1100 !important;
    width: var(--ref-sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid #1a0d08 !important;
    border-radius: 0 !important;
    background: var(--ref-sidebar) !important;
    box-shadow: none !important;
    transition: width var(--ref-ease) !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info {
    width: var(--ref-sidebar-collapsed) !important;
}

/* Sidebar has no standalone top toggle in the reference; the header toggle is used. */
body.msar-shell.msar-classic .side-info > .admin-sidebar-toggle {
    display: none !important;
}

body.msar-shell.msar-classic .msar-sidebar-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.35) transparent !important;
}

body.msar-shell.msar-classic .msar-sidebar-scroll::-webkit-scrollbar { width: 6px !important; }
body.msar-shell.msar-classic .msar-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32) !important; border-radius: 8px !important; }

/* ───────────────────────── Sidebar brand / accordion ───────────────────────── */
body.msar-shell.msar-classic .msar-sidebar-brand,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline {
    height: var(--ref-topbar-h) !important;
    min-height: var(--ref-topbar-h) !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.16) !important;
    background: var(--ref-orange) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .msar-sidebar-brand img,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,.88) !important;
    padding: 3px !important;
}

body.msar-shell.msar-classic .msar-sidebar-brand .brand-title,
body.msar-shell.msar-classic .side-info .brand-title {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.msar-shell.msar-classic .msar-sidebar-brand .brand-subtitle,
body.msar-shell.msar-classic .side-info .brand-subtitle {
    color: rgba(255,255,255,.78) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.msar-shell.msar-classic .msar-sidebar-profile,
body.msar-shell.msar-classic .module-sidebar-card,
body.msar-shell.msar-classic .msar-sidebar-empty {
    display: none !important;
}

body.msar-shell.msar-classic .module-sidebar-groups,
body.msar-shell.msar-classic .msar-sidebar-utility-nav,
body.msar-shell.msar-classic .side-info .sidebar-nav {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.msar-shell.msar-classic .module-sidebar-group {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.03) !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    cursor: pointer !important;
    user-select: none !important;
}

body.msar-shell.msar-classic .module-sidebar-group.is-open > .module-sidebar-group-title,
body.msar-shell.msar-classic .module-sidebar-group-title:hover {
    background: var(--ref-sidebar-section) !important;
}

body.msar-shell.msar-classic .module-sidebar-group.has-active > .module-sidebar-group-title {
    background: var(--ref-sidebar-section-active) !important;
    border-right: 4px solid var(--ref-orange) !important;
    padding-right: 8px !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 {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-icon { grid-column: 1 !important; justify-self: center !important; }
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-text { grid-column: 2 !important; min-width: 0 !important; text-align: right !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-chevron { grid-column: 3 !important; justify-self: center !important; transition: transform var(--ref-ease) !important; }
body.msar-shell.msar-classic .module-sidebar-group.is-collapsed > .module-sidebar-group-title .msar-section-chevron { transform: rotate(90deg) !important; }

body.msar-shell.msar-classic .module-sidebar-group > .sidebar-nav {
    max-height: 1200px !important;
    overflow: hidden !important;
    padding: 5px 0 7px !important;
    background: #120a06 !important;
    transition: max-height var(--ref-ease), padding var(--ref-ease) !important;
}

body.msar-shell.msar-classic .module-sidebar-group.is-collapsed > .sidebar-nav {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav li {
    margin: 0 !important;
    padding: 0 !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a {
    position: relative !important;
    min-height: 30px !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    column-gap: 6px !important;
    padding: 0 12px 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a:hover,
body.msar-shell.msar-classic .side-info .sidebar-nav a:focus-visible {
    background: var(--ref-sidebar-hover) !important;
    color: #fff !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a.active {
    background: var(--ref-sidebar-section-active) !important;
    color: #fff !important;
    border-right: 4px solid var(--ref-orange) !important;
    padding-right: 8px !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon {
    grid-column: 1 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
}

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

body.msar-shell.msar-classic .side-info .sidebar-nav a .notification-badge,
body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-arrow {
    grid-column: 3 !important;
    justify-self: center !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a:not(.active) .nav-icon i.fa-circle-dot,
body.msar-shell.msar-classic .module-sidebar-nav a .nav-icon i.fa-circle-dot {
    color: #c98b45 !important;
    font-size: 9px !important;
}

body.msar-shell.msar-classic .side-info i[class*="fa-"],
body.msar-shell.msar-classic table i[class*="fa-"],
body.msar-shell.msar-classic .btn i[class*="fa-"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
}

body.msar-shell.msar-classic .module-sidebar-nav a .nav-icon i[class*="fa-"] {
    font-size: 9px !important;
}

body.msar-shell.msar-classic .side-footer {
    flex: 0 0 auto !important;
    min-height: 50px !important;
    padding: 8px 10px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.58) !important;
    background: #050200 !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* Collapsed sidebar */
body.msar-shell.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    padding: 10px 8px !important;
}
body.msar-shell.msar-classic.admin-sidebar-collapsed .msar-sidebar-brand > div,
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group-title .msar-section-text,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .nav-text,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .notification-badge,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-footer {
    display: none !important;
}
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group-title,
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    justify-items: center !important;
}
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group-title .msar-section-chevron,
body.msar-shell.msar-classic.admin-sidebar-collapsed .module-sidebar-group > .sidebar-nav {
    display: none !important;
}

/* ───────────────────────── Top header ───────────────────────── */
body.msar-shell.msar-classic .main-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: var(--ref-topbar-h) !important;
    height: var(--ref-topbar-h) !important;
    display: grid !important;
    grid-template-columns: 265px minmax(0, 1fr) 52px !important;
    grid-template-areas: "user modules toggle" !important;
    align-items: stretch !important;
    gap: 0 !important;
    direction: ltr !important;
    margin: 0 calc(-1 * var(--ref-page-gap)) !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e8c8b7 !important;
    background: var(--ref-surface) !important;
    box-shadow: 0 1px 4px rgba(64, 34, 18, .14) !important;
}

body.msar-shell.msar-classic .msar-user-strip {
    grid-area: user !important;
    direction: ltr !important;
    height: var(--ref-topbar-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 12px !important;
    min-width: 0 !important;
    border: 0 !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .msar-user-strip .msar-user-name {
    max-width: 92px !important;
    display: inline-block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #222 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic .msar-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    background: #f3f6f8 !important;
    border: 1px solid #dfe6ec !important;
}

body.msar-shell.msar-classic .msar-top-icon,
body.msar-shell.msar-classic .msar-user-strip .sign-out {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--ref-orange) !important;
    text-decoration: none !important;
}

body.msar-shell.msar-classic .msar-user-strip .notification-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #ef3340 !important;
    color: #fff !important;
    font-size: 9px !important;
    line-height: 16px !important;
}

body.msar-shell.msar-classic .pwa-install-button {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 2px !important;
    background: #9aa5ad !important;
    color: #fff !important;
    font-size: 12px !important;
}

body.msar-shell.msar-classic .module-switcher-wrap {
    grid-area: modules !important;
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: var(--ref-topbar-h) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 10px !important;
    border: 0 !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .module-switcher-label { display: none !important; }

body.msar-shell.msar-classic .module-switcher {
    height: var(--ref-topbar-h) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic .module-tab {
    position: relative !important;
    width: 84px !important;
    min-width: 72px !important;
    height: var(--ref-topbar-h) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 7px 2px 6px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2b1c14 !important;
    text-decoration: none !important;
}

body.msar-shell.msar-classic .module-tab.active,
body.msar-shell.msar-classic .module-tab:hover {
    color: var(--ref-orange) !important;
    border-bottom-color: var(--ref-orange) !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-icon,
body.msar-shell.msar-classic .module-tab .msar-module-icon i {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #a57a61 !important;
    font-size: 28px !important;
    line-height: 30px !important;
}

body.msar-shell.msar-classic .module-tab.active .msar-module-icon,
body.msar-shell.msar-classic .module-tab.active .msar-module-icon i,
body.msar-shell.msar-classic .module-tab:hover .msar-module-icon,
body.msar-shell.msar-classic .module-tab:hover .msar-module-icon i {
    color: var(--ref-orange) !important;
}

body.msar-shell.msar-classic .module-tab .msar-module-text {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body.msar-shell.msar-classic .module-page-title {
    grid-area: toggle !important;
    direction: rtl !important;
    height: var(--ref-topbar-h) !important;
    min-height: var(--ref-topbar-h) !important;
    width: 52px !important;
    min-width: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.msar-shell.msar-classic .module-page-title img,
body.msar-shell.msar-classic .module-page-title > div {
    display: none !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: var(--ref-orange) !important;
    cursor: pointer !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle:hover { background: #fff3ec !important; }

/* ───────────────────────── Breadcrumb and chrome strip ───────────────────────── */
body.msar-shell.msar-classic .msar-breadcrumb-bar {
    position: relative !important;
    z-index: 20 !important;
    height: var(--ref-breadcrumb-h) !important;
    min-height: var(--ref-breadcrumb-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 calc(-1 * var(--ref-page-gap)) var(--ref-page-gap) !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ref-border) !important;
    background: var(--ref-beige-2) !important;
    color: #7e4d33 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
}

body.msar-shell.msar-classic .msar-breadcrumb,
body.msar-shell.msar-classic .msar-date {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .msar-breadcrumb { justify-content: flex-start !important; font-weight: 700 !important; }
body.msar-shell.msar-classic .msar-breadcrumb a { color: #7e4d33 !important; text-decoration: none !important; }
body.msar-shell.msar-classic .msar-date { color: #9b3f23 !important; direction: ltr !important; }
body.msar-shell.msar-classic .msar-font-controls { display: inline-flex !important; gap: 4px !important; }
body.msar-shell.msar-classic .msar-font-btn {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 1px solid var(--ref-border) !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #7e4d33 !important;
    font-size: 12px !important;
    line-height: 22px !important;
}

/* ───────────────────────── Cards and page blocks ───────────────────────── */
body.msar-shell.msar-classic .main-form > .alert,
body.msar-shell.msar-classic .main-form > .card,
body.msar-shell.msar-classic .main-form > .grid,
body.msar-shell.msar-classic .main-form > .ui-card,
body.msar-shell.msar-classic .main-form > .app-card,
body.msar-shell.msar-classic .main-form > .table-wrap,
body.msar-shell.msar-classic .main-form > form,
body.msar-shell.msar-classic .msar-system-create-toolbar {
    margin-block: 0 var(--ref-page-gap) !important;
}

body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card,
body.msar-shell.msar-classic .msar-filter-section,
body.msar-shell.msar-classic .msar-data-section {
    border: 1px solid var(--ref-border) !important;
    border-radius: 0 !important;
    background: var(--ref-surface) !important;
    box-shadow: 0 1px 3px rgba(94, 52, 25, .10) !important;
}

body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .card > h1:first-child,
body.msar-shell.msar-classic .card > h2:first-child,
body.msar-shell.msar-classic .card > h3:first-child,
body.msar-shell.msar-classic .ui-card > h1:first-child,
body.msar-shell.msar-classic .ui-card > h2:first-child,
body.msar-shell.msar-classic .ui-card > h3:first-child {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--ref-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}

body.msar-shell.msar-classic .section-title::before,
body.msar-shell.msar-classic .msar-auto-filter-title::before {
    content: "\f0b0" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 5px !important;
    color: #d28c35 !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

body.msar-shell.msar-classic .muted,
body.msar-shell.msar-classic .small-muted,
body.msar-shell.msar-classic .section-subtitle {
    color: var(--ref-muted) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}

/* ───────────────────────── Filter blocks: two exact columns ───────────────────────── */
body.msar-shell.msar-classic .msar-filter-section,
body.msar-shell.msar-classic .ui-filter-panel,
body.msar-shell.msar-classic .card:has(> form.msar-system-filter) {
    min-height: 210px !important;
    padding: 24px 22px 18px !important;
    display: block !important;
}

body.msar-shell.msar-classic form.msar-system-filter,
body.msar-shell.msar-classic form.filters,
body.msar-shell.msar-classic .filters,
body.msar-shell.msar-classic .inbox-filter-grid,
body.msar-shell.msar-classic .ui-filter-body form,
body.msar-shell.msar-classic .ui-filter-body .filters {
    width: min(1040px, 100%) !important;
    margin: 22px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    column-gap: 54px !important;
    row-gap: 10px !important;
    align-items: center !important;
}

body.msar-shell.msar-classic form.msar-system-filter .field,
body.msar-shell.msar-classic form.filters .field,
body.msar-shell.msar-classic .filters .field,
body.msar-shell.msar-classic .ui-filter-body .field,
body.msar-shell.msar-classic .inbox-filter-grid .field {
    display: grid !important;
    grid-template-columns: var(--ref-field-label) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.msar-shell.msar-classic form.msar-system-filter .field > label,
body.msar-shell.msar-classic form.filters .field > label,
body.msar-shell.msar-classic .filters .field > label,
body.msar-shell.msar-classic .ui-filter-body .field > label,
body.msar-shell.msar-classic .inbox-filter-grid .field > label {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ref-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: var(--ref-control-h) !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.msar-shell.msar-classic select,
body.msar-shell.msar-classic textarea,
body.msar-shell.msar-classic .input,
body.msar-shell.msar-classic .select,
body.msar-shell.msar-classic .textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--ref-control-h) !important;
    min-height: var(--ref-control-h) !important;
    padding: 3px 8px !important;
    border: 1px solid #c9d0d6 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic input[readonly],
body.msar-shell.msar-classic input:disabled,
body.msar-shell.msar-classic select:disabled,
body.msar-shell.msar-classic textarea:disabled {
    background: #f2f2f2 !important;
    color: #111 !important;
}

body.msar-shell.msar-classic input[type="checkbox"],
body.msar-shell.msar-classic input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
}

body.msar-shell.msar-classic form.msar-system-filter::after,
body.msar-shell.msar-classic form.filters::after,
body.msar-shell.msar-classic .filters::after {
    content: "" !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    height: 1px !important;
    margin-top: 10px !important;
    border-top: 1px dashed var(--ref-border-soft) !important;
}

body.msar-shell.msar-classic form.msar-system-filter .actions,
body.msar-shell.msar-classic form.msar-system-filter .action-bar,
body.msar-shell.msar-classic form.filters .actions,
body.msar-shell.msar-classic form.filters .action-bar,
body.msar-shell.msar-classic .filters .actions,
body.msar-shell.msar-classic .ui-filter-body .actions,
body.msar-shell.msar-classic .inbox-filter-grid .actions,
body.msar-shell.msar-classic form.msar-system-filter > button[type="submit"],
body.msar-shell.msar-classic form.filters > button[type="submit"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    align-self: center !important;
}

/* ───────────────────────── Buttons ───────────────────────── */
body.msar-shell.msar-classic .btn,
body.msar-shell.msar-classic button,
body.msar-shell.msar-classic input[type="submit"] {
    min-height: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, filter .16s ease !important;
}

body.msar-shell.msar-classic .btn-primary,
body.msar-shell.msar-classic .btn-success,
body.msar-shell.msar-classic button[type="submit"],
body.msar-shell.msar-classic input[type="submit"] {
    background: #00b878 !important;
    border-color: #00b878 !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-light {
    background: #55c0de !important;
    border-color: #55c0de !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-danger,
body.msar-shell.msar-classic .danger,
body.msar-shell.msar-classic .delete {
    background: #b43c36 !important;
    border-color: #b43c36 !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-warning {
    background: #f4a23a !important;
    border-color: #f4a23a !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-quick-view {
    min-width: 86px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    background: #55c0de !important;
    border-color: #55c0de !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 26px !important;
}

body.msar-shell.msar-classic .msar-create-action {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    background: #55c0de !important;
    border-color: #55c0de !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn:hover,
body.msar-shell.msar-classic button:hover,
body.msar-shell.msar-classic input[type="submit"]:hover {
    filter: brightness(.96) !important;
}

/* ───────────────────────── Data area / tables ───────────────────────── */
body.msar-shell.msar-classic .msar-data-section,
body.msar-shell.msar-classic .card:has(.table-wrap),
body.msar-shell.msar-classic .card:has(table) {
    min-height: 235px !important;
    padding: 32px 20px 20px !important;
    overflow: visible !important;
}

body.msar-shell.msar-classic .msar-system-create-toolbar,
body.msar-shell.msar-classic .msar-data-toolbar,
body.msar-shell.msar-classic .msar-data-section > .actions,
body.msar-shell.msar-classic .card:has(.table-wrap) > .actions,
body.msar-shell.msar-classic .card:has(table) > .actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .auto-table-wrap,
body.msar-shell.msar-classic .assign-table-wrap,
body.msar-shell.msar-classic .audit-table-wrap,
body.msar-shell.msar-classic .bulk-table-wrap,
body.msar-shell.msar-classic .msar-data-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    border: 1px solid #e1d6cd !important;
    border-radius: var(--ref-table-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.msar-shell.msar-classic table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--ref-table-radius) !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 12px !important;
}

body.msar-shell.msar-classic table thead th,
body.msar-shell.msar-classic table thead td {
    height: 31px !important;
    padding: 4px 15px 4px 10px !important;
    border: 0 !important;
    border-left: 1px solid #e1d6cd !important;
    border-bottom: 1px solid #e0c7a7 !important;
    background: var(--ref-table-head) !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic table tbody td,
body.msar-shell.msar-classic table tbody th {
    height: 31px !important;
    padding: 4px 15px 4px 10px !important;
    border: 0 !important;
    border-left: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    text-align: right !important;
    vertical-align: middle !important;
}

body.msar-shell.msar-classic table tbody tr:nth-child(even) td,
body.msar-shell.msar-classic table tbody tr:nth-child(even) th {
    background: #fafafa !important;
}

body.msar-shell.msar-classic table tbody tr:hover > td,
body.msar-shell.msar-classic table tbody tr:hover > th {
    background: #fff4eb !important;
}

body.msar-shell.msar-classic table td:first-child,
body.msar-shell.msar-classic table th:first-child {
    color: var(--ref-orange) !important;
}

body.msar-shell.msar-classic table .actions,
body.msar-shell.msar-classic table td.actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .pagination,
body.msar-shell.msar-classic .pager {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 12px 0 0 !important;
}

body.msar-shell.msar-classic .pagination a,
body.msar-shell.msar-classic .pagination span,
body.msar-shell.msar-classic .pager a,
body.msar-shell.msar-classic .pager span {
    min-width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border: 1px solid #f1c39e !important;
    background: #ffe9d6 !important;
    color: #75452f !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

body.msar-shell.msar-classic .pagination .active,
body.msar-shell.msar-classic .pager .active {
    background: #d8933b !important;
    color: #fff !important;
}

/* ───────────────────────── Tabs: employee profile / module tabs ───────────────────────── */
body.msar-shell.msar-classic .profile-tabs,
body.msar-shell.msar-classic .tabs,
body.msar-shell.msar-classic .nav-tabs,
body.msar-shell.msar-classic .msar-tabs,
body.msar-shell.msar-classic .ui-tabs {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 39px !important;
    margin: 0 calc(-1 * var(--ref-page-gap)) 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #f2cbb4 !important;
    background: var(--ref-beige-2) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

body.msar-shell.msar-classic .profile-tabs a,
body.msar-shell.msar-classic .tabs a,
body.msar-shell.msar-classic .nav-tabs a,
body.msar-shell.msar-classic .msar-tabs a,
body.msar-shell.msar-classic .ui-tabs a,
body.msar-shell.msar-classic .profile-tabs button,
body.msar-shell.msar-classic .tabs button,
body.msar-shell.msar-classic .nav-tabs button,
body.msar-shell.msar-classic .msar-tabs button,
body.msar-shell.msar-classic .ui-tabs button {
    min-height: 39px !important;
    height: 39px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ref-orange) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .profile-tabs a.active,
body.msar-shell.msar-classic .tabs a.active,
body.msar-shell.msar-classic .nav-tabs a.active,
body.msar-shell.msar-classic .msar-tabs a.active,
body.msar-shell.msar-classic .ui-tabs a.active,
body.msar-shell.msar-classic .profile-tabs button.active,
body.msar-shell.msar-classic .tabs button.active,
body.msar-shell.msar-classic .nav-tabs button.active,
body.msar-shell.msar-classic .msar-tabs button.active,
body.msar-shell.msar-classic .ui-tabs button.active {
    background: #fff !important;
    color: #222 !important;
    border-color: #ddd !important;
    border-top-color: #c9c9c9 !important;
}

/* ───────────────────────── Modals and independent forms ───────────────────────── */
body.msar-shell.msar-classic .msar-system-modal,
body.msar-shell.msar-classic .modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 30px 48px !important;
    background: rgba(0,0,0,.48) !important;
    overflow: auto !important;
}

body.msar-shell.msar-classic .msar-system-modal.is-open,
body.msar-shell.msar-classic .modal.open,
body.msar-shell.msar-classic .modal.show {
    display: flex !important;
}

body.msar-shell.msar-classic .msar-system-modal-dialog,
body.msar-shell.msar-classic .modal-card,
body.msar-shell.msar-classic .modal-dialog,
body.msar-shell.msar-classic .modal-content {
    width: min(1380px, calc(100vw - 180px)) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 0 0 10px rgba(0,0,0,.14), 0 18px 60px rgba(0,0,0,.30) !important;
}

body.msar-shell.msar-classic .msar-system-modal-dialog.is-narrow {
    width: min(980px, calc(100vw - 160px)) !important;
}

body.msar-shell.msar-classic .msar-system-modal-head,
body.msar-shell.msar-classic .modal-head,
body.msar-shell.msar-classic .modal-header {
    min-height: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
    border-bottom: 1px solid #ddd !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .msar-system-modal-title,
body.msar-shell.msar-classic .modal-title,
body.msar-shell.msar-classic .modal-head h1,
body.msar-shell.msar-classic .modal-head h2,
body.msar-shell.msar-classic .modal-head h3,
body.msar-shell.msar-classic .modal-header h1,
body.msar-shell.msar-classic .modal-header h2,
body.msar-shell.msar-classic .modal-header h3 {
    margin: 0 !important;
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body.msar-shell.msar-classic .msar-system-modal-close,
body.msar-shell.msar-classic .modal-close,
body.msar-shell.msar-classic .close,
body.msar-shell.msar-classic [data-dismiss="modal"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-size: 24px !important;
    line-height: 34px !important;
}

body.msar-shell.msar-classic .msar-system-modal-body,
body.msar-shell.msar-classic .modal-body {
    max-height: calc(100vh - 116px) !important;
    overflow: auto !important;
    padding: 18px 22px 0 !important;
    background: #fff !important;
}

body.msar-shell.msar-classic .msar-system-modal-body form,
body.msar-shell.msar-classic .modal form,
body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter),
body.msar-shell.msar-classic .msar-standalone-form-section form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
    gap: 10px 24px !important;
    width: min(900px, 100%) !important;
    margin: 0 auto !important;
}

body.msar-shell.msar-classic .msar-system-modal-body .field,
body.msar-shell.msar-classic .modal .field,
body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter) .field,
body.msar-shell.msar-classic .msar-standalone-form-section form .field {
    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
}

body.msar-shell.msar-classic .msar-system-modal-body .actions,
body.msar-shell.msar-classic .msar-system-modal-body .action-bar,
body.msar-shell.msar-classic .modal .actions,
body.msar-shell.msar-classic .modal .action-bar,
body.msar-shell.msar-classic .modal-footer {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 22px -22px 0 !important;
    min-height: 56px !important;
    padding: 12px 22px !important;
    border-top: 1px solid #ddd !important;
    background: #f3f3f3 !important;
}

body.msar-shell.msar-classic.msar-standalone-entry-page .main-form > .card:has(form),
body.msar-shell.msar-classic .msar-standalone-form-section {
    width: min(1180px, 100%) !important;
    margin-inline: auto !important;
    padding: 24px !important;
}

/* ───────────────────────── Footer ───────────────────────── */
body.msar-shell.msar-classic .msar-footer {
    flex: 0 0 var(--ref-footer-h) !important;
    min-height: var(--ref-footer-h) !important;
    height: var(--ref-footer-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: auto calc(-1 * var(--ref-page-gap)) 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: #8a4d35 !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ───────────────────────── Tablet and compact desktop ───────────────────────── */
@media (max-width: 1280px) {
    :root {
        --ref-sidebar-width: 236px;
        --ref-field-label: 126px;
    }
    body.msar-shell.msar-classic .main-topbar {
        grid-template-columns: 250px minmax(0, 1fr) 48px !important;
    }
    body.msar-shell.msar-classic .module-switcher { gap: 6px !important; }
    body.msar-shell.msar-classic .module-tab { width: 74px !important; min-width: 66px !important; }
    body.msar-shell.msar-classic .module-tab .msar-module-text { font-size: 10px !important; }
    body.msar-shell.msar-classic form.msar-system-filter,
    body.msar-shell.msar-classic form.filters,
    body.msar-shell.msar-classic .filters,
    body.msar-shell.msar-classic .inbox-filter-grid,
    body.msar-shell.msar-classic .ui-filter-body form,
    body.msar-shell.msar-classic .ui-filter-body .filters {
        grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
        column-gap: 28px !important;
        width: min(920px, 100%) !important;
    }
}

@media (max-width: 980px) {
    :root { --ref-sidebar-width: 220px; --ref-topbar-h: 68px; }
    body.msar-shell.msar-classic .main-topbar {
        grid-template-columns: 190px minmax(0, 1fr) 46px !important;
    }
    body.msar-shell.msar-classic .msar-user-strip .msar-user-name { max-width: 70px !important; }
    body.msar-shell.msar-classic .module-switcher { overflow-x: auto !important; justify-content: flex-start !important; }
    body.msar-shell.msar-classic .module-tab { width: 64px !important; min-width: 64px !important; }
    body.msar-shell.msar-classic .module-tab .msar-module-icon,
    body.msar-shell.msar-classic .module-tab .msar-module-icon i { width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; font-size: 22px !important; }
}

@media (max-width: 760px) {
    :root { --ref-sidebar-width: var(--ref-sidebar-collapsed); --ref-field-label: 1fr; }
    body.msar-shell.msar-classic .dashboard { padding-right: var(--ref-sidebar-collapsed) !important; }
    body.msar-shell.msar-classic .side-info { width: var(--ref-sidebar-collapsed) !important; }
    body.msar-shell.msar-classic .main-topbar { grid-template-columns: 150px minmax(0, 1fr) 44px !important; }
    body.msar-shell.msar-classic .module-tab .msar-module-text { display: none !important; }
    body.msar-shell.msar-classic form.msar-system-filter,
    body.msar-shell.msar-classic form.filters,
    body.msar-shell.msar-classic .filters,
    body.msar-shell.msar-classic .inbox-filter-grid,
    body.msar-shell.msar-classic .ui-filter-body form,
    body.msar-shell.msar-classic .ui-filter-body .filters,
    body.msar-shell.msar-classic .msar-system-modal-body form,
    body.msar-shell.msar-classic .modal form,
    body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter),
    body.msar-shell.msar-classic .msar-standalone-form-section form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
    body.msar-shell.msar-classic form.msar-system-filter .field,
    body.msar-shell.msar-classic form.filters .field,
    body.msar-shell.msar-classic .filters .field,
    body.msar-shell.msar-classic .ui-filter-body .field,
    body.msar-shell.msar-classic .msar-system-modal-body .field,
    body.msar-shell.msar-classic .modal .field,
    body.msar-shell.msar-classic.msar-standalone-entry-page form:not(.msar-system-filter) .field,
    body.msar-shell.msar-classic .msar-standalone-form-section form .field {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    body.msar-shell.msar-classic .msar-system-modal,
    body.msar-shell.msar-classic .modal { padding: 14px !important; }
    body.msar-shell.msar-classic .msar-system-modal-dialog,
    body.msar-shell.msar-classic .modal-card,
    body.msar-shell.msar-classic .modal-dialog,
    body.msar-shell.msar-classic .modal-content { width: 100% !important; max-height: calc(100vh - 28px) !important; }
}


/* ---- migrated from msar-navy-professional-2026.css ---- */
/* ==========================================================================
   Msar ERP – Navy Professional Refinement 2026
   Layer 3: palette replacement + precision polishing + creative refinement.
   الهدف: نقل الهوية إلى الأزرق الكحلي مع خلفيات متدرجة ورفع الدقة البصرية.
   ========================================================================== */

:root {
    --navy-950: #071426;
    --navy-900: #0b1d35;
    --navy-850: #102543;
    --navy-800: #132d52;
    --navy-700: #1b4d85;
    --navy-600: #2f67a7;
    --navy-500: #4a80bd;
    --navy-100: #edf4ff;
    --navy-050: #f7faff;
    --sky-300: #82c4ff;
    --teal-500: #1fb5a9;
    --teal-600: #169c91;
    --amber-500: #d4a239;
    --red-500: #d95d57;
    --ink-900: #132131;
    --ink-700: #4a5f78;
    --line-soft: #d8e5f4;
    --line-strong: #bfd3e7;
    --surface-1: #ffffff;
    --surface-2: #f7fbff;
    --surface-3: #eef5fc;
    --shadow-soft: 0 6px 24px rgba(10, 33, 63, .08);
    --shadow-card: 0 8px 28px rgba(7, 20, 38, .06);
}

html, body.msar-shell.msar-classic {
    background:
        radial-gradient(circle at top right, rgba(79, 124, 186, .10), transparent 24%),
        radial-gradient(circle at top left, rgba(40, 124, 196, .08), transparent 18%),
        linear-gradient(180deg, #edf4ff 0%, #f6f9fe 34%, #fbfdff 100%) !important;
}

body.msar-shell.msar-classic {
    --ref-orange: var(--navy-700) !important;
    --ref-orange-dark: var(--navy-800) !important;
    --ref-beige: #f3f7fd !important;
    --ref-beige-2: #edf4fc !important;
    --ref-surface: var(--surface-1) !important;
    --ref-table-head: #f7fbff !important;
    --ref-border: var(--line-soft) !important;
    --ref-border-soft: #e7eff8 !important;
    --ref-text: var(--ink-900) !important;
    --ref-muted: var(--ink-700) !important;
    --ref-sidebar: var(--navy-950) !important;
    --ref-sidebar-section: #0d1a2d !important;
    --ref-sidebar-section-active: #16304f !important;
    --ref-sidebar-hover: #122540 !important;
    --erp-orange: var(--navy-700) !important;
    --erp-beige: #f3f7fd !important;
    --erp-surface: var(--surface-1) !important;
    --erp-border: var(--line-soft) !important;
    --erp-border-soft: #e7eff8 !important;
    --erp-text: var(--ink-900) !important;
    --erp-muted: var(--ink-700) !important;
    color: var(--ink-900) !important;
}

body.msar-shell.msar-classic .dashboard,
body.msar-shell.msar-classic .main-form {
    background: transparent !important;
}

/* Sidebar */
body.msar-shell.msar-classic .side-info {
    background: linear-gradient(180deg, #040a14 0%, #081321 18%, #0b1728 100%) !important;
    border-left: 1px solid rgba(120, 170, 225, .16) !important;
    box-shadow: -4px 0 20px rgba(3, 10, 20, .22) !important;
}

body.msar-shell.msar-classic .msar-sidebar-brand,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(135deg, #18355b 0%, #0e223d 52%, #08192d 100%) !important;
    border-bottom: 1px solid rgba(149, 193, 237, .14) !important;
}

body.msar-shell.msar-classic .msar-sidebar-brand img,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline img {
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 4px 12px rgba(7, 20, 38, .18) !important;
}

body.msar-shell.msar-classic .module-sidebar-group {
    border-bottom: 1px solid rgba(130, 196, 255, .06) !important;
}

body.msar-shell.msar-classic .module-sidebar-group-title {
    min-height: 42px !important;
    background: linear-gradient(180deg, rgba(20, 42, 72, .72) 0%, rgba(13, 28, 49, .92) 100%) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,.03) !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !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 {
    background: linear-gradient(180deg, rgba(28, 69, 120, .95) 0%, rgba(15, 38, 68, .98) 100%) !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-arrow,
body.msar-shell.msar-classic .side-info .sidebar-nav a .nav-icon {
    color: var(--sky-300) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a {
    min-height: 36px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.96) !important;
    transition: background-color .2s ease, color .2s ease, transform .2s ease !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a:hover {
    background: rgba(34, 73, 120, .30) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a.active {
    background: linear-gradient(90deg, rgba(56, 115, 189, .30) 0%, rgba(20, 43, 73, .90) 72%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(130, 196, 255, .10) !important;
}

body.msar-shell.msar-classic .side-info .sidebar-nav a.active::after {
    background: linear-gradient(180deg, #7fc0ff 0%, #4a80bd 100%) !important;
    width: 4px !important;
}

body.msar-shell.msar-classic .side-footer {
    background: #091321 !important;
    border-top: 1px solid rgba(130, 196, 255, .10) !important;
    color: rgba(255,255,255,.72) !important;
}

/* Header */
body.msar-shell.msar-classic .main-topbar {
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(191, 211, 231, .88) !important;
    box-shadow: 0 2px 12px rgba(7, 20, 38, .04) !important;
}

body.msar-shell.msar-classic .msar-user-strip {
    border-left: 1px solid #ebf2fa !important;
}

body.msar-shell.msar-classic .msar-top-icon {
    color: var(--navy-700) !important;
}

body.msar-shell.msar-classic .msar-user-name {
    color: var(--navy-900) !important;
}

body.msar-shell.msar-classic .module-switcher-wrap {
    background: transparent !important;
}

body.msar-shell.msar-classic .module-switcher {
    gap: 20px !important;
}

body.msar-shell.msar-classic .module-tab {
    position: relative !important;
    color: var(--ink-700) !important;
}

body.msar-shell.msar-classic .module-tab::after {
    content: "";
    position: absolute;
    right: 12px;
    left: 12px;
    bottom: -4px;
    height: 3px;
    border-radius: 999px;
    background: transparent;
}

body.msar-shell.msar-classic .module-tab:hover,
body.msar-shell.msar-classic .module-tab.active {
    color: var(--navy-700) !important;
}

body.msar-shell.msar-classic .module-tab.active::after,
body.msar-shell.msar-classic .module-tab:hover::after {
    background: linear-gradient(90deg, #2f67a7 0%, #82c4ff 100%) !important;
}

body.msar-shell.msar-classic .module-page-title {
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(135deg, #173a66 0%, #112946 55%, #0b1d35 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08) !important;
}

body.msar-shell.msar-classic .module-page-title h2,
body.msar-shell.msar-classic .module-page-title p,
body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle {
    color: #fff !important;
}

body.msar-shell.msar-classic .msar-breadcrumb-bar {
    min-height: 46px !important;
    background: linear-gradient(180deg, rgba(246,250,255,.96) 0%, rgba(237,244,253,.98) 100%) !important;
    border-bottom: 1px solid var(--line-soft) !important;
}

body.msar-shell.msar-classic .msar-breadcrumb,
body.msar-shell.msar-classic .msar-date,
body.msar-shell.msar-classic .msar-breadcrumb a {
    color: var(--navy-700) !important;
}

body.msar-shell.msar-classic .msar-font-btn {
    color: var(--navy-700) !important;
}

/* Content cards and sections */
body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card,
body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .msar-data-table-wrap,
body.msar-shell.msar-classic .auto-table-wrap,
body.msar-shell.msar-classic .assign-table-wrap,
body.msar-shell.msar-classic .audit-table-wrap,
body.msar-shell.msar-classic .bulk-table-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,252,255,.98) 100%) !important;
    border-color: var(--line-soft) !important;
    box-shadow: var(--shadow-card) !important;
}

body.msar-shell.msar-classic .msar-filter-section,
body.msar-shell.msar-classic .msar-data-section {
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .card > h1:first-child,
body.msar-shell.msar-classic .card > h2:first-child,
body.msar-shell.msar-classic .card > h3:first-child {
    color: var(--navy-900) !important;
}

body.msar-shell.msar-classic .small-muted,
body.msar-shell.msar-classic .muted,
body.msar-shell.msar-classic .section-subtitle {
    color: var(--ink-700) !important;
}

/* Inputs */
body.msar-shell.msar-classic input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.msar-shell.msar-classic select,
body.msar-shell.msar-classic textarea {
    border: 1px solid var(--line-strong) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    color: var(--ink-900) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

body.msar-shell.msar-classic input:focus,
body.msar-shell.msar-classic select:focus,
body.msar-shell.msar-classic textarea:focus {
    border-color: var(--navy-600) !important;
    box-shadow: 0 0 0 4px rgba(74, 128, 189, .12) !important;
    background: #fff !important;
}

body.msar-shell.msar-classic input[type="checkbox"],
body.msar-shell.msar-classic input[type="radio"] {
    accent-color: var(--navy-700) !important;
}

/* Tables */
body.msar-shell.msar-classic table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic table thead th,
body.msar-shell.msar-classic table tbody th {
    background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%) !important;
    color: var(--navy-900) !important;
    border-color: var(--line-soft) !important;
}

body.msar-shell.msar-classic table td {
    border-color: #e8f0f8 !important;
    color: var(--ink-900) !important;
}

body.msar-shell.msar-classic table tbody tr:hover td {
    background: #f7fbff !important;
}

body.msar-shell.msar-classic .table-count,
body.msar-shell.msar-classic .table-meta,
body.msar-shell.msar-classic .results-count,
body.msar-shell.msar-classic .pagination-summary,
body.msar-shell.msar-classic .muted-count {
    color: var(--navy-700) !important;
}

body.msar-shell.msar-classic .pagination a,
body.msar-shell.msar-classic .pagination span,
body.msar-shell.msar-classic .pager a,
body.msar-shell.msar-classic .page-links a,
body.msar-shell.msar-classic .page-links span {
    border-color: var(--line-strong) !important;
    background: #ffffff !important;
    color: var(--navy-700) !important;
}

body.msar-shell.msar-classic .pagination .active,
body.msar-shell.msar-classic .pagination .current,
body.msar-shell.msar-classic .page-links .active,
body.msar-shell.msar-classic .page-links .current {
    background: linear-gradient(180deg, #2f67a7 0%, #1b4d85 100%) !important;
    border-color: #1b4d85 !important;
    color: #fff !important;
}

/* Buttons */
body.msar-shell.msar-classic .btn,
body.msar-shell.msar-classic button,
body.msar-shell.msar-classic input[type="submit"],
body.msar-shell.msar-classic input[type="button"] {
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(12, 39, 74, .08) !important;
}

body.msar-shell.msar-classic .btn-primary,
body.msar-shell.msar-classic .msar-create-action,
body.msar-shell.msar-classic .btn-info,
body.msar-shell.msar-classic a[href*="new"].btn,
body.msar-shell.msar-classic a[href*="create"].btn {
    background: linear-gradient(180deg, #4a80bd 0%, #2f67a7 100%) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-success,
body.msar-shell.msar-classic button[type="submit"],
body.msar-shell.msar-classic input[type="submit"],
body.msar-shell.msar-classic .btn-search,
body.msar-shell.msar-classic .btn-save {
    background: linear-gradient(180deg, #1fb5a9 0%, #169c91 100%) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-warning,
body.msar-shell.msar-classic .btn-edit {
    background: linear-gradient(180deg, #dfb45a 0%, #c5942f 100%) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-danger,
body.msar-shell.msar-classic .btn-delete {
    background: linear-gradient(180deg, #e36d68 0%, #cb4b45 100%) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-light,
body.msar-shell.msar-classic .btn-secondary,
body.msar-shell.msar-classic .btn-gray {
    background: linear-gradient(180deg, #a6b7ca 0%, #8ea0b5 100%) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .btn-quick-view {
    background: linear-gradient(180deg, #72c6ff 0%, #4ca6e0 100%) !important;
}

/* Tabs */
body.msar-shell.msar-classic .profile-tabs,
body.msar-shell.msar-classic .evaluation-module-tabs,
body.msar-shell.msar-classic .msar-ref-tabs,
body.msar-shell.msar-classic .nav-tabs,
body.msar-shell.msar-classic .tabs,
body.msar-shell.msar-classic .ui-tabs {
    border-bottom: 1px solid var(--line-soft) !important;
    gap: 4px !important;
}

body.msar-shell.msar-classic .profile-tabs a,
body.msar-shell.msar-classic .evaluation-module-tabs a,
body.msar-shell.msar-classic .msar-ref-tabs a,
body.msar-shell.msar-classic .nav-tabs a,
body.msar-shell.msar-classic .tabs a,
body.msar-shell.msar-classic .ui-tabs a {
    min-height: 34px !important;
    padding: 7px 14px !important;
    border-radius: 8px 8px 0 0 !important;
    color: var(--navy-700) !important;
}

body.msar-shell.msar-classic .profile-tabs a.active,
body.msar-shell.msar-classic .profile-tabs a:hover,
body.msar-shell.msar-classic .evaluation-module-tabs a.active,
body.msar-shell.msar-classic .evaluation-module-tabs a:hover,
body.msar-shell.msar-classic .msar-ref-tabs a.active,
body.msar-shell.msar-classic .msar-ref-tabs a:hover,
body.msar-shell.msar-classic .nav-tabs a.active,
body.msar-shell.msar-classic .nav-tabs a:hover,
body.msar-shell.msar-classic .tabs a.active,
body.msar-shell.msar-classic .tabs a:hover,
body.msar-shell.msar-classic .ui-tabs a.active,
body.msar-shell.msar-classic .ui-tabs a:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
    border: 1px solid var(--line-soft) !important;
    border-bottom-color: #ffffff !important;
    color: var(--navy-900) !important;
}

/* Modals */
body.msar-shell.msar-classic .msar-system-modal,
body.msar-shell.msar-classic .modal {
    background: rgba(3, 10, 20, .52) !important;
    backdrop-filter: blur(4px) !important;
}

body.msar-shell.msar-classic .msar-system-modal-dialog,
body.msar-shell.msar-classic .modal-card,
body.msar-shell.msar-classic .modal-dialog,
body.msar-shell.msar-classic .modal-content {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 20px 50px rgba(5, 18, 35, .24) !important;
}

body.msar-shell.msar-classic .msar-system-modal-head,
body.msar-shell.msar-classic .modal-head,
body.msar-shell.msar-classic .modal-header {
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%) !important;
    border-bottom: 1px solid var(--line-soft) !important;
}

/* Footer */
body.msar-shell.msar-classic .msar-footer {
    background: linear-gradient(180deg, rgba(244,248,254,.98) 0%, rgba(237,244,253,.98) 100%) !important;
    border-top: 1px solid var(--line-soft) !important;
    color: var(--navy-700) !important;
    box-shadow: 0 -4px 16px rgba(7, 20, 38, .04) !important;
}

/* KPI/dashboard blocks */
body.msar-shell.msar-classic .mini-kpi,
body.msar-shell.msar-classic .dashboard-stat,
body.msar-shell.msar-classic .stat-card,
body.msar-shell.msar-classic .info-card {
    border-radius: 14px !important;
    border: 1px solid var(--line-soft) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: var(--shadow-soft) !important;
}

@media (max-width: 1180px) {
    body.msar-shell.msar-classic .module-switcher { gap: 12px !important; }
}


/* ---- consolidated precision layout rules ---- */
/* ==========================================================================
   Msar ERP – Ultra Precision 2026
   Final refinement layer: page-by-page rhythm, spacing, tabs, dashboards,
   listing pages, profile pages, request forms, section headers, and states.
   ========================================================================== */

body.msar-shell.msar-classic {
    --ultra-gap-xs: 6px;
    --ultra-gap-sm: 10px;
    --ultra-gap-md: 14px;
    --ultra-gap-lg: 18px;
    --ultra-gap-xl: 24px;
    --ultra-title: 15px;
    --ultra-subtitle: 12px;
    --ultra-label: 12px;
    --ultra-text: 12px;
    --ultra-card-radius: 14px;
    --ultra-panel-radius: 14px;
    --ultra-btn-h: 32px;
    --ultra-input-h: 32px;
}

body.msar-shell.msar-classic .main-form {
    padding-inline: 12px !important;
    padding-bottom: 54px !important;
}

body.msar-shell.msar-classic .main-form > *:not(.main-topbar):not(.msar-breadcrumb-bar):not(.alert):not(script):not(style) {
    margin-top: 12px !important;
}

body.msar-shell.msar-classic .main-form > .alert {
    margin-inline: 12px !important;
}

body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card,
body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .msar-data-table-wrap,
body.msar-shell.msar-classic .auto-table-wrap,
body.msar-shell.msar-classic .assign-table-wrap,
body.msar-shell.msar-classic .audit-table-wrap,
body.msar-shell.msar-classic .bulk-table-wrap {
    border-radius: var(--ultra-card-radius) !important;
}

body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card {
    padding: 16px 18px !important;
}

body.msar-shell.msar-classic .section-headline,
body.msar-shell.msar-classic .card > .section-headline:first-child {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .card > h1:first-child,
body.msar-shell.msar-classic .card > h2:first-child,
body.msar-shell.msar-classic .card > h3:first-child,
body.msar-shell.msar-classic .section-headline h1,
body.msar-shell.msar-classic .section-headline h2,
body.msar-shell.msar-classic .section-headline h3 {
    margin: 0 !important;
    font-size: var(--ultra-title) !important;
    line-height: 1.5 !important;
}

body.msar-shell.msar-classic .section-subtitle,
body.msar-shell.msar-classic .muted,
body.msar-shell.msar-classic small {
    font-size: var(--ultra-subtitle) !important;
    line-height: 1.7 !important;
}

/* Exact filter rhythm */
body.msar-shell.msar-classic .msar-filter-section,
body.msar-shell.msar-classic .ui-filter-panel,
body.msar-shell.msar-classic .card:has(> form.msar-system-filter),
body.msar-shell.msar-classic .card:has(> form.filters) {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
}

body.msar-shell.msar-classic form.msar-system-filter,
body.msar-shell.msar-classic form.filters,
body.msar-shell.msar-classic .filters,
body.msar-shell.msar-classic .ui-filter-body form {
    width: min(1100px, 100%) !important;
    margin-inline: auto !important;
    column-gap: 40px !important;
    row-gap: 14px !important;
}

body.msar-shell.msar-classic form.msar-system-filter .field,
body.msar-shell.msar-classic form.filters .field,
body.msar-shell.msar-classic .filters .field,
body.msar-shell.msar-classic .ui-filter-body .field,
body.msar-shell.msar-classic .msar-entry-form .field,
body.msar-shell.msar-classic .msar-system-modal-body .field,
body.msar-shell.msar-classic .modal .field {
    align-items: center !important;
    min-height: 32px !important;
}

body.msar-shell.msar-classic form.msar-system-filter .field > label,
body.msar-shell.msar-classic form.filters .field > label,
body.msar-shell.msar-classic .filters .field > label,
body.msar-shell.msar-classic .ui-filter-body .field > label,
body.msar-shell.msar-classic .msar-entry-form .field > label,
body.msar-shell.msar-classic .msar-system-modal-body .field > label,
body.msar-shell.msar-classic .modal .field > label {
    font-size: var(--ultra-label) !important;
    min-width: 0 !important;
}

body.msar-shell.msar-classic input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.msar-shell.msar-classic select,
body.msar-shell.msar-classic textarea {
    min-height: var(--ultra-input-h) !important;
    height: var(--ultra-input-h) !important;
    padding-inline: 12px !important;
    font-size: var(--ultra-text) !important;
}

body.msar-shell.msar-classic textarea {
    min-height: 90px !important;
    height: auto !important;
}

/* Buttons exact size */
body.msar-shell.msar-classic .btn,
body.msar-shell.msar-classic button,
body.msar-shell.msar-classic input[type="submit"],
body.msar-shell.msar-classic input[type="button"] {
    min-height: var(--ultra-btn-h) !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.msar-shell.msar-classic .btn i,
body.msar-shell.msar-classic button i {
    font-size: 12px !important;
}

body.msar-shell.msar-classic .actions,
body.msar-shell.msar-classic .action-bar,
body.msar-shell.msar-classic .msar-data-toolbar,
body.msar-shell.msar-classic .msar-system-create-toolbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.msar-shell.msar-classic .msar-system-create-toolbar,
body.msar-shell.msar-classic .msar-data-toolbar,
body.msar-shell.msar-classic .card > .actions:first-of-type {
    margin-bottom: 12px !important;
}

/* Listing pages */
body.msar-shell.msar-classic.msar-page-listing .msar-data-section,
body.msar-shell.msar-classic.msar-page-report .msar-data-section {
    padding-top: 12px !important;
}

body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .msar-data-table-wrap {
    padding: 0 !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic table th,
body.msar-shell.msar-classic table td {
    padding: 8px 12px !important;
    font-size: 12px !important;
}

body.msar-shell.msar-classic table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Dashboard */
body.msar-shell.msar-classic.msar-page-dashboard .main-form {
    gap: 0 !important;
}

body.msar-shell.msar-classic .msar-dashboard-grid,
body.msar-shell.msar-classic .dashboard-grid,
body.msar-shell.msar-classic .kpi-grid,
body.msar-shell.msar-classic .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.msar-shell.msar-classic .mini-kpi,
body.msar-shell.msar-classic .dashboard-stat,
body.msar-shell.msar-classic .stat-card,
body.msar-shell.msar-classic .info-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 110px !important;
    padding: 18px 16px !important;
}

body.msar-shell.msar-classic .mini-kpi .title,
body.msar-shell.msar-classic .dashboard-stat .title,
body.msar-shell.msar-classic .stat-card .title,
body.msar-shell.msar-classic .info-card .title,
body.msar-shell.msar-classic .mini-kpi h3,
body.msar-shell.msar-classic .dashboard-stat h3,
body.msar-shell.msar-classic .stat-card h3,
body.msar-shell.msar-classic .info-card h3 {
    font-size: 13px !important;
    margin: 0 !important;
}

body.msar-shell.msar-classic .mini-kpi .value,
body.msar-shell.msar-classic .dashboard-stat .value,
body.msar-shell.msar-classic .stat-card .value,
body.msar-shell.msar-classic .info-card .value,
body.msar-shell.msar-classic .mini-kpi strong,
body.msar-shell.msar-classic .dashboard-stat strong,
body.msar-shell.msar-classic .stat-card strong,
body.msar-shell.msar-classic .info-card strong {
    font-size: 36px !important;
    line-height: 1 !important;
    color: var(--navy-900) !important;
}

/* Profile pages / tabs */
body.msar-shell.msar-classic.msar-page-profile .profile-hero {
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--line-soft) !important;
}

body.msar-shell.msar-classic .profile-tabs,
body.msar-shell.msar-classic .evaluation-module-tabs,
body.msar-shell.msar-classic .msar-ref-tabs,
body.msar-shell.msar-classic .nav-tabs,
body.msar-shell.msar-classic .tabs,
body.msar-shell.msar-classic .ui-tabs {
    margin-bottom: 16px !important;
}

body.msar-shell.msar-classic .profile-tabs a,
body.msar-shell.msar-classic .evaluation-module-tabs a,
body.msar-shell.msar-classic .msar-ref-tabs a,
body.msar-shell.msar-classic .nav-tabs a,
body.msar-shell.msar-classic .tabs a,
body.msar-shell.msar-classic .ui-tabs a {
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
}

/* Modals exact composition */
body.msar-shell.msar-classic .msar-system-modal,
body.msar-shell.msar-classic .modal {
    padding: 40px 48px !important;
}

body.msar-shell.msar-classic .msar-system-modal-dialog,
body.msar-shell.msar-classic .modal-dialog {
    width: min(1180px, calc(100vw - 96px)) !important;
    margin: 0 auto !important;
}

body.msar-shell.msar-classic .msar-system-modal-body,
body.msar-shell.msar-classic .modal-body {
    padding: 18px 22px !important;
}

body.msar-shell.msar-classic .modal form,
body.msar-shell.msar-classic .msar-system-modal-body form {
    width: min(980px, 100%) !important;
}

/* Footer balance */
body.msar-shell.msar-classic .msar-footer {
    min-height: 32px !important;
    font-size: 12px !important;
}

/* Sidebar precise collapsed state */
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info .sidebar-nav a {
    min-height: 40px !important;
}

/* Page-specific helpers populated by JS */
body.msar-shell.msar-classic.msar-page-entry .msar-entry-form,
body.msar-shell.msar-classic.msar-page-entry .main-form > form:not(.msar-system-filter) {
    margin-top: 0 !important;
}

body.msar-shell.msar-classic.msar-page-entry .main-form > .card,
body.msar-shell.msar-classic.msar-page-entry .main-form > form {
    max-width: 1240px !important;
}

/* Responsive */
@media (max-width: 1200px) {
    body.msar-shell.msar-classic .msar-dashboard-grid,
    body.msar-shell.msar-classic .dashboard-grid,
    body.msar-shell.msar-classic .kpi-grid,
    body.msar-shell.msar-classic .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 992px) {
    body.msar-shell.msar-classic .main-form {
        padding-inline: 10px !important;
    }

    body.msar-shell.msar-classic .msar-system-modal,
    body.msar-shell.msar-classic .modal {
        padding: 20px 16px !important;
    }

    body.msar-shell.msar-classic .msar-dashboard-grid,
    body.msar-shell.msar-classic .dashboard-grid,
    body.msar-shell.msar-classic .kpi-grid,
    body.msar-shell.msar-classic .stats-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ---- consolidated module layout rules ---- */

/* ==========================================================================
   Msar ERP – Phase 5 Module-by-Module Final Match 2026
   Final design-system pass: module-specific rhythm, page types, tables, tabs,
   dashboards, modals, forms, reports, and workflow detail pages.
   ========================================================================== */

body.msar-shell.msar-classic {
    --p5-sidebar-w: 250px;
    --p5-sidebar-collapsed: 66px;
    --p5-top-h: 76px;
    --p5-breadcrumb-h: 46px;
    --p5-footer-h: 32px;
    --p5-content-x: 12px;
    --p5-card-r: 14px;
    --p5-panel-r: 16px;
    --p5-control-h: 32px;
    --p5-card-pad-x: 18px;
    --p5-card-pad-y: 16px;
    --p5-grid-gap: 14px;
    --p5-title: 15px;
    --p5-text: 12px;
    --p5-label: 12px;
    --p5-line: #d8e5f4;
    --p5-line-strong: #bed3e8;
    --p5-surface: #ffffff;
    --p5-surface-soft: #f7fbff;
    --p5-surface-softer: #eef5fc;
    --p5-navy-950: #071426;
    --p5-navy-900: #0b1d35;
    --p5-navy-800: #132d52;
    --p5-navy-700: #1b4d85;
    --p5-navy-600: #2f67a7;
    --p5-navy-500: #4a80bd;
    --p5-sky: #82c4ff;
    --p5-teal: #1fb5a9;
    --p5-amber: #d4a239;
    --p5-red: #d95d57;
    --p5-text-dark: #132131;
    --p5-text-muted: #4a5f78;
    --p5-shadow: 0 8px 28px rgba(7, 20, 38, .07);
    --p5-shadow-strong: 0 18px 46px rgba(7, 20, 38, .16);
    --p5-transition: .22s ease;
    font-size: var(--p5-text) !important;
}

html,
body.msar-shell.msar-classic {
    background:
      radial-gradient(circle at 100% 0%, rgba(74, 128, 189, .12), transparent 28%),
      radial-gradient(circle at 0% 10%, rgba(31, 181, 169, .08), transparent 22%),
      linear-gradient(180deg, #edf4ff 0%, #f6f9fe 42%, #fbfdff 100%) !important;
}

/* ───── Shell precision ───── */
body.msar-shell.msar-classic .dashboard {
    padding-right: var(--p5-sidebar-w) !important;
    background: transparent !important;
}
body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
    padding-right: var(--p5-sidebar-collapsed) !important;
}
body.msar-shell.msar-classic .main-form {
    padding-inline: var(--p5-content-x) !important;
    padding-bottom: calc(var(--p5-footer-h) + 18px) !important;
    background: transparent !important;
}
body.msar-shell.msar-classic .main-form > *:not(.main-topbar):not(.msar-breadcrumb-bar):not(script):not(style) {
    margin-top: 12px !important;
}

/* ───── Sidebar final composition ───── */
body.msar-shell.msar-classic .side-info {
    width: var(--p5-sidebar-w) !important;
    background:
      linear-gradient(180deg, rgba(4,10,20,.98) 0%, rgba(8,19,33,.98) 42%, rgba(7,14,25,.98) 100%) !important;
    border-left: 1px solid rgba(130,196,255,.15) !important;
    box-shadow: -5px 0 24px rgba(2, 8, 18, .25) !important;
}
body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info {
    width: var(--p5-sidebar-collapsed) !important;
}
body.msar-shell.msar-classic .msar-sidebar-brand,
body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll > .brand-inline {
    height: var(--p5-top-h) !important;
    min-height: var(--p5-top-h) !important;
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,.16), transparent 34%),
      linear-gradient(135deg, #1d4778 0%, #102847 58%, #08192d 100%) !important;
}
body.msar-shell.msar-classic .module-sidebar-group-title {
    height: 42px !important;
    min-height: 42px !important;
    grid-template-columns: 22px minmax(0,1fr) 18px !important;
    padding: 0 14px 0 10px !important;
    font-size: 12px !important;
    background: linear-gradient(180deg, rgba(21,43,73,.76) 0%, rgba(11,25,43,.96) 100%) !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 {
    background: linear-gradient(180deg, rgba(33,78,132,.96) 0%, rgba(18,44,76,.98) 100%) !important;
}
body.msar-shell.msar-classic .side-info .sidebar-nav a {
    height: 36px !important;
    min-height: 36px !important;
    grid-template-columns: 22px minmax(0,1fr) 16px !important;
    padding: 0 16px 0 10px !important;
    font-size: 12px !important;
}
body.msar-shell.msar-classic .side-info .sidebar-nav a.active {
    background: linear-gradient(90deg, rgba(74,128,189,.28), rgba(19,45,82,.92)) !important;
}
body.msar-shell.msar-classic .side-info .sidebar-nav a.active::after {
    background: linear-gradient(180deg, #82c4ff, #2f67a7) !important;
}

/* ───── Header / modules ───── */
body.msar-shell.msar-classic .main-topbar {
    min-height: var(--p5-top-h) !important;
    height: var(--p5-top-h) !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(190,211,232,.86) !important;
}
body.msar-shell.msar-classic .module-switcher {
    gap: 18px !important;
}
body.msar-shell.msar-classic .module-tab {
    min-width: 62px !important;
    height: 68px !important;
    padding: 7px 4px 5px !important;
}
body.msar-shell.msar-classic .module-tab .msar-module-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 27px !important;
}
body.msar-shell.msar-classic .module-tab .msar-module-text {
    font-size: 11px !important;
}
body.msar-shell.msar-classic .module-page-title {
    min-height: var(--p5-top-h) !important;
    height: var(--p5-top-h) !important;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,.16), transparent 30%),
      linear-gradient(135deg, #173e6d 0%, #112b4a 52%, #0b1d35 100%) !important;
}
body.msar-shell.msar-classic .msar-breadcrumb-bar {
    min-height: var(--p5-breadcrumb-h) !important;
    height: var(--p5-breadcrumb-h) !important;
}

/* ───── Universal panels ───── */
body.msar-shell.msar-classic .card,
body.msar-shell.msar-classic .ui-card,
body.msar-shell.msar-classic .app-card {
    border-radius: var(--p5-panel-r) !important;
    padding: var(--p5-card-pad-y) var(--p5-card-pad-x) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.99)) !important;
    border: 1px solid var(--p5-line) !important;
    box-shadow: var(--p5-shadow) !important;
}
body.msar-shell.msar-classic .section-title,
body.msar-shell.msar-classic .card > h1:first-child,
body.msar-shell.msar-classic .card > h2:first-child,
body.msar-shell.msar-classic .card > h3:first-child {
    font-size: var(--p5-title) !important;
    color: var(--p5-navy-900) !important;
}
body.msar-shell.msar-classic .section-subtitle,
body.msar-shell.msar-classic .muted {
    color: var(--p5-text-muted) !important;
}

/* ───── Filter pages ───── */
body.msar-shell.msar-classic.msar-page-listing .msar-filter-section,
body.msar-shell.msar-classic.msar-page-report .msar-filter-section,
body.msar-shell.msar-classic .card:has(> form.msar-system-filter),
body.msar-shell.msar-classic .card:has(> form.filters) {
    position: relative !important;
    padding-top: 18px !important;
    padding-bottom: 20px !important;
}
body.msar-shell.msar-classic form.msar-system-filter,
body.msar-shell.msar-classic form.filters,
body.msar-shell.msar-classic .filters {
    width: min(1120px, 100%) !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    column-gap: 42px !important;
    row-gap: 14px !important;
}
body.msar-shell.msar-classic form.msar-system-filter .field,
body.msar-shell.msar-classic form.filters .field,
body.msar-shell.msar-classic .filters .field,
body.msar-shell.msar-classic .msar-entry-form .field {
    grid-template-columns: 128px minmax(0,1fr) !important;
    gap: 12px !important;
}
body.msar-shell.msar-classic input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.msar-shell.msar-classic select,
body.msar-shell.msar-classic textarea {
    height: var(--p5-control-h) !important;
    min-height: var(--p5-control-h) !important;
    border-radius: 8px !important;
    border: 1px solid var(--p5-line-strong) !important;
    background: #fff !important;
}
body.msar-shell.msar-classic textarea {
    height: auto !important;
    min-height: 92px !important;
}

/* ───── Tables ───── */
body.msar-shell.msar-classic .table-wrap,
body.msar-shell.msar-classic .msar-data-table-wrap,
body.msar-shell.msar-classic .auto-table-wrap,
body.msar-shell.msar-classic .assign-table-wrap,
body.msar-shell.msar-classic .audit-table-wrap,
body.msar-shell.msar-classic .bulk-table-wrap {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--p5-line) !important;
    background: #fff !important;
    box-shadow: var(--p5-shadow) !important;
}
body.msar-shell.msar-classic table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body.msar-shell.msar-classic table th,
body.msar-shell.msar-classic table td {
    padding: 8px 12px !important;
    border-color: #e5eef8 !important;
    font-size: 12px !important;
}
body.msar-shell.msar-classic table thead th,
body.msar-shell.msar-classic table tbody th {
    background: linear-gradient(180deg, #f8fbff 0%, #edf5fc 100%) !important;
    color: var(--p5-navy-900) !important;
}
body.msar-shell.msar-classic table tbody tr:nth-child(even) td {
    background: #fbfdff !important;
}
body.msar-shell.msar-classic table tbody tr:hover td {
    background: #f1f7ff !important;
}

/* ───── Buttons ───── */
body.msar-shell.msar-classic .btn,
body.msar-shell.msar-classic button,
body.msar-shell.msar-classic input[type="submit"],
body.msar-shell.msar-classic input[type="button"] {
    min-height: 32px !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
body.msar-shell.msar-classic .btn:hover,
body.msar-shell.msar-classic button:hover {
    transform: translateY(-1px) !important;
    filter: saturate(1.04) !important;
}
body.msar-shell.msar-classic .btn-primary,
body.msar-shell.msar-classic .msar-create-action,
body.msar-shell.msar-classic .btn-info {
    background: linear-gradient(180deg, #4a80bd 0%, #2f67a7 100%) !important;
}
body.msar-shell.msar-classic .btn-success,
body.msar-shell.msar-classic button[type="submit"],
body.msar-shell.msar-classic input[type="submit"] {
    background: linear-gradient(180deg, #1fb5a9 0%, #169c91 100%) !important;
}
body.msar-shell.msar-classic .btn-quick-view {
    min-width: 86px !important;
    background: linear-gradient(180deg, #75c8ff 0%, #4ca8e5 100%) !important;
}

/* ───── Tabs ───── */
body.msar-shell.msar-classic .profile-tabs,
body.msar-shell.msar-classic .evaluation-module-tabs,
body.msar-shell.msar-classic .msar-ref-tabs,
body.msar-shell.msar-classic .nav-tabs,
body.msar-shell.msar-classic .tabs,
body.msar-shell.msar-classic .ui-tabs {
    gap: 5px !important;
    padding-inline: 2px !important;
    border-bottom: 1px solid var(--p5-line) !important;
}
body.msar-shell.msar-classic .profile-tabs a,
body.msar-shell.msar-classic .evaluation-module-tabs a,
body.msar-shell.msar-classic .msar-ref-tabs a,
body.msar-shell.msar-classic .nav-tabs a,
body.msar-shell.msar-classic .tabs a,
body.msar-shell.msar-classic .ui-tabs a {
    min-height: 36px !important;
    border-radius: 9px 9px 0 0 !important;
    padding: 8px 16px !important;
    color: var(--p5-navy-700) !important;
}
body.msar-shell.msar-classic .profile-tabs a.active,
body.msar-shell.msar-classic .evaluation-module-tabs a.active,
body.msar-shell.msar-classic .msar-ref-tabs a.active,
body.msar-shell.msar-classic .nav-tabs a.active,
body.msar-shell.msar-classic .tabs a.active,
body.msar-shell.msar-classic .ui-tabs a.active {
    background: #fff !important;
    border: 1px solid var(--p5-line) !important;
    border-bottom-color: #fff !important;
    color: var(--p5-navy-900) !important;
}

/* ───── Dashboard cards ───── */
body.msar-shell.msar-classic.msar-page-dashboard .msar-dashboard-grid,
body.msar-shell.msar-classic .dashboard-grid,
body.msar-shell.msar-classic .kpi-grid,
body.msar-shell.msar-classic .stats-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 14px !important;
}
body.msar-shell.msar-classic .mini-kpi,
body.msar-shell.msar-classic .dashboard-stat,
body.msar-shell.msar-classic .stat-card,
body.msar-shell.msar-classic .info-card {
    min-height: 112px !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(130,196,255,.12), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border: 1px solid var(--p5-line) !important;
}
body.msar-shell.msar-classic .mini-kpi strong,
body.msar-shell.msar-classic .dashboard-stat strong,
body.msar-shell.msar-classic .stat-card strong,
body.msar-shell.msar-classic .info-card strong {
    color: var(--p5-navy-900) !important;
}

/* ───── HR module ───── */
body.msar-module-hr .module-page-title,
body.msar-module-human_resources .module-page-title,
body.msar-module-professional .module-page-title {
    background: linear-gradient(135deg, #173e6d 0%, #112b4a 55%, #0b1d35 100%) !important;
}
body.msar-module-hr .section-title::before,
body.msar-module-human_resources .section-title::before,
body.msar-page-profile .section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-inline-end: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #82c4ff, #2f67a7);
    vertical-align: -3px;
}

/* ───── Attendance module ───── */
body.msar-module-attendance .module-page-title,
body[class*="page-hr-attendance"] .module-page-title {
    background: linear-gradient(135deg, #0d3b5f 0%, #0f314f 55%, #081a2c 100%) !important;
}
body.msar-module-attendance .btn-primary,
body[class*="page-hr-attendance"] .btn-primary {
    background: linear-gradient(180deg, #3e8fc6 0%, #26699d 100%) !important;
}

/* ───── Payroll module ───── */
body.msar-module-payroll .module-page-title,
body[class*="page-payroll"] .module-page-title,
body[class*="page-hr-payroll"] .module-page-title {
    background: linear-gradient(135deg, #12395f 0%, #0e2e4e 52%, #07192b 100%) !important;
}
body.msar-module-payroll .table-count,
body[class*="page-payroll"] .table-count {
    color: #1f6fa6 !important;
}

/* ───── Leaves module ───── */
body.msar-module-leaves .module-page-title,
body[class*="page-hr-leave"] .module-page-title {
    background: linear-gradient(135deg, #164a68 0%, #11364f 52%, #082034 100%) !important;
}

/* ───── Inventory module ───── */
body.msar-module-inventory .module-page-title,
body[class*="page-inventory"] .module-page-title,
body[class*="page-warehouse"] .module-page-title {
    background: linear-gradient(135deg, #173957 0%, #102b44 52%, #071a2d 100%) !important;
}
body.msar-module-inventory .msar-create-action,
body[class*="page-inventory"] .msar-create-action {
    background: linear-gradient(180deg, #4c91c8 0%, #2d6d9e 100%) !important;
}

/* ───── Reports module ───── */
body.msar-module-reports .module-page-title,
body[class*="page-report"] .module-page-title,
body.msar-page-report .module-page-title {
    background: linear-gradient(135deg, #1a3e63 0%, #122c49 55%, #07182b 100%) !important;
}
body.msar-page-report .msar-data-section {
    box-shadow: 0 10px 30px rgba(7,20,38,.08) !important;
}

/* ───── Workflow detail pages ───── */
body.msar-page-workflow .section-headline,
body[class*="page-workflow"] .section-headline {
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--p5-line) !important;
}
body.msar-page-workflow .card,
body[class*="page-workflow"] .card {
    overflow: hidden !important;
}

/* ───── Modals ───── */
body.msar-shell.msar-classic .msar-system-modal,
body.msar-shell.msar-classic .modal {
    background: rgba(4, 12, 24, .56) !important;
    backdrop-filter: blur(5px) !important;
}
body.msar-shell.msar-classic .msar-system-modal-dialog,
body.msar-shell.msar-classic .modal-dialog,
body.msar-shell.msar-classic .modal-content,
body.msar-shell.msar-classic .modal-card {
    border-radius: 16px !important;
    box-shadow: var(--p5-shadow-strong) !important;
}
body.msar-shell.msar-classic .msar-system-modal-head,
body.msar-shell.msar-classic .modal-header,
body.msar-shell.msar-classic .modal-head {
    min-height: 56px !important;
    background: linear-gradient(180deg, #f8fbff, #eef5fc) !important;
}

/* ───── Footer ───── */
body.msar-shell.msar-classic .msar-footer {
    min-height: var(--p5-footer-h) !important;
    background: rgba(245,249,254,.96) !important;
    backdrop-filter: blur(8px) !important;
}

/* ───── Responsive guards ───── */
@media (max-width: 1240px) {
    body.msar-shell.msar-classic form.msar-system-filter,
    body.msar-shell.msar-classic form.filters,
    body.msar-shell.msar-classic .filters {
        grid-template-columns: 1fr !important;
        width: min(720px, 100%) !important;
    }
    body.msar-shell.msar-classic.msar-page-dashboard .msar-dashboard-grid,
    body.msar-shell.msar-classic .dashboard-grid,
    body.msar-shell.msar-classic .kpi-grid,
    body.msar-shell.msar-classic .stats-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}
@media (max-width: 860px) {
    body.msar-shell.msar-classic.msar-page-dashboard .msar-dashboard-grid,
    body.msar-shell.msar-classic .dashboard-grid,
    body.msar-shell.msar-classic .kpi-grid,
    body.msar-shell.msar-classic .stats-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ---- migrated from msar-inline-utilities.css ---- */
/* Generated from legacy static inline style attributes during 2026 UI clean-up. */
/* Dynamic PHP-calculated styles are intentionally left in templates where a runtime value is required. */
.util-mt-mb-14px-001e { margin-top:14px;margin-bottom:0; }
.util-text-prewrap-mt-leading-10px-0061 { white-space:pre-wrap;line-height:1.9;margin-top:10px; }
.util-display-inline-dir-ltr-00c8 { direction:ltr;display:inline-block; }
.util-layout-flex-items-center-gap-8px-01ef { display:flex;gap:8px;align-items:center; }
.util-justify-center-03c4 { justify-content:center; }
.util-items-start-0486 { align-items:flex-start; }
.util-leading-0489 { margin:10px 0 0;padding-right:18px;line-height:1.9; }
.util-grid-full-068a { grid-column:1/-1; }
.util-layout-flex-items-start-justify-between-gap-077c { display:flex;justify-content:space-between;gap:10px;align-items:flex-start; }
.util-text-size-mt-85rem-082c { font-size:.85rem;margin-top:6px; }
.util-text-size-mt-6px-09f9 { margin-top:6px;font-size:.86rem; }
.util-w-220px-0fac { width:220px; }
.util-maxw-w-420px-0fd8 { max-width:420px; }
.util-text-size-1-2rem-1018 { font-size:1.2rem; }
.util-m-zero-1169 { margin:0; }
.util-wrap-mt-gap-8px-1246 { gap:8px;flex-wrap:wrap;margin-top:12px; }
.util-mt-surface-color-18px-1313 { background:#fff;margin-top:18px;border-color:rgba(10,25,47,.10); }
.util-layout-flex-items-center-justify-between-wrap-1459 { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center; }
.util-grid-cols-155a { grid-template-columns:repeat(3,1fr); }
.util-utility-1581 { align-self:end;grid-column:span 2; }
.util-dir-ltr-text-left-15b6 { text-align:left;direction:ltr; }
.util-mb-surface-color-18px-186b { margin-bottom:18px;border-color:#fde68a;background:#fffbeb; }
.util-mt-leading-8px-18ef { margin-top:8px;line-height:1.8; }
.util-mt-16px-1b0f { margin-top:16px; }
.util-mb-surface-color-18px-1bcf { margin-bottom:18px;border-color:#fed7aa;background:#fff7ed; }
.util-mb-surface-color-18px-1d43 { margin-bottom:18px;border-color:#bbf7d0;background:#f0fdf4; }
.util-layout-flex-items-center-justify-between-gap-1da9 { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.util-color-2056 { color:#dc2626; }
.util-display-block-mb-8px-210f { display:block;margin-bottom:8px; }
.util-text-size-mt-8px-21b5 { margin-top:8px;font-size:.86rem; }
.util-grid-full-surface-236f { grid-column:1/-1;background:#fff; }
.util-surface-238a { background:#f8fafc; }
.util-wrap-mt-gap-12px-242e { margin-top:12px;gap:8px;flex-wrap:wrap; }
.util-mt-surface-color-18px-2430 { background:#fff7ed;margin-top:18px;border-color:rgba(255,90,47,.14); }
.util-text-wrap-maxw-w-260px-246d { max-width:260px;white-space:normal; }
.util-mt-auto-26d3 { margin-top:auto; }
.util-font-bold-mb-8px-26e7 { font-weight:800;margin-bottom:8px; }
.util-grid-full-surface-2747 { grid-column:1/-1;background:#f8fafc; }
.util-w-160px-28c0 { width:160px; }
.util-mt-w-100-29fc { width:100%;margin-top:40px; }
.util-display-block-2a1b { display:block; }
.util-text-size-mt-12px-2b09 { font-size:12px;margin-top:6px; }
.util-layout-flex-items-start-justify-between-wrap-2b4b { display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap; }
.util-mb-14px-2b58 { margin-bottom:14px; }
.util-font-bold-2b95 { font-weight:800; }
.util-layout-flex-items-center-wrap-mt-2d29 { margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
.util-items-center-justify-between-2d7d { justify-content:space-between;align-items:center; }
.util-mt-surface-color-18px-2f4c { background:#fff;margin-top:18px;border-color:rgba(255,90,47,.12); }
.util-layout-flex-items-center-m-zero-gap-2f6d { display:flex;align-items:center;gap:10px;margin:0; }
.util-mt-pad-bordered-rounded-3369 { margin-top:14px;padding:12px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc; }
.util-gap-8px-33fc { gap:8px; }
.util-text-wrap-maxw-w-240px-399e { max-width:240px;white-space:normal; }
.util-mt-surface-color-18px-3b4e { margin-top:18px;background:#f8fbff;border-color:#dbe7ff; }
.util-layout-flex-wrap-gap-8px-3de8 { display:flex;gap:8px;flex-wrap:wrap; }
.util-display-none-grid-full-3ff5 { grid-column:1/-1;display:none; }
.util-layout-flex-items-center-justify-between-wrap-4066 { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px; }
.util-grid-cols-mt-14px-4373 { grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px; }
.util-layout-flex-items-center-mt-gap-45bb { display:flex;gap:8px;align-items:center;margin-top:30px; }
.util-w-120px-465b { width:120px; }
.util-wrap-gap-8px-4725 { gap:8px;flex-wrap:wrap; }
.util-justify-between-wrap-gap-12px-489a { justify-content:space-between;gap:12px;flex-wrap:wrap; }
.util-layout-flex-items-start-justify-between-wrap-48c6 { display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap; }
.util-layout-flex-gap-6px-49cd { display:flex;gap:6px; }
.util-color-4b67 { color:#be123c; }
.util-mb-surface-color-18px-4c92 { margin-bottom:18px;background:#fff8e8;border-color:#f6d37b; }
.util-rounded-maxw-w-shadow-4ce4 { max-width:1100px;width:100%;min-height:680px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg); }
.util-mt-surface-18px-4cea { background:#f8fafc;margin-top:18px; }
.util-layout-flex-items-center-mt-gap-4fd9 { display:flex;align-items:center;gap:10px;margin-top:10px; }
.util-dir-ltr-text-left-51b3 { direction:ltr;text-align:left; }
.util-mt-surface-color-18px-5360 { margin-top:18px;border-color:#fde68a;background:#fffbeb; }
.util-mb-surface-color-18px-5371 { margin-bottom:18px;border-color:#c7d2fe;background:#eef2ff; }
.util-utility-53cf { align-self:end; }
.util-w-180px-54f9 { width:180px; }
.util-surface-shadow-564d { box-shadow:none;background:#fbfdff; }
.util-mt-12px-56f4 { margin-top:12px; }
.util-mt-surface-color-18px-574a { background:#fff;margin-top:18px;border-color:rgba(15,23,42,.08); }
.util-maxw-w-260px-578a { max-width:260px;word-break:break-all; }
.util-w-90px-581b { width:90px; }
.util-font-bold-587b { cursor:pointer;font-weight:800; }
.util-mt-gap-12px-5be6 { margin-top:12px;gap:6px; }
.util-mb-surface-color-18px-5c53 { margin-bottom:18px;border-color:#c7d2fe;background:#f8f7ff; }
.util-mt-8px-5e7c { white-space:pre-line;margin-top:8px; }
.util-layout-flex-wrap-gap-10px-6002 { display:flex;gap:10px;flex-wrap:wrap; }
.util-color-6003 { color:#be123c;font-weight:700; }
.util-layout-flex-items-center-wrap-gap-6015 { display:flex;gap:16px;align-items:center;flex-wrap:wrap; }
.util-layout-flex-wrap-gap-6px-6157 { display:flex;gap:6px;flex-wrap:wrap; }
.util-bordered-617e { border:none;border-top:1px solid var(--border);margin:18px 0; }
.util-layout-flex-wrap-pad-gap-61f9 { display:flex;gap:12px;flex-wrap:wrap;padding:10px 0; }
.util-grid-cols-6384 { grid-template-columns:1fr; }
.util-layout-flex-items-center-justify-between-wrap-6444 { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px; }
.util-layout-flex-items-center-justify-between-wrap-64a7 { display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px; }
.util-leading-69dc { line-height:2; }
.util-utility-6b4b { margin:8px 0 12px; }
.util-text-left-6be0 { text-align:left; }
.util-text-prewrap-dir-ltr-text-left-pad-6e28 { white-space:pre-wrap;direction:ltr;text-align:left;background:#f8fafc;border-radius:14px;padding:12px;max-height:260px;overflow:auto; }
.util-layout-flex-justify-between-mb-gap-72e4 { display:flex;justify-content:space-between;gap:12px;margin-bottom:8px; }
.util-mb-surface-color-18px-738a { margin-bottom:18px;border-color:#fecaca;background:#fff7f7; }
.util-maxw-w-130px-74ef { max-width:130px; }
.util-m-zero-759e { margin:0 0 10px; }
.util-text-size-m-zero-1-8rem-75f8 { margin:0;font-size:1.8rem; }
.util-mb-10px-761d { margin-bottom:10px; }
.util-mt-surface-color-18px-7644 { background:#fff7ed;margin-top:18px;border-color:rgba(234,88,12,.18); }
.util-dir-ltr-text-left-mt-pad-7679 { margin-top:12px;direction:ltr;text-align:left;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px; }
.util-mb-surface-color-18px-7762 { margin-bottom:18px;border-color:#bbf7d0;background:#f7fef9; }
.util-layout-flex-justify-center-wrap-pad-77f0 { position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid #dbe5ff;padding:10px 18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center; }
.util-layout-flex-items-center-7b90 { min-height:48px;display:flex;align-items:center; }
.util-display-block-maxw-w-540px-7cad { display:block;max-width:540px; }
.util-m-zero-7d0b { margin:0 0 16px; }
.util-maxw-w-150px-7eba { max-width:150px; }
.util-layout-flex-wrap-mt-gap-7eca { display:flex;gap:10px;flex-wrap:wrap;margin-top:8px; }
.util-mt-leading-12px-7f62 { line-height:1.9;margin-top:12px; }
.util-mt-surface-color-14px-7fab { margin-top:14px;background:#fff8e8;border-color:#f6d37b; }
.util-mt-18px-86de { margin-top:18px; }
.util-mb-16px-87c1 { margin-bottom:16px; }
.util-utility-87c5 { grid-column: span 2; }
.util-layout-flex-items-center-justify-between-wrap-87cc { display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap; }
.util-color-881d { color:#b91c1c; }
.util-mt-surface-18px-888e { background:#fffaf5;margin-top:18px; }
.util-mt-8px-8a77 { margin-top:8px; }
.util-leading-8eb5 { line-height:1.9; }
.util-mb-18px-905d { margin-bottom:18px; }
.util-text-prewrap-dir-ltr-text-left-pad-9146 { white-space:pre-wrap;direction:ltr;text-align:left;background:#f8fafc;border-radius:14px;padding:12px;max-height:340px;overflow:auto; }
.util-utility-9162 { align-self:center; }
.util-text-center-91a8 { text-align:center; }
.util-utility-92e9 { min-height:90px; }
.util-mb-surface-color-18px-932d { margin-bottom:18px;border-color:#bfdbfe;background:#eff6ff; }
.util-utility-94a5 { grid-column:span 2; }
.util-utility-94ba { white-space:pre-line; }
.util-mb-surface-color-18px-9510 { margin-bottom:18px;border-color:#a7f3d0;background:#ecfdf5; }
.util-text-size-1rem-951b { font-size:1rem; }
.util-mt-4px-96ad { margin-top:4px; }
.util-grid-cols-96b5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.util-layout-flex-justify-between-wrap-gap-9b23 { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.util-text-size-85rem-9bcd { font-size:.85rem; }
.util-mt-22px-9c14 { margin-top:22px;border-top:1px solid #e2e8f0;padding-top:12px; }
.util-mt-gap-16px-9d5b { margin-top:16px;gap:8px; }
.util-mt-surface-color-12px-9d93 { margin-top:12px;border-color:#fecaca;background:#fff7f7; }
.util-m-zero-maxw-w-980px-a15f { margin:0;max-width:980px; }
.util-mt-20px-a26b { margin-top:20px; }
.util-text-prewrap-a548 { white-space:pre-wrap; }
.util-justify-between-a562 { justify-content:space-between; }
.util-layout-flex-wrap-mt-gap-a57c { display:flex;gap:10px;flex-wrap:wrap;margin-top:18px; }
.util-mt-12px-a895 { margin-top:12px;border-top:1px solid #e5e7eb;padding-top:14px; }
.util-mt-30px-a8e2 { margin-top:30px;border-top:1px solid #e5e7eb;padding-top:12px; }
.util-layout-flex-items-center-justify-between-wrap-a9c4 { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; }
.util-text-prewrap-dir-ltr-pad-rounded-aa1c { direction:ltr;white-space:pre-wrap;background:#0f172a;color:#e2e8f0;border-radius:14px;padding:14px; }
.util-display-block-maxw-w-980px-ac9e { display:block;max-width:980px; }
.util-mt-16px-acd9 { margin-top:16px;border-top:1px solid #e5e7eb;padding-top:16px; }
.util-m-zero-ad7f { margin:0 0 6px; }
.util-layout-flex-wrap-gap-12px-add3 { display:flex;gap:12px;flex-wrap:wrap;margin:10px 0; }
.util-utility-ae94 { grid-column:span 3; }
.util-mb-10px-b3a3 { border-bottom:1px solid #e2e8f0;padding-bottom:10px;margin-bottom:10px; }
.util-mt-surface-color-18px-b3e6 { background:#fff;margin-top:18px;border-color:rgba(255,90,47,.22); }
.util-gap-8px-b528 { gap:8px;align-items:stretch; }
.util-w-130px-b62d { min-width:130px; }
.util-maxw-w-760px-b754 { max-width:760px;margin-inline:auto; }
.util-font-bold-text-size-mt-1-6rem-b772 { font-size:1.6rem;font-weight:800;margin-top:6px; }
.util-mb-surface-18px-b798 { background:#f8fbff;margin-bottom:18px; }
.util-utility-b918 { grid-row:span 6; }
.util-font-bold-text-size-2rem-b9ba { font-size:2rem;font-weight:800; }
.util-text-size-1-4rem-bea3 { font-size:1.4rem; }
.util-mb-surface-color-18px-bfb4 { margin-bottom:18px;border-color:#bae6fd;background:#f0f9ff; }
.util-m-zero-color-c1a0 { margin:0;color:#64748b; }
.util-utility-c32d { grid-column:span 2;align-self:end; }
.util-leading-c38b { line-height:1.8; }
.util-w-30-c66f { width:30%; }
.util-layout-flex-items-center-gap-14px-c6fb { display:flex;align-items:center;gap:14px; }
.util-m-zero-leading-c76d { line-height:1.9;margin:0 18px 0 0; }
.util-mt-surface-color-18px-c774 { background:#fffaf0;margin-top:18px;border-color:rgba(197,160,89,.25); }
.util-w-gap-8px-c794 { gap:8px;min-width:210px; }
.util-mb-4px-c81c { margin-bottom:4px; }
.util-layout-flex-items-center-wrap-gap-c875 { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.util-wrap-gap-6px-ca6f { gap:6px;flex-wrap:wrap; }
.util-color-ca7b { color:rgba(255,255,255,.78); }
.util-pad-8px020px-cc28 { padding:8px 0 20px; }
.util-utility-ccc8 { direction:rtl;text-align:right;font-family:Arial; }
.util-utility-cccf { display:inline; }
.util-shadow-ce3f { box-shadow:none; }
.util-mt-surface-18px-d026 { background:#fff7ed;margin-top:18px; }
.util-mb-10px-d098 { margin-bottom:10px;border-bottom:1px solid #e2e8f0;padding-bottom:10px; }
.util-layout-flex-wrap-mt-gap-d125 { display:flex;gap:10px;flex-wrap:wrap;margin-top:10px; }
.util-mt-10px-d2c1 { margin-top:10px; }
.util-utility-d450 { margin:10px 0 6px; }
.util-mt-0-d462 { margin-top:0; }
.util-layout-flex-items-start-justify-between-wrap-d56f { display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap; }
.util-m-zero-d675 { margin:0 0 14px; }
.util-text-size-9rem-d6e4 { font-size:.9rem; }
.util-mt-14px-d6f2 { margin-top:14px; }
.util-mb-18px-d818 { align-items:start;margin-bottom:18px; }
.util-mb-12px-da12 { margin-bottom:12px; }
.util-wrap-gap-4px-dd73 { gap:4px;flex-wrap:wrap; }
.util-m-zero-df67 { margin:0 0 8px; }
.util-m-zero-leading-df9b { margin:0;padding-inline-start:22px;line-height:1.9; }
.util-mb-surface-color-18px-dfb3 { margin-bottom:18px;border-color:#dbe7ff;background:#f8fbff; }
.util-layout-flex-gap-12px-e12f { display:flex;flex-direction:column;gap:12px; }
.util-utility-e3ec { font-weight:700; }
.util-wrap-e513 { align-self:end;flex-wrap:wrap; }
.util-w-280px-e581 { min-width:280px; }
.util-layout-flex-items-start-justify-between-wrap-ea1a { display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap; }
.util-text-size-color-46px-eb65 { font-size:46px;color:#94a3b8; }
.util-text-size-1-1rem-f15b { font-size:1.1rem; }
.util-layout-flex-items-center-justify-center-mb-f248 { border:1px dashed #b6c2d1;border-radius:12px;min-height:150px;display:flex;align-items:center;justify-content:center;background:#f8fafc;margin-bottom:8px; }
.util-mt-leading-4px-f26b { margin-top:4px;line-height:1.8; }
.util-layout-grid-f457 { display:grid; }
.util-utility-f555 { margin:8px 0; }
.util-gap-16px-f6ce { gap:16px; }
.util-w-320px-f6f1 { min-width:320px; }
.util-surface-f708 { margin:14px 0;background:#eff6ff; }
.util-utility-f85b { align-self:end;grid-column:span 3; }
.util-utility-fb23 { position:relative;min-height:auto; }
.util-mt-18px-fc40 { margin-top:18px;align-items:start; }
.util-mb-8px-fdf3 { margin-bottom:8px; }
.util-utility-fe64 { cursor:pointer;font-weight:700; }
.util-mt-6px-fe7b { margin-top:6px; }
.util-layout-flex-items-start-justify-between-wrap-fed1 { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap; }
/* Named utility classes retained from static inline clean-up. */
.u-max-145 { max-width:145px; }
.u-preview-letter { border:1px solid #e2e8f0;border-radius:18px;padding:18px;background:#fff; }
.u-grid-span-all { grid-column:1/-1; }
.u-display-inline { display:inline-block; }
.u-settings-logo-preview { width:72px;height:72px;object-fit:contain;background:#fff;border-radius:18px;padding:8px;border:1px solid var(--border); }
.u-max-90 { max-width:90px; }
.u-max-92 { max-width:92px; }
.u-img-preview-large { max-width:180px;max-height:120px;object-fit:contain; }
.u-w-120 { width:120px; }
.u-hidden { display:none; }
.u-mt-8 { margin-top:8px; }


/* Core UI Shell Phase 3 — stable admin shell layout.
   This patch is intentionally appended after legacy shell layers so it wins cascade
   without changing page-level PHP or business logic. */
:root {
    --erp-shell-sidebar-width: 276px;
    --erp-shell-sidebar-width-md: 244px;
    --erp-shell-sidebar-collapsed: 64px;
    --erp-shell-content-gap: 20px;
}

body.msar-shell.msar-classic {
    overflow-x: hidden;
    background: linear-gradient(180deg, #f7fbff 0%, #edf6ff 100%);
}

body.msar-shell.msar-classic .dashboard {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    padding: 0 var(--erp-shell-sidebar-width) 0 0 !important;
    box-sizing: border-box !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
    padding-right: var(--erp-shell-sidebar-collapsed) !important;
}

body.msar-shell.msar-classic .side-info {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-end: 0 !important;
    width: var(--erp-shell-sidebar-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1000 !important;
    overflow: hidden !important;
}

body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info {
    width: var(--erp-shell-sidebar-collapsed) !important;
}

body.msar-shell.msar-classic .side-info > .msar-sidebar-scroll {
    height: calc(100vh - 54px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 92px !important;
    scrollbar-width: thin;
}

body.msar-shell.msar-classic .side-info .side-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

body.msar-shell.msar-classic .main-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    padding: 0 var(--erp-shell-content-gap) 72px !important;
    box-sizing: border-box !important;
    overflow-x: clip;
}

body.msar-shell.msar-classic .main-topbar,
body.msar-shell.msar-classic .msar-breadcrumb-bar,
body.msar-shell.msar-classic .main-form > .alert,
body.msar-shell.msar-classic .main-form > .card,
body.msar-shell.msar-classic .main-form > .grid,
body.msar-shell.msar-classic .main-form > .ui-card,
body.msar-shell.msar-classic .main-form > .app-card,
body.msar-shell.msar-classic .main-form > .table-wrap,
body.msar-shell.msar-classic .main-form > form,
body.msar-shell.msar-classic .msar-footer {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.msar-shell.msar-classic .main-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    margin-inline: calc(var(--erp-shell-content-gap) * -1) !important;
    padding-inline: var(--erp-shell-content-gap) !important;
}

body.msar-shell.msar-classic .module-switcher {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

body.msar-shell.msar-classic .module-tab,
body.msar-shell.msar-classic .sidebar-nav a,
body.msar-shell.msar-classic .module-sidebar-group-title {
    min-width: 0;
}

body.msar-shell.msar-classic .module-tab .msar-module-text,
body.msar-shell.msar-classic .sidebar-nav a .nav-text,
body.msar-shell.msar-classic .module-sidebar-group-title .msar-section-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.msar-shell.msar-classic .module-sidebar-group.msar-collapsed .module-sidebar-nav {
    display: none !important;
}

body.msar-shell.msar-classic .module-sidebar-group:not(.msar-collapsed) .module-sidebar-nav {
    display: block !important;
}

body.msar-shell.msar-classic .msar-sidebar-floating-flyout {
    position: fixed;
    z-index: 1300;
    max-width: min(280px, calc(100vw - 120px));
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.24);
    pointer-events: none;
    white-space: nowrap;
}

body.msar-shell.msar-classic .table-wrap {
    overflow-x: auto;
}

@media (max-width: 1320px) {
    :root { --erp-shell-sidebar-width: var(--erp-shell-sidebar-width-md); }
}

@media (max-width: 980px) {
    body.msar-shell.msar-classic .dashboard,
    body.msar-shell.msar-classic.admin-sidebar-collapsed .dashboard {
        padding-right: var(--erp-shell-sidebar-collapsed) !important;
    }

    body.msar-shell.msar-classic .side-info,
    body.msar-shell.msar-classic.admin-sidebar-collapsed .side-info {
        width: var(--erp-shell-sidebar-collapsed) !important;
    }

    body.msar-shell.msar-classic .side-info:hover,
    body.msar-shell.msar-classic .side-info:focus-within {
        width: min(286px, calc(100vw - 18px)) !important;
    }

    body.msar-shell.msar-classic .main-form {
        padding-inline: 12px !important;
    }

    body.msar-shell.msar-classic .main-topbar {
        margin-inline: -12px !important;
        padding-inline: 12px !important;
    }
}

@media (max-width: 720px) {
    :root { --erp-shell-sidebar-collapsed: 58px; }

    body.msar-shell.msar-classic .main-topbar {
        position: relative;
        grid-template-columns: 1fr !important;
    }

    body.msar-shell.msar-classic .msar-breadcrumb-bar {
        align-items: stretch;
        gap: 8px;
    }
}
/* User account dropdown: moved utility links out of the sidebar. */
body.msar-shell.msar-classic .main-topbar,
body.msar-shell.msar-classic .msar-user-strip {
    overflow: visible !important;
}

body.msar-shell.msar-classic .msar-user-strip {
    position: relative !important;
    z-index: 1050 !important;
}

body.msar-shell.msar-classic .msar-user-menu {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

body.msar-shell.msar-classic .msar-user-menu-trigger {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    min-width: 0 !important;
    max-width: 210px !important;
    padding: 3px 8px !important;
    border: 1px solid var(--msar-shell-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--msar-shell-text) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(80, 38, 18, .06) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body.msar-shell.msar-classic .msar-user-menu-trigger:hover,
body.msar-shell.msar-classic .msar-user-menu.is-open .msar-user-menu-trigger {
    border-color: var(--msar-shell-primary) !important;
    background: var(--msar-shell-primary-soft) !important;
    box-shadow: 0 0 0 2px rgba(255, 90, 47, .10) !important;
}

body.msar-shell.msar-classic .msar-user-menu-trigger .msar-user-name {
    display: block !important;
    min-width: 0 !important;
    max-width: 132px !important;
    overflow: hidden !important;
    color: var(--msar-shell-text) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .msar-user-menu-trigger .msar-avatar {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border: 1px solid #fff !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 1px var(--msar-shell-tint-border) !important;
}

body.msar-shell.msar-classic .msar-user-menu-caret {
    flex: 0 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--msar-shell-muted) !important;
    font-size: 11px !important;
    transition: transform .2s ease !important;
}

body.msar-shell.msar-classic .msar-user-menu.is-open .msar-user-menu-caret {
    transform: rotate(180deg) !important;
}

body.msar-shell.msar-classic .msar-user-menu-trigger .notification-badge {
    position: absolute !important;
    top: -6px !important;
    right: 28px !important;
    left: auto !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
    text-align: center !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1600 !important;
    display: grid !important;
    gap: 4px !important;
    width: 230px !important;
    padding: 8px !important;
    border: 1px solid var(--msar-shell-sidebar-border) !important;
    border-radius: 8px !important;
    background: #120904 !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(33, 20, 13, .26) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    direction: rtl !important;
}

body.msar-shell.msar-classic .msar-user-menu.is-open .msar-user-menu-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, .92) !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a:hover,
body.msar-shell.msar-classic .msar-user-menu-panel a:focus-visible,
body.msar-shell.msar-classic .msar-user-menu-panel a.is-active {
    background: rgba(255, 90, 47, .22) !important;
    color: #fff !important;
    outline: 0 !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.msar-shell.msar-classic .msar-user-menu-panel a em {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--msar-shell-primary) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    text-align: center !important;
}

body.msar-shell.msar-classic .msar-sidebar-utility-nav:empty {
    display: none !important;
}

/* Keep the header sidebar toggle from rendering as a dark block over the page chrome. */
body.msar-shell.msar-classic .module-page-title {
    background: transparent !important;
    box-shadow: none !important;
}

body.msar-shell.msar-classic .module-page-title .admin-sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 1px solid #d7e4f2 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #173a66 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08) !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 {
    background: #f3f7fd !important;
    color: #0b1d35 !important;
    outline: 0 !important;
}

@media (max-width: 760px) {
    body.msar-shell.msar-classic .msar-user-menu-trigger {
        max-width: 168px !important;
    }

    body.msar-shell.msar-classic .msar-user-menu-trigger .msar-user-name {
        max-width: 86px !important;
    }

    body.msar-shell.msar-classic .msar-user-menu-panel {
        left: 0 !important;
        width: min(230px, calc(100vw - 92px)) !important;
    }
}