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

   THEME RULE: the shopper apps (WebInstance / MobileInstance) are LIGHT; the
   staff apps (WebBusinessInstance / MobileBusinessInstance) are DARK. This file
   was previously a copy of the shopper palette, which is why the staff web app
   drifted light and stopped matching MobileBusinessInstance.
   ============================================================ */

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

:root {
    /* Dark surfaces (Ink = the page itself, Surface = a card on top of it). */
    --ink: #0E0E12;
    --ink-soft: #1A1814;
    --ink-deep: #060503;
    --surface: #15151B;
    --surface-raised: #1D1D24;
    --hairline: #26262E;
    --hairline-soft: #1B1B22;

    /* Text ON those dark surfaces. --text is the default body colour. */
    --text: #FFFFFF;
    --muted: #A8A8B0;
    --muted-soft: #6A6A72;

    /* `--sand*` are kept as DARK aliases so shared component CSS that still asks
       for a "recessed" or "hairline" tone stays legible instead of going white. */
    --sand: #1A1A20;
    --sand-deep: #23232B;
    --sand-line: #2E2E38;

    --yellow: #FFD60A;
    --yellow-deep: #FFB400;
    --orange: #FF8A00;
    --pink: #E0398C;
    --hot: #E8553C;
    --mint: #7AFFCB;
    --success: #13A88B;
    --success-soft: #0F2A24;
    --danger: #E8553C;
    --danger-soft: #3A1612;
    --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(--ink);
    color: var(--text);
}

/* Bold display type (headlines, brand wordmark, stat numbers) — same split as the shopper app. */
h1, h2,
.brand-name, .mbrand-name, .dbrand-name, .brand-headline,
.form-title, .auth-title,
.stat-n,
.section-title, .dmain-title, .sel-name,
.app-name, .wf-name {
    font-family: var(--font-display);
}

#app { min-height: 100vh; }

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

/* ── Splash / loading screen (shown until Blazor boots) ──────────
   Dark, matching the rest of the staff portal, with the logo sitting INSIDE the
   spinner ring rather than the ring sitting above a separate mark. */
.loading-screen {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    height: 100vh;
    background: linear-gradient(150deg, #141210 0%, #1A1A20 55%, #0E0E12 100%);
    color: var(--text);
    font-weight: 600;
}
/* The ring and the mark share one box; the ring spins, the logo 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(255,255,255,0.14);
    border-top-color: var(--yellow);
    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; }
/* On dark, the primary action is the brand yellow with dark ink text — an ink-on-ink button
   would disappear into the page. */
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
/* GhostButton (ported from Styles.xaml) */
.btn-ghost {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--hairline); font-size: 14px; height: 46px;
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-raised); }

/* ── 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(--text);
}
.field:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,214,10,0.12); }
.field::placeholder { color: var(--muted-soft); }

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

/* ── Error banner ────────────────────────────────────────────── */
.error-banner {
    background: var(--danger-soft); border: 1px solid var(--hot);
    border-radius: 10px; padding: 10px 12px;
    color: #FFB199; 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(--text);
    border: 1px solid transparent;
}
.pill.active { background: var(--yellow); color: var(--ink); }

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

/* ── Centered auth card (Register / Forgot / Validate) ───────── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.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(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 22px; }
.auth-title { font-size: 26px; font-weight: 600; letter-spacing: -0.4px; color: var(--text); }
.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: var(--mint); font-weight: 600; font-size: 13px; }
.link-center { text-align: center; font-size: 13px; color: var(--muted); }
.link-strong { color: var(--yellow); font-weight: 600; cursor: pointer; }

/* Full-height centred loading state used by the app/workflow hosts. */
.host-loading { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }

/* ── 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; }