/* ============================================================
 * RentalApplication.ai — brand override layer.
 *
 * Loaded after the default Lotly tenant-app styles. Overrides only
 * the visible brand surface (palette, fonts, header, primary buttons).
 * The form layout and component structure remain identical to Lotly's
 * so application data flows back to apps_* tables unchanged.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap');

:root {
    --brand-primary:        #F5A028;
    --brand-primary-dark:   #E08A10;
    --brand-tint:           #FFF4E0;
    --brand-bg:             #FAF8F4;
    --brand-ink:            #2A2A2A;
    --brand-ink-soft:       #5A5450;
    --brand-line:           #EFE7DA;
    --brand-line-soft:      #F5EFE3;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--brand-bg) !important;
    color: var(--brand-ink);
}

h1, h2, h3, .heading, .stepper-form h2, .stepper-form h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}

/* Header logo block — RA.ai logo is wider than Lotly's, give it room */
.logo img { max-height: 36px; width: auto; }

/* Primary buttons inherit the brand palette */
.btn-primary, button.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, button.btn-primary:hover,
.btn-primary:focus, button.btn-primary:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px var(--brand-tint) !important;
}

/* Outline / secondary buttons */
.btn-outline-primary, .btn-link {
    color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--brand-tint) !important;
    color: var(--brand-primary-dark) !important;
}

/* Stepper / progress */
.stepper .step.active .circle,
.stepper .step.completed .circle,
.progress-bar {
    background-color: var(--brand-primary) !important;
}
.stepper .step.active .label { color: var(--brand-ink) !important; }

/* Form focus ring */
.form-control:focus, .input:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-tint) !important;
}

/* Links + accents */
a, .text-primary, .link-primary {
    color: var(--brand-primary-dark) !important;
}

/* Card / panel surfaces — softer, off-white */
.card, .panel, .stepper-form .card-body {
    border-color: var(--brand-line) !important;
    background: #fff;
}

/* Table / list separators */
.divider, .border-top, .border-bottom, hr {
    border-color: var(--brand-line) !important;
}

/* Logout button (chrome) */
.logo-col .btn-primary { padding: 8px 14px; font-size: 14px; border-radius: 999px; }

/* Toaster + small badges that echoed Lotly orange */
.toaster-info, .toaster-success { border-left-color: var(--brand-primary) !important; }