html {
  font-size: 14px;
}

:root {
  --pwa-bg: #07101f;
  --pwa-panel: #0f1d33;
  --pwa-panel-soft: #142742;
  --pwa-text: #e5ecf4;
  --pwa-muted: #a8b7c8;
  --pwa-line: #213453;
  --pwa-cyan: #5eead4;
  --pwa-blue: #60a5fa;
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-hover-color: #115e59;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  color: #1f2a37;
  background:
    radial-gradient(900px 450px at 85% -20%, rgba(96, 165, 250, 0.22) 0%, transparent 60%),
    radial-gradient(900px 450px at -10% 15%, rgba(94, 234, 212, 0.16) 0%, transparent 55%),
    #f5f8fb;
}

body.theme-dark {
  color: var(--pwa-text);
  background:
    radial-gradient(900px 450px at 85% -20%, rgba(30, 58, 138, 0.72) 0%, transparent 60%),
    radial-gradient(900px 450px at -10% 15%, rgba(15, 118, 110, 0.56) 0%, transparent 55%),
    var(--pwa-bg);
}

.navbar.bg-primary {
  background: rgba(7, 16, 31, 0.94) !important;
  border-bottom: 1px solid rgba(94, 234, 212, 0.18);
}

.navbar-brand {
  color: var(--pwa-text) !important;
}

.app-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 0.25rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: #d1dce8 !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--pwa-cyan) !important;
}

.btn-primary {
  --bs-btn-color: #082f49;
  --bs-btn-bg: #5eead4;
  --bs-btn-border-color: #5eead4;
  --bs-btn-hover-color: #082f49;
  --bs-btn-hover-bg: #67e8f9;
  --bs-btn-hover-border-color: #67e8f9;
  --bs-btn-active-color: #082f49;
  --bs-btn-active-bg: #60a5fa;
  --bs-btn-active-border-color: #60a5fa;
}

.btn-outline-primary {
  --bs-btn-color: #0f766e;
  --bs-btn-border-color: #0f766e;
  --bs-btn-hover-color: #082f49;
  --bs-btn-hover-bg: #5eead4;
  --bs-btn-hover-border-color: #5eead4;
  --bs-btn-active-color: #082f49;
  --bs-btn-active-bg: #60a5fa;
  --bs-btn-active-border-color: #60a5fa;
}

.card {
  border-color: rgba(33, 52, 83, 0.14) !important;
}

body.theme-dark .card,
body.theme-dark .modal-content,
body.theme-dark .dropdown-menu {
  color: var(--pwa-text);
  background: linear-gradient(180deg, var(--pwa-panel), var(--pwa-panel-soft));
  border-color: var(--pwa-line) !important;
}

body.theme-dark .table {
  --bs-table-color: var(--pwa-text);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--pwa-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--pwa-text);
  --bs-table-hover-bg: rgba(94, 234, 212, 0.08);
  --bs-table-border-color: var(--pwa-line);
}

body.theme-dark .table-light {
  --bs-table-color: var(--pwa-text);
  --bs-table-bg: rgba(96, 165, 250, 0.12);
  --bs-table-border-color: var(--pwa-line);
}

body.theme-dark .form-control,
body.theme-dark .form-select {
  color: var(--pwa-text);
  background-color: rgba(7, 16, 31, 0.78);
  border-color: #365277;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  color: var(--pwa-text);
  background-color: rgba(7, 16, 31, 0.9);
  border-color: var(--pwa-cyan);
}

body.theme-dark .text-muted,
body.theme-dark .text-secondary,
body.theme-dark .form-text {
  color: var(--pwa-muted) !important;
}

body.theme-dark .bg-light {
  background-color: var(--pwa-panel) !important;
}

.login-page {
  min-height: calc(100vh - 13rem);
  align-items: center;
}

.login-card {
  color: var(--pwa-text);
  background: linear-gradient(180deg, var(--pwa-panel), var(--pwa-panel-soft));
  border: 1px solid var(--pwa-line) !important;
}

