/* Danlinx presentation layer. Vaultwarden continues to own auth and vault state. */
:root {
  --dx-cyan: #00c7d1;
  --dx-blue: #168af0;
  --dx-violet: #7347e9;
  --dx-navy: #08132b;
  --dx-focus: #8dd2ff;
}

html.theme_light {
  --dx-canvas: #eef4fb;
  --dx-surface: #ffffff;
  --dx-border: #cfdaea;
  --dx-text: #14233d;
  --dx-muted: #485a74;
  --dx-link: #155bb0;
}

html.theme_dark {
  --dx-canvas: #071126;
  --dx-surface: #121f38;
  --dx-border: #344965;
  --dx-text: #f2f7ff;
  --dx-muted: #bdd0e6;
  --dx-link: #8dd2ff;
}

html,
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

bit-landing-header > header {
  background: transparent !important;
  min-height: 84px;
  position: relative;
  z-index: 3;
}

bit-landing-header .danlinx-brand-link {
  color: var(--dx-text);
  text-decoration: none;
  width: auto;
}

.danlinx-brand-mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
}

.danlinx-brand-wordmark {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  white-space: nowrap;
}

.danlinx-brand-wordmark strong {
  font-weight: 500;
  color: var(--dx-link);
}

bit-landing-content > div {
  background:
    radial-gradient(circle at 10% 18%, rgb(0 199 209 / 10%), transparent 34%),
    radial-gradient(circle at 88% 82%, rgb(115 71 233 / 12%), transparent 38%),
    var(--dx-canvas) !important;
}

bit-landing-hero h1 {
  color: var(--dx-text);
  letter-spacing: -0.035em;
}

bit-landing-card bit-base-card {
  background: var(--dx-surface) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 56px rgb(3 10 26 / 18%) !important;
}

bit-landing-footer {
  position: relative;
  z-index: 2;
}

bit-landing-content button[bitButton][buttonType="primary"],
bit-landing-content button[data-testid="login-continue-button"],
bit-landing-content button[data-testid="login-submit-button"] {
  background: linear-gradient(115deg, #36d7dd, #77acff) !important;
  border-color: transparent !important;
  color: #07162c !important;
  font-weight: 700;
  min-height: 44px;
}

bit-landing-content button[bitButton][buttonType="primary"]:hover,
bit-landing-content button[data-testid="login-continue-button"]:hover,
bit-landing-content button[data-testid="login-submit-button"]:hover {
  filter: brightness(1.08);
}

bit-landing-content :is(button, a, input):focus-visible,
bit-nav-logo a:focus-visible {
  outline: 3px solid var(--dx-focus) !important;
  outline-offset: 2px;
}

img.new-logo-themed {
  content: url("../images/danlinx/danlinx-icon-transparent.png");
  width: 70px !important;
  height: 70px;
  object-fit: contain;
}

/* Keep the native navigation link and collapse behavior. */
bit-nav-logo a[title="Danlinx Cofre"] {
  background-image: url("../images/danlinx/danlinx-icon-transparent.png");
  background-repeat: no-repeat;
  background-size: 48px 48px;
  background-position: 8px center;
}

bit-nav-logo a[title="Danlinx Cofre"] bit-svg {
  display: none;
}

bit-nav-logo a[title="Danlinx Cofre"]::after {
  content: "DANLINX  COFRE";
  display: block;
  margin-left: 56px;
  padding-top: 13px;
  color: #f2f7ff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

bit-nav-logo a[title="Danlinx Cofre"][class*="tw-h-[55px]"] {
  background-size: 34px 34px;
  background-position: center;
}

bit-nav-logo a[title="Danlinx Cofre"][class*="tw-h-[55px]"]::after {
  display: none;
}

app-vault-filter [data-testid="filters"] {
  background: var(--dx-surface);
  border: 1px solid var(--dx-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgb(3 10 26 / 7%);
}

app-vault-filter [data-testid="filters-header"] {
  background: var(--dx-surface) !important;
  color: var(--dx-muted);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
}

@media (max-width: 1023px) {
  app-vault-filter [data-testid="filters"]:not(.danlinx-mobile-filters-open) [data-testid="filters-body"] {
    display: none;
  }
}

app-vault-items bit-table {
  border: 1px solid var(--dx-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--dx-surface);
}

app-vault-items bit-table tbody tr:hover {
  background: rgb(22 138 240 / 7%);
}

@media (max-width: 640px) {
  bit-landing-header > header {
    min-height: 72px;
    padding-inline: 16px;
  }

  .danlinx-brand-mark {
    width: 40px;
    height: 40px;
  }

  .danlinx-brand-wordmark {
    font-size: 0.92rem;
    letter-spacing: 0.05em;
  }

  bit-landing-content > div {
    padding-inline: 16px !important;
  }

  bit-landing-card bit-base-card {
    padding: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  bit-landing-content button,
  app-vault-items bit-table tbody tr {
    transition-duration: 0ms !important;
  }
}