﻿:root {
  --app-bg: #f4f7fb;
  --app-surface: #ffffff;
  --app-surface-2: #edf3f8;
  --app-border: #d7e1eb;
  --app-fg: #152234;
  --app-muted: #627386;
  --app-primary: #1f6fb2;
  --app-primary-ink: #ffffff;
  --app-accent: #1f9f6a;
  --app-link: #174c7c;
  --app-warning: #f4b400;
  --app-danger: #c73535;
  --app-secondary: #e8eef5;
  --app-success-ink: #ffffff;
  --app-warning-ink: #182437;
  --app-danger-ink: #ffffff;
  --app-secondary-ink: #152234;
}

.theme-aurora {
  --app-bg: #0f1510;
  --app-surface: #2b3a24;
  --app-surface-2: #34452c;
  --app-border: #3f5235;
  --app-fg: #f2f6f0;
  --app-muted: #c7d2c1;
  --app-primary: #f2c94c;
  --app-primary-ink: #1c1c1c;
  --app-accent: #7bc67b;
  --app-link: #e9f2ff;
  --app-warning: #f2c94c;
  --app-danger: #ff6b6b;
  --app-secondary: #4b5a40;
  --app-success-ink: #0b0f14;
  --app-warning-ink: #0b0f14;
  --app-danger-ink: #0b0f14;
  --app-secondary-ink: #f2f6f0;
}

.theme-slate {
  --app-bg: #0d1117;
  --app-surface: #1f2630;
  --app-surface-2: #273140;
  --app-border: #2f3b4d;
  --app-fg: #e6edf3;
  --app-muted: #9fb3c8;
  --app-primary: #3fa9f5;
  --app-primary-ink: #0b0f14;
  --app-accent: #4fd1c5;
  --app-link: #b8dcff;
  --app-warning: #f4b400;
  --app-danger: #ff6b6b;
  --app-secondary: #3b4250;
  --app-success-ink: #0b0f14;
  --app-warning-ink: #0b0f14;
  --app-danger-ink: #ffffff;
  --app-secondary-ink: #e6edf3;
}

.theme-classico {
  --app-bg: #f4f1e8;
  --app-surface: #ffffff;
  --app-surface-2: #f7f3ea;
  --app-border: #d2c8b8;
  --app-fg: #2b2620;
  --app-muted: #6f6558;
  --app-primary: #d6e2db;
  --app-primary-ink: #2b2620;
  --app-accent: #e3c2a6;
  --app-link: #2b2620;
  --app-warning: #e3c2a6;
  --app-danger: #c45b5b;
  --app-secondary: #d6cfc3;
  --app-success-ink: #2b2620;
  --app-warning-ink: #2b2620;
  --app-danger-ink: #ffffff;
  --app-secondary-ink: #2b2620;
}

.theme-areia {
  --app-bg: #f0e5d4;
  --app-surface: #fff9ef;
  --app-surface-2: #f5e8d5;
  --app-border: #c9af8d;
  --app-fg: #2f2316;
  --app-muted: #6d593f;
  --app-primary: #d9ad73;
  --app-primary-ink: #2a1d10;
  --app-accent: #bd7a3f;
  --app-link: #2f2316;
  --app-warning: #e4b16d;
  --app-danger: #b84f3f;
  --app-secondary: #dcc0a0;
  --app-success-ink: #1f150c;
  --app-warning-ink: #2a1d0f;
  --app-danger-ink: #ffffff;
  --app-secondary-ink: #2f2316;
}

.theme-grafite {
  --app-bg: #10141b;
  --app-surface: #1a2230;
  --app-surface-2: #222d3d;
  --app-border: #36465e;
  --app-fg: #edf3fb;
  --app-muted: #a6b5c9;
  --app-primary: #5f8fff;
  --app-primary-ink: #0e1522;
  --app-accent: #44c6b6;
  --app-link: #cfe0ff;
  --app-warning: #f2bf57;
  --app-danger: #e47171;
  --app-secondary: #314159;
  --app-success-ink: #08110f;
  --app-warning-ink: #1d1408;
  --app-danger-ink: #ffffff;
  --app-secondary-ink: #edf3fb;
}

