/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";

// 移动端基础布局设置
ion-content {
  --padding-start: 12px;
  --padding-end: 12px;
  max-width: 1800px; // 限制最大宽度为手机尺寸
  margin: 0 auto;
}

ion-grid {
  --ion-grid-padding: 8px;
}

ion-item {
  --padding-start: 12px;
  --inner-padding-end: 12px;
  --min-height: 56px;
}

// 新增顶部导航栏适配
ion-toolbar {
  --min-height: 48px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  
  ion-title {
    font-size: 1.1rem;
    padding: 0 12px;
  }
  
  // 手机竖屏适配
  @media (max-width: 576px) {
    --min-height: 44px;
    
    ion-title {
      font-size: 1rem;
      padding: 0 8px;
    }
    
    ion-buttons ion-button {
      --padding-start: 6px;
      --padding-end: 6px;
    }
  }
}
