/* public_html/assets/css/summary_card.css */
/* Pastikan Anda sudah menyertakan Font Awesome di bagian HTML Anda: */
/* */
/* Container untuk semua summary cards */
.summary-cards-container {
display: grid;
/* --- PERUBAHAN DI SINI --- */
/* Untuk desktop: Definisikan 5 kolom yang sama (1fr) agar kartu "Kondisi Ruangan" bisa span 2 kolom */
grid-template-columns: repeat(5, 1fr);
/* --- AKHIR PERUBAHAN --- */
gap: 5px; /* Jarak antar kartu */
padding: 20px; /* Padding di sekitar seluruh container kartu */
align-items: start; /* Sejajakan item ke awal area grid */
max-width: 100%; /* Pastikan tidak meluap */
box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar/tinggi */
}
/* Styling untuk setiap summary card individual */
.summary-card {
background-color: #1a237e; /* Biru gelap, mirip sidebar */
color: #FFFFFF; /* Teks putih agar kontras */
border-radius: 8px;
padding: 6px; /* Mengurangi padding untuk tinggi lebih ringkas */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center; /* Pusatkan konten secara horizontal */
justify-content: center; /* Pusatkan konten secara vertikal */
text-align: center;
height: 90px; /* Mengurangi tinggi card untuk tampilan lebih ringkas */
/* Pastikan konten muat */
overflow: hidden; /* Sembunyikan konten yang meluap */
box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar/tinggi */
/* Default: setiap kartu standar mengambil 1 kolom */
grid-column: span 1; /* Secara eksplisit menyatakan mengambil 1 kolom */
}
/* Styling untuk container ikon dan judul (misal: (ICON) Penerangan) */
.summary-card-header {
display: flex; /* Mengatur ikon dan judul sejajar */
align-items: center; /* Sejajakan secara vertikal */
justify-content: center; /* Pusatkan secara horizontal */
margin-bottom: 4px; /* Mengurangi jarak */
}
/* Styling icon */
.summary-card-icon {
font-size: 16px; /* Sedikit lebih kecil */
margin-right: 4px; /* Mengurangi jarak */
margin-bottom: 0;
}
/* Styling judul (misal: Penerangan, Pendingin) */
.summary-card-title {
font-size: 11px; /* Sedikit lebih kecil */
font-weight: bold;
margin-bottom: 0;
line-height: 1.2;
}
/* Styling untuk garis putih di bawah judul */
.summary-card-line {
width: 80%; /* Lebar garis, bisa disesuaikan */
height: 1px; /* Sedikit lebih tipis */
background-color: #FFFFFF; /* Warna putih */
margin: 0 auto 8px auto; /* Mengurangi margin bawah */
}
/* Styling nilai utama (angka-angka) */
.summary-card-value {
font-size: 14px; /* Sedikit lebih kecil */
font-weight: bold;
line-height: 1.1;
margin: 0;
}
/* Styling unit (misal: Watt, Orang, Unit, m²) */
.summary-card-unit {
font-size: 9px; /* Sedikit lebih kecil */
opacity: 0.8;
margin-top: 1px;
}
/* Styling untuk grup data (misal: "2 Unit" atau "0.0 m²") */
.summary-card-data-group {
display: flex;
flex-direction: column; /* Ini yang membuat nilai dan unit bersusun */
align-items: center;
margin-bottom: 0;
}
/* Styling untuk container nilai sejajar di kartu-kartu yang terbagi (Penerangan, Pendingin, Peralatan, Dimensi Ruangan) */
.summary-card-values-row {
display: flex;
align-items: center; /* Sejajakan secara vertikal */
justify-content: center; /* Pusatkan secara horizontal */
gap: 15px; /* Mengurangi jarak */
margin-top: 5px;
}
/* Styling untuk pemisah vertikal */
.summary-card-vertical-separator {
width: 1px; /* Ketebalan garis */
height: 30px; /* Mengurangi tinggi garis */
background-color: rgba(255, 255, 255, 0.5); /* Warna putih dengan transparansi */
}
/* Styling khusus untuk kartu "Kondisi Ruangan" (yang terbagi dua) */
.summary-card.summary-card-split {
flex-direction: column;
justify-content: space-between;
padding: 6px; /* Mengurangi padding */
grid-column: span 2; /* Kartu ini akan merentang 2 kolom */
/* --- PERUBAHAN DI SINI --- */
/* Hapus 'grid-column-start: 1;' agar kartu mengalir secara alami setelah kartu-kartu sebelumnya */
/* grid-column-start: 1; */
/* --- AKHIR PERUBAHAN --- */
height: 90px; /* Sesuaikan tinggi dengan kartu lain */
}
/* Container untuk judul utama split card dan garis */
.summary-card-header-main {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 4px; /* Mengurangi jarak */
width: 100%;
}
.summary-card-split .summary-card-title { /* Judul utama di split card */
font-size: 11px; /* Sedikit lebih kecil */
font-weight: bold;
margin-bottom: 0;
line-height: 1.2;
}
/* Garis untuk kartu split juga */
.summary-card-split .summary-card-line {
width: calc(100% - 12px); /* Disesuaikan dengan padding baru */
height: 1px; /* Sedikit lebih tipis */
background-color: #FFFFFF;
margin: 0 auto 8px auto; /* Mengurangi margin bawah */
}
.summary-card-content-split {
display: flex;
width: 100%;
justify-content: center; /* Pusatkan kolom dan pemisah */
align-items: flex-start; /* Sejajakan konten ke atas kolom */
flex-grow: 1;
gap: 10px; /* Mengurangi jarak */
}
.summary-card-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-basis: 45%;
flex-grow: 1;
box-sizing: border-box;
padding: 0 3px; /* Mengurangi padding horizontal */
}
/* Styling untuk pemisah vertikal di kartu split */
.summary-card-split .summary-card-vertical-separator {
width: 1px; /* Ketebalan garis */
height: 40px; /* Mengurangi tinggi garis */
background-color: rgba(255, 255, 255, 0.5);
}
/* Container untuk sub-judul split card dan garis */
.summary-card-header-small {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 4px; /* Mengurangi jarak */
min-width: 80px; /* Sedikit lebih kecil */
}
.summary-card-title-small { /* Untuk sub-judul "Terkondisikan" & "Tidak Terkondisikan" */
font-size: 10px; /* Sedikit lebih kecil */
font-weight: bold;
margin-bottom: 0;
line-height: 1;
}
/* Garis khusus untuk sub-judul di kartu split */
.summary-card-line.summary-card-line-small {
width: 100%;
height: 1px;
background-color: #FFFFFF;
margin-top: 1px; /* Lebih dekat ke judul */
margin-bottom: 4px; /* Jarak ke nilai di bawahnya */
}
/* Styling untuk container yang menampung "0 Unit" dan "0.0 m²" secara sejajar di Kondisi Ruangan */
.summary-card-data-row-split {
display: flex;
justify-content: center;
align-items: baseline;
gap: 20px; /* Mengurangi jarak */
margin-top: 4px; /* Mengurangi margin */
flex-wrap: wrap;
}
.summary-card-column .summary-card-data-group .summary-card-unit {
font-size: 7px; /* Sedikit lebih kecil */
line-height: 1;
opacity: 0.7;
margin-top: 0;
}
/* Media Queries untuk responsivitas */
@media (max-width: 992px) {
.summary-cards-container {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Min lebar card lebih kecil */
gap: 4px;
padding: 15px;
}
.summary-card {
height: 80px; /* Mengurangi tinggi */
padding: 5px;
grid-column: span 1; /* Pastikan semua kartu kembali ke 1 kolom */
}
.summary-card.summary-card-split {
grid-column: span 1; /* Kartu split juga menjadi 1 kolom */
grid-column-start: auto; /* Reset agar tidak memaksa baris baru di mobile */
height: 80px; /* Sesuaikan tinggi */
}
.summary-card-icon {
font-size: 14px;
}
.summary-card-title {
font-size: 10px;
}
.summary-card-header {
margin-bottom: 3px;
}
.summary-card-line {
margin-bottom: 6px;
}
.summary-card-values-row {
gap: 10px;
}
.summary-card-value {
font-size: 16px;
}
.summary-card-unit {
font-size: 8px;
}
.summary-card-header-main {
margin-bottom: 3px;
}
.summary-card-split .summary-card-title {
font-size: 10px;
}
.summary-card-split .summary-card-line {
width: calc(100% - 10px);
}
.summary-card-content-split {
gap: 8px;
}
.summary-card-column {
padding: 0 2px;
}
.summary-card-header-small {
margin-bottom: 3px;
min-width: 70px;
}
.summary-card-title-small {
font-size: 9px;
}
.summary-card-line.summary-card-line-small {
margin-bottom: 3px;
}
.summary-card-data-row-split {
gap: 10px;
}
.summary-card-column .summary-card-data-group .summary-card-unit {
font-size: 6px;
}
.summary-card-vertical-separator {
height: 25px;
}
.summary-card-split .summary-card-vertical-separator {
height: 35px;
}
}
@media (max-width: 768px) {
.summary-cards-container {
grid-template-columns: 1fr;
gap: 8px;
padding: 10px;
}
.summary-card {
min-height: 80px;
padding: 8px;
}
.summary-card.summary-card-split {
min-height: 120px;
}
.summary-card-icon {
font-size: 18px;
}
.summary-card-title {
font-size: 12px;
}
.summary-card-header {
margin-bottom: 5px;
}
.summary-card-line {
margin-bottom: 10px;
}
.summary-card-values-row {
gap: 8px;
}
.summary-card-value {
font-size: 20px;
}
.summary-card-unit {
font-size: 10px;
}
.summary-card-header-main {
margin-bottom: 5px;
}
.summary-card-split .summary-card-title {
font-size: 11px;
}
.summary-card-split .summary-card-line {
width: calc(100% - 16px);
}
.summary-card-header-small {
margin-bottom: 5px;
min-width: 80px;
}
.summary-card-title-small {
font-size: 10px;
}
.summary-card-line.summary-card-line-small {
margin-bottom: 5px;
}
.summary-card-data-row-split {
gap: 8px;
}
.summary-card-column .summary-card-data-group .summary-card-unit {
font-size: 8px;
}
.summary-card-vertical-separator {
display: none;
}
}