/* ============================================================================
   EmailManager — global styles (LSBA admin look-and-feel)
   Light off-white bg, white cards, sticky horizontal topbar + navbar,
   indigo primary, emerald accent, Inter-only sans, Bootstrap Icons.
============================================================================ */

:root {
    --em-bg:          #F8F9FB;
    --em-surface:     #FFFFFF;
    --em-surface-2:   #F3F4F6;
    --em-ink:         #0F172A;
    --em-text:        #334155;
    --em-muted:       #6B7280;
    --em-subtle:      #9CA3AF;
    --em-rule:        #F0F0F3;
    --em-border:      #E5E7EB;
    --em-primary:     #6366F1;
    --em-primary-hi:  #4F46E5;
    --em-success:     #10B981;
    --em-warning:     #D97706;
    --em-danger:      #DC2626;

    /* legacy aliases so existing inline styles still resolve */
    --em-navy:        var(--em-ink);
    --em-gold:        var(--em-primary);
    --em-gold-hi:     var(--em-primary-hi);
    --em-ivory:       var(--em-ink);
    --em-slate:       var(--em-muted);
    --em-green:       var(--em-success);
    --em-red:         var(--em-danger);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    background: var(--em-bg);
    color: var(--em-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

.em-body {
    background: var(--em-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

::selection { background: var(--em-primary); color: #fff; }

a { color: var(--em-primary); text-decoration: none; }
a:hover { color: var(--em-primary-hi); }

/* ───────────── TOP BAR ───────────── */
.em-topbar {
    background: var(--em-surface);
    border-bottom: 1px solid var(--em-border);
    position: sticky;
    top: 0;
    z-index: 1200;
}
.em-topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.em-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.em-brand:hover { color: inherit; }
.em-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--em-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.02em;
}
.em-brand-sep {
    width: 1px;
    height: 24px;
    background: var(--em-border);
}
.em-brand-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    letter-spacing: -0.01em;
}
.em-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.em-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--em-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.em-topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.em-topbar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.em-topbar-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    padding: 6px 12px;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: #fafafa;
}
.em-topbar-clock i {
    font-size: 12px;
    color: #9ca3af;
}
.em-topbar-clock-value {
    color: #111827;
    letter-spacing: 0.01em;
}
.em-topbar-clock-tz {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9ca3af;
    border-left: 1px solid var(--em-border);
    padding-left: 8px;
}
.btn-em-logout {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-em-logout:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

/* ───────────── NAV BAR ───────────── */
.em-navbar {
    background: var(--em-surface);
    border-bottom: 1px solid var(--em-border);
    position: sticky;
    top: 60px;
    z-index: 1100;
}
.em-navbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.em-navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 150ms, border-color 150ms;
}
.em-navlink i { font-size: 14px; }
.em-navlink:hover { color: #111827; text-decoration: none; }
.em-navlink.active {
    color: #111827;
    font-weight: 600;
    border-bottom-color: #111827;
}

/* ───────────── DROPDOWN NAV GROUPS ───────────── */
.em-nav-group { position: relative; }
.em-nav-group-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}
.em-nav-group-trigger i { font-size: 14px; }
.em-nav-group-trigger .bi-chevron-down {
    font-size: 10px;
    transition: transform 200ms;
}
.em-nav-group:hover .em-nav-group-trigger .bi-chevron-down,
.em-nav-group.open .em-nav-group-trigger .bi-chevron-down {
    transform: rotate(180deg);
}
.em-nav-group:hover .em-nav-group-trigger,
.em-nav-group-trigger:hover {
    color: #111827;
}
.em-nav-group-trigger.active {
    color: #111827;
    font-weight: 600;
    border-bottom-color: #111827;
}
.em-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 150ms, visibility 150ms, transform 150ms;
    z-index: 200;
}
.em-nav-group:hover .em-nav-dropdown,
.em-nav-group.open .em-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.em-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border-radius: 8px;
    transition: background 120ms, color 120ms;
}
.em-nav-dropdown-item i {
    font-size: 15px;
    color: #9ca3af;
    width: 20px;
    text-align: center;
    transition: color 120ms;
}
.em-nav-dropdown-item:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}
.em-nav-dropdown-item:hover i { color: #111827; }
.em-nav-dropdown-item.active {
    background: var(--em-ink);
    color: #fff;
}
.em-nav-dropdown-item.active i { color: rgba(255,255,255,0.7); }
.em-nav-dropdown-divider {
    height: 1px;
    background: var(--em-rule);
    margin: 4px 8px;
}
.em-nav-sep {
    width: 1px;
    height: 20px;
    background: var(--em-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ───────────── CONTENT SHELL ───────────── */
.em-content-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 32px 48px;
    width: 100%;
    flex: 1;
}

/* ───────────── PAGE HEADERS ───────────── */
.em-page-eyebrow {
    color: var(--em-primary);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}
.em-page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    margin: 0 0 6px 0;
    color: var(--em-ink);
    line-height: 1.15;
}
.em-page-sub {
    color: var(--em-muted);
    font-size: 0.875rem;
    margin-top: 6px;
    max-width: 720px;
    line-height: 1.55;
}

/* ───────────── CARDS ───────────── */
.em-card {
    background: var(--em-surface) !important;
    border: 1px solid var(--em-rule);
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 24px;
}
.em-card-eyebrow {
    color: var(--em-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ───────────── HERO STRIP ───────────── */
.em-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-radius: 20px;
    padding: 44px 48px;
    color: #fff;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.em-hero::before {
    content: '';
    position: absolute;
    top: -120px; right: -60px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.em-hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: 30%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.em-hero-content { position: relative; z-index: 1; }
.em-hero-greeting {
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 8px;
}
.em-hero h1 {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 6px;
    color: #fff;
}
/* Hide the focus ring that <FocusOnNavigate Selector="h1" /> applies on every page load.
   Keyboard users still get a visible focus ring on Tab via :focus-visible elsewhere. */
h1:focus, h1:focus-visible,
.em-page-title:focus, .em-page-title:focus-visible,
.em-hero h1:focus, .em-hero h1:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.em-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    max-width: 560px;
    line-height: 1.6;
}
.em-hero-time {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-top: 12px;
    letter-spacing: 0.02em;
}

/* ───────────── KPI GRID ───────────── */
.em-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}
.em-kpi {
    background: var(--em-surface);
    border: 1px solid var(--em-rule);
    border-radius: 16px;
    padding: 28px 24px;
    transition: box-shadow 200ms, transform 150ms;
    position: relative;
    overflow: hidden;
}
.em-kpi:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.em-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.em-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
}
.em-kpi-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: 0.02em;
}
.em-kpi-value {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 30px;
    color: var(--em-ink);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}
