/* ==========================================================================
   LUXURY-COMPONENTS.CSS — komponen kanonik Dark Luxury dwi-mode
   ==========================================================================
   Prasyarat: `luxury.css` (token SSOT) WAJIB di-load SEBELUM file ini.
   Semua selector di sini di-scope di bawah [data-lux] (lihat governance di
   luxury.css) — opt-in, nol-efek di halaman tanpa atribut data-lux.

   SATU implementasi per komponen (cegah drift ".project-card 3-impl" yang
   ditemukan feature-registry/_registries/components.md). Variasi tampilan
   dicapai lewat class modifier (mis. `.lux-project-card--compact`), BUKAN
   dengan menulis komponen baru bernama beda untuk kasus mirip.

   Daftar komponen (11, sesuai tugas):
   1. .lux-header        6. .lux-botnav
   2. .lux-card          7. .lux-fab
   3. .lux-stat          8. .lux-list-item (+ .lux-list wrapper)
   4. .lux-project-card  9. .lux-skeleton
   5. .lux-cta          10. .lux-empty
                         11. .lux-layer / .lux-overlay
   Sub-bagian header (.lux-icon-btn/.lux-avatar/.lux-badge) dihitung bagian
   dari komponen #1 (identik pola OsHeader di component-registry).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) .lux-header — header permukaan (judul + subjudul + aksi kanan)
   -------------------------------------------------------------------------- */
[data-lux] .lux-header {
  position: sticky;
  top: 0;
  z-index: var(--lux-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lux-space-3);
  padding: var(--lux-space-4);
  background: var(--lux-glass-bg);
  backdrop-filter: var(--lux-glass-blur);
  -webkit-backdrop-filter: var(--lux-glass-blur);
  border-bottom: 1px solid var(--lux-glass-border);
}
[data-lux] .lux-header-text { min-width: 0; }
[data-lux] .lux-header-title {
  margin: 0;
  font-size: var(--lux-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lux-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-lux] .lux-header-sub {
  margin: 2px 0 0;
  font-size: var(--lux-text-sm);
  color: var(--lux-fg-muted);
}
[data-lux] .lux-header-actions {
  display: flex;
  align-items: center;
  gap: var(--lux-space-2);
  flex: 0 0 auto;
}
[data-lux] .lux-icon-btn {
  position: relative;
  width: var(--lux-touch-min);
  height: var(--lux-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lux-radius-pill);
  background: var(--lux-surface-2);
  border: 1px solid var(--lux-border);
  color: var(--lux-fg);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--lux-t-micro) var(--lux-ease-smooth),
              background var(--lux-t-micro) var(--lux-ease-smooth);
}
@media (hover: hover) {
  [data-lux] .lux-icon-btn:hover { transform: translateY(-1px); background: var(--lux-surface); }
}
[data-lux] .lux-icon-btn:active { transform: translateY(0) scale(0.96); }
[data-lux] .lux-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--lux-radius-pill);
  background: var(--lux-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
[data-lux] .lux-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--lux-border-strong);
}

/* --------------------------------------------------------------------------
   2) .lux-card — kartu generik (pembungkus konten default)
   -------------------------------------------------------------------------- */
[data-lux] .lux-card {
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-card);
  box-shadow: var(--lux-shadow-card);
  padding: var(--lux-space-5);
  transition: transform var(--lux-t-micro) var(--lux-ease-smooth),
              box-shadow var(--lux-t-micro) var(--lux-ease-smooth);
}
@media (hover: hover) {
  [data-lux] .lux-card:hover { transform: translateY(-2px); box-shadow: var(--lux-shadow-elevated); }
}
[data-lux] .lux-card-title {
  margin: 0 0 var(--lux-space-1);
  font-size: var(--lux-text-lg);
  font-weight: 600;
  color: var(--lux-fg);
}
[data-lux] .lux-card-body {
  margin: 0;
  font-size: var(--lux-text-base);
  color: var(--lux-fg-muted);
  line-height: 1.5;
}

/* Focus surface — satu kartu dominan dari anatomy STF-001 Home Staff.
   Nilai rupa tinggal di luxury.css; modul hanya memilih komponen ini. */
[data-lux] .lux-focus-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--lux-focus-border);
  border-radius: var(--lux-radius-focus);
  background: var(--lux-focus-surface);
  box-shadow: var(--lux-focus-shadow);
  backdrop-filter: var(--lux-glass-blur);
  -webkit-backdrop-filter: var(--lux-glass-blur);
  transition: transform var(--lux-t-medium) var(--lux-ease-focus),
              opacity var(--lux-t-medium) var(--lux-ease-focus),
              box-shadow var(--lux-t-medium) var(--lux-ease-focus);
}
[data-lux] .lux-focus-card:focus-within {
  border-color: color-mix(in srgb, var(--lux-gold) 52%, var(--lux-focus-border));
}

/* Shared focus art — exact liquid recipe promoted from STF-001 Home Staff.
   Keep it decorative and compositor-light: one layer plus two pseudo bubbles. */
