/**
 * Vuexy 统一主题样式
 * 覆盖所有工具页面的样式，统一为 Vuexy 风格
 * 在 main.ejs 中全局引入，无需修改各工具页面
 */

/* ============================================================
   CSS 变量 - Vuexy 设计令牌
   ============================================================ */
:root {
  --vx-primary:        #7367f0;
  --vx-primary-dark:   #5e50ee;
  --vx-primary-light:  rgba(115, 103, 240, 0.12);
  --vx-primary-shadow: rgba(115, 103, 240, 0.35);
  --vx-success:        #28c76f;
  --vx-success-light:  rgba(40, 199, 111, 0.12);
  --vx-warning:        #ff9f43;
  --vx-warning-light:  rgba(255, 159, 67, 0.12);
  --vx-danger:         #ea5455;
  --vx-danger-light:   rgba(234, 84, 85, 0.12);
  --vx-info:           #00cfe8;
  --vx-info-light:     rgba(0, 207, 232, 0.12);

  --vx-body-bg:        #f4f5fb;
  --vx-card-bg:        #ffffff;
  --vx-border:         #dbdade;
  --vx-border-light:   #f0eff5;

  --vx-text-primary:   #2f2b3d;
  --vx-text-secondary: #6e6b7b;
  --vx-text-muted:     #a5a3ae;

  --vx-radius-sm:      6px;
  --vx-radius:         10px;
  --vx-radius-lg:      12px;
  --vx-radius-xl:      16px;

  --vx-shadow-sm:      0 2px 6px rgba(47, 43, 61, 0.08);
  --vx-shadow:         0 4px 16px rgba(47, 43, 61, 0.10);
  --vx-shadow-lg:      0 8px 24px rgba(47, 43, 61, 0.14);
}

/* ============================================================
   全局页面背景
   ============================================================ */
