/* halaman daftar izin: kartu status + baris yang bisa dibuka */
.page-hero.page-hero-compact { padding: 2.5rem 0 5.5rem; }
.hero-note {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: .45rem .95rem; font-size: .85rem; color: #fff;
}
.list-section { margin-top: -3rem; position: relative; z-index: 2; padding-bottom: 1rem; }

.tone-blue { --tone: #0b5ed7; --tone-soft: rgba(11, 94, 215, .1); }
.tone-green { --tone: #198754; --tone-soft: rgba(25, 135, 84, .1); }
.tone-amber { --tone: #b07900; --tone-soft: rgba(255, 193, 7, .2); }
.tone-red { --tone: #dc3545; --tone-soft: rgba(220, 53, 69, .1); }

.status-card {
  display: flex; gap: .9rem; align-items: center; height: 100%;
  background: #fff; border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow); padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.status-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 31, 61, .1); color: inherit; }
.status-card.is-active { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft), var(--sp-shadow); }
.status-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: .9rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: var(--tone-soft); color: var(--tone);
}
.status-body { display: flex; flex-direction: column; min-width: 0; }
.status-value { font-size: 1.6rem; font-weight: 800; color: var(--sp-ink); line-height: 1.1; }
.status-label { font-weight: 600; font-size: .9rem; color: var(--sp-ink); }
.status-hint { font-size: .75rem; color: var(--sp-muted); }

.list-panel { background: #fff; border: 1px solid var(--sp-border); border-radius: calc(var(--sp-radius) * 1.15); box-shadow: var(--sp-shadow); overflow: hidden; }
.list-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sp-border); }
.search-field { position: relative; flex: 1 1 320px; max-width: 520px; }
.search-field > .bi-search { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--sp-muted); pointer-events: none; }
.search-field input { padding-left: 2.6rem; padding-right: 2.4rem; background: var(--sp-surface); border-color: transparent; }
.search-field input:focus { background: #fff; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--sp-muted); font-size: .8rem; }
.list-toolbar .form-select { min-width: 210px; background-color: var(--sp-surface); border-color: transparent; }

.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1.25rem; border-bottom: 1px solid var(--sp-border); font-size: .85rem; background: #fbfcfe; }
.filter-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(11, 94, 215, .08); color: var(--sp-primary); text-decoration: none; font-weight: 600; font-size: .8rem; }
.filter-chip:hover { background: rgba(11, 94, 215, .15); }

.permit-table { --cols: minmax(0, 2.2fr) minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1.1fr); }
.pt-head, .pt-row > summary { display: grid; grid-template-columns: var(--cols); gap: 1.25rem; align-items: center; padding: .9rem 1.25rem; }
.pt-head { background: var(--sp-surface); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); }
.pt-row { border-top: 1px solid var(--sp-border); position: relative; }
.pt-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); opacity: 0; transition: opacity .15s ease; }
.pt-row:hover::before, .pt-row[open]::before { opacity: 1; }
.pt-row > summary { cursor: pointer; list-style: none; transition: background .15s ease; }
.pt-row > summary::-webkit-details-marker { display: none; }
.pt-row > summary:hover { background: #fafcff; }
.pt-row > summary:focus-visible { outline: 3px solid rgba(11, 94, 215, .35); outline-offset: -3px; }
.pt-row[open] > summary { background: #f7faff; }

.pt-holder { display: flex; gap: .85rem; align-items: center; }
.pt-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tone-soft); color: var(--tone); font-weight: 800;
}
.pt-name { font-weight: 700; color: var(--sp-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-meta { font-size: .8rem; color: var(--sp-muted); margin-top: .15rem; }
.dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 .35rem; opacity: .6; }
.pt-use { font-size: .9rem; color: #3a4a63; }
.pt-cell-label { display: none; }

.validity-bar { height: 6px; border-radius: 999px; background: #e9eef6; overflow: hidden; margin: .35rem 0 .3rem; }
.validity-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.pt-remaining { font-size: .8rem; font-weight: 600; color: var(--tone); }

.status-pill {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--tone-soft); color: var(--tone);
}
.status-pill i { font-size: .45rem; }
.pt-status { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.pt-toggle { color: var(--sp-muted); transition: transform .2s ease; }
.pt-row[open] .pt-toggle { transform: rotate(180deg); }

.pt-detail { padding: .25rem 1.25rem 1.25rem calc(1.25rem + 40px + .85rem); background: #f7faff; }
.pt-detail dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--sp-border); border-radius: .85rem; }
.pt-detail dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); font-weight: 700; margin-bottom: .15rem; }
.pt-detail dd { margin: 0; font-size: .9rem; color: var(--sp-ink); }
.pt-detail .span-2 { grid-column: span 2; }

