/* =========================================================================
 * Niyal Modern UI + Dark Mode  —  base, theme-agnostic layer
 * Colours are injected as CSS variables (see plugin inline style), so a site
 * admin can recolour everything from the settings page. Everything dark is
 * scoped under html[data-theme="dark"] so light mode leaves the theme untouched.
 * ========================================================================= */

:root {
  --nmui-bg: #ffffff;
  --nmui-surface: #f5f5f7;
  --nmui-elev: #ececf0;
  --nmui-text: #222222;
  --nmui-muted: #666666;
  --nmui-border: #e2e2e6;
  --nmui-accent: #e4422e;
  --nmui-radius: 14px;
}

/* Smooth, respectful theme transition */
html[data-nmui] body,
html[data-nmui] body * {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  html[data-nmui] body,
  html[data-nmui] body * { transition: none !important; }
}

/* ------------------------------- DARK MODE ------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  background: var(--nmui-bg);
}
html[data-theme="dark"] body {
  background: var(--nmui-bg);
  color: var(--nmui-text);
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) { color: var(--nmui-text); }
html[data-theme="dark"] :is(p, li, span, dd, dt, small, label, blockquote, figcaption) { color: var(--nmui-text); }
html[data-theme="dark"] :is(.muted, .description, .meta, time, .date) { color: var(--nmui-muted); }

html[data-theme="dark"] a { color: var(--nmui-accent); }
html[data-theme="dark"] a:hover { color: var(--nmui-text); }

html[data-theme="dark"] hr { border-color: var(--nmui-border); }
html[data-theme="dark"] :is(code, pre, kbd) {
  background: var(--nmui-elev);
  color: var(--nmui-text);
  border-radius: calc(var(--nmui-radius) - 8px);
}
html[data-theme="dark"] blockquote {
  border-left-color: var(--nmui-accent);
  background: var(--nmui-surface);
}

/* Form controls */
html[data-theme="dark"] :is(input, textarea, select) {
  background: var(--nmui-elev);
  color: var(--nmui-text);
  border-color: var(--nmui-border);
}
html[data-theme="dark"] :is(input, textarea, select)::placeholder { color: var(--nmui-muted); }
html[data-theme="dark"] :is(input[type="submit"], button, .button, .btn) {
  background: var(--nmui-accent);
  color: #fff;
  border-color: transparent;
}

/* Tables */
html[data-theme="dark"] :is(table, th, td) { border-color: var(--nmui-border); }
html[data-theme="dark"] thead th { background: var(--nmui-surface); }
html[data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }

/* Images/embeds slightly softened so pure-white art doesn't glare */
html[data-theme="dark"] :is(img, video, iframe) { filter: brightness(.94); }

/* Conservative container heuristic (safe, non-form) */
html[data-theme="dark"] :is([class*="widget"], [class*="sidebar"], [class*="panel"]):not(input):not(select):not(textarea) {
  background: var(--nmui-surface);
  color: var(--nmui-text);
  border-color: var(--nmui-border);
}

/* ============================ TOGGLE BUTTON ============================== */
.nmui-toggle {
  position: fixed;
  z-index: 2147483000;
  width: 52px;
  height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: var(--nmui-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .22);
  touch-action: none;                 /* enable custom drag on touch */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
}
.nmui-toggle:hover { transform: translateY(-2px) scale(1.05); }
.nmui-toggle:active { transform: scale(.96); }
.nmui-toggle.nmui-dragging { cursor: grabbing; transition: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .38); }

/* Start corners — respect mobile safe areas */
.nmui-pos-bottom-right { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.nmui-pos-bottom-left  { left:  calc(18px + env(safe-area-inset-left, 0px));  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.nmui-pos-top-right    { right: calc(18px + env(safe-area-inset-right, 0px)); top:    calc(18px + env(safe-area-inset-top, 0px)); }
.nmui-pos-top-left     { left:  calc(18px + env(safe-area-inset-left, 0px));  top:    calc(18px + env(safe-area-inset-top, 0px)); }

.nmui-ic { display: block; }
/* Light mode → show moon (tap to go dark). Dark mode → show sun. */
.nmui-sun { display: none; }
html[data-theme="dark"] .nmui-moon { display: none; }
html[data-theme="dark"] .nmui-sun  { display: block; }

/* Mobile-app polish: comfortable tap target on small screens */
@media (max-width: 600px) {
  .nmui-toggle { width: 48px; height: 48px; }
}