/* MES unified interface layer
   Loaded after legacy and view-scoped styles so every module shares one visual language. */

:root {
    color-scheme: dark;
    --ui-bg: #090d16;
    --ui-bg-soft: #0d1320;
    --ui-surface: #111927;
    --ui-surface-2: #162132;
    --ui-surface-3: #1b283b;
    --ui-border: #26354a;
    --ui-border-soft: rgba(148, 163, 184, .14);
    --ui-text: #e7edf7;
    --ui-text-soft: #a9b5c7;
    --ui-muted: #7f8da3;
    --ui-primary: #4f8cff;
    --ui-primary-strong: #326de5;
    --ui-primary-soft: rgba(79, 140, 255, .14);
    --ui-success: #3ccf91;
    --ui-warning: #f5b942;
    --ui-danger: #f16d7a;
    --ui-info: #58c4dc;
    --ui-radius-sm: 8px;
    --ui-radius: 12px;
    --ui-radius-lg: 18px;
    --ui-shadow-sm: 0 6px 18px rgba(0, 0, 0, .18);
    --ui-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    --ui-header-height: 68px;
    --ui-sidebar-width: 252px;
    --ui-transition: 160ms ease;
}

html {
    scroll-behavior: smooth;
    background: var(--ui-bg);
}

body.app-shell {
    margin: 0;
    background:
        radial-gradient(circle at 82% -10%, rgba(79, 140, 255, .11), transparent 34rem),
        linear-gradient(180deg, #0b101b 0%, var(--ui-bg) 55%);
    color: var(--ui-text);
    font-family: Inter, "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: .005em;
}

body.app-shell a {
    color: #78a7ff;
    text-underline-offset: 3px;
}

body.app-shell a:hover { color: #a9c6ff; }

body.app-shell :focus-visible {
    outline: 3px solid rgba(121, 168, 255, .68);
    outline-offset: 3px;
}

.skip-to-content {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary);
    color: #fff !important;
    transition: top var(--ui-transition);
}

.skip-to-content:focus { top: 10px; }

/* Application header */
body.app-shell > header {
    position: sticky;
    top: 0;
    z-index: 1040;
}

body.app-shell .navbar {
    height: var(--ui-header-height);
    min-height: var(--ui-header-height);
    padding: 0 20px;
    background: rgba(13, 19, 32, .92) !important;
    border-bottom: 1px solid var(--ui-border-soft);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    backdrop-filter: blur(16px);
}

body.app-shell .navbar > .container-fluid { gap: 10px; }

body.app-shell .navbar-brand {
    gap: 11px;
    margin-right: 22px;
    color: #f7faff !important;
    font-size: 19px;
    font-weight: 720;
    letter-spacing: .02em;
    white-space: nowrap;
}

body.app-shell .navbar-brand-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    background: linear-gradient(145deg, #5c96ff, #4456d9);
    box-shadow: 0 8px 22px rgba(67, 93, 218, .34);
}

body.app-shell .navbar .nav-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text-soft) !important;
    font-size: 17px;
    font-weight: 560;
}

body.app-shell .navbar .nav-link:hover,
body.app-shell .navbar .nav-link:focus-visible {
    color: var(--ui-text) !important;
    background: rgba(148, 163, 184, .09);
    border-color: var(--ui-border-soft);
}

body.app-shell .navbar .nav-link.active {
    color: #fff !important;
    background: var(--ui-primary-soft) !important;
    border-color: rgba(79, 140, 255, .3);
    box-shadow: inset 0 0 0 1px rgba(79, 140, 255, .05);
}

body.app-shell .navbar .dropdown-toggle {
    padding: 7px 11px !important;
    background: rgba(148, 163, 184, .07);
    border-color: var(--ui-border-soft);
    border-radius: 10px;
    font-size: 17px;
}

body.app-shell .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
    background: linear-gradient(145deg, var(--ui-primary), #665ee8);
}

.app-sidebar-toggle,
.app-sidebar-collapse {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ui-border-soft);
    border-radius: 10px;
    background: rgba(148, 163, 184, .06);
    color: var(--ui-text-soft);
}

