/* Brand Colors */
:root {
  --kope-primary: #3D8080;
  --kope-primary-dark: #2d5f5f;
  --kope-primary-light: #4d9090;
  --kope-secondary: #8CA7B6;
  --kope-secondary-light: #a5bcc9;
}

/* Brand color overrides for Bulma */
.hero.is-primary {
  background-color: var(--kope-primary) !important;
}

.button.is-primary {
  background-color: var(--kope-primary);
  border-color: var(--kope-primary);
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
  background-color: var(--kope-primary-dark);
  border-color: var(--kope-primary-dark);
}

.button.is-primary:focus,
.button.is-primary.is-focused {
  border-color: var(--kope-primary-dark);
}

.button.is-primary:active,
.button.is-primary.is-active {
  background-color: var(--kope-primary-dark);
  border-color: var(--kope-primary-dark);
}

.button.is-primary[disabled] {
  background-color: var(--kope-primary);
  border-color: var(--kope-primary);
  opacity: 0.5;
}

/* General spacing */
.box { 
  margin-top: 1rem; 
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
  transition: box-shadow 0.3s ease;
}

.box:hover {
  box-shadow: 0 0.75em 1.5em -0.125em rgba(10, 10, 10, 0.15), 0 0px 0 1px rgba(10, 10, 10, 0.04);
}

.card { 
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75em 1.5em -0.125em rgba(10, 10, 10, 0.15), 0 0px 0 1px rgba(10, 10, 10, 0.04);
}

.is-spaced { 
  margin-top: 1.5rem; 
}

/* Input styling */
.input:focus, .input:active {
  border-color: var(--kope-primary);
  box-shadow: 0 0 0 0.125em rgba(61, 128, 128, 0.25);
}

/* Button enhancements */
.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button.is-loading {
  pointer-events: none;
}

/* Card header enhancements */
.card-header {
  background-color: #f5f5f5;
  border-bottom: 2px solid #dbdbdb;
}

.card-header-title {
  color: #363636;
  font-weight: 600;
}

/* New guest card distinction */
.card.is-new-guest {
  border: 2px dashed #dbdbdb;
  background-color: #fafafa;
}

.card.is-new-guest .card-header {
  background-color: #fff5e6;
  border-bottom: 2px dashed #ffdd57;
}

/* Modal improvements */
.modal-card {
  border-radius: 6px;
  overflow: hidden;
}

.modal-card-head {
  background-color: var(--kope-primary);
  color: white;
}

.modal-card-title {
  color: white;
}

.modal-card-head .delete {
  background-color: rgba(255, 255, 255, 0.3);
}

.modal-card-head .delete:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Hero enhancements */
.hero .title .icon {
  margin-right: 0.5rem;
}

/* Form field icons */
.field .icon {
  color: #7a7a7a;
}

.field .input:focus ~ .icon {
  color: var(--kope-primary);
}

/* Loading spinner */
.button.is-loading::after {
  border-color: transparent transparent currentColor currentColor !important;
}

/* Reservation info card */
.reservation-info {
  background: linear-gradient(135deg, var(--kope-primary) 0%, var(--kope-secondary) 100%);
  color: white;
  margin-bottom: 2rem;
}

.reservation-info .card-header {
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.reservation-info .card-header-title {
  color: white;
}

.reservation-info strong {
  color: rgba(255, 255, 255, 0.9);
}

/* Smooth animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.card, .box {
  animation: fadeIn 0.3s ease-out;
}

/* Toast customization */
.toastify {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
}

/* Tom-Select Bulma Integration */
.ts-wrapper {
  width: 100% !important;
}

.ts-control {
  min-height: 2.5em;
  padding: calc(0.5em - 1px) calc(0.75em - 1px);
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.5;
  background-color: white;
  color: #363636;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
}

.ts-control:hover {
  border-color: #b5b5b5;
}

.ts-control.focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--kope-primary);
  box-shadow: 0 0 0 0.125em rgba(61, 128, 128, 0.25);
  outline: none;
}

.ts-wrapper.disabled .ts-control,
.ts-control[disabled] {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  color: #7a7a7a;
  cursor: not-allowed;
  opacity: 0.5;
}

.ts-dropdown {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  z-index: 1000;
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #363636;
  font-size: 1rem;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: #f5f5f5;
}

.ts-dropdown .option.selected {
  background-color: var(--kope-primary);
  color: white;
  font-weight: 600;
}

.ts-dropdown .optgroup-header {
  padding: 0.5rem 0.75rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #dbdbdb;
  font-weight: 600;
  color: #363636;
}

/* Tom-Select item (selected value display) */
.ts-control .item {
  color: #363636;
  background-color: transparent;
  border: none;
  padding: 0;
}

/* Tom-Select clear button */
.ts-wrapper .clear-button {
  color: #7a7a7a;
  transition: color 0.2s ease;
}

.ts-wrapper .clear-button:hover {
  color: #f14668;
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
  .ts-dropdown {
    max-height: 200px;
  }

  .ts-control {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .ts-dropdown .option {
    padding: 0.75rem; /* Larger touch targets */
    font-size: 16px;
  }
}

/* Integration with Bulma field structure */
.field .control .ts-wrapper {
  display: block;
}

/* Error state */
.field.has-error .ts-control,
.field.is-danger .ts-control {
  border-color: #f14668;
}

.field.has-error .ts-control:focus,
.field.is-danger .ts-control:focus {
  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}

/* Loading state */
.ts-wrapper.loading .ts-control,
.ts-wrapper.loading .ts-control:hover {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* Ensure dropdown appears above modals if needed */
.ts-dropdown {
  z-index: 100;
}

.modal.is-active ~ .ts-dropdown {
  z-index: 50;
}

/* Scrollbar styling for dropdown */
.ts-dropdown::-webkit-scrollbar {
  width: 8px;
}

.ts-dropdown::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

.ts-dropdown::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  border-radius: 4px;
}

.ts-dropdown::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}