/* ── Base ──────────────────────────────────────────────────────────── */
:root {
    --flp-accent: #60a5fa;
    --flp-canvas: #f3f4f6;
    --flp-selected: #4f46e5;
    --flp-shell: #1f2937;
    --flp-shell-hover: #4b5563;
    --flp-text: #1f2937;
    --sapFontFamily: Arial, Helvetica, sans-serif !important;
}

html { font-size: 80%; }
html, body, .sapUiBody { margin: 0; padding: 0; height: 100%; background: var(--flp-canvas); }

.flpPage .sapMBtnInner,
.flpPage .sapMText,
.flpPage .sapMTitle,
.flpPage .sapMGT,
.flpPage .sapMGTHdrTxt,
.flpPage .sapMGTSubHdrTxt {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ── FLP Header ────────────────────────────────────────────────────── */
.flpHeader.sapMBar {
    background: var(--flp-shell) !important;
    border-bottom: 2px solid var(--flp-accent) !important;
    box-sizing: border-box;
    height: 4rem !important;
}

.flpHeaderTitle.sapMTitle { color: #fff !important; }

.flpHeader .sapMBarLeft { height: 100%; left: 0; }

.flpLogo.sapMImg {
    display: block;
    height: 2.125rem;
    margin-left: 0.25rem;
    object-fit: contain;
    width: 3.75rem;
}

/* Header page-tab buttons */
.flpHeaderTabs.sapMHBox { align-items: stretch; margin-left: 0.25rem; }

.flpHeaderTab.sapMBtn .sapMBtnInner {
    color: #f9fafb !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    padding: 0 0.875rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    height: 100%;
}
.flpHeaderTab.sapMBtn:hover .sapMBtnInner,
.flpHeaderTab.sapMBtn.flpHeaderTabActive .sapMBtnInner {
    color: #fff !important;
}
.flpHeaderTab.sapMBtn:hover .sapMBtnInner {
    background: var(--flp-shell-hover) !important;
    border-radius: 0.5rem !important;
}
.flpHeaderTab.sapMBtn.flpHeaderTabActive .sapMBtnInner {
    background: transparent !important;
    box-shadow: none !important;
}

/* Pipe divider between header tabs */
.flpHeaderDivider.sapMBtn {
    pointer-events: none;
    min-width: 1px !important;
    width: 1px !important;
    align-self: center;
}
.flpHeaderDivider.sapMBtn .sapMBtnInner {
    width: 1px !important; min-width: 1px !important;
    height: 1.25rem !important; padding: 0 !important;
    background: #6b7280 !important;
    border: none !important; border-radius: 0 !important;
}

/* Close button */
.flpHeader .sapMBarRight {
    align-items: center;
    display: flex;
    height: 100%;
    top: 0;
}
.flpCloseBtn.sapMBtn .sapMBtnIcon { color: #fff !important; }

/* ── Sub-header — white strip, IconTabHeader inside ─────────────────── */
.flpSubHeader.sapMBar {
    background: #fff !important;
    border-bottom: 1px solid #d1d5db !important;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    height: 3rem !important;
    min-height: 3rem;
    padding: 0 !important;
}

/* Stretch Bar contentLeft to fill width */
.flpSubHeader .sapMBarLeft { width: 100%; padding: 0 1rem; }

/* IconTabHeader resets inside the Bar */
.flpSubHeader .sapMITH {
    background: transparent !important;
    border-bottom: none !important;
    height: 3rem !important;
}
.flpSubHeader .sapMITH .sapMITBHead { background: transparent !important; padding-left: 0; }

/* UI5's Page reserves standard 44px slots; these offsets match our custom bars. */
.flpPage.sapMPageWithHeader > section { top: 4rem; }
.flpPage.sapMPageWithHeader.sapMPageWithSubHeader > section { top: 7rem; }
.flpPage.sapMPageWithHeader.sapMPageWithSubHeader.flpEmbeddedMode > section { top: 4rem; }

/* ── Scrollable content ─────────────────────────────────────────────── */
.flpScrollArea .sapMScrollContainerScroll { background: var(--flp-canvas) !important; }

.flpContent { padding: 0.75rem; box-sizing: border-box; }
@media (min-width: 600px)  { .flpContent { padding: 1.25rem 2.625rem; } }
@media (min-width: 1024px) { .flpContent { padding: 1.5rem 3rem; } }

/* ── Group headings ─────────────────────────────────────────────────── */
.flpSection { margin-bottom: 0.5rem; }

.flpGroupTitle.sapMTitle {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--flp-text) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 0.875rem !important;
}

.flpTileRow { gap: 0.75rem; row-gap: 0.75rem; }

/* ── GenericTile ────────────────────────────────────────────────────── */
.flpTile.sapMGT {
    background: #fff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 4px rgba(34,43,56,.12) !important;
    margin: 0 !important;
    cursor: pointer;
    height: 11.75rem !important;
    width: 11.75rem !important;
}
.flpTile.sapMGT:hover {
    box-shadow: 0 4px 14px rgba(34,43,56,.2) !important;
    transform: translateY(-2px);
    transition: box-shadow .15s, transform .15s;
}

/* ── Embedded application ──────────────────────────────────────────── */
.flpAppFrame {
    background: #fff;
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.flpHidden { display: none !important; }