html,
body {
  height: 100%;
}

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* HTMX indicator */
.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
  display: none;
}

.htmx-request .htmx-indicator {
  opacity: 1;
  display: block;
}

.htmx-request.htmx-indicator {
  opacity: 1;
  display: block;
}

/* Loading spinner alignment */
#loading {
  text-align: center;
  padding: 20px;
}


/* Custom styles beyond Bootstrap */
.min-vh-75 {
  min-height: 75vh;
}

.font-monospace {
  font-family: 'Courier New', monospace;
}

.sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 56px);
  padding-top: 1rem;
  overflow-y: auto;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.sidebar .nav-link:hover {
  background-color: rgba(0,0,0,0.05);
}

.sidebar .nav-link.active {
  color: #fff;
  background-color: #0d6efd;
}

.sidebar .nav-link.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

.sidebar .nav-link i {
  margin-right: 0.5rem;
}

.footer {
  margin-top: auto;
}

/* ---------- Toast Container ---------- */
.toast-container {
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast-container .toast {
  pointer-events: auto;
}

/* ---------- Base Toast ---------- */
.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: min(400px, calc(100vw - 2rem));
  animation: toast-slide-in 0.3s ease-out;

  /* Base colors from Bootstrap variables, so both themes work. */
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-left: 4px solid transparent;
}

.toast > i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.toast > span {
  flex: 1;
  font-size: 0.875rem;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--bs-secondary-color);
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.toast-close:hover {
  opacity: 1;
  color: var(--bs-body-color);
}

/* ---------- Types ---------- */
.toast.toast-success {
  background-color: var(--bs-success-bg-subtle);
  color:            var(--bs-success-text-emphasis);
  border-left-color: var(--bs-success);
}
.toast.toast-success > i {
  color: var(--bs-success);
}

.toast.toast-danger,
.toast.toast-error {
  background-color: var(--bs-danger-bg-subtle);
  color:            var(--bs-danger-text-emphasis);
  border-left-color: var(--bs-danger);
}
.toast.toast-danger > i,
.toast.toast-error > i {
  color: var(--bs-danger);
}

.toast.toast-warning {
  background-color: var(--bs-warning-bg-subtle);
  color:            var(--bs-warning-text-emphasis);
  border-left-color: var(--bs-warning);
}
.toast.toast-warning > i {
  color: var(--bs-warning);
}

.toast.toast-info {
  background-color: var(--bs-info-bg-subtle);
  color:            var(--bs-info-text-emphasis);
  border-left-color: var(--bs-info);
}
.toast.toast-info > i {
  color: var(--bs-info);
}

/* ---------- Types (dark theme) ---------- */
[data-bs-theme="dark"] .toast.toast-success {
  background-color: #0f5132;
  color:            #d1e7dd;
  border-left-color: #75b798;
}
[data-bs-theme="dark"] .toast.toast-success > i { color: #75b798; }

[data-bs-theme="dark"] .toast.toast-danger,
[data-bs-theme="dark"] .toast.toast-error {
  background-color: #58151c;
  color:            #f8d7da;
  border-left-color: #ea868f;
}
[data-bs-theme="dark"] .toast.toast-danger > i,
[data-bs-theme="dark"] .toast.toast-error > i { color: #ea868f; }

[data-bs-theme="dark"] .toast.toast-warning {
  background-color: #664d03;
  color:            #fff3cd;
  border-left-color: #ffda6a;
}
[data-bs-theme="dark"] .toast.toast-warning > i { color: #ffda6a; }

[data-bs-theme="dark"] .toast.toast-info {
  background-color: #055160;
  color:            #cff4fc;
  border-left-color: #6edff6;
}
[data-bs-theme="dark"] .toast.toast-info > i { color: #6edff6; }

/* ---------- Animations ---------- */
@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.toast-slide-out {
  animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar {
    height: auto;
    position: relative;
    padding-top: 0;
  }
}

/* Custom styles beyond Bootstrap */

/* Theme transition */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme variables */
:root {
  --bg-gradient-start: #667eea;
  --bg-gradient-end: #764ba2;
}

[data-theme="dark"] {
  --bg-gradient-start: #1a1a2e;
  --bg-gradient-end: #16213e;
}

[data-theme="light"] {
  --bg-gradient-start: #667eea;
  --bg-gradient-end: #764ba2;
}

/* Fix for dark mode backgrounds */
[data-bs-theme="dark"] .bg-light {
  background-color: #2d2d2d !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: #1a1a1a !important;
}

[data-bs-theme="dark"] .card {
  background-color: #2d2d2d;
  border-color: #404040;
}

[data-bs-theme="dark"] .text-muted {
  color: #aaa !important;
}

[data-bs-theme="dark"] .sidebar {
  background-color: #1a1a1a !important;
}

[data-bs-theme="dark"] .sidebar .nav-link {
  color: #ddd;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
  background-color: rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
  background-color: #0d6efd;
}

[data-bs-theme="dark"] .footer {
  background-color: #1a1a1a !important;
  border-top-color: #404040 !important;
}

[data-bs-theme="dark"] .alert-info {
  background-color: #1a3a4a;
  border-color: #2a5a6a;
  color: #9cd8f0;
}

[data-bs-theme="dark"] .alert-success {
  background-color: #1a3a2a;
  border-color: #2a5a3a;
  color: #90d8a0;
}

[data-bs-theme="dark"] .alert-warning {
  background-color: #3a3a1a;
  border-color: #5a5a2a;
  color: #f0d890;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: #3a1a1a;
  border-color: #5a2a2a;
  color: #f09090;
}

/* Recovery codes are Bootstrap badges; !important is needed because the
   Bootstrap stylesheet is loaded after this application stylesheet. */
.badge.recovery-code {
  background-color: #fff3cd !important;
  color: #212529 !important;
  border: 1px solid #d39e00;
}

[data-bs-theme="dark"] .badge.recovery-code {
  background-color: #4a3b0a !important;
  color: #fff3cd !important;
  border-color: #997404;
}

.vpn-token-input {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.min-vh-75 {
  min-height: 75vh;
}

.font-monospace {
  font-family: 'Courier New', monospace;
}

.sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 56px);
  padding-top: 1rem;
  overflow-y: auto;
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.sidebar .nav-link:hover {
  background-color: rgba(0,0,0,0.05);
}

.sidebar .nav-link.active {
  color: #fff;
  background-color: #0d6efd;
}

.sidebar .nav-link.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

.sidebar .nav-link i {
  margin-right: 0.5rem;
}

.footer {
  margin-top: auto;
}



/* Session timeout modal */
#sessionTimeoutModal .modal-content {
  border: 2px solid #ffc107;
}

/* Theme dropdown */
.theme-option.active {
  background-color: #0d6efd;
  color: white;
}

.theme-option.active:hover {
  background-color: #0b5ed7;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar {
    height: auto;
    position: relative;
    padding-top: 0;
  }
}