/* Style khusus untuk dashboard-klien.php */

/* --- 1. STATUS LIMIT BOX --- */
.limit-status-box {
    /* Margin bawah sudah diatur oleh .content-box di style.css */
}

.limit-status-wrapper {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem; /* Jarak antar teks status dan tombol */
}

.limit-status-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-brown); /* Cokelat Dirt */
    margin: 0;
    line-height: 1.5;
}

.public-limit-count {
    /* Angka limit publik menonjol */
    color: var(--accent-red); 
    font-size: 1.8rem;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
    display: inline-block; /* Agar transform bekerja jika diperlukan */
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
}


/* --- 2. GRID CONTAINER --- */

.tool-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 kolom di HP */
    gap: 1.5rem;
    padding: 1.5rem; /* Memberikan padding di sekitar grid, di dalam content-box */
}

/* 2 kolom di tablet */
@media (min-width: 640px) {
    .tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 kolom di desktop kecil/tablet besar */
@media (min-width: 900px) {
    .tool-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4 kolom di desktop besar (sesuai standar 4x4) */
@media (min-width: 1200px) {
    .tool-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================================== */
/* Penyesuaian tata letak kartu berdasarkan permintaan terakhir */
/* ========================================================== */

/* Pastikan grid 'flex' HANYA JIKA KOSONG agar pesan 'coming soon' bisa center */
.tool-grid.empty {
    display: flex; 
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Beri tinggi minimum agar pesan terlihat bagus */
}


/* --- 3. TOOL CARD (Tata Letak Baru) --- */

.tool-card {
    /* Mengambil style dari style.css: border, background */
    border: 2px solid var(--border-color); 
    background: var(--content-bg);
    box-shadow: 4px 4px 0px 0px var(--border-color); 
    
    /* Mengatur struktur kartu (Flexbox kolom) */
    display: flex;
    flex-direction: column; 
    justify-content: space-between; /* Konten di atas, footer (tombol) di bawah */
    transition: all 0.1s ease;
    height: 100%; 
    padding: 1rem; /* Padding internal kartu */
}

.tool-card:hover {
    box-shadow: 2px 2px 0px 0px var(--border-color);
    transform: translate(2px, 2px);
    cursor: default;
}

/* (Req 1, 2, 3) Konten utama dibuat center */
.tool-card-content {
    text-align: center; 
    padding-bottom: 0.5rem; /* Jarak sebelum footer */
    flex-grow: 1; /* Konten tumbuh untuk mendorong footer ke bawah */
}

/* (Req 1) Judul Tool */
.tool-card-title { 
    font-size: 1.4rem; /* Sedikit lebih besar */
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color-dark, #333);
}

/* (Req 2) Deskripsi */
.tool-description {
    font-size: 1.1rem; /* Sedikit lebih besar */
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    min-height: 40px; /* Jaga tinggi deskripsi agar rata */
}

/* (Req 3) Jumlah digunakan */
.tool-used {
    font-size: 1rem; /* Sedikit lebih besar */
    color: var(--accent-brown);
    margin-bottom: 1rem;
    display: block; /* Pastikan di bawah deskripsi */
    font-style: italic;
}

/* (Req 4, 5) Footer (Hanya tombol) */
.tool-card-footer {
    display: flex;
    justify-content: center; 
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
    margin-top: auto; /* Memastikan footer menempel di bawah */
}

/* (Req 4, 5) Tombol "Gunakan Tool" yang baru */
/* Menggunakan style .btn-launch dari style.css, namun di-override ukurannya */
.tool-card-footer .btn-launch {
    display: flex;
    flex-direction: column; /* Teks tombol di atas, biaya di bawah */
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    width: 100%; /* Tombol memenuhi lebar footer */
    padding: 0.75rem 0.5rem; 
    font-size: 1.4rem; /* Ukuran font tombol */
}

/* (Req 5) Badge biaya di dalam tombol */
.btn-cost-badge {
    font-size: 1.1rem; /* Ukuran font badge */
    font-weight: normal;
    background-color: rgba(0, 0, 0, 0.1); /* Badge transparan */
    border-radius: 4px;
    padding: 2px 8px;
    margin-top: 5px;
    display: inline-block;
}

/* --- 4. PESAN 'COMING SOON' --- */
.coming-soon-message {
    padding: 3rem 1.5rem;
    text-align: center;
    width: 100%;
    color: #777;
    background-color: #fcfcfc;
    border-radius: 8px;
    border: 1px dashed #ddd;
    margin: 1rem 0;
}
.coming-soon-message h2 {
    font-size: 2.2rem;
    color: var(--primary-color, #3498db);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.coming-soon-message p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}


/* --- 5. PAGINASI KHUSUS DASHBOARD --- */

.pagination-controls-container {
    padding: 1.5rem;
    border-top: 2px solid var(--border-color);
    background: #F8F8F8;
    text-align: center;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.page-status-text {
    font-size: 1.3rem;
    color: var(--text-color);
}

/* Tombol Paginasi */
.btn-paginate {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color); 
    background: #B0D9E8; /* Biru Muda */
    color: var(--text-color); 
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 3px 3px 0px 0px var(--border-color); 
    transition: all 0.1s ease;
}

.btn-paginate:hover {
    background-color: #8FBACF;
    box-shadow: 1px 1px 0px 0px var(--border-color);
    transform: translate(2px, 2px);
    text-decoration: none;
}

.disabled-link {
    background: #E0E0E0;
    color: #999;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 0.7;
}

.disabled-link:hover {
    box-shadow: none;
    transform: none;
    background: #E0E0E0;
}