/* ==================================
   Struktur Organisasi (CSS Grid - FINAL 4.2)
   PERBAIKAN GARIS DENGAN CSS GRID-AREA
   ================================== */

/* === 1. KONTROL PAN & ZOOM (TETAP SAMA) === */
.pan-zoom-container {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-color: #fcfcfc;
}
.zoom-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: flex;
  gap: 5px;
}
.zoom-controls button {
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  color: #333333;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.2s;
}
.zoom-controls button:hover {
  opacity: 1;
  background-color: #f5f5f5;
  border-color: #aaaaaa;
}
.zoom-controls button#zoom-reset-btn {
  font-size: 20px;
  line-height: 1.5;
}

/* === 2. KONTENER BAGAN (BARU) === */
.ogc-grid-container {
  width: 2000px;
  min-height: 900px;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: 50px 50px 150px 50px 50px 250px auto; /* 7 baris dengan tinggi berbeda */
  gap: 10px;
  cursor: grab;
  transform-origin: 0 0;
  transition: transform 0.2s ease-out;
  position: relative;
  user-select: none;
}
.ogc-grid-container.grabbing {
  cursor: grabbing;
}

/* === 3. KOTAK JABATAN (BOX STYLING) === */
.ogc-box {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  background-color: #fff;
  z-index: 5;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 35px;
}
.ogc-box.ogc-list {
  border: 1px solid #000;
  background: #fff; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  text-align: left;
  padding: 8px;
  font-weight: normal;
  align-items: flex-start;
  min-height: 0;
}
.ogc-box.ogc-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.ogc-box.ogc-list li {
  font-size: 11px;
  padding: 1px 0 1px 10px;
  position: relative;
}
.ogc-box.ogc-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 1px;
}
.ogc-list-title {
  font-weight: 700;
  font-size: 12px;
  padding-bottom: 5px;
  text-align: center;
}

/* === 4. PEWARNAAN (SESUAI GAMBAR) === */
#ogc-dir {
  background-color: #146A0E;
  color: #fff;
  border-color: #146A0E;
}
#ogc-jafung {
  background-color: #FFFBEB;
  border-color: #FDE68A;
}
#ogc-tu, #ogc-sub-umum, #ogc-sub-keu, #ogc-sub-sunprog {
  background-color: #F0FDF4;
  border-color: #A7F3D0;
}
#ogc-spi, #ogc-spi-list-1, #ogc-spi-list-2 {
  background-color: #FFFBEB;
  border-color: #FDE68A;
}
#ogc-bid-yan, #ogc-sek-yanmed, #ogc-sek-kep, #ogc-list-kep {
  background-color: #F0FDF4;
  border-color: #A7F3D0;
}
#ogc-bid-pen, #ogc-sek-penmed, #ogc-sek-penno, #ogc-list-penmed, #ogc-list-penno {
  background-color: #F0FDF4;
  border-color: #A7F3D0;
}
#ogc-bid-peng, #ogc-sek-sdm, #ogc-sek-mutu {
  background-color: #F0FDF4;
  border-color: #A7F3D0;
}
#ogc-spi-list-1, #ogc-spi-list-2,
#ogc-list-kep, #ogc-list-penmed, #ogc-list-penno { 
  background: #fff; 
  border-color: #000;
}

/* === 5. PENEMPATAN KOTAK (GRID-AREA) === */
#ogc-dir { grid-area: 1 / 10 / 2 / 12; }
#ogc-jafung { grid-area: 2 / 1 / 3 / 3; }
#ogc-tu { grid-area: 2 / 4 / 3 / 6; }
#ogc-spi { grid-area: 2 / 17 / 3 / 19; }
#ogc-sub-umum { grid-area: 3 / 3 / 4 / 5; }
#ogc-sub-keu { grid-area: 3 / 5 / 4 / 7; }
#ogc-sub-sunprog { grid-area: 3 / 7 / 4 / 9; }
#ogc-spi-list-1 { grid-area: 3 / 17 / 4 / 19; }
#ogc-spi-list-2 { grid-area: 3 / 19 / 4 / 21; }
#ogc-bid-yan { grid-area: 4 / 7 / 5 / 9; }
#ogc-bid-pen { grid-area: 4 / 11 / 5 / 13; }
#ogc-bid-peng { grid-area: 4 / 15 / 5 / 17; }
#ogc-sek-yanmed { grid-area: 5 / 6 / 6 / 8; }
#ogc-sek-kep { grid-area: 5 / 8 / 6 / 10; }
#ogc-sek-penmed { grid-area: 5 / 10 / 6 / 12; }
#ogc-sek-penno { grid-area: 5 / 12 / 6 / 14; }
#ogc-sek-sdm { grid-area: 5 / 14 / 6 / 16; }
#ogc-sek-mutu { grid-area: 5 / 16 / 6 / 18; }
#ogc-list-kep { grid-area: 6 / 8 / 7 / 10; }
#ogc-list-penmed { grid-area: 6 / 10 / 7 / 12; }
#ogc-list-penno { grid-area: 6 / 12 / 7 / 14; }

