/*
 * Zebra Mail — "Zebra" theme (black & off-white)
 * Loaded IN ADDITION to the default theme; activates when <html data-theme="zebra">.
 * Toggle via the ◐ button in the sidebar (persists in localStorage).
 */

/* ── Sidebar: black with off-white text ─────────────────────────── */
/* #sidebar beats the .bg-white utility (higher specificity). */
html[data-theme="zebra"] #sidebar {
    background: #111111 !important;
    border-right-color: #2a2a2a !important;
}
html[data-theme="zebra"] #sidebar h1 { color: #F5F2EA !important; }
html[data-theme="zebra"] #sidebar p  { color: #8a8a8a !important; }
html[data-theme="zebra"] #sidebar .sidebar-link { color: #c9c5bc !important; }
html[data-theme="zebra"] #sidebar .sidebar-link:hover,
html[data-theme="zebra"] #sidebar .sidebar-link.active {
    background: rgba(245, 242, 234, 0.12) !important;
    color: #F5F2EA !important;
}
html[data-theme="zebra"] #sidebar .sidebar-link.active { border-right-color: #F5F2EA !important; }
html[data-theme="zebra"] #sidebar .text-gray-400 { color: #8a8a8a !important; }
html[data-theme="zebra"] #sidebar .text-gray-600 { color: #c9c5bc !important; }
html[data-theme="zebra"] #sidebar .text-gray-700 { color: #e8e4da !important; }
html[data-theme="zebra"] #sidebar .bg-white { background: transparent !important; }

/* ── Top header bar ─────────────────────────────────────────────── */
html[data-theme="zebra"] header.bg-white {
    background: #161616 !important;
    border-bottom-color: #2a2a2a !important;
}
html[data-theme="zebra"] header .text-base,
html[data-theme="zebra"] header .text-lg { color: #F5F2EA !important; }

/* ── Page background ────────────────────────────────────────────── */
html[data-theme="zebra"] body,
html[data-theme="zebra"] .main-content { background: #efece4 !important; }

/* ── Cards, tables, modals: off-white surfaces ──────────────────── */
html[data-theme="zebra"] .bg-white {
    background: #faf8f3 !important;
    border-color: #e2ded4 !important;
}
html[data-theme="zebra"] .border-gray-100,
html[data-theme="zebra"] .border-gray-200 { border-color: #e2ded4 !important; }
html[data-theme="zebra"] thead.bg-gray-50,
html[data-theme="zebra"] tr.hover\:bg-gray-50:hover { background: #f0ede5 !important; }
html[data-theme="zebra"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #e6e2d8 !important; }

/* ── Buttons: primary becomes black, secondary becomes outline ──── */
html[data-theme="zebra"] .bg-indigo-600 { background: #111111 !important; }
html[data-theme="zebra"] .hover\:bg-indigo-700:hover { background: #2b2b2b !important; }
html[data-theme="zebra"] .text-indigo-600 { color: #111111 !important; }
html[data-theme="zebra"] .hover\:text-indigo-800:hover { color: #000000 !important; }
html[data-theme="zebra"] .hover\:text-indigo-600:hover { color: #111111 !important; }
/* Headings + links that use indigo accent also become black */
html[data-theme="zebra"] .text-indigo-500 { color: #111111 !important; }
html[data-theme="zebra"] .hover\:text-indigo-700:hover { color: #000000 !important; }
html[data-theme="zebra"] .focus\:border-indigo-500:focus { border-color: #6b675e !important; }
html[data-theme="zebra"] .hover\:border-indigo-300:hover,
html[data-theme="zebra"] .hover\:bg-indigo-50:hover { background: #eeeae0 !important; }
html[data-theme="zebra"] .ring-indigo-200 { --tw-ring-color: #d8d3c6 !important; }
html[data-theme="zebra"] .peer-checked\:border-indigo-500 { border-color: #111111 !important; }

/* ── Focus rings: neutral instead of indigo ─────────────────────── */
html[data-theme="zebra"] .focus\:ring-indigo-500:focus { --tw-ring-color: #9a958a !important; }
html[data-theme="zebra"] .focus\:border-indigo-500:focus { border-color: #6b675e !important; }
html[data-theme="zebra"] input:focus,
html[data-theme="zebra"] select:focus,
html[data-theme="zebra"] textarea:focus { outline-color: #6b675e !important; }

/* ── Impersonation banner: stays striped/purple, slightly darker ── */
html[data-theme="zebra"] .bg-purple-600 { background: #3b2a52 !important; }

/* ── Toasts on dark surfaces remain readable ────────────────────── */
html[data-theme="zebra"] .toast { box-shadow: 0 4px 24px rgba(0,0,0,.35); }

/* ── Scrollbar tint (WebKit) ────────────────────────────────────── */
html[data-theme="zebra"] .sidebar::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }