/**
 * Material Design Purple Theme
 * Primary Color: Purple 500 (#9C27B0)
 * Light: Purple 300 (#BA68C8)
 * Dark: Purple 700 (#7B1FA2)
 * Accent: Purple A200 (#E040FB)
 */

.color-default { color: #9C27B0 !important; }
.label-primary { background-color: #9C27B0; }
.label-role { background-color: #F3E5F5; color: #9C27B0; }

.btn-primary { background-color: #9C27B0; border-color: #9C27B0; }
.btn-primary:hover { background-color: #7B1FA2; border-color: #7B1FA2; }
.btn-primary:active, .btn-primary:focus { background-color: #6A1B9A; border-color: #6A1B9A; }

.we7-btn-group .btn:hover,
.we7-btn-group .btn.active,
.head .we7-btn-group .navbar-left>li.btn:hover {
  background-color: #9C27B0;
  color: #fff;
}

.mask { background: rgba(156, 39, 176, 0.8); }
.mask .cut-btn:hover i,
.mask .cut-show:hover i,
.mask .home-show:hover i,
.mask .stick:hover i { color: #9C27B0; }

.cover-dark .cover-delect:hover,
.site-template .cover-lock .cover-delect:hover,
.system-template .cover-lock .cover-delect:hover { color: #9C27B0; }

.we7-radio-option.checked:before,
.we7-radio-option.we7-check-checked:before { color: #9C27B0; }

.we7-checkbox-option.checked:before,
.we7-checkbox-option.we7-check-checked:before { color: #9C27B0; }

.we7-form input[type=checkbox]:checked+label,
.we7-form input[type=radio]:checked+label { color: #9C27B0; }

.we7-form input[type=radio]:checked+label:after,
.we7-form input[type=radio]:checked+label:hover:after { color: #9C27B0; }

.we7-form input[type=checkbox]:checked+label:after,
.we7-form input[type=checkbox]:checked+label:hover:after { color: #9C27B0; }

.we7-form input[type=checkbox]:checked.we7-toggle {
  box-shadow: inset 0 0 0 15px #9C27B0;
}

.switchOn,
.switchOn:before { background: #9C27B0 !important; }

.we7-input-img .cut:hover { background-color: #9C27B0; }
.we7-input-img .del { background-color: #9C27B0; }

.we7-page-tab li:hover { border-bottom: 3px solid #9C27B0; }
.we7-page-tab li.active { border-bottom: 3px solid #9C27B0; }

a.color-default { color: #9C27B0; }
a.color-default:hover { color: #7B1FA2; }

.panel-primary { border-color: #9C27B0; }
.panel-primary > .panel-heading {
  background-color: #9C27B0;
  border-color: #9C27B0;
  color: #fff;
}

.badge-primary { background-color: #9C27B0; }

.text-primary { color: #9C27B0 !important; }

.bg-primary { background-color: #9C27B0 !important; }

.border-primary { border-color: #9C27B0 !important; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-bottom-color: #9C27B0;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #9C27B0;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
  background-color: #9C27B0;
  border-color: #9C27B0;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #9C27B0;
  border-color: #9C27B0;
}

.progress-bar { background-color: #9C27B0; }

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #9C27B0;
}

::-webkit-scrollbar-thumb { background-color: #BA68C8; }
::-webkit-scrollbar-thumb:hover { background-color: #9C27B0; }

::selection {
  background-color: #E1BEE7;
  color: #4A148C;
}

::-moz-selection {
  background-color: #E1BEE7;
  color: #4A148C;
}

.update-statistics .icon i,
.mysql-statistics .icon i,
.environment-statistics .icon i {
  color: #9C27B0;
}

/* Links and text colors */
a:not(.btn):hover { color: #9C27B0; }
.text-link { color: #9C27B0 !important; }

/* Specific link colors that should be purple */
a.color-default,
a.text-primary,
a.link-primary {
  color: #9C27B0 !important;
}

a.color-default:hover,
a.text-primary:hover,
a.link-primary:hover {
  color: #7B1FA2 !important;
}

/* Navigation active states */
.nav > li > a:hover,
.nav > li > a:focus {
  color: #9C27B0;
}

/* Table hover */
.table-hover > tbody > tr:hover {
  background-color: #F3E5F5;
}

/* Alerts */
.alert-info {
  background-color: #F3E5F5;
  border-color: #CE93D8;
  color: #6A1B9A;
}

/* Modals */
.modal-header {
  background-color: #9C27B0;
  color: #fff;
}

/* Tabs border */
.tab-content > .active {
  border-color: #9C27B0;
}

/* Active menu items */
.active > a,
.active > a:hover,
.active > a:focus {
  color: #9C27B0 !important;
}

/* Sidebar active */
.sidebar .active,
.sidebar .active > a {
  color: #9C27B0 !important;
  background-color: #F3E5F5;
}

/* Links in panels */
.panel a:not(.btn) {
  color: #9C27B0;
}

.panel a:not(.btn):hover {
  color: #7B1FA2;
}

/* Well */
.well-primary {
  background-color: #F3E5F5;
  border-color: #BA68C8;
}

/* Breadcrumb active */
.breadcrumb > .active {
  color: #9C27B0;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
  border-color: #9C27B0 !important;
  box-shadow: 0 0 0 0.2rem rgba(156, 39, 176, 0.25) !important;
}

/* Radio and checkbox focus */
.radio input[type="radio"]:focus + label:before,
.checkbox input[type="checkbox"]:focus + label:before {
  border-color: #9C27B0;
}

/* Button outline */
.btn-outline-primary {
  color: #9C27B0;
  border-color: #9C27B0;
}

.btn-outline-primary:hover {
  background-color: #9C27B0;
  border-color: #9C27B0;
  color: #fff;
}

/* Tooltip */
.tooltip-inner {
  background-color: #7B1FA2;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #7B1FA2;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #7B1FA2;
}

/* Popover */
.popover-title {
  background-color: #F3E5F5;
  border-bottom-color: #BA68C8;
}

/* Code highlight */
code {
  color: #7B1FA2;
  background-color: #F3E5F5;
}

/* Pre */
pre {
  border-color: #BA68C8;
}

/* Badges */
.badge {
  background-color: #9C27B0;
}

/* Labels */
.label-success {
  background-color: #9C27B0;
}

/* Horizontal rule */
hr.primary {
  border-top-color: #9C27B0;
}

/* System-specific overrides */
.skin-2__left .main-nav > li.active > a,
.skin-2__left .main-nav > li > a:hover {
  color: #9C27B0 !important;
}

.shortcut-header:hover {
  color: #9C27B0 !important;
}

.more {
  color: #9C27B0 !important;
}

.more:hover {
  color: #7B1FA2 !important;
}

/* Charts and statistics */
.chart-legend .legend-item {
  color: #9C27B0;
}

/* Update version badge */
.update-version.new {
  color: #9C27B0 !important;
  border-color: #9C27B0 !important;
}

/* Menu and navigation */
.menu-item.active,
.menu-item:hover {
  background-color: #F3E5F5;
  color: #9C27B0 !important;
}

/* Data tables */
.dataTable thead .sorting_asc,
.dataTable thead .sorting_desc {
  background-color: #F3E5F5;
  color: #9C27B0;
}

/* Select dropdown */
.nice-select.open,
.nice-select:active,
.nice-select:focus {
  border-color: #9C27B0 !important;
}

.nice-select .option:hover,
.nice-select .option.selected {
  background-color: #F3E5F5;
  color: #9C27B0;
}

/* Custom button hover states */
.btn-link {
  color: #9C27B0;
}

.btn-link:hover {
  color: #7B1FA2;
}

/* Icon colors */
i.color-primary,
.fa-primary,
.wi-primary {
  color: #9C27B0 !important;
}

/* Calendar and date picker */
.datepicker .active,
.datepicker .today {
  background-color: #9C27B0 !important;
  color: #fff !important;
}

.datepicker td:hover,
.datepicker th:hover {
  background-color: #F3E5F5;
  color: #9C27B0;
}

/* Steps and wizard */
.steps .active,
.steps .complete {
  background-color: #9C27B0;
  color: #fff;
}

/* Timeline */
.timeline .timeline-badge.primary {
  background-color: #9C27B0;
}

/* Switches and toggles */
.toggle.active {
  background-color: #9C27B0;
}

/* Loading spinner */
.spinner-primary {
  color: #9C27B0;
}

/* Custom classes that might use default color */
.highlight {
  background-color: #F3E5F5;
  color: #6A1B9A;
}

.emphasis {
  color: #9C27B0;
  font-weight: 600;
}

/* Link groups */
.link-group a {
  color: #9C27B0 !important;
}

.link-group a:hover {
  color: #7B1FA2 !important;
}

/* Statistics day counter */
.no-backup .day,
.day {
  color: #9C27B0 !important;
}

/* Nav tabs specific */
.nav-tabs > li > a {
  color: #666;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: #9C27B0 !important;
}

.nav-tabs > li.active > a {
  color: #9C27B0 !important;
}

/* Element UI components */
.el-button--primary {
  background-color: #9C27B0 !important;
  border-color: #9C27B0 !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #7B1FA2 !important;
  border-color: #7B1FA2 !important;
}

.el-button--primary:active {
  background-color: #6A1B9A !important;
  border-color: #6A1B9A !important;
}

/* Element UI other components */
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #9C27B0 !important;
  border-color: #9C27B0 !important;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #9C27B0 !important;
  background: #9C27B0 !important;
}

.el-switch.is-checked .el-switch__core {
  background-color: #9C27B0 !important;
  border-color: #9C27B0 !important;
}

.el-link.el-link--primary {
  color: #9C27B0 !important;
}

.el-link.el-link--primary:hover {
  color: #7B1FA2 !important;
}

.el-tag--primary {
  background-color: #E1BEE7 !important;
  border-color: #BA68C8 !important;
  color: #6A1B9A !important;
}

.el-badge__content {
  background-color: #9C27B0 !important;
}

.el-input__inner:focus {
  border-color: #9C27B0 !important;
}

.el-textarea__inner:focus {
  border-color: #9C27B0 !important;
}

.el-select .el-input.is-focus .el-input__inner {
  border-color: #9C27B0 !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #9C27B0 !important;
}

.el-menu-item.is-active {
  color: #9C27B0 !important;
  border-bottom-color: #9C27B0 !important;
}

.el-tabs__item.is-active {
  color: #9C27B0 !important;
}

.el-tabs__active-bar {
  background-color: #9C27B0 !important;
}

.panel-heading .nav-tabs > li.active > a {
  border-bottom-color: #9C27B0 !important;
  color: #9C27B0 !important;
}

.panel-heading .nav-tabs > li > a:hover,
.panel-heading .nav-tabs > li > a:focus {
  border-bottom-color: #9C27B0 !important;
  color: #9C27B0 !important;
}

.panel-heading .more {
  color: #9C27B0 !important;
  text-decoration: none;
}

.panel-heading .more:hover {
  color: #7B1FA2 !important;
}

.panel-heading .color-default {
  color: #9C27B0 !important;
}

.panel-heading .color-default:hover {
  color: #7B1FA2 !important;
}

.panel-heading {
  border-left-color: #9C27B0 !important;
}

.panel-heading h4 {
  border-left-color: #9C27B0 !important;
}

.chart-box {
  padding: 24px;
  background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.chart-box.content-ready {
  opacity: 1;
}

.chart-select {
  margin-bottom: 24px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.chart-select .btn-default {
  border: 1px solid hsl(280, 5%, 84%);
  color: hsl(280, 5%, 25%);
  background: hsl(0, 0%, 100%);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chart-select .btn-default:hover {
  background-color: hsl(280, 70%, 97%);
  border-color: hsl(280, 60%, 70%);
  color: hsl(280, 70%, 40%);
  box-shadow: 0 2px 4px rgba(156, 39, 176, 0.15);
}

.chart-select .btn-default:focus,
.chart-select .btn-default:active {
  background-color: hsl(280, 70%, 95%);
  border-color: #9C27B0;
  color: #6A1B9A;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.12);
  outline: none;
}

.chart-select .ri-calendar-line,
.chart-select .fa-calendar {
  color: #9C27B0;
  margin-left: 8px;
  font-size: 16px;
}

.chart-line {
  border-radius: 12px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid hsl(280, 5%, 92%);
  min-height: 400px;
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.chart-line.chart-ready {
  opacity: 1;
}

.chart-line canvas {
  border-radius: 8px;
}

.tab-content {
  padding: 0;
  background: transparent;
}

.tab-pane {
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-heading .nav-tabs {
  border-bottom: 1px solid hsl(280, 5%, 90%);
  margin-bottom: 0;
}

.panel-heading .nav-tabs > li > a {
  border-radius: 8px 8px 0 0;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.panel-heading .nav-tabs > li.active > a {
  background-color: hsl(280, 70%, 97%);
  border-bottom: 2px solid #9C27B0;
}

.skin-2__left {
  background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08) !important;
}

.skin-2__logo {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.skin-2__logo i {
  font-size: 32px !important;
  color: #9C27B0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-2__logo:hover i {
  color: #7B1FA2 !important;
  transform: scale(1.1);
}

.header-info-common__logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-info-common__logo i {
  font-size: 32px !important;
  color: #9C27B0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-info-common__logo:hover i {
  color: #7B1FA2 !important;
  transform: scale(1.1);
}

.skin-2__left .main-nav {
  background: transparent !important;
}

.skin-2__left .main-nav li a {
  color: #495057 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent !important;
}

.skin-2__left .main-nav li a:hover {
  background: rgba(156, 39, 176, 0.08) !important;
  color: #9C27B0 !important;
  border-left-color: #BA68C8 !important;
}

.skin-2__left .main-nav li.active a,
.skin-2__left .main-nav li.active > a {
  background: linear-gradient(90deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.05) 100%) !important;
  color: #9C27B0 !important;
  font-weight: 600 !important;
  border-left-color: #9C27B0 !important;
}

.skin-2__left .main-nav li a i {
  color: #6c757d !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-2__left .main-nav li a:hover i {
  color: #9C27B0 !important;
  transform: scale(1.1);
}

.skin-2__left .main-nav li.active a i,
.skin-2__left .main-nav li.active > a i {
  color: #9C27B0 !important;
}

.skin-2__lock {
  background: transparent !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}

.skin-2__lock .unlock i,
.skin-2__lock .locked {
  color: #6c757d !important;
  transition: all 0.2s ease;
}

.skin-2__lock:hover {
  background: transparent !important;
}

.skin-2__lock:hover .unlock i,
.skin-2__lock:hover .locked {
  color: #9C27B0 !important;
}

/* Tooltip 样式 - 紫色背景白色文字 (全局样式覆盖) */
body > .tooltip .tooltip-inner {
  background-color: #9C27B0 !important;
  color: #ffffff !important;
}

body > .tooltip.top .tooltip-arrow {
  border-top-color: #9C27B0 !important;
}

body > .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #9C27B0 !important;
}

body > .tooltip.left .tooltip-arrow {
  border-left-color: #9C27B0 !important;
}

body > .tooltip.right .tooltip-arrow {
  border-right-color: #9C27B0 !important;
}