/* assets/theme.css - 平衡优化版本 + 移动端适配 */
:root{
  --bg0:#070A12;
  --bg1:#0B1220;
  --card: rgba(18, 25, 44, .72);
  --card2: rgba(18, 25, 44, .86);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.16);
  --text:#EAF0FF;
  --muted: rgba(234,240,255,.68);
  --primary:#4DA3FF;
  --primary2:#7C5CFF;
  --danger:#FF4D6D;
  --success:#2DE2A6;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

html, body{
  height:100%;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

body{
  font-feature-settings: "ss01" 1, "cv11" 1;
  letter-spacing:.2px;
}

.app-bg{
  position:fixed;
  inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(77,163,255,.15), transparent 70%);
  pointer-events:none;
  z-index:-1;
  opacity: 0.5;
}

/* Navbar - 移动端优化 */
.navbar.app-nav{
  background: rgba(10, 14, 26, 0.92) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--stroke);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.navbar .nav-link{
  color: rgba(234,240,255,.78) !important;
}
.navbar .nav-link.active{
  color: var(--text) !important;
}
.navbar .nav-link:hover{
  color: var(--primary) !important;
}

/* Cards */
.app-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: 16px;
}
.app-card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--stroke);
}
.app-hover{
  transition: border-color .25s ease, box-shadow .25s ease;
}
.app-hover:hover{
  border-color: var(--stroke2);
  box-shadow: 0 24px 80px rgba(0,0,0,.62);
}

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border: 0;
  box-shadow: 0 10px 30px rgba(77,163,255,.22);
}
.btn-primary:hover{ filter: brightness(1.06); }

.btn-outline-secondary{
  border-color: var(--stroke2);
  color: var(--text);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

.btn-outline-primary{
  border-color: rgba(77,163,255,.55) !important;
  color: var(--text) !important;
}
.btn-outline-primary:hover{
  background: rgba(77,163,255,.12) !important;
}

/* Form */
.form-control, .form-select, textarea{
  background: rgba(255,255,255,.08) !important;
  color: #307CBC !important;
  border: 1px solid var(--stroke2) !important;
  border-radius: 12px !important;
}
.form-control:focus, .form-select:focus, textarea:focus{
  box-shadow: 0 0 0 .2rem rgba(77,163,255,.22) !important;
  border-color: rgba(77,163,255,.55) !important;
}

/* Table */
.table{
  color: var(--text);
}
.table thead th{
  color: rgba(234,240,255,.85);
  border-bottom-color: var(--stroke) !important;
}
.table td, .table th{
  border-top-color: rgba(255,255,255,.06) !important;
}
.table-hover tbody tr:hover{
  background: rgba(255,255,255,.05) !important;
}

/* Animations */
.fade-enter{
  animation: fadeEnter .3s ease both;
}
@keyframes fadeEnter{
  from{ opacity:0; transform: translateY(5px); }
  to{ opacity:1; transform: translateY(0); }
}

.panel{
  display:none;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.panel.show{
  display:block;
  opacity:1;
  transform: translateY(0);
}

/* Helpers */
.text-muted{ color: var(--muted) !important; }

.color-chip{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 6px, rgba(255,255,255,.02) 6px, rgba(255,255,255,.02) 12px);
}

.kpi{
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .4px;
}
.kpi small{
  font-weight: 500;
  color: var(--muted);
  font-size: .9rem;
}

.badge-soft{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.9);
}

/* ========= 移动端适配 ========= */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .app-card {
    border-radius: 12px;
    padding: 0.75rem !important;
  }
  .app-card .card-header {
    padding: 0.5rem 0.75rem;
  }
  /* 表格内字体略小，但保证可读 */
  .table {
    font-size: 0.8rem;
  }
  .table td, .table th {
    padding: 0.5rem 0.4rem;
    vertical-align: middle;
  }
  /* 操作按钮组自动换行，增大点击区域 */
  .btn-group-mobile {
    gap: 6px;
  }
  .btn-group-mobile .btn {
    padding: 6px 8px;
    font-size: 0.7rem;
    min-height: 36px;
  }
  .category-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  /* 模态框适配小屏 */
  .modal-dialog {
    margin: 0.5rem;
  }
  .modal-content {
    border-radius: 20px;
  }
  .modal-body {
    padding: 1rem;
  }
  /* 导航栏文字可能隐藏用户名，但保留图标 */
  .navbar .navbar-brand img {
    width: 28px;
    height: 28px;
  }
  .navbar .navbar-brand {
    font-size: 1.1rem;
  }
  .btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }
}

/* 极小屏（<400px）进一步压缩 */
@media (max-width: 480px) {
  .table {
    font-size: 0.7rem;
  }
  .btn-group-mobile .btn {
    padding: 4px 6px;
    font-size: 0.65rem;
  }
  .category-tag {
    font-size: 0.6rem;
  }
  .navbar .navbar-brand {
    font-size: 1rem;
  }
}