/* ====== BASE ====== */
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(247, 247, 247));
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

/* Form + Table wrapper */
.form-container,
.table-container {
    width: 100%;
    max-width: 950px;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(255, 255, 255));
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 8px;
}

/* Headings */
h1, h2 {
    text-align: center;
    margin-top: 0;
}

h1 {
    color: #fff;
    font-size: 25px;
}

h2 {
    color: rgb(71, 177, 255);
    font-size: 36px;
    font-weight: bold;
}

/* Forms & inputs */
form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

label {
    margin-right: 10px;
    font-weight: bold;
}

input[type="text"], select, input[type="search"] {
    padding: 6px 8px;
    border: 2px solid #cfcfcf; /* lebih tebal */
    border-radius: 4px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, select:focus, input[type="search"]:focus {
    border-color: #6fb3ff;
    box-shadow: 0 0 6px rgba(111,179,255,0.15);
}

/* Buttons */
button[type="submit"], .backup-button {
    padding: 8px 16px;
    background-color: rgb(94, 98, 221);
    border: 2px solid rgba(0,0,0,0.12);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    transition: transform .06s ease, box-shadow .06s ease;
}
button[type="submit"]:hover, .backup-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* ====== TABLE ====== */
/* Gunakan border yang tebal dan visible */
table {
    width: 100%;
    border-collapse: separate; /* agar border cell terlihat jelas */
    border-spacing: 0;
    margin-top: 20px;
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(255, 255, 255));
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 3px solid #2f2f2f; /* garis luar tebal */
    border-radius: 8px;
    overflow: hidden;
}

/* HEADER */
th {
    padding: 12px 16px;
    text-align: left;
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(245, 245, 245));
    font-weight: 600;
    color: #fff;
    border-right: 3px solid rgba(0,0,0,0.12); /* garis vertikal tebal antar kolom */
    border-bottom: 4px solid rgba(0,0,0,0.18); /* garis bawah header tebal */
}

/* SEL */
td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(0,0,0,0.12); /* garis antar baris tebal */
    border-right: 3px solid rgba(0,0,0,0.06);  /* garis vertikal antar kolom tebal */
    vertical-align: middle;
    background: transparent;
    color: #222;
}

/* Hapus garis kanan pada kolom terakhir */
td:last-child, th:last-child {
    border-right: none;
}

/* Baris ganjil/genap untuk kontras */
tbody tr:nth-child(odd) td {
    background: #efefef;
}
tbody tr:nth-child(even) td {
    background: #f7f7f7;
}

/* Jika menggunakan dark-mode class pada body */
body.dark-mode {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(34, 34, 34));
    color: #fff;
}

/* Override form + table container untuk mode gelap */
.dark-mode .form-container,
.dark-mode .table-container {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(51, 51, 51));
    color: #fff;
    box-shadow: 0 1px 3px rgba(255,255,255,0.03);
}

/* Header di dark mode */
.dark-mode th {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(85, 85, 85));
    color: #fff;
    border-right: 3px solid rgba(255,255,255,0.04);
    border-bottom: 4px solid rgba(0,0,0,0.25);
}

