/* ===========================
   Stylizacja strony klienci.php
   =========================== */

/* Wyszukiwarka */
#search {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#search:focus {
  outline: none;
  border-color: #22c55e; /* jasnozielony akcent */
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Tabela klientów */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

th {
  background: rgba(17, 24, 39, 0.7);
  color: var(--accent-green); /* nazwy kolumn na zielono */
  font-weight: 600;
  text-align: left;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

/* Przyciski w kolumnie "Akcje" (ułożenie pionowe zapewnia HTML/JS) */
.edit-btn,
.people-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all .2s ease;
}

.edit-btn {
  background: linear-gradient(180deg, #22c55e, #16a34a); /* zielony */
}

.people-btn {
  background: linear-gradient(180deg, #2563eb, #1d4ed8); /* niebieski */
}

.edit-btn:hover,
.people-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.02);
}

/* ===========================
   Responsywność (<= 700px)
   =========================== */
@media (max-width: 700px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
  }

  td {
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px;
  }

  /* etykiety kolumn na zielono w mobile */
  td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--accent-green);
    min-width: 40%;
  }
}
/* usuń — czerwony outline */
.delete-btn{
  color:#ef4444 !important;
  border:1px solid #ef4444 !important;
  background:transparent !important;
  box-shadow:0 2px 8px rgba(239,68,68,.15);
  font-weight:700;
}
.delete-btn:hover{
  background:rgba(239,68,68,.08) !important;
  filter:none;
}
.delete-btn:active{
  transform:translateY(1px);
}