/* movahedi.ca admin brand — SonicJS
 * Navy #0F172A / #020617 · Teal #14B8A6 · Inter + Playfair Display
 * WCAG 2.2 AA focus rings · dark-first
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap");

:root {
  --mv-navy-50: #f0f4f8;
  --mv-navy-100: #d9e2ec;
  --mv-navy-800: #243b53;
  --mv-navy-900: #0f172a;
  --mv-navy-950: #020617;
  --mv-surface: #0b1220;
  --mv-surface-elevated: #111827;
  --mv-teal-50: #f0fdfa;
  --mv-teal-300: #5eead4;
  --mv-teal-400: #2dd4bf;
  --mv-teal-500: #14b8a6;
  --mv-teal-600: #0d9488;
  --mv-teal-700: #0f766e;
  --mv-teal-950: #042f2e;
  --mv-slate-50: #f8fafc;
  --mv-slate-100: #f1f5f9;
  --mv-slate-200: #e2e8f0;
  --mv-slate-300: #cbd5e1;
  --mv-slate-400: #94a3b8;
  --mv-slate-500: #64748b;
  --mv-border: rgb(148 163 184 / 0.18);
  --mv-input: rgb(148 163 184 / 0.22);
  --mv-ring: #14b8a6;
  --mv-ring-soft: rgb(20 184 166 / 0.45);
  --mv-shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.28), 0 0 0 1px rgb(148 163 184 / 0.06);
  --mv-shadow-glow: 0 0 0 1px rgb(20 184 166 / 0.25), 0 8px 32px -8px rgb(20 184 166 / 0.35);
  --mv-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mv-font-serif: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  color-scheme: dark;
}

/* -------------------------------------------------------------------------- */
/* Base shell                                                                  */
/* -------------------------------------------------------------------------- */

html {
  color-scheme: dark;
}

html.dark,
html.dark body,
body {
  font-family: var(--mv-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Admin layout body (catalyst: min-h-screen bg-white dark:bg-zinc-900) */
body.min-h-screen {
  background: var(--mv-navy-950) !important;
  color: var(--mv-slate-50) !important;
}

/* Login / auth pages (body.h-full.bg-zinc-950) */
body.h-full,
body.bg-zinc-950 {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgb(20 184 166 / 0.14), transparent 55%),
    linear-gradient(165deg, var(--mv-navy-950) 0%, var(--mv-navy-900) 48%, #0b1220 100%) !important;
  color: var(--mv-slate-50) !important;
}

/* Teal brand accent line at top of every page */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--mv-teal-600), var(--mv-teal-400), var(--mv-teal-500));
  pointer-events: none;
}

/* Typography — display headings */
h1, h2, h3,
.font-display,
[class*="text-2xl"][class*="font-semibold"],
[class*="text-xl"][class*="font-semibold"] {
  font-family: var(--mv-font-serif) !important;
  letter-spacing: -0.02em;
}

/* Keep form labels / UI chrome on Inter */
label, button, input, select, textarea, nav, .text-sm, .text-xs {
  font-family: var(--mv-font-sans) !important;
}

/* -------------------------------------------------------------------------- */
/* Surfaces — map zinc admin chrome → navy                                     */
/* -------------------------------------------------------------------------- */

/* Desktop shell rail */
.dark .lg\:bg-zinc-950,
.dark.lg\:bg-zinc-950 {
  background-color: var(--mv-navy-950) !important;
}

/* Main content card panel */
.dark .dark\:lg\:bg-zinc-900,
.dark .grow.p-6,
.grow.p-6.lg\:rounded-lg {
  background-color: var(--mv-navy-900) !important;
}

/* Sidebar */
nav.flex.h-full.min-h-0.flex-col,
.dark nav.flex.h-full {
  background-color: var(--mv-navy-900) !important;
  border-color: var(--mv-border) !important;
  box-shadow: none !important;
}

/* Header / mobile bar */
header.border-b,
.dark header {
  border-color: var(--mv-border) !important;
  background-color: rgb(15 23 42 / 0.85) !important;
  backdrop-filter: blur(8px);
}

/* Cards / panels with zinc fills */
.dark .bg-zinc-900,
.dark .dark\:bg-zinc-900,
.bg-zinc-900 {
  background-color: var(--mv-navy-900) !important;
}

.dark .bg-zinc-800,
.dark .dark\:bg-zinc-800,
.bg-zinc-800 {
  background-color: var(--mv-surface-elevated) !important;
}

.dark .bg-zinc-950,
.dark .dark\:bg-zinc-950,
.bg-zinc-950 {
  background-color: var(--mv-navy-950) !important;
}

.dark .bg-zinc-100,
.dark .dark\:bg-zinc-100 {
  background-color: var(--mv-surface) !important;
}

