/* Font and Typography Enhancements */
body, .wrapper, .main-sidebar, .left-side {
  font-family: 'Roboto', 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #222;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1976d2;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }

/* Monospace for numbers/code */
code, pre, .monospace, .table td, .table th {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
}

/*
 * Skin: Custom Modern Blue/Teal (Miningcore.WebUI)
 * -----------------------------------------------
 */
.skin-custom .main-header .navbar {
  background-color: #1976d2; /* Modern blue */
}
.skin-custom .main-index-header .navbar {
  background-color: #1976d2;
}
.skin-custom .main-header .navbar .nav > li > a {
  color: #ffffff;
}
.skin-custom .main-header .navbar .nav > li > a:hover,
.skin-custom .main-header .navbar .nav > li > a:active,
.skin-custom .main-header .navbar .nav > li > a:focus,
.skin-custom .main-header .navbar .nav .open > a,
.skin-custom .main-header .navbar .nav .open > a:hover,
.skin-custom .main-header .navbar .nav .open > a:focus,
.skin-custom .main-header .navbar .nav > .active > a {
  background: rgba(0, 0, 0, 0.08);
  color: #e0f7fa;
}
.skin-custom .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}
.skin-custom .main-header .navbar .sidebar-toggle:hover {
  color: #e0f7fa;
  background: rgba(0, 0, 0, 0.08);
}
.skin-custom .main-header .navbar .sidebar-toggle {
  color: #fff;
}
.skin-custom .main-header .navbar .sidebar-toggle:hover {
  background-color: #1565c0;
}
@media (max-width: 767px) {
  .skin-custom .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .skin-custom .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }
  .skin-custom .main-header .navbar .dropdown-menu li a:hover {
    background: #1565c0;
  }
}
.skin-custom .main-header .logo {
  background-color: #1565c0;
  color: #ffffff;
  border-bottom: 0 solid transparent;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
}
.skin-custom .main-header .logo:hover {
  background-color: #1976d2;
}
.skin-custom .main-header li.user-header {
  background-color: #1976d2;
}
.skin-custom .content-header {
  background: transparent;
}
.skin-custom .wrapper,
.skin-custom .main-sidebar,
.skin-custom .left-side {
  background-color: #f4fafd;
}
.skin-custom .user-panel > .info,
.skin-custom .user-panel > .info > a {
  color: #fff;
}
.skin-custom .sidebar-menu > li.header {
  color: #00897b;
  background: #e0f2f1;
}
.skin-custom .sidebar-menu > li > a {
  border-left: 3px solid transparent;
}
.skin-custom .sidebar-menu > li:hover > a,
.skin-custom .sidebar-menu > li.active > a,
.skin-custom .sidebar-menu > li.menu-open > a {
  color: #ffffff;
  background: #00bcd4;
  box-shadow: 0 2px 8px rgba(0, 188, 212, 0.08);
}
.skin-custom .sidebar-menu > li.active > a {
  border-left-color: #00bcd4;
}
.skin-custom .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: #b2ebf2;
}
.skin-custom .sidebar a {
  color: #1976d2;
}
.skin-custom .sidebar a:hover {
  text-decoration: none;
}
.skin-custom .sidebar-menu .treeview-menu > li > a {
  color: #00838f;
}
.skin-custom .sidebar-menu .treeview-menu > li.active > a,
.skin-custom .sidebar-menu .treeview-menu > li > a:hover {
  color: #ffffff;
  background: #00bcd4;
}
.skin-custom .sidebar-form {
  border-radius: 3px;
  border: 1px solid #b2ebf2;
  margin: 10px 10px;
}
.skin-custom .sidebar-form input[type="text"],
.skin-custom .sidebar-form .btn {
  box-shadow: none;
  background-color: #e0f7fa;
  border: 1px solid transparent;
  height: 35px;
}
.skin-custom .sidebar-form input[type="text"] {
  color: #1976d2;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}
.skin-custom .sidebar-form input[type="text"]:focus,
.skin-custom .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #1976d2;
}
.skin-custom .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.skin-custom .sidebar-form .btn {
  color: #00838f;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/* Button Enhancements */
.btn, .card-btn, button, input[type="button"], input[type="submit"] {
  border-radius: 2em;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.10);
  font-size: 1.1em;
  padding: 0.6em 1.6em;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  background: linear-gradient(90deg, #1976d2 60%, #00bcd4 100%);
  color: #fff;
  border: none;
}
.btn:hover, .card-btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
  background: linear-gradient(90deg, #00bcd4 60%, #1976d2 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 188, 212, 0.18);
}

/* === Glassmorphism & Animated Background === */
body, .wrapper {
  background: linear-gradient(120deg, #1976d2 0%, #00bcd4 100%);
  min-height: 100vh;
  animation: gradientBG 12s ease-in-out infinite alternate;
}
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.card, .panel, .card-shadow {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(30,144,255,0.12);
  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.18);
  border-radius: 1.5em;
  padding: 2em 1.5em;
  margin-bottom: 2em;
  transition: box-shadow 0.2s, transform 0.2s, background 0.3s;
}
.card:hover, .panel:hover, .card-shadow:hover {
  box-shadow: 0 16px 48px rgba(0, 188, 212, 0.22);
  transform: translateY(-4px) scale(1.02);
  background: rgba(255,255,255,0.90);
}

.main-header .navbar {
  background: rgba(25, 118, 210, 0.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid rgba(0,188,212,0.10);
}

/* === Microinteractions === */
.btn, .card-btn, button, input[type="button"], input[type="submit"] {
  position: relative;
  overflow: hidden;
}
.btn:active::after, .card-btn:active::after, button:active::after, input[type="button"]:active::after, input[type="submit"]:active::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 200%; height: 200%;
  background: rgba(0,188,212,0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.5s linear;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.sidebar-menu > li > a, .nav-link {
  transition: background 0.2s, color 0.2s, padding-left 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sidebar-menu > li > a:hover, .nav-link:hover {
  background: rgba(0,188,212,0.10);
  color: #1976d2;
  padding-left: 1.7em;
  box-shadow: 0 2px 8px rgba(0,188,212,0.10);
  transform: scale(1.04);
}

/* === Floating Action Button (FAB) === */
.fab {
  position: fixed;
  right: 2.2em;
  bottom: 2.2em;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #1976d2 60%, #00bcd4 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2em;
  z-index: 999;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.fab:hover {
  background: linear-gradient(135deg, #00bcd4 60%, #1976d2 100%);
  box-shadow: 0 16px 48px rgba(0, 188, 212, 0.28);
  transform: scale(1.08);
}

/* === Modern Dark Mode Base (to be toggled) === */
body.dark-mode, .wrapper.dark-mode {
  background: linear-gradient(120deg, #232526 0%, #414345 100%);
}
body.dark-mode .card, .wrapper.dark-mode .card, body.dark-mode .panel, .wrapper.dark-mode .panel, body.dark-mode .card-shadow, .wrapper.dark-mode .card-shadow {
  background: rgba(34,40,49,0.85);
  color: #e0f7fa;
  border: 1.5px solid rgba(0,188,212,0.18);
}
body.dark-mode .main-header .navbar, .wrapper.dark-mode .main-header .navbar {
  background: rgba(44,62,80,0.92) !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #00bcd4;
}
body.dark-mode .sidebar-menu > li > a, .wrapper.dark-mode .sidebar-menu > li > a {
  color: #e0f7fa;
}
body.dark-mode .sidebar-menu > li > a:hover, .wrapper.dark-mode .sidebar-menu > li > a:hover {
  background: rgba(0,188,212,0.18);
  color: #00bcd4;
}
body.dark-mode .btn, body.dark-mode .card-btn, body.dark-mode button, body.dark-mode input[type="button"], body.dark-mode input[type="submit"] {
  background: linear-gradient(90deg, #00bcd4 60%, #1976d2 100%);
  color: #fff;
} 

/* --- Universal dark mode text and table fixes --- */
body.dark-mode, .wrapper.dark-mode {
  color: #e0f7fa;
}
body.dark-mode .card, .wrapper.dark-mode .card, body.dark-mode .panel, .wrapper.dark-mode .panel, body.dark-mode .card-shadow, .wrapper.dark-mode .card-shadow {
  color: #e0f7fa;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #00bcd4;
}
body.dark-mode a, .wrapper.dark-mode a {
  color: #4dd0e1;
}
body.dark-mode .table, body.dark-mode .table td, body.dark-mode .table th {
  color: #e0f7fa;
  background: transparent;
  border-color: #37474f;
}
body.dark-mode .table thead, body.dark-mode .table thead th {
  background: #23272b !important;
  color: #e0f7fa !important;
  border-bottom: 2px solid #00bcd4 !important;
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: #23272b;
}
body.dark-mode .table-striped tbody tr:nth-of-type(even) {
  background-color: #263238;
}
body.dark-mode .sidebar, .wrapper.dark-mode .sidebar {
  color: #e0f7fa;
  background: rgba(34,40,49,0.95);
}
body.dark-mode .sidebar .logo, body.dark-mode .sidebar .logo-normal {
  color: #e0f7fa;
}
body.dark-mode .sidebar-menu .nav-link i, body.dark-mode .sidebar-menu i, body.dark-mode .sidebar-menu .ti-headphone-alt {
  color: #00bcd4;
}
body.dark-mode .sidebar-menu > li > a .nav-link, body.dark-mode .sidebar-menu > li > a span {
  color: #e0f7fa;
}
body.dark-mode .sidebar-menu > li > a.disabled, body.dark-mode .sidebar-menu > li > a:disabled {
  color: #78909c !important;
}
body.dark-mode .text-muted, body.dark-mode .text-secondary, body.dark-mode .card-category, body.dark-mode .stat-label, body.dark-mode .stat-value {
  color: #b2ebf2 !important;
}
body.dark-mode .card-header, body.dark-mode .bg-green, body.dark-mode .bg-light, body.dark-mode .bg-orange {
  color: #e0f7fa !important;
}
body.dark-mode .card-header-warning, body.dark-mode .card-header-success, body.dark-mode .card-header-danger {
  color: #fff !important;
}
body.dark-mode .btn, body.dark-mode .card-btn, body.dark-mode button, body.dark-mode input[type="button"], body.dark-mode input[type="submit"] {
  color: #fff;
}
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
  background: #23272b;
  color: #e0f7fa;
  border-color: #37474f;
}
body.dark-mode .form-control:focus {
  background: #263238;
  color: #e0f7fa;
}
body.dark-mode .ct-label {
  color: #e0f7fa !important;
  fill: #e0f7fa !important;
}