/* Dark theme for the caddy-security portal, matching lite.html.
   The plugin's own stylesheet builds a light Tailwind theme, so these rules override
   concrete declarations rather than adding new ones; hence the !important. */

:root {
  --wh-bg: #0f1419;
  --wh-panel: #161c24;
  --wh-panel-2: #1c242e;
  --wh-border: #2a3441;
  --wh-text: #e4e9f0;
  --wh-muted: #8b98a9;
  --wh-accent: #4a9eff;
  --wh-accent-dim: #2d5f96;
}

html,
body,
.app-page,
.bg-blue-100 {
  background-color: var(--wh-bg) !important;
  color: var(--wh-text);
}

/* The card is otherwise glued to the top of the viewport. "safe" keeps the top of a
   tall card reachable on short screens; browsers that don't know it keep plain center. */
.app-page {
  justify-content: center;
  justify-content: safe center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

body,
input,
button,
.app-inp-lbl,
.logo-txt,
.logo-col-txt {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.app-container {
  background-color: var(--wh-panel) !important;
  border: 1px solid var(--wh-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important;
}

/* The QR sign-in tab hangs off the bottom of the card, so it needs to line up with it.
   The code itself stays on white or scanners cannot read it. */
#bookmarks {
  display: flex !important;
  justify-content: center;
}

#bookmarks > div {
  background-color: var(--wh-panel-2) !important;
  color: var(--wh-muted) !important;
  border: 1px solid var(--wh-border);
  border-top: none;
}

#qrcode {
  background-color: #fff !important;
  border-radius: 8px !important;
}

.logo-txt,
.logo-col-txt {
  color: var(--wh-text) !important;
  font-weight: 600 !important;
}

.app-inp-lbl,
label,
.text-primary-700 {
  color: var(--wh-muted) !important;
  font-weight: 400 !important;
}

/* Inputs: the visible border and fill live on .app-inp-txt, not the wrapper. */
.app-inp-txt {
  background-color: var(--wh-panel-2) !important;
  border: 1px solid var(--wh-border) !important;
  color: var(--wh-text) !important;
}

.app-inp-txt::placeholder {
  color: var(--wh-muted) !important;
}

.app-inp-txt:focus {
  border-color: var(--wh-accent-dim) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, .15) !important;
}

.app-inp-prf-img,
.app-inp-prf-img i {
  color: var(--wh-muted) !important;
}

.app-btn-pri {
  background-color: var(--wh-accent-dim) !important;
  border-color: var(--wh-accent-dim) !important;
  color: #fff !important;
}

.app-btn-pri:hover {
  background-color: #366fae !important;
}

.app-btn-sec {
  background-color: var(--wh-panel-2) !important;
  border-color: var(--wh-border) !important;
  color: var(--wh-text) !important;
}

.app-btn-sec:hover {
  border-color: var(--wh-accent-dim) !important;
}

a,
.text-primary-600 {
  color: var(--wh-accent) !important;
}

/* Portal application tiles. */
.app-portal-btn-box {
  background-color: var(--wh-panel-2) !important;
  border-color: var(--wh-border) !important;
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}

.app-portal-btn-box:hover {
  background-color: #222c38 !important;
  border-color: var(--wh-accent-dim) !important;
}

.app-portal-btn-img {
  background-color: transparent !important;
  border-right: 1px solid var(--wh-border);
}

.app-portal-btn-img i {
  color: var(--wh-accent) !important;
}

.app-portal-btn-txt {
  color: var(--wh-text) !important;
  font-size: 1.25rem !important;
  box-shadow: none !important;
}