/* =====================================================
   LEMBAGA INKUBATOR (LIST + DETAIL) — SINGLE FILE
   Kamu cukup ubah di BAGIAN A: THEME
===================================================== */

/* =========================
   A) THEME (EDIT DI SINI)
========================= */
:root{
  /* warna umum */
  --teal:#2f7f8c;
  --text:#13343a;
  --muted:#5f6f75;
  --line: rgba(0,0,0,.08);
  --shadow: 0 10px 24px rgba(16,24,40,.10);
  --radius: 16px;

  /* ===== BACKGROUND LIST (bg-li) =====
     GANTI 2 WARNA INI AJA kalau mau ubah "oren/krem" */
  --li-bg-1: #fff;  /* atas */
  --li-bg-2: #89c3e0;  /* bawah */

  /* optional: pattern list (kalau gak mau, kosongkan: none) */
  --li-pattern-url: url('/assets/img/bunga_kemenumkm.png');
  --li-pattern-opacity: 0.35;
  --li-pattern-size: 900px;
  --li-pattern-pos: left -420px top -350px;

  /* ===== DETAIL (bg-detail-inkubator) ===== */
  --detail-bg-1: #4788AB;
  --detail-bg-2: #FFFFFF;

  /* optional: pattern detail */
  --detail-pattern-url: url('/assets/img/bunga_kemenumkm.png');
  --detail-pattern-opacity: 0.35;
  --detail-pattern-size: 900px;
  --detail-pattern-pos: right -400px top -420px;
}

/* =========================
   B) BACKGROUND VARIANTS
========================= */

/* LIST PAGE background (dipakai oleh @section('bg-variant','bg-li')) */
.app-bg.bg-li{
    background: linear-gradient(
    120deg,
    var(--li-bg-1) 0%,
    var(--li-bg-2) 60%
  );


  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

/* pattern list */
.app-bg.bg-li::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--li-pattern-url);
  background-repeat: no-repeat;
  background-position: var(--li-pattern-pos);
  background-size: var(--li-pattern-size);
  opacity: 0;
  transform: translate3d(20px,-14px,0) scale(1.02);
  transition:
    opacity 900ms cubic-bezier(.22,1,.36,1),
    transform 900ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
  pointer-events: none;
  z-index: 1;
}

/* saat halaman siap */
body.page-ready .app-bg.bg-li::after{
  opacity: var(--li-pattern-opacity);
  transform: translate3d(0,0,0) scale(1);
}

/* pastikan konten di atas background */
.app-bg.bg-li .app-main{
  position: relative;
  z-index: 2;
}

/* DETAIL background (dipakai oleh show.blade.php) */
.app-bg.bg-detail-inkubator{
  background: linear-gradient(315deg, var(--detail-bg-1) 0%, var(--detail-bg-2) 100%);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

/* pattern detail */
.app-bg.bg-detail-inkubator::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--detail-pattern-url);
  background-repeat: no-repeat;
  background-position: var(--detail-pattern-pos);
  background-size: var(--detail-pattern-size);
  opacity: 0;
  transform: translate3d(24px,-16px,0) scale(1.02);
  transition:
    opacity 900ms cubic-bezier(.22,1,.36,1),
    transform 900ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
  pointer-events: none;
  z-index: 1;
}

/* saat halaman siap */
body.page-ready .app-bg.bg-detail-inkubator::after{
  opacity: var(--detail-pattern-opacity);
  transform: translate3d(0,0,0) scale(1);
}

/* konten di atas background */
.app-bg.bg-detail-inkubator .app-main{
  position: relative;
  z-index: 2;
}

/* =========================
   C) LIST / DETAIL STYLES
========================= */

.li-shell{ max-width: 1200px; padding: 26px 16px 70px; }

/* Kasih ruang dari navbar */
.li-shell{
  padding: 80px 16px 60px; /* adjust kalau navbar lebih tinggi */
}

/* Wrapper header halaman */
/* header */
.li-head{
  margin-top: 0;
  margin-bottom: 18px;
}

/* FIX POSISI JUDUL (NAIK) */
.container.li-shell{
  padding-top: 90px !important;
}
.li-head{
  transform: translateY(-6px) !important;
}

