/**
 * TempMails Multi-Domain - Dark Theme Color Palette
 * Forces Core's dark mode colors as DEFAULT
 * 
 * @package TempMailsMultiDomain
 * @since 1.0.1
 */

/* ============================================
   FORCE DARK THEME AS DEFAULT
   Override Core's light mode with dark colors
   ============================================ */
:root {
    /* Dark backgrounds */
    --tm-bg-surface: #1E293B !important;      /* Dark navy */
    --tm-bg-panel: #0F172A !important;        /* Darker navy */
    
    /* Light text for dark backgrounds */
    --tm-text-primary: #F1F5F9 !important;    /* Almost white */
    --tm-text-muted: #94A3B8 !important;      /* Light gray */
    
    /* Blue accent stays same */
    --tm-accent-primary: #3B82F6 !important;
    --tm-accent-hover: #60A5FA !important;
    --tm-accent-light: #1E3A8A !important;
    
    /* Borders for dark theme */
    --tm-border-color: #334155 !important;
    
    /* Shadows for dark theme */
    --tm-shadow-card: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    --tm-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    --tm-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
   🔧 FIX: MODAL MUST BE HIDDEN BY DEFAULT
   This is the critical fix for the auto-open bug
   ============================================ */
.tempmails-modal {
    display: none !important;
}

/* When JavaScript calls .show(), this overrides the hidden state */
.tempmails-modal[style*="display: block"],
.tempmails-modal[style*="display:block"] {
    display: flex !important;
}

/* ============================================
   INBOX WRAPPER - Dark navy background
   ============================================ */
.tempmails-inbox-wrapper {
    background: #1E293B !important;
}

/* ============================================
   EMAIL SECTION - Darker card
   ============================================ */
.tempmails-email-section {
    background: #0F172A !important;
    border: 1px solid #334155 !important;
}

.tempmails-email-display label {
    color: #94A3B8 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tempmails-email-input {
    background: #1E293B !important;
    color: #F1F5F9 !important;
    border-color: #334155 !important;
}

.tempmails-email-input:focus {
    background: #0F172A !important;
    border-color: #3B82F6 !important;
}

/* ============================================
   BUTTONS - Proper colors
   ============================================ */
.tempmails-btn-primary {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
}

.tempmails-btn-primary:hover {
    background: #60A5FA !important;
}

.tempmails-btn-secondary {
    background: #1E293B !important;
    color: #F1F5F9 !important;
    border: 1px solid #334155 !important;
}

.tempmails-btn-secondary:hover {
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
}

/* ============================================
   STATS BAR - Dark background
   ============================================ */
.tempmails-stats {
    background: #0F172A !important;
    border: 1px solid #334155 !important;
}

.tempmails-stat-label {
    color: #94A3B8 !important;
}

.tempmails-stat-value {
    color: #F1F5F9 !important;
}

.tempmails-stat-value.tempmails-unread {
    color: #3B82F6 !important;
}

/* ============================================
   MESSAGES CONTAINER - Dark navy
   ============================================ */
.tempmails-messages-container {
    background: #1E293B !important;
}

/* ============================================
   MESSAGE CARDS - Blue when unread
   ============================================ */
.tempmails-message-card {
    background: #0F172A !important;
    border-bottom: 1px solid #334155 !important;
}

.tempmails-message-card:hover {
    background: #1E293B !important;
}

.tempmails-message-card.tempmails-message-unread {
    background: #1E3A8A !important;  /* Dark blue */
    border-left: 4px solid #3B82F6 !important;
}

.tempmails-message-card.tempmails-message-unread:hover {
    background: #1E40AF !important;
}

.tempmails-message-subject {
    color: #F1F5F9 !important;
}

.tempmails-message-unread .tempmails-message-subject {
    color: #60A5FA !important;
}

.tempmails-message-sender,
.tempmails-message-date {
    color: #94A3B8 !important;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.tempmails-empty-state {
    color: #94A3B8 !important;
}

.tempmails-empty-state p {
    color: #F1F5F9 !important;
}

.tempmails-empty-state .material-symbols-outlined {
    color: #334155 !important;
}

/* ============================================
   MODAL STYLING - DARK THEME
   Dark navy modal matching inbox theme
   ============================================ */
.tempmails-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.85) !important;  /* Darker overlay */
    backdrop-filter: blur(8px) !important;  /* Stronger blur */
    z-index: 1 !important;
}