body {
  background-color: var(--vx-body-bg) !important;
  color: var(--vx-text-primary);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   主内容区背景
   ============================================================ */
.main-content {
  background-color: var(--vx-body-bg);
}

/* ============================================================
   tool-page-style.css 覆盖
   适用于：base64, url-encoder, unicode-converter, unit-converter,
           password-generator, password-strength, hash-generator,
           timestamp, qr-scanner 等使用 tool-page-style.css 的页面
   ============================================================ */

/* 页面容器 */
.tool-page-container {
  padding: 1.5rem !important;
  background: var(--vx-body-bg) !important;
  min-height: 100%;
}

/* 页头卡片 */
.tool-page-header {
  background: var(--vx-card-bg) !important;
  border-radius: var(--vx-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: var(--vx-shadow-sm) !important;
  border: none !important;
}



.tool-page-title {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* 页头图标 */
.tool-page-icon {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, var(--vx-primary) 0%, #9e95f5 100%) !important;
  border-radius: var(--vx-radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--vx-primary-shadow) !important;
  flex-shrink: 0 !important;
}

/* 页头标题 */
.page-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
  margin: 0 0 0.15rem !important;
}

.page-subtitle {
  color: var(--vx-text-muted) !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
}

/* 工具卡片 */
.tool-card {
  background: var(--vx-card-bg) !important;
  border-radius: var(--vx-radius-lg) !important;
  box-shadow: var(--vx-shadow-sm) !important;
  border: none !important;
  overflow: hidden !important;
  margin-bottom: 1.5rem !important;
  transition: box-shadow 0.25s ease, transform 0.2s ease !important;
}

.tool-card:hover {
  box-shadow: var(--vx-shadow) !important;
  transform: translateY(-2px) !important;
}

/* 工具卡片头部 */
.tool-card-header {
  background: var(--vx-card-bg) !important;
  border-bottom: 1px solid var(--vx-border-light) !important;
  padding: 1rem 1.5rem !important;
}



.tool-card-header h5,
.tool-card-header h6 {
  color: var(--vx-text-primary) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
}

.tool-card-header > i {
  color: var(--vx-primary) !important;
  margin-right: 0.5rem !important;
}

.tool-card .card-body {
  padding: 1.5rem !important;
}

/* ============================================================
   uuid-generator / color-converter 使用的 title-card / icon-wrapper
   ============================================================ */
.title-card {
  background: var(--vx-card-bg) !important;
  border-radius: var(--vx-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: var(--vx-shadow-sm) !important;
  border: none !important;
}



.title-card h2 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
  margin: 0 0 0.15rem !important;
}

.icon-wrapper {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, var(--vx-primary) 0%, #9e95f5 100%) !important;
  border-radius: var(--vx-radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--vx-primary-shadow) !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   qr-generator / id-converter 使用的 container-fluid 页头
   ============================================================ */
.page-header {
  background: var(--vx-card-bg);
  border-radius: var(--vx-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--vx-shadow-sm);
}



.page-header .page-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
  margin: 0 0 0.15rem !important;
}

.page-header .page-description {
  font-size: 0.875rem !important;
  color: var(--vx-text-muted) !important;
  margin: 0 !important;
}

/* ============================================================
   通用 Bootstrap card 覆盖（用于各页面内嵌的 .card）
   ============================================================ */
.card {
  border-radius: var(--vx-radius-lg) !important;
  border: none !important;
  box-shadow: var(--vx-shadow-sm) !important;
  background: var(--vx-card-bg) !important;
  transition: box-shadow 0.25s ease !important;
}

.card:hover {
  box-shadow: var(--vx-shadow) !important;
}

.card-header {
  background: var(--vx-card-bg) !important;
  border-bottom: 1px solid var(--vx-border-light) !important;
  padding: 0.875rem 1.25rem !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
  border-radius: var(--vx-radius-lg) var(--vx-radius-lg) 0 0 !important;
}

/* 覆盖 bg-light / bg-info 等 card-header 颜色 */
.card-header.bg-light,
.card-header.bg-secondary {
  background: #f8f7fd !important;
  color: var(--vx-text-primary) !important;
}

.card-header.bg-info {
  background: linear-gradient(135deg, var(--vx-info), #33d9f0) !important;
  color: #fff !important;
  border-bottom: none !important;
}

.card-header.bg-info h5,
.card-header.bg-info h6 {
  color: #fff !important;
}

.card-body {
  padding: 1.25rem !important;
}

/* ============================================================
   json-formatter 专用容器
   ============================================================ */
.json-formatter-container {
  background: var(--vx-body-bg) !important;
}

.json-toolbar {
  background: var(--vx-card-bg) !important;
  border-bottom: 1px solid var(--vx-border-light) !important;
  box-shadow: var(--vx-shadow-sm) !important;
}

.json-toolbar h5 {
  color: var(--vx-primary) !important;
  font-weight: 600 !important;
}

.json-panel {
  background: var(--vx-card-bg) !important;
  border-radius: var(--vx-radius-lg) !important;
  box-shadow: var(--vx-shadow-sm) !important;
  border: none !important;
}

.panel-header {
  background: var(--vx-card-bg) !important;
  border-bottom: 1px solid var(--vx-border-light) !important;
  padding: 0.875rem 1.25rem !important;
}

.panel-header .form-label {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
}

.jsoneditor-menu {
  background-color: var(--vx-primary) !important;
  border-bottom: 1px solid var(--vx-border) !important;
}

/* ============================================================
   表单元素统一风格
   ============================================================ */
.form-control,
.form-select {
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-sm) !important;
  color: var(--vx-text-primary) !important;
  background-color: #fff !important;
  font-size: 0.875rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--vx-text-muted) !important;
}

.form-label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--vx-text-primary) !important;
  margin-bottom: 0.4rem !important;
}

.form-text {
  font-size: 0.775rem !important;
  color: var(--vx-text-muted) !important;
}

/* input-group */
.input-group-text {
  background: #f8f7fd !important;
  border: 1px solid var(--vx-border) !important;
  color: var(--vx-primary) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

/* select option 下拉项样式 */
.form-select option,
.custom-select option,
.bc-select option {
  background-color: #ffffff !important;
  color: var(--vx-text-primary) !important;
  font-size: 0.875rem !important;
  padding: 6px 12px !important;
}

.form-select option:hover,
.custom-select option:hover,
.bc-select option:hover {
  background-color: var(--vx-primary-light) !important;
  color: var(--vx-primary) !important;
}

.form-select option:checked,
.custom-select option:checked,
.bc-select option:checked {
  background-color: var(--vx-primary) !important;
  color: #ffffff !important;
}

/* bc-select（barcode-generator 专用）与 form-select 统一风格 */
.bc-select {
  display: block !important;
  width: 100% !important;
  padding: 0.4375rem 2.25rem 0.4375rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--vx-text-primary) !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237367f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-sm) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  cursor: pointer !important;
}

.bc-select:focus {
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
  outline: none !important;
}

/* textarea */
textarea.form-control {
  resize: vertical !important;
}

/* range */
.form-range::-webkit-slider-thumb {
  background: var(--vx-primary) !important;
}
.form-range::-moz-range-thumb {
  background: var(--vx-primary) !important;
}

