/* =========================================================
   Caddy Security - Gruvbox Theme
   Color palette from blog.sylvan.cafe
   ========================================================= */

/* ===== Gruvbox Light ===== */
:root,
[data-theme="light"] {
  --bg: #fbf1c7;
  --bg-alt: #f2e5bc;
  --bg-card: #f2e5bc;
  --fg: #3c3836;
  --fg-muted: #665c54;
  --accent: #af3a03;
  --accent-hover: #b54909;
  --accent-light: rgba(175, 58, 3, 0.15);
  --muted: #ebdbb2;
  --border: #d5c4a1;
  --red: #cc241d;
  --green: #98971a;
  --yellow: #d79921;
  --blue: #458588;
  --orange: #d65d0e;
  --purple: #b16286;
  --radius: 0.5rem;
  --font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 1px 3px rgba(60, 56, 54, 0.12);
  --shadow-lg: 0 4px 12px rgba(60, 56, 54, 0.15);
}

/* ===== Gruvbox Dark ===== */
[data-theme="dark"] {
  --bg: #282828;
  --bg-alt: #32302f;
  --bg-card: #32302f;
  --fg: #ebdbb2;
  --fg-muted: #bdae93;
  --accent: #fe8019;
  --accent-hover: #fabd2f;
  --accent-light: rgba(254, 128, 25, 0.2);
  --muted: #3c3836;
  --border: #504945;
  --red: #fb4934;
  --green: #b8bb26;
  --yellow: #fabd2f;
  --blue: #83a598;
  --orange: #fe8019;
  --purple: #d3869b;
}

/* ===== Base ===== */
html,
body {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font) !important;
}

/* ===== Layout ===== */
.app-page {
  background-color: var(--bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.app-content {
  width: 100% !important;
  max-width: 28rem !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

div.app-container {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 2rem !important;
  text-align: center !important;
}

/* ===== Logo ===== */
.logo-img {
  display: none !important;
}

.logo-txt {
  color: var(--fg) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

/* ===== Labels ===== */
.app-inp-lbl,
label.block {
  color: var(--fg) !important;
  text-align: left !important;
}

/* ===== Input ===== */
.app-inp-box {
  background-color: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.app-inp-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

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

.app-inp-txt {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

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

.app-inp-txt:focus {
  border-color: var(--accent) !important;
}

.app-inp-code-txt {
  background-color: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

.app-inp-sel {
  background-color: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

/* ===== Buttons ===== */
.app-btn-pri {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

.app-btn-pri:hover {
  background-color: var(--accent-hover) !important;
}

.app-btn-pri:focus {
  outline: 2px dashed var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.app-btn-pri i,
.app-btn-pri img {
  color: var(--bg) !important;
}

.app-btn-sec {
  background-color: var(--muted) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

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

.app-btn-sec i,
.app-btn-sec img {
  color: var(--fg) !important;
}

/* ===== Text ===== */
.text-primary-500,
.text-primary-600,
.text-primary-700 {
  color: var(--fg-muted) !important;
}

.text-secondary-500 {
  color: var(--accent) !important;
}

.hover\:text-primary-500:hover {
  color: var(--accent) !important;
}

.app-txt-section {
  color: var(--fg-muted) !important;
}

.app-lst-lnk,
.app-lst-lnk i {
  color: var(--accent) !important;
}

/* ===== Portal Links ===== */
.app-portal-btn-box {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

.app-portal-btn-img {
  background-color: var(--muted) !important;
  color: var(--accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4rem !important;
}

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

.app-portal-btn-txt {
  background-color: var(--bg-card) !important;
  color: var(--fg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.5 !important;
}

.app-portal-btn-txt:hover {
  background-color: var(--muted) !important;
}

div.pb-2 a,
a.app-lst-lnk {
  color: var(--fg) !important;
  text-decoration: none !important;
}

/* ===== Background ===== */
.bg-blue-100 {
  background-color: var(--bg) !important;
}

/* ===== Divider ===== */
.divide-primary-200 > * {
  border-color: var(--border) !important;
}

/* ===== QR - Hide ===== */
div#bookmarks,
div#qr {
  display: none !important;
}

/* ===== Terminate ===== */
a[href*="terminate"] button {
  background-color: var(--accent) !important;
}

a[href*="terminate"] button:hover {
  background-color: var(--accent-hover) !important;
}

a[href*="terminate"] button img {
  filter: brightness(0) invert(1) !important;
}

/* ===== Nav Links ===== */
#user_actions a {
  color: var(--fg-muted) !important;
}

#user_actions a:hover {
  color: var(--accent) !important;
}

#user_actions a i {
  color: var(--fg-muted) !important;
}

#user_actions a:hover i {
  color: var(--accent) !important;
}

/* ===== Text Center ===== */
.text-center {
  text-align: center !important;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* ===== Selection ===== */
::selection {
  background-color: var(--accent);
  color: var(--bg);
}

/* ===== Focus ===== */
*:focus-visible {
  outline: 2px dashed var(--accent) !important;
  outline-offset: 2px !important;
}

/* ===== Transitions ===== */
a,
button,
input,
select {
  transition: all 0.2s ease !important;
}