/* =========================================================================
   Ubitri MailThief — brand theme layered over Bootstrap 5.3 colour modes.
   Light and dark are driven by the [data-bs-theme] attribute on <html>.
   ========================================================================= */

:root {
    --mt-brand: #4f46e5;       /* indigo */
    --mt-brand-rgb: 79, 70, 229;
    --mt-brand-strong: #4338ca;
    --mt-radius: 0.7rem;
    --mt-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Light mode ---- */
[data-bs-theme="light"] {
    color-scheme: light;
    --bs-primary: var(--mt-brand);
    --bs-primary-rgb: var(--mt-brand-rgb);
    --bs-link-color: var(--mt-brand-strong);
    --bs-link-color-rgb: var(--mt-brand-rgb);
    --bs-link-hover-color: #3730a3;
    --bs-body-bg: #f5f6fb;
    --bs-body-color: #1f2330;
    --bs-secondary-color: #5b6275;
    --mt-surface: #ffffff;
    --mt-border: #e6e8f0;
    --mt-navbar-bg: rgba(255, 255, 255, 0.85);
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-primary: #7c75f3;
    --bs-primary-rgb: 124, 117, 243;
    --bs-link-color: #a5a0f7;
    --bs-link-color-rgb: 165, 160, 247;
    --bs-link-hover-color: #c4c0fb;
    --bs-body-bg: #0f1117;
    --bs-body-color: #e6e8f0;
    --bs-secondary-color: #9aa1b5;
    --mt-surface: #181b24;
    --mt-border: #272b38;
    --mt-navbar-bg: rgba(18, 20, 28, 0.85);
}

body {
    font-family: var(--mt-font);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
}

/* ---- Buttons ---- */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--mt-brand-strong);
    --bs-btn-hover-border-color: var(--mt-brand-strong);
    --bs-btn-active-bg: var(--mt-brand-strong);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* ---- Navbar ---- */
.mt-navbar {
    background-color: var(--mt-navbar-bg);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--mt-border);
}

.mt-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
}

.mt-navbar .navbar-brand .brand-mark {
    color: var(--bs-primary);
}

.mt-navbar .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.mt-navbar .nav-link:hover,
.mt-navbar .nav-link.active {
    color: var(--bs-primary);
}

/* ---- Cards & surfaces ---- */
.card {
    background-color: var(--mt-surface);
    border-radius: var(--mt-radius);
    border: 1px solid var(--mt-border);
}

.card.shadow-sm {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05) !important;
}

.table {
    --bs-table-bg: transparent;
}

.table > thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--mt-border);
}

/* ---- Theme toggle ---- */
.theme-toggle {
    border: 1px solid var(--mt-border);
    background: transparent;
    color: var(--bs-body-color);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.theme-toggle:hover {
    background-color: rgba(var(--mt-brand-rgb), 0.12);
    color: var(--bs-primary);
}

.theme-toggle .icon-dark { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-dark { display: inline; }
[data-bs-theme="dark"] .theme-toggle .icon-light { display: none; }

/* ---- Landing page ---- */
.hero {
    background: radial-gradient(900px 400px at 50% -120px, rgba(var(--mt-brand-rgb), 0.18), transparent 70%);
}

.feature-icon {
    font-size: 2rem;
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt-radius);
    background: rgba(var(--mt-brand-rgb), 0.12);
}

/* ---- Footer ---- */
.mt-footer {
    border-top: 1px solid var(--mt-border);
    color: var(--bs-secondary-color);
}

/* Avoid the template's fixed footer so tables don't sit underneath it. */
html { position: relative; min-height: 100%; }