/*===============================================================
  智盈 - 智能前台服务器端管理系统 v1.0
  AI 科技风格后台主题 (覆盖 Django 默认样式)
  梅州市智慧启点科技有限公司 版权所有
=================================================================*/

/* ──────────── CSS Variables ──────────── */
:root {
  --ai-primary: #00d4ff;
  --ai-primary-dark: #0099cc;
  --ai-primary-glow: rgba(0, 212, 255, 0.15);
  --ai-secondary: #6366f1;
  --ai-accent: #a78bfa;
  --ai-bg: #080c18;
  --ai-bg-surface: #0f1729;
  --ai-bg-card: rgba(15, 23, 41, 0.85);
  --ai-bg-elevated: #1a2236;
  --ai-border: rgba(0, 212, 255, 0.12);
  --ai-border-active: rgba(0, 212, 255, 0.35);
  --ai-text: #e2e8f0;
  --ai-text-secondary: #94a3b8;
  --ai-text-muted: #64748b;
  --ai-success: #22c55e;
  --ai-warning: #f59e0b;
  --ai-danger: #ef4444;
  --ai-info: #3b82f6;
  --ai-gradient: linear-gradient(135deg, #00d4ff 0%, #6366f1 100%);
  --ai-glow-blue: 0 0 20px rgba(0, 212, 255, 0.2);
  --ai-glow-purple: 0 0 20px rgba(99, 102, 241, 0.2);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: 0.25s ease;
}

/* ──────────── Global Reset ──────────── */
body {
  background: var(--ai-bg) !important;
  color: var(--ai-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* ──────────── Background Grid ──────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  top: -20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* ──────────── Global Link & Text ──────────── */
a, a:link, a:visited {
  color: var(--ai-primary) !important;
  transition: color var(--transition);
}
a:hover { color: var(--ai-accent) !important; }

/* ──────────── Header / Navbar ──────────── */
#header {
  background: rgba(8, 12, 24, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--ai-border) !important;
  color: var(--ai-text) !important;
  padding: 0.6rem 1.5rem !important;
  height: auto !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

#header #branding h1 {
  background: var(--ai-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#branding h1 a,
#branding h1 a:link,
#branding h1 a:visited {
  background: var(--ai-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
}

/* Logo image in header */
.header-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin-right: 8px;
  vertical-align: middle;
}

#user-tools, #user-tools a {
  color: var(--ai-text-secondary) !important;
  font-size: 0.9rem !important;
}
#user-tools a:hover { color: var(--ai-primary) !important; }

/* ──────────── Breadcrumbs ──────────── */
#breadcrumbs, .breadcrumbs {
  background: var(--ai-bg-surface) !important;
  border-bottom: 1px solid var(--ai-border) !important;
  color: var(--ai-text-secondary) !important;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.85rem !important;
}
#breadcrumbs a { color: var(--ai-primary) !important; }

/* ──────────── Content ──────────── */
#content {
  padding: 1.5rem !important;
}
#content h2 {
  color: var(--ai-text) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.module {
  background: var(--ai-bg-card) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.module h2, .module caption {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(99, 102, 241, 0.08)) !important;
  color: var(--ai-text) !important;
  border-bottom: 1px solid var(--ai-border) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
}

.module table {
  width: 100%;
}

.module table th {
  background: rgba(0, 212, 255, 0.05) !important;
  color: var(--ai-primary) !important;
  border-bottom: 1px solid var(--ai-border) !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.module table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 0.6rem 0.75rem !important;
  color: var(--ai-text-secondary) !important;
  font-size: 0.9rem !important;
}

.module table tr:hover td {
  background: rgba(0, 212, 255, 0.03) !important;
}

.module table tr:last-child td {
  border-bottom: none !important;
}

/* ──────────── Buttons ──────────── */
.button, input[type="submit"], input[type="button"],
.submit-row input, .object-tools a, button[type="submit"] {
  background: var(--ai-bg-elevated) !important;
  border: 1px solid var(--ai-border-active) !important;
  color: var(--ai-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5rem 1.2rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.button:hover, input[type="submit"]:hover, .object-tools a:hover {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: var(--ai-primary) !important;
  color: var(--ai-primary) !important;
  box-shadow: var(--ai-glow-blue) !important;
}

.button.default, input[type="submit"].default,
.submit-row input.default {
  background: var(--ai-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25) !important;
}
.button.default:hover, input[type="submit"].default:hover {
  box-shadow: 0 6px 25px rgba(0, 212, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.object-tools {
  margin-bottom: 0.8rem !important;
}
.object-tools li {
  margin-left: 0.5rem !important;
}
.object-tools .addlink {
  background: var(--ai-gradient) !important;
  color: #fff !important;
  border: none !important;
  padding-left: 2rem !important;
  background-image: none !important;
}

.deletelink, a.deletelink {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: var(--ai-danger) !important;
}
.deletelink:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important;
}

/* ──────────── Form Elements ──────────── */
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], textarea, select,
.form-row input, .form-row textarea, .form-row select {
  background: var(--ai-bg-surface) !important;
  border: 1px solid var(--ai-border) !important;
  color: var(--ai-text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.9rem !important;
  transition: all var(--transition) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ai-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12) !important;
  outline: none !important;
}

.form-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 0.75rem 0 !important;
}

label {
  color: var(--ai-text-secondary) !important;
  font-weight: 500 !important;
}

.help, p.help {
  color: var(--ai-text-muted) !important;
  font-size: 0.8rem !important;
}

/* ──────────── Messages / Alerts ──────────── */
.messagelist {
  padding: 0 !important;
  margin-bottom: 1rem !important;
}
.messagelist li {
  border-radius: var(--radius-sm) !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.9rem !important;
}
.messagelist li.success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
  color: var(--ai-success) !important;
}
.messagelist li.warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: var(--ai-warning) !important;
}
.messagelist li.error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: var(--ai-danger) !important;
}
.errornote {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ai-danger) !important;
  font-size: 0.9rem !important;
}

