/* 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';

/* Dark mode support - system preference */
@import '@ionic/react/css/palettes/dark.system.css';

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

/* Dark mode detection */
@media (prefers-color-scheme: dark) {
  :root {
    --ion-color-primary: #3880ff;
    --ion-color-primary-rgb: 56, 128, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;
  }
}

/* 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);
}

/* List item press states for Artists, Top100, SongLists */
ion-item.artist-item.ion-activated,
ion-item.top100-item.ion-activated,
ion-item.songlist-item.ion-activated,
ion-item.list-item.ion-activated {
  --background: rgba(var(--ion-color-primary-rgb), 0.1);
  --color: var(--ion-color-dark);
}

ion-item.artist-item.ion-focused,
ion-item.top100-item.ion-focused,
ion-item.songlist-item.ion-focused,
ion-item.list-item.ion-focused {
  --background: rgba(var(--ion-color-primary-rgb), 0.05);
  --color: var(--ion-color-dark);
}

/* Ensure icons remain visible during press states */
ion-item.ion-activated ion-icon {
  color: var(--ion-color-primary) !important;
}

/* 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);
}

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

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

ion-list {
  background: transparent;
}

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

/* Settings page specific styling */
.settings-container {
  padding: 0 16px !important;
}

.settings-container ion-list {
  margin: 0 -16px !important;
  padding: 0 16px !important;
}

.settings-container h2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.settings-container .bg-gray-50 {
  margin: 0 16px !important;
}

.settings-container ion-item {
  --padding-end: 0 !important;
}

.settings-container ion-toggle {
  margin-left: auto !important;
}

/* Right-justified button container with padding */
.right-button-container {
  padding-right: 16px !important;
  padding-top: 20px !important;
  padding-bottom: 10px !important;
}

/* 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 {
  font-weight: bold !important;
  font-size: 1rem !important;
  color: var(--ion-text-color) !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: var(--ion-text-color) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Bold song title styling */
.bold-title {
  font-weight: bold !important;
  color: var(--ion-text-color) !important;
}

/* Override Ionic label text color for song titles */
ion-item ion-label .bold-title {
  color: var(--ion-text-color) !important;
}

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

.visible-input ion-input {
  border: 1px solid var(--ion-border-color, #d1d5db) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  background: var(--ion-background-color) !important;
}