.login-card .form-label,
.login-card .form-check-label {
  color: var(--pwa-text);
}

.login-card .form-control {
  color: var(--pwa-text);
  background: rgba(7, 16, 31, 0.78);
  border-color: #365277;
}

.login-card .form-control::placeholder {
  color: var(--pwa-muted);
}

.login-card .form-control:focus {
  color: var(--pwa-text);
  background: rgba(7, 16, 31, 0.9);
  border-color: var(--pwa-cyan);
}

.login-card .form-check-input:checked {
  background-color: var(--pwa-cyan);
  border-color: var(--pwa-cyan);
}

.footer.bg-light {
  color: var(--pwa-muted) !important;
  background: var(--pwa-bg) !important;
  border-top-color: rgba(94, 234, 212, 0.18) !important;
}

.footer-link {
  color: var(--pwa-cyan);
  text-decoration: none;
  font-weight: 600;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--pwa-blue);
}

.theme-toggle .btn.active {
  color: #082f49;
  background: var(--pwa-cyan);
  border-color: var(--pwa-cyan);
}

body.theme-dark .service-card {
  color: var(--pwa-text);
  background: linear-gradient(180deg, var(--pwa-panel), var(--pwa-panel-soft));
  border-color: var(--pwa-line);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}

body.theme-dark .service-card:hover,
body.theme-dark .service-card:focus {
  color: var(--pwa-text);
  border-color: rgba(94, 234, 212, 0.5);
}

body.theme-dark .service-card-users {
  background: linear-gradient(180deg, #0f1d33, #182d49);
  border-color: #365277;
}

body.theme-dark .service-card-dns,
body.theme-dark .service-card-dhcp,
body.theme-dark .service-card-health {
  color: #b6f7ee;
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.28), rgba(20, 39, 66, 0.96));
  border-color: rgba(94, 234, 212, 0.38);
}

body.theme-dark .service-card-directory,
body.theme-dark .service-card-wireguard,
body.theme-dark .service-card-assistant {
  color: #dbeafe;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.26), rgba(20, 39, 66, 0.96));
  border-color: rgba(96, 165, 250, 0.4);
}

body.theme-dark .service-card-mail {
  color: #fde68a;
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.24), rgba(20, 39, 66, 0.96));
  border-color: rgba(251, 191, 36, 0.38);
}

body.theme-dark .service-card-logs {
  color: #e5ecf4;
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.32), rgba(20, 39, 66, 0.96));
  border-color: rgba(168, 183, 200, 0.3);
}

body.theme-dark .service-card-dns:hover,
body.theme-dark .service-card-dhcp:hover,
body.theme-dark .service-card-health:hover,
body.theme-dark .service-card-dns:focus,
body.theme-dark .service-card-dhcp:focus,
body.theme-dark .service-card-health:focus {
  color: #b6f7ee;
  border-color: var(--pwa-cyan);
}

body.theme-dark .service-card-directory:hover,
body.theme-dark .service-card-wireguard:hover,
body.theme-dark .service-card-assistant:hover,
body.theme-dark .service-card-directory:focus,
body.theme-dark .service-card-wireguard:focus,
body.theme-dark .service-card-assistant:focus {
  color: #dbeafe;
  border-color: var(--pwa-blue);
}

body.theme-dark .service-card-mail:hover,
body.theme-dark .service-card-mail:focus {
  color: #fde68a;
  border-color: #fbbf24;
}

.main-dashboard {
  padding-bottom: 2rem;
}

.service-card {
  display: block;
  min-height: 13.75rem;
  padding: 1.5rem;
  border: 1px solid #d5dde7;
  border-radius: 0.375rem;
  color: #26313d;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1rem 2.5rem rgba(20, 36, 54, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.service-card:hover,
.service-card:focus {
  color: #26313d;
  border-color: #9db7d3;
  box-shadow: 0 1.25rem 3rem rgba(20, 36, 54, 0.13);
  transform: translateY(-2px);
}

.service-card-title {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.service-card-text {
  display: block;
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.45;
}

.service-card-users {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.94));
}