/* ──────────── Pagination ──────────── */
.paginator {
  background: transparent !important;
  border-top: 1px solid var(--ai-border) !important;
  padding: 0.75rem 0 !important;
  color: var(--ai-text-secondary) !important;
  font-size: 0.85rem !important;
}
.paginator a {
  background: var(--ai-bg-elevated) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.3rem 0.7rem !important;
  color: var(--ai-primary) !important;
}
.paginator a:hover {
  background: rgba(0, 212, 255, 0.1) !important;
}
.paginator .this-page {
  background: var(--ai-primary) !important;
  color: #080c18 !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.3rem 0.7rem !important;
}

/* ──────────── Filter Sidebar ──────────── */
#changelist-filter {
  background: var(--ai-bg-card) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem !important;
}
#changelist-filter h2 {
  background: var(--ai-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-size: 0.9rem !important;
}
#changelist-filter a { color: var(--ai-text-secondary) !important; }
#changelist-filter a:hover { color: var(--ai-primary) !important; }
#changelist-filter li.selected a { color: var(--ai-primary) !important; font-weight: 600 !important; }

/* ──────────── Login Page ──────────── */
.login #container {
  background: transparent !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login #header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.login #content {
  background: var(--ai-bg-card) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2.5rem !important;
  max-width: 420px !important;
  width: 100% !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.05);
}

.login #content h1 {
  font-size: 1.5rem !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

/* Login logo area */
.login-logo-area {
  text-align: center;
  margin-bottom: 1.5rem;
}
.login-logo-area img {
  width: 65px;
  height: 65px;
  border-radius: 14px;
  margin-bottom: 0.8rem;
}
.login-logo-area .system-name {
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--ai-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-logo-area .system-version {
  font-size: 0.8rem;
  color: var(--ai-text-muted);
  margin-top: 0.2rem;
}

.login .form-row {
  padding: 0.5rem 0 !important;
  border: none !important;
}

.login .form-row label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ai-text-secondary) !important;
}

.login .form-row input {
  width: 100% !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 0.95rem !important;
}

.login .submit-row {
  text-align: center !important;
  padding: 1rem 0 0 0 !important;
  border: none !important;
  background: transparent !important;
}

.login .submit-row input {
  width: 100% !important;
  padding: 0.7rem !important;
  font-size: 1rem !important;
}

.login .password-reset-link {
  text-align: center !important;
  margin-top: 0.8rem !important;
}

/* ──────────── Dashboard / Index ──────────── */
.dashboard-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: var(--ai-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.app-card {
  background: var(--ai-bg-card);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  position: relative;
}

.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ai-gradient);
  opacity: 0;
  transition: opacity var(--transition);
}

.app-card:hover {
  border-color: var(--ai-border-active);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.app-card:hover::before {
  opacity: 1;
}

.app-card-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--ai-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.app-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ai-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}

.app-card-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.app-card-body {
  padding: 0.6rem 1.2rem 1rem;
}

.app-card-body a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--ai-text-secondary) !important;
  transition: all var(--transition);
  text-decoration: none;
}

.app-card-body a:hover {
  color: var(--ai-primary) !important;
  padding-left: 0.3rem;
}

.app-card-body a.addlink {
  color: var(--ai-primary) !important;
}

/* ──────────── Footer ──────────── */
#footer {
  background: rgba(8, 12, 24, 0.8) !important;
  border-top: 1px solid var(--ai-border) !important;
  padding: 1rem 1.5rem !important;
  text-align: center !important;
  color: var(--ai-text-muted) !important;
  font-size: 0.8rem !important;
}

.copyright-footer {
  text-align: center;
  padding: 1rem 1.5rem;
  color: var(--ai-text-muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--ai-border);
  background: rgba(8, 12, 24, 0.6);
}

.copyright-footer .company {
  color: var(--ai-primary);
  font-weight: 500;
}

/* ──────────── Scrollbar ──────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ai-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.4);
}

/* ──────────── Responsive ──────────── */
@media (max-width: 768px) {
  #header {
    padding: 0.5rem 1rem !important;
  }
  #header #branding h1 {
    font-size: 1rem !important;
  }
  .login #content {
    margin: 1rem !important;
    padding: 1.5rem !important;
  }
  .app-list {
    grid-template-columns: 1fr;
  }
}

/* ──────────── Select2 Dark Override ──────────── */
.select2-container--admin-autocomplete .select2-results__option,
.select2-container--default .select2-results__option {
  background: var(--ai-bg-elevated) !important;
  color: var(--ai-text) !important;
}
.select2-dropdown {
  background: var(--ai-bg-elevated) !important;
  border: 1px solid var(--ai-border-active) !important;
}
.select2-container--admin-autocomplete .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--ai-bg-surface) !important;
  border: 1px solid var(--ai-border) !important;
  color: var(--ai-text) !important;
  border-radius: var(--radius-sm) !important;
}
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
  background: rgba(0, 212, 255, 0.12) !important;
  border: 1px solid var(--ai-border-active) !important;
  color: var(--ai-text) !important;
  border-radius: 4px !important;
}