*{box-sizing:border-box}

:root{
--pe-forest:#183a32;
--pe-forest-2:#21483e;
--pe-botanical:#3f7d5a;
--pe-sage:#789b87;
--pe-sage-light:#dde9e1;
--pe-gold:#c6a15b;
--pe-gold-light:#f1e7d0;
--pe-cream:#f7f4ec;
--pe-white:#ffffff;
--pe-text:#26332d;
--pe-muted:#718078;
--pe-border:#e5e9e5;
--pe-danger:#b85c55;
--pe-shadow:0 10px 30px rgba(24,58,50,.10);
--pe-glow:0 0 0 1px rgba(198,161,91,.20),0 8px 25px rgba(63,125,90,.22);
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:
radial-gradient(circle at 90% 5%,rgba(120,155,135,.12),transparent 25%),
linear-gradient(135deg,#f7f9f5 0%,#f5f6f8 55%,#f2f5f1 100%);
color:var(--pe-text);
}


/* =========================
   DASHBOARD NAVIGATION SIDEBAR
========================= */

.pe-navigation-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    padding: 25px 17px;

    background:
        radial-gradient(circle at 15% 10%, rgba(120,155,135,.18), transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(198,161,91,.10), transparent 28%),
        linear-gradient(180deg, var(--pe-forest) 0%, #122d27 100%);

    color: var(--pe-white);
    border-right: 1px solid rgba(198,161,91,.22);
    box-shadow: 8px 0 30px rgba(18,45,39,.18);

    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    scrollbar-width: thin;
    scrollbar-color: #b88a25 #07563f;
}

/* Brand */

.pe-navigation-sidebar h3 {
    margin: 0 8px 6px;
    color: var(--pe-white);
    font-size: 18px;
    letter-spacing: .8px;
    font-weight: 700;
}

.pe-navigation-sidebar h3::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--pe-gold), transparent);
    border-radius: 5px;
}

.pe-navigation-sidebar p {
    margin: 14px 8px 22px;
    color: #cbd8d1;
    font-size: 13px;
}

/* Menu links */

.pe-navigation-sidebar a {
    position: relative;
    display: flex;
    align-items: center;
    color: #edf4ef;
    text-decoration: none;
    padding: 12px 14px;
    margin: 5px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .15px;
    border: 1px solid transparent;
    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.pe-navigation-sidebar a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 25%;
    width: 3px;
    height: 50%;
    border-radius: 0 4px 4px 0;
    background: transparent;
    transition:
        background .25s ease,
        box-shadow .25s ease,
        height .25s ease;
}

.pe-navigation-sidebar a:hover {
    color: #ffffff;
    background: linear-gradient(
        90deg,
        rgba(63,125,90,.34),
        rgba(120,155,135,.14)
    );
    border-color: rgba(198,161,91,.25);
    box-shadow:
        0 0 0 1px rgba(198,161,91,.08),
        0 6px 20px rgba(63,125,90,.22),
        inset 0 0 18px rgba(255,255,255,.025);
    transform: translateX(4px);
}

.pe-navigation-sidebar a:hover::before {
    height: 70%;
    background: var(--pe-gold);
    box-shadow: 0 0 10px rgba(198,161,91,.65);
}

/* Admin section */

.pe-navigation-sidebar hr {
    border: 0;
    height: 1px;
    margin: 20px 8px 12px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(198,161,91,.45),
        transparent
    );
}

.pe-navigation-sidebar strong {
    color: var(--pe-gold-light);
    font-size: 11px;
    letter-spacing: 1.2px;
}

/* Logout */

.pe-navigation-sidebar a[href*="logout"] {
    margin-top: 20px;
    color: #e7d5b1;
    border-color: rgba(198,161,91,.15);
}

.pe-navigation-sidebar a[href*="logout"]:hover {
    color: #ffffff;
    background: rgba(184,92,85,.18);
    border-color: rgba(184,92,85,.35);
    box-shadow:
        0 0 15px rgba(184,92,85,.20),
        inset 0 0 15px rgba(184,92,85,.06);
}

/* Scrollbar */

.pe-navigation-sidebar::-webkit-scrollbar {
    width: 8px;
}

.pe-navigation-sidebar::-webkit-scrollbar-track {
    background: #07563f;
}

.pe-navigation-sidebar::-webkit-scrollbar-thumb {
    background: #b88a25;
    border-radius: 10px;
    border: 2px solid #07563f;
}