.service-card-dns {
  background: linear-gradient(135deg, rgba(239, 248, 244, 0.94), rgba(246, 252, 249, 0.94));
  border-color: #c9e2d5;
  color: #14583f;
}

.service-card-dns:hover,
.service-card-dns:focus {
  color: #14583f;
  border-color: #8cc4a9;
}

.service-card-directory {
  background: linear-gradient(135deg, rgba(245, 249, 255, 0.94), rgba(238, 245, 255, 0.94));
  border-color: #c8d9f1;
  color: #1d4776;
}

.service-card-directory:hover,
.service-card-directory:focus {
  color: #1d4776;
  border-color: #8fb0dc;
}

.service-card-mail {
  background: linear-gradient(135deg, rgba(255, 249, 240, 0.94), rgba(255, 253, 247, 0.94));
  border-color: #ead2a7;
  color: #76500e;
}

.service-card-mail:hover,
.service-card-mail:focus {
  color: #76500e;
  border-color: #c79b4e;
}

.service-card-dhcp {
  background: linear-gradient(135deg, rgba(243, 250, 247, 0.94), rgba(247, 253, 250, 0.94));
  border-color: #beded1;
  color: #1d5e4a;
}

.service-card-dhcp:hover,
.service-card-dhcp:focus {
  color: #1d5e4a;
  border-color: #84bda8;
}

.service-card-wireguard {
  background: linear-gradient(135deg, rgba(241, 247, 255, 0.94), rgba(248, 251, 255, 0.94));
  border-color: #c4d6ee;
  color: #244b75;
}

.service-card-wireguard:hover,
.service-card-wireguard:focus {
  color: #244b75;
  border-color: #8eafd6;
}

.service-card-logs {
  background: linear-gradient(135deg, rgba(247, 248, 250, 0.94), rgba(240, 243, 247, 0.94));
  border-color: #d2d8e1;
  color: #344255;
}

.service-card-logs:hover,
.service-card-logs:focus {
  color: #344255;
  border-color: #aeb9c8;
}

.service-card-assistant {
  background: linear-gradient(135deg, rgba(241, 250, 255, 0.94), rgba(248, 252, 255, 0.94));
  border-color: #bcdced;
  color: #155674;
}

.service-card-assistant:hover,
.service-card-assistant:focus {
  color: #155674;
  border-color: #83bdd8;
}

.service-card-health {
  background: linear-gradient(135deg, rgba(244, 251, 248, 0.94), rgba(250, 253, 252, 0.94));
  border-color: #bedccd;
  color: #1f6046;
}

.service-card-health:hover,
.service-card-health:focus {
  color: #1f6046;
  border-color: #87bea4;
}

.assistant-response {
  white-space: pre-wrap;
  font-family: inherit;
}

.health-refresh-select {
  width: 9rem;
}

.health-card {
  min-height: 6.5rem;
  padding: 1rem;
  border: 1px solid #d8dee6;
  border-radius: 0.375rem;
  background: #fff;
}

.health-card-ok {
  border-color: #b8dfc2;
  background: #f7fcf8;
}

.health-card-bad {
  border-color: #f0c2c2;
  background: #fff8f8;
}

body.theme-dark .health-card {
  color: var(--pwa-text);
  background: linear-gradient(180deg, var(--pwa-panel), var(--pwa-panel-soft));
  border-color: var(--pwa-line);
}

body.theme-dark .health-card-ok {
  color: #d1fae5;
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.2), rgba(20, 39, 66, 0.96));
  border-color: rgba(52, 211, 153, 0.42);
}

body.theme-dark .health-card-bad {
  color: #fee2e2;
  background: linear-gradient(180deg, rgba(190, 18, 60, 0.22), rgba(20, 39, 66, 0.96));
  border-color: rgba(251, 113, 133, 0.42);
}

body.theme-dark .health-card .small,
body.theme-dark .health-card .text-secondary,
body.theme-dark .health-card .text-muted {
  color: var(--pwa-muted) !important;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}