/* ===========================================
   Spoločné CSS pre dashboard widgety
   (Redis monitor, Page cache monitor, Session monitor, ...)
   -------------------------------------------
   Všetko držíme pod .monitor-* triedami,
   aby sme nič iné v admine nerozbili.
=========================================== */

/* ======================================================
   FLEX GRID PRE DASHBOARD – iba desktop (>=992px)
   Mobile ostane v čistom bootstrap režime.
====================================================== */
@media (min-width: 992px) {

  .row.dashboard-row {
    display: flex;
    flex-wrap: wrap;
  }

  /* Každý bootstrap stĺpec vo flex riadku */
  .row.dashboard-row > [class*="col-"] {
    display: flex;
  }

  /* Vnútorný obsah (panel, monitor-card, panel-default...) 
     sa natiahne na rovnakú výšku */
  .row.dashboard-row > [class*="col-"] > * {
    flex: 1 1 auto;
  }
}

/* Aby sa obsah správne zmenšoval (nepretekanie) */
.dashboard-col,
.row.dashboard-row > [class*="col-"] {
  min-width: 0;
}

/* Pekný scrollbar (voliteľné, pri horizontálnom scrolle) */
.dashboard-row::-webkit-scrollbar {
  height: 6px;
}
.dashboard-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}

/* KARTA WIDGETU */
.monitor-card {
  background: #1f2430;
  border-radius: 0px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  color: #e5e7f1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Hlavička = názov + refresh */
.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.monitor-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
}

.monitor-title i {
  color: #38bdf8;
}

/* Refresh tlačidlo (pravý horný roh) */
.monitor-refresh-btn {
  border: 0;
  outline: 0;
  background: #111827;
  color: #e5e7f1;
  border-radius: 0px;
  padding: 4px 9px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  line-height: 1.2;
}

.monitor-refresh-btn i {
  font-size: 11px;
}

.monitor-refresh-btn:hover {
  background: #0f172a;
}

/* Stav (label + „pásik“) */
.monitor-status-label {
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 4px;
  font-size: 12px;
}

.monitor-status-pill {
  border-radius: 0px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.monitor-status-pill i {
  font-size: 12px;
}

/* Varianty stavu */
.monitor-status-ok {
  background: #16a34a;
  color: #ecfdf5;
}

.monitor-status-fail {
  background: #7f1d1d;
  color: #fee2e2;
}

/* „Info“ box / telo s parametrami */
.monitor-body {
  margin-top: 10px;
  border-radius: 0px;
  background: #020617;
  padding: 10px 12px;
}

/* riadky typu „label | value“ */
.monitor-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

.monitor-stat-row:last-child {
  border-bottom: 0;
}

.monitor-stat-label {
  color: #9ca3af;
  font-size: 12px;
}

.monitor-stat-value {
  font-size: 13px;
  font-weight: 500;
  color: #e5e7f1;
  text-align: right;
}

/* malý popis / sekundárny text pod názvami */
.monitor-help {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 3px;
}

/* tagy – prefix, DB, policy, ... */
.monitor-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 0px;
  font-size: 11px;
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  border: 1px solid rgba(148,163,184,0.4);
}

.monitor-tag--accent {
  background: rgba(30,64,175,0.9);
  border-color: rgba(129,140,248,0.9);
  color: #e0e7ff;
}

/* pre prefixy v texte */
.monitor-card code {
  background: rgba(15,23,42,0.8);
  padding: 2px 6px;
  border-radius: 0px;
  font-size: 11px;
  color: #facc15;
}

.monitor-pre {
    background: #0f172a;
    border: 1px solid #1f2937;
    padding: 10px;
    border-radius: 8px;
    max-height: 300px;
    overflow: auto;
    font-size: 12px;
    color: #e5e7eb;
    white-space: pre-wrap;   /* !!! pridane */
    word-break: break-all;   /* !!! pridane */
}

/* fallback pre HTML/PHP dump */
.monitor-pre--error {
  border-color: #f97373;
  color: #fecaca;
}

/* Pätička – čas generovania */
.monitor-footer {
  margin-top: 8px;
  font-size: 11px;
  color: #9ca3af;
}

/* „sekcia“ vnútri jedného widgetu (napr. riadky v Session monitore) */
.monitor-section-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  color: #e5e7f1;
}

.monitor-section-muted {
  font-size: 11px;
  color: #9ca3af;
}

/* malý odstup medzi viacerými logickými sekciami v jednom carde */
.monitor-section {
  margin-top: 8px;
}

