/* ===========================================================================
   IvyLink 管理后台 —— 排版与移动端适配层

   作为独立文件在内联 <style> 之后加载，靠"后来者优先"覆盖，不改动原有结构，
   出问题把这一行 <link> 摘掉就回到原样。

   解决的问题：
     1. 配色分裂 —— admin.html 内联是青色 #14b8a6、admin-theme.css 是绿色 #4caf50，
        统一到 IvyLink 叶子 logo 的绿。
     2. 手机上除「部署」外所有表格横向溢出 —— 用 data-l 做卡片化（标签由
        admin-enhance.js 自动从表头复制，无需改 9 个页面的渲染代码）。
     3. 侧边栏在窄屏挤成一条 —— 改成吸顶的横向标签条。
     4. 输入框字号 <16px，iOS Safari 聚焦时会自动放大整页。
     5. 触摸目标偏小、刘海屏安全区没处理。
   =========================================================================== */

/* ---------- 1. 配色：统一到叶子绿 ---------- */
:root {
  --g: #3fbf5a;            /* 主色，取自 ivylink.svg 叶片中段 */
  --gd: #1f8f45;           /* 主色深，用于文字/描边，保证对比度 */
  --g2: #86efac;           /* 主色浅，渐变高光 */
  --gs: #eaf7ee;           /* 主色浅底 */
  --ink: #16301f;          /* 正文 */
  --muted: #6f8a78;        /* 次要文字 */
  --line: #dfeee4;         /* 描边 */
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(18, 88, 46, .07);
  --shadow-sm: 0 2px 8px rgba(18, 88, 46, .05);
  --brand-grad: linear-gradient(120deg, #15803d, #3fbf5a 55%, #6fd98a);
  --radius: 16px;
  --radius-sm: 10px;
  /* 顶部吸顶条高度，供下面的 sticky 定位对齐 */
  --appbar-h: 52px;
}

body {
  background: #f5faf6;
  background-image:
    radial-gradient(1000px 420px at 85% -10%, #e6f7ea 0, rgba(230, 247, 234, 0) 55%),
    radial-gradient(900px 400px at -10% 0, #eaf6ef 0, rgba(234, 246, 239, 0) 55%);
  color: var(--ink);
}

.top { background: var(--brand-grad); box-shadow: 0 14px 32px rgba(21, 128, 61, .22); }
.metric { background: linear-gradient(120deg, #15803d, #3fbf5a); -webkit-background-clip: text; background-clip: text; }
.btn { border-color: #bfe3c8; color: var(--gd); }
.btn:hover { background: var(--gs); border-color: #a5d8b2; }
.btn.primary { background: var(--brand-grad); border-color: transparent; box-shadow: 0 6px 16px rgba(21, 128, 61, .26); }
.btn.primary:hover { background: linear-gradient(120deg, #126f35, #35a94e); }
input, select, textarea { border-color: #d6e6da; }
input:hover, select:hover, textarea:hover { border-color: #b6dcc1; }
input:focus, select:focus, textarea:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(63, 191, 90, .16); }
.notice { background: linear-gradient(120deg, #eefaf1, #f1fbf4); border-color: #d5efdd; color: #1c6a3a; }
tbody tr:hover { background: #f6fbf7; }
.node-pick label:hover { border-color: #a5d8b2; background: #f6fbf7; }
.node-pick label.selected { background: var(--gs); border-color: #94d4a6; color: var(--gd); }
.tabs button.active, .subnav button.active { background: var(--gs); border-color: #94d4a6; color: var(--gd); }
.tabs button:hover, .subnav button:hover { border-color: #a5d8b2; }

/* ---------- 2. 顶部应用条（admin-guard.js 注入的那条） ---------- */
/* 原来是内联样式写死的青色渐变，这里用 !important 覆盖 —— 内联样式优先级更高，
   没有别的办法；改 guard.js 会动到登录态逻辑，不值得为了配色去碰。 */
.ivy-appbar {
  background: var(--brand-grad) !important;
  border-bottom: 0 !important;
  box-shadow: 0 2px 12px rgba(21, 128, 61, .18) !important;
  padding: 0 16px !important;
  height: var(--appbar-h);
  /* 刘海屏/灵动岛：顶部安全区 */
  padding-top: env(safe-area-inset-top) !important;
  height: calc(var(--appbar-h) + env(safe-area-inset-top));
  gap: 10px !important;
}
.ivy-appbar .ivy-logo { width: 26px; height: 26px; flex: none; display: block; }
.ivy-appbar b {
  font-size: 15px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivy-appbar #adminLogoutBtn {
  flex: none;
  min-height: 34px;
  border-radius: 9px !important;
  padding: 6px 14px !important;
}

/* ---------- 3. 版心与节奏 ---------- */
.shell { max-width: 1200px; padding: 20px 22px 40px; }

.top {
  padding: 22px 24px;
  border-radius: 18px;
  gap: 14px;
}
.brand { font-size: 19px; }

.layout { gap: 18px; margin-top: 18px; }

.side {
  padding: 8px;
  border-radius: var(--radius);
  /* 桌面端跟随滚动，长页面里导航始终在手边 */
  position: sticky;
  top: calc(var(--appbar-h) + env(safe-area-inset-top) + 12px);
}
.side button {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  min-height: 40px;
}

.card { border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }

/* 页面标题行：标题 + 右侧操作 */
.toolbar { gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar h2 { font-size: 18px; line-height: 1.3; }

/* 表格：表头吸顶（长表格滚动时列名不丢） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th { font-weight: 600; font-size: 12px; letter-spacing: .3px; color: var(--muted); }

/* ---------- 4. 平板（≤980px）：网格降档 ---------- */
@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .shell { padding: 16px 16px 36px; }
}

/* ---------- 5. 手机（≤760px） ---------- */
@media (max-width: 760px) {
  .shell { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); }

  /* 顶部 hero 与应用条内容重复，窄屏上直接省掉，把竖向空间让给正文 */
  .top { display: none; }

  .layout { display: block; margin-top: 0; }

  /* 侧边栏 → 吸顶的横向标签条 */
  .side {
    position: sticky;
    top: calc(var(--appbar-h) + env(safe-area-inset-top));
    z-index: 40;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px;
    margin: 0 -12px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(18, 88, 46, .06);
    scroll-snap-type: x proximity;
  }
  .side::-webkit-scrollbar { display: none; }
  .side button {
    width: auto;
    flex: none;
    white-space: nowrap;
    margin: 0;
    padding: 8px 14px;
    min-height: 38px;
    font-size: 13.5px;
    border-radius: 99px;
    scroll-snap-align: center;
  }
  .side button.active { background: var(--gs); color: var(--gd); }

  .grid, .grid2 { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px; margin-bottom: 12px; border-radius: 14px; }
  .toolbar h2 { font-size: 17px; }
  h1 { font-size: 19px; }

  /* 表单：标签在上、控件在下 */
  .frow { grid-template-columns: 1fr; gap: 6px; }
  .frow > label { padding-top: 0; }

  /* 触摸目标：按钮至少 40px 高；成组操作按钮铺满一行更好点 */
  .btn { min-height: 40px; padding: 9px 14px; }
  .actions { gap: 8px; }
  .actions .btn { flex: 1 1 calc(50% - 4px); }
  .actions .btn:only-child { flex: 1 1 100%; }

  /* iOS Safari：输入框字号 <16px 时聚焦会自动放大整页，必须 ≥16px */
  input, select, textarea { font-size: 16px; padding: 10px 12px; border-radius: var(--radius-sm); }
  input[type=checkbox], input[type=radio] { min-width: 20px; min-height: 20px; }
  label { font-size: 13px; }

  .notice { padding: 11px 12px; font-size: 13px; }
  .tabs, .subnav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .subnav::-webkit-scrollbar { display: none; }
  .tabs button, .subnav button { white-space: nowrap; flex: none; }

  /* ---- 表格 → 卡片 ----
     只对 admin-enhance.js 标记过的表格生效（它会把表头文字复制进每个 td 的
     data-l）。没标记的表格保持横向滚动，不会被这套规则拆坏。 */
  table.rtable { display: block; min-width: 0; }
  table.rtable thead { display: none; }
  table.rtable tbody, table.rtable tr { display: block; }
  table.rtable tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  table.rtable tr:hover { background: #fff; }
  table.rtable td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border: 0;
    padding: 5px 0;
    text-align: right;
    font-size: 13.5px;
    word-break: break-word;
  }
  table.rtable td:before {
    content: attr(data-l);
    color: var(--muted);
    flex: none;
    text-align: left;
    font-size: 12.5px;
    white-space: nowrap;
  }
  /* 没有标签的单元格（通常是操作列）：整行铺开，按钮排一排 */
  table.rtable td[data-l=""]:before,
  table.rtable td:not([data-l]):before { content: none; }
  table.rtable td.rt-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed var(--line);
  }
  table.rtable td.rt-actions:before { content: none; }
  table.rtable td.rt-actions .btn { flex: 1 1 auto; }
  /* 空表格提示不要被拆成卡片 */
  table.rtable td[colspan] { display: block; text-align: center; color: var(--muted); }
  table.rtable td[colspan]:before { content: none; }
}

/* ---------- 6. 小屏手机（≤380px）：再紧一档 ---------- */
@media (max-width: 380px) {
  .shell { padding: 10px 10px calc(24px + env(safe-area-inset-bottom)); }
  .card { padding: 12px; }
  .ivy-appbar b { font-size: 14px; }
  .actions .btn { flex: 1 1 100%; }
}

/* ---------- 7. 无障碍与手感 ---------- */
:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .btn.primary:hover { transform: none; }
}

/* ===========================================================================
   8. 表格对齐（2026-10-21，bak-align）
   只加 CSS，不改渲染逻辑。通用部分对所有表格生效；#users 是「用户与节点权限」表，
   它没有 class 钩子，按列序号定位：
   1 账号 / 2 备注 / 3 有效期 / 4 状态 / 5 可用节点 / 6 在线/上限 / 7 已用流量 / 8 操作
   =========================================================================== */

/* ---- 通用：所有后台表格 ---- */
th, td { vertical-align: middle; }
th { white-space: nowrap; }
td { line-height: 1.45; }
td .pill { white-space: nowrap; display: inline-block; line-height: 1.5; }
td small, td .muted { line-height: 1.4; }
#users, #nodes, #vpsList, #vpsPanel, #reconcile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 操作列（admin-enhance.js 自动打的 rt-actions）：按钮不折字、尺寸统一 */
td.rt-actions { white-space: nowrap; }
td.rt-actions .btn { padding: 5px 11px; font-size: 12px; line-height: 1.4; white-space: nowrap; vertical-align: middle; }

/* ---- 用户与节点权限表（桌面/平板） ---- */
@media (min-width: 761px) {
  #users table { min-width: 800px; }
  #users th, #users td { padding: 10px 7px; }
  #users tr > :nth-child(1) { white-space: nowrap; font-weight: 600; }
  #users tr > :nth-child(2) { min-width: 84px; max-width: 150px; word-break: break-word; }
  /* 有效期：只在空格处断行 → 固定两行「起 →」/「止」，到期标签另起一行 */
  #users td:nth-child(3) { width: 104px; min-width: 104px; word-break: keep-all; font-variant-numeric: tabular-nums; font-size: 12.5px; }
  #users td:nth-child(3) .pill { margin-top: 3px; font-size: 11px; padding: 1px 8px; }
  #users tr > :nth-child(4) { white-space: nowrap; text-align: center; }
  #users tr > :nth-child(5) { min-width: 100px; }
  #users tr > :nth-child(6),
  #users tr > :nth-child(7) { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
  #users tr > :nth-child(6) { text-align: center; }
  /* 操作：6 个按钮排成 3×2 等宽网格 */
  #users tr > :nth-child(8) { width: 196px; min-width: 196px; text-align: left; }
  #users td:nth-child(8) { white-space: normal; font-size: 0; line-height: 0; padding-left: 6px; padding-right: 4px; }
  #users td:nth-child(8) .btn {
    display: inline-block; width: 58px; margin: 2px 3px 2px 0; padding: 5px 0;
    font-size: 12px; line-height: 1.4; text-align: center; transform: none;
  }
}

/* ---- 手机卡片模式：操作按钮 3 列等宽 ---- */
@media (max-width: 760px) {
  #users table.rtable td.rt-actions {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  }
  #users table.rtable td.rt-actions .btn { width: 100%; min-height: 38px; padding: 8px 4px; font-size: 13px; }
  table.rtable td { align-items: center; }
  table.rtable td.rt-actions { white-space: normal; }
  /* 没有 thead 的表格，首行 <th> 会被渲染成一张空卡片；隐藏它（标签已由 data-l 显示） */
  table.rtable tr:first-child:has(> th) { display: none; }
  /* 单元格里的第二行（如「默认：xx 节点」「连续探测失败」）另起一行靠右，不挤在标签旁 */
  table.rtable td { flex-wrap: wrap; }
  table.rtable td > div, table.rtable td > small { flex-basis: 100%; text-align: right; }
}