/* Rings / borders */
.dark .ring-white\/10,
.dark .dark\:ring-white\/10,
.ring-1.ring-white\/10 {
  --tw-ring-color: var(--mv-border) !important;
}

.dark .border-white\/5,
.dark .dark\:border-white\/5,
.border-zinc-950\/5 {
  border-color: var(--mv-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Primary actions                                                             */
/* -------------------------------------------------------------------------- */

button[type="submit"],
.btn-primary,
a.btn-primary,
[data-primary="true"] {
  background: var(--mv-teal-500) !important;
  color: var(--mv-teal-950) !important;
  border-color: var(--mv-teal-500) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgb(2 6 23 / 0.35);
}

button[type="submit"]:hover,
.btn-primary:hover,
a.btn-primary:hover {
  background: var(--mv-teal-400) !important;
  border-color: var(--mv-teal-400) !important;
  color: var(--mv-teal-950) !important;
}

button[type="submit"]:active,
.btn-primary:active {
  background: var(--mv-teal-600) !important;
}

/* Login Sign In is white by default — recolor to teal */
#login-form button[type="submit"],
form#login-form button[type="submit"] {
  background: var(--mv-teal-500) !important;
  color: var(--mv-teal-950) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  box-shadow: var(--mv-shadow-glow);
}

#login-form button[type="submit"]:hover {
  background: var(--mv-teal-400) !important;
}

/* Secondary / neutral buttons stay readable */
button:not([type="submit"]):not(.btn-primary):hover {
  border-color: rgb(20 184 166 / 0.35);
}

/* -------------------------------------------------------------------------- */
/* Focus rings — WCAG 2.2 AA                                                    */
/* -------------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--mv-ring) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--mv-ring-soft) !important;
}

/* Override Tailwind focus:ring-white / ring-blue on inputs & buttons */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--mv-ring) !important;
  outline-offset: 2px !important;
  --tw-ring-color: var(--mv-ring) !important;
  box-shadow: 0 0 0 2px var(--mv-navy-950), 0 0 0 4px var(--mv-ring) !important;
  border-color: var(--mv-teal-500) !important;
}

/* -------------------------------------------------------------------------- */
/* Links                                                                       */
/* -------------------------------------------------------------------------- */

a {
  color: var(--mv-teal-400);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--mv-teal-300);
}

/* Sidebar nav links — don't force teal on every item */
nav a {
  color: inherit;
}

nav a:hover {
  color: var(--mv-teal-300) !important;
  background-color: rgb(20 184 166 / 0.08) !important;
}

nav a[data-current="true"],
nav a[aria-current="page"] {
  color: var(--mv-teal-300) !important;
  background-color: rgb(20 184 166 / 0.12) !important;
  border-color: rgb(20 184 166 / 0.25);
}

/* -------------------------------------------------------------------------- */
/* Form controls                                                               */
/* -------------------------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  background: var(--mv-surface) !important;
  border-color: var(--mv-input) !important;
  color: var(--mv-slate-100) !important;
  border-radius: 0.5rem;
}

input::placeholder,
textarea::placeholder {
  /* slate-400 on navy surface ≥ 4.5:1 for large text / ~3:1 UI chrome */
  color: var(--mv-slate-400) !important;
  opacity: 0.9;
}

/* Login inputs — zinc-800 → surface */
#login-form input {
  background: var(--mv-surface) !important;
  box-shadow: 0 0 0 1px var(--mv-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Login page polish                                                           */
/* -------------------------------------------------------------------------- */

body.h-full .mt-8 .bg-zinc-900,
body.h-full .bg-zinc-900.shadow-sm.ring-1 {
  background: rgb(15 23 42 / 0.92) !important;
  backdrop-filter: blur(12px);
  box-shadow: var(--mv-shadow-card), var(--mv-shadow-glow) !important;
  border-radius: 0.875rem !important;
}

/* Welcome heading → Playfair */
body.h-full h2 {
  font-family: var(--mv-font-serif) !important;
  font-weight: 600 !important;
  color: var(--mv-slate-50) !important;
  letter-spacing: -0.02em;
}

body.h-full h2 + p {
  color: var(--mv-slate-400) !important;
}

/* Version badge → teal chip */
body.h-full .bg-cyan-500\/10,
body.h-full .text-cyan-400 {
  background-color: rgb(20 184 166 / 0.12) !important;
  color: var(--mv-teal-300) !important;
  --tw-ring-color: rgb(20 184 166 / 0.25) !important;
}

/* -------------------------------------------------------------------------- */
/* EasyMDE (markdown body editor) — dark navy/teal polish                      */
/* Core also injects EasyMDE dark CSS when easy-mdx is active; these tokens    */
/* align the editor with movahedi brand and improve WCAG focus.                */
/* -------------------------------------------------------------------------- */

.EasyMDEContainer {
  border: 1px solid var(--mv-border) !important;
  border-radius: 0.625rem !important;
  box-shadow: var(--mv-shadow-card) !important;
  overflow: hidden;
  background: var(--mv-surface) !important;
}

.EasyMDEContainer .CodeMirror {
  background: var(--mv-surface) !important;
  color: var(--mv-slate-100) !important;
  border: none !important;
  border-top: 1px solid var(--mv-border) !important;
  font-family: var(--mv-font-sans) !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  min-height: 280px;
}

.EasyMDEContainer .CodeMirror-scroll {
  min-height: 280px;
}

.EasyMDEContainer .CodeMirror-cursor {
  border-left: 2px solid var(--mv-teal-400) !important;
}

.EasyMDEContainer .CodeMirror-selected,
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
  background: rgb(20 184 166 / 0.22) !important;
}