[data-lux] .lux-focus-liquid {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(61vw, 238px);
  height: min(39vw, 150px);
  border-radius: 48% 52% 60% 40% / 56% 36% 64% 44%;
  background: var(--lux-focus-liquid-surface);
  filter: var(--lux-focus-liquid-filter);
  transform: translate3d(-50%, -50%, 0) rotate(-7deg);
  box-shadow: var(--lux-focus-liquid-shadow);
  pointer-events: none;
}
[data-lux] .lux-focus-liquid::before,
[data-lux] .lux-focus-liquid::after {
  position: absolute;
  content: '';
  border: 1px solid var(--lux-focus-liquid-border);
  border-radius: 50%;
  background: var(--lux-focus-liquid-bubble);
  box-shadow: var(--lux-focus-liquid-bubble-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-lux] .lux-focus-liquid::before {
  left: 9%;
  bottom: -6%;
  width: 38%;
  aspect-ratio: 1;
}
[data-lux] .lux-focus-liquid::after {
  top: -13%;
  right: 12%;
  width: 23%;
  aspect-ratio: 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-lux] .lux-focus-card { transition-duration: 1ms; }
}

/* --------------------------------------------------------------------------
   3) .lux-stat — kartu angka KPI (unifikasi OsStatCard, 1 varian bukan 2)
   -------------------------------------------------------------------------- */
[data-lux] .lux-stat { display: flex; flex-direction: column; gap: 4px; }
[data-lux] .lux-stat-value {
  font-family: var(--lux-font-sans);
  font-weight: var(--lux-weight-kpi);
  font-size: var(--lux-text-kpi);
  color: var(--lux-fg);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
[data-lux] .lux-stat-label {
  font-size: var(--lux-text-sm);
  color: var(--lux-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-lux] .lux-stat-meta { font-size: var(--lux-text-xs); color: var(--lux-gold); }
[data-lux] .lux-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--lux-space-4);
}

/* --------------------------------------------------------------------------
   4) .lux-project-card — kartu/hero identitas proyek (unifikasi OsProjectCard,
      cegah drift 3-implementasi lama). Modifier: --hero (full-bleed) /
      --compact (baris list).
   -------------------------------------------------------------------------- */
