/*
 * Moko Consulting — Ntfy Web UI Theme
 * Injected via nginx sub_filter (<link> in </head>)
 *
 * ntfy uses MUI with palette primary.main: #338574
 * MUI applies colors via inline styles, so we need !important overrides
 */

/* ── Palette (light) ───────────────────────────── */
:root {
  --moko-navy:       #001B4C;
  --moko-blue:       #2a69b8;
  --moko-blue-hover: #224faa;
  --moko-bg:         #f0f4fb;
  --moko-border:     #dae8f7;
  --moko-blue-08:    rgba(42, 105, 184, 0.08);
  --moko-blue-12:    rgba(42, 105, 184, 0.12);
  --moko-blue-25:    rgba(42, 105, 184, 0.25);
}

/* ── App Bar ───────────────────────────────────── */
header,
header[class*="MuiAppBar"],
div[class*="MuiAppBar"] {
  background-color: var(--moko-navy) !important;
  background:       var(--moko-navy) !important;
}

/* ── Body ──────────────────────────────────────── */
body {
  background-color: var(--moko-bg) !important;
}

/* ── Links (exclude buttons — MUI renders <a> inside buttons) ── */
a:not([class*="MuiButton"]):not([class*="MuiFab"]),
a:not([class*="MuiButton"]):not([class*="MuiFab"]):visited {
  color: var(--moko-blue) !important;
}
a:not([class*="MuiButton"]):not([class*="MuiFab"]):hover {
  color: var(--moko-blue-hover) !important;
  text-decoration: none;
}

/* ── Contained buttons / FABs (filled bg + white text) ── */
[class*="MuiButton"][class*="contained"],
[class*="MuiFab"][class*="primary"] {
  background-color: var(--moko-blue) !important;
  background:       var(--moko-blue) !important;
  color:            #ffffff !important;
  text-transform:   none !important;
}

[class*="MuiButton"][class*="contained"]:hover,
[class*="MuiFab"][class*="primary"]:hover {
  background-color: var(--moko-blue-hover) !important;
  background:       var(--moko-blue-hover) !important;
}

/* ── Text / outlined buttons (no bg, blue text) ── */
[class*="MuiButton"][class*="text"],
[class*="MuiButton"][class*="outlined"] {
  color: var(--moko-blue) !important;
}

/* ── Icon buttons, form controls, tabs ─────────── */
[class*="MuiIconButton"][class*="Primary"],
[class*="MuiLink"],
[class*="Mui-checked"],
[class*="Mui-selected"][class*="MuiTab"],
[class*="MuiInputLabel"][class*="Mui-focused"] {
  color: var(--moko-blue) !important;
}

/* ── Indicators & tracks ───────────────────────── */
[class*="MuiTabs-indicator"],
[class*="Mui-checked"] + [class*="MuiSwitch-track"] {
  background-color: var(--moko-blue) !important;
}

/* ── Focused inputs ────────────────────────────── */
[class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--moko-blue) !important;
}

/* ── Chips ─────────────────────────────────────── */
[class*="MuiChip"][class*="Primary"] {
  background-color: var(--moko-blue) !important;
}

/* ── Cards ─────────────────────────────────────── */
[class*="MuiCard"] {
  border: 1px solid var(--moko-border) !important;
}

/* ── Snackbar ──────────────────────────────────── */
[class*="MuiSnackbarContent"] {
  background-color: var(--moko-navy) !important;
}

/* ── Dialog ────────────────────────────────────── */
[class*="MuiDialogTitle"] {
  background-color: var(--moko-bg) !important;
  border-bottom: 1px solid var(--moko-border) !important;
}

/* ── Drawer / Sidebar ──────────────────────────── */
[class*="MuiDrawer"] > [class*="MuiPaper"],
[class*="MuiDrawer-paper"] {
  background-color: var(--moko-bg) !important;
  background:       var(--moko-bg) !important;
}

[class*="MuiDrawer"] [class*="MuiListItem"],
[class*="MuiDrawer"] [class*="MuiListItemButton"],
[class*="MuiDrawer"] li,
[class*="MuiDrawer"] [class*="MuiListItemText"] span,
[class*="MuiDrawer"] [class*="MuiListItemIcon"] {
  color: #ffffff !important;
}