/* === 6. GARIS KONEKTOR (DIV - GRID-AREA) === */
.ogc-line {
  background-color: #94a3b8;
  z-index: 1; /* Di belakang box */
}

/* Garis Vertikal dari Direktur */
#line-v-dir {
  grid-area: 1 / 11 / 2 / 12;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto; /* just. center, margin-top */
}
/* Garis Horizontal Utama 1 */
#line-h-1 {
  grid-area: 2 / 2 / 3 / 18;
  height: 2px;
  width: 100%;
  align-self: start;
}
/* Garis Vertikal (dari Garis H 1 ke Box) */
#line-v-jafung {
  grid-area: 2 / 2 / 2 / 3;
  width: 2px;
  height: 10px; /* 10px */
  margin: 0 auto;
  align-self: start;
}
#line-v-tu {
  grid-area: 2 / 5 / 2 / 6;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-spi {
  grid-area: 2 / 18 / 2 / 19;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
  justify-self: start;
}

/* Garis Vertikal dari TU ke Garis H 2 */
#line-v-tu-down {
  grid-area: 2 / 5 / 3 / 6;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}
/* Garis Horizontal 2 (Anak TU) */
#line-h-2-tu {
  grid-area: 3 / 4 / 4 / 8;
  height: 2px;
  width: 100%;
  align-self: start;
}
/* Garis Vertikal ke Anak TU */
#line-v-sub-umum {
  grid-area: 3 / 4 / 3 / 5;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
  justify-self: start;
}
#line-v-sub-keu {
  grid-area: 3 / 6 / 3 / 7;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-sub-sunprog {
  grid-area: 3 / 8 / 3 / 9;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
  justify-self: start;
}

/* Garis Vertikal dari SPI ke Garis H List */
#line-v-spi-down {
  grid-area: 2 / 18 / 3 / 19;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
  justify-self: start;
}
/* Garis Horizontal List SPI */
#line-h-spi-list {
  grid-area: 3 / 18 / 4 / 20;
  height: 2px;
  width: 100%;
  align-self: start;
  margin: 20px 0 0 0;
}
/* Garis Vertikal ke List SPI */
#line-v-spi-list1 {
  grid-area: 3 / 18 / 3 / 19;
  width: 2px;
  height: 30px;
  margin: 20px auto 0 auto;
  align-self: start;
}
#line-v-spi-list2 {
  grid-area: 3 / 20 / 3 / 21;
  width: 2px;
  height: 30px;
  margin: 20px auto 0 auto;
  align-self: start;
}

/* Garis Vertikal dari Direktur ke Garis H Bidang */
#line-v-dir-down-long {
  grid-area: 2 / 11 / 4 / 12;
  width: 2px;
  height: 100%;
  margin: 0 auto;
}
/* Garis Horizontal 3 (Bidang) */
#line-h-3-bidang {
  grid-area: 4 / 8 / 5 / 16;
  height: 2px;
  width: 100%;
  align-self: start;
}
/* Garis Vertikal ke Bidang */
#line-v-bid-yan {
  grid-area: 4 / 8 / 4 / 9;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-bid-pen {
  grid-area: 4 / 12 / 4 / 13;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-bid-peng {
  grid-area: 4 / 16 / 4 / 17;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}

/* Garis Vertikal dari Bidang ke Garis H Seksi */
#line-v-bid-yan-down {
  grid-area: 4 / 8 / 5 / 9;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}
#line-v-bid-pen-down {
  grid-area: 4 / 12 / 5 / 13;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}
#line-v-bid-peng-down {
  grid-area: 4 / 16 / 5 / 17;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}
/* Garis Horizontal 4 (Seksi) */
#line-h-4-seksi {
  grid-area: 5 / 7 / 6 / 17;
  height: 2px;
  width: 100%;
  align-self: start;
}
/* Garis Vertikal ke Seksi */
#line-v-sek-yanmed {
  grid-area: 5 / 7 / 5 / 8;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-sek-kep {
  grid-area: 5 / 9 / 5 / 10;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-sek-penmed {
  grid-area: 5 / 11 / 5 / 12;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-sek-penno {
  grid-area: 5 / 13 / 5 / 14;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-sek-sdm {
  grid-area: 5 / 15 / 5 / 16;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}
#line-v-sek-mutu {
  grid-area: 5 / 17 / 5 / 18;
  width: 2px;
  height: 10px;
  margin: 0 auto;
  align-self: start;
}

/* Garis Vertikal dari Seksi ke List */
#line-v-sek-kep-down {
  grid-area: 5 / 9 / 6 / 10;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}
#line-v-sek-penmed-down {
  grid-area: 5 / 11 / 6 / 12;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}
#line-v-sek-penno-down {
  grid-area: 5 / 13 / 6 / 14;
  width: 2px;
  height: 100%;
  margin: 25px auto 0 auto;
}