/* ── Horizon Factory – dark glassmorphism theme (matching Authentik) ── */

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

:root {
  --uca-bg: oklch(0.12 0.05 264);
  --uca-card-bg: rgba(255,255,255,0.04);
  --uca-card-border: rgba(255,255,255,0.08);
  --uca-surface-hover: rgba(255,255,255,0.08);
  --uca-text: oklch(0.985 0 0);
  --uca-text-muted: oklch(0.65 0 0);
  --uca-primary: oklch(0.65 0.22 264);
  --uca-primary-hover: oklch(0.70 0.22 264);
  --uca-primary-glow: oklch(0.52 0.22 264 / 40%);
  --uca-gradient: linear-gradient(135deg, #1a1e2e 0%, #201c1c 60%, #1a1e28 100%);
  --uca-radius: 0.75rem;
  --uca-font: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── SSO-only: hide email/password UI ── */
bit-landing-card bit-form-field:has(input[type="email"]) { display: none !important; }
bit-landing-card bit-form-control:has(input[type="checkbox"]) { display: none !important; }
bit-landing-card .tw-grid.tw-gap-3 > button[buttontype="secondary"] { display: none !important; }

/* ── Dark background ── */
html, body {
  background: var(--uca-gradient) !important;
  background-attachment: fixed !important;
  font-family: var(--uca-font) !important;
  min-height: 100vh;
}

/* Override Bitwarden's background */
.tw-bg-background-alt,
.tw-bg-background,
bit-landing-layout,
bit-landing-content,
bit-landing-content > div {
  background: transparent !important;
}

/* ── Typography ── */
h1, h2, h3, h4 {
  color: var(--uca-text) !important;
  font-family: var(--uca-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

p, span, a, label, div, button {
  font-family: var(--uca-font);
}

.tw-text-main {
  color: var(--uca-text) !important;
}
.tw-text-muted {
  color: oklch(0.75 0 0) !important;
}

/* ── Card (glass style) ── */
bit-base-card {
  background: var(--uca-card-bg) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid var(--uca-card-border) !important;
  border-radius: var(--uca-radius) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  transition: all 0.2s ease !important;
}

bit-base-card:hover {
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
  transform: translateY(-2px) !important;
}

/* ── SSO Button (primary = indigo glow) ── */
bit-landing-card button[buttontype="primary"] {
  background: var(--uca-primary) !important;
  border: none !important;
  border-radius: var(--uca-radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-family: var(--uca-font) !important;
  box-shadow: 0 4px 16px var(--uca-primary-glow) !important;
  transition: all 0.2s ease !important;
  margin-top: 0.5rem;
}

bit-landing-card button[buttontype="primary"]:hover {
  background: var(--uca-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* ── Hide Bitwarden background illustrations ── */
.tw-opacity-\[\.11\] {
  display: none !important;
}

/* Bitwarden icon is replaced by HF logo via JS */

/* ── Center content vertically ── */
bit-landing-content > div {
  justify-content: center !important;
  padding-top: 0 !important;
}

/* ── Replace "Log in" text with "Argos" ── */
bit-landing-hero h1 {
  visibility: hidden !important;
  position: relative !important;
  height: 2.5rem !important;
}
bit-landing-hero h1::after {
  content: "Argos";
  visibility: visible !important;
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
}

/* ── Footer version text ── */
bit-landing-footer, .tw-text-muted {
  color: var(--uca-text-muted) !important;
}

/* ── Header bar ── */
bit-landing-header header {
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--uca-card-border) !important;
}

/* ── Replace SSO icon with key-round ── */
button[buttontype="primary"] i.bwi-provider::before {
  content: "" !important;
  display: inline-block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  background: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor'/%3E%3C/svg%3E") !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  vertical-align: middle !important;
}

/* ══════════════════════════════════════════════════════════════════
   INNER VAULT UI — dark glassmorphism
   ══════════════════════════════════════════════════════════════════ */

/* ── Sidebar ── */
nav, .tw-bg-background-alt, .tw-bg-bg-sidenav {
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(20px) !important;
}

/* Sidebar branding link ("Argos") — remove box/hover contrast */
bit-nav-logo a {
  background: transparent !important;
  border: none !important;
  color: var(--uca-text) !important;
  font-size: 1.1rem !important;
}
bit-nav-logo a:hover {
  background: transparent !important;
}

/* Sidebar text colors */
.tw-text-fg-sidenav-text, .tw-text-contrast {
  color: var(--uca-text) !important;
}

/* Sidebar dividers */
.tw-bg-secondary-300, bit-nav-divider div {
  background: var(--uca-card-border) !important;
}

/* Sidebar active item */
.tw-bg-bg-sidenav-active {
  background: oklch(0.65 0.22 264 / 15%) !important;
}

/* Sidebar hover */
.hover\:tw-bg-hover-contrast:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Sidebar bottom sticky area */
.tw-bg-bg-sidenav.tw-sticky, [class*="tw-mt-auto"] {
  background: transparent !important;
}

/* ── Input fields (glass style) ── */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], textarea, select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--uca-radius) !important;
  color: var(--uca-text) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* ── bit-select custom dropdowns ── */
bit-select {
  background: transparent !important;
  border: none !important;
}
bit-select button, bit-select [role="button"] {
  background: transparent !important;
  border: none !important;
  color: var(--uca-text) !important;
  padding: 0.5rem 0.25rem !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--uca-primary) !important;
  box-shadow: 0 0 0 3px var(--uca-primary-glow) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--uca-text-muted) !important; }

/* ── Form field borders (Bitwarden's custom form fields) ── */
.tw-border-secondary-500 {
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Labels ── */
label { color: var(--uca-text-muted) !important; }

/* ── Main content area ── */
.tw-bg-background {
  background: transparent !important;
}

/* ── Vault item detail dialog (styled via JS + CSS fallback) ── */
cdk-dialog-container,
.cdk-dialog-container {
  background: var(--uca-gradient) !important;
  color: var(--uca-text) !important;
}

cdk-dialog-container .tw-bg-background,
cdk-dialog-container .tw-bg-background-alt {
  background: transparent !important;
}

cdk-dialog-container .tw-text-main {
  color: var(--uca-text) !important;
}

cdk-dialog-container .tw-text-muted {
  color: var(--uca-text-muted) !important;
}

cdk-dialog-container .tw-border-secondary-500,
cdk-dialog-container .tw-border-secondary-100 {
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Buttons (primary = indigo) ── */
button.tw-bg-primary-600, [buttontype="primary"] {
  background: var(--uca-primary) !important;
  border-color: var(--uca-primary) !important;
  box-shadow: 0 4px 16px var(--uca-primary-glow) !important;
}
button.tw-bg-primary-600:hover, [buttontype="primary"]:hover {
  background: var(--uca-primary-hover) !important;
}

/* ── Secondary/outline buttons ── */
button.tw-border-primary-600[buttontype="secondary"] {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--uca-text) !important;
}
button.tw-border-primary-600[buttontype="secondary"]:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* ── Danger zone buttons ── */
button.tw-border-danger-600, button[buttontype="danger"] {
  border-color: rgba(255,100,100,0.3) !important;
  background: rgba(255,100,100,0.08) !important;
}

/* ── Cards and sections ── */
.tw-border-secondary-100 {
  border-color: var(--uca-card-border) !important;
}

/* ── Table rows ── */
tr { border-color: var(--uca-card-border) !important; }
tr:hover { background: rgba(255,255,255,0.05) !important; }

/* ── Navigation links ── */
a.tw-text-primary-600, .tw-text-primary-600 {
  color: var(--uca-primary) !important;
}
a:hover { color: var(--uca-primary-hover) !important; }

/* ── Sidebar nav items ── */
.tw-bg-primary-100 {
  background: oklch(0.65 0.22 264 / 15%) !important;
}

/* ── Menus, dropdowns, popovers, dialogs ── */
bit-menu, [bitstyle="menu"],
[role="menu"], [role="dialog"], [role="listbox"],
.tw-bg-background.tw-shadow,
bit-dialog, bit-simple-dialog,
.cdk-overlay-pane > div,
[class*="tw-rounded"][class*="tw-shadow"][class*="tw-bg-background"] {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--uca-radius) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  color: var(--uca-text) !important;
}

/* Menu items hover */
[role="menuitem"]:hover, [role="option"]:hover,
button[class*="tw-bg-transparent"]:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Dialog/modal overlay backdrop */
.cdk-overlay-backdrop {
  background: rgba(0,0,0,0.6) !important;
}

/* Ensure popup headings/body are readable */
.cdk-overlay-pane h1, .cdk-overlay-pane h2, .cdk-overlay-pane h3,
[role="dialog"] h1, [role="dialog"] h2, [role="dialog"] h3 {
  color: var(--uca-text) !important;
}
.cdk-overlay-pane p, .cdk-overlay-pane span, .cdk-overlay-pane div,
.cdk-overlay-pane button, .cdk-overlay-pane a,
[role="dialog"] p, [role="dialog"] span, [role="dialog"] div,
[role="menu"] button, [role="menu"] span {
  color: var(--uca-text) !important;
}
.cdk-overlay-pane label, [role="dialog"] label {
  color: var(--uca-text-muted) !important;
}

/* ── Progress bar ── */
.tw-bg-primary-600 {
  background: var(--uca-primary) !important;
}

/* ── Smooth transitions ── */
a, button { transition: all 0.2s ease !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }