/* 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 */
}

.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 disesuaikan: 41.5px top/bottom untuk centering h1/logo,
     dan 15px ekstra di bottom untuk memberi ruang pada subtitle
     (subtitle 10px dari bottom, garis 5px, jadi 10+5=15px ruang tambahan) */
  padding: 41.5px 20px 56.5px 20px; /* 41.5px (top) + 80px (logo) + 41.5px (bottom content) + 15px (subtitle space) = 178px total height */
  display: flex;
  align-items: center; /* Memusatkan h1 dan logo secara vertikal */
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative; /* Penting untuk positioning absolut subtitle dan garis biru */
}

.header-left {
  /* Div ini tetap ada sebagai placeholder untuk menjaga layout flex di desktop */
  /* Tidak ada styling khusus karena subtitle dipindahkan keluar */
}

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

.header-center h1 {
  margin: 0;
  font-size: 40px;
  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; /* 10px di atas garis biru (garis 5px) */
  left: 20px; /* Rata kiri, sejajar dengan padding header */
  font-size: 20px;
  color: #333;
  margin: 0; /* Menghilangkan margin default dari tag p */
  white-space: nowrap; /* Mencegah teks pecah baris */
  text-align: left; /* Memastikan teks rata kiri */
}

.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 */
}

.card {
  background-color: #1a237e; /* Dark blue */
  color: white;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-height: 120px; /* Ensure consistent height */
}

.card .value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.card .unit {
  font-size: 14px;
  margin-top: 5px;
}

.card .icon {
  font-size: 36px;
  margin-top: 10px;
}

.card .label {
  font-size: 16px;
  margin-top: 10px;
  font-weight: bold;
}

.card .sub-value {
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
}

.card .sub-unit {
  font-size: 12px;
  margin-top: 2px;
}

.card-split {
  display: flex;
  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));
  }
  .card .value {
      font-size: 24px;
  }
  .card .icon {
      font-size: 30px;
  }
  .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 */
  }

  .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 */
  }
  .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;
  }
}