/* ==========================================================================
   PERFECT WORLD - DASHBOARD & PANEL WHITE & GOLD THEME
   Synchronized with the landing page design aesthetic
   High-Contrast Amber-Gold Palette (WCAG AA/AAA Compliant)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Primary Accent & Gold Palettes */
    --pw-gold-primary: #d97706; /* Amber 600 - rich warm gold */
    --pw-gold-light: #fbbf24; /* Amber 400 - bright gold for dark mode */
    --pw-gold-dark: #b45309; /* Amber 700 - high contrast (5.14:1) on white */
    --pw-gold-darker: #78350f; /* Amber 900 - deep bronze */
    --pw-gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    --pw-gold-gradient-hover: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #92400e 100%);
    --pw-gold-border: rgba(217, 119, 6, 0.35);
    --pw-gold-glow: rgba(217, 119, 6, 0.25);

    /* Override system palette to default Gold / Amber */
    --color-gold: #d97706;
    --color-gold-50: #fffbeb;
    --color-gold-100: #fef3c7;
    --color-gold-light: #f59e0b;
    --color-gold-lighter: #b45309;
    --color-gold-dark: #b45309;
    --color-gold-darker: #78350f;

    --color-primary: var(--color-gold);
    --color-primary-50: var(--color-gold-50);
    --color-primary-100: var(--color-gold-100);
    --color-primary-light: var(--color-gold-light);
    --color-primary-lighter: var(--color-gold-lighter);
    --color-primary-dark: var(--color-gold-dark);
    --color-primary-darker: var(--color-gold-darker);

    --light: #f8fafc;
    --dark: #0f172a;
    --darker: #0b1324;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & BASE STYLES
   ========================================================================== */
body {
    font-family: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--light) !important;
    color: #1e293b;
}

.dark body,
.dark {
    color: #e2e8f0;
}

/* Headers */
h1, h2, h3, h4, .text-2xl, .text-xl, .font-semibold {
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: 0.5px;
}

/* Global Gold / Primary text utility classes with high contrast */
.text-primary,
.text-primary-dark,
.text-primary-lighter,
.text-gold {
    color: var(--pw-gold-dark) !important;
}

.text-primary-light {
    color: var(--pw-gold-dark) !important;
}

.dark .text-primary,
.dark .text-primary-light,
.dark .text-primary-lighter,
.dark .text-gold {
    color: var(--pw-gold-light) !important;
}

.dark .text-primary-dark {
    color: var(--pw-gold-primary) !important;
}

/* Links with primary text */
a.text-primary:hover,
a.text-primary-dark:hover {
    color: var(--pw-gold-darker) !important;
}

.dark a.text-primary:hover,
.dark a.text-primary-light:hover {
    color: #fef08a !important;
}

/* ==========================================================================
   SIDEBAR (Light White & Gold Theme)
   ========================================================================== */
aside {
    background-color: #ffffff !important;
    border-right: 1px solid rgba(217, 119, 6, 0.22) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.02);
}

.dark aside {
    background-color: #0b1324 !important;
    border-right: 1px solid rgba(217, 119, 6, 0.25) !important;
}

/* Sidebar Links */
aside nav a,
aside nav button,
.side-bar-link {
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.25s ease !important;
    padding: 10px 14px !important;
}

aside nav a:hover,
aside nav button:hover {
    background-color: rgba(217, 119, 6, 0.12) !important;
    color: var(--pw-gold-dark) !important;
    transform: translateX(3px);
}

.dark aside nav a:hover,
.dark aside nav button:hover {
    background-color: rgba(217, 119, 6, 0.18) !important;
    color: var(--pw-gold-light) !important;
}

/* Active Link */
aside nav a.bg-primary,
aside nav .bg-primary,
aside nav a[aria-current="page"] {
    background: var(--pw-gold-gradient) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.35) !important;
}

aside nav a.bg-primary svg,
aside nav .bg-primary svg {
    color: #ffffff !important;
}

/* ==========================================================================
   TOP NAVBAR
   ========================================================================== */