.list-footer { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-top: 1px solid var(--sp-border); }

@media (max-width: 1199.98px) {
  .permit-table { --cols: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1.1fr); }
  .pt-head > :nth-child(4), .pt-debit { display: none; }
  .pt-detail dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .page-hero.page-hero-compact { padding: 2rem 0 5rem; }
  .list-section { margin-top: -3.25rem; }
  .status-card { padding: .9rem; gap: .7rem; }
  .status-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .status-value { font-size: 1.3rem; }
  .status-label { font-size: .8rem; }
  .status-hint { display: none; }
  .search-field { max-width: none; flex-basis: 100%; }
  .list-toolbar > div:last-child { width: 100%; }
  .list-toolbar .form-select { min-width: 0; flex: 1; }
  .pt-head { display: none; }
  .pt-row > summary { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1rem; }
  .pt-holder { padding-right: 1.75rem; }
  .pt-status { position: absolute; top: 1.1rem; right: 1rem; }
  .pt-status .status-pill { display: none; }
  .pt-use, .pt-validity { padding-left: calc(40px + .85rem); }
  .pt-cell-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); margin-bottom: .15rem; }
  .pt-detail { padding: 0 1rem 1rem; }
  .pt-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-footer { justify-content: center; text-align: center; }
}

/* ===== daftar perusahaan ===== */
.tone-indigo { --tone: #4f46e5; --tone-soft: rgba(79, 70, 229, .1); }
.tone-cyan { --tone: #0891b2; --tone-soft: rgba(8, 145, 178, .1); }
.tone-teal { --tone: #0f766e; --tone-soft: rgba(15, 118, 110, .1); }

.category-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.category-card {
  display: flex; gap: .75rem; align-items: center;
  background: #fff; border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow); padding: .9rem 1rem; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 31, 61, .1); color: inherit; }
.category-card.is-active { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft), var(--sp-shadow); }
.category-card .status-icon { width: 40px; height: 40px; font-size: 1.15rem; border-radius: .8rem; }
.category-card .status-value { font-size: 1.35rem; }
.category-card .status-label { font-size: .8rem; line-height: 1.2; }

.company-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  padding: 1.25rem; background: var(--sp-surface);
}
.co-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.co-card:hover { box-shadow: 0 12px 28px rgba(15, 31, 61, .08); transform: translateY(-2px); border-color: #d4deec; }
.co-head { display: flex; gap: .85rem; align-items: flex-start; padding: 1.15rem 1.15rem .85rem; }
.co-name {
  font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0 0 .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.co-cat {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .55rem; border-radius: 999px; background: var(--tone-soft); color: var(--tone);
}
.co-info { list-style: none; margin: 0; padding: 0 1.15rem 1rem; display: grid; gap: .45rem; font-size: .85rem; color: #4a5a72; flex: 1 1 auto; }
.co-info li { display: flex; gap: .55rem; align-items: flex-start; }
.co-info i { color: var(--sp-muted); margin-top: .1rem; }
.co-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1.15rem; border-top: 1px solid var(--sp-border); background: #fbfcfe;
  border-radius: 0 0 var(--sp-radius) var(--sp-radius);
}
.co-stats { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--sp-muted); }
.co-total strong { color: var(--sp-ink); font-size: 1rem; }
.co-dots { display: inline-flex; gap: .55rem; }
.co-dot { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--tone); font-size: .8rem; }
.co-dot i { font-size: .45rem; }
.co-link { font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.co-link i { transition: transform .15s ease; }
.co-link:hover i { transform: translateX(3px); }
.co-empty { grid-column: 1 / -1; background: #fff; border-radius: var(--sp-radius); }
.co-legend i { font-size: .45rem; vertical-align: middle; margin: 0 .2rem 0 .5rem; }

@media (max-width: 1199.98px) {
  .category-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .category-card { padding: .75rem; }
  .company-grid { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .co-legend { display: none; }
}