/* ===================================================================
 * MrDoc Portal Center — Design Token & Theme System
 * 企业级 SaaS 蓝色主题 — Design Tokens
 * ===================================================================
 * Primary:     #1677FF
 * Hover:       #4096FF
 * Active:      #0958D9
 * Nav:         #0F4C81 / linear-gradient(90deg, #0F4C81 0%, #1565C0 100%)
 * Login BG:    linear-gradient(135deg, #0F4C81 0%, #1565C0 45%, #42A5F5 100%)
 * =================================================================== */

:root {
  /* ---- Brand Primary ---- */
  --primary: #1677FF;
  --primary-hover: #4096FF;
  --primary-active: #0958D9;

  /* ---- Semantic Colors ---- */
  --success: #52C41A;
  --warning: #FAAD14;
  --danger: #FF4D4F;
  --info: #1677FF;

  /* ---- Neutral / Background ---- */
  --page-bg: #F5F7FA;
  --card-bg: #FFFFFF;
  --border-color: #E5EAF3;
  --border-light: #F0F2F5;

  /* ---- Text ---- */
  --text-primary: #1F2937;
  --text-secondary: #667085;
  --text-tertiary: #9CA3AF;
  --text-placeholder: #B0B7C3;
  --text-disabled: #C5CAD5;

  /* ---- Navigation ---- */
  --nav-bg: #0F4C81;
  --nav-bg-start: #0F4C81;
  --nav-bg-end: #1565C0;
  --nav-text: #FFFFFF;
  --nav-hover-bg: rgba(255,255,255,.12);
  --nav-active-bg: rgba(255,255,255,.18);

  /* ---- Buttons ---- */
  --btn-radius: 8px;
  --btn-primary-bg: #1677FF;
  --btn-primary-hover: #4096FF;
  --btn-primary-active: #0958D9;
  --btn-default-border: #D0D5DD;
  --btn-default-color: #1F2937;
  --btn-default-hover-border: #1677FF;
  --btn-default-hover-color: #1677FF;

  /* ---- Sidebar / Menu ---- */
  --menu-hover-bg: #EAF4FF;
  --menu-selected-bg: #D6E9FF;
  --menu-selected-color: #1677FF;
  --menu-text: #374151;
  --menu-icon-color: #667085;

  /* ---- Cards ---- */
  --card-radius: 8px;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --card-shadow-hover: 0 4px 12px rgba(15,76,129,.10);
  --card-header-border: #F0F2F5;

  /* ---- Form ---- */
  --input-height: 44px;
  --input-radius: 6px;
  --input-border: #D0D5DD;
  --input-focus-border: #1677FF;
  --input-focus-shadow: 0 0 0 2px rgba(22,119,255,.15);
  --input-bg: #FFFFFF;
  --input-disabled-bg: #F5F7FA;

  /* ---- Badge ---- */
  --badge-radius: 10px;
  --badge-green-bg: #F0FFF0;
  --badge-green-color: #52C41A;
  --badge-blue-bg: #EAF4FF;
  --badge-blue-color: #1677FF;
  --badge-orange-bg: #FFF7E6;
  --badge-orange-color: #FAAD14;
  --badge-gray-bg: #F5F7FA;
  --badge-gray-color: #667085;
  --badge-red-bg: #FFF1F0;
  --badge-red-color: #FF4D4F;

  /* ---- Table ---- */
  --table-header-bg: #F8F9FB;
  --table-header-color: #374151;
  --table-border: #E5EAF3;
  --table-row-hover: #F8F9FB;
  --table-stripe-bg: #FAFBFC;

  /* ---- Dialog / Modal ---- */
  --modal-radius: 12px;
  --modal-shadow: 0 20px 60px rgba(15,76,129,.15);

  /* ---- Animation ---- */
  --transition-fast: all .15s ease;
  --transition-base: all .2s ease;
  --transition-slow: all .3s ease;

  /* ---- Font ---- */
  --font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
}

/* ===================================================================
 * Login Pages — 科技蓝渐变背景
 * =================================================================== */