.app-sidebar-toggle:hover,
.app-sidebar-collapse:hover {
    background: rgba(148, 163, 184, .12);
    color: #fff;
}

/* Sidebar and workspace */
body.app-shell .layout-body {
    min-height: calc(100vh - var(--ui-header-height));
    align-items: stretch;
}

body.app-shell .sidebar {
    position: sticky;
    top: var(--ui-header-height);
    align-self: flex-start;
    width: var(--ui-sidebar-width);
    min-width: var(--ui-sidebar-width);
    height: calc(100vh - var(--ui-header-height));
    min-height: 0;
    padding: 18px 14px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(13, 19, 32, .82);
    border-right: 1px solid var(--ui-border-soft);
    transition: width var(--ui-transition), min-width var(--ui-transition), transform var(--ui-transition);
    backdrop-filter: blur(12px);
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 8px;
}

body.app-shell .sidebar-section-label {
    margin: 0;
    padding: 0 10px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .13em;
}

body.app-shell .sidebar-link {
    min-height: 46px;
    gap: 11px;
    margin-bottom: 3px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-text-soft) !important;
    font-size: 17px;
    font-weight: 560;
    white-space: nowrap;
}

body.app-shell .sidebar-link i {
    width: 22px;
    color: #8294ad;
    font-size: 18px;
    opacity: 1;
}

body.app-shell .sidebar-link:hover {
    color: var(--ui-text) !important;
    background: rgba(148, 163, 184, .08);
    border-color: var(--ui-border-soft);
    transform: none;
}

body.app-shell .sidebar-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(79, 140, 255, .2), rgba(79, 140, 255, .08)) !important;
    border-color: rgba(79, 140, 255, .25);
    box-shadow: inset 3px 0 0 var(--ui-primary);
}

body.app-shell .sidebar-link.active i { color: #8cb3ff; }

body.sidebar-collapsed .sidebar {
    width: 72px;
    min-width: 72px;
}

body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .sidebar-link span { display: none; }

body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-inline: 8px;
}

body.sidebar-collapsed .sidebar-link i { width: auto; }

.sidebar-backdrop {
    position: fixed;
    inset: var(--ui-header-height) 0 0;
    z-index: 1025;
    display: none;
    background: rgba(3, 7, 18, .7);
    backdrop-filter: blur(3px);
}

body.app-shell #mainContent {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - var(--ui-header-height));
    padding: clamp(18px, 2.2vw, 32px);
    overflow-x: clip;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.app-shell #mainContent > .container,
body.app-shell #mainContent > .container-fluid {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: 0;
}

/* Typography and page headers */
body.app-shell #mainContent h1,
body.app-shell #mainContent h2,
body.app-shell #mainContent h3,
body.app-shell #mainContent h4,
body.app-shell #mainContent h5 {
    color: var(--ui-text);
    letter-spacing: -.01em;
}

body.app-shell #mainContent h1,
body.app-shell #mainContent h2 {
    font-weight: 720;
}

body.app-shell #mainContent h1 { font-size: clamp(1.55rem, 2vw, 2rem); }
body.app-shell #mainContent h2 { font-size: clamp(1.35rem, 1.8vw, 1.72rem); }
body.app-shell #mainContent .text-muted,
body.app-shell #mainContent .text-secondary { color: var(--ui-muted) !important; }

.ui-page-title {
    position: relative;
    padding-left: 15px;
}

.ui-page-title::before {
    content: "";
    position: absolute;
    top: .14em;
    bottom: .14em;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent, var(--ui-primary)), var(--accent2, #665ee8));
}

