/*!
 * Pavana — SAP Horizon theme layer (horizon.css)
 * ------------------------------------------------------------------
 * Restyles the portal to the SAP Fiori "Horizon" design language used by
 * SAP S/4HANA Public Cloud and SAP Ariba in the browser (Morning Horizon,
 * light). Loaded AFTER pavana.css — it re-points the design tokens that
 * pavana.css already reads and overrides the component styles that
 * hardcode the previous Inter/Outfit look.
 *
 * Reference implementation: /var/www/html/eximin (public/assets/css/horizon.css).
 * Remove this single <link> from layouts/app.blade.php to fall back.
 */

/* ============================================================ */
/* 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                                    */
/* ============================================================ */
:root {
    /* Brand / interaction (sapBrandColor / sapButton_Emphasized_*) */
    --primary: #0070f2;
    --primary-light: #0064d9;
    --primary-dark: #0057d2;
    --primary-subtle: #ebf8ff;          /* sapList_SelectionBackgroundColor */
    --accent: #0064d9;                  /* SAP iconography is monochrome/blue, not orange */

    /* Semantic value states (sapPositive/Critical/Negative/Informative) */
    --hz-positive: #256f3a;
    --hz-positive-bg: #f5fae5;
    --hz-critical: #c35500;
    --hz-critical-bg: #fff8d6;
    --hz-negative: #aa0808;
    --hz-negative-bg: #ffeaea;
    --hz-informative: #0057d2;
    --hz-informative-bg: #d1efff;
    --hz-neutral: #556b82;
    --hz-neutral-bg: #eaecee;

    /* Surfaces (sapBackgroundColor / sapTile_Background / sapList_BorderColor) */
    --bg: #f5f6f7;
    --card-bg: #ffffff;
    --surface: #ffffff;
    --border: #e4e9f0;
    --text: #1d2d3e;                    /* sapTextColor */
    --text-muted: #556b82;              /* sapContent_LabelColor */
    --muted: #eaecee;                   /* standard-button hover / quiet fill */

    /* Shell */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e4e9f0;
    --sidebar-active: #ebf8ff;
    --hz-shell-icon: #475e75;           /* sapShell_InteractiveTextColor */
    --hz-btn-text: #0064d9;             /* sapButton_TextColor */
    --hz-btn-border: #bcc3ca;           /* sapButton_BorderColor */
    --hz-field-border: #556b82;         /* sapField_BorderColor */
    --hz-field-bg: #f2f3f5;             /* sapField_Background (filled) */
    --hz-field-bg-hover: #e9ebee;

    /* Fiori shape language */
    --radius: 0.75rem;                  /* tiles / cards / popovers */
    --radius-sm: 0.5rem;                /* buttons / menu items */
    --hz-radius-field: 0.25rem;         /* inputs (sapField_BorderCornerRadius) */

    /* Horizon elevation (sapContent_Shadow0/1/2) */
    --shadow-sm: 0 0 0.125rem 0 rgba(34,54,73,.16), 0 0.125rem 0.25rem 0 rgba(34,54,73,.16);
    --shadow:    0 0 0.125rem 0 rgba(34,54,73,.16), 0 0.25rem 0.5rem 0 rgba(34,54,73,.16);
    --shadow-lg: 0 0.25rem 2rem 0 rgba(34,54,73,.24);

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

    /* Bootstrap 5.3 (loaded from CDN by the layout) */
    --bs-primary: #0070f2;
    --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: 0,87,210;
    --bs-link-color: #0064d9;
    --bs-link-hover-color: #0057d2;
    --bs-link-color-rgb: 0,100,217;
    --bs-link-hover-color-rgb: 0,87,210;
    --bs-body-font-family: var(--hz-font);
    --bs-border-radius: var(--radius-sm);
    --bs-border-color: #e4e9f0;

    /* ---- Aliases for token names the Blade views reference inline ----
       These were never declared in pavana.css, so every element using
       them rendered with no value (transparent backgrounds, black text).
       Pointing them at the Horizon palette fixes those spots and keeps
       the inline styles on-theme. */
    --card: var(--card-bg);
    --surface2: #f5f6f7;
    --border-base: var(--border);
    --text-dark: var(--text);
    --text-heading: var(--text);
    --success: #188918;
    --danger: #d20a0a;
    --warning: #e76500;
    --info: #0070f2;
}

