/* ═══════════════════════════════════════════════════════
   Theme Variables — High Contrast / Sharp UI
   ═══════════════════════════════════════════════════════ */
:root[data-theme="light"] {
    --em-bg: #F0F2F5;              /* page background */
    --em-bg-secondary: #E9ECEF;    /* slightly darker around forms/grids */
    --em-sidebar: #1A2744;
    --em-sidebar-hover: #243352;
    --em-sidebar-active: #2D4066;
    --em-text: #111827;
    --em-text-muted: #4B5563;      /* slightly darker muted for readability */
    --em-border: #ADB5BD;          /* stronger border */
    --em-card-bg: #FFFFFF;
    --em-nav-text: #C8D0DB;
    --em-nav-text-hover: #FFFFFF;
    --em-nav-group: #8B95A5;
    --em-input-bg: #FFFFFF;
    --em-input-border: #6C757D;    /* dark gray input border */
    --em-table-border: #ADB5BD;
    --em-table-stripe: #F1F3F5;
    --em-topbar-bg: #FFFFFF;
    --em-topbar-border: #ADB5BD;
}

:root[data-theme="dark"] {
    --em-bg: #0F1117;
    --em-bg-secondary: #141720;
    --em-sidebar: #0A0F1E;
    --em-sidebar-hover: #151B2E;
    --em-sidebar-active: #1E2640;
    --em-text: #E2E8F0;
    --em-text-muted: #94A3B8;
    --em-border: #475569;
    --em-card-bg: #1E293B;
    --em-nav-text: #94A3B8;
    --em-nav-text-hover: #F1F5F9;
    --em-nav-group: #64748B;
    --em-input-bg: #0F172A;
    --em-input-border: #64748B;
    --em-table-border: #475569;
    --em-table-stripe: #1A2332;
    --em-topbar-bg: #1E293B;
    --em-topbar-border: #475569;
}

/* ═══════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════ */
body {
    background-color: var(--em-bg);
    color: var(--em-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════
   Forms / Inputs — always white bg + strong borders
   ═══════════════════════════════════════════════════════ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea {
    background-color: var(--em-input-bg) !important;
    color: var(--em-text) !important;
    border: 1.5px solid var(--em-input-border) !important;
    border-radius: 4px !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
    background-color: var(--em-input-bg) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #9CA3AF !important;
}

.form-label,
label {
    font-weight: 600;
    color: var(--em-text);
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════
   Tables / Grids — clear borders, striped
   ═══════════════════════════════════════════════════════ */
.table {
    --bs-table-bg: var(--em-card-bg);
    --bs-table-color: var(--em-text);
    border-color: var(--em-table-border) !important;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--em-table-border) !important;
    padding: 10px 12px;
}

.table thead th {
    background-color: #343A40 !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #212529 !important;
    white-space: nowrap;
}

[data-theme="dark"] .table thead th {
    background-color: #1A2332 !important;
    border-bottom-color: #475569 !important;
}

/* Apply zebra striping to all tables (even without .table-striped) */
.table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--em-table-stripe);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--em-table-stripe) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

.table-responsive {
    border: 1px solid var(--em-table-border);
    border-radius: 6px;
}

/* Light theme table header override (Bootstrap's .table-light) */
.table-light {
    --bs-table-bg: #343A40 !important;
    --bs-table-color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════
   Cards — white bg with clear border on darker background
   ═══════════════════════════════════════════════════════ */
.card {
    background-color: var(--em-card-bg);
    border: 1px solid var(--em-border) !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: var(--em-card-bg) !important;
    border-bottom: 1px solid var(--em-border) !important;
    font-weight: 600;
}

.card-footer {
    background-color: var(--em-card-bg) !important;
    border-top: 1px solid var(--em-border) !important;
}

/* ═══════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════ */
.em-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background-color: var(--em-sidebar);
    overflow-y: auto;
    z-index: 1040;
    padding: 0;
    transition: transform 0.3s ease;
}

.em-sidebar-brand {
    padding: 20px 24px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.5px;
}

.em-nav-group-label {
    padding: 16px 24px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--em-nav-group);
}