.EasyMDEContainer .CodeMirror-gutters {
  background: var(--mv-navy-950) !important;
  border-color: var(--mv-border) !important;
}

.EasyMDEContainer .CodeMirror-linenumber {
  color: var(--mv-slate-400) !important;
}

/* Markdown token contrast on dark surface */
.EasyMDEContainer .cm-header {
  color: var(--mv-slate-50) !important;
  font-family: var(--mv-font-serif) !important;
}
.EasyMDEContainer .cm-header-1 { color: var(--mv-teal-300) !important; }
.EasyMDEContainer .cm-header-2,
.EasyMDEContainer .cm-header-3 { color: var(--mv-teal-400) !important; }
.EasyMDEContainer .cm-link,
.EasyMDEContainer .cm-url { color: var(--mv-teal-400) !important; }
.EasyMDEContainer .cm-string,
.EasyMDEContainer .cm-quote { color: var(--mv-slate-300) !important; }
.EasyMDEContainer .cm-comment { color: var(--mv-slate-400) !important; }
.EasyMDEContainer .cm-strong { color: var(--mv-slate-50) !important; font-weight: 600; }
.EasyMDEContainer .cm-em { color: var(--mv-slate-200) !important; }
.EasyMDEContainer .cm-formatting {
  color: var(--mv-slate-500) !important;
  opacity: 0.85;
}

/* Toolbar — elevated navy strip, teal active/hover */
.EasyMDEContainer .editor-toolbar {
  background: var(--mv-surface-elevated) !important;
  border: none !important;
  border-bottom: 1px solid var(--mv-border) !important;
  opacity: 1 !important;
  padding: 0.35rem 0.4rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
}

.EasyMDEContainer .editor-toolbar.disabled-for-preview {
  opacity: 0.55 !important;
}

.EasyMDEContainer .editor-toolbar button {
  color: var(--mv-slate-200) !important;
  border: 1px solid transparent !important;
  border-radius: 0.375rem !important;
  background: transparent !important;
  min-width: 1.85rem;
  min-height: 1.85rem;
  margin: 0 !important;
}

.EasyMDEContainer .editor-toolbar button i,
.EasyMDEContainer .editor-toolbar button svg {
  color: inherit !important;
  fill: currentColor;
}

.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background: rgb(20 184 166 / 0.16) !important;
  border-color: rgb(20 184 166 / 0.4) !important;
  color: var(--mv-teal-300) !important;
}

.EasyMDEContainer .editor-toolbar button.active {
  box-shadow: inset 0 0 0 1px rgb(20 184 166 / 0.25);
}

/* F29 — keyboard focus on toolbar + CodeMirror chrome */
.EasyMDEContainer .editor-toolbar button:focus-visible {
  outline: 2px solid var(--mv-ring) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px var(--mv-ring-soft) !important;
  color: var(--mv-teal-300) !important;
  z-index: 1;
}

.EasyMDEContainer .editor-toolbar button:disabled,
.EasyMDEContainer .editor-toolbar button[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  color: var(--mv-slate-500) !important;
}

.EasyMDEContainer .editor-toolbar i.separator {
  border-left: 1px solid var(--mv-border) !important;
  border-right: none !important;
  margin: 0 0.25rem !important;
}

.EasyMDEContainer .editor-toolbar.fullscreen,
.EasyMDEContainer.fullscreen,
.EasyMDEContainer .CodeMirror-fullscreen {
  background: var(--mv-navy-950) !important;
  z-index: 1000;
}

.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  background: var(--mv-navy-950) !important;
  color: var(--mv-slate-100) !important;
  border-color: var(--mv-border) !important;
  font-family: var(--mv-font-sans) !important;
  line-height: 1.65 !important;
}

.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview-side h1,
.EasyMDEContainer .editor-preview-side h2,
.EasyMDEContainer .editor-preview-side h3 {
  font-family: var(--mv-font-serif) !important;
  color: var(--mv-slate-50) !important;
}

.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
  color: var(--mv-teal-400) !important;
}

