/* ============================================================
   Mzanzi Connect — web design system
   Palette ported from MobileInstance/Resources/Styles/Colors.xaml
   ============================================================ */

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --ink: #101014;
    --ink-soft: #1A1814;
    --sand: #F4F0E6;
    --sand-deep: #EDE8DA;
    --sand-line: #E6E2D6;
    --surface: #FFFFFF;
    --yellow: #FFD60A;
    --yellow-deep: #FFB400;
    --orange: #FF8A00;
    --pink: #E0398C;
    --hot: #E8553C;
    --muted: #7C7C82;
    --muted-soft: #A4A199;
    --hairline: #F0ECDF;
    --success: #13A88B;
    --success-soft: #CDEDE2;
    --danger: #E8553C;
    --danger-soft: #FBE0DA;
    --font-body: 'Plus Jakarta Sans', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--sand);
    color: var(--ink);
}

/* Bold display type (headlines, numbers, brand wordmark) — matches the Mzanzi Connect mock,
   which sets these in Archivo while everything else stays in the body font. */
h1, h2,
.brand-name, .mbrand-name, .dbrand-name, .brand-headline, .mgreet-hi,
.form-title, .auth-title,
.stat-n, .cstat-n,
.section-title, .dmain-title,
.wallet-balance, .me-wallet-bal,
.featured-name, .chero-name {
    font-family: var(--font-display);
}

#app { min-height: 100vh; }

a { color: inherit; text-decoration: none; }

/* ── Loading screen (shown until Blazor boots) ───────────────── */
.loading-screen {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 45%, var(--pink) 100%);
    color: var(--ink);
    font-weight: 600;
}
/* Splash: the logo sits INSIDE the spinner ring; the ring spins, the mark does not. */
.splash-mark {
    position: relative;
    width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.splash-mark .loading-spinner {
    position: absolute; inset: 0;
    width: 96px; height: 96px;
    margin: 0;
}
.splash-logo {
    width: 52px; height: 52px;
    border-radius: 14px;
    object-fit: contain;
    background: #fff;
}
.loading-spinner {
    width: 48px; height: 48px;
    border: 4px solid rgba(16,16,20,0.18);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 18px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Blazor error UI ─────────────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--ink); color: #fff;
    padding: 12px 20px; z-index: 1000;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.3);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }
#blazor-error-ui .reload { color: var(--yellow); text-decoration: underline; }

/* ── Typography helpers ──────────────────────────────────────── */
.semibold { font-weight: 600; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border: none; cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 15px;
    border-radius: 14px; padding: 0 20px; height: 52px;
    transition: filter .15s, background-color .15s, transform .05s;
}
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary { background: var(--ink); color: var(--yellow); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.15); }
/* GhostButton (ported from Styles.xaml) */
.btn-ghost {
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--sand-line); font-size: 14px; height: 46px;
}
.btn-ghost:hover:not(:disabled) { background: var(--sand-deep); }

/* ── Form fields ─────────────────────────────────────────────── */
.field-label { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; display: block; }
.field {
    width: 100%; height: 48px;
    background: var(--sand); border: 1px solid var(--sand-line);
    border-radius: 12px; padding: 0 14px;
    font-family: inherit; font-size: 14px; color: var(--ink);
}
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,20,0.06); }
.field::placeholder { color: var(--muted-soft); }

/* ── Cards / surfaces ────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--sand-line);
    border-radius: 22px; padding: 22px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}

/* ── Error banner ────────────────────────────────────────────── */
.error-banner {
    background: var(--danger-soft); border: 1px solid var(--hot);
    border-radius: 10px; padding: 10px 12px;
    color: #7A1F0E; font-weight: 600; font-size: 13px;
}

/* ── Pill / chip ─────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    background: transparent; color: var(--ink);
    border: 1px solid transparent;
}
.pill.active { background: var(--ink); color: var(--yellow); }

/* ── Brand gradient (login hero) ─────────────────────────────── */
.brand-gradient {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 45%, var(--pink) 100%);
}

/* ── Modal overlay (GLOBAL) ──────────────────────────────────────
   Must live here, not in a page's <style>: CheckoutHost renders at the app ROOT and overlays
   whichever page is active, so styles scoped to one page simply don't exist when it opens. */
.overlay {
    position: fixed; inset: 0;
    background: rgba(10,10,13,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.overlay-card {
    background: var(--surface); border-radius: 22px; padding: 22px;
    width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.overlay-actions { display: flex; gap: 10px; }

/* Full-height centred loading state — used by Dashboard/Company/App/Profile/Workflow pages
   (it was referenced by all of them but never actually defined anywhere). */
.host-loading {
    min-height: 60vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   RENDERED-APP ISOLATION (.host-root)
   The suite apps are authored against MobileInstance's BlazorWebView host, which loads ONLY
   bootstrap + a tiny app.css. WebInstance additionally loads MudBlazor's stylesheet and this
   shell design system, and both leak into the rendered app. Everything below re-creates the
   mobile baseline inside .host-root and neutralises what mobile never sees.
   ══════════════════════════════════════════════════════════════════ */

/* THE fix for "the same app looks different on web".
   MudBlazor.min.css carries a BARE element rule:
       button { display:inline-flex; align-items:center; justify-content:center; … }
   The render engine authors cards as <button> flex COLUMNS (e.g. KasiCart's product card) and
   never emits align-items, so MudBlazor's `align-items:center` wins. In a column flex container
   that makes every child shrink-to-fit instead of stretching — so a child authored width:100%
   (the product thumbnail) collapses to its glyph and renders as a tiny badge instead of the
   full-width gradient banner. MobileInstance has no MudBlazor CSS, hence the divergence.
   Restore the default alignment for engine-authored buttons; MudBlazor's OWN components
   (.mud-*) are excluded so their intentional centring is untouched. */
.host-root button:not([class*="mud-"]) {
    align-items: normal;
    justify-content: normal;
}

/* This shell's design-system classes collide with the bootstrap class names the engine emits
   (it renders class="btn btn-primary", "form-control", …). Neutralise the shell's .card inside
   the app so bootstrap's own .card applies, exactly as it does on mobile. */
.host-root .card {
    background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}

/* MobileInstance's BlazorWebView host defines these globally in its index.html, so every suite app
   inherits them. Here they are SCOPED to the app host so the rendered app matches mobile exactly
   without the WebInstance shell (which has its own .btn/.card) being restyled. */
.host-root .btn {
    padding: 10px 20px; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    height: auto;
}
.host-root .btn-primary { background-color: #6366f1; color: #fff; }
.host-root .btn-primary:hover { background-color: #4f46e5; }
.host-root .form-control {
    width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 14px; transition: border-color 0.2s;
}
.host-root .form-control:focus {
    outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.pay-head { display: flex; align-items: center; justify-content: space-between; }
.pay-frame { width: 100%; height: 420px; border: 1px solid var(--sand-line); border-radius: 12px; }

/* ── Centered auth card (Register / Forgot / Validate) ───────── */
/* Metallic-white page; the card is white with beige fields inside. */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(160deg, #FFFFFF 0%, #F6F6F4 60%, #EFEFEC 100%); }
.auth-card { width: 100%; max-width: 460px; }
.auth-card .card { display: flex; flex-direction: column; gap: 16px; }
.auth-logo-row { display: flex; align-items: center; gap: 10px; }
.auth-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: var(--yellow); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 22px; }
.auth-logo-img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--sand-line); }
.auth-title { font-size: 26px; font-weight: 600; letter-spacing: -0.4px; }
.auth-sub { font-size: 13px; color: var(--muted); }
.success-banner { background: var(--success-soft); border: 1px solid var(--success); border-radius: 10px; padding: 10px 12px; color: #0C5A48; font-weight: 600; font-size: 13px; }
.link-center { text-align: center; font-size: 13px; color: var(--muted); }
.link-strong { color: var(--ink); font-weight: 600; cursor: pointer; }

/* ── Rendered-app frame ──────────────────────────────────────────────────────
   The render engine's page frame applies its own breakpoint padding (16/24/32px via
   DynamicPageRenderer). On the web hosts the shell around it already provides the gutter, so that
   padding stacked on top of ours and inset the app twice. Every suite authors its own shell padding
   anyway, so the frame contributes none here. */
.page-container.bp-mobile,
.page-container.bp-tablet,
.page-container.bp-desktop { padding: 0 !important; }