/* Surfaces */
body.app-shell #mainContent .card,
body.app-shell #mainContent .modal-content,
body.app-shell #mainContent .accordion-item,
body.app-shell .modal-content {
    color: var(--ui-text);
    background: linear-gradient(180deg, rgba(22, 33, 50, .96), rgba(15, 23, 36, .98)) !important;
    border: 1px solid var(--ui-border-soft) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body.app-shell #mainContent .card { overflow: hidden; }

body.app-shell #mainContent .card-header,
body.app-shell .modal-header,
body.app-shell .modal-footer {
    min-height: 50px;
    padding: 13px 18px;
    background: rgba(148, 163, 184, .045) !important;
    border-color: var(--ui-border-soft) !important;
}

body.app-shell #mainContent .card-header.bg-primary,
body.app-shell #mainContent .card-header.bg-success,
body.app-shell #mainContent .card-header.bg-info,
body.app-shell #mainContent .card-header.bg-secondary {
    color: var(--ui-text) !important;
    background: linear-gradient(90deg, var(--ui-primary-soft), rgba(148, 163, 184, .025)) !important;
}

body.app-shell #mainContent .card-body { padding: clamp(16px, 2vw, 22px); }
body.app-shell #mainContent .card-body.p-0 { padding: 0 !important; }

/* Forms */
body.app-shell #mainContent .form-label {
    margin-bottom: 7px;
    color: #bdc8d8 !important;
    font-size: 13px;
    font-weight: 650 !important;
}

body.app-shell #mainContent .ui-required::after {
    content: " *";
    color: #ff8791;
}

body.app-shell #mainContent .form-control,
body.app-shell #mainContent .form-select,
body.app-shell #mainContent .input-group-text {
    min-height: 42px;
    color: var(--ui-text) !important;
    background-color: rgba(9, 14, 24, .72) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}

body.app-shell #mainContent textarea.form-control { min-height: 92px; }
body.app-shell #mainContent .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.app-shell #mainContent .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

body.app-shell #mainContent .form-control::placeholder { color: #66758b; }

body.app-shell #mainContent .form-control:hover,
body.app-shell #mainContent .form-select:hover { border-color: #3a4d68 !important; }

body.app-shell #mainContent .form-control:focus,
body.app-shell #mainContent .form-select:focus {
    color: #fff !important;
    background-color: #0c1421 !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 140, 255, .16) !important;
}

body.app-shell #mainContent .form-control:disabled,
body.app-shell #mainContent .form-select:disabled,
body.app-shell #mainContent .form-control[readonly] {
    color: #8592a5 !important;
    background: rgba(35, 46, 63, .55) !important;
    opacity: 1;
}

body.app-shell #mainContent .form-check-input {
    background-color: #0c1421;
    border-color: #43536a;
}

body.app-shell #mainContent .form-check-input:checked {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

body.app-shell #mainContent .field-validation-error,
body.app-shell #mainContent .text-danger { color: #ff8791 !important; }

/* Buttons */
body.app-shell .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 10px !important;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
    transition: transform var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);
}

body.app-shell .btn:hover { transform: translateY(-1px); }
body.app-shell .btn:active { transform: translateY(0); }
body.app-shell .btn-sm { min-height: 32px; padding: 6px 10px; border-radius: 8px !important; font-size: 12px; }
body.app-shell .btn-lg { min-height: 48px; padding: 11px 20px; }

body.app-shell .btn-primary,
body.app-shell #mainContent .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong)) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(50, 109, 229, .22) !important;
}