[data-lux] .lux-project-card {
  --lux-project-accent: var(--lux-gold);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--lux-radius-card);
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  box-shadow: var(--lux-shadow-card);
  transition: transform var(--lux-t-micro) var(--lux-ease-smooth);
  cursor: default;
}
[data-lux] .lux-project-card:not(.lux-project-card--actions) { cursor: pointer; }
[data-lux] .lux-project-card:not(.lux-project-card--actions):active { transform: scale(0.99); }
[data-lux] .lux-project-card:has(.lux-project-card-hit:active) { transform: scale(0.99); }
[data-lux] .lux-project-card-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  appearance: none;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
[data-lux] .lux-project-card-hit:focus-visible {
  outline: 2px solid var(--lux-project-accent);
  outline-offset: -3px;
}
[data-lux] .lux-project-card-tools {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  min-width: 78px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--lux-project-accent) 28%, var(--lux-border));
  border-radius: var(--lux-radius-pill);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--lux-surface) 91%, white) 0%,
      color-mix(in srgb, var(--lux-surface-2) 90%, var(--lux-project-accent)) 100%);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--lux-project-accent) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
  color: var(--lux-fg);
  font: 650 var(--lux-text-xs)/1 var(--font-sans, system-ui);
  cursor: pointer;
  transition: transform 160ms var(--lux-ease-smooth), opacity 160ms var(--lux-ease-smooth);
}
[data-lux] .lux-project-card-tools b {
  min-width: 18px;
  padding: 4px 5px;
  border-radius: var(--lux-radius-pill);
  background: color-mix(in srgb, var(--lux-project-accent) 18%, transparent);
  color: var(--lux-fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
[data-lux] .lux-project-card-tools:active { transform: scale(.96); }
[data-lux] .lux-project-card-tools:focus-visible {
  outline: 2px solid var(--lux-project-accent);
  outline-offset: 2px;
}
[data-lux] .lux-project-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lux-project-accent) 32%, var(--lux-surface-2)) 0%, var(--lux-surface-2) 90%)
    center / cover no-repeat;
}
[data-lux] .lux-project-card--cat-design { --lux-project-accent: var(--bauhaus-blue, #3f5c7c); }
[data-lux] .lux-project-card--cat-construction { --lux-project-accent: var(--bauhaus-yellow, #d4a82e); }
[data-lux] .lux-project-card--cat-supervision { --lux-project-accent: var(--bauhaus-green, #5a8262); }
[data-lux] .lux-project-card--cat-living { --lux-project-accent: var(--bauhaus-red, #c44a3f); }
[data-lux] .lux-project-card--cat-marketing { --lux-project-accent: var(--bauhaus-red, #c44a3f); }
[data-lux] .lux-project-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
}
[data-lux] .lux-project-card-eyebrow {
  position: absolute;
  top: var(--lux-space-3);
  left: var(--lux-space-3);
  z-index: 1;
  font-size: var(--lux-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lux-gold);
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: var(--lux-radius-pill);
  backdrop-filter: blur(6px);
}
[data-lux] .lux-project-card-pct {
  position: absolute;
  z-index: 1;
  bottom: var(--lux-space-3);
  left: var(--lux-space-3);
  font-size: var(--lux-text-kpi);
  font-weight: var(--lux-weight-kpi);
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
[data-lux] .lux-project-card-percent-unit {
  margin-left: 2px;
  font-size: .5em;
  opacity: .62;
}
[data-lux] .lux-project-card-body {
  padding: var(--lux-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-lux] .lux-project-card-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--lux-space-2);
}
[data-lux] .lux-project-card-kicker {
  overflow: hidden;
  color: var(--lux-fg-subtle);
  font-family: var(--font-mono, ui-monospace);
  font-size: var(--lux-text-xs);
  letter-spacing: .05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-lux] .lux-project-card-name {
  margin: 0;
  font-size: var(--lux-text-xl);
  font-weight: 600;
  color: var(--lux-fg);
}
[data-lux] .lux-project-card-meta {
  margin: 0;
  font-size: var(--lux-text-sm);
  color: var(--lux-fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-lux] .lux-project-card-bar {
  height: 6px;
  border-radius: var(--lux-radius-pill);
  background: var(--lux-surface-2);
  overflow: hidden;
  margin-top: 4px;
}
[data-lux] .lux-project-card-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lux-project-accent);
  transition: width var(--lux-t-slow) var(--lux-ease-smooth);
}
[data-lux] .lux-project-card-spark {
  position: relative;
  height: 36px;
}
[data-lux] .lux-project-card-spark svg {
  display: block;
  width: 100%;
  height: 100%;
}
[data-lux] .lux-project-card-facts {
  display: flex;
  min-width: 0;
  gap: var(--lux-space-3);
  color: var(--lux-fg-subtle);
  font-size: var(--lux-text-xs);
}
[data-lux] .lux-project-card-fact {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Modifier --hero: dipakai di Home (CLI-006 gaya) — media lebih dominan */
[data-lux] .lux-project-card--hero .lux-project-card-media { aspect-ratio: 4 / 5; }
/* Modifier --compact: baris list (dipakai di CLI-005 / cockpit gaya) */
[data-lux] .lux-project-card--compact { flex-direction: row; }
[data-lux] .lux-project-card--compact .lux-project-card-media {
  width: 96px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
}
[data-lux] .lux-project-card--compact .lux-project-card-body {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: var(--lux-space-3) var(--lux-space-4);
}
[data-lux] .lux-project-card--compact .lux-project-card-name { font-size: var(--lux-text-lg); }

/* Modifier --staff: information-dense mobile list. Geometry lives here so
   route stylesheets never create a fourth project-card implementation. */
[data-lux] .lux-project-card--staff {
  min-height: 162px;
  align-items: stretch;
  border-radius: 18px;
  background: var(--lux-surface);
  box-shadow: var(--lux-shadow-card);
}
[data-lux] .lux-project-card--staff .lux-project-card-media {
  width: clamp(102px, 31vw, 124px);
  min-height: 162px;
  align-self: stretch;
  flex: 0 0 clamp(102px, 31vw, 124px);
  aspect-ratio: auto;
}
[data-lux] .lux-project-card--staff .lux-project-card-shade {
  background: linear-gradient(180deg, rgba(8, 8, 8, .04) 20%, rgba(8, 8, 8, .82) 100%);
}
[data-lux] .lux-project-card--staff .lux-project-card-eyebrow {
  top: 10px;
  left: 9px;
  max-width: calc(100% - 18px);
  overflow: hidden;
  padding: 4px 8px;
  color: var(--lux-gold-soft, #f0dfc8);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-lux] .lux-project-card--staff .lux-project-card-pct {
  bottom: 12px;
  left: 10px;
  font-size: 24px;
}
[data-lux] .lux-project-card--staff .lux-project-card-body {
  min-width: 0;
  justify-content: flex-start;
  gap: 5px;
  padding: 13px 12px 58px;
}
[data-lux] .lux-project-card--staff .lux-project-card-name {
  margin-top: 1px;
  font-size: clamp(15px, 4.6vw, 18px);
  letter-spacing: -.025em;
}
[data-lux] .lux-project-card--staff .lux-project-card-meta {
  display: -webkit-box;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
[data-lux] .lux-project-card--staff .lux-project-card-bar {
  height: 4px;
  margin-top: 2px;
}
[data-lux] .lux-project-card--staff .lux-project-card-spark {
  height: 25px;
  margin: 1px 0 2px;
  opacity: .82;
}
[data-lux] .lux-project-card--staff .lux-project-card-facts {
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--lux-fg-subtle);
  font-size: 8px;
}

/* Modifier --pipeline: the same project identity in a denser kanban column. */
[data-lux] .lux-project-card--pipeline {
  min-height: 92px;
  margin-bottom: 10px;
  border-radius: 14px;
  box-shadow: none;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-media {
  width: 72px;
  min-height: 92px;
  flex-basis: 72px;
  aspect-ratio: auto;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-eyebrow {
  top: 8px;
  left: 8px;
  padding: 3px 6px;
  font-size: 7px;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-pct {
  bottom: 9px;
  left: 8px;
  font-size: 19px;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-body {
  gap: 4px;
  padding: 10px 58px 10px 10px;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-name {
  overflow: hidden;
  font-size: var(--lux-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-meta {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--lux-text-xs);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-bar { height: 3px; }
[data-lux] .lux-project-card--pipeline .lux-project-card-tools {
  right: 7px;
  bottom: 7px;
  min-width: 44px;
  width: 44px;
  padding: 0;
}
[data-lux] .lux-project-card--pipeline .lux-project-card-tools > span { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-lux] .lux-project-card,
  [data-lux] .lux-project-card-tools {
    transition-duration: 1ms;
  }
}

/* Shared bounded-list navigation. The pager replaces project-card DOM between
   pages so large portfolios do not accumulate hidden cards or listeners. */
[data-lux] .lux-project-pager {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px 4px;
  color: var(--lux-fg-subtle);
  font-family: var(--font-mono, ui-monospace);
  font-size: var(--lux-text-xs);
}
[data-lux] .lux-project-pager button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--lux-border);
  border-radius: 50%;
  background: var(--lux-surface);
  color: var(--lux-fg);
  box-shadow: var(--lux-shadow-card);
  cursor: pointer;
  place-items: center;
}
[data-lux] .lux-project-pager button:disabled {
  cursor: default;
  opacity: .34;
}
[data-lux] .lux-project-pager--pipeline {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-pill);
  background: color-mix(in srgb, var(--lux-surface) 92%, transparent);
}

/* Modifier --admin: capability-rich card frame. Advanced controls remain slots,
   while surface, accent, radius and motion stay in the canonical component. */
[data-lux] .lux-project-card--admin {
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-card);
  background: var(--lux-surface);
  box-shadow: var(--lux-shadow-card);
}
[data-lux] .lux-project-card--admin::before {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--lux-project-accent);
  content: "";
}
[data-lux] .dl-badge,
[data-lux] .fictive-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--lux-radius-pill);
  font-family: var(--font-mono, ui-monospace);
  font-size: var(--lux-text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
[data-lux] .dl-badge.dl-overdue,
[data-lux] .dl-badge.dl-urgent {
  background: color-mix(in srgb, var(--lux-danger, #c44a3f) 16%, transparent);
  color: var(--lux-danger, #c44a3f);
}
[data-lux] .dl-badge.dl-soon {
  background: color-mix(in srgb, var(--lux-warning, #d4a82e) 18%, transparent);
  color: var(--lux-warning, #d4a82e);
}
[data-lux] .dl-badge.dl-normal,
[data-lux] .dl-badge.dl-done {
  background: color-mix(in srgb, var(--lux-success, #5a8262) 16%, transparent);
  color: var(--lux-success, #5a8262);
}
[data-lux] .dl-badge.dl-far,
[data-lux] .dl-badge.dl-none {
  background: var(--lux-surface-2);
  color: var(--lux-fg-subtle);
}
[data-lux] .fictive-badge {
  background: color-mix(in srgb, var(--lux-warning, #d4a82e) 20%, transparent);
  color: var(--lux-warning, #d4a82e);
}
@media (hover: hover) and (pointer: fine) {
  [data-lux] .lux-project-card:hover { transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   5) .lux-cta — 1 aksi utama dominan (unifikasi OsCTAButton + tone yang
      benar-benar di-wire, bukan CSS-only seperti drift lama)
   -------------------------------------------------------------------------- */
[data-lux] .lux-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--lux-space-3);
  /* RULE 9 Client Constitution (2026-07-17): 1 aksi utama lebar-penuh, tinggi 56 —
     radius tetap --lux-radius-card kanonik (bukan token baru, lihat luxury.css). */
  min-height: var(--lux-cta-height, 56px);
  padding: var(--lux-space-4);
  border: none;
  border-radius: var(--lux-radius-card);
  background: var(--lux-gold);   /* FLAT tan — mockup 'Mulai Sekarang' #9e8571 */
  color: var(--lux-cta-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--lux-shadow-card);
  font-family: var(--lux-font-sans);
  transition: transform var(--lux-t-micro) var(--lux-ease-smooth),
              box-shadow var(--lux-t-micro) var(--lux-ease-smooth);
}
[data-lux] .lux-cta:active { transform: scale(0.98); }
[data-lux] .lux-cta-ico {
  flex: 0 0 auto;
  width: var(--lux-touch-min);
  height: var(--lux-touch-min);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
/* #klien-cta-fix upstream (2026-07-17): .lux-cta-title/.lux-cta-sub sbg <span> TANPA
   display:block/flex di dalam .lux-cta-txt → keduanya inline & nyambung jadi satu baris
   ("SelesaiSampaikan..."). Dulu ditambal LOKAL di app-klien.html — sekarang kanonik di sini
   supaya SEMUA pemakai .lux-cta (app-klien, preview) benar tanpa override per-modul. */
[data-lux] .lux-cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
[data-lux] .lux-cta-title { margin: 0; font-size: var(--lux-text-base); font-weight: 700; }
[data-lux] .lux-cta-sub { margin: 2px 0 0; font-size: var(--lux-text-sm); opacity: 0.85; }
[data-lux] .lux-cta-arrow { flex: 0 0 auto; font-size: 18px; opacity: 0.75; }
/* Tone: pay/approve/done dipakai saat kondisi server memicu (Rule 003 — UI
   HANYA menampilkan tone yang sudah diputuskan backend, bukan menghitung sendiri) */
[data-lux] .lux-cta--pay { background: var(--lux-danger); color: #fff; }
[data-lux] .lux-cta--approve { background: var(--lux-info); color: #fff; }
/* Pixel-parity 6b: hijau menyala = obral visual; done = tinted tenang (premium restraint). */
[data-lux] .lux-cta--done { background: color-mix(in srgb, var(--lux-success) 15%, var(--lux-surface)); color: var(--lux-fg); border: 1px solid color-mix(in srgb, var(--lux-success) 38%, transparent); }
[data-lux] .lux-cta--done .lux-cta-sub { color: var(--lux-fg-muted); }

/* === STAFF LEAVE SHEET · STF-LEAVE-001 ================================
   Presenter shared App Staff + App Lapangan. Styling lives here so the
   leave flow cannot establish a parallel token system at runtime. */
[data-lux] body.leave-modal-open { overflow: hidden; }
[data-lux] .staff-leave-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--lux-z-modal) + 5);
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-lux] .staff-leave-card {
  display: grid;
  width: 100%;
  max-width: 620px;
  max-height: min(92dvh, 820px);
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--lux-border);
  border-bottom: 0;
  border-radius: var(--lux-radius-modal) var(--lux-radius-modal) 0 0;
  background: color-mix(in srgb, var(--lux-surface) 94%, transparent);
  box-shadow: var(--lux-shadow-elevated);
  color: var(--lux-fg);
  font-family: var(--lux-font-sans);
  animation: staff-leave-sheet-in var(--lux-t-medium) var(--lux-ease-smooth) both;
}
@keyframes staff-leave-sheet-in {
  from { transform: translateY(24px); opacity: 0.55; }
  to { transform: translateY(0); opacity: 1; }
}
[data-lux] .staff-leave-handle {
  width: 42px;
  height: 4px;
  margin: var(--lux-space-3) auto var(--lux-space-2);
  border-radius: var(--lux-radius-xs);
  background: var(--lux-border-strong);
}
[data-lux] .staff-leave-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lux-space-3);
  padding: 0 var(--lux-space-4) var(--lux-space-3);
}
[data-lux] .staff-leave-eyebrow {
  margin-bottom: var(--lux-space-1);
  color: var(--lux-gold);
  font-size: var(--lux-text-label-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
}
[data-lux] .staff-leave-title {
  font-size: var(--lux-text-h2);
  font-weight: var(--lux-weight-heading);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
[data-lux] .staff-leave-sub {
  max-width: 36rem;
  margin-top: var(--lux-space-1);
  color: var(--lux-fg-muted);
  font-size: var(--lux-text-sm);
  line-height: 1.5;
}
[data-lux] .staff-leave-close {
  display: inline-grid;
  width: var(--lux-touch-min);
  height: var(--lux-touch-min);
  flex: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-btn);
  background: var(--lux-surface-2);
  color: var(--lux-fg);
  cursor: pointer;
}
[data-lux] .staff-leave-close svg {
  width: var(--lux-icon-size);
  height: var(--lux-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--lux-icon-stroke);
}
[data-lux] .staff-leave-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--lux-space-4) calc(var(--lux-space-5) + var(--lux-safe-bottom));
  scrollbar-gutter: stable;
}
[data-lux] .staff-leave-balance {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
  gap: var(--lux-space-3);
  padding: var(--lux-space-3) 0;
  border-top: 1px solid var(--lux-border);
  border-bottom: 1px solid var(--lux-border);
  color: var(--lux-fg-muted);
  font-size: var(--lux-text-sm);
  line-height: 1.45;
}
[data-lux] .staff-leave-balance strong {
  color: var(--lux-fg);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: right;
}
[data-lux] .staff-leave-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lux-space-3);
  margin-top: var(--lux-space-4);
}
[data-lux] .staff-leave-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--lux-space-2);
  color: var(--lux-fg-muted);
  font-size: var(--lux-text-label);
  font-weight: 600;
  text-align: left;
}
[data-lux] .staff-leave-form .wide { grid-column: 1 / -1; }
[data-lux] .staff-leave-form input,
[data-lux] .staff-leave-form select,
[data-lux] .staff-leave-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--lux-touch-min);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-sm);
  background: var(--lux-surface-2);
  color: var(--lux-fg);
  font: inherit;
  font-size: var(--lux-text-input);
  font-weight: 400;
  line-height: 1.35;
}
[data-lux] .staff-leave-form input,
[data-lux] .staff-leave-form select { padding: 10px var(--lux-space-3); }
[data-lux] .staff-leave-form input[type="date"] { color-scheme: dark; }
[data-lux][data-lux-mode="light"] .staff-leave-form input[type="date"] { color-scheme: light; }
[data-lux] .staff-leave-form textarea {
  min-height: 88px;
  padding: var(--lux-space-3);
  resize: vertical;
}
[data-lux] .staff-leave-form input:focus-visible,
[data-lux] .staff-leave-form select:focus-visible,
[data-lux] .staff-leave-form textarea:focus-visible,
[data-lux] .staff-leave-close:focus-visible,
[data-lux] .staff-leave-submit:focus-visible,
[data-lux] .staff-leave-link:focus-visible,
[data-lux] .staff-leave-file:focus-within {
  outline: 2px solid var(--lux-gold);
  outline-offset: 2px;
}
[data-lux] .staff-leave-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lux-space-3);
}
[data-lux] .staff-leave-label-row small {
  color: var(--lux-fg-muted);
  font-size: var(--lux-text-label-sm);
  font-weight: 400;
}
[data-lux] .staff-leave-file {
  position: relative;
  display: grid;
  min-height: 52px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lux-space-3);
  overflow: hidden;
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-sm);
  background: var(--lux-surface-2);
  cursor: pointer;
}
[data-lux] .staff-leave-file-action {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--lux-space-3);
  border-right: 1px solid var(--lux-border);
  color: var(--lux-fg);
  font-size: var(--lux-text-sm);
  font-weight: 600;
}
[data-lux] .staff-leave-file-name {
  min-width: 0;
  overflow: hidden;
  padding-right: var(--lux-space-3);
  color: var(--lux-fg-muted);
  font-size: var(--lux-text-sm);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-lux] .staff-leave-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
[data-lux] .staff-leave-submit {
  min-height: var(--lux-cta-height);
  margin-top: var(--lux-space-1);
  padding: 0 var(--lux-space-4);
  border: 0;
  border-radius: var(--lux-radius-card);
  background: var(--lux-gold);
  color: var(--lux-cta-ink);
  font: inherit;
  font-size: var(--lux-text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--lux-t-micro) var(--lux-ease-smooth), opacity var(--lux-t-micro) var(--lux-ease-smooth);
}
[data-lux] .staff-leave-submit:active { transform: scale(0.985); }
[data-lux] .staff-leave-submit:disabled { opacity: 0.52; cursor: not-allowed; }
[data-lux] .staff-leave-status {
  min-height: 20px;
  color: var(--lux-fg-muted);
  font-size: var(--lux-text-sm);
  font-weight: 400;
  line-height: 1.45;
}
[data-lux] .staff-leave-history { margin-top: var(--lux-space-5); }
[data-lux] .staff-leave-list-title {
  padding-bottom: var(--lux-space-2);
  color: var(--lux-fg);
  font-size: var(--lux-text-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
}
[data-lux] .staff-leave-request {
  display: flex;
  min-height: 48px;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lux-space-3);
  padding: var(--lux-space-3) 0;
  border-top: 1px solid var(--lux-border);
  color: var(--lux-fg);
  font-size: var(--lux-text-sm);
  line-height: 1.45;
  text-align: left;
}
[data-lux] .staff-leave-request-meta { margin-top: var(--lux-space-1); color: var(--lux-fg-muted); }
[data-lux] .staff-leave-actions { display: flex; flex: none; align-items: center; gap: var(--lux-space-2); }
[data-lux] .staff-leave-link {
  min-height: var(--lux-touch-min);
  padding: 0 var(--lux-space-2);
  border: 0;
  border-radius: var(--lux-radius-sm);
  background: transparent;
  color: var(--lux-gold);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@media (min-width: 768px) {
  [data-lux] .staff-leave-modal { align-items: center; padding: var(--lux-space-6); }
  [data-lux] .staff-leave-card {
    width: min(620px, calc(100vw - 48px));
    max-height: min(86dvh, 780px);
    border-bottom: 1px solid var(--lux-border);
    border-radius: var(--lux-radius-modal);
  }
  [data-lux] .staff-leave-handle { display: none; }
  [data-lux] .staff-leave-head { padding: var(--lux-space-5) var(--lux-space-5) var(--lux-space-3); }
  [data-lux] .staff-leave-scroll { padding: 0 var(--lux-space-5) var(--lux-space-5); }
}
@media (max-width: 420px) {
  [data-lux] .staff-leave-form { grid-template-columns: minmax(0, 1fr); }
  [data-lux] .staff-leave-form .wide { grid-column: auto; }
}
@media (max-height: 640px) {
  [data-lux] .staff-leave-card { max-height: 96dvh; }
}
@media (prefers-reduced-motion: reduce) {
  [data-lux] .staff-leave-card { animation: none; }
  [data-lux] .staff-leave-submit { transition-duration: 1ms; }
}
@media (forced-colors: active) {
  [data-lux] .staff-leave-card,
  [data-lux] .staff-leave-close,
  [data-lux] .staff-leave-file,
  [data-lux] .staff-leave-form input,
  [data-lux] .staff-leave-form select,
  [data-lux] .staff-leave-form textarea { border: 1px solid CanvasText; }
}
/* === END STAFF LEAVE SHEET · STF-LEAVE-001 ============================ */
[data-lux] .lux-cta--chat { background: var(--lux-bronze); color: #fff; }

/* --------------------------------------------------------------------------
   6) .lux-botnav — navigasi bawah 5-ikon (glass, footer-flush, ikon+label)
   -------------------------------------------------------------------------- */
[data-lux] .lux-botnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--lux-z-botnav);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--lux-botnav-height) + var(--lux-safe-bottom));
  padding-bottom: var(--lux-safe-bottom);
  background: var(--lux-glass-bg);
  backdrop-filter: var(--lux-glass-blur);
  -webkit-backdrop-filter: var(--lux-glass-blur);
  border-top: 1px solid var(--lux-glass-border);
}
[data-lux] .lux-botnav-btn {
  flex: 1;
  min-height: var(--lux-touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--lux-fg-muted);
  font-family: var(--lux-font-sans);
  font-size: var(--lux-text-xs);
  cursor: pointer;
  transition: color var(--lux-t-micro) var(--lux-ease-smooth),
              transform var(--lux-t-micro) var(--lux-ease-smooth);
}
[data-lux] .lux-botnav-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
[data-lux] .lux-botnav-btn.active { color: var(--lux-gold); }
[data-lux] .lux-botnav-btn:active { transform: scale(0.92); }
@media (min-width: 1024px) {
  [data-lux] .lux-botnav { display: none; }
}
/* Kontrak wajib (samakan pola osmo-has-botnav existing): body butuh class ini
   supaya FAB tidak menimpa tab terakhir botnav */
body.lux-has-botnav { padding-bottom: var(--lux-botnav-height, 64px); }

/* --------------------------------------------------------------------------
   7) .lux-fab — floating action button (mis. kamera lapangan / chat AI)
   -------------------------------------------------------------------------- */
[data-lux] .lux-fab {
  position: fixed;
  right: var(--lux-space-4);
  bottom: calc(var(--lux-space-4) + var(--lux-safe-bottom));
  z-index: var(--lux-z-fab);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--lux-gold);   /* FLAT tan */
  color: var(--lux-cta-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--lux-shadow-fab);
  transition: transform var(--lux-t-micro) var(--lux-ease-spring);
}
[data-lux] .lux-fab:active { transform: scale(0.92); }
/* Sesuai kontrak §6 di atas: kalau botnav hadir, angkat FAB di atasnya */
body.lux-has-botnav [data-lux] .lux-fab {
  bottom: calc(var(--lux-botnav-height) + var(--lux-space-4) + var(--lux-safe-bottom));
}
@media (min-width: 1024px) {
  body.lux-has-botnav [data-lux] .lux-fab { bottom: var(--lux-space-6); }
}

/* --------------------------------------------------------------------------
   8) .lux-list / .lux-list-item — daftar generik (unifikasi OsListItem)
   -------------------------------------------------------------------------- */
[data-lux] .lux-list { display: flex; flex-direction: column; gap: var(--lux-space-2); }
[data-lux] .lux-list-item {
  display: flex;
  align-items: center;
  gap: var(--lux-space-3);
  min-height: var(--lux-touch-min);
  padding: var(--lux-space-3);
  border-radius: var(--lux-radius-sm);
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  transition: background var(--lux-t-micro) var(--lux-ease-smooth);
}
[data-lux] .lux-list-item:active { background: var(--lux-surface-2); }
[data-lux] .lux-list-item-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lux-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
[data-lux] .lux-list-item-text { flex: 1; min-width: 0; }
[data-lux] .lux-list-item-title {
  margin: 0;
  font-size: var(--lux-text-base);
  font-weight: 500;
  color: var(--lux-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-lux] .lux-list-item-meta { margin: 2px 0 0; font-size: var(--lux-text-xs); color: var(--lux-fg-muted); }
[data-lux] .lux-list-item-action { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   9) .lux-skeleton — shimmer loading (bukan teks "Memuat...", per UIX-08)
   -------------------------------------------------------------------------- */
[data-lux] .lux-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--lux-radius-sm);
  background: var(--lux-surface-2);
}
[data-lux] .lux-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--lux-border-strong), transparent);
  animation: lux-shimmer 1.6s linear infinite;
}
@keyframes lux-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-lux] .lux-skeleton::after { animation: none; opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   10) .lux-empty — empty state yang MENGAJAR (Prinsip #4 Visual Product Bible)
   -------------------------------------------------------------------------- */
[data-lux] .lux-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--lux-space-2);
  padding: var(--lux-space-8) var(--lux-space-4);
  color: var(--lux-fg-muted);
}
[data-lux] .lux-empty-icon { font-size: 40px; opacity: 0.85; }
[data-lux] .lux-empty-title { margin: 0; font-size: var(--lux-text-lg); font-weight: 600; color: var(--lux-fg); }
[data-lux] .lux-empty-desc { margin: 0; max-width: 32ch; font-size: var(--lux-text-sm); }
[data-lux] .lux-empty-cta {
  margin-top: var(--lux-space-2);
  font-size: var(--lux-text-sm);
  font-weight: 600;
  color: var(--lux-gold);
  text-decoration: none;
  min-height: var(--lux-touch-min);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--lux-space-2);
}