/* Baris di dark-mode */
.dark-mode tbody tr:nth-child(odd) td {
    background: linear-gradient(135deg, #2b2b2b, #272727);
}
.dark-mode tbody tr:nth-child(even) td {
    background: linear-gradient(135deg, #2f2f2f, #2a2a2a);
}
.dark-mode td {
    color: #e6eef3;
    border-bottom: 2px solid rgba(255,255,255,0.03);
}

/* ====== STATUS BADGE (On / Off) ====== */
/* Tambahkan kelas ini di markup untuk tampilan terbaik:
   e.g. <div class="status-badge status-on">On</div>
         <div class="status-badge status-off">Off</div>
*/
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 800;
    color: #fff;
    border: 3px solid rgba(0,0,0,0.18); /* tebal */
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-size: 14px;
    min-width: 56px;
    text-align: center;
    transition: transform .12s ease, opacity .12s ease;
    user-select: none;
}
.status-on, .status-up {
    background: linear-gradient(180deg,#37b24d,#2d9c3a);
    border-color: rgba(0,0,0,0.28);
}
.status-off, .status-down {
    background: linear-gradient(180deg,#d9534f,#b33a33);
    border-color: rgba(0,0,0,0.28);
}
.status-unknown {
    background: linear-gradient(180deg,#6c757d,#5a6268);
    border-color: rgba(0,0,0,0.18);
}

/* Sel container untuk status supaya mudah styling dan sorting */
td.status-cell {
    text-align: center;
    vertical-align: middle;
    padding: 10px 8px;
}

/* Jika markup Anda saat ini hanya teks "On"/"Off", gunakan selector ini untuk mempertegas */
td .status-up, td .status-down {
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    border: 3px solid rgba(0,0,0,0.12);
}

/* ====== KPI BOX (kotak) ====== */
/* Buat batas tebal dan counter lebih besar */
.kotak, .kotak2, .kotak3, .kotak4 {
    width: 120px;
    height: 78px;
    border: 3px solid rgba(0,0,0,0.35); /* lebih tebal */
    border-radius: 8px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* Warna dan teks */
.kotak {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(0, 187, 255));
}
.kotak2 {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(76, 175, 80));
}
.kotak3 {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(244, 67, 54));
}
.kotak4 {
    background: linear-gradient(135deg, rgb(36, 42, 47), rgb(217, 168, 7));
}

.kotak .active-users-label,
.kotak2 .up-ap-label,
.kotak3 .down-ap-label,
.kotak4 .down-ap-label {
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.kotak .active-users-count,
.kotak2 .up-ap-count,
.kotak3 .down-ap-count,
.kotak4 .cpu-status-count {
    color: white;
    font-size: 34px;
    font-weight: 900;
    margin-top: 6px;
}

/* Flex wrapper untuk kotak (agar tetap inline) */
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-container .kotak,
.form-container .kotak2,
.form-container .kotak3,
.form-container .kotak4 {
    display: inline-flex;
}

/* ====== SMALL UI TWEAKS ====== */
/* anchor icons inside td */
td a, td a i {
    text-decoration: none !important;
}

/* "since" label (ap-since) */
.ap-since {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.65);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    float: right;
    text-align: right;
}
.dark-mode .ap-since {
    background: #555;
    color: #d6d2d2;
}
.ap-since.off {
    color: #ff6b6b;
}
.dark-mode .ap-since.off {
    color: #ff6b6b;
}

/* Menu slide (jika ada elemen #slideMenu) */
#slideMenu {
    border: 3px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    background-color: #222;
}
#slideMenu .menu-item {
    border-bottom: 2px solid #444;
    padding: 12px 18px;
    color: #ddd;
}

/* ====== NAMA AP (PERUBAHAN: perbesar teks) ====== */
/* Opsi tanpa mengubah HTML: target kolom ke-2 (Nama AP) */
table th:nth-child(2),
table td:nth-child(2) {
  font-size: 1.20rem; /* Lebih besar; sesuaikan jika perlu */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #1f2933;
}

/* Jika body dalam dark-mode, sesuaikan warna */
body.dark-mode table th:nth-child(2),
body.dark-mode table td:nth-child(2) {
  color: #ffffff;
}

/* Opsi tambahan (lebih robust): class .ap-name bila Anda menambahkannya di server-side */
td.ap-name, th.ap-name {
  font-size: 1.20rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2933;
}
body.dark-mode td.ap-name, body.dark-mode th.ap-name {
  color: #fff;
}

/* Sesuaikan ukuran pada layar kecil agar tidak tumpah */
@media (max-width: 760px) {
  table th:nth-child(2),
  table td:nth-child(2),
  td.ap-name, th.ap-name {
    font-size: 18px;
  }
}

/* Responsive */
@media (max-width: 760px) {
    .kotak, .kotak2, .kotak3, .kotak4 { width: 45%; font-size: 13px; height: 72px; }
    th, td { padding: 10px; font-size: 13px; }
}

/* NOTE:
   Jika inline style di HTML (mis. style="border: ...") menimpa aturan ini, tambahkan !important
   hanya pada properti yang memang perlu dipaksa, contoh:
   td { border-right: 3px solid #333 !important; }
*/