/* App-wide styles. Inline styles are not allowed by the Content-Security-Policy, so every layout tweak lives here.
   Colours only through SAP theme parameters (CSS variables of sap_horizon), so branding and dark themes keep working. */
html,
body {
    height: 100%;
    margin: 0;
}

/* ---- Application shell (view/App.view.xml) ---- */
.opShell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.opShell > .sapFShellBar {
    flex: 0 0 auto;
}

/* The shell bar draws the logo as a 32 x 32 px square and stretches it; keep the logo's own proportions instead. */
.opShell .sapFShellBar .sapFShellBarHomeIcon {
    width: auto !important;
    height: 2rem !important;
    max-height: 2rem;
    max-width: 10rem;
    object-fit: contain;
}

@media (max-width: 599px) {
    .opShell .sapFShellBar .sapFShellBarHomeIcon {
        max-width: 6rem;
    }
}

.opShellStrip {
    flex: 0 0 auto;
    margin: 0.25rem 0.5rem 0;
}

.opShellContent.sapMNav {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    position: relative;
}

.opMuted {
    color: var(--sapContent_LabelColor);
    font-size: var(--sapFontSmallSize);
}

/* Content that should not stretch over very wide screens (forms, wizards, detail pages). */
.opReadable {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.opNarrow {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Login / sign-in card ---- */
.opAuthBackground {
    min-height: 100%;
    box-sizing: border-box;
    padding: 2rem 1rem;
    background: var(--sapShell_Background);
}

.opAuthCard {
    width: 100%;
    max-width: 26rem;
    box-sizing: border-box;
    padding: 2rem 1.75rem;
    background: var(--sapGroup_ContentBackground);
    border-radius: var(--sapElement_BorderCornerRadius, 0.75rem);
    box-shadow: var(--sapContent_Shadow1);
}

/* Uploaded logos come in any shape (wide, square): fit them into the box without stretching. */
.opAuthLogo {
    display: block;
    width: auto;
    height: auto;
    max-height: 4.5rem;
    max-width: 100%;
    object-fit: contain;
}

.opAuthHeader {
    text-align: center;
}

.opAuthField {
    width: 100%;
    margin-bottom: 1rem;
}

.opAuthQr {
    align-self: center;
    border: 1px solid var(--sapGroup_ContentBorderColor);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: #fff;
}

.opCode {
    font-family: var(--sapFontMonospaceFamily, "Courier New", monospace);
    letter-spacing: 0.08em;
    word-break: break-all;
    user-select: all;
}

.opRecoveryCodes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    padding: 0.75rem;
    border: 1px dashed var(--sapGroup_ContentBorderColor);
    border-radius: 0.5rem;
}

/* ---- Section cards (content blocks on detail and settings pages) ---- */
.opSection {
    background: var(--sapGroup_ContentBackground);
    border: 1px solid var(--sapGroup_ContentBorderColor);
    border-radius: var(--sapElement_BorderCornerRadius, 0.75rem);
    margin-bottom: 1rem;
    overflow: hidden;
}

.opSectionTitle {
    padding: 0.75rem 1rem 0;
}

/* ---- Home (administration) tiles ---- */
.opTileGroupTitle {
    margin: 1rem 0 0.5rem;
}

/* Phones: two tiles per row in a grid instead of one 176 px tile per row. */
@media (max-width: 599px) {
    .opTiles {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .opTiles > .sapMGT.OneByOne {
        width: auto;
        height: 9rem;
        margin: 0 !important;
    }
}

/* ---- KPI chips in page headers ---- */
.opKpi {
    min-width: 8rem;
    margin: 0 1.5rem 0.5rem 0;
}

.opKpiValue {
    font-size: var(--sapFontHeader3Size);
    font-weight: bold;
}

/* ---- Order form: phone cards ---- */
.opLineCard.sapMLIB {
    border: none;
    background: transparent;
    padding: 0;
}

.opLineCardBody {
    margin: 0.375rem 0.5rem;
    padding: 0.75rem 0.875rem;
    background: var(--sapTile_Background, var(--sapGroup_ContentBackground));
    border: 1px solid var(--sapTile_BorderColor, var(--sapGroup_ContentBorderColor));
    border-radius: var(--sapTile_BorderCornerRadius, 0.75rem);
    box-shadow: var(--sapContent_Shadow0);
}

.opLineCardBody .sapMPanel .sapMPanelContent {
    padding-left: 0;
    padding-right: 0;
}

.opLineCardRow {
    min-height: 1.75rem;
}

.opLineCardRow > .sapMLabel {
    flex: 0 1 55%;
    color: var(--sapContent_LabelColor);
}

.opLineCardRow > *:last-child {
    text-align: right;
}

.opLineCards.sapMList {
    background: transparent;
}

.opFormSummary {
    padding: 0.5rem 1rem 0.25rem;
}

/* Barcode scan dialog (model/scanner.js) */
.opScanVideo {
    display: block;
    width: 100%;
    max-height: 60vh;
    background: #000;
}

/* Layout designer: phone preview at phone width */
.opPreviewPhone {
    max-width: 24rem;
    border: 1px solid var(--sapList_BorderColor);
    border-radius: 0.5rem;
}

/* One-time temporary password: easy to read out, no confusion between similar characters */
.opPassword {
    font-family: "Courier New", monospace;
    letter-spacing: 0.1em;
    user-select: all;
}

.opKpiValue .sapMObjectNumberText {
    font-size: var(--sapFontHeader4Size);
}