.li-title{
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 8px 0 !important;
  color: #212121;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}

.li-subtitle{
  color: #fff;
  font-weight: 500;
  margin: 2px 0 6px !important;
}

.li-toolbar{
  margin: 6px 0 6px;
  display:flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.li-search{ flex: 1 1 320px; }
.li-filter{ flex: 0 0 260px; }

.li-table-wrap{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background:#fff;
}

.li-table thead th{
  background:#fbfcfd !important;
  padding: 14px 18px !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .6px;
  color:#53646a;
}

.li-table tbody td{
  padding: 18px 18px !important;
  vertical-align: middle;
  border-top: 1px solid rgba(0,0,0,.06);
}

.li-no-wrap{
  font-weight: 800;
  color:#3c5258;
}

.li-name-wrap{
  display:flex;
  align-items:center;
  gap: 14px;
}

.li-avatar{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.06);
  background: radial-gradient(circle at 30% 30%, rgba(47,127,140,.16), rgba(47,127,140,.03));
  flex: 0 0 auto;
}

.li-name{
  font-weight: 800;
  color:#1d5ad6;
  text-decoration:none;
  letter-spacing: .2px;
}
.li-name:hover{ text-decoration: underline; }

.badge-jenis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color:#fff;
  min-width: 190px;
}

