/* Base styles */
@import 'variables.css';
@import 'navigation.css';

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
}

.hidden {
  display: none;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-color);
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-color);
}

.btn-black {
  background-color: var(--black-color);
  border-color: var(--black-color);
  color: var(--white-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active {
  background-color: var(--black-color);
  border-color: var(--black-color);
  color: var(--white-color);
  box-shadow: var(--shadow-sm);
}

.btn-outline-black {
  color: var(--black-color);
  border-color: var(--black-color);
  background-color: transparent;
}

.btn-outline-black:hover,
.btn-outline-black:focus,
.btn-outline-black:active {
  background-color: var(--black-color);
  border-color: var(--black-color);
  color: var(--white-color);
}

/* Forms */
.form-control,
.form-select,
input[type="time"],
input[type="number"] {
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
}

.form-control:focus,
.form-select:focus,
input[type="time"]:focus,
input[type="number"]:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(189, 245, 86, 0.25);
}

.form-check-input {
  border-color: var(--border-color);
}

.alert {
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.alert-info {
  background-color: rgba(189, 245, 86, 0.1);
  border-color: var(--primary-color);
  color: var(--text-color);
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
  color: var(--text-color);
} 

/* Footer */
footer {
  text-align: center;
  color: var(--text-color);
  padding: var(--spacing-lg) 0;
  margin-top: var(--spacing-xl);
}