/* styles/mail.css */

/* --- 1. THE INBOX NOTIFICATION DOT (Navbar) --- */
#inboxBadge {
    background-color: #b08a48 !important; /* Brand Gold */
    color: #fff !important;               /* White Text */
    border: 2px solid #fff !important;    /* Thicker white ring */
    
    /* PERFECT CIRCLE MAGIC */
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    
    /* ✅ FIX: Removed '!important' so it can hide when empty */
    display: flex; 
    
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    
    font-weight: 700 !important;
    font-size: 10px !important;
    
    /* Position */
    top: 0 !important;
    right: 0 !important;
    transform: translate(30%, -30%) !important;
    
    z-index: 9999 !important; 
}

/* Ensure hidden really means hidden */
#inboxBadge.d-none {
    display: none !important;
}

/* --- 2. THE INBOX BUTTON ITSELF --- */
#btnInbox {
    /* Keep the button spacing we added */
    margin-right: 25px !important; 
    overflow: visible !important; 
}



/* --- 3. THE MESSAGE CARDS (In the Modal) --- */
.mail-card {
    border: 1px solid #eee; 
    background-color: #fff;
    transition: all 0.2s ease;
}

.mail-card--unread {
    border: 1px solid #b08a48 !important; 
    background-color: #fff !important;    
    box-shadow: 0 4px 12px rgba(176, 138, 72, 0.15) !important; 
}

/* --- 4. BADGES INSIDE THE MESSAGE --- */
.mail-tag {
    background-color: #000 !important; 
    color: #b08a48 !important;         
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.mail-tag--new {
    background-color: #b08a48 !important; 
    color: #fff !important;               
    font-weight: 700;
}

/* --- 5. BUTTONS (Reply & Delete) --- */
.btn-reply {
    background-color: #000 !important;
    border: 1px solid #000 !important;
    color: #b08a48 !important;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.btn-reply:hover {
    background-color: #333 !important;
    color: #fff !important;
}

.btn-delete {
    color: #999 !important;
    border: none !important;
}
.btn-delete:hover {
    color: #dc3545 !important;
    background: transparent !important;
}
/* FORCE SPACING FOR INBOX BUTTON */
#btnInbox {
    margin-right: 25px !important; /* Pushes the Sign Out button away */
    overflow: visible !important;  /* Allows the Gold Bubble to sit outside the box */
}