/* --------------------------------------------------------------------------
   11) .lux-layer / .lux-overlay — one bounded portal anatomy for dialog,
       bottom-sheet, toast and boot loader. The layer token owns stacking;
       children never compete with local z-index values.
   -------------------------------------------------------------------------- */
[data-lux] .lux-layer {
  position: fixed;
  inset: 0;
  display: grid;
  pointer-events: none;
}
[data-lux] .lux-layer[data-layer="overlay"] { z-index: var(--lux-z-modal); }
[data-lux] .lux-layer[data-layer="toast"] { z-index: var(--lux-z-toast); }
[data-lux] .lux-layer[data-layer="loader"] { z-index: var(--lux-z-loader); }

[data-lux] .lux-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--lux-margin-screen);
  pointer-events: auto;
}
[data-lux] .lux-overlay[hidden] { display: none; }
[data-lux] .lux-overlay-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lux-bg) 78%, transparent);
  opacity: 1;
  transition: opacity var(--lux-t-medium) var(--lux-ease-smooth);
}
[data-lux] .lux-overlay-panel {
  position: relative;
  display: flex;
  width: min(100%, 40rem);
  max-height: calc(100dvh - (var(--lux-margin-screen) * 2));
  flex-direction: column;
  overflow: auto;
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-modal);
  background: var(--lux-surface);
  box-shadow: var(--lux-shadow-elevated);
  color: var(--lux-fg);
  overscroll-behavior: contain;
  transform: translateY(0);
  transition: transform var(--lux-t-medium) var(--lux-ease-smooth),
              opacity var(--lux-t-medium) var(--lux-ease-smooth);
}
[data-lux] .lux-overlay[data-presentation="sheet"] {
  align-items: end;
}
[data-lux] .lux-overlay[data-presentation="sheet"] .lux-overlay-panel {
  width: min(100%, 48rem);
}
[data-lux] .lux-overlay[data-state="closed"] {
  visibility: hidden;
  pointer-events: none;
}
[data-lux] .lux-overlay[data-state="closed"] .lux-overlay-scrim {
  opacity: 0;
}
[data-lux] .lux-overlay[data-state="closed"] .lux-overlay-panel {
  opacity: 0;
  transform: translateY(var(--lux-space-4));
}
[data-lux] .lux-overlay-close {
  display: inline-grid;
  min-width: var(--lux-touch-min);
  min-height: var(--lux-touch-min);
  padding: var(--lux-space-2);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-pill);
  background: var(--lux-surface-2);
  color: var(--lux-fg);
  cursor: pointer;
  place-items: center;
}

@media (prefers-reduced-motion: reduce) {
  [data-lux] .lux-overlay-scrim,
  [data-lux] .lux-overlay-panel {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   MOBILE-FIRST — no horizontal overflow guard untuk shell yang pakai komponen
   di atas (checklist CLAUDE.md §MOBILE-FIRST)
   -------------------------------------------------------------------------- */
[data-lux] { max-width: 100%; }
[data-lux] .lux-header,
[data-lux] .lux-card,
[data-lux] .lux-focus-card,
[data-lux] .lux-project-card,
[data-lux] .lux-cta,
[data-lux] .lux-list-item {
  box-sizing: border-box;
  max-width: 100%;
}

/* Canonical module loader: one OSMORPH identity across staff tools. */
.osmo-loading-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--osmo-loading-logo-bg, var(--foreground, #f4f1eb));
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--lux-shadow-card, var(--neu-out));
  animation: pulse 1.6s ease-in-out infinite;
}
.osmo-loading-logo img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}
html[data-lux-mode="light"] .osmo-loading-logo img {
  filter: invert(1) contrast(1.05);
}