/* 账号配额页专用。
   独立成文件而不是塞进 views.css —— 那边已经近千行，
   为几个类名去动它，以后想改配额样式得先翻半天找位置。 */

.q-list { display: flex; flex-direction: column; }

/* 一条用量四列：名称 / 进度条 / 已用 / 上限输入框
   上限做成输入框而不是纯文字，是因为「按组织单独设」要在这里直接改 ——
   再弹一层窗口填一个数字，来回几十家组织会很烦。 */
.q-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.15fr) minmax(70px, 1fr) 54px 104px;
  align-items: center;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--ink-150);
}
.q-row:last-child { border-bottom: none }

.q-name { min-width: 0 }
.q-name b {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-name span { display: block; font-size: 11px; color: var(--ink-400); margin-top: 2px }
/* 「单独」标记：这一家没用默认值。直接复用全站的 .tag blue，
   不自己写配色 —— 这个项目里 .tag 已经有浅色/深色两套定义，
   另起一套必然有一边对不上。这里只压掉它的默认外边距 */
.q-name .q-own { flex: none; font-style: normal; margin: 0 }

/* 进度条：底色最浅一档，填充色由内联样式给（绿 / 橙 / 红三档） */
.q-bar { height: 6px; border-radius: 99px; background: var(--ink-150); overflow: hidden }
.q-bar i { display: block; height: 100%; border-radius: 99px; transition: width .3s var(--ease) }

.q-used { text-align: right }
.q-used b { display: block; font-size: 16px; font-weight: 600; font-family: var(--ff-num); letter-spacing: -.3px }
/* 「已满」「快满」替换掉「已用」两个字 —— 状态直接写在数字下面，
   不用再去图例里对照颜色 */
.q-used span { display: block; font-size: 10px; color: var(--ink-400); margin-top: 1px }

.q-set .q-in {
  width: 100%; height: 30px; padding: 0 8px;
  font-size: 12.5px; text-align: center; font-family: var(--ff-num);
}
.q-set .q-in::placeholder { color: var(--ink-300); font-size: 12px }

/* 手机上四列排不下：名称与数字并排，进度条与上限输入框各占一行 */
body.mobile .q-row {
  grid-template-columns: minmax(0, 1fr) 54px 96px;
  grid-template-areas: "n v s" "b b b";
  gap: 7px 10px;
  padding: 12px 2px;
}
body.mobile .q-name { grid-area: n }
body.mobile .q-used { grid-area: v }
body.mobile .q-set { grid-area: s }
body.mobile .q-bar { grid-area: b }

/* 深色主题下进度条底色要更亮一点，否则与卡片底分不开 */
[data-theme="dark"] .q-bar { background: rgba(255, 255, 255, .1) }

/* 改动后浮出的保存条。
   顶部那张卡片里也有一个保存按钮，但主要操作区（每行的输入框）在下面两个
   长列表里 —— 滚下去改完，顶部的按钮早就不在视野内了。
   所以一有改动就在视口底部浮出这一条，滚到哪儿都在。 */
.q-savebar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 16px;
  background: var(--card);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  box-shadow: 0 14px 36px -12px rgba(12, 20, 36, .45);
  animation: q-bar-in .22s var(--ease);
}
.q-savebar[hidden] { display: none }
.q-savebar-t {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-600); white-space: nowrap;
}
.q-savebar-t svg { color: var(--warn); flex: none }
@keyframes q-bar-in {
  from { opacity: 0; transform: translate(-50%, 14px) }
  to   { opacity: 1; transform: translate(-50%, 0) }
}

/* 手机上底部有 tabbar，保存条必须抬起来 —— 不然被压住，点都点不到 */
body.mobile .q-savebar { bottom: 78px; padding: 8px 8px 8px 14px }