/* 信桥管理后台 · 页面级组件（概览、时间线、登录、确认对话框）、动效与响应式。 */

/* ---------- 概览页组件 ---------- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 180px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
}
.chart-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.chart-column > span {
  color: var(--ink-2);
  font: 12px var(--mono);
}
.chart svg {
  width: 100%;
  max-width: 48px;
  height: 124px;
  margin-top: 4px;
  fill: var(--brand);
}
.chart-column small {
  margin: 8px 0;
  color: var(--ink-3);
  font-size: 12px;
}
.chart-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 12px;
}
.attention-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.attention-count {
  flex: none;
  min-width: 40px;
  color: var(--ink-3);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.attention-count.warn {
  color: var(--warn);
}
.attention-count.bad {
  color: var(--danger);
}
.attention-row strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.attention-row p {
  font-size: 12px;
  color: var(--ink-3);
}
.alert-line {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid #dfb65a;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.quiet {
  padding-top: 12px;
  color: var(--ink-3);
  font-size: 13px;
}

/* ---------- 其他组件 ---------- */
/* 设置项列表：左侧标题与当前状态，右侧操作 */
.settings {
  padding-top: 6px;
  padding-bottom: 6px;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.settings > .setting-row {
  margin-top: 0;
}
.setting-row:last-child {
  border-bottom: 0;
}
.setting-row h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.setting-row p {
  margin-top: 2px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.setting-row .btn {
  flex: none;
}
.sms-preview {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--subtle);
}
.sms-preview small {
  color: var(--ink-3);
  font-size: 12px;
}
.sms-preview p {
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.timeline {
  margin: 6px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
}
.timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px 22px;
  border-left: 1px solid var(--line-strong);
}
.timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--canvas);
}
.timeline span,
.timeline small {
  color: var(--ink-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.timeline strong {
  font-size: 14px;
  font-weight: 600;
}
.prose > * {
  max-width: 820px;
}
.prose > * + * {
  margin-top: 12px;
}
.prose h2:not(:first-child) {
  margin-top: 28px;
}
.prose h3 {
  margin-top: 20px;
}
.prose ol,
.prose ul {
  margin-bottom: 0;
  padding-left: 20px;
  color: var(--ink-2);
}
.prose li + li {
  margin-top: 8px;
}
.prose li strong {
  color: var(--ink);
}
.prose table {
  white-space: normal;
}
.token-panel {
  max-width: 760px;
}
.token-panel > * + * {
  margin-top: 12px;
}
.token-panel pre {
  font-size: 14px;
}
.twofactor-setup {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.twofactor-qr {
  display: grid;
  place-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.twofactor-qr img {
  display: block;
  width: 200px;
  height: 200px;
}
.twofactor-steps > * + * {
  margin-top: 12px;
}
.twofactor-steps h2:not(:first-child) {
  margin-top: 24px;
}
.secret-key {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--subtle);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

/* ---------- 登录 ---------- */
.unauthenticated main {
  justify-content: center;
  max-width: 1000px;
}
.login-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: 0 12px 32px -16px rgb(23 38 44 / 0.18);
  overflow: hidden;
}
.login-intro {
  display: flex;
  flex-direction: column;
  padding: 44px 44px 36px;
  background: #1c4047;
  color: #fff;
}
.login-intro .brand {
  padding: 0;
  color: #fff;
}
.login-intro .brand-mark {
  background: transparent;
  border: 1px solid #6f9aa0;
  color: #b4dedc;
}
.login-intro .brand-name small {
  color: #a3c0c5;
}
.login-intro h1 {
  margin-top: 56px;
  font: 500 32px/1.6 var(--serif);
  letter-spacing: 0.06em;
}
.login-intro p {
  margin-top: 16px;
  color: #b1c9cd;
  font-size: 13px;
  line-height: 2;
}
.login-intro > small {
  margin-top: auto;
  padding-top: 28px;
  color: #8fb0b6;
  font-size: 12px;
}
.bridge-art {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 40px;
  color: #a3c4c9;
  font-size: 12px;
}
.bridge-art::before {
  content: "";
  position: absolute;
  inset: 30px 0 auto;
  border-top: 1px solid #5c858c;
}
.bridge-art i {
  position: absolute;
  top: 0;
  width: 38%;
  height: 30px;
  border: 1px solid #5c858c;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.bridge-art i:nth-child(2) {
  left: 31%;
}
.bridge-art i:nth-child(3) {
  right: 0;
}
.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px;
}
.login-card h2 {
  font-size: 22px;
}
.login-card > p {
  margin-top: 4px;
}
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0 20px;
}
.login-card form > .errorlist {
  margin: 0;
}
.passkey-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.passkey-login .hint,
.passkey-login .errorlist {
  margin: 0;
}
.passkey-login:not([hidden]) + form {
  margin-top: 16px;
}
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 12px;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.login-card input {
  height: 42px;
}
.login-card .btn {
  height: 42px;
  margin-top: 4px;
}
.login-card .small {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.8;
}

/* ---------- 确认对话框 ---------- */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 0 24px 48px -12px rgb(23 38 44 / 0.3);
}
.confirm-dialog::backdrop {
  background: rgb(23 38 44 / 0.35);
}
.confirm-dialog p {
  margin-top: 8px;
}
.confirm-dialog .actions {
  justify-content: flex-end;
  margin-top: 22px;
}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: no-preference) {
  a,
  .btn,
  input,
  select,
  textarea {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  .field-switch input[type="checkbox"]::before {
    transition: transform 0.15s ease;
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  :root {
    --sidebar: 196px;
    --gutter: 24px;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .grid-2,
  .login-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .login-layout {
    min-height: 0;
  }
  .login-intro {
    display: none;
  }
  .unauthenticated main {
    max-width: 460px;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  :root {
    --gutter: 16px;
  }
  /* 侧栏变为顶部两行：品牌 + 账号操作，下面是可横向滚动的导航 */
  .sidebar {
    position: static;
    width: 100%;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px var(--gutter) 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .brand {
    padding: 0;
  }
  .brand-name small,
  .nav-label,
  .account-name {
    display: none;
  }
  .account {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }
  .nav {
    order: 3;
    flex: 0 0 100%;
    flex-direction: row;
    gap: 2px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav-group {
    flex-direction: row;
  }
  .nav a {
    flex: none;
    height: 32px;
    white-space: nowrap;
  }
  .nav a.is-active::before {
    display: none;
  }
  .shell {
    margin-left: 0;
    min-height: 0;
  }
  .topbar {
    position: static;
    height: 52px;
  }
  main {
    padding-top: 20px;
    gap: 16px;
  }
  h1 {
    font-size: 20px;
  }
  .page-head {
    flex-direction: column;
  }
  .panel {
    padding: 16px;
  }
  .stat {
    padding: 14px 16px;
  }
  .stat-value {
    font-size: 24px;
  }
  .stats.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats.three .stat:last-child {
    grid-column: 1 / -1;
  }
  .panel-head {
    flex-wrap: wrap;
  }
  /* 窄屏：进度条让位给数字；小表格允许换行，不再横向截断 */
  .usage progress {
    display: none;
  }
  .table-fit table {
    white-space: normal;
  }
  .table-fit td.mono {
    overflow-wrap: anywhere;
  }
  .table-fit th:first-child,
  .table-fit td:first-child {
    white-space: nowrap;
  }
  .twofactor-setup {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .twofactor-qr {
    justify-self: center;
  }
  .login-card {
    padding: 28px 24px;
  }
  .form-row .field {
    flex: 1 1 140px;
  }
  .confirm-group {
    width: 100%;
  }
  .confirm-group input {
    flex: 1;
    width: auto;
  }
  footer {
    flex-direction: column;
    gap: 2px;
  }
  /* iOS 上小于 16px 的输入框获得焦点时会放大页面 */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}