/*!
 * EximIN — SAP Horizon theme layer (horizon.css)
 * Restyles the portal to the SAP Fiori "Horizon" design language used by
 * SAP S/4HANA Public Cloud in the browser: Morning Horizon (light) and
 * Evening Horizon (dark). Loaded AFTER eximin.css — it re-points the design
 * tokens eximin.css already reads and overrides the few component styles
 * that hardcode the old Quartz-era look. Remove this one <link> to fall
 * back to the previous theme.
 */

/* ============================================================ */
/* 0. SAP "72" typeface (served locally, official SAP font)     */
/* ============================================================ */
@font-face {
    font-family: "72";
    src: url("../fonts/72/72-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "72";
    src: url("../fonts/72/72-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "72";
    src: url("../fonts/72/72-Semibold.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "72";
    src: url("../fonts/72/72-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================ */
/* 1. Morning Horizon tokens (light)                            */
/* ============================================================ */
:root {
    /* Brand / interaction (sapBrandColor / sapButton_Emphasized_*) */
    --ex-primary: #0070f2;
    --ex-primary-hover: #0064d9;
    --ex-primary-active: #0057d2;
    --ex-primary-subtle: #ebf8ff;       /* sapList_SelectionBackgroundColor */
    --ex-secondary: #5b738b;

    /* Semantic (sapPositive/Critical/Negative/Informative) */
    --ex-success: #256f3a;
    --ex-warning: #e76500;
    --ex-danger: #d20a0a;
    --ex-info: #0070f2;

    /* Surfaces (sapBackgroundColor / sapTile_Background / sapList_BorderColor) */
    --ex-shell-bg: #f5f6f7;
    --ex-surface: #ffffff;
    --ex-surface-2: #f5f6f7;
    --ex-border: #e4e9f0;
    --ex-text: #1d2d3e;                 /* sapTextColor */
    --ex-text-muted: #556b82;           /* sapContent_LabelColor */

    /* Fiori shape language: pill-ish buttons, tight fields, soft cards */
    --ex-radius: 0.75rem;               /* cards / popovers */
    --ex-radius-sm: 0.5rem;             /* buttons / menu items */
    --ex-radius-field: 0.25rem;         /* inputs (sapField_BorderCornerRadius) */
    --ex-field-border: #556b82;         /* sapField_BorderColor */
    --ex-btn-border: #bcc3ca;           /* sapButton_BorderColor (standard button) */
    --ex-btn-text: #0064d9;             /* sapButton_TextColor */
    --ex-btn-hover-bg: #eaecee;         /* standard button hover */
    --ex-shell-icon: #475e75;           /* sapShell_InteractiveTextColor */

    /* Horizon tile shadow (sapContent_Shadow0/1) */
    --ex-shadow-sm: 0 0 0.125rem 0 rgba(34, 54, 73, 0.16), 0 0.125rem 0.25rem 0 rgba(34, 54, 73, 0.16);
    --ex-shadow: 0 0 0.125rem 0 rgba(34, 54, 73, 0.16), 0 0.25rem 0.5rem 0 rgba(34, 54, 73, 0.16);
    --ex-shadow-lg: 0 0.25rem 2rem 0 rgba(34, 54, 73, 0.24);

    --ex-font: "72", "72full", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --bs-primary: var(--ex-primary);
    --bs-primary-rgb: 0, 112, 242;
    --bs-success-rgb: 37, 111, 58;
    --bs-danger-rgb: 210, 10, 10;
    --bs-warning-rgb: 231, 101, 0;
    --bs-info-rgb: 4, 159, 154;
    --bs-link-color: #0064d9;
    --bs-link-hover-color: #0057d2;
    --bs-link-color-rgb: 0, 100, 217;
    --bs-link-hover-color-rgb: 0, 87, 210;

    /* SAP iconography is monochrome — collapse both icon accent cycles
       (sidebar + header) to the Horizon content color. */
    --ex-icon-1: #475e75; --ex-icon-2: #475e75; --ex-icon-3: #475e75; --ex-icon-4: #475e75;
    --ex-icon-5: #475e75; --ex-icon-6: #475e75; --ex-icon-7: #475e75; --ex-icon-8: #475e75;
    --ex-ic-1: #475e75; --ex-ic-2: #475e75; --ex-ic-3: #475e75; --ex-ic-4: #475e75;
    --ex-ic-5: #475e75; --ex-ic-6: #475e75; --ex-ic-7: #475e75; --ex-ic-8: #475e75;
}

/* ============================================================ */
/* 2. Evening Horizon tokens (dark)                             */
/* ============================================================ */
[data-bs-theme="dark"] {
    --ex-primary: #4db1ff;              /* sapLinkColor (dark) */
    --ex-primary-hover: #7ec6ff;
    --ex-primary-active: #91caff;
    --ex-primary-subtle: #0e2a46;
    --ex-shell-bg: #12171c;             /* sapBackgroundColor (dark) */
    --ex-surface: #1d232a;              /* sapTile_Background (dark) */
    --ex-surface-2: #161b20;
    --ex-border: #2e3742;
    --ex-text: #eaecee;
    --ex-text-muted: #8396a8;
    --ex-field-border: #8396a8;
    --ex-btn-border: #4f5d6e;
    --ex-btn-text: #4db1ff;
    --ex-btn-hover-bg: #2a323b;
    --ex-shell-icon: #a9b4be;

    --ex-success: #57d36e;
    --ex-warning: #ff9a2b;
    --ex-danger: #ff5d5d;
    --ex-info: #4db1ff;

    --ex-shadow-sm: 0 0 0.125rem 0 rgba(0, 0, 0, 0.5), 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
    --ex-shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.55), 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.55);
    --ex-shadow-lg: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.65);

    --bs-primary-rgb: 77, 177, 255;
    --bs-link-color: #4db1ff;
    --bs-link-hover-color: #7ec6ff;
    --bs-link-color-rgb: 77, 177, 255;
    --bs-link-hover-color-rgb: 126, 198, 255;

    --ex-icon-1: #a9b4be; --ex-icon-2: #a9b4be; --ex-icon-3: #a9b4be; --ex-icon-4: #a9b4be;
    --ex-icon-5: #a9b4be; --ex-icon-6: #a9b4be; --ex-icon-7: #a9b4be; --ex-icon-8: #a9b4be;
    --ex-ic-1: #a9b4be; --ex-ic-2: #a9b4be; --ex-ic-3: #a9b4be; --ex-ic-4: #a9b4be;
    --ex-ic-5: #a9b4be; --ex-ic-6: #a9b4be; --ex-ic-7: #a9b4be; --ex-ic-8: #a9b4be;
}

/* ============================================================ */
/* 3. Shell bar — flat white Horizon shell                      */
/* ============================================================ */
.ex-header {
    background: var(--ex-surface);
    border-bottom: 1px solid var(--ex-border);
    box-shadow: none;
}
.ex-header .ex-icon-btn { color: var(--ex-shell-icon); }
.ex-header .ex-icon-btn:hover { background: var(--ex-btn-hover-bg); color: var(--ex-shell-icon); }
.ex-header .bi-moon-stars, .ex-header .bi-sun,
.ex-header .bi-bell, .ex-header .ex-search-icon { color: var(--ex-shell-icon); }
.ex-brand { font-weight: 600; }

/* Shell search: bordered pill, like the S/4HANA shell search field */
.ex-global-search .form-control {
    background: var(--ex-surface);
    border: 1px solid var(--ex-btn-border);
    border-radius: 1rem;
}
.ex-global-search .form-control:focus {
    border-color: var(--ex-primary);
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Joule-style assistant launcher: Horizon blue → grape gradient */
.ex-assistant-launcher { background: linear-gradient(135deg, #0070f2, #7858ff); }

.ex-avatar { background: #7858ff; font-weight: 600; }

/* ============================================================ */
/* 4. Side navigation — Fiori SideNavigation look               */
/* ============================================================ */
.ex-sidebar { border-right: 1px solid var(--ex-border); }
.ex-sidebar .ex-nav-link {
    border-left: 0;
    border-radius: var(--ex-radius-sm);
}
.ex-sidebar .ex-nav-link:hover { background: var(--ex-btn-hover-bg); color: var(--ex-text); }
.ex-sidebar .ex-nav-link:hover i { color: var(--ex-shell-icon); }
.ex-sidebar .ex-nav-link.active {
    background: var(--ex-primary-subtle);
    color: var(--ex-btn-text);
    border-left: 0;
    box-shadow: inset 0.1875rem 0 0 var(--ex-primary);
    font-weight: 600;
}
.ex-sidebar .ex-nav-link.active i { color: var(--ex-btn-text); }
/* Uniform monochrome icons override any remaining accent (SAP style) */
.ex-sidebar .ex-nav-link:hover i:not(.ex-caret),
.ex-sidebar .ex-nav-link.active i:not(.ex-caret) { filter: none; }
.ex-sidebar .ex-nav-label { color: var(--ex-text-muted); letter-spacing: 0.04em; }

/* ============================================================ */
/* 5. Cards & tiles — soft 0.75rem corners, Horizon shadow      */
/* ============================================================ */
.card {
    /* My Home 2302 refs: tiles/cards sit on a hairline border with a very
       soft shadow, not borderless floating panels. */
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow-sm);
    background-color: var(--ex-surface);
}
.card > .card-header {
    border-bottom: 1px solid var(--ex-border);
    background: transparent;
    font-weight: 600;
    /* My Home refs: card/panel titles are dark ("Purchasing Spend",
       "Serial Number Data") — blue is reserved for the variant-style
       elements (active tabs, links, form-section titles below). */
    color: var(--ex-text);
    border-top-left-radius: var(--ex-radius);
    border-top-right-radius: var(--ex-radius);
}
.card > .card-footer { border-top: 1px solid var(--ex-border); background: transparent; }

.ex-page-header .ex-page-title { font-weight: 600; }
.ex-stat-card .ex-stat-value { font-weight: 600; }
.ex-stat-card.border-start-accent { border-left: 3px solid var(--ex-primary); }

/* ============================================================ */
/* 6. Buttons — Fiori standard & emphasized                     */
/* ============================================================ */
.btn { border-radius: var(--ex-radius-sm); font-weight: 600; }
.btn:focus-visible { box-shadow: 0 0 0 0.125rem var(--ex-surface), 0 0 0 0.25rem var(--ex-primary); }

/* Emphasized */
.btn-primary {
    --bs-btn-bg: #0070f2;
    --bs-btn-border-color: #0070f2;
    --bs-btn-hover-bg: #0064d9;
    --bs-btn-hover-border-color: #0064d9;
    --bs-btn-active-bg: #0057d2;
    --bs-btn-active-border-color: #0057d2;
    --bs-btn-disabled-bg: #91c8f6;
    --bs-btn-disabled-border-color: #91c8f6;
}

/* Transparent button: borderless blue text, subtle hover — the Fiori toolbar
   action style (Fig. 10: "Revalue", "Enter Temporary Adjustment", "Related
   Apps"). All non-emphasized neutral actions get this treatment. */
.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--ex-btn-text);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--ex-btn-hover-bg);
    --bs-btn-hover-color: var(--ex-btn-text);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--ex-primary-subtle);
    --bs-btn-active-color: var(--ex-btn-text);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--ex-text-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Semantic buttons in Horizon hues */
.btn-success {
    --bs-btn-bg: #188918; --bs-btn-border-color: #188918;
    --bs-btn-hover-bg: #0f7d0f; --bs-btn-hover-border-color: #0f7d0f;
    --bs-btn-active-bg: #0c6e0c; --bs-btn-active-border-color: #0c6e0c;
}
.btn-danger {
    --bs-btn-bg: #d20a0a; --bs-btn-border-color: #d20a0a;
    --bs-btn-hover-bg: #b40a0a; --bs-btn-hover-border-color: #b40a0a;
    --bs-btn-active-bg: #a20808; --bs-btn-active-border-color: #a20808;
}
.btn-warning {
    --bs-btn-bg: #e76500; --bs-btn-border-color: #e76500; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #c85700; --bs-btn-hover-border-color: #c85700; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #b44e00; --bs-btn-active-border-color: #b44e00; --bs-btn-active-color: #fff;
}
.btn-outline-danger { --bs-btn-color: #d20a0a; --bs-btn-border-color: var(--ex-btn-border); --bs-btn-hover-bg: #ffeaea; --bs-btn-hover-color: #aa0808; --bs-btn-hover-border-color: var(--ex-btn-border); }
.btn-outline-success { --bs-btn-color: #256f3a; --bs-btn-border-color: var(--ex-btn-border); --bs-btn-hover-bg: #f5fae5; --bs-btn-hover-color: #256f3a; --bs-btn-hover-border-color: var(--ex-btn-border); }
.btn-outline-warning { --bs-btn-color: #c35500; --bs-btn-border-color: var(--ex-btn-border); --bs-btn-hover-bg: #fff8d6; --bs-btn-hover-color: #c35500; --bs-btn-hover-border-color: var(--ex-btn-border); }
.btn-outline-info { --bs-btn-color: #0064d9; --bs-btn-border-color: var(--ex-btn-border); --bs-btn-hover-bg: #ebf8ff; --bs-btn-hover-color: #0064d9; --bs-btn-hover-border-color: var(--ex-btn-border); }
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #0070f2; --bs-btn-border-color: #0070f2; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #268df5; --bs-btn-hover-border-color: #268df5; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #4ba1f5; --bs-btn-active-border-color: #4ba1f5;
}
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-hover-bg: #3c1e1e; }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-hover-bg: #1c2e1c; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-hover-bg: #33270f; }
[data-bs-theme="dark"] .btn-outline-info { --bs-btn-hover-bg: #0e2a46; }

/* ============================================================ */
/* 7. Fields — Horizon input look                               */
/* ============================================================ */
.form-control, .form-select, textarea.form-control {
    border-radius: var(--ex-radius-field);
    border-color: var(--ex-field-border);
    background-color: var(--ex-surface);
    color: var(--ex-text);
}
.form-control:hover, .form-select:hover { border-color: var(--ex-primary); }
.form-control:focus, .form-select:focus {
    border-color: var(--ex-primary);
    box-shadow: 0 0 0 0.0625rem var(--ex-primary);
}
.input-group-text {
    border-radius: var(--ex-radius-field);
    border-color: var(--ex-field-border);
    background: var(--ex-surface-2);
    color: var(--ex-text-muted);
}
.form-check-input { border-color: var(--ex-field-border); }
.form-check-input:checked { background-color: var(--ex-primary); border-color: var(--ex-primary); }
.form-label { font-weight: 400; color: var(--ex-text-muted); }
.ex-content .form-label { font-weight: 400; color: var(--ex-text-muted); }
/* SAP forms carry no per-field icon colors — one quiet content color */
.ex-content .form-label i,
.form-label i { color: var(--ex-text-muted) !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--ex-field-border);
    border-radius: var(--ex-radius-field);
}

/* ============================================================ */
/* 8. Tables — Fiori responsive table                           */
/* ============================================================ */
.table { --bs-table-hover-bg: var(--ex-primary-subtle); --bs-table-border-color: var(--ex-border); }
.table > thead th,
table.dataTable > thead th {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 0.76rem;
    color: var(--ex-text-muted);
    border-bottom: 1px solid var(--ex-border);
    border-bottom-width: 1px;
}
.table > tbody td, table.dataTable > tbody td { border-color: var(--ex-border); }

div.dataTables_wrapper div.dataTables_filter input,
div.dt-container .dt-search input { border-radius: var(--ex-radius-field); border-color: var(--ex-field-border); }

.pagination {
    --bs-pagination-color: var(--ex-btn-text);
    --bs-pagination-border-color: var(--ex-border);
    --bs-pagination-hover-bg: var(--ex-btn-hover-bg);
    --bs-pagination-hover-color: var(--ex-btn-text);
    --bs-pagination-active-bg: var(--ex-primary);
    --bs-pagination-active-border-color: var(--ex-primary);
    --bs-pagination-focus-color: var(--ex-btn-text);
    --bs-pagination-focus-bg: var(--ex-btn-hover-bg);
}

/* ============================================================ */
/* 9. Tabs — Fiori icon tab bar (underline, no boxes)           */
/* ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--ex-border);
    gap: 0.25rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 0.1875rem solid transparent;
    border-radius: 0;
    color: var(--ex-text-muted);
    background: transparent;
    padding: 0.45rem 0.75rem;
}
.nav-tabs .nav-link:hover { color: var(--ex-text); border-bottom-color: var(--ex-btn-border); }
.nav-tabs .nav-link.active {
    color: var(--ex-btn-text);
    font-weight: 600;
    background: transparent;
    border-bottom-color: var(--ex-primary);
}
.nav-pills .nav-link { border-radius: var(--ex-radius-sm); color: var(--ex-text); }
.nav-pills .nav-link.active { background: var(--ex-primary); }

/* ============================================================ */
/* 10. Status semantics — Horizon value states                  */
/* ============================================================ */
.ex-status-pending   { background: #fff8d6; color: #c35500; }
.ex-status-approved,
.ex-status-completed { background: #f5fae5; color: #256f3a; }
.ex-status-rejected,
.ex-status-cancelled { background: #ffeaea; color: #aa0808; }
.ex-status-info,
.ex-status-in-progress { background: #d1efff; color: #0057d2; }
[data-bs-theme="dark"] .ex-status-pending   { background: #33270f; color: #ff9a2b; }
[data-bs-theme="dark"] .ex-status-approved,
[data-bs-theme="dark"] .ex-status-completed { background: #1c2e1c; color: #57d36e; }
[data-bs-theme="dark"] .ex-status-rejected,
[data-bs-theme="dark"] .ex-status-cancelled { background: #3c1e1e; color: #ff5d5d; }
[data-bs-theme="dark"] .ex-status-info,
[data-bs-theme="dark"] .ex-status-in-progress { background: #0e2a46; color: #4db1ff; }

/* Bootstrap contextual badges in Horizon hues */
.badge.text-bg-primary { background-color: #0070f2 !important; }
.badge.text-bg-success { background-color: #188918 !important; }
.badge.text-bg-danger  { background-color: #d20a0a !important; }
.badge.text-bg-warning { background-color: #e76500 !important; color: #fff !important; }
.badge.text-bg-info    { background-color: #0057d2 !important; color: #fff !important; }

/* Alerts as Fiori message strips */
.alert { border-radius: var(--ex-radius-sm); }
.alert-primary, .alert-info { --bs-alert-bg: #d1efff; --bs-alert-border-color: #0070f2; --bs-alert-color: #0f3a68; }
.alert-success { --bs-alert-bg: #f5fae5; --bs-alert-border-color: #256f3a; --bs-alert-color: #256f3a; }
.alert-warning { --bs-alert-bg: #fff8d6; --bs-alert-border-color: #e76500; --bs-alert-color: #8a4300; }
.alert-danger  { --bs-alert-bg: #ffeaea; --bs-alert-border-color: #d20a0a; --bs-alert-color: #aa0808; }
[data-bs-theme="dark"] .alert-primary, [data-bs-theme="dark"] .alert-info { --bs-alert-bg: #0e2a46; --bs-alert-border-color: #4db1ff; --bs-alert-color: #a6d5ff; }
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: #1c2e1c; --bs-alert-border-color: #57d36e; --bs-alert-color: #a6e5b0; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: #33270f; --bs-alert-border-color: #ff9a2b; --bs-alert-color: #ffcf99; }
[data-bs-theme="dark"] .alert-danger  { --bs-alert-bg: #3c1e1e; --bs-alert-border-color: #ff5d5d; --bs-alert-color: #ffb3b3; }

/* ============================================================ */
/* 11. Modals / dropdowns / popovers                            */
/* ============================================================ */
.modal-content { border: 0; border-radius: var(--ex-radius); box-shadow: var(--ex-shadow-lg); }
.dropdown-menu { border-color: var(--ex-border); border-radius: var(--ex-radius-sm); box-shadow: var(--ex-shadow); }
.dropdown-item:hover { background: var(--ex-btn-hover-bg); }
.dropdown-item:active { background: var(--ex-primary); }

/* ============================================================ */
/* 12. Login & error pages — S/4HANA-style entry                */
/* ============================================================ */
.ex-login-body { background: #f5f6f7; }
.ex-brand-panel {
    background:
        radial-gradient(1100px 600px at -10% 110%, rgba(120, 88, 255, 0.25), transparent 60%),
        radial-gradient(900px 520px at 115% -15%, rgba(0, 112, 242, 0.40), transparent 55%),
        linear-gradient(148deg, #00144a 0%, #002a86 52%, #0057d2 130%);
}
.ex-brand-title .accent { color: #4db1ff; }
.ex-card { border-radius: 1rem; box-shadow: var(--ex-shadow-lg); }
.ex-form-box .form-control { border-radius: var(--ex-radius-field); }
.ex-form-box .input-group-text { border-radius: var(--ex-radius-field) 0 0 var(--ex-radius-field); }
.ex-btn-signin { background: #0070f2; border-radius: var(--ex-radius-sm); }
.ex-btn-signin:hover { background: #0064d9; }
.ex-ai-chip { color: #5d36ff; background: #efeafd; }

body.ex-auth-page {
    background:
        radial-gradient(60rem 30rem at 110% -10%, rgba(120, 88, 255, 0.20), transparent 60%),
        radial-gradient(50rem 30rem at -10% 110%, rgba(0, 112, 242, 0.30), transparent 60%),
        linear-gradient(160deg, #00144a 0%, #002a86 55%, #0057d2 130%);
}
.ex-error-code { background: linear-gradient(135deg, #0070f2, #7858ff); -webkit-background-clip: text; background-clip: text; }

/* ============================================================ */
/* 13. Odds & ends                                              */
/* ============================================================ */
.ex-brand-mark { background: linear-gradient(135deg, #0070f2, #7858ff); }
.ex-live-indicator .ex-live-dot { background: #188918; }
.ex-wizard-steps .ex-wizard-step.done .ex-step-index { border-color: #188918; background: #188918; }
tr.ex-row-highlight > td:first-child { box-shadow: inset 3px 0 0 #e76500; }
:focus-visible { outline-color: var(--ex-primary); }

/* ============================================================ */
/* 14. 2408 reference alignment (news.sap.com 2408 screenshots) */
/* ============================================================ */

/* --- Horizontal spaces bar (Fiori launchpad spaces/pages) --- */
:root { --ex-spaces-h: 3rem; }
.ex-spaces {
    position: fixed;
    top: var(--ex-header-h);
    left: 0;
    right: 0;
    height: var(--ex-spaces-h);
    z-index: 1035;
    background: var(--ex-surface);
    border-bottom: 1px solid var(--ex-border);
    align-items: stretch;
    padding: 0 0.9rem;
    overflow: visible;
}
.ex-spaces-list {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* No overflow container here — it would clip the dropdown panels.
       Between 992–1280px the type compacts instead (below). */
}
.ex-space { display: flex; align-items: stretch; }
/* Launchpad space tabs: bold, dark, prominent — active is blue + thick underline */
.ex-space-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ex-text);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 0.1875rem solid transparent;
    border-top: 0.1875rem solid transparent; /* keeps the label optically centered */
}
.ex-space-link > i.bi:first-child { font-size: 0.95em; color: var(--ex-shell-icon); }
.ex-space-link:hover { color: var(--ex-btn-text); background: var(--ex-btn-hover-bg); }
.ex-space-link:hover > i.bi:first-child { color: var(--ex-btn-text); }
.ex-space-link.active,
.ex-space.dropdown:has(.show) > .ex-space-link {
    color: var(--ex-btn-text);
    font-weight: 700;
    border-bottom-color: var(--ex-primary);
}
.ex-space-link.active > i.bi:first-child,
.ex-space.dropdown:has(.show) > .ex-space-link > i.bi:first-child { color: var(--ex-btn-text); }
/* SAP shell tabs separate the label from the chevron with a hairline: "Purchasing | ⌄" */
.ex-space-link.dropdown-toggle::after { display: none; }
.ex-space-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--ex-btn-border);
    font-weight: 400;
}
.ex-space-caret .bi { font-size: 0.65em; color: var(--ex-shell-icon); }
.ex-space-link.active .ex-space-caret .bi,
.ex-space-link:hover .ex-space-caret .bi { color: var(--ex-btn-text); }

/* Compact range: keep all tabs on one row — drop icons and caret separators,
   the bold labels stay. (Must come AFTER the base rules above: equal
   specificity, so source order decides.) */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .ex-spaces { padding: 0 0.4rem; }
    .ex-spaces-list { gap: 0.1rem; }
    .ex-space-link { padding: 0 0.45rem; font-size: 0.76rem; gap: 0.3rem; }
    .ex-space-link > i.bi:first-child,
    .ex-space-caret { display: none; }
}

/* Mega panel: one column per menu group */
.ex-space-menu {
    display: none;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow-lg);
    max-width: min(92vw, 72rem);
    max-height: calc(100vh - var(--ex-header-h) - var(--ex-spaces-h) - 2rem);
    overflow: auto;
}
.ex-space-menu.show {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    /* A wrapped abs-pos flex container shrinks to one column otherwise. */
    width: max-content;
}
.ex-space-col { min-width: 11rem; max-width: 16rem; }
.ex-space-col-title {
    /* SAP-style group heading: blue and bold (user 2026-08-27, menu.png) */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ex-btn-text);
    margin-bottom: 0.4rem;
    white-space: nowrap;
}
.ex-space-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.45rem;
    margin-left: -0.45rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ex-text);
    text-decoration: none;
}
.ex-space-item > i.bi { font-size: 0.9rem; color: var(--ex-shell-icon); flex: 0 0 auto; }
.ex-space-item:hover { background: var(--ex-btn-hover-bg); color: var(--ex-btn-text); }
.ex-space-item:hover > i.bi { color: var(--ex-btn-text); }
/* SAP link hover: a thin blue line under the words (never the icon) */
.ex-space-item:hover .ex-space-item-label,
.ex-space-item:focus-visible .ex-space-item-label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: var(--ex-btn-text);
}
/* Current app highlighted like Fiori's list selection */
.ex-space-item.active {
    background: var(--ex-primary-subtle);
    color: var(--ex-btn-text);
    font-weight: 700;
    box-shadow: inset 0.1875rem 0 0 var(--ex-primary);
}
.ex-space-item.active > i.bi { color: var(--ex-btn-text); }

/* Shell geometry with the bar: content moves down, sidebar becomes a drawer */
@media (min-width: 992px) {
    body.ex-shell.ex-has-spaces { padding-top: calc(var(--ex-header-h) + var(--ex-spaces-h)); }
    body.ex-has-spaces .ex-main,
    body.ex-has-spaces.ex-sidebar-collapsed .ex-main { margin-left: 0; }
    body.ex-has-spaces .ex-sidebar {
        top: calc(var(--ex-header-h) + var(--ex-spaces-h));
        width: var(--ex-sidebar-w);
        transform: translateX(-100%);
        transition: transform 0.18s ease;
    }
    body.ex-has-spaces.ex-sidebar-drawer-open .ex-sidebar {
        transform: translateX(0);
        box-shadow: var(--ex-shadow-lg);
    }
    /* Drawer always shows full labels, never the icon-only rail */
    body.ex-has-spaces.ex-sidebar-collapsed .ex-sidebar .ex-nav-label,
    body.ex-has-spaces.ex-sidebar-collapsed .ex-sidebar .ex-nav-link span,
    body.ex-has-spaces.ex-sidebar-collapsed .ex-sidebar .ex-nav-link .ex-caret,
    body.ex-has-spaces.ex-sidebar-collapsed .ex-sidebar .ex-subnav.show { display: revert; }
    body.ex-has-spaces.ex-sidebar-collapsed .ex-sidebar .ex-nav-link {
        justify-content: flex-start; padding-left: 0.75rem; padding-right: 0.75rem;
    }
}

/* --- List report: dark regular column headers (Fig. 2 / Fig. 12) --- */
.table > thead th,
table.dataTable > thead th {
    color: var(--ex-text);
    font-weight: 400;
}

/* --- Object status: colored text, not pills (Fig. 2 status columns) --- */
.ex-status-badge {
    background: transparent !important;
    border: 0 !important;
    padding: 0;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 600;
}
.table .badge[class*="text-bg-"] {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 600;
}
.table .badge.text-bg-success { color: #188918 !important; }
.table .badge.text-bg-danger { color: #d20a0a !important; }
.table .badge.text-bg-warning { color: #c35500 !important; }
.table .badge.text-bg-info, .table .badge.text-bg-primary { color: #0064d9 !important; }
.table .badge.text-bg-secondary, .table .badge.text-bg-light, .table .badge.text-bg-dark { color: var(--ex-text-muted) !important; }
[data-bs-theme="dark"] .table .badge.text-bg-success { color: #57d36e !important; }
[data-bs-theme="dark"] .table .badge.text-bg-danger { color: #ff5d5d !important; }
[data-bs-theme="dark"] .table .badge.text-bg-warning { color: #ff9a2b !important; }
[data-bs-theme="dark"] .table .badge.text-bg-info, [data-bs-theme="dark"] .table .badge.text-bg-primary { color: #4db1ff !important; }

/* --- Large object-page title (Fig. 12) --- */
.ex-page-header .ex-page-title { font-size: 1.35rem; font-weight: 700; }

/* --- Joule-style assistant panel (Fig. 1) --- */
.ex-assistant-panel { border: 0; border-radius: 1rem; }
.ex-assistant-head {
    background: linear-gradient(120deg, #5d36ff, #7858ff);
    border-bottom: 0;
    color: #fff;
}
.ex-assistant-head .ex-assistant-sub { color: rgba(255, 255, 255, 0.8); }
.ex-assistant-head .btn-link { color: rgba(255, 255, 255, 0.9) !important; }
.ex-assistant-head .btn-link:hover { color: #fff !important; }

/* --- Shell avatar: light-blue disc with blue initials (Fig. 1) --- */
.ex-avatar { background: #d1efff; color: #0057d2; }
[data-bs-theme="dark"] .ex-avatar { background: #0e2a46; color: #4db1ff; }

/* ============================================================ */
/* 15. Fig. 10 alignment — object actions & form bifurcation    */
/* (news.sap.com 2408 Figure 10: revenue-recognition object     */
/* page — transparent text actions, neutral display groups)     */
/* ============================================================ */

/* Semantic outline buttons join the transparent-toolbar style:
   colored text, no border, subtle hover (Fiori transparent type). */
.btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-info {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Form section blocks: SAP groups are neutral — plain dark semibold
   title over the fields, no colored accent bar, no tinted header.
   (sap-section emits border-start/bg-*-subtle/text-* utilities, which
   are !important in Bootstrap, hence the !important overrides.) */
.ex-sap-section { border-left: 0 !important; }
.ex-sap-section > .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ex-border); /* hairline bifurcation under each section heading */
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
}
.ex-sap-section > .card-header .text-uppercase {
    text-transform: none !important;
    font-size: 1rem;
    color: var(--ex-btn-text); /* SAP-blue section heading (Fig. 10 "Standard") */
}
.ex-sap-section > .card-header i.bi { color: var(--ex-btn-text) !important; }
.ex-sap-section > .card-header .badge {
    background: transparent !important;
    color: var(--ex-text-muted) !important;
    border-color: var(--ex-border) !important;
}
.ex-sap-section > .card-body { padding-top: 0.4rem; }

/* SAP field labels carry a trailing colon (Fig. 10: "Company Code:") */
.form-label::after { content: ":"; }

/* ============================================================ */
/* 16. Section tab bar (Fig. 10 object-page tabs)               */
/* horizon.js renders sibling .ex-sap-section blocks as a Fiori */
/* icon-tab bar — selected tab blue + underline, others quiet.  */
/* ============================================================ */
.ex-section-tabs { margin-bottom: 1rem; }
.ex-section-tabs .nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
}
.ex-tabbed-section.ex-tab-hidden { display: none; }
/* The active tab carries the section title — drop the duplicate header */
.ex-tabbed-section > .card-header { display: none !important; } /* header emits d-flex (!important) */
.ex-tabbed-section > .card-body { padding-top: 1rem; }

/* ============================================================ */
/* 17. My Home / list-report alignment (community.sap.com refs: */
/* My Home 2302 Insights, Manage Material Serial Numbers 2302)  */
/* ============================================================ */

/* Insight-tile metrics: large LIGHT numerals ("3,93 K", "80.0 %"),
   not bold — the number carries size, the label carries weight. */
.ex-kpi-card .ex-kpi-value { font-size: 1.45rem; font-weight: 300; }
.ex-stat-card .ex-stat-value { font-weight: 300; }
.ex-gauge-card .ex-gauge-value { font-weight: 300; }

/* Dashboard section headings like "Insights" / "Tiles (6)": dark and
   bold, no uppercase tracking. (.ex-content prefix outranks the
   page-pushed .ex-dash-section-title rule that renders after the layer.) */
.ex-content .ex-dash-section-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ex-text);
}

/* Value-help affordance on searchable selects: quiet slate chevron/field
   look is already close; keep select2 height aligned with inputs. */
.select2-container--default .select2-selection--single { height: calc(2.25rem + 2px); }

/* ============================================================ */
/* 18. Add.png alignment — SAP filled-field form style          */
/* (user reference 2026-08-28: S/4HANA "New: Sales Contract")   */
/* ============================================================ */

:root {
    --ex-field-bg: #f2f3f5;          /* sapField_Background (filled) */
    --ex-field-bg-hover: #e9ebee;
}
[data-bs-theme="dark"] {
    --ex-field-bg: #232a31;
    --ex-field-bg-hover: #2a323b;
}

/* Fields: light filled body, underline only — no box border. */
.form-control, .form-select, textarea.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--ex-field-bg);
    border: 0;
    border-bottom: 1px solid var(--ex-field-border);
    border-radius: 0.25rem 0.25rem 0 0;
    font-size: 0.875rem;
}
.form-control:hover, .form-select:hover,
.select2-container--default .select2-selection--single:hover {
    background-color: var(--ex-field-bg-hover);
    border-bottom-color: var(--ex-primary);
}
/* Focus highlight: thick blue underline, no ring (Add.png). */
.form-control:focus, .form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    background-color: var(--ex-field-bg);
    border-bottom: 1px solid var(--ex-primary);
    box-shadow: inset 0 -1px 0 var(--ex-primary);
}
.form-control.is-invalid, .form-select.is-invalid {
    border-bottom-color: var(--ex-danger);
    box-shadow: inset 0 -1px 0 var(--ex-danger);
    background-image: none;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--ex-surface-2);
    border-bottom-style: dashed;   /* Add.png read-only "Address" style */
    opacity: 1;
}
.input-group-text {
    background: var(--ex-field-bg);
    border: 0;
    border-bottom: 1px solid var(--ex-field-border);
    border-radius: 0.25rem 0 0 0;
}

/* Labels: quiet, small, "Label:*" with the red asterisk AFTER the colon. */
.form-label { font-size: 0.8125rem; }
.form-label .ex-required { color: var(--ex-danger); font-weight: 600; }
.form-label:has(.ex-required)::after { content: ""; }
.form-label .ex-required::before { content: ":"; color: var(--ex-text-muted); font-weight: 400; }

/* Icon placement per Add.png: no label-side icons — affordances live
   INSIDE the field (calendar for dates, chevron/value-help for selects). */
.form-label > i.bi { display: none; }
input.ex-datepicker, input[type="date"].form-control {
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475e75' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.75rem;   /* SAP-small calendar glyph */
}
[data-bs-theme="dark"] input.ex-datepicker,
[data-bs-theme="dark"] input[type="date"].form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a9b4be' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}

/* Select2 details on the filled style */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ex-text); }
.select2-container--default .select2-selection--single { height: calc(2.25rem + 1px); }

/* Shell search keeps its pill look — exempt from the filled-field style. */
.ex-global-search .form-control {
    background: var(--ex-surface);
    border: 1px solid var(--ex-btn-border);
    border-radius: 1rem;
}
.ex-global-search .form-control:focus {
    border: 1px solid var(--ex-primary);
    box-shadow: 0 0 0 0.125rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Date fields: Add.png keeps the calendar INSIDE the field (right) — hide
   the input-group's leading icon box and restore the field's top radius
   (Bootstrap strips it for non-first children). */
.input-group:has(> .ex-datepicker) > .input-group-text { display: none; }
.input-group:has(> .ex-datepicker) > .ex-datepicker {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

/* The sap-section component emits border-primary/border-3 utilities; with
   cards now carrying a hairline border (My Home pass) those recolored the
   whole pane blue — pin section borders to the neutral hairline. */
.ex-sap-section, .ex-tabbed-section { border: 1px solid var(--ex-border) !important; }

/* ============================================================ */
/* 19. Add.png part 2 — filter/search fields + dropdown icons   */
/* ============================================================ */

/* Table search boxes and page-length selects join the filled style
   (both legacy and current DataTables wrappers), as do report filters. */
div.dataTables_wrapper div.dataTables_filter input,
div.dt-container .dt-search input,
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-length select,
.ex-report .dataTables_wrapper .dataTables_filter input {
    background-color: var(--ex-field-bg);
    border: 0;
    border-bottom: 1px solid var(--ex-field-border);
    border-radius: 0.25rem 0.25rem 0 0;
    color: var(--ex-text);
    padding: 0.375rem 0.75rem;
}
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dt-container .dt-search input:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dt-container .dt-length select:focus {
    background-color: var(--ex-field-bg);
    border-bottom-color: var(--ex-primary);
    box-shadow: inset 0 -1px 0 var(--ex-primary);
    outline: 0;
}

/* Plain dropdowns: slate chevron inside-right (Add.png header selects). */
.form-select,
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-length select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23475e75' stroke-width='1.3'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1'/%3E%3Cpath d='M10.5 2.5h-7a1 1 0 0 0-1 1v7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.8rem;   /* Add.png value-help glyph on every dropdown */
    padding-right: 2rem;
}
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dt-container .dt-length select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a9b4be' stroke-width='1.3'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1'/%3E%3Cpath d='M10.5 2.5h-7a1 1 0 0 0-1 1v7'/%3E%3C/svg%3E");
}

/* Searchable selects (select2) are the value-helps — they get Add.png's
   overlapping-squares icon instead of the default triangle. */
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23475e75' stroke-width='1.3'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1'/%3E%3Cpath d='M10.5 2.5h-7a1 1 0 0 0-1 1v7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.9rem;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a9b4be' stroke-width='1.3'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1'/%3E%3Cpath d='M10.5 2.5h-7a1 1 0 0 0-1 1v7'/%3E%3C/svg%3E");
}

/* Select2 dropdown search box inside the panel: filled style too. */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--ex-field-bg);
    border: 0;
    border-bottom: 1px solid var(--ex-field-border);
    border-radius: 0.25rem 0.25rem 0 0;
    color: var(--ex-text);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-bottom-color: var(--ex-primary);
    box-shadow: inset 0 -1px 0 var(--ex-primary);
    outline: 0;
}

/* ============================================================ */
/* 20. dashboard-kpi.png — SAP analytic-card anatomy for KPIs   */
/* ============================================================ */
.ex-kpi-card .ex-kpi-title { font-size: 0.8rem; font-weight: 600; color: var(--ex-text); }
.ex-kpi-card .ex-kpi-sub {
    font-size: 0.72rem;
    color: var(--ex-text-muted);
    min-height: 1em;
}
.ex-kpi-card .ex-kpi-value { font-size: 1.5rem; font-weight: 300; line-height: 1.15; }
.ex-kpi-card .ex-kpi-delta { font-size: 0.8rem; font-weight: 600; }
.ex-kpi-card .ex-kpi-ylabel,
.ex-kpi-card .ex-kpi-xaxis,
.ex-kpi-card .ex-kpi-legend { color: var(--ex-text-muted); }
/* Blue refresh footer, like SAP's "↻ 3 hr. ago" */
.ex-kpi-card .ex-kpi-foot {
    font-size: 0.72rem;
    color: var(--ex-btn-text);
    margin-top: 0.35rem;
}
/* Section headers count their tiles, like "Tiles (6)" */
.ex-dash-count { font-weight: 400; color: var(--ex-text-muted); }

/* Native date inputs painted the browser's indicator NEXT TO our SAP
   calendar — keep ONE icon: the native indicator turns into an invisible
   click target sitting exactly over the SAP glyph. */
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
input[type="month"].form-control::-webkit-calendar-picker-indicator {
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: -0.4rem;
    cursor: pointer;
}