.theme-esmeralda {
  --app-bg: #0d1c17;
  --app-surface: #143129;
  --app-surface-2: #1c4136;
  --app-border: #2b6152;
  --app-fg: #eafaf3;
  --app-muted: #abd3c4;
  --app-primary: #63ddb0;
  --app-primary-ink: #0d261f;
  --app-accent: #2fbe88;
  --app-link: #cffff0;
  --app-warning: #e3c96b;
  --app-danger: #de6b72;
  --app-secondary: #255245;
  --app-success-ink: #0a1813;
  --app-warning-ink: #201807;
  --app-danger-ink: #ffffff;
  --app-secondary-ink: #eafaf3;
}

.bg-dark {
  background-color: var(--app-bg) !important;
  color: var(--app-fg) !important;
}

.bg-secondary {
  background-color: var(--app-surface) !important;
  color: var(--app-fg) !important;
}

.table-dark {
  --bs-table-bg: var(--app-surface) !important;
  --bs-table-striped-bg: var(--app-surface-2) !important;
  --bs-table-striped-color: var(--app-fg) !important;
  color: var(--app-fg) !important;
}

.table-dark td,
.table-dark th {
  border-color: var(--app-border) !important;
}

.table,
.table td,
.table th,
.table a,
.table span,
.table small {
  color: var(--app-fg) !important;
}

.nav-link {
  color: var(--app-link) !important;
}

.text-dark,
.text-muted,
.text-secondary,
.text-body-secondary {
  color: var(--app-muted) !important;
}

.card-title,
.portal-title,
.card .eyebrow,
.card .action-title,
.card .kpi-label,
.card .stat-card small,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.stat-card small,
.card p,
.card span,
.card small,
.card .text-muted,
.card .text-secondary {
  color: var(--app-fg) !important;
}

.card-title,
.portal-title,
.card .eyebrow,
.card .action-title,
.card .kpi-label,
.card .stat-card small,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.stat-card small {
  text-transform: uppercase !important;
}

.nav-link:hover,
.nav-link.active {
  background: var(--app-surface-2) !important;
}

.card {
  background-color: var(--app-surface) !important;
  color: var(--app-fg) !important;
  border-color: var(--app-border) !important;
}

.btn-primary {
  background-color: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
  color: var(--app-primary-ink) !important;
}

.btn-success {
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
  color: var(--app-success-ink) !important;
}

.btn-warning {
  background-color: var(--app-warning) !important;
  border-color: var(--app-warning) !important;
  color: var(--app-warning-ink) !important;
}

.btn-danger {
  background-color: var(--app-danger) !important;
  border-color: var(--app-danger) !important;
  color: var(--app-danger-ink) !important;
}

.btn-secondary {
  background-color: var(--app-secondary) !important;
  border-color: var(--app-secondary) !important;
  color: var(--app-secondary-ink) !important;
}

.btn-outline-light {
  color: var(--app-fg) !important;
  border-color: var(--app-border) !important;
}

.btn-outline-warning {
  color: var(--app-warning) !important;
  border-color: var(--app-warning) !important;
}

.btn-outline-danger {
  color: var(--app-danger) !important;
  border-color: var(--app-danger) !important;
}

.btn-outline-secondary {
  color: var(--app-muted) !important;
  border-color: var(--app-border) !important;
}

.text-light-emphasis {
  color: var(--app-muted) !important;
}

.form-control,
.form-select {
  background-color: var(--app-surface-2) !important;
  color: var(--app-fg) !important;
  border-color: var(--app-border) !important;
}

.form-control::placeholder {
  color: var(--app-muted) !important;
}

.form-check-input {
  background-color: #9aa0a6 !important;
  border-color: #9aa0a6 !important;
}

.form-check-input:checked {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

.form-check-input:not(:checked) {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.theme-switcher {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.theme-switcher label {
  font-size: 0.85rem;
  color: var(--app-muted);
}

.badge.bg-purple {
  background-color: #6f42c1 !important;
  color: #ffffff !important;
}

.docs-pwa-install {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(242, 201, 76, 0.72);
  border-radius: 8px;
  padding: 0 14px;
  color: #101827 !important;
  background: linear-gradient(135deg, #f2c94c, #ffe08a);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  font-weight: 800;
  line-height: 1;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.docs-pwa-install:hover,
.docs-pwa-install:focus {
  color: #101827 !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.docs-pwa-install--floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100000;
}

@media (max-width: 640px) {
  .docs-pwa-install--floating {
    right: 12px;
    bottom: 12px;
  }
}
