/* =====================================================================
   GlobalX theme (black + orange / gold)  -  based on the GlobalX brochure
   Same class names as glanterra.css so pages can switch by changing the
   stylesheet link only. Tailwind "lime" utilities are remapped to orange
   in each page's tailwind.config.
   ===================================================================== */

:root {
    --gl-black: #070706;
    --gl-surface: #111010;
    --gl-surface-2: #181613;
    --gl-lime: #FFB02E;            /* brand orange (kept variable name for compatibility) */
    --gl-lime-soft: #FFC24D;
    --gl-green: #E08A0F;           /* deeper orange */
    --gl-green-deep: #B86D08;
    --gl-border: rgba(255, 176, 46, 0.32);
    --gl-border-strong: rgba(255, 176, 46, 0.65);
    --gx-orange: #FFB02E;
    --gx-orange-rgb: 247, 169, 40;
}

html, body {
    background-color: var(--gl-black);
    color: #fff;
}

/* ---------- Ambient background: black with warm gold glow ---------- */
.gl-bg {
    background:
        radial-gradient(1100px 640px at 88% -5%, rgba(255,176,46,0.55) 0%, rgba(230,140,30,0.28) 30%, rgba(7,7,6,0) 68%),
        radial-gradient(900px 520px at 5% 105%, rgba(255,176,46,0.38) 0%, rgba(200,120,25,0.16) 35%, rgba(7,7,6,0) 68%),
        radial-gradient(700px 460px at 50% 55%, rgba(200,130,30,0.14) 0%, rgba(7,7,6,0) 70%),
        linear-gradient(180deg, #0a0907 0%, #100d09 55%, #1d150a 100%);
}
.gl-grid {
    background-image:
        linear-gradient(rgba(255,176,46,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,176,46,0.09) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 75%);
}
.gl-dot {
    position: absolute;
    border-radius: 9999px;
    background: var(--gx-orange);
    box-shadow: 0 0 14px var(--gx-orange), 0 0 34px rgba(255,176,46,0.7);
    animation: gl-float 9s ease-in-out infinite;
    opacity: 0.8;
}
@keyframes gl-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.45; }
    50% { transform: translateY(-22px) scale(1.25); opacity: 0.9; }
}

/* ---------- Components ---------- */
.gl-panel {
    background: linear-gradient(160deg, rgba(26,22,16,0.92) 0%, rgba(12,10,8,0.90) 100%);
    border: 1px solid var(--gl-border);
    box-shadow: 0 0 50px rgba(255,176,46,0.10), 0 20px 40px rgba(0,0,0,0.55);
}
.gl-panel-strong {
    border-color: var(--gl-border-strong);
    box-shadow: 0 0 90px rgba(255,176,46,0.22), 0 0 0 1px rgba(255,176,46,0.15) inset, 0 30px 60px rgba(0,0,0,0.6);
}
.gl-title {
    position: relative;
    padding-left: 16px;
}
.gl-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--gx-orange);
    box-shadow: 0 0 10px var(--gx-orange);
}
.gl-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--gx-orange);
    color: #1a1000;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: .375rem;
}
.gl-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,176,46,0.25);
    color: #fff;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.gl-input::placeholder { color: rgba(255,255,255,0.3); }
.gl-input:focus {
    outline: none;
    border-color: var(--gx-orange);
    background: rgba(255,176,46,0.06);
    box-shadow: 0 0 0 3px rgba(255,176,46,0.20), 0 0 24px rgba(255,176,46,0.25);
}
.gl-input[readonly] {
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}
/* Primary button: orange -> gold gradient, dark text (as in brochure) */
.gl-btn {
    background: linear-gradient(90deg, #FFD166 0%, #FFB02E 50%, #F59A14 100%);
    color: #1a1000;
    box-shadow: 0 10px 34px rgba(255,176,46,0.45), 0 0 0 1px rgba(255,255,255,0.25) inset;
    transition: transform .15s, box-shadow .2s, filter .2s;
}
.gl-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 44px rgba(255,176,46,0.60), 0 0 0 1px rgba(255,255,255,0.3) inset;
}
.gl-btn:active { transform: translateY(0); }
.gl-btn-ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    transition: all .2s;
}
.gl-btn-ghost:hover {
    border-color: var(--gx-orange);
    color: #fff;
    background: rgba(247,169,40,0.08);
}
.gl-icon-badge {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(247,169,40,0.12);
    border: 1px solid rgba(247,169,40,0.45);
    color: var(--gx-orange);
    box-shadow: 0 0 18px rgba(247,169,40,0.15);
}
/* Checklist tick: orange square with arrow/check like the brochure */
.gl-tick {
    width: 22px; height: 22px;
    border: 2px solid var(--gx-orange);
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gx-orange);
    flex-shrink: 0;
}

/* Sidebar (dashboard) */
.gl-sidebar {
    background: linear-gradient(180deg, #0d0c0a 0%, #070706 100%);
    border-right: 1px solid var(--gl-border);
}
.gl-nav-link {
    color: rgba(255,255,255,0.75);
    border: 1px solid transparent;
    transition: all .2s;
}
.gl-nav-link:hover {
    color: #fff;
    background: rgba(247,169,40,0.06);
}
.gl-nav-link.active {
    color: #fff;
    background: rgba(247,169,40,0.10);
    border-color: var(--gl-border-strong);
    box-shadow: 0 0 20px rgba(247,169,40,0.10);
}
.gl-nav-link.active i { color: var(--gx-orange); }
.gl-nav-sub {
    color: rgba(255,255,255,0.55);
    border-left: 1px solid rgba(247,169,40,0.15);
    transition: all .2s;
}
.gl-nav-sub:hover {
    color: var(--gx-orange);
    border-left-color: var(--gx-orange);
    background: rgba(247,169,40,0.05);
}

/* Checkbox / radio accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--gx-orange); }

/* Select options on dark */
select option { background-color: var(--gl-surface); color: #fff; }

/* Scrollbars */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(247,169,40,0.25); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(247,169,40,0.45); }

/* Pagination (used by inner pages) */
.pagination {
    display: flex;
    justify-content: center;
    padding-left: 0;
    list-style: none;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.page-item .page-link {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.12);
    background-color: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    display: block;
    font-weight: 700;
    font-size: .875rem;
}
.page-item.active .page-link {
    background: var(--gx-orange);
    border-color: var(--gx-orange);
    color: #1a1000;
    cursor: default;
}
.page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: rgba(247,169,40,0.10);
    border-color: var(--gx-orange);
    color: #fff;
}
.page-item.disabled .page-link {
    color: rgba(255,255,255,0.25);
    pointer-events: none;
    cursor: auto;
}

/* =====================================================================
   COMPAT LAYER for inner pages still using the old purple theme.
   ===================================================================== */
[class*="bg-[#1a0b2e]"],
[class*="bg-[#0f0620]"],
[class*="bg-[#150d24]"],
[class*="border-[#130820]"] { background-color: #0d0c0a !important; }

[class*="bg-[#251b36]"],
[class*="bg-[#1E1B2E]"],
[class*="bg-[#1e1b2e]"],
[class*="bg-[#2a1b3d]"] { background-color: rgba(20, 18, 14, 0.88) !important; }

[class*="from-[#2a1b3d]"] { --tw-gradient-from: #1a1610 !important; }
[class*="from-[#1a0b2e]"] { --tw-gradient-from: #0d0c0a !important; }
[class*="to-[#1a0b2e]"]   { --tw-gradient-to: #0d0c0a !important; }