/* ============================================================ */
/* 2. Typography — SAP 72 everywhere                            */
/* ============================================================ */
body,
button, input, select, textarea,
.pavana-input, .pavana-select, .pavana-select-f, .pavana-textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hz-font);
}
/* Outfit was the display face — Horizon uses one family at every size */
.sidebar-logo-text, .kpi-value, .auth-heading,
.auth-hero-logo-name, .auth-mobile-logo-name {
    font-family: var(--hz-font);
    letter-spacing: 0;
}
/* Fiori insight tiles: the numeral carries size, not weight */
.kpi-value { font-weight: 300; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
a { color: var(--hz-btn-text); }

/* ============================================================ */
/* 3. Shell bar (topbar) — flat white Horizon shell             */
/* ============================================================ */
.pavana-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
.topbar-title { font-weight: 600; color: var(--text); }
.topbar-btn { color: var(--hz-shell-icon); border-radius: var(--radius-sm); }
.topbar-btn:hover { background: var(--muted); color: var(--hz-shell-icon); }
.topbar-notif-dot { background: #d20a0a; }
.topbar-divider { background: var(--border); }

/* Shell avatar: light-blue disc with blue initials */
.user-chip { background: transparent; border-radius: var(--radius-sm); }
.user-chip:hover { background: var(--muted); }
.user-avatar {
    background: #d1efff;
    border: 0;
    color: #0057d2;
    font-weight: 600;
}
.user-info-name { font-weight: 600; color: var(--text); }
.user-info-role { color: var(--text-muted); }

/* Toolbar actions are transparent-type buttons: blue text, no border */
.topbar-logout { color: var(--hz-btn-text); font-weight: 600; border-radius: var(--radius-sm); }
.topbar-logout:hover { background: var(--muted); color: var(--hz-btn-text); }

/* ============================================================ */
/* 4. Side navigation — Fiori SideNavigation                    */
/* ============================================================ */
.pavana-sidebar { border-right: 1px solid var(--border); background: var(--sidebar-bg); }
.sidebar-header { border-bottom: 1px solid var(--border); }
.sidebar-logo-text { color: var(--text); font-weight: 700; }

.nav-item, .nav-parent-toggle { border-radius: var(--radius-sm); color: var(--text-muted); }
.nav-item:hover, .nav-parent-toggle:hover { background: var(--muted); color: var(--text); }
.nav-item:hover .nav-icon, .nav-parent-toggle:hover .nav-icon { color: var(--hz-shell-icon); }

.nav-item.active {
    background: var(--primary-subtle);
    color: var(--hz-btn-text);
    font-weight: 600;
    box-shadow: inset 0.1875rem 0 0 var(--primary);
}
/* SAP iconography is monochrome — no per-item accent hue */
.nav-icon { color: var(--hz-shell-icon); }
.nav-item.active .nav-icon,
.nav-parent-toggle.active .nav-icon { color: var(--hz-btn-text); }
.nav-parent-toggle.active { color: var(--hz-btn-text); font-weight: 600; }
.nav-parent.open .nav-parent-toggle .nav-chevron { color: var(--hz-shell-icon); }
.nav-parent-toggle .nav-chevron { color: var(--hz-shell-icon); }
.nav-submenu .nav-item { color: var(--text-muted); }
.nav-submenu .nav-item.active { color: var(--hz-btn-text); }

/* Per-module icon accents (pavana.css tail) collapse to Horizon slate */
.sidebar-nav .nav-icon,
.sidebar-nav .nav-item i,
.sidebar-nav .nav-parent-toggle i { color: var(--hz-shell-icon); }
.sidebar-nav .nav-item.active i:not(.nav-chevron),
.sidebar-nav .nav-parent-toggle.active i:not(.nav-chevron) { color: var(--hz-btn-text); }

.sidebar-overlay { background: rgba(34,54,73,.35); }
.sidebar-close-btn, .topbar-hamburger { color: var(--hz-shell-icon); border-radius: var(--radius-sm); }

/* ============================================================ */
/* 5. Cards & tiles — hairline border, soft Horizon shadow      */
/* ============================================================ */
.pavana-card, .kpi-card, .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.pavana-card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}
.pavana-card-header h2, .pavana-card-header h3 { color: var(--text); font-weight: 600; }
.pavana-card-header i { color: var(--hz-shell-icon); }

/* Insight tiles: monochrome icon, quiet label, light numeral */
.kpi-card:hover { box-shadow: var(--shadow); }
.kpi-icon {
    background: transparent !important;
    color: var(--hz-shell-icon) !important;
    border-radius: var(--radius-sm);
    font-size: 1.15rem;
}
.kpi-label { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; color: var(--text); }
.kpi-value { color: var(--text); }
.kpi-sub { color: var(--text-muted); }
.kpi-trend { border-radius: var(--hz-radius-field); }
.kpi-trend.up   { background: var(--hz-positive-bg); color: var(--hz-positive); }
.kpi-trend.down { background: var(--hz-negative-bg); color: var(--hz-negative); }

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

/* Emphasized */
.btn-primary-pavana { background: #0070f2; color: #fff; border: 1px solid #0070f2; }
.btn-primary-pavana:hover { background: #0064d9; border-color: #0064d9; }
.btn-primary-pavana:active { background: #0057d2; border-color: #0057d2; }

/* Transparent type: blue text, no border, quiet hover (Fiori toolbar action) */
.btn-secondary-pavana, .btn-outline-pavana {
    background: transparent;
    color: var(--hz-btn-text);
    border: 1px solid transparent;
}
.btn-secondary-pavana:hover, .btn-outline-pavana:hover {
    background: var(--muted);
    color: var(--hz-btn-text);
    border-color: transparent;
}
.btn-success-pavana {
    background: transparent; color: var(--hz-positive); border: 1px solid transparent;
}
.btn-success-pavana:hover { background: var(--hz-positive-bg); color: var(--hz-positive); }
.btn-danger-pavana {
    background: transparent; color: #d20a0a; border: 1px solid transparent;
}
.btn-danger-pavana:hover { background: var(--hz-negative-bg); color: var(--hz-negative); }

.btn-icon-pavana {
    background: transparent;
    border: 1px solid transparent;
    color: var(--hz-shell-icon);
    border-radius: var(--radius-sm);
}
.btn-icon-pavana:hover { background: var(--muted); border-color: transparent; color: var(--hz-btn-text); }
.btn-danger-icon { border-color: transparent; color: #d20a0a; }
.btn-danger-icon:hover { background: var(--hz-negative-bg); border-color: transparent; color: var(--hz-negative); }

/* Bootstrap buttons (CDN) in Horizon hues */
.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;
}
.btn-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    --bs-btn-bg: transparent; --bs-btn-color: var(--hz-btn-text);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--muted); --bs-btn-hover-color: var(--hz-btn-text);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--primary-subtle); --bs-btn-active-color: var(--hz-btn-text);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}
.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; }
.btn-outline-danger  { --bs-btn-bg: transparent; --bs-btn-color: #d20a0a; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--hz-negative-bg); --bs-btn-hover-color: var(--hz-negative); --bs-btn-hover-border-color: transparent; }
.btn-outline-success { --bs-btn-bg: transparent; --bs-btn-color: var(--hz-positive); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--hz-positive-bg); --bs-btn-hover-color: var(--hz-positive); --bs-btn-hover-border-color: transparent; }
.btn-outline-warning { --bs-btn-bg: transparent; --bs-btn-color: var(--hz-critical); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--hz-critical-bg); --bs-btn-hover-color: var(--hz-critical); --bs-btn-hover-border-color: transparent; }
.btn-outline-info    { --bs-btn-bg: transparent; --bs-btn-color: var(--hz-btn-text); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--primary-subtle); --bs-btn-hover-color: var(--hz-btn-text); --bs-btn-hover-border-color: transparent; }

