/* =========================================================
   The Lettings Hub Theme Overrides — based on brand guide
   Scope: .theme-lettingshub
   Load AFTER your base default.css (semantic.css)
   ========================================================= */

.theme-lettingshub {
    /* Brand palette */
    --primary: #349eb0;                   /* brand teal/blue */
    --primary-600: #2e8ca0;               /* slightly darker hover tone */
    --primary-ring: rgba(52, 158, 176, 0.35);
    --primary-ring-strong: rgba(52, 158, 176, 0.55);

    /* Secondary / text / neutrals */
    --secondary: #52646c;                 /* used for headings/subheadings */
    --body-text: #838d93;
    /* used for body copy */
    --accent: #f08ba9;                    /* warning/accent pink */
    --accent-600: #e46b92;
    --tab-accent: #e46b92;

    /* Backgrounds */
    --surface-bg: #ffffff;                /* main background */
    --surface-muted: #f5f5f5;             /* card/form field background */
    --border-muted: #e5e7eb;
    --divide-muted: #e5e7eb;
    --border-primary: #349eb0;            /* primary border (e.g. focus) */

    /* Success/Error (generic) */
    --success-bg: #ecfdf5;
    --success-text: #065f46;
    --success-border: #34d399;

    --error: #dc2626;
    --error-border: #ef4444;

    --warning: #fce8ee;
    --warning-border: color-mix(in srgb, var(--warning) 70%, black);
    --warning-text: #44091a;

    /* Confirmation/CTA areas */
    --confirm-bg-start: #349eb0;
    --confirm-bg-end: #f5f5f5;
    --loading-bar-bg: #e5e7eb;
    --loading-bar-color: var(--primary);
    --loading-text-color: var(--secondary);
    --confirmation-card-bg: rgba(255,255,255,0.96);
    --confirmation-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================================================
   Layout / Backgrounds
   ========================================================= */
.theme-lettingshub .bg-muted-light { background: var(--surface-muted); }
.theme-lettingshub .bg-confirm-gradient {
    background: linear-gradient(180deg, var(--confirm-bg-start) 0%, var(--confirm-bg-end) 100%);
}

/* =========================================================
   Buttons
   ========================================================= */

/* Primary button: teal background, white text (no hover colour) */
.theme-lettingshub .btn-confirm,
.theme-lettingshub .btn-primary {
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    min-height: 48px;
    transition: transform .1s, opacity .2s;
}
.theme-lettingshub .btn-confirm:hover,
.theme-lettingshub .btn-primary:hover {
    opacity: 0.95; /* subtle hover fade */
}

/* Secondary button: white background, teal border, teal text (used on teal BG) */
.theme-lettingshub .btn-outline {
    background: #ffffff;
    color: var(--primary);
    border: 1px solid var(--primary);
    min-height: 44px;
}
.theme-lettingshub .btn-outline:hover {
    background: #ffffff;
}

.theme-lettingshub .bg-primary-hover { background: rgba(52, 158, 176, 0.11); }
.theme-lettingshub .hover\:bg-primary-hover:hover { background: rgba(52, 158, 176, 0.11); }

/* =========================================================
   Forms + Focus Rings
   ========================================================= */
.theme-lettingshub :where(input, select, textarea) {
    border-color: var(--border-muted);
    background: #fff;
    color: var(--secondary);
}
.theme-lettingshub :where(input, select, textarea):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-ring);
}
.theme-lettingshub ::placeholder { color: var(--body-text); }
.theme-lettingshub input[type="checkbox"],
.theme-lettingshub input[type="radio"] {
    accent-color: var(--primary);
}

/* =========================================================
   Text / Headings / Links
   ========================================================= */
.theme-lettingshub .text-heading { color: var(--secondary); }
.theme-lettingshub .text-body { color: var(--body-text); }
.theme-lettingshub .text-link { color: var(--primary); }
.theme-lettingshub .text-link:hover { color: var(--primary-600); }

/* Accent for warnings or highlights */
.theme-lettingshub .text-accent { color: var(--accent); }

/* =========================================================
   Confirmation Page
   ========================================================= */
.theme-lettingshub .confirmation-wrapper {
    background: linear-gradient(to bottom, var(--confirm-bg-start), var(--confirm-bg-end));
}
.theme-lettingshub .confirmation-card {
    background: var(--confirmation-card-bg);
    box-shadow: var(--confirmation-shadow);
}
.theme-lettingshub .loading-wrapper { background: var(--loading-bar-bg); }
.theme-lettingshub .loading-bar { background: var(--loading-bar-color); }
.theme-lettingshub .loading-text { color: #fff; }

/* =========================================================
   Logo / Branding
   ========================================================= */
.theme-lettingshub .app-logo {
    background: url('/images/logos/lettingshub-logo.png') no-repeat center center;
    background-size: contain;
    width: 15rem !important;
    height: 3.5rem !important;
}

/* =========================================================
   Utility / Misc
   ========================================================= */
.theme-lettingshub .focus\:ring-primary-ring-strong:focus {
    box-shadow: 0 0 0 2px var(--primary-ring-strong) !important;
}
.theme-lettingshub .text-spinner { color: var(--primary); }
.theme-lettingshub .hover\:bg-muted-hover:hover { background: #e5e7eb; }
.theme-lettingshub .bg-skip-modal { background: #1e1b2b; }
.theme-lettingshub .close-error-modal,
.theme-lettingshub .close-skip-modal {
    color: white;
    font-weight: bold;
    padding-right: 0.5rem;
    font-size: 2rem !important;
}

.theme-lettingshub .page-header-subtitle{
    color: #52646c;
}