.tempmails-modal-content {
    position: relative !important;
    background: #0F172A !important;  /* DARK NAVY modal */
    color: #F1F5F9 !important;       /* LIGHT text */
    border: 1px solid #334155 !important;
    z-index: 2 !important;
    max-width: 700px !important;
    width: 100% !important;
}

.tempmails-modal-header h3 {
    color: #F1F5F9 !important;  /* Light text */
}

.tempmails-modal-meta {
    background: #1E293B !important;  /* Darker navy */
    color: #94A3B8 !important;       /* Light gray */
    border-top: 1px solid #334155 !important;
    border-bottom: 1px solid #334155 !important;
}

.tempmails-modal-meta strong {
    color: #94A3B8 !important;
}

.tempmails-modal-meta span {
    color: #F1F5F9 !important;  /* Light text */
}

.tempmails-modal-body {
    color: #F1F5F9 !important;  /* Light text */
}

.tempmails-modal-close {
    background: #1E293B !important;  /* Dark navy */
    color: #94A3B8 !important;       /* Light gray */
}

.tempmails-modal-close:hover {
    background: #991B1B !important;  /* Dark red */
    color: #FEE2E2 !important;       /* Light red */
}

/* ============================================
   DOMAIN SELECTOR - Our addon component
   ============================================ */
.tmcd-domain-selector-wrapper {
    background: #0F172A !important;
    border: 1px solid #334155 !important;
    border-radius: 16px;
    padding: clamp(20px, 4vw, 24px);
    margin-bottom: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.tmcd-domain-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(12px, 2.5vw, 14px);
    font-weight: 600;
    color: #94A3B8 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: clamp(12px, 2.5vw, 16px);
}

.tmcd-domain-label .material-symbols-outlined {
    font-size: clamp(18px, 4vw, 20px);
    color: #3B82F6 !important;
}

.tmcd-domain-select {
    width: 100%;
    height: 48px;
    padding: 0 clamp(14px, 3vw, 16px);
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 2.5vw, 15px);
    font-weight: 500;
    color: #F1F5F9 !important;
    background: #1E293B !important;
    border: 2px solid #334155 !important;
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right clamp(12px, 2.5vw, 14px) center;
    background-size: 20px;
    padding-right: clamp(40px, 8vw, 48px);
}

.tmcd-domain-select:hover {
    border-color: #3B82F6 !important;
    background: #0F172A !important;
}

.tmcd-domain-select:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    background: #0F172A !important;
}

.tmcd-domain-select option {
    background: #0F172A !important;
    color: #F1F5F9 !important;
}

.tmcd-premium-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(12px, 2.5vw, 16px);
    padding: clamp(10px, 2vw, 12px) clamp(14px, 3vw, 16px);
    background: #451A03 !important;
    color: #FEF3C7 !important;
    border-left: 4px solid #F59E0B;
    border-radius: 8px;
    font-size: clamp(12px, 2.5vw, 13px);
}

.tmcd-premium-notice .material-symbols-outlined {
    color: #F59E0B !important;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.tempmails-loading {
    background: #0F172A !important;
    color: #94A3B8 !important;
}

.tempmails-spinning {
    animation: tmcd-spin 1s linear infinite;
}

@keyframes tmcd-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {
    .tmcd-domain-selector-wrapper {
        padding: clamp(16px, 4vw, 20px);
    }
}