.monitor-pre--log {
  min-height: 248px;    /* môžeš doladiť 140–200 podľa oka */
  max-height: 260px;
}

/* Responzívne drobnosti – na menších šírkach nech je text radšej pod sebou */
@media (max-width: 991px) {
  .monitor-stat-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .monitor-stat-value {
    margin-top: 2px;
  }
}

/* Desktop rozloženie – pekné double-column, rovnaké odsadenia */
@media (min-width: 992px) {
  .dashboard-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }

  .dashboard-row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
    /* nechávame bootstrap šírky (col-lg-6, col-md-12...), len odsadenie */
  }
}

/* Mobile / tablet – nech sa to správa ako klasický Bootstrap .row */
@media (max-width: 991px) {
  .dashboard-row {
    display: block;              /* zrušíme flex */
    margin-left: -15px;          /* bootstrap default */
    margin-right: -15px;
  }

  .dashboard-row > [class*="col-"] {
    padding-left: 15px;          /* bootstrap default */
    padding-right: 15px;
    width: 100%;                 /* istota že každý widget je na celý riadok */
  }
}

/* =====================================================
   REDIS SESSIONS – DETAIL (rovnaký vizuál ako widgety)
   Použité v redis_sessions_report.php
   ------------------------------------------------- */

.redis-detail-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* „karta“ detailu – recyklujeme monitor-card, len obalíme */
.redis-modal {
  background: #020617;
  border-radius: 0px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 20px 40px rgba(0,0,0,.6);
  overflow: hidden;
}

/* horný pruh nad tabuľkou */
.redis-header {
  padding: 10px 14px;
  background: #020617;
  border-bottom: 1px solid rgba(148,163,184,0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.redis-header-title {
  font-weight: 600;
  font-size: 14px;
  color: #f9fafb;
}

.redis-header-meta {
  color: #9ca3af;
  font-size: 12px;
}

.redis-body {
  padding: 0;
  background: #020617;
}

.redis-table-wrapper {
  overflow-x: auto;
}

/* tabuľka v detaili */
table.redis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

table.redis-table thead {
  background: #020617;
}

table.redis-table th,
table.redis-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148,163,184,0.25);
  vertical-align: top;
}

table.redis-table th {
  text-align: left;
  font-weight: 600;
  color: #d1d5db;
  font-size: 12px;
  white-space: nowrap;
}

table.redis-table td.db-col {
  width: 60px;
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
}

table.redis-table td.desc-col {
  width: 260px;
  color: #e5e7eb;
}

table.redis-table td.total-col {
  width: 120px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #fbbf24;
}

table.redis-table td.detail-col {
  font-size: 12px;
  text-align: right !important;
  padding-right: 16px;       /* vzduch napravo */
  line-height: 1.45;         /* lepšia čitateľnosť */
  white-space: nowrap;       /* žiadne lámanie prefixov */
}

/* riadky v tabuľke */
.redis-row:nth-child(odd) {
  background: #020617;
}

.redis-row:nth-child(even) {
  background: #020617;
}

/* zoznam prefixov v poslednom stĺpci */
.redis-prefix-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.redis-prefix-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}

.redis-prefix-label {
  color: #e5e7eb;
}

.redis-prefix-count {
  font-variant-numeric: tabular-nums;
  color: #f9fafb;
  font-weight: 500;
  white-space: nowrap;
}

.redis-prefix-item--other .redis-prefix-label {
  color: #9ca3af;
}

/* info text pod tabuľkou */
.redis-footer-note {
  padding: 8px 12px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #9ca3af;
  border-top: 1px solid rgba(148,163,184,0.25);
}

.redis-footer-note strong {
  color: #fbbf24;
  font-weight: 600;
}

.redis-footer-note code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 0px;
  background: rgba(15,23,42,0.8);
  border: 1px solid rgba(148,163,184,0.4);
  color: #facc15;
}

/* spodné tlačidlá Zavrieť / Obnoviť */
.redis-detail-buttons {
  padding: 10px 12px 12px;
  text-align: right;
  border-top: 1px solid rgba(148,163,184,0.25);
}

/* na mobile trochu menšie paddingy */
@media (max-width: 640px) {
  .redis-header {
    padding: 8px 10px;
  }

  table.redis-table th,
  table.redis-table td {
    padding: 6px 8px;
  }

  .redis-detail-buttons {
    padding: 8px 8px 10px;
  }
}