/*

DECARB PLUS — GLOBAL PRO MAX UTILITIES & OVERRIDES
Full Execution using Enterprise Variables
============================================================ */

/* -----------------------------------------

BASE & RESET
----------------------------------------- */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--color-graphite);
background-color: var(--color-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-heading {
font-family: var(--font-heading);
color: var(--color-primary);
font-weight: 700;
letter-spacing: -0.02em;
}

/* Custom Scrollbar for Enterprise feel */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-paper); }
::-webkit-scrollbar-thumb { background: var(--color-steel); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* -----------------------------------------
2. TYPOGRAPHY UTILITIES
----------------------------------------- */
.fs-xs { font-size: var(--fs-xs) !important; }
.fs-small { font-size: var(--fs-small) !important; }
.tracking-wide { letter-spacing: 0.05em !important; }
.font-monospace { font-family: var(--font-mono) !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-lg { line-height: 1.8 !important; }

/* -----------------------------------------
3. COLOR & BACKGROUND UTILITIES
----------------------------------------- */
.bg-brand-primary { background-color: var(--color-primary) !important; }
.bg-brand-dark { background-color: var(--color-primary-dark) !important; }
.bg-brand-accent { background-color: var(--color-accent) !important; }
.bg-brand-paper { background-color: var(--color-paper) !important; }
.bg-brand-tint { background-color: var(--color-tint) !important; }
.bg-white { background-color: var(--color-surface) !important; }
.bg-black { background-color: var(--color-black) !important; }

.text-brand { color: var(--color-primary) !important; }
.text-brand-accent { color: var(--color-accent) !important; }
.text-muted-brand { color: var(--color-steel) !important; }
.text-graphite { color: var(--color-graphite) !important; }

/* Semantic Palettes for Dashboards & Cards */
.text-teal { color: var(--color-teal) !important; }
.bg-teal-tint { background-color: var(--color-teal-tint) !important; }
.text-amber { color: var(--color-amber) !important; }
.bg-amber-tint { background-color: var(--color-amber-tint) !important; }
.text-coral { color: var(--color-coral) !important; }
.bg-coral-tint { background-color: var(--color-coral-tint) !important; }
.text-indigo { color: var(--color-indigo) !important; }
.bg-indigo-tint { background-color: var(--color-indigo-tint) !important; }
.text-plum { color: var(--color-plum) !important; }
.bg-plum-tint { background-color: var(--color-plum-tint) !important; }
.text-green { color: var(--color-green) !important; }
.bg-green-tint { background-color: var(--color-green-tint) !important; }

.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-success { color: var(--color-success) !important; }

/* -----------------------------------------
4. STRUCTURAL FIXES (Borders & Shadows)
----------------------------------------- */

/* CRITICAL FIX: Eradicate hard outer borders globally for the Pro Max floating aesthetic */
.card {
--bs-card-border-width: 0;
border: 0 !important;
box-shadow: var(--shadow-sm);
}

/* Ensure inner borders (like card headers) are extremely faint */
.border-light, .card-header, .card-footer, .border-bottom, .border-top {
border-color: var(--color-border-light) !important;
}
.border-secondary { border-color: var(--color-border) !important; }
.border-accent { border-color: var(--color-accent) !important; }

.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-inner { box-shadow: var(--shadow-inner) !important; }

.rounded-4 { border-radius: var(--radius-xl) !important; }
.rounded-5 { border-radius: var(--radius-2xl) !important; }

.max-w-500 { max-width: var(--max-w-500); margin-left: auto; margin-right: auto; }
.max-w-700 { max-width: var(--max-w-700); margin-left: auto; margin-right: auto; }
.max-w-900 { max-width: var(--max-w-900); margin-left: auto; margin-right: auto; }

/* Extensive Spacing Classes */
.py-space-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-space-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.my-space-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }

/* -----------------------------------------
5. INTERACTIVE & PRO MAX COMPONENTS
----------------------------------------- /
/ Smooth Elevation (Floating Cards) */
.hover-lift {
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-lift:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg) !important;
}

/* Gradients and Glows */
.bg-gradient-accent {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}
.glow-icon-box {
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-glow-dark);
}