/* ============================================================ */
/* 7. Fields — SAP filled-field style (S/4HANA form input)      */
/*    Light filled body, underline only, no box border.         */
/* ============================================================ */
.pavana-input, .pavana-select-f, .pavana-textarea, .pavana-select,
.li-table .li-input,
.form-control, .form-select, textarea.form-control {
    background-color: var(--hz-field-bg);
    border: 0;
    border-bottom: 1px solid var(--hz-field-border);
    border-radius: var(--hz-radius-field) var(--hz-radius-field) 0 0;
    color: var(--text);
}
.pavana-input:hover, .pavana-select-f:hover, .pavana-textarea:hover,
.pavana-select:hover, .li-table .li-input:hover,
.form-control:hover, .form-select:hover {
    background-color: var(--hz-field-bg-hover);
    border-bottom-color: var(--primary);
}
/* Focus: thick blue underline, no ring */
.pavana-input:focus, .pavana-select-f:focus, .pavana-textarea:focus,
.pavana-select:focus, .li-table .li-input:focus,
.form-control:focus, .form-select:focus {
    background-color: var(--hz-field-bg);
    border-bottom: 1px solid var(--primary);
    box-shadow: inset 0 -1px 0 var(--primary);
    outline: 0;
}
.pavana-input:disabled, .pavana-input[readonly],
.pavana-select-f:disabled, .pavana-textarea[readonly],
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--bg);
    border-bottom-style: dashed;
    opacity: 1;
}
/* Labels: quiet, sentence case, trailing colon (Fiori form label) */
.pavana-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    font-weight: 400;
    color: var(--text-muted);
}
.pavana-label::after { content: ":"; }
.form-label { font-weight: 400; color: var(--text-muted); font-size: .8125rem; }