body.app-shell .btn-success { background: #16855c !important; border-color: #219d70 !important; }
body.app-shell .btn-danger { background: #b6414d !important; border-color: #cf5260 !important; }
body.app-shell .btn-warning { color: #15100a !important; background: #e6a72f !important; border-color: #f5b942 !important; }
body.app-shell .btn-secondary { color: var(--ui-text) !important; background: #28364a !important; border-color: #34465f !important; }

body.app-shell .btn-outline-primary { color: #8cb3ff !important; border-color: rgba(79, 140, 255, .55) !important; }
body.app-shell .btn-outline-info { color: #73d2e5 !important; border-color: rgba(88, 196, 220, .5) !important; }
body.app-shell .btn-outline-warning { color: #f8c65f !important; border-color: rgba(245, 185, 66, .5) !important; }
body.app-shell .btn-outline-danger { color: #ff8994 !important; border-color: rgba(241, 109, 122, .52) !important; }
body.app-shell .btn-outline-secondary { color: #aab6c8 !important; border-color: #46556a !important; }
body.app-shell [class*="btn-outline-"]:hover { color: #fff !important; background: rgba(148, 163, 184, .12) !important; }

body.app-shell .btn-group { gap: 5px; }
body.app-shell .btn-group > .btn { border-radius: 8px !important; }

/* Tables */
body.app-shell #mainContent .table-responsive {
    max-width: 100%;
    border-radius: inherit;
    scrollbar-color: #41536c transparent;
}

body.app-shell #mainContent .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-text-soft);
    --bs-table-border-color: var(--ui-border-soft);
    --bs-table-striped-bg: rgba(148, 163, 184, .025);
    --bs-table-striped-color: var(--ui-text-soft);
    --bs-table-hover-bg: rgba(79, 140, 255, .065);
    --bs-table-hover-color: #f4f7fc;
    width: 100%;
    margin-bottom: 0;
    color: var(--ui-text-soft) !important;
    border-collapse: separate;
    border-spacing: 0;
}

body.app-shell #mainContent .table > thead,
body.app-shell #mainContent .table > thead.table-light,
body.app-shell #mainContent .table > thead.table-secondary {
    color: #c9d4e4 !important;
    background: #121c2b !important;
}

body.app-shell #mainContent .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 14px;
    color: #c9d4e4 !important;
    background: #121c2b !important;
    border-bottom: 1px solid #33445c !important;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .035em;
    vertical-align: middle;
    white-space: nowrap;
}

body.app-shell #mainContent .table > tbody > tr > td {
    padding: 12px 14px;
    color: var(--ui-text-soft) !important;
    background: transparent !important;
    border-color: var(--ui-border-soft) !important;
    vertical-align: middle;
}

body.app-shell #mainContent .table > tbody > tr { transition: background var(--ui-transition); }
body.app-shell #mainContent .table > tbody > tr:hover > td { color: #f2f6fc !important; background: rgba(79, 140, 255, .055) !important; }
body.app-shell #mainContent .table td.text-info,
body.app-shell #mainContent .table a.text-info { color: #77cfe2 !important; }
body.app-shell #mainContent .table td.text-success { color: #67d9a7 !important; }

/* Feedback, status, navigation */
body.app-shell .alert,
body.app-shell .alert-success-dark,
body.app-shell .alert-danger-dark {
    position: relative;
    min-height: 48px;
    padding: 12px 44px 12px 15px;
    border-radius: 12px;
    border: 1px solid var(--ui-border-soft);
    box-shadow: var(--ui-shadow-sm);
}

body.app-shell .alert-success,
body.app-shell .alert-success-dark { color: #87e5bb !important; background: rgba(36, 151, 105, .12) !important; border-color: rgba(60, 207, 145, .3) !important; }
body.app-shell .alert-danger,
body.app-shell .alert-danger-dark { color: #ff9da6 !important; background: rgba(182, 65, 77, .14) !important; border-color: rgba(241, 109, 122, .3) !important; }
body.app-shell .alert-warning { color: #ffd47b !important; background: rgba(173, 118, 25, .14) !important; border-color: rgba(245, 185, 66, .3) !important; }
body.app-shell .alert-info { color: #8bdbea !important; background: rgba(42, 137, 157, .14) !important; border-color: rgba(88, 196, 220, .3) !important; }

.ui-alert-close {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: currentColor;
    opacity: .7;
}

body.app-shell .badge {
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

body.app-shell .pagination { gap: 5px; }
body.app-shell .page-link {
    min-width: 36px;
    min-height: 36px;
    display: grid;
    place-items: center;
    color: var(--ui-text-soft);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-soft);
    border-radius: 9px !important;
}
body.app-shell .active > .page-link { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }

body.app-shell .dropdown-menu {
    min-width: 210px;
    padding: 7px;
    color: var(--ui-text);
    background: #121b2a;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: var(--ui-shadow);
}

body.app-shell .dropdown-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    color: var(--ui-text-soft) !important;
    font-size: 13px !important;
}
body.app-shell .dropdown-item:hover { color: #fff !important; background: rgba(79, 140, 255, .1) !important; }

/* Select2 */
body.app-shell .select2-container { max-width: 100%; }
body.app-shell .select2-container--default .select2-selection--single,
body.app-shell .select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    background: rgba(9, 14, 24, .72) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
}
body.app-shell .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; color: var(--ui-text) !important; }
body.app-shell .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; }
body.app-shell .select2-dropdown { background: #121b2a !important; border-color: var(--ui-border) !important; }
body.app-shell .select2-results__option--highlighted { background: rgba(79, 140, 255, .16) !important; }

/* Sales order product menus are mounted under body so table/card overflow cannot clip them. */
body.app-shell[data-controller="SalesOrder"][data-action="Create"] > .select2-container--open {
    z-index: 1085 !important;
}

/* Dashboard and empty states */
body.app-shell #mainContent .dashboard-card {
    position: relative;
    min-height: 160px;
    display: grid;
    place-content: center;
    overflow: hidden;
    color: var(--ui-text) !important;
    background: linear-gradient(145deg, #17243a, #111a29) !important;
    border: 1px solid var(--ui-border-soft) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body.app-shell #mainContent .dashboard-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -30px;
    top: -35px;
    border-radius: 50%;
    background: rgba(79, 140, 255, .13);
}

body.app-shell #mainContent .dashboard-card:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 140, 255, .42) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3) !important;
}

body.app-shell #mainContent .dashboard-card i { color: #82adff; }

.ui-empty-state {
    padding: 46px 20px !important;
    color: var(--ui-muted) !important;
    text-align: center;
}

/* Login */
body[data-controller="Account"][data-action="Login"] .layout-body {
    background: radial-gradient(circle at center, rgba(79, 140, 255, .1), transparent 30rem);
}
body[data-controller="Account"][data-action="Login"] #mainContent { display: grid; place-items: center; }
body[data-controller="Account"][data-action="Login"] #mainContent .card { width: min(100%, 440px) !important; border-color: rgba(79, 140, 255, .22) !important; box-shadow: var(--ui-shadow) !important; }

.login-brand-mark {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(79, 140, 255, .28);
    border-radius: 17px;
    color: #91b7ff;
    background: linear-gradient(145deg, rgba(79, 140, 255, .2), rgba(102, 94, 232, .1));
    box-shadow: 0 12px 28px rgba(50, 109, 229, .2);
    font-size: 27px;
}

body.app-shell footer.footer {
    padding: 10px 16px;
    color: #66758b;
    background: #0b111c;
    border-top: 1px solid var(--ui-border-soft);
    font-size: 12px;
}

/* Responsive behavior */
@media (max-width: 1199.98px) {
    :root { --ui-sidebar-width: 228px; }
    body.app-shell #mainContent { padding: 22px; }
}

@media (max-width: 991.98px) {
    body.app-shell .navbar { height: auto; min-height: var(--ui-header-height); padding-inline: 14px; }
    body.app-shell .navbar-collapse {
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        max-height: calc(100vh - 90px);
        padding: 12px !important;
        overflow-y: auto;
        background: #111a29 !important;
        border: 1px solid var(--ui-border) !important;
        border-radius: 14px !important;
        box-shadow: var(--ui-shadow) !important;
    }

    body.app-shell .sidebar {
        position: fixed;
        top: var(--ui-header-height);
        bottom: 0;
        left: 0;
        z-index: 1030;
        width: min(84vw, 290px);
        min-width: min(84vw, 290px);
        height: auto;
        transform: translateX(-105%);
        box-shadow: var(--ui-shadow);
    }

    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .app-sidebar-collapse { display: none; }
    body.app-shell #mainContent { width: 100%; padding: 18px 14px 26px; }
    body.app-shell #mainContent .d-flex.justify-content-between.align-items-center { align-items: flex-start !important; gap: 12px; flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    body.app-shell .navbar-brand { font-size: 17px; margin-right: auto; }
    body.app-shell .navbar-brand-icon { width: 32px; height: 32px; }
    body.app-shell #mainContent { padding-inline: 10px; }
    body.app-shell #mainContent .container,
    body.app-shell #mainContent .container-fluid { padding-inline: 0; }
    body.app-shell #mainContent .card { border-radius: 14px !important; }
    body.app-shell #mainContent .card-body { padding: 15px; }
    body.app-shell .btn:not(.btn-sm) { min-height: 42px; }
    body.app-shell #mainContent form .row > [class*="col-"] { margin-bottom: 4px; }
    body.app-shell #mainContent .table > thead > tr > th,
    body.app-shell #mainContent .table > tbody > tr > td { padding: 10px 12px; }
}

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

@media print {
    body.app-shell { background: #fff !important; color: #111 !important; }
    body.app-shell > header,
    body.app-shell .sidebar,
    body.app-shell .sidebar-backdrop,
    body.app-shell footer,
    body.app-shell .no-print { display: none !important; }
    body.app-shell #mainContent { padding: 0 !important; color: #111 !important; }
    body.app-shell #mainContent .card { color: #111 !important; background: #fff !important; border-color: #bbb !important; box-shadow: none !important; }
}

/* Readability correction layer ------------------------------------------------
   Keep this section last. A number of legacy views define 11–13px text and
   Bootstrap's default muted gray inside their own style blocks. */
body.app-shell #mainContent {
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--ui-text);
    --bs-secondary-color: #acb8ca;
    --text-muted: #a5b2c5;
    --text-secondary: #bdc7d6;
    font-size: 16px;
}

body.app-shell #mainContent p,
body.app-shell #mainContent li,
body.app-shell #mainContent dd,
body.app-shell #mainContent dt,
body.app-shell #mainContent .card-body,
body.app-shell #mainContent .modal-body,
body.app-shell #mainContent .offcanvas-body,
body.app-shell #mainContent .accordion-body,
body.app-shell #mainContent .list-group-item {
    font-size: 15px;
}

body.app-shell #mainContent small,
body.app-shell #mainContent .small,
body.app-shell #mainContent .x-small,
body.app-shell #mainContent .fs-7,
body.app-shell #mainContent .form-text,
body.app-shell #mainContent .card-subtitle,
body.app-shell #mainContent .breadcrumb,
body.app-shell #mainContent .info-label,
body.app-shell #mainContent .field-label,
body.app-shell #mainContent .product-meta {
    color: #aab7c9 !important;
    font-size: 14px !important;
    line-height: 1.45;
}

body.app-shell #mainContent .text-muted,
body.app-shell #mainContent .text-secondary,
body.app-shell #mainContent [style*="color:#555"],
body.app-shell #mainContent [style*="color: #555"],
body.app-shell #mainContent [style*="color:#666"],
body.app-shell #mainContent [style*="color: #666"],
body.app-shell #mainContent [style*="color:#777"],
body.app-shell #mainContent [style*="color: #777"],
body.app-shell #mainContent [style*="color:#6c757d"],
body.app-shell #mainContent [style*="color: #6c757d"] {
    color: #aab7c9 !important;
    opacity: 1 !important;
}

body.app-shell #mainContent [style*="font-size:10px"],
body.app-shell #mainContent [style*="font-size: 10px"],
body.app-shell #mainContent [style*="font-size:11px"],
body.app-shell #mainContent [style*="font-size: 11px"],
body.app-shell #mainContent [style*="font-size:12px"],
body.app-shell #mainContent [style*="font-size: 12px"],
body.app-shell #mainContent [style*="font-size:13px"],
body.app-shell #mainContent [style*="font-size: 13px"] {
    font-size: 14px !important;
}

body.app-shell #mainContent .form-label { font-size: 15px !important; }

body.app-shell #mainContent .form-control,
body.app-shell #mainContent .form-select,
body.app-shell #mainContent .input-group-text,
body.app-shell #mainContent .select2-selection__rendered,
body.app-shell #mainContent .select2-results__option {
    font-size: 15px !important;
}

