/* =====================================================
   BOOTSTRAP 5.3 THEME ROOT (JOOMLA 6)
===================================================== */

:root[data-bs-theme="light"] {
    --body-fade-rgb: 255,255,255;
    --accent: #2563eb;
    --surface: #ffffff;
    --surface-muted: #f7f8fa;
    --text-main: #1a1a1a;
    --text-muted: #6b7280;
    --border-subtle: rgba(0,0,0,0.08);
}

:root[data-bs-theme="dark"] {
    --body-fade-rgb: 18,22,28;
    --accent: #60a5fa;
    --surface: #12161d;
    --surface-muted: #1e232b;
    --text-main: #f1f5f9;
    --text-muted: #9aa3af;
    --border-subtle: rgba(255,255,255,0.12);
}


/* =====================================================
   BASE PAGE STRUCTURE & HERO LAYERS
===================================================== */

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: transparent;
    font-family: Inter, Nunito, Rubik, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* HERO IMAGE LAYER */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 200% auto;
    z-index: 0;
    pointer-events: none;
}

/* FADE / READABILITY LAYER */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--body-fade-rgb),0) 0,
        rgba(var(--body-fade-rgb),0.8) 325px,
        rgba(var(--body-fade-rgb),1) 100%
    );
    z-index: 1;
    pointer-events: none;
}


/* =====================================================
   PAGE HERO IMAGES (RESTORED ✅)
===================================================== */

.page-about::before,
.page-about .container-header::before {
    background-image: url("/images/headers/about-banner.jpg");
}

.page-residential::before,
.page-residential .container-header::before {
    background-image: url("/images/headers/residential-banner.jpg");
}

.page-commercial::before,
.page-commercial .container-header::before {
    background-image: url("/images/headers/commercial-banner.png");
}

.page-industrial::before,
.page-industrial .container-header::before {
    background-image: url("/images/headers/industrial-banner.jpg");
}

.page-civil::before,
.page-civil .container-header::before {
    background-image: url("/images/headers/civil-banner.png");
}

.page-space::before,
.page-space .container-header::before {
    background-image: url("/images/headers/space-banner.jpg");
}

.page-insights::before,
.page-insights .container-header::before {
    background-image: url("/images/headers/insights-banner.jpg");
}


/* =====================================================
   STACKING CONTEXT
===================================================== */

header,
main,
footer,
.container,
.container-fluid,
.container-main,
.phTplContainer {
    position: relative;
    z-index: 2;
    background: transparent !important;
}


/* =====================================================
   HEADER HERO
===================================================== */

.container-header {
    position: sticky;
    top: 0;
    min-height: 300px;
    z-index: 1000;
    overflow: hidden;
}

.container-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 200% auto;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 70%,
        transparent 100%
    );
}

.container-header,
.container-header a,
.container-header svg {
    color: #ffffff;
    fill: #ffffff;
}


/* =====================================================
   FOOTER & BREADCRUMBS
===================================================== */

.container-footer,
.container-breadcrumbs {
    background: rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(6px);
}


/* =====================================================
   COMMON UI CONTROLS
===================================================== */

a { color: var(--accent); }

hr { border-color: var(--border-subtle); }

.badge,
.btn {
    background: var(--surface-muted);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.btn-primary {
    background: var(--accent);
    color: #ffffff;
    border: none;
}

input,
select,
textarea {
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}


/* =====================================================
   PROPERTY CARDS
===================================================== */

.property-card {
    background: var(--surface-muted);
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

html[data-bs-theme="dark"] .property-card * {
    color: #e5e7eb !important;
}


/* =====================================================
   PROPERTY DETAILS – HEADER & TABS
===================================================== */

html[data-bs-theme="dark"] .property-header-modern {
    background: #12161d !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

html[data-bs-theme="dark"] .property-header-modern * {
    color: #f1f5f9 !important;
}

html[data-bs-theme="dark"]
#propertyDetailsTab > div[role="tablist"],
html[data-bs-theme="dark"]
#property > div[role="tablist"] {
    background: #1a1e25 !important;
}

html[data-bs-theme="dark"]
#propertyDetailsTab button[aria-selected="false"],
html[data-bs-theme="dark"]
#property button[aria-selected="false"] {
    color: #9aa3af !important;
}

html[data-bs-theme="dark"]
#propertyDetailsTab button[aria-selected="true"],
html[data-bs-theme="dark"]
#property button[aria-selected="true"] {
    background: #12161d !important;
    color: #f1f5f9 !important;
}


/* =====================================================
   PROPERTY EDIT FORM – MASTER OVERRIDE
===================================================== */

html[data-bs-theme="dark"] #propertyModification {
    background: #12161d !important;
    color: #f1f5f9 !important;
}

html[data-bs-theme="dark"]
fieldset.fieldsetpropertydetails {
    background: #12161d !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}


/* =====================================================
   TINYMCE (OS PROPERTY)
===================================================== */

html[data-bs-theme="dark"] .tox {
    background: #12161d !important;
    color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .tox-toolbar,
html[data-bs-theme="dark"] .tox-menubar,
html[data-bs-theme="dark"] .tox-statusbar {
    background: #1a1e25 !important;
}


/* =====================================================
   ADD / EDIT PROPERTY STEP TABS
===================================================== */

html[data-bs-theme="dark"]
#propertyModification [role="tablist"] {
    background: #1a1e25 !important;
}

html[data-bs-theme="dark"]
#propertyModification button[role="tab"] {
    color: #9aa3af !important;
}

html[data-bs-theme="dark"]
#propertyModification button[role="tab"][aria-selected="true"] {
    background: #12161d !important;
    color: #f1f5f9 !important;
    border-bottom: 2px solid #2563eb !important;
}