@charset "UTF-8";

:root {
  --pangle-primary: #1847dc;
  --pangle-primary-hover: #0d36b8;
  --pangle-accent: #ff4050;
  --pangle-bg: #f7f8fa;
  --pangle-panel: #ffffff;
  --pangle-panel-soft: #f2f5fa;
  --pangle-border: #edf0f2;
  --pangle-border-strong: #dfe3ea;
  --pangle-text: #23272e;
  --pangle-muted: #5f6673;
  --pangle-subtle: #8f949c;
  --pangle-success: #18c45e;
  --pangle-warning: #ff9516;
  --pangle-danger: #fa3939;
  --pangle-shadow: 0 4px 18px rgba(35, 39, 46, 0.06);
  --pangle-shadow-strong: 0 12px 32px rgba(35, 39, 46, 0.12);
}

html,
body {
  color: var(--pangle-text);
  background: var(--pangle-bg);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

a,
a:focus,
a:hover {
  color: var(--pangle-primary);
}

body[data-ma-theme] .header {
  height: 56px;
  background: var(--pangle-panel) !important;
  border-bottom: 1px solid var(--pangle-border);
  box-shadow: none;
  color: var(--pangle-text);
}

.header__logo > h1 {
  font-size: 1rem;
  font-weight: 600;
}

.header__logo > h1 > a {
  display: inline-flex;
  align-items: center;
  color: var(--pangle-text) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.header__logo > h1 > a:before,
.form-header h1:before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pangle-accent) 0 42%, var(--pangle-primary) 42% 100%);
  box-shadow: 0 6px 14px rgba(24, 71, 220, 0.18);
  flex: 0 0 auto;
}

.top-nav > li > a {
  color: var(--pangle-muted);
  border-radius: 6px;
}

.top-nav > li > a.active,
.top-nav > li > a:hover {
  color: var(--pangle-primary);
  background: #edf3ff;
}

.navigation-trigger__line {
  background: var(--pangle-text);
}

.navigation-trigger__inner:before {
  background: rgba(24, 71, 220, 0.1);
}

.sidebar,
.sidebar--hidden {
  background: var(--pangle-bg);
  border-right: 1px solid var(--pangle-border);
}

.sidebar {
  padding: 76px 16px 0.5rem;
}

.user {
  background: var(--pangle-panel);
  border: 1px solid var(--pangle-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(35, 39, 46, 0.03);
}

.user__info {
  border-radius: 8px;
  padding: 0.9rem;
}

.user__info:hover {
  background: var(--pangle-panel-soft);
}

.user__name {
  color: var(--pangle-text);
  font-weight: 600;
}

.user__email {
  color: var(--pangle-subtle);
}

.navigation {
  color: var(--pangle-muted);
}

.navigation span {
  display: flex;
  align-items: center;
  min-height: 38px;
  line-height: 20px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--pangle-muted);
  font-weight: 500;
  letter-spacing: 0;
}

.navigation span i {
  min-width: 20px;
  margin-right: 8px;
  color: var(--pangle-subtle);
  text-align: center;
}

.navigation span:hover,
.navigation span.navigation__active {
  background: #edf3ff;
  color: var(--pangle-primary) !important;
}

.navigation span.navigation__active {
  box-shadow: inset 3px 0 0 var(--pangle-primary);
}

.navigation span:hover i,
.navigation span.navigation__active i {
  color: var(--pangle-primary);
}

@media (min-width: 1200px) {
  .content:not(.content--boxed):not(.content--full) {
    padding: 76px 28px 0 298px;
  }
}

@media (min-width: 576px) and (max-width: 1199px) {
  .content:not(.content--boxed):not(.content--full) {
    padding: 76px 24px 0;
  }
}

@media (max-width: 575px) {
  .content:not(.content--boxed):not(.content--full) {
    padding: 84px 14px 0;
  }
}

.content__title {
  margin-bottom: 16px;
}

.breadcrumb {
  padding: 0;
  margin-bottom: 16px;
  background: transparent;
  border-radius: 0;
}

.breadcrumb-item,
.breadcrumb-item > a {
  color: var(--pangle-muted);
  font-weight: 500;
}

.breadcrumb-item:hover,
.breadcrumb-item > a:hover {
  color: var(--pangle-primary);
}

.main-content,
.card {
  background: var(--pangle-panel);
  border: 1px solid var(--pangle-border);
  border-radius: 8px;
  box-shadow: var(--pangle-shadow);
}

.main-content {
  min-height: calc(100vh - 9.5rem);
}

.card {
  margin-bottom: 18px;
}

