/* ==============================================================================
   kevvli community • Admin Panel Stylesheet (Dopasowany do nowego stylu strony)
   Grafitowo-zielona paleta: #0d100f, #151a17, #101711, #ffffff12, #a4edbb
   ============================================================================== */

body.admin-page {
  background: #0d100f !important;
  background-image: none !important;
  color: #f0f2ef !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- NAGŁÓWEK ADMINA --- */
body.admin-page header {
  background: rgba(13, 16, 15, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

body.admin-page .logo-glow {
  box-shadow: none !important;
}

/* Linki i przyciski w nagłówku */
body.admin-page header a.rounded-xl,
body.admin-page header div.rounded-xl {
  background: #151a17 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ccd5ce !important;
}

body.admin-page header a.rounded-xl:hover {
  background: #1c231f !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* --- KARTY (SHADCN CARD) --- */
.shadcn-card {
  background: #151a17 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #f0f2ef !important;
}

.shadcn-card:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* --- ZAKŁADKI PANELU --- */
body.admin-page #adminDashboardSection > div:first-child {
  background: #151a17 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.shadcn-tab-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #8f9c94 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  transition: all 0.2s ease !important;
}

.shadcn-tab-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}

.shadcn-tab-btn.active {
  background: rgba(164, 237, 187, 0.1) !important;
  border-color: rgba(164, 237, 187, 0.3) !important;
  color: #a4edbb !important;
  box-shadow: none !important;
}

.shadcn-tab-btn.active span[id*="Badge"],
.shadcn-tab-btn span[id*="Badge"] {
  background: #101711 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #a4edbb !important;
}

/* --- PRZYCISKI GŁÓWNE (JASNOZIELONE) --- */
.mc-btn-emerald,
button.mc-btn-emerald,
a.mc-btn-emerald,
.admin-btn-primary {
  background: #a4edbb !important;
  color: #102719 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.mc-btn-emerald:hover,
button.mc-btn-emerald:hover,
a.mc-btn-emerald:hover,
.admin-btn-primary:hover {
  background: #c1f7d1 !important;
  transform: translateY(-1px) !important;
}

/* Przyciski drugorzędne (ciemne / konturowe) */
.mc-btn:not(.mc-btn-emerald),
button.mc-btn:not(.mc-btn-emerald) {
  background: #151a17 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ccd5ce !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.mc-btn:not(.mc-btn-emerald):hover,
button.mc-btn:not(.mc-btn-emerald):hover {
  background: #1c231f !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* --- FORMULARZE, INPUTY, SELECTY --- */
body.admin-page input[type="text"],
body.admin-page input[type="search"],
body.admin-page input[type="number"],
body.admin-page input[type="url"],
body.admin-page select,
body.admin-page textarea {
  background: #101711 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f0f2ef !important;
  border-radius: 8px !important;
}

body.admin-page input:focus,
body.admin-page select:focus,
body.admin-page textarea:focus {
  border-color: #a4edbb !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #a4edbb !important;
}

/* --- TABELE --- */
.shadcn-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.shadcn-table th {
  background: #151a17 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #8f9c94 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
}

.shadcn-table td {
  background: #101711 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #ccd5ce !important;
  padding: 14px 16px !important;
}

.shadcn-table tr:hover td {
  background: #19221c !important;
}

/* --- BADGE / ETYKIETY --- */
.shadcn-badge {
  border-radius: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

.shadcn-badge-emerald {
  background: rgba(164, 237, 187, 0.12) !important;
  border: 1px solid rgba(164, 237, 187, 0.3) !important;
  color: #a4edbb !important;
}

/* --- MODALE W PANELU ADMINA --- */
body.admin-page .modal-backdrop {
  background: rgba(8, 11, 10, 0.88) !important;
  backdrop-filter: blur(16px) !important;
}

body.admin-page #adminEditPackModal > div,
body.admin-page #adminLoginSection {
  background: #0d100f !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85) !important;
}

body.admin-page #adminEditPackModal header,
body.admin-page #adminLoginSection > div:first-child {
  background: #151a17 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Dropzone w modalu edycji */
body.admin-page .dropzone-dashed,
body.admin-page [id*="Dropzone"] {
  background: #101711 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.admin-page .dropzone-dashed:hover,
body.admin-page [id*="Dropzone"]:hover {
  border-color: #a4edbb !important;
  background: #151a17 !important;
}
.traffic-dashboard { background: #111813; border: 1px solid #ffffff12; border-radius: 18px; padding: 24px; color: #edf2ee; }
.traffic-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.traffic-eyebrow { font-size: 10px; letter-spacing: .15em; color: #84958a; font-weight: 700; }
.traffic-heading h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 750; margin: 6px 0; }
.traffic-live { font-size: 10px; font-weight: 500; color: #a4edbb; background: #a4edbb0a; border: 1px solid #a4edbb20; padding: 4px 8px; border-radius: 20px; white-space: nowrap; }
.traffic-heading p { font-size: 12px; color: #88988e; }
.traffic-period { display: flex; gap: 4px; padding: 4px; background: #0b100d; border: 1px solid #ffffff12; border-radius: 10px; flex-shrink: 0; }
.traffic-period button { padding: 7px 12px; border-radius: 7px; font-size: 12px; color: #8d9b93; }
.traffic-period button[aria-pressed="true"] { background: #a4edbb; color: #14281b; font-weight: 700; }
.traffic-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.traffic-kpi { padding: 18px; border: 1px solid #ffffff0e; background: #ffffff02; border-radius: 12px; display: grid; gap: 9px; }
.traffic-kpi>span { font-size: 11px; color: #9aaba0; }
.traffic-kpi strong { font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1.2; }
.traffic-kpi small { font-size: 10px; color: #667a6e; }
.traffic-kpi.green strong { color: #a4edbb; }
.traffic-kpi.purple strong { color: #b2adff; }
.traffic-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.traffic-chart { min-width: 0; padding: 18px 14px 10px; background: #0c120e; border: 1px solid #ffffff0c; border-radius: 12px; }
.traffic-chart-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 5px 15px; }
.traffic-chart-heading h3 { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 650; }
.traffic-chart-heading>span { font-size: 10px; color: #6f8376; }
.traffic-legend { width: 7px; height: 7px; border-radius: 50%; background: #a4edbb; }
.traffic-legend.purple { background: #a6a1ff; }
.traffic-chart svg { width: 100%; height: auto; overflow: visible; }
.traffic-grid-line { stroke: #ffffff0b; stroke-dasharray: 3 5; }
.traffic-axis { fill: #71877a; font-size: 10px; font-family: inherit; }
.traffic-point { cursor: crosshair; outline: none; }
.traffic-point:hover circle, .traffic-point:focus circle { stroke: #fff; stroke-width: 2; r: 5px; }
.traffic-point:hover rect:not([fill="transparent"]), .traffic-point:focus rect:not([fill="transparent"]) { fill: #d1cdff; }
.traffic-point:focus>rect[fill="transparent"] { fill: #ffffff08; }
.traffic-tooltip { min-height: 18px; color: #8ba596; font-size: 10px; text-align: center; padding-top: 9px; }
.traffic-footer { margin-top: 18px; border-top: 1px solid #ffffff0c; padding-top: 14px; }
.traffic-footer>span { font-size: 10px; color: #6e8175; }
.traffic-footer details { margin-top: 12px; }
.traffic-footer summary { color: #a0b5a8; cursor: pointer; font-size: 11px; width: fit-content; }
.traffic-table-wrap { max-height: 280px; overflow: auto; margin-top: 12px; }
.traffic-table-wrap table { width: 100%; font-size: 12px; border-collapse: collapse; }
.traffic-table-wrap th, .traffic-table-wrap td { text-align: right; padding: 9px 12px; border-bottom: 1px solid #ffffff08; }
.traffic-table-wrap th:first-child, .traffic-table-wrap td:first-child { text-align: left; }
.traffic-table-wrap th { color: #8a9c90; }
.traffic-empty { padding-top: 14px; font-size: 12px; color: #8a9c90; text-align: center; }
.traffic-period button:focus-visible, .traffic-footer summary:focus-visible { outline: 2px solid #a4edbb; outline-offset: 3px; }
@media (max-width: 1100px) { .traffic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .traffic-heading { align-items: flex-start; flex-direction: column; gap: 14px; } .traffic-charts { grid-template-columns: 1fr; } .traffic-dashboard { padding: 18px; } .traffic-heading h2 { font-size: 19px; } .traffic-axis { font-size: 18px; } }
@media (max-width: 400px) { .traffic-kpi { padding: 12px; } .traffic-kpi strong { font-size: 25px; } .traffic-heading h2 { flex-wrap: wrap; gap: 7px; } }