/* ─── Golden Ratio (φ ≈ 1.618) Design Tokens ──────────────────────────────── */
:root {
    /* Spacing scale: base 4 × φⁿ (rounded) */
    --gr-space-2xs: 4px;
    --gr-space-xs:   6px;
    --gr-space-sm:   10px;
    --gr-space-md:   16px;
    --gr-space-lg:   26px;
    --gr-space-xl:   42px;
    --gr-space-2xl:  68px;
    --gr-space-3xl:  110px;

    /* Typography scale: base 12 × φⁿ */
    --gr-text-sm:   12px;
    --gr-text-md:   19px;
    --gr-text-lg:   31px;
    --gr-text-xl:   50px;

    /* Layout proportions */
    --gr-golden:     61.8%;
    --gr-minor:      38.2%;

    /* Component sizing */
    --gr-card-width:  420px;
    --gr-card-padding: 26px;
    --gr-modal-w:     618px;
    --gr-modal-h:     382px;
    --gr-btn-h:       40px;
    --gr-btn-w-min:   65px;

    /* Vertical rhythm */
    --gr-section-gap:    42px;
    --gr-subsection-gap: 26px;
    --gr-element-gap:    16px;
}

/* ─── Golden Ratio Spacing Utilities ─────────────────────────────────────── */
.gr-gap-xs  { gap: var(--gr-space-xs); }
.gr-gap-sm  { gap: var(--gr-space-sm); }
.gr-gap-md  { gap: var(--gr-space-md); }
.gr-gap-lg  { gap: var(--gr-space-lg); }
.gr-p-sm    { padding: var(--gr-space-sm); }
.gr-p-md    { padding: var(--gr-space-md); }
.gr-p-lg    { padding: var(--gr-space-lg); }
.gr-mb-md   { margin-bottom: var(--gr-space-md); }
.gr-mb-lg   { margin-bottom: var(--gr-space-lg); }

/* ─── Golden Ratio Layout: 61.8% / 38.2% Split ──────────────────────────── */
.gr-split         { display: flex; gap: var(--gr-space-md); }
.gr-split-main    { flex: 0 0 61.8%; min-width: 0; }
.gr-split-side    { flex: 0 0 38.2%; min-width: 0; }

/* ─── Golden Ratio Card ──────────────────────────────────────────────────── */
.gr-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: var(--gr-card-padding);
    max-width: var(--gr-card-width);
}

/* ─── Golden Ratio Typography ────────────────────────────────────────────── */
.gr-h1    { font-size: var(--gr-text-xl); font-weight: 700; line-height: 1.2; }
.gr-h2    { font-size: var(--gr-text-lg); font-weight: 600; line-height: 1.25; }
.gr-body  { font-size: var(--gr-text-md); line-height: 1.5; }
.gr-caption { font-size: var(--gr-text-sm); line-height: 1.4; color: #666; }

/* ─── Sale Drawer: Golden Split ──────────────────────────────────────────── */
.sale-golden-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sale-golden-main {
    flex: 1 1 61.8%;
    overflow-y: auto;
    padding: var(--gr-space-md);
}
.sale-golden-totals {
    flex: 0 0 auto;
    padding: var(--gr-space-md);
    border-top: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
}

/* ─── Form spacing ───────────────────────────────────────────────────────── */
.gr-form > * + * { margin-top: var(--gr-element-gap); }
.gr-form-section > * + * { margin-top: var(--gr-space-sm); }

/* ─── Global Reset & Font ─────────────────────────────────────────────────── */
html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ─── Login Page ──────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 1rem;
}

.mud-dark-theme .login-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.login-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.mud-dark-theme .login-card {
    background: #1e1e1e;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
}

.tenant-logo {
    max-height: 64px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.login-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* ─── Sale Drawer Panel ──────────────────────────────────────────────────── */
.sale-drawer-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    overflow: hidden;
}

/* Strip MudBlazor default panel padding */
.mud-tab-panel {
    padding: 0;
}

/* ─── Utility ────────────────────────────────────────────────────────────── */
.fw-semibold { font-weight: 600; }
.cursor-pointer { cursor: pointer; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

/* ─── Accessibility: focus ring ─────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #1976D2;
    outline-offset: 2px;
}

/* ─── High-contrast mode overrides ─────────────────────────────────────── */
@media (prefers-contrast: more) {
    .mud-button-filled {
        outline: 2px solid currentColor;
    }
}

/* ─── Global Background Image ──────────────────────────────────────────── */
.main-content-bg {
    position: relative;
}

.main-content-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('images/bg-fractal.jpg') center/cover no-repeat;
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
}

/* Dark theme — adjust opacity for darker background */
.mud-dark-theme .main-content-bg::before {
    opacity: 0.04;
}

/* Ensure content sits above the background */
.main-content-bg > * {
    position: relative;
    z-index: 1;
}

/* ─── Mobile Responsiveness ───────────────────────────────────────────── */
@media (max-width: 600px) {
    :root {
        --gr-card-width: 100%;
        --gr-card-padding: 16px;
        --gr-modal-w: 100%;
        --gr-modal-h: auto;
        --gr-section-gap: 24px;
        --gr-subsection-gap: 16px;
    }

    /* Stack the golden split vertically on mobile */
    .gr-split {
        flex-direction: column;
    }
    .gr-split-main,
    .gr-split-side {
        flex: 1 1 auto;
    }

    /* Login card — reduce padding on mobile */
    .login-card {
        padding: 1.5rem 1rem;
    }

    /* Sale drawer panel — use viewport-based height on mobile */
    .sale-drawer-panel {
        height: calc(100dvh - 100px);
    }

    /* Sale drawer — constrain to 85vw so overlay strip is always tappable */
    .mobile-drawer {
        width: 85vw !important;
    }

    /* Sale drawer panel — scrollable and height-adaptive on mobile */
    .sale-drawer-panel {
        height: auto !important;
        max-height: calc(100dvh - 100px);
        overflow-y: auto !important;
    }

    /* Compact sale inputs on mobile */
    .sale-golden-layout .mud-input-control {
        margin-bottom: 0;
    }

    /* MudDialog — full-width on xs (override MudBlazor default max-width) */
    .mud-dialog-xs-full.mud-dialog {
        margin: 8px;
    }

    /* Tables — reduce cell padding on mobile */
    .mud-table-cell {
        padding: 8px 6px;
    }
}