/* sesuai jenis */
.badge-pusat{ background:#0f766e; }
.badge-pemda{ background:#f59e0b; }
.badge-pendidikan{ background:#11b7d8; }
.badge-usaha{ background:#6366f1; }
.badge-masyarakat{ background:#22c55e; }

/* PAGINATION */
.li-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 0 24px;
  transition-delay: .75s;
    flex-wrap: wrap;
}

.li-pages{
  display: inline-flex;
  align-items: center;
  gap: 0px;
  flex-wrap: wrap;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.li-page-btn{
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid #e2e8f0;
  background: transparent;
  color: #1e40af;
  font-weight: 700;
  transition: all .2s ease;
}

.li-page-btn:hover{
  background: #e2e8f0;
}

.li-page-btn.is-active{
  background: #2563eb;
  color: #fff;
}

.li-ellipsis{
  color: #6b7a90;
  font-weight: 700;
  padding: 0 12px;
  border-right: 1px solid #e2e8f0;
}

.li-pagination .btn{
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #22466C;
  background: transparent;
  color: #22466C;
  font-weight: 600;
  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

/* hover & focus */
.li-pagination .btn:hover{
  background: linear-gradient(135deg, #22466C 0%, #1b3a57 100%);
  color: #ffffff;
  border-color: #22466C;
  box-shadow: none;
  transform: translateY(-1px);
  outline: none;
}

/* active (saat diklik) */
.li-pagination .btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(34,70,108,.35);
}

/* disabled */
.li-pagination .btn:disabled{
  background: transparent;
  border-color: rgba(34,70,108,.35);
  color: rgba(34,70,108,.35);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* DETAIL CARD */
.li-detail-card{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background:#fff;
  padding: 22px;
}
.li-detail-title{
  font-weight: 900;
  color: var(--teal);
  margin: 0 0 10px;
}
.li-detail-item{
  color:#2b4d54;
  font-weight: 500;
  margin: 4px 0;
}
.li-detail-subtitle{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

/* =========================
   D) PAGE TRANSITIONS
========================= */

.li-title,
.li-subtitle{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.li-subtitle{ transition-delay: .15s; }

body.page-ready .li-title,
body.page-ready .li-subtitle{
  opacity: 1;
  transform: translateY(0);
}

/* default state */
.li-head,
.li-toolbar,
.li-table-wrap,
.li-pagination{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

/* stagger delay */
.li-head{ transition-delay: .15s; }
.li-toolbar{ transition-delay: .30s; }
.li-table-wrap{ transition-delay: .45s; }
.li-pagination{ transition-delay: .60s; }

/* aktif */
body.page-ready .li-head,
body.page-ready .li-toolbar,
body.page-ready .li-table-wrap,
body.page-ready .li-pagination{
  opacity: 1;
  transform: translateY(0);
}

.li-table{
  opacity: 0;
  transition: opacity .8s ease;
}
body.page-ready .li-table{ opacity: 1; }

.li-table tbody tr{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
body.page-ready .li-table tbody tr{
  opacity: 1;
  transform: translateY(0);
}

/* delay bertahap 10 baris */
.li-table tbody tr:nth-child(1){ transition-delay: .05s; }
.li-table tbody tr:nth-child(2){ transition-delay: .08s; }
.li-table tbody tr:nth-child(3){ transition-delay: .11s; }
.li-table tbody tr:nth-child(4){ transition-delay: .14s; }
.li-table tbody tr:nth-child(5){ transition-delay: .17s; }
.li-table tbody tr:nth-child(6){ transition-delay: .20s; }
.li-table tbody tr:nth-child(7){ transition-delay: .23s; }
.li-table tbody tr:nth-child(8){ transition-delay: .26s; }
.li-table tbody tr:nth-child(9){ transition-delay: .29s; }
.li-table tbody tr:nth-child(10){ transition-delay: .32s; }


/* =========================
  E) BUTTON BACK (KEMBALI)
========================= */
.btn-li-back{
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #22466C;
  background: transparent;
  color: #22466C;
  font-weight: 600;
  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-li-back:hover{
  background: linear-gradient(135deg, #22466C 0%, #1b3a57 100%);
  color: #ffffff;
  border-color: #22466C;
  box-shadow: none;
  transform: translateY(-1px);
}

.btn-li-back:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(34,70,108,.35);
}

/* ===============================
   DETAIL INKUBATOR (LIVE-LIKE)
================================ */

/* Navbar lu nutup konten → kasih jarak aman */
.li-detail-wrap{
  padding-top: 110px; /* sesuaikan kalau navbar lu lebih tinggi/rendah */
  margin-top: 0 !important;
}

/* Biar kolom kiri-kanan sejajar dari atas */
.li-detail-wrap .row{
  align-items: flex-start;
}

.li-detail-wrap .card{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  border-top-color: #4788AB;
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
}


/* header teal */
.ink-card__top{
  background: #4788AB;
  color: #fff;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  
}

.ink-logo{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 3px solid rgba(255,255,255,.65);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.ink-logo img{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
}

.ink-title{
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
}

.ink-badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* badges */
.ink-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}

.ink-badge--ok{ background: rgba(25,135,84,.25); border-color: rgba(25,135,84,.35); }
.ink-badge--warn{ background: rgba(255,193,7,.25); border-color: rgba(255,193,7,.35); }
.ink-badge--info{ background: rgba(13,202,240,.25); border-color: rgba(13,202,240,.35); }
.ink-badge--grade{ background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.25); }

/* tabel detail */
.ink-table tr{
  border-top: 1px solid rgba(0,0,0,.06);
}
.ink-table td{
  padding: 12px 16px;
  vertical-align: top;
}
.ink-key{
  width: 38%;
  color: rgba(0,0,0,.75);
  font-weight: 600;
  white-space: nowrap;
}
.ink-val{
  color: rgba(0,0,0,.85);
}

.li-col-left{ 
  position: relative;
  padding-top: 32px; /* jarak aman dari navbar */ 
}

/* parent card yang punya ink-card__top */
.li-col-left .card{
  border-left: none;
  border-right: none;
}
.li-col-right{
  margin-top: 56px; /* coba 40–56px, 48px paling pas */
}


.btn-li-floating{
  position: absolute;
  top: -16px;
  left: 16px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 16px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);

  color: #0d3b44;
  font-weight: 700;
  text-decoration: none;

  transition: 
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

.btn-li-floating:hover,
.btn-li-floating:focus{
  background: #22466C;
  color: #ffffff;

  border-color: transparent;
  box-shadow: 0 10px 24px rgba(34,70,108,.35);

  transform: translateY(-1px);
}


/* === Tabs tombol modal (biar aktif kayak navbar) === */
.ink-modal-tabs .btn{
  border-radius: 999px;
  font-weight: 700;
  transition: 
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

.ink-modal-tabs .btn:hover,
.ink-modal-tabs .btn.is-active{
  transform: translateY(-1px);
  background-color: #22466C;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(34,70,108,.35);
}


/* ===============================
   TENANT CARD
================================ */
.tenant-card__head{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tenant-search{
  min-width: 220px;
}

.tenant-card__body{
  padding: 0;
  max-height: 520px;
  overflow: auto;
}

/* hilangin bullet */
.tenant-lists{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* item tenant */
.tenant-item{
  padding: 0;
  margin: 0;
}

.tenant-avatar{
  width: 56px;
  height: 56px;
  border-radius: 14px;      /* biar kayak card kecil */
  object-fit: cover;
  flex: 0 0 56px;           /* jangan melebar */
  background: #f1f5f9;
}

.tenant-info{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.tenant-name{
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 4px;
  color: #0f172a;
  text-transform: uppercase; /* kalau mau kayak di foto 2, optional */
}

.tenant-addr{
  font-size: 13px;
  color: #64748b;
  line-height: 1.35;
  display: -webkit-box;
  line-clamp: 2;      /* alamat max 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === ARROW DI MODAL DETAIL TENANT (biar aktif kayak navbar) === */
#produkGaleriModal .carousel-control-prev-icon,
#produkGaleriModal .carousel-control-next-icon {
  filter: none;
  background-color: #22466C;
  border-radius: 999px;
  padding: 18px;
  background-size: 60% 60%;
}