/* ============================================
   1Mail API - Gold Luxury Theme (Dual Mode)
   ============================================ */

/* === Google Font Import === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* === Root Variables (Default: Dark Mode) === */
:root {
    --head-font: 'Inter', sans-serif !important;
    --body-font: 'Inter', sans-serif !important;
    --gold: #d4af37;
    --gold-light: #f0d78c;
    --gold-dark: #b8860b;
    --gold-glow: rgba(212, 175, 55, 0.15);
    
    /* Dark Mode Colors */
    --dark-bg: #0a0a0f;
    --dark-surface: #12121a;
    --dark-card: #1a1a25;
    --dark-border: rgba(212, 175, 55, 0.12);
    --text-primary: #f0ece2;
    --text-secondary: #8a8a9a;
}

/* === Light Mode Variables === */
html[data-mode="light"] {
    --dark-bg: #f8f9fa;        /* Light background */
    --dark-surface: #ffffff;   /* Pure white surface */
    --dark-card: #ffffff;      /* White cards */
    --dark-border: rgba(212, 175, 55, 0.3); /* Stronger gold border */
    --text-primary: #1a1a24;   /* Dark text */
    --text-secondary: #64748b; /* Medium gray text */
    --gold-glow: rgba(212, 175, 55, 0.08);
}

/* === Global Reset === */
body {
    background: var(--dark-bg) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === Sidebar === */
/* Default (Dark) */
.default-theme .grow > div:first-child {
    background: linear-gradient(180deg, #0d0d12 0%, #111118 50%, #0d0d12 100%) !important;
    border-right: 1px solid var(--dark-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    position: relative;
}
/* Light Mode Sidebar */
html[data-mode="light"] .default-theme .grow > div:first-child {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 50%, #f9fafb 100%) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
}

.default-theme .grow > div:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    opacity: 0.3;
}
html[data-mode="light"] .default-theme .grow > div:first-child::before {
    opacity: 0.6;
}

/* === Logo Section === */
.default-theme .grow > div:first-child > div:first-child {
    margin-bottom: 2rem;
    padding: 1.5rem;
}

.default-theme .grow > div:first-child > div:first-child img {
    filter: brightness(1.1) drop-shadow(0 0 20px rgba(212, 175, 55, 0.15));
    transition: all 0.4s ease;
}
html[data-mode="light"] .default-theme .grow > div:first-child > div:first-child img {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.1));
}

.default-theme .grow > div:first-child > div:first-child img:hover {
    filter: brightness(1.2) drop-shadow(0 0 30px rgba(212, 175, 55, 0.25));
    transform: scale(1.02);
}

/* === Sidebar Form Inputs === */
.app-action input[type="text"],
.app-action select,
.in-app-actions input[type="text"],
.in-app-actions select,
.app-action .block.appearance-none,
.in-app-actions .block.appearance-none {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}
html[data-mode="light"] .app-action input[type="text"],
html[data-mode="light"] .app-action select,
html[data-mode="light"] .in-app-actions input[type="text"],
html[data-mode="light"] .in-app-actions select,
html[data-mode="light"] .app-action .block.appearance-none,
html[data-mode="light"] .in-app-actions .block.appearance-none {
    background: #f1f5f9 !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

.app-action input[type="text"]:focus,
.in-app-actions input[type="text"]:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1), 0 0 20px rgba(212, 175, 55, 0.05) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    outline: none !important;
}
html[data-mode="light"] .app-action input[type="text"]:focus,
html[data-mode="light"] .in-app-actions input[type="text"]:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

.app-action input::placeholder,
.in-app-actions input::placeholder,
.in-app-actions .block.appearance-none {
    color: rgba(240, 236, 226, 0.35) !important;
}
html[data-mode="light"] .app-action input::placeholder,
html[data-mode="light"] .in-app-actions input::placeholder,
html[data-mode="light"] .in-app-actions .block.appearance-none {
    color: #94a3b8 !important;
}

