/* ==========================================================================
   WhiskerLog Custom Styles
   Dark theme with teal accents (#3a8a7c / #a8d5cc)
   Bootstrap 5 overrides & custom components
   ========================================================================== */

/* ==========================================================================
   ROOT / GLOBAL
   ========================================================================== */

body {
  background-color: #0f1117;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
  background-color: #12151c !important;
}

/* ==========================================================================
   DROPDOWN MENU
   ========================================================================== */

.dropdown-menu {
  background-color: #1e242c;
  border-color: #303035;
}

.dropdown-item {
  color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff;
  background-color: #5c636a;
  border-radius: 4px;
}

.dropdown-item:active,
.dropdown-item.active {
  color: #fff;
  background-color: #565e64;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: linear-gradient(180deg, #1e2130 0%, #1a1d24 60%, #141821 100%);
  border: 1px solid #2d3240;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card.wl-hover-lift:hover {
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  border-color: #3a445a;
}

.card-body {
  background: transparent;
}

.card-header,
.card-footer {
  background: transparent;
  border-color: #2d3240;
}

.wl-card-divider {
  height: 1px;
  background: #2d3240;
  margin: 0 -1rem 1.25rem;
}

.card-clickable:active {
  border-radius: 12px;
  background-color: #171b24;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* ==========================================================================
   BUTTONS - Base
   ========================================================================== */

.btn {
  border-radius: 0.75rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   BUTTONS - Secondary
   ========================================================================== */

.btn-secondary {
  background-color: #1e2130;
  color: #d4d9e1;
  border: 1px solid #2d3240;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: #252a38;
  border-color: #3a445a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:focus:active {
  background-color: #171b24;
  border-color: #2d3240;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  color: #c2c9d4;
  transition: all 0.12s ease;
}

.btn-secondary:active,
.btn-secondary.active {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.65),
    0 0 0 0.25rem rgba(58, 138, 124, 0.18);
}

.btn-secondary.btn.show {
  background-color: #171b24;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  color: #c2c9d4;
}

/* Mobile touch fixes for secondary buttons */
@media (hover: none) and (pointer: coarse) {
  .btn-secondary:active,
  .btn-secondary.active {
    background-color: #171b24 !important;
    box-shadow:
      inset 0 3px 8px rgba(0, 0, 0, 0.7),
      0 0 0 0.25rem rgba(58, 138, 124, 0.15) !important;
    transform: translateY(2px) translateZ(0) !important;
  }
}


/* ==========================================================================
   BUTTONS - Success & Outline Success
   ========================================================================== */

.btn-success {
  background-color: #3a8a7c;
  border-color: #3a8a7c;
}

.btn-success:hover {
  background-color: #4a9d8f;
}

.btn-success:active,
.btn-success.focus {
  background-color: #35776ac4 !important;
}

.btn-outline-success {
  border-color: #3a8a7c;
  color: #3a8a7c;
}

.btn-outline-success:hover {
  background-color: #3a8a7c;
  color: #fff;
}

.btn-outline-success:active,
.btn-outline-success.focus {
  background-color: #2e6b63 !important;
  border-color: #2e6b63 !important;
}

/* ==========================================================================
   BUTTONS - Outline Light
   ========================================================================== */

.btn-outline-light {
  border-color: #555561 !important;
}


/* ==========================================================================
   LINKS
   ========================================================================== */
a {
  color: #3a8a7c;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
  border-radius: 0.75rem;
  border-width: 1px;
  max-width: 600px;
  margin: 1rem auto;
}


/* ==========================================================================
   ALERTS - Success
   ========================================================================== */

.alert-success {
  background-color: #2a3d39;
  color: #d1e8e4;
  border-color: #3a8a7c;
}

.alert-success:hover {
  background-color: #314642;
  border-color: #4a9d8f;
}

.alert-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(58, 138, 124, 0.25);
  outline: none;
}

.alert-success .alert-link,
.alert-success strong,
.alert-success .bi-check-circle-fill {
  color: #a8d5cc;
}

.alert-success .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   ALERTS - Secondary
   ========================================================================== */

.alert-secondary {
  background-color: #2f363e;
  color: #d4d9e1;
  border-color: #555561;
}

.alert-secondary:hover {
  background-color: #2f363e;
  border-color: #6b7280;
}

.alert-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(107, 114, 128, 0.25);
  outline: none;
}

.alert-secondary .alert-link,
.alert-secondary strong,
.alert-secondary .bi-info-circle-fill {
  color: #c2c9d4;
}

.alert-secondary .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

/* ==========================================================================
   LIST GROUP
   ========================================================================== */

.list-group-item {
  background-color: #222831;
}

/* ==========================================================================
   FORM CONTROLS - Select & Dropdown
   ========================================================================== */

.form-select,
.form-select-lg,
.form-select-sm {
  background-color: #1e2130;
  color: #d4d9e1;
  border: 1px solid #2d3240;
  border-radius: 0.75rem;
  padding: 0.625rem 2.25rem 0.625rem 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.form-select:hover:not(:disabled) {
  background-color: #252a38;
  border-color: #3a445a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.form-select:focus {
  border-color: #555561 !important;
  box-shadow: 0 0 0 0.25rem rgba(85, 85, 97, 0.35) !important;
  outline: none;
}

.form-select:active,
.form-select:focus-visible {
  background-color: #252a38;
}

.form-select:disabled {
  background-color: #141821;
  color: #6c757d;
  opacity: 0.65;
  cursor: not-allowed;
}

/* Options styling */
.form-select option,
.form-select optgroup {
  background-color: #1e2130;
  color: #d4d9e1;
}

.form-select option:hover,
.form-select option:focus,
.form-select option:active,
.form-select option:checked,
.form-select option[selected] {
  background: #2d3240 !important;
  color: #ffffff !important;
  background-image: linear-gradient(90deg, #3a8a7c22 0%, #2d3240 30%) !important;
}

@supports (-moz-appearance: none) {
  .form-select option:hover,
  .form-select option:focus {
    background: #2d3240 !important;
    color: #fff !important;
  }
}

/* ==========================================================================
   FORM CHECKBOX & GENERAL FOCUS
   ========================================================================== */

.form-check-input:focus,
.form-check-input:checked,
.form-control:focus {
  border-color: #555561 !important;
  background-color: transparent !important;
}

.form-check-input:focus,
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(92, 92, 92, 0.25) !important;
}

.form-check-input {
  border-color: #6c757d;
}

/* ==========================================================================
   TEXT & UTILITIES
   ========================================================================== */

.text-info {
  color: #3a8a7c !important;
}

.text-shadow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   GRADIENT UTILITY (legacy / unused?)
   ========================================================================== */

.gradient-custom {
  background: #6a11cb;
  background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
  background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
}