.em-kpi-label {
    font-size: 12px;
    color: var(--em-muted);
    font-weight: 500;
}
.em-kpi-sub {
    font-size: 11px;
    color: var(--em-subtle);
    margin-top: 6px;
}

/* ───────────── ACTION CARDS ───────────── */
.em-action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.em-action-card {
    background: var(--em-surface);
    border: 1px solid var(--em-rule);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--em-ink);
    transition: box-shadow 200ms, transform 150ms, border-color 150ms;
}
.em-action-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transform: translateY(-1px);
    border-color: #d1d5db;
    text-decoration: none;
    color: var(--em-ink);
}
.em-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.em-action-card h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--em-ink);
}
.em-action-card p {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.4;
}
.em-action-arrow {
    margin-left: auto;
    font-size: 16px;
    color: #d1d5db;
    transition: color 150ms, transform 150ms;
}
.em-action-card:hover .em-action-arrow {
    color: #6b7280;
    transform: translateX(2px);
}

/* ───────────── BUTTONS ───────────── */
.em-cta-gold,
.em-cta-primary {
    background: var(--em-primary) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 150ms, box-shadow 150ms, transform 150ms !important;
}
.em-cta-gold:hover,
.em-cta-primary:hover {
    background: var(--em-primary-hi) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25) !important;
}