/* Value-help chevron inside the field, right (SAP dropdown affordance) */
.pavana-select, .pavana-select-f, .form-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.55rem center;
    background-size: 0.8rem;
    padding-right: 1.9rem;
}
/* Calendar glyph inside date fields, and one icon only */
input[type="date"].pavana-input, input[type="date"].form-control,
input[type="datetime-local"].pavana-input, input[type="datetime-local"].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;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0; margin: 0 -0.4rem 0 0; padding: 0;
    width: 1.4rem; height: 1.4rem; cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* Search field keeps the SAP shell-search pill, exempt from filled style */
.pavana-search {
    background: var(--surface);
    border: 1px solid var(--hz-btn-border);
    border-radius: 1rem;
}
.pavana-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 0.125rem rgba(0,112,242,.25); }
.pavana-search i { color: var(--hz-shell-icon); }
.pavana-search input {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.pavana-search input:hover, .pavana-search input:focus {
    background: transparent; border: 0; box-shadow: none;
}

/* ============================================================ */
/* 8. Tables — Fiori responsive table / list report             */
/* ============================================================ */
.pavana-table thead th, .li-table thead th {
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: .72rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.pavana-table tbody tr, .li-table tbody tr { border-bottom: 1px solid var(--border); }
.pavana-table tbody tr:hover { background: var(--primary-subtle); }
.pavana-table .td-mono { font-family: var(--hz-font); font-weight: 600; color: var(--hz-btn-text); }
.pavana-table .td-value { color: var(--text); font-weight: 600; }
.li-total-bar { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }

.table { --bs-table-hover-bg: var(--primary-subtle); --bs-table-border-color: var(--border); }
.table > thead th { font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--border); }
.pagination {
    --bs-pagination-color: var(--hz-btn-text);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--muted);
    --bs-pagination-hover-color: var(--hz-btn-text);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
}

/* ============================================================ */
/* 9. Tabs — Fiori icon tab bar (underline, no boxes)           */
/* ============================================================ */
.pavana-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.pavana-tab {
    border-bottom: 0.1875rem solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    margin-bottom: -1px;
    font-weight: 600;
}
.pavana-tab:hover { background: transparent; color: var(--text); border-radius: 0; border-bottom-color: var(--hz-btn-border); }
.pavana-tab.active { color: var(--hz-btn-text); border-bottom-color: var(--primary); font-weight: 700; }
.pavana-tab i { color: inherit; }

.nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 0.1875rem solid transparent; border-radius: 0;
    color: var(--text-muted); background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--hz-btn-border); }
