/* ==========================================================================
   PERFECT WORLD - DASHBOARD & PANEL WHITE & GOLD THEME
   Synchronized with the landing page design aesthetic
   ========================================================================== */

@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 {
    --pw-gold-primary: #d4af37;
    --pw-gold-light: #f7df94;
    --pw-gold-dark: #aa8214;
    --pw-gold-darker: #8b680e;
    --pw-gold-gradient: linear-gradient(135deg, #f7df94 0%, #d4af37 50%, #aa8214 100%);
    --pw-gold-gradient-hover: linear-gradient(135deg, #fff2be 0%, #e6c35c 50%, #c49923 100%);
    --pw-gold-border: rgba(212, 175, 55, 0.35);
    --pw-gold-glow: rgba(212, 175, 55, 0.3);

    /* Override system palette to default Gold */
    --color-gold: #d4af37;
    --color-gold-50: #fefce8;
    --color-gold-100: #fef9c3;
    --color-gold-light: #e5c07b;
    --color-gold-lighter: #f7df94;
    --color-gold-dark: #aa8214;
    --color-gold-darker: #8b680e;

    --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;
}

/* ==========================================================================
   SIDEBAR (Light White & Gold Theme)
   ========================================================================== */
aside {
    background-color: #ffffff !important;
    border-right: 1px solid rgba(212, 175, 55, 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(212, 175, 55, 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(212, 175, 55, 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(212, 175, 55, 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: #1a1200 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35) !important;
}

aside nav a.bg-primary svg,
aside nav .bg-primary svg {
    color: #1a1200 !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(212, 175, 55, 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(212, 175, 55, 0.28) !important;
}

/* Server Brand Name in Navbar */
header a[href*="dashboard"] {
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    color: #aa8214 !important;
}

.dark header a[href*="dashboard"] {
    color: #d4af37 !important;
}

/* Balance Pill Badge */
header .relative span {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 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(212, 175, 55, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dark header .relative span {
    background: rgba(212, 175, 55, 0.18);
    color: var(--pw-gold-light) !important;
}

/* Character Selector */
header button.border,
header .border-primary {
    border-color: rgba(212, 175, 55, 0.4) !important;
    border-radius: 9999px !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(212, 175, 55, 0.4);
}

/* ==========================================================================
   CARDS, PANELS & WIDGETS
   ========================================================================== */
.bg-white,
.dark\:bg-darker,
div[class*="bg-white"] {
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.2) !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(212, 175, 55, 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(212, 175, 55, 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: #1a1200 !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(212, 175, 55, 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;
}

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: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6) !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(212, 175, 55, 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(212, 175, 55, 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(212, 175, 55, 0.3) !important;
}

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

thead th {
    background-color: rgba(212, 175, 55, 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(212, 175, 55, 0.2) !important;
}

.dark thead th {
    background-color: rgba(212, 175, 55, 0.12) !important;
    color: var(--pw-gold-light) !important;
}

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

tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.04) !important;
}

.dark tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.08) !important;
}

/* Badges */
.badge-gold,
span[class*="text-yellow"] {
    color: var(--pw-gold-dark) !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(212, 175, 55, 0.45) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(212, 175, 55, 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(212, 175, 55, 0.5) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(212, 175, 55, 0.2) !important;
}

/* Auth Brand Heading */
a[href*="rocpw"],
a[class*="text-3xl"] {
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    color: #d4af37 !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;
}