/*
 * modern-base.css — Body, typography, global resets
 * Applies the new design language to base elements
 */

/* === GOOGLE FONTS override — switch to Nunito Sans === */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

body {
  font-family: var(--re-font) !important;
  background-color: var(--re-surface) !important;
  color: var(--re-text-primary) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--re-font) !important;
  color: var(--re-text-primary);
  font-weight: 700;
  line-height: 1.3;
}

/* Links */
a { color: var(--re-primary); transition: color var(--re-transition-fast); }
a:hover { color: var(--re-accent); text-decoration: none; }

/* Horizontal rule */
hr { border-color: var(--re-border); margin: 20px 0; }

/* Code / mono */
code, pre, kbd {
  font-family: var(--re-font-mono);
  font-size: 0.875em;
}

/* Page content background */
#page-content {
  background: var(--re-surface) !important;
  padding: 20px 18px 24px !important;
}

/* Page container */
#main-container { background: var(--re-surface); }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(30,58,95,0.04); }
::-webkit-scrollbar-thumb { background: rgba(30,58,95,0.20); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--re-primary); }

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  margin-bottom: 10px !important;
  font-size: 12.5px;
  font-family: var(--re-font);
}
.breadcrumb > li + li::before { color: var(--re-text-muted) !important; }
.breadcrumb a { color: var(--re-primary); font-weight: 500; }
.breadcrumb > .active { color: var(--re-text-muted); }

/* Alerts */
.alert {
  border-radius: var(--re-radius-md) !important;
  border: none !important;
  font-size: 13px;
  font-family: var(--re-font);
  padding: 12px 16px !important;
  border-left: 4px solid !important;
}
.alert-info    { background: rgba(3,105,161,0.08) !important;    color: var(--re-info) !important;    border-left-color: var(--re-info) !important; }
.alert-success { background: var(--re-success-bg) !important;    color: var(--re-success) !important; border-left-color: var(--re-success) !important; }
.alert-warning { background: var(--re-warning-bg) !important;    color: var(--re-warning) !important; border-left-color: var(--re-warning) !important; }
.alert-danger  { background: var(--re-danger-bg) !important;     color: var(--re-danger) !important;  border-left-color: var(--re-danger) !important; }

/* Labels & badges */
.label-primary { background: var(--re-primary) !important; font-family: var(--re-font); border-radius: 4px; padding: 3px 7px; }
.label-success { background: var(--re-success) !important; }
.label-warning { background: var(--re-warning) !important; }
.label-danger  { background: var(--re-danger) !important; }
.badge { background: var(--re-primary) !important; font-family: var(--re-font); }

/* Tooltips */
.tooltip-inner {
  background: var(--re-text-primary) !important;
  border-radius: var(--re-radius-sm) !important;
  font-family: var(--re-font) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}
.tooltip.top .tooltip-arrow    { border-top-color: var(--re-text-primary) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--re-text-primary) !important; }

/* Fade-in animation for cards/widgets */
@keyframes re-fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse dot for live indicators */
@keyframes re-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

/* Utility classes */
.re-muted    { color: var(--re-text-muted) !important; }
.re-secondary { color: var(--re-text-secondary) !important; }
.re-primary-text { color: var(--re-primary) !important; }
.re-accent-text  { color: var(--re-accent) !important; }
.re-mono { font-family: var(--re-font-mono) !important; }