/* Mazer-inspired skin for FastAdmin / Bootstrap 3. Keeps existing behavior intact. */
:root {
  --mz-primary: #435ebe;
  --mz-primary-dark: #3950a2;
  --mz-primary-soft: #eef1ff;
  --mz-title: #25396f;
  --mz-text: #607080;
  --mz-muted: #8a9bb0;
  --mz-border: #e4e8f0;
  --mz-page: #f2f7ff;
  --mz-white: #fff;
  --mz-success: #20c997;
  --mz-danger: #dc3545;
  --mz-warning: #ffc107;
  --mz-radius: 10px;
  --mz-shadow: 0 2px 12px rgba(37, 57, 111, .07);
}

html,
body {
  background: var(--mz-page);
  color: var(--mz-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

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

/* App shell */
#tabs .wrapper,
#tabs .main-sidebar,
#tabs .left-side { background: var(--mz-white); }

#tabs .main-header,
#tabs .main-header .navbar,
#tabs .main-header .logo {
  background: var(--mz-white);
  color: var(--mz-title);
}

#tabs .main-header {
  border: 0;
  box-shadow: 0 2px 12px rgba(37, 57, 111, .06);
}

#tabs .main-header .logo {
  border: 0;
  color: var(--mz-title);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
}

#tabs .main-header .logo:hover,
#tabs .main-header .navbar .sidebar-toggle:hover,
#tabs .main-header .navbar .nav > li > a:hover,
#tabs .main-header .navbar .nav > li > a:focus,
#tabs .main-header .navbar .nav .open > a {
  background: var(--mz-primary-soft);
  color: var(--mz-primary);
}

#tabs .main-header .navbar .sidebar-toggle,
#tabs .main-header .navbar .nav > li > a {
  color: var(--mz-text);
  transition: background-color .18s ease, color .18s ease;
}

#tabs .main-sidebar {
  border: 0;
  box-shadow: 4px 0 16px rgba(37, 57, 111, .06);
}

#tabs .sidebar a { color: var(--mz-text); }

#tabs .user-panel {
  margin: 14px 12px 8px;
  padding: 12px;
  border-radius: var(--mz-radius);
  background: var(--mz-primary-soft);
}

#tabs .user-panel > .info,
#tabs .user-panel > .info > a { color: var(--mz-title); }

#tabs .sidebar-form {
  margin: 12px;
  border: 1px solid var(--mz-border);
  border-radius: 8px;
  background: #f8f9fc;
  overflow: visible;
}

#tabs .sidebar-form input[type="text"],
#tabs .sidebar-form .btn {
  background: transparent;
  color: var(--mz-text);
}

#tabs .sidebar-menu { padding: 8px 12px 24px; }
#tabs .sidebar-menu > li { margin: 3px 0; }
#tabs .sidebar-menu > li.header {
  padding: 16px 12px 7px;
  background: transparent;
  color: var(--mz-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#tabs .sidebar-menu > li > a,
#tabs .treeview-menu > li > a {
  border: 0;
  border-radius: 7px;
  color: var(--mz-text);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

#tabs .sidebar-menu > li > a { padding: 11px 12px; }
#tabs .sidebar-menu > li > a > .fa { color: #7c8db5; }

#tabs .sidebar-menu > li:hover > a,
#tabs .sidebar-menu > li.active > a,
#tabs .sidebar-menu > li.menu-open > a {
  border: 0;
  background: var(--mz-primary-soft);
  color: var(--mz-primary);
}

#tabs .sidebar-menu > li:hover > a > .fa,
#tabs .sidebar-menu > li.active > a > .fa { color: var(--mz-primary); }

#tabs .sidebar-menu > li.active > a {
  background: var(--mz-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(67, 94, 190, .22);
}

#tabs .sidebar-menu > li.active > a > .fa { color: #fff; }
#tabs .treeview-menu {
  margin: 4px 0 6px;
  padding-left: 16px;
  background: transparent;
}
#tabs .treeview-menu > li.active > a,
#tabs .treeview-menu > li > a:hover {
  background: var(--mz-primary-soft);
  color: var(--mz-primary);
}