.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code,
.EasyMDEContainer .editor-preview pre,
.EasyMDEContainer .editor-preview-side pre {
  background: var(--mv-surface-elevated) !important;
  color: var(--mv-slate-100) !important;
  border-radius: 0.375rem;
}

.EasyMDEContainer .editor-statusbar {
  background: var(--mv-navy-950) !important;
  color: var(--mv-slate-400) !important;
  border-top: 1px solid var(--mv-border) !important;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.75rem !important;
}

.EasyMDEContainer .CodeMirror-focused {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mv-teal-600), 0 0 0 3px var(--mv-ring-soft) !important;
}

/* F27 — soften leftover “plugin inactive” / textarea-fallback banners */
.richtext-container [role="alert"],
.richtext-container .text-amber-600,
.richtext-container .text-amber-500,
.richtext-container .text-yellow-600,
.richtext-container .text-yellow-500,
.richtext-container .bg-amber-50,
.richtext-container .bg-yellow-50,
[class*="richtext"] [role="alert"],
form .text-amber-600,
form .text-yellow-600 {
  border-radius: 0.5rem !important;
  border: 1px solid rgb(245 158 11 / 0.28) !important;
  background: rgb(15 23 42 / 0.92) !important;
  color: #fcd34d !important; /* amber-300 — readable on navy */
  padding: 0.55rem 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.08);
}

/* When EasyMDE is present, hide residual inactive-plugin chrome if still in DOM */
.EasyMDEContainer ~ [role="alert"],
.EasyMDEContainer + [role="alert"],
.richtext-container:has(.EasyMDEContainer) [role="alert"],
.richtext-container:has(.EasyMDEContainer) .text-amber-600,
.richtext-container:has(.EasyMDEContainer) .text-yellow-600 {
  display: none !important;
}

/* Login product subtitle cue */
body.h-full h2 + p::before {
  content: "movahedi.ca CMS · ";
  color: var(--mv-teal-400);
  font-weight: 500;
}

/* Register / secondary auth links */
body.h-full a.font-semibold {
  color: var(--mv-teal-400) !important;
}

body.h-full a.font-semibold:hover {
  color: var(--mv-teal-300) !important;
}

/* Soft brand mark above login (CSS-only, no DOM change) */
body.h-full .sm\:mx-auto.sm\:w-full.sm\:max-w-md.text-center::before {
  content: "movahedi.ca";
  display: block;
  font-family: var(--mv-font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--mv-slate-100);
  margin-bottom: 0.25rem;
}

body.h-full .sm\:mx-auto.sm\:w-full.sm\:max-w-md.text-center::after {
  content: "CMS · Insights admin";
  display: block;
  font-size: 0.75rem;
  color: var(--mv-slate-400);
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Dim the SonicJS wordmark SVG so brand text leads */
body.h-full .sm\:mx-auto .mx-auto.w-64 {
  opacity: 0.35;
  max-width: 10rem;
  margin-bottom: 0.5rem !important;
  filter: grayscale(0.2);
}

/* -------------------------------------------------------------------------- */
/* Scrollbar                                                                   */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--mv-navy-950);
}

::-webkit-scrollbar-thumb {
  background: var(--mv-navy-800);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mv-teal-700);
}

/* -------------------------------------------------------------------------- */
/* Selection                                                                   */
/* -------------------------------------------------------------------------- */

::selection {
  background: rgb(20 184 166 / 0.35);
  color: var(--mv-slate-50);
}

/* -------------------------------------------------------------------------- */
/* Tables / lists in admin                                                     */
/* -------------------------------------------------------------------------- */

.dark table thead,
.dark th {
  background: var(--mv-surface) !important;
  color: var(--mv-slate-300) !important;
  border-color: var(--mv-border) !important;
}

.dark td {
  border-color: var(--mv-border) !important;
}

/* Active sidebar / primary text accents */
.dark .text-blue-400,
.dark .text-blue-500,
.dark a.text-blue-400 {
  color: var(--mv-teal-400) !important;
}

.dark .hover\:text-blue-300:hover,
.dark a:hover.text-blue-300 {
  color: var(--mv-teal-300) !important;
}

/* -------------------------------------------------------------------------- */
/* Brand utility classes (optional markup)                                     */
/* -------------------------------------------------------------------------- */

.mv-brand-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-navy-900);
}

.mv-brand-bar strong {
  font-family: var(--mv-font-serif);
  font-weight: 600;
  color: var(--mv-slate-100);
}

.mv-brand-bar span {
  color: var(--mv-slate-400);
  font-size: 0.8rem;
}

.mv-brand-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--mv-teal-500);
  box-shadow: 0 0 12px var(--mv-teal-500);
}

.mv-card {
  background: var(--mv-navy-900);
  border: 1px solid var(--mv-border);
  border-radius: 0.75rem;
  box-shadow: var(--mv-shadow-card);
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                              */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}