/* General Styles */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px;
}

h2 {
    color: #333;
}

/* Button Styles */
.massive-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.massive-btn:hover {
    background-color: #0056b3;
}

/* Table Styles */
table {
    width: 80%; /* Lebar tabel 80% dari parent, bisa disesuaikan */
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 14px; /* Ukuran font lebih kecil */
    text-align: left;
}

th, td {
    padding: 6px 8px; /* Mengurangi padding untuk membuat tabel lebih kecil */
    border: 1px solid #ddd;
}

th {
    background-color: #f4f4f4;
    color: #333;
    text-align: center; /* Lebih rapi jika diatur ke tengah */
}

td {
    vertical-align: middle;
    text-align: center;
    font-size: 12px; /* Ukuran font teks di sel lebih kecil */
}

/* Button Styles */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 4px 8px; /* Mengurangi padding pada tombol */
    cursor: pointer;
    font-size: 12px; /* Ukuran font tombol lebih kecil */
    border-radius: 4px;
    margin: 2px 4px; /* Menambah margin vertikal dan horizontal untuk jarak antar tombol */
}

/* Buttons inside table cells need proper spacing */
td button {
    margin: 2px 4px; /* Spasi antar tombol dalam sel tabel */
    display: inline-block; /* Pastikan tombol inline-block untuk jarak yang tepat */
}

/* Msg Result Column */
td.msg-result {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultgambar {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultstb {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultups {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultnvr {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultcctv {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}


td.msg-resultfinal {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultbinver {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

td.msg-resultupdaterver {
    width: 200px; /* Mempersempit kolom hasil pesan */
    word-wrap: break-word;
}

/* Action column styling for multiple buttons */
.action-column {
    /* Action column - contains multiple buttons */
    white-space: normal; /* Allow text/buttons to wrap */
    word-wrap: break-word;
    min-width: 400px; /* Minimum width to accommodate buttons */
    text-align: left; /* Left align buttons for better readability */
    padding: 8px; /* More padding for button-heavy column */
}

.action-column button {
    margin: 3px 5px; /* More spacing between buttons in Action column */
    display: inline-block;
    vertical-align: top; /* Align buttons to top when wrapping */
}

/* Responsive Styles */
@media (max-width: 768px) {
    table {
        font-size: 12px; /* Mengurangi font pada layar kecil */
    }

    th, td {
        padding: 4px; /* Mengurangi padding pada layar kecil */
    }

    button {
        padding: 4px 6px; /* Mengurangi padding tombol pada layar kecil */
        font-size: 10px; /* Ukuran font tombol lebih kecil pada layar kecil */
        margin: 2px 3px; /* Pertahankan margin yang cukup pada layar kecil */
    }

    td button {
        margin: 2px 3px; /* Spasi antar tombol dalam sel tabel pada layar kecil */
    }

    /* Action column mobile styling */
    .action-column {
        min-width: 200px; /* Reduced minimum width on mobile */
        padding: 6px;
    }

    .action-column button {
        margin: 2px 3px; /* Tighter spacing on mobile */
        font-size: 10px; /* Smaller font for mobile */
        padding: 3px 6px; /* Smaller padding on mobile */
    }
}


/* Specific button styles (e.g., massive-btn) inherit the mobile spacing */
.massive-btn,
.update-btn,
.vpn-btn,
.status-btn,
.refresh-btn,
.terminate-btn,
.modeminfo-btn,
.auto-btn,
.subscribe-btn,
.unsubscribe-btn,
.checkdevice-btn,
.ss-btn,
.refreshapi-btn,
.getip-btn {
    margin-bottom: 10px; /* Additional spacing in mobile for each button class */
}
.subscribe-btn {
    background-color: #6d5612; /* Yellow for subscribe */
}
.subscribe-btn:hover {
    background-color: #e0a800; /* Darker yellow */
}
.unsubscribe-btn {
    background-color: #0c21d8; /* Red for unsubscribe */
}
.unsubscribe-btn:hover {
    background-color: #0c21d8; /* Darker red */
}
.checkdevice-btn {
    background-color: #942a56; /* Red for check device */
}
.checkdevice-btn:hover {
    background-color: #942a56; /* Darker red */
}
.ss-btn {
    background-color: #687a28; /* Red for check device */
}
.ss-btn:hover {
    background-color: #687a28; /* Darker red */
}
.refreshapi-btn {
    background-color: #7523b8; /* Red for check device */
}
.refreshapi-btn:hover {
    background-color: #c9a9b6; /* Darker red */
}


/* Additional Button Colors */
.update-btn {
    background-color: #28a745; /* Green for update */
}

.update-btn:hover {
    background-color: #218838; /* Darker green */
}

.vpn-btn {
    background-color: #17a2b8; /* Blue for VPN */
}

.vpn-btn:hover {
    background-color: #138496; /* Darker blue */
}

.status-btn {
    background-color: #c733ff; /* Purple for status */
}

.status-btn:hover {
    background-color: #a826d7; /* Darker purple */
}

.refresh-btn {
    background-color: #7133ff; /* Dark blue for refresh */
}

.refresh-btn:hover {
    background-color: #6028d3; /* Darker blue */
}

.terminate-btn {
    background-color: #dc3545; /* Red for delete */
}
.modeminfo-btn {
    background-color: #dc3545; /* Red for modem info */
}
.auto-btn {
    background-color: #12d122; /* Red for delete */
}

.terminate-btn:hover {
    background-color: #c82333; /* Darker red */
}
.modeminfo-btn:hover {
    background-color: #c82333; /* Darker red */
}
.auto-btn:hover {
    background-color: #06eb38; /* Darker red */
}

.getip-btn {
    background-color: #9b780e; /* Yellow for subscribe */
}

.getip-btn:hover {
    background-color: #9b780e; /* Darker yellow */
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 5px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.pagination button:hover {
    background-color: #0056b3;
}

.pagination button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Add this CSS rule for Msg Result column */
td.msg-result {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

td.msg-resultgambar {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

td.msg-resultstb {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

td.msg-resultups {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

td.msg-resultnvr {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

td.msg-resultcctv {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

td.msg-resultfinal {
    width: 300px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
}

/* Responsive Styles */
@media (max-width: 768px) {
    h2 {
        font-size: 24px; /* Adjust heading size for smaller screens */
    }

    .massive-btn {
        padding: 8px 16px; /* Smaller padding on mobile */
        font-size: 14px; /* Smaller font size on mobile */
    }

    table {
        width: 100%; /* Ensure full width on small screens */
        font-size: 14px; /* Adjust font size for smaller screens */
        overflow-x: auto; /* Allow horizontal scrolling */
        display: block; /* Make the table block-level */
    }

    th, td {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    button {
        padding: 6px 10px; /* Smaller buttons on mobile */
        font-size: 12px; /* Smaller font on mobile */
    }

    .pagination {
        flex-direction: column; /* Stack pagination buttons vertically on small screens */
    }

    .pagination button {
        margin: 5px 0; /* Space out pagination buttons */
    }
}