.card-block {
  padding: 1.35rem 1.5rem;
}

.card-header,
.card-footer {
  border-color: var(--pangle-border);
}

.card-title,
.modal-title {
  color: var(--pangle-text);
  font-weight: 700;
  letter-spacing: 0;
}

.row {
  margin-top: 12px;
  margin-bottom: 12px;
}

.table-responsive {
  border-radius: 8px;
}

.table {
  color: var(--pangle-text);
  background: var(--pangle-panel);
}

.table th,
.table td {
  padding: 0.85rem 1rem;
  border-color: var(--pangle-border) !important;
  vertical-align: middle;
}

.table thead th {
  color: var(--pangle-muted);
  background: var(--pangle-bg);
  border-bottom: 1px solid var(--pangle-border) !important;
  font-size: 0.86rem;
  font-weight: 600;
}

.table-striped tbody tr:nth-of-type(even) {
  background: #fbfcfe;
}

.table-hover tbody tr:hover {
  background: #f4f7ff;
}

.fixed-table-container {
  border: 1px solid var(--pangle-border) !important;
  border-radius: 8px;
}

.fixed-table-container thead th,
.fixed-table-container tbody td {
  border-color: var(--pangle-border) !important;
}

.fixed-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fixed-table-toolbar:after,
.fixed-table-toolbar:before {
  display: none;
}

.fixed-table-toolbar .columns,
.fixed-table-toolbar .search,
.fixed-table-toolbar .bs-bars {
  margin-top: 0;
  margin-bottom: 0;
}

.fixed-table-toolbar .search input,
.fixed-table-toolbar .columns button,
.fixed-table-pagination .page-list .btn {
  min-height: 34px;
  border-radius: 6px;
}

.fixed-table-pagination {
  color: var(--pangle-muted);
}