body.app-shell #mainContent .form-control::placeholder { color: #8997aa !important; opacity: 1; }
body.app-shell #mainContent .form-control:disabled,
body.app-shell #mainContent .form-control[readonly] { color: #a8b4c5 !important; }

body.app-shell .btn { font-size: 15px; }
body.app-shell .btn-sm { font-size: 14px; }
body.app-shell .badge { font-size: 13px; line-height: 1.25; }
body.app-shell .navbar .nav-link,
body.app-shell .navbar .dropdown-toggle,
body.app-shell .sidebar-link,
body.app-shell .dropdown-item { font-size: 17px !important; }
body.app-shell .navbar-brand { font-size: 19px; }
body.app-shell footer.footer { font-size: 13px; }

body.app-shell #mainContent .table > thead > tr > th { font-size: 14px !important; }
body.app-shell #mainContent .table > tbody > tr > td { font-size: 15px !important; }

body.app-shell #mainContent .nav-tabs .nav-link,
body.app-shell #mainContent .nav-pills .nav-link,
body.app-shell #mainContent .accordion-button,
body.app-shell #mainContent .dropdown-item,
body.app-shell #mainContent .page-link {
    color: #b8c3d3 !important;
    font-size: 15px !important;
}

body.app-shell #mainContent .nav-tabs .nav-link.active,
body.app-shell #mainContent .nav-pills .nav-link.active,
body.app-shell #mainContent .accordion-button:not(.collapsed) { color: #fff !important; }

