/* Ionic CSS imports */
@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 */
@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;
}