header.sticky {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(217, 119, 6, 0.25) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.dark header.sticky {
    background-color: rgba(11, 19, 36, 0.95) !important;
    border-bottom: 1px solid rgba(217, 119, 6, 0.28) !important;
}

/* Server Brand Name in Navbar */
header a[href*="dashboard"] {
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    color: var(--pw-gold-dark) !important;
}

.dark header a[href*="dashboard"] {
    color: var(--pw-gold-light) !important;
}

/* Balance Pill Badge */
header .relative span {
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--pw-gold-dark) !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dark header .relative span {
    background: rgba(217, 119, 6, 0.2);
    color: var(--pw-gold-light) !important;
}

/* Character Selector & Header Buttons */
header button.border,
header .border-primary {
    border-color: rgba(217, 119, 6, 0.4) !important;
    border-radius: 9999px !important;
}

header button.text-primary-lighter,
header a.text-primary-lighter,
header button[class*="text-primary-lighter"] {
    color: var(--pw-gold-dark) !important;
}

.dark header button.text-primary-lighter,
.dark header a.text-primary-lighter,
.dark header button[class*="text-primary-lighter"] {
    color: var(--pw-gold-light) !important;
}

/* User Avatar Ring */
header img.rounded-full,
header img.img-circle {
    border: 2px solid var(--pw-gold-primary) !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

/* ==========================================================================
   CARDS, PANELS & WIDGETS
   ========================================================================== */
.bg-white,
.dark\:bg-darker,
div[class*="bg-white"] {
    border-radius: 16px;
    border: 1px solid rgba(217, 119, 6, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.dark .bg-white,
.dark .dark\:bg-darker,
.dark div[class*="bg-white"] {
    background-color: #0b1324 !important;
    border: 1px solid rgba(217, 119, 6, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Content Headers */
main .border-b,
main div[class*="border-b"] {
    border-bottom: 1px solid rgba(217, 119, 6, 0.2) !important;
}

/* ==========================================================================
   BUTTONS (Golden Luxury Gradient)
   ========================================================================== */
button.bg-primary,
a.bg-primary,
.btn-primary,
button[type="submit"]:not(.bg-red-600):not(.bg-gray-600):not(.bg-danger) {
    background: var(--pw-gold-gradient) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

button.bg-primary:hover,
a.bg-primary:hover,
.btn-primary:hover,
button[type="submit"]:not(.bg-red-600):not(.bg-gray-600):not(.bg-danger):hover {
    background: var(--pw-gold-gradient-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================================================
   FORM INPUTS & SELECTS
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
    font-size: 0.92rem !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--pw-gold-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25) !important;
    outline: none !important;
}

.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark select,
.dark textarea {
    background-color: #0f172a !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: #ffffff !important;
}

.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: var(--pw-gold-primary) !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3) !important;
}

/* ==========================================================================
   TABLES & BADGES
   ========================================================================== */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

thead th {
    background-color: rgba(217, 119, 6, 0.08) !important;
    color: var(--pw-gold-dark) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(217, 119, 6, 0.2) !important;
}

.dark thead th {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: var(--pw-gold-light) !important;
}

tbody tr {
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background-color: rgba(217, 119, 6, 0.04) !important;
}

.dark tbody tr:hover {
    background-color: rgba(217, 119, 6, 0.08) !important;
}

/* Badges */
.badge-gold,
span[class*="text-yellow"] {
    color: var(--pw-gold-dark) !important;
}

.dark .badge-gold,
.dark span[class*="text-yellow"] {
    color: var(--pw-gold-light) !important;
}

/* ==========================================================================
   AUTH PAGES (Login, Register, Forgot Password)
   ========================================================================== */
body.antialiased > div > div.min-h-screen,
.auth-bg-frame {
    background: url('/img/landing/hero_sky_bg.webp') center center / cover no-repeat !important;
    position: relative;
}

body.antialiased > div > div.min-h-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.6) 0%, rgba(10, 18, 35, 0.85) 100%);
    pointer-events: none;
}

/* Center Auth Box */
body.antialiased > div > div.min-h-screen > div.w-full,
body.antialiased main > div.w-full {
    position: relative;
    z-index: 10;
    background-color: #ffffff !important;
    border: 1px solid rgba(217, 119, 6, 0.45) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(217, 119, 6, 0.15) !important;
    padding: 32px 28px !important;
    max-width: 440px !important;
}

.dark body.antialiased > div > div.min-h-screen > div.w-full,
.dark body.antialiased main > div.w-full {
    background-color: #0b1324 !important;
    border: 1px solid rgba(217, 119, 6, 0.5) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(217, 119, 6, 0.2) !important;
}

/* Auth Brand Heading */
a[href*="rocpw"],
a[class*="text-3xl"] {
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    color: var(--pw-gold-primary) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Loading Screen */
#loading,
div[x-ref="loading"] {
    background: #0b1324 !important;
}

#loading svg,
div[x-ref="loading"] svg {
    color: var(--pw-gold-primary) !important;
}