/* Main styles for DualShock Calibration GUI */

:root {
  --bitro-bg: #ffffff;
  --bitro-surface: #ffffff;
  --bitro-surface-2: #f6f6f7;
  --bitro-surface-3: #f1f2f4;
  --bitro-text: #303030;
  --bitro-muted: #6d7175;
  --bitro-border: rgba(0, 0, 0, 0.1);
  --bitro-accent: #c21424;
  --bitro-accent-strong: #e01d2f;
  --bitro-accent-soft: rgba(194, 20, 36, 0.14);
  --bs-primary: var(--bitro-accent);
  --bs-primary-rgb: 194, 20, 36;
  --bs-link-color: #ff4d5d;
  --bs-link-hover-color: #ff7884;
}

/* Add padding to body to prevent content from being hidden behind fixed footer */
body {
  background: var(--bitro-bg);
  color: var(--bitro-text);
  padding-bottom: 80px;
}

a {
  color: var(--bitro-accent);
}

a:hover {
  color: var(--bitro-accent-strong);
}

.navbar,
footer,
.modal-content,
.dropdown-menu,
.card,
.accordion-item,
.list-group-item,
.tab-content > .tab-pane > .card,
.bg-body-tertiary,
.text-bg-light {
  background: var(--bitro-surface) !important;
  color: var(--bitro-text) !important;
  border-color: var(--bitro-border) !important;
}

.navbar,
footer {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
}

.navbar-brand,
.nav-link,
.dropdown-item,
.btn-link,
.card-header,
.accordion-button,
.list-group-item,
.menu-drawer__menu-item-text {
  color: var(--bitro-text) !important;
}

.nav-link:hover,
.nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.navbar-brand:hover,
.footer-link:hover,
.footer-icon-link:hover {
  color: var(--bitro-accent) !important;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card-header,
.accordion-button,
.nav-tabs {
  background: var(--bitro-surface-2) !important;
  border-color: var(--bitro-border) !important;
}

.nav-tabs .nav-link {
  border-color: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.list-group-item.active,
.dropdown-item:active {
  background: var(--bitro-accent) !important;
  border-color: var(--bitro-accent) !important;
  color: #fff !important;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: linear-gradient(180deg, var(--bitro-accent-strong) 0%, var(--bitro-accent) 100%) !important;
  border-color: var(--bitro-accent) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(194, 20, 36, 0.22);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: var(--bitro-text) !important;
}

#btnconnect {
  background: #fff !important;
  border-color: var(--bitro-accent) !important;
  color: var(--bitro-accent) !important;
  box-shadow: none !important;
}

#btnconnect:hover,
#btnconnect:focus,
#btnconnect:focus-visible {
  background: var(--bitro-accent-soft) !important;
  border-color: var(--bitro-accent) !important;
  color: var(--bitro-accent) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  filter: brightness(1.05);
}

.btn:focus,
.btn:focus-visible,
.nav-link:focus-visible,
.accordion-button:focus,
.accordion-button:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(194, 20, 36, 0.28) !important;
}

.accordion-button:not(.collapsed) {
  background: var(--bitro-surface-3) !important;
  color: #fff !important;
}

.accordion-button::after,
.navbar-toggler {
  filter: invert(1) contrast(0.95);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.24) !important;
}

.form-control,
.form-select,
.dropdown-menu,
input,
select,
textarea,
pre {
  background: #ffffff !important;
  color: var(--bitro-text) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

pre {
  margin-bottom: 0;
}

#missinghid > .container > div,
#aboutdrift .mb-4 {
  border-color: var(--bitro-accent) !important;
  color: var(--bitro-text) !important;
  background: #ffffff !important;
}

#quickTestAccordion .accordion-collapse .accordion-body {
  background-color: #ffffff !important;
}

#footbody,
#lastConnected,
#fwinfo,
#fwinfoextra-fw,
#fwinfoextra-hw,
#d-bat,
#devname,
#lx-lbl,
#ly-lbl,
#rx-lbl,
#ry-lbl {
  color: var(--bitro-text) !important;
}

.text-muted,
.dropdown-item-text,
.form-text,
small {
  color: var(--bitro-muted) !important;
}

dl.row dt {
  font-weight: normal;
}
dl.row dd {
  font-family: monospace;
}

#left-stick-card,
#right-stick-card {
  cursor: pointer;
  outline: none !important;
}

.stick-card-active {
  border: 1px solid var(--bitro-accent) !important;
  box-shadow: 0 0 16px rgba(194, 20, 36, 0.34) !important;
}

.stick-card-active .card-header {
  background-color: var(--bitro-accent) !important;
  color: white !important;
}

/* Quick Test Icon Animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  60% { transform: translateY(-2px); }
}

@keyframes glow {
  0%, 100% { text-shadow: 0 0 5px rgba(194, 20, 36, 0.5); }
  50% { text-shadow: 0 0 15px rgba(194, 20, 36, 0.8), 0 0 25px rgba(194, 20, 36, 0.6); }
}

/* Animation classes for different test types - only animate when accordion is expanded */
.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-usb {
  animation: pulse 1s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-buttons {
  animation: bounce 0.6s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-haptic {
  animation: shake 0.5s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-adaptive {
  animation: pulse 1s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-speaker {
  animation: bounce 0.6s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-microphone {
  animation: glow 1.5s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-lights {
  animation: glow 1.2s ease-in-out infinite !important;
}

.accordion-item:has(.accordion-collapse.show) i.fas.test-icon-headphone {
  animation: pulse 1s ease-in-out infinite !important;
}

/* Quick Test accordion button height reduction */
#quickTestAccordion .accordion-button {
  padding: 0.5rem 1rem;
}

/* Quick Test accordion body tint */
#quickTestAccordion .accordion-collapse .accordion-body {
  background-color: #ffffff;
}

/* Skip button hover behavior */
.skip-btn {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.accordion-header:hover .skip-btn {
  opacity: 1;
}

/* Blinking animation for range calibration alert */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.blink-text {
  animation: blink 1s infinite;
}

/* Pulsing animation for text */
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulsing-text {
  animation: pulse-text 0.75s ease-in-out infinite;
}

/* Set text color to red for internationalized elements */
/* .ds-i18n {
  color: red;
} */