.content-wrapper,
.right-side { background: var(--mz-page); }

/* Tabs and top navigation */
.main-header .nav-addtabs > li > a {
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0;
  background: transparent !important;
  line-height: 47px;
}

.main-header .nav-addtabs > li.active > a,
.main-header .nav-addtabs > li.active > a:hover,
.main-header .nav-addtabs > li.active > a:focus {
  border-bottom-color: var(--mz-primary) !important;
  background: transparent !important;
  color: var(--mz-primary) !important;
}

.dropdown-menu {
  padding: 7px;
  border: 1px solid var(--mz-border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(37, 57, 111, .13);
}
.dropdown-menu > li > a { padding: 8px 12px; border-radius: 6px; }
.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--mz-primary-soft);
  color: var(--mz-primary);
}

/* Cards */
.panel,
.box,
.card,
.well {
  border: 1px solid rgba(228, 232, 240, .8);
  border-radius: var(--mz-radius);
  background: var(--mz-white);
  box-shadow: var(--mz-shadow);
}

.panel-intro { margin: 18px; }
.panel-default > .panel-heading,
.panel-intro > .panel-heading {
  padding: 14px 18px 0;
  border: 0;
  border-radius: var(--mz-radius) var(--mz-radius) 0 0;
  background: var(--mz-white);
  color: var(--mz-title);
}
.panel-body { padding: 18px; }
.panel-intro > .panel-heading .nav-tabs { border-bottom: 1px solid var(--mz-border); }
.panel-intro > .panel-heading .nav-tabs > li > a {
  margin: 0 18px 0 0;
  padding: 10px 2px;
  border: 0;
  color: var(--mz-muted);
  font-weight: 600;
}
.panel-intro > .panel-heading .nav-tabs > li.active > a,
.panel-intro > .panel-heading .nav-tabs > li.active > a:hover,
.panel-intro > .panel-heading .nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--mz-primary);
  background: transparent;
  color: var(--mz-primary);
}

