/* c3 "Mindless" sign-in theme — recipes.c3lelouch.com (Tandoor, NPM host 15)
   Served at /tandoor-mindless.v2.css, injected before </head> by nginx
   sub_filter. Companion script: /c3-login-brand.v5.js (canvas + co-brand row).

   Tandoor is a Django + Vuetify 3 app: the sign-in view is a LIGHT Vuetify card
   (#ffffff card on a #f5efea page) with .v-field inputs and a .v-btn submit.
   Everything here is gated on `body:has(.v-form)`, which only the sign-in view
   has, so the recipe UI keeps its own (light) theme.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body:has(.v-form) {
  background: #0b0c10 !important;
  background-image: none !important;
  color: #f1f3f9 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* the canvas is the only background layer and sits behind everything */
#c3-hex-bg { z-index: -1 !important; }

/* Vuetify paints an opaque application shell */
body:has(.v-form) .v-application,
body:has(.v-form) .v-application__wrap {
  background: #0b0c10 !important;
  color: #f1f3f9 !important;
}

/* Tandoor's app bar is still a light beige strip with its own wordmark, which
   both clashes and duplicates the co-brand row. Hide the bar on the sign-in
   view only (same call as dockge / uptime-kuma / jellyfin). */
body:has(.v-form) .v-app-bar,
body:has(.v-form) .v-toolbar,
body:has(.v-form) header {
  display: none !important;
}

/* ── the sign-in card ── */
body:has(.v-form) .v-card {
  background: #141622 !important;
  border: 1px solid rgba(139, 44, 245, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 48px rgba(255, 31, 76, 0.12), 0 4px 32px rgba(0, 0, 0, 0.6) !important;
  color: #f1f3f9 !important;
}

/* the app's own brand logo is replaced by the co-brand row */
body:has(.v-form) .v-card .v-img { display: none !important; }

body:has(.v-form) .v-card h1,
body:has(.v-form) .v-card h2,
body:has(.v-form) .v-card .text-h5,
body:has(.v-form) .v-card .text-h6 {
  color: #f1f3f9 !important;
  font-weight: 600 !important;
}

/* ── fields (Vuetify 3 .v-field) ── */
body:has(.v-form) .v-field {
  background: #0f1118 !important;
  border-radius: 10px !important;
  color: #f1f3f9 !important;
}

body:has(.v-form) .v-field__input {
  color: #f1f3f9 !important;
  font-family: inherit !important;
}

body:has(.v-form) .v-field__outline,
body:has(.v-form) .v-field__outline__start,
body:has(.v-form) .v-field__outline__end,
body:has(.v-form) .v-field__outline__notch {
  --v-field-border-opacity: 1;
  color: rgba(139, 44, 245, 0.28) !important;
  border-color: rgba(139, 44, 245, 0.28) !important;
}

body:has(.v-form) .v-field--focused .v-field__outline,
body:has(.v-form) .v-field--focused .v-field__outline__start,
body:has(.v-form) .v-field--focused .v-field__outline__end,
body:has(.v-form) .v-field--focused .v-field__outline__notch {
  color: #8b2cf5 !important;
  border-color: #8b2cf5 !important;
}

body:has(.v-form) .v-label {
  color: #8b92b0 !important;
  opacity: 1 !important;
  font-family: inherit !important;
}

/* ── primary action ── */
body:has(.v-form) .v-btn {
  background: linear-gradient(135deg, #ff1f4c, #8b2cf5) !important;
  background-image: linear-gradient(135deg, #ff1f4c, #8b2cf5) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px rgba(255, 31, 76, 0.28) !important;
  text-transform: none !important;
}

body:has(.v-form) .v-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 26px rgba(255, 31, 76, 0.4) !important;
}

/* secondary text links stay quiet */
body:has(.v-form) .v-card a { color: #b9c0d8 !important; }

/* ── co-branded header (markup injected by the script) ── */
.c3-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 0 16px;
}

/* the emblem PNG carries a near-black plate — `lighten` resolves the plate into
   the card while keeping the mark's real colours (`screen` washes it out) */
.c3-brand-logo {
  width: 132px;
  height: auto;
  flex: none;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 14px rgba(255, 31, 76, 0.28));
}

.c3-brand-sep {
  flex: none;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, rgba(139, 44, 245, 0.65), transparent);
}

.c3-brand-app { display: inline-flex; align-items: center; gap: 10px; }

.c3-brand-mark {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 0 10px rgba(139, 44, 245, 0.35));
}

.c3-brand-word {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #f1f3f9;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .c3-brand-logo { width: 104px; }
  .c3-brand-sep { height: 44px; }
  .c3-brand-word { font-size: 16px; }
}