body.app-shell #mainContent .list-group-item {
    color: #bac5d4 !important;
    background-color: rgba(15, 23, 36, .72) !important;
    border-color: var(--ui-border-soft) !important;
}

body.app-shell .select2-results__option,
body.app-shell .select2-search__field,
body.app-shell .flatpickr-calendar,
body.app-shell .flatpickr-day,
body.app-shell .flatpickr-time input { font-size: 15px !important; }

body.app-shell #mainContent .ui-min-readable { font-size: 14px !important; }
body.app-shell #mainContent .ui-contrast-fix,
body.app-shell #mainContent .ui-contrast-on-dark { color: #f3f6fb !important; opacity: 1 !important; }
body.app-shell #mainContent .ui-contrast-on-light { color: #111827 !important; opacity: 1 !important; }

/* Frozen first column
   Sticky cells must remain fully opaque while the table scrolls underneath. */
body.app-shell #mainContent .table-responsive,
body.app-shell #mainContent .freeze-pane-wrapper {
    position: relative;
    isolation: isolate;
}

body.app-shell #mainContent .table > tbody > tr > td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--ui-surface) !important;
    background-clip: padding-box !important;
    border-right: 1px solid #34445b !important;
    box-shadow: 10px 0 16px -14px rgba(0, 0, 0, .95) !important;
}

