:root {
    --maroon: #821928;
    --maroon-hover: #691420;
    --maroon-light: #fbe6e9;
    --green-active: #10b981;
    --green-bg: #d1fae5;
    --bg-color: #fafafa;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    position: relative;
    overflow-x: hidden;
}

/* Background Abstract Shapes (Waves/Circles) */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    background-color: var(--maroon-light);
    opacity: 0.5;
    z-index: 0;
}

.bg-shape.top-right {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -200px;
}

.bg-shape.bottom-left {
    width: 800px;
    height: 800px;
    bottom: -300px;
    left: -300px;
}

/* Navbar */
.brand-navbar {
    background-color: var(--maroon);
    padding: 1rem 0;
    z-index: 2;
    position: relative;
}

/* Icons */
.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--maroon-light);
    color: var(--maroon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.icon-circle-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--maroon-light);
    color: var(--maroon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

/* Text Colors */
.text-maroon {
    color: var(--maroon) !important;
}

/* Cards */
.custom-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff;
}

/* Email Input Group */
.email-input-group {
    max-width: 600px;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.email-input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    padding: 1rem;
}

.email-input:focus {
    box-shadow: none !important;
}

/* Buttons */
.btn-maroon {
    background-color: var(--maroon);
    color: white;
    border: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.btn-maroon:hover {
    background-color: var(--maroon-hover);
    color: white;
}

/* Status Badge */
.badge-active {
    background-color: var(--green-bg);
    color: var(--green-active);
    padding: 0.4rem 1rem;
    border-radius: 50rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.badge-active .dot {
    width: 8px;
    height: 8px;
    background-color: var(--green-active);
    border-radius: 50%;
    margin-right: 6px;
}

/* Inbox Styling */
.inbox-title {
    color: var(--maroon);
    border-bottom: 2px solid var(--maroon);
    display: inline-block;
    padding-bottom: 5px;
}

/* Email List Item */
.email-list-item {
    transition: all 0.2s;
    border-left: 4px solid transparent;
    cursor: pointer;
}

.email-list-item:hover {
    background-color: var(--maroon-light);
}

.email-list-item.unread {
    border-left-color: var(--maroon);
    background-color: #f9fafb;
}

.email-list-item.unread .subject-text {
    font-weight: 700 !important;
}

/* Modal Email Body */
.email-body-content {
    min-height: 200px;
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}

iframe {
    width: 100%;
    height: 400px;
    border: none;
    background: white;
}