/* public_html/asset/css/home.css */

/* General Reset & Body */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f2f5; /* Light grey background */
  display: flex;
  min-height: 100vh;
}

.container {
  display: flex;
  width: 100%;
}

/* Sidebar */
.sidebar {
  width: 250px; /* Fixed width */
  background-color: #1a237e; /* Dark blue, sesuai dengan CSS yang Anda berikan */
  color: white; /* Warna teks menu tetap putih agar kontras dengan sidebar biru gelap */
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  /* Pastikan tidak ada properti background-image di sini yang memuat pola */
}

/* Area di sekitar logo */
.sidebar-logo {
  text-align: center;
  margin-bottom: 25px; /* Jarak antara area logo dan menu pertama */
  background-color: white; /* Latar belakang putih untuk area logo */
  padding: 11.5px 0; /* Padding atas/bawah untuk ruang putih di sekitar logo */
}

/* Lingkaran tempat logo berada */
.circular-logo {
  width: 100px; /* Ukuran lingkaran logo */
  height: 100px; /* Ukuran lingkaran logo */
  background-color: white; /* Background putih untuk lingkaran itu sendiri */
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #cccccc;
  overflow: hidden;
}

/* Gambar logo di dalam lingkaran */
.circular-logo img {
  max-width: 100%; /* Pastikan gambar tidak melebihi lebar lingkaran */
  max-height: 100%; /* Pastikan gambar tidak melebihi tinggi lingkaran */
  object-fit: contain; /* Memastikan seluruh gambar terlihat dan diskalakan */
  display: block; /* Menghilangkan spasi ekstra di bawah gambar */
}

/* NEW: Project Data Section Styling */
.sidebar-section-title {
    color: white;
    font-weight: bold;
    padding: 10px 20px; /* Padding untuk judul section */
    margin-top: 20px; /* Jarak di atas judul section */
    border-top: 1px solid rgba(255,255,255,0.1); /* Garis di atas judul */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Garis di bawah judul */
    text-transform: uppercase;
    font-size: 14px;
}

.tree-view {
    list-style: none;
    padding: 0;
    margin: 0;
    color: white;
    padding-bottom: 10px; /* Padding di bawah seluruh tree view */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Garis di bawah seluruh tree view */
}

.tree-view .tree-item {
    padding: 5px 20px; /* Padding untuk setiap item di tree */
    display: flex;
    align-items: center;
    cursor: pointer; /* Menunjukkan bahwa item bisa diklik */
    position: relative;
    font-size: 14px; /* Ukuran font konsisten */
}

.tree-view .tree-item:hover {
    background-color: rgba(255,255,255,0.1); /* Efek hover ringan */
}

/* Styling untuk panah expand/collapse */
.tree-view .tree-toggle {
    display: inline-block;
    width: 15px; /* Ruang untuk panah */
    text-align: center;
    margin-right: 5px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    cursor: pointer; /* Membuat panah bisa diklik */
}

.tree-view .tree-toggle.expanded::before {
    content: 'v'; /* Panah ke bawah */
}

.tree-view .tree-toggle.collapsed::before {
    content: '>'; /* Panah ke kanan */
}

.tree-view .folder-icon {
    margin-right: 8px;
    font-size: 16px;
    line-height: 1; /* Memastikan ikon tidak menambah tinggi ekstra */
}

.tree-view .nested {
    list-style: none;
    padding-left: 20px; /* Indentasi untuk item bersarang */
    margin: 0;
    display: none; /* Tersembunyi secara default */
}

.tree-view .nested.active {
    display: block; /* Tampilkan saat aktif */
}

/* Sesuaikan padding untuk item bersarang agar tetap sejajar */
.tree-view .nested .tree-item {
    padding-left: 0; /* Reset padding, biarkan parent .nested yang menangani indentasi */
}
/* END NEW Project Data Section Styling */


.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar-nav li:last-child a {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-nav li a:hover,
.sidebar-nav li:first-child a { /* Efek untuk "NEW" dan hover pada item menu */
  background-color: #87CEEB; /* Biru muda */
  color: #1a237e; /* Biru gelap untuk teks */
}

.sidebar-nav .icon {
  margin-right: 15px;
  font-size: 20px;
}

/* Main Content */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5; /* Light grey background for main content area */
}

/* Header */
.header {
  background-color: white;
  padding: 41.5px 20px 56.5px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.header-left {
  /* Div ini tetap ada sebagai placeholder untuk menjaga layout flex di desktop */
}

.header-center {
  text-align: center;
  flex-grow: 1;
}

.header-center h1 {
  margin: 0;
  font-size: 32px;
  color: #1a237e; /* Dark blue */
}

.header-right {
  /* Tidak ada styling flex khusus karena hanya berisi satu elemen (logo) */
}

.header-right .enerco-nusantara-logo {
  height: 80px; /* Tinggi logo EnerCo Nusantara Engineering */
  width: auto; /* Memastikan lebar menyesuaikan secara proporsional */
}

/* Styling untuk subtitle yang sekarang absolute */
.header .header-subtitle {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0;
  white-space: nowrap;
  text-align: left;
}

.header-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #1a237e; /* Dark blue line */
}