.nav-tabs .nav-link.active { color: var(--hz-btn-text); font-weight: 600; background: transparent; border-bottom-color: var(--primary); }
.nav-pills .nav-link { border-radius: var(--radius-sm); color: var(--text); }
.nav-pills .nav-link.active { background: var(--primary); }

/* ============================================================ */
/* 10. Status semantics — Horizon value states                  */
/*     Tinted chips with the Fiori corner radius, not pills.    */
/* ============================================================ */
.badge-pavana, .pavana-badge, [class^="badge-"], [class*=" badge-"] {
    border-radius: var(--hz-radius-field);
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 7px;
}

/* Positive */
.badge-approved, .badge-active, .badge-awarded, .badge-delivered,
.badge-paid, .badge-gr_completed, .badge-completed, .badge-validated
{ background: var(--hz-positive-bg); color: var(--hz-positive); border-color: #a9d966; }

/* Critical */
.badge-pending, .badge-under_review, .badge-partial,
.badge-pending_approval, .badge-flagged
{ background: var(--hz-critical-bg); color: var(--hz-critical); border-color: #f5d13c; }

/* Negative */
.badge-rejected, .badge-validation_failed
{ background: var(--hz-negative-bg); color: var(--hz-negative); border-color: #ffb3b3; }

/* Informative */
.badge-confirmed, .badge-published, .badge-submitted, .badge-po_raised,
.badge-sent, .badge-in_transit, .badge-in-transit,
.badge-payment_initiated, .badge-ocr_processing, .badge-evaluated
{ background: var(--hz-informative-bg); color: var(--hz-informative); border-color: #91c8f6; }

/* Neutral */
.badge-draft, .badge-cancelled, .badge-registered
{ background: var(--hz-neutral-bg); color: var(--hz-neutral); border-color: var(--hz-btn-border); }

/* Status dots in Horizon value hues */
.dot-approved,.dot-active,.dot-delivered,.dot-paid,.dot-gr_completed,.dot-awarded,
.dot-po_raised,.dot-completed { background: #188918; }
.dot-pending,.dot-submitted,.dot-under_review,.dot-pending_approval { background: #e76500; }
.dot-rejected,.dot-cancelled,.dot-flagged { background: #d20a0a; }
.dot-draft,.dot-registered { background: #8396a8; }
.dot-confirmed,.dot-published,.dot-sent,.dot-in_transit,
.dot-evaluated,.dot-payment_initiated,.dot-ocr_processing { background: #0070f2; }

/* Bootstrap contextual badges */
.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; }

/* Priority badges follow the same value states */
.priority-high, .priority-urgent { background: var(--hz-negative-bg); color: var(--hz-negative); }
.priority-medium { background: var(--hz-critical-bg); color: var(--hz-critical); }
.priority-low { background: var(--hz-neutral-bg); color: var(--hz-neutral); }

/* ============================================================ */
/* 11. Message strips (alerts) — Fiori MessageStrip             */
/* ============================================================ */
.pavana-alert, .alert {
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
}
.pavana-alert-success, .alert-success { background: var(--hz-positive-bg); border-color: #256f3a; color: var(--hz-positive); }
.pavana-alert-error, .pavana-alert-danger, .alert-danger { background: var(--hz-negative-bg); border-color: #d20a0a; color: var(--hz-negative); }
.pavana-alert-warning, .alert-warning { background: var(--hz-critical-bg); border-color: #e76500; color: #8a4300; }
.pavana-alert-info, .alert-info, .alert-primary { background: var(--hz-informative-bg); border-color: #0070f2; color: #0f3a68; }

/* ============================================================ */
/* 12. Dialogs / modals — neutral Fiori dialog header           */
/* ============================================================ */
.pavana-modal {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.pavana-modal-backdrop { background: rgba(34,54,73,.4); }
.pavana-modal-header {
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}
.pavana-modal-header h3 { color: var(--text); font-weight: 600; font-size: .95rem; }
.pavana-modal-header i { color: var(--hz-shell-icon); }
.pavana-modal-close {
    background: transparent;
    color: var(--hz-shell-icon);
    border-radius: var(--radius-sm);
}
.pavana-modal-close:hover { background: var(--muted); color: var(--text); }
.pavana-modal-footer { border-top: 1px solid var(--border); background: transparent; }

.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }
.dropdown-menu { border-color: var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.dropdown-item:hover { background: var(--muted); }

/* ============================================================ */
/* 13. Process flow / lifecycle — Fiori process bar             */
/* ============================================================ */
.lifecycle-step { border-radius: var(--hz-radius-field); font-weight: 600; }
.lifecycle-step.done { background: var(--hz-positive-bg); color: var(--hz-positive); }
.lifecycle-step.current { background: var(--primary); color: #fff; }
.lifecycle-step.todo { background: var(--hz-neutral-bg); color: var(--text-muted); }

/* Empty states / loading */
.pavana-empty i { color: var(--hz-shell-icon); opacity: .35; }
.pavana-empty { color: var(--text-muted); }

/* Focus ring */
:focus-visible { outline-color: var(--primary); }

/* Scrollbars in Horizon slate */
::-webkit-scrollbar-thumb { background: #cdd4db; border-radius: 0.5rem; }
::-webkit-scrollbar-thumb:hover { background: #b0bac4; }

/* ============================================================ */
/* 14. Login / auth — S/4HANA-style entry page                  */
/*     (login.blade.php ships its own scoped tokens; these      */
/*      re-point them without touching that file's markup.)     */
/* ============================================================ */
.auth-root {
    --primary: #00144a;
    --primary-mid: #002a86;
    --accent: #0070f2;
    --accent-light: #0064d9;
    --amber: #e76500;
    --border: #e4e9f0;
    --text: #1d2d3e;
    --text-muted: #556b82;
    --bg: #f5f6f7;
}
body:has(.auth-root) { font-family: var(--hz-font); background: var(--surface); }

/* The three auth pages ship two different hero panels, and they must be
   themed apart — a blanket rule makes one of them unreadable:
     · login            → LIGHT panel, dark <img> logo, dark copy
     · forgot / reset   → DARK gradient, white inline-SVG mark, white copy
   Each rule is keyed on the mark it contains, so if :has() is unavailable
   the page simply keeps its own original (self-consistent) styling. */

/* --- Login: light Horizon panel (SAP Ariba-style entry) --- */
.auth-hero:has(.hero-logo img) {
    background:
        radial-gradient(38rem 26rem at 12% -10%, rgba(0,112,242,.10), transparent 62%),
        radial-gradient(34rem 24rem at 100% 108%, rgba(120,88,255,.09), transparent 62%),
        var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text);
}
.auth-hero:has(.hero-logo img) .hero-content { color: var(--text); }
/* Horizon has no amber: the gradient word becomes SAP blue */
.auth-hero:has(.hero-logo img) .hero-tagline { color: var(--text); font-weight: 700; }
.auth-hero:has(.hero-logo img) .hero-tagline span {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--hz-btn-text);
}
.auth-hero:has(.hero-logo img) .hero-desc { color: var(--text-muted); }
.auth-hero:has(.hero-logo img) .hero-pill {
    background: var(--surface);
    border: 1px solid var(--hz-btn-border);
    color: var(--text);
    border-radius: 1rem;
}
/* SAP iconography is monochrome — drop the alternating blue/amber cycle */
.auth-hero:has(.hero-logo img) .hero-pill i,
.auth-hero:has(.hero-logo img) .hero-pill:nth-child(2n) i { color: var(--hz-shell-icon); }
.auth-hero:has(.hero-logo img) .hero-stats {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.auth-hero:has(.hero-logo img) .hero-stat-item + .hero-stat-item { border-left-color: var(--border); }
.auth-hero:has(.hero-logo img) .hero-stat-num { color: var(--text); font-weight: 600; }
.auth-hero:has(.hero-logo img) .hero-stat-lbl { color: var(--text-muted); text-transform: none; letter-spacing: 0; }
/* The logo is dark artwork on transparency — keep its ground light and
   drop the heavy drop-shadow, which Horizon does not use on marks. */
.hero-logo img, .auth-mobile-logo img { filter: none !important; }

/* --- Forgot / reset: dark Horizon gradient (white SVG mark) --- */
.auth-hero:has(.hero-logo-mark) {
    background:
        radial-gradient(1100px 600px at -10% 110%, rgba(120,88,255,.25), transparent 60%),
        radial-gradient(900px 520px at 115% -15%, rgba(0,112,242,.40), transparent 55%),
        linear-gradient(148deg, #00144a 0%, #002a86 52%, #0057d2 130%);
    border-right: 0;
}
.auth-hero:has(.hero-logo-mark) .hero-glow { background: radial-gradient(circle, rgba(0,112,242,.22) 0%, transparent 70%); }
.auth-hero:has(.hero-logo-mark) .hero-logo-mark { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); }
.auth-hero:has(.hero-logo-mark) .hero-feature-icon { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.auth-hero:has(.hero-logo-mark) .hero-desc { color: rgba(255,255,255,.78); }

/* Legacy pavana.css auth markup (gradient hero + white copy) */
.auth-hero-badge {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.88);
    border-radius: 1rem;
}
.auth-hero-logo-icon { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); }

.auth-card-inner { border-radius: 1rem; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.auth-heading { color: var(--text); font-weight: 700; }
.auth-subheading { color: var(--text-muted); }
.auth-field label { color: var(--text-muted); font-weight: 400; }
.auth-input-wrap input {
    background: var(--hz-field-bg);
    border: 0;
    border-bottom: 1px solid var(--hz-field-border);
    border-radius: var(--hz-radius-field) var(--hz-radius-field) 0 0;
}
.auth-input-wrap input:focus {
    background: var(--hz-field-bg);
    border-bottom: 1px solid #0070f2;
    box-shadow: inset 0 -1px 0 #0070f2;
}
.auth-input-wrap .auth-icon, .auth-input-wrap .toggle-pwd { color: var(--hz-shell-icon); }
.auth-btn { background: #0070f2; border-radius: var(--radius-sm); font-weight: 600; }
.auth-btn:hover { background: #0064d9; }
.auth-footer a, .demo-chip:hover { color: var(--hz-btn-text); }
.demo-chip { border: 1px solid var(--hz-btn-border); border-radius: 1rem; }
.demo-chip:hover { border-color: #0070f2; background: var(--primary-subtle); }
.auth-mobile-logo-icon { background: #0070f2; border-radius: var(--radius-sm); }

/* ============================================================ */
/* 15. Footer                                                   */
/* ============================================================ */
#app-copyright-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--text-muted); }

/* ============================================================ */
/* 21. Dialogs — SAP Ariba-style centred pop-ups                */
/*                                                              */
/* Five detail/edit panels shipped as right-anchored slideovers. */
/* SAP Ariba presents this same work as a centred modal dialog,  */
/* so each is re-seated in the middle of the viewport.           */
/*                                                              */
/* The page <style> blocks arrive via @stack('styles'), i.e.     */
/* AFTER this file — every rule below is prefixed with `body` to */
/* out-specify them without resorting to !important.             */
/*                                                              */
/* Two structures exist, and `.va-slideover` means opposite      */
/* things in each (Pattern A container, Pattern B panel), so the */
/* selectors below are anchored on structure, never name alone.  */
/* ============================================================ */

/* ---- Pattern A — vendor-assessments, rfq, auctions ----------
   <div.X-slideover  fixed inset:0 flex>
     <div.X-so-backdrop  flex:1>          ← ate the space left of the panel
     <div.X-so-panel     640-680px>       ← pinned right by that flex:1
   The backdrop leaves the flow so the panel can take the centre. */
body .va-so-backdrop,
body .rfq-so-backdrop,
body .auc-so-backdrop {
    position: absolute;
    inset: 0;
    flex: none;
    background: rgba(34, 54, 73, .4);
}

/* `margin:auto` on a flex item centres it on BOTH axes and takes
   precedence over the container's justify-content/align-items, so the
   container itself never has to be touched. */
body .va-so-panel,
body .rfq-so-panel,
body .auc-so-panel {
    position: relative;
    margin: auto;
    width: min(60rem, 92vw);
    max-width: 92vw;
    max-height: 90vh;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    /* Dialogs grow from the centre; they no longer slide in from the edge. */
    transform: scale(.96);
    transition: transform .15s ease;
}
body .va-slideover.show .va-so-panel,
body .rfq-slideover.show .rfq-so-panel,
body .auc-slideover.show .auc-so-panel { transform: scale(1); }

/* ---- Pattern B — vendor-portal/rfqs, vendor-portal/auctions --
   <div.X-modal-backdrop  fixed flex justify-end>
     <div style="flex:1" onclick=close>   ← inline flex:1 pinned the panel right
     <div.X-slideover  height:100vh>
   Panel height is released so it wraps its content like a dialog. */
body .vr-modal-backdrop,
body .va-modal-backdrop {
    background: rgba(34, 54, 73, .4);
    padding: 1.5rem;
}
/* The click-to-close strip is inline-styled, so its flex:1 is the one
   place an !important is unavoidable. */
body .vr-modal-backdrop > div[onclick],
body .va-modal-backdrop > div[onclick] {
    position: absolute;
    inset: 0;
    flex: none !important;
}
body .vr-modal-backdrop > .vr-slideover,
body .va-modal-backdrop > .va-slideover {
    position: relative;
    margin: auto;
    width: min(60rem, 100%);
    height: auto;
    max-height: 90vh;
    /* Clip at the panel so the sticky header/footer scroll the -body
       child only — a panel-level scrollbar would double up with it. */
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* ---- Shared dialog trim ---- */
body .va-so-panel > div:first-child,
body .rfq-so-panel > div:first-child,
body .auc-so-panel > div:first-child,
body .vr-slideover-hdr,
body .va-slideover-hdr {
    border-radius: var(--radius) var(--radius) 0 0;
}
/* Fiori puts dialog actions on the right, emphasized action last. */
body .vr-slideover-footer,
body .va-slideover-footer { justify-content: flex-end; }

@media (max-width: 640px) {
    body .vr-modal-backdrop,
    body .va-modal-backdrop { padding: .75rem; }
    body .va-so-panel,
    body .rfq-so-panel,
    body .auc-so-panel { width: 96vw; max-width: 96vw; }
    body .va-so-panel,
    body .rfq-so-panel,
    body .auc-so-panel,
    body .vr-modal-backdrop > .vr-slideover,
    body .va-modal-backdrop > .va-slideover { max-height: 94vh; }
}

/* ============================================================ */
/* 22. Resizable / draggable dialogs (SAP Fiori dialog          */
/*     `resizable` + `draggable`)                               */
/*                                                              */
/* Several of these dialogs carry wide multi-column forms that   */
/* do not fit a fixed width, so the panel is user-sizable: the   */
/* native CSS resizer supplies the corner grip, and              */
/* horizon-dialog.js adds header dragging plus maximize.         */
/* ============================================================ */
body .va-so-panel,
body .rfq-so-panel,
body .auc-so-panel,
body .vr-modal-backdrop > .vr-slideover,
body .va-modal-backdrop > .va-slideover {
    resize: both;               /* needs overflow != visible, set above */
    min-width: 22rem;
    min-height: 14rem;
    /* Headroom for the grip to drag into — the smaller default size
       still comes from the width/max-height declared in section 21. */
    max-width: 98vw;
    max-height: 96vh;
}

/* Header doubles as the drag handle */
body .hz-dlg-drag { cursor: move; user-select: none; }
body .hz-dlg-drag button,
body .hz-dlg-drag input,
body .hz-dlg-drag select,
body .hz-dlg-drag a { cursor: pointer; user-select: auto; }

/* Maximized state — JS writes the sizes inline, this only trims the look */
body .hz-dlg-max { border-radius: var(--radius); }

/* The corner the native grip sits in, so it reads as an affordance */
body .va-so-panel::after,
body .rfq-so-panel::after,
body .auc-so-panel::after,
body .vr-modal-backdrop > .vr-slideover::after,
body .va-modal-backdrop > .va-slideover::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    pointer-events: none;       /* never intercept the real resizer */
    background:
        linear-gradient(135deg, transparent 50%, var(--hz-btn-border) 50%, var(--hz-btn-border) 62%, transparent 62%,
                        transparent 74%, var(--hz-btn-border) 74%, var(--hz-btn-border) 86%, transparent 86%);
    border-bottom-right-radius: var(--radius);
}
body .hz-dlg-max::after { display: none; }