/* ==========================================================
   UPTILI — Custom Bootstrap override (neutral greys)
   ========================================================== */

/* --- Global CSS variables (override Bootstrap) --- */
:root{
  /* paleta — chłodne szarości */
  --gray-50:#f8fafc;  --gray-100:#f1f5f9; --gray-200:#e5e7eb;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280;
  --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937;
  --gray-900:#111827;
  
  --white-100:#ffffff;

  --accent: var(--gray-700);     /* nasz "primary" to neutralny szary */
  --accent-strong: var(--gray-800);
  --accent-soft: rgba(55,65,81,.12);

  --up:#22c55e;      /* status up */
  --down:#ef4444;    /* status down */
  --slow:#f59e0b;    /* status slow/amber */

  /* bootstrap vars */
  --bs-body-bg: var(--gray-50);
  --bs-body-color: var(--gray-900);
  --bs-border-color: var(--gray-200);

  --bs-link-color: var(--gray-700);
  --bs-link-hover-color: var(--gray-900);

  --bs-primary: var(--accent);
  --bs-primary-rgb: 55,65,81;

  --bs-focus-ring-color: rgba(55,65,81,.15);
}

/* --- Layout / Cards --- */
body{ background:var(--gray-50); color:var(--gray-900); font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; }
.card{
  border:1px solid var(--gray-200);
  border-radius: .75rem;
  box-shadow: 0 2px 8px rgba(17,24,39,.04);
  background-color:var(--white-100);
}
.card-header{ background:transparent; border-bottom:1px solid var(--gray-200); }

/* --- Buttons (neutral instead of blue) --- */
.btn{ border-radius:.55rem; }
.btn-primary{
  background:var(--accent); border-color:var(--accent);
}
.btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
.btn-primary:active, .btn-primary:focus{ background:var(--accent-strong); border-color:var(--accent-strong); }
.btn-outline-secondary{
  color:var(--gray-700); border-color:var(--gray-300); background:#fff;
}
.btn-outline-secondary:hover{ background:var(--gray-100); border-color:var(--gray-400); color:var(--gray-800); }
.btn-light{ background:var(--gray-100); border-color:var(--gray-200); color:var(--gray-800); }

/* small switch buttons group look */
.btn-group>.btn{ padding:.3rem .6rem; }

/* --- Links --- */
a{ color:var(--gray-700); }
a:hover{ color:var(--gray-900); }

/* --- Forms --- */
.form-control{
  border-radius:.55rem; border-color:var(--gray-300);
  background:#fff; color:var(--gray-900);
}
.form-control:focus{
  border-color:var(--accent);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-select{ border-radius:.55rem; border-color:var(--gray-300); }

/* Search in header */
input[type="search"]::placeholder{ color:var(--gray-400); }

/* --- Sidebar (list-group used as nav) --- */
.list-group .list-group-item{
  border:1px solid var(--gray-200);
  border-width:1px 1px 0 1px;
  color:var(--gray-700);
  background-color:var(--white-100);
}
.list-group .list-group-item:first-child{ border-top-left-radius:.75rem; border-top-right-radius:.75rem; }
.list-group .list-group-item:last-child{ border-bottom:1px solid var(--gray-200); border-bottom-left-radius:.75rem; border-bottom-right-radius:.75rem; }
.list-group .list-group-item:hover{ background:var(--gray-100); color:var(--gray-800); }
.list-group .list-group-item.active{
  background:var(--gray-800);
  border-color:var(--gray-800);
  color:#fff;
}

/* --- Badges / dots for statuses --- */
.badge-dot{ display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.5rem; vertical-align:middle; }
.badge-up{ background:var(--up); }
.badge-down{ background:var(--down); }
.badge-slow{ background:var(--slow); }
.badge.text-bg-light{ background:var(--gray-100) !important; color:var(--gray-700) !important; border:1px solid var(--gray-200); }

/* --- Tables & list items --- */
.table{ --bs-table-striped-bg: var(--gray-100); }
.table th{ color:var(--gray-700); font-weight:600; }
.list-group-item{ padding:.9rem 1rem; }

/* --- Pagination / Dropdown / Nav pills (neutralize blue) --- */
.page-link{ color:var(--gray-700); }
.page-link:hover{ color:var(--gray-900); background:var(--gray-100); border-color:var(--gray-300); }
.page-item.active .page-link{
  background:var(--accent); border-color:var(--accent);
}
.dropdown-menu{ border-color:var(--gray-200); box-shadow:0 8px 24px rgba(17,24,39,.06); }
.dropdown-item:hover{ background:var(--gray-100); }
.nav-pills .nav-link.active{ background:var(--accent); }
.nav-pills .nav-link{ color:var(--gray-700); }

/* --- Alerts (Bootstrap) re-tinted --- */
.alert-primary{ background:rgba(55,65,81,.08); border-color:var(--gray-300); color:var(--gray-800); }

/* --- Headers / subtle separators --- */
hr{ border-top:1px solid var(--gray-200); opacity:1; }

/* --- Tiny helpers used w/ dashboard --- */
.small{ color:var(--gray-500) !important; }
.text-muted{ color:var(--gray-500) !important; }

/* --- ApexCharts neutral theme --- */
.apexcharts-tooltip{
  border:1px solid var(--gray-200) !important;
  box-shadow:0 8px 24px rgba(17,24,39,.08) !important;
  background:#fff !important; color:var(--gray-900) !important;
}
.apexcharts-xaxis text, .apexcharts-yaxis text{
  fill:var(--gray-600) !important;
}
.apexcharts-gridline{ stroke: var(--gray-200) !important; }
.apexcharts-legend-text{ color: var(--gray-700) !important; }

/* domyślne kolory serii — jasne szarości */
.apexcharts-series path{ stroke: #334155 !important; }          /* slate-700 */
.apexcharts-area .apexcharts-series-area{ fill: rgba(51,65,85,.18) !important; }
.apexcharts-bar-series .apexcharts-series path{ fill: #cbd5e1 !important; } /* slate-300 */

/* --- Focus states (usuń niebieski glow) --- */
button:focus, .btn:focus, .form-control:focus, .form-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color) !important;
}

/* --- Tooltips / popovers --- */
.tooltip-inner{ background:var(--gray-800); }
.tooltip .tooltip-arrow::before{ border-top-color:var(--gray-800) !important; }

/* --- Misc spacing --- */
.card .fw-semibold{ color:var(--gray-800); }