.pe-navigation-sidebar::-webkit-scrollbar-thumb:hover {
    background: #e4bd5a;
}

/* Keep sidebar content inside its width */

.pe-navigation-sidebar > * {
    max-width: 100%;
}

/* Mobile */

@media (max-width: 700px) {
    .pe-navigation-sidebar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: auto;
        max-height: none;
        padding: 18px 14px;
        box-shadow: 0 5px 20px rgba(18,45,39,.15);
    }

    .pe-navigation-sidebar a {
        padding: 11px 13px;
    }

    .pe-navigation-sidebar a:hover {
        transform: none;
    }
}

/* =========================================================
   PRIMEESSENTIALS™ NAVIGATOR
   Scrollable Sidebar
   ========================================================= */

.pe-navigation-sidebar {
    max-height: 100vh !important;
    height: 100vh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;

    scrollbar-width: thin;
    scrollbar-color: #b88a25 #07563f;
}

/* Chrome / Edge / Safari */

.pe-navigation-sidebar::-webkit-scrollbar {
    width: 8px;
}

.pe-navigation-sidebar::-webkit-scrollbar-track {
    background: #07563f;
}

.pe-navigation-sidebar::-webkit-scrollbar-thumb {
    background: #b88a25;
    border-radius: 10px;
    border: 2px solid #07563f;
}

.pe-navigation-sidebar::-webkit-scrollbar-thumb:hover {
    background: #e4bd5a;
}

/* Keep navigator content from touching the scrollbar */

.pe-navigation-sidebar > * {
    max-width: 100%;
}
/* =========================
MAIN CONTENT
========================= */

body > main {
    margin-left: 250px;
    padding: 32px;
    min-height: 100vh;
}

.center{
margin:0;
max-width:480px;
padding:50px;
margin:auto;
}

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

.card{
position:relative;
background:rgba(255,255,255,.94);
border:1px solid var(--pe-border);
border-radius:14px;
padding:22px;
margin:0 0 20px;
box-shadow:var(--pe-shadow);
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}

.card:hover{
transform:translateY(-2px);
border-color:rgba(63,125,90,.22);
box-shadow:
0 14px 35px rgba(24,58,50,.13),
0 0 0 1px rgba(120,155,135,.08);
}

/* =========================
GRID / KPI
========================= */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
}

.kpi{
font-size:28px;
font-weight:bold;
color:var(--pe-forest);
}

/* =========================
TABLES
========================= */

table{
width:100%;
border-collapse:collapse;
background:var(--pe-white);
border-radius:12px;
overflow:hidden;
}

th{
padding:12px;
background:var(--pe-forest);
color:#fff;
font-size:13px;
text-align:left;
}

td{
padding:11px 12px;
border-bottom:1px solid var(--pe-border);
text-align:left;
}

tr:last-child td{
border-bottom:0;
}

tr:hover td{
background:rgba(221,233,225,.28);
}

/* =========================
FORMS
========================= */

input,
select,
button{
width:100%;
padding:11px 12px;
margin:6px 0;
border:1px solid #ccd6d0;
border-radius:8px;
font-family:inherit;
font-size:14px;
transition:
border-color .25s ease,
box-shadow .25s ease,
background .25s ease,
transform .20s ease;
}

input,
select{
background:#fff;
color:var(--pe-text);
}

input:focus,
select:focus{
outline:none;
border-color:var(--pe-botanical);
box-shadow:
0 0 0 3px rgba(63,125,90,.12),
0 0 15px rgba(63,125,90,.10);
}

/* =========================
BUTTONS
========================= */

button{
background:
linear-gradient(
135deg,
var(--pe-forest),
var(--pe-botanical)
);
color:#fff;
border:1px solid rgba(198,161,91,.20);
cursor:pointer;
font-weight:600;
letter-spacing:.2px;
box-shadow:0 5px 14px rgba(24,58,50,.18);
}

button:hover{
background:
linear-gradient(
135deg,
var(--pe-botanical),
var(--pe-forest)
);
border-color:rgba(198,161,91,.55);
box-shadow:
0 0 0 1px rgba(198,161,91,.15),
0 0 18px rgba(63,125,90,.42),
0 8px 22px rgba(24,58,50,.24);
transform:translateY(-2px);
}

