/* ===== ParentControl 管理后台 — 样式（双主题：亮色/暗影） ===== */

/* ---------- 亮色主题（默认） ---------- */
:root {
  --bg:            #f3f5f9;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-header:     #1e2a45;
  --bg-login-card: #ffffff;
  --text:          #1f2937;
  --text-secondary:#4b5563;
  --text-muted:    #9ca3af;
  --border:        #e5e7eb;
  --border-card:   #edf0f4;
  --primary:       #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --success-bg:    #d1fae5;
  --success-text:  #065f46;
  --danger-text:   #991b1b;
  --danger-bg:     #fee2e2;
  --secondary-bg:  #e8ebf0;
  --secondary-text:#374151;
  --shadow:        0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg:     0 10px 30px rgba(15,23,42,0.14);
  --th-bg:         #f1f5f9;
  --tr-border:     #f1f5f9;
  --nav-bg:        #ffffff;
  --nav-border:    #e5e7eb;
  --accent:        #d97706;
  --accent-text:   #ffffff;
  --toggle-bg:     rgba(255,255,255,0.15);
  --toggle-hover:  rgba(255,255,255,0.25);
}

/* ---------- 暗影主题 ---------- */
body.dark-mode {
  --bg:            #0f172a;
  --bg-card:       #1e293b;
  --bg-card-hover: #26334a;
  --bg-header:     #0b1120;
  --bg-login-card: #1e293b;
  --text:          #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:    #64748b;
  --border:        #334155;
  --border-card:   #2a3850;
  --primary:       #3b82f6;
  --primary-hover: #60a5fa;
  --primary-light: #1e2d45;
  --success-bg:    #14352a;
  --success-text:  #6ee7b7;
  --danger-text:   #fca5a5;
  --danger-bg:     #3b1d1d;
  --secondary-bg:  #2a3448;
  --secondary-text:#94a3b8;
  --shadow:        0 2px 8px rgba(0,0,0,0.35);
  --shadow-lg:     0 10px 30px rgba(0,0,0,0.50);
  --th-bg:         #172136;
  --tr-border:     #293449;
  --nav-bg:        #0f172a;
  --nav-border:    #334155;
  --accent:        #fbbf24;
  --accent-text:   #0f172a;
  --toggle-bg:     rgba(255,255,255,0.10);
  --toggle-hover:  rgba(255,255,255,0.20);
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- 登录页 ---------- */
#loginPage {
  display: flex; justify-content: center; align-items: center;
  height: 100vh; background: var(--bg);
  transition: background 0.3s ease;
}
.login-card {
  background: var(--bg-login-card);
  padding: 40px; border-radius: 16px;
  box-shadow: var(--shadow-lg); width: 360px; text-align: center;
  border: 1px solid var(--border-card);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.login-logo {
  width: 56px; height: 56px; margin: 0 auto 14px;
  background: var(--primary-light); border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.login-card h1       { color: var(--text); margin-bottom: 4px; font-size: 22px; }
.login-card p        { color: var(--text-muted); margin-bottom: 24px; font-size: 13px; }

/* ---------- 输入框 ---------- */
.input, input[type="text"], input[type="password"] {
  padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px; width: 100%;
  background: var(--bg-card); color: var(--text);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.input:focus, input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,120,212,0.15);
}

/* ---------- 主面板：全屏宽度 ---------- */
header {
  background: var(--bg-header); color: white; padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.3s ease;
}
header h1 { font-size: 18px; }

.header-left   { display: flex; align-items: center; gap: 12px; }
.header-right  { display: flex; align-items: center; gap: 12px; }

nav {
  background: var(--nav-bg); display: flex;
  border-bottom: 2px solid var(--nav-border);
  transition: background 0.3s ease, border-color 0.3s ease;
  padding: 0 12px;
}
nav a {
  padding: 12px 18px; text-decoration: none; color: var(--text-secondary);
  cursor: pointer; border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  font-size: 14px;
}
nav a:hover    { color: var(--primary); }
nav a.active   { color: var(--primary); border-bottom-color: var(--primary); font-weight: bold; }

/* 主内容区：从 1200px 限宽改为接近全屏（左右各 12px 留白） */
main {
  padding: 16px 12px;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* ---------- 亮/暗切换按钮 ---------- */
.theme-toggle {
  background: var(--toggle-bg); border: none; color: white;
  font-size: 18px; width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.25s ease;
  line-height: 1;
}
.theme-toggle:hover { background: var(--toggle-hover); transform: rotate(20deg); }

/* ---------- 表单行 ---------- */
.form-row {
  display: flex; gap: 12px; margin-bottom: 16px;
  align-items: center; flex-wrap: wrap;
}

/* ---------- 按钮 ---------- */
.btn {
  padding: 9px 16px; border: none; border-radius: 6px;
  cursor: pointer; font-size: 13px; transition: background 0.2s ease;
}
.btn-primary   { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger    { background: #E81123; color: white; }
.btn-danger:hover  { background: #C8101E; }
.btn-sm        { padding: 4px 8px; font-size: 12px; }
.btn-secondary { background: var(--secondary-bg); color: var(--secondary-text); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-card); border-radius: 10px;
  padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  overflow-x: auto;
}

/* ---------- 统计卡片 ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.stat-card {
  background: var(--bg-card); border-radius: 12px;
  padding: 18px; box-shadow: var(--shadow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.stat-card .num   { font-size: 28px; font-weight: bold; color: var(--accent); }
.stat-card .label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ---------- 表格：9 列（3 版本精简版） ---------- */
table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-top: 10px;
  table-layout: fixed;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* 9 列：ID 名称 价格 分类 状态 免安装版 MSI企业版 商店版MSIX 操作 */
th:nth-child(1), td:nth-child(1) { width: 48px;  text-align: left;  } /* ID */
th:nth-child(2), td:nth-child(2) { width: 130px; text-align: left;  } /* 名称 */
th:nth-child(3), td:nth-child(3) { width: 60px;  text-align: left;  } /* 价格 */
th:nth-child(4), td:nth-child(4) { width: 76px;  text-align: left;  } /* 分类 */
th:nth-child(5), td:nth-child(5) { width: 76px;  text-align: center; } /* 状态 */
th:nth-child(6), td:nth-child(6),
th:nth-child(7), td:nth-child(7),
th:nth-child(8), td:nth-child(8) { width: 150px; text-align: left; } /* 3 x 版本列 */
th:nth-child(9), td:nth-child(9) { width: 180px; text-align: left;  white-space: nowrap; } /* 操作 */

/* 文本截断：长文件名/URL 不撑开表格（鼠标悬停仍显示完整提示） */
td .file-link, td .file-ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
td .cell-truncate {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  background: var(--th-bg); padding: 10px 12px;
  text-align: left; font-weight: 600; font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background 0.3s ease;
}
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--tr-border);
  font-size: 13px;
  vertical-align: top;
  word-break: break-word;
  transition: border-color 0.3s ease;
}
tr:hover { background: var(--bg-card-hover); transition: background 0.2s ease; }

/* ---------- 操作按钮 ---------- */
.unbind-btn {
  background: #E81123; color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px;
  cursor: pointer; font-size: 12px;
  transition: background 0.2s ease;
}
.unbind-btn:hover { background: #C8101E; }

/* ---------- 标签（Badge）---------- */
.badge     { padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-block; }
.badge-success  { background: var(--success-bg); color: var(--success-text); }
.badge-danger   { background: var(--danger-bg);  color: var(--danger-text);  }
.badge-secondary{ background: var(--secondary-bg); color: var(--secondary-text); }

/* ---------- 页签内容切换 ---------- */
.tab-content           { display: none; }
.tab-content.active    { display: block; }
h2                     { margin-bottom: 12px; font-size: 18px; }

/* ---------- 登录错误提示 ---------- */
.error { color: #E81123; font-size: 13px; margin-top: 8px; }

/* ---------- 退出链接 ---------- */
.logout { color: #ffe5a0; cursor: pointer; font-size: 14px; }
.logout:hover { color: #ffd970; }