/* ============================================================
   Quasar 视觉特效复刻层（对齐 Broctagon AXIS CRM 实测参数）
   数据来源：crm.broctagon.com / admin.broctagon.com 真实计算样式与 CSS 规则提取
   - 图标：Material Icons（本地字体，与 Broctagon 同款 v145）
   - 按钮：elevation-2 阴影 + push 按下位移 + ripple 涟漪 + 三组 cubic-bezier 过渡
   ============================================================ */

/* ---------- 1. 图标字体（Material Icons，本地部署） ---------- */
@font-face{
  font-family:'Material Icons';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url('/assets/fonts/material-icons.woff2') format('woff2');
}
.material-icons{
  font-family:'Material Icons';
  font-weight:400;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'liga';
  vertical-align:middle;
  user-select:none;
}
/* 尺寸阶梯：与 Broctagon 实测值一致（12 / 14 / 16 / 17.15 / 18 / 20.58 / 24 / 32.58） */
.mi-12{font-size:12px}.mi-14{font-size:14px}.mi-16{font-size:16px}
.mi-17{font-size:17.15px}.mi-18{font-size:18px}.mi-20{font-size:20.58px}
.mi-24{font-size:24px}.mi-32{font-size:32.585px}
.mi-fill{font-variation-settings:'FILL' 1}

/* ---------- 2. 按钮：Quasar elevation / push / ripple ---------- */
/* Quasar elevation-2：box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12) */
.q-elev-2{box-shadow:0 1px 5px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12)}
.q-elev-3{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px rgba(0,0,0,.14),0 1px 14px rgba(0,0,0,.12)}
.q-elev-8{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}

/* 全部按钮统一接入 Quasar 特效：抬升阴影 + 按下位移 + 缓动曲线
   注意：不设 overflow:hidden —— 由内层 .ripple 容器自行裁剪，
   否则会裁掉 .icon-btn 上的角标（.dot）等外溢元素 */
.btn,.icon-btn,.tab,.nav-item,.q-btn{
  position:relative;
  isolation:isolate;
  /* 三段过渡：阴影 .3s / 位移 .3s / 背景 .3s，曲线 cubic-bezier(.25,.8,.5,1) */
  transition:box-shadow .3s cubic-bezier(.25,.8,.5,1),
             transform .3s cubic-bezier(.25,.8,.5,1),
             background-color .3s cubic-bezier(.25,.8,.5,1),
             color .3s cubic-bezier(.25,.8,.5,1),
             border-color .3s cubic-bezier(.25,.8,.5,1);
}
/* push 按下：整体下移 2px（对齐 .q-btn--push.q-btn--actionable:active{transform:translateY(2px)}） */
.btn:active,.q-btn--push:active{transform:translateY(2px)}
.btn:not([disabled]):hover{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px rgba(0,0,0,.14),0 1px 14px rgba(0,0,0,.12)}
.btn.primary{box-shadow:0 1px 5px rgba(215,13,36,.28),0 2px 2px rgba(215,13,36,.18),0 3px 1px -2px rgba(0,0,0,.12)}
.btn.primary:hover{box-shadow:0 3px 5px -1px rgba(215,13,36,.32),0 5px 8px rgba(215,13,36,.2),0 1px 14px rgba(0,0,0,.12)}
/* flat / outline / unelevated：无阴影（对齐 .q-btn--flat::before{box-shadow:none}） */
.btn.ghost,.btn.flat,.icon-btn{box-shadow:none}
.btn.ghost:hover,.icon-btn:hover{box-shadow:0 1px 5px rgba(0,0,0,.14),0 2px 2px rgba(0,0,0,.1)}

/* focus-helper：焦点时整块叠加 currentColor 低透明度层（对齐 .q-focus-helper 与 :after 的过渡） */
.btn::after,.q-btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:currentColor;opacity:0;pointer-events:none;
  transition:background-color .3s cubic-bezier(.25,.8,.5,1),opacity .6s cubic-bezier(.25,.8,.5,1);
}
.btn:focus-visible::after,.q-btn:focus-visible::after{opacity:.08}
.btn:focus{outline:0}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* 按钮内容层置于涟漪之上（排除涟漪容器自身） */
.btn>:not(.ripple),.q-btn>:not(.ripple){position:relative;z-index:1}

/* ---------- 3. ripple 涟漪（对齐 Quasar .q-ripple__inner 的参数） ---------- */
.ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.ripple i{
  position:absolute;top:0;left:0;
  background:currentColor;border-radius:50%;
  opacity:0;transform:scale(0);
  will-change:transform,opacity;pointer-events:none;
}
/* --enter：transform .225s cubic-bezier(.4,0,.2,1) + opacity .1s 同曲线 */
.ripple i.ripple-enter{opacity:.16;transform:scale(1);transition:transform .225s cubic-bezier(.4,0,.2,1),opacity .1s cubic-bezier(.4,0,.2,1)}
/* --leave：opacity .25s cubic-bezier(.4,0,.2,1) */
.ripple i.ripple-leave{opacity:0;transform:scale(1);transition:opacity .25s cubic-bezier(.4,0,.2,1)}

/* ---------- 4. 下拉箭头旋转（对齐 .q-btn-dropdown__arrow{transition:transform .28s}） ---------- */
.arrow-rot{transition:transform .28s cubic-bezier(.25,.8,.5,1)}
.arrow-rot.open{transform:rotate(180deg)}

/* ---------- 5. 图标在导航/按钮中的对齐微调 ---------- */
.nav-item .ic .material-icons,.nav-sub .material-icons,.tab .material-icons,
.btn .material-icons,.icon-btn .material-icons{vertical-align:-3px}