.login-page {
  background: linear-gradient(135deg, #0C3E6B 0%, #1565C0 35%, #E8F0FE 70%, #FFFFFF 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.login-page::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(66,165,245,.12) 0%, transparent 70%);
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(66,165,245,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* 统一认证页面卡片样式：login.html 使用 .login-card，其他认证页使用 .wrapper .card */
.login-card,
.wrapper .card {
  width: 420px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(15,76,129,.10), 0 2px 8px rgba(15,76,129,.04);
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.20);
}

/* ===================================================================
 * Navigation — 深蓝色渐变导航栏
 * =================================================================== */
.nav-header {
  background: linear-gradient(90deg, #0F4C81 0%, #1565C0 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15,76,129,.15);
}

/* ===================================================================
 * Primary Button
 * =================================================================== */
.btn-primary,
.layui-btn-primary-custom {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  border-radius: var(--btn-radius);
  transition: var(--transition-base);
}
.btn-primary:hover,
.layui-btn-primary-custom:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
}
.btn-primary:active,
.layui-btn-primary-custom:active {
  background: var(--btn-primary-active) !important;
  border-color: var(--btn-primary-active) !important;
}

/* ===================================================================
 * Cards
 * =================================================================== */
.theme-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: var(--transition-base);
}
.theme-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* ===================================================================
 * Message / Alert styles
 * =================================================================== */
.msg-box {
  margin-top: 12px; padding: 8px 12px; border-radius: 6px;
  font-size: 13px; display: none;
}
.msg-box.error { display: block; background: #FFF1F0; color: #FF4D4F; border: 1px solid #FFCCC7; }
.msg-box.success { display: block; background: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F; }
.msg-box.info { display: block; background: #E6F4FF; color: #1677FF; border: 1px solid #91CAFF; }
.msg-box.warning { display: block; background: #FFFBE6; color: #FAAD14; border: 1px solid #FFE58F; }

/* ===================================================================
 * Badge / Tag
 * =================================================================== */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--badge-radius);
  font-size: 12px; font-weight: 500; line-height: 1.6;
}
.badge-green { background: var(--badge-green-bg); color: var(--badge-green-color); }
.badge-blue { background: var(--badge-blue-bg); color: var(--badge-blue-color); }
.badge-orange { background: var(--badge-orange-bg); color: var(--badge-orange-color); }
.badge-gray { background: var(--badge-gray-bg); color: var(--badge-gray-color); }
.badge-red { background: var(--badge-red-bg); color: var(--badge-red-color); }

/* ===================================================================
 * Days remaining (urgency coloring)
 * =================================================================== */
.days-urgent { color: #FF4D4F; }
.days-warning { color: #FAAD14; }
.days-safe { color: #52C41A; }

/* ===================================================================
 * Empty state
 * =================================================================== */
.empty-state { text-align: center; padding: 48px 0; color: var(--text-tertiary); }
.empty-state .icon { font-size: 32px; display: block; margin-bottom: 8px; }

/* ===================================================================
 * Portal reusable styles
 * =================================================================== */
.portal-wrapper .main {
  margin-top: 56px; padding: 24px;
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.page-title { font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.page-desc { font-size: var(--font-size-base); color: var(--text-secondary); margin-bottom: 20px; }
.footer-note { text-align: center; padding: 20px 0 40px; font-size: 12px; color: var(--text-tertiary); }

/* ===================================================================
 * Modal / Dialog
 * =================================================================== */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45); z-index: 2000;
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--card-bg); border-radius: var(--modal-radius);
  width: 420px; max-width: 90vw;
  box-shadow: var(--modal-shadow); overflow: hidden;
}
.modal-header {
  padding: 18px 24px 14px; font-size: 16px; font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--card-header-border);
}
.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 12px 24px 20px; text-align: right;
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ===================================================================
 * Layui Component Overrides
 * =================================================================== */

/* Buttons */
.layui-btn {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  border-radius: var(--btn-radius);
  transition: var(--transition-base);
}
.layui-btn:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.layui-btn:active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
}
.layui-btn-primary {
  background-color: var(--card-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}
.layui-btn-primary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.layui-btn-normal {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.layui-btn-warm {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.layui-btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}

/* Input / Form */
.layui-input, .layui-select, .layui-textarea {
  border-color: var(--input-border);
  border-radius: var(--input-radius);
  transition: var(--transition-base);
}
.layui-input:focus, .layui-select:focus, .layui-textarea:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: var(--input-focus-shadow);
}
.layui-form-label {
  color: var(--text-primary);
}

/* Table */
.layui-table {
  color: var(--text-primary);
}
.layui-table thead tr {
  background-color: var(--table-header-bg);
}
.layui-table thead th {
  color: var(--table-header-color);
  font-weight: 600;
  border-color: var(--table-border);
}
.layui-table td, .layui-table th {
  border-color: var(--table-border);
}
.layui-table-hover, .layui-table-click {
  background-color: var(--table-row-hover) !important;
}
.layui-table-striped tbody tr:nth-child(even) {
  background-color: var(--table-stripe-bg);
}

/* Card */
.layui-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.layui-card-header {
  color: var(--text-primary);
  border-color: var(--card-header-border);
}
.layui-card-body {
  color: var(--text-secondary);
}

/* Badge */
.layui-badge {
  border-radius: var(--badge-radius);
}
.layui-badge-rim {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

/* Nav / Sidebar */
.layui-nav {
  background: transparent;
}
.layui-nav-tree {
  background: var(--card-bg);
}
.layui-nav-tree .layui-nav-item > a {
  color: var(--menu-text);
  transition: var(--transition-base);
}
.layui-nav-tree .layui-nav-item > a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-selected-color);
}
.layui-nav-tree .layui-nav-item.layui-this > a,
.layui-nav-tree .layui-nav-item.layui-nav-itemed > a {
  background: var(--menu-selected-bg);
  color: var(--menu-selected-color);
}
.layui-nav-tree .layui-nav-child a {
  color: var(--text-secondary);
  padding-left: 48px;
}
.layui-nav-tree .layui-nav-child a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-selected-color);
}
.layui-nav-tree .layui-nav-more {
  display: none;
}
.layui-nav .layui-nav-item a {
  color: var(--menu-text);
}