body.app-shell #mainContent .table.table-striped > tbody > tr:nth-of-type(odd) > td.sticky-col {
    background: var(--ui-surface-2) !important;
}

body.app-shell #mainContent .table > tbody > tr:hover > td.sticky-col {
    color: #f2f6fc !important;
    background: #1b2b42 !important;
}

body.app-shell #mainContent .table > thead > tr > th.sticky-col {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 8;
    background: #172235 !important;
    background-clip: padding-box !important;
    border-right: 1px solid #40516a !important;
    box-shadow: 10px 0 16px -14px rgba(0, 0, 0, .95) !important;
}

/* Semantic contrast: solid light backgrounds always use dark foregrounds. */
body.app-shell .btn-success,
body.app-shell .btn-danger {
    color: #fff !important;
}

body.app-shell .btn-info {
    color: #07161b !important;
    background: #68cde1 !important;
    border-color: #86d9e9 !important;
}

body.app-shell .btn-warning {
    color: #1d1506 !important;
}

body.app-shell .btn-info:hover,
body.app-shell .btn-info:focus,
body.app-shell .btn-info:active,
body.app-shell .btn-warning:hover,
body.app-shell .btn-warning:focus,
body.app-shell .btn-warning:active {
    color: #0b1118 !important;
}

body.app-shell .btn-light,
body.app-shell #mainContent .badge.bg-info:not([class*="bg-opacity-"]),
body.app-shell #mainContent .badge.bg-warning:not([class*="bg-opacity-"]),
body.app-shell #mainContent .input-group-text.bg-info:not([class*="bg-opacity-"]),
body.app-shell #mainContent .input-group-text.bg-warning:not([class*="bg-opacity-"]) {
    color: #111827 !important;
}

