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

/* 设置全局元素适应手机屏幕 */
* {
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-size: 16px; /* 基础字体放大 */
}

ion-app {
  height: 100vh;
  width: 100vw;
  max-width: none;
  display: flex;
  flex-direction: column;
}

ion-router-outlet {
  flex: 1;
  overflow: auto;
  padding-bottom: 56px; /* 留出标签栏高度 */
}

ion-tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}

/* 全局放大设置 */
ion-content {
  --ion-font-family: system-ui;
  font-size: 1.1rem; /* 内容区域字体放大 */
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-start: 16px;
  --padding-end: 16px;
}

ion-button {
  font-size: 1.1rem; /* 按钮文字放大 */
  height: 48px; /* 按钮高度放大 */
}

ion-card {
  margin: 16px;
  border-radius: 12px;
  font-size: 1.1rem; /* 卡片内容放大 */
}

ion-item {
  --min-height: 56px; /* 表单项高度放大 */
}

ion-avatar {
  width: 96px !important; /* 头像尺寸放大 */
  height: 96px !important;
}

ion-app {
  height: 80vh;
  width: 24vw;
}
