/* ===== Growfact MLM - Global Styles ===== */
html, body { overflow-x: hidden; }
:root {
    --gf-green: #00381b;
    --gf-green-light: #006633;
    --gf-orange: #ef7f1a;
    --gf-orange-light: #f5a623;
    --gf-sidebar-width: 250px;
}

/* ===== User Navbar ===== */
.gf-navbar {
    background: var(--gf-green);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 1050;
}
.gf-navbar .navbar-brand img { filter: brightness(1.1); }
.gf-navbar .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; font-size: .9rem; white-space: nowrap; padding: .5rem .6rem !important; }
.gf-navbar .nav-link:hover { color: var(--gf-orange) !important; }
.gf-navbar .btn-warning { background: var(--gf-orange); border-color: var(--gf-orange); font-weight: 600; }
.gf-navbar .navbar-nav { flex-wrap: nowrap; gap: 0; }

/* ===== Main Content ===== */
.gf-main { padding-block-start: 80px; min-block-size: calc(100vh - 80px); background: #f7f8fa; }

/* ===== Footer ===== */
.gf-footer { background: var(--gf-green); }

/* ===== Stat Cards ===== */
.gf-stat-card { border: none; border-radius: 12px; overflow: hidden; transition: transform .15s; }
.gf-stat-card:hover { transform: translateY(-2px); }
.gf-stat-card .card-body { padding: 1.25rem; }
.gf-stat-card .stat-icon { inline-size: 48px; block-size: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

/* ===== Animated Two-Color Header/Sidebar ===== */
@keyframes headerGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Admin Sidebar ===== */
.gf-sidebar {
    width: var(--gf-sidebar-width);
    height: 100vh;
    background: linear-gradient(160deg, var(--gf-green) 0%, var(--gf-green-light, #004d27) 35%, var(--gf-green) 65%, var(--gf-green-light, #005a2e) 100%);
    background-size: 300% 300%;
    animation: headerGradientShift 8s ease infinite;
    position: fixed;
    left: 0; top: 0;
    z-index: 1040;
    overflow: hidden;
    transition: transform .3s;
    border-right: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--gf-orange), var(--gf-orange-light, #f5a623), var(--gf-orange)) 1;
    display: flex;
    flex-direction: column;
}
.gf-sidebar .nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.gf-sidebar .nav .nav-item {
    flex-shrink: 0;
    width: 100%;
}
.gf-sidebar .nav::-webkit-scrollbar { width: 4px; }
.gf-sidebar .nav::-webkit-scrollbar-track { background: transparent; }
.gf-sidebar .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.gf-sidebar .nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }
/* Sidebar hanging logo – overlaps topbar */
.gf-sidebar-logo {
    position: relative;
    text-align: center;
    margin: -1rem -1rem 0.5rem -1rem;
    padding: 0 10px 4px;
    z-index: 1050;
    flex-shrink: 0;
}
.gf-sidebar-logo a { display: inline-block; }
.gf-sidebar-logo img { max-inline-size: 120px; block-size: auto; display: block; margin: 0 auto; }

.gf-sidebar .nav-link { border-radius: 6px; margin-block-end: 2px; font-size: .9rem; transition: background .2s, color .2s; }
.gf-sidebar .nav-link:hover { background: rgba(255,255,255,.12); color: var(--gf-orange) !important; }
.gf-sidebar .nav-link.active { background: var(--gf-orange); color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px rgba(239,127,26,.35); }

.gf-admin-header {
    block-size: 56px;
    background: linear-gradient(135deg, var(--gf-green, #00381b) 0%, var(--gf-green-light, #004d27) 40%, var(--gf-green, #00381b) 60%, var(--gf-green-light, #005a2e) 100%) !important;
    background-size: 300% 300% !important;
    animation: headerGradientShift 8s ease infinite;
    border-block-end: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--gf-orange, #ef7f1a), var(--gf-orange-light, #f5a623), var(--gf-orange, #ef7f1a), var(--gf-orange-light, #f5a623)) 1 !important;
}
.gf-admin-header,
.gf-admin-header > *,
.gf-admin-header > span,
.gf-admin-header > button,
.gf-admin-header .dropdown > a,
.gf-admin-header .dropdown > a > span,
.gf-admin-header .dropdown-toggle::after {
    color: #fff !important;
}
.gf-admin-header .dropdown-menu {
    color: #333 !important;
}
.gf-admin-header .dropdown-menu .dropdown-item {
    color: #333 !important;
}
.gf-admin-header .dropdown-menu .dropdown-item:hover {
    color: #111 !important;
    background: #f1f5f9;
}
.gf-admin-header .dropdown-menu .dropdown-item.text-danger {
    color: #dc3545 !important;
}
.gf-admin-header .dropdown-menu .fw-bold,
.gf-admin-header .dropdown-menu .text-muted {
    color: inherit !important;
}
.gf-admin-header .dropdown-menu .text-muted {
    color: #6c757d !important;
}

.gf-user-topbar {
    block-size: 56px;
    box-shadow: none !important;
    background: linear-gradient(135deg, var(--gf-green, #00381b) 0%, var(--gf-green-light, #004d27) 40%, var(--gf-green, #00381b) 60%, var(--gf-green-light, #005a2e) 100%) !important;
    background-size: 300% 300% !important;
    animation: headerGradientShift 8s ease infinite;
    border-block-end: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--gf-orange, #ef7f1a), var(--gf-orange-light, #f5a623), var(--gf-orange, #ef7f1a), var(--gf-orange-light, #f5a623)) 1 !important;
}
.gf-user-topbar,
.gf-user-topbar > *,
.gf-user-topbar > span,
.gf-user-topbar > button,
.gf-user-topbar .dropdown > a,
.gf-user-topbar .dropdown > a > span,
.gf-user-topbar .dropdown-toggle::after {
    color: #fff !important;
}
.gf-user-topbar .dropdown-menu {
    color: #333 !important;
}
.gf-user-topbar .dropdown-menu .dropdown-item {
    color: #333 !important;
}
.gf-user-topbar .dropdown-menu .dropdown-item:hover {
    color: #111 !important;
    background: #f1f5f9;
}
.gf-user-topbar .dropdown-menu .dropdown-item.text-danger {
    color: #dc3545 !important;
}
.gf-user-topbar .dropdown-menu .fw-bold,
.gf-user-topbar .dropdown-menu .text-muted {
    color: inherit !important;
}
.gf-user-topbar .dropdown-menu .text-muted {
    color: #6c757d !important;
}

#adminWrapper > .flex-grow-1 {
    margin-inline-start: var(--gf-sidebar-width);
    max-inline-size: calc(100vw - var(--gf-sidebar-width));
    overflow-x: hidden;
}

/* ===== User Sidebar Layout ===== */
.gf-user-content { min-block-size: 100vh; background: #f7f8fa; overflow-x: hidden; }
#userWrapper > .flex-grow-1 {
    margin-inline-start: var(--gf-sidebar-width);
    max-inline-size: calc(100vw - var(--gf-sidebar-width));
    overflow-x: hidden;
}

/* Sidebar overlay for mobile close */
.gf-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
}
.sidebar-open .gf-sidebar-overlay { display: block; }

@media (max-width: 991.98px) {
    .gf-sidebar { transform: translateX(-100%); }
    .sidebar-open .gf-sidebar { transform: translateX(0); z-index: 1040; }
    #adminWrapper > .flex-grow-1 { margin-inline-start: 0; max-inline-size: 100vw; }
    #userWrapper > .flex-grow-1 { margin-inline-start: 0; max-inline-size: 100vw; }
    .gf-user-content .container,
    .gf-user-content .container-fluid { padding-inline-start: 0; padding-inline-end: 0; }
}

/* ===== Genealogy Tree ===== */
.tree-container { overflow-x: auto; padding: 20px; }
.tree-node { display: inline-block; text-align: center; vertical-align: top; }
.tree-person {
    display: inline-block;
    min-inline-size: 100px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 2px solid #dee2e6;
    font-size: .82rem;
    line-height: 1.3;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    cursor: pointer;
    transition: border-color .15s;
}
.tree-person:hover { border-color: var(--gf-green); }
.tree-person.active { border-color: var(--gf-green-light); background: #e6f4ed; }
.tree-person.inactive { border-color: #adb5bd; background: #f8f9fa; color: #6c757d; }
.tree-person .user-id { font-weight: 600; color: var(--gf-green); }
.tree-person .badge { font-size: .65rem; }
.tree-children { display: flex; justify-content: center; gap: 10px; padding-block-start: 20px; position: relative; }
.tree-children::before {
    content: '';
    position: absolute;
    inset-block-start: 0; inset-inline-start: 25%; inset-inline-end: 25%;
    border-block-start: 2px solid #dee2e6;
}

/* ===== Misc ===== */
.bg-dark-green { background: var(--gf-green) !important; }
.text-gf-orange { color: var(--gf-orange) !important; }
.btn-gf { background: var(--gf-green); color: #fff; border: none; }
.btn-gf:hover { background: var(--gf-green-light); color: #fff; }
.btn-gf-orange { background: var(--gf-orange); color: #fff; border: none; }
.btn-gf-orange:hover { background: var(--gf-orange-light); color: #fff; }

.card { border: none; border-radius: 10px; }
.card.shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }

.copy-btn { cursor: pointer; }
.copy-btn.copied { color: var(--gf-green) !important; }

/* ===== Tables ===== */
.table-hover tbody tr:hover { background: #f0fdf4; }
.table th { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .3px; }
.table td { vertical-align: middle; }

/* ===== Quick Actions ===== */
.quick-action { text-decoration: none; text-align: center; padding: 1rem; border-radius: 10px; background: #fff; border: 1px solid #e9ecef; transition: box-shadow .15s; display: block; }
.quick-action:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.quick-action i { font-size: 1.8rem; color: var(--gf-green); }