html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* =========================================================================
   全站底色统一：跟首页（PlayNest 深色主题）保持一致
   下面这一套变量跟 Views/Home/Index.cshtml 里 .pn-home 用的是同一套配色，
   这样首页和其它页面衔接的时候颜色是完全一样的，不会有"首页是深色卡片、
   其它页面又是一块白"这种割裂感。
   ========================================================================= */
:root {
  --pn-bg: #0f1420;
  --pn-bg2: #161d2e;
  --pn-surface: #1c2438;
  --pn-surface2: #212b45;
  --pn-border: #2a3450;
  --pn-text: #e6e9f2;
  --pn-muted: #9aa3b8;
  --pn-accent: #4f8cff;
  --pn-accent2: #7c5cff;
  --pn-green: #3ddc97;
}

html, body {
  background-color: var(--pn-bg);
  color: var(--pn-text);
}

a { color: var(--pn-accent); }
a:hover { color: #7fb0ff; }

h1, h2, h3, h4, h5, h6 { color: var(--pn-text); }

/* 顶部导航栏 / 底部 footer */
.site-navbar {
  background-color: var(--pn-bg2) !important;
  border-bottom: 1px solid var(--pn-border) !important;
}
.site-navbar .navbar-brand,
.site-navbar .nav-link { color: var(--pn-text) !important; }
.site-navbar .nav-link:hover,
.site-navbar .navbar-brand:hover { color: #fff !important; }
.site-navbar .navbar-toggler { border-color: var(--pn-border); }
.site-navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.site-navbar .dropdown-toggle { color: #fff !important; }

footer.footer {
  background-color: var(--pn-bg2);
  border-top: 1px solid var(--pn-border) !important;
  color: var(--pn-muted) !important;
}

/* 卡片 / 面板 */
.card {
  background-color: var(--pn-surface);
  color: var(--pn-text);
  border-color: var(--pn-border);
}
.card-header, .card-footer {
  background-color: var(--pn-surface2);
  border-color: var(--pn-border);
}
.card-title, .card-text, .card-body { color: var(--pn-text); }

/* 表格 */
.table {
  color: var(--pn-text);
  border-color: var(--pn-border);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--pn-text);
  border-bottom-color: var(--pn-border);
  box-shadow: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, .035);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(79, 140, 255, .1);
}
.table-bordered, .table-bordered > :not(caption) > * { border-color: var(--pn-border); }

/* 表单控件 */
.form-control, .form-select {
  background-color: var(--pn-surface);
  border-color: var(--pn-border);
  color: var(--pn-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--pn-surface);
  color: var(--pn-text);
  border-color: var(--pn-accent);
  box-shadow: 0 0 0 .2rem rgba(79, 140, 255, .2);
}
.form-control::placeholder { color: var(--pn-muted); opacity: 1; }
.form-control:disabled, .form-select:disabled,
.form-control[readonly] { background-color: var(--pn-bg2); color: var(--pn-muted); }
.form-label { color: var(--pn-text); }
.form-text { color: var(--pn-muted); }
.form-check-label { color: var(--pn-text); }
.input-group-text { background-color: var(--pn-surface2); border-color: var(--pn-border); color: var(--pn-muted); }

/* 下拉菜单 */
.dropdown-menu {
  background-color: var(--pn-surface2);
  border-color: var(--pn-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.dropdown-item { color: var(--pn-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(79, 140, 255, .15); color: #fff; }
.dropdown-divider { border-color: var(--pn-border); }

/* 弹窗 */
.modal-content {
  background-color: var(--pn-surface);
  color: var(--pn-text);
  border: 1px solid var(--pn-border);
}
.modal-header, .modal-footer { border-color: var(--pn-border); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* 列表组 */
.list-group-item {
  background-color: var(--pn-surface);
  color: var(--pn-text);
  border-color: var(--pn-border);
}

/* 提示条（保留语义色，只是换成深色底上的柔和版本） */
.alert-info { background-color: rgba(79, 140, 255, .12); color: #bcd4ff; border-color: rgba(79, 140, 255, .35); }
.alert-warning { background-color: rgba(255, 193, 7, .12); color: #ffd873; border-color: rgba(255, 193, 7, .35); }
.alert-danger { background-color: rgba(220, 53, 69, .15); color: #ff9aa5; border-color: rgba(220, 53, 69, .4); }
.alert-success { background-color: rgba(61, 220, 151, .12); color: var(--pn-green); border-color: rgba(61, 220, 151, .35); }
.alert-secondary { background-color: rgba(154, 163, 184, .12); color: var(--pn-muted); border-color: var(--pn-border); }

/* 分页 */
.page-link { background-color: var(--pn-surface); border-color: var(--pn-border); color: var(--pn-text); }
.page-link:hover { background-color: var(--pn-surface2); color: #fff; }
.page-item.active .page-link { background-color: var(--pn-accent); border-color: var(--pn-accent); color: #fff; }
.page-item.disabled .page-link { background-color: var(--pn-bg2); color: var(--pn-muted); }

/* 常用工具类的深色适配 */
.text-muted { color: var(--pn-muted) !important; }
.text-dark:not(.badge) { color: var(--pn-text) !important; }
.bg-white { background-color: var(--pn-surface) !important; }
.bg-light { background-color: var(--pn-bg2) !important; }
.border { border-color: var(--pn-border) !important; }
hr { border-color: var(--pn-border); opacity: .5; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important; }
code { color: #ffb4d0; background: rgba(255, 255, 255, .06); padding: .1em .3em; border-radius: 4px; }
::selection { background: rgba(79, 140, 255, .35); }

/* TomSelect（登录/表单里用到的下拉组件） */
.ts-wrapper .ts-control {
  background-color: var(--pn-surface) !important;
  border-color: var(--pn-border) !important;
  color: var(--pn-text) !important;
}
.ts-dropdown {
  background-color: var(--pn-surface2) !important;
  color: var(--pn-text) !important;
  border-color: var(--pn-border) !important;
}
.ts-dropdown .option { color: var(--pn-text) !important; }
.ts-dropdown .option.active { background-color: rgba(79, 140, 255, .18) !important; }