.em-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    color: var(--em-nav-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.em-nav-link:hover {
    background-color: var(--em-sidebar-hover);
    color: var(--em-nav-text-hover);
}

.em-nav-link.active {
    background-color: var(--em-sidebar-active);
    color: #FFFFFF;
    border-left-color: #3B82F6;
}

.em-nav-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════
   Top navbar
   ═══════════════════════════════════════════════════════ */
.em-topbar {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    height: 56px;
    background-color: var(--em-topbar-bg);
    border-bottom: 2px solid var(--em-topbar-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
    z-index: 1030;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════
   Main content — darker background so cards stand out
   ═══════════════════════════════════════════════════════ */
.em-main-content {
    margin-left: 260px;
    margin-top: 56px;
    padding: 24px;
    min-height: calc(100vh - 56px);
    background-color: var(--em-bg-secondary);
}

/* ═══════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════ */
.badge-draft { background-color: #6C757D; }
.badge-preparing { background-color: #0DCAF0; color: #000; }
.badge-ready { background-color: #0D6EFD; }
.badge-sending { background-color: #fd7e14 !important; color: #fff !important; }
.badge-paused { background-color: #FFC107; color: #000; }
.badge-completed { background-color: #212529; }
.badge-cancelled { background-color: #DC3545; }
.badge-mailgun { background-color: #0D6EFD; }
.badge-ses { background-color: #FD7E14; color: #000; }
.badge-smartermail { background-color: #6F42C1; }

/* Status dots */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-dot.green { background-color: #198754; }
.status-dot.red { background-color: #DC3545; }

/* ═══════════════════════════════════════════════════════
   Buttons — sharper
   ═══════════════════════════════════════════════════════ */
.btn {
    border-radius: 4px;
    font-weight: 500;
}

.btn-outline-secondary {
    border-color: var(--em-border);
    color: var(--em-text);
}

/* ═══════════════════════════════════════════════════════
   Headings — bolder
   ═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    color: var(--em-text);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   Toast container
   ═══════════════════════════════════════════════════════ */
.em-toast-container {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 1080;
}

/* ═══════════════════════════════════════════════════════
   Log viewer
   ═══════════════════════════════════════════════════════ */
.em-log-pre {
    background-color: var(--em-input-bg);
    color: var(--em-text);
    border: 1.5px solid var(--em-input-border);
    padding: 16px;
    font-size: 0.8rem;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════
   Theme toggle
   ═══════════════════════════════════════════════════════ */
.em-theme-toggle {
    background: none;
    border: 1px solid var(--em-border);
    color: var(--em-text);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════
   Auto-refresh animations
   ═══════════════════════════════════════════════════════ */
@keyframes em-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes em-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.em-refreshing-icon {
    display: inline-block;
    animation: em-spin 1.5s linear infinite;
    color: #DC3545 !important;
}

.em-refreshing-text {
    animation: em-pulse 2s ease-in-out infinite;
    color: #DC3545 !important;
    font-weight: 600 !important;
}

.em-refresh-indicator {
    transition: opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════════════
   Alerts — sharper
   ═══════════════════════════════════════════════════════ */
.alert {
    border-radius: 4px;
    border-width: 1.5px;
}

/* ═══════════════════════════════════════════════════════
   Modals
   ═══════════════════════════════════════════════════════ */
.modal-content {
    background-color: var(--em-card-bg);
    border: 1px solid var(--em-border);
    color: var(--em-text);
}

/* ═══════════════════════════════════════════════════════
   Nav Tabs — white active tab on darker background
   ═══════════════════════════════════════════════════════ */
.nav-tabs {
    border-bottom-color: var(--em-border);
}

.nav-tabs .nav-link {
    color: var(--em-text-muted);
    border-color: transparent;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--em-text);
    border-color: var(--em-border) var(--em-border) transparent;
    background-color: var(--em-card-bg);
}

.nav-tabs .nav-link.active {
    background-color: var(--em-card-bg);
    color: var(--em-text);
    border-color: var(--em-border) var(--em-border) var(--em-card-bg);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   Muted text — readable on darker backgrounds
   ═══════════════════════════════════════════════════════ */
.text-muted {
    color: var(--em-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .em-sidebar {
        transform: translateX(-100%);
    }
    .em-topbar {
        left: 0;
    }
    .em-main-content {
        margin-left: 0;
    }
    .em-hamburger {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .em-hamburger {
        display: none !important;
    }
}