/* Every block rule below is scoped under .direktori. A host template styling
   `.page__main ul`, `.page__main h2` or similar does so at specificity (0,1,1),
   which outranks a single class -- that has already cost this project silent
   breakage in four other components. Keep new rules scoped the same way,
   including inside @media blocks. */
/* Staff directory. Inherits the template's palette custom properties, with
   fallbacks so the component still looks right under any template. */

.direktori { --d-line: var(--line, #DFE4EA); --d-navy: var(--navy-900, #062F5C);
             --d-blue: var(--navy-800, #0B4D8F); --d-ink: var(--ink-900, #12171F);
             --d-muted: var(--ink-600, #48525F); --d-soft: var(--bg-soft, #F5F7FA); }

.direktori .direktori__title { font-size: 1.75rem; color: var(--d-navy); margin-bottom: 20px; }

/* Filters ---------------------------------------------------------------- */
.direktori .direktori__filters {
  background: var(--d-soft); border: 1px solid var(--d-line); border-radius: 10px;
  padding: 20px; margin-bottom: 24px;
}
.direktori .direktori__search { margin-bottom: 16px; }
.direktori .direktori__search label,
.direktori .direktori__facet label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--d-muted); margin-bottom: 5px;
}
.direktori .direktori__search input {
  width: 100%; max-width: 460px; padding: 10px 14px; font-size: .9375rem;
  font-family: inherit; border: 1px solid var(--d-line); border-radius: 6px; background: #fff;
}
.direktori .direktori__facets { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.direktori .direktori__facet select {
  width: 100%; min-height: 42px; padding: 8px 12px; font-size: .9375rem;
  font-family: inherit; border: 1px solid var(--d-line); border-radius: 6px; background: #fff;
}
.direktori .direktori__facet select:disabled { background: #EEF1F4; color: var(--d-muted); }
.direktori .direktori__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Fallback button styling when the template provides none. */
.direktori .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 22px; border-radius: 6px; font-weight: 600;
  font-size: .9375rem; text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.direktori .btn--primary { background: var(--d-blue); color: #fff; }
.direktori .btn--primary:hover { background: var(--d-navy); }
.direktori .btn--ghost-dark { border-color: var(--d-blue); color: var(--d-blue); background: none; }
.direktori .btn--ghost-dark:hover { background: rgba(11, 77, 143, .08); }

.direktori .direktori__count { margin: 0 0 12px; color: var(--d-muted); font-size: .9375rem; }
.direktori .direktori__empty {
  padding: 28px; text-align: center; color: var(--d-muted);
  background: var(--d-soft); border: 1px dashed var(--d-line); border-radius: 10px;
}

/* Results ---------------------------------------------------------------- */
.direktori .direktori__tablewrap { overflow-x: auto; }
.direktori .direktori__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.direktori .direktori__table caption { text-align: left; }
.direktori .direktori__table th, .direktori__table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--d-line); vertical-align: top;
}
/* No text-transform. Chrome applies it when computing the accessible name, so
   an uppercased <th> reaches assistive technology as "NAMA" -- and a screen
   reader announces the column header with every cell during table navigation,
   so this is heard constantly, not once. Weight and spacing carry the styling. */
.direktori .direktori__table thead th {
  background: var(--d-navy); color: #fff; font-weight: 700; font-size: .8125rem;
  letter-spacing: .03em; border-bottom: 0;
}
.direktori .direktori__table tbody tr:hover { background: var(--d-soft); }
.direktori .direktori__table tbody th { font-weight: 700; color: var(--d-ink); }
.direktori .direktori__gred, .direktori .direktori__ext {
  display: inline-block; font-size: .75rem; font-weight: 600; color: var(--d-muted);
  background: var(--d-soft); border: 1px solid var(--d-line);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
/* The grade always sits on its own line so the name column reads evenly,
   rather than wrapping beside short names and below long ones. */
.direktori .direktori__gred { display: block; width: fit-content; margin-top: 5px; }
.direktori .direktori__ext { margin-left: 6px; }
.direktori .direktori__table a { color: var(--d-blue); }
.direktori .direktori__pagination { margin-top: 20px; }
.direktori .direktori__pagination ul { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; }
.direktori .direktori__pagination a, .direktori__pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;   /* comfortably past the 24px minimum of SC 2.5.8 */
  border: 1px solid var(--d-line); border-radius: 6px; text-decoration: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 900px) { .direktori .direktori__facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .direktori .direktori__facets { grid-template-columns: 1fr; }

  /* Reflow the table to stacked cards rather than forcing a horizontal
     scroll — WCAG 1.4.10 at 320px. */
  .direktori .direktori__table thead { display: none; }
  .direktori .direktori__table, .direktori__table tbody, .direktori__table tr, .direktori__table th, .direktori__table td { display: block; }
  .direktori .direktori__table tr {
    border: 1px solid var(--d-line); border-radius: 10px;
    margin-bottom: 12px; padding: 6px 0; background: #fff;
  }
  .direktori .direktori__table th, .direktori__table td { border-bottom: 0; padding: 8px 14px; }
  .direktori .direktori__table td[data-label]::before {
    content: attr(data-label); display: block; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--d-muted); margin-bottom: 2px;
  }
}

/* Column widths are pinned rather than left to auto-layout. The contact column
   holds the longest strings (phone + extension + e-mail), so auto-layout gave
   it a quarter more width than it needed and squeezed the name column until
   staff names wrapped mid-name — "Ahmad bin / Abdullah". Names are what people
   scan for, so the name column is protected. */
.direktori .direktori__table { table-layout: fixed; }
.direktori .direktori__table thead th:nth-child(1) { width: 27%; }
.direktori .direktori__table thead th:nth-child(2) { width: 22%; }
.direktori .direktori__table thead th:nth-child(3) { width: 24%; }
.direktori .direktori__table thead th:nth-child(4) { width: 27%; }

/* Phone and e-mail stack, so every contact cell has the same shape instead of
   sometimes sitting on one line and sometimes two. */
.direktori .direktori__table tbody td a[href^="tel:"],
.direktori .direktori__email { display: inline-block; }
.direktori .direktori__email { margin-top: 4px; }
.direktori .direktori__table tbody td a[href^="tel:"] { margin-right: 2px; }

/* Long words (e-mail addresses) must break rather than force the column wider
   than its share, now that the layout is fixed. */
.direktori .direktori__table td, .direktori .direktori__table th { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  /* The card layout below has no columns to size. */
  .direktori .direktori__table { table-layout: auto; }
}