/*
 * ================================================================
 *  EcoEarth India — Global Brand Color System
 *  EXACT COLORS EXTRACTED FROM OFFICIAL LOGO (image.png)
 *
 *  🟢 LOGO GREEN  : #2c9c3a  (vivid green — leaves/globe/ECO text)
 *  🟢 LOGO GREEN DARK : #1d7a2a  (darker — text, ribbon, border)
 *  🟠 LOGO ORANGE : #f7931a  (Indian saffron — EARTH text/people/ring)
 *  ⚪ WHITE       : #ffffff
 * ================================================================
 */

/* ─── CSS Design Tokens ─── */
:root {
    /* ── Logo Exact Colors ── */
    --logo-green:        #2c9c3a;
    --logo-green-dark:   #1d7a2a;
    --logo-green-deep:   #155a1e;
    --logo-orange:       #f7931a;
    --logo-orange-dark:  #e07a0a;
    --logo-orange-light: #fba94a;
    --logo-white:        #ffffff;

    /* ── Primary Palette ── */
    --eco-green:         #2c9c3a;
    --eco-green-dark:    #1d7a2a;
    --eco-green-deep:    #155a1e;
    --eco-green-mid:     #36b347;
    --eco-green-light:   #4dc861;
    --eco-green-pale:    #e8f8eb;
    --eco-green-50:      #f0fdf3;
    --eco-green-100:     #c8eecf;

    --eco-orange:        #f7931a;
    --eco-orange-dark:   #e07a0a;
    --eco-orange-light:  #fba94a;
    --eco-orange-pale:   #fff4e6;
    --eco-orange-50:     #fffbf5;
    --eco-orange-100:    #fde2b4;

    /* ── Gradients (exact logo tones) ── */
    --eco-grad-green:    linear-gradient(135deg, #2c9c3a 0%, #1d7a2a 100%);
    --eco-grad-orange:   linear-gradient(135deg, #f7931a 0%, #e07a0a 100%);
    --eco-grad-hero:     linear-gradient(145deg, #155a1e 0%, #1d7a2a 40%, #2c9c3a 75%, #36b347 100%);
    --eco-grad-diagonal: linear-gradient(135deg, #2c9c3a 0%, #f7931a 100%);
    --eco-grad-sidebar:  linear-gradient(180deg, #155a1e 0%, #1d7a2a 100%);

    /* ── Text ── */
    --eco-text-dark:     #0f2e14;
    --eco-text-body:     #1a3320;
    --eco-text-muted:    #5a7a62;
    --eco-text-white:    #ffffff;

    /* ── Neutrals ── */
    --eco-white:         #ffffff;
    --eco-bg-light:      #f5fdf6;
    --eco-border:        #b8e4bf;
    --eco-border-light:  #ddf2e0;

    /* ── Shadows ── */
    --eco-shadow-green:  0 4px 22px rgba(44,156,58,0.22);
    --eco-shadow-orange: 0 4px 22px rgba(247,147,26,0.22);
    --eco-shadow-card:   0 2px 14px rgba(44,156,58,0.10);
    --eco-shadow-lg:     0 8px 36px rgba(44,156,58,0.18);

    /* ── Radius ── */
    --eco-radius-sm:   6px;
    --eco-radius:      10px;
    --eco-radius-lg:   16px;
    --eco-radius-xl:   24px;
    --eco-radius-pill: 50px;

    /* ── Transition ── */
    --eco-transition: all 0.25s ease;
}

/* ─── Background Utilities ─── */
.bg-eco-green        { background-color: var(--eco-green)       !important; }
.bg-eco-green-dark   { background-color: var(--eco-green-dark)  !important; }
.bg-eco-green-deep   { background-color: var(--eco-green-deep)  !important; }
.bg-eco-green-pale   { background-color: var(--eco-green-pale)  !important; }
.bg-eco-orange       { background-color: var(--eco-orange)      !important; }
.bg-eco-orange-pale  { background-color: var(--eco-orange-pale) !important; }
.bg-eco-gradient     { background: var(--eco-grad-green)        !important; }
.bg-eco-hero         { background: var(--eco-grad-hero)         !important; }
.bg-eco-sidebar      { background: var(--eco-grad-sidebar)      !important; }

/* ─── Text Utilities ─── */
.text-eco-green      { color: var(--eco-green)      !important; }
.text-eco-green-dark { color: var(--eco-green-dark) !important; }
.text-eco-orange     { color: var(--eco-orange)     !important; }
.text-eco-white      { color: #ffffff               !important; }

/* ─── Border ─── */
.border-eco-green    { border-color: var(--eco-green)  !important; }
.border-eco-orange   { border-color: var(--eco-orange) !important; }

/* ─── Logo Classes ─── */
.eco-logo            { object-fit: contain; display: block; }
.eco-logo-sm         { height: 32px; width: auto; }
.eco-logo-md         { height: 44px; width: auto; }
.eco-logo-lg         { height: 60px; width: auto; }
.eco-logo-xl         { height: 90px; width: auto; }
.eco-logo-on-dark    { filter: drop-shadow(0 0 6px rgba(255,255,255,0.2)); }

/* ─── Brand Buttons ─── */
.btn-eco-primary {
    background: var(--eco-grad-green);
    color: #fff; border: none;
    border-radius: var(--eco-radius);
    font-weight: 700;
    transition: var(--eco-transition);
    box-shadow: var(--eco-shadow-green);
}
.btn-eco-primary:hover {
    background: var(--eco-grad-orange);
    transform: translateY(-2px);
    box-shadow: var(--eco-shadow-orange);
    color: #fff;
}
.btn-eco-orange {
    background: var(--eco-grad-orange);
    color: #fff; border: none;
    border-radius: var(--eco-radius);
    font-weight: 700;
    transition: var(--eco-transition);
    box-shadow: var(--eco-shadow-orange);
}
.btn-eco-orange:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff; }

.btn-eco-outline {
    background: transparent; color: var(--eco-green);
    border: 2px solid var(--eco-green);
    border-radius: var(--eco-radius);
    font-weight: 700; transition: var(--eco-transition);
}
.btn-eco-outline:hover { background: var(--eco-green); color: #fff; }

/* ─── Brand Cards ─── */
.eco-card {
    background: #fff;
    border-radius: var(--eco-radius-lg);
    border: 1.5px solid var(--eco-border-light);
    box-shadow: var(--eco-shadow-card);
    transition: var(--eco-transition);
}
.eco-card:hover { box-shadow: var(--eco-shadow-lg); border-color: var(--eco-border); }

.eco-card-green  { background: var(--eco-grad-green);  color: #fff; border-radius: var(--eco-radius-lg); box-shadow: var(--eco-shadow-green); }
.eco-card-orange { background: var(--eco-grad-orange); color: #fff; border-radius: var(--eco-radius-lg); box-shadow: var(--eco-shadow-orange); }

/* ─── Brand Badges ─── */
.badge-eco-green {
    background: var(--eco-green-pale); color: var(--eco-green-dark);
    font-weight: 700; border-radius: var(--eco-radius-pill);
    padding: 4px 12px; font-size: 0.75rem;
}
.badge-eco-orange {
    background: var(--eco-orange-pale); color: var(--eco-orange-dark);
    font-weight: 700; border-radius: var(--eco-radius-pill);
    padding: 4px 12px; font-size: 0.75rem;
}

/* ─── Section Headers ─── */
.eco-section-title { font-weight: 900; color: var(--eco-green-dark); letter-spacing: -0.3px; }
.eco-section-title span { color: var(--eco-orange); }

/* ─── Form Focus ─── */
.form-control:focus,
.form-select:focus {
    border-color: var(--eco-green) !important;
    box-shadow: 0 0 0 3px rgba(44,156,58,0.15) !important;
}

/* ─── Divider ─── */
.eco-divider {
    height: 3px; border-radius: 2px;
    background: var(--eco-grad-diagonal);
    border: none; margin: 1rem 0;
}

/* ─── SIDEBAR CLEAN THEME ─── */
.vertical-menu {
    background: #ffffff !important;
}
.sidebar-brand-box {
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f6 !important;
}

/* ─── Bootstrap Overrides ─── */
.btn-primary {
    background-color: var(--eco-green) !important;
    border-color: var(--eco-green) !important;
}
.btn-primary:hover {
    background-color: var(--eco-green-dark) !important;
    border-color: var(--eco-green-dark) !important;
}
.btn-success {
    background-color: var(--eco-green-mid) !important;
    border-color: var(--eco-green-mid) !important;
}
.btn-warning {
    background-color: var(--eco-orange) !important;
    border-color: var(--eco-orange) !important;
    color: #fff !important;
}
.btn-warning:hover {
    background-color: var(--eco-orange-dark) !important;
    border-color: var(--eco-orange-dark) !important;
    color: #fff !important;
}
.btn-outline-success {
    color: var(--eco-green) !important;
    border-color: var(--eco-green) !important;
}
.btn-outline-success:hover {
    background-color: var(--eco-green) !important;
    color: #fff !important;
}

/* Badge overrides */
.bg-success  { background-color: var(--eco-green) !important; }
.bg-warning  { background-color: var(--eco-orange) !important; }
.text-success{ color: var(--eco-green) !important; }
.text-warning{ color: var(--eco-orange) !important; }
.border-success { border-color: var(--eco-green) !important; }

/* Progress bar */
.progress-bar { background: var(--eco-grad-green); }

/* Links */
a { color: var(--eco-green); }
a:hover { color: var(--eco-green-dark); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--eco-green-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--eco-green); }

/* ==========================================================================
 *  ECO EARTH — UNIFIED COMPACT & HARMONIOUS TYPOGRAPHY SYSTEM
 *  Applied across: Website (Frontend), User Portal, and Admin Portal
 *  Strict Compact Hierarchy: h1 > h2 > h3 > h4 > h5 > h6 > body > small
 * ========================================================================== */

:root {
    /* Standardized Compact Typography Scale (Clean, SaaS-Grade Density) */
    --ee-font-base:    13.5px;
    --ee-fs-h1:        1.35rem;  /* ~21.6px - Main Page Title */
    --ee-fs-h2:        1.15rem;  /* ~18.4px - Section / Card Major Heading */
    --ee-fs-h3:        1.00rem;  /* ~16.0px - Subsection / Subheading */
    --ee-fs-h4:        0.88rem;  /* ~14.0px - Widget / Module Title */
    --ee-fs-h5:        0.81rem;  /* ~13.0px - Small Block Header */
    --ee-fs-h6:        0.72rem;  /* ~11.5px - Micro / Eyebrow Label */
    --ee-fs-body:      0.84rem;  /* ~13.5px - Standard Body Text */
    --ee-fs-sub:       0.80rem;  /* ~12.8px - Sub-headings & Descriptions */
    --ee-fs-sm:        0.75rem;  /* ~12.0px - Meta / Captions */
    --ee-fs-xs:        0.68rem;  /* ~11.0px - Badges / Micro Tags */
}

/* ─── Universal Heading Hierarchy ─── */
h1, .h1,
.page-hero-title,
.hero-title,
.page-title,
.welcome-heading {
    font-size: var(--ee-fs-h1) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.45rem !important;
}

h2, .h2,
.section-title,
.eco-section-title,
.card-title,
.mission-title,
.contact-headline,
.cta-title {
    font-size: var(--ee-fs-h2) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 0.4rem !important;
}

h3, .h3,
.sub-title,
.card-header h5,
.box-title,
.value-title,
.rank-info h3 {
    font-size: var(--ee-fs-h3) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.35rem !important;
}

h4, .h4,
.widget-title,
.product-name,
.stat-title {
    font-size: var(--ee-fs-h4) !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    margin-bottom: 0.3rem !important;
}

h5, .h5,
.card-subtitle {
    font-size: var(--ee-fs-h5) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.25rem !important;
}

h6, .h6,
.eyebrow,
.section-tag,
.mission-tag,
.page-hero-badge {
    font-size: var(--ee-fs-h6) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.25rem !important;
}

/* ─── Sub-headings, Descriptions & Paragraphs ─── */
.section-subtitle,
.page-hero-subtitle,
.hero-subtitle,
.lead,
.welcome-body,
.mission-body,
.product-desc,
.contact-sub {
    font-size: var(--ee-fs-sub) !important;
    line-height: 1.55 !important;
    color: #64748b;
    margin-bottom: 0.85rem !important;
    font-weight: 400 !important;
}

body, p, li {
    font-size: var(--ee-fs-body);
    line-height: 1.55;
}

/* ─── KPI / Stat Value Numbers ─── */
.kpi-value,
.matrix-value,
.stat-value,
.stat-number {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.kpi-label,
.stat-label,
.matrix-label {
    font-size: var(--ee-fs-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

/* ─── Standardized Table Typography ─── */
.table th, th,
.user-table th {
    font-size: var(--ee-fs-h6) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0.55rem 0.75rem !important;
}

.table td, td,
.user-table td {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    padding: 0.55rem 0.75rem !important;
}

/* ─── Standardized Form Controls & Labels ─── */
.form-label, label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: #334155 !important;
}

.form-control,
.form-select,
.select2-container .select2-selection--single {
    font-size: 0.81rem !important;
    line-height: 1.45 !important;
    padding: 0.42rem 0.75rem !important;
}

/* ─── Standardized Buttons ─── */
.btn {
    font-size: 0.80rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 0.45rem 0.95rem !important;
}

.btn-sm {
    font-size: 0.72rem !important;
    padding: 0.28rem 0.65rem !important;
}

.btn-lg {
    font-size: 0.88rem !important;
    padding: 0.55rem 1.25rem !important;
}

/* ─── Standardized Badges ─── */
.badge,
.status-pill {
    font-size: var(--ee-fs-xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 0.25rem 0.55rem !important;
}

/* ─── Responsive Media Queries (Tablets & Mobiles) ─── */
@media (max-width: 991.98px) {
    :root {
        --ee-fs-h1:   1.22rem;  /* ~19.5px */
        --ee-fs-h2:   1.08rem;  /* ~17.2px */
        --ee-fs-h3:   0.94rem;  /* ~15.0px */
        --ee-fs-h4:   0.84rem;  /* ~13.4px */
        --ee-fs-body: 0.82rem;  /* ~13.1px */
    }
}

@media (max-width: 575.98px) {
    :root {
        --ee-fs-h1:   1.12rem;  /* ~17.9px - Neat & compact on phone */
        --ee-fs-h2:   1.00rem;  /* ~16.0px */
        --ee-fs-h3:   0.88rem;  /* ~14.0px */
        --ee-fs-h4:   0.80rem;  /* ~12.8px */
        --ee-fs-body: 0.79rem;  /* ~12.6px */
    }

    .kpi-value,
    .matrix-value,
    .stat-value,
    .stat-number {
        font-size: 1.05rem !important;
    }

    .section-subtitle,
    .page-hero-subtitle,
    .hero-subtitle {
        font-size: 0.76rem !important;
        line-height: 1.5 !important;
    }
}

/* ─── Global Navigation: Icon & Label Spacing ─── */
#sidebar-menu ul li a,
.vertical-menu .metismenu li a,
.vertical-menu li a,
#sidebar-menu li a {
    display: flex !important;
    align-items: center !important;
}

#sidebar-menu ul li a i,
.vertical-menu .metismenu li a i,
.vertical-menu li a i,
#sidebar-menu li a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
}

#sidebar-menu ul li a > div,
.vertical-menu .metismenu li a > div {
    display: inline-flex !important;
    align-items: center !important;
}

#sidebar-menu ul li a > div i,
.vertical-menu .metismenu li a > div i {
    margin-right: 14px !important;
    width: 22px !important;
    min-width: 22px !important;
}

#sidebar-menu ul li a span:not(.badge),
.vertical-menu .metismenu li a span:not(.badge),
#sidebar-menu li a span:not(.badge) {
    display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════════
   ECOEARTH VALUE & PILLAR PILL CARDS (EXACT SCREENSHOT UI)
═══════════════════════════════════════════════════════════════ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.val-pill-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
  min-height: 130px;
  background: #ffffff;
}

.val-pill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

/* Left Column: Icon + Arrow */
.val-card-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  z-index: 2;
  width: 44px;
}

.val-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.val-pill-card:hover .val-icon-badge {
  transform: scale(1.08);
}

.val-arrow-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-top: auto;
}

.val-pill-card:hover .val-arrow-badge {
  transform: translateX(3px);
}

/* Right Column: Title + Desc */
.val-card-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

.val-title {
  font-size: 1.00rem;
  font-weight: 800;
  color: #064e26;
  margin-bottom: 5px;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.val-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Corner Wave SVG */
.val-wave-svg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 70px;
  pointer-events: none;
  z-index: 1;
}

/* 1. Green Theme (100% Organic) */
.card-organic {
  background: linear-gradient(135deg, #f7fdf9 0%, #ffffff 55%, #edf9f1 100%);
  border: 1.5px solid #d4f2dc;
}
.card-organic:hover {
  border-color: #86efac;
}
.card-organic .val-icon-badge {
  background: #dcfce7;
  color: #16a34a;
}
.card-organic .val-arrow-badge {
  background: #dcfce7;
  color: #16a34a;
}
.card-organic:hover .val-arrow-badge {
  background: #16a34a;
  color: #ffffff;
}
.card-organic .val-wave-svg {
  color: #86efac;
}

/* 2. Amber Theme (Sustainable) */
.card-sustainable {
  background: linear-gradient(135deg, #fffdf8 0%, #ffffff 55%, #fef7ec 100%);
  border: 1.5px solid #fdecd2;
}
.card-sustainable:hover {
  border-color: #fcd34d;
}
.card-sustainable .val-icon-badge {
  background: #fef3c7;
  color: #ea580c;
}
.card-sustainable .val-arrow-badge {
  background: #fef3c7;
  color: #ea580c;
}
.card-sustainable:hover .val-arrow-badge {
  background: #ea580c;
  color: #ffffff;
}
.card-sustainable .val-wave-svg {
  color: #fcd34d;
}

/* 3. Blue Theme (Trust & Transparency) */
.card-trust {
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 55%, #edf5fe 100%);
  border: 1.5px solid #dbeafe;
}
.card-trust:hover {
  border-color: #93c5fd;
}
.card-trust .val-icon-badge {
  background: #dbeafe;
  color: #2563eb;
}
.card-trust .val-arrow-badge {
  background: #dbeafe;
  color: #2563eb;
}
.card-trust:hover .val-arrow-badge {
  background: #2563eb;
  color: #ffffff;
}
.card-trust .val-wave-svg {
  color: #93c5fd;
}

/* 4. Pink Theme (Healthy for Everyone) */
.card-health {
  background: linear-gradient(135deg, #fff9f9 0%, #ffffff 55%, #fdecee 100%);
  border: 1.5px solid #fed7d7;
}
.card-health:hover {
  border-color: #fca5a5;
}
.card-health .val-icon-badge {
  background: #ffe4e6;
  color: #e11d48;
}
.card-health .val-arrow-badge {
  background: #ffe4e6;
  color: #e11d48;
}
.card-health:hover .val-arrow-badge {
  background: #e11d48;
  color: #ffffff;
}
.card-health .val-wave-svg {
  color: #fca5a5;
}

@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 580px) {
  .values-grid { grid-template-columns: 1fr; gap: 12px; }
  .val-pill-card { padding: 16px 14px; min-height: auto; }
}