html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ---- Brand tokens -------------------------------------------------------- */
:root {
    --sp-purple: #4B2E83;
    --sp-purple-dark: #351C5E;
    --sp-purple-mid: #7250B5;
    --sp-purple-soft: #EDE7F6;
    --sp-canvas: #F4F2F8;
    --sp-surface: #ffffff;
    --sp-text: #1F1633;
    --sp-muted: #6B6580;
    --sp-line: #E4DEF0;
    --sp-success: #0F766E;
    --dxbl-primary: #4B2E83;
    --bs-primary: #4B2E83;
}

body {
    color: var(--sp-text);
    background: var(--sp-canvas);
}

/* ---- Header: brand bar, without leaking white text into menus ------------ */
.header {
    background: linear-gradient(120deg, var(--sp-purple-dark) 0%, var(--sp-purple) 46%, var(--sp-purple-mid) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(53, 28, 94, 0.22);
    color: #ffffff;
}

.header > .header-left-side,
.header > .header-right-side > [role="heading"],
.header > .header-right-side .dxbl-toolbar,
.header .btn-hamburger,
.header .xaf-back {
    color: #ffffff !important;
}

.header .btn-hamburger {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.header .header-right-side > .d-flex .dxbl-btn,
.header .header-right-side .dxbl-toolbar .dxbl-btn {
    color: #ffffff !important;
    background: transparent !important;
    border-color: transparent !important;
}

.header .header-right-side > .d-flex .dxbl-btn svg,
.header .header-right-side .dxbl-toolbar .dxbl-btn svg,
.header .btn-hamburger svg,
.header svg {
    fill: currentColor !important;
}

.header > .header-right-side > [role="heading"] img.dxbl-image,
.header > .header-right-side > [role="heading"] .xaf-caption-icon {
    filter: brightness(0) invert(1);
}

.header .badge,
.header .dxbl-badge {
    color: var(--sp-purple) !important;
    background-color: #ffffff !important;
}

/* Popovers that happen to stay inside the header must keep dark text. */
.header .dxbl-dropdown-body,
.header .dxbl-popup,
.header .dxbl-popup-content,
.header .dxbl-menu,
.header .dxbl-context-menu,
.header .dxbl-list-box {
    color: var(--sp-text) !important;
    filter: none !important;
}

.header .dxbl-dropdown-body *,
.header .dxbl-popup-content *,
.header .dxbl-menu *,
.header .dxbl-list-box * {
    color: var(--sp-text) !important;
    fill: currentColor !important;
    filter: none !important;
}

.header-logo {
    flex-shrink: 0;
    width: 148px;
    height: 44px;
    background-color: #ffffff;
    background-image: url('../images/summitpointe-logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-clip: content-box;
    padding: 4px 10px;
    -webkit-mask: none;
    mask: none;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar {
    background: #fbfafd !important;
    border-right: 1px solid var(--sp-line);
}

.sidebar .about-info {
    color: var(--sp-muted);
    font-size: 12px;
    padding: 12px 16px;
}

.xaf-sidebar .dxbl-treeview-item-selected,
.sidebar .dxbl-treeview-item.dxbl-selected,
.sidebar .dxbl-listbox-item.dxbl-selected,
.sidebar .dxbl-accordion-item-header:has(.dxbl-selected) {
    background: var(--sp-purple-soft) !important;
    color: var(--sp-purple) !important;
    border-radius: 8px;
}

/* ---- Canvas / toolbars --------------------------------------------------- */
.main-content {
    background-color: var(--sp-canvas) !important;
}

.main-toolbar {
    background: transparent !important;
    border: none !important;
    padding: 8px 16px 0 !important;
}

.main-toolbar .dxbl-btn,
.header-toolbar .dxbl-btn {
    border-radius: 8px !important;
}

.dxbl-text-edit,
.dxbl-combobox,
.dxbl-date-edit,
.dxbl-spin-edit,
.dxbl-memo-edit {
    border-radius: 8px !important;
}

/* ---- Form cards ---------------------------------------------------------- */
body:not(.sp-dashboard) .dxbl-fl-group.dxbl-fl-gd,
.app:not(.xaf-view-HomeDashboard_DetailView) .dxbl-fl-group.dxbl-fl-gd {
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(75, 46, 131, 0.07);
    overflow: hidden;
    margin-bottom: 14px;
}

.app:not(.xaf-view-HomeDashboard_DetailView) .dxbl-fl-group.dxbl-fl-gd .dxbl-group-header {
    background: linear-gradient(180deg, #faf8fd, #f3f0fa);
    border-bottom: 1px solid #eeeaf6;
    padding: 12px 18px;
}

.app:not(.xaf-view-HomeDashboard_DetailView) .dxbl-fl-group.dxbl-fl-gd .dxbl-group-header .dxbl-text {
    color: var(--sp-purple) !important;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.2px;
}

/* ---- Requisition entry (timesheet-style: header fields, one grid) ------ */
.app.xaf-view-Requisition_DetailView .dxbl-static-text,
.app.xaf-view-Requisition_DetailView .xaf-static-text {
    display: block;
    background: #f3eef9;
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    padding: 10px 14px;
    color: #3d2a6b;
    font-size: 13.5px;
    line-height: 1.45;
    margin: 4px 8px 12px;
}

/* Flatten stacked XAF cards so header fields read as one form. */
.app.xaf-view-Requisition_DetailView .dxbl-fl-group.dxbl-fl-gd {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 4px;
    overflow: visible;
}
.app.xaf-view-Requisition_DetailView .dxbl-fl-group.dxbl-fl-gd .dxbl-group-header {
    background: transparent;
    border: none;
    padding: 8px 8px 4px;
}
.app.xaf-view-Requisition_DetailView .dxbl-fl-group.dxbl-fl-gd .dxbl-group-header .dxbl-text {
    color: var(--sp-text) !important;
    font-size: 16px;
    font-weight: 700;
}

.app.xaf-view-Requisition_DetailView .main-toolbar {
    padding: 8px 12px 4px !important;
}
.app.xaf-view-Requisition_DetailView .main-toolbar .dxbl-btn {
    font-weight: 600;
    border-radius: 8px !important;
}
.app.xaf-view-Requisition_DetailView .main-toolbar .dxbl-btn[title*="vendor catalog"] {
    background: var(--sp-purple) !important;
    color: #fff !important;
    border-color: var(--sp-purple) !important;
}
.app.xaf-view-Requisition_DetailView .main-toolbar .dxbl-btn[title*="Send this requisition"] {
    background: #e86b1a !important;
    color: #fff !important;
    border-color: #e86b1a !important;
}

/* Line-item grid: dark header like the timesheet table. */
.app.xaf-view-Requisition_DetailView .dxbl-grid {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e3e8ec;
}
.app.xaf-view-Requisition_DetailView .dxbl-grid .dxbl-grid-header,
.app.xaf-view-Requisition_DetailView .dxbl-grid .dxbl-grid-header-row,
.app.xaf-view-Requisition_DetailView .dxbl-grid th {
    background: #351C5E !important;
    color: #fff !important;
    font-weight: 600;
}
.app.xaf-view-Requisition_DetailView .dxbl-grid th .dxbl-btn,
.app.xaf-view-Requisition_DetailView .dxbl-grid .dxbl-grid-header-filter,
.app.xaf-view-Requisition_DetailView .dxbl-grid .dxbl-grid-filter-icon {
    display: none !important;
}
.app.xaf-view-Requisition_DetailView .dxbl-grid .dxbl-text-edit,
.app.xaf-view-Requisition_DetailView .dxbl-grid .dxbl-spin-edit {
    border: none !important;
    background: transparent !important;
}
.app.xaf-view-Requisition_DetailView .dxbl-fl-item .dxbl-spin-btns {
    display: none !important;
}

/* ---- Logon --------------------------------------------------------------- */
.logon-template-header {
    background: linear-gradient(120deg, var(--sp-purple-dark) 0%, var(--sp-purple) 50%, var(--sp-purple-mid) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(53, 28, 94, 0.22);
}

.logon-template-header .header-logo {
    margin: 8px 0;
}

.logon-template-body {
    background: var(--sp-canvas);
}

.logon-main.card {
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(75, 46, 131, 0.12);
    overflow: hidden;
}

.logon-main .card-header {
    background: #faf8fd;
    color: var(--sp-purple);
    font-weight: 600;
    border-bottom: 1px solid var(--sp-line);
}

.logon-toolbar .dxbl-btn {
    border-radius: 8px !important;
}

/* ---- Dashboard widgets ------------------------------------------------ */
body.sp-dashboard .main-toolbar,
.app.xaf-view-HomeDashboard_DetailView .main-toolbar {
    border: none !important;
    background: transparent !important;
    padding-left: 16px;
}

body.sp-dashboard .dxbl-fl-group.dxbl-fl-gd,
.app.xaf-view-HomeDashboard_DetailView .dxbl-fl-group.dxbl-fl-gd {
    background: transparent;
    border: none;
    box-shadow: none;
}

.sp-dash-welcome {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--sp-text);
    padding: .25rem .5rem 1rem;
}

.sp-dash {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .25rem .5rem 1rem;
}

.sp-kpi {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 280px;
    text-align: left;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-left: 4px solid var(--sp-purple);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 4px 14px rgba(53, 28, 94, .08);
    transition: transform .12s ease, box-shadow .12s ease;
}
.sp-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(53, 28, 94, .14);
}
.sp-kpi.accent-purple { border-left-color: var(--sp-purple); }
.sp-kpi.accent-blue { border-left-color: #2563eb; }
.sp-kpi.accent-gold { border-left-color: #d97706; }
.sp-kpi.accent-teal { border-left-color: #0f766e; }
.sp-kpi.accent-green { border-left-color: #15803d; }

.sp-kpi .kpi-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sp-muted);
    margin-bottom: .35rem;
    font-weight: 600;
}
.sp-kpi .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sp-purple);
    line-height: 1.1;
}
.sp-kpi .kpi-hint {
    margin-top: .45rem;
    font-size: .78rem;
    color: var(--sp-muted);
}