[class*="MuiDrawer"] [class*="MuiListItemButton"]:hover {
  background-color: var(--moko-blue-08) !important;
}

[class*="MuiDrawer"] [class*="Mui-selected"],
[class*="MuiDrawer"] [class*="Mui-selected"][class*="MuiListItemButton"] {
  background-color: var(--moko-blue-12) !important;
  border-right: 3px solid var(--moko-blue) !important;
}

[class*="MuiDrawer"] [class*="Mui-selected"] [class*="MuiListItemText"] span,
[class*="MuiDrawer"] [class*="Mui-selected"] [class*="MuiListItemIcon"] {
  color: var(--moko-blue) !important;
  font-weight: 600 !important;
}

[class*="MuiDrawer"] [class*="MuiDivider"],
[class*="MuiDrawer"] hr {
  border-color: var(--moko-border) !important;
}

/* ── Toolbar icons (white on navy) ─────────────── */
header [class*="MuiIconButton"],
header [class*="MuiTypography"],
header button,
header svg {
  color: #ffffff !important;
  fill:  #ffffff !important;
}

/* ── Selection & scrollbar ─────────────────────── */
::selection                     { background-color: var(--moko-blue-25); }
::-webkit-scrollbar-thumb       { background-color: #b3d1f0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #7aaae0; }

/* ═══════════════════════════════════════════════
   Dark mode
   Detected via ntfy inline style, body class, data attr, or OS preference.
   Uses :is() to collapse repeated body-level selectors.
   ═══════════════════════════════════════════════ */

:is(
  body[style*="background-color: rgb(18"],
  body[style*="background-color: rgb(27"],
  body[class*="dark"],
  html[data-theme="dark"] body
) {
  --moko-navy:       #080e18;
  --moko-blue:       #4a8fd8;
  --moko-blue-hover: #5fa0e4;
  --moko-bg:         #0e1420;
  --moko-border:     #253040;
  --moko-blue-08:    rgba(74, 143, 216, 0.08);
  --moko-blue-12:    rgba(74, 143, 216, 0.15);
  --moko-blue-25:    rgba(74, 143, 216, 0.35);

  background-color: var(--moko-bg) !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiDrawer"] > [class*="MuiPaper"],
:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiDrawer-paper"] {
  background-color: #0a1018 !important;
  background:       #0a1018 !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiDrawer"] [class*="MuiListItemText"] span {
  color: #c0ccd8 !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiDrawer"] [class*="MuiListItemIcon"] {
  color: #607890 !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  header {
  background-color: var(--moko-navy) !important;
  background:       var(--moko-navy) !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  a { color: var(--moko-blue) !important; }

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiButton"][class*="Primary"] {
  background-color: var(--moko-blue) !important;
  background:       var(--moko-blue) !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiCard"] { border-color: var(--moko-border) !important; }

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiDialogTitle"] {
  background-color: #121a26 !important;
  border-bottom-color: var(--moko-border) !important;
}

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  [class*="MuiSnackbarContent"] { background-color: var(--moko-navy) !important; }

:is(body[style*="background-color: rgb(18"], body[style*="background-color: rgb(27"], body[class*="dark"])
  ::selection { background-color: var(--moko-blue-25); }

/* Fallback: OS-level dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --moko-navy:       #080e18;
    --moko-blue:       #4a8fd8;
    --moko-blue-hover: #5fa0e4;
    --moko-bg:         #0e1420;
    --moko-border:     #253040;
    --moko-blue-08:    rgba(74, 143, 216, 0.08);
    --moko-blue-12:    rgba(74, 143, 216, 0.15);
    --moko-blue-25:    rgba(74, 143, 216, 0.35);
  }

  [class*="MuiDrawer"] > [class*="MuiPaper"],
  [class*="MuiDrawer-paper"] {
    background-color: #0a1018 !important;
    background:       #0a1018 !important;
  }

  [class*="MuiDrawer"] [class*="MuiListItemText"] span { color: #c0ccd8 !important; }
  [class*="MuiDrawer"] [class*="MuiListItemIcon"]      { color: #607890 !important; }
}

/* ── Mobile ────────────────────────────────────── */
@media screen and (max-width: 600px) {
  [class*="MuiToolbar"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}