button:active{
transform:translateY(0);
box-shadow:0 3px 10px rgba(24,58,50,.18);
}

/* =========================
STATUS / BADGES
========================= */

.ok{
color:#357653;
font-weight:600;
}

.badge{
display:inline-block;
padding:4px 9px;
border-radius:20px;
background:var(--pe-sage-light);
color:var(--pe-forest);
border:1px solid rgba(63,125,90,.15);
font-size:12px;
font-weight:600;
}

/* =========================
TREE
========================= */

.tree ul{
list-style:none;
padding-left:25px;
}

.tree li{
margin:7px 0;
}

/* =========================
LINKS IN CONTENT
========================= */

main a{
color:var(--pe-botanical);
transition:
color .2s ease,
text-shadow .2s ease;
}

main a:hover{
color:var(--pe-forest);
text-shadow:0 0 10px rgba(63,125,90,.20);
}

/* =========================
SCROLLBAR
========================= */

aside::-webkit-scrollbar{
width:6px;
}

aside::-webkit-scrollbar-track{
background:rgba(255,255,255,.03);
}

aside::-webkit-scrollbar-thumb{
background:rgba(198,161,91,.35);
border-radius:10px;
}

aside::-webkit-scrollbar-thumb:hover{
background:rgba(198,161,91,.60);
}

/* =========================
MOBILE
========================= */

@media(max-width:700px){


aside{
    position:static;
    width:100%;
    min-height:auto;
    padding:18px 14px;
    box-shadow:0 5px 20px rgba(18,45,39,.15);
}

aside a{
    padding:11px 13px;
}

aside a:hover{
    transform:none;
}

body > main {
    margin: 0;
    padding: 18px 15px;
}

.center{
    margin:0;
    max-width:480px;
    padding:30px 15px;
}

.grid{
    grid-template-columns:1fr;
}

.card{
    padding:18px;
}

table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
}


}

/* =========================================================
   PRIMEESSENTIALS™ NAVIGATOR
   Independent Sidebar Scrollbar
   ========================================================= */

aside {
    height: 100vh !important;
    max-height: 100vh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;

    scrollbar-width: auto !important;
    scrollbar-color: #b88a25 #07563f !important;
}

/* Chrome / Edge / Safari */

aside::-webkit-scrollbar {
    width: 12px !important;
}

aside::-webkit-scrollbar-track {
    background: #07563f !important;
}

aside::-webkit-scrollbar-thumb {
    background: #b88a25 !important;
    border-radius: 8px !important;
    border: 2px solid #07563f !important;
}

aside::-webkit-scrollbar-thumb:hover {
    background: #e4bd5a !important;
}


/* =========================================
   PRIMEESSENTIALS™ DASHBOARD
   FULL-PAGE HORIZONTAL SCROLLING
========================================= */

/* Add Members — horizontal table scrolling */
.table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table {
    min-width: 1100px;
}

/* Keep the dashboard content wider than the viewport
   when its contents require additional space */
body > main {
    min-width: 0;
    width: max-content;
    min-width: calc(100% - 250px);
    max-width: none;
}

/* Preserve normal sizing for dashboard cards and tables */
body > main .card,
body > main .grid {
    max-width: none;
}

/* Do not force tables to create their own scrollbar */
body > main table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}


        /* PRIMEESSENTIALS membership page visual override */

        body {
            background: #E8EFE8 !important;
            color: #26332D !important;
        }

        .page {
            background: transparent !important;
        }

        .header,
        .card {
            background: #FFFFFF !important;
            border-color: #D7C7A0 !important;
        }

        .header {
            border-left: 6px solid #C6A15B !important;
        }

        .header h1,
        .card-header h2,
        .member-code,
        .amount,
        .empty strong {
            color: #183A32 !important;
        }

        .card-header {
            background: #DDE9E1 !important;
            border-bottom: 2px solid #C6A15B !important;
        }

        table thead th {
            background: #183A32 !important;
            color: #F1E7D0 !important;
        }

        .count,
        .badge-starter {
            background: #F1E7D0 !important;
            color: #674F20 !important;
            border: 1px solid #C6A15B !important;
        }

        .btn-approve {
            background: #183A32 !important;
            color: #F1E7D0 !important;
            border: 1px solid #C6A15B !important;
        }

        .btn-reject {
            background: #FBE9E7 !important;
            color: #8F3530 !important;
        }