body.app-shell #mainContent.module-raw .btn-primary,
body.app-shell #mainContent.module-wip .btn-primary {
    color: #08120d !important;
}

/* Compatibility layer for legacy view-scoped components. */
body.app-shell #mainContent .ui-legacy-page {
    color: var(--ui-text) !important;
    background: transparent !important;
    font-family: inherit !important;
}

body.app-shell #mainContent .ui-legacy-surface {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body.app-shell #mainContent .ui-legacy-header {
    min-height: 48px;
    color: #e9eef7 !important;
    background: rgba(148, 163, 184, .055) !important;
    border-color: var(--ui-border-soft) !important;
}

body.app-shell #mainContent .ui-legacy-toolbar {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body.app-shell #mainContent .ui-legacy-button {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 13px !important;
    color: #dce5f2 !important;
    background: #28384f !important;
    border: 1px solid #40536d !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.app-shell #mainContent .ui-legacy-button:hover {
    color: #fff !important;
    background: #334864 !important;
    border-color: #587394 !important;
    transform: translateY(-1px);
}

body.app-shell #mainContent .ui-legacy-button-primary {
    color: #fff !important;
    background: #326de5 !important;
    border-color: #4f8cff !important;
}

body.app-shell #mainContent .ui-legacy-button-success {
    color: #fff !important;
    background: #197a57 !important;
    border-color: #2b9b70 !important;
}

body.app-shell #mainContent .ui-legacy-button-warning {
    color: #1d1506 !important;
    background: #e6a72f !important;
    border-color: #f5b942 !important;
}

body.app-shell #mainContent .ui-legacy-button-danger {
    color: #fff !important;
    background: #b6414d !important;
    border-color: #cf5260 !important;
}

/* Allocation product picker: the result menu must escape its card boundary. */
body.app-shell[data-controller="Allocation"] #mainContent .allocation-product-card {
    position: relative;
    z-index: 30;
    overflow: visible !important;
}

body.app-shell[data-controller="Allocation"] #mainContent .allocation-product-card > .card-body {
    overflow: visible !important;
}

body.app-shell[data-controller="Allocation"] #mainContent .allocation-product-picker {
    z-index: 31;
}

body.app-shell[data-controller="Allocation"] #mainContent #productDropdownList {
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 1080 !important;
    max-height: min(320px, 50vh) !important;
    margin-top: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #172337 !important;
    border: 1px solid #3a4d68 !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .42) !important;
}

/* Shared report paper: prevent screen-theme colors and sticky table styles from leaking into print. */
@media print {
    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) {
        color: #111 !important;
        background: #fff !important;
        color-scheme: light;
        box-shadow: none !important;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) * {
        color: #111 !important;
        text-shadow: none !important;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) table {
        color: #111 !important;
        background: #fff !important;
        border-color: #555 !important;
        box-shadow: none !important;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) thead > tr > th {
        position: static !important;
        color: #111 !important;
        background: #e9ecef !important;
        border-color: #555 !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) tbody > tr > td {
        position: static !important;
        color: #111 !important;
        background: #fff !important;
        border-color: #777 !important;
        box-shadow: none !important;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) tbody > tr:nth-child(even) > td {
        background: #f7f7f7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) :is(.badge, .alert) {
        color: #111 !important;
        background: #fff !important;
        border: 1px solid #777 !important;
    }

    body.app-shell #mainContent :is(.ui-print-surface, #printContainer, #print-area, #print-report-area, .print-area, .report-paper) a {
        color: #111 !important;
        text-decoration: none !important;
    }
}