/* ==========================================================================
     1. LAYOUT UTAMA
     ========================================================================== */
  .schedule-layout { 
      display: flex; flex-direction: column; 
      /* KUNCI 1: Kurangi jarak potong dari 15px jadi 6px saja biar turun mentok! */
      height: calc((100vh / var(--global-zoom)) - var(--topbar-tinggi) - var(--topbar-jarak-atas) - 2px); 
      /* KUNCI 2: Padding bawah sisa 6px (Cukup buat ngeliatin lengkungan) */
      padding: 0 var(--padding-x) 2px var(--padding-x); 
      overflow: hidden;
  }

  /* ==========================================================================
     2. TOP CONTROL BAR, KPI, & BUTTONS (MINIMALIST UI)
     ========================================================================== */
  /* Tombol Action (Pill / Kapsul 50px) */
  .tmc-action-btn { height: 38px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: 0.2s; border: 1px solid #cbd5e1; background: #fff; color: #475569; padding: 0 16px; }
  .tmc-action-btn:hover { background: #f8fafc; border-color: var(--tirta-blue); color: var(--tirta-blue); }
  .tmc-action-btn.icon-only { width: 38px; padding: 0; }
  
  /* Tombol New Schedule (Pill / Kapsul 50px) */
  .tmc-primary-btn { height: 38px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: 0.2s; background: var(--tirta-blue); border: none; color: white; padding: 0 20px; box-shadow: 0 4px 6px -1px rgba(48, 82, 138, 0.2); }
  .tmc-primary-btn:hover { background: #25416e; color: white; transform: translateY(-1px); box-shadow: 0 6px 8px -1px rgba(48, 82, 138, 0.3); }

  /* Legacy Header & KPI (Dipertahankan untuk fallback / kompatibilitas) */
  .header-row { padding: 10px 0; overflow: visible; }
  .kpi-inline {
      background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 50px; 
      height: 38px; display: inline-flex; align-items: center; padding: 0 14px; 
      box-shadow: 0 2px 4px rgba(0,0,0,0.02); white-space: nowrap;
  }
  .border-primary { border-color: rgba(48, 82, 138, 0.3) !important; }
  .border-warning { border-color: rgba(167, 135, 89, 0.3) !important; }
  .border-danger  { border-color: rgba(236, 54, 58, 0.3) !important; }
  .vertical-divider { width: 2px; height: 24px; background: rgba(0,0,0,0.08); border-radius: 2px; }

  /* ==========================================================================
     3. ADVANCED FILTER PANEL & MULTISELECT
     ========================================================================== */
  .filter-panel-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 16px; }

  /* MULTISELECT ASLI */
  .custom-multiselect { position: relative; width: 100%; height: 100%; cursor: pointer;}
  
  /* OVERRIDE Multiselect Header agar Kapsul 50px dan selaras tema baru */
  .custom-multiselect .multiselect-header { 
      background: #fff !important; border: 1px solid #cbd5e1 !important; height: 38px !important; 
      border-radius: 50px !important; padding: 0 16px !important; display: flex; align-items: center; 
      justify-content: space-between; gap: 8px; color: #475569; font-weight: 700; font-size: 0.8rem; transition: 0.2s;
  }
  .custom-multiselect .multiselect-header:hover { border-color: var(--tirta-blue) !important; background-color: #f8fafc !important; }

  .multiselect-dropdown { position: absolute; top: 120%; right: 0; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,0.1); z-index: 9999; display: none; max-height: 280px; overflow-y: auto; padding: 12px; min-width: 200px; }
  .multiselect-dropdown.show { display: block; animation: dropFade 0.2s ease; }
  .multiselect-dropdown label { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 0.85rem; cursor: pointer; border-radius: 8px; font-weight: 600; color:#1e293b; margin:0;}
  .multiselect-dropdown label:hover { background: #f0f4f8; color: #30528A; }
  .multiselect-dropdown input[type="checkbox"] { cursor: pointer; accent-color: #30528A; transform: scale(1.2); }
  .multiselect-dropdown input[type="radio"] { cursor: pointer; accent-color: #30528A; transform: scale(1.2); margin-right: 2px;}
  .divider { height: 1px; background: #e2e8f0; margin: 4px 0; }

  /* ==========================================================================
     4. ANIMASI LOADING OVERLAY (DASHBOARD-SYNCED SPINNER)
     ========================================================================== */
  /* Animasi Spin Tombol Refresh */
  .tmc-action-btn .fa-rotate-right { transition: transform 0.4s ease; }
  .tmc-action-btn:hover .fa-rotate-right { transform: rotate(180deg); }

  /* Overlay Blur (Tetap dipertahankan karena ini elegan) */
  .sch-loading-overlay { 
      position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
      /* Naikkan opasitas dari 0.6 ke 0.85 */
      background: rgba(255, 255, 255, 0.85); 
      backdrop-filter: blur(3px); 
      z-index: 50; display: flex; justify-content: center; align-items: center; border-radius: 8px; 
  }

  /* KUNCI: Spinner identik dengan Dashboard Anda */
  .mini-spinner { 
      width: 3.5rem; height: 3.5rem; border-radius: 50%; 
      border: 4px solid rgba(48, 82, 138, 0.1); 
      border-top-color: var(--tirta-blue); border-right-color: var(--tirta-red); 
      animation: tmc-spin-1 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; 
      position: relative; box-shadow: 0 0 15px rgba(48, 82, 138, 0.1); 
  }
  .mini-spinner::after { 
      content: ''; position: absolute; inset: 3px; border-radius: 50%; 
      border: 3px solid transparent; 
      border-top-color: var(--tirta-gold); border-left-color: var(--tirta-gold); 
      animation: tmc-spin-2 0.7s linear infinite reverse; 
  }

  /* Animasi putaran khusus (sesuai yang ada di Dashboard Anda) */
  @keyframes tmc-spin-1 {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  @keyframes tmc-spin-2 {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  /* ==========================================================================
     5. BODY WRAPPER & TABLE (FLEXBOX SEMPURNA - ANTI GAP)
     ========================================================================== */
  .schedule-body-wrapper {
      flex-grow: 1; height: 0; 
      display: flex; 
      flex-direction: row; 
      overflow: hidden; 
      width: 100%; /* WAJIB 100% */
  }
  
  /* MATIKAN SEMUA GAP BIAR GA ADA CELAH HANTU */
  .schedule-body-wrapper.show-sidebar { gap: 0px !important; }

  .schedule-main-card {
      background: #ffffff; 
      border-radius: 16px !important; /* 🔥 PAKSA LENGKUNG 16px 🔥 */
      border: 1px solid rgba(0,0,0,0.04);
      overflow: hidden !important; /* 🔥 KUNCI: Potong isi tabel yang nyoba bikin tajam sudutnya 🔥 */
      display: flex; 
      flex-direction: column;
      width: 100%; 
      flex-shrink: 1; 
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
  }
  
  /* ==========================================================================
     PERFECT STICKY HEADER (FIX GETAR & DOUBLE STICKY BUG)
     ========================================================================== */
  .table-responsive-wrapper { 
    height: 100%; 
    overflow: auto; /* Coba hapus !important dulu jika memungkinkan */
    background: #fff; 
    flex: 1 1 auto; 
    position: relative; 
    padding: 0; 
    margin: 0;

    /* 1. Muluskan scroll khusus di iOS/Safari Mobile */
    -webkit-overflow-scrolling: touch; 
    
    /* 2. Opsional: Gunakan ini sebagai ganti 'scroll-position' yang sudah mati */
    will-change: transform; 

    /* Catatan: -webkit-transform: translateZ(0); sengaja dihapus kecuali 
       memang tabelnya terbukti nge-lag parah di HP kentang. */
}
  
  .t-table { 
      width: 100%; 
      border-collapse: separate !important; 
      border-spacing: 0 !important; 
      table-layout: fixed; 
      min-width: 900px; 
      margin: 0 !important; 
      border: none !important;
  }
  
  /* 🔥 DOSA GUE KEMAREN: THEAD GA BOLEH STICKY! KITA KEMBALIKAN KE STATIC 🔥 */
  .t-table thead { position: static !important; }
  
  .t-table th { 
      position: sticky !important; 
      /* 🔥 KUNCI 1: TARIK PAKSA NAIK 2 PIXEL (Biar nabrak atap!) 🔥 */
      top: -2px !important; 
      
      z-index: 50 !important; 
      background-color: #f8fafc !important; 
      color: #64748b; 
      font-size: 0.75rem; 
      text-transform: uppercase; 
      font-weight: 800; 
      
      /* 🔥 KUNCI 2: TEMBAK BAYANGAN RAKSASA 10px KE ATAS! 
         Pastiin warna #f8fafc nutupin semua kebocoran putih! 🔥 */
      box-shadow: 0 -10px 0 #f8fafc, inset 0 -2px 0 #e2e8f0 !important; 
      
      background-clip: padding-box !important; 
      padding: 14px 12px; 
      letter-spacing: 0.5px; 
      white-space: nowrap !important; 
      text-align: left;
      border: none !important; 
      outline: none !important;
  }

  .dataTables_wrapper { 
      height: 100%; display: flex; flex-direction: column; 
      padding: 0 !important; margin: 0 !important;
  }
  
  .t-table td { 
      padding: 12px; vertical-align: middle; font-size: 0.85rem; font-weight: 600; 
      color: #1e293b; border-bottom: 1px solid #f1f5f9; transition: background 0.2s;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  }
  .t-table tr:hover td { background-color: #f8fafc; }

  /* STICKY PAGINATION FOOTER */
  .dt-pagination-wrapper {
      flex-shrink: 0; background: #ffffff; border-top: 1px solid #e2e8f0; 
      padding: 10px 24px; z-index: 5; height: 40px;
  }
  .dataTables_info { font-size: 0.8rem; font-weight: 600; color: #64748b; padding: 0 !important; }
  .pagination { margin: 0 !important; gap: 4px; }
  .page-link { border-radius: 8px !important; border: none; color: #475569; font-weight: 700; font-size: 0.8rem; padding: 6px 12px; transition: 0.2s; }
  .page-item.active .page-link { background-color: var(--tirta-blue); color: #fff; box-shadow: 0 2px 5px rgba(48,82,138,0.3); }
  .page-link:hover:not(.active) { background-color: #f1f5f9; color: var(--tirta-blue); }

  /* ==========================================================================
     6. INLINE ACTION ICONS & PROGRESS BAR
     ========================================================================== */
  .action-container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
    flex-wrap: nowrap; /* 🔥 KUNCI: Haramkan tombol turun baris */
}
.inline-action-btn { 
    width: 26px; 
    height: 26px; 
    border-radius: 6px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #f8fafc; 
    border: 1px solid transparent; 
    cursor: pointer; 
    transition: 0.2s; 
    font-size: 0.8rem;
    flex-shrink: 0; /* 🔥 KUNCI: Haramkan tombol mengecil kegencet */
}
.inline-action-btn:hover { transform: scale(1.15); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
  
  .btn-qr { color: var(--tirta-blue); border-color: #e2e8f0; }
  .btn-qr:hover { background: rgba(48,82,138,0.1); border-color: var(--tirta-blue); }
  .btn-update { color: #10b981; border-color: #e2e8f0; }
  .btn-update:hover { background: rgba(16,185,129,0.1); border-color: #10b981; }
  .btn-edit { color: var(--tirta-gold); border-color: #e2e8f0; }
  .btn-edit:hover { background: rgba(167,135,89,0.1); border-color: var(--tirta-gold); }
  .btn-delete { color: var(--tirta-red); border-color: #e2e8f0; }
  .btn-delete:hover { background: rgba(236,54,58,0.1); border-color: var(--tirta-red); color: white !important; }

  .mini-bar-bg { width: 100%; height: 5px; background: #e2e8f0; border-radius: 5px; margin-top: 5px; overflow: hidden; }
  .mini-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; }

  /* ==========================================================================
     7. PUSH SIDEPANEL (SMOOTH SLIDE UX - ANTI KEGENCET)
     ========================================================================== */
  .tmc-push-sidebar, #pushSidebar {
      width: 420px !important; 
      min-width: 420px !important;
      flex-shrink: 0; 
      margin-right: -420px !important; 
      margin-left: 0px !important;
      opacity: 0; 
      visibility: hidden; 
      background: #fff; 
      border-radius: 16px !important; /* 🔥 PAKSA LENGKUNG 16px 🔥 */
      border: none !important; 
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
      
      /* 🔥 KUNCI UTAMA: Haramkan ada overflow: auto di sini, wajib hidden! 
         (Tenang, isinya tetep bisa di-scroll karena inner div lu udah ada class overflow-y-auto) 🔥 */
      overflow: hidden !important; 
      
      z-index: 1040;
  }

  /* Saat Terbuka: Meluncur masuk mulus + ngasih jarak 15px di kiri */
  #scheduleBodyWrapper.show-sidebar #pushSidebar, 
  #scheduleBodyWrapper.show-sidebar .tmc-push-sidebar { 
      margin-right: 0px !important; 
      margin-left: 15px !important; 
      opacity: 1; 
      visibility: visible;
      border: 1px solid rgba(0,0,0,0.04) !important; 
      border-left: 1px solid #e2e8f0 !important;
  }

  /* ==========================================================================
     8. CALENDAR GRID MODAL STYLING (ULTRA MODERN SAAS)
     ========================================================================== */
  .calendar-grid-header {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
      text-align: center; font-size: 0.7rem; font-weight: 800; color: #94a3b8; 
      margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
  }
  .calendar-grid-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; padding-bottom: 10px; }
  
  .cal-cell {
      border-radius: 10px; 
      height: 50px; /* 🔥 Dulu 60px, sekarang 50px biar gak kepanjangan! */
      position: relative; display: flex; flex-direction: column; 
      justify-content: center; align-items: center; 
      background: #f8fafc; border: 1px solid transparent;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  .cal-cell:hover:not(.empty) {
      background: #ffffff; border-color: #cbd5e1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: translateY(-2px);
  }

  .cal-cell.empty { background: transparent; border: none; }
  
  .cal-cell.no-activity .cal-day-label { color: #cbd5e1; }
  .cal-cell.no-activity .cal-input::placeholder { color: #e2e8f0; }
  
  .cal-cell.scheduled { 
      background: #fffbeb; border-color: #fde68a; 
  }
  .cal-cell.scheduled .cal-day-label { color: #d97706; font-weight: 800; }
  .cal-cell.scheduled .cal-input::placeholder { color: rgba(217, 119, 6, 0.3); }

  .cal-cell.filled { 
      background: #eff6ff; border-color: #bfdbfe; 
      box-shadow: inset 0 0 0 1px #bfdbfe; 
  }
  .cal-cell.filled .cal-day-label { color: #2563eb; font-weight: 800; }
  .cal-cell.filled .cal-input { color: #1d4ed8; font-weight: 800; transform: scale(1.1); }

  .cal-day-label { position: absolute; top: 6px; right: 8px; font-size: 0.75rem; font-weight: 700; transition: 0.3s;}
  .cal-day-label.sunday { color: #ef4444 !important; }

  .cal-input {
      border: none; background: transparent; text-align: center; width: 100%; outline: none;
      font-size: 1.1rem; /* 🔥 Dulu 1.25rem, sekarang dikecilin */
      font-weight: 800; color: #1e293b; 
      padding-top: 10px; /* 🔥 Disesuaikan biar pas di tengah */
      transition: 0.3s;
  }
  .cal-input:focus { color: var(--tirta-blue); transform: scale(1.2); }
  .cal-input::-webkit-outer-spin-button, .cal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* Input GAP elegan */
  .gap-input-modern {
      border-radius: 8px !important; border: 1px solid #cbd5e1 !important;
      box-shadow: none !important; font-size: 0.8rem !important; font-weight: 700;
  }
  .gap-input-modern:focus { border-color: var(--tirta-gold) !important; background: #fff; }

/* ========================================================== */
/* 🪄 MAGIC SMOOTH HIDE ACTIONS & ANTI-CLIPPING STATUS (MAXIMIZED) */
/* ========================================================== */
/* 1. Transisi Halus untuk Kolom Actions (Kolom ke-9) */
#tableSchedule th:nth-child(9),
#tableSchedule td:nth-child(9) {
    transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
    max-width: 220px; /* Kasih ruang lega buat 5 tombol */
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
}

/* Saat Sidebar Terbuka, Kolom Actions Mengecil & Menghilang Mulus */
#scheduleBodyWrapper.show-sidebar #tableSchedule th:nth-child(9),
#scheduleBodyWrapper.show-sidebar #tableSchedule td:nth-child(9) {
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    border: none !important;
    pointer-events: none;
}

/* 2. 🔥 PELINDUNG MUTLAK KOLOM STATUS (Kolom ke-8) AGAR ANTI POTONG 🔥 */
#tableSchedule th:nth-child(8),
#tableSchedule td:nth-child(8) {
    overflow: visible !important; /* KUNCI 1: Haramkan CSS memotong isi kolom ini! */
    text-overflow: clip !important;
    white-space: nowrap !important;
}

#scheduleBodyWrapper.show-sidebar #tableSchedule th:nth-child(8),
#scheduleBodyWrapper.show-sidebar #tableSchedule td:nth-child(8) {
    min-width: 140px !important; /* KUNCI 2: Paksa lebar area kolom */
    padding-right: 40px !important; /* KUNCI 3: Beri "Bantalan Udara" 40px di kanan badge agar tidak menabrak batas! */
}

/* 3. Sesuaikan ukuran tabel agar mengalah saat didorong */
#scheduleBodyWrapper.show-sidebar .t-table {
    min-width: 750px !important; /* Tabel diizinkan mengecil karena kolom Action sudah hilang */
}

/* 4. Tabel tetap bisa di-scroll horizontal kalau layarnya benar-benar sempit */
.table-responsive-wrapper {
    overflow-x: auto !important;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================================== */
/* 9. ULTRA-COMPACT VERIFICATION MATRIX (PRECISE & CLEAN) */
/* ========================================================== */
.verif-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; /* Dibuat super ramping (tinggi dipangkas) */
    margin-bottom: 5px; 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; /* Sudut presisi, halus tapi tidak terlalu bulat */
    transition: all 0.2s ease;
}
.verif-row:hover { border-color: #cbd5e1; background: #f8fafc; }

/* Indikator Garis Kiri Halus (Lebih tipis & profesional) */
.verif-row.state-done { border-left: 3px solid #10b981; background: #f0fdf4; border-color: #bbf7d0; }
.verif-row.state-skipped { border-left: 3px solid #ef4444; background: #fef2f2; border-color: #fecaca; }
.verif-row.state-nreq { border-left: 3px solid #94a3b8; background: #f1f5f9; border-color: #e2e8f0; opacity: 0.8; }

/* Label Teks Super Rapi */
.verif-label { font-size: 0.75rem; font-weight: 700; color: #334155; flex-grow: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.verif-row.state-done .verif-label { color: #065f46; }
.verif-row.state-skipped .verif-label { color: #991b1b; }
.verif-row.state-nreq .verif-label { color: #64748b; text-decoration: line-through; }
/* Tambahan Keseragaman untuk Tab Issues & Log Activity */
.verif-row.issue-row { border-left: 3px solid #EC363A; background: #fffafb; border-color: #ffe4e6; }
.verif-row.actual-row { border-left: 3px solid var(--tirta-blue); }
.verif-row.gap-row { border-left: 3px solid var(--tirta-gold); }

/* Grup Tombol Super Compact ala Toggle Switch */
.verif-btn-group { 
    background: #e2e8f0; 
    padding: 2px; 
    border-radius: 6px; 
    display: flex; gap: 1px; flex-shrink: 0; 
}
.v-btn {
    width: 24px; height: 24px; border: none; background: transparent; /* Diperkecil jadi 24px */
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; border-radius: 4px; cursor: pointer; color: #64748b; transition: 0.2s;
}
.v-btn:hover:not(.active) { background: rgba(255,255,255,0.6); color: #1e293b; }

/* Efek Timbul Tombol Saat Aktif */
.v-btn.v-done.active { background: #10b981; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.v-btn.v-skipped.active { background: #ef4444; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.v-btn.v-nreq.active { background: #64748b; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* Meta Data Teks (Nama & Tanggal) Lebih Ramping */
.verif-meta { font-size: 0.55rem; color: #64748b; text-align: right; line-height: 1.1; padding-right: 8px; margin-right: 8px; border-right: 1px solid #cbd5e1; }

/* ==========================================================================
     10. ULTRA-COMPACT PROJECT INFO GRID
     ========================================================================== */
  .info-compact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 2 Kolom rata */
      gap: 8px 12px; /* Jarak antar item super tipis */
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px; /* Padding diciutkan */
      margin-bottom: 12px;
  }
  .info-compact-item {
      display: flex;
      align-items: center;
      gap: 8px; /* Jarak ikon ke teks */
      overflow: hidden;
  }
  .info-icon-box {
      width: 26px; height: 26px; /* Kotak ikon mungil */
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; /* Ikon kecil tajam */
      flex-shrink: 0;
      box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  }
  .info-text-box {
      display: flex; flex-direction: column;
      line-height: 1.1; /* Jarak atas bawah teks dipress */
      overflow: hidden;
  }
  .info-label {
      font-size: 0.55rem;
      text-transform: uppercase;
      font-weight: 800;
      color: #94a3b8;
      letter-spacing: 0.5px;
      margin-bottom: 1px;
  }
  .info-value {
      font-size: 0.75rem;
      font-weight: 800;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; /* Teks kepanjangan otomatis titik-titik */
  }
  
  /* ==========================================================================
   VIEW TOGGLE SWITCH (SEGMENTED CONTROL)
   ========================================================================== */
.view-toggle-group {
    background-color: #f1f5f9; /* Latar belakang abu-abu soft */
    border: 1px solid #cbd5e1;
    border-radius: 50px;
    padding: 4px; /* Ruang untuk "pill" di dalamnya */
    display: flex;
    align-items: center;
    height: 38px;
}
.view-toggle-btn {
    border: none;
    background: transparent;
    color: #64748b; /* Warna ikon redup saat tidak aktif */
    border-radius: 50px;
    padding: 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    outline: none;
}
.view-toggle-btn:hover:not(.active) {
    color: var(--tirta-blue);
}
.view-toggle-btn.active {
    background-color: #ffffff; /* Kapsul putih yang menandakan aktif */
    color: var(--tirta-blue); /* Warna brand menyala */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   11. TIMELINE VIS.JS STYLING (INTEGRATED)
   ========================================================================== */
.vis-timeline { 
    border: none !important; 
    font-family: 'Poppins', sans-serif !important; 
    background-color: #ffffff !important; 
}
.vis-panel.vis-left {
    background-color: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 4px 0 15px rgba(0,0,0,0.03); 
    z-index: 5;
}
.vis-label {
    background-color: #f8fafc !important;
    color: var(--text-main) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding-left: 15px !important;
    display: flex !important;
    align-items: center !important; 
    border-bottom: 1px solid #e2e8f0 !important; 
}
.vis-time-axis .vis-grid.vis-minor { border-left: 1px dashed rgba(0,0,0,0.06) !important; }
.vis-time-axis .vis-grid.vis-major { border-left: 1px solid rgba(0,0,0,0.12) !important; }
.vis-time-axis .vis-text {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding-top: 8px !important;
    text-transform: uppercase;
}
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
    background-color: rgba(241, 245, 249, 0.6) !important; 
}
.vis-item {
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important; 
    height: 28px !important; 
    cursor: pointer !important;
    border-width: 0 !important;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
}
.vis-item .vis-item-content { padding: 0 12px !important; }

/* TEMA WARNA ITEM KALENDER (SINKRON DENGAN TABEL) */
.vis-item.scheduled { background: var(--tirta-gold) !important; color: #fff !important; border-left: 4px solid #8c714a !important; }
.vis-item.active { background: var(--tirta-red) !important; color: #fff !important; border-left: 4px solid #b91c1c !important; }
.vis-item.completed { background: var(--tirta-blue) !important; color: #fff !important; border-left: 4px solid #1e3661 !important; }

.vis-item:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    opacity: 1 !important;
    z-index: 100 !important;
}
.vis-current-time { background-color: var(--tirta-red) !important; width: 2px !important; z-index: 20; pointer-events: none; }

/* ==========================================================================
     12. SIDEPANEL TABS STYLING (DYNAMIC ACTIVE STATES)
     ========================================================================== */
  #sidebarTabs .nav-link { 
      color: #64748b; 
      background: #ffffff; 
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
      border: 1px solid #e2e8f0; 
      border-radius: 50px;
  }
  
  /* VERIFICATION: Biru saat aktif */
  #sidebarTabs .tab-verif.active { background: var(--tirta-blue) !important; color: #ffffff !important; border-color: var(--tirta-blue) !important; box-shadow: 0 4px 10px rgba(48,82,138,0.3) !important;}
  #sidebarTabs .tab-verif.active .badge { background: #ffffff !important; color: var(--tirta-blue) !important; }
  
  /* ISSUES: Merah saat aktif */
  #sidebarTabs .tab-issues.active { background: #EC363A !important; color: #ffffff !important; border-color: #EC363A !important; box-shadow: 0 4px 10px rgba(236, 54, 58, 0.3) !important;}
  #sidebarTabs .tab-issues.active .badge { background: #ffffff !important; color: #EC363A !important; }
  
  /* LOG ACTIVITY: Emas (Gold) saat aktif */
  #sidebarTabs .tab-log.active { background: var(--tirta-gold) !important; color: #ffffff !important; border-color: var(--tirta-gold) !important; box-shadow: 0 4px 10px rgba(167, 135, 89, 0.3) !important;}

  /* FILES: Ungu saat aktif */
  #sidebarTabs .tab-files.active { background: #6366f1 !important; color: #ffffff !important; border-color: #6366f1 !important; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;}

  /* ASSETS: Cyan/Teal saat aktif */
  #sidebarTabs .tab-assets.active { 
      background: #0891b2 !important; 
      color: #ffffff !important; 
      border-color: #0891b2 !important; 
      box-shadow: 0 4px 10px rgba(8, 145, 178, 0.3) !important;
  }
  #sidebarTabs .tab-assets.active .badge { 
      background: #ffffff !important; 
      color: #0891b2 !important; 
  }
  
  /* UX DEWA: Paksa 4 Tab rata membelah lebar layar tanpa scroll! */
  .compact-tabs { display: flex; width: 100%; padding: 0; margin: 0; list-style: none; gap: 4px; overflow: hidden !important; flex-wrap: nowrap !important; }
  .compact-tabs .nav-item { flex: 1; /* Bagi rata lebarnya */ min-width: 0; }
  .compact-tabs .nav-link { 
      padding: 6px 2px !important; 
      font-size: 0.65rem; 
      justify-content: center; display: flex; align-items: center; white-space: nowrap;
      border-radius: 8px !important; /* Kotak rounded biar lebih modern */
  }
  .compact-tabs .nav-link i { margin-right: 4px !important; font-size: 0.75rem; }
  .compact-tabs .badge { padding: 2px 4px !important; font-size: 0.55rem !important; }

/* 🔥 FIX MUTLAK: Flexbox 100% Anti-Kegencet 🔥 */
.tab-content > .tab-pane {
    display: none !important;
    height: 100%;
}
.tab-content > .tab-pane.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    animation: fadeInTab 0.35s ease forwards;
}
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 🔥 MEMAKSA TOOLTIP BOOTSTRAP UNTUK MENERIMA ENTER / BREAKLINE 🔥 */
.tooltip-inner {
    white-space: pre-wrap !important;
    text-align: left !important;
}

/* --- TIMELINE LOGS STYLING --- */
.timeline-wrapper {
    position: relative;
    padding-left: 20px;
    margin-left: 10px;
    border-left: 2px solid #e2e8f0; /* Garis vertikal utama */
}
.timeline-item {
    position: relative;
    margin-bottom: 20px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -27px; /* Menempatkan titik pas di tengah garis */
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--tirta-blue);
    box-shadow: 0 0 0 3px rgba(48, 82, 138, 0.1);
}
.timeline-date {
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.timeline-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s;
}
.timeline-content:hover {
    border-color: var(--tirta-blue);
    box-shadow: 0 4px 8px rgba(48, 82, 138, 0.1);
}

/* 🔥 WARNA MUTLAK UNTUK PROJECT FLAGGED 🔥 */
    tr.project-flagged-row td {
        background-color: #fefce8 !important; /* Kuning peringatan */
    }
    tr.project-flagged-row td:first-child {
        border-left: 4px solid #ef4444 !important; /* Garis merah tebal di kiri */
    }

  /* ==========================================================================
     EXPANDABLE SEARCH BAR (EFEK MELAR SUPER SMOOTH & SIMETRIS)
     ========================================================================== */
  .expandable-search-wrapper {
      position: relative; /* Kunci absolut positioning */
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 50px;
      height: 38px;
      width: 38px; /* Ukuran bulat awal */
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: text;
  }

  /* Saat Melar */
  .expandable-search-wrapper.expanded {
      width: 250px; /* Lebar dilegakan biar gak sempit */
      border-color: var(--tirta-blue);
      box-shadow: 0 0 0 3px rgba(48, 82, 138, 0.1) !important;
  }

  /* 1. KOTAK KACA PEMBESAR (Fix Kiri) */
  .search-icon-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none; /* Biar klik tembus ke wrapper/input */
      z-index: 2;
  }

  .search-icon {
      color: #64748b;
      font-size: 0.95rem;
      transition: color 0.3s;
  }

  .expandable-search-wrapper.expanded .search-icon {
      color: var(--tirta-blue);
  }

  /* 2. AREA INPUT TEXT (Fix Tengah) */
  .expandable-search-wrapper .search-input {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      padding: 0 38px 0 38px; /* Kasih padding kiri-kanan persis selebar ikon 38px */
      font-size: 0.85rem;
      font-weight: 600;
      color: #1e293b;
      opacity: 0;
      transition: opacity 0.3s 0.1s;
      z-index: 1;
  }

  .expandable-search-wrapper.expanded .search-input {
      opacity: 1;
  }

  /* 3. KOTAK TOMBOL CLEAR X (Fix Kanan) */
  .clear-icon-box {
      position: absolute;
      right: 0;
      top: 0;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      cursor: pointer;
      transition: 0.2s;
  }

  .clear-icon {
      color: #cbd5e1;
      font-size: 1rem;
      transition: 0.2s;
  }

  .clear-icon-box:hover .clear-icon {
      color: #ef4444;
      transform: scale(1.1);
  }

  /* ==========================================================================
   🚀 STICKY KPI STRIP STYLING (NEW)
   ========================================================================== */
.kpi-sticky-strip {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid #e2e8f0;
    padding: 8px 24px;
    position: sticky;
    top: 0;
    z-index: 60; /* Harus di atas TH tabel (50) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.strip-item { display: flex; align-items: center; gap: 12px; transition: 0.2s; }
.strip-item.cursor-pointer:hover { transform: translateY(-1px); opacity: 0.8; }
.strip-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; border: 1px solid #e2e8f0;}
.strip-text { display: flex; flex-direction: column; line-height: 1.1; }
.strip-label { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;}
.strip-value { font-size: 1.1rem; font-weight: 900; color: #1e293b; }
.strip-divider { width: 2px; height: 28px; background: #f1f5f9; border-radius: 2px; }

.btn-icon-round { width: 38px; height: 38px; border-radius: 50% !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; }

/* 🚀 PENTING: Mendorong Header Tabel ke Bawah Strip 🚀 */
.t-table th { 
    /* Sesuaikan top-nya dengan tinggi dari kpi-sticky-strip (sekitar 52px) */
    top: 51px !important; 
}

/* =========================================================================
   📱 THE ULTIMATE NATIVE APP UI (TRUE FIXED HEADER & SCROLLABLE CONTENT)
   ========================================================================= */
@media (max-width: 768px) {
    /* =====================================================================
       🔥 1. KUNCI LAYAR PENUH (KUNCI UTAMA BIAR CUMA KARTU YANG SCROLL) 🔥
       ===================================================================== */
    body { overflow: hidden !important; } /* Matikan scroll browser bawaan */
    
    .schedule-layout { 
        height: calc(100vh - 100px) !important; /* 🔥 Mencegah web melar ke bawah */
        display: flex; 
        flex-direction: column; 
        overflow: hidden !important; 
        
        /* 🔥 KUNCI DEWA: Hapus padding samping biar ga ada "Dead Zone" merah 🔥 */
        padding: 0 !important; 
        width: 100% !important; 
    }

    /* =====================================================================
       🔥 2. AREA ATAS STATIS (Filter & KPI) 🔥
       ===================================================================== */
    /* AREA FILTER */
    .schedule-layout > .d-flex:first-child {
        flex-shrink: 0 !important; 
        width: 100% !important; 
        background: #f8fafc !important; 
        padding: 5px 15px 0 15px !important;
        margin: 0 !important;
    }
    .schedule-layout .d-flex.justify-content-end.flex-wrap { justify-content: flex-start !important; }
    .schedule-layout .d-flex.gap-2.flex-wrap { 
        width: 100%; gap: 5px !important; flex-wrap: nowrap !important; 
        overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    }
    .schedule-layout .d-flex.gap-2.flex-wrap::-webkit-scrollbar { display: none; }
    .expandable-search-wrapper { flex-grow: 1; flex-shrink: 0; }

    /* AREA KPI */
    .kpi-sticky-strip { 
        flex-shrink: 0 !important; 
        display: flex; overflow-x: auto; white-space: nowrap; 
        padding: 0px 15px 12px 15px !important; 
        margin: 0 0 0px 0 !important; 
        border-bottom: 0px solid #e2e8f0; 
        background: #f8fafc;
        box-shadow: 0 10px 20px rgba(0,0,0,0.03);
        -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; 
    }
    .kpi-sticky-strip::-webkit-scrollbar { display: none; }
    .strip-item { min-width: 135px; flex-shrink: 0; scroll-snap-align: start; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; margin-right: 8px; background: #fff; }
    .strip-item .strip-icon { width: 28px; height: 28px; font-size: 0.8rem; }
    .strip-item .strip-value { font-size: 0.95rem; }
    .strip-divider { display: none; }

    /* =====================================================================
       🔥 3. AREA KARTU (INI YANG BISA DI-SCROLL & ANTI BOCOR) 🔥
       ===================================================================== */
    .schedule-body-wrapper {
        flex-grow: 1;
        overflow: hidden; 
    }
    .table-responsive-wrapper {
        height: 100% !important; 
        width: 100% !important; /* Lebarkan area scroll mutlak mentok layar */
        overflow-y: auto !important; 
        overflow-x: hidden !important; 
        
        /* 🔥 KUNCI DEWA: Mencegah scroll dari tabel bablas nge-scroll body 🔥 */
        overscroll-behavior: contain !important; 
        
        padding: 0px 10px 10px 10px !important;
        
        background: transparent;
        -webkit-overflow-scrolling: touch; 
    }
    
    #tableSchedule { width: 100% !important; min-width: 100% !important; border: none !important; display: block; margin-bottom: 0 !important; }
    #tableSchedule thead { display: none !important; }
    #tableSchedule tbody { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; } 
    
    #tableSchedule tr {
        display: grid; grid-template-columns: 1fr 1fr 1.2fr; 
        grid-template-areas: "idbranch idbranch status" "company company company" "typeloc typeloc typeloc" "date date date" "target actual progress" "actions actions actions";
        background: #ffffff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; padding: 14px 16px; gap: 6px 8px; align-items: center;
    }
    #tableSchedule tr:active { transform: scale(0.99); background: #f8fafc; }
    #tableSchedule td { display: block; padding: 0 !important; border: none !important; white-space: normal !important; text-align: left !important; background: transparent !important; }
    #tableSchedule th:first-child, #tableSchedule td:first-child { position: static !important; box-shadow: none !important; z-index: auto !important; }

    #tableSchedule td:nth-child(1) { grid-area: idbranch; border-bottom: none !important; padding-bottom: 0 !important; }
    #tableSchedule td:nth-child(1) .project-row-container .fw-bolder { font-size: 0.7rem !important; }
    #tableSchedule td:nth-child(8) { grid-area: status; display: flex; justify-content: flex-end; align-items: flex-start; }
    #tableSchedule td:nth-child(8) .badge { padding: 4px 8px !important; font-size: 0.65rem !important; }
    #tableSchedule td:nth-child(2) { grid-area: company; font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.2; color: #0f172a !important; margin-top: 2px; margin-bottom: 2px; }
    #tableSchedule td:nth-child(3) { grid-area: typeloc; background: transparent !important; padding: 0 !important; }
    #tableSchedule td:nth-child(3) .fw-bolder { font-size: 0.75rem !important; margin-bottom: 0 !important; }
    #tableSchedule td:nth-child(4) { grid-area: date; margin-bottom: 4px; }
    #tableSchedule td:nth-child(5) { grid-area: target; }
    #tableSchedule td:nth-child(6) { grid-area: actual; }
    #tableSchedule td:nth-child(5), #tableSchedule td:nth-child(6) { background: #f8fafc !important; border: 1px solid #f1f5f9; border-radius: 8px; padding: 6px 4px !important; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    #tableSchedule td:nth-child(5)::before { content: "TGT"; font-size: 0.6rem; color: #64748b; font-weight: 800; margin-bottom: 2px;}
    #tableSchedule td:nth-child(6)::before { content: "ACT"; font-size: 0.6rem; color: #64748b; font-weight: 800; margin-bottom: 2px;}
    #tableSchedule td:nth-child(7) { grid-area: progress; padding: 0 4px 0 8px !important; display: flex; flex-direction: column; justify-content: center; }
    #tableSchedule td:nth-child(9) { grid-area: actions; border-top: 1px dashed #e2e8f0 !important; padding-top: 10px !important; margin-top: 2px; }
    
    .action-container { width: 100%; justify-content: space-between !important; gap: 4px !important; }
    .inline-action-btn { width: 34px !important; height: 34px !important; font-size: 1rem !important; border-radius: 8px !important; background: #f8fafc !important; border: 1px solid #f1f5f9 !important; }

    #tableSchedule td.dataTables_empty { grid-column: span 3 !important; text-align: center !important; }
    #tableSchedule td.dataTables_empty::before { display: none !important; }

   /* =====================================================================
       🔥 4. FAB (+) SUPER KECIL 🔥
       ===================================================================== */
    .schedule-layout > .d-flex:first-child .tmc-primary-btn { 
        position: fixed !important;
        bottom: 70px !important; /* 🔥 UBAH JADI 70px 🔥 */
        right: 10px !important;
        width: 42px !important;   
        height: 42px !important; 
        border-radius: 50% !important; 
        padding: 0 !important; margin: 0 !important;
        z-index: 1001 !important;
        background: var(--tirta-blue) !important;
        box-shadow: 0 4px 12px rgba(48, 82, 138, 0.4) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        font-size: 0 !important; 
    }
    .schedule-layout > .d-flex:first-child .tmc-primary-btn i { 
        font-size: 1.1rem !important; margin: 0 !important; color: white !important;
    }

    /* =====================================================================
       🔥 5. PAGINATION KAPSUL MELAYANG 🔥
       ===================================================================== */
    .dt-pagination-wrapper {
        position: fixed !important;
        bottom: 70px !important; /* 🔥 SAMA JADI 70px BIAR SEJAJAR 🔥 */
        left: 50% !important; 
        transform: translateX(-56%) !important; /* 🔥 UBAH JADI -56% BIAR GAK NABRAK TOMBOL (+) 🔥 */
        width: max-content !important; 
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        padding: 0px 0px !important; 
        border-radius: 50px !important; 
        display: flex !important; justify-content: center !important; align-items: center !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }
    .dt-pagination-wrapper .dataTables_info { display: none !important; }
    .dt-pagination-wrapper .pagination { gap: 4px !important; margin: 0 !important; }
    .dt-pagination-wrapper .page-item .page-link { 
        width: 30px !important; height: 30px !important; 
        padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
        border-radius: 50% !important; font-size: 0.8rem !important; font-weight: 800 !important;
        border: none !important; background: transparent !important; color: #475569 !important;
    }
    .dt-pagination-wrapper .page-item.active .page-link { background: var(--tirta-blue) !important; color: #ffffff !important; }

    /* =====================================================================
       6. SIDEBAR DETAIL & PANELS
       ===================================================================== */
    .tmc-push-sidebar, #pushSidebar { position: fixed !important; top: 0; right: -100% !important; width: 100% !important; height: 100vh !important; z-index: 99999 !important; margin: 0 !important; border-radius: 0 !important; transition: right 0.25s ease-out; }
    #scheduleBodyWrapper.show-sidebar .tmc-push-sidebar { right: 0 !important; margin: 0 !important; }
    #exportCollapsePanel .d-flex.flex-wrap, #advancedFilterPanel .d-flex.flex-wrap { flex-direction: column !important; align-items: stretch !important; }
    .filter-box { width: 100% !important; margin-bottom: 8px !important; }
    #btnExecuteExport { width: 100%; height: 40px; border-radius: 10px; margin-top: 4px; }
}

/* ==========================================================================
   🔥 FIX MUTLAK FINAL: KUNCI SCROLL GLOBAL & DOUBLE STICKY 🔥
   ========================================================================== */

/* 1. MATIKAN SCROLL LAYAR LUAR (ANTI BOCOR) KHUSUS HALAMAN SCHEDULE */
body:has(.schedule-layout),
html:has(.schedule-layout),
.main-wrapper-container:has(.schedule-layout) {
    overflow: hidden !important; 
}

/* 2. PAKSA KOTAK SCHEDULE PAS 100% LAYAR, GAK BOLEH MELAR 1 PIXEL PUN */
.schedule-layout {
    height: calc((100vh / var(--global-zoom)) - var(--topbar-tinggi) - var(--topbar-jarak-atas)) !important;
    max-height: calc((100vh / var(--global-zoom)) - var(--topbar-tinggi) - var(--topbar-jarak-atas)) !important;
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
}

/* 3. AREA YANG BOLEH SCROLL HANYA ISI TABELNYA SAJA */
.table-responsive-wrapper,
#viewTableWrapper {
    flex-grow: 1 !important;
    overflow-y: auto !important; 
    overflow-x: auto !important;
    height: 100% !important; 
    padding-bottom: 30px !important;
}

/* 4. KPI DIKUNCI DI ATAS (BUNUH MARGIN TRANSAPARAN!) */
.table-responsive-wrapper > div:first-child:not(table),
.kpi-sticky-strip,
.kpi-row {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    background: #ffffff !important; 
    margin-bottom: 0 !important; /* 🔥 BIANG KEROK CELAH: KITA NOL-KAN 🔥 */
    padding-bottom: 12px !important; /* 🔥 GANTI JADI PADDING BIAR BACKGROUND PUTIHNYA MELAR NUTUPIN CELAH 🔥 */
    border-bottom: none !important;
}

/* 5. HEADER TABEL DIBIKIN LENGKET (DENGAN TIRAI BAYANGAN) */
.t-table th, 
#tableSchedule thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 60px !important; /* 🔥 ANGKANYA GUE KECILIN BIAR MAKIN DEMPET SAMA KPI 🔥 */
    z-index: 50 !important;
    background-color: #f8fafc !important;
    /* 🔥 JURUS DEWA: Kasih bayangan putih ke atas buat nutupin sisa kebocoran! 🔥 */
    box-shadow: 0 -15px 0 #ffffff, inset 0 -2px 0 #e2e8f0 !important; 
}

/* 6. BUNUH semua border & background bawaan elemen di dalam kapsul biar gak dobel! */
.filter-box .custom-multiselect .multiselect-header,
.filter-box select,
.filter-box input,
.filter-box .form-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    outline: none !important;
}
/* ==========================================================================
   🔥 FIX FINAL SIDEPANEL: TOMBOL VERIFIKASI SEJAJAR & X KEMBALI 🔥
   ========================================================================== */

/* 1. OBAT CHECKBOX AWAL (TETAP KOTAK) */
.chk-batch-verif,
.verif-row input[type="checkbox"] {
    flex-shrink: 0 !important; 
    width: 16px !important;
    height: 16px !important;
    transform: scale(1.2) !important; 
    margin-right: 12px !important;
}

/* 2. TEKS CHECKLIST BOLEH TURUN BARIS (BIAR GAK NGEGENCET TOMBOL) */
.verif-label { 
    white-space: normal !important; /* 🔥 KUNCI: Izinkan teks turun baris 🔥 */
    word-break: break-word !important; 
    line-height: 1.2 !important;
}

/* 3. WADAH TEKS HARUS MENGALAH (Biar grup tombol di kanannya aman) */
.verif-row .flex-grow-1 {
    min-width: 0 !important; 
    margin-right: 10px !important;
}

/* 4. GRUP TOMBOL VERIFIKASI (✔, ✖, ➖) HARAM MENGECIL & HARUS SEJAJAR KANAN */
.verif-btn-group {
    flex-shrink: 0 !important; /* 🔥 KUNCI: Tombol gak bakal gepeng lagi 🔥 */
    margin-left: auto !important; /* Dorong mentok ke kanan */
}

/* Efek pas disorot mouse */
.tmc-push-sidebar [onclick*="closeSidebar"]:hover,
.tmc-push-sidebar .btn-close:hover {
    background-color: #fef2f2 !important; /* Kasih background merah soft dikit */
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* ==========================================================================
   🔥 FIX MUTLAK SIDEPANEL: HEADER WRAP (ANTI X KETENDANG MENGHILANG) 🔥
   ========================================================================== */

/* 1. Baris penampung ID Project dipaksa TURUN BARIS (Wrap) kalau kepenuhan */
.tmc-push-sidebar > div:first-child,
.tmc-push-sidebar .d-flex:has(#detailProjectId) {
    flex-wrap: wrap !important;
    row-gap: 12px !important; /* Jarak antar baris kalau dia turun */
}

/* 2. Teks ID Project yang kepanjangan diizinkan turun ke bawah (gak kaku) */
#detailProjectId {
    white-space: normal !important;
    word-break: break-word !important;
    height: auto !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

/* 3. Grup tombol aksi (Edit, Hapus, dll) biar tetap rapi saat turun baris */
#detailActionButtons,
.tmc-push-sidebar .action-container {
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* 4. Tombol X dikembalikan ke kodratnya, tapi dipaksa selalu mojok kanan */
.tmc-push-sidebar .btn-close,
.tmc-push-sidebar [onclick*="closeSidebar"] {
    position: static !important; /* Matikan semua efek absolute/melayang kemaren */
    top: auto !important; right: auto !important;
    flex-shrink: 0 !important; /* Haram gepeng */
    margin-left: auto !important; /* Dorong paksa ke ujung kanan baris */
    opacity: 0.6 !important;
    transition: transform 0.2s, opacity 0.2s !important;
}

/* Efek Hover Tombol X */
.tmc-push-sidebar .btn-close:hover,
.tmc-push-sidebar [onclick*="closeSidebar"]:hover {
    opacity: 1 !important;
    transform: scale(1.15) !important;
}

/* ==========================================================================
   🔥 IMPROVISASI: SYNC STATUS & DATE NAVIGATOR 🔥
   ========================================================================== */

/* 1. Sync Indicator Styling */
.sync-indicator-pill {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 14px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 50px; min-width: 140px; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: #94a3b8; transition: 0.3s;
}
.pulse-dot.active {
    background-color: #10b981;
    animation: pulseSync 2s infinite;
}
.pulse-dot.offline { background-color: #ef4444; animation: none; }

@keyframes pulseSync {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sync-text-group { display: flex; flex-direction: column; line-height: 1.1; }
.sync-label { font-size: 0.65rem; font-weight: 800; color: #1e293b; text-transform: uppercase; }
.sync-time { font-size: 0.6rem; color: #64748b; font-weight: 600; }

/* 2. Date Navigator Styling */
.date-navigator-pill {
    display: flex; align-items: center; background: #fff;
    border: 1px solid #cbd5e1; border-radius: 50px; padding: 2px;
    height: 38px; transition: 0.3s;
}
.nav-btn-prev, .nav-btn-next {
    width: 32px; height: 32px; border: none; background: transparent;
    border-radius: 50%; color: #64748b; font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.nav-btn-prev:hover, .nav-btn-next:hover { 
    background: #f1f5f9; color: var(--tirta-blue); 
}
.nav-date-display {
    padding: 0 12px; font-size: 0.85rem; font-weight: 800;
    color: #1e293b; cursor: pointer; display: flex; align-items: center;
    border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9;
}
.nav-date-display:hover { color: var(--tirta-blue); }

/* ==========================================================================
   🔥 FIX SEARCH BAR: BENTUK KAPSUL & PINDAH KANAN 🔥
   ========================================================================== */

.premium-search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    /* 🔥 INI KUNCINYA BIAR GAK KOTAK (BENTUK KAPSUL) 🔥 */
    border-radius: 50px !important; 
    height: 38px; /* Tinggi disamain sama tombol Excel lo */
    width: 250px; /* Lebar default */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Efek nyala dan melar pas lu klik/ketik */
.premium-search-box:focus-within {
    border-color: var(--tirta-blue);
    box-shadow: 0 0 0 3px rgba(48, 82, 138, 0.1) !important;
    width: 320px; /* Melar memanjang ke kiri */
}

.premium-search-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: 0.85rem;
    color: #1e293b;
    font-weight: 600;
    outline: none;
    width: 100%;
}

.premium-search-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* Tombol X (Clear) pas ngetik */
.btn-clear-search {
    background: transparent;
    border: none;
    color: #94a3b8;
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-clear-search:hover {
    color: #ef4444; /* Merah pas mau dihapus */
}

/* ==========================================================================
   🔥 UX DEWA: TMC PREMIUM SELECT2 DROPDOWN 🔥
   ========================================================================== */

/* 1. Desain Kotak Luar (Mirip Input Flatpickr lu) */
.select2-container--tmc .select2-selection--single {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    outline: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efek Nyala pas diklik */
.select2-container--tmc.select2-container--open .select2-selection--single,
.select2-container--tmc .select2-selection--single:focus {
    border-color: var(--tirta-blue) !important;
    box-shadow: 0 0 0 3px rgba(48, 82, 138, 0.15) !important;
}

/* Teks Terpilih */
.select2-container--tmc .select2-selection__rendered {
    color: #1e293b;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 !important;
}

/* Panah Dropdown Custom */
.select2-container--tmc .select2-selection__arrow {
    height: 36px;
    right: 12px;
}
.select2-container--tmc .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}

/* 2. Desain Kotak Melayang (Daftar Isinya) */
.select2-dropdown {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    overflow: hidden;
    z-index: 106000 !important; /* Wajib tinggi biar gak ketutupan Modal Bootstrap */
}

/* Teks Item di dalam List */
.select2-container--tmc .select2-results__option {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Pas di-hover */
.select2-container--tmc .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(48, 82, 138, 0.08) !important;
    color: var(--tirta-blue) !important;
}

/* Pas beneran Dipilih */
.select2-container--tmc .select2-results__option[aria-selected=true] {
    background-color: var(--tirta-blue) !important;
    color: #ffffff !important;
}

/* Search Box di dalam Dropdown (Elegan) */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--tirta-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(48, 82, 138, 0.1);
}

/* Disable State */
.select2-container--tmc.select2-container--disabled .select2-selection--single {
    background-color: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.7;
}