/* CRITICAL FIX: Dashboard KPI Cards Structure (No hard borders) */
.card-tint {
background: var(--color-surface);
border: none !important;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Keep the colored accent line on the side/top of KPI cards */
.kpi-amber { border-left: 4px solid var(--color-amber) !important; }
.kpi-teal { border-left: 4px solid var(--color-teal) !important; }
.kpi-coral { border-left: 4px solid var(--color-coral) !important; }
.kpi-indigo { border-left: 4px solid var(--color-indigo) !important; }
.kpi-green { border-left: 4px solid var(--color-accent) !important; }

/* Pro Badges */
.badge-green { background-color: var(--color-green-tint); color: var(--color-green); border: 1px solid rgba(46, 133, 64, 0.1); }
.badge-amber { background-color: var(--color-amber-tint); color: var(--color-amber); border: 1px solid rgba(224, 165, 38, 0.1); }
.badge-coral { background-color: var(--color-coral-tint); color: var(--color-coral); border: 1px solid rgba(193, 91, 61, 0.1); }
.badge-teal { background-color: var(--color-teal-tint); color: var(--color-teal); border: 1px solid rgba(27, 122, 114, 0.1); }
.badge-indigo { background-color: var(--color-indigo-tint); color: var(--color-indigo); border: 1px solid rgba(62, 92, 153, 0.1); }
.badge-plum { background-color: var(--color-plum-tint); color: var(--color-plum); border: 1px solid rgba(122, 72, 112, 0.1); }
.badge-accent { background-color: var(--color-accent); color: var(--color-white); border: none; }

/* Image Overlays (Homepage Tiles) */
.img-overlay-card {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-primary-dark);
}
.img-overlay-card img {
transition: transform var(--transition-slow);
}
.img-overlay-card:hover img {
transform: scale(1.08);
opacity: 0.8;
}

/* Custom Buttons */
.btn {
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
font-weight: 600;
}
.btn-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, #1c4005 100%);
border: none;
color: var(--color-white);
box-shadow: 0 4px 10px rgba(18, 41, 3, 0.15);
}
.btn-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(18, 41, 3, 0.25);
color: var(--color-white);
}
.btn-accent {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
border: none;
color: var(--color-white);
}
.btn-accent:hover {
background: var(--color-accent-dark);
box-shadow: var(--shadow-glow);
color: var(--color-white);
}
.btn-outline-brand {
border: 1px solid var(--color-border);
color: var(--color-primary);
background: var(--color-surface);
}
.btn-outline-brand:hover {
background: var(--color-tint);
border-color: var(--color-primary);
color: var(--color-primary);
}

/* -----------------------------------------
6. FORM & TABLE OVERRIDES
----------------------------------------- */
.form-control, .form-select {
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
transition: all var(--transition-fast);
box-shadow: var(--shadow-inner);
border: 1px solid var(--color-border);
background-color: var(--color-paper);
}
.form-control:focus, .form-select:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 4px rgba(109, 179, 31, 0.15);
background-color: var(--color-surface);
}

/* Custom Range Slider (For ROI Calculator) */
.custom-range {
height: 8px;
background: var(--color-border);
border-radius: var(--radius-pill);
outline: none;
-webkit-appearance: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 26px;
height: 26px;
background: var(--color-accent);
border: 4px solid var(--color-white);
border-radius: 50%;
cursor: pointer;
box-shadow: var(--shadow-md);
transition: transform var(--transition-fast);
}
.custom-range::-webkit-slider-thumb:hover {
transform: scale(1.15);
}

/* Clean Tables */
.table > :not(caption) > * > * {
background-color: transparent !important;
border-bottom-color: var(--color-border-light);
}

/* -----------------------------------------
7. UTILITY ANIMATIONS
----------------------------------------- */
.transition-all { transition: all var(--transition-normal) !important; }
.transition-transform { transition: transform var(--transition-normal) !important; }
.hover-opacity-100 { transition: opacity var(--transition-fast); opacity: 0.75; }
.hover-opacity-100:hover { opacity: 1 !important; }
.cursor-pointer { cursor: pointer !important; }
.hover-bg-tint:hover { background-color: var(--color-tint) !important; }
.hover-brand:hover { color: var(--color-primary) !important; }
.text-brand-hover-accent:hover { color: var(--color-accent) !important; }

/* Slide & Fade In Animations for Cards */
.fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Admin Sidebar active state borders */
.admin-sidebar .nav-link.active {
border-left: 4px solid var(--color-accent) !important;
background-color: var(--color-surface) !important;
}