/* === Create Button (Gold Gradient) === */
.app-action input[type="submit"][value],
input#create {
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #f0d78c 100%) !important;
    color: #0d0d0d !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.app-action input[type="submit"][value]:hover,
input#create:hover {
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.app-action input[type="submit"][value]:active,
input#create:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.2);
}

/* === Random Button (Dark Gold Outline) === */
input#random {
    background: transparent !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    border: 1.5px solid var(--gold) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.08);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
}

input#random:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
    transform: translateY(-1px);
}
html[data-mode="light"] input#random:hover {
    background: rgba(212, 175, 55, 0.1) !important;
}

/* === Cancel Button === */
.app-action button.block.appearance-none {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
}
html[data-mode="light"] .app-action button.block.appearance-none {
    background: #f1f5f9 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

.app-action button.block.appearance-none:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: var(--gold) !important;
}

/* === Divider Lines === */
.app-action .divider .border-t-2,
.app-action .divider.mt-5,
.in-app-actions .divider {
    border-color: rgba(212, 175, 55, 0.1) !important;
}
html[data-mode="light"] .app-action .divider .border-t-2,
html[data-mode="light"] .app-action .divider.mt-5,
html[data-mode="light"] .in-app-actions .divider {
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* === Action Buttons Grid (Copy, Refresh, New, Delete) === */
.in-app-actions .grid > div {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
html[data-mode="light"] .in-app-actions .grid > div {
    background: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.in-app-actions .grid > div::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.in-app-actions .grid > div:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.25) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.08);
}
html[data-mode="light"] .in-app-actions .grid > div:hover {
    background: rgba(212, 175, 55, 0.05) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05), 0 0 10px rgba(212, 175, 55, 0.1);
}

.in-app-actions .grid > div:hover::before {
    opacity: 1;
}

.in-app-actions .grid > div i {
    color: var(--gold) !important;
    transition: all 0.3s ease;
}

