/* Server monitor: tabela se prikazuje kao kartice (box po serveru), bez izgleda tabele. */

/* sakrij zaglavlje tabele */
.table-responsive table.tablesorter > thead { display: none !important; }

/* tabela i redovi kao blokovi */
.table-responsive table.tablesorter,
.table-responsive table.tablesorter > tbody {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
}
.table-responsive table.tablesorter > tbody > tr {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 10px 0 !important;
  padding: 10px 12px !important;
  background: rgba(10, 16, 24, 0.85) !important;
  border: 1px solid #2a3a4f !important;
  border-radius: 4px !important;
}
.table-responsive table.tablesorter > tbody > tr.expand-child {
  margin-top: -10px !important;
  border-top: 0 !important;
  background: rgba(10, 16, 24, 0.6) !important;
}

/* celije: zajednicki stil */
.table-responsive table.tablesorter > tbody > tr > td {
  display: block !important;
  border: 0 !important;
  padding: 4px 8px !important;
  width: auto !important;
  box-sizing: border-box !important;
  text-align: left !important;
  background: transparent !important;
}

/* skriveni ID i prazan vlasnik u drugom redu */
.table-responsive table.tablesorter td.serverId,
.table-responsive table.tablesorter th.serverId,
.table-responsive table.tablesorter > tbody > tr.expand-child > td.owner {
  display: none !important;
}

/* glavni red servera */
.table-responsive table.tablesorter > tbody > tr.maintr > td.serverName { flex: 1 1 200px !important; font-weight: bold; }
.table-responsive table.tablesorter > tbody > tr.maintr > td.serverIPAddress { flex: 0 1 auto !important; }
.table-responsive table.tablesorter > tbody > tr.maintr > td.owner { flex: 0 1 auto !important; }
.table-responsive table.tablesorter > tbody > tr.maintr > td:first-child,
.table-responsive table.tablesorter > tbody > tr.maintr > td:nth-child(2) { flex: 0 0 auto !important; }

/* dugmici za operacije (zaustavi/restartuj) */
.table-responsive table.tablesorter td.operations { flex: 0 0 auto !important; }

/* ekspanzija: kontrole i mapa u jednom redu */
.table-responsive table.tablesorter > tbody > tr.expand-child > td[colspan] {
  flex: 1 1 320px !important;
  padding: 0 !important;
}
.table-responsive table.tablesorter > tbody > tr.expand-child > td.operations {
  flex: 0 0 auto !important;
  display: block !important;
}

/* mreza dugmadi za operacije */
.table-responsive .monitorButtonContainer {
  display: grid !important;
  grid-template-columns: repeat(2, 150px) !important;
  gap: 6px !important;
  justify-content: start !important;
}

/* telefon: sve u jednu kolonu */
@media (max-width: 640px) {
  .table-responsive table.tablesorter > tbody > tr > td { flex: 1 1 100% !important; }
  .table-responsive .monitorButtonContainer { grid-template-columns: 1fr !important; }
}

/* ukloni prazan prostor ispod kartica (rezerva za donji skrol i donje margine) */
.table-responsive {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
.table-responsive > table,
.table-responsive table.tablesorter {
  margin-bottom: 0 !important;
}
.table-responsive table.tablesorter > tbody > tr:last-child {
  margin-bottom: 0 !important;
}
.table-responsive table.tablesorter > tbody > tr.expand-child > td {
  padding-bottom: 0 !important;
}
.table-responsive #refreshed-0,
.table-responsive .monitor-1,
.table-responsive .monitor-2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* samo PC: ukloni prazan prostor ispod tabele servera (glavni box i prazni clear blok) */
@media (min-width: 960px) {
  .main.main-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }
  .main.main-content > .table-responsive + #translation,
  .main.main-content > .table-responsive ~ .clear {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}