/* Info Cards Section */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive cards */
  gap: 15px;
  padding: 20px;
  background-color: #f0f2f5; /* Light grey */
}

/* Styling umum untuk semua card */
.card {
  background-color: #1a237e; /* Dark blue */
  color: white;
  border-radius: 8px;
  padding: 10px; /* Mengurangi padding */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-height: 90px; /* Mengurangi min-height */
  position: relative; /* Penting untuk positioning absolut elemen di dalamnya */
  display: block; /* Default block, akan di-override oleh flex untuk card-split */
}

/* Styling untuk kelompok icon dan label di pojok kiri atas */
.card-top-left {
  position: absolute;
  top: 10px; /* Jarak dari atas */
  left: 10px; /* Jarak dari kiri */
  display: flex;
  align-items: center;
}

.card-top-left .icon {
  font-size: 24px; /* Ukuran ikon lebih kecil */
  margin-right: 5px; /* Jarak antara ikon dan label */
  margin-top: 0; /* Hapus margin-top yang tidak perlu */
}

.card-top-left .label {
  font-size: 14px; /* Ukuran font label lebih kecil */
  font-weight: bold;
  margin-top: 0; /* Hapus margin-top yang tidak perlu */
}

/* Styling untuk kelompok value dan unit di tengah card */
.card-center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Memusatkan elemen secara sempurna */
  text-align: center;
  width: calc(100% - 20px); /* Agar elemen di dalamnya bisa diatur lebarnya */
}