.in-app-actions .grid > div:hover i {
    color: var(--gold-dark) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
html[data-mode="light"] .in-app-actions .grid > div:hover i {
    text-shadow: none;
}

/* === Email Address Display === */
.in-app-actions #email_id,
.in-app-actions .block.appearance-none {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 10px !important;
    color: var(--gold-light) !important;
    font-weight: 500;
}
html[data-mode="light"] .in-app-actions #email_id,
html[data-mode="light"] .in-app-actions .block.appearance-none {
    background: #f1f5f9 !important;
    color: var(--gold-dark) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

/* === Dropdown Menu === */
[x-show] .block.px-4.py-2,
.dropdown-content a,
x-dropdown-link {
    color: var(--text-primary) !important;
    transition: all 0.2s ease;
}

[x-show] .block.px-4.py-2:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    color: var(--gold) !important;
}

div[x-show] > div,
.dropdown-content {
    background: var(--dark-card) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}
html[data-mode="light"] div[x-show] > div {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Member Only badge */
.cursor-not-allowed span.text-xs {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* === Right Content Area === */
.default-theme .grow > div:last-child {
    background: var(--dark-bg) !important;
}

/* === Navigation Bar === */
nav {
    background: var(--dark-surface) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}
html[data-mode="light"] nav {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

nav a,
nav button,
nav span,
nav i {
    color: var(--text-secondary) !important;
    transition: all 0.3s ease;
}

nav a:hover,
nav button:hover,
nav i:hover {
    color: var(--gold) !important;
}

/* Nav menu items */
nav .flex.items-center a {
    position: relative;
}

nav .flex.items-center a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transition: width 0.3s ease;
}

nav .flex.items-center a:hover::after {
    width: 100%;
}

/* Login/Register buttons in nav */
nav a[href*="login"],
nav a[href*="register"] {
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
    color: var(--gold) !important;
    font-weight: 500;
}
html[data-mode="light"] nav a[href*="login"],
html[data-mode="light"] nav a[href*="register"] {
    border-color: var(--gold) !important;
}

nav a[href*="login"]:hover,
nav a[href*="register"]:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: var(--gold) !important;
}

/* === Messages / Inbox List === */
.messages {
    background: var(--dark-bg) !important;
}

.messages > div {
    background: var(--dark-bg) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.06) !important;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 1.5rem !important;
}
html[data-mode="light"] .messages > div {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

.messages > div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
    border-radius: 0 3px 3px 0;
    transition: height 0.3s ease;
}

.messages > div:hover {
    background: var(--dark-card) !important;
}
html[data-mode="light"] .messages > div:hover {
    background: #f1f5f9 !important;
}

.messages > div:hover::before {
    height: 60%;
}

.messages .text-gray-800,
.messages .text-gray-900 {
    color: var(--text-primary) !important;
}

.messages .text-gray-400,
.messages .text-xs.text-gray-400 {
    color: var(--text-secondary) !important;
}

.messages .text-gray-600 {
    color: #6a6a7a !important;
}
html[data-mode="light"] .messages .text-gray-600 {
    color: #475569 !important;
}

/* === Empty Inbox Text === */
.grow.flex.justify-center.items-center {
    color: var(--text-secondary) !important;
}

/* === Message Content Viewer === */
.message-content {
    background: var(--dark-surface) !important;
    border-left: 1px solid var(--dark-border) !important;
}

.message-content .text-gray-900,
.message-content .text-lg {
    color: var(--text-primary) !important;
}

.message-content .text-gray-400 {
    color: var(--text-secondary) !important;
}

/* Download button */
.message-content a.download {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: #0d0d0d !important;
    font-weight: 600;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.message-content a.download:hover {
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* Delete button */
.message-content button[wire\:click*="delete"] {
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    color: #ef4444 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.message-content button[wire\:click*="delete"]:hover {
    background: rgba(220, 38, 38, 0.25) !important;
}

/* Attachments */
.message-content a[download] {
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}
html[data-mode="light"] .message-content a[download] {
    border-color: rgba(212, 175, 55, 0.4) !important;
}

.message-content a[download]:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: var(--gold) !important;
    color: var(--gold-dark) !important;
}

/* Inbox image placeholder */
.message-content .flex-1 img[alt="mails"] {
    opacity: 0.3;
    filter: grayscale(0.5) sepia(0.3);
}

/* === Footer === */
footer {
    background: #08080c !important;
    border-top: 1px solid var(--dark-border) !important;
    color: var(--text-secondary) !important;
    padding: 1.25rem 1.5rem !important;
}
html[data-mode="light"] footer {
    background: #f8f9fa !important;
}

footer a {
    color: var(--text-secondary) !important;
    transition: all 0.3s ease;
}

footer a:hover {
    color: var(--gold) !important;
    text-decoration: none !important;
}

footer .opacity-75 {
    color: rgba(212, 175, 55, 0.4) !important;
    opacity: 1 !important;
}
html[data-mode="light"] footer .opacity-75 {
    color: #94a3b8 !important;
}

footer i {
    color: var(--text-secondary) !important;
    transition: all 0.3s ease;
}

footer a:hover i {
    color: var(--gold) !important;
}

/* === Scrollbar Styling === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.2);
    border-radius: 3px;
}
html[data-mode="light"] ::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.35);
}
html[data-mode="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.6);
}

/* === Tailwind Override Fixes === */
.bg-white { background: var(--dark-bg) !important; }
.bg-gray-50 { background: var(--dark-surface) !important; }
.bg-gray-100 { background: var(--dark-card) !important; }
.bg-gray-800 { background: #08080c !important; }
.text-gray-800, .text-gray-900, .text-gray-700 { color: var(--text-primary) !important; }
.text-gray-600, .text-gray-500 { color: var(--text-secondary) !important; }
.border-gray-200, .border-gray-300, .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dark-border) !important;
}

/* === Mobile Menu === */
nav .fixed.inset-0,
nav [x-show] {
    background: var(--dark-surface) !important;
}

/* Mobile sidebar overlay */
@media (max-width: 1024px) {
    .default-theme .grow > div:first-child {
        border-right: none;
        border-bottom: 1px solid var(--dark-border);
    }
    
    .default-theme .grow > div:first-child::before {
        display: none;
    }
}

/* === Page Content === */
.page.flex-1 {
    background: var(--dark-bg) !important;
    color: var(--text-primary) !important;
}

/* === Livewire Loading States === */
[wire\:loading] {
    color: var(--gold) !important;
}

/* === Selection Highlight === */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: var(--text-primary);
}

