/* Nexus brand override - main styles come from brainzlab-ui gem dashboard.css */
:root {
  /* Bridge to the single brand token. dm_compat literally says "override
     --dm-brand per service": this is exactly that, with the brand resolved
     per host instead of a per-service constant. This way the auth screens
     —which use the --color-* vocabulary derived from here— follow the brand
     without refactoring that third token system. */
  --dm-brand: var(--color-brand, #0ea5e9);

  /* Aliases: map --color-* (used in views) to --dm-* (defined in brainzlab-ui) */
  --color-text: var(--dm-text);
  --color-text-secondary: var(--dm-text-secondary);
  --color-text-muted: var(--dm-text-muted);
  --color-text-placeholder: var(--dm-text-placeholder);
  --color-bg: var(--dm-bg);
  --color-surface: var(--dm-surface);
  --color-surface-light: var(--dm-surface-light);
  --color-border: var(--dm-border);
  --color-input-bg: var(--dm-input-bg);
  --color-input-border: var(--dm-input-border);
  --color-primary: var(--dm-brand);
  --color-primary-bg: var(--dm-info-bg);
  --color-primary-text: var(--dm-info-text);
  --color-success: var(--dm-success);
  --color-success-bg: var(--dm-success-bg);
  --color-success-text: var(--dm-success-text);
  --color-warning: var(--dm-warning);
  --color-warning-bg: var(--dm-warning-bg);
  --color-warning-text: var(--dm-warning-text);
  --color-error: var(--dm-error);
  --color-error-bg: var(--dm-error-bg);
  --color-error-text: var(--dm-error-text);
  --color-info: var(--dm-info);
  --color-info-bg: var(--dm-info-bg);
  --color-info-text: var(--dm-info-text);
  --color-table-header: var(--dm-surface-alt);
  --color-sidebar-bg: var(--dm-surface-alt);
  --color-sidebar-border: var(--dm-border);
  --color-sidebar-text: var(--dm-text);
  --shadow-sm: var(--dm-shadow-sm);

  /* Accent colors for badges and status indicators */
  --color-purple: #7c3aed;
  --color-purple-bg: #ede9fe;
  --color-purple-text: #6b21a8;
  --color-active-green: #10b981;
  --color-violet: #8b5cf6;
  --color-on-warning: #1a1a1a;
}

/* Normalize button_to <form><button> to match link_to <a> dimensions */
td form {
  display: inline;
}

td form button {
  line-height: 1rem;
}

/* Dark mode overrides for accent colors */
html.dark {
  --color-purple: #a78bfa;
  --color-purple-bg: rgba(139, 92, 246, 0.15);
  --color-purple-text: #c4b5fd;
  --color-active-green: #34d399;
  --color-violet: #c084fc;
  --color-on-warning: #1a1a1a;
}

/* Date/time input calendar icon — visible in both themes.
   Browsers paint ::-webkit-calendar-picker-indicator dark by default,
   which is invisible against dark backgrounds. We give it explicit color
   in light mode and invert it in dark mode. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: none;
  transition: opacity 0.15s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4);
  opacity: 0.85;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="month"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Firefox fallback — no pseudo-element control, but ensure text color */
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark input[type="month"],
html.dark input[type="week"] {
  color-scheme: dark;
}

/* ─── Fix branded light theme (theme_mode=light) ──────────────────────────
   The brainzlab-ui gem (dark-mode.css) tints body and h1..h6 dark under
   @media (prefers-color-scheme: dark) with the guard `:root:not(.light)` —
   the class ONLY, without `[data-theme="light"]`. But the layout script uses
   data-theme as the source of truth (the .light class can be missing due to
   Turbo timing), so a partner brand with theme_mode="light" ended up with
   dark content over a light chrome: invisible title, gray cards.

   This re-declares those rules with the complete guard, aligned with the rest
   of the system (dm_compat uses `:not(.light):not([data-theme="light"])`). It
   loads AFTER the gem, so it wins in the cascade.

   Root cause: it's in the gem. It should also be upstreamed to brainzlab-ui so
   synapse and the other apps benefit. See [[ventures/nexus/todo]]. */
@media (prefers-color-scheme: dark) {
  :root:not(.light)[data-theme="light"] body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
  }

  :root:not(.light)[data-theme="light"] h1,
  :root:not(.light)[data-theme="light"] h2,
  :root:not(.light)[data-theme="light"] h3,
  :root:not(.light)[data-theme="light"] h4,
  :root:not(.light)[data-theme="light"] h5,
  :root:not(.light)[data-theme="light"] h6 {
    color: var(--dm-text);
  }
}