/* ───────────── LOGIN ───────────── */
.em-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--em-bg);
    padding: 24px;
}
.em-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--em-surface);
    border: 1px solid var(--em-rule);
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}
.em-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}
.em-login-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    margin-bottom: 6px;
    color: var(--em-ink);
}
.em-login-sub {
    color: var(--em-muted);
    font-size: 0.875rem;
    margin-bottom: 32px;
}
.em-form-label {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--em-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.em-form-input {
    width: 100%;
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--em-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    transition: border-color 150ms, box-shadow 150ms;
}
.em-form-input:focus {
    outline: none;
    border-color: var(--em-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.em-form-error {
    padding: 12px 16px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 20px;
}

/* ───────────── ALERTS ───────────── */
.em-alert {
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border: 1px solid;
}
.em-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.em-alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.em-alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.em-alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ───────────── FOOTER ───────────── */
.em-footer {
    border-top: 1px solid var(--em-border);
    padding: 20px 0;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    background: var(--em-surface);
    margin-top: auto;
}

/* ───────────── MISC ───────────── */
.em-user { color: var(--em-muted); letter-spacing: 0.02em; }
.em-rule-line { border: 0; border-top: 1px solid var(--em-rule); margin: 24px 0; }

/* ───────────── MUDBLAZOR OVERRIDES ───────────── */
.mud-paper.em-card { background: var(--em-surface) !important; }
.mud-table { background: var(--em-surface) !important; border-radius: 16px !important; }
.mud-table-cell { color: var(--em-text) !important; border-color: var(--em-rule) !important; }
.mud-table-head .mud-table-cell {
    color: var(--em-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--em-rule) !important;
}
.mud-input-control input,
.mud-input-control textarea { color: var(--em-ink) !important; }
.mud-input-label { color: var(--em-muted) !important; }
.mud-input-outlined-border { border-color: var(--em-border) !important; }
.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--em-primary) !important; }
.mud-button-filled-primary {
    background-color: var(--em-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.mud-button-filled-primary:hover {
    background-color: var(--em-primary-hi) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25) !important;
}
.mud-button-outlined {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
.mud-button-text {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
.mud-chip { font-weight: 500 !important; letter-spacing: 0.02em; }
.mud-dialog { border-radius: 16px !important; }
.mud-dialog-title { font-weight: 700 !important; color: var(--em-ink) !important; }
.mud-snackbar { border-radius: 12px !important; }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 768px) {
    .em-topbar-inner { padding: 0 16px; height: 54px; }
    .em-topbar-user-name { display: none; }
    .em-topbar-clock { display: none; }
    .em-navbar-inner {
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .em-navbar-inner::-webkit-scrollbar { display: none; }
    .em-navlink { padding: 12px 12px; font-size: 12px; }
    .em-nav-group-trigger { padding: 12px 12px; font-size: 12px; }
    .em-content-shell { padding: 20px 16px 40px; }
    .em-brand-label { display: none; }
    .em-nav-dropdown { min-width: 200px; }
    .em-hero { padding: 28px 24px; border-radius: 16px; }
    .em-hero h1 { font-size: 22px; }
    .em-kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .em-kpi { padding: 20px 18px; }
    .em-kpi-value { font-size: 24px; }
    .em-action-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 1280px) {
    .em-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .em-action-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .em-kpi-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   HTML Editor (Quill + raw HTML toggle) — used on the Website edit page
============================================================================ */
.em-html-editor {
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: var(--em-surface);
    overflow: hidden;
}
.em-html-editor-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--em-border);
    background: var(--em-surface-2);
}
.em-html-editor-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--em-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid var(--em-border);
    transition: background 80ms ease, color 80ms ease;
}
.em-html-editor-tab:hover { background: rgba(99,102,241,0.06); color: var(--em-ink); }
.em-html-editor-tab.active {
    background: var(--em-surface);
    color: var(--em-primary-hi);
    box-shadow: inset 0 -2px 0 var(--em-primary);
}
.em-html-editor-quill { background: var(--em-surface); }
.em-html-editor-quill .ql-editor {
    min-height: 200px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--em-ink);
}
.em-html-editor-source {
    width: 100%;
    border: 0;
    padding: 14px 16px;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.65;
    color: var(--em-ink);
    background: var(--em-surface);
    resize: vertical;
    outline: none;
}
.em-html-editor-source:focus { background: #FBFCFE; }

/* Live data pulse — used on the dashboard to show auto-refresh activity */
.em-pulse {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--em-success);
    margin: 0 8px 0 12px;
    box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
    animation: em-pulse-anim 1.6s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes em-pulse-anim {
    0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0);   }
    100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}