/* === Subtle Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.default-theme {
    animation: fadeInUp 0.5s ease-out;
}

/* === Category/Blog pages === */
.category h1,
main h1 {
    color: var(--gold) !important;
}

/* === Alert/Cookie Bar === */
#cookie {
    background: var(--dark-card) !important;
    border-top: 1px solid var(--dark-border) !important;
    color: var(--text-primary) !important;
}

#cookie_close {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: #0d0d0d !important;
    font-weight: 600;
}

/* === Profile/Lock page === */
.profile, .lock {
    background: var(--dark-bg) !important;
    color: var(--text-primary) !important;
}

/* === SVG icons color === */
.default-theme svg {
    color: inherit;
}

.pointer-events-none svg {
    color: var(--gold) !important;
    opacity: 0.8;
}

/* Fix generic select */
select {
    background: var(--dark-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* === Hide Default TMail Logo === */
.default-theme .grow > div:first-child > div:first-child a {
    display: none !important;
}

/* === Hide Login Prompts for Logged In Users === */
body.logged-in main.page p:has(a[href*="/login"]),
body.logged-in main.page p:has(a[href*="zalo.me"]),
body.logged-in main.page p:has(a[href*="facebook.com"]),
body.logged-in main.page #zalo {
    display: none !important;
}
/* Also hide the text paragraph by using adjacent sibling selector from the first p */
body.logged-in main.page p:has(a[href*="/login"]) ~ p {
    display: none !important;
}


/* === Light Mode Universal Text Color Fix === */
html[data-mode="light"] body,
html[data-mode="light"] .page.flex-1,
html[data-mode="light"] p,
html[data-mode="light"] h1,
html[data-mode="light"] h2,
html[data-mode="light"] h3,
html[data-mode="light"] h4,
html[data-mode="light"] h5,
html[data-mode="light"] h6,
html[data-mode="light"] .text-gray-900,
html[data-mode="light"] .text-gray-800,
html[data-mode="light"] .text-gray-700,
html[data-mode="light"] .text-gray-600,
html[data-mode="light"] .text-gray-500,
html[data-mode="light"] .text-gray-400,
html[data-mode="light"] .text-white {
    color: #111111 !important;
}

/* Ensure backgrounds in light mode are white/light gray */
html[data-mode="light"] .bg-white,
html[data-mode="light"] .page.flex-1,
html[data-mode="light"] .message-content,
html[data-mode="light"] .messages {
    background: #ffffff !important;
}
html[data-mode="light"] .bg-gray-50 { background: #f8fafc !important; }
html[data-mode="light"] .bg-gray-100 { background: #f1f5f9 !important; }
html[data-mode="light"] .messages > div { background: #ffffff !important; }
html[data-mode="light"] .messages > div:hover { background: #f1f5f9 !important; }

/* Keep gold elements gold */
html[data-mode="light"] .category h1,
html[data-mode="light"] main h1,
html[data-mode="light"] nav a[href*="login"],
html[data-mode="light"] nav a[href*="register"] {
    color: var(--gold-dark) !important;
}

/* Fix navbar background in light mode if needed */
html[data-mode="light"] nav,
html[data-mode="light"] nav .bg-black {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
}