/* General styles for value/unit in other cards (Lampu, AC, Elektronik, Okupansi) */
.card-center-content > .value { /* Target direct children */
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

.card-center-content > .unit { /* Target direct children */
  font-size: 14px;
  margin-top: 5px;
}

/* Sembunyikan icon dan label lama dari card biasa (jika ada) */
.card > .icon,
.card > .label {
    display: none;
}

/* Styling khusus untuk CARD RUANGAN */
.card-center-content .ruangan-data-row {
    display: flex;
    justify-content: center; /* Pusatkan secara horizontal */
    align-items: center; /* Pusatkan kedua blok secara vertikal relatif satu sama lain */
    gap: 40px; /* Jarak antara "36 Unit" dan "9005.3 m²" diperlebar */
    flex-wrap: wrap; /* Izinkan wrapping pada layar kecil */
}

.card-center-content .ruangan-main-stat,
.card-center-content .ruangan-sub-stat {
    display: flex;
    flex-direction: column; /* Tumpuk nilai dan unit secara vertikal */
    align-items: center; /* Pusatkan nilai dan unit secara horizontal dalam kolomnya */
}

.card-center-content .ruangan-main-stat .value {
    font-size: 24px; /* Ukuran font untuk 36 */
    font-weight: bold;
}
.card-center-content .ruangan-main-stat .unit {
    font-size: 14px; /* Ukuran font untuk Unit */
    margin-top: 2px; /* Jarak di bawah nilai */
}

.card-center-content .ruangan-sub-stat .sub-value {
    font-size: 24px; /* Ukuran font untuk 9005.3 dibuat sama dengan 36 */
    font-weight: bold;
}
.card-center-content .ruangan-sub-stat .sub-unit {
    font-size: 14px; /* Ukuran font untuk m² dibuat sama dengan Unit */
    margin-top: 2px; /* Jarak di bawah nilai */
}


/* CARD SPLIT - TIDAK BERUBAH DARI DESAIN SEBELUMNYA */
.card-split {
  display: flex; /* Pertahankan flexbox untuk card split */
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.card-split .split-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5px;
  flex: 1;
}

.card-split .split-section:first-child {
  border-right: 1px solid rgba(255,255,255,0.3);
}

.card-split .split-label {
  font-size: 14px;
  margin-bottom: 5px;
}
.card-split .split-value {
  font-size: 22px;
  font-weight: bold;
}
.card-split .split-unit {
  font-size: 12px;
  margin-top: 2px;
}


/* Bottom Sections (Grafik & Sheet) */
.bottom-sections {
  display: flex;
  padding: 0 20px 20px 20px; /* Padding for bottom sections */
  gap: 20px;
  flex-grow: 1; /* Allow them to take remaining space */
}

.grafik-section,
.sheet-section {
  background-color: white; /* Background putih untuk kanvas grafik dan sheet */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex: 1; /* Take equal width */
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  align-items: center;
  color: #1a237e; /* Biru gelap untuk teks header (GRAFIK, SHEET) */
  margin-bottom: 15px;
}

.section-header .icon {
  font-size: 24px;
  margin-right: 10px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
}

.content-area {
  flex-grow: 1;
  background-color: white; /* Background putih untuk area konten di dalam grafik/sheet */
  border-radius: 5px;
  display: flex;
  justify-content: center; /* Center buttons */
  align-items: center; /* Center buttons */
  padding: 10px;
}

.btn-tabel,
.btn-tambah-ruangan {
  background-color: #1a237e; /* Dark blue button */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-tambah-ruangan {
  background-color: #9C27B0; /* A different purple for this button */
}

.btn-tabel:hover,
.btn-tambah-ruangan:hover {
  background-color: #0d124d; /* Slightly darker blue/purple on hover */
}

/* Responsive adjustments (basic) */
@media (max-width: 992px) {
  .sidebar {
      width: 200px;
  }
  .header-center h1 {
      font-size: 20px;
  }
  .header-center p {
      font-size: 12px;
  }
  .info-cards {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  /* Penyesuaian card untuk ukuran menengah */
  .card {
      min-height: 80px; /* Sedikit lebih pendek */
  }
  .card-top-left .icon {
      font-size: 20px;
  }
  .card-top-left .label {
      font-size: 12px;
  }
  .card-center-content > .value {
      font-size: 22px;
  }
  .card-center-content > .unit {
      font-size: 12px;
  }
  /* Ruangan card specific adjustments for medium screens */
  .card-center-content .ruangan-main-stat .value {
      font-size: 20px;
  }
  .card-center-content .ruangan-main-stat .unit {
      font-size: 12px;
  }
  .card-center-content .ruangan-sub-stat .sub-value {
      font-size: 20px;
  }
  .card-center-content .ruangan-sub-stat .sub-unit {
      font-size: 12px;
  }
  .bottom-sections {
      flex-direction: column;
  }
}

@media (max-width: 768px) {
  .container {
      flex-direction: column;
  }
  .sidebar {
      width: 100%;
      padding-top: 10px;
      flex-direction: row; /* Make sidebar horizontal */
      justify-content: space-around;
      flex-wrap: wrap;
      height: auto;
  }
  .sidebar-logo {
      display: none; /* Hide circular logo on small screens */
  }
  .sidebar-nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  .sidebar-nav li {
      flex: 1 1 auto; /* Allow items to grow/shrink */
      min-width: 120px; /* Minimum width for menu items */
  }
  .sidebar-nav li a {
      justify-content: center;
      text-align: center;
      flex-direction: column;
      padding: 10px 5px;
      border: none;
  }
  .sidebar-nav li a .icon {
      margin-right: 0;
      margin-bottom: 5px;
  }
  .header {
      flex-direction: column; /* Stack elements vertically */
      text-align: center; /* Center text globally in header */
      padding: 15px 10px 30px 10px; /* Adjusted padding-bottom to make space for subtitle */
      height: auto; /* Allow height to adjust */
      align-items: center; /* Center items horizontally in the column */
  }

  .header-left {
      display: none; /* Sembunyikan header-left yang kosong di mobile */
  }

  .header-center {
      flex-grow: 0; /* Jangan biarkan tumbuh */
      width: 100%; /* Ambil lebar penuh untuk memusatkan h1 */
      margin-bottom: 5px; /* Jarak di bawah h1 */
  }

  .header-center h1 {
      font-size: 20px; /* Ukuran font lebih kecil untuk judul mobile */
  }

  .header-right {
      margin-top: 0; /* Tidak ada margin tambahan, ini hanya logo */
  }

  .header-right .enerco-nusantara-logo {
      height: 60px; /* Logo lebih kecil untuk mobile */
  }

  .header .header-subtitle {
      position: absolute; /* Tetap absolute positioning */
      bottom: 10px; /* 5px di atas garis biru (garis 5px) */
      left: 50%; /* Pusatkan secara horizontal */
      transform: translateX(-50%); /* Sesuaikan untuk pemusatan yang sebenarnya */
      font-size: 12px; /* Ukuran font lebih kecil */
      color: #555;
      white-space: normal; /* Izinkan teks untuk membungkus jika terlalu panjang */
      width: calc(100% - 20px); /* Beri lebar agar bisa membungkus, mempertimbangkan padding */
      text-align: center; /* Pusatkan teks itu sendiri */
      font-weight: bold; /* Membuat teks menjadi bold untuk mobile juga */
  }

  .header-line {
      display: block; /* Pastikan garis terlihat */
      /* Properti position: absolute; bottom: 0; left: 0; width: 100%; height: 5px;
         sudah didefinisikan secara global dan akan diterapkan */
  }

  .info-cards {
      grid-template-columns: 1fr; /* Stack cards on very small screens */
  }
  /* Penyesuaian card untuk mobile */
  .card {
      min-height: 80px; /* Sama dengan ukuran menengah */
  }
  .card-top-left .icon {
      font-size: 20px;
  }
  .card-top-left .label {
      font-size: 12px;
  }
  .card-center-content > .value {
      font-size: 22px;
  }
  .card-center-content > .unit {
      font-size: 12px;
  }
  /* Ruangan card specific adjustments for mobile screens */
  .card-center-content .ruangan-main-stat .value {
      font-size: 20px;
  }
  .card-center-content .ruangan-main-stat .unit {
      font-size: 12px;
  }
  .card-center-content .ruangan-sub-stat .sub-value {
      font-size: 20px;
  }
  .card-center-content .ruangan-sub-stat .sub-unit {
      font-size: 12px;
  }
  .card-split {
      flex-direction: column;
  }
  .card-split .split-section:first-child {
      border-right: none;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      margin-bottom: 10px;
      padding-bottom: 10px;
  }
}