.pagination > li > a,
.pagination > li > span,
.page-link {
  min-width: 32px;
  color: var(--pangle-muted);
  border-color: var(--pangle-border-strong);
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.page-link:hover {
  color: var(--pangle-primary);
  background: #edf3ff;
  border-color: #cbd8ff;
}

.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link,
.fixed-table-pagination .pagination li.active a {
  color: #ffffff !important;
  background: var(--pangle-primary) !important;
  border-color: var(--pangle-primary) !important;
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.ms-choice,
.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select {
  min-height: 36px;
  color: var(--pangle-text) !important;
  background: var(--pangle-bg) !important;
  border: 1px solid var(--pangle-border-strong) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  letter-spacing: 0;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.ms-parent:focus .ms-choice,
.swal2-input:focus,
.swal2-file:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  color: var(--pangle-text) !important;
  background: var(--pangle-panel) !important;
  border-color: var(--pangle-primary) !important;
  box-shadow: 0 0 0 3px rgba(24, 71, 220, 0.12) !important;
}

.form-control::placeholder {
  color: var(--pangle-subtle);
}

select.form-control:not([size]):not([multiple]) {
  height: 36px;
}

.form-control-file,
input[type="file"] {
  color: var(--pangle-muted);
}

.form-group label,
.custom-control,
.control-label {
  color: var(--pangle-muted);
  font-weight: 600;
  letter-spacing: 0;
}

.table-side-filter,
[class$="-table-form"],
[class*="-table-form"] {
  padding: 12px;
  margin-bottom: 14px;
  background: #fbfcfe;
  border: 1px solid var(--pangle-border);
  border-radius: 8px;
}

.btn,
.bootstrap-table .fixed-table-toolbar .btn,
.swal2-confirm,
.swal2-cancel {
  min-height: 34px;
  border-radius: 6px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
}

.btn-primary,
.btn-save,
.btn-info,
.swal2-confirm {
  color: #ffffff !important;
  background: var(--pangle-primary) !important;
  border-color: var(--pangle-primary) !important;
}

.btn-primary:hover,
.btn-save:hover,
.btn-info:hover,
.swal2-confirm:hover {
  color: #ffffff !important;
  background: var(--pangle-primary-hover) !important;
  border-color: var(--pangle-primary-hover) !important;
}

.btn-secondary,
.btn-default,
.btn-outline-secondary,
.swal2-cancel {
  color: var(--pangle-muted) !important;
  background: var(--pangle-panel) !important;
  border-color: var(--pangle-border-strong) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover,
.swal2-cancel:hover {
  color: var(--pangle-text) !important;
  background: var(--pangle-panel-soft) !important;
  border-color: #cfd6e4 !important;
}

.btn-link {
  color: var(--pangle-primary);
}

.dropdown-menu,
.ms-drop,
.select2-dropdown {
  border: 1px solid var(--pangle-border);
  border-radius: 8px;
  box-shadow: var(--pangle-shadow-strong);
}

.dropdown-item {
  color: var(--pangle-muted);
}

.dropdown-item:focus,
.dropdown-item:hover,
.ms-drop ul > li label:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: var(--pangle-primary);
  background: #edf3ff;
}

.actions__item > i,
.zmdi-download,
.zmdi-more-vert {
  color: var(--pangle-muted);
  cursor: pointer;
}

.actions__item {
  width: auto;
  min-width: 30px;
  padding: 0 8px;
  white-space: nowrap;
}

.actions__item > i {
  width: auto;
}

.actions__item > i:hover,
.zmdi-download:hover,
.zmdi-more-vert:hover {
  color: var(--pangle-primary);
}

.modal-content,
.swal2-modal {
  border: 1px solid var(--pangle-border);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(35, 39, 46, 0.16);
}

.modal-header,
.modal-footer {
  border-color: var(--pangle-border);
}

.modal-header {
  padding: 1rem 1.25rem;
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 0.9rem 1.25rem;
}

.alert,
.alert--notify {
  border-radius: 6px;
  border-color: var(--pangle-border);
  box-shadow: 0 8px 22px rgba(35, 39, 46, 0.12);
}

.alert--notify {
  max-width: 380px;
  padding: 14px 48px 14px 18px;
  color: var(--pangle-text);
  background: var(--pangle-panel);
}

.alert--notify:not(.alert-inverse) .alert--notify__close,
.alert--notify.alert-inverse .alert--notify__close {
  color: var(--pangle-subtle);
}

.badge,
.label {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0;
}

.bg-green,
.badge-success,
.label-success {
  background-color: var(--pangle-success) !important;
}

.bg-orange,
.badge-warning,
.label-warning {
  background-color: var(--pangle-warning) !important;
}

.bg-red,
.badge-danger,
.label-danger {
  background-color: var(--pangle-danger) !important;
}

.custom-control-indicator,
.toggle-switch__helper {
  border-color: var(--pangle-border-strong);
}

.custom-control-input:checked ~ .custom-control-indicator {
  border-color: var(--pangle-primary) !important;
}

.custom-radio .custom-control-indicator:before,
.toggle-switch__checkbox:checked ~ .toggle-switch__helper:after {
  background: var(--pangle-primary) !important;
}

.toggle-switch__checkbox:checked ~ .toggle-switch__helper:before {
  background: rgba(24, 71, 220, 0.35) !important;
}

.ms-choice > span {
  color: var(--pangle-text);
  line-height: 34px;
}

.ms-drop {
  color: var(--pangle-text);
}

.ms-drop input[type="checkbox"] {
  margin-right: 6px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--pangle-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--pangle-primary) !important;
  border-radius: 6px;
  outline: none !important;
}

.jstree-default .jstree-clicked {
  color: var(--pangle-primary);
  background: #edf3ff;
  border-radius: 6px;
  box-shadow: none;
}

.jstree-default .jstree-hovered {
  color: var(--pangle-primary);
  background: #f4f7ff;
  border-radius: 6px;
  box-shadow: none;
}

.daterangepicker {
  border: 1px solid var(--pangle-border);
  border-radius: 8px;
  box-shadow: var(--pangle-shadow-strong);
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .end-date {
  background: var(--pangle-primary) !important;
}

.daterangepicker td.in-range {
  background: rgba(24, 71, 220, 0.1) !important;
}

.dropzone,
.dz-default,
.form-control-file,
input[type="file"].form-control {
  border-color: var(--pangle-border-strong);
  border-radius: 8px;
  background: var(--pangle-bg);
}

.swal2-title {
  color: var(--pangle-text);
  font-weight: 700;
  letter-spacing: 0;
}

.swal2-content {
  color: var(--pangle-muted);
}

.page-loader {
  background: rgba(247, 248, 250, 0.92);
}

.page-loader__spinner svg circle {
  stroke: var(--pangle-primary);
}

.weather-block .icon-list li,
.menu-icon .col-sm-6 {
  color: var(--pangle-muted);
}

.menu-icon .col-sm-6:hover {
  color: var(--pangle-primary);
}

@media (max-width: 767px) {
  .card-block,
  .modal-body {
    padding: 1rem;
  }

  .fixed-table-toolbar {
    display: block;
  }

  .fixed-table-toolbar .search {
    width: 100%;
    margin-top: 8px;
  }

  .fixed-table-toolbar .search input {
    width: 100%;
  }

  .table th,
  .table td {
    padding: 0.75rem;
  }
}