/* ===========================
File: public/css/style.css
=========================== */

:root {
    --bg: #e8ffec;        /* light green background */
    --surface: #ffffff;   /* white */
    --text: #2d2d2d;      /* dark gray */
    --muted: #4a5b50;     /* adjusted muted to match green hue */
    --primary: #35a668;   /* brand green */
    --primary-dark: #2b8a57; /* darker green for contrast */
    --accent: #2b8a57;
    --ring: rgba(53,166,104,.35);
    --glass: rgba(255,255,255,0.55);
    --shadow: 18, 24, 30;

    --ff-1: 'HK Grotesk', 'Glacial Indifference', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ===========================
Dark Mode
=========================== */
[data-theme="dark"] {
    --bg: #151515;
    --surface: #1b1b1b;
    --text: #e9f2eb;
    --muted: #b6c6be;
    --primary: #35a668;
    --primary-dark: #1f6b42;
    --accent: #35a668;
    --ring: rgba(53,166,104,.45);
    --glass: rgba(27,27,27,0.6);

    body, p, span, a, li, td, th, h1, h2, h3, h4, h5, h6 {
        color: var(--text) !important;
    }
.logo-img {
    content: url('/public/images/Vision-dark.png');
}
    .section-title {
        background: linear-gradient(135deg, var(--text), var(--primary));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .badge-cat {
        background: color-mix(in oklab, var(--primary), #151515 80%);
        color: var(--text);
    }

    .form-control, .form-select {
        background-color: color-mix(in oklab, var(--surface), #fff 5%);
        border-color: color-mix(in oklab, var(--surface), #fff 15%);
        color: var(--text);
    }

    .table thead th { background: color-mix(in oklab, var(--surface), #fff 8%); }
    .table-hover tbody tr:hover { background: color-mix(in oklab, var(--surface), #fff 4%); }

    .admin-sidebar .nav-link { color: var(--text); }
    .admin-sidebar .nav-link.active, .admin-sidebar .nav-link:hover { color: var(--primary); }

    .feature-icon { color: var(--primary); }
    .dropdown-menu {background-color: black;}
    .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

}

/* ===========================
Base Styles
=========================== */
html, body { 
    height: 100%; 
    font-family: var(--ff-1); 
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.bg-surface {
     background:
        radial-gradient(1200px 600px at 10% -10%, rgba(53,166,104,.12), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(43,138,87,.10), transparent 60%),
        var(--bg);
    background-repeat: no-repeat;       /* prevent repetition */
    background-attachment: fixed;       /* optional, for parallax effect */
    background-size: cover;             /* stretch to cover entire area */
    background-position: center center;/* center the gradients */
}

.bg-blur {
    background-color: color-mix(in oklab, var(--surface), transparent 10%);
    backdrop-filter: saturate(140%) blur(10px);
}

/* ===========================
Navbar
=========================== */
.navbar .nav-link { color: var(--text); opacity: .9; }
.navbar .nav-link:hover, .navbar .nav-link:focus { opacity: 1; color: var(--primary); }

/* ===========================
Brand & Buttons
=========================== */
.brand-logo {
        content: url('/public/images/Vision-light.png');
    width: 28px; height: 28px; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 20px rgba(var(--shadow), .25), inset 4px 4px 8px rgba(255,255,255,.2), inset -4px -8px 16px rgba(0,0,0,.1);
    display: inline-block;
}
.brand-badge { 
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
    color: #fff; 
    box-shadow: 0 8px 24px rgba(53,166,104,.35); 
}

.btn-neumo {
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--surface), #000 6%);
    box-shadow: 8px 8px 16px rgba(0,0,0,.08), -6px -6px 14px rgba(255,255,255,.6), inset 0 0 0 transparent;
    color: var(--text);
}
.btn-neumo:hover, .btn-neumo:focus {
    box-shadow: 6px 6px 16px rgba(0,0,0,.10), -6px -6px 14px rgba(255,255,255,.55), 0 0 0 0.25rem var(--ring);
    color: var(--text);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border: 0;
}
.btn-gradient:hover { filter: saturate(1.08) brightness(1.05); color: #fff; }

/* ===========================
Cards & Glass
=========================== */
.card-neumo {
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 16px 16px 36px rgba(0,0,0,.12), -8px -8px 24px rgba(255,255,255,.35);
    overflow: hidden;
    height: auto;
}

.glass {
    background: var(--glass);
    border: 1px solid color-mix(in oklab, var(--surface), #000 12%);
    backdrop-filter: blur(12px) saturate(140%);
    border-radius: 18px;
}

/* ===========================
Hero Section
=========================== */
.hero {
    position: relative; 
    min-height: 70vh; 
    display: grid; 
    place-items: center; 
    padding: 6rem 1rem;
}
.hero .orb { 
    position: absolute; 
    filter: blur(60px); 
    opacity: .5; 
    pointer-events: none; 
}
.orb.one { width: 420px; height: 420px; background: radial-gradient(var(--primary), transparent 60%); top: -80px; left: -80px; }
.orb.two { width: 360px; height: 360px; background: radial-gradient(var(--primary-dark), transparent 60%); bottom: -60px; right: -60px; }

.hero .swiper {
    width: 100%;
    /*min-height: 200px;*/
}

.hero .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================
Features
=========================== */
.feature-icon {
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
    background: linear-gradient(135deg, var(--surface), color-mix(in oklab, var(--surface), #000 6%));
    box-shadow: 8px 8px 16px rgba(0,0,0,.06), -6px -6px 14px rgba(255,255,255,.45);
    color: var(--primary);
}

/* ===========================
Footer
=========================== */
.footer {
    background: radial-gradient(900px 560px at 15% -10%, rgba(53,166,104,.18), transparent 60%),
                radial-gradient(1000px 520px at 110% 10%, rgba(43,138,87,.15), transparent 60%),
                color-mix(in oklab, var(--surface), #000 4%);
    color: var(--text);
}
.footer-link { color: var(--muted); text-decoration: none; }
.footer-link:hover { color: var(--text); }

/* ===========================
Typography
=========================== */
.section-title {
    letter-spacing: .2px;
    background: linear-gradient(135deg, var(--text), var(--primary));
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent;
}

.kpi {
    border-radius: 18px; 
    padding: 1rem;
    background: linear-gradient(135deg, color-mix(in oklab, var(--surface), #000 1%), color-mix(in oklab, var(--surface), #000 6%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 10px 10px 24px rgba(0,0,0,.08);
}

.img-raise { 
    border-radius: 20px; 
    box-shadow: 20px 20px 40px rgba(0,0,0,.15), -10px -10px 24px rgba(255,255,255,.30); 
}

/* ===========================
Forms
=========================== */
.form-control, .form-select {
    background-color: color-mix(in oklab, var(--surface), #000 2%);
    border-color: color-mix(in oklab, var(--surface), #000 12%);
    color: var(--text); 
    border-radius: 14px;
}
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .25rem var(--ring); }

/* ===========================
Tables
=========================== */
.table thead th { background: color-mix(in oklab, var(--surface), #000 6%); }
.table-hover tbody tr:hover { background: color-mix(in oklab, var(--surface), #000 3%); }

/* ===========================
Utilities
=========================== */
.shadow-soft { box-shadow: 14px 14px 28px rgba(0,0,0,.08), -10px -10px 24px rgba(255,255,255,.35); }
.text-muted { color: var(--muted) !important; }
.link-body-emphasis { color: var(--text); }
:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }

/* ===========================
Swiper
=========================== */
.swiper { width: 100%; height: 100%; }
.swiper-slide { border-radius: 20px; overflow: hidden; }
.swiper,.swiper-wrapper {
  max-width: 100%;
}


/* ===========================
Admin Layout
=========================== */
.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 64px); }
.admin-sidebar {
    background: color-mix(in oklab, var(--surface), #000 4%);
    border-right: 1px solid color-mix(in oklab, var(--surface), #000 10%);
    padding: 1rem; 
    position: sticky; 
    top: 64px; 
    height: calc(100vh - 64px);
}
.admin-sidebar .nav-link { border-radius: 12px; color: var(--text); }
.admin-sidebar .nav-link.active, .admin-sidebar .nav-link:hover { background: color-mix(in oklab, var(--surface), #000 6%); color: var(--primary); }

/* ===========================
Badges
=========================== */
.badge-cat { 
    background: color-mix(in oklab, var(--primary), white 80%); 
    color: var(--primary-dark); 
    border-radius: 999px; 
}


/* ===========================
Responsive
=========================== */
@media (max-width: 992px) {
    .hero { padding: 4rem 1rem; }
    .hero .orb.one { width: 300px; height: 300px; top: -60px; left: -60px; }
    .hero .orb.two { width: 260px; height: 260px; bottom: -50px; right: -50px; }
    .hero .swiper {
    width: 100%;
    min-height: 200px;
    
}
#home .row {
    margin-left: 0;
    margin-right: 0;
}
#home {
  overflow: hidden;
}

}

@media (max-width: 768px) {
    .hero { padding: 3rem 1rem; }
    .hero .orb.one { width: 200px; height: 200px; top: -40px; left: -40px; }
    .hero .orb.two { width: 160px; height: 160px; bottom: -30px; right: -30px; }

    .feature-icon { width: 42px; height: 42px; }
    .glass { padding: 1rem; margin-bottom: 1rem; }
    .hero .swiper {
    width: 100%;
    min-height: 200px;
}
#home .row {
    margin-left: 0;
    margin-right: 0;
}
#home {
  overflow: hidden;
}

}

@media (max-width: 576px) {
    .hero {
        padding: 2rem 1rem;
        min-height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .hero .row {
        width: 100%;
        flex-direction: column;
        gap: 2rem;
    }

    .hero .col-lg-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .hero .orb.one, 
    .hero .orb.two {
        position: absolute;
        filter: blur(50px);
        opacity: 0.4;
        pointer-events: none;
    }

    .hero .orb.one { width: 150px; height: 150px; top: -30px; left: -30px; }
    .hero .orb.two { width: 120px; height: 120px; bottom: -20px; right: -20px; }

    .hero h1.section-title {
        font-size: 1.8rem;
    }

    .hero p.lead {
        font-size: 1rem;
    }

    .d-flex.gap-3.mt-4 {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .kpi {
        margin-bottom: 1rem;
    }
    .hero .swiper {
    width: 100%;
    min-height: 200px;
    }
    #home .row {
    margin-left: 0;
    margin-right: 0;
}
#home {
  overflow: hidden;
}

}