/* checkbox / radio / switch */
.form-check-input:checked {
  background-color: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
  border-color: var(--vx-primary) !important;
}

/* ============================================================
   按钮统一风格
   ============================================================ */
.btn {
  border-radius: var(--vx-radius-sm) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

/* Primary */
.btn-primary {
  background: linear-gradient(72deg, var(--vx-primary) 22%, rgba(115,103,240,.8) 100%) !important;
  border-color: var(--vx-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px var(--vx-primary-shadow) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(72deg, var(--vx-primary-dark) 22%, var(--vx-primary) 100%) !important;
  border-color: var(--vx-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px var(--vx-primary-shadow) !important;
}

/* Outline Primary */
.btn-outline-primary {
  color: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary {
  background: var(--vx-primary) !important;
  border-color: var(--vx-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px var(--vx-primary-shadow) !important;
}

/* Success */
.btn-success {
  background: linear-gradient(72deg, var(--vx-success) 22%, rgba(40,199,111,.8) 100%) !important;
  border-color: var(--vx-success) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(40,199,111,.35) !important;
}

.btn-success:hover {
  background: linear-gradient(72deg, #24b263 22%, var(--vx-success) 100%) !important;
  transform: translateY(-1px) !important;
}

/* Outline Success */
.btn-outline-success {
  color: var(--vx-success) !important;
  border-color: var(--vx-success) !important;
  background: transparent !important;
}

.btn-outline-success:hover {
  background: var(--vx-success) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(40,199,111,.35) !important;
}

/* Secondary */
.btn-outline-secondary {
  color: var(--vx-text-secondary) !important;
  border-color: var(--vx-border) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background: #f8f7fd !important;
  border-color: var(--vx-primary) !important;
  color: var(--vx-primary) !important;
}

/* Info */
.btn-outline-info {
  color: var(--vx-info) !important;
  border-color: var(--vx-info) !important;
}

.btn-outline-info:hover {
  background: var(--vx-info) !important;
  color: #fff !important;
}

/* Danger */
.btn-danger {
  background: linear-gradient(72deg, var(--vx-danger) 22%, rgba(234,84,85,.8) 100%) !important;
  border-color: var(--vx-danger) !important;
  color: #fff !important;
}

/* sm 按钮 */
.btn-sm {
  padding: 0.35rem 0.75rem !important;
  font-size: 0.8rem !important;
}

/* lg 按钮 */
.btn-lg {
  padding: 0.65rem 1.5rem !important;
  font-size: 1rem !important;
}

/* ============================================================
   Badge 统一
   ============================================================ */
.badge {
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

.badge.bg-primary { background-color: var(--vx-primary) !important; }
.badge.bg-success { background-color: var(--vx-success) !important; }
.badge.bg-warning { background-color: var(--vx-warning) !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--vx-danger)  !important; }
.badge.bg-info    { background-color: var(--vx-info)    !important; }
.badge.bg-secondary { background-color: #a5a3ae !important; }

/* ============================================================
   Alert 统一
   ============================================================ */
.alert {
  border-radius: var(--vx-radius) !important;
  border: none !important;
  font-size: 0.875rem !important;
}

.alert-info {
  background: var(--vx-info-light) !important;
  color: #006d7a !important;
  border-left: 4px solid var(--vx-info) !important;
}

.alert-success {
  background: var(--vx-success-light) !important;
  color: #1a7a47 !important;
  border-left: 4px solid var(--vx-success) !important;
}

.alert-warning {
  background: var(--vx-warning-light) !important;
  color: #7a4a00 !important;
  border-left: 4px solid var(--vx-warning) !important;
}

.alert-danger {
  background: var(--vx-danger-light) !important;
  color: #7a1a1a !important;
  border-left: 4px solid var(--vx-danger) !important;
}

/* ============================================================
   Progress Bar
   ============================================================ */
.progress {
  border-radius: 20px !important;
  background: #f0eff5 !important;
  height: 8px !important;
  overflow: hidden !important;
}

.progress-bar {
  border-radius: 20px !important;
  background: linear-gradient(90deg, var(--vx-primary), #9e95f5) !important;
  transition: width 0.4s ease !important;
}

/* ============================================================
   Table 统一
   ============================================================ */
.table {
  color: var(--vx-text-primary) !important;
  font-size: 0.875rem !important;
}

.table thead th {
  background: #f8f7fd !important;
  color: var(--vx-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--vx-border-light) !important;
  padding: 0.75rem 1rem !important;
}

.table td {
  border-bottom: 1px solid var(--vx-border-light) !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #faf9ff !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--vx-primary-light) !important;
}

/* ============================================================
   Nav Tabs 统一
   ============================================================ */
.nav-tabs {
  border-bottom: 2px solid var(--vx-border-light) !important;
}

.nav-tabs .nav-link {
  color: var(--vx-text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  transition: color 0.2s, border-color 0.2s !important;
}

.nav-tabs .nav-link:hover {
  color: var(--vx-primary) !important;
  border-bottom-color: var(--vx-primary) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active {
  color: var(--vx-primary) !important;
  border-bottom: 2px solid var(--vx-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* ============================================================
   Accordion 统一
   ============================================================ */
.accordion-item {
  border: 1px solid var(--vx-border-light) !important;
  border-radius: var(--vx-radius) !important;
  margin-bottom: 0.5rem !important;
  overflow: hidden !important;
}

.accordion-button {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--vx-text-primary) !important;
  background: var(--vx-card-bg) !important;
}

.accordion-button:not(.collapsed) {
  color: var(--vx-primary) !important;
  background: var(--vx-primary-light) !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: var(--vx-border-light) !important;
}

.accordion-button::after {
  filter: none !important;
}

.accordion-button:not(.collapsed)::after {
  filter: none !important;
}

/* ============================================================
   List Group 统一
   ============================================================ */
.list-group-item {
  border-color: var(--vx-border-light) !important;
  color: var(--vx-text-primary) !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
}

/* ============================================================
   uuid-generator 专用样式覆盖
   ============================================================ */
.custom-select {
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-sm) !important;
  background-color: #fff !important;
  color: var(--vx-text-primary) !important;
  font-size: 0.875rem !important;
}

.custom-select:focus {
  border-color: var(--vx-primary) !important;
  box-shadow: 0 0 0 3px var(--vx-primary-light) !important;
}

.custom-textarea {
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-sm) !important;
  background-color: #f8f7fd !important;
  color: var(--vx-text-primary) !important;
  font-size: 0.875rem !important;
}

.btn-copy,
.btn-clear {
  background: #fff !important;
  border: 1.5px solid var(--vx-border) !important;
  color: var(--vx-primary) !important;
  border-radius: var(--vx-radius-sm) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.btn-copy:hover,
.btn-clear:hover {
  background: var(--vx-primary-light) !important;
  border-color: var(--vx-primary) !important;
  color: var(--vx-primary) !important;
}

/* ============================================================
   color-converter 专用样式覆盖
   ============================================================ */
.color-format-item {
  background: #f8f7fd !important;
  border: 1px solid var(--vx-border-light) !important;
  border-radius: var(--vx-radius) !important;
  transition: box-shadow 0.2s !important;
}

.color-format-item:hover {
  background: #fff !important;
  box-shadow: var(--vx-shadow-sm) !important;
}

.format-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--vx-text-primary) !important;
}

.btn-copy-color {
  background: var(--vx-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0 !important;
}

.btn-copy-color:hover {
  background: var(--vx-primary-dark) !important;
  color: #fff !important;
}

.color-preview {
  border-radius: var(--vx-radius-lg) !important;
  border: 2px solid var(--vx-border-light) !important;
  box-shadow: var(--vx-shadow) !important;
}

.color-picker {
  border: 1px solid var(--vx-border) !important;
  border-radius: var(--vx-radius-sm) !important;
}

/* ============================================================
   qr-generator 专用覆盖
   ============================================================ */
.qr-placeholder {
  background: #f8f7fd !important;
  border: 2px dashed #e0ddf5 !important;
  border-radius: var(--vx-radius-lg) !important;
}

/* ============================================================
   id-converter 专用覆盖
   ============================================================ */
.container-fluid .card.shadow-sm {
  box-shadow: var(--vx-shadow-sm) !important;
}

/* ============================================================
   统计信息块
   ============================================================ */
.bg-light {
  background: #f8f7fd !important;
}

/* ============================================================
   Scrollbar 美化
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f0eff5;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c5c2e8;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vx-primary);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
  .tool-page-container {
    padding: 1rem !important;
  }

  .tool-page-header,
  .title-card,
  .page-header {
    padding: 1rem 1.25rem !important;
  }

  .tool-page-title {
    gap: 0.75rem !important;
  }

  .tool-page-icon,
  .icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }

  .page-title,
  .title-card h2 {
    font-size: 1.1rem !important;
  }

  .tool-card .card-body,
  .card-body {
    padding: 1rem !important;
  }

  .tool-card-header {
    padding: 0.875rem 1rem !important;
  }
}

@media (max-width: 576px) {
  .tool-page-title {
    flex-direction: row !important;
    align-items: center !important;
  }
}