/* Layer / Dialog */
.layui-layer {
  border-radius: var(--modal-radius) !important;
}
.layui-layer-title {
  color: var(--text-primary);
  border-color: var(--card-header-border);
}
.layui-layer-btn a {
  border-radius: var(--btn-radius);
}

/* Tab */
.layui-tab-title li {
  color: var(--text-secondary);
  transition: var(--transition-base);
}
.layui-tab-title li.layui-this {
  color: var(--primary);
}
.layui-tab-title li:hover {
  color: var(--primary);
}
.layui-tab-title .layui-this:after {
  border-bottom-color: var(--primary);
}
.layui-tab-brief > .layui-tab-title .layui-this {
  color: var(--primary);
}

/* Breadcrumb */
.layui-breadcrumb a {
  color: var(--primary) !important;
}
.layui-breadcrumb a:hover {
  color: var(--primary-hover) !important;
}
.layui-breadcrumb cite {
  color: var(--text-secondary);
}

/* Pagination */
.layui-laypage a, .layui-laypage span {
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: var(--primary);
}
.layui-laypage a:hover {
  color: var(--primary);
}
.layui-laypage .layui-laypage-spr {
  color: var(--text-secondary);
}

/* Rate */
.layui-rate li i {
  color: var(--warning);
}

/* Progress */
.layui-progress-bar {
  background-color: var(--primary);
}

/* Timeline */
.layui-timeline-axis {
  color: var(--primary);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Tag */
.layui-tag {
  border-radius: var(--badge-radius);
}
.layui-tag-primary {
  background: var(--badge-blue-bg);
  color: var(--badge-blue-color);
}
.layui-tag-green {
  background: var(--badge-green-bg);
  color: var(--badge-green-color);
}
.layui-tag-orange {
  background: var(--badge-orange-bg);
  color: var(--badge-orange-color);
}