/* trangle auth portal — dark theme override.
 * Matches the house style used by the dashboards hub and other portals:
 * --bg #0a0a0c, --surface #141418, --border #2a2a33, --text #e8e8ed,
 * --text-secondary #8888a0, --accent #6e9eff. Inter / SF stack.
 *
 * Loaded AFTER caddy-security's bundled Tailwind CSS via the
 * `custom css` directive, so it overrides utility classes by selector
 * specificity + !important where Tailwind's utilities are stubborn.
 */

:root {
  --bg: #0a0a0c;
  --surface: #141418;
  --surface-2: #1a1a20;
  --border: #2a2a33;
  --text: #e8e8ed;
  --text-secondary: #8888a0;
  --text-muted: #5a5a6a;
  --accent: #6e9eff;
  --accent-hover: #8db4ff;
  --danger: #f87171;
  --mono: "SF Mono", "Menlo", monospace;
  --sans: -apple-system, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
}

/* Page chrome */
html.bg-blue-100,
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--sans);
}

/* Card container — was white shadow box on light blue */
.app-container {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset,
              0 20px 40px -20px rgba(0,0,0,0.6) !important;
  color: var(--text);
}

/* Logo: remove image, keep the "Sign In" headline. */
.logo-img { display: none !important; }
.logo-box { margin-bottom: 24px; }
.logo-txt {
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.02em;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* Field labels (the "Please provide username..." prompts). */
label.text-primary-700,
label.text-primary-600,
.text-primary-700,
.text-primary-600 {
  color: var(--text-secondary) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}

/* Input fields */
.app-inp-box { box-shadow: none !important; }
.app-inp-txt {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem 0.85rem 3rem !important;
  border-radius: 6px !important;
}
.app-inp-txt:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(110,158,255,0.18) !important;
}
.app-inp-txt::placeholder { color: var(--text-muted) !important; }

/* Icon inside input prefix */
.app-inp-prf-img { color: var(--text-muted) !important; }

/* Primary action button */
.app-btn-pri {
  background: var(--accent) !important;
  color: #0a0a0c !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
  border-radius: 6px !important;
  transition: background-color 0.12s ease;
}
.app-btn-pri:hover { background: var(--accent-hover) !important; }
.app-btn-pri:focus { box-shadow: 0 0 0 3px rgba(110,158,255,0.25) !important; }

/* Secondary button (cancel-style) */
.app-btn-sec {
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
.app-btn-sec:hover { background: var(--border) !important; }

/* Select dropdowns */
.app-inp-sel {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* OAuth provider cards / login-btn-box rows (mostly unused here but
 * the CSS ships them; tame the color so any future OAuth additions
 * don't blast bright). */
.app-login-btn-box { border-color: var(--border) !important; }
.app-login-btn-txt {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.app-login-btn-txt:hover { background: var(--border) !important; }

/* Auto-generated OAuth provider badges (GitHub/Discord/etc.) — neutralize
 * the brand-color bg overrides Tailwind ships so nothing flashes color
 * against the dark theme. Most are off for us but defensive. */
[class*="bg-["][class*="]"] { /* arbitrary-color tailwind classes */
  background-color: var(--surface-2) !important;
}
[class*="text-["][class*="]"] {
  color: var(--text-secondary) !important;
}

/* Footer / muted text */
small, .text-sm, p.text-lg { color: var(--text-secondary); }

/* Anything still using bg-white or bg-blue-100 deep in the markup */
.bg-white { background: var(--surface) !important; }
.bg-blue-100 { background: var(--bg) !important; }

/* Forgot-username link, support link, etc. */
a, a:visited { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Sandbox / MFA pages reuse the same shell. The MFA challenge views
 * include extra blocks (QR code, U2F prompts); they inherit the
 * container styling above. The QR/U2F SVGs render fine on dark since
 * they're already monochrome. */

/* Favicon link is referenced but we don't override it — Caddy-security's
 * default is a small key icon, acceptable on dark. */