/* Ionic CSS imports - must come first to establish base styles */
@import '@ionic/react/css/core.css';
@import '@ionic/react/css/normalize.css';
@import '@ionic/react/css/structure.css';
@import '@ionic/react/css/typography.css';
@import '@ionic/react/css/display.css';
@import '@ionic/react/css/padding.css';
@import '@ionic/react/css/float-elements.css';
@import '@ionic/react/css/text-alignment.css';
@import '@ionic/react/css/text-transformation.css';
@import '@ionic/react/css/flex-utils.css';
@import '@ionic/react/css/display.css';

/* Tailwind CSS - comes after Ionic to avoid overriding essential Ionic styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ensure menu button is visible */
ion-menu-button {
  --color: var(--ion-color-primary);
  --padding-start: 8px;
  --padding-end: 8px;
}

/* Menu item styling */
ion-item.ion-activated {
  --background: var(--ion-color-primary);
  --color: var(--ion-color-primary-contrast);
}

/* Ensure mobile menu appears above other content */
ion-menu {
  --z-index: 1000;
}

/* Ensure modal content is visible */
ion-modal ion-content {
  --background: var(--ion-background-color, #ffffff);
}

ion-modal ion-list {
  background: transparent;
}

/* Ensure content is visible and properly styled */
ion-content {
  --background: var(--ion-background-color, #ffffff);
}

ion-list {
  background: transparent;
}

/* Ensure items are properly displayed */
ion-item {
  --background: transparent;
  --color: var(--ion-text-color, #000000);
}

/* Ensure accordion content is visible */
ion-accordion {
  --background: transparent;
}

ion-accordion ion-item {
  --background: transparent;
}

/* Custom modal styling for Singers component */
ion-modal ion-input-label,
ion-modal .ion-input-label,
ion-modal ion-label {
  font-weight: bold !important;
  font-size: 1rem !important;
  color: #111827 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

ion-modal ion-button {
  height: 40px !important;
  min-height: 40px !important;
  --padding-top: 8px !important;
  --padding-bottom: 8px !important;
}

/* Bold label styling for forms and titles */
.bold-label {
  font-weight: bold !important;
  font-size: 1rem !important;
  color: #111827 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Bold song title styling */
.bold-title {
  font-weight: bold !important;
  color: #111827 !important;
}

/* Input field styling to match search box */
.visible-input {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
}

.visible-input ion-input {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
}