/* Buttons and inputs */
.btn {
  border-radius: 7px;
  box-shadow: none;
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active,
.btn.active { transform: none; }
.btn-primary {
  border-color: var(--mz-primary);
  background: var(--mz-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  border-color: var(--mz-primary-dark);
  background: var(--mz-primary-dark);
  color: #fff;
}
.btn-success { border-color: var(--mz-success); background: var(--mz-success); color: #fff; }
.btn-info { border-color: #57caeb; background: #57caeb; color: #fff; }
.btn-warning { border-color: var(--mz-warning); background: var(--mz-warning); color: #5c4b00; }
.btn-danger { border-color: var(--mz-danger); background: var(--mz-danger); color: #fff; }
.btn-default { border-color: var(--mz-border); background: #fff; color: var(--mz-text); }
.btn-default:hover,
.btn-default:focus { border-color: #cdd4e0; background: #f6f8fc; color: var(--mz-title); }

.form-control,
.bootstrap-select > .dropdown-toggle,
.input-group-addon {
  min-height: 36px;
  border-color: var(--mz-border);
  border-radius: 7px;
  background: #fff;
  color: var(--mz-title);
  box-shadow: none;
}
.form-control:focus,
.bootstrap-select.open > .dropdown-toggle {
  border-color: var(--mz-primary);
  box-shadow: 0 0 0 3px rgba(67, 94, 190, .12);
}
.form-control::placeholder { color: #a4afbd; }
.control-label { color: var(--mz-title); font-weight: 600; }
.help-block,
.text-muted { color: var(--mz-muted); }

/* Data tables */
.toolbar { margin-bottom: 14px; }
.toolbar .btn { margin-right: 5px; }
.bootstrap-table .fixed-table-toolbar { margin-bottom: 8px; }
.table,
.bootstrap-table .table { color: var(--mz-text); }
.table-bordered,
.bootstrap-table .table-bordered { border-color: var(--mz-border); }
.table > thead > tr > th,
.bootstrap-table .table > thead > tr > th {
  padding: 11px 8px;
  border-color: var(--mz-border) !important;
  background: #f6f8fc !important;
  color: var(--mz-title);
  font-weight: 700;
}
.table > tbody > tr > td,
.bootstrap-table .table > tbody > tr > td { border-color: #edf0f5; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfe; }
.table-hover > tbody > tr:hover { background: var(--mz-primary-soft); }
.fixed-table-container { border-color: var(--mz-border); border-radius: 8px; }
.fixed-table-pagination .pagination-detail { color: var(--mz-muted); }

.pagination > li > a,
.pagination > li > span {
  margin: 0 2px;
  border: 0;
  border-radius: 6px;
  color: var(--mz-primary);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--mz-primary);
  color: #fff;
}

.label { border-radius: 5px; font-weight: 600; }
.label-primary,
.badge-primary { background: var(--mz-primary); }
.label-success { background: var(--mz-success); }
.label-danger { background: var(--mz-danger); }

/* Search panels created by bootstrap-table */
.bootstrap-table .form-commonsearch > div,
.commonsearch-table > div {
  border: 1px solid var(--mz-border) !important;
  border-radius: 9px !important;
  background: #f8f9fc !important;
}
.bootstrap-table .form-commonsearch .form-control,
.bootstrap-table .form-commonsearch .btn,
.commonsearch-table .form-control,
.commonsearch-table .btn {
  height: 36px;
  box-sizing: border-box;
  vertical-align: middle;
}
.bootstrap-table .form-commonsearch .control-label,
.commonsearch-table .control-label { line-height: 24px; padding-top: 0; }

/* Dialogs */
.modal-content,
.layui-layer {
  border: 0 !important;
  border-radius: var(--mz-radius) !important;
  box-shadow: 0 14px 40px rgba(37, 57, 111, .18) !important;
  overflow: hidden;
}
.modal-header,
.layui-layer-title {
  border-bottom: 1px solid var(--mz-border) !important;
  background: #fff !important;
  color: var(--mz-title) !important;
  font-weight: 700;
}
.modal-footer,
.layui-layer-btn {
  border-top: 1px solid var(--mz-border) !important;
  background: #f8f9fc !important;
}
.layui-layer-btn .layui-layer-btn0 {
  border-color: var(--mz-primary) !important;
  border-radius: 6px;
  background: var(--mz-primary) !important;
}

/* FastAdmin copies form .layer-footer into the parent page; keep its actions on the right. */
.layui-layer.layui-layer-fast .layui-layer-footer,
.layui-layer.layui-layer-element .layui-layer-footer {
  padding: 12px 24px !important;
  text-align: right !important;
}
.layui-layer.layui-layer-fast .layui-layer-footer > .row,
.layui-layer.layui-layer-element .layui-layer-footer > .row {
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  width: 100%;
  margin: 0 !important;
}
.layui-layer.layui-layer-fast .layui-layer-footer > .row > label,
.layui-layer.layui-layer-element .layui-layer-footer > .row > label {
  display: none !important;
}
.layui-layer.layui-layer-fast .layui-layer-footer > .row > div,
.layui-layer.layui-layer-element .layui-layer-footer > .row > div {
  display: flex !important;
  float: none !important;
  align-items: center;
  justify-content: flex-end !important;
  width: auto !important;
  margin: 0 !important;
}
.layui-layer.layui-layer-fast .layui-layer-footer .btn,
.layui-layer.layui-layer-element .layui-layer-footer .btn {
  margin: 0 0 0 10px !important;
}

/* Dashboard cards */
.sm-st {
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius) !important;
  box-shadow: var(--mz-shadow);
}
.sm-st-icon { border-radius: 9px !important; }
.sm-st-info span { color: var(--mz-title); }
.bg-blue-gradient,
.bg-purple-gradient,
.bg-green-gradient,
.bg-teal-gradient { background: var(--mz-primary) !important; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--mz-primary); }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { border-radius: 8px; background: #c9d1df; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 767px) {
  .panel-intro { margin: 10px; }
  .panel-body { padding: 12px; }
  #tabs .main-header .logo { background: var(--mz-primary); color: #fff; }
  .toolbar .btn { margin-bottom: 6px; }
}